/* ==========================================================
   YOUCAN FOUNDATION — Glassmorphism theme
   ========================================================== */

:root{
  /* base surface */
  --bg-1:#0a0e27;
  --bg-2:#140f38;
  --bg-3:#1b1450;

  /* brand gradient family */
  --violet:#7c3aed;
  --indigo:#4f46e5;
  --cyan:#22d3ee;
  --coral:#fb7185;
  --emerald:#34d399;
  --amber:#fbbf24;

  --grad-primary: linear-gradient(120deg, var(--indigo), var(--violet) 55%, var(--coral));
  --grad-cool:    linear-gradient(120deg, var(--cyan), var(--indigo));
  --grad-warm:    linear-gradient(120deg, var(--coral), var(--amber));
  --grad-text:    linear-gradient(90deg, #a5b4fc, #f0abfc 45%, #fca5a5);

  /* glass */
  --glass-bg: rgba(255,255,255,0.06);
  --glass-bg-strong: rgba(255,255,255,0.10);
  --glass-border: rgba(255,255,255,0.14);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.35);

  /* text */
  --text-hi:#f5f6ff;
  --text-lo:#b6b3d6;
  --text-dim:#7d799e;

  --radius-lg:24px;
  --radius-md:16px;
  --radius-sm:10px;
  --maxw:1240px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}

body{
  margin:0;
  font-family:'Inter',sans-serif;
  background:var(--bg-1);
  color:var(--text-hi);
  overflow-x:hidden;
  position:relative;
}

a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; }
.container-x{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }

h1,h2,h3,h4{
  font-family:'Sora',sans-serif;
  font-weight:700;
  line-height:1.12;
  margin:0;
  letter-spacing:-0.01em;
}

.section{ position:relative; padding:130px 0; }
@media (max-width:900px){ .section{ padding:90px 0; } }

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

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Space Grotesk',monospace;
  font-size:12.5px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--cyan);
  margin:0 0 18px;
}
.eyebrow .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--grad-warm);
  box-shadow:0 0 12px var(--coral);
}

.section-head{ max-width:640px; margin:0 auto 60px; text-align:center; }
.section-head h2{ font-size:clamp(30px,4vw,46px); margin-bottom:16px; }
.section-head p{ color:var(--text-lo); font-size:16.5px; margin:0; }

/* ---------------- background mesh ---------------- */
.mesh-bg{
  position:fixed; inset:0; z-index:-2; overflow:hidden;
  background:
    radial-gradient(ellipse 900px 700px at 15% 10%, rgba(124,58,237,0.35), transparent 60%),
    radial-gradient(ellipse 800px 600px at 85% 25%, rgba(34,211,238,0.25), transparent 60%),
    radial-gradient(ellipse 900px 800px at 50% 90%, rgba(251,113,133,0.20), transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-2) 45%, var(--bg-1));
}
.blob{
  position:absolute; border-radius:50%; filter:blur(90px); opacity:0.55;
  animation:float 18s ease-in-out infinite;
}
.blob-1{ width:480px; height:480px; background:var(--violet); top:-120px; left:-100px; }
.blob-2{ width:420px; height:420px; background:var(--cyan); top:35%; right:-140px; animation-delay:-6s; }
.blob-3{ width:520px; height:520px; background:var(--coral); bottom:-180px; left:30%; animation-delay:-11s; }
@keyframes float{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(40px,-30px) scale(1.06); }
  66%{ transform:translate(-30px,25px) scale(0.96); }
}

.grain{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:0.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------- glass surfaces ---------------- */
.glass{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:var(--glass-shadow);
}
.glass-card{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-md);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), background .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.glass-card:hover{
  transform:translateY(-8px);
  background:var(--glass-bg-strong);
  border-color:rgba(255,255,255,0.28);
  box-shadow:0 22px 50px -20px rgba(79,70,229,0.45);
}

