/* ── VENTURES HARBOR — homepage, client redesign (8 Oct 2026) ─────────────────
   Light, editorial: a serif display face (Fraunces) over the site's Plus Jakarta
   Sans, navy ink, a green hero CTA (gold no longer appears in the hero), and a dotted world map with animated
   arcs (home-map.js) behind the hero and the listings. The listing cards are the
   shared component from venture-card.css, in its light (Browse) colours. */

:root {
  --h2-navy: #0E2A5C;
  /* The client's standing colour system (18 Oct 2026, "for all future work"):
     headings BLACK, subtext DARK GREY, accents BLUE and GREEN. --h2-ink and
     --h2-text carry the first two everywhere on the homepage; don't drift them
     back to navy/slate, and don't introduce light-grey text or a gold accent. */
  --h2-ink: #111827;
  --h2-text: #374151;
  --h2-green: #0EB17A;
  --h2-gold: #F5C518;
  --h2-blue: #2563EB;
  /* The brand green is GetVantage's #0EB17A (client, 19 Oct 2026: "Yaha jo green use huva ha that
     we want") and it is the ONLY green — buttons, icons, lines and green text alike, with white
     text on green buttons (Faraaz: "only use the green only, dont change button text"). */
  --h2-forest: #0EB17A; /* the card's "Join as an Investor" green */
  --h2-green-text: #0EB17A;
  --h2-black: #111827;
  --h2-line: #E3E8F0;
  --h2-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
}

body.h2-body { background: #fff; color: var(--h2-ink); }
.h2 { overflow-x: clip; }
/* Wider and closer to the edges (client, 18 Oct 2026: "a 110% zoom-like view") —
   was 1240px with up to 40px gutters. The ~10% type step-up is the block at the
   end of this file, desktop only. */
.h2-wrap { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 32px); }

.h2-c-navy { background: var(--h2-navy); }
.h2-c-green { background: var(--h2-green); }
.h2-c-gold { background: var(--h2-gold); }
.h2-c-black { background: var(--h2-black); }
.h2-c-blue { background: var(--h2-blue); }
.h2-c-forest { background: var(--h2-forest); }

/* ---------- type ---------- */
.h2-display {
  margin: 0; font-family: var(--h2-serif); font-weight: 700; color: var(--h2-ink);
  font-size: clamp(38px, 5vw, 64px); line-height: 1.06; letter-spacing: -.02em;
}
.h2-display em { font-style: italic; font-weight: 600; color: var(--h2-blue); }
.h2-line { display: block; overflow: hidden; padding-bottom: .06em; }
.h2-line > span { display: block; }
.h2-h2 {
  margin: 0; font-family: var(--h2-serif); font-weight: 700; color: var(--h2-ink);
  font-size: clamp(30px, 3.4vw, 44px); line-height: 1.12; letter-spacing: -.015em; text-wrap: balance;
}
.h2-lead { margin: 22px 0 0; max-width: 520px; font-size: 17px; line-height: 1.65; color: var(--h2-text); }
.h2-text { margin: 14px 0 0; max-width: 520px; font-size: 16px; line-height: 1.65; color: var(--h2-text); }
.h2-eyebrow { font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--h2-blue); margin-bottom: 12px; }
/* "How it works", a little bolder (client, 16 Oct 2026). 800 is already the heaviest
   Plus Jakarta weight loaded, so it gains size and a deeper blue instead. */
