@charset "UTF-8";
:root{
  --bg:#050608;
  --ink:#090a0e;
  --white:#f4f4f2;
  --muted:#9a9da6;
  --muted2:#62656e;
  --pink:#e93663;
  --pink2:#ff4f7c;
  --line:rgba(255,255,255,.12);
  --ease:cubic-bezier(.19,.82,.24,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;background:var(--bg);color:var(--white);
  font-family:Inter,"SF Pro Display","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  overflow-x:hidden;letter-spacing:-.015em
}
a{color:inherit;text-decoration:none}
button{font:inherit}
mark{color:var(--pink2);background:none}
::selection{background:var(--pink);color:#fff}

#space,#particles{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#particles{z-index:1}
.noise{
  position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.035;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
}
.scanline{
  position:fixed;z-index:2;pointer-events:none;left:0;right:0;height:22vh;top:-24vh;
  background:linear-gradient(to bottom,transparent,rgba(233,54,99,.035),transparent);
  animation:scan 9s linear infinite
}
@keyframes scan{to{transform:translateY(150vh)}}

#boot{
  position:fixed;inset:0;z-index:9999;background:#050608;display:grid;place-items:center;
  transition:opacity .8s var(--ease),visibility .8s
}
#boot.done{opacity:0;visibility:hidden}
.bootInner{width:min(460px,calc(100% - 48px))}
.bootMark{width:48px;height:48px;position:relative;margin-bottom:18px}
.bootMark:before,.bootMark:after,.bootMark i,.bootMark b{content:"";position:absolute;border-radius:60% 40% 65% 35%}
.bootMark:before{inset:0;background:linear-gradient(135deg,#ff7da2,var(--pink));transform:rotate(30deg)}
.bootMark:after{inset:10px;background:#050608;transform:rotate(-24deg)}
.bootMark i{inset:13px 10px;border:1px solid rgba(255,255,255,.7);transform:rotate(22deg)}
.bootTitle{font-size:30px;font-weight:650;letter-spacing:.16em}
.bootMeta{display:flex;justify-content:space-between;margin-top:18px;font-size:8px;letter-spacing:.18em;color:#666a74}
.bootMeta em{font-style:normal;color:var(--pink2);font-size:11px}
.bootBar{height:1px;background:#22242a;margin-top:10px;overflow:hidden}
.bootBar i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--pink),#fff);box-shadow:0 0 16px var(--pink)}

.topbar{
  position:fixed;z-index:80;left:0;right:0;top:0;height:76px;padding:0 34px;
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(to bottom,rgba(5,6,8,.78),rgba(5,6,8,0));
  transition:.35s var(--ease)
}
.topbar.scrolled{height:64px;background:rgba(5,6,8,.68);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.06)}
.brand{display:flex;align-items:center;gap:11px}
.brandMark{width:31px;height:31px;position:relative;display:block}
.brandMark:before,.brandMark:after,.brandMark i,.brandMark b{content:"";position:absolute;border-radius:60% 40% 65% 35%}
.brandMark:before{inset:1px;background:linear-gradient(135deg,#ff8aaa,var(--pink));transform:rotate(28deg)}
.brandMark:after{inset:8px;background:#07080b;transform:rotate(-24deg)}
.brandMark i{inset:10px 8px;border:1px solid rgba(255,255,255,.66);transform:rotate(20deg)}
.brandText strong{font-size:14px;display:block;letter-spacing:.05em}.brandText small{display:block;color:#737680;font-size:7px;letter-spacing:.28em;margin-top:2px}
.topbar nav{display:flex;gap:26px;color:#9da0a8;font-size:9px;letter-spacing:.16em}
.topbar nav a{position:relative;padding:10px 0;transition:.25s}
.topbar nav a:hover{color:#fff}
.topCta{display:flex;align-items:center;gap:16px;border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:10px 14px;font-size:12px;background:rgba(255,255,255,.025);backdrop-filter:blur(10px)}
.topCta i,.action i,.edgeLink i,.megaCta i,.downloadLink i{font-style:normal}
@media(max-width:900px){.topbar nav{display:none}.topbar{padding:0 18px}.topCta{font-size:0}.topCta i{font-size:14px}}

.chapterRail{position:fixed;z-index:50;left:25px;top:50%;transform:translateY(-50%);display:flex;gap:11px;align-items:stretch}
.chapterLine{width:1px;height:260px;background:rgba(255,255,255,.08);position:relative}.chapterLine i{position:absolute;left:0;top:0;width:1px;height:0;background:linear-gradient(var(--pink2),rgba(233,54,99,.1));box-shadow:0 0 8px rgba(233,54,99,.7)}
.chapterDots{display:flex;flex-direction:column;justify-content:space-between;color:#494c54;font:8px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.chapterDots span{transition:.3s}.chapterDots .on{color:var(--pink2);text-shadow:0 0 14px rgba(233,54,99,.6)}
@media(max-width:900px){.chapterRail{display:none}}

.hud{position:fixed;z-index:40;font:8px/1.25 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;color:#4f525b;pointer-events:none}
.hud span,.hud b{display:block}.hud b{color:#7d8088;margin-top:4px;font-weight:500}
.hudTL{left:34px;top:92px}.hudBR{right:34px;bottom:24px;text-align:right}
@media(max-width:900px){.hud{display:none}}

main{position:relative;z-index:10}
.scene{
  position:relative;min-height:100svh;
  display:flex;align-items:center;
  padding:110px 7vw 90px 8.5vw;
  isolation:isolate
}
.sceneInner{width:min(1400px,100%);margin:0 auto;position:relative}
.reveal{opacity:0;transform:translateY(30px);filter:blur(7px);transition:opacity .85s var(--ease),transform .85s var(--ease),filter .85s var(--ease)}
.reveal.in{opacity:1;transform:none;filter:none}
.chapterTag{position:absolute;top:-15px;left:0;display:flex;align-items:center;gap:11px;font:8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.18em;color:#676a73}
.chapterTag span{color:var(--pink2)}
.chapterTag:after{content:"";display:block;width:88px;height:1px;background:linear-gradient(90deg,rgba(233,54,99,.7),transparent)}

.hero{padding-top:130px}
.heroInner{align-self:center}
.heroKicker{font-size:9px;letter-spacing:.27em;color:#8e919a;margin-bottom:21px}
.hero h1{margin:0;max-width:1000px;font-size:clamp(52px,6.2vw,92px);line-height:.98;letter-spacing:-.055em;font-weight:590}
.hero h1 span{display:block}.heroThin{font-weight:360;color:#d8d9de}
.lead{max-width:690px;color:#a5a8b0;font-size:clamp(16px,1.2vw,19px);line-height:1.85;margin:27px 0 30px}
.heroActions{display:flex;gap:11px;flex-wrap:wrap}
.action{display:inline-flex;align-items:center;gap:18px;border-radius:999px;padding:12px 17px;font-size:12px}
.action.primary{background:var(--pink);box-shadow:0 10px 42px rgba(233,54,99,.18)}.action.quiet{border:1px solid rgba(255,255,255,.13);color:#b8bbc3;background:rgba(255,255,255,.02)}
.heroTelemetry{position:absolute;right:7vw;bottom:82px;display:flex;gap:18px}
.heroTelemetry div{width:102px;border-top:1px solid rgba(255,255,255,.12);padding-top:10px}.heroTelemetry b{display:block;font:10px/1 ui-monospace,monospace;color:#d5d7dc}.heroTelemetry span{font-size:10px;color:#63666e;display:block;margin-top:5px}
.scrollCue{position:absolute;right:26px;top:50%;display:flex;flex-direction:column;align-items:center;gap:12px;writing-mode:vertical-rl;font-size:7px;letter-spacing:.2em;color:#4f525a}.scrollCue i{height:56px;width:1px;background:linear-gradient(var(--pink),transparent);animation:pulse 1.8s infinite}
@keyframes pulse{50%{transform:scaleY(.65);opacity:.35}}
@media(max-width:900px){.heroTelemetry,.scrollCue{display:none}.scene{padding-left:20px;padding-right:20px}.hero h1{font-size:clamp(46px,12.5vw,72px)}}

.whyInner{padding-top:60px}
.whyLead{margin-left:18%;max-width:860px}
.whyLead h2,.methodStatement h2,.campTitle h2,.platformCopy h2,.casesTitle h2,.endTop h2{
  margin:0;font-size:clamp(40px,4.6vw,66px);line-height:1.06;letter-spacing:-.05em;font-weight:560
}
.whyLead p,.campTitle p,.platformCopy p,.casesTitle p,.endTop p{color:#9fa2aa;line-height:1.85;font-size:16px;max-width:670px}
.signalList{margin-top:70px;margin-left:18%;max-width:930px;border-top:1px solid var(--line)}
.signal{display:grid;grid-template-columns:145px .9fr 1.1fr;gap:28px;padding:27px 0;border-bottom:1px solid var(--line);align-items:start;transition:.35s var(--ease)}
.signal:hover{padding-left:12px}.signal small{font:8px/1.4 ui-monospace,monospace;color:var(--pink2);letter-spacing:.14em}.signal h3{font-size:21px;margin:0;font-weight:560}.signal p{margin:0;color:#858891;line-height:1.7;font-size:14px}
@media(max-width:850px){.whyLead,.signalList{margin-left:0}.signal{grid-template-columns:1fr}.chapterTag{position:static;margin-bottom:30px}}

.methodInner{display:grid;grid-template-columns:.78fr 1.22fr;gap:9vw;align-items:start;padding-top:70px}
.methodInner .chapterTag{position:absolute}
.methodStatement{padding-top:70px;position:sticky;top:140px}.methodStatement>span{font-size:12px;color:#777a83;display:block;margin-bottom:14px}
.methodPath{border-top:1px solid var(--line);margin-top:70px}
.pathNode{display:grid;grid-template-columns:85px 1fr;gap:24px;padding:36px 0;border-bottom:1px solid var(--line)}
.pathNode>b{font:28px/1 ui-monospace,monospace;color:var(--pink2);font-weight:500}.pathNode h3{font-size:25px;margin:0 0 10px;font-weight:550}.pathNode p{margin:0;color:#9699a1;line-height:1.8;font-size:14px;max-width:620px}
@media(max-width:850px){.methodInner{grid-template-columns:1fr}.methodStatement{position:static}.pathNode{grid-template-columns:58px 1fr}}

.campInner{min-height:74vh;display:flex;flex-direction:column;justify-content:center}
.campTitle{margin-left:10%;max-width:820px}.campTitle>small{font:9px/1 ui-monospace,monospace;letter-spacing:.2em;color:#777a83;display:block;margin-bottom:16px}
.campNumbers{margin-left:10%;display:flex;gap:18px;margin-top:48px}
.campNumbers div{width:140px;height:112px;border:1px solid rgba(255,255,255,.12);background:rgba(6,7,10,.28);backdrop-filter:blur(8px);padding:18px;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}
.campNumbers b{display:block;font:34px/1 ui-monospace,monospace;color:#fff}.campNumbers span{font:8px/1 ui-monospace,monospace;letter-spacing:.15em;color:#737680}
.edgeLink{margin-left:10%;margin-top:35px;display:inline-flex;width:max-content;align-items:center;gap:18px;color:var(--pink2);font-size:13px}
@media(max-width:850px){.campTitle,.campNumbers,.edgeLink{margin-left:0}.campNumbers{flex-wrap:wrap}.campNumbers div{width:120px}}

.platform{min-height:180svh;align-items:flex-start;padding-top:150px}
.platformInner{min-height:160svh}
.platformCopy{max-width:900px;margin-left:9%}.platformCopy>small{font:8px/1 ui-monospace,monospace;letter-spacing:.18em;color:#747780;display:block;margin-bottom:16px}
.productPortal{width:min(1120px,90%);margin:90px auto 0;perspective:1400px;position:relative}
.portalGlow{position:absolute;inset:-14%;background:radial-gradient(circle,rgba(233,54,99,.18),transparent 62%);filter:blur(50px)}
.productWindow{position:relative;background:#121318;border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:10px;box-shadow:0 50px 160px rgba(0,0,0,.55);transform:rotateX(4deg);transition:.45s var(--ease)}
.windowBar{height:42px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 5px;color:#747780;font:8px/1 ui-monospace,monospace;letter-spacing:.08em}.windowBar>b{justify-self:end;color:#51b977;font-weight:500}.windowDots{display:flex;gap:5px}.windowDots i{width:7px;height:7px;border-radius:50%;background:#373941}.windowDots i:first-child{background:var(--pink)}
.windowBody{display:grid;grid-template-columns:190px 1fr;min-height:560px;background:#f7f7f8;color:#17181c;border-radius:12px;overflow:hidden}
.windowBody aside{background:#e9eaed;padding:25px 16px;display:flex;flex-direction:column;gap:6px}.windowBody aside strong{font-size:17px;margin-bottom:22px}.windowBody aside span{font-size:12px;padding:9px 10px;border-radius:8px;color:#70737a}.windowBody aside .active{background:#fff;color:#1d1e22;box-shadow:0 5px 20px rgba(0,0,0,.04)}
.aiDesk{padding:34px 42px}.aiDesk>small{font:8px/1 ui-monospace,monospace;letter-spacing:.18em;color:#9699a1}.aiDesk h3{font-size:30px;letter-spacing:-.035em;margin:78px 0 7px}.aiDesk p{color:#85888f;font-size:13px}
.ask{margin-top:22px;border:1px solid #dedfe3;border-radius:12px;padding:15px;color:#9a9da4;font-size:12px;display:flex;justify-content:space-between;align-items:center}.ask button{border:0;background:#191a1f;color:#fff;border-radius:8px;width:32px;height:32px}
.capGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:18px}.capGrid div{border:1px solid #e9e9ec;border-radius:10px;padding:15px;background:#fbfbfc}.capGrid b{display:block;font-size:12px}.capGrid span{font-size:10px;color:#91949a}
.platformNote{width:min(1120px,90%);margin:55px auto 0;display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;border-top:1px solid var(--line);padding-top:27px}.platformNote h3{font-size:27px;margin:0;font-weight:540}.platformNote p{margin:0;color:#8f929a;line-height:1.8;font-size:14px}
@media(max-width:800px){.platform{min-height:auto}.platformInner{min-height:auto}.platformCopy{margin-left:0}.productPortal,.platformNote{width:100%}.windowBody{grid-template-columns:1fr}.windowBody aside{display:none}.aiDesk{padding:26px 18px}.capGrid{grid-template-columns:1fr}.platformNote{grid-template-columns:1fr}}

.casesTitle{margin-left:15%;max-width:920px}
.caseStream{margin:65px 0 0 15%;max-width:980px;border-top:1px solid var(--line)}
.caseLine{display:grid;grid-template-columns:65px 210px 1fr 110px;gap:22px;align-items:center;padding:28px 0;border-bottom:1px solid var(--line);transition:.35s var(--ease)}
.caseLine:hover{padding-left:12px}.caseLine>span{font:10px/1 ui-monospace,monospace;color:var(--pink2)}.caseLine h3{font-size:21px;margin:0;font-weight:550}.caseLine p{margin:0;color:#92959d;line-height:1.7;font-size:14px}.caseLine i{font:8px/1 ui-monospace,monospace;color:#61646c;letter-spacing:.12em;text-align:right}
@media(max-width:850px){.casesTitle,.caseStream{margin-left:0}.caseLine{grid-template-columns:45px 1fr}.caseLine p,.caseLine i{grid-column:2;text-align:left}}

.end{min-height:110svh}
.endInner{min-height:76vh;display:flex;flex-direction:column;justify-content:space-between}
.endTop{max-width:900px}.endTop>span{font:9px/1 ui-monospace,monospace;letter-spacing:.2em;color:var(--pink2);display:block;margin-bottom:18px}
.endActions{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:80px}.megaCta,.downloadLink{min-height:120px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 10px;font-size:18px;transition:.35s var(--ease)}.megaCta:hover,.downloadLink:hover{padding-left:24px;background:rgba(255,255,255,.025)}.megaCta i{color:var(--pink2);font-size:24px}.downloadLink i{color:#7e8189}
footer{display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.07);padding-top:18px;color:#4f525a;font:8px/1 ui-monospace,monospace;letter-spacing:.12em}
@media(max-width:800px){.endActions{grid-template-columns:1fr}.megaCta,.downloadLink{min-height:90px}footer{flex-direction:column;gap:7px}}

.cursor{position:fixed;z-index:999;left:0;top:0;pointer-events:none;mix-blend-mode:screen;opacity:0}.cursor i,.cursor b{position:absolute;border-radius:50%;transform:translate(-50%,-50%)}.cursor i{width:5px;height:5px;background:#fff}.cursor b{width:34px;height:34px;border:1px solid rgba(233,54,99,.55);transition:width .25s,height .25s,border-color .25s}
body.pointer .cursor{opacity:1}
#toast{position:fixed;right:22px;bottom:22px;z-index:200;background:#121318;color:#fff;border:1px solid rgba(255,255,255,.1);padding:12px 15px;border-radius:10px;font-size:12px;transform:translateY(16px);opacity:0;transition:.3s}#toast.show{transform:none;opacity:1}
.magnetic{will-change:transform}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important;filter:none!important}
}

/* ===== V6 VISUAL REFINEMENT =====
   Replace the "central sci-fi object" feeling with a cinematic data-silk field.
*/
#space{filter:saturate(.92) contrast(1.03)}
#particles{mix-blend-mode:screen}
.scanline{opacity:.48}
.hud{color:#3d4149}
.hud b{color:#6d7078}
.hero h1{max-width:920px}
.heroThin{color:#cfd1d6}
.heroTelemetry div{border-top-color:rgba(255,255,255,.09)}
.chapterLine{background:rgba(255,255,255,.055)}
.signalList,.methodPath,.caseStream{border-top-color:rgba(255,255,255,.09)}
.signal,.pathNode,.caseLine{border-bottom-color:rgba(255,255,255,.09)}
.productWindow{box-shadow:0 55px 180px rgba(0,0,0,.58),0 0 80px rgba(233,54,99,.055)}
.portalGlow{opacity:.72}

/* ===== V7 CLARITY PASS =====
   Principle: one spectacular hero, then calm, premium editorial sections.
   Motion never competes with reading.
*/

/* canvas only matters in hero */
#space,#particles{
  mask-image:linear-gradient(90deg,transparent 0%,transparent 33%,rgba(0,0,0,.22) 48%,#000 64%,#000 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 33%,rgba(0,0,0,.22) 48%,#000 64%,#000 100%);
}
.heroReadability{
  position:absolute;z-index:2;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(5,6,8,.98) 0%,rgba(5,6,8,.95) 32%,rgba(5,6,8,.72) 48%,rgba(5,6,8,.12) 72%,transparent 100%),
    linear-gradient(to bottom,rgba(5,6,8,.12),transparent 40%,rgba(5,6,8,.18));
}
.hero .sceneInner,.heroTelemetry,.scrollCue{z-index:5}
.hero h1{max-width:900px;font-size:clamp(50px,5.6vw,82px);line-height:1.01}
.lead{max-width:610px;font-size:16px;color:#aeb1b9}
.heroKicker{color:#a0a3ab}

/* only hero sits on animated space */
.scene:not(.hero){
  background:#07080b;
}
.why,.cases{
  background:#f2f0ec!important;color:#18191d;
}
.why .chapterTag,.cases .chapterTag{color:#8b8d93}
.why .chapterTag:after,.cases .chapterTag:after{background:linear-gradient(90deg,rgba(233,54,99,.65),transparent)}
.whyLead p,.casesTitle p{color:#676a72}
.why .signalList,.cases .caseStream{border-top-color:rgba(10,11,14,.12)}
.why .signal,.cases .caseLine{border-bottom-color:rgba(10,11,14,.12)}
.why .signal p,.cases .caseLine p{color:#6b6e75}
.why .signal h3,.cases .caseLine h3{color:#1c1d21}

/* remove permanent scanning line outside hero */
.scanline{height:16vh;opacity:.22;animation-duration:12s}

/* make every content section breathe more */
.scene:not(.hero){padding-top:150px;padding-bottom:150px}
.whyInner,.methodInner,.campInner,.casesInner{min-height:auto}
.whyLead,.signalList{margin-left:10%}
.casesTitle,.caseStream{margin-left:10%}
.signalList,.caseStream,.methodPath{max-width:1020px}
.signal{grid-template-columns:120px .85fr 1.15fr}
.signal h3{font-size:20px}
.signal p{font-size:13.5px}
.pathNode p,.caseLine p{font-size:13.5px}

/* calmer typography */
.whyLead h2,.methodStatement h2,.campTitle h2,.platformCopy h2,.casesTitle h2,.endTop h2{
  font-size:clamp(38px,4vw,58px);
  line-height:1.09;
}
.methodStatement{max-width:520px}
.methodStatement>span,.campTitle>small,.platformCopy>small{color:#8a8d95}

/* premium dark panels, not busy */
.method,.camp,.platform,.end{
  background:
    radial-gradient(circle at 78% 22%,rgba(233,54,99,.045),transparent 24%),
    #07080b!important;
}
.campNumbers div{
  background:rgba(255,255,255,.018);
  border-color:rgba(255,255,255,.10);
  backdrop-filter:none;
}
.productPortal{margin-top:76px}
.portalGlow{opacity:.32;filter:blur(70px)}
.platform{min-height:auto}
.platformInner{min-height:auto}
.platformNote{margin-bottom:20px}

/* slightly less HUD */
.hud{opacity:.72}
.hudTL{top:86px}
.hudBR{bottom:20px}
.chapterRail{opacity:.72}

/* product becomes focal point */
.productWindow{
  border-color:rgba(255,255,255,.16);
  box-shadow:0 46px 130px rgba(0,0,0,.52),0 0 60px rgba(233,54,99,.035)
}

/* clean end */
.end{min-height:100svh}
.endTop p{max-width:560px}
.endActions{margin-top:68px}
.megaCta,.downloadLink{min-height:105px}

/* mobile */
@media(max-width:900px){
  #space,#particles{
    mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.08) 35%,#000 72%);
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.08) 35%,#000 72%);
  }
  .heroReadability{
    background:linear-gradient(to bottom,rgba(5,6,8,.98) 0%,rgba(5,6,8,.92) 52%,rgba(5,6,8,.45) 78%,rgba(5,6,8,.7) 100%);
  }
  .whyLead,.signalList,.casesTitle,.caseStream{margin-left:0}
  .scene:not(.hero){padding-top:110px;padding-bottom:110px}
}