/* ============================================================
   KOBIL — Digital Trust Infrastructure
   Premium 2026 enterprise campaign · warm sunrise / cobalt trust
   ============================================================ */

/* ------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------ */
:root{
  /* color */
  --ink:        #080B1E;
  --ink-2:      #0D1230;
  --navy:       #101638;
  /* brand blue taken from the KOBIL logo mark (#1D19FF) */
  --cobalt:     #1D19FF;
  --cobalt-deep:#1410D6;
  --blue-sky:   #4D7CFF;
  --blue-ice:   #9DB8FF;
  --violet:     #8A5CFF;
  --pink:       #FF6EB0;
  --pink-soft:  #FF9DBE;
  --peach:      #FFB37C;
  --amber:      #FFD9A0;
  --cyan:       #39C2FF;

  --paper:      #FBF8F4;
  --paper-rose: #FAF4F4;
  --paper-blue: #F3F5FC;

  --text:       #14183A;
  --text-mute:  #565C80;
  --text-light: #FFFFFF;
  --text-light-mute: rgba(235,238,255,.74);

  --line:       rgba(20,24,58,.10);
  --line-strong:rgba(20,24,58,.16);
  --line-glass: rgba(255,255,255,.14);

  /* shape — tight, editorial radii (Okta/Stripe discipline) */
  --r-xl: 20px;
  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 10px;
  --shell: 1240px;

  /* type */
  --font-display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --font-serif: "Instrument Serif", "Times New Roman", Georgia, serif;
  --font-body: "Instrument Sans", "Helvetica Neue", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", monospace;

  /* motion */
  --ease: cubic-bezier(.22,.61,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --grain-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}


/* ------------------------------------------------------------
   2. Base
   ------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-padding-top:130px; }
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
}

body{
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.6;
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
img.is-missing{ opacity:0 !important; visibility:hidden; }

a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
strong{ font-weight:600; }
svg{ display:block; }

::selection{ background:var(--blue-sky); color:#fff; }

:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:fixed; top:-100px; left:16px; z-index:200;
  padding:12px 20px; border-radius:999px;
  background:var(--ink); color:#fff; font-weight:600; font-size:.9rem;
  transition:top .2s var(--ease);
}
.skip-link:focus-visible{ top:14px; }

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:clamp(20px, 4vw, 44px);
}

/* film grain */
.grain{ position:relative; }
.grain::after{
  content:""; position:absolute; inset:0; z-index:3;
  pointer-events:none;
  background-image:var(--grain-url);
  opacity:.04;
  mix-blend-mode:overlay;
}

/* ------------------------------------------------------------
   3. Type system
   ------------------------------------------------------------ */
/* display serif for headlines (editorial, Okta-caliber), clean sans for card titles */
h1,h2{
  font-family:var(--font-serif);
  font-weight:400;
  line-height:1.06;
  letter-spacing:-.012em;
  text-wrap:balance;
}
h3{
  font-family:var(--font-body);
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.01em;
  text-wrap:balance;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:#5A6382;
  margin-bottom:18px;
}
.eyebrow-light{ color:rgba(214,224,255,.68); }
.hero .eyebrow-light{
  color:#DCE7FF;
  text-shadow:0 1px 14px rgba(30,20,70,.45);
}

.section-head{
  max-width:800px;
  margin:0 auto clamp(48px, 7vw, 76px);
  text-align:center;
}
.section-head h2{
  font-size:clamp(2.3rem, 4.6vw, 3.5rem);
  color:var(--text);
}
.section-head-dark h2{ color:var(--text-light); }
.section-head-tight{ margin-bottom:clamp(36px, 5vw, 52px); }

.section-sub{
  max-width:640px;
  margin:18px auto 0;
  font-size:1.08rem;
  color:var(--text-mute);
}
.section-head-dark .section-sub{ color:var(--text-light-mute); }

/* ------------------------------------------------------------
   4. Buttons
   ------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px;
  border-radius:999px;
  font-weight:600; font-size:.94rem; letter-spacing:.005em;
  white-space:nowrap;
  transition:translate .25s var(--ease), box-shadow .25s var(--ease),
             border-color .25s var(--ease), background-color .25s var(--ease);
  will-change:translate;
}
.btn-lg{ padding:15px 30px; font-size:1rem; }

/* flat, confident, single-color — no gradients, no glow */
.btn-primary{
  color:#fff;
  background:var(--cobalt);
  box-shadow:0 1px 2px rgba(10,16,50,.25);
}
.btn-primary:hover{
  background:#1712E0;
  translate:0 -1px;
  box-shadow:0 4px 12px -4px rgba(20,20,100,.4);
}

.btn-glass{
  color:#fff;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.4);
}
.btn-glass:hover{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.65);
  translate:0 -1px;
}

/* ------------------------------------------------------------
   5. Site head — announcement + floating pill nav
   ------------------------------------------------------------ */
.site-head{
  position:fixed; inset:0 0 auto 0; z-index:100;
  pointer-events:none;
}
.site-head > *{ pointer-events:auto; }

/* announcement bar */
.announce{
  position:relative;
  background:var(--ink);
  color:rgba(240,242,255,.85);
  font-size:.82rem;
  overflow:hidden;
  max-height:60px;
  transition:max-height .45s var(--ease), opacity .35s var(--ease);
}
.announce::before{
  content:""; position:absolute; inset:auto 0 0 0; height:1px;
  background:rgba(255,255,255,.12);
}
.site-head.scrolled .announce{ max-height:0; opacity:0; }

