/* ═══════════════════════════
   TOKENS
═══════════════════════════ */
:root {
  --bg:      #050508;
  --panel:   rgba(12, 12, 22, 0.7);
  --border:  rgba(255,255,255,0.08);
  --text:    #f1f1f6;
  --muted:   #9f9fb5;
  --pink:    #ff2a85;
  --cyan:    #00f0ff;
  --purple:  #8b3eff;
  --font:    'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --disp:    'Syne', sans-serif;
  --ease:    cubic-bezier(0.16, 1, 0.3, 1);
  --spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --w:       1100px;  /* max content width */
}

/* ═══════════════════════════
   RESET
═══════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  overflow-x: hidden;
  line-height: 1.7;
}

/* ═══════════════════════════
   AMBIENT GLOW
═══════════════════════════ */
.glow-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.glow-bg::before,
.glow-bg::after {
  content: '';
  position: absolute; border-radius: 50%;
  filter: blur(150px); opacity: 0.15;
}
.glow-bg::before {
  width: 600px; height: 600px;
  background: var(--pink); top: -5%; right: 5%;
  animation: gfloat 22s ease-in-out infinite alternate;
}
.glow-bg::after {
  width: 600px; height: 600px;
  background: var(--cyan); bottom: 5%; left: 0%;
  animation: gfloat 28s ease-in-out infinite alternate-reverse;
}
@keyframes gfloat {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(40px, 60px) scale(1.1); }
}

