/* ============================================================
   FX UNLOCKED — Page components (sections)
   Builds on site.css tokens.
   ============================================================ */

/* ---- Mobile menu ---- */
.mobile-menu {
  position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 190;
  background: rgba(244,243,249,0.96); backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line); padding: 14px var(--gutter) 22px;
  display: flex; flex-direction: column;
  animation: menuIn .25s ease;
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-8px);} to { opacity: 1; transform: none;} }
.mobile-menu a { padding: 14px 0; font-family: var(--display); font-weight: 500; font-size: 18px; border-bottom: 1px solid var(--line); }
.mobile-menu a:last-child { border-bottom: none; }

/* ============ HERO  ·  Full-bleed video bg, exactly 1 viewport ============
   Per design-taste-frontend: asymmetric hero (text left, asset right),
   top-aligned so the headline never clips, min-h: 100dvh equivalent
   for viewport stability on iOS Safari. */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--nav-h) + 28px);
  padding-bottom: 28px;
  height: 100svh;
  /* min-height tuned so the WHOLE hero (eyebrow + H1 + lead + CTAs +
     ticker) lands inside a 720px laptop viewport without overflow */
  min-height: 660px;
  max-height: 100lvh;
  display: flex;
  align-items: flex-start;       /* top-align so tall content never clips at top */
  color: #fff;
}
/* Do NOT positioned .wrap — we want .hero-canvas-wrap (position:absolute)
   to be contained by .hero (which IS positioned) so the video covers the
   ENTIRE hero box including the top padding behind the fixed nav and the
   bottom padding before the next section. */
