/* ==== TOKENS ==== */
:root {
  --bg-0: #04060c;
  --bg-1: #0a0d18;
  --bg-2: #11152a;
  --ink-0: #ffffff;
  --ink-1: #e6e9f5;
  --ink-2: #9aa0b8;
  --ink-3: #5b607a;
  --line: rgba(255,255,255,0.08);
  --line-2: rgba(255,255,255,0.14);

  --cyan: #4af0d4;
  --cyan-2: #5be3ff;
  --violet: #8a5cff;
  --magenta: #c66bff;
  --pink: #ff7ad9;
  --lime: #b9ff5e;
  --acid: #7cff5a;

  --grad-headline: linear-gradient(92deg, #4af0d4 0%, #5be3ff 28%, #8a5cff 65%, #c66bff 100%);
  --grad-cta: linear-gradient(92deg, #4af0d4 0%, #6dd9ff 35%, #a273ff 70%, #c66bff 100%);
  --grad-card: radial-gradient(120% 100% at 0% 0%, rgba(80,150,255,0.10), transparent 55%),
               radial-gradient(140% 110% at 100% 100%, rgba(180,90,255,0.10), transparent 60%),
               linear-gradient(180deg, #0d1226 0%, #07091a 100%);

  --shadow-glow: 0 0 0 1px rgba(255,255,255,0.05), 0 30px 80px -20px rgba(120,80,255,0.45), 0 0 0 1px rgba(120,255,220,0.15) inset;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; }
html, body { background: var(--bg-0); color: var(--ink-1); font-family: 'Onest', 'Inter', system-ui, sans-serif; font-size: 16px; line-height: 1.5; }
body {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(120, 80, 255, 0.18), transparent 60%),
    radial-gradient(ellipse 60% 30% at 80% 30%, rgba(80, 220, 200, 0.10), transparent 55%),
    radial-gradient(ellipse 60% 35% at 20% 60%, rgba(200, 100, 255, 0.10), transparent 55%),
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(80, 200, 255, 0.10), transparent 60%),
    var(--bg-0);
  background-attachment: fixed;
  overflow-x: hidden;
}

/* starfield noise */
body::before {
  content: "";
  position: fixed; inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,0.6), transparent 60%),
    radial-gradient(1px 1px at 78% 32%, rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(1px 1px at 35% 60%, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(1px 1px at 65% 80%, rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(1px 1px at 88% 70%, rgba(255,255,255,0.4), transparent 60%),
    radial-gradient(1px 1px at 22% 42%, rgba(255,255,255,0.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 50% 25%, rgba(180,220,255,0.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 8% 78%, rgba(180,220,255,0.6), transparent 60%);
  background-size: 100% 100%;
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
  animation: twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle { 0%{opacity:0.5} 100%{opacity:0.85} }

/* layout */
.shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 0 18px 140px;
}

/* ==== TYPE ==== */
.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.h1 {
  font-family: 'Unbounded', 'Onest', sans-serif;
  font-weight: 800;
  font-size: clamp(34px, 9vw, 44px);
  line-height: 0.96;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink-0);
}
.h2 {
  font-family: 'Unbounded', 'Onest', sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 7.5vw, 38px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--ink-0);
}
.h3 {
  font-family: 'Unbounded', 'Onest', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.body { color: var(--ink-1); font-size: 15px; line-height: 1.55; }
.muted { color: var(--ink-2); }
.mono { font-family: 'JetBrains Mono', monospace; }

.grad-text {
  background: var(--grad-headline);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* card / chip */
.card {
  position: relative;
  background: var(--grad-card);
  border-radius: 22px;
  padding: 22px;
  border: 1px solid var(--line);
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(74,240,212,0.45), rgba(138,92,255,0.15) 40%, rgba(198,107,255,0.35) 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.7;
}
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-1);
}
.chip .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
}
.chip-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(92deg, rgba(138,92,255,0.5), rgba(198,107,255,0.5));
  border: 1px solid rgba(198,107,255,0.5);
  font-family: 'Unbounded', sans-serif;
  font-weight: 600; font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: white;
  box-shadow: 0 0 30px rgba(180,90,255,0.35);
}

/* CTA button */
.cta {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  padding: 20px 22px;
  border: 0;
  border-radius: 18px;
  background: var(--grad-cta);
  color: #06091a;
  font-family: 'Unbounded', sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    0 18px 40px -12px rgba(80,220,255,0.55),
    0 18px 40px -12px rgba(180,90,255,0.55),
    inset 0 1px 0 rgba(255,255,255,0.5);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.cta:hover { transform: translateY(-2px); }
.cta:active { transform: translateY(0); }
.cta--ghost {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-2);
  color: var(--ink-1);
  box-shadow: none;
}

/* section spacing */
.section { padding: 56px 0 0; }
.section--lg { padding: 88px 0 0; }
.section-head { text-align: center; margin-bottom: 28px; }

/* drippy heading: green slime drops attached to bottom */
.drippy {
  position: relative;
  display: inline-block;
}

/* link */
a { color: inherit; text-decoration: none; }

