:root {
  --bg:#0B0E14; --surface:#121722; --border:#1F2838; --text:#E6EAF2; --muted:#9AA4B8;
  --accent:#5CC8D7; --onaccent:#06242A; --glow:#BFEFF5; --particle:#BFEFF5;
  --c1:#5CC8D7; --c2:#8B8CF0; --c3:#F4EFE3; --coreA:#1B2A3E; --coreB:#0E1420; --coreBorder:#2B3A55; --coreText:#E6EAF2;
  --head:"Space Grotesk","Segoe UI",system-ui,-apple-system,sans-serif; --body:Inter,"Segoe UI",system-ui,-apple-system,sans-serif; --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
:root[data-theme="cream"] {
  --bg:#F4EFE3; --surface:#FBF8F0; --border:#DDD5C2; --text:#101A33; --muted:#586280;
  --accent:#2A4FC0; --onaccent:#F4EFE3; --glow:#2A4FC0; --particle:#2A4FC0;
  --c1:#2A4FC0; --c2:#6C93F5; --c3:#0F1B4D; --coreA:#FBF8F0; --coreB:#E9E2CF; --coreBorder:#CFC6AE; --coreText:#0F1B4D;
}
:root[data-theme="nebula"] {
  --bg:#100B24; --surface:#1A1338; --border:#2E2459; --text:#F1ECFF; --muted:#B5AAD9;
  --accent:#9B7BFF; --onaccent:#0E0722; --glow:#E6DDFF; --particle:#E6DDFF;
  --c1:#9B7BFF; --c2:#C9B8FF; --c3:#F1ECFF; --coreA:#2A1F55; --coreB:#100B24; --coreBorder:#3E3180; --coreText:#F1ECFF;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:var(--body); line-height:1.6; overflow-x:hidden; transition:background .3s,color .3s; }
#particles { position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
:root[data-particles="off"] #particles { display:none; }
header, main, footer { position:relative; z-index:1; }

.nav { display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center; justify-content:space-between; padding:22px 6vw; }
.brand { font-family:var(--head); font-weight:700; font-size:24px; letter-spacing:-.5px; color:var(--text); text-decoration:none; }
.links { display:flex; gap:24px; flex-wrap:wrap; font-size:15px; }
.links a { color:var(--muted); text-decoration:none; }
.links a:hover, .links a:focus-visible { color:var(--text); }
.controls { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.chips { display:flex; gap:4px; padding:5px; border:1px solid var(--border); border-radius:999px; background:var(--surface); }
.chip { font:12px var(--mono); padding:7px 13px; border-radius:999px; border:0; background:transparent; color:var(--muted); cursor:pointer; }
.chip[aria-pressed="true"] { background:var(--accent); color:var(--onaccent); }
.toggle { border:1px solid var(--border); background:var(--surface); }
.toggle[aria-pressed="false"] { text-decoration:line-through; }
.chip:focus-visible, .btn:focus-visible, a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

main { padding:0 6vw 40px; display:flex; flex-direction:column; gap:72px; }
.hero { display:flex; flex-wrap:wrap; gap:32px 48px; align-items:center; justify-content:space-between; padding-top:24px; }
.hero-text { flex:1 1 420px; min-width:0; display:flex; flex-direction:column; gap:22px; }
.eyebrow { margin:0; font:13px var(--mono); letter-spacing:2px; color:var(--accent); }
h1 { margin:0; font-family:var(--head); font-weight:700; font-size:clamp(38px,6vw,72px); line-height:1.03; letter-spacing:-2px; }
h2 { margin:0; font-family:var(--head); font-weight:700; font-size:24px; letter-spacing:-.3px; }
.lead { margin:0; font-size:19px; color:var(--muted); max-width:540px; }
.cta { display:flex; gap:14px; flex-wrap:wrap; }
.btn { display:inline-block; padding:15px 26px; border-radius:14px; text-decoration:none; font-weight:500; border:1px solid var(--border); background:var(--surface); color:var(--text); }
.btn.primary { background:var(--accent); color:var(--onaccent); border-color:var(--accent); }
.small { margin:0; font-size:13px; color:var(--muted); }

/* logo: rings turning around a glowing NF, particles travelling round each ring */
.logo { flex:0 1 560px; width:100%; max-width:560px; }
.logo-box { position:relative; width:100%; aspect-ratio:1; container-type:inline-size; perspective:200cqw; }
.halo { position:absolute; left:25%; top:25%; width:50%; height:50%; border-radius:50%; background:radial-gradient(circle,var(--glow),transparent 62%); opacity:.5; animation:glow 4s ease-in-out infinite; }
.orb { position:absolute; left:20%; top:20%; width:60%; height:60%; transform-style:preserve-3d; animation:spin 9s linear infinite; }
.ring { position:absolute; inset:0; border-radius:50%; border:3px solid; transform-style:preserve-3d; }
.r1 { transform:rotateX(75deg); border-color:var(--c1); }
.r2 { transform:rotateY(75deg); border-color:var(--c2); }
.r3 { transform:rotateX(45deg) rotateY(45deg); border-color:var(--c3); border-width:2px; inset:9.4%; }
.orbit { position:absolute; inset:-3px; animation:orbit 5s linear infinite; }
.o2 { animation-duration:7s; animation-direction:reverse; } .o3 { animation-duration:4s; }
.dot { position:absolute; left:50%; top:-3px; width:9px; height:9px; margin-left:-4.5px; border-radius:50%; background:var(--glow); box-shadow:0 0 10px 2px var(--glow); }
.dot.sm { top:auto; bottom:-1px; width:5px; height:5px; margin-left:-2.5px; opacity:.85; }
.core { position:absolute; left:37.5%; top:37.5%; width:25%; height:25%; border-radius:50%; background:radial-gradient(circle at 35% 30%,var(--coreA),var(--coreB)); border:1px solid var(--coreBorder); display:flex; align-items:center; justify-content:center; animation:pulse 4s ease-in-out infinite; --g:var(--glow); }
.core span { font:700 10.7cqw/1 var(--head); letter-spacing:-.03em; color:var(--coreText); }
@keyframes spin { from{transform:rotateX(-18deg) rotateY(0)} to{transform:rotateX(-18deg) rotateY(360deg)} }
@keyframes orbit { to{transform:rotate(360deg)} }
@keyframes pulse { 0%,100%{box-shadow:0 0 36px 4px var(--g)} 50%{box-shadow:0 0 70px 14px var(--g)} }
@keyframes glow { 0%,100%{opacity:.4;transform:scale(.95)} 50%{opacity:.9;transform:scale(1.12)} }
.logo-box { --gl:var(--glow); }

.cards, .plans { display:grid; gap:22px; }
.cards { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.plans { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.card { border:1px solid var(--border); background:color-mix(in srgb,var(--surface) 88%,transparent); border-radius:18px; padding:28px; display:flex; flex-direction:column; gap:10px; backdrop-filter:blur(2px); }
.card.top { border-color:var(--accent); }
.card p { margin:0; color:var(--muted); }
.num { font:13px var(--mono); color:var(--accent) !important; }
.price { font:700 34px var(--head); color:var(--text) !important; } .price span { font:400 15px var(--body); color:var(--muted); }
.prose { max-width:760px; display:flex; flex-direction:column; gap:14px; }
.prose p, .prose li { color:var(--muted); font-size:17px; margin:0; } .prose ul { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:8px; }
.foot { padding:32px 6vw 48px; color:var(--muted); font-size:14px; } .foot p { margin:0; }

@media (prefers-reduced-motion: reduce) {
  .orb, .orbit, .core, .halo { animation:none; }
  html { scroll-behavior:auto; }
}