/* ============================================================
   Agentic AI Hackathon 2026 — SimplifyNext
   Visual system: "The Agentic Engine"
   Dark, engineered canvas · technical grid · electric accent
   ============================================================ */

:root {
  /* surfaces */
  --bg:        #07080B;
  --bg-2:      #0C0E13;
  --panel:     #0F1218;
  --panel-2:   #141821;
  --line:      rgba(255,255,255,0.09);
  --line-2:    rgba(255,255,255,0.16);

  /* text */
  --ink:       #F4F5F7;
  --ink-2:     #B7BCC6;
  --ink-3:     #7E8593;

  /* accent (overridden per-theme) */
  --accent:    #FF3B2F;
  --accent-2:  #FF9A1F;
  --accent-ink:#FFFFFF;
  --glow:      255, 59, 47;

  /* type */
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body:    "Hanken Grotesk", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  --maxw: 1240px;
  --radius: 6px;
}

/* themes ------------------------------------------------------ */
[data-accent="ignite"]  { --accent:#FF3B2F; --accent-2:#FF9A1F; --glow:255,59,47;  --accent-ink:#0a0500; }
[data-accent="voltage"] { --accent:#3D7BFF; --accent-2:#34E7FF; --glow:61,123,255; --accent-ink:#00060f; }
[data-accent="circuit"] { --accent:#C9FF3D; --accent-2:#3DFFC2; --glow:201,255,61; --accent-ink:#0a1300; }

/* light theme (optional) */
[data-theme="light"] {
  --bg:#F4F4F2; --bg-2:#ECECE8; --panel:#FFFFFF; --panel-2:#F7F7F4;
  --line:rgba(10,12,18,0.10); --line-2:rgba(10,12,18,0.18);
  --ink:#0C0E13; --ink-2:#3F4654; --ink-3:#6A7282;
  --accent-ink:#fff;
}
[data-theme="light"][data-accent="circuit"] { --accent:#5DA800; --accent-2:#00A878; --accent-ink:#fff; }

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* the technical grid backdrop */
.bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 78%);
          mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 78%);
  opacity: .55;
}
.bg-field {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  width: 100%; height: 100%;
}
.bg-aura {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(50% 40% at 78% 8%, rgba(var(--glow),.18), transparent 70%),
    radial-gradient(46% 38% at 12% 22%, rgba(var(--glow),.10), transparent 70%);
  animation: aura-breathe 11s ease-in-out infinite;
}
@keyframes aura-breathe {
  0%, 100% { opacity: .82; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .bg-aura { animation: none; } }

#root { position: relative; z-index: 1; }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px){ .wrap { padding: 0 20px; } }

/* shared type ------------------------------------------------- */
.kicker {
  font-family: var(--mono);
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 10px;
}
.kicker::before {
  content:""; width: 22px; height: 1px; background: var(--accent);
}
.kicker--bare::before { display:none; }

.h-display {
  font-family: var(--display);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.02em;
}
.section-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.lead { color: var(--ink-2); font-size: clamp(16px,1.5vw,20px); max-width: 62ch; }

.accent { color: var(--accent); }
.mono { font-family: var(--mono); }

section { position: relative; padding: clamp(72px, 9vw, 132px) 0; }
.divider-top { border-top: 1px solid var(--line); }

/* buttons ----------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-weight: 600; font-size: 13.5px;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 14px 22px; border-radius: var(--radius);
  border: 1px solid transparent; transition: .18s ease;
  white-space: nowrap;
}
.btn .arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(4px); }
.btn--primary {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
  box-shadow: 0 0 0 0 rgba(var(--glow),.5);
}
.btn--primary:hover { box-shadow: 0 8px 30px -6px rgba(var(--glow),.6); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--ink); background: rgba(255,255,255,0.04); }
.btn--lg { padding: 17px 28px; font-size: 14.5px; }

/* tag / pill -------------------------------------------------- */
.pill {
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--mono); font-size: 12px; letter-spacing:.06em;
  color: var(--ink-2);
  padding: 7px 13px; border:1px solid var(--line-2); border-radius: 999px;
  background: rgba(255,255,255,0.02);
}
.dot { width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px rgba(var(--glow),.18); }
.dot--pulse { animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 3px rgba(var(--glow),.22);} 50%{box-shadow:0 0 0 7px rgba(var(--glow),0);} }

