/* ============================= TOKENS ============================= */
:root{
  --font-display:'Bebas Neue', sans-serif;
  --font-body:'Inter', 'Antic', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  --radius-s:8px;
  --radius-m:14px;
  --radius-l:20px;
  --radius-full:999px;

  --ease:cubic-bezier(.22,1,.36,1);
  --dur-s:.3s;
  --dur-m:.55s;

  --maxw:1280px;
}

/* ---- Dark (default): near-black violet, elevation by lightness ---- */
html[data-theme="dark"]{
  --bg:#0C0817;
  --bg-1:#120C21;
  --bg-2:#181030;
  --ink:#F3F0FC;
  --ink-dim:#CBC3E5;
  --ink-faint:#9C91C2;
  --line:rgba(243,240,252,0.08);
  --line-strong:rgba(243,240,252,0.15);

  --violet:#8B5CF6;
  --violet-soft:#B9A8F5;
  --violet-dim:#4A3B8C;

  --glass-bg:rgba(243,240,252,0.04);
  --glass-bg-2:rgba(243,240,252,0.075);
  --glass-border:rgba(243,240,252,0.10);
  --glass-blur:16px;

  --shadow-soft: 0 20px 50px -26px rgba(0,0,0,0.7);
}

/* ---- Light: lavender-marble daylight ---- */
html[data-theme="light"]{
  --bg:#F7F4FC;
  --bg-1:#EFEAFA;
  --bg-2:#E7E0F6;
  --ink:#1B1530;
  --ink-dim:#3D3459;
  --ink-faint:#655A87;
  --line:rgba(27,21,48,0.08);
  --line-strong:rgba(27,21,48,0.15);

  --violet:#5B21B6;
  --violet-soft:#6D28D9;
  --violet-dim:#C4B0EA;

  --glass-bg:rgba(255,255,255,0.5);
  --glass-bg-2:rgba(255,255,255,0.78);
  --glass-border:rgba(27,21,48,0.08);
  --glass-blur:16px;

  --shadow-soft: 0 20px 44px -24px rgba(80,60,150,0.18);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-synthesis:none;
  overflow-x:hidden;
  transition:background var(--dur-m) var(--ease), color var(--dur-m) var(--ease);
}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
@media(max-width:640px){.wrap{padding:0 20px;}}

.mono{font-family:var(--font-mono);}
.eyebrow{
  font-family:var(--font-mono); font-size:12.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--violet-soft); display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.eyebrow::before{content:''; width:20px; height:1px; background:var(--violet-soft);}

h1,h2,h3,h4{font-family:var(--font-display); font-weight:400; letter-spacing:.02em; line-height:1.1;}
p{color:var(--ink-dim); line-height:1.65; font-weight:500;}

.reveal{opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
.reveal.in-view{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  html{scroll-behavior:auto;}
}

/* ============================= AMBIENT BACKGROUND FIELD ============================= */
.bg-field{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.bg-orb-outer{position:absolute; will-change:transform;}
.bg-orb{border-radius:50%; filter:blur(85px); will-change:transform;}
.bg-orb-outer.o1{top:-8%; left:-8%;}
.bg-orb-outer.o1 .bg-orb{width:480px; height:480px; background:radial-gradient(circle, rgba(139,92,246,0.30), transparent 70%); animation:orbFloat1 20s ease-in-out infinite;}
.bg-orb-outer.o2{top:32%; right:-12%;}
.bg-orb-outer.o2 .bg-orb{width:420px; height:420px; background:radial-gradient(circle, rgba(185,168,245,0.22), transparent 70%); animation:orbFloat2 24s ease-in-out infinite;}
.bg-orb-outer.o3{bottom:-10%; left:22%;}
.bg-orb-outer.o3 .bg-orb{width:440px; height:440px; background:radial-gradient(circle, rgba(139,92,246,0.18), transparent 70%); animation:orbFloat3 27s ease-in-out infinite;}
html[data-theme="light"] .bg-orb-outer.o1 .bg-orb{background:radial-gradient(circle, rgba(91,33,182,0.20), transparent 70%);}
html[data-theme="light"] .bg-orb-outer.o2 .bg-orb{background:radial-gradient(circle, rgba(91,33,182,0.15), transparent 70%);}
html[data-theme="light"] .bg-orb-outer.o3 .bg-orb{background:radial-gradient(circle, rgba(91,33,182,0.13), transparent 70%);}

@keyframes orbFloat1{0%,100%{transform:translate(0,0);} 50%{transform:translate(40px,50px);}}
@keyframes orbFloat2{0%,100%{transform:translate(0,0);} 50%{transform:translate(-50px,30px);}}
@keyframes orbFloat3{0%,100%{transform:translate(0,0);} 50%{transform:translate(30px,-40px);}}
@media (prefers-reduced-motion: reduce){
  .bg-orb-outer{transform:none !important;}
  .bg-orb{animation:none;}
}

/* ============================= TRAVELLING GUIDE MASCOT ============================= */
.mascot-rail{
  position:fixed; inset:0; z-index:45; pointer-events:none;
}
.mascot{
  position:absolute; width:76px; height:85px; top:16%; left:4%;
  transition:left .9s cubic-bezier(.65,0,.35,1), top .18s linear;
  filter:drop-shadow(0 14px 18px rgba(76,46,158,0.35));
  pointer-events:auto; cursor:pointer;
}
.mascot-inner{
  width:100%; height:100%;
  animation:mascotBob 4.2s ease-in-out infinite;
}
.mascot-turn{
  width:100%; height:100%; perspective:600px; transform-style:preserve-3d;
}
.mascot-turn.talking{animation:mascotTalk 2.6s cubic-bezier(.45,0,.4,1);}
.mascot-svg{width:100%; height:100%; display:block;}

.mascot-svg .mascot-gaze{animation:mascotGaze 7s ease-in-out infinite;}

@keyframes mascotBob{0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);}}
@keyframes mascotTalk{
  0%{transform:rotateY(0deg) rotateZ(0deg) scale(1);}
  12%{transform:rotateY(160deg) rotateZ(0deg) scale(.94);}
  24%{transform:rotateY(360deg) rotateZ(0deg) scale(1);}
  34%{transform:rotateZ(-9deg) scale(1.04);}
  44%{transform:rotateZ(7deg) scale(1.04);}
  54%{transform:rotateZ(-6deg) scale(1.03);}
  64%{transform:rotateZ(5deg) scale(1.02);}
  74%{transform:rotateZ(-3deg) scale(1.01);}
  86%{transform:rotateZ(1.5deg) scale(1);}
  100%{transform:rotateZ(0deg) scale(1);}
}
@keyframes mascotGaze{
  0%,8%{transform:translate(0,0);}
  20%{transform:translate(-2.3px,0);}
  36%{transform:translate(-2.3px,0);}
  50%{transform:translate(2.3px,0);}
  64%{transform:translate(2.3px,-1.6px);}
  78%{transform:translate(0,-1.6px);}
  92%,100%{transform:translate(0,0);}
}

.mascot.has-alert::after{
  content:''; position:absolute; top:2px; right:6px; width:11px; height:11px;
  border-radius:50%; background:#FF4D5E; border:2px solid var(--bg);
  box-shadow:0 0 0 0 rgba(255,77,94,0.6);
  animation:mascotAlertPulse 1.8s ease-out infinite;
  pointer-events:none;
}
@keyframes mascotAlertPulse{
  0%{box-shadow:0 0 0 0 rgba(255,77,94,0.6);}
  70%{box-shadow:0 0 0 8px rgba(255,77,94,0);}
  100%{box-shadow:0 0 0 0 rgba(255,77,94,0);}
}
@media (prefers-reduced-motion: reduce){
  .mascot.has-alert::after{animation:none;}
}

.mascot-label{
  position:absolute; top:50%; transform:translateY(-50%);
  width:190px; padding:12px 30px 12px 15px; border-radius:16px;
  background:var(--glass-bg-2);
  backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%);
  border:1px solid var(--glass-border);
  font-family:var(--font-body); font-weight:500; font-size:12.5px; line-height:1.45; color:var(--ink);
  white-space:normal; text-align:left;
  opacity:0; transform:translateY(-50%) scale(.94); transition:opacity .3s var(--ease), transform .3s var(--ease);
  box-shadow:0 14px 30px -14px rgba(76,46,158,0.4);
  pointer-events:none; cursor:pointer;
}
.mascot-label::after{
  content:''; position:absolute; top:50%; width:0; height:0;
  border:7px solid transparent; transform:translateY(-50%);
}
.mascot-label .close{
  position:absolute; top:9px; right:9px; width:16px; height:16px;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-faint); font-size:13px; line-height:1;
}
.mascot-label:hover .close{color:var(--violet-soft);}
.mascot-label.pos-right{left:calc(100% + 16px);}
.mascot-label.pos-right::after{right:100%; border-right-color:var(--glass-bg-2);}
.mascot-label.pos-left{right:calc(100% + 16px);}
.mascot-label.pos-left::after{left:100%; border-left-color:var(--glass-bg-2);}
.mascot-label.visible{opacity:1; transform:translateY(-50%) scale(1); pointer-events:auto;}
@media(max-width:960px){.mascot-label{display:none;}}