/* ---------------- navbar ---------------- */
#nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  padding:16px 0;
  transition:padding .3s ease, background .3s ease;
}
#nav.scrolled{
  padding:10px 0;
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 22px;
}
.brand{ display:flex; align-items:center; gap:11px; }
.brand img{ height:32px; width:auto; border-radius:6px; }
.brand span{
  font-family:'Sora',sans-serif; font-weight:700; font-size:15px; letter-spacing:0.01em;
  color:var(--text-hi);
}
.nav-links{ display:flex; align-items:center; gap:8px; list-style:none; margin:0; padding:0; }
.nav-links a:not(.btn){
  padding:9px 16px; border-radius:999px; font-size:14px; color:var(--text-lo);
  transition:color .2s ease, background .2s ease;
}
.nav-links a:not(.btn):hover{ color:var(--text-hi); background:rgba(255,255,255,0.06); }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Sora',sans-serif; font-weight:600; font-size:14px;
  padding:12px 24px; border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
  white-space:nowrap;
}
.btn:active{ transform:scale(0.97); }
.btn-grad{
  background:var(--grad-primary); background-size:180% 180%; color:#fff;
  box-shadow:0 10px 30px -8px rgba(124,58,237,0.65);
  animation:grad-shift 6s ease infinite;
}
.btn-grad:hover{ box-shadow:0 14px 36px -6px rgba(124,58,237,0.85); transform:translateY(-2px); }
@keyframes grad-shift{ 0%,100%{background-position:0% 50%;} 50%{background-position:100% 50%;} }

.btn-glass{
  background:var(--glass-bg); border-color:var(--glass-border); color:var(--text-hi);
  backdrop-filter:blur(12px);
}
.btn-glass:hover{ background:var(--glass-bg-strong); transform:translateY(-2px); }

.nav-toggle{ display:none; }
.burger{
  display:none; width:40px; height:40px; border-radius:10px;
  align-items:center; justify-content:center; cursor:pointer;
  background:var(--glass-bg); border:1px solid var(--glass-border);
}
.burger span{ position:relative; width:18px; height:2px; background:var(--text-hi); display:block; }
.burger span::before,.burger span::after{ content:""; position:absolute; width:18px; height:2px; background:var(--text-hi); left:0; }
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }

@media (max-width:900px){
  .nav-links{
    position:fixed; inset:76px 16px auto 16px; flex-direction:column; align-items:stretch;
    padding:18px; gap:6px; transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:all .3s ease;
  }
  .nav-toggle:checked ~ .nav-links{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav-links a{ text-align:center; }
  .burger{ display:flex; }
}

/* ---------------- hero ---------------- */
#hero{
  min-height:100svh; display:flex; align-items:center;
  padding-top:130px; padding-bottom:60px; position:relative;
}
.hero-inner{ text-align:center; max-width:900px; margin:0 auto; }
.hero-badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:9px 18px; border-radius:999px; margin-bottom:30px;
  font-family:'Space Grotesk',monospace; font-size:12.5px; letter-spacing:0.1em;
}
.hero-badge .pulse{
  width:8px; height:8px; border-radius:50%; background:var(--emerald);
  box-shadow:0 0 0 0 rgba(52,211,153,0.6); animation:pulse 2s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(52,211,153,0.55);} 70%{ box-shadow:0 0 0 10px rgba(52,211,153,0);} 100%{ box-shadow:0 0 0 0 rgba(52,211,153,0);}
}

.hero-title{ font-size:clamp(38px,6.4vw,80px); }
.hero-title .line{ display:block; overflow:hidden; }
.hero-title .line span{
  display:inline-block; transform:translateY(110%); opacity:0;
  animation:line-up .9s cubic-bezier(.2,.8,.2,1) forwards;
}
.hero-title .line:nth-child(1) span{ animation-delay:.05s; }
.hero-title .line:nth-child(2) span{ animation-delay:.18s; }
@keyframes line-up{ to{ transform:translateY(0); opacity:1; } }

.rotator-line{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:4px; }
.rotator{
  position:relative; height:1.15em; overflow:hidden; display:inline-block; min-width:280px; text-align:left;
}
.rotator-word{
  position:absolute; left:0; top:0; white-space:nowrap;
  background:var(--grad-warm); -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:0; transform:translateY(100%);
  transition:transform .55s cubic-bezier(.2,.8,.2,1), opacity .5s ease;
}
.rotator-word.active{ opacity:1; transform:translateY(0); }
.rotator-word.exit{ opacity:0; transform:translateY(-100%); }

.hero-sub{
  margin:28px auto 40px; max-width:56ch; color:var(--text-lo); font-size:17.5px;
  opacity:0; animation:fade-up .9s ease forwards; animation-delay:.5s;
}
@keyframes fade-up{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:translateY(0);} }

.hero-actions{
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
  opacity:0; animation:fade-up .9s ease forwards; animation-delay:.68s;
}