.hero > .wrap { position: static; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
.hero-copy { max-width: 720px; position: relative; z-index: 2; }
/* H1 capped at 72px so eyebrow + 3-line H1 + lead + CTAs + ticker all
   fit inside a 720px laptop viewport without overflow */
.hero h1, .hero .h-display {
  margin: 14px 0 0;
  font-size: clamp(38px, 5.2vw, 72px);
  line-height: 1.04;
  color: #fff;
}
.hero .lead {
  margin-top: 18px; max-width: 36rem;
  color: rgba(255,255,255,0.88);
  text-shadow: 0 1px 14px rgba(0,0,0,0.40);
}
.hero .eyebrow { color: rgba(255,255,255,0.78); }
.hero .eyebrow .dot { box-shadow: 0 0 0 4px rgba(255,255,255,0.10); }
.hero-cta { margin-top: 22px; }
@media (max-width: 1000px){
  .hero {
    /* keep height:100svh — first scroll passes the hero on every device */
    min-height: 560px;
    padding-top: calc(var(--nav-h) + 24px);
    padding-bottom: 32px;
    align-items: flex-start;            /* top-align so tall content doesn't clip */
  }
  .hero h1, .hero .h-display {
    font-size: clamp(36px, 9vw, 56px);  /* shrink headline so 4 lines fit */
    line-height: 1.04;
  }
  .hero .lead { margin-top: 16px; font-size: 15px; line-height: 1.55; }
  .hero-cta { margin-top: 20px; }
  .hero .ticker-bar { margin-top: 22px; }
}
@media (max-width: 640px){
  .hero {
    padding-top: calc(var(--nav-h) + 12px);
    padding-bottom: 28px;
    min-height: 540px;
  }
  .hero .lead { max-width: none; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  /* on very small screens the ticker is the lowest-priority element and
     pushing it out of the hero is cleaner than clipping the headline */
  .hero .ticker-bar { display: none; }
}
/* page bg orbs were behind the hero card — kill them inside the hero now
   that the video is the full-bleed stage */
body:has(.hero) > .stage-orb { display: none; }

/* hero visual — full-bleed video stage covering the entire .hero.
   inset:0 with .hero as the positioned ancestor (since .wrap is static)
   means the video fills .hero edge-to-edge AND from the very top of the
   page through the bottom padding, no gaps. z-index 0 sits below the
   hero-copy (z-index 2). */
.hero-canvas-wrap {
  position: absolute !important;
  inset: 0;
  width: auto; height: auto;
  min-height: 0;
  margin: 0; padding: 0;
  z-index: 0;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: none;
}
/* outer halo + inner halo aren't needed at viewport edge */
.hero-canvas-wrap::before,
.hero-halo { display: none !important; }

/* Bring back the mesh blob backdrop ON TOP of the video for perpetual
   ambient motion (per design-taste-frontend §4 "Perpetual Micro-
   Interactions"). Low opacity + screen blend = subtle cyan/magenta
   breathing that adds color motion on top of the tinted video.
   z-index 3 sits ABOVE the tint (z=2) so the blobs are actually
   visible — screen blend means they only brighten, never darken. */
.hero-viz .mesh {
  display: block !important;
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  mix-blend-mode: screen;
  will-change: transform;
  z-index: 3;
  pointer-events: none;
}
.hero-viz .mesh-a {
  width: 55%; height: 55%; top: -10%; left: -6%; opacity: 0.30;
  background: radial-gradient(circle, #2ad0ee 0%, transparent 65%);
  animation: meshDrift 24s ease-in-out infinite;
}
.hero-viz .mesh-b {
  width: 50%; height: 50%; top: 20%; right: -10%; opacity: 0.26;
  background: radial-gradient(circle, #ff5acb 0%, transparent 65%);
  animation: meshDrift 28s ease-in-out infinite reverse;
}
.hero-viz .mesh-c {
  width: 42%; height: 42%; bottom: -8%; left: 30%; opacity: 0.20;
  background: radial-gradient(circle, #ffd6f5 0%, transparent 65%);
  animation: meshDrift 32s ease-in-out infinite;
}

.hero-viz {
  position: absolute; inset: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--dark);
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
}

/* looping motion graphic — fills the hero, no edge mask */
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0;
  opacity: 0;
  animation: heroVideoFadeIn 1.6s ease-out 0.3s forwards;
  pointer-events: none;
  will-change: opacity;
}
@keyframes heroVideoFadeIn { to { opacity: 1; } }

/* LIGHTER brand-tinted veil — heavier where the headline lives on the
   left, fading toward translucent on the right so the video actually
   reads through. The horizontal gradient is what saves text contrast
   while letting the motion graphic breathe on the bare side. */
.hero-tint {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(95deg,
      rgba(6,8,24,0.70) 0%,
      rgba(8,10,28,0.55) 30%,
      rgba(8,10,28,0.28) 65%,
      rgba(8,10,28,0.18) 100%),
    linear-gradient(180deg,
      rgba(8,10,28,0.18) 0%,
      transparent 35%,
      transparent 70%,
      rgba(8,10,28,0.30) 100%),
    radial-gradient(ellipse at 30% 40%, rgba(33,187,215,0.16), transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(191,28,193,0.14), transparent 65%);
  mix-blend-mode: normal;
}
@media (max-width: 1000px){
  /* on mobile, headline takes the full width — top-anchored gradient so
     the upper region stays readable while the lower video frame shows */
  .hero-tint {
    background:
      linear-gradient(180deg,
        rgba(6,8,24,0.78) 0%,
        rgba(8,10,28,0.62) 30%,
        rgba(8,10,28,0.38) 65%,
        rgba(8,10,28,0.60) 100%),
      radial-gradient(ellipse at 28% 25%, rgba(33,187,215,0.22), transparent 65%),
      radial-gradient(ellipse at 72% 80%, rgba(191,28,193,0.18), transparent 70%);
  }
}

/* vignette no longer needed — the heavy tint replaces it */
.hero-vignette { display: none; }

/* card-era overlays don't belong on the full-bleed video — kill them
   with a high-specificity selector so they never resurface */
.hero .hc-pricetag,
.hero .fx-chips,
.hero-viz .hc-pricetag,
.hero-viz .fx-chips { display: none !important; }

/* reduced-motion: poster only, no animation, dimmer halo */
@media (prefers-reduced-motion: reduce) {
  .hero-video { animation: none; opacity: 1; }
  .hero-halo { animation: none; opacity: 0.4; }
  .hero-viz .mesh { animation: none; }
}

/* ============================================================
   HERO  ·  Universal full-bleed treatments
   Buttons + ticker chips that need to render on dark video bg.
   ============================================================ */
/* ghost button inverts to glass-on-dark inside the hero */
.hero .btn-ghost {
  background: rgba(255,255,255,0.10);
  color: #fff;
  border-color: rgba(255,255,255,0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.hero .btn-ghost:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.38);
  color: #fff;
}

/* live ticker — sits at the BOTTOM of the hero-copy under the CTAs as a
   row of currency pair chips. Liquid-glass surface so it reads as part
   of the hero motion without competing with the headline. */
.hero .ticker-bar {
  margin-top: 20px;
  width: fit-content;
  max-width: 100%;
  display: inline-flex; align-items: stretch;
  padding: 4px;
  background: rgba(8,10,28,0.42);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-l);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.20),
    0 18px 40px -18px rgba(8,10,28,0.45);
}
.hero .tk {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 18px;
  border-right: 1px solid rgba(255,255,255,0.08);
  color: #fff;
}
.hero .tk:last-child { border-right: none; }
.hero .tk .pair { color: rgba(255,255,255,0.58); font-size: 10.5px; letter-spacing: 0.12em; }
.hero .tk .row  { display: flex; align-items: baseline; gap: 10px; }
.hero .tk [data-tk-val] { color: #fff; font-size: 17px; font-family: var(--mono); font-weight: 500; letter-spacing: 0; }
.hero .tk .delta { font-size: 11px; }
.hero .tk .delta.pos { color: #6ef0b8; }
.hero .tk .delta.neg { color: #ff9bb0; }

/* tablet: keep the row, just tighten the chip padding */
@media (max-width: 1000px){
  .hero .ticker-bar { margin-top: 24px; }
  .hero .tk { padding: 9px 14px; }
}
@keyframes meshDrift { 0%,100% { transform: translate(0,0) scale(1);} 33% { transform: translate(14%,-10%) scale(1.12);} 66% { transform: translate(-10%,12%) scale(0.94);} }
.hero-chart { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .hc-line { stroke-dasharray: 2200; stroke-dashoffset: 2200; animation: hcDraw 3.4s ease-out .3s forwards, hcFloat 12s ease-in-out 3.7s infinite alternate; }
  .hc-area { opacity: 0; animation: hcFade 1.4s ease-out 2.4s forwards, hcFloat 12s ease-in-out 3.7s infinite alternate; }
}
@keyframes hcDraw { to { stroke-dashoffset: 0; } }
@keyframes hcFade { to { opacity: 1; } }
@keyframes hcFloat { to { transform: translateY(-10px); } }
.hc-pulse { animation: hcPulse 1.6s ease-in-out infinite; }
.hc-pulse-ring { animation: hcRing 1.8s ease-out infinite; transform-origin: 1180px 68px; }
@keyframes hcPulse { 0%,100%{ r:4;} 50%{ r:6;} }
@keyframes hcRing { 0%{ transform: scale(1); opacity: .9;} 100%{ transform: scale(4); opacity: 0;} }
.hero-viz .fx-chips { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.fx-chip {
  position: absolute; display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(10px); font-family: var(--mono); font-size: 12px; color: #fff;
  box-shadow: 0 12px 30px -12px rgba(0,0,0,0.35); white-space: nowrap;
  animation: chipFloat 8s ease-in-out infinite;
}
.fx-chip .fc-pair { font-weight: 600; letter-spacing: 0.04em; }
.fx-chip .fc-up { color: #c0ffe2; font-weight: 600; } .fx-chip .fc-dn { color: #ffd1de; font-weight: 600; }
.fx-chip.c1 { top: 16%; left: 8%; animation-delay: 0s; }
.fx-chip.c2 { top: 52%; right: 8%; animation-delay: 2s; }
.fx-chip.c3 { bottom: 12%; left: 12%; animation-delay: 4s; }
@keyframes chipFloat { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-14px);} }
@media (max-width: 1000px){ .hero-canvas-wrap { order: 2; min-height: 360px; } }
@media (max-width: 640px){ .hero-canvas-wrap { min-height: 300px; } }

/* hero chart — premium upgrades */
.viz-slot { padding: 0; overflow: hidden; }
.viz-slot image-slot { border-radius: var(--r-xl); width: 100%; height: 100%; }
.hc-pricetag {
  position: absolute; top: 13%; right: 7%; z-index: 4;
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 16px; border-radius: 14px;
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.32);
  backdrop-filter: blur(12px); box-shadow: 0 14px 34px -14px rgba(0,0,0,0.4);
  color: #fff;
}
.hc-pricetag .hc-pt-pair { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; color: rgba(255,255,255,0.8); }
.hc-pricetag .hc-pt-row { display: flex; align-items: baseline; gap: 9px; }
.hc-pricetag [data-tk-val] { font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; }
.hc-pricetag .hc-pt-d { font-family: var(--mono); font-size: 11.5px; color: #c0ffe2; }
.hc-pricetag .hc-pt-d.neg { color: #ffd1de; }
@media (max-width: 1000px){ .hc-pricetag { top: 8%; } }
@media (prefers-reduced-motion: no-preference) {
  .hc-area2 { opacity: 0; animation: hcFade 1.6s ease-out 1.6s forwards, hcFloat 14s ease-in-out 3.2s infinite alternate; }
  .hc-grid line { opacity: 0; animation: hcFade 1s ease-out forwards; }
  .hc-grid line:nth-child(2){ animation-delay: .1s; } .hc-grid line:nth-child(3){ animation-delay: .2s; } .hc-grid line:nth-child(4){ animation-delay: .3s; }
  .hc-vol rect { transform: scaleY(0); transform-origin: bottom; animation: volGrow .7s cubic-bezier(.2,.8,.2,1) forwards; }
  .hc-nodes .hc-node { opacity: 0; animation: nodeIn .5s ease-out forwards; }
  .hc-node.n1 { animation-delay: 1.6s; } .hc-node.n2 { animation-delay: 2.2s; } .hc-node.n3 { animation-delay: 2.8s; }
}
@keyframes volGrow { to { transform: scaleY(1); } }
@keyframes nodeIn { from { opacity: 0; } to { opacity: 1; } }

/* hero ticker */
.ticker-bar {
  margin-top: 44px; display: inline-flex; gap: 0; flex-wrap: wrap;
  background: rgba(255,255,255,0.6); border: 1px solid var(--line);
  border-radius: var(--r-m); padding: 4px; backdrop-filter: blur(10px);
  box-shadow: var(--sh-xs);
}
.tk {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 22px;
  border-right: 1px solid var(--line);
}
.tk:last-child { border-right: none; }
.tk .pair { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; color: var(--ink-dim); }
.tk .row { display: flex; align-items: baseline; gap: 10px; }
.tk [data-tk-val] { font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: -0.02em; }
@media (max-width: 540px){ .tk { padding: 10px 14px; } .tk [data-tk-val]{ font-size: 15px; } }
@media (max-width: 640px){
  .ticker-bar { width: 100%; }
  .tk { flex: 1 1 100%; border-right: none; border-bottom: 1px solid var(--line); }
  .tk:last-child { border-bottom: none; }
}

/* ============ BROKER MARQUEE ============ */
.brokers { padding: 24px 0 8px; }

/* ============ IC PARTNERS · framed showcase band ===================
   Big centered "Proud partners of" eyebrow, MASSIVE logos under it,
   and a hairline divider on TOP and BELOW so the band reads as a
   deliberately framed showcase, not a loose line in the page flow. */
.ic-partners {
  /* Strip padding tightened repeatedly per client feedback — the band
     kept reading as "too much white space around" the logos. Cut
     48 → 28 → 14 on desktop. Internal label-to-logo gap + logo box
     height also reduced (below) so the band hugs the logos. */
  padding: 14px 0;
  /* No top border — the hero fades INTO this section via its ::after
     gradient, so a hard 1px line would re-introduce the "wall" we just
     killed. Bottom border keeps the partners strip framed from the
     content below it. */
  border-bottom: 1px solid var(--line);
  text-align: center;
  /* Soft top wash picks up the hero's indigo/magenta aurora at very
     low opacity so brand colour leaks ~200px into this section. Reads
     as one continuous surface with the hero. The blush ellipse anchored
     bottom-left warms the dead corner where the eye lands and carries
     the glow down into the "Who We Work With" section below. */
  background:
    radial-gradient(62% 150% at -2% 120%, rgba(201,116,214,0.26), rgba(150,130,236,0.10) 42%, transparent 70%),
    radial-gradient(900px 220px at 50% -120px, rgba(120, 60, 180, 0.07), transparent 70%),
    radial-gradient(700px 200px at 30% -80px, rgba(58, 92, 220, 0.05), transparent 70%),
    var(--bg);
}
.ic-partners .wrap {
  /* Gap between "Proud Partners Of" label and the IC logos cut
     44 → 24 (−45%) to match the tighter outer padding. */
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
/* Carry the partners-strip blush down into the top-left of "Who We Work
   With" so the left margin reads as a deliberate ambient glow rather
   than dead white space. Pure radial-gradient background → sits behind
   all content (cards/text paint on top), no extra DOM, no blur filter. */
#who {
  /* Pull the heading up under the partners strip — the inherited 38px
     section top-padding added to the strip's white space. */
  padding-top: 22px;
  background:
    radial-gradient(66% 150% at -2% -16%, rgba(201,116,214,0.20), rgba(150,130,236,0.08) 42%, transparent 70%);
}
.ic-partners-lbl {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.ic-partners-logos {
  /* Flex (not grid) so the gap below controls the ACTUAL visual
     distance between the two logos. Previous grid 1fr/1fr layout split
     the container into two equal cells and centered each logo inside —
     so on wide viewports the logos drifted ~400px apart even when the
     gap variable was small. Flex with justify-content: center keeps
     them sized to content and only as far apart as the gap dictates. */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(40px, 5vw, 96px);
  width: 100%;
  opacity: 0.85;
  transition: opacity .25s;
}
.ic-partners-logos:hover { opacity: 1; }

/* Original brand PNGs (transparent background) — the green-letter
   accent is flattened to grey via grayscale, and brightness drops the
   pure-white wordmarks to a single mid-grey tone so both logos read
   as flat grey marks. No card, no border, no background.
   Default image-rendering — crisp-edges was making them pixelated.
   No hover filter change — user feedback that it read as a 'glare'. */
.ic-logo {
  display: block;
  width: auto;
  /* 180 → 220 → 184. The 220 box carried so much baked-in transparent
     padding (esp. IC Markets) that the logos floated in white space.
     184 keeps them prominent while the band hugs them tighter. */
  height: 184px;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(1) brightness(0.55) contrast(1.05);
}
@media (max-width: 1080px){
  .ic-partners { padding: 22px 0; }
  .ic-logo { height: 150px; }
  .ic-partners-logos { gap: clamp(28px, 4vw, 60px); }
  .ic-partners .wrap { gap: 22px; }
}
@media (max-width: 640px){
  /* Stack vertically on phones — flex-direction: column instead of
     the obsolete grid-template-columns override. */
  .ic-partners { padding: 28px 0; }
  .ic-partners-logos {
    flex-direction: column;
    gap: 22px;
    max-width: 360px;
    margin: 0 auto;
  }
  .ic-logo { height: 120px; }
  .ic-partners-lbl { font-size: 12px; letter-spacing: 0.20em; }
  .ic-partners .wrap { gap: 28px; }
}
@media (max-width: 380px){
  .ic-partners-logos { gap: 18px; max-width: 320px; }
  .ic-logo { height: 108px; }
}
.brokers .lbl { text-align: center; margin-bottom: 26px; }
.broker-logo { font-family: var(--display); font-weight: 600; font-size: 23px; letter-spacing: -0.02em; color: var(--ink); opacity: 0.42; transition: opacity .2s; display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.broker-logo:hover { opacity: 0.9; }
.broker-logo .bdot { width: 9px; height: 9px; border-radius: 3px; background: var(--grad); }

/* ============ WHO WE WORK WITH ============ */
.persona { display: flex; flex-direction: column; }
.persona .icon-tile { margin-bottom: 22px; }
.persona h3 { margin-bottom: 12px; }
.persona p { flex: 1; }
.persona .btn { margin-top: 24px; align-self: flex-start; }
.persona .num-badge { position: absolute; top: 26px; right: 30px; font-family: var(--mono); font-size: 12px; color: var(--ink-dim); }

/* ============ FEATURE / ABOUT SPLIT ============ */
/* Map column widened from 1.02fr -> 1.35fr so the world map gets ~57%
   of the row width instead of ~50%. Text is denser, map needs the room
   for continents + city labels (the new LATAM cities especially). */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (max-width: 900px){ .split { grid-template-columns: 1fr; gap: 36px; } }
.split-visual {
  position: relative; border-radius: var(--r-xl); overflow: hidden; min-height: clamp(380px, 36vw, 520px);
  background: var(--grad-soft); border: 1px solid var(--line); box-shadow: var(--sh-md);
}
.about-bullets { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 16px; }
.about-bullets li { display: flex; gap: 14px; align-items: flex-start; }
.about-bullets li .ic { width: 26px; height: 26px; flex: none; color: var(--indigo); }

/* ============ STAT BAND (dark) ============ */
.stat-band { background: var(--dark); color: var(--dark-ink); position: relative; overflow: hidden; }
.stat-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(680px 400px at 12% 0%, rgba(33,187,215,0.22), transparent 65%),
              radial-gradient(640px 420px at 88% 100%, rgba(191,28,193,0.22), transparent 65%);
}
.stat-band .wrap { position: relative; z-index: 1; }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
@media (max-width: 860px){ .stat-grid { grid-template-columns: repeat(2,1fr); gap: 40px 24px; } }
@media (max-width: 520px){ .stat-grid { grid-template-columns: 1fr; } }
.stat .big { font-family: var(--display); font-weight: 500; font-size: clamp(48px, 5vw, 78px); line-height: 1; letter-spacing: -0.04em;
  background: linear-gradient(120deg,#fff,#bfe9f5 60%,#f0b9ef); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat .lbl { font-family: var(--display); font-weight: 600; font-size: 17px; margin-top: 14px; color: #fff; }
.stat .sup { color: var(--dark-mute); font-size: 14px; margin-top: 8px; line-height: 1.5; }

/* ============ INLINE MAP (about-section split visual) ============
   The map sits inside the right column of the About split. A brand
   halo bleeds outside the card into the cream section bg so the dark
   stage feels like it's emerging from a brand-lit environment rather
   than sitting on top of paper. */
.map-inline {
  position: relative;
  border-radius: var(--r-xl);
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible !important;
  isolation: isolate;
  min-height: clamp(420px, 36vw, 540px);
  display: flex; align-items: stretch;
}
.map-inline-halo {
  position: absolute;
  inset: -90px -120px -120px -100px;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.85;
  background:
    radial-gradient(closest-side at 30% 35%, rgba(33,187,215,0.42) 0%, transparent 72%),
    radial-gradient(closest-side at 75% 65%, rgba(74,87,216,0.40) 0%, transparent 75%),
    radial-gradient(closest-side at 55% 92%, rgba(191,28,193,0.32) 0%, transparent 78%);
  mix-blend-mode: multiply;
  animation: mapInlineHaloDrift 24s ease-in-out infinite alternate;
}
@keyframes mapInlineHaloDrift {
  0%   { transform: translate(-1%, 1%) scale(1); }
  100% { transform: translate(2%, -2%) scale(1.05); }
}
.map-inline-stage {
  position: relative; z-index: 1;
  width: 100%;
  /* Aspect ratio tightened 1.94:1 → 1.5:1 (3:2) so the canvas reads
     as a substantial visual block instead of a letterboxed strip.
     Continents + city markers + arcs get more vertical breathing
     room. Adding LATAM (Mexico/São Paulo) needed this — Sydney's
     removal lets us pull the canvas in without losing density. */
  aspect-ratio: 3 / 2;
  border-radius: var(--r-xl);
  overflow: hidden;
  background:
    radial-gradient(1200px 600px at 50% 30%, rgba(33,187,215,0.10), transparent 60%),
    linear-gradient(180deg, #0e1230 0%, #0a0d24 100%);
  border: 1px solid var(--dark-line);
  box-shadow:
    0 30px 80px -30px rgba(11,14,34,0.55),
    0 -30px 90px -30px rgba(33,187,215,0.22),
    0 60px 120px -20px rgba(191,28,193,0.20);
  align-self: center;
}
.map-inline-stage svg { display: block; width: 100%; height: 100%; }
@media (max-width: 900px){
  .map-inline { min-height: 0; }
  .map-inline-halo { inset: -40px -60px -60px -50px; filter: blur(70px); }
}

/* ============ WORLD MAP SECTION ============ */
.map-wrap {
  background: var(--dark); border-radius: var(--r-xl);
  padding: 48px 48px 56px; color: var(--dark-ink); position: relative; overflow: hidden;
  border: 1px solid var(--dark-line);
  box-shadow: var(--sh-md);
}
.map-wrap::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(900px 360px at 85% 30%, rgba(191,28,193,0.18), transparent 60%),
    radial-gradient(700px 300px at 12% 80%, rgba(33,187,215,0.18), transparent 60%);
  pointer-events: none;
}
.map-wrap > * { position: relative; z-index: 1; }
.map-head {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: end; margin-bottom: 36px;
}
@media (max-width: 900px){ .map-head { grid-template-columns: 1fr; } }
@media (max-width: 640px){ .map-wrap { padding: 30px 22px 36px; } }
.map-head h2 { color: #fff; }
.map-head p { color: var(--dark-mute); margin-top: 18px; max-width: 50ch; }
.map-head .stats { display: flex; gap: 28px; flex-wrap: wrap; }
.map-head .stat-mini { border-left: 1.5px solid var(--dark-line); padding-left: 14px; }
.map-head .stat-mini .v { font-family: var(--display); font-size: 30px; font-weight: 500; color: #fff; letter-spacing: -0.02em; line-height: 1; }
.map-head .stat-mini .l { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dark-mute); margin-top: 6px; }

.map-stage {
  /* Mirrors .map-inline-stage — 1.5:1 substantial canvas. */
  position: relative; aspect-ratio: 3 / 2;
  border-radius: var(--r-l); overflow: hidden;
  background:
    radial-gradient(1200px 600px at 50% 30%, rgba(33,187,215,0.08), transparent 60%),
    linear-gradient(180deg, #0e1230 0%, #0a0d24 100%);
  border: 1px solid var(--dark-line);
}
.map-stage svg { display: block; width: 100%; height: 100%; }

/* dot fills + lines */
.map-dot { fill: rgba(140, 158, 220, 0.32); }
.map-dot.hi { fill: rgba(180, 210, 255, 0.65); }
.map-dot.bright { fill: rgba(220, 232, 255, 0.85); }
.map-grid-line { stroke: rgba(255,255,255,0.05); stroke-width: 0.6; fill: none; }

/* ocean stars — twinkling */
.star { fill: rgba(255,255,255,0.55); }
.star.tw { animation: twinkle 3.2s ease-in-out infinite; }
@keyframes twinkle { 0%,100% { opacity: 0.25; } 50% { opacity: 0.95; } }

/* arcs — gradient, fading at endpoints */
.arc {
  fill: none; stroke: url(#arcGradFade); stroke-width: 1.4; stroke-linecap: round; opacity: 0.95;
  stroke-dasharray: 1200; stroke-dashoffset: 1200;
  animation: arcDraw 2.4s cubic-bezier(.4,.0,.2,1) forwards;
}
.arc.a2 { animation-delay: 0.2s; }
.arc.a3 { animation-delay: 0.4s; }
.arc.a4 { animation-delay: 0.6s; }
.arc.a5 { animation-delay: 0.8s; }
@keyframes arcDraw { to { stroke-dashoffset: 0; } }

/* arc travel pulse (chromatic dot moving along the arc) */
.traveler { fill: url(#travelPulse); }

/* CITY MARKERS */
.city { transform-origin: center; }
.city-dot { fill: #fff; }
.city-ring { fill: none; stroke: rgba(255,255,255,0.45); stroke-width: 1; }
.city-glow { fill: url(#cityGlow); opacity: 0.95; }

/* HQ DUBAI — gradient ring + larger glow + dual pulse */
.hq-pulse {
  transform-origin: center; transform-box: fill-box;
  animation: pulseRing 2.8s cubic-bezier(.2,.85,.25,1) infinite;
}
.hq-pulse.delayed { animation-delay: 1.4s; }
@keyframes pulseRing {
  0%   { r: 9;  opacity: 0.75; }
  100% { r: 48; opacity: 0; }
}
.hq-glow { fill: url(#hqGlow); }
.hq-core { fill: url(#hqCore); }
.hq-ring { fill: none; stroke: url(#hqRingGrad); stroke-width: 1.6; opacity: 0.9; }
.hq-ring-spin {
  transform-origin: center; transform-box: fill-box;
  animation: hqSpin 14s linear infinite;
}
@keyframes hqSpin { to { transform: rotate(360deg); } }

/* LABEL BACKGROUNDS — small pill behind text for legibility */
.label-bg {
  fill: rgba(10, 14, 36, 0.72);
  stroke: rgba(255,255,255,0.10); stroke-width: 0.8;
}
.city-label {
  fill: #fff;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
}
.city-sub {
  fill: var(--dark-mute);
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
}
.label-line { stroke: rgba(255,255,255,0.32); stroke-width: 1; }
.hq-tag {
  fill: #fff; font-family: "JetBrains Mono", monospace;
  font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
}
.hq-tag-bg { fill: url(#hqTagGrad); }

/* HUD */
.hud-mono {
  fill: rgba(255,255,255,0.42);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
}

/* legend strip below map */
.map-legend {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 28px;
}
@media (max-width: 900px){ .map-legend { grid-template-columns: repeat(2, 1fr); } }
.legend-cell {
  background: rgba(255,255,255,0.04); border: 1px solid var(--dark-line);
  border-radius: var(--r-m); padding: 16px 16px 18px;
  display: flex; flex-direction: column; gap: 6px; transition: background .2s, border-color .2s;
}
.legend-cell:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.18); }
.legend-cell .city-name {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--display); font-size: 15px; font-weight: 600; color: #fff;
}
.legend-cell .city-name .pip {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--grad); box-shadow: 0 0 0 3px rgba(33,187,215,0.18);
}
.legend-cell .city-name .pip.hq { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.16); }
.legend-cell .city-role { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dark-dim); }
.legend-cell .city-meta { font-size: 12.5px; color: var(--dark-mute); margin-top: 2px; }

/* reduced motion — skip the spinning ring and pulse, keep dot map static */
@media (prefers-reduced-motion: reduce) {
  .hq-ring-spin, .hq-pulse, .traveler, .star.tw { animation: none; }
  .arc { animation: none; stroke-dashoffset: 0; }
}

/* ============ HOW IT WORKS ============ */
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; position: relative; }
@media (max-width: 860px){ .steps { grid-template-columns: 1fr; } }
.step { position: relative; }
.step .step-n {
  font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0.1em;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--line-2);
  color: var(--indigo); margin-bottom: 22px; background: var(--bg-card);
}
.step h3 { margin-bottom: 12px; }
.step-line { position: absolute; top: 21px; left: 100%; width: 28px; height: 1.5px;
  background: linear-gradient(90deg, var(--line-2), transparent); }
@media (max-width: 860px){ .step-line { display: none; } }

/* ============ BENEFIT GRID ============ */
.benefit { padding: 30px; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--bg-card); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s; }
.benefit:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: var(--line-2); }
.benefit .icon-tile { margin-bottom: 20px; }
.benefit h4 { margin-bottom: 10px; }

/* ============ TESTIMONIALS ============ */
.tcard { padding: 36px; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--bg-card); box-shadow: var(--sh-sm); display: flex; flex-direction: column; height: 100%; }
.tcard .q-ic { width: 34px; height: 34px; color: var(--magenta); opacity: 0.65; margin-bottom: 18px; }
.tcard p { font-size: 16px; line-height: 1.65; color: var(--ink); flex: 1; }
.tcard .who { display: flex; align-items: center; gap: 13px; margin-top: 26px; }
.tcard .av { width: 46px; height: 46px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; color: #fff; font-family: var(--display); font-weight: 600; font-size: 17px; }
.tcard .nm { font-weight: 600; font-size: 15px; }
.tcard .rl { font-size: 13px; color: var(--ink-mute); }
.t-scroller { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(360px, 1fr); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; scrollbar-width: thin; scroll-behavior: smooth; }
.t-scroller > * { scroll-snap-align: start; }
@media (max-width: 640px){ .t-scroller { grid-auto-columns: 86%; } }

/* Header laid out as a flex row so the title sits left, nav buttons
   right. Stacks on phones since the buttons are hidden there anyway
   (native touch swipe is preferred). */
.t-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.t-nav { display: inline-flex; gap: 10px; align-self: flex-end; }
@media (max-width: 700px){ .t-nav { display: none; } }

.t-btn {
  width: 46px; height: 46px;
  display: inline-grid; place-items: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  cursor: pointer;
  color: var(--ink);
  transition: transform .18s cubic-bezier(.2,.85,.25,1),
              background .18s, border-color .18s, color .18s, opacity .18s;
}
.t-btn:hover:not(:disabled) {
  background: var(--grad);
  border-color: transparent;
  color: #fff;
  transform: translateY(-1px);
}
.t-btn:active:not(:disabled) { transform: translateY(0); }
.t-btn:disabled { opacity: 0.35; cursor: default; }
.t-btn:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; }

/* Inline SVG-free chevron drawn from a border so it inherits color. */
.t-arr {
  width: 10px; height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(135deg);
  margin-left: 3px;
}
.t-arr.t-arr--right { transform: rotate(-45deg); margin-left: -3px; margin-right: 3px; }

/* ============ CTA BANNER ============ */
.cta-banner { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: clamp(48px, 6vw, 80px) clamp(24px, 5vw, 64px); background: var(--dark); color: #fff; box-shadow: var(--sh-lg); }
.cta-banner::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(700px 420px at 10% -20%, rgba(33,187,215,0.34), transparent 60%),
              radial-gradient(700px 460px at 100% 120%, rgba(191,28,193,0.36), transparent 60%); }
.cta-banner > * { position: relative; z-index: 1; }
.cta-banner h2 { color: #fff; }
@media (max-width: 700px){ .cta-banner { padding: 36px 28px; } }

/* ============ PAGE HERO (interior pages) ============
   Bottom padding cut 76px → 40px (−47%). The page-hero used to
   compound with the next .section.tight (42px) and any in-hero
   .mt-l (44px) to make a 160px+ vacant strip between the hero CTA
   and the next eyebrow. */
.page-hero { position: relative; padding-top: calc(var(--nav-h) + 56px); padding-bottom: 40px; text-align: center; overflow: hidden; }
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero .lead { margin: 18px auto 0; max-width: 48rem; }
.page-hero .eyebrow { justify-content: center; margin-bottom: 16px; }
.page-hero-orb { position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: 900px; height: 520px; border-radius: 50%;
  /* Blush-purple wash (brand magenta → lavender) instead of the old flat
     indigo — warms the hero so the glow reads as an intentional accent,
     not a washed-out smudge. */
  background: radial-gradient(circle, rgba(201,116,214,0.20), rgba(127,139,255,0.08) 46%, transparent 72%); filter: blur(20px); pointer-events: none; }
@media (max-width: 640px){
  .page-hero { padding-top: calc(var(--nav-h) + 32px); padding-bottom: 28px; }
}

/* ============ PAGE HERO — AURORA VARIANT ============
   Dark full-bleed banner that reuses the homepage hero's visual
   language (aurora blobs + flowing ribbons) without the currency
   chips, tickers, or chart. Markup contract:
     .page-hero.page-hero--aurora
       > .ph-aurora (3 spans)
       > svg.ph-flow (#ab1/#ab2/#ab3 paths, driven by aurora-banner.js)
       > .wrap (content — already z-indexed above by base rules) */
.page-hero--aurora {
  background:
    radial-gradient(1100px 700px at 80% 28%, rgba(120, 60, 180, 0.42), transparent 62%),
    radial-gradient(900px 620px at 10% 85%, rgba(58, 92, 220, 0.32), transparent 60%),
    linear-gradient(160deg, #0a0f28 0%, #070a1c 55%, #0a0720 100%);
  isolation: isolate;
  /* Enough bottom padding that the tab-panel copy sits in the still-dark
     part of the fade — but no more. The first cut (96px) + a 140px fade
     stacked into a ~250px washed-out band that read as dead white space. */
  padding-bottom: 48px;
}
@media (max-width: 640px){ .page-hero--aurora { padding-bottom: 36px; } }
.page-hero--aurora .page-hero-orb { display: none; } /* lavender orb is for light bg */

/* drifting colour blobs (same palette as the homepage hero) */
/* Aurora presence bumped (opacity .55 → .75, stronger blob alphas)
   so the banner background reads as a rich glow instead of flat
   navy — the blobs were getting lost under the blur. */
.ph-aurora {
  position: absolute; inset: -20%; z-index: 0;
  filter: blur(60px); opacity: 0.75; pointer-events: none;
}
.ph-aurora span { position: absolute; border-radius: 50%; mix-blend-mode: screen; }
.ph-aurora .a1 {
  width: 760px; height: 760px; top: -10%; right: -2%;
  background: radial-gradient(circle, rgba(207,63,214,0.62), transparent 66%);
  animation: phDrift1 24s ease-in-out infinite;
}
.ph-aurora .a2 {
  width: 680px; height: 680px; bottom: -16%; left: 4%;
  background: radial-gradient(circle, rgba(58,92,220,0.62), transparent 66%);
  animation: phDrift2 30s ease-in-out infinite;
}
.ph-aurora .a3 {
  width: 600px; height: 600px; top: 22%; left: 38%;
  background: radial-gradient(circle, rgba(43,198,224,0.45), transparent 66%);
  animation: phDrift1 34s ease-in-out infinite reverse;
}
@keyframes phDrift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-50px, 40px) scale(1.1); } }
@keyframes phDrift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(60px, -30px) scale(0.92); } }

/* flowing ribbons canvas — masked top+bottom so lines dissolve instead
   of cutting at the banner edges (same "no hard ends" rule as the
   homepage hero) */
.ph-flow {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; pointer-events: none;
  /* Ribbons soften at the very top + bottom edges only — the banner
     itself ends on a clean line, so the lines just shouldn't be cut
     mid-stroke by it. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 22%, black 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, black 22%, black 86%, transparent 100%);
}

/* Centre scrim — dims the glow + ribbons exactly behind the text
   column so copy stays readable over the brighter aurora; edges of
   the banner keep their full colour. Paints above .ph-aurora and
   .ph-flow (same z-index, later in paint order), below .wrap (z 1). */
.page-hero--aurora::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(880px 480px at 50% 46%, rgba(7,10,28,0.58), transparent 72%);
}

/* dark-bg text + control overrides */
.page-hero--aurora .h1 { color: #fff; }
.page-hero--aurora .lead { color: #c2c8e6; }
.page-hero--aurora .eyebrow { color: rgba(255,255,255,0.82); }
.page-hero--aurora .eyebrow .dot { box-shadow: 0 0 0 4px rgba(255,255,255,0.10); }
.page-hero--aurora .small { color: #b9bfdd; }
.page-hero--aurora .tabs { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.14); }
.page-hero--aurora .tab { color: #c6cbe8; }
.page-hero--aurora .tab.active { background: rgba(255,255,255,0.94); color: #14162e; }

/* No white fade-out at the bottom — both fade attempts (140px and
   90px) read as a foggy washed band creeping into the dark banner.
   The banner now ends on a clean edge; the ribbons dissolve via
   their own mask just before it, and the light section below starts
   with its normal padding. Simple, intentional contrast. */

/* ============ TABS ============ */
.tabs { display: inline-flex; gap: 4px; padding: 5px; border-radius: var(--r-pill); background: var(--bg-soft); border: 1px solid var(--line); }
.tab { padding: 10px 22px; border-radius: var(--r-pill); font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--ink-mute); transition: all .2s; }
.tab.active { background: var(--bg-card); color: var(--ink); box-shadow: var(--sh-xs); }
[data-panel] { display: none; }
[data-panel].active { display: block; animation: fadeUp .4s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px);} to { opacity: 1; transform: none;} }

/* ============ FAQ ACCORDION ============ */
.acc-item { border-bottom: 1px solid var(--line); }
.acc-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 0; cursor: pointer; text-align: left; width: 100%; }
.acc-head h4 { font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: -0.015em; }
.acc-icon { width: 28px; height: 28px; flex: none; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; transition: transform .3s, background .3s, color .3s; color: var(--ink-mute); }
.acc-icon svg { width: 14px; height: 14px; }
.acc-item.open .acc-icon { transform: rotate(45deg); background: var(--grad); color: #fff; border-color: transparent; }
.acc-body { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.2,.8,.2,1); }
.acc-item.open .acc-body { max-height: 400px; }
.acc-body p { padding: 0 0 28px; max-width: 70ch; }

/* ============ TOOL SHOWCASE ============ */
.tool-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.tool-row.flip .tool-visual { order: 2; }
@media (max-width: 920px){ .tool-row, .tool-row.flip { grid-template-columns: 1fr; gap: 32px; } .tool-row.flip .tool-visual { order: 0; } }
.tool-visual { position: relative; border-radius: var(--r-l); overflow: hidden; min-height: clamp(340px, 34vw, 420px); background: linear-gradient(160deg, #fff, var(--bg-soft)); border: 1px solid var(--line); box-shadow: var(--sh-md); padding: 28px; }

/* === Real product screenshots — side-by-side alternating layout ===
   The new captures (~1.1:1) work cleanly in a half-width cell, so we
   keep the original 2-column .tool-row grid and let .flip control the
   alternation. Tool 1 (no flip) → text L / shot R.
   Tool 2 (.flip)               → shot L / text R.
   Tool 3 (no flip)             → text L / shot R.
   Previous override forced single-column for 2.6:1 banners that have
   since been swapped out. */
.tool-row.tool-row--shot { /* inherits the base 2-col grid from .tool-row */ }
.tool-row.tool-row--shot.flip .tool-visual { order: 0; }

.tool-visual.tool-visual--shot {
  /* Allow it to grow with the screenshot rather than the rigid 340px
     minimum used for placeholder visuals. */
  min-height: 0;
  /* Removed the dark wrapper (was background: var(--dark) + 1px dark
     border + 16px padding). The new screenshots are full-bleed product
     UI captures that already have their own chrome — wrapping them in
     a black frame made them look stuck inside a tablet bezel against
     the light page bg. They now float cleanly with just a soft shadow
     applied to the IMAGE itself (see .tool-screenshot below). */
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  align-self: center;
}
/* Screenshot renders flat — no border-radius, no shadow.
   The rounded corners were anti-aliasing into the warm page bg and
   reading as a thin dark rim, and the drop shadow was reinforcing
   that "framed" look. The capture itself already has its own UI
   chrome (rounded sidebar, cards, etc.), so any extra wrapping
   styling just competes with it. */
.tool-visual.tool-visual--shot .tool-screenshot {
  border-radius: 0;
  box-shadow: none;
}
.tool-screenshot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--r-l) - 6px);
  background: var(--dark);
}
@media (max-width: 640px){
  .tool-visual.tool-visual--shot { padding: 10px; }
}
.tool-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 13px; }
.tool-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--ink-mute); }
.tool-list li .ic { width: 22px; height: 22px; flex: none; color: var(--pos); margin-top: 1px; }
.tool-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: var(--r-pill); background: var(--grad-soft); border: 1px solid var(--line); font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--indigo); margin-bottom: 18px; }

/* mini dashboard mock inside tool visual */
.mock { background: #fff; border-radius: var(--r-s); border: 1px solid var(--line); box-shadow: var(--sh-sm); overflow: hidden; }
.mock-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.mock-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.mock-body { padding: 18px; }
.mini-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.mini-row:last-child { border-bottom: none; }
.bar-track { height: 7px; border-radius: 4px; background: var(--bg-soft); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 4px; background: var(--grad); }

/* contact layout */
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 900px){ .contact-grid { grid-template-columns: 1fr; gap: 32px; } }
.contact-item { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--line); }
.contact-item .icon-tile { width: 46px; height: 46px; flex: none; }
.contact-item .ci-label { font-size: 12.5px; color: var(--ink-dim); font-family: var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.contact-item .ci-val { font-weight: 600; font-size: 16px; margin-top: 3px; }
.contact-item.wa { background: linear-gradient(110deg, rgba(18,160,106,0.08), transparent); border-radius: var(--r-s); padding: 18px; border-bottom: 1px solid var(--line); }
@media (max-width: 640px){
  .contact-item { gap: 14px; }
  .contact-item .ci-val { font-size: 15px; }
  .contact-item .ci-val[style] { flex-wrap: wrap; }
}

/* value cards */
.value-card { padding: 32px; border-radius: var(--r-l); background: var(--bg-card); border: 1px solid var(--line); box-shadow: var(--sh-xs); transition: transform .35s, box-shadow .35s; }
.value-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.value-card .icon-tile { margin-bottom: 20px; }

/* team placeholder cards */
.team-card { border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--line); background: var(--bg-card); box-shadow: var(--sh-sm); }
.team-photo { aspect-ratio: 1/1; background: var(--grad-soft); display: grid; place-items: center; color: var(--ink-dim); }
.team-photo svg { width: 56px; height: 56px; opacity: 0.5; }
.team-info { padding: 22px; }

/* generic image-slot styling — polished empty state, not raw text */
.ph {
  position: relative;
  display: grid; place-items: center;
  color: var(--ink-mute);
  font-family: var(--mono); font-size: 11.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  text-align: center; height: 100%; min-height: 440px;
  border-radius: var(--r-l);
  border: 1px dashed var(--line-2);
  background:
    linear-gradient(135deg, rgba(33,187,215,0.06) 0%, rgba(51,61,168,0.05) 50%, rgba(191,28,193,0.06) 100%),
    radial-gradient(circle at 1px 1px, rgba(20,22,46,0.06) 1px, transparent 0) 0 0/22px 22px,
    var(--bg-card);
  box-shadow: var(--sh-xs);
  overflow: hidden;
}
.ph::before {
  content: "";
  position: absolute; inset: 18px;
  border-radius: calc(var(--r-l) - 8px);
  background: radial-gradient(circle at 50% 38%, rgba(74,87,216,0.12), transparent 60%);
  pointer-events: none;
}
.ph > div {
  position: relative; z-index: 1;
  display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 18px 22px; line-height: 1.6;
}
.ph [data-icon] svg, .ph svg { width: 36px; height: 36px; opacity: 0.55; margin-bottom: 4px; }
image-slot { display: block; }
image-slot[placeholder] { border-radius: var(--r-l); }
.ph svg { width: 40px; height: 40px; opacity: 0.4; margin-bottom: 8px; }