/* reveal on scroll ------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;} }

/* ============================ NAV ============================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: .3s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.brand { display:flex; align-items:center; gap:12px; font-family:var(--display); font-weight:800; letter-spacing:-.01em; }
.brand .mark {
  width: 30px; height: 30px; border-radius: 7px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display:grid; place-items:center; color: var(--accent-ink); font-size: 17px; font-weight:800;
  box-shadow: 0 0 24px -4px rgba(var(--glow),.7);
}
.brand small { display:block; font-family:var(--mono); font-weight:500; font-size:10px; letter-spacing:.18em; color:var(--ink-3); text-transform:uppercase; }
.brand-logo { height:24px; width:auto; display:block; }
.brand-sub { border-left:1px solid var(--line-2); padding-left:12px; }
.foot .brand-logo { height:28px; }
.msheet .brand-logo { height:22px; }
.nav-links { display:flex; align-items:center; gap: 30px; }
.nav-links a { font-size: 14px; color: var(--ink-2); transition:.15s; position:relative; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { display:flex; align-items:center; gap: 14px; }
.nav-prog { position:absolute; bottom:-1px; left:0; height:2px; background:var(--accent); width:0; }
.burger { display:none; background:none;border:1px solid var(--line-2);border-radius:6px;padding:9px;color:var(--ink); }
@media (max-width: 940px){
  .nav-links { display:none; }
  .nav-cta .btn--ghost { display:none; }
  .burger { display:inline-flex; }
}

/* mobile sheet */
.msheet { position:fixed; inset:0; z-index:60; background:var(--bg); display:flex; flex-direction:column; padding:24px; transform:translateY(-100%); transition:.35s cubic-bezier(.2,.7,.2,1); }
.msheet.open { transform:none; }
.msheet a { font-family:var(--display); font-weight:700; font-size:30px; padding:14px 0; border-bottom:1px solid var(--line); }

/* ============================ HERO ============================ */
.hero { padding-top: 150px; padding-bottom: clamp(70px,8vw,120px); }
.hero-badges { display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 30px; }