.announce-inner{
  max-width:var(--shell); margin-inline:auto;
  padding:9px clamp(20px,4vw,44px);
  display:flex; align-items:center; gap:14px;
}
.announce-badge{
  flex:none;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  padding:3px 8px; border-radius:4px;
  color:#fff;
  background:var(--cobalt);
}
.announce-copy{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.announce-copy strong{ color:#fff; font-weight:600; }
.announce-detail{ opacity:.72; margin-left:6px; }
.announce-link{
  flex:none; margin-left:auto;
  font-weight:600; color:var(--blue-ice);
  transition:color .25s var(--ease);
}
.announce-link:hover{ color:#fff; }

/* floating pill nav */
.nav-shell{
  padding:12px clamp(12px, 2.5vw, 24px) 0;
}
.nav{
  max-width:1180px; margin-inline:auto;
  height:62px;
  display:flex; align-items:center; gap:26px;
  padding-inline:12px 10px;
  border-radius:999px;
  background:rgba(13,15,28,.82);
  border:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 8px 24px -16px rgba(5,8,26,.5);
  transition:background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.site-head.scrolled .nav{
  background:rgba(11,13,25,.94);
  box-shadow:0 6px 20px -12px rgba(5,8,26,.45);
}

.nav-logo{
  display:inline-flex; align-items:center;
  padding:8px 12px; border-radius:999px;
}
.nav-logo-img{
  height:30px; width:auto; display:block;
}

.nav-links{
  display:flex; align-items:center; gap:4px;
  margin-inline:auto;
}
.nav-links a{
  display:block; padding:9px 13px;
  border-radius:999px;
  font-size:.92rem; font-weight:500;
  color:rgba(235,238,255,.82);
  transition:color .2s var(--ease), background-color .2s var(--ease);
}
.nav-links a:hover{ color:#fff; background:rgba(255,255,255,.07); }

.nav-actions{ display:flex; align-items:center; gap:14px; }
.nav-ghost{
  font-size:.9rem; font-weight:500;
  color:rgba(235,238,255,.72);
  transition:color .25s var(--ease);
}
.nav-ghost:hover{ color:#fff; }
.btn-nav{ padding:11px 22px; font-size:.9rem; }

.nav-burger{
  display:none;
  width:44px; height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.2);
  position:relative;
}
.nav-burger span{
  position:absolute; left:13px; right:13px; height:2px; border-radius:2px;
  background:#fff;
  transition:transform .3s var(--ease), top .3s var(--ease);
}
.nav-burger span:nth-child(1){ top:17px; }
.nav-burger span:nth-child(2){ top:25px; }
html.menu-open .nav-burger span:nth-child(1){ top:21px; transform:rotate(45deg); }
html.menu-open .nav-burger span:nth-child(2){ top:21px; transform:rotate(-45deg); }

/* mobile menu sheet */
.nav-menu{
  max-width:1180px;
  max-height:calc(100svh - 150px);
  overflow-y:auto;
  margin:10px auto 0;
  padding:22px;
  border-radius:var(--r-lg);
  background:rgba(9,12,32,.92);
  border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  box-shadow:0 24px 60px -18px rgba(5,8,26,.8);
}
.nav-menu ul{ display:grid; gap:2px; }
.nav-menu ul a{
  display:block; padding:12px 14px; border-radius:var(--r-sm);
  font-family:var(--font-display); font-size:1.25rem; font-weight:600;
  color:rgba(240,242,255,.9);
  transition:background-color .2s var(--ease), color .2s var(--ease);
}
.nav-menu ul a:hover{ background:rgba(255,255,255,.07); color:#fff; }
.nav-menu-actions{
  display:flex; flex-wrap:wrap; align-items:center; gap:18px;
  margin-top:18px; padding:18px 14px 4px;
  border-top:1px solid rgba(255,255,255,.1);
}
.nav-menu-actions .nav-ghost{ font-size:.98rem; }

/* ------------------------------------------------------------
   6. Hero
   ------------------------------------------------------------ */
.hero{
  position:relative;
  min-height:max(700px, 100svh);
  display:flex; align-items:center;
  color:#fff;
  overflow:hidden;
}

.hero-media{
  position:absolute; inset:0; z-index:0;
  /* sunrise placeholder until /images/kobil-hero.jpg exists */
  background:
    radial-gradient(120% 90% at 84% 6%,  rgba(255,217,160,.9) 0%, transparent 52%),
    radial-gradient(95% 75% at 68% 32%,  rgba(140,165,255,.85) 0%, transparent 58%),
    radial-gradient(120% 95% at 22% 88%, rgba(31,51,196,.9) 0%, transparent 62%),
    linear-gradient(158deg, #FFB37C 0%, #FF6EB0 30%, #8A5CFF 62%, #1F33C4 100%);
}
.hero-media img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  object-position:center 24%;
}

.hero-mesh{ position:absolute; inset:0; overflow:hidden; }
.hero-mesh i{
  position:absolute;
  width:52vw; height:52vw; min-width:520px; min-height:520px;
  border-radius:50%;
  filter:blur(90px);
  opacity:.5;
  mix-blend-mode:soft-light;
}
.hero-mesh i:nth-child(1){
  top:-22%; right:-10%;
  background:radial-gradient(circle, #FFE7C2, transparent 65%);
  animation:mesh-drift-a 22s ease-in-out infinite alternate;
}
.hero-mesh i:nth-child(2){
  top:18%; left:26%;
  background:radial-gradient(circle, #FF8FC2, transparent 65%);
  animation:mesh-drift-b 27s ease-in-out infinite alternate;
}
.hero-mesh i:nth-child(3){
  bottom:-30%; left:-12%;
  background:radial-gradient(circle, #4E5DFF, transparent 65%);
  animation:mesh-drift-a 31s ease-in-out infinite alternate-reverse;
}
@keyframes mesh-drift-a{
  from{ transform:translate3d(0,0,0) scale(1); }
  to  { transform:translate3d(-6%,5%,0) scale(1.12); }
}
@keyframes mesh-drift-b{
  from{ transform:translate3d(0,0,0) scale(1.05); }
  to  { transform:translate3d(7%,-6%,0) scale(.94); }
}

/* readability + warmth layers */
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(76deg,
    rgba(8,11,30,.82) 0%,
    rgba(15,17,58,.6) 30%,
    rgba(64,38,132,.24) 56%,
    transparent 76%);
}
.hero-warm{
  position:absolute; inset:0;
  background:radial-gradient(46% 42% at 86% 10%, rgba(255,222,170,.5), transparent 70%);
}
/* cursor-reactive light */
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(480px circle at var(--hx,70%) var(--hy,35%),
    rgba(255,255,255,.09), transparent 60%);
}

.hero-inner{
  position:relative; z-index:2;
  padding-top:170px;
  padding-bottom:110px;
}
.hero-copy{ max-width:860px; }

.hero-title{
  font-size:clamp(2.9rem, 4.9vw, 4.35rem);
  font-weight:400;
  letter-spacing:-.01em;
  line-height:1.04;
}
.hero-title em{
  font-style:italic;
  background:linear-gradient(92deg, var(--amber) 5%, #FF9DBE 55%, #D3B4FF 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero-sub{
  margin-top:26px;
  max-width:540px;
  font-size:clamp(1.05rem, 1.5vw, 1.22rem);
  line-height:1.55;
  color:rgba(240,242,255,.86);
}
.hero-brandline{
  margin-top:18px;
  font-family:var(--font-mono);
  font-size:.8rem; letter-spacing:.12em;
  color:rgba(214,228,255,.88);
}
.hero-cta{
  display:flex; flex-wrap:wrap; gap:16px;
  margin-top:36px;
}
.hero-trustline{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px;
  margin-top:44px;
  font-size:.82rem; font-weight:500;
  color:rgba(244,246,255,.88);
  text-shadow:0 1px 12px rgba(20,14,60,.5);
}
.hero-trustline i{ font-style:normal; opacity:.4; }

/* floating glass labels */
.hero-labels{ position:absolute; inset:0; pointer-events:none; }
.hero-label{
  position:absolute;
  left:var(--fx); top:var(--fy);
  transform:translate(-50%,-50%);
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px;
  border-radius:999px;
  font-size:.78rem; font-weight:500; letter-spacing:.02em;
  color:#fff;
  background:rgba(26,20,70,.34);
  border:1px solid rgba(255,255,255,.38);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 10px 30px -12px rgba(10,10,40,.5);
  white-space:nowrap;
}
.hero-label::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:linear-gradient(120deg, var(--amber), var(--pink));
  box-shadow:0 0 8px rgba(255,179,124,.9);
}
.float-a{ animation:label-float 7s ease-in-out infinite alternate; }
.float-b{ animation:label-float 9s .8s ease-in-out infinite alternate; }
.float-c{ animation:label-float 11s .4s ease-in-out infinite alternate; }
@keyframes label-float{
  from{ translate:0 -7px; }
  to  { translate:0 7px; }
}

/* ------------------------------------------------------------
   7. Trust proof bar
   ------------------------------------------------------------ */
.proof{
  padding:clamp(70px, 9vw, 104px) 0;
  background:var(--paper);
}
.proof-title{
  text-align:center;
  font-size:clamp(1.35rem, 2.4vw, 1.8rem);
  margin-bottom:40px;
  color:var(--text);
}
.proof-strip{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  background:#FFFFFF;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:0 1px 2px rgba(20,24,58,.04), 0 16px 40px -34px rgba(20,24,58,.2);
  overflow:hidden;
}
.proof-item{
  position:relative;
  display:flex; gap:14px;
  padding:28px 26px;
}
.proof-item + .proof-item{ border-left:1px solid var(--line); }
.proof-item::after{
  content:""; position:absolute; left:26px; right:26px; bottom:0; height:2px;
  background:linear-gradient(90deg, var(--cyan), var(--blue-sky), var(--cobalt));
  border-radius:2px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.proof-item:hover::after{ transform:scaleX(1); }
.proof-item svg{
  flex:none; width:26px; height:26px; margin-top:3px;
  fill:none; stroke:var(--cobalt); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.proof-item strong{
  display:block;
  font-family:var(--font-body); font-weight:600; font-size:1.05rem;
  letter-spacing:-.01em;
  color:var(--text);
}
.proof-item span{
  display:block; font-size:.86rem; color:var(--text-mute);
}
.proof-item small{
  display:block;
  max-height:0; opacity:0; overflow:hidden;
  font-size:.8rem; line-height:1.45; color:var(--text-mute);
  transition:max-height .4s var(--ease), opacity .4s var(--ease), margin-top .4s var(--ease);
}
.proof-item:hover small{
  max-height:4em; opacity:1; margin-top:8px;
}

/* ------------------------------------------------------------
   8. Transformation — fragments → ecosystem
   ------------------------------------------------------------ */
.transform{
  padding:clamp(90px, 12vw, 150px) 0;
  background:#FFFFFF;
}

.transform-stage{
  position:relative;
  height:clamp(440px, 46vw, 580px);
  border-radius:var(--r-xl);
  overflow:hidden;
  /* deep-dusk placeholder until /images/fragmented-to-trusted.jpg exists */
  background:
    radial-gradient(70% 90% at 78% 40%, rgba(77,124,255,.42), transparent 60%),
    radial-gradient(55% 70% at 90% 90%, rgba(57,194,255,.2), transparent 60%),
    linear-gradient(118deg, #0F1330 0%, #1B2258 42%, #2E3E94 72%, #5D55B4 100%);
  box-shadow:0 20px 48px -30px rgba(16,19,50,.45);
}
.transform-media, .transform-media img{
  position:absolute; inset:0; width:100%; height:100%;
}
.transform-media img{ object-fit:cover; opacity:.85; }

.transform-lines{
  position:absolute; inset:0; width:100%; height:100%;
}
.transform-lines path{
  fill:none;
  stroke:rgba(190,208,255,.6);
  stroke-width:1.2;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  filter:drop-shadow(0 0 6px rgba(140,165,255,.6));
  transition:stroke-dashoffset 2s var(--ease) .4s;
}
.transform-stage.go .transform-lines path{ stroke-dashoffset:0; }

.fragment{
  position:absolute;
  left:var(--fx); top:var(--fy);
  transform:translate(-50%,-50%);
  padding:9px 17px;
  border-radius:999px;
  font-size:.82rem; font-weight:500;
  color:#fff;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:transform 1.8s var(--ease) .2s, background-color 1.8s var(--ease) .2s,
             border-color 1.8s var(--ease) .2s;
  animation:frag-bob 6s ease-in-out infinite alternate;
}
.fragment:nth-child(even){ animation-duration:8s; animation-delay:.9s; }
@keyframes frag-bob{
  from{ translate:0 -5px; }
  to  { translate:0 5px; }
}
.transform-stage.go .fragment{
  transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)));
  background:rgba(255,255,255,.16);
  border-color:rgba(190,208,255,.6);
}

.eco-core{
  position:absolute; left:71%; top:50%;
  transform:translate(-50%,-50%);
  display:grid; place-items:center;
}
.eco-heart{
  width:120px; height:120px; border-radius:50%;
  /* luminous bloom that amplifies the image's own light instead of covering it */
  background:radial-gradient(circle,
    rgba(255,255,255,.95) 0%,
    rgba(190,214,255,.55) 38%,
    rgba(77,124,255,.28) 60%,
    transparent 74%);
  filter:blur(3px);
  mix-blend-mode:screen;
  animation:heart-breathe 5s ease-in-out infinite;
}
@keyframes heart-breathe{
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.07); }
}
.eco-ring{
  position:absolute;
  width:130px; height:130px; border-radius:50%;
  border:1px solid rgba(190,208,255,.55);
}
.eco-ring-2{ width:190px; height:190px; border-color:rgba(255,255,255,.22); }
.transform-stage.go .eco-ring{ animation:ring-swell 4s var(--ease) infinite; }
.transform-stage.go .eco-ring-2{ animation:ring-swell 4s 1.2s var(--ease) infinite; }
@keyframes ring-swell{
  0%  { transform:scale(.92); opacity:.9; }
  70% { transform:scale(1.16); opacity:0; }
  100%{ transform:scale(1.16); opacity:0; }
}
.eco-label{
  position:absolute; top:calc(100% + 42px);
  text-align:center;
  font-family:var(--font-mono);
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; line-height:1.7;
  color:rgba(235,241,255,.95);
  white-space:nowrap;
  padding:8px 16px;
  border-radius:999px;
  background:rgba(12,10,36,.42);
  border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.stage-tag{
  position:absolute;
  font-family:var(--font-mono);
  font-size:.7rem; letter-spacing:.1em;
  padding:8px 14px; border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(10,8,32,.42);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:rgba(240,242,255,.85);
}
.stage-tag-before{ left:26px; bottom:24px; }
.stage-tag-after{ right:26px; top:24px; color:#E4ECFF; border-color:rgba(140,165,255,.55); }

/* ------------------------------------------------------------
   9. Trust chain  (signature moment)
   ------------------------------------------------------------ */
.chain{
  padding:clamp(100px, 13vw, 170px) 0 clamp(90px, 11vw, 140px);
  background:
    radial-gradient(60% 55% at 82% 0%, rgba(77,124,255,.1), transparent 60%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
}

.chain-track{ position:relative; padding-top:12px; }

.chain-line{
  position:absolute; top:21px; left:4%; right:4%;
  height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--blue-ice), var(--blue-sky) 38%, var(--cobalt) 70%, var(--cyan));
  box-shadow:0 0 22px rgba(77,124,255,.55);
  opacity:.25;
  transition:opacity 1s var(--ease);
  overflow:visible;
}
.chain-track.go .chain-line{ opacity:1; }
.chain-pulse{
  position:absolute; top:-3px; left:-12%;
  width:120px; height:8px; border-radius:999px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
  filter:blur(1px) drop-shadow(0 0 12px rgba(255,255,255,.9));
  opacity:0;
}
.chain-track.go .chain-pulse{
  opacity:1;
  animation:chain-travel 4.5s var(--ease) .4s infinite;
}
@keyframes chain-travel{
  0%  { left:-12%; opacity:0; }
  8%  { opacity:1; }
  82% { opacity:1; }
  100%{ left:104%; opacity:0; }
}

.chain-nodes{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:22px;
}
.chain-node{
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}
.chain-dot{
  position:relative; z-index:1;
  width:20px; height:20px; border-radius:50%;
  background:var(--ink-2);
  border:2px solid rgba(255,255,255,.28);
  transition:border-color .6s var(--ease), box-shadow .6s var(--ease);
}
/* the lit fill lives on ::after so opacity (transitionable) can stagger */
.chain-dot::after{
  content:""; position:absolute; inset:-2px;
  border-radius:50%;
  background:linear-gradient(130deg, var(--blue-ice), var(--blue-sky));
  opacity:0;
  transition:opacity .6s var(--ease);
}
.chain-node-proof .chain-dot::after{
  background:linear-gradient(130deg, var(--amber), var(--pink), #8A5CFF);
}
.chain-track.go .chain-node:nth-child(1) .chain-dot,
.chain-track.go .chain-node:nth-child(1) .chain-dot::after{ transition-delay:.2s; }
.chain-track.go .chain-node:nth-child(2) .chain-dot,
.chain-track.go .chain-node:nth-child(2) .chain-dot::after{ transition-delay:1.1s; }
.chain-track.go .chain-node:nth-child(3) .chain-dot,
.chain-track.go .chain-node:nth-child(3) .chain-dot::after{ transition-delay:2s; }
.chain-track.go .chain-node:nth-child(4) .chain-dot,
.chain-track.go .chain-node:nth-child(4) .chain-dot::after{ transition-delay:2.9s; }
.chain-track.go .chain-dot{
  border-color:rgba(255,255,255,.85);
  box-shadow:0 0 20px rgba(140,165,255,.8);
}
.chain-track.go .chain-dot::after{ opacity:1; }
.chain-track.go .chain-node-proof .chain-dot{
  box-shadow:0 0 34px rgba(255,179,124,.95), 0 0 70px rgba(255,110,176,.5);
}

.chain-card{
  margin-top:30px;
  width:100%;
  padding:26px 22px;
  border-radius:var(--r-md);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.11);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:translate .35s var(--ease), background-color .35s var(--ease),
             border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.chain-card h3{
  font-size:1.3rem; color:#fff;
}
.chain-card p{
  margin-top:8px;
  font-size:.92rem; color:var(--text-light-mute);
}
.chain-card small{
  display:block;
  max-height:0; opacity:0; overflow:hidden;
  font-family:var(--font-mono);
  font-size:.7rem; letter-spacing:.08em;
  color:var(--blue-ice);
  transition:max-height .4s var(--ease), opacity .4s var(--ease), margin-top .4s var(--ease);
}
.chain-node:hover .chain-card{
  translate:0 -5px;
  background:rgba(255,255,255,.08);
  border-color:rgba(140,165,255,.4);
  box-shadow:0 24px 50px -24px rgba(77,124,255,.5);
}
.chain-node:hover .chain-card small{
  max-height:3em; opacity:1; margin-top:12px;
}
.chain-node-proof .chain-card{
  border-color:rgba(255,179,124,.4);
  background:rgba(255,179,124,.07);
}

/* ------------------------------------------------------------
   10. Platform capabilities
   ------------------------------------------------------------ */
.caps{
  padding:clamp(90px, 12vw, 150px) 0;
  background:
    radial-gradient(55% 50% at 12% 34%, rgba(46,75,255,.08), transparent 60%),
    linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 100%);
}

.caps-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}

.cap-card{
  position:relative;
  padding:30px 26px 26px;
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  overflow:hidden;
  transition:translate .3s var(--ease), background-color .3s var(--ease),
             border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.cap-card:hover{
  translate:0 -4px;
  background:rgba(255,255,255,.06);
  border-color:rgba(157,184,255,.35);
  box-shadow:0 16px 36px -24px rgba(0,10,40,.6);
}

.cap-card h3{ font-size:1.28rem; color:#fff; }
.cap-card > p{
  margin-top:8px;
  font-size:.92rem; line-height:1.5;
  color:var(--text-light-mute);
}
.cap-expand{
  position:absolute; top:18px; right:20px;
  font-size:.95rem;
  color:rgba(255,255,255,.35);
  transition:color .3s var(--ease), translate .3s var(--ease);
}
.cap-card:hover .cap-expand{
  color:var(--blue-ice);
  translate:2px -2px;
}
.cap-more{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:16px;
  font-size:.84rem; font-weight:600;
  color:var(--blue-ice);
  opacity:0; translate:0 6px;
  transition:opacity .35s var(--ease), translate .35s var(--ease);
}
.cap-more i{ font-style:normal; transition:translate .25s var(--ease); }
.cap-card:hover .cap-more{ opacity:1; translate:0 0; }
.cap-card:hover .cap-more i{ translate:3px 0; }

/* --- capability mini-scenes --- */
.cap-scene{
  position:relative;
  height:76px; margin-bottom:22px;
  display:flex; align-items:center;
}
.cap-scene svg{ fill:none; stroke-linecap:round; stroke-linejoin:round; }

/* identity — ring scan */
.scene-identity i{
  position:absolute; left:24px; top:50%;
  translate:-50% -50%;
  border-radius:50%;
  border:1.5px solid;
}
.scene-identity i:nth-child(1){ width:20px; height:20px; border-color:rgba(220,235,255,.95); }
.scene-identity i:nth-child(2){ width:42px; height:42px; border-color:rgba(140,165,255,.6); animation:id-scan 3.2s var(--ease) infinite; }
.scene-identity i:nth-child(3){ width:64px; height:64px; border-color:rgba(77,124,255,.4); animation:id-scan 3.2s 1.1s var(--ease) infinite; }
@keyframes id-scan{
  0%  { transform:scale(.82); opacity:1; }
  75%,100%{ transform:scale(1.18); opacity:0; }
}

/* security — shield pulse */
.scene-security svg{
  width:44px; height:44px;
  stroke:var(--blue-ice); stroke-width:2;
}
.scene-security i{
  position:absolute; left:22px; top:50%;
  width:58px; height:58px;
  translate:-50% -50%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(140,165,255,.35), transparent 65%);
  animation:shield-pulse 2.8s ease-in-out infinite;
}
@keyframes shield-pulse{
  0%,100%{ transform:scale(.85); opacity:.5; }
  50%    { transform:scale(1.15); opacity:1; }
}

/* messaging — two bound bubbles */
.scene-messaging i{
  position:absolute; top:50%;
  width:30px; height:22px;
  border-radius:10px 10px 10px 3px;
  border:1.5px solid rgba(57,194,255,.9);
  translate:0 -50%;
}
.scene-messaging i:nth-child(2){
  left:52px;
  border-radius:10px 10px 3px 10px;
  border-color:rgba(77,124,255,.85);
  animation:bubble-blink 3s 1.4s ease-in-out infinite;
}
.scene-messaging i:nth-child(1){ left:0; animation:bubble-blink 3s ease-in-out infinite; }
@keyframes bubble-blink{
  0%,100%{ opacity:.55; }
  20%    { opacity:1; }
}
.scene-messaging b{
  position:absolute; left:31px; top:50%;
  width:20px; height:1.5px;
  background:linear-gradient(90deg, var(--cyan), var(--blue-sky));
  animation:link-flow 3s linear infinite;
  background-size:200% 100%;
}
@keyframes link-flow{
  from{ background-position:0% 0; }
  to  { background-position:-200% 0; }
}

/* signature — glowing stroke draws itself */
.scene-signature svg{
  width:86px; height:44px;
  stroke:var(--amber); stroke-width:2;
  filter:drop-shadow(0 0 6px rgba(255,217,160,.7));
}
.scene-signature svg path{
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:sig-draw 4.5s var(--ease) infinite;
}
@keyframes sig-draw{
  0%      { stroke-dashoffset:1; }
  45%,80% { stroke-dashoffset:0; }
  100%    { stroke-dashoffset:-1; }
}

/* payments — approval ring + check */
.scene-payments svg{
  width:50px; height:50px;
  stroke-width:2;
}
.scene-payments svg circle{ stroke:rgba(255,255,255,.25); }
.scene-payments svg .pay-check{
  stroke:var(--cyan);
  filter:drop-shadow(0 0 5px rgba(57,194,255,.8));
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:pay-approve 3.6s var(--ease) infinite;
}
@keyframes pay-approve{
  0%,15%  { stroke-dashoffset:1; }
  45%,85% { stroke-dashoffset:0; }
  100%    { stroke-dashoffset:1; }
}

/* documents — layered sheets */
.scene-documents i{
  position:absolute; top:50%; left:14px;
  width:36px; height:46px;
  translate:-50% -50%;
  border-radius:6px;
  border:1.5px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.04);
}
.scene-documents i:nth-child(1){ rotate:-8deg; border-color:rgba(77,124,255,.55); animation:sheet-a 5s ease-in-out infinite alternate; }
.scene-documents i:nth-child(2){ rotate:2deg;  border-color:rgba(140,165,255,.7); animation:sheet-b 5s ease-in-out infinite alternate; }
.scene-documents i:nth-child(3){ rotate:11deg; border-color:rgba(157,184,255,.85); animation:sheet-c 5s ease-in-out infinite alternate; }
@keyframes sheet-a{ to{ rotate:-13deg; translate:-58% -50%; } }
@keyframes sheet-b{ to{ rotate:0deg; } }
@keyframes sheet-c{ to{ rotate:16deg; translate:-42% -50%; } }

/* miniapps — modular tiles */
.scene-miniapps{ gap:7px; }
.scene-miniapps i{
  width:22px; height:22px;
  border-radius:7px;
  border:1.5px solid rgba(255,255,255,.35);
  animation:tile-light 3.2s ease-in-out infinite;
}
.scene-miniapps i:nth-child(2){ animation-delay:.4s; }
.scene-miniapps i:nth-child(3){ animation-delay:.8s; }
.scene-miniapps i:nth-child(4){ animation-delay:1.2s; }
@keyframes tile-light{
  0%,100%{ border-color:rgba(255,255,255,.3); background:transparent; }
  18%    { border-color:var(--blue-ice); background:rgba(140,165,255,.18); }
}

/* ai trust — neural halo + permission ring */
.scene-aitrust i{
  position:absolute; left:26px; top:50%;
  translate:-50% -50%;
  border-radius:50%;
}
.scene-aitrust i:nth-child(1){
  width:60px; height:60px;
  border:1.5px dashed rgba(57,194,255,.6);
  animation:halo-rotate 14s linear infinite;
}
@keyframes halo-rotate{ to{ transform:rotate(360deg); } }
.scene-aitrust i:nth-child(2){
  width:38px; height:38px;
  border:1.5px solid rgba(140,165,255,.7);
  animation:shield-pulse 3.4s ease-in-out infinite;
}
.scene-aitrust b{
  position:absolute; left:26px; top:50%;
  width:14px; height:14px;
  translate:-50% -50%;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #DCEBFF, var(--cobalt) 80%);
  box-shadow:0 0 14px rgba(77,124,255,.9);
}

/* ------------------------------------------------------------
   11. Brand ownership
   ------------------------------------------------------------ */
.brand{
  padding:clamp(90px, 12vw, 150px) 0;
  background:#FAF7F2;
}
.brand-split{
  display:grid;
  grid-template-columns:minmax(0, 5fr) minmax(0, 6fr);
  gap:clamp(40px, 6vw, 88px);
  align-items:center;
}
.brand-copy h2{
  font-size:clamp(2.1rem, 4vw, 3.1rem);
  color:var(--text);
}
.brand-copy .section-sub{ margin-left:0; }

.brand-claims{
  margin-top:34px;
  display:grid; gap:10px;
}
.brand-claims li{
  position:relative;
  padding-left:26px;
  font-family:var(--font-body);
  font-size:clamp(1.2rem, 1.8vw, 1.45rem);
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--text);
}
.brand-claims li::before{
  content:""; position:absolute; left:0; top:.58em;
  width:14px; height:3px; border-radius:3px;
  background:linear-gradient(90deg, var(--cobalt), var(--cyan));
}
.brand-final{
  margin-top:30px;
  font-size:1.04rem;
  color:var(--text-mute);
}
.brand-final strong{ color:var(--cobalt); }

.brand-visual{ position:relative; }
.brand-frame{
  position:relative;
  aspect-ratio:5/4;
  border-radius:var(--r-xl);
  overflow:hidden;
  /* placeholder until /images/brand-ownership.jpg exists */
  background:
    radial-gradient(70% 60% at 30% 25%, rgba(255,231,194,.95), transparent 60%),
    radial-gradient(80% 70% at 85% 80%, rgba(77,124,255,.65), transparent 65%),
    linear-gradient(135deg, #FFE0C2 0%, #FF9DBE 45%, #4D7CFF 100%);
  box-shadow:
    0 20px 48px -28px rgba(46,75,255,.35),
    0 0 0 1px rgba(255,255,255,.5) inset;
}
.brand-frame img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
}
.brand-shell-glow{
  position:absolute; inset:0; z-index:1;
  background:radial-gradient(50% 40% at 50% 18%, rgba(255,255,255,.4), transparent 65%);
  animation:shell-glow 7s ease-in-out infinite alternate;
}
@keyframes shell-glow{
  from{ opacity:.55; }
  to  { opacity:1; }
}
.brand-node{
  position:absolute; z-index:3;
  width:12px; height:12px; border-radius:50%;
  background:#fff;
  box-shadow:0 0 12px rgba(255,255,255,.95), 0 0 26px rgba(77,124,255,.65);
}
.brand-node-1{ left:16%; top:24%; animation:label-float 6s ease-in-out infinite alternate; }
.brand-node-2{ left:78%; top:36%; width:9px; height:9px; animation:label-float 8s 1s ease-in-out infinite alternate; }
.brand-node-3{ left:60%; top:74%; width:7px; height:7px; animation:label-float 7s .5s ease-in-out infinite alternate; }

.brand-under{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  margin-top:22px;
}
.brand-underline{
  width:2px; height:34px;
  background:linear-gradient(180deg, var(--blue-sky), transparent);
  animation:under-pulse 2.6s ease-in-out infinite;
}
@keyframes under-pulse{
  0%,100%{ opacity:.35; }
  50%    { opacity:1; }
}
.brand-under span{
  font-family:var(--font-mono);
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-mute);
}

/* ------------------------------------------------------------
   12. Industries
   ------------------------------------------------------------ */
.industries{
  padding:clamp(90px, 12vw, 150px) 0;
  background:#FFFFFF;
}
.industry-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.industry-card{
  position:relative;
  display:block;
  aspect-ratio:16/11;
  border-radius:var(--r-xl);
  overflow:hidden;
  isolation:isolate;
  transition:translate .35s var(--ease), box-shadow .35s var(--ease);
  box-shadow:0 12px 32px -24px rgba(20,24,58,.35);
}
.industry-card:hover{
  translate:0 -5px;
  box-shadow:0 24px 48px -28px rgba(20,28,70,.4);
}
/* per-industry gradient placeholders */
.ind-public    { background:linear-gradient(150deg, #FFD9A0 0%, #FF9DBE 46%, #8A5CFF 100%); }
.ind-finance   { background:linear-gradient(150deg, #2E4BFF 0%, #8A5CFF 55%, #FF6EB0 100%); }
.ind-health    { background:linear-gradient(150deg, #FFC9DD 0%, #FFB37C 50%, #E86FA8 100%); }
.ind-enterprise{ background:linear-gradient(150deg, #101638 0%, #4A3BD8 55%, #39C2FF 100%); }

.industry-card img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:scale .8s var(--ease);
}
.industry-card:hover img{ scale:1.05; }
.industry-veil{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(200deg, transparent 30%, rgba(10,10,36,.32) 62%, rgba(8,9,32,.82) 100%);
}
.industry-body{
  position:absolute; inset:auto 0 0 0; z-index:2;
  padding:30px 30px 28px;
  color:#fff;
}
.industry-body h3{ font-size:clamp(1.45rem, 2.2vw, 1.85rem); }
.industry-body p{
  margin-top:6px;
  font-size:.98rem;
  color:rgba(240,242,255,.85);
}
.industry-tags{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:16px;
  opacity:0; translate:0 8px;
  transition:opacity .4s var(--ease) .05s, translate .4s var(--ease) .05s;
}
.industry-card:hover .industry-tags,
.industry-card:focus-visible .industry-tags{ opacity:1; translate:0 0; }
.industry-tags li{
  padding:5px 12px;
  border-radius:999px;
  font-size:.74rem; font-weight:500;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

/* ------------------------------------------------------------
   13. MiniApp gallery (light interlude)
   ------------------------------------------------------------ */
.gallery{
  padding:clamp(90px, 12vw, 150px) 0;
  background:#F6F8FC;
}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
}
.tile{
  position:relative;
  min-height:190px;
  padding:26px 24px;
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.85);
  border:1px solid var(--line);
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
  transition:translate .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.tile:hover{
  translate:0 -3px;
  border-color:rgba(46,75,255,.3);
  box-shadow:0 12px 28px -20px rgba(20,30,80,.35);
}
.tile h3{
  font-size:1.18rem;
  color:var(--text);
}
.tile-lg{ grid-column:span 2; }
.tile-dark{
  background:linear-gradient(140deg, var(--ink-2), #1B1A4E);
  border-color:rgba(255,255,255,.1);
}
.tile-dark h3{ color:#fff; }
.tile-violet{
  background:linear-gradient(140deg, #2440E0, #4D7CFF);
  border-color:rgba(255,255,255,.25);
}
.tile-violet h3{ color:#fff; }
.tile-warm{
  background:linear-gradient(140deg, #FFE3C4, #FFC0D8);
  border-color:rgba(255,179,124,.55);
}

/* --- tile mini-visuals --- */
.tile-viz{
  position:relative;
  height:54px;
  margin-bottom:auto;
  display:flex; align-items:center; gap:8px;
}

/* approval flow — chips lighting in sequence */
.viz-flow i{
  width:44px; height:16px;
  border-radius:999px;
  border:1.5px solid rgba(255,255,255,.35);
  animation:tile-light 3s ease-in-out infinite;
}
.viz-flow i:nth-child(2){ animation-delay:.5s; }
.viz-flow i:nth-child(3){ animation-delay:1s; }

/* dots grid */
.viz-dots{ display:grid; grid-template-columns:repeat(3, 10px); gap:8px; align-content:center; }
.viz-dots i{
  width:10px; height:10px; border-radius:50%;
  background:rgba(46,75,255,.25);
  animation:dot-glow 3.4s ease-in-out infinite;
}
.viz-dots i:nth-child(2){ animation-delay:.3s; }
.viz-dots i:nth-child(3){ animation-delay:.9s; }
.viz-dots i:nth-child(4){ animation-delay:1.4s; }
.viz-dots i:nth-child(5){ animation-delay:.6s; }
.viz-dots i:nth-child(6){ animation-delay:1.9s; }
@keyframes dot-glow{
  0%,100%{ background:rgba(46,75,255,.22); }
  30%    { background:var(--blue-sky); box-shadow:0 0 8px rgba(77,124,255,.7); }
}

/* slow conic ring */
.viz-ring i{
  width:42px; height:42px; border-radius:50%;
  background:conic-gradient(var(--cyan), var(--blue-sky), var(--cobalt), var(--cyan));
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  animation:halo-rotate 9s linear infinite;
}

/* orbit */
.viz-orbit i{
  width:44px; height:44px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.5);
}
.viz-orbit b{
  position:absolute; left:22px; top:50%;
  width:9px; height:9px; margin:-4.5px 0 0 -4.5px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 10px rgba(255,255,255,.95);
  animation:orbit-spin 5s linear infinite;
}
@keyframes orbit-spin{
  from{ transform:rotate(0deg)   translateX(22px); }
  to  { transform:rotate(360deg) translateX(22px); }
}

/* bars */
.viz-bars{ align-items:flex-end; gap:7px; }
.viz-bars i{
  width:12px; border-radius:4px 4px 2px 2px;
  background:linear-gradient(180deg, var(--blue-sky), var(--cobalt));
  animation:bar-rise 3.2s ease-in-out infinite;
}
.viz-bars i:nth-child(1){ height:18px; }
.viz-bars i:nth-child(2){ height:30px; animation-delay:.3s; }
.viz-bars i:nth-child(3){ height:22px; animation-delay:.6s; }
.viz-bars i:nth-child(4){ height:38px; animation-delay:.9s; }
@keyframes bar-rise{
  0%,100%{ transform:scaleY(.75); opacity:.6; }
  40%    { transform:scaleY(1); opacity:1; }
}
.viz-bars{ transform-origin:bottom; }
.viz-bars i{ transform-origin:bottom; }

/* journey path */
.viz-path svg{
  width:150px; height:48px;
  fill:none; stroke:rgba(46,75,255,.6); stroke-width:2;
  stroke-linecap:round;
}
.viz-path svg path{
  stroke-dasharray:.34 .66; stroke-dashoffset:0;
  animation:path-flow 4s linear infinite;
}
@keyframes path-flow{ to{ stroke-dashoffset:-1; } }
.viz-path b{
  position:absolute; right:6px; top:22px;
  width:9px; height:9px; border-radius:50%;
  background:var(--cobalt);
  box-shadow:0 0 10px rgba(46,75,255,.85);
  animation:shield-pulse 2.4s ease-in-out infinite;
}

/* pulse rings */
.viz-pulse i{
  position:absolute; left:20px; top:50%;
  width:34px; height:34px;
  translate:-50% -50%;
  border-radius:50%;
  border:1.5px solid var(--cobalt);
  animation:id-scan 3s var(--ease) infinite;
}
.viz-pulse i:nth-child(2){ animation-delay:1.5s; }

/* health cross */
.viz-cross i{
  position:absolute; left:20px; top:50%;
  translate:-50% -50%;
  border-radius:4px;
  background:linear-gradient(140deg, var(--blue-sky), var(--cyan));
  animation:shield-pulse 3.6s ease-in-out infinite;
}
.viz-cross i:nth-child(1){ width:30px; height:10px; }
.viz-cross i:nth-child(2){ width:10px; height:30px; }

/* retail tag */
.viz-tag i{
  width:36px; height:26px;
  border-radius:8px 8px 8px 2px;
  border:1.5px solid var(--blue-sky);
  rotate:-8deg;
  animation:label-float 5s ease-in-out infinite alternate;
}
.viz-tag b{
  position:absolute; left:30px; top:14px;
  width:7px; height:7px; border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 8px rgba(57,194,255,.8);
}

/* workflow steps — light-tile variant of the tile-light pulse */
@keyframes tile-light-blue{
  0%,100%{ border-color:rgba(46,75,255,.45); background:transparent; }
  18%    { border-color:var(--blue-sky); background:rgba(77,124,255,.14); }
}
.viz-steps{ align-items:flex-end; gap:6px; }
.viz-steps i{
  width:26px; border-radius:5px;
  border:1.5px solid rgba(46,75,255,.45);
  animation:tile-light-blue 3.4s ease-in-out infinite;
}
.viz-steps i:nth-child(1){ height:14px; }
.viz-steps i:nth-child(2){ height:24px; animation-delay:.5s; }
.viz-steps i:nth-child(3){ height:34px; animation-delay:1s; }

/* ------------------------------------------------------------
   13b. Developers — build with AI over MCP
   ------------------------------------------------------------ */
.dev{
  position:relative;
  padding:clamp(90px, 12vw, 150px) 0;
  overflow:hidden;
  background:
    radial-gradient(55% 45% at 80% 8%, rgba(57,194,255,.1), transparent 62%),
    radial-gradient(50% 55% at 8% 92%, rgba(138,92,255,.14), transparent 65%),
    linear-gradient(180deg, #0A0E2C 0%, var(--ink-2) 55%, var(--ink) 100%);
}
/* faint engineering dot-grid */
.dev::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:radial-gradient(rgba(140,165,255,.16) 1px, transparent 1.5px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(80% 70% at 50% 30%, #000 20%, transparent 100%);
          mask-image:radial-gradient(80% 70% at 50% 30%, #000 20%, transparent 100%);
}
.dev .shell{ position:relative; z-index:2; }

/* headline accent matches the hero's warm italic gradient */
.dev .section-head h2 em{
  font-style:italic;
  background:linear-gradient(92deg, var(--amber) 5%, #FF9DBE 55%, #D3B4FF 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.dev-mcp-pill{
  display:inline-flex; align-items:center; gap:9px;
  margin-top:24px;
  padding:9px 18px;
  border-radius:999px;
  border:1px solid rgba(140,165,255,.32);
  background:rgba(140,165,255,.08);
  font-family:var(--font-mono);
  font-size:.68rem; letter-spacing:.06em;
  color:rgba(210,222,255,.85);
}
.dev-mcp-pill svg{
  flex:none; width:14px; height:14px;
  fill:none; stroke:var(--cyan); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}

/* --- split: steps rail | agent terminal --- */
.dev-split{
  display:grid;
  grid-template-columns:minmax(0, 5fr) minmax(0, 6fr);
  gap:clamp(40px, 6vw, 84px);
  align-items:center;
  margin-bottom:clamp(70px, 9vw, 110px);
}

.dev-step{
  position:relative;
  padding:0 0 30px 58px;
}
.dev-step:last-child{ padding-bottom:0; }
.dev-step::before{
  content:""; position:absolute; left:20px; top:46px; bottom:8px;
  width:2px; border-radius:2px;
  background:linear-gradient(180deg, rgba(140,165,255,.45), rgba(140,165,255,.06));
}
.dev-step:last-child::before{ display:none; }
.dev-num{
  position:absolute; left:0; top:2px;
  width:41px; height:41px;
  border-radius:12px;
  display:grid; place-items:center;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.05em;
  color:var(--blue-ice);
  border:1px solid rgba(140,165,255,.35);
  background:rgba(140,165,255,.08);
}
.dev-step h3{ padding-top:8px; font-size:1.22rem; color:#fff; }
.dev-step p{
  margin-top:8px;
  max-width:48ch;
  font-size:.94rem; line-height:1.6;
  color:var(--text-light-mute);
}
.dev-code{
  margin-top:14px;
  padding:13px 16px;
  border-radius:var(--r-sm);
  background:rgba(4,7,22,.65);
  border:1px solid rgba(255,255,255,.1);
  font-family:var(--font-mono);
  font-size:.72rem; line-height:1.65;
  color:rgba(200,212,245,.78);
  white-space:pre;
  overflow-x:auto;
}
.dev-code em{ font-style:normal; color:var(--amber); }

/* --- agent terminal --- */
.dev-visual{ position:relative; }
.dev-visual::before{
  content:""; position:absolute; inset:-8% -10%; z-index:0;
  background:radial-gradient(55% 50% at 60% 40%, rgba(46,75,255,.34), transparent 70%);
  filter:blur(30px);
  pointer-events:none;
}
.mcp-term{
  position:relative; z-index:1;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:linear-gradient(180deg, rgba(13,18,44,.92), rgba(6,9,26,.97));
  border:1px solid rgba(140,165,255,.22);
  box-shadow:0 30px 70px -30px rgba(3,8,30,.8), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.term-bar{
  display:flex; align-items:center; gap:14px;
  padding:13px 18px;
  border-bottom:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.03);
}
.term-dots{ display:flex; gap:6px; }
.term-dots i{ width:10px; height:10px; border-radius:50%; }
.term-dots i:nth-child(1){ background:rgba(255,110,176,.8); }
.term-dots i:nth-child(2){ background:rgba(255,217,160,.85); }
.term-dots i:nth-child(3){ background:rgba(57,194,255,.85); }
.term-title{
  font-family:var(--font-mono);
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(205,215,245,.55);
}
.term-status{
  margin-left:auto;
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 11px;
  border-radius:999px;
  border:1px solid rgba(57,194,255,.3);
  background:rgba(57,194,255,.08);
  font-family:var(--font-mono);
  font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(125,225,255,.9);
  white-space:nowrap;
}
.term-status i{
  width:6px; height:6px; border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 8px rgba(57,194,255,.9);
  animation:status-pulse 2.2s ease-in-out infinite;
}
@keyframes status-pulse{
  0%,100%{ opacity:.5; }
  50%    { opacity:1; }
}

.term-body{
  display:grid; gap:9px;
  padding:20px 20px 24px;
  font-family:var(--font-mono);
  font-size:.8rem; line-height:1.55;
}
.t-line{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 10px;
  color:rgba(226,232,255,.92);
}
.t-dim{ font-size:.72rem; color:rgba(170,182,225,.52); }
/* long prompt flows inline after the mark instead of wrapping below it */
.t-user{ display:block; color:#fff; }
.t-user .t-mark{ margin-right:2px; }
.t-mark{ color:var(--cyan); }
.t-tool{ align-items:center; }
.t-tool code{ font-size:.78rem; color:var(--cyan); }
.t-note{
  margin-left:auto;
  font-size:.7rem; text-align:right;
  color:rgba(170,182,225,.5);
}
.t-ico{ position:relative; flex:none; width:14px; height:14px; align-self:center; }
.t-spin{
  position:absolute; inset:0;
  border-radius:50%;
  border:1.5px solid rgba(140,165,255,.25);
  border-top-color:var(--cyan);
  opacity:0;
}
.t-ok{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:.72rem; font-weight:500;
  color:var(--cyan);
}
.t-result{
  font-size:.78rem; font-weight:500;
  color:var(--amber);
  text-shadow:0 0 18px rgba(255,179,124,.45);
}
.t-caret{
  width:8px; height:14px; align-self:center;
  background:rgba(235,242,255,.9);
  animation:caret-blink 1.1s linear infinite;
}
@keyframes caret-blink{
  0%,45% { opacity:1; }
  50%,95%{ opacity:0; }
  100%   { opacity:1; }
}

/* choreography: static end-state without JS; JS adds .go on scroll */
html.js .mcp-term:not(.go) .t-line{ opacity:0; }
html.js .mcp-term:not(.go) .t-ok{ opacity:0; }
.mcp-term.go .t-line{
  opacity:0;
  animation:term-line-in .45s var(--ease-out) forwards;
  animation-delay:var(--td, 0s);
}
.mcp-term.go .t-spin{
  animation:term-work .8s linear forwards;
  animation-delay:var(--td, 0s);
}
.mcp-term.go .t-ok{
  opacity:0;
  animation:term-pop .3s var(--ease) forwards;
  animation-delay:calc(var(--td, 0s) + .75s);
}
@keyframes term-line-in{
  from{ opacity:0; transform:translateY(5px); }
  to  { opacity:1; transform:none; }
}
@keyframes term-work{
  0%  { opacity:0; transform:rotate(0deg); }
  10% { opacity:1; }
  85% { opacity:1; }
  100%{ opacity:0; transform:rotate(540deg); }
}
@keyframes term-pop{
  from{ opacity:0; transform:scale(.4); }
  to  { opacity:1; transform:scale(1); }
}
.term-caption{
  margin-top:16px;
  text-align:center;
  font-family:var(--font-mono);
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(190,205,245,.45);
}

/* --- SDK / API / MiniApp cards --- */
.dev-grid-label{
  margin-bottom:22px;
  text-align:center;
  font-family:var(--font-mono);
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(205,218,255,.55);
}
.dev-cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}
.dev-card{
  position:relative;
  padding:28px 26px;
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  overflow:hidden;
  transition:translate .3s var(--ease), background-color .3s var(--ease),
             border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.dev-card::before{
  content:""; position:absolute; top:0; left:26px; right:26px; height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, var(--cyan), var(--blue-sky));
  opacity:0;
  transition:opacity .3s var(--ease);
}
.dev-card:nth-child(2)::before{ background:linear-gradient(90deg, var(--blue-sky), var(--violet)); }
.dev-card:nth-child(3)::before{ background:linear-gradient(90deg, var(--amber), var(--pink)); }
.dev-card:hover{
  translate:0 -4px;
  background:rgba(255,255,255,.06);
  border-color:rgba(157,184,255,.35);
  box-shadow:0 16px 36px -24px rgba(0,10,40,.6);
}
.dev-card:hover::before{ opacity:1; }
.dev-kicker{
  font-family:var(--font-mono);
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--cyan);
}
.dev-card:nth-child(2) .dev-kicker{ color:var(--blue-ice); }
.dev-card:nth-child(3) .dev-kicker{ color:var(--amber); }
.dev-card h3{ margin-top:12px; font-size:1.18rem; color:#fff; }
.dev-card > p{
  margin-top:8px;
  font-size:.9rem; line-height:1.55;
  color:var(--text-light-mute);
}
.dev-chips{
  display:flex; flex-wrap:wrap; gap:7px;
  margin-top:18px;
}
.dev-chips li{
  padding:5px 10px;
  border-radius:7px;
  border:1px solid rgba(140,165,255,.28);
  background:rgba(140,165,255,.07);
  font-family:var(--font-mono);
  font-size:.66rem; letter-spacing:.02em;
  color:rgba(205,220,255,.85);
}

/* --- compatible agents + closing line --- */
.dev-agents{
  margin-top:clamp(56px, 7vw, 84px);
  text-align:center;
}
.dev-agents-label{
  font-family:var(--font-mono);
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(205,218,255,.5);
}
.dev-agents ul{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  margin-top:16px;
}
.dev-agents li{
  padding:9px 18px;
  border-radius:999px;
  font-size:.88rem; font-weight:500;
  color:rgba(240,244,255,.9);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.16);
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
}
.dev-agents li:hover{
  border-color:rgba(140,165,255,.5);
  background:rgba(255,255,255,.08);
}
.dev-agents li.is-any{
  border-style:dashed;
  color:rgba(205,218,255,.6);
}
.dev-final{
  margin-top:clamp(44px, 5vw, 60px);
  text-align:center;
  font-family:var(--font-serif);
  font-style:italic;
  font-size:clamp(1.35rem, 2.2vw, 1.7rem);
  color:#fff;
}
.dev-final em{
  background:linear-gradient(92deg, var(--amber) 5%, #FF9DBE 55%, #D3B4FF 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ------------------------------------------------------------
   14. AI trust
   ------------------------------------------------------------ */
.ai{
  padding:clamp(90px, 12vw, 150px) 0;
  background:var(--paper);
}
.ai-split{
  display:grid;
  grid-template-columns:minmax(0, 5fr) minmax(0, 6fr);
  gap:clamp(40px, 6vw, 88px);
  align-items:center;
}
.ai-copy h2{
  font-size:clamp(2.1rem, 4vw, 3.1rem);
  color:var(--text);
}
.ai-copy h2 em{
  font-style:normal;
  background:linear-gradient(92deg, var(--cobalt) 0%, var(--blue-sky) 55%, var(--cyan) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.ai-copy .section-sub{ margin-left:0; }

.ai-bullets{
  margin-top:30px;
  display:flex; flex-wrap:wrap; gap:10px;
}
.ai-bullets li{
  padding:9px 18px;
  border-radius:999px;
  font-size:.88rem; font-weight:500;
  color:var(--text);
  background:rgba(255,255,255,.8);
  border:1px solid var(--line-strong);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.ai-bullets li:hover{
  border-color:rgba(77,124,255,.5);
  box-shadow:0 8px 24px -10px rgba(77,124,255,.35);
}
.ai-final{
  margin-top:30px;
  font-family:var(--font-serif);
  font-style:italic;
  font-size:1.55rem; font-weight:400;
  color:var(--text);
}

.ai-visual{ position:relative; }
.ai-frame{
  position:relative;
  aspect-ratio:5/4;
  border-radius:var(--r-xl);
  overflow:hidden;
  /* placeholder until /images/ai-trust.jpg exists */
  background:
    radial-gradient(60% 55% at 25% 20%, rgba(255,243,228,.95), transparent 60%),
    radial-gradient(70% 65% at 85% 75%, rgba(77,124,255,.5), transparent 65%),
    linear-gradient(140deg, #FFF3E4 0%, #FFD9A0 32%, #FF9DBE 66%, #4D7CFF 100%);
  box-shadow:0 20px 48px -28px rgba(77,124,255,.32), 0 0 0 1px rgba(255,255,255,.5) inset;
}
.ai-frame img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
}

/* overlay path: Human → AI Agent → Action → Approval → Audit Trail */
.ai-path{
  position:relative;
  margin:-46px 22px 0;
  padding:24px 26px 20px;
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.88);
  border:1px solid rgba(20,24,58,.08);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 16px 40px -28px rgba(20,24,58,.3);
}
.ai-path-line{
  position:absolute; top:33px; left:40px; right:40px;
  height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--blue-ice) 0%, var(--blue-sky) 35%, var(--cobalt) 70%, var(--cyan));
  opacity:.5;
  overflow:visible;
}
.ai-path-pulse{
  position:absolute; top:-2.5px; left:0;
  width:56px; height:7px; border-radius:999px;
  background:linear-gradient(90deg, transparent, rgba(77,124,255,.95), transparent);
  filter:drop-shadow(0 0 8px rgba(77,124,255,.8));
  opacity:0;
}
.ai-path.go .ai-path-pulse{
  opacity:1;
  animation:chain-travel 3.8s var(--ease) infinite;
}
.ai-steps{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:6px;
  text-align:center;
  font-size:.74rem; font-weight:600; letter-spacing:.02em;
  color:var(--text);
}
.ai-steps li{ display:grid; justify-items:center; gap:9px; }
.ai-step-dot{
  position:relative;
  width:18px; height:18px; border-radius:50%;
  background:#fff;
  border:2px solid var(--blue-sky);
  transition:box-shadow .5s var(--ease);
}
/* lit fill on ::after so the stagger actually animates */
.ai-step-dot::after{
  content:""; position:absolute; inset:-2px;
  border-radius:50%;
  background:linear-gradient(130deg, var(--blue-ice), var(--blue-sky));
  opacity:0;
  transition:opacity .5s var(--ease);
}
.ai-path.go .ai-steps li:nth-child(1) .ai-step-dot,
.ai-path.go .ai-steps li:nth-child(1) .ai-step-dot::after{ transition-delay:.15s; }
.ai-path.go .ai-steps li:nth-child(2) .ai-step-dot,
.ai-path.go .ai-steps li:nth-child(2) .ai-step-dot::after{ transition-delay:.75s; }
.ai-path.go .ai-steps li:nth-child(3) .ai-step-dot,
.ai-path.go .ai-steps li:nth-child(3) .ai-step-dot::after{ transition-delay:1.35s; }
.ai-path.go .ai-steps li:nth-child(4) .ai-step-dot,
.ai-path.go .ai-steps li:nth-child(4) .ai-step-dot::after{ transition-delay:1.95s; }
.ai-path.go .ai-steps li:nth-child(5) .ai-step-dot,
.ai-path.go .ai-steps li:nth-child(5) .ai-step-dot::after{ transition-delay:2.55s; }
.ai-path.go .ai-step-dot{
  box-shadow:0 0 14px rgba(77,124,255,.6);
}
.ai-path.go .ai-step-dot::after{ opacity:1; }
/* permission ring around the agent (::before — ::after carries the lit fill) */
.ai-step-ring::before{
  content:""; position:absolute; inset:-7px;
  border-radius:50%;
  border:1.5px dashed rgba(77,124,255,.65);
  animation:halo-rotate 12s linear infinite;
}
/* approval checkpoint */
.ai-step-check::before{
  content:""; position:absolute; inset:-6px;
  border-radius:50%;
  border:1.5px solid rgba(57,194,255,.6);
  animation:id-scan 3s var(--ease) infinite;
}

/* ------------------------------------------------------------
   15. Scale / data wave
   ------------------------------------------------------------ */
.scale{
  position:relative;
  padding:clamp(110px, 14vw, 180px) 0;
  overflow:hidden;
  background:
    radial-gradient(60% 50% at 50% 115%, rgba(46,75,255,.22), transparent 65%),
    linear-gradient(180deg, var(--ink) 0%, #0A0F2E 55%, var(--ink) 100%);
}
.scale-waves{
  position:absolute; inset:0;
  opacity:.9;
}
.scale-waves svg{ width:100%; height:100%; }
.scale-waves .ribbons{
  transform:translateY(calc((var(--wp, .5) - .5) * 56px));
}
.scale-waves .comets{
  transform:translateY(calc((var(--wp, .5) - .5) * -34px));
}
.scale-waves .ribbon{
  fill:none;
  stroke-width:54;
  stroke-linecap:round;
  opacity:.14;
  filter:blur(6px);
}
.scale-waves .ribbon-2{ stroke-width:38; opacity:.18; }
.scale-waves .ribbon-3{ stroke-width:64; opacity:.1; }
.scale-waves .ribbon-4{ stroke-width:30; opacity:.16; }
.scale-waves .comet{
  fill:none;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-dasharray:.035 .965;
  opacity:.75;
  filter:blur(.4px) drop-shadow(0 0 8px rgba(77,124,255,.9));
  animation:path-flow 9s linear infinite;
}
.scale-waves .comet-2{ animation-duration:13s; animation-delay:-4s; stroke-width:1.8; }
.scale-waves .comet-3{ animation-duration:11s; animation-delay:-7s; }

.scale-inner{ position:relative; z-index:2; }

.scale-metrics{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:22px;
  text-align:center;
}
.metric dt{
  font-family:var(--font-mono);
  font-size:clamp(2.5rem, 4.6vw, 3.9rem);
  font-weight:500;
  letter-spacing:-.02em;
  color:#F2F5FF;
}
.metric dd{
  margin-top:6px;
  font-size:.92rem;
  color:var(--text-light-mute);
}

/* ------------------------------------------------------------
   16. Compliance strip
   ------------------------------------------------------------ */
.compliance{
  padding:clamp(80px, 10vw, 130px) 0 clamp(90px, 12vw, 150px);
  background:
    radial-gradient(60% 34% at 50% 0%, rgba(46,75,255,.12), transparent 70%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
}
.compliance-strip{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:14px;
}
.comp-item{
  flex:0 1 200px;
  padding:20px 22px;
  border-radius:var(--r-md);
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.11);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  cursor:default;
  transition:translate .3s var(--ease), border-color .3s var(--ease),
             background-color .3s var(--ease);
}
.comp-item:hover,
.comp-item:focus{
  translate:0 -4px;
  border-color:rgba(140,165,255,.45);
  background:rgba(255,255,255,.07);
}
.comp-item svg{
  width:22px; height:22px; margin-bottom:12px;
  fill:none; stroke:var(--blue-ice); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.comp-item strong{
  display:block;
  font-family:var(--font-body); font-weight:600; font-size:.98rem;
  letter-spacing:-.005em;
  color:#fff;
}
.comp-item small{
  display:block;
  max-height:0; opacity:0; overflow:hidden;
  font-size:.78rem; line-height:1.45;
  color:var(--text-light-mute);
  transition:max-height .4s var(--ease), opacity .4s var(--ease), margin-top .4s var(--ease);
}
.comp-item:hover small,
.comp-item:focus small{
  max-height:4em; opacity:1; margin-top:8px;
}

/* ------------------------------------------------------------
   17. Final CTA
   ------------------------------------------------------------ */
.cta{
  position:relative;
  padding:clamp(130px, 17vw, 220px) 0;
  overflow:hidden;
  color:#fff;
  text-align:center;
}
.cta-media{
  position:absolute; inset:0;
  /* calm assembled-ecosystem dusk until /images/final-ecosystem.jpg exists */
  background:
    radial-gradient(75% 65% at 50% 108%, rgba(255,179,124,.55), transparent 62%),
    radial-gradient(60% 55% at 50% 90%, rgba(255,110,176,.4), transparent 65%),
    linear-gradient(180deg, #0B0E28 0%, #251B58 45%, #63348F 78%, #A75A93 100%);
}
.cta-media img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
}
.cta-veil{
  position:absolute; inset:0;
  background:radial-gradient(90% 80% at 50% 45%, rgba(9,10,34,.35) 0%, rgba(9,10,34,.72) 100%);
}
.cta-orbit{
  position:absolute; left:50%; top:50%;
  border-radius:50%;
  border:1px solid rgba(255,213,232,.22);
  translate:-50% -50%;
}
.cta-orbit-1{
  width:min(860px, 120vw); aspect-ratio:1;
  animation:orbit-slow 60s linear infinite;
}
.cta-orbit-2{
  width:min(560px, 88vw); aspect-ratio:1;
  border-color:rgba(77,124,255,.28);
  border-style:dashed;
  animation:orbit-slow 42s linear infinite reverse;
}
@keyframes orbit-slow{ to{ transform:rotate(360deg); } }
.cta-orbit-1::before,
.cta-orbit-2::before{
  content:""; position:absolute; top:-4px; left:50%;
  width:8px; height:8px; border-radius:50%;
  background:#fff;
  box-shadow:0 0 14px rgba(255,255,255,.95);
}
.cta-glow{
  position:absolute; left:50%; top:58%;
  width:640px; height:340px;
  translate:-50% -50%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,157,190,.35), transparent 70%);
  filter:blur(30px);
}

.cta-inner{ position:relative; z-index:2; }
.cta-kicker{
  font-family:var(--font-mono);
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--blue-ice);
}
.cta-title{
  max-width:860px;
  margin:22px auto 0;
  font-size:clamp(2.5rem, 5vw, 4rem);
  font-weight:400;
  letter-spacing:-.012em;
}
.cta-sub{
  max-width:560px;
  margin:22px auto 0;
  font-size:1.08rem;
  color:rgba(240,242,255,.82);
}
.cta-actions{
  display:flex; flex-wrap:wrap; justify-content:center; gap:16px;
  margin-top:40px;
}

/* ------------------------------------------------------------
   18. Footer
   ------------------------------------------------------------ */
.footer{
  padding:clamp(70px, 9vw, 100px) 0 44px;
  background:var(--ink);
  color:var(--text-light-mute);
}
.footer-top{
  display:grid;
  grid-template-columns:minmax(240px, 1.3fr) 3fr;
  gap:clamp(40px, 5vw, 80px);
  padding-bottom:52px;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.footer-logo{ padding:0; margin-bottom:16px; }
.footer-logo .nav-logo-img{ height:30px; }
.footer-tag{
  font-family:var(--font-mono);
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--blue-ice);
}
.footer-line{
  margin-top:14px;
  font-size:.86rem; line-height:1.8;
  color:rgba(235,238,255,.55);
}
.footer-cols{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:28px;
}
.footer-col h3{
  font-family:var(--font-mono);
  font-size:.68rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(235,238,255,.62);
  margin-bottom:16px;
}
.footer-col ul{ display:grid; gap:10px; }
.footer-col a{
  font-size:.9rem;
  color:rgba(235,238,255,.72);
  transition:color .25s var(--ease);
}
.footer-col a:hover{ color:#fff; }

.footer-bottom{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:14px;
  padding-top:30px;
  font-size:.86rem;
}
.footer-brandline strong{ color:var(--blue-ice); }
.footer-legal{ color:rgba(235,238,255,.62); }

/* ------------------------------------------------------------
   19. Reveal system (JS-gated)
   ------------------------------------------------------------ */
html.js .reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .85s var(--ease-out), transform .85s var(--ease-out);
}
html.js .reveal.in{
  opacity:1;
  transform:none;
}

/* ------------------------------------------------------------
   20. Responsive
   ------------------------------------------------------------ */
@media (max-width: 1080px){
  /* floating labels become a calm static row under the copy —
     at these widths absolute positioning collides with the headline */
  .hero-labels{
    position:static;
    display:flex; flex-wrap:wrap; gap:8px;
    margin-top:34px;
  }
  .hero-label{
    position:static;
    transform:none;
    animation:none;
    font-size:.74rem;
    padding:8px 14px;
  }

  .caps-grid{ grid-template-columns:repeat(2, 1fr); }
  .gallery-grid{ grid-template-columns:repeat(2, 1fr); }
  .proof-strip{ grid-template-columns:1fr 1fr; }
  .proof-item:nth-child(3){ border-left:0; }
  .proof-item:nth-child(n+3){ border-top:1px solid var(--line); }
  .brand-split, .ai-split{ grid-template-columns:1fr; gap:52px; }
  .brand-visual{ order:-1; }
  /* minmax(0,…) so the unbreakable JSON line can't inflate the column */
  .dev-split{ grid-template-columns:minmax(0, 1fr); gap:56px; }
  .dev-visual{ order:-1; }
  .footer-top{ grid-template-columns:1fr; }
  .footer-cols{ grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); }
  .scale-metrics{ grid-template-columns:1fr 1fr; gap:40px 22px; }
}

@media (max-width: 860px){
  .nav-links, .nav .nav-ghost{ display:none; }
  .nav-burger{ display:block; }
  .nav{ height:58px; gap:14px; }
  .announce-detail{ display:none; }

  .industry-grid{ grid-template-columns:1fr; }
  .industry-card{ aspect-ratio:16/12; }

  .chain-line{
    top:10px; bottom:10px; left:9px; right:auto;
    width:2px; height:auto;
    background:linear-gradient(180deg, var(--blue-ice), var(--blue-sky) 38%, var(--cobalt) 70%, var(--cyan));
  }
  .chain-pulse{
    top:-12%; left:-3px;
    width:8px; height:90px;
    background:linear-gradient(180deg, transparent, rgba(255,255,255,.95), transparent);
  }
  .chain-track.go .chain-pulse{ animation-name:chain-travel-v; }
  @keyframes chain-travel-v{
    0%  { top:-12%; opacity:0; }
    8%  { opacity:1; }
    82% { opacity:1; }
    100%{ top:104%; opacity:0; }
  }
  .chain-nodes{ grid-template-columns:1fr; gap:26px; }
  .chain-node{
    display:grid;
    grid-template-columns:20px 1fr;
    gap:0 20px;
    align-items:start;
    text-align:left;
  }
  .chain-card{ margin-top:0; }

  .dev-cards{ grid-template-columns:1fr; }
}

@media (max-width: 760px){
  .hero{ min-height:100svh; }
  .hero-inner{ padding-top:150px; padding-bottom:80px; }
  /* narrow crop: clouds behind the copy, subject right of center */
  .hero-media img{ object-position:62% 24%; }
  .hero-cta .btn{ flex:1 1 auto; justify-content:center; }
  .hero-label{ font-size:.72rem; padding:7px 13px; }
  .hide-m{ display:none; }

  .transform-stage{ height:480px; }
  .fragment{ font-size:.72rem; padding:7px 12px; }
  .eco-heart{ width:56px; height:56px; }
  .eco-ring{ width:100px; height:100px; }
  .eco-ring-2{ width:150px; height:150px; }
  .eco-label{ top:calc(100% + 44px); font-size:.62rem; }
  .stage-tag{ font-size:.6rem; }
  .stage-tag-before{ left:14px; bottom:14px; }
  .stage-tag-after{ right:14px; top:14px; }

  .ai-path{ margin:-30px 10px 0; padding:20px 14px 16px; }
  .ai-path-line{ left:24px; right:24px; }
  .ai-steps{ font-size:.62rem; }

  .compliance-strip{ gap:10px; }
  .comp-item{ flex-basis:150px; padding:16px 16px; }

  .term-title{ display:none; }
  .term-body{ font-size:.72rem; padding:16px 14px 20px; }
  .t-tool code{ font-size:.7rem; }
  .t-note{ flex-basis:100%; margin-left:24px; text-align:left; }
  .dev-step{ padding-left:52px; }
  .dev-num{ width:36px; height:36px; border-radius:10px; }
  .dev-code{ font-size:.66rem; }

  .cta-actions .btn{ flex:1 1 100%; }
}

@media (max-width: 560px){
  .caps-grid{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:1fr; }
  .tile-lg{ grid-column:auto; }
  .proof-strip{ grid-template-columns:1fr; }
  .proof-item + .proof-item{ border-left:0; border-top:1px solid var(--line); }
  .scale-metrics{ grid-template-columns:1fr 1fr; gap:34px 16px; }
  .footer-bottom{ justify-content:center; text-align:center; }
}

/* ------------------------------------------------------------
   20b. Touch devices — hover-gated content must be visible
   ------------------------------------------------------------ */
@media (hover: none){
  .industry-tags{ opacity:1; translate:0 0; }
  .cap-more{ opacity:1; translate:0 0; }
  .proof-item small,
  .chain-card small{ max-height:4em; opacity:1; margin-top:8px; }
  .comp-item small{ max-height:4em; opacity:1; margin-top:8px; }
}

/* ------------------------------------------------------------
   21. Reduced motion
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0s !important;
  }
  html.js .reveal{ opacity:1; transform:none; }
  .transform-stage .fragment{ transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))); }
  .transform-lines path{ stroke-dashoffset:0; }
  .chain-line{ opacity:1; }
  .chain-dot{ border-color:rgba(255,255,255,.85); }
  .chain-dot::after{ opacity:1; }
  .chain-pulse, .ai-path-pulse{ display:none; }
  .ai-step-dot::after{ opacity:1; }
  /* agent terminal rests in its completed state */
  .term-status i{ animation:none; opacity:1; }
  .t-caret{ animation:none; opacity:1; }
  /* line-draw scenes must rest in their drawn state */
  .scene-signature svg path,
  .scene-payments svg .pay-check{
    stroke-dashoffset:0;
    animation:none;
  }
}