/* Infinity Nexus — Design System (vanilla CSS port of the Tailwind/oklch tokens) */
:root{
  --radius:.75rem;
  --background:oklch(.13 .04 270);
  --foreground:oklch(.97 .01 250);
  --card:oklch(.17 .045 270);
  --card-fg:oklch(.97 .01 250);
  --muted:oklch(.2 .04 270);
  --muted-fg:oklch(.7 .03 260);
  --border:oklch(.28 .05 270 / 60%);
  --input:oklch(.25 .05 270);
  --secondary:oklch(.22 .05 270);
  --destructive:oklch(.65 .24 25);
  --nebula:oklch(.7 .21 340);
  --plasma:oklch(.82 .16 200);
  --stellar:oklch(.88 .15 90);
  --aurora:oklch(.75 .18 150);
}
*{box-sizing:border-box;border-color:var(--border)}
html{-webkit-font-smoothing:antialiased}
body{
  margin:0;color:var(--foreground);
  background-color:var(--background);
  font-family:"Inter",ui-sans-serif,system-ui,sans-serif;
  background-image:
    radial-gradient(ellipse 80% 60% at 50% -10%, oklch(.7 .21 340 / .18), transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 10%, oklch(.82 .16 200 / .12), transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 30%, oklch(.7 .21 270 / .12), transparent 60%);
  background-attachment:fixed;line-height:1.55;
}
h1,h2,h3,h4{font-family:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;letter-spacing:-.02em;margin:0 0 .5em}
p{margin:0 0 1em}
a{color:inherit;text-decoration:none}
ul{margin:0;padding-left:1.2em}
img{max-width:100%}
hr{border:none;border-top:1px solid var(--border);margin:2rem 0}

/* layout */
.container{max-width:80rem;margin:0 auto;padding:0 1.25rem}
.container-narrow{max-width:64rem;margin:0 auto;padding:0 1.25rem}
.container-thin{max-width:48rem;margin:0 auto;padding:0 1.25rem}
.section{padding:6rem 0}
.grid{display:grid;gap:1.25rem}
.flex{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}
.spread{justify-content:space-between}
.center{text-align:center;justify-content:center}
.col{flex-direction:column;align-items:stretch}
.gap-lg{gap:1.5rem}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}.mt-6{margin-top:3rem}.mt-10{margin-top:4rem}
.mb-2{margin-bottom:1rem}.mb-4{margin-bottom:2rem}
.muted{color:var(--muted-fg)}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
.small{font-size:.85rem}
.xs{font-size:.75rem}
.text-plasma{color:var(--plasma)}
.text-nebula{color:var(--nebula)}
.text-destructive{color:var(--destructive)}

/* utilities */
.glass{
  background:oklch(.17 .045 270 / .6);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid oklch(.5 .08 270 / .25);
  border-radius:1rem;padding:1.5rem;
}
.glass-lg{border-radius:1.5rem;padding:2rem}
.text-gradient{
  background:linear-gradient(135deg,var(--plasma),var(--nebula));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.chip{
  display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .85rem;border-radius:9999px;
  font-size:.72rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid oklch(.5 .08 270 / .4);background:oklch(.17 .045 270 / .5);color:var(--muted-fg);
}
.dot{display:inline-block;width:.5rem;height:.5rem;border-radius:9999px;background:var(--aurora);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.75rem 1.5rem;border-radius:9999px;font-weight:600;font-size:.95rem;
  cursor:pointer;border:0;transition:transform .2s,box-shadow .2s,border-color .2s,color .2s;
  text-align:center;line-height:1;font-family:inherit;
}
.btn-primary{
  background:linear-gradient(135deg,var(--plasma),var(--nebula));color:var(--background);
  box-shadow:0 10px 40px -10px var(--nebula);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 20px 50px -10px var(--plasma)}
.btn-ghost{background:transparent;color:var(--foreground);border:1px solid oklch(.5 .08 270 / .5)}
.btn-ghost:hover{border-color:var(--plasma);color:var(--plasma)}
.btn-block{width:100%}

/* header */
.header{
  position:sticky;top:0;z-index:50;
  background:oklch(.17 .045 270 / .6);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.header .inner{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;max-width:80rem;margin:0 auto}
.brand{display:flex;align-items:center;gap:.625rem;font-family:"Space Grotesk";font-weight:700;font-size:1.05rem}
.brand .mark{height:2rem;width:2rem;display:grid;place-items:center;border-radius:.5rem;background:linear-gradient(135deg,var(--plasma),var(--nebula));color:var(--background);font-weight:700;box-shadow:0 0 40px -10px var(--plasma),0 0 80px -30px var(--nebula)}
.nav{display:none;gap:.25rem;align-items:center}
.nav a{padding:.55rem .85rem;border-radius:9999px;font-size:.875rem;color:var(--muted-fg)}
.nav a:hover{color:var(--foreground)}
.nav a.active{color:var(--plasma);background:var(--secondary)}
.header-cta{display:none}
.menu-btn{background:transparent;border:1px solid var(--border);border-radius:.5rem;padding:.5rem;color:var(--foreground);cursor:pointer}
.menu-btn span{display:block;width:1.25rem;height:2px;background:currentColor;margin:4px 0}
.mobile-nav{display:none;flex-direction:column;gap:.25rem;padding:1rem 1.25rem;border-top:1px solid var(--border);background:oklch(.17 .045 270 / .95)}
.mobile-nav.open{display:flex}
.mobile-nav a{padding:.6rem 0;color:var(--muted-fg);font-size:.9rem}
@media (min-width:1024px){.nav{display:flex}.header-cta{display:flex}.menu-btn{display:none}}

/* footer */
.footer{border-top:1px solid var(--border);margin-top:6rem}
.footer .grid{padding:4rem 1.25rem;max-width:80rem;margin:0 auto;grid-template-columns:1fr;gap:3rem}
.footer h4{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-fg);font-weight:500}
.footer ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:.5rem;font-size:.9rem}
.footer a:hover{color:var(--plasma)}
.footer-bottom{border-top:1px solid var(--border);font-size:.75rem;color:var(--muted-fg);padding:1.25rem;max-width:80rem;margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.75rem}
@media (min-width:768px){.footer .grid{grid-template-columns:2fr 1fr 1fr}}

