/* ===========================================================
   SYNTHEXPA — Landing page styles
   Brand: navy + cyan/violet, Saira Condensed / Chakra Petch / Teko
   =========================================================== */
:root{
  --navy:#070b1a; --navy2:#0a1126; --panel:#0d1630; --panel2:#101b3a;
  --blue:#1f6bff; --cyan:#22d8ff; --violet:#9a6bff;
  --ink:#eef4ff; --mut:#9fb4d8; --mut2:#647aa6; --line:rgba(120,160,230,.14);
  --good:#34e6a8;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Saira',system-ui,sans-serif; color:var(--ink); background:var(--navy);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.wrap{ width:min(1200px,92vw); margin:0 auto; }
.cyan{ color:var(--cyan); }
.mono{ font-family:'Chakra Petch',monospace; }
.cond{ font-family:'Saira Condensed',sans-serif; }

/* shared decorative bg */
.bg-deco{ position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 50% at 80% -5%, rgba(33,107,255,.18), transparent 60%),
    radial-gradient(50% 40% at 10% 10%, rgba(154,107,255,.12), transparent 60%),
    var(--navy); }
.bg-grid{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(60,130,235,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(60,130,235,.05) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(80% 60% at 50% 0%, #000 30%, transparent 80%); }
main, header, footer{ position:relative; z-index:1; }

/* ---------------- NAV ---------------- */
.nav{ position:sticky; top:0; z-index:50; backdrop-filter:blur(14px);
  background:linear-gradient(180deg,rgba(7,11,26,.92),rgba(7,11,26,.6)); border-bottom:1px solid var(--line); }
.nav .row{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; }
.brand{ display:flex; align-items:center; gap:13px; }
.brand .nm{ font-family:'Saira Condensed'; font-weight:800; font-style:italic; font-size:27px; letter-spacing:.01em;
  background:linear-gradient(180deg,#fff,#7fd6ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.brand .tld{ font-family:'Chakra Petch'; font-size:11.5px; color:var(--mut); letter-spacing:.34em;
  text-transform:uppercase; margin-top:1px; }
.navlinks{ display:flex; align-items:center; gap:34px; }
.navlinks a{ font-size:16px; color:var(--mut); font-weight:500; transition:color .2s; }
.navlinks a:hover{ color:var(--ink); }
.btn{ display:inline-flex; align-items:center; gap:10px; font-family:'Saira Condensed'; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; border:none; cursor:pointer; transition:transform .15s, box-shadow .2s; }
.btn-pri{ padding:14px 26px; font-size:18px; border-radius:12px; color:#061027;
  background:linear-gradient(90deg,var(--cyan),var(--blue)); box-shadow:0 10px 30px rgba(20,90,220,.4); }
.btn-pri:hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(20,90,220,.55); }
/* darker nav CTA */
.nav .btn-pri{ background:linear-gradient(150deg,#16306a,#0c1b3e); color:#dcecff; border:1px solid rgba(34,200,255,.35);
  box-shadow:0 8px 22px rgba(6,12,30,.5); }
.nav .btn-pri:hover{ background:linear-gradient(150deg,#1c3c82,#102554); border-color:rgba(34,200,255,.6);
  box-shadow:0 12px 30px rgba(8,16,40,.6); }
.btn-ghost{ padding:14px 26px; font-size:18px; border-radius:12px; color:var(--ink);
  background:rgba(20,36,74,.6); border:1px solid var(--line); }
.btn-ghost:hover{ border-color:rgba(34,200,255,.5); }
.btn-lg{ padding:18px 34px; font-size:21px; border-radius:14px; }
.nav-toggle{ display:none; }

/* ---------------- HERO ---------------- */
.hero{ padding:88px 0 70px; position:relative; }
.hero .grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:50px; align-items:center; }
.eyebrow{ display:inline-flex; align-items:center; gap:11px; padding:9px 18px; border-radius:100px;
  border:1px solid rgba(34,200,255,.3); background:rgba(20,40,90,.4); font-family:'Chakra Petch'; font-size:14px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); margin-bottom:26px; }
.eyebrow .d{ width:9px; height:9px; border-radius:50%; background:var(--good); box-shadow:0 0 10px var(--good); }
h1.hero-h{ font-family:'Saira Condensed'; font-weight:800; font-size:clamp(46px,6vw,86px); line-height:.96;
  text-transform:uppercase; letter-spacing:.004em; }
.hero-sub{ font-size:clamp(18px,2vw,22px); color:var(--mut); line-height:1.5; margin:24px 0 34px; max-width:560px; }
.hero-sub b{ color:#dce8fb; font-weight:600; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.hero-meta{ display:flex; gap:30px; margin-top:40px; flex-wrap:wrap; }
.hero-meta .m .n{ font-family:'Teko'; font-weight:700; font-size:48px; line-height:.8; color:#fff; }
.hero-meta .m .n .cy{ color:var(--cyan); }
.hero-meta .m .l{ font-size:15px; color:var(--mut); margin-top:4px; }

/* hero visual: live code editor + AI agent workflow */
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }
.hero-vis{ position:relative; height:460px; }
.hero-vis .halo{ position:absolute; width:380px; height:380px; border-radius:50%; left:50%; top:42%; transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(33,160,255,.28),transparent 70%); filter:blur(8px); pointer-events:none; }

/* --- code editor window --- */
.code-win{ position:absolute; top:0; left:0; width:90%; border-radius:16px; overflow:hidden;
  background:#0a1026; border:1px solid var(--line); box-shadow:0 30px 70px rgba(0,0,0,.5);
  animation:float 7s ease-in-out infinite; z-index:2; }
.code-win .bar{ display:flex; align-items:center; gap:8px; padding:13px 16px; background:#0c1430; border-bottom:1px solid var(--line); }
.code-win .bar i{ width:11px; height:11px; border-radius:50%; }
.code-win .bar i:nth-child(1){ background:#ff5f57; } .code-win .bar i:nth-child(2){ background:#febc2e; } .code-win .bar i:nth-child(3){ background:#28c840; }
.code-win .bar .fn{ margin-left:10px; font-family:'Chakra Petch'; font-size:13px; color:var(--mut2); letter-spacing:.04em; }
.code-win .body{ padding:18px 18px 20px; font-family:'Chakra Petch',ui-monospace,monospace; font-size:14.5px; line-height:1.65;
  min-height:222px; }
.code-win .cl{ display:flex; gap:14px; white-space:pre; }
.code-win .cl .no{ color:#36507f; width:18px; text-align:right; flex:0 0 18px; user-select:none; }
.code-win .cl .tx{ flex:1; }
.code-win .caret{ display:inline-block; width:8px; height:17px; background:var(--cyan); vertical-align:-3px; margin-left:1px;
  box-shadow:0 0 8px var(--cyan); animation:blink 1s steps(1) infinite; }
@keyframes blink{ 0%,50%{ opacity:1; } 50.01%,100%{ opacity:0; } }
.kw{ color:#c78bff; } .fnn{ color:#5fd0ff; } .st{ color:#5ee6a8; } .nm{ color:#ffb86b; }
.cm{ color:#54688f; } .pn{ color:#9fb6dd; } .vr{ color:#e6eefb; }
.code-win .runline{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line); display:flex; align-items:center; gap:9px;
  font-family:'Chakra Petch'; font-size:13px; color:var(--good); opacity:0; transition:opacity .4s; }
.code-win .runline.on{ opacity:1; }
.code-win .runline .dt{ width:9px; height:9px; border-radius:50%; background:var(--good); box-shadow:0 0 10px var(--good); }

/* --- AI agent workflow card --- */
.flow-card{ position:absolute; right:0; bottom:0; width:80%; border-radius:16px; padding:20px 22px; z-index:3;
  background:linear-gradient(160deg,rgba(16,27,58,.97),rgba(10,17,38,.97)); border:1px solid rgba(34,200,255,.22);
  box-shadow:0 30px 70px rgba(0,0,0,.55); animation:float 8s ease-in-out infinite .6s; }
.flow-card .hd{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.flow-card .hd .ti{ font-family:'Chakra Petch'; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); }
.flow-card .hd .live{ display:flex; align-items:center; gap:7px; font-family:'Chakra Petch'; font-size:12px; color:var(--cyan); }
.flow-card .hd .live .d{ width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); animation:livedot 1.4s ease-in-out infinite; }
@keyframes livedot{ 0%,100%{ opacity:.4; } 50%{ opacity:1; } }
.wf{ display:flex; align-items:center; justify-content:space-between; gap:6px; }
.wf .node{ display:flex; flex-direction:column; align-items:center; gap:8px; flex:0 0 auto; width:60px; }
.wf .node .ic{ width:50px; height:50px; border-radius:14px; display:grid; place-items:center;
  background:rgba(20,38,84,.8); border:1px solid var(--line); transition:all .3s; }
.wf .node .ic svg{ width:24px; height:24px; stroke:var(--mut); fill:none; stroke-width:1.8; transition:stroke .3s; }
.wf .node .lb{ font-family:'Chakra Petch'; font-size:11px; color:var(--mut2); letter-spacing:.02em; text-align:center; transition:color .3s; }
.wf .node.active .ic{ background:linear-gradient(150deg,rgba(34,200,255,.3),rgba(31,107,255,.2)); border-color:var(--cyan);
  box-shadow:0 0 20px rgba(34,200,255,.45); transform:translateY(-3px); }
.wf .node.active .ic svg{ stroke:var(--cyan); }
.wf .node.active .lb{ color:#dce8fb; }
.wf .edge{ flex:1; height:3px; border-radius:2px; background:rgba(120,160,230,.18); position:relative; overflow:hidden; min-width:12px; }
.wf .edge::after{ content:""; position:absolute; top:0; left:-40%; width:40%; height:100%; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--cyan)); opacity:0; }
.wf .edge.flow::after{ opacity:1; animation:dash .7s linear forwards; }
@keyframes dash{ from{ left:-40%; } to{ left:100%; } }
.flow-card .out{ margin-top:16px; padding:11px 14px; border-radius:10px; background:rgba(34,200,255,.08); border:1px solid rgba(34,200,255,.2);
  font-size:13px; color:#cfe0ff; opacity:0; transform:translateY(6px); transition:opacity .4s, transform .4s; min-height:20px; }
.flow-card .out.on{ opacity:1; transform:translateY(0); }
.flow-card .out b{ color:var(--cyan); }

@media (prefers-reduced-motion: reduce){
  .code-win, .flow-card{ animation:none; }
  .code-win .caret{ animation:none; }
  .flow-card .hd .live .d{ animation:none; opacity:1; }
}

/* guarantee ribbon under hero */
.guar{ margin-top:54px; display:flex; align-items:center; gap:26px; padding:26px 34px; border-radius:20px;
  background:linear-gradient(120deg,rgba(20,52,120,.6),rgba(13,22,48,.7)); border:1px solid rgba(34,200,255,.3); }
.guar .pct{ font-family:'Teko'; font-weight:700; font-size:84px; line-height:.7; color:var(--cyan); flex:0 0 auto;
  text-shadow:0 0 30px rgba(33,200,255,.4); }
.guar .tx .t{ font-family:'Saira Condensed'; font-weight:700; font-size:30px; text-transform:uppercase; }
.guar .tx .d{ color:var(--mut); font-size:17px; margin-top:3px; }
.guar .spacer{ flex:1; }

/* ---------------- SECTION shells ---------------- */
.section{ padding:84px 0; }
.sec-head{ text-align:center; max-width:760px; margin:0 auto 52px; }
.sec-tag{ font-family:'Chakra Petch'; font-size:14px; letter-spacing:.2em; text-transform:uppercase; color:var(--cyan); }
.sec-h{ font-family:'Saira Condensed'; font-weight:800; font-size:clamp(34px,4.4vw,56px); text-transform:uppercase;
  line-height:1; margin:14px 0 16px; }
.sec-d{ color:var(--mut); font-size:19px; line-height:1.5; }

/* ---------------- SERVICES grid ---------------- */
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.svc-card{ background:linear-gradient(165deg,var(--panel2),var(--panel)); border:1px solid var(--line);
  border-radius:22px; padding:32px 30px; position:relative; overflow:hidden; transition:transform .2s, border-color .2s; }
.svc-card::before{ content:""; position:absolute; inset:0; border-radius:22px; padding:1px; pointer-events:none; opacity:0;
  background:linear-gradient(140deg,var(--cyan),transparent 50%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; transition:opacity .25s; }
.svc-card:hover{ transform:translateY(-6px); border-color:transparent; }
.svc-card:hover::before{ opacity:1; }
.svc-ic{ width:64px; height:64px; border-radius:16px; display:grid; place-items:center; margin-bottom:22px;
  background:linear-gradient(150deg,rgba(34,200,255,.18),rgba(31,107,255,.1)); border:1px solid rgba(34,200,255,.28); }
.svc-ic svg{ width:32px; height:32px; stroke:var(--cyan); fill:none; stroke-width:1.8; }
.svc-card h3{ font-family:'Saira Condensed'; font-weight:700; font-size:27px; text-transform:uppercase; line-height:1.04; margin-bottom:16px; }
.svc-list{ list-style:none; display:flex; flex-direction:column; gap:11px; }
.svc-list li{ display:flex; align-items:flex-start; gap:11px; font-size:16px; color:var(--mut); line-height:1.35; }
.svc-list li::before{ content:""; flex:0 0 auto; width:7px; height:7px; margin-top:7px; border-radius:2px; transform:rotate(45deg);
  background:var(--cyan); box-shadow:0 0 8px rgba(34,200,255,.6); }

/* ---------------- PROCESS (animated showcase) ---------------- */
.proc-wrap{ display:grid; grid-template-columns:360px 1fr; gap:38px; align-items:stretch; }

/* left rail */
.proc-rail{ display:flex; flex-direction:column; gap:14px; }
.prc{ text-align:left; display:flex; gap:18px; align-items:flex-start; padding:20px 22px; border-radius:16px; cursor:pointer;
  background:rgba(13,22,48,.45); border:1px solid var(--line); position:relative; overflow:hidden;
  transition:background .25s, border-color .25s, transform .2s; font-family:inherit; color:inherit; }
.prc:hover{ background:rgba(18,30,64,.6); }
.prc .no{ font-family:'Teko'; font-weight:700; font-size:42px; line-height:.7; color:var(--mut2); flex:0 0 auto; transition:color .25s; min-width:42px; }
.prc h4{ font-family:'Saira Condensed'; font-weight:700; font-size:23px; text-transform:uppercase; margin-bottom:5px; transition:color .25s; }
.prc p{ color:var(--mut); font-size:15px; line-height:1.4; max-height:0; opacity:0; overflow:hidden; transition:max-height .35s ease, opacity .3s, margin .3s; }
.prc .pbar{ position:absolute; left:0; bottom:0; height:3px; width:100%; background:rgba(120,160,230,.12); }
.prc .pbar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--cyan),var(--blue)); }
.prc.active{ background:linear-gradient(150deg,rgba(20,52,120,.55),rgba(13,22,48,.65)); border-color:rgba(34,200,255,.4); }
.prc.active .no{ color:var(--cyan); text-shadow:0 0 20px rgba(33,200,255,.4); }
.prc.active h4{ color:#fff; }
.prc.active p{ max-height:60px; opacity:1; margin-top:2px; }
.prc.active .pbar i{ animation:pfill var(--dur,5200ms) linear forwards; }
@keyframes pfill{ from{ width:0; } to{ width:100%; } }

/* right stage */
.proc-stage{ border-radius:18px; overflow:hidden; border:1px solid var(--line); background:#0a1026;
  box-shadow:0 30px 70px rgba(0,0,0,.45); display:flex; flex-direction:column; min-height:430px; }
.pchrome{ display:flex; align-items:center; gap:8px; padding:13px 16px; background:#0c1430; border-bottom:1px solid var(--line); flex:0 0 auto; }
.pchrome i{ width:11px; height:11px; border-radius:50%; }
.pchrome i:nth-child(1){ background:#ff5f57; } .pchrome i:nth-child(2){ background:#febc2e; } .pchrome i:nth-child(3){ background:#28c840; }
.pchrome .purl{ margin-left:10px; font-family:'Chakra Petch'; font-size:13px; color:var(--mut2); letter-spacing:.03em; }
.pchrome .purl b{ color:var(--cyan); }
.pscreen{ position:relative; flex:1; overflow:hidden; }
.scene{ position:absolute; inset:0; padding:28px 30px; opacity:0; visibility:hidden; transition:opacity .5s; }
.scene.on{ opacity:1; visibility:visible; }

/* —— scene 0 · discovery —— */
.disc-title{ font-family:'Saira Condensed'; font-weight:700; font-size:26px; text-transform:uppercase; margin-bottom:22px; display:flex; align-items:center; }
.disc-title .cur{ display:inline-block; width:9px; height:22px; background:var(--cyan); margin-left:4px; box-shadow:0 0 8px var(--cyan); animation:blink 1s steps(1) infinite; }
.disc-rows{ display:flex; flex-direction:column; gap:14px; margin-bottom:24px; }
.drow{ display:flex; align-items:center; gap:14px; font-size:18px; color:var(--mut); opacity:0; transform:translateX(-12px);
  transition:opacity .4s, transform .4s, color .4s; }
.drow .dck{ width:26px; height:26px; flex:0 0 26px; border-radius:8px; border:2px solid var(--mut2); display:grid; place-items:center; transition:all .3s; }
.scene.on .drow{ opacity:1; transform:translateX(0); }
.scene.on .drow:nth-child(1){ transition-delay:.15s; } .scene.on .drow:nth-child(2){ transition-delay:.65s; }
.scene.on .drow:nth-child(3){ transition-delay:1.15s; } .scene.on .drow:nth-child(4){ transition-delay:1.65s; }
.drow.tick{ color:#dce8fb; }
.drow.tick .dck{ background:linear-gradient(150deg,var(--cyan),var(--blue)); border-color:transparent; box-shadow:0 0 12px rgba(34,200,255,.5); }
.drow.tick .dck::after{ content:""; width:11px; height:6px; border-left:2.5px solid #061027; border-bottom:2.5px solid #061027; transform:rotate(-45deg) translateY(-1px); }
.disc-chips{ display:flex; gap:10px; flex-wrap:wrap; }
.disc-chips span{ padding:9px 16px; border-radius:100px; font-family:'Chakra Petch'; font-size:14px; color:var(--cyan);
  background:rgba(34,200,255,.08); border:1px solid rgba(34,200,255,.25); opacity:0; transform:scale(.85); transition:all .35s; }
.scene.on .disc-chips span{ opacity:1; transform:scale(1); }
.scene.on .disc-chips span:nth-child(1){ transition-delay:2.0s; } .scene.on .disc-chips span:nth-child(2){ transition-delay:2.15s; }
.scene.on .disc-chips span:nth-child(3){ transition-delay:2.3s; } .scene.on .disc-chips span:nth-child(4){ transition-delay:2.45s; }

/* —— scene 1 · design (device wireframes building) —— */
.design-scene{ display:flex; align-items:center; justify-content:center; gap:30px; height:100%; }
.dvc{ background:#0b1430; border:1px solid var(--line); position:relative; overflow:hidden; }
.dvc.browser{ width:300px; height:215px; border-radius:12px; }
.dvc.phone{ width:130px; height:255px; border-radius:22px; }
.dvc .topbar{ height:28px; background:#0c1838; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:5px; padding:0 12px; }
.dvc .topbar i{ width:7px; height:7px; border-radius:50%; background:#33425f; }
.dvc.phone .notch{ width:46px; height:14px; background:#05080f; border-radius:0 0 12px 12px; margin:0 auto; }
.dvc .canvasarea{ padding:14px; display:flex; flex-direction:column; gap:9px; }
.blk{ border-radius:6px; background:linear-gradient(100deg,rgba(40,70,130,.5),rgba(30,52,100,.5)); width:0;
  background-size:200% 100%; }
.scene.on .blk{ animation:grow .7s ease forwards, shimmer 1.4s linear infinite; }
.blk.h1{ height:22px; } .blk.h2{ height:12px; } .blk.box{ height:54px; } .blk.btn{ height:20px; }
.blk.cyan{ background:linear-gradient(90deg,var(--cyan),var(--blue)); }
.blk.w40{ --to:40%; } .blk.w60{ --to:60%; } .blk.w80{ --to:80%; } .blk.w100{ --to:100%; }
@keyframes grow{ from{ width:0; } to{ width:var(--to,100%); } }
@keyframes shimmer{ to{ background-position:-200% 0; } }
.scene.on .dvc .blk:nth-child(1){ animation-delay:.1s,0s; } .scene.on .dvc .blk:nth-child(2){ animation-delay:.3s,0s; }
.scene.on .dvc .blk:nth-child(3){ animation-delay:.5s,0s; } .scene.on .dvc .blk:nth-child(4){ animation-delay:.7s,0s; }
.scene.on .dvc .blk:nth-child(5){ animation-delay:.9s,0s; }
.dpointer{ position:absolute; width:22px; height:22px; pointer-events:none; opacity:0; }
.scene.on .dpointer{ animation:pointmove 3.4s ease-in-out infinite; }
@keyframes pointmove{ 0%{ opacity:0; transform:translate(60px,40px); } 20%{ opacity:1; } 50%{ transform:translate(220px,150px); } 80%{ opacity:1; } 100%{ opacity:0; transform:translate(160px,90px); } }

/* —— scene 2 · code —— */
.code-scene{ height:100%; }
.cs-area{ font-family:'Chakra Petch',monospace; font-size:14.5px; line-height:1.7; }
.cs-area .cl{ display:flex; gap:14px; white-space:pre; }
.cs-area .cl .no{ color:#36507f; width:18px; text-align:right; flex:0 0 18px; }
.cs-caret{ display:inline-block; width:8px; height:16px; background:var(--cyan); vertical-align:-3px; box-shadow:0 0 8px var(--cyan); animation:blink 1s steps(1) infinite; }
.cs-run{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line); display:flex; align-items:center; gap:9px;
  font-family:'Chakra Petch'; font-size:13px; color:var(--good); opacity:0; transition:opacity .4s; }
.cs-run.on{ opacity:1; } .cs-run .dt{ width:9px; height:9px; border-radius:50%; background:var(--good); box-shadow:0 0 10px var(--good); }

/* —— scene 3 · deploy —— */
.deploy-scene{ display:flex; flex-direction:column; gap:18px; height:100%; }
.dep-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.dep-kpi{ background:linear-gradient(160deg,rgba(20,40,90,.7),rgba(11,22,52,.8)); border:1px solid var(--line); border-radius:14px; padding:16px 18px; }
.dep-kpi .k{ font-family:'Chakra Petch'; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--mut); }
.dep-kpi .v{ font-family:'Teko'; font-weight:700; font-size:46px; line-height:.85; color:#fff; margin-top:2px; }
.dep-kpi .v small{ font-family:'Chakra Petch'; font-size:18px; color:var(--cyan); }
.dep-bar-wrap{ display:flex; align-items:center; gap:14px; }
.dep-bar{ flex:1; height:10px; border-radius:6px; background:rgba(120,160,230,.14); overflow:hidden; }
.dep-bar i{ display:block; height:100%; width:0; border-radius:6px; background:linear-gradient(90deg,var(--cyan),var(--blue)); }
.scene.on .dep-bar i{ animation:deploybar 2.4s ease forwards; }
@keyframes deploybar{ from{ width:0; } to{ width:100%; } }
.dep-bar-lb{ font-family:'Chakra Petch'; font-size:13px; color:var(--mut); white-space:nowrap; }
.dep-flow{ display:flex; align-items:center; gap:8px; }
.dep-node{ flex:1; display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:12px;
  background:rgba(16,28,60,.7); border:1px solid var(--line); transition:all .35s; }
.dep-node .nic{ width:30px; height:30px; flex:0 0 30px; border-radius:9px; display:grid; place-items:center; background:rgba(34,200,255,.1); border:1px solid rgba(34,200,255,.25); }
.dep-node .nic svg{ width:16px; height:16px; stroke:var(--mut); fill:none; stroke-width:1.8; transition:stroke .35s; }
.dep-node .nl{ font-family:'Chakra Petch'; font-size:13px; color:var(--mut); }
.dep-node.lit{ background:linear-gradient(150deg,rgba(34,200,255,.22),rgba(31,107,255,.12)); border-color:var(--cyan); box-shadow:0 0 16px rgba(34,200,255,.35); }
.dep-node.lit .nic svg{ stroke:var(--cyan); } .dep-node.lit .nl{ color:#dce8fb; }
.dep-badge{ display:flex; align-items:center; gap:12px; padding:14px 18px; border-radius:14px; margin-top:auto;
  background:rgba(52,230,168,.1); border:1px solid rgba(52,230,168,.35); opacity:0; transform:translateY(8px); transition:opacity .5s, transform .5s; }
.scene.on .dep-badge{ opacity:1; transform:translateY(0); transition-delay:2.4s; }
.dep-badge .ck{ width:30px; height:30px; flex:0 0 30px; border-radius:50%; background:var(--good); display:grid; place-items:center; }
.dep-badge .ck::after{ content:""; width:11px; height:6px; border-left:2.5px solid #04221a; border-bottom:2.5px solid #04221a; transform:rotate(-45deg) translateY(-1px); }
.dep-badge .bt{ font-family:'Saira Condensed'; font-weight:700; font-size:20px; text-transform:uppercase; color:#bff7e4; }
.dep-badge .bt small{ display:block; font-family:'Saira'; font-weight:400; font-size:13px; color:var(--mut); text-transform:none; }

@media (max-width:980px){
  .proc-wrap{ grid-template-columns:1fr; }
  .prc p{ max-height:60px; opacity:1; margin-top:2px; }
}
@media (prefers-reduced-motion: reduce){
  .prc.active .pbar i, .scene.on .blk, .scene.on .dep-bar i, .scene.on .dpointer{ animation:none; }
  .scene.on .blk{ width:var(--to,100%); }
  .disc-title .cur, .cs-caret{ animation:none; }
}

/* ---------------- WHY ---------------- */
.why{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.why .item{ padding:30px; border-radius:20px; background:rgba(13,22,48,.55); border:1px solid var(--line); }
.why .item .ic{ width:52px;height:52px;border-radius:13px;display:grid;place-items:center;margin-bottom:18px;
  background:rgba(34,200,255,.1); border:1px solid rgba(34,200,255,.25); }
.why .item .ic svg{ width:26px;height:26px;stroke:var(--cyan);fill:none;stroke-width:1.8; }
.why .item h4{ font-family:'Saira Condensed'; font-weight:700; font-size:23px; text-transform:uppercase; margin-bottom:8px; }
.why .item p{ color:var(--mut); font-size:16px; line-height:1.45; }

/* ---------------- SUBSCRIPTION ---------------- */
.subs{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.sub-card{ background:linear-gradient(165deg,var(--panel2),var(--panel)); border:1px solid var(--line);
  border-radius:20px; padding:30px 26px; display:flex; flex-direction:column; gap:14px; }
.sub-card .badge{ align-self:flex-start; font-family:'Chakra Petch'; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cyan); padding:6px 12px; border-radius:7px; background:rgba(34,200,255,.1); border:1px solid rgba(34,200,255,.25); }
.sub-card h4{ font-family:'Saira Condensed'; font-weight:800; font-size:30px; text-transform:uppercase; line-height:1; }
.sub-card p{ color:var(--mut); font-size:16px; line-height:1.45; flex:1; }
.sub-card .ln{ display:flex; align-items:center; gap:9px; font-size:15px; color:#cfe0ff; }
.sub-card .ln::before{ content:"+"; color:var(--cyan); font-family:'Chakra Petch'; font-weight:700; }

/* ---------------- CTA ---------------- */
.cta{ padding:0 0 90px; }
.cta-box{ position:relative; overflow:hidden; border-radius:30px; padding:72px 60px; text-align:center;
  background:linear-gradient(135deg,rgba(31,107,255,.22),rgba(154,107,255,.14),rgba(13,22,48,.6)); border:1px solid rgba(34,200,255,.3); }
.cta-box::after{ content:""; position:absolute; width:600px; height:600px; border-radius:50%; left:50%; top:120%;
  transform:translateX(-50%); background:radial-gradient(closest-side,rgba(33,160,255,.3),transparent 70%); pointer-events:none; }
.cta-box h2{ font-family:'Saira Condensed'; font-weight:800; font-size:clamp(36px,5vw,64px); text-transform:uppercase; line-height:.96; }
.cta-box p{ color:var(--mut); font-size:20px; margin:18px auto 32px; max-width:600px; line-height:1.5; }
.cta-box .row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; position:relative; z-index:2; }

/* ---------------- FOOTER ---------------- */
.footer{ border-top:1px solid var(--line); padding:54px 0 40px; background:rgba(7,11,26,.7); }
.footer .top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; margin-bottom:40px; }
.footer .col h5{ font-family:'Chakra Petch'; font-size:14px; letter-spacing:.12em; text-transform:uppercase; color:var(--mut2); margin-bottom:16px; }
.footer .col a{ display:block; color:var(--mut); font-size:16px; margin-bottom:10px; transition:color .2s; }
.footer .col a:hover{ color:var(--cyan); }
.footer .about p{ color:var(--mut); font-size:16px; line-height:1.5; margin:16px 0; max-width:320px; }
.footer .bottom{ display:flex; align-items:center; justify-content:space-between; padding-top:24px; border-top:1px solid var(--line);
  color:var(--mut2); font-size:14px; flex-wrap:wrap; gap:12px; }
.footer .bottom .mono{ letter-spacing:.04em; }

/* ---------------- responsive ---------------- */
@media (max-width:980px){
  .hero .grid{ grid-template-columns:1fr; gap:30px; }
  .hero-vis{ height:360px; order:-1; }
  .svc-grid{ grid-template-columns:repeat(2,1fr); }
  .proc{ grid-template-columns:repeat(2,1fr); }
  .why{ grid-template-columns:1fr; }
  .subs{ grid-template-columns:repeat(2,1fr); }
  .footer .top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:680px){
  .navlinks{ position:fixed; inset:64px 0 auto 0; flex-direction:column; gap:0; background:rgba(8,13,30,.98);
    border-bottom:1px solid var(--line); padding:10px 0; transform:translateY(-150%); transition:transform .3s; }
  .navlinks.open{ transform:translateY(0); }
  .navlinks a{ padding:16px 24px; width:100%; border-bottom:1px solid var(--line); }
  .navlinks .btn{ margin:12px 24px; }
  .nav-toggle{ display:flex; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
  .nav-toggle span{ width:26px; height:2.5px; background:var(--ink); border-radius:2px; }
  .svc-grid{ grid-template-columns:1fr; }
  .proc{ grid-template-columns:1fr; }
  .subs{ grid-template-columns:1fr; }
  .guar{ flex-direction:column; text-align:center; }
  .hero-cta{ justify-content:flex-start; }
  .footer .top{ grid-template-columns:1fr; }
  .cta-box{ padding:48px 26px; }
}