.h2-eyebrow--strong { font-size: 15px; letter-spacing: .12em; color: #1D4ED8; }
/* ...and again (client, 18 Oct 2026: "increase slightly and make it bold, so it is
   clearly visible at first glance"): bigger still, at the heaviest weight. */
.h2-how-head .h2-eyebrow--strong { font-size: 19px; font-weight: 800; letter-spacing: .1em; margin-bottom: 14px; }
.h2-center { margin-top: 44px; text-align: center; }

/* ---------- buttons ---------- */
.h2-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 10px;
  font-size: 15px; font-weight: 700; text-decoration: none; transition: transform .2s, box-shadow .2s, background .2s, border-color .2s;
}
.h2-btn svg { transition: transform .2s; }
.h2-btn:hover svg { transform: translateX(3px); }
.h2-btn--gold { background: var(--h2-gold); color: var(--h2-ink); box-shadow: 0 8px 22px rgba(245, 197, 24, .35); }
.h2-btn--gold:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(245, 197, 24, .45); color: var(--h2-ink); }
.h2-btn--green { background: var(--h2-forest); color: #fff; box-shadow: 0 8px 22px rgba(14, 177, 122, .30); }
.h2-btn--green:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(14, 177, 122, .40); color: #fff; }
.h2-btn--ghost { background: #fff; color: var(--h2-ink); border: 1px solid #D5DCE7; }
.h2-btn--ghost:hover { border-color: var(--h2-navy); color: var(--h2-ink); }
/* Plain, with no colour — not even on hover (client, 19 Oct 2026: "Isko simple rahne de without
   any colour … thoda bold kardena text ko"). Hover only darkens the border and lifts it a touch. */
.h2-btn--outline { background: #fff; color: var(--h2-ink); border: 1.5px solid #C9D3E1; border-radius: 999px; font-weight: 800; }
.h2-btn--outline:hover { border-color: #94A3B8; background: #fff; color: var(--h2-ink); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(17, 24, 39, .08); }
.h2-btn--sm { padding: 11px 22px; font-size: 14px; margin-top: 22px; }
.h2-btn:focus-visible { outline: 2px solid var(--h2-blue); outline-offset: 3px; }

/* ---------- legends ---------- */
.h2-legend { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--h2-text); }
.h2-legend li { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.h2-legend b { margin-left: auto; padding-left: 28px; color: var(--h2-ink); }
.h2-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.h2-legend--stack { flex-direction: column; gap: 16px; font-size: 15px; min-width: 170px; }
.h2-legend--stack li { width: 100%; }

/* ---------- world map (home-map.js — the GodUI World Map, one line at a time) ---------- */
.h2-map { position: absolute; pointer-events: none; z-index: 0; }
.h2-map-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.h2-wm-arc {
  fill: none; stroke-width: .3; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;          /* pathLength=1: 1 = undrawn */
}
.h2-wm-pin { fill: #2563EB; }
.h2-wm-ripple {
  fill: #2563EB; opacity: 0; transform-box: fill-box; transform-origin: center;
  animation: h2-wm-ripple 1.8s cubic-bezier(.22, 1, .36, 1) infinite;
}
@keyframes h2-wm-ripple { from { transform: scale(1); opacity: .6; } to { transform: scale(3); opacity: 0; } }

/* ---------- hero ---------- */
.h2-hero {
  position: relative; overflow: hidden;
  background: radial-gradient(70% 90% at 85% 20%, #EEF3FB 0%, rgba(238, 243, 251, 0) 60%), #fff;
  padding: calc(var(--navbar-height, 72px) + clamp(48px, 7vw, 96px)) 0 clamp(64px, 8vw, 110px);
}
.h2-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 5vw, 72px); align-items: center; }
.h2-hero-copy { max-width: 640px; }

/* Feature pills (client, 15 Oct 2026): white pills with a dark-green icon disc,
   green "speed lines" trailing off the left and a soft green glow. The middle
   one sits further right, as in the mock-up. */
.h2-feats { list-style: none; margin: 0; padding: 0 0 0 58px; display: flex; flex-direction: column; gap: 34px; }
.h2-feats li:nth-child(2) { margin-left: 34px; }
.h2-feat {
  position: relative; display: flex; align-items: center; gap: 20px; min-width: 330px;
  padding: 4px 26px 4px 4px; border-radius: 999px; background: #fff; text-decoration: none;
  box-shadow: 0 12px 34px rgba(14, 177, 122, .22), 0 2px 6px rgba(14, 42, 92, .06);
}
/* Entrance: each bar 0.6s after the one before, with a bounce as it lands.
   The bars are NOT links and have no hover state (client, 17 Oct 2026) — the
   arrows are part of the design, not a call to click. */
.h2-feats li { opacity: 0; animation: h2-feat-in 1.1s linear forwards; }
.h2-feats li:nth-child(1) { animation-delay: .35s; }
.h2-feats li:nth-child(2) { animation-delay: .95s; }
.h2-feats li:nth-child(3) { animation-delay: 1.55s; }
@keyframes h2-feat-in {
  0%   { opacity: 0; transform: translateX(-70px) scale(.92); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  45%  { opacity: 1; transform: translateX(14px) scale(1.03); animation-timing-function: ease-in-out; }
  65%  { transform: translateX(-7px) scale(.99); animation-timing-function: ease-in-out; }
  82%  { transform: translateX(3px) scale(1); animation-timing-function: ease-in-out; }
  100% { opacity: 1; transform: none; }
}
/* the speed lines: three short strokes left of the pill (clear of the icon's halo) */
.h2-feat::before {
  content: ""; position: absolute; right: 100%; top: 50%; width: 46px; height: 16px; margin: -8px 8px 0 0;
  background:
    linear-gradient(90deg, rgba(14, 177, 122, 0), rgba(14, 177, 122, .75)) 12px 0 / 34px 3px no-repeat,
    linear-gradient(90deg, rgba(14, 177, 122, 0), rgba(14, 177, 122, .5)) 0 6px / 46px 3px no-repeat,
    linear-gradient(90deg, rgba(14, 177, 122, 0), rgba(14, 177, 122, .35)) 18px 12px / 28px 3px no-repeat;
}
/* The icon sits in a white halo wider than the bar, so the bar's left end swells
   into a round badge (client mock-up, 16 Oct 2026). */
.h2-feat-icon {
  width: 58px; height: 58px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: #0EB17A; color: #fff;
  box-shadow: 0 0 0 9px #fff, 0 6px 22px 6px rgba(14, 177, 122, .22);
}
/* "Up to 25 Members" alone is blue (client, "7 November 2026" PDF: "only this change to blue") —
   its badge and the speed lines leading into it. The other two stay green. */
.h2-feat--blue .h2-feat-icon { background: var(--h2-blue); box-shadow: 0 0 0 9px #fff, 0 6px 22px 6px rgba(37, 99, 235, .22); }
.h2-feat--blue::before {
  background:
    linear-gradient(90deg, rgba(37, 99, 235, 0), rgba(37, 99, 235, .75)) 12px 0 / 34px 3px no-repeat,
    linear-gradient(90deg, rgba(37, 99, 235, 0), rgba(37, 99, 235, .5)) 0 6px / 46px 3px no-repeat,
    linear-gradient(90deg, rgba(37, 99, 235, 0), rgba(37, 99, 235, .35)) 18px 12px / 28px 3px no-repeat;
}
.h2-feat-label { flex: 1; font-size: 17px; font-weight: 600; color: var(--h2-ink); white-space: nowrap; }
.h2-feat-arrow { flex: none; color: var(--h2-ink); }
.h2-hero-copy .h2-line > span { white-space: nowrap; }
@media (max-width: 560px) { .h2-hero-copy .h2-line > span { white-space: normal; } }
.h2-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.h2-ownbar { margin-top: 40px; max-width: 470px; }
.h2-ownbar-track { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: #E6EBF2; gap: 3px; }
.h2-ownbar-seg { width: 0; animation: h2-grow 1.4s cubic-bezier(.2, .8, .2, 1) .5s forwards; }
.h2-ownbar-seg:nth-child(2) { animation-delay: .75s; }
.h2-ownbar-seg:nth-child(3) { animation-delay: 1s; }
@keyframes h2-grow { to { width: var(--w); } }

/* ---------- bands ---------- */
.h2-band { position: relative; padding: clamp(64px, 8vw, 110px) 0; background: #fff; }
.h2-band--grey { background: #F3F5F8; }
.h2-band--warm { background: #fff; overflow: hidden; }
.h2-band--blue { background: #EAF1FC; }

/* ---------- shared ownership ---------- */
.h2-shared { display: grid; grid-template-columns: 1.05fr 1.1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.h2-shared .h2-h2 { font-size: clamp(28px, 2.8vw, 38px); }
.h2-donut-wrap { display: flex; align-items: center; gap: 28px; justify-content: center; }
.h2-donut { width: 190px; height: 190px; flex: none; }
.h2-donut-bg { fill: none; stroke: #E6EBF2; stroke-width: 30; }
.h2-donut-seg { fill: none; stroke-width: 30; stroke-dasharray: 0 var(--c); transition: stroke-dasharray 1.3s cubic-bezier(.2, .8, .2, 1); }
.h2-donut-wrap.is-in .h2-donut-seg { stroke-dasharray: var(--len) var(--c); }
.h2-donut-wrap.is-in .h2-s-green { transition-delay: .25s; }
.h2-donut-wrap.is-in .h2-s-gold { transition-delay: .5s; }
.h2-s-navy { stroke: var(--h2-navy); }
.h2-s-green { stroke: var(--h2-green); }
.h2-s-gold { stroke: var(--h2-gold); }
.h2-donut-label { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 13px; font-weight: 600; fill: var(--h2-text); }

.h2-together { position: relative; margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 360 / 260; box-shadow: 0 18px 40px rgba(14, 42, 92, .14); background: #E4EBF6; }
.h2-together img, .h2-puzzle { width: 100%; height: 100%; display: block; object-fit: cover; }
.h2-pz-float { animation: h2-float 4s ease-in-out infinite; }
@keyframes h2-float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(4px, -6px); } }
.h2-script {
  position: absolute; top: 14px; right: 16px; transform: rotate(-8deg);
  font-family: 'Caveat', cursive; font-weight: 600; font-size: clamp(22px, 2vw, 28px); line-height: .95; color: var(--h2-navy); text-align: right;
}
.h2-members-pill {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); white-space: nowrap;
  padding: 7px 16px; border-radius: 8px; background: rgba(11, 31, 63, .82); color: #fff; font-size: 14px; font-weight: 600;
  backdrop-filter: blur(4px);
}

/* ---------- Investor / Founder toggle above How It Works (client, 26 Oct 2026) ----------
   A grey pill with a black knob that slides under the chosen word (home-climb.js sizes
   and places it). Unchosen text is dark grey, per the colour rule. */
.h2-aud {
  position: relative; display: flex; width: max-content; margin: 0 auto 22px;
  padding: 5px; border-radius: 999px; background: #EEF0F3; border: 1px solid #E1E4E9;
}
.h2-aud-knob {
  position: absolute; top: 5px; bottom: 5px; left: 0; width: 0;
  border-radius: 999px; background: #111827; box-shadow: 0 4px 12px rgba(17, 24, 39, .18);
  transition: transform .42s cubic-bezier(.65, 0, .25, 1), width .42s cubic-bezier(.65, 0, .25, 1);
}
.h2-aud.is-static .h2-aud-knob { transition: none; }
.h2-aud-btn {
  position: relative; z-index: 1; padding: 11px 30px; border: 0; border-radius: 999px;
  background: transparent; color: #4B5563; font: inherit; font-size: 17px; font-weight: 500;
  cursor: pointer; transition: color .3s ease;
}
.h2-aud-btn.is-active { color: #fff; }
.h2-aud-btn:not(.is-active):hover { color: #111827; }
.h2-aud-btn:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .h2-aud-knob, .h2-aud-btn { transition: none; } }

/* ---------- how it works: the climb (client video, 15 Oct 2026; home-climb.js) ---------- */
.h2-how-head { text-align: center; }
.h2-how-head .h2-h2 { font-weight: 600; }
.h2-climb {
  margin-top: clamp(28px, 4vw, 48px);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center;
}
.h2-climb-art { position: relative; max-width: 620px; width: 100%; justify-self: center; }
.h2-climb-svg { display: block; width: 100%; height: auto; overflow: visible; }
.h2-climb-sun { fill: #F6C26B; opacity: .55; }
.h2-climb-mtn { fill: #D3E3F8; stroke: #B7CCEA; stroke-width: 1; }
.h2-climb-pole { stroke: #1F2937; stroke-width: 2; }
.h2-climb-flag { fill: #0EB17A; }
.h2-climb-trail { fill: none; stroke: #4B5563; stroke-width: 1.6; stroke-dasharray: 4 5; }
.h2-climb-done { fill: none; stroke: #0EB17A; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.h2-climb-camp { fill: #fff; stroke: #1F2937; stroke-width: 1.8; transition: fill .2s, stroke .2s; }
.h2-climb-camp.is-passed { fill: #0EB17A; stroke: #0EB17A; }
.h2-climb-label {
  position: absolute; transform: translate(18px, -50%); white-space: nowrap; pointer-events: none;
  font-size: 13.5px; font-weight: 500; color: var(--h2-text); line-height: 1.2;
}
.h2-climb-label--left { transform: translate(calc(-100% - 18px), -50%); }
.h2-climb-label.is-named { color: var(--h2-text); }
.h2-climb-label.is-current { color: var(--h2-ink); font-weight: 700; }

.h2-climb-side { width: 100%; max-width: 460px; justify-self: center; }
.h2-climb-card { min-height: 262px; padding: 22px 24px; border-radius: 16px; background: #fff; border: 1px solid var(--h2-line); box-shadow: 0 10px 28px rgba(14, 42, 92, .06); }
.h2-climb-card.is-swap > * { animation: h2-climb-in .35s ease both; }
@keyframes h2-climb-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.h2-climb-step { font-size: 14px; color: var(--h2-text); }
.h2-climb-title { margin: 4px 0 0; font-size: 22px; font-weight: 800; color: var(--h2-ink); }
.h2-climb-sub { margin-top: 2px; font-family: var(--h2-serif); font-size: 19px; font-weight: 600; color: var(--h2-text); }
.h2-climb-points { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.h2-climb-points li { position: relative; padding-left: 30px; font-size: 15px; line-height: 1.55; color: var(--h2-text); }
.h2-climb-points li::before {   /* green check */
  content: ""; position: absolute; left: 4px; top: .3em; width: 12px; height: 7px;
  border-left: 2.4px solid #0EB17A; border-bottom: 2.4px solid #0EB17A; transform: rotate(-45deg);
}
.h2-climb-nav { margin-top: 14px; display: grid; grid-template-columns: 64px 1fr; gap: 12px; }
.h2-climb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px;
  border-radius: 12px; border: 1px solid #DCE2EA; background: #fff; color: var(--h2-ink);
  font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
  transition: background .2s, border-color .2s, transform .1s;
}
.h2-climb-btn:hover:not(:disabled) { border-color: #9FE3CB; background: #F0FBF6; }
.h2-climb-btn:active:not(:disabled) { background: #CFF3E5; border-color: #9FE3CB; transform: scale(.98); }
.h2-climb-btn:focus-visible { outline: 2px solid var(--h2-green); outline-offset: 2px; }
.h2-climb-btn:disabled { opacity: .45; cursor: default; }
/* Next camp is very light green (client, 18 Oct 2026: subtle, "clearly clickable",
   never dark green) — the back arrow stays white beside it. */
.h2-climb-next { background: #E3F8F0; border-color: #9FE3CB; color: var(--h2-green-text); font-weight: 700; }
.h2-climb-next:hover:not(:disabled) { background: #D3F3E6; border-color: #6FD4AE; }
.h2-climb-next:active:not(:disabled) { background: #C2EEDC; border-color: #6FD4AE; }

/* ---------- live listings ---------- */
/* The dotted India map (home-map.js; client, 19 Oct 2026 — it replaced the world map).
   India is tall where the world was wide, so it stands on the right of the section
   and fades out towards the bottom, behind the cards. */
.h2-map--india {
  top: 12px; right: 2%; width: 44%; height: 82%; opacity: .95;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}
.h2-live-head { max-width: 640px; }
/* "Co-Own Growing Businesses" on one line (client, 27 Oct 2026: "why we can't take it in
   a single line"). The 640px cap above is for the paragraph; the heading may run past it.
   Phones still wrap. */
@media (min-width: 760px) { .h2-live-head .h2-h2 { white-space: nowrap; } }
.h2-pills { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.h2-pill {
  padding: 9px 18px; border-radius: 999px; border: 1px solid #D5DCE7; background: #fff; color: var(--h2-ink);
  font-size: 14px; font-weight: 600; cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.h2-pill.is-active { background: var(--h2-blue); border-color: var(--h2-blue); color: #fff; }
.h2-live .vh-assets-grid { margin-top: 28px; }

/* ---------- trust ---------- */
.h2-trust { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.h2-badges { list-style: none; margin: 26px 0 26px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.h2-badges li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--h2-ink); }
.h2-badge-icon { width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center; background: #E4EDFD; color: var(--h2-navy); }

.h2-laptop { max-width: 640px; margin-left: auto; width: 100%; }
/* A real 16:10 screen (client, 18 Oct 2026: "looks very wide, looks not real") — it
   used to be only as tall as the mock-up inside it, about 2.5:1. Thin side bezels,
   a deeper chin, a camera dot, and a base with the opening notch. */
.h2-laptop-screen {
  position: relative; aspect-ratio: 16 / 10; display: flex; flex-direction: column;
  border: 10px solid #1D2230; border-top-width: 14px; border-bottom-width: 18px; border-radius: 16px 16px 0 0;
  background: #fff; box-shadow: 0 24px 50px rgba(14, 42, 92, .18);
}
.h2-laptop-screen::before {
  content: ""; position: absolute; top: -9px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: #3A4256;
}
.h2-laptop-base {
  position: relative; height: 13px; margin: 0 -5%; border-radius: 3px 3px 14px 14px;
  background: linear-gradient(180deg, #D5DAE3 0%, #B4BBC8 55%, #8E96A5 100%);
  box-shadow: 0 10px 18px rgba(14, 42, 92, .12);
}
.h2-laptop-base::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 16%; height: 5px; transform: translateX(-50%);
  border-radius: 0 0 8px 8px; background: #A3AAB8;
}
/* The laptop shows the real dashboard, drawn small (client, 4 Nov 2026). Everything inside is
   measured in --u, a thousandth of the screen's width, so the copy scales like a screenshot.
   Without container units the --u fallback keeps the desktop size. */
.h2-laptop-screen { container-type: inline-size; overflow: hidden; }
.h2-dash {
  --u: .62px;
  flex: 1; min-height: 0; display: grid; grid-template-columns: calc(222 * var(--u)) 1fr; overflow: hidden;
  background: #F5F7FA; color: #111827; font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: calc(12 * var(--u)); line-height: 1.35; text-align: left; user-select: none;
}
@supports (width: 1cqw) { .h2-dash { --u: calc(100cqw / 1000); } }
.h2-dash svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); flex: none; }
.h2-dash b { font-weight: 800; }

.h2-dash-side { background: #fff; border-right: calc(1 * var(--u)) solid #E5E7EB; padding: calc(18 * var(--u)) calc(12 * var(--u)); overflow: hidden; }
.h2-dash-brand { display: flex; align-items: center; gap: calc(8 * var(--u)); padding: 0 calc(4 * var(--u)) 0 calc(6 * var(--u)); font-size: calc(12 * var(--u)); letter-spacing: .01em; white-space: nowrap; }
.h2-dash-brand img { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.h2-dash-brand svg { margin-left: auto; width: calc(13 * var(--u)); height: calc(13 * var(--u)); color: #4B5563; }
.h2-dash-sec { margin: calc(22 * var(--u)) 0 calc(8 * var(--u)) calc(6 * var(--u)); font-size: calc(10.5 * var(--u)); font-weight: 800; letter-spacing: .12em; }
.h2-dash-sec--rule { margin-top: calc(14 * var(--u)); padding-top: calc(18 * var(--u)); border-top: calc(1 * var(--u)) solid #E5E7EB; }
.h2-dash-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(3 * var(--u)); }
.h2-dash-nav li { display: flex; align-items: center; gap: calc(11 * var(--u)); padding: calc(9 * var(--u)) calc(12 * var(--u)); border-radius: calc(9 * var(--u)); color: #374151; font-weight: 500; white-space: nowrap; }
.h2-dash-nav li svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.h2-dash-nav li.is-on { background: #E4F6EE; border-left: calc(2 * var(--u)) solid #0EB17A; color: #111827; font-weight: 700; }
.h2-dash-nav li.is-on svg { color: #0EB17A; }
.h2-dash-nav li.is-red { color: #DC2626; }

.h2-dash-main { min-width: 0; display: flex; flex-direction: column; }
.h2-dash-top { flex: none; display: flex; align-items: center; gap: calc(10 * var(--u)); height: calc(52 * var(--u)); padding: 0 calc(18 * var(--u)); background: #fff; border-bottom: calc(1 * var(--u)) solid #E5E7EB; }
.h2-dash-search { display: flex; align-items: center; gap: calc(8 * var(--u)); width: calc(230 * var(--u)); padding: calc(8 * var(--u)) calc(12 * var(--u)); border: calc(1 * var(--u)) solid #E5E7EB; border-radius: calc(999 * var(--u)); background: #F9FAFB; color: #4B5563; font-size: calc(11 * var(--u)); }
.h2-dash-search svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.h2-dash-bell { margin-left: auto; display: grid; place-items: center; width: calc(30 * var(--u)); height: calc(30 * var(--u)); border: calc(1 * var(--u)) solid #E5E7EB; border-radius: calc(8 * var(--u)); color: #374151; }
.h2-dash-me { display: flex; align-items: center; gap: calc(7 * var(--u)); padding: calc(4 * var(--u)) calc(9 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u)); border: calc(1 * var(--u)) solid #E5E7EB; border-radius: calc(999 * var(--u)); font-weight: 700; }
.h2-dash-me i { display: grid; place-items: center; width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: 50%; background: #2563EB; color: #fff; font-style: normal; font-size: calc(9.5 * var(--u)); }
.h2-dash-me svg { width: calc(11 * var(--u)); height: calc(11 * var(--u)); }

.h2-dash-page { padding: calc(16 * var(--u)) calc(18 * var(--u)); display: flex; flex-direction: column; gap: calc(13 * var(--u)); }
.h2-dash-hello {
  display: flex; justify-content: space-between; align-items: flex-end; gap: calc(12 * var(--u)); height: calc(132 * var(--u)); padding: calc(22 * var(--u)) calc(22 * var(--u)) calc(18 * var(--u));
  border: calc(1 * var(--u)) solid #DCE7F5; border-radius: calc(13 * var(--u)); background: #EAF4FB center / cover no-repeat;
}
.h2-dash-hello > div { align-self: flex-start; display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.h2-dash-hello b { font-size: calc(24 * var(--u)); letter-spacing: -.01em; }
.h2-dash-hello > div span { color: #374151; font-size: calc(11.5 * var(--u)); }

.h2-dash-btn { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); padding: calc(6 * var(--u)) calc(11 * var(--u)); border: calc(1 * var(--u)) solid transparent; border-radius: calc(999 * var(--u)); font-size: calc(10.5 * var(--u)); font-weight: 700; white-space: nowrap; }
.h2-dash-btn svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.h2-dash-btn--green { padding: calc(10 * var(--u)) calc(18 * var(--u)); border-radius: calc(9 * var(--u)); background: #0EB17A; color: #fff; font-size: calc(12 * var(--u)); }
.h2-dash-btn--blue { background: #2563EB; color: #fff; }
.h2-dash-btn--line { border-color: #D1D5DB; color: #111827; }
.h2-dash-btn--red { border-color: #FECACA; background: #FEF2F2; color: #DC2626; }

.h2-dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(13 * var(--u)); }
.h2-dash-stat { display: flex; align-items: center; gap: calc(14 * var(--u)); padding: calc(16 * var(--u)) calc(16 * var(--u)); background: #fff; border: calc(1 * var(--u)) solid #E5E7EB; border-radius: calc(13 * var(--u)); }
.h2-dash-stat > div { display: flex; flex-direction: column; gap: calc(3 * var(--u)); min-width: 0; }
.h2-dash-stat em { font-style: normal; font-size: calc(11 * var(--u)); color: #374151; white-space: nowrap; }
.h2-dash-stat b { font-size: calc(22 * var(--u)); line-height: 1.1; white-space: nowrap; }
.h2-dash-stat small { font-size: calc(10.5 * var(--u)); color: #374151; white-space: nowrap; }
.h2-dash-stat small.is-green { color: #0EB17A; font-weight: 600; }
.h2-dash-sico { flex: none; display: grid; place-items: center; width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: calc(11 * var(--u)); background: #EFF4FF; color: #2563EB; }
.h2-dash-sico--green { background: rgba(14, 177, 122, .12); color: #0EB17A; }
.h2-dash-sico svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }

.h2-dash-cols { display: grid; grid-template-columns: 1.75fr 1fr; gap: calc(13 * var(--u)); align-items: start; }
.h2-dash-panel { background: #fff; border: calc(1 * var(--u)) solid #E5E7EB; border-radius: calc(13 * var(--u)); overflow: hidden; }
.h2-dash-ph { display: flex; align-items: center; gap: calc(9 * var(--u)); padding: calc(13 * var(--u)) calc(16 * var(--u)); border-bottom: calc(1 * var(--u)) solid #EEF1F5; font-size: calc(13 * var(--u)); font-weight: 800; }
.h2-dash-pico { display: grid; place-items: center; width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: calc(7 * var(--u)); background: #EFF4FF; color: #2563EB; }
.h2-dash-pico svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.h2-dash-biz { display: flex; gap: calc(12 * var(--u)); margin: calc(13 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)); padding: calc(14 * var(--u)); border: calc(1 * var(--u)) solid #E5E7EB; border-radius: calc(12 * var(--u)); }
.h2-dash-thumb { flex: none; display: grid; place-items: center; width: calc(84 * var(--u)); height: calc(64 * var(--u)); border-radius: calc(10 * var(--u)); background: #EFF4FF; color: #2563EB; font-size: calc(24 * var(--u)); font-weight: 800; }
.h2-dash-bizbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(9 * var(--u)); }
.h2-dash-bizhead { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); }
.h2-dash-bizhead b { font-size: calc(14 * var(--u)); white-space: nowrap; }
.h2-dash-chip { display: inline-flex; align-items: center; gap: calc(5 * var(--u)); padding: calc(4 * var(--u)) calc(9 * var(--u)); border-radius: calc(999 * var(--u)); background: #EFF4FF; color: #2563EB; font-size: calc(10 * var(--u)); font-weight: 700; white-space: nowrap; }
.h2-dash-chip svg { width: calc(11 * var(--u)); height: calc(11 * var(--u)); }
.h2-dash-fund { display: flex; align-items: center; gap: calc(9 * var(--u)); font-size: calc(10.5 * var(--u)); white-space: nowrap; }
.h2-dash-bar { flex: 1; max-width: calc(150 * var(--u)); height: calc(5 * var(--u)); border-radius: calc(99 * var(--u)); background: #E5E7EB; overflow: hidden; }
.h2-dash-bar i { display: block; height: 100%; border-radius: inherit; background: #0EB17A; }
.h2-dash-fund b { color: #0EB17A; }
.h2-dash-fund span:last-child { padding-left: calc(9 * var(--u)); border-left: calc(1 * var(--u)) solid #D1D5DB; color: #374151; }
.h2-dash-note { display: flex; align-items: center; gap: calc(7 * var(--u)); padding: calc(8 * var(--u)) calc(10 * var(--u)); border-radius: calc(8 * var(--u)); background: #EFF4FF; color: #374151; font-size: calc(10 * var(--u)); }
.h2-dash-note svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); color: #2563EB; }
.h2-dash-acts { display: flex; gap: calc(6 * var(--u)); }

.h2-dash-meets { display: flex; flex-direction: column; gap: calc(8 * var(--u)); padding: calc(12 * var(--u)); }
.h2-dash-meet { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(9 * var(--u)) calc(10 * var(--u)); border: calc(1 * var(--u)) solid #E8ECF2; border-radius: calc(10 * var(--u)); min-width: 0; }
.h2-dash-meet > div { display: flex; flex-direction: column; gap: calc(2 * var(--u)); min-width: 0; }
.h2-dash-meet b { font-size: calc(11.5 * var(--u)); white-space: nowrap; }
.h2-dash-meet span { font-size: calc(10 * var(--u)); color: #4B5563; white-space: nowrap; }
.h2-dash-date { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: calc(10 * var(--u)); background: #EFF4FF; color: #2563EB; font-size: calc(8 * var(--u)); font-weight: 700; letter-spacing: .05em; line-height: 1.1; }
.h2-dash-date b { font-size: calc(14 * var(--u)); letter-spacing: 0; color: #2563EB; }

/* ---------- why ---------- */
.h2-why { display: grid; grid-template-columns: .9fr 1.4fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.h2-squiggle { width: 120px; height: 12px; margin-top: 10px; display: block; }
.h2-why-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 30px 36px; }
.h2-why-item { display: flex; gap: 16px; align-items: flex-start; }
.h2-why-icon { width: 52px; height: 52px; flex: none; border-radius: 14px; display: grid; place-items: center; background: #fff; color: var(--h2-navy); box-shadow: 0 6px 16px rgba(14, 42, 92, .08); }
.h2-why-title { margin: 4px 0 0; font-size: 16px; font-weight: 800; color: var(--h2-ink); }
.h2-why-title span { color: var(--h2-blue); margin-right: 4px; }
.h2-step-text { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--h2-text); }  /* the Why items' text (outlived the old step grid) */

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .h2-shared { grid-template-columns: 1fr 1fr; }
  .h2-together { grid-column: 1 / -1; max-width: 520px; justify-self: center; width: 100%; }
  .h2-badges { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .h2-climb { grid-template-columns: 1fr; }
  .h2-climb-card { min-height: 0; }
  .h2-hero-inner { grid-template-columns: minmax(0, 1fr); }   /* never wider than the screen */
  .h2-feats { padding-left: 54px; gap: 26px; }
  .h2-feats li:nth-child(2) { margin-left: 0; }
  .h2-feat { min-width: 0; max-width: 360px; }
  .h2-map--india { width: 80%; right: -18%; height: 60%; opacity: .45; }
  .h2-shared, .h2-trust, .h2-why { grid-template-columns: 1fr; }
  .h2-donut-wrap { justify-content: flex-start; }
  .h2-laptop { margin: 0 auto; }
}
@media (max-width: 560px) {
  .h2-why-grid { grid-template-columns: 1fr; }
  /* "No Day-to-Day Involvement" (23 Oct 2026) is too long for one line at phone width:
     the labels may wrap, a touch smaller, instead of pushing the whole hero off-screen. */
  .h2-feat-label { white-space: normal; font-size: 15.5px; line-height: 1.3; }
  .h2-climb-label { font-size: 12px; transform: translate(13px, -50%); }
  .h2-climb-label--left { transform: translate(calc(-100% - 13px), -50%); }
  .h2-climb-title { font-size: 20px; }
  .h2-donut-wrap { flex-direction: column; align-items: flex-start; }
  .h2-badges { grid-template-columns: 1fr; }
}


/* ---------- the "110% zoom" step-up (client, 18 Oct 2026), desktop only ----------
   About 10% larger type and pieces across the first three sections. Phones and
   tablets keep the sizes above. */
@media (min-width: 1100px) {
  .h2-display { font-size: clamp(44px, 5vw, 70px); }
  .h2-h2 { font-size: clamp(32px, 3.4vw, 48px); }
  .h2-lead { font-size: 18.5px; max-width: 580px; }
  .h2-text { font-size: 17.5px; max-width: 580px; }
  .h2-eyebrow { font-size: 13.5px; }
  .h2-hero-copy { max-width: 700px; }
  .h2-btn { padding: 15px 29px; font-size: 16.5px; }
  .h2-ownbar { max-width: 520px; }
  .h2-legend { font-size: 15.5px; }
  .h2-feat { min-width: 365px; }
  .h2-feat-icon { width: 64px; height: 64px; }
  .h2-feat-label { font-size: 18.5px; }
  /* The climb fits one laptop screen (18 Oct 2026 — on a 1536×695 window the mountain
     ran off the bottom). The drawing is sized from the window HEIGHT: 330px is the
     header, eyebrow, title and gaps above it, and 1.5 is the viewBox's 3:2. The
     drawing and the card are a centred pair rather than two stretched columns, which
     is what opened the wide gap between them. */
  /* The toggle (26 Oct 2026) added ~70px above the heading, and the whole section has
     to fit one laptop screen: the band's top padding shrank from 110px to 36px, and
     the drawing is now sized from the window height minus 400px (header, padding,
     toggle, eyebrow, title, gaps). Check 1536x695 and 1366x625 after any change. */
  #how.h2-band { padding-top: 36px; }
  .h2-climb { margin-top: 24px; grid-template-columns: auto minmax(0, 500px); justify-content: center; gap: clamp(32px, 3vw, 48px); }
  .h2-climb-art { max-width: none; width: clamp(390px, calc((100vh - 400px) * 1.5), 600px); width: clamp(390px, calc((100svh - 400px) * 1.5), 600px); }
  .h2-climb-side { max-width: 500px; }
  .h2-climb-card { min-height: 322px; padding: 26px 28px; }   /* the tallest step (step 3, either side), so the buttons never jump */
  .h2-climb-step { font-size: 15px; }
  .h2-climb-title { font-size: 24px; }
  .h2-climb-sub { font-size: 21px; }
  .h2-climb-points li { font-size: 16.5px; }
  .h2-climb-label { font-size: 14.5px; }
  .h2-climb-btn { height: 56px; font-size: 17px; }
  .h2-pill { font-size: 15px; padding: 10px 20px; }
}
/* Short laptop screens (26 Oct 2026, "make it able to see everything in one viewport"):
   toggle + heading + climb must fit under the 72px header on 1536x695 and 1366x625.
   The tallest part is the step-3 card, so the card gets wider (fewer wrapped lines) and
   tighter, and the toggle, gaps and heading give up a little. Big screens are untouched. */
@media (min-width: 1100px) and (max-height: 800px) {
  #how.h2-band { padding-top: 22px; }
  .h2-aud { margin-bottom: 14px; padding: 4px; }
  .h2-aud-knob { top: 4px; bottom: 4px; }
  .h2-aud-btn { padding: 8px 26px; font-size: 16px; }
  .h2-how-head .h2-eyebrow--strong { margin-bottom: 8px; font-size: 17px; }
  .h2-how-head .h2-h2 { font-size: 42px; }
  .h2-climb { margin-top: 18px; grid-template-columns: auto minmax(0, 560px); }
  .h2-climb-art { width: clamp(390px, calc((100vh - 360px) * 1.5), 560px); width: clamp(390px, calc((100svh - 360px) * 1.5), 560px); }
  .h2-climb-side { max-width: 560px; }
  .h2-climb-card { min-height: 298px; padding: 20px 26px; }   /* founder step 3, the tallest — so the buttons never jump */
  .h2-climb-points { margin-top: 10px; gap: 8px; }
  .h2-climb-points li { line-height: 1.5; }
  .h2-climb-nav { margin-top: 12px; }
  .h2-climb-btn { height: 50px; }
}
/* Very short (a 1366x768 laptop with the browser's bars): the heading takes one line. */
@media (min-width: 1100px) and (max-height: 660px) {
  .h2-how-head .h2-h2 { font-size: 36px; }
  .h2-how-head .h2-h2 br { display: none; }
  .h2-aud { margin-bottom: 10px; }
  .h2-climb { margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .h2-ownbar-seg { animation: none; width: var(--w); }
  .h2-feats li { animation: none; opacity: 1; }
  .h2-climb-card.is-swap > * { animation: none; }
  .h2-donut-seg { transition: none; stroke-dasharray: var(--len) var(--c); }
  .h2-pz-float { animation: none; }
  .h2-wm-ripple { animation: none; }
}


/* ── Why Ventures Harbor: the client's four points as staggered cards (1 Nov 2026) ──
   "present them in a more creative and engaging way, rather than simply displaying them as a
   list". Two columns, the second set lower, a large numeral in each corner, an icon badge and a
   coloured top line alternating blue / green. */
.h2-why-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}
.h2-why-card {
  position: relative;
  overflow: hidden;
  padding: 26px 24px 24px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #E3EAF7;
  box-shadow: 0 10px 30px rgba(14, 42, 92, .07);
  transition: box-shadow .3s ease, border-color .3s ease;
}
.h2-why-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--h2-blue);
}
.h2-why-card--green::before { background: #0EB17A; }
.h2-why-card:nth-child(even) { margin-top: 34px; }
.h2-why-card:hover { box-shadow: 0 16px 40px rgba(14, 42, 92, .13); border-color: #C9D7F2; }
.h2-why-num {
  position: absolute;
  top: 10px;
  right: 18px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  color: rgba(37, 99, 235, .09);
  pointer-events: none;
}
.h2-why-card--green .h2-why-num { color: rgba(14, 177, 122, .11); }
.h2-why-badge {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #EFF4FF;
  color: var(--h2-blue);
}
.h2-why-card--green .h2-why-badge { background: #E7F6EE; color: #0EB17A; }
.h2-why-card-title { margin: 18px 0 0; font-size: 18px; font-weight: 800; color: var(--h2-ink); letter-spacing: -.01em; }
.h2-why-card-text { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--h2-text); text-wrap: pretty; }
@media (max-width: 640px) {
  .h2-why-cards { grid-template-columns: 1fr; gap: 16px; }
  .h2-why-card:nth-child(even) { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .h2-why-card { transition: none; } }

/* The hero title is three lines since 3 Nov 2026 ("Become a Passive / Co-Owner in Businesses /
   Yet to Be Built."). Its middle line is longer than the old ones: the size steps down a
   little so it fits a laptop on one line, and on a tablet it may wrap (it was nowrap, which
   cut "Businesses" off). */
.h2-hero-copy .h2-display { font-size: clamp(36px, 4.4vw, 62px); }

/* ...and it is EXACTLY three lines at every width (client, 8 Nov 2026: "On mobile, the
   headline is breaking into 4 separate lines"). Each line stays whole and the size follows
   the column the title sits in: the longest line, "Co-Owner in Businesses", is ~11.3x the
   font size wide, so 8.6% of the column fits it with a little to spare. Capped at 62px, as
   above. A browser without container units keeps the clamp() above. Re-measure if a line's
   wording changes (scratchpad hero_measure.js counts the lines at 15 widths). */
.h2-hero-copy { container-type: inline-size; }
.h2-hero-copy .h2-line > span { white-space: nowrap; }
@supports (font-size: 1cqi) {
  .h2-hero-copy .h2-display { font-size: min(62px, 8.6cqi); }
}

/* ── Trust & Transparency: the client's reference of 10 Nov 2026 ──
   Pill, heading, one line, green button; a carousel of dashboard screenshots on the right
   (home-trust.js). The slides are stacked and cross-fade, so the frame never jumps. */
.h2-trust--shots { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 4.5vw, 72px); }
.h2-trust-pill { display: inline-block; padding: 10px 18px; border-radius: 999px; background: #DBEAFE; color: var(--h2-blue); font-size: 15px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.h2-trust-title { margin: 22px 0 0; font-family: inherit; font-size: clamp(34px, 3.7vw, 60px); font-weight: 800; line-height: 1.08; letter-spacing: -.025em; color: var(--h2-ink); }
.h2-trust-title span { display: block; }
@media (min-width: 901px) { .h2-trust-title span { white-space: nowrap; } }
.h2-trust-text { margin: 22px 0 0; max-width: 30ch; font-size: clamp(17px, 1.55vw, 22px); line-height: 1.5; color: var(--h2-text); }
.h2-trust-cta { display: inline-flex; align-items: center; gap: 14px; margin-top: 34px; padding: 18px 30px; border-radius: 999px; background: #0EB17A; color: #fff; font-size: clamp(17px, 1.55vw, 22px); font-weight: 700; text-decoration: none; box-shadow: 0 10px 24px -12px rgba(14, 177, 122, .7); transition: transform .25s ease, box-shadow .25s ease; }
.h2-trust-cta:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(14, 177, 122, .8); }
.h2-trust-cta svg { transition: transform .25s ease; }
.h2-trust-cta:hover svg { transform: translateX(4px); }

.h2-shots { width: 100%; }
.h2-shots-frame { position: relative; aspect-ratio: 1100 / 619; border-radius: 14px; overflow: hidden; background: #F5F7FA; border: 1px solid #E5E9F0; box-shadow: 0 30px 60px -30px rgba(15, 23, 42, .35), 0 8px 20px -12px rgba(15, 23, 42, .15); }
.h2-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.025); transition: opacity .9s cubic-bezier(.4, 0, .2, 1), transform 1.4s cubic-bezier(.22, 1, .36, 1); }
.h2-shot.is-active { opacity: 1; transform: none; }
.h2-shots-dots { display: flex; justify-content: center; gap: 14px; margin-top: 26px; }
.h2-shots-dot { width: 14px; height: 14px; padding: 0; border: 0; border-radius: 50%; background: #DCE3EE; cursor: pointer; transition: background .3s ease, transform .3s ease; }
.h2-shots-dot:hover { background: #B8C4D6; }
.h2-shots-dot.is-active { background: var(--h2-ink); transform: scale(1.08); }
.h2-shots-dot:focus-visible { outline: 2px solid var(--h2-blue); outline-offset: 3px; }
@media (max-width: 900px) {
  .h2-trust--shots { grid-template-columns: 1fr; }
  .h2-trust-text { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .h2-shot, .h2-trust-cta, .h2-trust-cta svg { transition: none; }
}