.hero-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  max-width:760px; margin:64px auto 0;
  opacity:0; animation:fade-up .9s ease forwards; animation-delay:.85s;
}
@media (max-width:640px){ .hero-stats{ grid-template-columns:1fr; } }
.hero-stat{ padding:22px 16px; text-align:center; }
.hero-stat .n{
  font-family:'Sora',sans-serif; font-weight:700; font-size:clamp(24px,3vw,34px);
}
.hero-stat .l{ margin-top:6px; font-size:12.5px; color:var(--text-lo); letter-spacing:0.02em; }

.scroll-indicator{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--text-dim); font-size:11px; letter-spacing:0.14em; font-family:'Space Grotesk',monospace;
}
.mouse{
  width:22px; height:36px; border:1.5px solid var(--glass-border); border-radius:14px;
  display:flex; justify-content:center; padding-top:6px;
}
.mouse .wheel{ width:3px; height:7px; background:var(--cyan); border-radius:2px; animation:scroll-wheel 1.6s infinite; }
@keyframes scroll-wheel{ 0%{ opacity:1; transform:translateY(0);} 100%{ opacity:0; transform:translateY(10px);} }

/* ---------------- about ---------------- */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
@media (max-width:900px){ .about-grid{ grid-template-columns:1fr; } }
.about-copy h2{ font-size:clamp(28px,3.6vw,40px); margin-bottom:20px; }
.about-copy p{ color:var(--text-lo); font-size:16px; margin:0 0 16px; max-width:52ch; }

.quote-glass{
  padding:36px 32px; position:relative;
}
.quote-glass .mark{
  font-family:'Sora',sans-serif; font-size:60px; font-weight:700;
  background:var(--grad-primary); -webkit-background-clip:text; background-clip:text; color:transparent;
  line-height:1; margin-bottom:6px;
}
.quote-glass p{ font-size:20px; line-height:1.5; color:var(--text-hi); margin:0; }
.quote-glass .who{ margin-top:20px; font-size:12.5px; letter-spacing:0.1em; color:var(--cyan); font-family:'Space Grotesk',monospace; text-transform:uppercase; }

.mv-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:26px; }
@media (max-width:560px){ .mv-row{ grid-template-columns:1fr; } }
.mv-card{ padding:22px; }
.mv-card .tag{ font-family:'Space Grotesk',monospace; font-size:11px; letter-spacing:0.12em; color:var(--emerald); text-transform:uppercase; margin-bottom:10px; display:block; }
.mv-card p{ margin:0; font-size:14.5px; color:var(--text-lo); }

/* ---------------- values ---------------- */
.values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:900px){ .values-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .values-grid{ grid-template-columns:1fr; } }
.value-card{ padding:30px 26px; }
.value-icon{
  width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  font-size:22px; margin-bottom:20px; background:var(--grad-primary); background-size:200% 200%;
}
.value-card:nth-child(1) .value-icon{ background:var(--grad-cool); }
.value-card:nth-child(2) .value-icon{ background:var(--grad-warm); }
.value-card:nth-child(3) .value-icon{ background:var(--grad-primary); }
.value-card:nth-child(4) .value-icon{ background:var(--grad-cool); }
.value-card:nth-child(5) .value-icon{ background:var(--grad-warm); }
.value-card:nth-child(6) .value-icon{ background:var(--grad-primary); }
.value-card h3{ font-size:19px; margin-bottom:10px; }
.value-card p{ color:var(--text-lo); font-size:14.5px; margin:0; }

/* ---------------- pillars (accordion) ---------------- */
.pillars-wrap{ display:flex; flex-direction:column; gap:14px; }
.pillar{ overflow:hidden; }
.pillar-head{
  width:100%; display:flex; align-items:center; gap:20px; padding:24px 26px;
  background:none; border:none; cursor:pointer; color:inherit; text-align:left; font:inherit;
}
.pillar-idx{
  width:44px; height:44px; border-radius:12px; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-family:'Sora',sans-serif; font-weight:700; font-size:14px;
  background:var(--grad-primary); background-size:200% 200%;
}
.pillar-title{ flex:1; font-family:'Sora',sans-serif; font-weight:600; font-size:clamp(17px,2.2vw,21px); }
.pillar-chev{ width:20px; height:20px; flex:none; position:relative; transition:transform .35s ease; }
.pillar-chev::before, .pillar-chev::after{ content:""; position:absolute; background:var(--cyan); top:50%; left:50%; transform:translate(-50%,-50%); }
.pillar-chev::before{ width:12px; height:2px; }
.pillar-chev::after{ width:2px; height:12px; transition:opacity .3s ease; }
.pillar[data-open="true"] .pillar-chev{ transform:rotate(135deg); }
.pillar[data-open="true"] .pillar-chev::after{ opacity:0; }