/* hero */
.starfield{
  background-image:
    radial-gradient(1px 1px at 20% 30%,white,transparent 50%),
    radial-gradient(1px 1px at 70% 80%,white,transparent 50%),
    radial-gradient(1px 1px at 40% 70%,white,transparent 50%),
    radial-gradient(1.5px 1.5px at 85% 15%,white,transparent 50%),
    radial-gradient(1px 1px at 10% 90%,white,transparent 50%),
    radial-gradient(1px 1px at 55% 45%,white,transparent 50%),
    radial-gradient(1px 1px at 90% 60%,white,transparent 50%);
  background-size:800px 800px;position:absolute;inset:0;opacity:.3;pointer-events:none;
}
.hero{position:relative;overflow:hidden;padding:6rem 0 8rem}
.hero h1{font-size:clamp(2.6rem,7vw,5.5rem);font-weight:700;line-height:.98;letter-spacing:-.03em}
.hero p.lead{font-size:1.125rem;max-width:42rem;margin:1.5rem auto;color:var(--muted-fg)}
.hero .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:3rem}
@media(min-width:768px){.hero .stats{grid-template-columns:repeat(4,1fr)}}
.stat-card{padding:1.5rem}
.stat-card .k{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted-fg)}
.stat-card .v{font-size:2.25rem;font-weight:700;margin:.5rem 0;font-family:"Space Grotesk"}
.stat-card .s{font-size:.85rem;color:var(--muted-fg)}

/* generic grid helpers */
.two{display:grid;grid-template-columns:1fr;gap:1.25rem}
.three{display:grid;grid-template-columns:1fr;gap:1.25rem}
.four{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media(min-width:768px){.two{grid-template-columns:1fr 1fr}.three{grid-template-columns:repeat(3,1fr)}.four{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.four{grid-template-columns:repeat(4,1fr)}}

/* page titles */
.page{padding:4rem 0 1rem}
.page h1{font-size:clamp(2.6rem,6vw,4.5rem);font-weight:700;line-height:1;letter-spacing:-.03em;margin-top:1rem}
.page .lead{font-size:1.125rem;color:var(--muted-fg);max-width:42rem;margin-top:1.25rem}

/* form */
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.25rem}
.field label{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted-fg)}
.field input,.field textarea,.field select{
  width:100%;background:oklch(.25 .05 270 / .4);border:1px solid var(--border);
  border-radius:.5rem;padding:.75rem 1rem;color:var(--foreground);font-family:inherit;font-size:1rem;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--plasma)}
.checkbox-row{display:flex;align-items:flex-start;gap:.75rem;font-size:.9rem;color:var(--muted-fg);margin:1rem 0}
.alert{border-radius:.75rem;padding:1rem 1.25rem;margin-bottom:1.25rem;border-left:3px solid var(--plasma);background:oklch(.17 .045 270 / .6)}
.alert.error{border-left-color:var(--destructive);color:var(--foreground)}
.alert.success{border-left-color:var(--aurora)}

/* program/tiers/dashboard */
.tier-card{position:relative;overflow:hidden}
.tier-card .blur{position:absolute;top:-3rem;right:-3rem;height:8rem;width:8rem;border-radius:9999px;background:linear-gradient(135deg,oklch(.82 .16 200 / .3),oklch(.7 .21 340 / .3));filter:blur(40px)}
.step-row{display:flex;gap:1.25rem;align-items:flex-start;padding:.6rem 0}
.step-row .n{font-family:"JetBrains Mono";font-size:.78rem;color:var(--plasma);width:2.5rem;flex-shrink:0;padding-top:.2rem}

.kv{font-family:"JetBrains Mono";display:flex;justify-content:space-between;padding:.4rem 0;font-size:.9rem}
.kv span:first-child{color:var(--muted-fg)}

/* dashboard table */
table.data{width:100%;border-collapse:collapse;font-size:.9rem}
table.data th,table.data td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--border)}
table.data th{font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted-fg);font-weight:500}
.badge{display:inline-block;font-size:.7rem;padding:.2rem .55rem;border-radius:9999px;border:1px solid var(--border);color:var(--muted-fg)}
.badge.ok{color:var(--aurora);border-color:var(--aurora)}
.badge.warn{color:var(--stellar);border-color:var(--stellar)}
.badge.danger{color:var(--destructive);border-color:var(--destructive)}

/* CTA banner */
.cta-banner{position:relative;overflow:hidden;border-radius:1.5rem;padding:3rem 1.5rem;text-align:center}
.cta-banner::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,oklch(.82 .16 200 / .1),transparent,oklch(.7 .21 340 / .15))}
.cta-banner > *{position:relative}
@media(min-width:768px){.cta-banner{padding:4rem}}

/* dashboard layout */
.dash-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;padding:2rem 0}
@media(min-width:1024px){.dash-grid{grid-template-columns:240px 1fr}}
.dash-side{position:sticky;top:6rem;align-self:start}
.dash-side a{display:block;padding:.55rem .85rem;border-radius:.5rem;font-size:.9rem;color:var(--muted-fg)}
.dash-side a.active,.dash-side a:hover{color:var(--plasma);background:var(--secondary)}

.auth-wrap{max-width:28rem;margin:5rem auto;padding:0 1.25rem}