/* ═══════════════════════════
   FLOATING NAV
═══════════════════════════ */
.floating-nav {
  position: fixed; top: 18px; left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: rgba(8,8,18,0.85);
  border: 1px solid var(--border);
  padding: 7px 10px; border-radius: 50px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  width: max-content; max-width: 95vw;
}
.nav-links { display: flex; align-items: center; gap: 3px; }
.nav-link {
  color: var(--muted); text-decoration: none;
  font-size: 0.78rem; font-weight: 700;
  padding: 8px 14px; border-radius: 50px;
  transition: all 0.3s var(--spring); letter-spacing: 0.03em; white-space: nowrap;
}
.nav-link:hover { color: #fff; transform: translateY(-1px); }
.nav-link.active { color: #fff; background: rgba(255,255,255,0.07); }
.nav-apply-btn { background: var(--pink); color: #fff !important; box-shadow: 0 4px 16px rgba(255,42,133,0.35); }
.nav-apply-btn:hover { box-shadow: 0 6px 24px rgba(255,42,133,0.55); transform: translateY(-1px); }

/* ═══════════════════════════
   MOBILE FLOAT BUTTON
═══════════════════════════ */
.floating-apply-btn {
  position: fixed; bottom: 22px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 990;
  background: var(--pink); color: #fff;
  text-decoration: none; font-weight: 800; font-size: 0.96rem;
  padding: 15px 36px; border-radius: 50px;
  box-shadow: 0 10px 30px rgba(255,42,133,0.4);
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s var(--ease), transform 0.4s var(--spring);
  width: calc(100% - 40px); max-width: 300px; text-align: center;
}
.floating-apply-btn.visible {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.floating-apply-btn:hover { transform: translateX(-50%) translateY(-3px); box-shadow: 0 16px 40px rgba(255,42,133,0.55); }

/* ═══════════════════════════
   CONTAINER
═══════════════════════════ */
.container { max-width: var(--w); margin: 0 auto; padding: 0 40px; }

/* scroll reveal */
.scroll-reveal {
  opacity: 0; transform: translateY(44px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.scroll-reveal.active { opacity: 1; transform: translateY(0); }

/* ═══════════════════════════════════════════════════
   HERO  — full viewport width, outside .container
═══════════════════════════════════════════════════ */
.hero-section {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(circle at 50% 30%, rgba(139, 62, 255, 0.15) 0%, rgba(255, 42, 133, 0.08) 50%, #050508 100%);
  /* no padding-top — we add it inside .hero-inner */
}

/* video */
/* hero-video styles removed */
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(5,5,8,0.85) 0%,
    rgba(5,5,8,0.60) 40%,
    rgba(5,5,8,0.85) 85%,
    rgba(5,5,8,1)   100%
  );
}

/* hero inner */
.hero-inner {
  position: relative; z-index: 2;
  flex: 1;
  max-width: var(--w);
  width: 100%;
  margin: 0 auto;
  padding: 140px 60px 60px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* title block */
.hero-content {
  display: flex; flex-direction: column;
  align-items: flex-start;
  max-width: 700px;
}
.hero-eyebrow {
  font-size: 0.95rem; font-weight: 800;
  letter-spacing: 0.2em; color: var(--cyan);
  text-transform: uppercase; margin-bottom: 14px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
}
.main-title {
  font-family: var(--disp);
  font-size: clamp(3.2rem, 7vw, 6.5rem);
  font-weight: 800; line-height: 0.88;
  letter-spacing: -0.05em;
  background: linear-gradient(135deg, #fff 20%, var(--pink) 60%, var(--purple) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  margin-left: -3px;
}
.vol-tag {
  display: inline-block;
  background: var(--cyan); color: #000;
  font-family: var(--disp); font-weight: 800; font-size: 0.92rem;
  padding: 3px 12px; margin-top: 12px;
  transform: skewX(-10deg);
  box-shadow: 0 4px 16px rgba(0,240,255,0.28);
}
.hero-sub {
  margin-top: 20px;
  font-size: 1.05rem;
  color: rgba(255,255,255,0.85);
  word-break: keep-all;
  text-shadow: 0 2px 6px rgba(0,0,0,0.85);
}
.hero-cta-btn {
  display: inline-block; margin-top: 28px;
  background: var(--pink); color: #fff; text-decoration: none;
  font-weight: 800; font-size: 0.96rem; letter-spacing: 0.04em;
  padding: 14px 34px; border-radius: 4px;
  box-shadow: 0 8px 24px rgba(255,42,133,0.4);
  transition: all 0.35s var(--spring); white-space: nowrap;
}
.hero-cta-btn:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 14px 38px rgba(255,42,133,0.6); }

/* countdown — horizontal row below title */
.countdown-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.countdown-label {
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.14em; color: var(--muted);
  text-transform: uppercase; white-space: nowrap;
  flex-shrink: 0;
}
.countdown-timer { display: flex; align-items: center; gap: 6px; }
.cd-unit {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 10px 16px;
  min-width: 62px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 5px rgba(0, 240, 255, 0.05);
  animation: timerGlow 3s infinite ease-in-out alternate;
}
@keyframes timerGlow {
  from { border-color: rgba(255,255,255,0.1); box-shadow: 0 0 5px rgba(0, 240, 255, 0.05); }
  to { border-color: rgba(0, 240, 255, 0.35); box-shadow: 0 0 12px rgba(0, 240, 255, 0.2); }
}
.cd-num {
  font-family: var(--disp);
  font-size: 1.9rem; font-weight: 800;
  color: #fff; line-height: 1; letter-spacing: -0.02em;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.35);
}
.cd-label { font-size: 0.55rem; color: var(--muted); font-weight: 700; letter-spacing: 0.1em; margin-top: 3px; }
.cd-sep { font-family: var(--disp); font-size: 1.4rem; color: var(--cyan); font-weight: 800; margin-bottom: 12px; }

/* stats bar */
.hero-stats {
  position: relative; z-index: 2;
  max-width: var(--w); width: 100%;
  margin: 0 auto; padding: 20px 60px 40px;
  display: flex; align-items: center; gap: 36px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.hero-stat { display: flex; flex-direction: column; gap: 3px; }
.hs-val { font-family: var(--disp); font-size: 1.25rem; font-weight: 800; color: #fff; }
.hs-label { font-size: 0.66rem; color: var(--muted); font-weight: 600; letter-spacing: 0.06em; }
.hs-div { width: 1px; height: 30px; background: rgba(255,255,255,0.1); }

/* ═══════════════════════════
   PITCH
═══════════════════════════ */
.pitch-section {
  display: grid; grid-template-columns: 320px 1fr;
  gap: 60px; margin: 120px 0; align-items: center;
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 48px;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}
/* narrative-quotes removed */
.poster-wrap {
  aspect-ratio: 1/1.414; border-radius: 12px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 30px rgba(255,42,133,0.15);
  border: 1.5px solid var(--pink);
  transform: rotate(-2.5deg);
  transition: transform 0.4s var(--spring), box-shadow 0.4s ease;
}
.poster-wrap:hover {
  transform: rotate(0deg) scale(1.03);
  box-shadow: 0 30px 80px rgba(255,42,133,0.3);
}
.poster-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--spring); }
.poster-wrap:hover .poster-img { transform: scale(1.04); }
.pitch-content h2 {
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.25;
  word-break: keep-all; margin-bottom: 18px;
  background: linear-gradient(135deg, #ffffff 40%, var(--pink) 80%, var(--cyan) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.pitch-desc { color: var(--muted); font-size: 1rem; line-height: 1.85; word-break: keep-all; }
.event-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.ev-card {
  display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,0.02); border: 1px solid var(--border);
  padding: 14px 18px; border-radius: 10px;
  transition: all 0.3s ease;
}
.ev-card:hover {
  border-color: var(--cyan);
  background: rgba(0, 240, 255, 0.03);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.1);
  transform: translateX(4px);
}
.ev-icon { font-size: 1.25rem; flex-shrink: 0; }
.ev-label { font-size: 0.68rem; color: var(--muted); font-weight: 700; letter-spacing: 0.07em; }
.ev-val   { font-size: 0.92rem; color: var(--text); font-weight: 600; margin-top: 1px; }

/* ═══════════════════════════
   SECTION HEADER
═══════════════════════════ */
.section-head { margin-bottom: 36px; }
.sec-tag {
  display: inline-block; font-size: 0.66rem; font-weight: 800;
  letter-spacing: 0.22em; color: var(--cyan); text-transform: uppercase;
  border-bottom: 1px solid var(--cyan); padding-bottom: 2px; margin-bottom: 8px;
}
.sec-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em;
  background: linear-gradient(135deg, #ffffff 40%, var(--pink) 80%, var(--cyan) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ═══════════════════════════
   PERKS
═══════════════════════════ */
.perks-section { margin: 120px 0; }
.perks-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}
.perk-card {
  background: rgba(12,12,22,0.85); border: 1px solid var(--border);
  padding: 28px 22px; border-radius: 12px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative; overflow: hidden;
  transition: transform 0.35s var(--spring), border-color 0.3s ease, box-shadow 0.3s ease;
  width: calc(20% - 15px);
  min-width: 200px;
  max-width: 280px;
  flex-grow: 1;
}
.perk-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,0.14);
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
}
.perk-icon { font-size: 1.8rem; }
.perk-card h4 { font-size: 0.96rem; color: #fff; font-weight: 800; line-height: 1.3; }
.perk-card p  { font-size: 0.81rem; color: var(--muted); line-height: 1.6; word-break: keep-all; }
.perk-featured { border-color: rgba(255,42,133,0.25); background: rgba(255,42,133,0.05); }
.perk-featured:hover { border-color: var(--pink); box-shadow: 0 16px 40px rgba(255,42,133,0.18); }
.perk-featured-cyan { border-color: rgba(0,240,255,0.25); background: rgba(0,240,255,0.05); }
.perk-featured-cyan:hover { border-color: var(--cyan); box-shadow: 0 16px 40px rgba(0,240,255,0.18); }
.perk-badge-cyan {
  position: absolute; top: 0; right: 0;
  background: var(--cyan); color: #000;
  font-size: 0.66rem; font-weight: 800;
  padding: 4px 11px; border-bottom-left-radius: 6px; letter-spacing: 0.03em;
}
.perk-featured-purple { border-color: rgba(139,62,255,0.25); background: rgba(139,62,255,0.05); }
.perk-featured-purple:hover { border-color: var(--purple); box-shadow: 0 16px 40px rgba(139,62,255,0.18); }
.perk-badge-purple {
  position: absolute; top: 0; right: 0;
  background: var(--purple); color: #fff;
  font-size: 0.66rem; font-weight: 800;
  padding: 4px 11px; border-bottom-left-radius: 6px; letter-spacing: 0.03em;
}
.perk-badge {
  position: absolute; top: 0; right: 0;
  background: var(--pink); color: #fff;
  font-size: 0.66rem; font-weight: 800;
  padding: 4px 11px; border-bottom-left-radius: 6px; letter-spacing: 0.03em;
}
.brand-tags { display: flex; gap: 7px; flex-wrap: wrap; }
.b-tag {
  background: rgba(255,42,133,0.1); border: 1px solid rgba(255,42,133,0.3);
  color: var(--pink); font-size: 0.68rem; font-weight: 800;
  padding: 2px 9px; border-radius: 20px; letter-spacing: 0.04em;
}
.perk-note { font-size: 0.75rem !important; color: var(--pink) !important; font-weight: 700; }

/* ═══════════════════════════
   NARRATIVE
═══════════════════════════ */
.narrative-section {
  display: flex;
  flex-direction: column;
  gap: 220px; margin: 120px 0 160px;
}
.q-card {
  background: var(--panel); border: 1px solid var(--border);
  padding: 48px 52px; border-radius: 12px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  position: relative;
  box-shadow: 0 10px 40px rgba(0,0,0,0.35);
  opacity: 0; transform: translateY(50px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), border-color 0.3s;
  display: flex; align-items: center; min-height: 180px;
}
.q-card.active { opacity: 1; transform: translateY(0); }
.q-card:nth-child(1) { align-self: flex-start; width: 80%; }
.q-card:nth-child(2) { align-self: flex-end;   width: 76%; border-left: 4px solid var(--pink); }
.q-card:nth-child(3) { align-self: flex-start; width: 80%; border-right: 4px solid var(--cyan); }
.q-card:hover { border-color: rgba(255,255,255,0.16); box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
.q-num {
  font-family: var(--disp); font-size: 2.8rem; font-weight: 800;
  color: rgba(255,255,255,0.06); position: absolute; top: 15px; left: 24px;
  user-select: none;
}
.q-text { font-size: 1.15rem; color: #fff; font-weight: 700; line-height: 1.8; word-break: keep-all; }


/* ═══════════════════════════
   DETAILS (timetable + settlement)
═══════════════════════════ */
.details-section {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 24px; margin: 120px 0;
  align-items: start;
}
.detail-box {
  background: rgba(12,12,22,0.88); border: 1px solid var(--border);
  padding: 40px 44px; border-radius: 12px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.detail-box h3 {
  font-size: 1.05rem; color: #fff; margin-bottom: 22px;
  border-bottom: 1px solid rgba(255,255,255,0.07); padding-bottom: 14px;
}
.tt-list { display: flex; flex-direction: column; gap: 9px; }
.tt-row {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px dashed rgba(255,255,255,0.05); padding-bottom: 7px;
  font-size: 0.9rem; gap: 12px;
}
.tt-row span:first-child { font-family: var(--disp); color: var(--cyan); white-space: nowrap; }
.tt-row span:last-child  { color: var(--muted); }
.tt-note { font-size: 0.78rem; color: var(--muted); margin-top: 16px; font-style: italic; }

/* settle cards */
.settle-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 22px; }
.settle-card {
  background: rgba(0,0,0,0.38); border: 1px solid var(--border);
  padding: 24px 18px; border-radius: 12px;
  display: flex; flex-direction: column;
  transition: transform 0.35s var(--spring), border-color 0.3s, box-shadow 0.3s;
}
.settle-card:nth-child(1):hover { transform: translateY(-5px); border-color: var(--pink);   box-shadow: 0 10px 26px rgba(255,42,133,0.14); }
.settle-card:nth-child(2):hover { transform: translateY(-5px); border-color: var(--cyan);   box-shadow: 0 10px 26px rgba(0,240,255,0.14); }
.settle-card:nth-child(3):hover { transform: translateY(-5px); border-color: var(--purple); box-shadow: 0 10px 26px rgba(139,62,255,0.14); }
.sc-icon { font-size: 1.8rem; margin-bottom: 12px; }
.settle-card h4 { font-size: 0.9rem; color: #fff; font-weight: 800; margin-bottom: 6px; }
.sc-val { font-family: var(--disp); font-size: 1.3rem; font-weight: 800; color: var(--cyan); margin-bottom: 10px; white-space: nowrap; }
.settle-card:nth-child(1) .sc-val { color: var(--pink); }
.settle-card:nth-child(3) .sc-val { color: var(--purple); }
.sc-unit { font-size: 0.74rem; color: var(--muted); font-family: var(--font); margin-left: 2px; }
.settle-card p { font-size: 0.8rem; color: var(--muted); line-height: 1.55; word-break: keep-all; }

/* settle flow */
.settle-flow {
  display: flex;
  flex-direction: row;
  gap: 20px;
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--border);
  padding: 28px 24px;
  border-radius: 12px;
  margin-top: 24px;
}
.flow-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  position: relative;
}
.flow-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 13px;
  left: 42px;
  width: calc(100% - 32px);
  height: 1px;
  background: linear-gradient(to right, var(--cyan), rgba(255,255,255,0.05));
  z-index: 0;
  opacity: 0.3;
}
.flow-item:nth-child(2):not(:last-child)::after,
.flow-item:nth-child(3):not(:last-child)::after {
  background: linear-gradient(to right, var(--pink), rgba(255,255,255,0.05));
}
.flow-num {
  width: 26px;
  height: 26px;
  background: var(--cyan);
  color: #000;
  border-radius: 50%;
  font-family: var(--disp);
  font-weight: 800;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 10px rgba(0,240,255,0.3);
}
.flow-item:nth-child(2) .flow-num,
.flow-item:nth-child(3) .flow-num {
  background: var(--pink);
  box-shadow: 0 0 10px rgba(255,42,133,0.3);
}
.flow-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.flow-text strong {
  font-size: 0.95rem;
  color: #fff;
  font-weight: 700;
  word-break: keep-all;
}
.flow-text span {
  font-size: 0.8rem;
  color: var(--muted);
  word-break: keep-all;
}

/* ═══════════════════════════
   FAQ
═══════════════════════════ */
.faq-section { margin: 120px 0; }
.faq-list {
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  background: rgba(12,12,22,0.75);
}
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: none; }
.faq-q {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 28px; gap: 16px;
  color: var(--text); font-family: var(--font); font-size: 0.93rem; font-weight: 700;
  text-align: left; transition: background 0.2s;
}
.faq-q:hover { background: rgba(255,255,255,0.03); }
.faq-q[aria-expanded="true"] { color: var(--cyan); }
.faq-q[aria-expanded="true"] .faq-icon { transform: rotate(45deg); color: var(--cyan); }
.faq-icon { font-size: 1.2rem; color: var(--muted); transition: transform 0.35s var(--spring), color 0.2s; }
.faq-a {
  max-height: 0; overflow: hidden;
  padding: 0 28px; color: var(--muted); font-size: 0.87rem; line-height: 1.75;
  word-break: keep-all;
  transition: max-height 0.4s var(--ease), padding 0.4s var(--ease);
}
.faq-a.open { max-height: 500px; padding: 0 28px 22px; }

/* ═══════════════════════════
   FORM
═══════════════════════════ */
.form-section { margin: 120px 0 100px; }
.form-card {
  background: var(--panel); border: 1px solid var(--border);
  border-top: 4px solid var(--pink);
  padding: 64px 60px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 28px 70px rgba(0,0,0,0.5);
  border-radius: 14px;
}
.form-title {
  font-family: var(--disp); font-size: 2.4rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 6px;
  background: linear-gradient(135deg, #ffffff 40%, var(--pink) 80%, var(--cyan) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.form-sub   { color: var(--muted); font-size: 1rem; margin-bottom: 44px; }

/* 2-col row */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.input-group { display: flex; flex-direction: column; gap: 9px; margin-bottom: 24px; }
.input-group label { font-size: 0.76rem; font-weight: 800; color: var(--text); letter-spacing: 0.07em; text-transform: uppercase; }

input[type="text"], select, textarea {
  background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.09);
  color: #fff; padding: 15px 16px; font-size: 16px; outline: none;
  border-radius: 8px; font-family: var(--font); width: 100%;
  transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
}
textarea {
  resize: vertical;
}
input[type="text"]:focus, select:focus, textarea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 15px rgba(0,240,255,0.25), 0 0 5px var(--pink);
  background: rgba(255, 255, 255, 0.06);
}
select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 42px;
}

.slot-options { display: flex; flex-direction: row; gap: 12px; }
.slot-pill { position: relative; cursor: pointer; flex: 1; }
.slot-pill input[type="radio"] { position: absolute; opacity: 0; }
.pill-box {
  display: flex; flex-direction: column;
  background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.08);
  padding: 14px 16px; border-radius: 8px;
  transition: all 0.35s var(--spring);
  height: 100%;
}
.slot-pill input:checked + .pill-box {
  border-color: var(--pink); background: rgba(255,42,133,0.07);
  box-shadow: 0 8px 20px rgba(255,42,133,0.15); transform: translateY(-2px);
}
.pill-title { font-weight: 800; font-size: 0.88rem; color: #fff; }
.pill-desc  { font-size: 0.74rem; color: var(--muted); margin-top: 3px; }

.err { display: none; font-size: 0.74rem; color: var(--pink); margin-top: 2px; }
.input-group.invalid input, .input-group.invalid select, .input-group.invalid textarea { border-color: var(--pink) !important; }
.input-group.invalid .err { display: block; }

.submit-btn {
  background: linear-gradient(135deg, var(--pink) 0%, var(--purple) 100%);
  color: #fff; border: none;
  font-weight: 800; font-size: 1.05rem; letter-spacing: 0.05em;
  padding: 18px; width: 100%; cursor: pointer;
  border-radius: 50px; margin-top: 8px;
  text-transform: uppercase; position: relative; overflow: hidden;
  box-shadow: 0 8px 24px rgba(139, 62, 255, 0.3);
  transition: all 0.35s var(--spring);
}
.submit-btn:hover {
  box-shadow: 0 12px 32px rgba(255, 42, 133, 0.5);
  transform: translateY(-2px);
}
.submit-btn:active { transform: scale(0.98); }

/* ═══════════════════════════
   FOOTER
═══════════════════════════ */
.footer { border-top: 1px solid rgba(255,255,255,0.07); padding: 64px 0 36px; margin-top: 60px; }
.footer-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 32px; align-items: start; margin-bottom: 48px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.f-label { font-family: var(--disp); font-size: 0.68rem; letter-spacing: 0.16em; color: var(--muted); font-weight: 800; }
.f-val { font-size: 0.84rem; color: var(--text); line-height: 1.6; word-break: keep-all; }
.f-val a { color: var(--text); text-decoration: none; transition: color 0.25s; }
.f-val a:hover { color: var(--cyan); }
.f-social {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.12);
  color: var(--text); text-decoration: none;
  border-radius: 8px; transition: all 0.35s var(--spring);
}
.f-social:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 14px rgba(0,240,255,0.22); transform: scale(1.1); }
.footer-copy { text-align: center; font-size: 0.74rem; color: var(--muted); padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.03); }