@media(max-width:640px){
  .mascot{position:fixed; left:16px; top:auto !important; bottom:22px; width:50px; height:56px;}
  .mascot::before{
    content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:64px; height:64px; border-radius:50%;
    background:var(--glass-bg-2); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border:1px solid var(--glass-border); box-shadow:0 8px 22px -8px rgba(0,0,0,0.5); z-index:-1;
  }
}
@media (prefers-reduced-motion: reduce){
  .mascot-inner{animation:none;}
  .mascot-turn.talking{animation:none;}
  .mascot-svg .mascot-gaze{animation:none;}
  .mascot-label{transition:none;}
}

/* ============================= GLASS ============================= */
.glass{
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-l);
  box-shadow:var(--shadow-soft);
}
.glass-2{background:var(--glass-bg-2); border:1px solid var(--glass-border);}
.glass-pill{
  background:var(--glass-bg-2); backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid var(--glass-border); border-radius:var(--radius-full);
}

/* ============================= SCROLL RAIL ============================= */
#column-rail{position:fixed; right:22px; top:50%; transform:translateY(-50%); height:min(34vh,280px); width:2px; z-index:60;}
#column-rail .rail-line{position:relative; width:100%; height:100%; background:var(--line); border-radius:2px; overflow:hidden;}
#column-rail .rail-fill{position:absolute; left:0; top:0; width:100%; height:0%; background:var(--violet-soft); border-radius:2px; transition:height .08s linear;}
@media(max-width:900px){#column-rail{display:none;}}

/* ============================= NAV — hairline command bar ============================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100; padding:0;
  border-bottom:1px solid transparent;
  transition:background var(--dur-m) var(--ease), border-color var(--dur-m) var(--ease), backdrop-filter var(--dur-m) var(--ease);
}
.nav.scrolled{
  background:var(--glass-bg-2);
  backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
  border-bottom-color:var(--line);
}
.nav-inner{max-width:var(--maxw); margin:0 auto; padding:0 32px; height:74px; display:flex; align-items:center; justify-content:space-between; gap:16px;}
@media(max-width:640px){.nav-inner{padding:0 18px; gap:10px;}}

.logo{display:flex; align-items:center; gap:11px; font-family:var(--font-display); font-weight:500; font-size:17.5px; min-width:0;}
.logo .mark{width:72px; height:72px; margin:-14px 0; flex:none; object-fit:contain; object-position:center;}
.mark-light{display:none;}
html[data-theme="light"] .mark-dark{display:none;}
html[data-theme="light"] .mark-light{display:block;}
.logo small{display:block; font-family:var(--font-mono); font-size:9px; letter-spacing:.1em; color:var(--ink-dim); font-weight:500; text-transform:uppercase; margin-top:1px; white-space:nowrap;}
@media(max-width:400px){.logo{font-size:15.5px; gap:8px;} .logo .mark{width:56px; height:56px; margin:-8px 0;} .logo small{font-size:7.2px;}}

.nav-links{display:flex; align-items:center; gap:30px;}
.nav-links a{
  font-size:13.5px; font-weight:500; color:var(--ink-dim); padding:4px 0; position:relative;
  transition:color var(--dur-s) var(--ease);
}
.nav-links a::after{content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--violet-soft); transition:width var(--dur-s) var(--ease);}
.nav-links a:hover{color:var(--ink);}
.nav-links a:hover::after{width:100%;}
@media(max-width:1080px){.nav-links{display:none;}}

.nav-right{display:flex; align-items:center; gap:16px; flex:none;}
.nav-right .divider{width:1px; height:22px; background:var(--line);}
@media(max-width:640px){.nav-right .divider{display:none;} .nav-right{gap:10px;}}
@media(max-width:640px){.nav-right .btn-primary{display:none;}}

.theme-toggle{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--glass-border);
  display:flex; align-items:center; justify-content:center; background:transparent;
  transition:background var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
  flex:none;
}
.theme-toggle:hover{background:var(--glass-bg);}
.theme-toggle svg{width:16px; height:16px; stroke:var(--ink-dim); fill:none;}
.theme-toggle .icon-sun{display:none;}
html[data-theme="light"] .theme-toggle .icon-moon{display:none;}
html[data-theme="light"] .theme-toggle .icon-sun{display:block;}

.btn{
  font-family:var(--font-body); font-weight:600; font-size:13px; padding:11px 22px; border-radius:var(--radius-full);
  display:inline-flex; align-items:center; gap:8px; border:1px solid var(--glass-border);
  transition:transform var(--dur-s) var(--ease), background var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
  white-space:nowrap;
}
.btn-primary{background:var(--violet); color:#fff; border-color:var(--violet); box-shadow:0 10px 26px -10px rgba(139,92,246,0.55);}
.btn-primary:hover{transform:translateY(-2px); background:var(--violet-soft); border-color:var(--violet-soft); box-shadow:0 14px 30px -10px rgba(139,92,246,0.65);}
.btn-ghost{background:var(--glass-bg); color:var(--ink);}
.btn-ghost:hover{background:var(--glass-bg-2); transform:translateY(-2px);}

.burger{display:none; flex-direction:column; gap:5px; width:22px; background:none; border:none; flex:none;}
.burger span{height:2px; width:100%; background:var(--ink); border-radius:2px;}
@media(max-width:1080px){.burger{display:flex;}}


.mobile-menu{position:fixed; inset:0; z-index:99; background:var(--bg-1); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:22px; opacity:0; visibility:hidden; transform:translateY(-10px); transition:.4s var(--ease);}
.mobile-menu.open{opacity:1; visibility:visible; transform:none;}
.mobile-menu a{font-family:var(--font-display); font-size:24px; font-weight:500;}

/* ============================= HERO ============================= */
.hero{position:relative; padding:158px 0 0; overflow:hidden;}

.hero-aurora{
  position:absolute; top:-220px; left:50%; transform:translateX(-50%);
  width:900px; height:560px; border-radius:50%;
  background:radial-gradient(circle, rgba(139,92,246,0.32), transparent 68%);
  filter:blur(70px); opacity:.55; z-index:0; pointer-events:none;
  animation:auroraDrift 22s ease-in-out infinite;
}
@keyframes auroraDrift{0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-46%) translateY(24px);}}
@media (prefers-reduced-motion: reduce){.hero-aurora{animation:none;}}

.hero-grid{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 88px);
  -webkit-mask-image:radial-gradient(65% 55% at 50% 20%, #000 30%, transparent 78%);
  mask-image:radial-gradient(65% 55% at 50% 20%, #000 30%, transparent 78%);
  opacity:.7;
}

.hero-inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
  padding-bottom:64px;
}
@media(max-width:980px){.hero-inner{grid-template-columns:1fr; gap:60px; text-align:center;}}

.hero-copy h1{
  font-size:clamp(34px, 4vw, 54px); font-weight:400; letter-spacing:-.015em;
}
.kinetic .word{display:inline-block; opacity:0; transform:translateY(18px); filter:blur(4px); transition:opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease);}
.kinetic .word.in{opacity:1; transform:translateY(0); filter:blur(0);}
.hero-copy h1 em{font-style:normal; font-weight:400; color:var(--violet-soft);}

.hero-copy p.lead{font-size:17.5px; max-width:460px; margin:22px 0 34px;}
@media(max-width:980px){.hero-copy p.lead{margin-left:auto; margin-right:auto;}}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:30px;}
@media(max-width:980px){.hero-ctas{justify-content:center;}}
.hero-trust{font-size:12.5px; font-weight:500; letter-spacing:.05em; color:var(--ink-dim);}

/* ---- 3D animated hero ---- */
.hero-orb-hero{padding-bottom:80px;}

