:root{
  --bg:#0a0a0f;
  --bg-2:#0e0f16;
  --bg-3:#12131c;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.14);
  --fg:#f2f4f8;
  --fg-2:#a4abbd;
  --fg-3:#6f7689;
  --acc:#7c5cff;
  --acc-2:#4dd4ff;
  --ok:#3ddc97;
  --r:14px;
  --wrap:1080px;
  --pad:24px;
  --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{margin:0;line-height:1.15;letter-spacing:-.025em;font-weight:680}
p{margin:0}
code{font-family:var(--mono);font-size:.9em}
svg{display:block}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
.wrap.narrow{max-width:760px}
.center{text-align:center}

.skip{position:absolute;left:-9999px;top:0;background:var(--acc);color:#fff;
  padding:10px 16px;border-radius:0 0 var(--r) 0;z-index:100}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--acc-2);outline-offset:3px;border-radius:6px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 20px;border:0;border-radius:11px;cursor:pointer;
  font:inherit;font-size:.94rem;font-weight:620;letter-spacing:-.01em;
  color:#fff;background:linear-gradient(135deg,var(--acc),#6244e8);
  text-decoration:none;white-space:nowrap;
  transition:transform .12s ease,box-shadow .2s ease,opacity .2s ease;
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 8px 24px -10px rgba(124,92,255,.85);
}
.btn:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 14px 32px -12px rgba(124,92,255,.95)}
.btn:active{transform:translateY(0)}
.btn-lg{padding:15px 26px;font-size:1rem}
.btn-sm{padding:9px 16px;font-size:.88rem}
.btn-block{width:100%;margin-top:6px}
.btn-ghost{background:transparent;color:var(--fg);border:1px solid var(--line-2);box-shadow:none}
.btn-ghost:hover{background:rgba(255,255,255,.05);box-shadow:none}
.gh{width:17px;height:17px;fill:currentColor;flex:none}

.nav{position:sticky;top:0;z-index:50;background:rgba(10,10,15,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:20px;height:62px}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--fg);margin-right:auto}
.logo-mark{width:22px;height:22px;border-radius:7px;flex:none;
  background:linear-gradient(135deg,var(--acc),var(--acc-2));
  box-shadow:0 0 18px -4px var(--acc)}
.logo-txt{font-size:1.06rem;font-weight:700;letter-spacing:-.03em;font-family:var(--mono)}
.logo-txt.sm{font-size:.95rem;color:var(--fg-2)}
.nav-links{display:flex;gap:26px}
.nav-links a{color:var(--fg-2);text-decoration:none;font-size:.9rem;font-weight:500;
  transition:color .15s ease}
.nav-links a:hover{color:var(--fg)}

.hero{position:relative;padding:76px 0 52px;text-align:center;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:-40% 50% auto;translate:50% 0;
  width:min(900px,120vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(124,92,255,.17),transparent 62%);
  pointer-events:none;
}
.hero .wrap{position:relative}

.eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:22px;
  padding:6px 14px;border:1px solid var(--line-2);border-radius:999px;
  background:rgba(255,255,255,.03);
  font-size:.8rem;font-weight:550;color:var(--fg-2)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none;
  box-shadow:0 0 0 3px rgba(61,220,151,.16)}

h1{font-size:clamp(2.1rem,6.2vw,3.7rem);font-weight:720;margin-bottom:22px}
.grad{background:linear-gradient(115deg,var(--acc-2),var(--acc) 58%,#b79bff);
  -webkit-background-clip:text;background-clip:text;color:transparent}

.lede{max-width:600px;margin:0 auto;color:var(--fg-2);font-size:1.06rem}

.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:32px 0 12px}
.micro{color:var(--fg-3);font-size:.82rem}

.term{max-width:640px;margin:48px auto 0;text-align:left;
  border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;
  background:#08080d;box-shadow:0 30px 70px -35px rgba(0,0,0,.95)}
.term-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;
  background:var(--bg-3);border-bottom:1px solid var(--line)}
.tdot{width:11px;height:11px;border-radius:50%;flex:none}
.tdot.r{background:#ff5f57}.tdot.y{background:#febc2e}.tdot.g{background:#28c840}
.term-name{margin-left:6px;font-family:var(--mono);font-size:.76rem;color:var(--fg-3)}
.term-body{margin:0;padding:18px 16px;overflow-x:auto;
  font-family:var(--mono);font-size:.84rem;line-height:1.85}
.term-body .l{display:block;white-space:pre}
.term-body .p{color:var(--acc)}
.term-body .dim{color:var(--fg-3)}
.term-body .ok{color:var(--ok)}
.caret{display:inline-block;width:8px;height:1em;vertical-align:-2px;
  background:var(--acc-2);animation:blink 1.1s steps(2) infinite}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}

