:root{
  --ink:#0c0b12;
  --night:#07070b;
  --paper:#fafafd;
  --violet:#7C5CFF;
  --violet-deep:#5637d6;
  --violet-soft:rgba(124,92,255,.14);
  --mist:#6b6a78;
  --line-dark:rgba(255,255,255,.12);
  --line-light:rgba(12,11,18,.1);
  --ease:cubic-bezier(.16,1,.3,1);
  --font-display:"Space Grotesk","Inter",sans-serif;
  --font-body:"Inter",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--night);color:#f2f1f7;font-family:var(--font-body);font-size:16px;line-height:1.55;overflow-x:clip;transition:color .4s var(--ease)}
body.is-loading{overflow:hidden}
body.is-light{color:var(--ink)}
img,video,canvas,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
p,h1,h2,h3,ul,figure{margin:0}
::selection{background:var(--violet);color:#fff}
:focus-visible{outline:2px solid var(--violet);outline-offset:4px;border-radius:4px}

.skip-link{position:fixed;z-index:1000;top:12px;left:12px;padding:12px 18px;border-radius:10px;background:var(--violet);color:#fff;font-size:13px;transform:translateY(-180%);transition:transform .25s var(--ease)}
.skip-link:focus{transform:none}
.noscript{position:fixed;z-index:1000;inset:auto 0 0;padding:16px;text-align:center;background:#1b1430;color:#fff}

h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.03em}
.kicker{font-size:11px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--violet)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 30px;border-radius:999px;font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:.01em;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,border-color .3s,color .3s;will-change:transform}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg,#8d70ff,var(--violet-deep));color:#fff;box-shadow:0 10px 32px rgba(124,92,255,.38)}
.btn-primary:hover{box-shadow:0 16px 44px rgba(124,92,255,.5)}
.btn-ghost{border:1px solid var(--line-dark);background:rgba(255,255,255,.05);color:#f2f1f7;backdrop-filter:blur(10px)}
.btn-ghost:hover{border-color:rgba(255,255,255,.32)}
.btn-ghost-dark{border:1px solid var(--line-light);background:transparent;color:var(--ink)}
.btn-ghost-dark:hover{border-color:var(--violet);color:var(--violet-deep)}
.btn-small{height:42px;padding:0 22px;font-size:13px}
.btn-big{height:60px;padding:0 44px;font-size:17px}

/* ---------- loader ---------- */
.loading-curtain{position:fixed;z-index:900;inset:0;display:grid;place-content:center;gap:30px;background:var(--night);color:#f2f1f7;transition:opacity .9s var(--ease),visibility .9s}
.loading-curtain.is-complete{opacity:0;visibility:hidden}
.loading-mark{font:600 clamp(44px,6vw,84px)/1 var(--font-display);letter-spacing:.12em;text-align:center}
.loading-mark span{color:var(--violet);font-size:.5em;vertical-align:.25em;margin-left:.15em}
.loading-line{width:min(300px,60vw);height:2px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.loading-line i{display:block;width:100%;height:100%;background:var(--violet);transform:scaleX(0);transform-origin:left;transition:transform .25s linear}
.loading-curtain>p{font-size:10px;letter-spacing:.3em;color:var(--mist);text-align:right}

/* ---------- masthead ---------- */
.masthead{position:fixed;z-index:800;top:0;left:0;right:0;height:80px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 48px;transition:height .45s var(--ease),background .45s var(--ease),box-shadow .45s var(--ease)}
.masthead .btn{justify-self:end}
.masthead.is-compact{height:64px;background:rgba(7,7,11,.72);backdrop-filter:blur(16px);box-shadow:0 1px 0 rgba(255,255,255,.08)}
body.is-light .masthead.is-compact{background:rgba(250,250,253,.8);box-shadow:0 1px 0 rgba(12,11,18,.08)}
.wordmark{font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:.16em}
.wordmark span{color:var(--violet);font-size:11px;vertical-align:.2em;margin-left:2px}
.mast-nav{display:flex;gap:34px;font-size:13px;font-weight:500;color:inherit}
.mast-nav a{opacity:.72;transition:opacity .3s}
.mast-nav a:hover{opacity:1}

/* ---------- pinned sections ---------- */
.pin-section{position:relative}
.sticky-stage{position:sticky;top:0;height:100svh;min-height:620px;overflow:hidden;isolation:isolate}
.hero{height:460vh}
.features{height:340vh}
[data-window]{opacity:0;translate:0 28px;will-change:translate,opacity}

/* ---------- hero ---------- */
.hero-stage{background:var(--night)}
.canvas-fallback,.hero-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.canvas-fallback{z-index:-4;opacity:.6;transition:opacity .8s var(--ease)}
body.has-canvas .canvas-fallback{opacity:0}
.hero-canvas{z-index:-3}
.hero-shade{position:absolute;z-index:-2;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(7,7,11,.55),transparent 26%,transparent 55%,rgba(7,7,11,.82) 92%),radial-gradient(ellipse at 50% 42%,transparent 30%,rgba(7,7,11,.42) 90%)}
.hero-head{position:absolute;z-index:3;left:6vw;bottom:9vh;max-width:820px}
.hero-head h1{margin-top:20px;font-size:clamp(64px,10.5vw,172px);line-height:.92;letter-spacing:-.045em;color:#fff;text-shadow:0 18px 60px rgba(0,0,0,.6)}
.hero-sub{margin-top:24px;max-width:520px;font-size:clamp(16px,1.3vw,19px);line-height:1.6;color:#c9c7d6}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:34px}
.hero-mid{position:absolute;z-index:3;left:6vw;top:20vh}
.hero-mid p{font:600 clamp(40px,5.4vw,92px)/1.02 var(--font-display);letter-spacing:-.04em;color:#fff}
.hero-closing{position:absolute;z-index:3;left:50%;top:48%;transform:translate(-50%,-50%);text-align:center;width:94%}
.hero-closing p{font:600 clamp(42px,6.4vw,110px)/1 var(--font-display);letter-spacing:-.045em;color:#fff}
.hero-closing em{font-style:normal;background:linear-gradient(100deg,#a892ff,var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.scroll-cue{position:absolute;left:48px;bottom:36px;display:flex;align-items:center;gap:14px;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--mist)}
.scroll-cue i{position:relative;display:block;width:44px;height:1px;background:rgba(255,255,255,.2);overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;inset:0;background:var(--violet);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:translateX(-105%)}70%,100%{transform:translateX(105%)}}
.frame-counter{position:absolute;right:48px;bottom:36px;display:flex;align-items:center;gap:10px;color:var(--mist);font-size:10px;letter-spacing:.15em}
.frame-counter i{width:30px;height:1px;background:rgba(255,255,255,.24)}
.frame-counter span:first-child{color:#cdc4ff}

/* ---------- logos ---------- */
.logos{padding:110px 6vw 40px;text-align:center}
.logos-label{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:#8f8e9c}
.logo-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:28px 56px;margin-top:36px;padding:0;list-style:none}
.logo-strip li{font-family:var(--font-display);font-size:clamp(15px,1.5vw,20px);font-weight:600;letter-spacing:.2em;color:#93919f;opacity:.75}

/* ---------- features ---------- */
.features-stage{display:grid;grid-template-columns:minmax(300px,.9fr) 1.4fr;align-items:center;gap:4vw;padding:0 6vw}
.features-copy h2{margin-top:18px;font-size:clamp(38px,4.6vw,74px);line-height:1;letter-spacing:-.04em}
.features-panel{position:relative;height:min(74vh,720px);border-radius:28px;overflow:hidden;isolation:isolate;background:linear-gradient(140deg,#2a1c66 0%,#4a2fb8 42%,#7C5CFF 100%);box-shadow:0 40px 90px rgba(52,32,130,.35)}
.panel-video{position:absolute;z-index:-2;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s var(--ease)}
.features-panel.has-video .panel-video{opacity:.85}
.panel-glass{position:absolute;z-index:-1;inset:0;background:radial-gradient(120% 90% at 80% 8%,rgba(255,255,255,.16),transparent 55%),linear-gradient(200deg,rgba(12,8,32,.05),rgba(12,8,32,.55) 90%)}
.feature-block{position:absolute;left:clamp(28px,4vw,64px);right:clamp(28px,4vw,64px);top:50%;transform:translateY(-50%);padding:34px clamp(26px,3vw,44px);border-radius:20px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(18px);color:#fff}
.feature-index{font-family:var(--font-display);font-size:12px;letter-spacing:.3em;color:#d8ccff}
.feature-block h3{margin-top:10px;font-size:clamp(34px,3.6vw,58px);letter-spacing:.06em}
.feature-block p{margin-top:14px;max-width:560px;font-size:clamp(15px,1.2vw,18px);line-height:1.6;color:#e8e3ff}

/* ---------- light sections shared ---------- */
.metrics,.product,.pricing,.faq{padding:130px 6vw;color:var(--ink)}
.metrics h2,.product h2,.pricing h2,.faq h2{margin-top:16px;font-size:clamp(34px,4vw,60px);line-height:1.05;letter-spacing:-.035em;max-width:820px}

/* ---------- metrics ---------- */
.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:60px}
.metric-card{padding:42px 36px;border-radius:22px;background:rgba(255,255,255,.7);border:1px solid rgba(124,92,255,.16);box-shadow:0 24px 60px rgba(38,26,90,.08);backdrop-filter:blur(14px)}
.metric-value{font-family:var(--font-display);font-size:clamp(48px,4.6vw,76px);font-weight:700;letter-spacing:-.03em;color:var(--ink);line-height:1}
.metric-value span{color:var(--violet)}
.metric-label{margin-top:12px;font-size:14px;color:var(--mist);max-width:240px}

/* ---------- product / browser frame ---------- */
.browser-frame{margin-top:60px;border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--line-light);box-shadow:0 50px 120px rgba(35,22,88,.16),0 12px 30px rgba(35,22,88,.08)}
.browser-bar{display:flex;align-items:center;gap:8px;height:44px;padding:0 18px;background:#f2f1f8;border-bottom:1px solid var(--line-light)}
.browser-bar .dot{width:11px;height:11px;border-radius:50%;background:#dcdae8}
.browser-bar .dot:first-child{background:#f0a8a0}
.browser-bar .dot:nth-child(2){background:#f2d49b}
.browser-bar .dot:nth-child(3){background:#a8d8b4}
.browser-url{margin-left:16px;padding:5px 16px;border-radius:8px;background:#fff;font-size:12px;color:var(--mist)}
.mini-dash{display:grid;grid-template-columns:210px 1fr;min-height:520px;text-align:left}
.dash-side{display:flex;flex-direction:column;gap:26px;padding:26px 22px;background:#0e0d17;color:#b9b7c8}
.dash-logo{font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:.16em;color:#fff}
.dash-logo span{color:var(--violet);font-size:9px;vertical-align:.25em}
.dash-side ul{display:grid;gap:6px;padding:0;list-style:none;font-size:13px}
.dash-side li{padding:9px 12px;border-radius:9px}
.dash-side li.is-active{background:var(--violet-soft);color:#cdc4ff}
.dash-user{margin-top:auto;font-size:11px;color:#6f6d80}
.dash-main{display:grid;gap:18px;grid-template-rows:auto auto 1fr;padding:24px;background:#fbfbfe}
.dash-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.kpi{padding:16px 18px;border-radius:14px;background:#fff;border:1px solid var(--line-light)}
.kpi span{font-size:11px;color:var(--mist)}
.kpi b{display:block;margin-top:5px;font-family:var(--font-display);font-size:24px;letter-spacing:-.02em;color:var(--ink)}
.kpi i{font-style:normal;font-size:11px;font-weight:600}
.kpi .down{color:#3f9d6c}
.kpi .up{color:var(--violet-deep)}
.dash-chart{padding:18px;border-radius:14px;background:#fff;border:1px solid var(--line-light)}
.chart-head{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:600;color:var(--ink)}
.chart-tag{padding:3px 10px;border-radius:999px;background:var(--violet-soft);color:var(--violet-deep);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.dash-chart svg{width:100%;height:150px;margin-top:12px}
.chart-note{margin-top:8px;font-size:11px;color:var(--mist)}
.chart-note em{font-style:normal;opacity:.7;margin-left:6px}
.dash-table{display:grid;gap:4px;align-content:start;padding:12px;border-radius:14px;background:#fff;border:1px solid var(--line-light)}
.tr{display:grid;grid-template-columns:1.5fr 1fr 1fr .7fr;align-items:center;gap:12px;padding:9px 10px;border-radius:9px;font-size:13px;color:var(--ink)}
.tr:not(.th):hover{background:#f6f5fc}
.tr.th{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
.risk{position:relative;display:flex;align-items:center;gap:8px;font-weight:600;font-size:12px}
.risk i{display:block;height:6px;max-width:70px;border-radius:3px;flex:1}
.risk.high i{background:linear-gradient(90deg,#8d70ff,#e0578a)}
.risk.mid i{background:linear-gradient(90deg,#8d70ff,#c9a468)}
.risk.low i{background:#c9c6dd}
.act{font-size:12px;font-weight:600;color:var(--violet-deep);text-align:right}

/* ---------- pricing ---------- */
.billing-toggle{display:flex;align-items:center;gap:16px;margin-top:40px;font-size:14px;font-weight:600;color:var(--ink)}
.billing-toggle em{font-style:normal;margin-left:6px;padding:3px 10px;border-radius:999px;background:var(--violet-soft);color:var(--violet-deep);font-size:11px}
.toggle{position:relative;width:58px;height:32px;border:0;border-radius:999px;background:#dcd9ec;cursor:pointer;transition:background .3s var(--ease)}
.toggle i{position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(20,12,60,.25);transition:transform .3s var(--ease)}
[data-billing="annual"] .toggle{background:var(--violet)}
[data-billing="annual"] .toggle i{transform:translateX(26px)}
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;gap:18px;padding:40px 34px;border-radius:24px;background:rgba(255,255,255,.75);border:1px solid var(--line-light);box-shadow:0 20px 50px rgba(38,26,90,.06);backdrop-filter:blur(12px)}
.plan h3{font-size:20px;letter-spacing:.02em}
.plan-flag{position:absolute;top:-14px;left:34px;padding:5px 14px;border-radius:999px;background:linear-gradient(135deg,#8d70ff,var(--violet-deep));color:#fff;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.plan.is-featured{background:#0e0d17;color:#f2f1f7;border-color:transparent;box-shadow:0 40px 90px rgba(30,16,90,.35);transform:translateY(-10px)}
.plan.is-featured h3{color:#fff}
.plan-price{display:flex;align-items:baseline;gap:6px}
.plan-price b{font-family:var(--font-display);font-size:clamp(42px,3.4vw,56px);font-weight:700;letter-spacing:-.03em}
.plan-price span{font-size:14px;color:var(--mist)}
.plan.is-featured .plan-price span{color:#9c9ab0}
.plan-note{min-height:1.3em;font-size:12px;color:var(--mist)}
.plan.is-featured .plan-note{color:#9c9ab0}
.plan ul{display:grid;gap:11px;margin:6px 0 10px;padding:0;list-style:none;font-size:14px}
.plan li{padding-left:26px;background:no-repeat left center url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><path d="M2 8l3.5 3.5L13 4" fill="none" stroke="%237C5CFF" stroke-width="2" stroke-linecap="round"/></svg>')}
.plan .btn{margin-top:auto}
.plan.is-featured .btn-ghost-dark{border-color:rgba(255,255,255,.25);color:#fff}

/* ---------- FAQ ---------- */
.faq-list{margin-top:52px;max-width:860px;border-top:1px solid var(--line-light)}
.faq-item{border-bottom:1px solid var(--line-light)}
.faq-item button{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;padding:26px 4px;border:0;background:none;cursor:pointer;text-align:left;font-family:var(--font-display);font-size:clamp(17px,1.5vw,21px);font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.faq-item button i{position:relative;flex:0 0 30px;height:30px;border-radius:50%;border:1px solid rgba(124,92,255,.4);transition:background .3s,transform .35s var(--ease)}
.faq-item button i::before,.faq-item button i::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:2px;border-radius:2px;background:var(--violet);transform:translate(-50%,-50%)}
.faq-item button i::after{transform:translate(-50%,-50%) rotate(90deg);transition:opacity .25s}
.faq-item button[aria-expanded="true"] i{background:var(--violet-soft);transform:rotate(180deg)}
.faq-item button[aria-expanded="true"] i::after{opacity:0}
.faq-answer{overflow:hidden}
.faq-answer p{max-width:720px;padding:0 4px 28px;font-size:15px;line-height:1.7;color:#4c4b58}

/* ---------- CTA ---------- */
.cta{position:relative;display:flex;flex-direction:column;min-height:108svh;overflow:hidden;isolation:isolate;padding:140px 6vw 0;background:linear-gradient(160deg,#0b0817 0%,#241457 55%,#4a2fb8 130%);color:#fff}
.cta-video{position:absolute;z-index:-2;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s var(--ease)}
.cta.has-video .cta-video{opacity:.5}
.cta-shade{position:absolute;z-index:-1;inset:0;background:radial-gradient(90% 70% at 50% 30%,rgba(124,92,255,.22),transparent 60%),linear-gradient(180deg,rgba(7,7,11,.5),transparent 30%,rgba(7,7,11,.72) 96%)}
.cta-inner{margin:auto;text-align:center;max-width:960px}
.cta-inner h2{margin-top:22px;font-size:clamp(52px,7.4vw,124px);line-height:.98;letter-spacing:-.045em}
.cta-inner em{font-style:normal;background:linear-gradient(100deg,#b7a4ff,#8d70ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.cta-inner .btn{margin-top:46px}
.cta footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;min-height:92px;margin-top:110px;border-top:1px solid rgba(255,255,255,.14);font-size:12px;color:#b6b1d6}
.cta footer>p:last-child{text-align:right}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .masthead{padding:0 24px}
  .features-stage{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:26px;padding:96px 5vw 40px}
  .features-panel{height:auto;min-height:0;flex:1}
  .metric-grid{grid-template-columns:1fr;gap:16px}
  .plan-grid{grid-template-columns:1fr;gap:30px}
  .plan.is-featured{transform:none}
  .mini-dash{grid-template-columns:1fr}
  .dash-side{flex-direction:row;align-items:center;gap:18px;overflow-x:auto}
  .dash-side ul{grid-auto-flow:column}
  .dash-user{display:none}
}

@media (max-width:720px){
  .mast-nav,.frame-counter{display:none}
  .masthead{grid-template-columns:1fr auto;height:66px;padding:0 18px}
  .masthead.is-compact{height:58px}
  .sticky-stage{min-height:560px}
  .hero{height:380vh}
  .features{height:300vh}
  .hero-head{left:20px;right:20px;bottom:8vh}
  .hero-head h1{font-size:17vw}
  .hero-sub{font-size:15px}
  .hero-mid{left:20px;right:20px;top:16vh}
  .hero-mid p{font-size:11.5vw}
  .hero-closing p{font-size:11.5vw}
  .scroll-cue{left:20px;bottom:22px}
  .logos{padding:80px 20px 20px}
  .logo-strip{gap:18px 30px}
  .metrics,.product,.pricing,.faq{padding:90px 20px}
  .features-stage{padding:86px 16px 30px}
  .feature-block{left:16px;right:16px;padding:26px 22px}
  .dash-kpis{grid-template-columns:1fr 1fr}
  .kpi:last-child{grid-column:span 2}
  .tr{grid-template-columns:1.4fr 1fr;row-gap:2px}
  .tr span:nth-child(3),.tr span:nth-child(4){display:none}
  .billing-toggle{flex-wrap:wrap}
  .cta{padding:110px 20px 0}
  .cta footer{grid-template-columns:1fr auto;margin-top:80px}
  .cta footer>p:first-of-type{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .scroll-cue i::after{animation:none}
  [data-window]{opacity:1!important;translate:0 0!important}
  .btn,.toggle i,.faq-item button i{transition-duration:.01ms}
  .loading-curtain,.masthead,.canvas-fallback{transition-duration:.01ms}
}