/* ════════════════════════════════════════════════════════════════
   CODAURA — v3
   A layered, lit, node-based visual system built from the logo mark.
   Near-black canvas · aurora lighting · gradient-hairline glass ·
   every section a different composition.
   ════════════════════════════════════════════════════════════════ */

/* ── Tokens ────────────────────────────────────────────────────── */
:root{
  --void:      #06070C;
  --deep:      #0A0C14;
  --panel:     rgba(255,255,255,.028);
  --panel-hi:  rgba(255,255,255,.055);
  --glass:     rgba(10,12,20,.72);
  --line:      rgba(255,255,255,.08);
  --line-soft: rgba(255,255,255,.045);

  --text:      #EDF0F7;
  --muted:     #8E97AD;
  --faint:     #5A6379;

  --accent:    #FF6A00;
  --ember:     #FE3D04;
  --amber:     #FFB25E;
  --violet:    #8B5CF6;
  --azure:     #4C8DFF;
  --mint:      #3DDC84;

  --aura: linear-gradient(100deg,#FFB25E 0%,#FF6A00 32%,#B44DFF 70%,#4C8DFF 100%);
  --aura-btn: linear-gradient(135deg,#FF8A3D,#FF6A00 52%,#F04E1C);

  --sh-lg: 0 40px 90px -24px rgba(0,0,0,.7);
  --sh-md: 0 20px 50px -18px rgba(0,0,0,.6);
  --glow-a: 0 0 0 1px rgba(255,106,0,.3), 0 20px 60px -14px rgba(255,106,0,.42);

  --r-xl: 28px;
  --r-lg: 22px;
  --r-md: 14px;

  --f-display:'Syne',sans-serif;
  --f-body:'Inter',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;

  --nav-h: 74px;
  --ease: cubic-bezier(.22,.8,.24,1);
  --ease-io: cubic-bezier(.65,0,.35,1);
}

[data-theme="light"]{
  --void:      #F4F5FA;
  --deep:      #EAECF4;
  --panel:     rgba(255,255,255,.9);
  --panel-hi:  #FFFFFF;
  --glass:     rgba(255,255,255,.82);
  --line:      rgba(9,11,20,.1);
  --line-soft: rgba(9,11,20,.06);

  --text:      #090B14;
  --muted:     #515A70;
  --faint:     #858EA3;

  --sh-lg: 0 40px 80px -28px rgba(20,28,60,.24);
  --sh-md: 0 20px 44px -18px rgba(20,28,60,.16);
}

/* ── Base ──────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--f-body);
  background:var(--void);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .5s var(--ease),color .5s var(--ease);
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
::selection{background:rgba(255,106,0,.34);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:5px}

h1,h2,h3,h4{font-family:var(--f-display);line-height:1.08;letter-spacing:-.02em;font-weight:700}
h2{font-size:clamp(1.9rem,3.7vw,3rem)}
h3{font-size:1.22rem}

.container{width:min(1240px,92%);margin-inline:auto}
.section{padding:clamp(66px,7.4vw,110px) 0;position:relative}

.grad-text{
  background:var(--aura);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;font-style:normal;
}
.txt-link{color:var(--accent);font-weight:600;border-bottom:1px solid rgba(255,106,0,.4)}
.txt-link:hover{border-bottom-color:var(--accent)}
.desktop-only{display:inline-flex}
.mobile-only{display:none!important}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.76rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin-bottom:16px;
}
.eyebrow::before{content:"";width:20px;height:1.5px;background:var(--accent);border-radius:2px}

/* ── The glass panel: 1px gradient hairline + inner lift ───────── */
.glass-panel{
  position:relative;
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012)),
    var(--glass);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-md), inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
}
.glass-panel::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(150deg,rgba(255,255,255,.22),rgba(255,255,255,.02) 38%,rgba(255,106,0,.18) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;z-index:1;
}
[data-theme="light"] .glass-panel{
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.9));
  box-shadow:var(--sh-md);
}
[data-theme="light"] .glass-panel::before{
  background:linear-gradient(150deg,rgba(9,11,20,.12),rgba(9,11,20,.02) 40%,rgba(255,106,0,.18));
}

/* cursor spotlight on panels */
.glass-panel::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%),rgba(255,106,0,.09),transparent 62%);
  opacity:0;transition:opacity .45s;z-index:0;
}
.glass-panel:hover::after{opacity:1}

/* ── Buttons ───────────────────────────────────────────────────── */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 28px;border-radius:100px;
  font-weight:600;font-size:.94rem;line-height:1;white-space:nowrap;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s,border-color .35s,color .35s;
  will-change:transform;z-index:1;
}
.btn svg{width:17px;height:17px;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-primary{background:var(--aura-btn);color:#fff;box-shadow:0 12px 34px -12px rgba(255,106,0,.6)}
.btn-primary:hover{box-shadow:var(--glow-a)}
.btn-ghost{border:1px solid var(--line);color:var(--text);background:var(--panel);backdrop-filter:blur(8px)}
.btn-ghost:hover{border-color:rgba(255,106,0,.5);color:var(--accent)}
.btn-lg{padding:17px 34px;font-size:1rem}
.btn-sm{padding:10px 20px;font-size:.84rem}
.btn-block{width:100%}

.glow-pulse::before{
  content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:-1;
  background:var(--aura-btn);filter:blur(18px);
  animation:glowPulse 3.6s ease-in-out infinite;
}
@keyframes glowPulse{0%,100%{opacity:.26;transform:scale(.95)}50%{opacity:.58;transform:scale(1.05)}}

.pulse-dot{
  width:8px;height:8px;border-radius:50%;background:var(--mint);display:inline-block;
  box-shadow:0 0 0 0 rgba(61,220,132,.6);animation:pulse 2s infinite;flex-shrink:0;
}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(61,220,132,.55)}70%{box-shadow:0 0 0 9px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}

.chip-sm{
  font-size:.66rem;color:var(--muted);border:1px solid var(--line);
  padding:5px 11px;border-radius:100px;white-space:nowrap;
}
.chip-sm.live{color:var(--mint);border-color:rgba(61,220,132,.4)}

/* ── Loader ────────────────────────────────────────────────────── */
.loader{
  position:fixed;inset:0;z-index:1000;background:var(--void);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  transition:opacity .6s var(--ease),visibility .6s;
}
.loader.done{opacity:0;visibility:hidden}
.loader-mark{width:88px;height:88px}
.lm-links path{stroke-dasharray:120;stroke-dashoffset:120;animation:lmDraw .9s var(--ease) forwards}
.lm-links path:nth-child(2){animation-delay:.12s}
.lm-links path:nth-child(3){animation-delay:.24s}
@keyframes lmDraw{to{stroke-dashoffset:0}}
.lm-hub{transform-origin:70px 70px;transform:scale(0);animation:lmPop .5s .3s var(--ease) forwards}
.lm-sat{transform-origin:center;transform:scale(0);animation:lmPop .45s var(--ease) forwards}
.loader-mark .lm-sat:nth-of-type(1){animation-delay:.42s}
.loader-mark .lm-sat:nth-of-type(2){animation-delay:.52s}
.loader-mark .lm-sat:nth-of-type(3){animation-delay:.62s}
@keyframes lmPop{to{transform:scale(1)}}
.loader-bar{width:170px;height:2px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
.loader-bar i{display:block;height:100%;width:0;background:var(--aura);border-radius:2px}

/* ── Atmosphere: aurora + mesh + grain ─────────────────────────── */
.atmos{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.aurora{position:absolute;border-radius:50%;filter:blur(100px);will-change:transform}
.a1{width:620px;height:620px;top:-200px;right:-140px;background:radial-gradient(circle at 40% 40%,rgba(255,106,0,.42),transparent 66%)}
.a2{width:560px;height:560px;top:38%;left:-220px;background:radial-gradient(circle at 60% 40%,rgba(139,92,246,.34),transparent 66%)}
.a3{width:520px;height:520px;bottom:-180px;right:14%;background:radial-gradient(circle at 40% 60%,rgba(76,141,255,.28),transparent 66%)}
[data-theme="light"] .aurora{opacity:.4}
.mesh{
  position:absolute;inset:0;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000,transparent 75%);
          mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000,transparent 75%);
}
[data-theme="light"] .mesh{background-image:linear-gradient(rgba(9,11,20,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(9,11,20,.045) 1px,transparent 1px)}
.grain{
  position:absolute;inset:0;opacity:.42;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='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="light"] .grain{opacity:.2}

#cursorGlow{
  position:fixed;top:0;left:0;z-index:-1;pointer-events:none;
  width:600px;height:600px;margin:-300px 0 0 -300px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,106,0,.06),transparent 62%);
  opacity:0;transition:opacity .6s;
}
body.glow-on #cursorGlow{opacity:1}