/* ═══════════════════════════
   MODAL
═══════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(5,5,8,0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  z-index: 2000; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease);
}
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal-box {
  background: #0d0d17; border: 1px solid rgba(255,255,255,0.1);
  padding: 60px 48px; max-width: 460px; width: 90%;
  text-align: center; position: relative;
  box-shadow: 0 36px 80px rgba(0,0,0,0.7);
  border-radius: 16px;
  transform: scale(0.9); transition: transform 0.4s var(--spring);
}
.modal-overlay.active .modal-box { transform: scale(1); }
.modal-glow {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 180px; height: 180px; background: var(--cyan);
  filter: blur(100px); opacity: 0.25; z-index: -1;
}
.modal-title { font-family: var(--disp); font-size: 2.2rem; color: var(--cyan); font-weight: 800; letter-spacing: 0.14em; margin-bottom: 18px; }
.modal-text  { font-size: 0.96rem; color: var(--text); line-height: 1.8; margin-bottom: 32px; word-break: keep-all; }
.modal-close {
  background: transparent; border: 1px solid rgba(255,255,255,0.2);
  color: #fff; padding: 12px 36px; font-weight: 700; cursor: pointer;
  border-radius: 2px; font-family: var(--font);
  transition: all 0.25s;
}
.modal-close:hover { background: #fff; color: #000; border-color: #fff; }

/* ═══════════════════════════════════════════
   RESPONSIVE — LAPTOP (≤ 1140px)
═══════════════════════════════════════════ */
@media (max-width: 1140px) {
  .perk-card {
    width: calc(33.333% - 12px);
    max-width: 320px;
  }
  .details-section { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════
   RESPONSIVE — TABLET (≤ 860px)
═══════════════════════════════════════════ */
@media (max-width: 860px) {
  body { padding-top: 0; }
  .container { padding: 0 20px; }

  /* Nav */
  .floating-nav { top: 10px; padding: 6px 8px; }
  .nav-link { font-size: 0.72rem; padding: 7px 10px; }

  /* Hero mobile */
  .hero-inner {
    padding: 100px 20px 36px;
  }
  .hero-content { max-width: 100%; }
  .main-title { font-size: clamp(2.6rem, 10vw, 4rem); }
  .countdown-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-top: 24px;
    margin-top: 28px;
  }
  .countdown-timer { flex-wrap: nowrap; gap: 5px; }
  .cd-unit { min-width: 50px; padding: 8px 10px; }
  .cd-num { font-size: 1.5rem; }
  .cd-sep { font-size: 1.1rem; margin-bottom: 8px; }
  .hero-stats {
    padding: 24px 20px 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 24px;
  }
  .hs-div { display: none; }
  .hs-val { font-size: 1.05rem; }

  /* Pitch */
  .pitch-section {
    grid-template-columns: 1fr;
    gap: 36px;
    margin: 80px 0;
    padding: 32px 24px;
  }
  .poster-wrap { max-width: 260px; margin: 0 auto; }

  /* Perks */
  .perks-section { margin: 80px 0; }
  .perks-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
  }
  .perk-card {
    width: calc(50% - 10px) !important;
    min-width: 240px;
    max-width: 340px;
  }

  /* Narrative */
  .narrative-section { gap: 40px; margin: 80px 0; }
  .q-card { width: 100% !important; padding: 28px 22px !important; min-height: unset !important; align-self: auto !important; }
  .q-text { font-size: 1.05rem; }

  /* Details */
  .details-section { margin: 80px 0; grid-template-columns: 1fr; }
  .detail-box { padding: 28px 22px; }
  .settle-grid { grid-template-columns: 1fr; gap: 12px; }
  .settle-flow {
    flex-direction: column;
    gap: 24px;
    padding: 24px 20px;
  }
  .flow-item {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
  }
  .flow-item:not(:last-child)::after {
    display: none;
  }
  
  /* Slot options fallback */
  .slot-options { flex-direction: column; gap: 9px; }
  .slot-pill input:checked + .pill-box { transform: translateX(4px); }

  /* FAQ */
  .faq-section { margin: 80px 0; }
  .faq-q { padding: 17px 20px; font-size: 0.88rem; }
  .faq-a { padding: 0 20px; }
  .faq-a.open { padding: 0 20px 18px; }

  /* Form */
  .form-section { margin: 80px 0 60px; }
  .form-card { padding: 40px 24px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}

/* ═══════════════════════════════════════════
   RESPONSIVE — MOBILE (≤ 480px)
═══════════════════════════════════════════ */
@media (max-width: 480px) {
  .floating-nav {
    top: 8px;
    padding: 5px 12px 5px 6px;
    max-width: 90vw;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    mask-image: linear-gradient(to right, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 92%, transparent 100%);
  }
  .floating-nav::-webkit-scrollbar {
    display: none;
  }
  .nav-links {
    flex-wrap: nowrap;
    padding-right: 12px;
  }
  .nav-link { font-size: 0.66rem; padding: 6px 8px; }

  .cd-num { font-size: 1.25rem; }
  .cd-unit { min-width: 42px; padding: 5px 6px; }
  .cd-sep { font-size: 0.95rem; margin-bottom: 6px; }

  .hero-stats { gap: 14px; }
  .hs-val { font-size: 1.1rem; }

  .footer-grid { grid-template-columns: 1fr; gap: 20px; }
}

.faq-category-title {
  font-size: 1.15rem; font-weight: 800; color: var(--cyan);
  margin: 44px 0 20px; border-left: 3px solid var(--cyan);
  padding-left: 12px; letter-spacing: 0.05em; text-transform: uppercase;
}
.faq-category-title:first-of-type { margin-top: 20px; }

@media (max-width: 580px) {
  .perks-grid {
    flex-direction: column;
    align-items: stretch;
  }
  .perk-card {
    width: 100% !important;
    max-width: none;
  }
}

/* Custom SVG Icon styling */
.ev-icon svg, .perk-icon svg, .sc-icon svg {
  display: block;
  stroke: currentColor;
}

.ev-icon svg {
  color: var(--cyan);
  filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.4));
}