.hero h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(44px, 8.4vw, 132px);
  line-height: 0.9; letter-spacing: -0.03em; margin: 0;
}
.hero h1 .stroke {
  -webkit-text-stroke: 1.5px var(--ink); color: transparent;
}
.hero h1 .grad {
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub { margin-top: 28px; max-width: 56ch; }
.hero-actions { margin-top: 38px; display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.hero-meta { margin-top: 44px; display:flex; flex-wrap:wrap; gap: 34px; border-top:1px solid var(--line); padding-top:26px; }
.hero-meta .m-k { font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.hero-meta .m-v { font-family:var(--display); font-weight:700; font-size:21px; margin-top:4px; }

/* hero layout: banner background */
.hero--banner { position:relative; overflow:hidden; padding-bottom: clamp(90px,11vw,150px); }
.hero--banner .hero-bg { position:absolute; inset:0; z-index:0;
  background:url('images/hero-banner.png') no-repeat center right / cover; }
.hero--banner .hero-bg::after { content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, var(--bg) 6%, rgba(7,8,11,.86) 32%, rgba(7,8,11,.45) 56%, rgba(7,8,11,.12) 78%, rgba(7,8,11,0) 100%),
    linear-gradient(0deg, var(--bg) 2%, rgba(7,8,11,0) 42%); }
.hero--banner .wrap { position:relative; z-index:1; }
.hero-copy { max-width: 640px; }
@media (max-width:860px){
  .hero--banner .hero-bg { background-position: 72% center; }
  .hero--banner .hero-bg::after { background:linear-gradient(0deg, var(--bg) 12%, rgba(7,8,11,.7) 50%, rgba(7,8,11,.55) 100%); }
}

/* hero layout: split */
.hero-split { display:grid; grid-template-columns: 1.15fr 0.85fr; gap: 54px; align-items:center; }
@media (max-width: 980px){ .hero-split { grid-template-columns:1fr; gap: 40px; } }

/* hero registration countdown card */
.reg-cd { border:1px solid var(--line); border-radius:18px; background:var(--surface, rgba(255,255,255,0.02)); padding:32px 30px; backdrop-filter:blur(6px); }
.reg-cd .reg-cd-grid { justify-content:flex-start; flex-wrap:wrap; gap:14px; margin-top:22px; }
.reg-cd .cd .v { font-size:clamp(30px,3vw,44px); }

/* hero layout: marquee */
.marquee { overflow:hidden; white-space:nowrap; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:16px 0; margin-top:40px; }
.marquee-track { display:inline-flex; gap:40px; animation: scrollx 26s linear infinite; }
.marquee span { font-family:var(--display); font-weight:800; font-size:clamp(40px,7vw,96px); letter-spacing:-.02em; color:transparent; -webkit-text-stroke:1px var(--line-2); }
.marquee span.fill { color:var(--accent); -webkit-text-stroke:0; }
@keyframes scrollx { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee-track{animation:none;} }

/* ====================== AGENT TERMINAL ======================= */
.term {
  border:1px solid var(--line-2); border-radius: 10px; overflow:hidden;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(var(--glow),.06);
}
.term-bar { display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.02); }
.term-bar i { width:11px;height:11px;border-radius:50%; display:block; }
.term-bar .t { margin-left:10px; font-family:var(--mono); font-size:11.5px; color:var(--ink-3); letter-spacing:.05em; }
.term-body { padding:18px 18px 20px; font-family:var(--mono); font-size:13px; line-height:1.85; min-height: 280px; }
.term-line { white-space:pre-wrap; }
.term-line .p { color: var(--accent); }
.term-line .d { color: var(--ink-3); }
.term-line .ok { color: var(--accent-2); }
.term-line .ag { color: var(--ink); }
.term-cursor { display:inline-block; width:8px; height:15px; background:var(--accent); vertical-align:-2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
.term-tag { display:inline-block; font-size:10.5px; padding:1px 7px; border:1px solid var(--line-2); border-radius:4px; color:var(--ink-2); margin-right:6px;}

/* ====================== STATS ======================= */
.stats { display:grid; grid-template-columns: repeat(4,1fr); gap: 0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--panel); }
.stat { padding: 38px 30px; border-right:1px solid var(--line); position:relative; }
.stat:last-child { border-right:none; }
.stat .n { font-family:var(--display); font-weight:800; font-size: clamp(42px,5vw,68px); line-height:1; letter-spacing:-.03em;
  background:linear-gradient(120deg,var(--ink),var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat .l { font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-top:12px; }
@media (max-width: 820px){ .stats{ grid-template-columns:repeat(2,1fr);} .stat:nth-child(2){border-right:none;} .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line);} }

/* ====================== SECTION HEADER ======================= */
.sec-head { display:grid; grid-template-columns: 1fr auto; align-items:end; gap: 22px 48px; margin-bottom: 54px; }
.sec-head > .lead { max-width: 44ch; }
@media (max-width: 900px){ .sec-head { grid-template-columns: 1fr; align-items:start; } }
.sec-head .lead { margin-top: 18px; }
.sec-no { font-family:var(--mono); font-size:13px; color:var(--ink-3); letter-spacing:.1em; }

/* ====================== ABOUT ======================= */
.about-grid { display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 50px; align-items:center; }
@media (max-width:900px){ .about-grid{grid-template-columns:1fr; gap:36px;} }
.about-photo { position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--line-2); aspect-ratio: 4/3; }
.about-photo img { width:100%; height:100%; object-fit:cover; filter:saturate(1.05); }
.about-photo .frame-tag { position:absolute; left:14px; bottom:14px; }
.feature-row { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:46px; }
@media (max-width:760px){ .feature-row{grid-template-columns:1fr;} }
.fcard { border:1px solid var(--line); border-radius:10px; padding:24px; background:var(--panel); transition:.2s; }
.fcard:hover { border-color:var(--line-2); transform:translateY(-3px); }
.fcard .ic { width:48px;height:48px;border-radius:14px; display:grid;place-items:center; color:#fff; margin-bottom:18px; position:relative; overflow:hidden;
  background:linear-gradient(150deg, #FF3B2F 0%, #FF5A22 55%, #FF7A18 100%);
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 12px 22px -8px rgba(var(--glow),.75), 0 3px 6px -2px rgba(0,0,0,.5), inset 0 1.5px 0 rgba(255,255,255,.55), inset 0 -5px 9px -4px rgba(0,0,0,.45); }
.fcard .ic::after { content:""; position:absolute; left:0; right:0; top:0; height:56%; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)); }
.fcard .ic svg { position:relative; z-index:1; filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.3)); }
.fcard:hover .ic { box-shadow: 0 16px 28px -8px rgba(var(--glow),.85), 0 3px 6px -2px rgba(0,0,0,.5), inset 0 1.5px 0 rgba(255,255,255,.55), inset 0 -5px 9px -4px rgba(0,0,0,.45); }
/* why-join: distinct ringed circular badge (flat, accent-outlined) */
.fcard .ic-ring { width:48px;height:48px;border-radius:50%; display:grid;place-items:center; margin-bottom:18px;
  color:var(--accent); background:color-mix(in oklab, var(--accent) 12%, transparent);
  border:1.5px solid color-mix(in oklab, var(--accent) 45%, transparent); transition:.2s; }