/* ── Nav ───────────────────────────────────────────────────────── */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  transition:background .4s,border-color .4s,box-shadow .4s;
  border-bottom:1px solid transparent;
}
.site-nav.scrolled{
  background:var(--glass);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom-color:var(--line-soft);
}
.nav-inner{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand-img{height:38px;width:auto}
[data-theme="dark"] .only-light{display:none}
[data-theme="light"] .only-dark{display:none}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-size:.9rem;font-weight:500;color:var(--muted);transition:color .25s;position:relative}
.nav-links a:hover{color:var(--text)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--accent);border-radius:2px;transition:width .3s var(--ease)}
.nav-links a:hover::after{width:100%}
.soon-sup{font-size:.54rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);vertical-align:super}
.nav-actions{display:flex;align-items:center;gap:13px}
.theme-toggle{
  width:39px;height:39px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--muted);
  transition:color .3s,border-color .3s,transform .5s var(--ease);
}
.theme-toggle:hover{color:var(--accent);border-color:rgba(255,106,0,.5);transform:rotate(40deg)}
.theme-toggle svg{width:17px;height:17px}
[data-theme="dark"] .ico-moon{display:none}
[data-theme="light"] .ico-sun{display:none}
.burger{display:none;width:42px;height:42px;border-radius:10px;border:1px solid var(--line);position:relative;z-index:2}
.burger span{position:absolute;left:11px;right:11px;height:2px;background:var(--text);border-radius:2px;transition:.35s var(--ease)}
.burger span:first-child{top:16px}
.burger span:last-child{bottom:16px}
.burger.open span:first-child{top:20px;transform:rotate(45deg)}
.burger.open span:last-child{bottom:20px;transform:rotate(-45deg)}

/* ══════════════ HERO ══════════════ */
.hero{position:relative;padding:calc(var(--nav-h) + clamp(40px,6vh,72px)) 0 0}
.hero-stage{position:relative}
.constellation{
  position:absolute;inset:-8% -6% auto -6%;height:118%;width:112%;
  opacity:.5;pointer-events:none;z-index:0;
}
.cn-wires path{stroke-dasharray:6 8;animation:cnFlow 22s linear infinite}
@keyframes cnFlow{to{stroke-dashoffset:-280}}
.cn-dots circle{animation:cnPulse 3.4s ease-in-out infinite}
.cn-dots circle:nth-child(2){animation-delay:.8s}
.cn-dots circle:nth-child(3){animation-delay:1.6s}
.cn-dots circle:nth-child(4){animation-delay:2.2s}
@keyframes cnPulse{0%,100%{opacity:.35}50%{opacity:1}}

.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center}
.hero-badge{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 17px;border-radius:100px;
  border:1px solid var(--line);background:var(--panel);backdrop-filter:blur(10px);
  font-size:.8rem;font-weight:500;color:var(--muted);margin-bottom:22px;
}
.hero-title{font-size:clamp(2.1rem,3.6vw,3.15rem);font-weight:800;margin-bottom:20px;text-wrap:balance}
.hero-title .st-word{will-change:transform}
.hero-sub{color:var(--muted);font-size:1.06rem;max-width:35rem;margin-bottom:28px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:30px}

.hero-proof{display:flex;align-items:center;gap:22px;border-top:1px solid var(--line-soft);padding-top:22px}
.hp-item{display:flex;flex-direction:column;gap:1px}
.hp-item b{font-family:var(--f-display);font-size:1.5rem;font-weight:800;letter-spacing:-.02em;background:var(--aura);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hp-item span{font-size:.76rem;color:var(--muted)}
.hp-sep{width:1px;height:30px;background:var(--line-soft)}

/* hero visual */
.hero-visual{position:relative;min-height:460px;perspective:1400px}
.aura-halo{
  position:absolute;inset:6% 4%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,106,0,.24),rgba(139,92,246,.12) 45%,transparent 68%);
  filter:blur(50px);
}
.aura-orbit{position:absolute;inset:2% 6% auto;width:78%;margin-inline:auto;opacity:.7;animation:spin 68s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── SaaS dashboard preview ────────────────────────────────────── */
.dash{position:relative;z-index:2;border-radius:var(--r-lg);transform-style:preserve-3d}
.dash-top{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line-soft);position:relative;z-index:2}
.dash-dots{display:flex;gap:6px}
.dash-dots i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.dash-dots i:nth-child(1){background:#FF5F57}.dash-dots i:nth-child(2){background:#FEBC2E}.dash-dots i:nth-child(3){background:#28C840}
.dash-url{
  display:inline-flex;align-items:center;gap:6px;
  margin-left:6px;font-size:.7rem;color:var(--faint);font-family:var(--f-mono);
  background:var(--panel);border:1px solid var(--line-soft);padding:4px 12px;border-radius:100px;
}
.dash-url svg{width:10px;height:10px}
.dash-body{display:flex;position:relative;z-index:2}
.dash-rail{
  width:54px;border-right:1px solid var(--line-soft);
  display:flex;flex-direction:column;align-items:center;gap:14px;padding:16px 0;
}
.rail-mark{width:26px;height:26px}
.dash-rail i{width:20px;height:20px;border-radius:6px;background:var(--panel-hi)}
.dash-rail i.on{background:rgba(255,106,0,.24);box-shadow:inset 0 0 0 1px rgba(255,106,0,.5)}
.dash-main{flex:1;padding:18px 20px;min-width:0}
.dash-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.dash-head small{color:var(--muted);font-size:.7rem;display:block}
.dash-head strong{font-family:var(--f-display);font-size:1.4rem;font-weight:800;letter-spacing:-.02em;display:block;line-height:1.2}
.delta{font-size:.68rem;font-style:normal;font-weight:600}
.delta.up{color:var(--mint)}
.dash-chart{width:100%;height:110px}
.chart-line{stroke-dasharray:760;stroke-dashoffset:760;animation:draw 2.4s .9s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.chart-dot{opacity:0;animation:fadeIn .4s 3.1s forwards}
@keyframes fadeIn{to{opacity:1}}
.dash-cells{display:flex;gap:10px;margin-top:14px}
.dash-cells>div{flex:1;background:var(--panel);border:1px solid var(--line-soft);border-radius:11px;padding:9px 11px;min-width:0}
.dash-cells small{font-size:.62rem;color:var(--muted);display:block}
.dash-cells b{font-size:.86rem;font-weight:700}
.spark{display:block;height:2px;border-radius:2px;margin-top:5px;background:var(--aura);opacity:.6}
.spark.flat{background:var(--line)}

/* floating cards */
.fcard{
  position:absolute;z-index:3;display:flex;align-items:center;gap:11px;
  padding:12px 16px;border-radius:15px;will-change:transform;
  animation:bob 6.5s ease-in-out infinite;
}
.fc-speed{animation-delay:1.3s}
.fc-lead{animation-delay:2.6s}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -11px}}
.fcard b{display:block;font-size:.8rem;font-weight:600;line-height:1.25;white-space:nowrap}
.fcard small{font-size:.68rem;color:var(--muted);white-space:nowrap}
.fc-ico{width:32px;height:32px;border-radius:9px;flex-shrink:0;display:grid;place-items:center}
.fc-ico.ok{background:rgba(61,220,132,.16);color:var(--mint)}
.fc-ico.ok svg{width:15px;height:15px}
.fc-ico.dot{background:rgba(139,92,246,.18);position:relative}
.fc-ico.dot::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--violet)}
.fc-deploy{top:-22px;right:2%}
/* sits just off the dash's left edge so it overlaps the rail, never a data cell */
.fc-speed{bottom:26%;left:-74px}
.fc-lead{bottom:-26px;right:8%}

/* gauge */
.gauge{position:relative;width:34px;height:34px;flex-shrink:0;display:grid;place-items:center}
.gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.gauge circle{fill:none;stroke-width:3.2}
.g-bg{stroke:rgba(255,255,255,.1)}
.g-fg{stroke:var(--mint);stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:calc(100 - var(--v));transition:stroke-dashoffset 1.2s var(--ease)}
.gauge b{position:absolute;font-size:.62rem;font-weight:700}
.gauge.lg{width:62px;height:62px}
.gauge.lg b{font-size:.9rem;font-family:var(--f-display)}
.gauge.lg small{position:absolute;bottom:-17px;font-size:.6rem;color:var(--muted)}

.hero-fade{height:70px;background:linear-gradient(to bottom,transparent,var(--void))}

/* ── Marquee ───────────────────────────────────────────────────── */
.marquee{overflow:hidden;position:relative;padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee-track{display:flex;width:max-content;animation:scrollX 38s linear infinite}
.marquee .dup{display:contents}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scrollX{to{transform:translateX(-50%)}}
.logos{padding:20px 0 40px}
.logos-label{text-align:center;font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;color:var(--faint);margin-bottom:20px}
.logo-item{font-family:var(--f-display);font-weight:700;font-size:1.2rem;color:var(--muted);opacity:.45;padding:6px 38px;white-space:nowrap;transition:opacity .3s,color .3s;display:inline-block}
.logo-item:hover{opacity:1;color:var(--text)}

/* ══════════════ STORY (sticky storytelling) ══════════════ */
.story{padding:clamp(60px,7vw,100px) 0}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:start}
.story-h{margin-bottom:38px;font-size:clamp(1.8rem,3.2vw,2.7rem)}
.story-beats{display:flex;flex-direction:column;gap:clamp(30px,5vh,56px);margin-bottom:38px}
.beat{
  position:relative;padding:20px 22px 20px 26px;border-radius:var(--r-md);
  border-left:2px solid var(--line);
  opacity:.34;transition:opacity .5s var(--ease),background .5s,border-color .5s;
}
.beat.on{opacity:1;background:var(--panel);border-left-color:var(--accent)}
.beat-no{font-family:var(--f-display);font-weight:800;font-size:.74rem;color:var(--accent);letter-spacing:.1em;display:block;margin-bottom:7px}
.beat h3{font-size:1.14rem;margin-bottom:7px}
.beat p{color:var(--muted);font-size:.92rem;max-width:44ch}