.perk-icon svg {
  color: var(--pink);
  filter: drop-shadow(0 0 8px rgba(255, 42, 133, 0.4));
}

.perk-card.perk-featured .perk-icon svg {
  color: var(--pink);
  filter: drop-shadow(0 0 8px rgba(255, 42, 133, 0.4));
}

.perk-card.perk-featured-cyan .perk-icon svg {
  color: var(--cyan);
  filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.4));
}

.perk-card.perk-featured-purple .perk-icon svg {
  color: var(--purple);
  filter: drop-shadow(0 0 8px rgba(139, 62, 255, 0.4));
}

.sc-icon svg {
  color: var(--cyan);
  filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.4));
}

.settle-card:nth-child(1) .sc-icon svg {
  color: var(--pink);
  filter: drop-shadow(0 0 8px rgba(255, 42, 133, 0.4));
}

.settle-card:nth-child(3) .sc-icon svg {
  color: var(--purple);
  filter: drop-shadow(0 0 8px rgba(139, 62, 255, 0.4));
}

/* ═══════════════════════════
   PREMIUM CUSTOM DESIGN OVERLAYS
   ═══════════════════════════ */

/* Hero Floating Sticker */
.hero-sticker {
  position: absolute;
  top: 100px;
  right: 40px;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  color: #fff;
  font-family: var(--disp);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 4px;
  transform: rotate(8deg) skewX(-10deg);
  box-shadow: 0 8px 20px rgba(255,42,133,0.3);
  letter-spacing: 0.1em;
  border: 1px solid rgba(255,255,255,0.25);
  animation: stickerFloat 4s infinite ease-in-out alternate;
  z-index: 10;
  pointer-events: none;
}
@keyframes stickerFloat {
  from { transform: rotate(8deg) skewX(-10deg) translateY(0); }
  to { transform: rotate(10deg) skewX(-8deg) translateY(-8px); }
}

@media (max-width: 860px) {
  .hero-sticker {
    top: 40px;
    right: 20px;
    font-size: 0.68rem;
    padding: 4px 10px;
  }
}

/* Staggered Perks Grid on PC */
@media (min-width: 861px) {
  .perks-grid .perk-card:nth-child(even) {
    transform: translateY(20px);
  }
  .perks-grid .perk-card:nth-child(even):hover {
    transform: translateY(14px) scale(1.03);
  }
  .perks-section {
    padding-bottom: 30px;
  }
}