.fcard:hover .ic-ring { background:color-mix(in oklab, var(--accent) 18%, transparent); border-color:var(--accent); }
.fcard h4 { font-family:var(--display); font-weight:700; font-size:19px; margin-bottom:8px; }
.fcard p { color:var(--ink-2); font-size:15px; }

/* ====================== WHY / WHO ======================= */

/* ====================== TIMELINE ======================= */
.tl-v { position:relative; margin-top:10px; }
.tl-v::before { content:""; position:absolute; left:19px; top:8px; bottom:8px; width:2px; background:linear-gradient(var(--accent),var(--line)); }
.tl-item { display:grid; grid-template-columns: 56px 1fr; gap:8px; padding:14px 0; cursor:pointer; }
.tl-node { width:40px;height:40px;border-radius:50%; border:2px solid var(--line-2); background:var(--bg); display:grid;place-items:center; font-family:var(--mono); font-size:12px; color:var(--ink-3); z-index:1; transition:.2s; }
.tl-item.active .tl-node, .tl-item:hover .tl-node { border-color:var(--accent); color:var(--accent); box-shadow:0 0 0 5px rgba(var(--glow),.14); }
.tl-card { border:1px solid var(--line); border-radius:10px; padding:18px 22px; background:var(--panel); transition:.25s; }
.tl-item.active .tl-card { border-color:var(--line-2); }
.tl-when { font-family:var(--mono); font-size:12px; color:var(--accent); letter-spacing:.06em; }
.tl-title { font-family:var(--display); font-weight:700; font-size:21px; margin:4px 0; }
.tl-desc { color:var(--ink-2); font-size:15px; overflow:hidden; transition:max-height .35s ease, opacity .3s ease, margin .3s; }

/* ====================== GALLERY ======================= */
.gallery { display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; gap:14px; }
.gallery .g { border-radius:10px; overflow:hidden; border:1px solid var(--line-2); position:relative; }
.gallery .g img { width:100%; height:100%; object-fit:cover; transition:.5s ease; }
.gallery .g:hover img { transform:scale(1.06); }
.gallery .g::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 55%, rgba(7,8,11,.55)); }
.gallery .g.wide { grid-column: span 2; }
.gallery .g.tall { grid-row: span 2; }
@media (max-width:760px){ .gallery{grid-template-columns:repeat(2,1fr);} .gallery .g.wide,.gallery .g.tall{grid-column:auto;grid-row:auto;} }