.band{padding:72px 0;border-top:1px solid var(--line)}
.band.alt{background:var(--bg-2)}
.h2{font-size:clamp(1.6rem,4vw,2.3rem);text-align:center}
.sub{max-width:560px;margin:14px auto 44px;text-align:center;color:var(--fg-2)}

.grid-3{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.card{padding:26px 24px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--bg-3);transition:border-color .2s ease,transform .2s ease}
.card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  margin-bottom:16px;background:rgba(124,92,255,.13);border:1px solid rgba(124,92,255,.22)}
.ic svg{width:19px;height:19px;fill:none;stroke:#a894ff;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:1.04rem;margin-bottom:9px}
.card p{color:var(--fg-2);font-size:.93rem}
.card code{background:rgba(255,255,255,.07);padding:2px 6px;border-radius:5px;color:var(--fg-2)}

.steps{list-style:none;margin:0;padding:0;max-width:640px;margin-inline:auto;
  display:grid;gap:12px}
.steps li{display:flex;gap:18px;align-items:flex-start;
  padding:22px 24px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-3)}
.num{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  font-family:var(--mono);font-size:.88rem;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--acc),#6244e8)}
.steps h3{font-size:1.02rem;margin-bottom:6px}
.steps p{color:var(--fg-2);font-size:.93rem}

.tiers{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  max-width:760px;margin-inline:auto;align-items:start}
.tier{position:relative;padding:30px 26px;border:1px solid var(--line);
  border-radius:18px;background:var(--bg-3)}
.tier.feat{border-color:rgba(124,92,255,.45);
  background:linear-gradient(180deg,rgba(124,92,255,.09),var(--bg-3) 46%);
  box-shadow:0 22px 54px -30px rgba(124,92,255,.6)}
.badge{position:absolute;top:-11px;left:26px;padding:4px 12px;border-radius:999px;
  font-size:.72rem;font-weight:650;color:#fff;
  background:linear-gradient(135deg,var(--acc),#6244e8)}
.tier-n{font-size:.88rem;font-weight:600;color:var(--fg-2);text-transform:uppercase;
  letter-spacing:.09em}
.price{margin:10px 0 4px;font-size:2.9rem;font-weight:720;letter-spacing:-.04em;line-height:1;
  display:flex;align-items:baseline;gap:1px}

.cur{font-size:1.5rem;color:var(--fg-2);font-weight:600}
.per{font-size:.95rem;font-weight:500;color:var(--fg-3);letter-spacing:0;margin-left:3px}
.tier-d{color:var(--fg-2);font-size:.92rem;margin-bottom:20px}
.feats{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:11px}
.feats li{position:relative;padding-left:26px;font-size:.93rem;color:var(--fg-2)}
.feats li b{color:var(--fg);font-weight:600}
.feats li::before{
  content:"";position:absolute;left:0;top:.45em;width:14px;height:8px;
  border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);
  rotate:-45deg;border-radius:1px;
}

details{border:1px solid var(--line);border-radius:var(--r);background:var(--bg-3);
  margin-bottom:10px;overflow:hidden}
details[open]{border-color:var(--line-2)}
summary{padding:17px 20px;cursor:pointer;font-weight:590;font-size:.97rem;
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"";width:9px;height:9px;flex:none;
  border-right:2px solid var(--fg-3);border-bottom:2px solid var(--fg-3);
  rotate:45deg;translate:0 -2px;transition:rotate .2s ease}
details[open] summary::after{rotate:-135deg;translate:0 2px}
details p{padding:0 20px 19px;color:var(--fg-2);font-size:.93rem}

.final{padding:84px 0;text-align:center;border-top:1px solid var(--line);
  background:radial-gradient(ellipse 70% 100% at 50% 100%,rgba(124,92,255,.16),transparent 66%)}
.final h2{font-size:clamp(1.7rem,4.4vw,2.5rem);margin-bottom:12px}
.final p{color:var(--fg-2);margin-bottom:28px}

.foot{border-top:1px solid var(--line);padding:26px 0}
.foot-in{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot-c{color:var(--fg-3);font-size:.85rem}

@media (max-width:760px){
  .nav-links{display:none}           
  .hero{padding:52px 0 40px}
  .band{padding:56px 0}
  .final{padding:64px 0}
  .cta-row .btn{width:100%}          
  .term-body{font-size:.76rem}
  .steps li{padding:20px}
}
@media (max-width:380px){
  :root{--pad:18px}
  .term-body{font-size:.7rem}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  .card:hover,.btn:hover{transform:none}
}