.pillar-body{ max-height:0; overflow:hidden; transition:max-height .5s cubic-bezier(.2,.8,.2,1); }
.pillar-body-inner{ padding:0 26px 26px 90px; }
@media (max-width:640px){ .pillar-body-inner{ padding-left:26px; } }
.pillar-body-inner ul{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:10px 22px; }
@media (max-width:640px){ .pillar-body-inner ul{ grid-template-columns:1fr; } }
.pillar-body-inner li{ font-size:14.5px; color:var(--text-lo); padding-left:18px; position:relative; }
.pillar-body-inner li::before{ content:""; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%; background:var(--coral); }

/* ---------------- impact ---------------- */
.impact-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:64px; }
@media (max-width:760px){ .impact-stats{ grid-template-columns:1fr; } }
.impact-stat{ padding:38px 30px; text-align:center; }
.impact-stat .n{
  font-family:'Sora',sans-serif; font-weight:700; font-size:clamp(36px,4.6vw,54px);
  background:var(--grad-primary); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.impact-stat:nth-child(2) .n{ background:var(--grad-cool); -webkit-background-clip:text; background-clip:text; }
.impact-stat:nth-child(3) .n{ background:var(--grad-warm); -webkit-background-clip:text; background-clip:text; }
.impact-stat .l{ margin-top:12px; color:var(--text-lo); font-size:14px; }

.impact-lower{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
@media (max-width:900px){ .impact-lower{ grid-template-columns:1fr; } }
.impact-lower h3{ font-size:18px; margin-bottom:20px; font-family:'Sora',sans-serif; }
.checklist{ list-style:none; display:grid; gap:14px; padding:26px; }
.checklist li{ display:flex; gap:14px; align-items:flex-start; font-size:14.5px; color:var(--text-hi); }
.check{
  flex:none; width:22px; height:22px; border-radius:50%; margin-top:1px;
  background:var(--grad-cool); display:flex; align-items:center; justify-content:center; font-size:11px;
}

.ripple-svg{ width:100%; height:auto; }

/* ---------------- serve / partners ---------------- */
.sp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; }
@media (max-width:900px){ .sp-grid{ grid-template-columns:1fr; gap:36px; } }
.sp-block h3{ font-family:'Space Grotesk',monospace; font-size:13px; letter-spacing:0.12em; text-transform:uppercase; color:var(--cyan); margin-bottom:20px; }
.tags{ display:flex; flex-wrap:wrap; gap:10px; }
.tag-pill{
  padding:9px 16px; border-radius:999px; font-size:13.5px; color:var(--text-lo);
  transition:all .25s ease;
}
.tag-pill:hover{ color:var(--text-hi); background:var(--glass-bg-strong); transform:translateY(-2px); }

/* ---------------- get involved ---------------- */
.involve-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:860px){ .involve-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .involve-grid{ grid-template-columns:1fr; } }
.involve-card{ padding:28px 24px; }
.involve-card .num{
  font-family:'Space Grotesk',monospace; font-size:12px; color:var(--coral); letter-spacing:0.08em; display:block; margin-bottom:14px;
}
.involve-card h3{ font-size:18px; margin-bottom:8px; }
.involve-card p{ margin:0; color:var(--text-lo); font-size:14px; }

