/* ============================================================
   Neocloud Group · shared styles
   Warm light body with dramatic dark bands (Cyera-structured).
   Sans workhorse (Instrument Sans) + rationed upright serif accent
   (Cormorant Infant, weight 400) on the one concept phrase per headline.
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg:        #F6F5F1;   /* warm off-white body (Cyera) so white cards pop */
  --bg-warm:   #F0EEE7;
  --bg-dark:   #16181D;
  --ink:       #18181B;
  --ink-soft:  #3A3A40;
  --mid:       #62636B;
  --muted:     #6B6C74;  /* AA contrast (4.5:1) on the warm bg; was #9A9AA2 */
  --line:      #E7E4DD;
  --line-soft: #EFEDE7;
  --blue:      #2F5BFF;
  --teal:      #0FA88E;
  --coral:     #FF6E5C;
  --violet:    #8A6BFF;
  --amber:     #FFB23E;
  --radius:    14px;
  --radius-lg: 18px;
  --radius-sm: 8px;
  --pad:       6%;
  --maxw:      1300px;
  --sans:      'Instrument Sans', system-ui, sans-serif;
  --serif:     'Cormorant Infant', Georgia, serif;
  --sec:       56px;   /* base vertical rhythm */
  --sec-tight: 26px;   /* interstitials / related blocks */
  --sec-major: 84px;   /* major narrative breaks */
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* in-page anchors (e.g. #six-layers) must clear the sticky floating nav, not land under it */
[id] { scroll-margin-top: 96px; }

/* visible keyboard focus on the custom controls (they otherwise wash out the UA outline) */
.btn:focus-visible, .textlink:focus-visible, .nav-toggle:focus-visible,
.nav-links a:focus-visible, .nav-right a:focus-visible, .footer-col a:focus-visible,
.footer-actions a:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 5px;
}
.cy-hero .btn:focus-visible, .cy-hero a:focus-visible { outline-color: #9FC0FF; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

::selection { background: #FFE0D8; color: var(--ink); }
::-moz-selection { background: #FFE0D8; color: var(--ink); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: #2148E8; margin-bottom: 22px;  /* darker than --blue for AA on warm bg */
}
.center { text-align: center; }
.center .eyebrow { display: block; }

h1, h2, h3, h4 { font-family: var(--sans); font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; color: var(--ink); }
h1 { font-size: clamp(46px, 6.2vw, 86px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.03; }
h2 { font-size: clamp(32px, 4.6vw, 58px); font-weight: 500; }
h3 { font-size: clamp(21px, 2.4vw, 30px); font-weight: 600; letter-spacing: -0.02em; }
em { font-style: italic; }

p { color: var(--mid); letter-spacing: -0.006em; }
.lede { font-size: clamp(19px, 2vw, 23px); line-height: 1.5; color: var(--ink-soft); font-weight: 400; letter-spacing: -0.015em; max-width: 680px; }

/* THE SERIF ACCENT: one concept phrase per headline (Cyera-inspired).
   Applies to existing .grad spans + any .serif spans; brand gradient retained. */
.grad, .serif {
  font-family: var(--serif); font-style: normal; font-weight: 400; font-size: 1.07em; letter-spacing: 0;
  background: linear-gradient(92deg, var(--blue), var(--violet) 48%, var(--coral));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 500; padding: 14px 26px;
  border-radius: 12px; border: 1px solid var(--ink);
  background: var(--ink); color: #fff; cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
  white-space: nowrap;
}
.btn:hover { background: #fff; color: var(--ink); border-color: var(--ink); }
.btn.outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.outline:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn.light { background: #fff; color: var(--ink); border-color: #fff; }
.btn.light:hover { background: transparent; color: #fff; border-color: #fff; }
/* secondary action on a dark hero, paired with .light */
.btn.hollow { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn.hollow:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn .arr { transition: transform .18s ease; }
.btn:hover .arr { transform: translateX(3px); }
.btn.lg { padding: 17px 32px; font-size: 16px; }

.textlink {
  font-weight: 500; color: var(--ink); display: inline-flex; align-items: center; gap: 7px;
  background-image: linear-gradient(90deg, var(--blue), var(--violet));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px;
  transition: background-size .3s ease; padding-bottom: 2px;
}
.textlink:hover { background-size: 100% 2px; }
.textlink .arr { color: var(--blue); transition: transform .18s ease; }
.textlink:hover .arr { transform: translateX(4px); }

/* ---------- TOP BAR ---------- */
.topbar {
  background: var(--bg-dark); color: #EDEDEF;
  font-size: 13.5px; text-align: center; padding: 9px 16px;
}
.topbar a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 1px; white-space: nowrap; }
.topbar .dot { color: var(--teal); margin: 0 8px; }
/* short message swaps in on small screens so the bar stays one line */
.topbar .msg-sm { display: none; }
@media (max-width: 700px) {
  .topbar { font-size: 12.5px; padding: 8px 12px; }
  .topbar .msg-lg { display: none; }
  .topbar .msg-sm { display: inline; }
  .topbar .dot { margin: 0 6px; }
}

/* ---------- NAV ---------- */
.nav {
  position: sticky; top: 0; z-index: 80;
  background: rgba(255,255,255,.82); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line-soft);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 16px var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.brand .mark { width: 22px; height: 22px; flex-shrink: 0; }
.nav-links { display: flex; align-items: center; gap: 34px; }
.nav-links a {
  font-size: 15px; font-weight: 500; color: var(--ink-soft);
  background-image: linear-gradient(90deg, var(--blue), var(--teal));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px;
  transition: color .15s, background-size .25s ease; padding-bottom: 4px;
}
.nav-links a:hover, .nav-links a.active { color: var(--ink); background-size: 100% 2px; }
.nav-right { display: flex; align-items: center; gap: 18px; }
.nav-right .signin { font-size: 15px; font-weight: 500; color: var(--ink-soft); }
.nav-right .signin:hover { color: var(--ink); }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; transition: .2s; }

@media (max-width: 920px) {
  .nav-links, .nav-right .signin { display: none; }
  .nav-toggle { display: block; }
  .nav.open .nav-links {
    display: flex; flex-direction: column; gap: 4px; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line); padding: 16px var(--pad) 24px;
  }
  .nav.open .nav-links a { padding: 12px 0; font-size: 18px; border-bottom: 1px solid var(--line-soft); }
}

/* ============================================================
   CYERA THEME LAYER (shared across all pages, ticket 018)
   Floating-island nav + dramatic dark bands. Pages opt in with
   <nav class="nav cy-nav"> and a <header class="hero cy-hero">.
   The homepage adds .full for its viewport-height hero.
   ============================================================ */

/* keep any promo topbar above the hero's pull-up */
.topbar { position: relative; z-index: 90; }

/* ---- NAV: transparent + white over the dark hero, solid island on scroll ---- */
.cy-nav { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0 24px; transition: padding-top .26s ease, background .25s ease, border-color .25s ease; }
.cy-nav .nav-inner {
  max-width: none; margin: 0; padding: 12px 20px;
  border-radius: 20px; background: transparent; box-shadow: none;
  transition: background-color .26s ease, box-shadow .26s ease;
}
.cy-nav .brand { color: #fff; }
.cy-nav:not(.scrolled):not(.open) .brand .mark rect { stroke: #fff; }
.cy-nav .nav-links a { color: rgba(255,255,255,.82); }
.cy-nav .nav-links a:hover, .cy-nav .nav-links a.active { color: #fff; }
.cy-nav .btn { background: #EEEDE7; color: var(--ink); border-color: #EEEDE7; padding: 12px 22px; }
.cy-nav .btn:hover { background: #fff; color: var(--ink); border-color: #fff; }
.cy-nav .nav-toggle span { background: #fff; }
/* logo + CTA sit nearer the edges at the top, settle inward on scroll (transform = smooth) */
.cy-nav .brand, .cy-nav .nav-right { transition: transform .26s ease; }
@media (min-width: 921px) {
  .cy-nav .nav-inner { position: relative; }
  .cy-nav .nav-links { position: absolute; left: 50%; transform: translateX(-50%); }
  .cy-nav:not(.scrolled) .brand { transform: translateX(-14px); }
  .cy-nav:not(.scrolled) .nav-right { transform: translateX(14px); }
  .cy-nav.scrolled { padding-top: 12px; }
  .cy-nav.scrolled .nav-inner {
    background: #fff;
    box-shadow: 0 12px 34px rgba(16,18,30,.12), 0 1px 2px rgba(16,18,30,.06);
  }
}
/* CTA label: full text on desktop; a short "Let's talk" swaps in on mobile (see media query) */
.btn .cta-sm { display: none; }

/* ---- MOBILE: always-on white floating island (Cyera-style); CTA pill stays in the bar next to the burger ---- */
@media (max-width: 920px) {
  .cy-nav { padding: 8px 12px 0; }
  .cy-nav .nav-inner {
    background: #fff;
    box-shadow: 0 10px 30px rgba(16,18,30,.14), 0 1px 2px rgba(16,18,30,.05);
    border-radius: 18px;
    padding: 8px 8px 8px 15px;
    gap: 10px;
  }
  .cy-nav.open .nav-inner { border-radius: 18px 18px 0 0; }
  .cy-nav .brand { color: var(--ink); font-size: 18px; white-space: nowrap; }
  .cy-nav:not(.scrolled):not(.open) .brand .mark rect { stroke: #18181B; }
  .cy-nav .nav-toggle span { background: var(--ink); }
  /* keep the CTA visible as a compact dark pill, pushed to the right by the burger */
  .cy-nav .nav-right { display: flex; transform: none; margin-left: auto; }
  .cy-nav .nav-right .btn { background: var(--ink); color: #fff; border-color: var(--ink); padding: 9px 14px; font-size: 13.5px; }
  /* short CTA label on mobile ("Let's talk"), full label on desktop */
  .cy-nav .nav-right .btn .cta-lg { display: none; }
  .cy-nav .nav-right .btn .cta-sm { display: inline; }
  .cy-nav .nav-right .btn:hover { background: #000; color: #fff; border-color: #000; }
  .nav-toggle { padding: 6px 4px; }
  /* open menu drops from the island as a joined white panel */
  .cy-nav.open .nav-links {
    left: 14px; right: 14px; border-radius: 0 0 18px 18px; border-bottom: none;
    box-shadow: 0 12px 30px rgba(16,18,30,.14); padding: 8px 20px 20px;
  }
}
.cy-nav.scrolled .brand, .cy-nav.open .brand { color: var(--ink); }
.cy-nav.scrolled .nav-links a, .cy-nav.open .nav-links a { color: var(--ink-soft); }
.cy-nav.scrolled .nav-links a:hover, .cy-nav.open .nav-links a:hover { color: var(--ink); }
.cy-nav.scrolled .btn, .cy-nav.open .btn { background: var(--ink); color: #fff; border-color: var(--ink); }
.cy-nav.scrolled .nav-toggle span, .cy-nav.open .nav-toggle span { background: var(--ink); }

/* ---- HERO: full-bleed dark gradient band, pulled up under the nav ---- */
.cy-hero {
  position: relative; overflow: hidden; color: #fff;
  margin-top: -88px;   /* rise fully behind the transparent sticky nav */
  background:
    radial-gradient(110% 90% at 80% 10%, rgba(138,107,255,.50), transparent 58%),
    radial-gradient(95% 95% at 4% 98%, rgba(47,91,255,.42), transparent 55%),
    linear-gradient(158deg, #0B1030 0%, #15123F 52%, #0C1838 100%);
}
.cy-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* default (sub-page) hero spacing: clears the transparent nav (stacks atop
   the base .hero padding), with room to breathe below */
.cy-hero > .wrap { position: relative; z-index: 2; padding-top: 56px; padding-bottom: 44px; }
.cy-hero h1, .cy-hero h2 { color: #fff; }
.cy-hero .eyebrow { color: #9FC0FF; }
.cy-hero .grad, .cy-hero .serif { background: linear-gradient(92deg, #93B7FF, #BBA9FF 46%, #7FE9D3); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cy-hero .lede { color: rgba(233,236,246,.82); }
.cy-hero p { color: rgba(233,236,246,.78); }
.cy-hero .textlink { color: #fff; background-image: linear-gradient(90deg, #93B7FF, #7FE9D3); }
.cy-hero .textlink .arr { color: #9FC0FF; }
/* homepage variant: fill the viewport, content vertically centered */
.cy-hero.full { padding: 0; }   /* grid owns the spacing; drop the base .hero 72/48 padding so the hero fits the viewport */
/* desktop rows: 1fr spacers center the copy+CTA cluster as ONE block (the CTA
   sits right under the lede instead of drifting toward the fold) while the orb
   spans all rows and centers independently */
.cy-hero.full .hero-grid { min-height: calc(100svh - 24px); padding-top: 88px; padding-bottom: 48px; align-items: center; grid-template-areas: "sa orb" "copy orb" "actions orb" "sb orb"; grid-template-rows: 1fr auto auto 1fr; row-gap: 0; }
.cy-hero.full .hero-copy { grid-area: copy; min-width: 0; }
.cy-hero.full .hero-grid > .cy-orb { grid-area: orb; align-self: center; }
.cy-hero.full .hero-actions { grid-area: actions; align-self: start; margin-top: 2px; }
/* full hero on a page with NO promo topbar (layer pages): the hero rides higher under the nav, so it needs more height to reach the viewport bottom */
@media (min-width: 941px) { .cy-hero.full.flush .hero-grid { min-height: calc(100svh + 16px); } }
/* homepage hero title: height-aware so it stays ~2 lines and never overflows a short viewport */
.cy-hero.full h1 { font-size: clamp(40px, min(5.6vw, 8.6vh), 68px); }

/* ---- SHARED HERO ORB (live-cluster motif; homepage + layer heroes) ---- */
.cy-orb { position: relative; aspect-ratio: 1/1; width: 100%; max-width: min(500px, 56vh); margin-left: auto; display: grid; place-items: center; }
.cy-orb svg { width: 100%; height: 100%; overflow: visible; }
.cy-orb .spin { transform-origin: 100px 100px; animation: cyspin 52s linear infinite; }
@keyframes cyspin { to { transform: rotate(360deg); } }
.cy-orb .pnode { animation: cypulse 5s ease-in-out infinite; }
.cy-orb .pnode:nth-of-type(2) { animation-delay: 1.2s; }
.cy-orb .pnode:nth-of-type(3) { animation-delay: 2.4s; }
.cy-orb .pnode:nth-of-type(4) { animation-delay: 3.6s; }
@keyframes cypulse { 0%,100% { opacity: .6; } 50% { opacity: 1; } }
.cy-orb .chip {
  position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  font-size: 12.5px; font-weight: 500; letter-spacing: .04em; color: #fff;
  background: rgba(12,16,44,.55); border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px; padding: 8px 16px; backdrop-filter: blur(6px);
}
.cy-orb .chip .pulse { width: 8px; height: 8px; border-radius: 50%; background: #6FE7D1; box-shadow: 0 0 0 0 rgba(111,231,209,.6); animation: pulse 2.2s infinite; }
@media (max-width: 940px) { .cy-orb { max-width: 300px; margin: 4px auto 0; } }
@media (prefers-reduced-motion: reduce) { .cy-orb .spin, .cy-orb .pnode { animation: none; } }

/* ---- DARK THESIS / FEATURE BAND ---- */
.cy-band { position: relative; overflow: hidden; background: linear-gradient(158deg, #0C1232 0%, #171141 60%, #0D1838 100%); }
.cy-band::before { content: ""; position: absolute; width: 60%; height: 160%; left: -8%; top: -30%; background: radial-gradient(circle, rgba(47,91,255,.40), transparent 62%); filter: blur(60px); }
.cy-band::after  { content: ""; position: absolute; width: 55%; height: 150%; right: -10%; bottom: -30%; background: radial-gradient(circle, rgba(138,107,255,.42), transparent 62%); filter: blur(60px); }
.cy-band .wrap { position: relative; z-index: 2; }
.cy-band .eyebrow { color: #9FC0FF; }
.cy-band .pullquote p { color: #F4F5F8; }
.cy-band .pullquote .grad { background: linear-gradient(92deg, #93B7FF, #BBA9FF 48%, #7FE9D3); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- HERO ---------- */
.hero { padding: 72px 0 48px; }
/* homepage hero: fill the viewport below the topbar + nav, content vertically centered */
.hero-full { min-height: calc(100svh - 128px); display: grid; align-content: center; padding: 24px 0; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero h1 { margin-bottom: 22px; }
.hero h1 .grad { background: linear-gradient(92deg, var(--blue), var(--violet) 45%, var(--coral)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lede { max-width: 540px; margin-bottom: 28px; }
.hero-actions { display: flex; gap: 13px; flex-wrap: wrap; }
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; gap: 22px; }
  .hero-full { min-height: 0; display: block; padding: 40px 0; }
  /* full-height hero on phones: fill the device and stack copy -> orb -> CTA,
     with the call to action sitting below the shape */
  .cy-hero.full .hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "orb" "actions";
    grid-template-rows: none;   /* drop the desktop 1fr spacer rows */
    min-height: calc(100svh - 37px);   /* homepage: clear the single-line promo topbar */
    padding-top: 86px; padding-bottom: 16px;
    align-items: center; align-content: center; row-gap: 16px;
  }
  .cy-hero.full.flush .hero-grid { min-height: 100svh; padding-top: 84px; }   /* layer pages: no topbar */
  /* tighten the copy's internal spacing (grid row-gap owns the rhythm) so
     copy + orb + CTA read as one cohesive group */
  .cy-hero.full .hero-copy h1 { margin-bottom: 12px; }
  .cy-hero.full .hero-copy .lede { margin-bottom: 0; line-height: 1.45; }
  /* orb scales with viewport height: bigger on tall phones so it fills the
     space instead of leaving a void, smaller on short ones so it still fits */
  .cy-hero.full .cy-orb { margin: 0 auto; max-width: min(300px, 32vh); }
  .cy-hero.full .hero-actions { justify-content: center; margin-top: 2px; }
}

/* ---------- GRADIENT RENDER ART ---------- */
.render {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: #0d0f14; aspect-ratio: 5 / 4; box-shadow: 0 1px 2px rgba(20,20,30,.06);
}
.render.tall { aspect-ratio: 4 / 5; }
.render.wide { aspect-ratio: 16 / 9; }
.render::before, .render::after, .render .blob {
  content: ""; position: absolute; border-radius: 50%; filter: blur(34px); opacity: .92;
}
.render::before { width: 70%; height: 70%; left: -10%; top: -8%; background: radial-gradient(circle, var(--violet), transparent 70%); }
.render::after  { width: 75%; height: 75%; right: -14%; bottom: -16%; background: radial-gradient(circle, var(--coral), transparent 70%); }
.render .blob.b1 { width: 55%; height: 55%; right: 6%; top: 4%; background: radial-gradient(circle, var(--blue), transparent 70%); }
.render .blob.b2 { width: 50%; height: 50%; left: 10%; bottom: -4%; background: radial-gradient(circle, var(--teal), transparent 70%); opacity:.8; }
.render .blob.b3 { width: 38%; height: 38%; left: 36%; top: 34%; background: radial-gradient(circle, var(--amber), transparent 70%); opacity:.7; }
.render .grain {
  position: absolute; inset: 0; opacity: .12; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.render .label {
  position: absolute; left: 22px; bottom: 20px; z-index: 3; color: #fff;
  font-size: 13px; font-weight: 500; letter-spacing: .02em;
  display: flex; align-items: center; gap: 9px;
}
.render .label .pulse { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.6); animation: pulse 2.2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(255,255,255,.5)} 70%{box-shadow:0 0 0 10px rgba(255,255,255,0)} 100%{box-shadow:0 0 0 0 rgba(255,255,255,0)} }

/* small inline gradient chip used as icon */
.gchip { width: 46px; height: 46px; border-radius: 10px; position: relative; overflow: hidden; background:#0d0f14; flex-shrink:0; }
.gchip::before { content:""; position:absolute; width:120%; height:120%; left:-10%; top:-10%; background: conic-gradient(from 120deg, var(--blue), var(--violet), var(--coral), var(--amber), var(--teal), var(--blue)); filter: blur(6px); }

/* ---------- PHOTO with gradient fallback ---------- */
.photo {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(135deg, var(--violet), var(--coral) 55%, var(--amber));
}
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo .cap {
  position: absolute; left: 22px; bottom: 18px; color: #fff; font-weight: 600; font-size: clamp(18px,2vw,26px);
  text-shadow: 0 2px 20px rgba(0,0,0,.4); z-index: 2; letter-spacing: -.02em;
}
.photo::after { content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(0,0,0,.45), transparent 55%); }

/* ---------- SECTION ---------- */
.section { padding: var(--sec) 0; }
.section.tight { padding: var(--sec-tight) 0; }
.section.major { padding: var(--sec-major) 0; }
.section.flush-top { padding-top: 0; }
.section.flush-bottom { padding-bottom: 0; }
.section.warm { background: var(--bg-warm); }
.section.tint { background: linear-gradient(160deg, #ECE9FB 0%, #E4EDFB 55%, #EAF6F3 100%); }
.section.dark { background: var(--bg-dark); color: #EAEAEE; }
.section.dark h2, .section.dark h3 { color: #fff; }
.section.dark p { color: #B6B6BE; }
.section.dark .pullquote p { color: #F4F5F8; }
.section-head { max-width: 760px; margin-bottom: 26px; }
.section-head.center { margin-left: auto; margin-right: auto; }
.section-head h2 { margin-bottom: 20px; }
.section-head p { font-size: 19px; line-height: 1.6; }

/* big centered three-word statement */
.statement { text-align: center; font-size: clamp(34px, 5vw, 68px); font-weight: 500; letter-spacing: -.03em; }
.statement em { color: var(--blue); font-style: normal; }

/* ---------- TRUST STRIP ---------- */
.trust { text-align: center; }
.trust p { font-size: 14px; color: var(--muted); margin-bottom: 28px; font-weight: 500; }
.trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 30px; }
.trust-row .chip {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 500; color: var(--ink-soft);
  border: none; border-radius: 0; padding: 0; background: none;
}
.trust-row .chip::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--blue), var(--teal));
}

/* ---------- LOGO / PARTNER WALL ---------- */
.logowall {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.logowall .logo {
  background: #fff; display: flex; align-items: center; justify-content: center; gap: 11px;
  padding: 28px 18px; min-height: 100px; transition: background .2s;
}
.section.warm .logowall .logo { background: #fff; }
.logowall .logo:hover { background: var(--bg-warm); }
.logowall .lg {
  width: 26px; height: 26px; object-fit: contain; border-radius: 4px; flex-shrink: 0;
  filter: grayscale(1); opacity: .55; transition: filter .2s, opacity .2s;
}
.logowall .logo:hover .lg { filter: none; opacity: 1; }
.logowall .wm {
  font-size: 16px; font-weight: 600; letter-spacing: -0.02em;
  color: #8E8E96; transition: color .2s; line-height: 1.15;
}
.logowall .logo:hover .wm { color: var(--ink); }
.logowall .wm small { display: block; font-size: 11px; font-weight: 500; letter-spacing: .02em; opacity: .8; }
/* wordmark-only brands (no logomark exists): the name is the logo */
.logowall .wm.only { font-size: 16px; letter-spacing: -0.03em; text-align: center; text-wrap: balance; }

/* ---------- FEATURE 3-COL ---------- */
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

/* ---------- PROOF / transformation cases ---------- */
.proof-case {
  position: relative; display: grid; grid-template-columns: 1.08fr 1fr;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; transition: box-shadow .4s ease, transform .4s ease, border-color .4s ease;
}
.proof-case + .proof-case { margin-top: 22px; }
.proof-case:hover { box-shadow: 0 6px 20px rgba(20,20,30,.08); transform: translateY(-3px); }
.proof-case.rev .proof-viz { order: 2; }
/* reversed card: mirror the stage content to the right (outer) edge, clear of the left seam */
.proof-case.rev .proof-viz { align-items: flex-end; text-align: right; }
.proof-case.rev .pstate { align-self: flex-end; }
.proof-case.rev .pmetric .sub { margin-left: auto; }

/* dark animated visual stage */
.proof-viz {
  position: relative; overflow: hidden; min-height: 360px; background: #0c0e13;
  display: flex; flex-direction: column; justify-content: space-between; padding: 30px 34px;
}
.proof-viz .pblob { position: absolute; border-radius: 50%; filter: blur(48px); opacity: .5; transition: opacity .6s ease; }
.proof-case:hover .proof-viz .pblob { opacity: .82; }
.proof-viz .pblob.x1 { width: 62%; height: 62%; left: -14%; top: -16%; background: radial-gradient(circle, var(--blue), transparent 70%); animation: drift1 10s ease-in-out infinite; }
.proof-viz .pblob.x2 { width: 56%; height: 56%; right: -16%; bottom: -20%; background: radial-gradient(circle, var(--teal), transparent 70%); animation: drift2 13s ease-in-out infinite; }
.proof-viz .pblob.x3 { width: 42%; height: 42%; right: 16%; top: 28%; background: radial-gradient(circle, var(--violet), transparent 70%); opacity: .4; animation: drift1 16s ease-in-out infinite reverse; }
@keyframes drift1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(9%, 7%); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-8%, -6%); } }
.proof-viz .pgrain {
  position: absolute; inset: 0; opacity: .14; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* from / now states */
.pstate {
  position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255,255,255,.62); align-self: flex-start;
}
.pstate.now { align-self: flex-end; color: #fff; }
.pstate .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); animation: pulse 2.4s infinite; }
.pstate.now .dot { background: var(--teal); }

/* hero metric */
.pmetric { position: relative; z-index: 2; margin: 8px 0; }
.pmetric .num {
  font-size: clamp(46px, 6vw, 74px); font-weight: 600; letter-spacing: -.045em; line-height: .92;
  background: linear-gradient(100deg, #fff 0%, #A9C2FF 38%, #6FE7D1 68%, #fff 100%);
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shine 7s linear infinite;
}
.pmetric .sub { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.6); max-width: 30ch; }
@keyframes shine { to { background-position: 220% center; } }

/* content side: angled seam wedging the white panel into the dark stage */
.proof-body {
  background: #fff; position: relative; z-index: 1;
  padding: 40px 38px 40px 60px; display: flex; flex-direction: column; justify-content: center;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 48px 100%); margin-left: -48px;
}
.proof-case.rev .proof-body {
  padding: 40px 60px 40px 38px; margin-left: 0; margin-right: -48px;
  clip-path: polygon(0 0, calc(100% - 48px) 0, 100% 100%, 0 100%);
}
.proof-body .kick { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--teal); margin-bottom: 14px; }
.proof-body h3 { font-size: clamp(21px, 2.3vw, 27px); margin-bottom: 13px; }
.proof-body p { font-size: 16px; line-height: 1.62; color: var(--mid); margin-bottom: 0; }
.pstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line-soft); }
.pstats .v { font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.pstats .k { margin-top: 5px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 860px) {
  .proof-case { grid-template-columns: 1fr; }
  .proof-case.rev .proof-viz { order: 0; align-items: flex-start; text-align: left; }
  .proof-case.rev .pstate { align-self: flex-start; }
  .proof-case.rev .pmetric .sub { margin-left: 0; }
  .proof-viz { min-height: 280px; }
  .proof-body, .proof-case.rev .proof-body { padding: 32px 28px; clip-path: none; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .proof-viz .pblob, .pmetric .num, .pstate .dot { animation: none; }
}
.feature { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 30px; transition: box-shadow .2s, transform .2s; }
.section.warm .feature { background:#fff; }
.feature:hover { box-shadow: 0 4px 14px rgba(20,20,30,.06); transform: translateY(-2px); }
.feature .ic { width: 52px; height: 52px; margin-bottom: 22px; }
.feature h3 { margin-bottom: 12px; font-size: 22px; }
.feature p { font-size: 16.5px; line-height: 1.65; margin-bottom: 18px; }
@media (max-width: 860px) { .cols3 { grid-template-columns: 1fr; } }

/* ---------- SPLIT showcase ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split.rev .split-media { order: -1; }
.split h2 { margin-bottom: 20px; }
.split p { font-size: 17px; line-height: 1.7; margin-bottom: 20px; max-width: 520px; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 32px; } .split.rev .split-media { order: 0; } }
.layers-mini { list-style: none; margin: 0 0 28px; padding: 0; max-width: 520px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.layers-mini li { display: flex; align-items: center; gap: 9px;
  font-size: 14.5px; font-weight: 500; color: var(--ink-soft); }
.layers-mini li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--blue), var(--teal)); }
@media (max-width: 540px) { .layers-mini { grid-template-columns: 1fr; } }

/* numbered list (gap have/need, steps) */
.steps { margin-top: 8px; }
.step { display: grid; grid-template-columns: 54px 1fr; gap: 22px; padding: 24px 0; border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step .n { font-size: 30px; font-weight: 600; color: var(--blue); letter-spacing: -.03em; line-height:1; }
.step h4 { font-size: 20px; font-weight: 600; margin-bottom: 6px; letter-spacing:-.02em; }
.step p { font-size: 16.5px; line-height: 1.65; margin: 0; max-width: 620px; }
.section.dark .step { border-color: rgba(255,255,255,.12); }
.section.dark .step h4 { color:#fff; }

/* ---------- CLEAN PRINCIPLE LIST ---------- */
.checklist { margin-top: 20px; display: grid; gap: 0; max-width: 560px; list-style: none; }
.checklist li { display: grid; grid-template-columns: 16px 1fr; gap: 13px; align-items: start; padding: 13px 0; }
.checklist li + li { border-top: 1px solid var(--line-soft); }
.checklist .mk { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); margin-top: 9px; }
.checklist .tx { font-size: 16.5px; line-height: 1.6; color: var(--mid); }
.checklist .tx b { color: var(--ink); font-weight: 600; }

/* ---------- EDITORIAL PROSE ---------- */
.prose p { font-size: 18px; line-height: 1.75; color: var(--ink-soft); margin-bottom: 18px; }
.prose p:last-child { margin-bottom: 0; }

/* ---------- FOUNDER PORTRAIT (about) ----------
   straight photo; the only motion is the faint dashed orbit turning behind it
   (the hero orbs' ring, slowed way down) */
.founder-viz { position: relative; width: min(300px, 82%); aspect-ratio: 4/5; margin: 0 auto; }
.fv-glow { position: absolute; inset: -12%; z-index: 0; border-radius: 50%; filter: blur(32px);
  background: radial-gradient(circle at 32% 20%, rgba(138,107,255,.22), transparent 62%),
              radial-gradient(circle at 74% 82%, rgba(47,91,255,.18), transparent 62%); }
.fv-ring { position: absolute; z-index: 0; width: 118%; aspect-ratio: 1/1; left: -9%; top: 3%;
  border: 1.2px dashed #C2BBA8; border-radius: 50%; animation: cyspin 80s linear infinite; }
.fv-photo { position: relative; z-index: 1; height: 100%; border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: 0 14px 36px rgba(20,20,30,.14); }
.fv-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.fv-chip { position: absolute; z-index: 2; left: 50%; bottom: -17px; transform: translateX(-50%);
  white-space: nowrap; display: inline-flex; align-items: center; gap: 9px;
  background: var(--bg-dark); color: #fff; font-size: 12.5px; font-weight: 500; letter-spacing: .04em;
  border-radius: 999px; padding: 9px 17px; box-shadow: 0 10px 24px rgba(20,20,30,.22); }
.fv-chip .pulse { width: 8px; height: 8px; border-radius: 50%; background: #6FE7D1;
  box-shadow: 0 0 0 0 rgba(111,231,209,.6); animation: pulse 2.2s infinite; }
@media (prefers-reduced-motion: reduce) {
  .fv-ring { animation: none; }
  .fv-chip .pulse { animation: none; }
}

/* ---------- SIX-LAYER TREE ---------- */
.tree { margin-top: 40px; }
.tree.reveal { opacity: 1; transform: none; }   /* keep container visible; children stagger themselves */
.tree-hub { display: flex; justify-content: center; }
.hub-badge { width: 76px; height: 76px; border-radius: 18px; background: var(--bg-dark);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 14px 30px rgba(20,20,30,.20); }
.hub-badge .mark { width: 36px; height: 36px; }

.tree-conn { width: 100%; height: 60px; }
.tree-conn.inset { padding: 0 16px; }
.tree-conn svg { width: 100%; height: 100%; display: block; }
.cline { stroke: #C7C1B4; stroke-width: 1.25; stroke-dasharray: 3 4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cdot { fill: var(--violet); }

.tree-cats { display: grid; grid-template-columns: repeat(3, 1fr); }
.cat { justify-self: center; font-size: 13px; font-weight: 600; color: var(--ink-soft);
  background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 20px; white-space: nowrap; }

.tree-frame { border: 1px dashed var(--line); border-radius: var(--radius-lg);
  padding: 30px 18px; background: linear-gradient(180deg, #fff, var(--bg-warm)); }
.tree-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.tcard { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px 18px; min-height: 178px; text-align: center;
  box-shadow: 0 3px 12px rgba(20,20,30,.06); display: flex; flex-direction: column; gap: 11px;
  transition: opacity .5s ease var(--d, 0s), transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.tcard::after { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; border-radius: inherit;
  background: linear-gradient(rgba(16,18,24,.24), rgba(16,18,24,.34)),
    linear-gradient(120deg, var(--blue), var(--violet) 28%, var(--coral) 52%, var(--amber) 74%, var(--teal));
  background-size: 100% 100%, 220% 220%; transition: opacity .45s ease; }
.tcard h4, .tcard h3, .tcard p, .tcard .tc-ic { position: relative; z-index: 1; }
.tcard h4, .tcard h3 { font-size: 16.5px; font-weight: 600; letter-spacing: -.02em; line-height: 1.22; transition: color .3s ease; }
.tcard p { font-size: 13.5px; line-height: 1.55; color: var(--mid); margin: 0; transition: color .3s ease; }
/* layer icon: dark tile echoing the hub badge, keeps the light-gradient mark legible on white and on the dark hover state */
.tcard .tc-ic { width: 54px; height: 54px; border-radius: 14px; margin: 0 auto 3px; display: grid; place-items: center;
  background: var(--bg-dark); box-shadow: 0 6px 16px rgba(20,20,30,.16); transition: background .3s ease, box-shadow .3s ease; }
.tcard .tc-ic svg { width: 40px; height: 40px; display: block; }
.tcard:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 18px 40px rgba(47,91,255,.22); }
.tcard:hover::after { opacity: 1; animation: meshmove 6s ease infinite; }
.tcard:hover h4, .tcard:hover h3, .tcard:hover p { color: #fff; }
.tcard:hover .tc-ic { background: rgba(255,255,255,.14); box-shadow: none; }
@keyframes meshmove { 0% { background-position: 0 0, 0% 50%; } 50% { background-position: 0 0, 100% 50%; } 100% { background-position: 0 0, 0% 50%; } }

/* staggered reveal, top to bottom (site.js adds .in to .tree.reveal) */
.js .tree .hub-badge { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.js .tree .tree-conn svg { clip-path: inset(0 0 100% 0); transition: clip-path .55s ease var(--d, 0s); }
.js .tree .cat { opacity: 0; transform: translateY(10px); transition: opacity .5s ease var(--d, 0s), transform .5s ease var(--d, 0s); }
.js .tree .tcard { opacity: 0; }
.tree.in .hub-badge { opacity: 1; transform: none; }
.tree.in .tree-conn.c1 svg { clip-path: inset(0 0 0 0); --d: .18s; }
.tree.in .cat { opacity: 1; transform: none; }
.tree.in .cat:nth-child(1) { --d: .36s; }
.tree.in .cat:nth-child(2) { --d: .44s; }
.tree.in .cat:nth-child(3) { --d: .52s; }
.tree.in .tree-conn.c2 svg { clip-path: inset(0 0 0 0); --d: .66s; }
.tree.in .tcard { opacity: 1; }
.tree.in .tcard:nth-child(1) { --d: .86s; }
.tree.in .tcard:nth-child(2) { --d: .94s; }
.tree.in .tcard:nth-child(3) { --d: 1.02s; }
.tree.in .tcard:nth-child(4) { --d: 1.10s; }
.tree.in .tcard:nth-child(5) { --d: 1.18s; }
.tree.in .tcard:nth-child(6) { --d: 1.26s; }

@media (max-width: 980px) {
  .tree-conn { display: none; }
  .tree-hub { margin-bottom: 24px; }
  .tree-cats { display: flex; justify-content: center; gap: 0; margin: 0 auto 24px; width: 100%; max-width: 520px;
    border: 1px solid var(--line); border-radius: 999px; background: #fff; padding: 4px; }
  .cat { border: none; background: none; flex: 1; text-align: center; padding: 9px 6px; font-size: 12px; }
  .cat + .cat { border-left: 1px solid var(--line-soft); }
  .tree-frame { border: none; background: none; padding: 0; }
  .tree-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tcard { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tree .hub-badge, .tree .cat, .tree .tcard { opacity: 1; transform: none; transition: none; }
  .tree .tree-conn svg { clip-path: none; transition: none; }
  .tcard:hover::after { animation: none; }
}

/* ---------- ENGAGEMENT · STEPPER ---------- */
.stp { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; margin-top: 40px; }
.stp-visual { position: relative; aspect-ratio: 5 / 4; }
.sv { position: absolute; inset: 0; opacity: 0; transform: scale(.98);
  transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
.sv.active { opacity: 1; transform: none; }
.sv-kw { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: clamp(26px, 3.6vw, 42px); font-weight: 600; letter-spacing: -.03em; text-align: center; padding: 0 28px; }

.stp-count { font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--blue); margin-bottom: 6px; }
.stp-item { display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 22px 0; border-top: 1px solid var(--line); font: inherit; }
.stp-item:last-child { border-bottom: 1px solid var(--line); }
.si-head { display: flex; align-items: baseline; gap: 16px; }
.si-n { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .04em; width: 22px; flex-shrink: 0; }
.si-title { font-size: 21px; font-weight: 600; letter-spacing: -.02em; color: var(--muted); transition: color .25s ease; }
.stp-item.active .si-title { color: var(--ink); }
.stp-item:hover .si-title { color: var(--ink-soft); }
.si-body { position: relative; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .45s ease, opacity .4s ease, margin .4s ease; }
/* generous ceiling so long steps (04/05) never clip, on desktop or mobile; still animates */
.stp-item.active .si-body { max-height: 420px; opacity: 1; margin-top: 12px; }
.si-body p { font-size: 16px; line-height: 1.62; color: var(--mid); margin: 0 0 14px; max-width: 46ch; padding-left: 38px; }
.si-done { display: inline-block; margin: 0 0 10px 38px; font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--teal); background: rgba(15,168,142,.12); border-radius: 999px; padding: 5px 11px; }
.si-bar { position: absolute; left: 38px; right: 0; bottom: 4px; height: 3px; background: var(--line); border-radius: 999px; overflow: hidden; }
.si-bar > span { display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--teal)); }
.stp.playing .stp-item.active .si-bar > span { animation: fillbar 5s linear forwards; }
@keyframes fillbar { from { width: 0; } to { width: 100%; } }
/* clicked/locked: stop advancing, show the selected step's bar full */
.stp.locked .stp-item.active .si-bar > span { animation: none; width: 100%; }

@media (max-width: 860px) {
  .stp { grid-template-columns: 1fr; gap: 28px; }
  .stp-visual { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .sv { transition: none; }
  .stp-item.active .si-bar > span { animation: none; width: 100%; }
}

/* ---------- CARD CAROUSEL ---------- */
.carousel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.carousel-head h2 { margin: 0; }
.carousel-nav { display: flex; gap: 10px; }
.carousel-nav button { width: 46px; height: 46px; border-radius: 999px; border: 1px solid var(--line); background:#fff; cursor:pointer; font-size:18px; color: var(--ink); transition: .15s; }
.carousel-nav button:hover { background: var(--ink); color:#fff; border-color: var(--ink); }
.carousel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(330px, 1fr); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; }
.carousel::-webkit-scrollbar { display: none; }
/* ---------- WHO WE SERVE · clients, then counterparties ----------
   Replaces the flat five-box grid, which gave five parties identical
   treatment on a page titled Who We Serve and so read as five kinds of
   customer. Three of them can hire us and get cards (the buyer the site
   leads with takes a wide lead card); the two whose agreement a project
   needs are demoted to the dark band below. */
.who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.who-lead {
  grid-column: 1 / -1; display: grid; grid-template-columns: .92fr 1.08fr;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; transition: box-shadow .4s ease, transform .4s ease;
}
.who-lead:hover { box-shadow: 0 10px 30px rgba(20,20,30,.09); transform: translateY(-3px); }

/* dark animated stage, same family as .proof-viz */
.who-viz {
  position: relative; overflow: hidden; background: #0c0e13; min-height: 340px;
  display: flex; flex-direction: column; justify-content: space-between; padding: 30px 34px;
}
/* same four-blob palette as .render, which is the site's signature art, plus drift */
.who-viz::before { content: ""; position: absolute; width: 70%; height: 70%; left: -10%; top: -8%;
  border-radius: 50%; filter: blur(34px); opacity: .92;
  background: radial-gradient(circle, var(--violet), transparent 70%); }
.who-viz .wblob { position: absolute; border-radius: 50%; filter: blur(34px); opacity: .92; transition: opacity .6s ease; }
.who-lead:hover .who-viz .wblob { opacity: 1; }
.who-viz .wblob.w1 { width: 75%; height: 75%; right: -14%; bottom: -16%; background: radial-gradient(circle, var(--coral), transparent 70%); animation: drift2 14s ease-in-out infinite; }
.who-viz .wblob.w2 { width: 55%; height: 55%; right: 6%; top: 4%; background: radial-gradient(circle, var(--blue), transparent 70%); animation: drift1 11s ease-in-out infinite; }
.who-viz .wblob.w3 { width: 50%; height: 50%; left: 10%; bottom: -4%; background: radial-gradient(circle, var(--teal), transparent 70%); opacity: .82; animation: drift1 17s ease-in-out infinite reverse; }
/* scrim under the headline only, so the art stays vivid above it */
.who-viz::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(6,8,14,.66), rgba(6,8,14,0) 48%); }
.who-viz .grain { position: absolute; inset: 0; opacity: .14; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.who-chip {
  position: relative; z-index: 2; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.78);
  background: rgba(12,16,44,.5); border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px; padding: 8px 15px; backdrop-filter: blur(6px);
}
.who-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: #6FE7D1; box-shadow: 0 0 0 0 rgba(111,231,209,.6); animation: pulse 2.4s infinite; }
.who-say { position: relative; z-index: 2; }
.who-say .big {
  font-size: clamp(30px, 3.5vw, 42px); font-weight: 500; letter-spacing: -.035em; line-height: 1.02; color: #fff;
}
.who-say .big em {
  font-style: normal;
  background: linear-gradient(100deg, #fff 0%, #A9C2FF 38%, #6FE7D1 68%, #fff 100%);
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shine 7s linear infinite;
}
.who-say .sub { margin-top: 12px; font-size: 13px; letter-spacing: .02em; color: rgba(255,255,255,.6); }

.who-body { padding: 40px 38px; display: flex; flex-direction: column; justify-content: center; }
.who-body .tagn { font-size: 13px; font-weight: 600; color: var(--blue); margin-bottom: 10px; }
.who-body h3 { font-size: clamp(21px, 2.3vw, 28px); margin-bottom: 13px; }
.who-body p { font-size: 16.5px; line-height: 1.62; color: var(--mid); }
.who-ans { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  margin: 26px 0 24px; padding-top: 22px; border-top: 1px solid var(--line-soft); }
.who-ans b { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.who-ans span { font-size: 14.5px; line-height: 1.4; font-weight: 500; color: var(--ink); }
/* align-self, or the flex column stretches the span and the underline runs the full width */
.who-lead .textlink, .who-card .textlink, .gate-card .textlink { align-self: flex-start; font-size: 15px; font-weight: 600; background-size: 100% 2px; }

.who-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow .35s ease, transform .35s ease; }
.who-card:hover { box-shadow: 0 10px 30px rgba(20,20,30,.08); transform: translateY(-3px); }
.who-card .photo { border-radius: 0; aspect-ratio: 16/9; }
.who-card .photo img { transition: transform .6s ease; }
.who-card:hover .photo img { transform: scale(1.05); }
.who-card .body { padding: 28px 30px 30px; display: flex; flex-direction: column; flex: 1; }
.who-card .tagn { font-size: 13px; font-weight: 600; color: var(--blue); margin-bottom: 9px; }
.who-card h3 { font-size: 21px; margin-bottom: 10px; }
.who-card p { font-size: 16px; line-height: 1.6; color: var(--mid); }
.who-card .textlink { margin-top: auto; padding-top: 20px; }

/* The two parties whose agreement a project needs get the same card as the clients,
   with the gradient art rather than photography. Every attempt to make them LOOK
   secondary (a dark band, empty boxes, table rows) read as unfinished; the size of
   the lead card above already carries the hierarchy. */
.who-grid.two { grid-template-columns: 1fr 1fr; }
.who-card .render { border-radius: 0; box-shadow: none; }
.who-card .render.wide { aspect-ratio: 16 / 9; }
.who-card:hover .render .blob { opacity: 1; }
/* second art variant so the pair is not the same picture twice */
.render.v2::before { background: radial-gradient(circle, var(--teal), transparent 70%); }
.render.v2::after { background: radial-gradient(circle, var(--blue), transparent 70%); }
.render.v2 .blob.b1 { background: radial-gradient(circle, var(--amber), transparent 70%); }
.render.v2 .blob.b2 { background: radial-gradient(circle, var(--violet), transparent 70%); }

/* whole-card links: the inner textlink is a span, so the card drives its hover */
.who-lead:hover .textlink, .who-card:hover .textlink { background-size: 100% 2px; }
.who-lead:hover .arr, .who-card:hover .arr { transform: translateX(3px); }
.who-lead .arr, .who-card .arr { transition: transform .18s ease; }

/* hero proof panel: the registry is the one checkable thing every audience shares */
.hero-proof { display: flex; flex-direction: column; align-items: flex-start; justify-self: end;
  width: 100%; max-width: 420px; padding: 30px 32px 28px;
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-lg); backdrop-filter: blur(8px);
  transition: border-color .3s ease, background-color .3s ease, transform .3s ease; }
.hero-proof:hover { background: rgba(255,255,255,.085); border-color: rgba(159,192,255,.45); transform: translateY(-3px); }
.hero-proof .chip { display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 7px 14px; }
.hero-proof .chip .pulse { width: 7px; height: 7px; border-radius: 50%; background: #6FE7D1; box-shadow: 0 0 0 0 rgba(111,231,209,.6); animation: pulse 2.4s infinite; }
.hero-proof .num { margin: 20px 0 2px; font-size: clamp(64px, 8vw, 104px); font-weight: 600; letter-spacing: -.05em; line-height: .9;
  background: linear-gradient(100deg, #fff 0%, #A9C2FF 38%, #6FE7D1 68%, #fff 100%);
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shine 7s linear infinite; }
.hero-proof .cap { font-size: 15px; line-height: 1.55; color: rgba(233,236,246,.72); }
.hero-proof .go { margin-top: 22px; display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: #fff; }
.hero-proof .go .arr { color: #7FE9D3; transition: transform .2s ease; }
.hero-proof:hover .go .arr { transform: translateX(4px); }

@media (max-width: 900px) {
  .who-grid { grid-template-columns: 1fr; }
  .who-lead { grid-template-columns: 1fr; }
  .who-viz { min-height: 240px; padding: 24px 26px; }
  .who-body { padding: 30px 26px 32px; }
  .who-ans { grid-template-columns: 1fr; gap: 13px; margin: 22px 0 20px; }
  .who-ans li { display: grid; grid-template-columns: 96px 1fr; align-items: baseline; gap: 12px; }
  .who-ans b { margin-bottom: 0; }
  .who-grid.two { grid-template-columns: 1fr; }
  .hero-proof { max-width: none; padding: 26px 26px 24px; }
  .hero-proof .num { font-size: clamp(56px, 16vw, 80px); margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .who-viz .wblob, .who-say .big em, .who-chip .dot, .who-card .photo img,
  .hero-proof .num, .hero-proof .chip .pulse { animation: none; transition: none; }
}

/* ---------- NETWORK CITIES LINE (about) ---------- */
.net-cities { text-align: center; font-size: 13px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); }

/* ---------- CTA BAND ---------- */
.cta-band { background: var(--bg-dark); border-radius: var(--radius-lg); padding: 72px 8% ; text-align:center; position: relative; overflow: hidden; }
.cta-band::before { content:""; position:absolute; width:60%; height:140%; left:-10%; top:-20%; background: radial-gradient(circle, rgba(138,107,255,.5), transparent 65%); filter: blur(50px); }
.cta-band::after { content:""; position:absolute; width:55%; height:130%; right:-12%; bottom:-30%; background: radial-gradient(circle, rgba(47,91,255,.45), transparent 65%); filter: blur(50px); }
.cta-band > * { position: relative; z-index: 2; }
.cta-band h2 { color:#fff; margin-bottom: 18px; }
.cta-band p { color:#C4C4CC; font-size:19px; max-width: 560px; margin: 0 auto 32px; }

/* ---------- FORM ---------- */
.form { max-width: 760px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 22px; }
.field { display:flex; flex-direction: column; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 9px; }
.field label .req { color: var(--coral); font-weight: 700; }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 15px; color: var(--ink); background:#fff;
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px 15px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47,91,255,.12); }
.field textarea { resize: vertical; min-height: 110px; }
.form-foot { display:flex; align-items:center; gap: 20px; margin-top: 26px; flex-wrap: wrap; }
.form-foot .note { font-size: 13px; color: var(--muted); }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- STATS ---------- */
.statrow { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.statcard { background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 34px 30px; }
.section.warm .statcard { background:#fff; }
.statcard .big { font-size: clamp(38px,5vw,56px); font-weight: 600; letter-spacing: -.03em; line-height:1; margin-bottom: 14px; }
.statcard .big em { color: var(--blue); font-style: normal; }
.statcard .lbl { font-size: 16px; line-height: 1.55; color: var(--mid); }
@media (max-width: 860px) { .statrow { grid-template-columns: 1fr; } }

/* ---------- PULL QUOTE ---------- */
.pullquote { max-width: 920px; margin: 0 auto; text-align: center; }
.pullquote p { font-size: clamp(26px, 3.6vw, 44px); font-weight: 500; line-height: 1.2; letter-spacing: -.03em; color: var(--ink); }
.pullquote .grad { background: linear-gradient(92deg, var(--blue), var(--violet) 50%, var(--coral)); -webkit-background-clip:text; background-clip:text; color: transparent; }

/* ---------- FOOTER ---------- */
.footer { background: var(--bg-warm); border-top: 1px solid var(--line); padding: 72px 0 40px; }
.footer-top { display:flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.footer-brand { max-width: 320px; }
.footer-brand .brand { margin-bottom: 16px; }
.footer-brand p { font-size: 14.5px; line-height: 1.6; color: var(--mid); }
.footer-cols { display:flex; gap: 64px; flex-wrap: wrap; }
.footer-col .footer-h { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6B6C74; margin-bottom: 16px; }
.footer-col a { display:block; font-size: 14.5px; color: var(--ink-soft); padding: 6px 0; }
.footer-col a:hover { color: var(--ink); }
.footer-bottom { margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--line); display:flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: #6B6C74; }
.footer-bottom a { color: #6B6C74; } .footer-bottom a:hover { color: var(--ink); }
.footer-brand .footer-actions { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.footer-brand .footer-actions .fsocial { font-size: 14px; color: var(--ink-soft); }
.footer-brand .footer-actions .fsocial:hover { color: var(--ink); }

/* reveal on scroll: only hide when JS is present, so a JS failure never leaves
   a section permanently invisible (the .js class is set inline in each <head>) */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 600px) {
  :root { --pad: 22px; --sec: 40px; --sec-tight: 22px; --sec-major: 60px; }
  .hero { padding: 48px 0 36px; }
  /* the homepage wall has ~28 partners; auto-fit drops to ONE column on phones (an endless
     single-file scroll). Force two so it reads as a grid. Layer pages override inline. */
  .logowall { grid-template-columns: repeat(2, 1fr); }
  .logowall .logo { padding: 22px 12px; min-height: 84px; }
  .logowall .wm { font-size: 14px; }
}