.story-stage{position:sticky;top:calc(var(--nav-h) + 40px);height:min(560px,70vh)}
.stage-inner{
  position:relative;height:100%;border-radius:var(--r-xl);
  display:grid;place-items:center;padding:28px;
}
.stage-glow{
  position:absolute;inset:12%;border-radius:50%;filter:blur(60px);
  background:radial-gradient(circle,rgba(255,106,0,.18),transparent 66%);
  transition:background .7s var(--ease);
}
.story-stage[data-beat="1"] .stage-glow{background:radial-gradient(circle,rgba(61,220,132,.16),transparent 66%)}
.story-stage[data-beat="2"] .stage-glow{background:radial-gradient(circle,rgba(76,141,255,.18),transparent 66%)}

.scene{
  position:absolute;inset:28px;display:flex;flex-direction:column;justify-content:center;gap:14px;
  opacity:0;visibility:hidden;transform:translateY(18px) scale(.97);
  transition:opacity .5s var(--ease),transform .6s var(--ease),visibility .5s;
  z-index:2;
}
.scene.is-live{opacity:1;visibility:visible;transform:none}
.scene-tag{
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
  font-family:var(--f-mono);
}
.scene-note{font-size:.8rem;font-weight:600;text-align:center;padding:9px;border-radius:9px}
.scene-note.bad{color:#FF8892;background:rgba(255,71,87,.1);border:1px solid rgba(255,71,87,.28)}
.scene-note.good{color:var(--mint);background:rgba(61,220,132,.1);border:1px solid rgba(61,220,132,.3)}

/* scene 0 · invoice */
.invoice{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r-md);padding:16px 18px;font-family:var(--f-mono)}
.inv-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:.76rem;color:var(--muted);border-bottom:1px dashed var(--line-soft)}
.inv-row b{color:var(--text);font-weight:500}
.inv-row.warn{color:#FF8892}
.inv-row.warn b{color:#FF8892}
.inv-total{display:flex;justify-content:space-between;gap:12px;padding-top:12px;margin-top:6px;font-size:.84rem;font-weight:600}
.inv-total .bad{color:#FF8892;font-family:var(--f-display);font-size:1.1rem}

/* scene 1 · quote */
.quote-card{background:var(--panel);border:1px solid rgba(255,106,0,.28);border-radius:var(--r-md);padding:20px}
.qc-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.qc-mark{width:34px;height:34px;flex-shrink:0}
.qc-head b{display:block;font-size:.92rem}
.qc-head small{color:var(--muted);font-size:.74rem}
.qc-amount{font-family:var(--f-display);font-size:2.5rem;font-weight:800;letter-spacing:-.03em;background:var(--aura);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1.1}
.qc-amount em{display:block;font-size:.72rem;font-style:normal;color:var(--muted);-webkit-text-fill-color:var(--muted);font-family:var(--f-body);font-weight:500;margin-top:3px}
.qc-list{display:flex;flex-direction:column;gap:7px;margin:16px 0}
.qc-list li{font-size:.82rem;color:var(--muted);padding-left:20px;position:relative}
.qc-list li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700;font-size:.72rem}
.qc-lock{display:flex;align-items:center;gap:8px;font-size:.74rem;color:var(--mint);background:rgba(61,220,132,.08);border:1px solid rgba(61,220,132,.24);border-radius:8px;padding:8px 11px}

/* scene 2 · handover */
.handover{display:flex;flex-direction:column;gap:8px}
.ho-row{display:flex;align-items:center;gap:11px;background:var(--panel);border:1px solid var(--line-soft);border-radius:11px;padding:11px 13px}
.ho-ico{width:26px;height:26px;border-radius:7px;background:rgba(76,141,255,.16);color:var(--azure);display:grid;place-items:center;font-size:.7rem;flex-shrink:0}
.ho-row div{flex:1;min-width:0}
.ho-row b{display:block;font-size:.8rem;font-family:var(--f-mono);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ho-row small{font-size:.68rem;color:var(--muted)}
.ho-ok{color:var(--mint);font-weight:700;font-size:.85rem}
.ho-deploy{display:flex;align-items:center;gap:9px;margin-top:5px;padding:10px 13px;border-radius:10px;background:rgba(61,220,132,.08);border:1px solid rgba(61,220,132,.24);font-size:.76rem;color:var(--mint);font-family:var(--f-mono)}
.ho-deploy i{width:7px;height:7px;border-radius:50%;background:var(--mint);animation:pulse 2s infinite}

/* ══════════════ STATS BENTO ══════════════ */
/* clean 4-col bento: hero(2×2) + 98%/14 + 3.2×(2 wide) + full-width banner — no gaps */
.bento-stats{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(150px,auto);gap:16px}
.bs{padding:26px;display:flex;flex-direction:column;gap:6px;position:relative}
.bs-hero{grid-column:span 2;grid-row:span 2;justify-content:flex-end}
.bs-wide{grid-column:span 2}
.bs-banner{grid-column:span 4;flex-direction:row;align-items:center;justify-content:space-between;gap:32px;padding:28px 32px}
.bs-glow{position:absolute;top:-30%;right:-20%;width:70%;height:80%;border-radius:50%;filter:blur(60px);background:radial-gradient(circle,rgba(255,106,0,.22),transparent 68%)}

.bb-glow{position:absolute;left:-10%;top:-40%;width:50%;height:120%;border-radius:50%;filter:blur(60px);background:radial-gradient(circle,rgba(255,106,0,.2),transparent 66%)}
.bb-lead{display:flex;align-items:center;gap:22px;position:relative;z-index:1;flex-shrink:0}
.bb-lead h3{font-size:1.05rem}
.bb-lead p{font-size:.83rem;color:var(--muted);max-width:36ch;margin-top:3px}
.bb-track{display:flex;align-items:flex-end;gap:clamp(8px,1.6vw,20px);position:relative;z-index:1}
.bb-day{display:flex;flex-direction:column;align-items:center;gap:7px}
.bb-day i{width:12px;height:var(--bh,40px);border-radius:4px;background:var(--panel-hi);transition:height .4s}
.bb-day:nth-child(1) i{--bh:26px}.bb-day:nth-child(2) i{--bh:34px}.bb-day:nth-child(3) i{--bh:44px}
.bb-day:nth-child(4) i{--bh:52px}.bb-day:nth-child(5) i{--bh:62px}.bb-day:nth-child(6) i{--bh:70px}
.bb-day small{font-size:.6rem;color:var(--faint)}
.bb-day.fin i{height:80px;background:var(--aura-btn);box-shadow:0 0 16px rgba(255,106,0,.6)}
.bb-day.fin small{color:var(--accent);font-weight:600}
.bs-num{
  font-family:var(--f-display);font-weight:800;letter-spacing:-.03em;line-height:1;
  font-size:clamp(2rem,3vw,2.8rem);
  background:var(--aura);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  position:relative;z-index:1;
}
.bs-hero .bs-num{font-size:clamp(3rem,5vw,4.4rem)}
.bs h3{font-size:1rem;position:relative;z-index:1}
.bs p{font-size:.83rem;color:var(--muted);position:relative;z-index:1}
.bs-hero p{max-width:40ch;font-size:.9rem}
.bs-wave{position:absolute;left:0;right:0;bottom:0;height:56px;width:100%;opacity:.5}

/* project mix — fills the hero cell and shows what the 120 is made of */
.bs-mix{display:flex;flex-direction:column;gap:9px;margin-bottom:auto;position:relative;z-index:1}
.mix-row{display:grid;grid-template-columns:132px 1fr 22px;align-items:center;gap:11px;font-size:.72rem;color:var(--muted)}
.mix-row i{height:6px;border-radius:3px;background:var(--panel-hi);position:relative;overflow:hidden}
.mix-row i::after{content:"";position:absolute;inset:0;width:var(--w);border-radius:3px;background:var(--aura);opacity:.85}
.mix-row b{font-size:.74rem;color:var(--text);text-align:right;font-variant-numeric:tabular-nums}
.bs-split{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;height:100%}
.bs-bars{display:flex;align-items:flex-end;gap:5px;height:74px}
.bs-bars i{width:11px;height:var(--h);border-radius:3px;background:var(--aura);opacity:.75;transform-origin:bottom}

/* ══════════════ SERVICES (pinned horizontal) ══════════════ */
.svc{padding:clamp(66px,7.4vw,110px) 0 0;position:relative}
.svc-head{max-width:660px;margin-bottom:38px}
.svc-head p{color:var(--muted);margin-top:14px}
.svc-pin{overflow-x:clip;position:relative;padding-bottom:60px}
.svc-viewport{overflow-x:auto;scrollbar-width:none}
.svc-viewport::-webkit-scrollbar{display:none}
.svc-viewport.pinned{overflow:visible}
.svc-track{display:flex;gap:20px;width:max-content;padding:6px max(calc((100vw - 1240px)/2),4vw) 20px}

.svc-panel{
  width:min(760px,88vw);flex-shrink:0;
  display:grid;grid-template-columns:.86fr 1.14fr;gap:24px;
  padding:30px;border-radius:var(--r-xl);align-items:center;
}
.sp-copy{position:relative;z-index:2}
.sp-no{font-family:var(--f-display);font-weight:800;font-size:.76rem;color:var(--accent);letter-spacing:.12em;display:block;margin-bottom:10px}
.sp-copy h3{font-size:1.42rem;margin-bottom:10px}
.sp-copy p{color:var(--muted);font-size:.9rem;margin-bottom:14px}
.sp-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.sp-tags li{font-size:.68rem;color:var(--muted);border:1px solid var(--line);border-radius:100px;padding:3px 10px}
.sp-cta{font-size:.86rem;font-weight:600;color:var(--accent);display:inline-flex;align-items:center;gap:7px}
.sp-cta i{font-style:normal;transition:transform .3s var(--ease)}
.sp-cta:hover i{transform:translateX(5px)}
.sp-art{position:relative;z-index:2;min-width:0}

/* — service mockups — */
.code-mock{background:var(--deep);border:1px solid var(--line-soft);border-radius:var(--r-md);overflow:hidden;font-family:var(--f-mono)}
.cm-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--line-soft)}
.cm-bar i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.16)}
.cm-bar span{margin-left:6px;font-size:.64rem;color:var(--faint)}
.cm-body{padding:12px 14px;font-size:.66rem;line-height:1.85;overflow-x:auto}
.cm-body .l{display:block;color:#C8D2E8;white-space:pre}
.cm-body .c1{color:#FF6A00;font-style:normal}
.cm-body .c2{color:#4C8DFF;font-style:normal}
.cm-body .c3{color:#FFB25E;font-style:normal}
.cm-body .c4{color:#3DDC84;font-style:normal}
.cm-run{padding:9px 14px;border-top:1px solid var(--line-soft);font-size:.64rem;color:var(--muted)}
.cm-run .ok{color:var(--mint)}

.shop-mock{position:relative;background:var(--deep);border:1px solid var(--line-soft);border-radius:var(--r-md);padding:16px;display:flex;gap:14px}
.sm-product{width:42%;aspect-ratio:3/4;border-radius:10px;background:linear-gradient(150deg,#2A2118,#6B4A2E);flex-shrink:0}
.sm-info{flex:1;display:flex;flex-direction:column;gap:7px;min-width:0}
.sm-brand{font-size:.56rem;letter-spacing:.3em;color:var(--faint)}
.sm-info b{font-size:.92rem;font-family:var(--f-display)}
.sm-price{font-size:.84rem;color:var(--text);font-weight:600}
.sm-price s{color:var(--faint);font-weight:400;font-size:.72rem;margin-left:5px}
.sm-swatch{display:flex;gap:5px}
.sm-swatch i{width:15px;height:15px;border-radius:50%;background:#3A2E22;border:1px solid var(--line)}
.sm-swatch i.on{box-shadow:0 0 0 2px var(--accent)}
.sm-btn{margin-top:auto;text-align:center;font-size:.7rem;background:var(--aura-btn);color:#fff;border-radius:8px;padding:9px;font-weight:600}
.sm-toast{position:absolute;top:-10px;right:-8px;background:var(--glass);border:1px solid rgba(61,220,132,.4);backdrop-filter:blur(10px);border-radius:100px;padding:6px 12px;font-size:.66rem;color:var(--muted);box-shadow:var(--sh-md)}
.sm-toast b{color:var(--mint)}

.wp-mock{background:var(--deep);border:1px solid var(--line-soft);border-radius:var(--r-md);overflow:hidden}
.wp-toolbar{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line-soft);font-size:.66rem;color:var(--muted)}
.wp-save{font-style:normal;color:var(--mint);font-size:.62rem}
.wp-canvas{padding:12px;display:flex;flex-direction:column;gap:9px}
.wp-block{position:relative;border:1px dashed transparent;border-radius:8px;padding:9px;transition:border-color .3s,background .3s}
.wp-block.editable{border-color:rgba(255,106,0,.4);background:rgba(255,106,0,.045)}
.wp-handle{position:absolute;left:-3px;top:9px;font-size:.6rem;color:var(--faint)}
.wp-h{height:11px;width:56%;border-radius:3px;background:rgba(255,255,255,.2);margin-bottom:7px}
.wp-p{height:6px;border-radius:3px;background:rgba(255,255,255,.08);margin-bottom:5px}
.wp-p.short{width:70%}
.wp-cols{display:flex;gap:7px}
.wp-cols i{flex:1;height:38px;border-radius:6px;background:rgba(255,255,255,.06)}
.wp-vitals{padding:9px 12px;border-top:1px solid var(--line-soft);font-size:.64rem;color:var(--muted)}
.wp-vitals .ok{color:var(--mint)}

.saas-mock{background:var(--deep);border:1px solid var(--line-soft);border-radius:var(--r-md);padding:14px}
.ss-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.ss-head b{font-size:.86rem}
.ss-plans{display:flex;flex-direction:column;gap:9px}
.ss-plan{display:grid;grid-template-columns:64px 44px 1fr;align-items:center;gap:9px;font-size:.72rem;color:var(--muted)}
.ss-plan b{color:var(--text);font-size:.76rem}
.ss-plan i{height:6px;border-radius:3px;background:var(--panel-hi);position:relative;overflow:hidden}
.ss-plan i::after{content:"";position:absolute;inset:0;width:var(--w);background:var(--aura);border-radius:3px}
.ss-plan.on i::after{background:var(--aura-btn)}
.ss-event{margin-top:12px;display:flex;align-items:center;gap:8px;font-size:.68rem;color:var(--mint);background:rgba(61,220,132,.08);border:1px solid rgba(61,220,132,.22);border-radius:8px;padding:8px 10px}

.phone-mock{position:relative;width:min(190px,60%);margin-inline:auto;aspect-ratio:9/17.5;background:var(--deep);border:1px solid var(--line);border-radius:24px;padding:22px 12px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:var(--sh-md)}
.pm-notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:34%;height:6px;border-radius:100px;background:rgba(255,255,255,.14)}
.pm-screen{width:100%;display:flex;flex-direction:column;align-items:center;gap:7px}
.pm-screen small{font-size:.58rem;color:var(--muted)}
.pm-screen b{font-size:.8rem;font-family:var(--f-display)}
.pm-ring{position:relative;width:58%;display:grid;place-items:center;margin:4px 0}
.pm-ring svg{width:100%;transform:rotate(-90deg)}
.pm-ring circle{fill:none;stroke-width:3}
.pm-ring .g-fg{stroke:url(#auraGrad);stroke-dasharray:100 100;stroke-dashoffset:14}
.pm-ring span{position:absolute;font-size:.72rem;font-weight:700;font-family:var(--f-display)}
.pm-rows{width:100%;display:flex;flex-direction:column;gap:5px;margin-top:auto}
.pm-rows i{height:11px;border-radius:5px;background:rgba(255,255,255,.06)}
.pm-stores{display:flex;gap:6px;margin-top:6px}
.pm-stores span{font-size:.52rem;color:var(--muted);border:1px solid var(--line);border-radius:100px;padding:3px 7px;white-space:nowrap}

.brand-mock{background:var(--deep);border:1px solid var(--line-soft);border-radius:var(--r-md);padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center}
.bm-logo{grid-column:span 2;display:grid;place-items:center;padding:8px}
.bm-logo svg{width:56px;height:56px}
.bm-swatches{display:flex;gap:6px}
.bm-swatches i{flex:1;height:34px;border-radius:7px;background:var(--c)}
.bm-type{text-align:center}
.bm-type b{font-family:var(--f-display);font-size:1.5rem;display:block;line-height:1}
.bm-type small{font-size:.58rem;color:var(--muted)}
.bm-grid{grid-column:span 2;display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.bm-grid i{height:16px;border-radius:4px;background:rgba(255,255,255,.06)}

.flow-mock{position:relative;background:var(--deep);border:1px solid var(--line-soft);border-radius:var(--r-md);padding:12px}
.flow-svg{width:100%}
.fl-wires path{animation:wireDash 1.6s linear infinite}
@keyframes wireDash{to{stroke-dashoffset:-18}}
.fl-node rect{fill:rgba(255,255,255,.05);stroke:var(--line);stroke-width:1}
.fl-node text{fill:#C8D2E8;font-size:9px;text-anchor:middle;font-family:var(--f-body)}
.fl-node.hub rect{fill:rgba(255,106,0,.16);stroke:#FF6A00;stroke-width:1.4}
.fl-node.hub text{fill:#FF9A4D;font-weight:700;font-size:10px}
.flow-note{text-align:center;font-size:.7rem;color:var(--muted);margin-top:4px}
.flow-note b{color:var(--accent)}

.seo-mock{background:var(--deep);border:1px solid var(--line-soft);border-radius:var(--r-md);padding:16px}
.seo-scores{display:flex;justify-content:space-around;margin-bottom:26px}
.seo-rank{display:flex;flex-direction:column;gap:7px}
.sr-row{display:flex;justify-content:space-between;gap:10px;font-size:.68rem;color:var(--muted);font-family:var(--f-mono);background:var(--panel);border-radius:7px;padding:7px 10px}
.sr-row b{font-family:var(--f-body)}
.sr-row .up{color:var(--mint)}

.svc-progress{position:absolute;left:4vw;right:4vw;bottom:26px;height:2px;background:var(--line-soft);border-radius:2px}
.svc-progress i{display:block;height:100%;width:0;background:var(--aura);border-radius:2px}

/* ══════════════ SECURITY / OTP AS A SERVICE ══════════════ */
.sec{padding:clamp(66px,7.4vw,110px) 0;position:relative}
.sec-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(36px,5vw,72px);align-items:center}
.sec-copy h2{margin-bottom:16px;font-size:clamp(1.8rem,3.1vw,2.6rem)}
.sec-copy>p{color:var(--muted);font-size:1rem;margin-bottom:26px;max-width:48ch}
.sec-list{display:flex;flex-direction:column;gap:16px;margin-bottom:28px}
.sec-list li{display:flex;gap:14px;align-items:flex-start}
.sl-ico{
  width:40px;height:40px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;
  color:var(--accent);background:rgba(255,106,0,.1);border:1px solid rgba(255,106,0,.26);
}
.sl-ico svg{width:19px;height:19px}
.sec-list b{display:block;font-size:.95rem;margin-bottom:2px}
.sec-list small{font-size:.83rem;color:var(--muted);line-height:1.5;display:block}

.sec-visual{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px}
.hub-glow{
  position:absolute;inset:8% 12% 22%;border-radius:50%;filter:blur(60px);
  background:radial-gradient(circle,rgba(255,106,0,.2),rgba(139,92,246,.1) 50%,transparent 70%);
}
.hub{width:100%;position:relative;z-index:1}
.hub-wires path{stroke-dasharray:5 7;animation:hubFlow 3.4s linear infinite}
@keyframes hubFlow{to{stroke-dashoffset:-24}}
.hub-ring{fill:rgba(255,106,0,.06);stroke:rgba(255,106,0,.5);stroke-width:1.4}
.hub-core{animation:hubPulse 4s ease-in-out infinite;transform-origin:210px 180px}
@keyframes hubPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.hub-node rect{
  fill:rgba(12,15,24,.9);stroke:var(--line);stroke-width:1;
  transition:stroke .3s;
}
[data-theme="light"] .hub-node rect{fill:#fff}
.hub-node text{fill:#C8D2E8;font-size:11px;font-weight:500;text-anchor:middle;font-family:var(--f-body)}
[data-theme="light"] .hub-node text{fill:#39405A}
.hub-node:hover rect{stroke:rgba(255,106,0,.6)}
.sec-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;position:relative;z-index:1}
.sec-chips span{
  font-size:.7rem;font-weight:500;color:var(--muted);font-family:var(--f-mono);
  border:1px solid var(--line);border-radius:100px;padding:5px 13px;background:var(--panel);
}

/* ══════════════ CASE STUDIES ══════════════ */
.work{padding:clamp(66px,7.4vw,110px) 0}
.work-head{max-width:620px;margin-bottom:44px}
.cases{display:flex;flex-direction:column;gap:clamp(52px,7vw,96px)}
.case{
  width:min(1240px,92%);margin-inline:auto;
  display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,4vw,60px);align-items:center;
}
.case.rev .case-media{order:2}
.case.rev .case-copy{order:1}
.case-media{position:relative;min-height:280px;display:grid;place-items:center;perspective:1200px}
.cm-glow{position:absolute;inset:6%;border-radius:50%;filter:blur(60px);background:radial-gradient(circle,rgba(255,106,0,.22),transparent 68%)}
.cm-glow.violet{background:radial-gradient(circle,rgba(139,92,246,.22),transparent 68%)}
.cm-glow.azure{background:radial-gradient(circle,rgba(76,141,255,.22),transparent 68%)}
.case-dash{width:100%}
.case-tag{font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:10px}
.case-copy h3{font-size:clamp(1.6rem,2.6vw,2.1rem);margin-bottom:12px}
.case-copy>p{color:var(--muted);font-size:.98rem;margin-bottom:22px;max-width:46ch}
.case-metrics{display:flex;gap:26px;margin-bottom:24px;flex-wrap:wrap}
.case-metrics b{
  display:block;font-family:var(--f-display);font-size:1.5rem;font-weight:800;letter-spacing:-.02em;
  background:var(--aura);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.case-metrics span{font-size:.74rem;color:var(--muted)}

.store-mock{width:100%;padding:14px;border-radius:var(--r-lg);position:relative;z-index:2}
.stm-head{display:flex;justify-content:space-between;align-items:center;font-size:.6rem;letter-spacing:.24em;color:var(--muted);padding-bottom:10px;border-bottom:1px solid var(--line-soft)}
.stm-head i{font-style:normal;letter-spacing:.14em}
.stm-hero{height:96px;border-radius:10px;margin:12px 0;background:linear-gradient(140deg,#2A2118,#6B4A2E 60%,#8B5CF6)}
.stm-row{display:flex;gap:10px}
.stm-item{flex:1}
.stm-item i{display:block;height:56px;border-radius:8px;background:linear-gradient(150deg,#241D16,#4A3A2A);margin-bottom:6px}
.stm-item i.v2{background:linear-gradient(150deg,#2A1F2E,#5A3A50)}
.stm-item b{font-size:.72rem;display:block}
.stm-item small{font-size:.66rem;color:var(--muted)}
.stm-bar{display:flex;justify-content:space-between;margin-top:12px;padding-top:10px;border-top:1px solid var(--line-soft);font-size:.68rem;color:var(--muted)}
.stm-bar b{color:var(--mint)}

.auto-mock{width:100%;padding:14px;border-radius:var(--r-lg);position:relative;z-index:2}
.am-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.am-head b{font-size:.84rem}
.am-foot{display:flex;justify-content:space-between;margin-top:6px;padding-top:10px;border-top:1px solid var(--line-soft);font-size:.7rem;color:var(--muted)}
.am-foot b{color:var(--text);font-family:var(--f-display)}

/* ══════════════ PIPELINE ══════════════ */
.proc-head{max-width:560px;margin-bottom:44px}
.pipeline{position:relative}
.pl-rail{position:absolute;left:0;right:0;top:7px;height:2px;background:var(--line-soft);border-radius:2px}
.pl-rail i{display:block;height:100%;width:0;background:var(--aura);border-radius:2px}
.pl-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.pl-step{padding-top:30px;position:relative}
.pl-dot{
  position:absolute;top:0;left:0;width:16px;height:16px;border-radius:50%;
  background:var(--void);border:2px solid var(--line);transition:all .4s;
}
.pl-step.on .pl-dot{background:var(--accent);border-color:var(--accent);box-shadow:0 0 16px rgba(255,106,0,.7)}
.pl-step small{font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:6px}
.pl-step h3{font-size:1.06rem;margin-bottom:6px}
.pl-step p{font-size:.83rem;color:var(--muted)}

/* ══════════════ PRICING ══════════════ */
.price-head{max-width:660px;margin-bottom:34px}
.price-head>p{color:var(--muted);margin-top:14px}
.bill-toggle{
  position:relative;display:inline-flex;gap:2px;margin-top:22px;
  background:var(--panel);border:1px solid var(--line);border-radius:100px;padding:4px;
}
.bt-opt{padding:9px 20px;border-radius:100px;font-size:.84rem;font-weight:600;color:var(--muted);position:relative;z-index:1;transition:color .3s}
.bt-opt.on{color:#fff}
.bt-pill{position:absolute;top:4px;bottom:4px;border-radius:100px;background:var(--aura-btn);transition:left .4s var(--ease),width .4s var(--ease);z-index:0}
.bill-note{font-size:.8rem;color:var(--faint);margin-top:12px}

.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
.price{padding:28px 24px;display:flex;flex-direction:column;position:relative;border-radius:var(--r-lg)}
.price.popular{border-radius:var(--r-lg)}
.price.popular::before{background:linear-gradient(150deg,rgba(255,106,0,.6),rgba(255,255,255,.05) 45%,rgba(255,106,0,.35))}
.pr-glow{position:absolute;top:-40%;left:-10%;right:-10%;height:70%;border-radius:50%;filter:blur(60px);background:radial-gradient(circle,rgba(255,106,0,.22),transparent 68%)}
.pr-flag{
  position:absolute;top:14px;right:14px;z-index:2;
  background:var(--aura-btn);color:#fff;font-size:.62rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:100px;
}
.price h3{font-size:1.2rem;position:relative;z-index:1}
.pr-for{font-size:.78rem;color:var(--muted);margin:5px 0 16px;position:relative;z-index:1}
.pr-amt{display:flex;align-items:baseline;gap:7px;position:relative;z-index:1}
.pr-amt small{color:var(--muted);font-size:.76rem}
.pr-amt b{font-family:var(--f-display);font-size:1.85rem;font-weight:800;letter-spacing:-.03em}
.pr-care{font-size:.74rem;color:var(--accent);margin-top:6px;font-weight:600;position:relative;z-index:1}
.price ul{display:flex;flex-direction:column;gap:9px;margin:18px 0 24px;flex:1;position:relative;z-index:1}
.price li{font-size:.83rem;color:var(--text);padding-left:24px;position:relative}
.price li::before{content:"✓";position:absolute;left:0;top:0;color:var(--accent);font-weight:700;font-size:.76rem}
.li-muted{color:var(--muted)}
.li-gift::before{content:"★";color:var(--amber)}
.li-gift b{color:var(--amber);font-weight:600}
.price .btn{position:relative;z-index:1}

/* perks */
.perks{display:grid;grid-template-columns:1.25fr 1.25fr .9fr;gap:16px;margin-top:22px}
.perk{padding:28px;position:relative;border-radius:var(--r-lg);display:flex;flex-direction:column;gap:10px}
.pk-glow{position:absolute;bottom:-40%;right:-20%;width:80%;height:80%;border-radius:50%;filter:blur(60px);background:radial-gradient(circle,rgba(139,92,246,.2),transparent 68%)}
.pk-tag{
  font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--violet);border:1px solid rgba(139,92,246,.4);background:rgba(139,92,246,.1);
  padding:5px 11px;border-radius:100px;width:max-content;position:relative;z-index:1;
}
.pk-tag.gift{color:var(--amber);border-color:rgba(255,178,94,.4);background:rgba(255,178,94,.1)}
.perk h3{font-size:1.22rem;position:relative;z-index:1}
.perk>p{font-size:.88rem;color:var(--muted);position:relative;z-index:1}
.pk-why{font-size:.78rem;color:var(--faint);margin-top:auto;padding-top:10px;border-top:1px solid var(--line-soft);position:relative;z-index:1}

.ref-vis{display:flex;align-items:center;gap:10px;margin:8px 0;position:relative;z-index:1}
.rv-node{
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  border:1px solid var(--line);background:var(--panel);font-size:.68rem;font-weight:600;
}
.rv-node.you{border-color:rgba(255,106,0,.5);color:var(--accent)}
.rv-node.them{border-color:rgba(139,92,246,.5);color:var(--violet)}
.rv-wire{flex:1;min-width:30px;height:20px}
.rv-wire path{stroke-dasharray:4 4;animation:wireDash 1.4s linear infinite}
/* separated from the nodes so the figure never reads as one blob */
.rv-save{margin-left:16px;padding-left:16px;border-left:1px solid var(--line-soft);text-align:right;flex-shrink:0}
.rv-save b{display:block;font-family:var(--f-display);font-size:1.3rem;font-weight:800;color:var(--mint)}
.rv-save small{font-size:.66rem;color:var(--muted)}

/* referral stacking ladder — fills the card and shows the 30% ceiling */
.ref-stack{display:flex;flex-direction:column;gap:11px;margin-top:6px;position:relative;z-index:1}
.rs-step{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:11px}
.rs-step i{
  height:7px;border-radius:4px;background:var(--panel-hi);position:relative;overflow:hidden;
}
.rs-step i::after{
  content:"";position:absolute;inset:0;width:var(--w);border-radius:4px;
  background:linear-gradient(90deg,rgba(139,92,246,.8),var(--mint));
}
.rs-step b{font-family:var(--f-display);font-size:.9rem;font-weight:800;color:var(--muted);min-width:44px;text-align:right}
.rs-step small{font-size:.66rem;color:var(--faint);min-width:64px;text-align:right}
.rs-step.on b{color:var(--mint)}

.host-list{display:flex;flex-direction:column;gap:8px;margin:6px 0;position:relative;z-index:1}
.host-list li{display:flex;justify-content:space-between;gap:12px;font-size:.82rem;color:var(--muted);padding:8px 0;border-bottom:1px dashed var(--line-soft)}
.host-list b{color:var(--amber);white-space:nowrap;font-weight:600}
.host-list s{color:var(--faint);font-weight:400;font-size:.72rem}
.perk-quote{justify-content:center;align-items:flex-start;text-align:left}
.perk-quote .btn{margin-top:8px}

/* ══════════════ CLIENT WORDS ══════════════ */
.q-head{max-width:600px;margin-bottom:38px}
.stars{color:#FFB017;letter-spacing:2px;font-size:.8rem}

.q-wall{display:grid;grid-template-columns:.82fr 1.18fr;gap:18px;align-items:start}

/* rating panel */
.q-rating{padding:30px;position:relative;display:flex;flex-direction:column;gap:22px;border-radius:var(--r-xl);position:sticky;top:calc(var(--nav-h) + 34px)}
.qr-glow{position:absolute;top:-30%;left:-20%;width:80%;height:70%;border-radius:50%;filter:blur(60px);background:radial-gradient(circle,rgba(255,106,0,.2),transparent 68%)}
.qr-mark{position:absolute;right:-30px;bottom:-30px;width:180px;height:180px;animation:spin 90s linear infinite}
.qr-score{display:flex;align-items:center;gap:16px;position:relative;z-index:1}
.qr-score>b{
  font-family:var(--f-display);font-size:3.4rem;font-weight:800;line-height:1;letter-spacing:-.03em;
  background:var(--aura);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.qr-score small{font-size:.76rem;color:var(--muted);display:block;margin-top:4px}
.qr-score .qr-n{color:var(--text);font-weight:700}
.qr-bars{display:flex;flex-direction:column;gap:8px;position:relative;z-index:1}
.qr-bar{display:grid;grid-template-columns:24px 1fr 22px;align-items:center;gap:10px;font-size:.72rem;color:var(--muted)}
.qr-bar i{height:6px;border-radius:3px;background:var(--panel-hi);position:relative;overflow:hidden}
.qr-bar i::after{content:"";position:absolute;inset:0;width:var(--w);border-radius:3px;background:var(--aura)}
.qr-bar em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums}
.qr-src{display:flex;gap:7px;flex-wrap:wrap;position:relative;z-index:1}
.qr-src span{font-size:.66rem;color:var(--muted);border:1px solid var(--line);border-radius:100px;padding:4px 11px}
.qr-foot{display:flex;flex-direction:column;gap:16px;margin-top:auto;padding-top:20px;border-top:1px solid var(--line-soft);position:relative;z-index:1}
.qr-avas{display:flex}
.qr-avas span{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font-size:.6rem;font-weight:700;color:#fff;border:2px solid var(--void);margin-left:-9px;
  background:linear-gradient(135deg,var(--violet),var(--accent));
}
.qr-avas span:first-child{margin-left:0}
.qr-avas span:nth-child(2){background:linear-gradient(135deg,#FF6A00,#B44DFF)}
.qr-avas span:nth-child(3){background:linear-gradient(135deg,#4C8DFF,#2ED3B7)}
.qr-avas span:nth-child(4){background:linear-gradient(135deg,#FFB25E,#FF6A00)}
.qr-avas .more{background:var(--panel-hi);color:var(--muted);border-color:var(--void)}
.qr-foot .btn{width:max-content}

/* quote wall */
.q-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.q{padding:26px;display:flex;flex-direction:column;gap:14px;border-radius:var(--r-lg);position:relative}
.q-feat{grid-column:span 2}
.q-wide{grid-column:span 2}
.q-glow{position:absolute;top:0;left:0;right:0;height:2px;z-index:2}
.a-orange .q-glow{background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.a-violet .q-glow{background:linear-gradient(90deg,transparent,var(--violet),transparent)}
.a-azure  .q-glow{background:linear-gradient(90deg,transparent,var(--azure),transparent)}
.a-mint   .q-glow{background:linear-gradient(90deg,transparent,var(--mint),transparent)}
.q-mark{font-family:var(--f-display);font-size:3.4rem;line-height:.55;opacity:.28;color:var(--accent);position:relative;z-index:1}
.q blockquote{font-size:.92rem;line-height:1.62;flex:1;position:relative;z-index:1}
.q-feat blockquote{font-size:1.18rem;line-height:1.55}
.q-metric{display:flex;align-items:center;gap:9px;position:relative;z-index:1;flex-wrap:wrap}
.q-metric b{
  font-family:var(--f-display);font-size:1.15rem;font-weight:800;
  background:var(--aura);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.q-metric span{font-size:.72rem;color:var(--muted)}
.q-metric i{width:1px;height:16px;background:var(--line);margin:0 5px}
.q figcaption{display:flex;align-items:center;gap:11px;position:relative;z-index:1}
.q-ava{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--accent));display:grid;place-items:center;color:#fff;font-size:.7rem;font-weight:700;flex-shrink:0}
.a-violet .q-ava{background:linear-gradient(135deg,#8B5CF6,#B44DFF)}
.a-azure  .q-ava{background:linear-gradient(135deg,#4C8DFF,#2ED3B7)}
.a-mint   .q-ava{background:linear-gradient(135deg,#3DDC84,#4C8DFF)}
.q figcaption b{font-size:.84rem;display:block}
.q figcaption small{color:var(--muted);font-size:.74rem}

/* ══════════════ ROADMAP TIMELINE ══════════════ */
.f-head{max-width:600px;margin-bottom:40px}
.f-head p{color:var(--muted);margin-top:14px}

.road{position:relative;padding-top:44px}
.road-rail{position:absolute;top:15px;left:0;right:0;height:2px;background:var(--line-soft);border-radius:2px}
.road-rail i{display:block;height:100%;width:0;background:var(--aura);border-radius:2px}
.road-now{
  position:absolute;left:0;top:-26px;
  font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mint);
  background:rgba(61,220,132,.1);border:1px solid rgba(61,220,132,.35);
  padding:3px 9px;border-radius:100px;white-space:nowrap;
}
.road-track{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
.road-item{position:relative;display:flex;flex-direction:column;gap:12px;height:100%}
.road-node{
  position:absolute;top:-37px;left:0;width:14px;height:14px;border-radius:50%;
  background:var(--void);border:2px solid var(--line);transition:all .4s;
}
.road-item:first-child .road-node{background:var(--mint);border-color:var(--mint);box-shadow:0 0 14px rgba(61,220,132,.7)}
.road-item:hover .road-node{border-color:var(--accent);background:var(--accent);box-shadow:0 0 14px rgba(255,106,0,.7)}
.road-when{
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);
}
.road-item:first-child .road-when{color:var(--mint)}

.road-card{
  padding:22px;display:flex;flex-direction:column;gap:9px;
  border-radius:var(--r-lg);position:relative;height:100%;
  transition:transform .45s var(--ease);
}
.road-item:hover .road-card{transform:translateY(-6px)}
.rc-glow{position:absolute;top:-25%;right:-20%;width:70%;height:60%;border-radius:50%;filter:blur(55px);background:radial-gradient(circle,rgba(255,106,0,.22),transparent 68%)}
.rc-glow.amber{background:radial-gradient(circle,rgba(255,178,94,.22),transparent 68%)}
.rc-glow.violet{background:radial-gradient(circle,rgba(139,92,246,.26),transparent 68%)}
.rc-glow.azure{background:radial-gradient(circle,rgba(76,141,255,.24),transparent 68%)}
.road-card h3{font-size:1.08rem;position:relative;z-index:1}
.road-card p{font-size:.83rem;color:var(--muted);position:relative;z-index:1;flex:1}
.rc-cta{
  font-size:.82rem;font-weight:600;color:var(--accent);
  display:inline-flex;align-items:center;gap:6px;margin-top:4px;
  position:relative;z-index:1;width:max-content;
}
.rc-cta i{font-style:normal;transition:transform .3s var(--ease)}
.rc-cta:hover i{transform:translateX(4px)}

/* roadmap card art */
.rc-art{
  height:124px;border-radius:12px;padding:12px;margin-bottom:4px;
  background:var(--deep);border:1px solid var(--line-soft);
  position:relative;z-index:1;overflow:hidden;
}
.art-svc{display:flex;flex-direction:column;justify-content:center;gap:9px}
.as-row{display:flex;align-items:center;gap:8px}
.as-ico{width:20px;height:20px;border-radius:6px;background:rgba(61,220,132,.16);color:var(--mint);display:grid;place-items:center;font-size:.6rem;flex-shrink:0}
.as-bar{flex:1;height:6px;border-radius:3px;background:var(--panel-hi);overflow:hidden}
.as-bar i{display:block;height:100%;width:var(--w);border-radius:3px;background:linear-gradient(90deg,var(--mint),var(--azure))}
.as-badge{
  position:absolute;top:10px;right:10px;font-size:.56rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mint);background:rgba(61,220,132,.12);
  border:1px solid rgba(61,220,132,.35);padding:3px 8px;border-radius:100px;
}
.art-shop{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:center}
.ash-item{display:flex;flex-direction:column;gap:1px;min-width:0}
.ash-item i{height:22px;border-radius:5px;margin-bottom:3px}
.ash-item .s1{background:linear-gradient(160deg,rgba(255,106,0,.65),rgba(255,178,94,.2))}
.ash-item .s2{background:linear-gradient(160deg,rgba(139,92,246,.65),rgba(180,77,255,.2))}
.ash-item .s3{background:linear-gradient(160deg,rgba(61,220,132,.5),rgba(76,141,255,.2))}
.ash-item .s4{background:linear-gradient(160deg,rgba(76,141,255,.6),rgba(139,92,246,.2))}
.ash-item b{font-size:.62rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ash-item small{font-size:.52rem;color:var(--faint)}
.ash-item em{font-style:normal;font-size:.56rem;color:var(--amber);font-weight:600}
.art-ai{display:flex;flex-direction:column;justify-content:center;gap:7px}
.aa-orb{position:absolute;top:-24px;right:-24px;width:78px;height:78px}
.aa-orb span{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(139,92,246,.4);animation:orbPulse 3s ease-in-out infinite}
.aa-orb span:nth-child(2){inset:14%;animation-delay:.5s;border-color:rgba(255,106,0,.35)}
.aa-orb span:nth-child(3){inset:30%;animation-delay:1s;background:radial-gradient(circle,rgba(139,92,246,.5),transparent 70%);border:0}
@keyframes orbPulse{0%,100%{transform:scale(.9);opacity:.5}50%{transform:scale(1.06);opacity:1}}
.art-plat{display:grid;place-items:center}
.ap-win{width:100%;background:var(--void);border:1px solid var(--line-soft);border-radius:9px;padding:10px}
.ap-tabs{display:flex;gap:5px;margin-bottom:8px}
.ap-tabs i{width:26px;height:6px;border-radius:100px;background:var(--panel-hi)}
.ap-tabs i.on{background:var(--aura-btn)}
.ap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.ap-grid span{height:22px;border-radius:5px;background:var(--panel-hi)}
.ap-grid .wide{grid-column:span 3;height:14px;background:linear-gradient(90deg,rgba(255,106,0,.3),rgba(139,92,246,.26))}

.soon-pill{
  font-size:.6rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent);border:1px solid rgba(255,106,0,.4);background:rgba(255,106,0,.09);
  padding:4px 10px;border-radius:100px;width:max-content;position:relative;z-index:1;
}
.soon-pill.ai{color:var(--violet);border-color:rgba(139,92,246,.45);background:rgba(139,92,246,.1)}

/* chat bubbles (used by roadmap AI art) */
.msg{max-width:100%;padding:9px 12px;border-radius:11px;font-size:.72rem;line-height:1.45}
.msg.ai{background:var(--panel);border:1px solid var(--line-soft);border-bottom-left-radius:4px;display:flex;gap:7px;align-items:flex-start}
.ai-dot{width:7px;height:7px;border-radius:50%;background:var(--violet);flex-shrink:0;margin-top:5px;box-shadow:0 0 10px rgba(139,92,246,.9)}
.msg.typing{width:max-content;background:var(--panel);border:1px solid var(--line-soft);display:flex;gap:4px;padding:11px 13px}
.msg.typing i{width:4px;height:4px;border-radius:50%;background:var(--muted);animation:typing 1.2s infinite}
.msg.typing i:nth-child(2){animation-delay:.18s}
.msg.typing i:nth-child(3){animation-delay:.36s}
@keyframes typing{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-4px);opacity:1}}

/* ══════════════ FAQ ══════════════ */
.faq-wrap{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(36px,5vw,64px);align-items:start}
.faq-side{position:sticky;top:calc(var(--nav-h) + 34px)}
.faq-side h2{margin-bottom:14px}
.faq-side p{color:var(--muted)}
.faq-mark{width:120px;height:120px;margin-top:34px;animation:spin 90s linear infinite}
.faq-list{display:flex;flex-direction:column;gap:11px}
.faq-item{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r-md);overflow:hidden;transition:border-color .3s,background .3s}
.faq-item[open]{border-color:rgba(255,106,0,.4);background:var(--panel-hi)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 20px;font-weight:600;font-size:.95rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary i{width:24px;height:24px;border-radius:50%;flex-shrink:0;position:relative;border:1.4px solid var(--line);transition:transform .35s var(--ease),border-color .35s}
.faq-item summary i::before,.faq-item summary i::after{content:"";position:absolute;background:var(--muted);border-radius:2px;top:50%;left:50%;transform:translate(-50%,-50%);transition:background .3s}
.faq-item summary i::before{width:9px;height:1.5px}
.faq-item summary i::after{width:1.5px;height:9px}
.faq-item[open] summary i{transform:rotate(45deg);border-color:var(--accent)}
.faq-item[open] summary i::before,.faq-item[open] summary i::after{background:var(--accent)}
.faq-body{padding:0 20px}
.faq-body p{color:var(--muted);font-size:.89rem;padding-bottom:18px;max-width:60ch}

/* ══════════════ CONTACT + OTP ══════════════ */
.contact-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:clamp(36px,4.5vw,56px);align-items:start}
.contact-copy h2{margin-bottom:13px}
.contact-copy>p{color:var(--muted);margin-bottom:26px}
.c-points{display:flex;flex-direction:column;gap:15px;margin-bottom:28px}
.c-points li{padding-left:29px;position:relative}
.c-points li::before{content:"✓";position:absolute;left:0;top:2px;width:19px;height:19px;border-radius:50%;font-size:.62rem;font-weight:700;display:grid;place-items:center;color:#fff;background:var(--aura-btn)}
.c-points b{display:block;font-size:.92rem}
.c-points span{font-size:.83rem;color:var(--muted)}
.c-alt{display:flex;flex-direction:column;gap:10px}
.alt{display:flex;align-items:center;gap:13px;border:1px solid var(--line-soft);border-radius:var(--r-md);background:var(--panel);padding:12px 16px;transition:border-color .3s,transform .35s var(--ease)}
.alt:hover{border-color:rgba(255,106,0,.45);transform:translateX(5px)}
.alt-i{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex-shrink:0}
.alt-i svg{width:18px;height:18px}
.alt-i.wa{background:rgba(61,220,132,.14);color:var(--mint)}
.alt-i.ph{background:rgba(139,92,246,.14);color:var(--violet)}
.alt-i.em{background:rgba(255,106,0,.14);color:var(--accent)}
.alt b{font-size:.88rem;display:block}
.alt small{font-size:.74rem;color:var(--muted)}

.inquiry{padding:32px;position:relative;border-radius:var(--r-xl)}
.inq-glow{position:absolute;top:-30%;right:-20%;width:60%;height:60%;border-radius:50%;filter:blur(70px);background:radial-gradient(circle,rgba(255,106,0,.16),transparent 68%)}
.inquiry>*{position:relative;z-index:2}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.inquiry label{display:flex;flex-direction:column;gap:7px;font-size:.8rem;font-weight:600;color:var(--muted);margin-bottom:14px}
.inquiry input,.inquiry select,.inquiry textarea{
  font:inherit;font-size:.9rem;color:var(--text);
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:11px;
  padding:12px 15px;width:100%;
  transition:border-color .3s,box-shadow .3s,background .3s;
}
[data-theme="light"] .inquiry input,[data-theme="light"] .inquiry select,[data-theme="light"] .inquiry textarea{background:#fff}
.inquiry input::placeholder,.inquiry textarea::placeholder{color:var(--faint)}
.inquiry select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.inquiry select option{background:var(--deep);color:var(--text)}
.inquiry input:focus,.inquiry select:focus,.inquiry textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,106,0,.16)}
.inquiry input.err,.inquiry select.err,.inquiry textarea.err{border-color:#FF4757;box-shadow:0 0 0 3px rgba(255,71,87,.14)}
.inquiry textarea{resize:vertical;min-height:100px}
.ref-field em{font-style:normal;color:var(--faint);font-weight:400;font-size:.72rem;margin-left:4px}
.form-note{text-align:center;font-size:.76rem;color:var(--faint);margin-top:12px}
.hp-field{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.form-error{background:rgba(255,71,87,.1);border:1px solid rgba(255,71,87,.4);color:#FF8892;border-radius:11px;padding:11px 15px;margin-bottom:13px;font-size:.84rem;line-height:1.5}
.form-error[hidden]{display:none}

/* phone with auto dial code (driven by country select) */
.phone-field{position:relative;display:flex;align-items:stretch}
.dial{
  display:flex;align-items:center;font-size:.9rem;font-weight:600;color:var(--accent);
  background:rgba(255,106,0,.1);border:1px solid var(--line);border-right:0;
  border-radius:11px 0 0 11px;padding:0 13px;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.dial.empty{color:var(--faint);background:rgba(255,255,255,.04)}
.phone-field input{border-radius:0 11px 11px 0}

/* ══════════════ NEWSLETTER ══════════════ */
.newsletter{padding:0 0 clamp(66px,7.4vw,100px)}
.news-inner{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;padding:38px 42px;border-radius:var(--r-xl);position:relative}
.news-glow{position:absolute;inset:-40%;background:radial-gradient(circle at 18% 24%,rgba(255,106,0,.26),transparent 42%),radial-gradient(circle at 84% 78%,rgba(139,92,246,.24),transparent 42%);filter:blur(30px)}
.news-inner>*{position:relative;z-index:2}
.news-inner h2{font-size:clamp(1.5rem,2.5vw,2rem)}
.news-inner p{color:var(--muted);margin-top:7px;max-width:46ch}
.news-form{display:flex;gap:11px;flex:1;min-width:290px;max-width:450px}
.news-form input{flex:1;font:inherit;font-size:.9rem;color:var(--text);background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:100px;padding:13px 21px;transition:border-color .3s,box-shadow .3s}
[data-theme="light"] .news-form input{background:#fff}
.news-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,106,0,.16)}
.news-form input.err{border-color:#FF4757}

/* ══════════════ FOOTER ══════════════ */
.footer{border-top:1px solid var(--line-soft);padding:58px 0 0;position:relative;overflow:hidden;background:linear-gradient(180deg,transparent,rgba(255,106,0,.035))}
.foot-mark{position:absolute;right:-60px;bottom:-70px;width:340px;height:340px;animation:spin 120s linear infinite;pointer-events:none}
.footer-grid{display:grid;grid-template-columns:1.6fr 1.1fr 1fr 1fr 1fr;gap:32px;padding-bottom:48px;position:relative;z-index:1}
.f-brand p{color:var(--muted);font-size:.87rem;margin:15px 0 18px;max-width:34ch}
.socials{display:flex;gap:9px}
.socials a{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);transition:all .3s var(--ease)}
.socials a:hover{color:#fff;background:var(--aura-btn);border-color:transparent;transform:translateY(-4px)}
.socials svg{width:15px;height:15px}
.f-col{display:flex;flex-direction:column;gap:10px}
.f-col h4{font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}
.f-col a{font-size:.86rem;color:var(--muted);transition:color .25s,transform .3s var(--ease)}
.f-col a:hover{color:var(--accent);transform:translateX(3px)}
.f-avail{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--muted);margin-top:6px}
.footer-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid var(--line-soft);padding:20px 0 24px;font-size:.8rem;color:var(--faint);position:relative;z-index:1}
.f-tag i{color:var(--accent);font-style:normal;margin:0 5px}

/* ══════════════ FAB ══════════════ */
.fab-cluster{position:fixed;right:20px;bottom:20px;z-index:800;display:flex;align-items:center;gap:11px;opacity:0;pointer-events:none;transform:translateY(18px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.fab-cluster.show{opacity:1;pointer-events:auto;transform:none}
.fab{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:100px;font-weight:600;font-size:.86rem;box-shadow:var(--sh-md);transition:transform .35s var(--ease)}
.fab:hover{transform:translateY(-4px)}
.fab-wa{width:50px;height:50px;background:#22C35E;color:#fff}
.fab-wa svg{width:23px;height:23px}
.fab-cta{padding:14px 24px;background:var(--glass);color:var(--text);border:1px solid var(--line);backdrop-filter:blur(16px)}
.fab-cta:hover{border-color:rgba(255,106,0,.5);box-shadow:var(--glow-a)}

/* ══════════════ RESPONSIVE ══════════════ */
@media(max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:64px}
  .hero-visual{max-width:640px;margin-inline:auto;width:100%}
  .constellation{opacity:.3}
  .bento-stats{grid-template-columns:repeat(2,1fr)}
  .bs-hero,.bs-wide,.bs-banner{grid-column:span 2}
  .bs-banner{flex-direction:column;align-items:flex-start;gap:20px}
  .bb-track{align-self:stretch;justify-content:space-between}
  .story-grid{grid-template-columns:1fr;gap:34px}
  .story-stage{position:relative;top:0;height:440px;order:-1}
  .beat{opacity:1;background:var(--panel);border-left-color:var(--accent)}
  .svc-panel{grid-template-columns:1fr;gap:20px}
  .sp-art{order:-1}
  .case,.case.rev{grid-template-columns:1fr;gap:28px}
  .case.rev .case-media,.case.rev .case-copy{order:0}
  .pl-steps{grid-template-columns:repeat(2,1fr);gap:26px}
  .pl-rail{display:none}
  .pl-step{padding-left:28px;padding-top:0}
  .pl-dot{top:4px}
  .price-grid{grid-template-columns:repeat(2,1fr)}
  .perks{grid-template-columns:1fr 1fr}
  .perk-quote{grid-column:span 2}
  .sec-grid{grid-template-columns:1fr;gap:36px}
  .q-wall{grid-template-columns:1fr;gap:16px}
  .q-rating{position:static}
  .qr-mark{display:none}
  .road-track{grid-template-columns:1fr 1fr;gap:22px 16px}
  .road-rail{display:none}
  .road-node{position:static;margin-bottom:-4px}
  .faq-wrap{grid-template-columns:1fr;gap:32px}
  .faq-side{position:static}
  .faq-mark{display:none}
  .contact-grid{grid-template-columns:1fr;gap:40px}
  .footer-grid{grid-template-columns:1fr 1fr 1fr}
  .f-brand{grid-column:span 3}
}

@media(max-width:760px){
  .desktop-only{display:none!important}
  .mobile-only{display:inline-flex!important}
  .burger{display:block}
  .nav-links{
    position:fixed;inset:0;z-index:-1;background:var(--void);
    flex-direction:column;justify-content:center;gap:24px;
    opacity:0;pointer-events:none;transition:opacity .4s var(--ease);
  }
  .nav-links a{font-size:1.35rem;font-family:var(--f-display);font-weight:700;color:var(--text)}
  .nav-links.open{opacity:1;pointer-events:auto;z-index:1}
  .site-nav:has(.nav-links.open){background:var(--void)}

  .hero{padding-top:calc(var(--nav-h) + 26px)}
  .hero-proof{flex-wrap:wrap;gap:14px}
  .hp-sep{display:none}
  .hp-item{min-width:82px}
  .hero-visual{min-height:0;padding:26px 0 34px}
  .fc-deploy{right:0;top:-12px}
  .fc-speed{left:-6px}
  .fc-lead{right:0;bottom:-14px}
  .fcard{padding:9px 12px}
  .fcard b{font-size:.72rem}
  .fcard small{font-size:.62rem}
  .aura-orbit{display:none}

  .bento-stats{grid-template-columns:1fr}
  .bs-hero,.bs-wide,.bs-banner{grid-column:span 1}
  .bb-day i{width:9px}
  .story-stage{height:400px}
  .stage-inner,.scene{padding:18px}
  .scene{inset:18px}
  .svc-panel{width:86vw;padding:22px}
  .pl-steps{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr}
  .perks{grid-template-columns:1fr}
  .perk-quote{grid-column:span 1}
  .q-grid{grid-template-columns:1fr}
  .q-feat,.q-wide{grid-column:span 1}
  .road-track{grid-template-columns:1fr}
  .sec-list li{gap:11px}
  .form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .f-brand{grid-column:span 2}
  .news-inner{padding:30px 22px}
  .inquiry{padding:22px 17px}
  .case-metrics{gap:18px}
  .fab-cta{display:none}
  .foot-mark{width:210px;right:-50px;bottom:-50px}
}

/* ══════════════ REDUCED MOTION ══════════════ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .marquee-track{animation:none;flex-wrap:wrap;width:100%;justify-content:center}
  .marquee .dup{display:none}
  .loader{display:none}
  .beat{opacity:1}
  .scene{position:relative;inset:auto;opacity:1;visibility:visible;transform:none}
  .scene:not(.is-live){display:none}
}