/* ====================== TESTIMONIALS ======================= */
.quotes { position:relative; }
.quote-card { border:1px solid var(--line); border-radius:14px; padding: clamp(28px,4vw,46px); background:linear-gradient(180deg,var(--panel-2),var(--panel)); }
.quote-mark { font-family:var(--display); font-weight:800; font-size:80px; line-height:.5; color:var(--accent); height:40px; }
.quote-text { font-family:var(--display); font-weight:600; font-style:italic; font-size:clamp(20px,2.4vw,30px); line-height:1.34; letter-spacing:-.01em; margin:16px 0 26px; }
.quote-who { font-family:var(--mono); font-size:13px; color:var(--ink-2); letter-spacing:.04em; display:flex; align-items:center; gap:12px; }
.quote-avatar { flex:none; width:48px; height:48px; display:grid; place-items:center; border-radius:50%; color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(150deg, #FF3B2F 0%, #FF5A22 55%, #FF7A18 100%);
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 20px -8px rgba(var(--glow),.7), 0 2px 5px -1px rgba(0,0,0,.5), inset 0 1.5px 0 rgba(255,255,255,.55), inset 0 -5px 9px -4px rgba(0,0,0,.45); }
.quote-avatar::after { content:""; position:absolute; left:0; right:0; top:0; height:55%; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0)); }
.quote-avatar svg { position:relative; z-index:1; filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.3)); }
.quote-nav { display:flex; gap:8px; margin-top:26px; }
.qdot { width:34px; height:4px; border-radius:3px; background:var(--line-2); border:none; transition:.2s; padding:0; }
.qdot.on { background:var(--accent); }

/* ====================== PRIZES ======================= */
.prizes { display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:16px; }
@media (max-width:860px){ .prizes{grid-template-columns:1fr;} }
.prize { border:1px solid var(--line); border-radius:14px; padding:30px; background:var(--panel); position:relative; overflow:hidden; }
.prize.win { background:linear-gradient(155deg, rgba(var(--glow),.16), var(--panel) 55%); border-color:rgba(var(--glow),.4); }
.prize .rank { font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.prize .amt { font-family:var(--display); font-weight:800; font-size:clamp(34px,4vw,54px); letter-spacing:-.03em; margin:14px 0 6px; }
.prize.win .amt { color:var(--accent); }
.prize ul { list-style:none; margin-top:18px; display:flex; flex-direction:column; gap:11px; }
.prize li { position:relative; padding-left:18px; font-size:14.5px; color:var(--ink-2); line-height:1.45; }
.prize li::before { content:"›"; color:var(--accent); position:absolute; left:0; top:0; }
.perk { border:1px dashed var(--line-2); border-radius:10px; padding:18px 20px; font-size:14.5px; color:var(--ink-2); }
.perk b { color:var(--ink); font-family:var(--display); }

/* ====================== CTA ======================= */
.cta-band { border:1px solid var(--line-2); border-radius:18px; padding: clamp(40px,6vw,80px); text-align:center; position:relative; overflow:hidden;
  background: radial-gradient(80% 120% at 50% 0%, rgba(var(--glow),.18), var(--panel) 60%); }
.cta-band h2 { font-family:var(--display); font-weight:800; font-size:clamp(34px,5.5vw,76px); line-height:.98; letter-spacing:-.03em; }
.cta-band .lead { margin:22px auto 0; }
.cta-actions { margin-top:36px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.countdown { display:flex; gap:18px; justify-content:center; margin-top:42px; }
.cd { text-align:center; }
.cd .v { font-family:var(--display); font-weight:800; font-size:clamp(30px,4vw,48px); line-height:1; }
.cd .k { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-top:8px; }
.cd .sep { font-family:var(--display); font-weight:800; font-size:clamp(30px,4vw,48px); color:var(--line-2); }

/* ====================== FAQ ======================= */
.faq-list { margin-top:18px; border-top:1px solid var(--line); }
.faq-item { border-bottom:1px solid var(--line); }
.faq-q { width:100%; background:none; border:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:24px; text-align:left; padding:26px 4px; color:var(--ink); font-family:var(--display); font-weight:700; font-size:clamp(18px,2vw,23px); transition:color .15s; }
.faq-q:hover { color:var(--accent); }
.faq-ic { flex:none; width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line-2); border-radius:50%; color:var(--accent); transition:transform .3s ease, background .2s; }
.faq-item.open .faq-ic { transform:rotate(45deg); background:var(--accent); color:#fff; border-color:var(--accent); }
.faq-a { overflow:hidden; transition:max-height .35s ease, opacity .3s ease; }
.faq-a p { color:var(--ink-2); font-size:16px; line-height:1.6; max-width:70ch; padding:0 4px 28px; }

/* ====================== FOOTER ======================= */
.foot { border-top:1px solid var(--line); padding: 64px 0 40px; }
.foot-grid { display:grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap:30px; }
@media (max-width:760px){ .foot-grid{grid-template-columns:1fr 1fr;} }
.foot h5 { font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:16px; }
.foot a { display:block; color:var(--ink-2); font-size:15px; padding:5px 0; transition:.15s; }
.foot a:hover { color:var(--accent); }
.foot-bottom { display:flex; justify-content:space-between; align-items:center; margin-top:50px; padding-top:24px; border-top:1px solid var(--line); flex-wrap:wrap; gap:14px; }
.foot-bottom span { font-family:var(--mono); font-size:12px; color:var(--ink-3); }
.partners { display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:16px; }
.partners .plogo { font-family:var(--display); font-weight:700; font-size:15px; color:var(--ink-2); opacity:.8; }

/* ====================== REGISTER MODAL ======================= */
.modal-scrim { position:fixed; inset:0; z-index:80; background:rgba(4,5,8,.72); backdrop-filter:blur(6px); display:grid; place-items:center; padding:24px; opacity:0; animation:fade .25s forwards; }
@keyframes fade { to { opacity:1; } }
.modal {
  width:100%; max-width: 620px; max-height: 90vh; overflow:auto;
  background:var(--panel); border:1px solid var(--line-2); border-radius:16px;
  box-shadow:0 40px 120px -20px rgba(0,0,0,.85);
}
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:22px 26px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--panel); z-index:2; }
.modal-head h3 { font-family:var(--display); font-weight:800; font-size:22px; }
.x-btn { background:none; border:1px solid var(--line-2); border-radius:8px; color:var(--ink-2); width:36px;height:36px; display:grid;place-items:center; transition:.15s; }
.x-btn:hover { color:var(--ink); border-color:var(--ink); }
.modal-body { padding:26px; }
/* steps */
.steps { display:flex; gap:8px; margin-bottom:26px; }
.steps .s { flex:1; height:4px; border-radius:3px; background:var(--line-2); transition:.3s; }
.steps .s.done { background:var(--accent); }
.steps .s.cur { background:var(--accent-2); }
.field { margin-bottom:18px; }
.field label { display:block; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px; }
.field input, .field select, .field textarea {
  width:100%; background:var(--bg-2); border:1px solid var(--line-2); border-radius:8px;
  padding:13px 14px; color:var(--ink); font-family:var(--body); font-size:15px; transition:.15s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--glow),.16); }