/* form */
.field {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  transition: border-color 0.18s, background 0.18s;
}
.field:focus-within {
  border-color: rgba(74,240,212,0.6);
  background: rgba(74,240,212,0.04);
}
.field input {
  flex: 1; min-width: 0;
  background: transparent;
  border: 0; outline: 0;
  color: var(--ink-0);
  font: inherit;
  font-size: 15px;
}
.field input::placeholder { color: var(--ink-3); }
.field-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 8px;
  display: block;
}

/* sticky CTA */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(4,6,12,0) 0%, rgba(4,6,12,0.85) 35%, rgba(4,6,12,0.96) 100%);
  backdrop-filter: blur(8px);
  display: flex; justify-content: center;
  pointer-events: none;
  transform: translateY(110%);
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1);
}
.sticky-cta.show { transform: translateY(0); }
.sticky-cta .cta { pointer-events: auto; max-width: 440px; }

/* faq */
.faq-item {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0));
  border-radius: 18px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.faq-item + .faq-item { margin-top: 10px; }
.faq-item.open { border-color: rgba(138,92,255,0.45); }
.faq-q {
  width: 100%;
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--ink-0);
}
.faq-q-icon {
  flex: 0 0 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(140deg, rgba(74,240,212,0.25), rgba(198,107,255,0.35));
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: white;
  text-shadow: 0 0 8px rgba(180,90,255,0.7);
}
.faq-q-text {
  flex: 1;
  font-family: 'Onest', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.faq-q-chev {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  color: var(--ink-2);
  transition: transform 0.25s;
}
.faq-item.open .faq-q-chev { transform: rotate(180deg); color: var(--cyan); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  padding: 0 20px 0 70px;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.55;
}
.faq-item.open .faq-a {
  max-height: 280px;
  padding-bottom: 18px;
}

/* timer */
.timer {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: rgba(0,0,0,0.5);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.timer-icon {
  flex: 0 0 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(140deg, rgba(74,240,212,0.2), rgba(198,107,255,0.3));
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 22px;
}
.timer-text {
  flex: 1;
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink-1);
}
.timer-clock {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 22px;
  background: var(--grad-headline);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0.04em;
  min-width: 76px;
  text-align: right;
}

/* placeholder media boxes (drippy objects) */
.placeholder {
  position: relative;
  width: 100%;
  border-radius: 16px;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 8px, rgba(255,255,255,0.02) 8px 16px),
    radial-gradient(circle at 50% 50%, rgba(138,92,255,0.25), rgba(74,240,212,0.18) 60%, transparent 80%);
  border: 1px dashed rgba(255,255,255,0.18);
  display: grid; place-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-align: center;
  padding: 12px;
}

/* lesson card */
.lesson {
  position: relative;
  padding: 22px;
}
.lesson-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 14px;
}
.lesson-meta b { color: var(--ink-1); font-weight: 500; }

/* deal card (proof) */
.deal {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 14px;
  align-items: baseline;
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--line);
}
.deal-coin {
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--ink-0);
  letter-spacing: -0.01em;
}
.deal-pnl {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 18px;
  color: var(--acid);
  text-align: right;
}
.deal-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
}
.deal-pnl-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-3);
  text-align: right;
}

/* step row */
.step {
  position: relative;
  padding: 24px;
  border-radius: 22px;
  background: var(--grad-card);
  border: 1px solid var(--line);
  overflow: hidden;
}
.step-num {
  position: absolute;
  top: -10px; right: 18px;
  font-family: 'Unbounded', sans-serif;
  font-weight: 800;
  font-size: 96px;
  line-height: 1;
  background: linear-gradient(180deg, rgba(138,92,255,0.45), rgba(138,92,255,0.0));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  pointer-events: none;
}

/* slime drop element (decorative) */
.slime {
  position: absolute;
  width: 100%; left: 0; right: 0;
  height: 14px;
  pointer-events: none;
}

/* progress bar */
.progress-track {
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 100%;
  background: var(--grad-cta);
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(180,90,255,0.5);
}

/* avatars (community) */
.avatars { display: flex; }
.avatars span {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--bg-0);
  background: linear-gradient(140deg, var(--cyan), var(--violet));
  margin-left: -10px;
  display: grid; place-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: #04060c;
}
.avatars span:first-child { margin-left: 0; }

/* small util */
.row { display: flex; align-items: center; gap: 12px; }
.col { display: flex; flex-direction: column; gap: 12px; }
.center { text-align: center; }
.divider { height: 1px; background: var(--line); margin: 22px 0; }
.kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line-2);
  color: var(--ink-1);
}

/* slime drip pseudo for headings */
.slime-under {
  position: relative;
  padding-bottom: 14px;
}
.slime-under::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 60%;
  height: 12px;
  background:
    radial-gradient(circle at 10% 0, var(--acid) 0 4px, transparent 5px),
    radial-gradient(circle at 30% 0, var(--acid) 0 5px, transparent 6px),
    radial-gradient(circle at 55% 0, var(--acid) 0 7px, transparent 8px),
    radial-gradient(circle at 78% 0, var(--acid) 0 4px, transparent 5px),
    radial-gradient(circle at 95% 0, var(--acid) 0 5px, transparent 6px);
  filter: drop-shadow(0 0 6px rgba(120,255,90,0.7));
  opacity: 0.85;
}