.hero-inner-centered{
  position:relative; z-index:2; max-width:720px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.hero-pill{
  display:inline-flex; align-items:center; gap:9px; padding:9px 18px 9px 16px; margin-bottom:26px;
  border-radius:var(--radius-full); background:var(--glass-bg-2); border:1px solid var(--glass-border);
  font-size:12.5px; font-weight:600; color:var(--ink-dim); transition:color var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.hero-pill:hover{color:var(--ink); border-color:var(--line-strong);}
.hero-pill .dot{width:6px; height:6px; border-radius:50%; background:var(--violet-soft); flex:none;}
.hero-pill svg{width:13px; height:13px; stroke:currentColor; flex:none;}
.hero-inner-centered h1{font-size:clamp(34px, 4.6vw, 58px); font-weight:400; letter-spacing:-.015em;}
.hero-inner-centered .lead{font-size:17.5px; max-width:520px; margin:22px auto 34px;}
.hero-ctas-center{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:30px;}

/* ---- hero split: copy left, 3D right (same screen) ---- */
@media(min-width:981px){
  .hero-orb-hero{padding-top:120px; padding-bottom:40px;}
  .hero-split{display:grid; grid-template-columns:1fr 1.05fr; gap:24px; align-items:center; min-height:calc(100vh - 170px);}
  .hero-split .hero-inner-centered{align-items:flex-start; text-align:left; margin:0; max-width:560px;}
  .hero-split .hero-inner-centered h1{font-size:clamp(40px,4.4vw,64px);}
  .hero-split .hero-inner-centered .lead{margin-left:0; margin-right:0;}
  .hero-split .hero-ctas-center{justify-content:flex-start;}
  .hero-split .hero-3d-stage{margin:0; max-width:none; height:min(600px, calc(100vh - 180px)); min-height:460px;}
  .hero-split .hero-3d-stage::after{display:none;}
  .hero-split .chip-a{left:-2%; top:12%;}
  .hero-split .chip-b{right:-2%; bottom:44%;}
}

/* ---- WebGL 3D hero stage ---- */
.hero-3d-stage{
  position:relative; z-index:1; width:100%; max-width:1180px; height:560px; margin:30px auto 0;
}
@media(max-width:900px){.hero-3d-stage{height:480px;}}
@media(max-width:640px){.hero-3d-stage{height:400px; margin-top:20px;}}
.hero3d-canvas{position:absolute; inset:0; width:100%; height:100%; display:block;
  -webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 46%, #000 58%, transparent 100%);
  mask-image:radial-gradient(ellipse 72% 70% at 50% 46%, #000 58%, transparent 100%);}
.hero-3d-stage::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:90px; pointer-events:none;
  background:linear-gradient(to bottom, transparent, var(--bg));
}

/* floating accent chips, react to same mouse parallax */
.float-chip{
  position:absolute; z-index:4; transition:transform .3s ease-out;
}
.chip-a{left:20%; top:20%;}
.chip-b{right:20%; bottom:34%;}
.chip-bob{
  padding:10px 16px 10px 14px; border-radius:var(--radius-full);
  background:var(--glass-bg-2); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--glass-border); box-shadow:0 20px 40px -16px rgba(0,0,0,.5);
  font-size:12px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:8px;
  animation:chipBob 6s ease-in-out infinite;
}
.chip-a .chip-bob{animation-delay:-1s;}
.chip-b .chip-bob{animation-delay:-3.5s;}
.chip-bob .dot{width:7px; height:7px; border-radius:50%; background:#6EE7A8; flex:none; box-shadow:0 0 10px 2px rgba(110,231,168,.6); animation:chipPulse 2s ease-in-out infinite;}
@keyframes chipBob{0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);}}
@keyframes chipPulse{0%,100%{opacity:1;} 50%{opacity:.4;}}
@media (prefers-reduced-motion: reduce){.chip-bob, .tilt-card{animation:none; transition:none;}}
@media(max-width:640px){
  .chip-a{left:4%; top:4%;}
  .chip-b{right:4%; bottom:30%;}
  .chip-bob{font-size:11px; padding:8px 13px 8px 11px;}
}

/* bento analytics cluster */
.bento-cluster{
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; gap:14px;
  perspective:1200px;
}
.b-card{
  padding:22px; border-radius:var(--radius-m); background:var(--bg-1);
  border:1px solid var(--glass-border);
  transition:transform .12s linear, border-color var(--dur-s) var(--ease);
  transform-style:preserve-3d; will-change:transform;
}
.b-card.anchor{grid-column:1/3; padding:26px 26px 18px;}
.b-card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
.b-card-head .mono{font-size:11.5px; font-weight:500; letter-spacing:.1em; color:var(--ink-dim);}
.b-card-head .trend{font-family:var(--font-mono); font-size:13px; color:var(--violet-soft); font-weight:500;}
.b-card svg.sparkline{width:100%; height:64px;}
.b-card svg.sparkline path.line{fill:none; stroke:var(--violet-soft); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.b-card svg.sparkline path.fill{fill:url(#sparkFill); opacity:.5;}
.b-card-foot{margin-top:12px; font-size:11px; font-weight:500; letter-spacing:.08em; color:var(--ink-dim);}

.b-card.small{display:flex; flex-direction:column; justify-content:center; gap:6px;}
.b-card.small .mono{font-size:11px; font-weight:500; letter-spacing:.09em; color:var(--ink-dim);}
.b-card.small strong{font-family:var(--font-display); font-weight:500; font-size:28px; color:var(--ink);}
.b-card.small .sub{font-size:12px; color:var(--ink-dim);}

.marquee-wrap{position:relative; z-index:2; padding:26px 0 32px; border-top:1px solid var(--line);}
.marquee-label{text-align:center; font-family:var(--font-mono); font-size:11.5px; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:22px;}

.marquee-track{
  overflow:hidden; width:100%;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track + .marquee-track{margin-top:16px;}
.marquee-row{
  display:flex; align-items:center; gap:34px; width:max-content;
  animation:marqueeLeft 32s linear infinite;
}
.row-b{animation-name:marqueeRight;}
@keyframes marqueeLeft{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@keyframes marqueeRight{from{transform:translateX(-50%);} to{transform:translateX(0);}}
.marquee-track:hover .marquee-row{animation-play-state:paused;}
.marquee-row span, .marquee-row a{font-weight:500; font-size:14.5px; color:var(--ink-dim); white-space:nowrap; transition:color var(--dur-s) var(--ease); flex:none;}
.marquee-row span:hover, .marquee-row a:hover{color:var(--ink);}
@media (prefers-reduced-motion: reduce){.marquee-row{animation:none;}}
@media(max-width:640px){.marquee-row{gap:22px;} .marquee-row span, .marquee-row a{font-size:13px;}}

/* ============================= SECTIONS ============================= */
.section{padding:88px 0; position:relative; z-index:1;}
@media(max-width:768px){.section{padding:60px 0;}}
.section-head{max-width:600px; margin-bottom:56px;}
.section-head h2{font-size:clamp(27px,3.3vw,40px); font-weight:400;}
.section-head p{margin-top:14px; font-size:17px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}

/* ============================= ABOUT ============================= */
.about-grid{display:grid; grid-template-columns:1fr .85fr; gap:64px; align-items:center;}
@media(max-width:900px){.about-grid{grid-template-columns:1fr;}}
.about-copy p{font-size:16.5px; margin-bottom:16px;}
.about-copy p:first-of-type{font-size:16.5px; color:var(--ink);}
.pillars{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:28px;}
.pillar{padding:14px 16px; border-radius:var(--radius-s); display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; background:var(--bg-1); border:1px solid var(--glass-border);}
.pillar .dot{width:5px; height:5px; border-radius:50%; background:var(--violet-soft); flex:none;}

.about-visual{position:relative;}
.about-photo{
  width:100%; aspect-ratio:4/4.6; border-radius:var(--radius-l); overflow:hidden;
  position:relative; border:1px solid var(--glass-border);
}
.about-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.about-photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(12,8,23,0.05) 40%, rgba(12,8,23,0.75) 100%);
}
html[data-theme="light"] .about-photo::after{background:linear-gradient(180deg, rgba(27,21,48,0.02) 40%, rgba(27,21,48,0.55) 100%);}
.about-card{padding:26px 28px; position:absolute; left:20px; right:20px; bottom:20px; z-index:2; background:var(--glass-bg-2); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); border-radius:var(--radius-m);}
.about-card .figure{width:48px; height:48px; margin-bottom:20px;}
.about-card h3{font-size:19px; margin-bottom:10px;}
.about-card p{font-size:16px; line-height:1.6;}
@media(max-width:760px){
  .about-photo{aspect-ratio:4/3.2;}
  .about-card{position:static; left:auto; right:auto; bottom:auto; margin-top:16px; padding:22px 22px;}
}

/* ============================= DIFFERENCE — radial ring (5 cards around 1 center) ============================= */
.diff-ring{
  position:relative; width:100%; max-width:1440px; height:980px; margin:0 auto; z-index:0;
}
.diff-ring .diff-anchor{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:300px; z-index:2;}
.diff-ring .ring-card{position:absolute; width:320px; transform:translate(-50%,-50%); z-index:2;}
.diff-ring .ring-card.p1{top:10%; left:50%;}
.diff-ring .ring-card.p2{top:35%; left:87%;}
.diff-ring .ring-card.p3{top:84%; left:74%;}
.diff-ring .ring-card.p4{top:84%; left:26%;}
.diff-ring .ring-card.p5{top:35%; left:13%;}
.diff-links{position:absolute; inset:0; width:100%; height:100%; z-index:1; overflow:visible; pointer-events:none;}
.diff-links line{stroke:var(--violet-dim); stroke-width:1.5;}
.diff-links circle{fill:var(--violet-soft);}
.diff-links circle.pulse{animation:diffPulse 3s ease-in-out infinite;}
@keyframes diffPulse{0%,100%{opacity:.5; r:2.4;} 50%{opacity:1; r:3.2;}}
@media (prefers-reduced-motion: reduce){.diff-links circle.pulse{animation:none;}}

@media(max-width:900px){
  .diff-ring{position:static; height:auto; max-width:640px; display:flex; flex-direction:column; gap:14px;}
  .diff-ring .diff-anchor, .diff-ring .ring-card{position:static; transform:none; width:100%;}
  .diff-links{display:none;}
}

.diff-anchor{
  padding:34px; display:flex; flex-direction:column; justify-content:center; text-align:center; align-items:center;
  background:var(--bg-1); border:1px solid var(--violet-dim); border-radius:var(--radius-l); min-height:240px;
  box-shadow:0 20px 50px -28px rgba(139,92,246,0.5);
}
.diff-anchor .icon-lg{width:52px; height:52px; border-radius:var(--radius-s); background:var(--glass-bg-2); border:1px solid var(--glass-border); display:flex; align-items:center; justify-content:center; margin-bottom:22px;}
.diff-anchor .icon-lg svg{width:24px; height:24px; stroke:var(--violet-soft);}
.diff-anchor h3{font-size:26px; margin-bottom:14px; font-weight:400;}
.diff-anchor p{font-size:15px; max-width:300px;}

.diff-card{
  padding:22px; background:var(--bg-1); border:1px solid var(--glass-border); border-radius:var(--radius-m);
  transition:transform var(--dur-s) var(--ease), border-color var(--dur-s);
  display:flex; flex-direction:column; justify-content:center; text-align:center; align-items:center; min-height:190px;
}
.diff-card:hover{transform:translateY(-4px); border-color:var(--violet-dim);}
.diff-card .icon{width:38px; height:38px; border-radius:var(--radius-s); background:var(--glass-bg-2); border:1px solid var(--glass-border); display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.diff-card .icon svg{width:17px; height:17px; stroke:var(--violet-soft);}
.diff-card h4{font-size:19px; margin-bottom:9px; font-family:var(--font-display); font-weight:400; letter-spacing:.02em;}
.diff-card p{font-size:15.5px; line-height:1.6;}
@media(max-width:900px){.diff-card{min-height:0; text-align:left; align-items:flex-start;}}

/* ============================= SERVICES — bento first tile ============================= */
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media(max-width:900px){.svc-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.svc-grid{grid-template-columns:1fr;}}
.svc-card{
  padding:28px 24px; position:relative; overflow:hidden; background:var(--bg-1); border:1px solid var(--glass-border); border-radius:var(--radius-m);
  transition:transform var(--dur-m) var(--ease), border-color var(--dur-s);
}
.svc-card:hover{transform:translateY(-4px); border-color:var(--violet-dim);}
.svc-card.featured{grid-column:span 2; display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:center;}
@media(max-width:640px){.svc-card.featured{grid-column:span 1; grid-template-columns:1fr;}}
.svc-card .num{font-family:var(--font-mono); font-size:12px; font-weight:500; color:var(--ink-dim); margin-bottom:18px; display:block;}
.svc-badge{width:44px; height:44px; border-radius:var(--radius-s); margin-bottom:18px; display:flex; align-items:center; justify-content:center; background:var(--glass-bg-2); border:1px solid var(--glass-border);}
.svc-badge svg{width:20px; height:20px; stroke:var(--violet-soft);}
.svc-card h3{font-size:17.5px; margin-bottom:8px; font-weight:500;}
.svc-card p{font-size:16px; line-height:1.6;}

/* ============================= SERVICE TILES (Home teaser — glowing icon chips) ============================= */
.svc-tile-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media(max-width:860px){.svc-tile-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.svc-tile-grid{grid-template-columns:1fr;}}
.svc-tile{
  padding:30px 22px; text-align:center; background:var(--bg-1); border:1px solid var(--glass-border); border-radius:var(--radius-m);
  display:flex; flex-direction:column; align-items:center; cursor:default; position:relative; overflow:hidden;
  isolation:isolate;
  transition:transform var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
}
.svc-tile::before{
  content:''; position:absolute; top:-30%; left:50%; translate:-50% 0; width:180px; height:180px; border-radius:50%;
  background:radial-gradient(circle, rgba(139,92,246,0.30), transparent 70%); filter:blur(20px);
  opacity:0; transform:scale(.6); transition:opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease); z-index:0; pointer-events:none;
}
.svc-tile:hover::before{opacity:1; transform:scale(1);}
.svc-tile:hover{transform:translateY(-4px); border-color:var(--violet-dim); box-shadow:0 24px 44px -22px rgba(139,92,246,0.5);}
.svc-tile .svc-badge{
  position:relative; z-index:1; width:56px; height:56px; border-radius:16px; margin-bottom:18px; border:none; flex:none;
  background:linear-gradient(150deg, var(--violet-soft), var(--violet));
  box-shadow:0 14px 26px -10px rgba(139,92,246,0.6), inset 0 1px 0 rgba(255,255,255,0.35);
  transition:transform var(--dur-s) var(--ease);
}
.svc-tile:hover .svc-badge{transform:scale(1.08);}
.svc-tile .svc-badge svg{stroke:#fff; width:24px; height:24px;}
.svc-tile h4{position:relative; z-index:1; font-size:14.5px; font-weight:600; font-family:var(--font-body); letter-spacing:.01em; margin-bottom:8px;}
.svc-tile p{position:relative; z-index:1; font-size:14.8px; line-height:1.6; color:var(--ink-dim);}

.svc-tile.featured-tile{border-color:var(--violet-dim); box-shadow:0 20px 40px -20px rgba(139,92,246,0.5);}
.svc-tile.featured-tile::before{opacity:.7; transform:scale(1);}
.svc-tile.featured-tile .svc-badge{box-shadow:0 16px 30px -10px rgba(139,92,246,0.7), inset 0 1px 0 rgba(255,255,255,0.35);}
.tile-tag{
  position:absolute; top:14px; right:14px; z-index:1;
  font-family:var(--font-mono); font-size:9px; font-weight:500; letter-spacing:.07em; text-transform:uppercase;
  color:#fff; background:var(--violet); border-radius:var(--radius-full); padding:3px 9px;
}
@media (prefers-reduced-motion: reduce){.svc-tile{transition:none;}}

/* ============================= WORK ============================= */
.work-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media(max-width:900px){.work-grid{grid-template-columns:1fr;}}
.work-card{padding:0; overflow:hidden; position:relative; background:var(--bg-1); border:1px solid var(--glass-border); border-radius:var(--radius-m);}
.work-media{height:180px; position:relative; overflow:hidden; border-bottom:1px solid var(--glass-border);}
.work-media img{width:100%; height:100%; object-fit:cover; display:block;}
.work-media .grad{position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,8,23,0.1) 0%, rgba(12,8,23,0.7) 100%);}
html[data-theme="light"] .work-media .grad{background:linear-gradient(180deg, rgba(27,21,48,0.05) 0%, rgba(27,21,48,0.4) 100%);}
.work-media::after{content:''; position:absolute; inset:0; background:linear-gradient(160deg, rgba(139,92,246,0.25), transparent 60%); pointer-events:none;}
.work-tag{position:absolute; top:14px; left:14px; font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; padding:6px 11px; border-radius:var(--radius-full); background:rgba(12,8,23,0.5); color:#F3F0FC; backdrop-filter:blur(6px);}
.work-body{padding:22px 20px 24px;}
.work-body h3{font-size:16.5px; margin-bottom:8px; font-weight:500;}
.work-body p{font-size:16px; line-height:1.6; margin-bottom:13px;}
.work-more{
  font-family:var(--font-mono); font-size:12.5px; font-weight:500; letter-spacing:.05em; color:var(--violet-soft);
  display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:var(--radius-full);
  background:var(--glass-bg-2); border:1px solid var(--glass-border); cursor:pointer;
  transition:background var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease), transform var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.work-more:hover{background:var(--violet); border-color:var(--violet); color:#fff; transform:translateY(-2px);}

/* ============================= TESTIMONIALS ============================= */
.testi-wrap{position:relative; max-width:760px; margin:0 auto;}
.testi-card{padding:46px 42px; text-align:center; position:relative; background:var(--bg-1);}
@media(max-width:640px){.testi-card{padding:32px 20px;}}
#testiTrack{display:flex; flex-direction:column; justify-content:center; transition:min-height var(--dur-m) var(--ease);}
.testi-card .quote-mark{width:30px; height:30px; margin:0 auto 20px; stroke:var(--violet-soft);}
.testi-card p.quote{font-family:var(--font-body); font-style:italic; font-size:clamp(17px,2vw,21px); color:var(--ink); font-weight:400; line-height:1.5; margin-bottom:22px;}
.testi-meta{display:flex; align-items:center; justify-content:center; gap:12px;}
.testi-avatar{width:38px; height:38px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:11px; color:var(--violet-soft); background:var(--glass-bg-2); border:1px solid var(--glass-border);}
.testi-name{font-size:13px; font-weight:700; text-align:left;}
.testi-role{font-size:11px; color:var(--ink-faint); text-align:left;}
.testi-stars{margin-top:14px; color:var(--violet-soft); font-size:11px; letter-spacing:2px;}
.testi-dots{display:flex; justify-content:center; gap:8px;}
.testi-dots button{width:7px; height:7px; border-radius:50%; border:none; background:var(--line-strong); padding:0; transition:.3s;}
.testi-dots button.active{background:var(--violet-soft); width:22px; border-radius:6px;}

.testi-controls{display:flex; align-items:center; justify-content:center; gap:20px; margin-top:30px;}
.testi-arrow{
  width:38px; height:38px; border-radius:50%; flex:none;
  border:1px solid var(--glass-border); background:var(--bg-1);
  display:flex; align-items:center; justify-content:center;
  transition:transform var(--dur-s) var(--ease), background var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.testi-arrow:hover{background:var(--glass-bg-2); border-color:var(--violet-dim); transform:translateY(-2px);}
.testi-arrow svg{width:16px; height:16px; stroke:var(--violet-soft);}

/* ============================= CTA ============================= */
.cta-section{padding:100px 0 120px;}
@media(max-width:768px){.cta-section{padding:64px 0 80px;}}
.cta-box{position:relative; overflow:hidden; padding:70px 44px; text-align:center; border-radius:var(--radius-l); background:var(--bg-1); border:1px solid var(--glass-border);}
@media(max-width:640px){.cta-box{padding:48px 22px;}}
.cta-box h2{font-size:clamp(27px,3.8vw,42px); margin-bottom:14px; font-weight:400;}
.cta-box p{max-width:440px; margin:0 auto 30px; font-size:15.5px;}
.cta-ctas{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.cta-glow{position:absolute; width:260px; height:260px; border-radius:50%; filter:blur(60px); opacity:.18;}
.cta-glow.left{left:-70px; bottom:-90px; background:var(--violet);}
.cta-glow.right{right:-70px; top:-90px; background:var(--violet-soft);}

/* ============================= FOOTER ============================= */
footer{padding-top:70px; position:relative; z-index:1; border-top:1px solid var(--line);}
.footer-grid{display:grid; grid-template-columns:1.4fr .8fr .8fr 1.1fr; gap:36px; padding-bottom:50px;}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr; row-gap:36px;}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr;}}
.footer-brand p{font-size:15.5px; line-height:1.6; max-width:260px; margin:14px 0 18px;}
.footer-socials{display:flex; gap:9px;}
.footer-socials a{width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid var(--glass-border); background:var(--bg-1); transition:.3s var(--ease);}
.footer-socials a:hover{background:var(--violet); border-color:var(--violet);}
.footer-socials svg{width:14px; height:14px; stroke:var(--ink);}
.footer-socials a:hover svg{stroke:#fff;}
.footer-col h5{font-family:var(--font-mono); font-size:11.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:16px;}
.footer-col ul li{margin-bottom:11px;}
.footer-col a{font-size:14.5px; color:var(--ink-dim); transition:.25s;}
.footer-col a:hover{color:var(--violet-soft);}
.footer-col .contact-line{display:flex; gap:9px; align-items:flex-start; font-size:13.8px; color:var(--ink-dim); margin-bottom:13px;}
.footer-col .contact-line svg{width:14px; height:14px; flex:none; margin-top:2px; stroke:var(--violet-soft);}
.footer-bottom{border-top:1px solid var(--line); padding:20px 0 36px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}
.footer-bottom p{font-size:11.5px; color:var(--ink-faint);}
.footer-bottom .legal{display:flex; gap:16px;}
.footer-bottom .legal a{font-size:11.5px; color:var(--ink-faint);}
.footer-bottom .legal a:hover{color:var(--violet-soft);}

.float-wa{
  position:fixed; bottom:24px; right:24px; z-index:80; width:50px; height:50px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:#25D366; border:none;
  box-shadow:0 12px 26px -10px rgba(37,211,102,0.5);
  transition:transform var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
}
.float-wa:hover{transform:translateY(-3px); box-shadow:0 16px 30px -10px rgba(37,211,102,0.6);}
.float-wa svg{width:26px; height:26px; color:#fff;}
@media(max-width:900px){.float-wa{bottom:18px; right:18px; width:44px; height:44px;}}

.to-top{
  position:fixed; bottom:86px; right:24px; z-index:80; width:50px; height:50px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:var(--bg-1); border:1px solid var(--glass-border);
  box-shadow:0 12px 26px -10px rgba(139,92,246,0.3);
  transition:transform var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease), opacity var(--dur-s) var(--ease), visibility var(--dur-s) var(--ease);
  opacity:0; visibility:hidden; transform:translateY(8px);
}
.to-top.visible{opacity:1; visibility:visible; transform:translateY(0);}
.to-top:hover{transform:translateY(-3px); box-shadow:0 16px 30px -10px rgba(139,92,246,0.4);}
.to-top.visible:hover{transform:translateY(-3px);}
.to-top svg{width:18px; height:18px; stroke:var(--violet-soft);}
@media(max-width:900px){.to-top{bottom:70px; right:18px; width:44px; height:44px;}}

::selection{background:var(--violet); color:#fff;}
a:focus-visible, button:focus-visible{outline:2px solid var(--violet-soft); outline-offset:3px; border-radius:6px;}

/* ============================= STAT ROW (About) ============================= */
.stat-row{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.stat-item{padding:30px 18px; text-align:center; border-left:1px solid var(--line);}
.stat-item:first-child{border-left:none;}
.stat-item strong{display:block; font-family:var(--font-display); font-size:clamp(32px,4vw,48px); font-weight:400; color:var(--violet-soft); letter-spacing:.02em;}
.stat-item span{display:block; margin-top:6px; font-family:var(--font-mono); font-size:11.5px; font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-dim);}
@media(max-width:760px){.stat-row{grid-template-columns:1fr 1fr 1fr;} .stat-item{padding:22px 10px;}}
@media(max-width:520px){.stat-row{grid-template-columns:1fr 1fr;} .stat-item{border-left:none; border-top:1px solid var(--line);} .stat-item:nth-child(1),.stat-item:nth-child(2){border-top:none;} .stat-item:nth-child(odd){border-left:none;} .stat-item:nth-child(even){border-left:1px solid var(--line);}}

/* ============================= STORY LAYOUT (About) ============================= */
.story-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:start;}
@media(max-width:900px){.story-grid{grid-template-columns:1fr; gap:36px;}}
.story-quote{font-family:var(--font-display); font-weight:400; font-size:clamp(24px,3vw,36px); line-height:1.25; letter-spacing:.01em; color:var(--ink);}
.story-quote span{color:var(--violet-soft);}
.story-copy p{font-size:16.5px; margin-bottom:18px;}
.story-copy p:first-of-type{font-size:16.5px; color:var(--ink);}
.story-list{margin-top:26px; border-top:1px solid var(--line);}
.story-list-row{display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); font-size:14.5px; font-weight:600;}
.story-list-row .n{font-family:var(--font-mono); font-size:12px; font-weight:500; color:var(--violet-soft); flex:none; width:26px;}
.story-banner{margin-top:64px; border-radius:var(--radius-l); overflow:hidden; border:1px solid var(--glass-border); position:relative; aspect-ratio:16/6;}
.story-banner img{width:100%; height:100%; object-fit:cover;}
.story-banner::after{content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(12,8,23,0.55), transparent 55%);}
html[data-theme="light"] .story-banner::after{background:linear-gradient(90deg, rgba(27,21,48,0.35), transparent 55%);}
.story-banner-tag{position:absolute; left:28px; bottom:24px; z-index:2; color:#fff; font-family:var(--font-display); font-size:clamp(18px,2.4vw,26px); font-weight:400; max-width:360px;}

/* ============================= MISSION / VISION SPLIT (About) ============================= */
.mv-split{display:grid; grid-template-columns:1fr 1fr; margin-top:64px; border:1px solid var(--glass-border); border-radius:var(--radius-l); overflow:hidden;}
@media(max-width:760px){.mv-split{grid-template-columns:1fr;}}
.mv-panel{padding:44px 40px; position:relative;}
.mv-panel + .mv-panel{border-left:1px solid var(--glass-border);}
@media(max-width:760px){.mv-panel + .mv-panel{border-left:none; border-top:1px solid var(--glass-border);}}
.mv-panel .n{font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:.1em; color:var(--violet-soft); display:block; margin-bottom:16px;}
.mv-panel h4{font-size:20px; margin-bottom:12px;}
.mv-panel p{font-size:16px; line-height:1.65;}

/* ============================= SERVICE LIST (Services page) ============================= */
.service-list{border-top:1px solid var(--line);}
.service-row{display:grid; grid-template-columns:70px 1fr 1.3fr 24px; gap:26px; align-items:center; padding:30px 24px; margin:0 -24px; border-bottom:1px solid var(--line); border-radius:var(--radius-m); cursor:pointer; transition:transform var(--dur-m) var(--ease), background var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);}
.service-row:hover{background:var(--bg-1); border-bottom-color:var(--violet-dim); transform:translateY(-4px); box-shadow:var(--shadow-soft);}
@media(max-width:760px){.service-row{grid-template-columns:1fr 24px; gap:10px; padding:24px 16px; margin:0 -16px;} .service-row .t{grid-column:1/2;} .service-row > p{grid-column:1/2;}}
.service-row .n{font-family:var(--font-mono); font-size:14px; font-weight:500; color:var(--ink-dim);}
.service-row .t{display:flex; align-items:center; gap:16px;}
.service-row .t .svc-badge{margin:0; flex:none;}
.service-row h3{font-size:19px; font-weight:500;}
.service-row p{font-size:16px; line-height:1.6; max-width:480px;}
.service-row .row-chevron{width:18px; height:18px; stroke:var(--ink-faint); flex:none; transition:transform var(--dur-s) var(--ease), stroke var(--dur-s) var(--ease);}
.service-row:hover .row-chevron{stroke:var(--violet-soft);}
.service-row.open .row-chevron{transform:rotate(180deg); stroke:var(--violet-soft);}
.service-detail{grid-column:1/-1; max-height:0; opacity:0; overflow:hidden; transition:max-height var(--dur-m) var(--ease), opacity var(--dur-s) var(--ease), margin-top var(--dur-m) var(--ease); margin-top:0; padding-left:96px;}
@media(max-width:760px){.service-detail{padding-left:0;}}
.service-row.open .service-detail{max-height:220px; opacity:1; margin-top:18px;}
.service-detail ul{display:grid; grid-template-columns:1fr 1fr; gap:10px 24px;}
@media(max-width:520px){.service-detail ul{grid-template-columns:1fr;}}

.service-row.featured-service{background:var(--bg-1); border-color:var(--violet-dim); border-bottom-color:var(--violet-dim); box-shadow:0 20px 40px -24px rgba(139,92,246,0.5);}
.service-row.featured-service .svc-badge{background:linear-gradient(150deg, var(--violet-soft), var(--violet)); border:none; box-shadow:0 10px 20px -8px rgba(139,92,246,0.6);}
.service-row.featured-service .svc-badge svg{stroke:#fff;}
.service-row.featured-service .t{flex-wrap:wrap; row-gap:6px;}
.featured-tag{
  font-family:var(--font-mono); font-size:9.5px; font-weight:500; letter-spacing:.07em; text-transform:uppercase;
  color:var(--violet-soft); background:var(--glass-bg-2); border:1px solid var(--glass-border); border-radius:var(--radius-full);
  padding:3px 10px; margin-left:2px;
}
.service-detail li{font-size:15.5px; line-height:1.5; color:var(--ink-dim); padding-left:18px; position:relative;}
.service-detail li::before{content:''; position:absolute; left:0; top:9px; width:5px; height:5px; border-radius:50%; background:var(--violet-soft);}

/* ============================= CASE STUDY ROWS (Work page) ============================= */
.case-list{display:flex; flex-direction:column; gap:90px;}
.case-row{display:grid; grid-template-columns:1.1fr .9fr; gap:52px; align-items:center;}
.case-row.rev{grid-template-columns:.9fr 1.1fr;}
.case-row.rev .case-media{order:2;}
@media(max-width:860px){.case-row, .case-row.rev{grid-template-columns:1fr;} .case-row.rev .case-media{order:0;}}
.case-media{position:relative; border-radius:var(--radius-l); overflow:hidden; border:1px solid var(--glass-border); aspect-ratio:5/4;}
.case-media img{width:100%; height:100%; object-fit:cover;}
.case-media::after{content:''; position:absolute; inset:0; background:linear-gradient(160deg, rgba(139,92,246,0.22), transparent 60%); pointer-events:none;}
.case-tag{position:absolute; top:16px; left:16px; font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; padding:6px 11px; border-radius:var(--radius-full); background:rgba(12,8,23,0.5); color:#F3F0FC; backdrop-filter:blur(6px); z-index:2;}
.case-copy h3{font-size:clamp(22px,2.6vw,30px); font-weight:400; margin-bottom:14px;}
.case-copy p{font-size:16.5px; line-height:1.65; margin-bottom:22px;}
.case-stats{display:flex; gap:28px; margin-bottom:22px; flex-wrap:wrap;}
.case-stats div strong{display:block; font-family:var(--font-display); font-size:26px; font-weight:400; color:var(--violet-soft);}
.case-stats div span{font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-dim);}

/* ============================= QUOTE WALL (Work page testimonials) ============================= */
.quote-wall{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media(max-width:760px){.quote-wall{grid-template-columns:1fr;}}
.quote-tile{padding:30px 28px; background:var(--bg-1); border:1px solid var(--glass-border); border-radius:var(--radius-m);}
.quote-tile .quote-mark{width:24px; height:24px; margin-bottom:16px; stroke:var(--violet-soft);}
.quote-tile p.q{font-size:16px; color:var(--ink); line-height:1.6; margin-bottom:18px;}
.quote-tile .who{display:flex; align-items:center; gap:11px;}
.quote-tile .who .av{width:34px; height:34px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:10.5px; color:var(--violet-soft); background:var(--glass-bg-2); border:1px solid var(--glass-border);}
.quote-tile .who .name{font-size:12.5px; font-weight:700;}
.quote-tile .who .role{font-size:10.5px; color:var(--ink-faint);}

/* ============================= CONTACT SPLIT (Contact page) ============================= */
.contact-split{display:grid; grid-template-columns:1fr .85fr; gap:0; border:1px solid var(--glass-border); border-radius:var(--radius-l); overflow:hidden;}
@media(max-width:860px){.contact-split{grid-template-columns:1fr;}}
.contact-info-col{padding:52px 48px; background:var(--bg-1);}
@media(max-width:640px){.contact-info-col{padding:36px 26px;}}
.contact-info-col h2{font-size:clamp(22px,2.6vw,28px); font-weight:400; margin-bottom:28px;}
.contact-row{display:flex; align-items:flex-start; gap:16px; padding:20px 0; border-top:1px solid var(--line);}
.contact-row:last-child{border-bottom:1px solid var(--line);}
.contact-row .ic{width:38px; height:38px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; background:var(--glass-bg-2); border:1px solid var(--glass-border);}
.contact-row .ic svg{width:16px; height:16px; stroke:var(--violet-soft);}
.contact-row .label{font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:5px;}
.contact-row .val{font-size:15px; font-weight:600;}
.contact-row .val a{display:block;}
.contact-panel{padding:52px 44px; background:var(--bg-2); display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden;}
@media(max-width:640px){.contact-panel{padding:36px 26px;}}
.contact-panel .glow{position:absolute; width:220px; height:220px; border-radius:50%; background:var(--violet); opacity:.16; filter:blur(60px); top:-60px; right:-60px;}
.contact-panel .eyebrow{position:relative; z-index:1;}
.contact-panel h3{position:relative; z-index:1; font-size:24px; font-weight:400; margin-bottom:14px;}
.contact-panel p{position:relative; z-index:1; font-size:16px; line-height:1.6; margin-bottom:26px;}
.contact-panel .btn{position:relative; z-index:1; width:fit-content;}
.contact-panel .mini-stats{position:relative; z-index:1; display:flex; gap:26px; margin-top:34px; padding-top:26px; border-top:1px solid var(--line);}
.contact-panel .mini-stats div strong{display:block; font-family:var(--font-display); font-size:22px; font-weight:400; color:var(--violet-soft);}
.contact-panel .mini-stats div span{font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim);}

/* ============================= QUOTE MODAL ============================= */
.quote-overlay{position:fixed; inset:0; z-index:200; background:rgba(12,8,23,0.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; visibility:hidden; transition:opacity var(--dur-m) var(--ease), visibility var(--dur-m) var(--ease);}
html[data-theme="light"] .quote-overlay{background:rgba(27,21,48,0.45);}
.quote-overlay.open{opacity:1; visibility:visible;}
.quote-modal{position:relative; width:100%; max-width:920px; max-height:88vh; overflow-y:auto; background:var(--bg-1); border:1px solid var(--glass-border); border-radius:var(--radius-l); box-shadow:var(--shadow-soft); padding:46px 42px; transform:translateY(18px) scale(.98); transition:transform var(--dur-m) var(--ease), max-width var(--dur-m) var(--ease);}
.quote-modal:has(#quoteStep2:not([hidden])){max-width:600px;}
@media(max-width:640px){.quote-modal{padding:64px 22px 32px;}}
.quote-overlay.open .quote-modal{transform:translateY(0) scale(1);}
.quote-close{position:absolute; top:20px; right:20px; z-index:2; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--glass-bg-2); border:1px solid var(--glass-border); transition:background var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);}
.quote-close:hover{background:var(--glass-bg); transform:rotate(90deg);}
.quote-close svg{width:15px; height:15px; stroke:var(--ink);}

.quote-step-head h3{font-size:clamp(22px,2.6vw,28px); font-weight:400; margin:10px 0 8px;}
.quote-step-head p{font-size:13.5px; margin-bottom:28px;}

.qc-accordion{display:flex; flex-direction:column; gap:10px;}
.qc-cat{border-radius:var(--radius-m); overflow:hidden; border:1px solid var(--glass-border); background:var(--bg-2);}
.qc-cat-head{width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; background:transparent; border:none; color:var(--ink); font-family:var(--font-body); font-weight:600; font-size:14px; cursor:pointer; text-align:left;}
.qc-cat.open .qc-cat-head{background:var(--violet); color:#fff;}
.qc-cat-head svg{width:16px; height:16px; stroke:currentColor; flex:none; transition:transform var(--dur-s) var(--ease);}
.qc-cat.open .qc-cat-head svg{transform:rotate(180deg);}
.qc-cat-body{max-height:0; overflow:hidden; transition:max-height var(--dur-m) var(--ease);}
.qc-cat.open .qc-cat-body{max-height:700px;}
.qc-row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 20px; border-top:1px solid var(--line);}
.qc-row .lbl{font-size:15px; font-weight:600; color:var(--ink);}
.qc-row .right{display:flex; align-items:center; gap:14px; flex:none;}
.qc-row .unit{font-size:11.5px; color:var(--ink-dim); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.04em; white-space:nowrap;}
.qc-stepper{display:flex; align-items:center; gap:8px;}
.qc-stepper button{width:26px; height:26px; border-radius:6px; background:var(--glass-bg-2); border:1px solid var(--glass-border); color:var(--ink); font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center; transition:background var(--dur-s) var(--ease);}
.qc-stepper button:hover{background:var(--violet); color:#fff; border-color:var(--violet);}
.qc-stepper span{min-width:18px; text-align:center; font-family:var(--font-mono); font-size:13px;}
.qc-check{width:20px; height:20px; border-radius:5px; border:1px solid var(--glass-border); background:var(--glass-bg-2); cursor:pointer; appearance:none; -webkit-appearance:none; position:relative; flex:none;}
.qc-check:checked{background:var(--violet); border-color:var(--violet);}
.qc-check:checked::after{content:''; position:absolute; left:6px; top:2px; width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);}
.qc-row-text{flex-direction:column; align-items:stretch; gap:10px;}
.qc-text{width:100%; resize:vertical; min-height:64px; padding:11px 14px; border-radius:var(--radius-s); border:1px solid var(--glass-border); background:var(--bg-2); color:var(--ink); font-family:var(--font-body); font-size:13.5px; line-height:1.5;}
.qc-text::placeholder{color:var(--ink-faint);}
.qc-text:focus{outline:none; border-color:var(--violet-soft);}

.quote-step-foot{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:28px; padding-top:22px; border-top:1px solid var(--line); flex-wrap:wrap;}
.quote-step-foot .mono{font-size:12.5px; font-weight:500; color:var(--ink-dim);}

.quote-grid{display:grid; grid-template-columns:1fr;}
.quote-back{background:none; border:none; color:var(--violet-soft); font-size:13px; font-weight:600; margin-bottom:22px; cursor:pointer; padding:0; font-family:var(--font-body);}
.quote-sidebar .contact-row{padding:16px 0;}
.quote-form h3{font-size:clamp(20px,2.4vw,26px); font-weight:400; margin:10px 0 24px;}
.quote-form label{display:block; font-size:12px; font-weight:600; margin-bottom:16px; color:var(--ink-dim);}
.quote-form input, .quote-form textarea{width:100%; margin-top:7px; padding:11px 14px; border-radius:var(--radius-s); border:1px solid var(--glass-border); background:var(--bg-2); color:var(--ink); font-family:var(--font-body); font-size:13.5px;}
.quote-form input::placeholder, .quote-form textarea::placeholder{color:var(--ink-faint);}
.quote-form textarea{resize:vertical;}
.qf-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media(max-width:520px){.qf-row{grid-template-columns:1fr;}}
.qf-radio-row{display:flex; gap:22px; margin-bottom:18px; font-size:13px; font-weight:600; color:var(--ink-dim);}
.qf-radio-row label{display:flex; align-items:center; gap:7px; margin:0; font-size:13px; font-weight:600; cursor:pointer;}
.qf-radio-row input[type="radio"]{accent-color:var(--violet); width:15px; height:15px; margin:0;}
.quote-submit{width:100%; justify-content:center; margin-top:6px;}

/* ============================= CASE STUDY MODAL ============================= */
.case-overlay{position:fixed; inset:0; z-index:200; background:rgba(12,8,23,0.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; visibility:hidden; transition:opacity var(--dur-m) var(--ease), visibility var(--dur-m) var(--ease);}
html[data-theme="light"] .case-overlay{background:rgba(27,21,48,0.45);}
.case-overlay.open{opacity:1; visibility:visible;}
.case-modal{position:relative; width:100%; max-width:760px; max-height:88vh; overflow-y:auto; background:var(--bg-1); border:1px solid var(--glass-border); border-radius:var(--radius-l); box-shadow:var(--shadow-soft); padding:50px 46px; transform:translateY(18px) scale(.98); transition:transform var(--dur-m) var(--ease);}
@media(max-width:640px){.case-modal{padding:60px 22px 36px;}}
.case-overlay.open .case-modal{transform:translateY(0) scale(1);}

.case-head{margin-bottom:34px;}
.case-head .tag{font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:.06em; color:var(--ink-dim); text-transform:uppercase; margin-top:8px;}
.case-head h2{font-size:clamp(26px,3.4vw,36px); font-weight:400; margin-top:8px;}

.case-block{margin-bottom:32px;}
.case-block:last-child{margin-bottom:0;}
.case-block .label{font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--violet-soft); margin-bottom:12px; display:block;}
.case-block p{font-size:15.5px; line-height:1.65;}
.case-block ul{display:flex; flex-direction:column; gap:10px;}
.case-block li{font-size:15.5px; line-height:1.6; color:var(--ink-dim); padding-left:20px; position:relative;}
.case-block li::before{content:''; position:absolute; left:0; top:8px; width:5px; height:5px; border-radius:50%; background:var(--violet-soft);}
.case-block li strong{color:var(--ink); font-weight:600;}

.case-solutions{display:flex; flex-direction:column; gap:16px;}
.case-solution{padding:18px 20px; background:var(--bg-2); border:1px solid var(--glass-border); border-radius:var(--radius-m);}
.case-solution h5{font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink); margin-bottom:8px;}
.case-solution p{font-size:15px; line-height:1.6; color:var(--ink-dim);}

.case-results li strong{color:var(--violet-soft);}

.case-conclusion{padding:24px 26px; background:var(--glass-bg-2); border:1px solid var(--glass-border); border-radius:var(--radius-m); font-style:italic;}
.case-conclusion p{font-size:14.5px; line-height:1.6; color:var(--ink);}

/* ============================= MINI CASE GRID (More Success Stories) ============================= */
.mini-case-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media(max-width:900px){.mini-case-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.mini-case-grid{grid-template-columns:1fr;}}
.mini-case{
  display:flex; flex-direction:column; padding:26px 24px; background:var(--bg-1); border:1px solid var(--glass-border); border-radius:var(--radius-m);
  transition:transform var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
}
.mini-case:hover{transform:translateY(-4px); border-color:var(--violet-dim); box-shadow:var(--shadow-soft);}
.mini-case .tag{font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.07em; text-transform:uppercase; color:var(--violet-soft); margin-bottom:14px;}
.mini-case h3{font-size:19px; font-weight:400; margin-bottom:10px;}
.mini-case p{font-size:14.5px; line-height:1.55; color:var(--ink-dim); margin-bottom:18px; flex:1;}
.mini-case .stat{font-family:var(--font-display); font-size:24px; color:var(--violet-soft); font-weight:400; margin-bottom:2px;}
.mini-case .stat-label{font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:16px; display:block;}
.mini-case a.work-more{align-self:flex-start;}

/* ============================= CHATBOT ============================= */
.chat-overlay{
  position:fixed; inset:0; z-index:210; background:rgba(12,8,23,0.6); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:flex-end; justify-content:flex-end; padding:24px; opacity:0; visibility:hidden;
  transition:opacity var(--dur-m) var(--ease), visibility var(--dur-m) var(--ease);
}
html[data-theme="light"] .chat-overlay{background:rgba(27,21,48,0.35);}
.chat-overlay.open{opacity:1; visibility:visible;}
.chat-panel{
  width:100%; max-width:400px; height:min(600px, 82vh); display:flex; flex-direction:column;
  background:var(--bg-1); border:1px solid var(--glass-border); border-radius:var(--radius-l); box-shadow:var(--shadow-soft);
  overflow:hidden; transform:translateY(16px) scale(.98); transition:transform var(--dur-m) var(--ease);
}
.chat-overlay.open .chat-panel{transform:translateY(0) scale(1);}
@media(max-width:480px){.chat-overlay{padding:0;} .chat-panel{max-width:none; height:100%; border-radius:0;}}

.chat-header{display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line); background:var(--bg-2); flex:none;}
.chat-header .av{width:36px; height:36px; border-radius:50%; flex:none; overflow:hidden; background:linear-gradient(150deg, var(--violet-soft), var(--violet)); display:flex; align-items:center; justify-content:center;}
.chat-header .av svg{width:20px; height:20px;}
.chat-header .who{flex:1; min-width:0;}
.chat-header .who strong{display:block; font-size:13.5px; font-weight:700;}
.chat-header .who span{display:block; font-size:11px; color:var(--ink-faint);}
.chat-header .who .dot{display:inline-block; width:6px; height:6px; border-radius:50%; background:#3FCF7A; margin-right:5px;}
.chat-close{width:30px; height:30px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; background:var(--glass-bg-2); border:1px solid var(--glass-border);}
.chat-close svg{width:13px; height:13px; stroke:var(--ink);}

.chat-body{flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:14px;}
.chat-msg{max-width:85%; font-size:13.5px; line-height:1.55; padding:11px 14px; border-radius:14px;}
.chat-msg.bot{align-self:flex-start; background:var(--bg-2); color:var(--ink); border-bottom-left-radius:4px;}
.chat-msg.user{align-self:flex-end; background:var(--violet); color:#fff; border-bottom-right-radius:4px;}
.chat-topics{display:flex; flex-direction:column; gap:8px; margin-top:4px;}
.chat-topics.inline{margin-top:2px;}
.chat-chip{
  text-align:left; padding:10px 14px; border-radius:var(--radius-m); background:var(--glass-bg-2); border:1px solid var(--glass-border);
  color:var(--ink); font-size:13px; font-family:var(--font-body); cursor:pointer; transition:background var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.chat-chip:hover{background:var(--violet); border-color:var(--violet); color:#fff;}
.chat-back{align-self:flex-start; background:none; border:none; color:var(--violet-soft); font-size:12.5px; font-weight:600; cursor:pointer; padding:2px 0; font-family:var(--font-body);}
.chat-foot{padding:12px 18px; border-top:1px solid var(--line); flex:none; text-align:center;}
.chat-foot span{font-size:11px; color:var(--ink-faint);}
.chat-foot a{color:var(--violet-soft); font-weight:600;}

/* ============================= GROWTH FUNNEL (3D) ============================= */
.funnel-hero{overflow:hidden; padding:110px 0 70px; border-top:1px solid var(--line);}
.funnel-hero .hero-grid{-webkit-mask-image:radial-gradient(60% 60% at 30% 50%, #000 30%, transparent 78%); mask-image:radial-gradient(60% 60% at 30% 50%, #000 30%, transparent 78%);}
.funnel-hero::before{content:""; position:absolute; left:10%; top:50%; width:700px; height:600px; transform:translateY(-50%); border-radius:50%; background:radial-gradient(circle, rgba(139,92,246,0.22), transparent 68%); filter:blur(60px); pointer-events:none;}
.funnel-split{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr 1fr; gap:24px; align-items:center;}
@media(min-width:981px){
  .funnel-split{min-height:calc(100vh - 180px);}
  .funnel-split .funnel-copy{align-items:flex-start; text-align:left; margin:0; max-width:560px;}
  .funnel-split .funnel-copy .lead{margin-left:0; margin-right:0;}
  .funnel-split .hero-ctas-center{justify-content:flex-start;}
  .funnel-split .funnel-stage{height:min(620px, calc(100vh - 180px)); min-height:480px;}
}
.funnel-title{font-size:clamp(34px,4.4vw,64px); font-weight:400; letter-spacing:-.015em;}
.funnel-title em{font-style:normal; color:var(--violet-soft);}
@media(max-width:980px){.funnel-split{grid-template-columns:1fr; gap:24px;} .funnel-hero{padding:90px 0 50px;}}
.funnel-stage{position:relative; height:560px;}
@media(max-width:980px){.funnel-stage{height:460px; order:2;}}
@media(max-width:520px){.funnel-stage{height:400px;}}
.funnel-canvas{position:absolute; inset:0; width:100%; height:100%; display:block;}
.funnel-label{
  position:absolute; left:0; top:0; z-index:2; pointer-events:none; white-space:nowrap;
  padding:7px 13px; border-radius:var(--radius-full); margin-left:-10px;
  background:var(--glass-bg-2); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-border); box-shadow:0 12px 26px -12px rgba(0,0,0,.5);
  font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--ink);
}
.funnel-label.is-win{color:#0f5132; background:#6EE7A8; border-color:transparent;}
html[data-theme="dark"] .funnel-label.is-win{color:#062a1a;}
@media(max-width:520px){.funnel-label{font-size:9.5px; padding:5px 10px;}}

.funnel-copy h2{font-size:clamp(28px,3.4vw,44px); font-weight:400; margin-bottom:16px;}
.funnel-copy h2 em{font-style:normal; color:var(--violet-soft);}
.funnel-copy > p{font-size:16.5px; max-width:520px; margin-bottom:26px;}
.funnel-steps{list-style:none; display:flex; flex-direction:column; gap:4px; margin-bottom:30px; border-top:1px solid var(--line);}
.funnel-steps li{display:flex; gap:16px; padding:14px 0; border-bottom:1px solid var(--line);}
.funnel-steps .n{font-size:12px; color:var(--violet-soft); padding-top:3px; flex:none; width:22px;}
.funnel-steps strong{display:block; font-size:15.5px; font-weight:700; color:var(--ink); margin-bottom:3px;}
.funnel-steps li span:not(.n){font-size:14px; color:var(--ink-dim); line-height:1.55;}

.about-copy p{text-align:justify; hyphens:none;}

/* quote form: honeypot + send status */
.qf-trap{position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; pointer-events:none;}
.qf-status{margin-top:12px; font-size:13.5px; line-height:1.5; color:#F87171;}
.qf-status.is-ok{color:#34D399;}
html[data-theme="light"] .qf-status{color:#DC2626;}
html[data-theme="light"] .qf-status.is-ok{color:#059669;}

/* ---- video testimonials ---- */
.vt-head{margin-top:56px; text-align:center;}
.vt-grid{display:grid; grid-template-columns:repeat(3, minmax(0, 300px)); gap:24px; justify-content:center; margin-top:8px;}
.vt-card{position:relative; aspect-ratio:9/16; border-radius:var(--radius-l); overflow:hidden; background:#0c0817; border:1px solid var(--glass-border);}
.vt-card video{width:100%; height:100%; object-fit:cover; display:block;}
.vt-play{position:absolute; inset:0; margin:auto; width:64px; height:64px; border-radius:50%; display:grid; place-items:center; color:#fff; background:rgba(139,92,246,0.9); box-shadow:0 10px 30px rgba(0,0,0,0.35); transition:transform var(--dur-s) var(--ease), opacity var(--dur-s) var(--ease);}
.vt-play svg{width:26px; height:26px; margin-left:3px;}
.vt-card:hover .vt-play{transform:scale(1.08);}
.vt-card.is-playing .vt-play{opacity:0; pointer-events:none;}
@media(max-width:820px){
  .vt-grid{grid-template-columns:repeat(3, 72%); justify-content:flex-start; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; -webkit-overflow-scrolling:touch;}
  .vt-card{scroll-snap-align:center;}
}