.field .err { color:var(--accent); font-size:12.5px; margin-top:6px; font-family:var(--mono); }
.field input.invalid, .field textarea.invalid, .field select.invalid { border-color:var(--accent); }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:520px){ .grid2{grid-template-columns:1fr;} }
.modal-foot { display:flex; justify-content:space-between; gap:12px; margin-top:8px; }
.members { display:flex; flex-direction:column; gap:10px; }
.member-row { display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:center; }
.mini-btn { background:rgba(255,255,255,.04); border:1px solid var(--line-2); border-radius:7px; color:var(--ink-2); padding:11px 14px; font-family:var(--mono); font-size:12px; }
.mini-btn:hover { color:var(--ink); border-color:var(--ink); }
.success { text-align:center; padding:20px 0 8px; }
.success .ring { width:74px;height:74px;border-radius:50%; margin:0 auto 22px; display:grid;place-items:center; background:rgba(var(--glow),.16); color:var(--accent); border:1px solid rgba(var(--glow),.4); }
.success h3 { font-family:var(--display); font-weight:800; font-size:28px; margin-bottom:10px; }
.success p { color:var(--ink-2); max-width:42ch; margin:0 auto; }
.review-line { display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line); font-size:14.5px; }
.review-line span:first-child { color:var(--ink-3); font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.review-line span:last-child { color:var(--ink); text-align:right; max-width:60%; }

/* utility */
.muted { color:var(--ink-3); }
.center { text-align:center; }
.mt-s{margin-top:14px;} .mt-m{margin-top:28px;}
.hide-sm{ } @media(max-width:720px){ .hide-sm{display:none;} }