.pledge-band{
  margin-top:60px; padding:44px; display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap;
  background:var(--grad-primary); background-size:180% 180%; animation:grad-shift 8s ease infinite;
  border-radius:var(--radius-lg);
}
.pledge-band p{ font-family:'Sora',sans-serif; font-weight:600; font-size:clamp(19px,2.6vw,26px); margin:0; max-width:32ch; color:#fff; }

/* ---------------- footer ---------------- */
footer{ padding:70px 0 34px; position:relative; }
.footer-top{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:44px; padding-bottom:44px; border-bottom:1px solid var(--glass-border); }
@media (max-width:760px){ .footer-top{ grid-template-columns:1fr; gap:30px; } }
.footer-brand{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.footer-brand img{ height:34px; border-radius:8px; }
.footer-brand span{ font-family:'Sora',sans-serif; font-weight:700; font-size:16px; }
.footer-tagline{ color:var(--text-lo); font-size:14px; max-width:32ch; margin:0; }
.footer-col h4{ font-family:'Space Grotesk',monospace; font-size:11.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--amber); margin:0 0 16px; }
.footer-col a, .footer-col p{ display:block; color:var(--text-lo); font-size:14.5px; margin-bottom:10px; transition:color .2s ease; }
.footer-col a:hover{ color:var(--text-hi); }
.social-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
.social-circle{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:14px; transition:transform .25s ease, background .25s ease;
}
.social-circle:hover{ transform:translateY(-3px); background:var(--glass-bg-strong); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  padding-top:26px; font-size:12.5px; color:var(--text-dim); font-family:'Space Grotesk',monospace;
}
.footer-stamp{ background:var(--grad-warm); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:700; }

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

/* reveal helper (used alongside AOS as fallback) */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ==========================================================
   GET INVOLVED — tracks, tiers, comparison table, stepper form
   ========================================================== */

.involved-hero{ text-align:center; max-width:760px; margin:0 auto 60px; }
.involved-hero h2{ font-size:clamp(30px,4.4vw,50px); margin-bottom:18px; }
.involved-hero p{ color:var(--text-lo); font-size:16.5px; margin:0 0 30px; }
.involved-hero .hero-actions{ opacity:1; animation:none; justify-content:center; }

/* ---- track tabs ---- */
.track-tabs{
  display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:40px;
}
.track-tab{
  padding:12px 22px; border-radius:999px; cursor:pointer; border:none;
  font-family:'Sora',sans-serif; font-weight:600; font-size:13.5px;
  color:var(--text-lo); transition:all .3s ease;
}
.track-tab.active{ color:#fff; background:var(--grad-primary); background-size:180% 180%; animation:grad-shift 6s ease infinite; box-shadow:0 10px 24px -8px rgba(124,58,237,0.6); }

.track-panel{ display:none; }
.track-panel.active{ display:grid; }
.tier-grid{ grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:70px; }
@media (max-width:900px){ .tier-grid{ grid-template-columns:1fr; } }

.tier-card{ padding:30px 26px; position:relative; }
.tier-card.featured{ border-color:rgba(124,58,237,0.55); box-shadow:0 0 0 1px rgba(124,58,237,0.35), var(--glass-shadow); }
.tier-card .badge{
  display:inline-block; font-family:'Space Grotesk',monospace; font-size:11px; letter-spacing:0.1em;
  text-transform:uppercase; padding:5px 12px; border-radius:999px; margin-bottom:16px;
  background:var(--glass-bg-strong); color:var(--cyan);
}
.tier-card h4{ font-family:'Sora',sans-serif; font-size:19px; font-weight:700; margin-bottom:10px; }
.tier-card p{ color:var(--text-lo); font-size:14.5px; margin:0; line-height:1.55; }

/* ---- comparison table ---- */
.table-wrap{ overflow-x:auto; margin-bottom:80px; border-radius:var(--radius-lg); }
table.tier-table{ width:100%; border-collapse:collapse; min-width:720px; }
table.tier-table th, table.tier-table td{
  padding:18px 20px; text-align:left; font-size:14px; border-bottom:1px solid var(--glass-border);
}
table.tier-table th{
  font-family:'Space Grotesk',monospace; font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--cyan); background:rgba(255,255,255,0.04);
}
table.tier-table td:first-child{ font-family:'Sora',sans-serif; font-weight:700; color:var(--text-hi); }
table.tier-table tr:last-child td{ border-bottom:none; }
table.tier-table td{ color:var(--text-lo); }

/* ---- registration form ---- */
.form-shell{ padding:44px; max-width:820px; margin:0 auto; }
@media (max-width:640px){ .form-shell{ padding:26px 20px; } }

.stepper{ display:flex; align-items:center; justify-content:center; gap:0; margin-bottom:44px; }
.step-dot{
  width:36px; height:36px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-family:'Sora',sans-serif; font-weight:700; font-size:13px;
  background:rgba(255,255,255,0.06); border:1px solid var(--glass-border); color:var(--text-lo);
  transition:all .35s ease;
}
.step-dot.active{ background:var(--grad-primary); color:#fff; border-color:transparent; box-shadow:0 6px 18px -4px rgba(124,58,237,0.7); }
.step-dot.done{ background:var(--emerald); color:#04231a; border-color:transparent; }
.step-line{ width:44px; height:2px; background:var(--glass-border); margin:0 4px; position:relative; overflow:hidden; }
.step-line::after{
  content:""; position:absolute; inset:0; background:var(--grad-cool); width:0%; transition:width .4s ease;
}
.step-line.filled::after{ width:100%; }
@media (max-width:560px){ .step-line{ width:20px; } .step-dot{ width:30px; height:30px; font-size:11px; } }

.form-step{ display:none; }
.form-step.active{ display:block; animation:fade-up .5s ease; }
.form-step h3{ font-size:20px; margin-bottom:6px; }
.form-step .hint{ color:var(--text-lo); font-size:14px; margin:0 0 28px; }

.field{ margin-bottom:20px; }
.field label{ display:block; font-size:13px; color:var(--text-lo); margin-bottom:8px; font-family:'Space Grotesk',monospace; letter-spacing:0.02em; }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field input[type="file"]{
  width:100%; padding:13px 16px; border-radius:12px; font-size:14.5px;
  background:rgba(255,255,255,0.05); border:1px solid var(--glass-border); color:var(--text-hi);
  font-family:'Inter',sans-serif; transition:border-color .25s ease, background .25s ease;
}
.field input::placeholder{ color:var(--text-dim); }
.field input:focus, .field select:focus{ outline:none; border-color:var(--cyan); background:rgba(255,255,255,0.08); }
.field select option{ background:#140f38; color:var(--text-hi); }

.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }

.choice-group{ display:flex; flex-wrap:wrap; gap:10px; }
.choice-pill{ position:relative; }
.choice-pill input{ position:absolute; opacity:0; inset:0; cursor:pointer; margin:0; }
.choice-pill span{
  display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:999px;
  background:rgba(255,255,255,0.05); border:1px solid var(--glass-border); font-size:13.5px; color:var(--text-lo);
  transition:all .25s ease; cursor:pointer;
}
.choice-pill input:checked + span{
  background:var(--grad-primary); color:#fff; border-color:transparent; box-shadow:0 8px 20px -6px rgba(124,58,237,0.6);
}
.choice-pill input:focus-visible + span{ outline:2px solid var(--cyan); outline-offset:2px; }

.type-select{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:700px){ .type-select{ grid-template-columns:1fr; } }
.type-card{ position:relative; }
.type-card input{ position:absolute; opacity:0; inset:0; cursor:pointer; margin:0; z-index:2; }
.type-card .type-card-inner{
  padding:24px 20px; border-radius:16px; background:rgba(255,255,255,0.05); border:1px solid var(--glass-border);
  transition:all .3s ease; text-align:center; cursor:pointer;
}
.type-card .type-card-inner i{ font-size:26px; margin-bottom:12px; display:block; background:var(--grad-primary); -webkit-background-clip:text; background-clip:text; color:transparent; }
.type-card .type-card-inner h4{ font-size:15px; margin:0 0 4px; font-family:'Sora',sans-serif; }
.type-card .type-card-inner p{ font-size:12.5px; color:var(--text-dim); margin:0; }
.type-card input:checked ~ .type-card-inner{ background:rgba(124,58,237,0.14); border-color:var(--violet); box-shadow:0 0 0 1px var(--violet); }

.conditional-block{ display:none; }
.conditional-block.active{ display:block; animation:fade-up .4s ease; }

.agree-row{ display:flex; align-items:flex-start; gap:12px; margin:30px 0; }
.agree-row input{ margin-top:4px; width:18px; height:18px; accent-color:var(--violet); }
.agree-row label{ font-size:13.5px; color:var(--text-lo); }

.form-actions{ display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:8px; }
.btn:disabled{ opacity:0.4; cursor:not-allowed; }

.success-panel{ display:none; text-align:center; padding:20px 10px; }
.success-panel.active{ display:block; animation:fade-up .5s ease; }
.success-panel .check-big{
  width:64px; height:64px; border-radius:50%; margin:0 auto 20px; background:var(--grad-cool);
  display:flex; align-items:center; justify-content:center; font-size:28px; color:#fff;
}
.success-panel h3{ font-size:22px; margin-bottom:10px; }
.success-panel p{ color:var(--text-lo); font-size:14.5px; max-width:44ch; margin:0 auto; }