/* ==========================================================================
   Magnum Tonic Wine — Vibez Fi Now, Vibez Fi Lata
   Brand colors: deep red, gold, Jamaican green, ink black, cream
   ========================================================================== */

:root {
  --magnum-red:    #C8102E;
  --magnum-red-2:  #8C0A20;
  --magnum-red-d:  #4A0612;
  --gold:          #F5BE26;
  --gold-2:        #FFD96A;
  --jam-green:     #009639;
  --jam-green-d:   #00682A;
  --ink:           #1A0606;
  --ink-2:         #2A0F0F;
  --cream:         #FFF6E1;
  --cream-2:       #FCEFD3;
  --white:         #FFFFFF;
  --shadow-lg:     0 30px 60px -15px rgba(0,0,0,.45);
  --shadow-md:     0 12px 30px -8px rgba(0,0,0,.35);
  --shadow-sm:     0 2px 8px rgba(0,0,0,.15);
  --radius:        14px;
  --radius-lg:     22px;
  --max:           1200px;
  --max-narrow:    760px;

  --font-display: 'Anton', 'Bebas Neue', Impact, sans-serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--cream);
  background: var(--ink);
  background-image:
    radial-gradient(ellipse at 50% -10%, rgba(245,190,38,.15), transparent 60%),
    radial-gradient(ellipse at 100% 30%, rgba(200,16,46,.25), transparent 70%),
    linear-gradient(180deg, #1a0606 0%, #2a0a0a 50%, #1a0606 100%);
  min-height: 100vh;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--gold); text-decoration: none; transition: color .2s; }
a:hover { color: var(--gold-2); }
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: .02em; line-height: 1.05; margin: 0; font-weight: 400; }
h2 { font-size: clamp(2rem, 5vw, 3.4rem); }
h3 { font-size: clamp(1.4rem, 3vw, 2rem); }
h4 { font-size: 1.25rem; }
p  { margin: 0 0 1rem; }

.container { max-width: var(--max); margin: 0 auto; padding: 0 1.25rem; }
.container--narrow { max-width: var(--max-narrow); }

.eyebrow {
  display: inline-block;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(245,190,38,.12);
  padding: .35rem .8rem;
  border-radius: 999px;
  margin: 0 0 1rem;
}
.eyebrow--center { display: table; margin: 0 auto 1rem; }

/* ============================== Buttons ============================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  font: inherit; font-weight: 700; letter-spacing: .03em;
  padding: .85rem 1.5rem;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  text-transform: uppercase;
  font-size: .9rem;
  transition: transform .15s, box-shadow .2s, background .2s, color .2s;
  white-space: nowrap;
  user-select: none;
}
.btn:active { transform: translateY(1px); }
.btn--lg { padding: 1.05rem 1.9rem; font-size: 1rem; }
.btn--primary {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
  color: var(--ink);
  box-shadow: 0 10px 24px -8px rgba(245,190,38,.6), inset 0 -2px 0 rgba(0,0,0,.18);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(245,190,38,.7); }
.btn--outline {
  background: transparent;
  color: var(--cream);
  border-color: rgba(255,246,225,.4);
}
.btn--outline:hover { border-color: var(--gold); color: var(--gold); }
.btn--ghost {
  background: rgba(255,255,255,.06);
  color: var(--cream);
  border-color: rgba(255,255,255,.1);
}
.btn--ghost:hover { background: rgba(255,255,255,.1); }

/* ============================== Age Gate ============================== */
.age-gate {
  position: fixed; inset: 0;
  background: rgba(10,2,2,.92);
  backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  padding: 1.25rem;
  animation: fadeIn .4s ease;
}
.age-gate__panel {
  background: linear-gradient(160deg, var(--magnum-red-2) 0%, var(--ink) 100%);
  border: 1px solid rgba(245,190,38,.3);
  border-radius: var(--radius-lg);
  max-width: 460px;
  width: 100%;
  padding: 2.5rem 2rem 1.75rem;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.age-gate__crest img { height: 60px; margin: 0 auto 1.25rem; }
.age-gate h2 { font-size: 1.85rem; margin-bottom: .8rem; color: var(--gold); }
.age-gate__actions { display: flex; gap: .75rem; justify-content: center; margin: 1.5rem 0 1rem; }
.age-gate__small { font-size: .8rem; opacity: .7; margin: 0; }

/* ============================== Header ============================== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.5rem;
  background: linear-gradient(180deg, rgba(26,6,6,.85) 0%, rgba(26,6,6,0) 100%);
  backdrop-filter: blur(8px);
  z-index: 100;
  transition: background .2s;
}
.site-header.scrolled { background: rgba(26,6,6,.95); border-bottom: 1px solid rgba(245,190,38,.15); }
.brand img { height: 38px; }
.brand-placeholder {
  font-family: var(--font-display); font-size: 1.4rem; color: var(--gold);
  letter-spacing: .1em;
}
.site-nav { display: flex; gap: 2rem; align-items: center; font-weight: 600; font-size: .9rem; }
.site-nav a { color: var(--cream); }
.site-nav a:hover { color: var(--gold); }
.site-nav .nav-cta {
  background: var(--gold);
  color: var(--ink);
  padding: .55rem 1.1rem;
  border-radius: 999px;
}
.site-nav .nav-cta:hover { background: var(--gold-2); color: var(--ink); }
@media (max-width: 600px) {
  .site-nav a:not(.nav-cta) { display: none; }
}

/* ============================== Plane + Trail (scroll) ============================== */
.sky-trail {
  position: fixed;
  left: 0; right: 0; top: 50%;
  width: 100vw; height: 60px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 5;
  opacity: .35;
}
.sky-trail #trail-path {
  stroke: rgba(255,246,225,.25);
  stroke-width: 1.5;
  stroke-dasharray: 4 6;
}
.sky-trail #trail-progress {
  stroke: var(--gold);
  stroke-width: 2.5;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset .15s linear;
  filter: drop-shadow(0 0 6px rgba(245,190,38,.6));
}
.plane {
  position: fixed;
  top: 50%;
  left: 0;
  width: 96px;
  height: 48px;
  transform: translate(-50%, -50%) rotate(0deg);
  pointer-events: none;
  z-index: 6;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.55)) drop-shadow(0 0 8px rgba(245,190,38,.15));
  transition: transform .12s linear, opacity .3s;
  will-change: transform;
}
.plane svg { width: 100%; height: 100%; }
.plane.takeoff {
  transition: transform 1.6s cubic-bezier(.45,.05,.4,1), opacity 1.2s;
  transform: translate(120vw, -90vh) rotate(-22deg) scale(.7);
  opacity: 0;
}

/* ============================== Hero ============================== */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 7rem 1.25rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0;
  z-index: 0;
}
.hero__crowd {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 80%, rgba(245,190,38,.12) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(200,16,46,.4) 0%, transparent 60%);
  mask-image: linear-gradient(180deg, transparent 30%, black 90%);
}
.hero__glow {
  position: absolute;
  width: 800px; height: 800px;
  top: -200px; right: -200px;
  background: radial-gradient(circle, rgba(245,190,38,.25) 0%, transparent 60%);
  filter: blur(40px);
  animation: pulse 8s ease-in-out infinite;
}
.hero__bg::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 45%;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,180,80,.45) 0%, transparent 55%),
    radial-gradient(ellipse at 30% 10%, rgba(245,190,38,.35) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 5%, rgba(200,16,46,.5) 0%, transparent 50%);
  filter: blur(20px);
  z-index: 0;
  pointer-events: none;
}
.hero__bg::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 30%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'><path d='M0,200 L0,140 Q40,120 60,135 T120,140 Q160,110 200,135 T260,150 Q300,115 340,140 T400,150 Q440,100 480,130 T540,140 Q580,110 620,135 T680,145 Q720,105 760,130 T820,145 Q860,115 900,135 T960,150 Q1000,110 1040,135 T1100,145 Q1140,115 1180,135 L1200,140 L1200,200 Z' fill='%23000' opacity='.85'/><g fill='%23000' opacity='.7'><circle cx='100' cy='130' r='3'/><circle cx='180' cy='115' r='2.5'/><circle cx='280' cy='125' r='3'/><circle cx='380' cy='110' r='2.5'/><circle cx='480' cy='120' r='3'/><circle cx='580' cy='115' r='2.5'/><circle cx='680' cy='125' r='3'/><circle cx='780' cy='110' r='2.5'/><circle cx='880' cy='120' r='3'/><circle cx='980' cy='115' r='2.5'/><circle cx='1080' cy='125' r='3'/></g></svg>");
  background-size: cover;
  background-position: bottom;
  z-index: 1;
  pointer-events: none;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: .8; }
  50% { transform: scale(1.15); opacity: 1; }
}

.hero__content {
  position: relative; z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 3rem;
  align-items: center;
}
@media (max-width: 900px) {
  .hero__content { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
}

.hero__title {
  font-size: clamp(2.6rem, 8.5vw, 6.4rem);
  line-height: .9;
  margin-bottom: 1.5rem;
  text-shadow: 0 4px 30px rgba(0,0,0,.5);
  display: flex; flex-direction: column;
  gap: .15em;
}
.hero__title .line { display: block; }
.hero__title .word {
  display: inline-block;
  margin-right: .25em;
  transform: translateY(20px); opacity: 0;
  animation: rise .7s cubic-bezier(.2,.8,.2,1) forwards;
  -webkit-text-stroke: 1px rgba(0,0,0,.25);
}
.hero__title .line:nth-child(1) .word:nth-child(1) { animation-delay: .1s; }
.hero__title .line:nth-child(1) .word:nth-child(2) { animation-delay: .25s; }
.hero__title .line:nth-child(2) .word:nth-child(1) { animation-delay: .4s; }
.hero__title .line:nth-child(2) .word:nth-child(2) { animation-delay: .55s; }
.word--gold  { color: var(--gold); text-shadow: 0 0 20px rgba(245,190,38,.4), 0 4px 10px rgba(0,0,0,.5); }
.word--cream { color: var(--cream); }
@media (max-width: 900px) {
  .hero__title { align-items: center; }
}

@keyframes rise {
  to { transform: translateY(0); opacity: 1; }
}

.hero__sub {
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  max-width: 540px;
  opacity: .92;
  margin-bottom: 2rem;
}
@media (max-width: 900px) { .hero__sub { margin-left: auto; margin-right: auto; } }

.hero__cta { display: flex; gap: .85rem; flex-wrap: wrap; }
@media (max-width: 900px) { .hero__cta { justify-content: center; } }

.hero__meta {
  margin-top: 2rem;
  display: flex; gap: 2rem; flex-wrap: wrap;
  font-size: .9rem;
  opacity: .85;
}
.hero__meta span { display: inline-flex; align-items: center; gap: .4rem; color: var(--cream); }
@media (max-width: 900px) { .hero__meta { justify-content: center; } }

/* Hero visual — the flyer */
.hero__visual {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  perspective: 1200px;
}
.hero__flyer {
  max-height: 620px;
  width: auto;
  border-radius: 14px;
  box-shadow:
    0 40px 60px -20px rgba(0,0,0,.7),
    0 0 0 1px rgba(245,190,38,.15),
    0 0 80px rgba(245,190,38,.08);
  transform: rotate(-2deg);
  animation: flyerFloat 6s ease-in-out infinite, flyerIn 1s cubic-bezier(.2,.8,.2,1);
  transition: transform .35s ease;
}
.hero__flyer:hover {
  transform: rotate(0deg) scale(1.02);
}
@keyframes flyerIn {
  from { transform: rotate(-12deg) translateY(40px); opacity: 0; }
  to   { transform: rotate(-2deg) translateY(0); opacity: 1; }
}
@keyframes flyerFloat {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50%      { transform: rotate(-1deg) translateY(-10px); }
}
.flyer-placeholder {
  width: 320px; height: 460px;
  background:
    repeating-linear-gradient(45deg,
      rgba(245,190,38,.06) 0 12px,
      rgba(200,16,46,.08) 12px 24px);
  border: 3px dashed rgba(245,190,38,.45);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); color: var(--gold);
  font-size: 1.6rem; letter-spacing: .15em;
  text-align: center;
  transform: rotate(-2deg);
  box-shadow: 0 30px 50px -15px rgba(0,0,0,.6);
}
.flyer-placeholder small {
  display: block; font-size: .75rem; opacity: .65;
  font-family: var(--font-sans); font-weight: 600; letter-spacing: .1em;
  margin-top: .75rem;
}

/* Hero headline (replaces big stencil treatment now that flyer carries it) */
.hero__headline {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  line-height: 1;
  margin-bottom: 1.25rem;
  letter-spacing: .02em;
  color: var(--cream);
  text-shadow: 0 4px 30px rgba(0,0,0,.5);
  animation: rise .8s cubic-bezier(.2,.8,.2,1);
}
.hero__headline .word--gold {
  color: var(--gold);
  text-shadow: 0 0 24px rgba(245,190,38,.4);
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}
.hero__sparkles::before, .hero__sparkles::after {
  content: ""; position: absolute;
  width: 6px; height: 6px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow:
    20px 30px 0 var(--gold), 50px -40px 0 var(--cream), -30px 80px 0 var(--gold-2),
    -60px -20px 0 var(--cream), 80px 60px 0 var(--gold), -80px 30px 0 var(--gold-2);
  top: 50%; left: 50%;
  animation: twinkle 3s ease-in-out infinite alternate;
}
.hero__sparkles::after { animation-delay: 1.5s; transform: rotate(120deg); }
@keyframes twinkle {
  from { opacity: .3; }
  to { opacity: 1; }
}

/* Ticker */
.ticker {
  position: relative;
  margin-top: 3rem;
  padding: .8rem 0;
  background: var(--gold);
  color: var(--ink);
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  overflow: hidden;
  z-index: 3;
}
.ticker__track {
  display: inline-flex; gap: 3rem;
  font-family: var(--font-display); font-size: 1.1rem; letter-spacing: .15em;
  white-space: nowrap;
  animation: marquee 35s linear infinite;
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================== Prizes ============================== */
.prizes {
  padding: 6rem 0 4rem;
  position: relative;
  z-index: 2;
}
.prizes h2 { text-align: center; margin-bottom: 3rem; max-width: 700px; margin-left: auto; margin-right: auto; }

.prize-grand {
  position: relative;
  background: linear-gradient(135deg, var(--magnum-red) 0%, var(--magnum-red-2) 100%);
  border: 1px solid rgba(245,190,38,.4);
  border-radius: var(--radius-lg);
  padding: 3rem 3rem 3rem 3rem;
  margin-bottom: 2.5rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.prize-grand::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(245,190,38,.05) 0 2px, transparent 2px 12px);
  pointer-events: none;
}
.prize-grand__badge {
  position: absolute; top: 1rem; right: 1rem;
  background: var(--gold);
  color: var(--ink);
  font-weight: 800; font-size: .75rem;
  padding: .35rem .8rem;
  border-radius: 999px;
  letter-spacing: .15em;
}
.prize-grand__body { position: relative; z-index: 1; }
.prize-grand h3 { font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--gold); margin-bottom: .5rem; }
.prize-grand p  { font-size: 1.1rem; opacity: .95; max-width: 560px; }
.prize-grand__plane {
  position: relative; z-index: 1;
  width: 180px; height: 90px;
  animation: fly 4s ease-in-out infinite;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.4)) drop-shadow(0 0 12px rgba(245,190,38,.3));
}
.prize-grand__plane svg { width: 100%; height: 100%; transform: rotate(-12deg); }
@keyframes fly {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(-3deg); }
}
@media (max-width: 700px) {
  .prize-grand { grid-template-columns: 1fr; padding: 2.5rem 1.5rem; text-align: center; }
  .prize-grand__plane { margin: 0 auto; }
}

/* Weekly Prizes ribbon banner — flyer style */
.weekly-banner {
  position: relative;
  display: flex; justify-content: center;
  margin: 3rem auto 1.75rem;
  max-width: 460px;
}
.weekly-banner__title {
  position: relative;
  display: inline-block;
  background: linear-gradient(180deg, var(--gold-2) 0%, var(--gold) 100%);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  letter-spacing: .08em;
  padding: .6rem 2.5rem;
  border-radius: 6px;
  box-shadow: 0 6px 0 var(--magnum-red-2), 0 12px 24px rgba(0,0,0,.45);
  transform: rotate(-1deg);
  text-shadow: 1px 1px 0 rgba(255,255,255,.4);
}
.weekly-banner__title::before,
.weekly-banner__title::after {
  content: "";
  position: absolute;
  top: 50%; width: 0; height: 0;
  border-style: solid;
  transform: translateY(-50%);
}
.weekly-banner__title::before {
  left: -16px;
  border-width: 16px 16px 16px 0;
  border-color: transparent var(--gold) transparent transparent;
  filter: drop-shadow(-3px 4px 0 var(--magnum-red-2));
}
.weekly-banner__title::after {
  right: -16px;
  border-width: 16px 0 16px 16px;
  border-color: transparent transparent transparent var(--gold);
  filter: drop-shadow(3px 4px 0 var(--magnum-red-2));
}

/* Prize pills — dark rounded boxes with gold icon + label */
.prize-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}
.prize-pill {
  display: flex; align-items: center;
  gap: .85rem;
  background: linear-gradient(180deg, var(--ink-2) 0%, #160404 100%);
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  box-shadow: 0 6px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(245,190,38,.12);
  transition: transform .25s, border-color .25s;
  cursor: default;
}
.prize-pill:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 14px 24px rgba(245,190,38,.25), inset 0 1px 0 rgba(245,190,38,.2);
}
.prize-pill__icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(245,190,38,.08);
  border-radius: 10px;
}
.prize-pill__icon svg { width: 26px; height: 26px; }
.prize-pill__label {
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: .06em;
  color: var(--gold);
}

/* ============================== How to Enter ============================== */
.how {
  padding: 5rem 0;
  background:
    linear-gradient(180deg, transparent 0%, rgba(0,150,57,.08) 50%, transparent 100%);
  position: relative;
  z-index: 2;
}
.how h2 { text-align: center; margin-bottom: 3rem; }
.steps {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  counter-reset: steps;
}
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; } }
.step {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: 2rem 1.75rem 1.75rem;
  position: relative;
  transition: transform .25s, border-color .25s;
}
.step:hover { transform: translateY(-4px); border-color: var(--gold); }
.step__num {
  position: absolute; top: -22px; left: 24px;
  width: 46px; height: 46px;
  background: linear-gradient(135deg, var(--magnum-red) 0%, var(--magnum-red-2) 100%);
  color: var(--cream);
  font-weight: 800;
  font-family: var(--font-display);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 3px solid var(--gold);
  font-size: 1.5rem;
  box-shadow: 0 6px 14px rgba(200,16,46,.45);
}
.step h4 { color: var(--gold); margin-bottom: .5rem; font-family: var(--font-display); letter-spacing: .05em; font-size: 1.5rem; }
.step p  { font-size: .95rem; opacity: .85; margin: 0; }

/* ============================== Form ============================== */
.enter {
  padding: 5rem 0 6rem;
  position: relative;
  z-index: 2;
}
.enter h2 { text-align: center; margin-bottom: 2rem; }
.form-card {
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(0,0,0,.2) 100%);
  border: 1px solid rgba(245,190,38,.25);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-lg);
}
@media (max-width: 600px) { .form-card { padding: 1.5rem 1.25rem; } }

.progress { margin-bottom: 1.5rem; }
.progress__bar {
  height: 6px;
  background: rgba(255,255,255,.1);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: .75rem;
}
.progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--magnum-red) 0%, var(--gold) 100%);
  border-radius: 999px;
  transition: width .35s cubic-bezier(.4,0,.2,1);
}
.progress__steps {
  display: flex; justify-content: space-between;
  font-size: .8rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(255,246,225,.5);
}
.progress__steps .active { color: var(--gold); }

.row { display: grid; gap: 1rem; margin-bottom: 1rem; }
.row--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .row--2 { grid-template-columns: 1fr; } }

.field { display: block; margin-bottom: 1rem; }
.field span {
  display: block;
  font-size: .8rem; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: .4rem;
  opacity: .85;
}
.field span em { color: var(--gold); font-style: normal; }
.field input, .field select {
  width: 100%;
  font: inherit;
  background: rgba(0,0,0,.35);
  color: var(--cream);
  border: 1.5px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: .85rem 1rem;
  transition: border-color .15s, background .15s, box-shadow .15s;
  -webkit-appearance: none;
  appearance: none;
}
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(0,0,0,.5);
  box-shadow: 0 0 0 3px rgba(245,190,38,.15);
}
.field input[type="date"] { color-scheme: dark; }
.field input[type="file"] {
  padding: .5rem;
  border-style: dashed;
  cursor: pointer;
}
.field input[type="file"]::file-selector-button {
  background: var(--gold); color: var(--ink);
  border: none; padding: .5rem .9rem;
  border-radius: 6px;
  font: inherit; font-weight: 700;
  margin-right: .8rem;
  cursor: pointer;
}
.field .hint { display: block; font-size: .78rem; opacity: .65; margin-top: .35rem; }
.field.error input, .field.error select { border-color: #ff5e5e; }

.checkbox {
  display: flex; gap: .65rem; align-items: flex-start;
  margin-bottom: .75rem;
  font-size: .9rem;
  cursor: pointer;
}
.checkbox input { margin-top: .15rem; accent-color: var(--gold); }
.checkbox span { flex: 1; opacity: .9; }

.actions {
  display: flex; gap: .75rem; justify-content: space-between;
  margin-top: 1.5rem;
}
.actions--single { justify-content: flex-end; }

.form-error {
  margin-top: 1rem;
  background: rgba(255,80,80,.15);
  border: 1px solid #ff5e5e;
  color: #ffd6d6;
  padding: .8rem 1rem;
  border-radius: 10px;
  font-size: .9rem;
}
.enter__small {
  text-align: center;
  margin-top: 1rem;
  font-size: .8rem;
  opacity: .55;
}

/* ============================== Success ticket ============================== */
.success {
  position: fixed; inset: 0;
  background: rgba(10,2,2,.85);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  gap: 1.5rem;
  z-index: 9998;
  padding: 1.5rem;
  animation: fadeIn .4s ease;
}
.success__panel { display: flex; flex-direction: column; align-items: center; gap: 1rem; max-width: 420px; }

.ticket {
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
  color: var(--ink);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  animation: ticketIn .8s cubic-bezier(.2,.8,.2,1);
}
@keyframes ticketIn {
  from { transform: translateY(40px) scale(.9) rotate(-3deg); opacity: 0; }
  to   { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
}
.ticket__head, .ticket__foot {
  background: var(--ink);
  color: var(--gold);
  padding: .7rem 1.25rem;
  display: flex; justify-content: space-between;
  font-family: var(--font-display); font-size: .85rem; letter-spacing: .15em;
}
.ticket__body { padding: 1.5rem; text-align: center; }
.ticket__title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  margin: 0 0 .75rem;
  color: var(--magnum-red);
}
.ticket__ref { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; opacity: .6; margin: 0 0 .25rem; }
.ticket__code {
  font-family: ui-monospace, 'SF Mono', monospace;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: .05em;
  background: var(--ink);
  color: var(--gold);
  padding: .6rem 1rem;
  border-radius: 8px;
  display: inline-block;
  margin: 0 0 1rem;
}
.ticket__msg { font-size: .9rem; margin: 0; opacity: .85; }
.ticket__perf {
  height: 14px;
  background-image: radial-gradient(circle at 7px 7px, var(--ink) 5px, transparent 6px);
  background-size: 14px 14px;
  background-repeat: repeat-x;
}

/* ============================== Footer ============================== */
.site-footer {
  border-top: 1px solid rgba(245,190,38,.15);
  padding: 3rem 0 2rem;
  margin-top: 3rem;
  position: relative;
  z-index: 2;
  background: rgba(0,0,0,.3);
}
.site-footer__top {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.site-footer__logo { height: 36px; }
.site-footer nav { display: flex; gap: 1.5rem; flex-wrap: wrap; font-size: .9rem; }
.site-footer nav a { color: var(--cream); opacity: .8; }
.site-footer nav a:hover { color: var(--gold); opacity: 1; }
.responsibly {
  text-align: center;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--gold);
  margin-bottom: .5rem;
}
.copyright { text-align: center; font-size: .75rem; opacity: .5; margin: 0; }

/* ============================== Scroll reveal ============================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal--delay-1 { transition-delay: .1s; }
.reveal--delay-2 { transition-delay: .2s; }
.reveal--delay-3 { transition-delay: .3s; }

/* ============================== Form polish — floating label-ish, focus rings ============================== */
.field input::placeholder, .field select::placeholder { color: rgba(255,246,225,.35); }
.field input:focus-visible, .field select:focus-visible {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(245,190,38,.18), 0 6px 14px -4px rgba(245,190,38,.25);
}
.field.error span { color: #ff8888; }
.field.error input, .field.error select {
  animation: shake .35s ease;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* Subtle hover lift on CTAs */
.btn--primary:hover { transform: translateY(-3px) scale(1.02); }
.btn--lg:active { transform: scale(.98); }

/* Better mobile spacing */
@media (max-width: 600px) {
  .hero { padding-top: 5.5rem; }
  .hero__flyer, .flyer-placeholder { max-height: 480px; }
  .prize-grand { padding: 2rem 1.25rem; }
  .form-card { padding: 1.4rem 1rem; }
  .actions { flex-direction: column-reverse; }
  .actions .btn { width: 100%; }
}

/* ============================== "Enter Here" eyebrow ============================== */
.eyebrow--enter {
  background: linear-gradient(135deg, var(--magnum-red) 0%, var(--magnum-red-2) 100%);
  color: var(--cream);
  padding: .5rem 1.4rem;
  font-size: .9rem;
  letter-spacing: .3em;
  border: 2px solid var(--gold);
  box-shadow: 0 6px 18px rgba(200,16,46,.4), 0 0 0 4px rgba(245,190,38,.15);
  animation: pulseRing 2.5s ease-in-out infinite;
}
@keyframes pulseRing {
  0%, 100% { box-shadow: 0 6px 18px rgba(200,16,46,.4), 0 0 0 4px rgba(245,190,38,.15); }
  50%      { box-shadow: 0 6px 18px rgba(200,16,46,.5), 0 0 0 9px rgba(245,190,38,.05); }
}
.enter__lead {
  text-align: center;
  font-size: 1.05rem;
  opacity: .85;
  margin: -.5rem auto 2rem;
  max-width: 520px;
}

/* ============================== Boarding Pass Form ============================== */
.form-card.boarding {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(245,190,38,.08) 0%, transparent 60%),
    linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
  color: var(--ink);
  border: none;
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,.5),
    0 0 0 1px rgba(0,0,0,.1),
    0 0 0 6px rgba(245,190,38,.25),
    0 0 0 8px rgba(0,0,0,.4);
  isolation: isolate;
}
.form-card.boarding::before,
.form-card.boarding::after {
  content: "";
  position: absolute;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--ink);
  z-index: 2;
}
.form-card.boarding::before { top: 80px; left: -18px; }
.form-card.boarding::after  { top: 80px; right: -18px; }

.boarding__head {
  background: linear-gradient(135deg, var(--magnum-red) 0%, var(--magnum-red-2) 60%, var(--ink) 100%);
  color: var(--cream);
  padding: 1.4rem 2rem 1.2rem;
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1rem;
  position: relative;
}
.boarding__head::after {
  content: "";
  position: absolute;
  top: 12px; right: 14px; width: 60px; height: 60px;
  background-image: radial-gradient(circle, rgba(245,190,38,.4) 0%, transparent 70%);
  pointer-events: none;
}
.boarding__head-left, .boarding__head-right {
  display: flex; flex-direction: column;
}
.boarding__head-right { text-align: right; }
.boarding__label {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .25em;
  opacity: .75;
  margin-bottom: .25rem;
}
.boarding__route {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: .04em;
  color: var(--gold);
  display: flex; align-items: center; gap: .5rem;
}
.boarding__plane-mini {
  display: inline-block;
  color: var(--cream);
  transform: translateY(-2px);
  font-size: 1.2rem;
}
.boarding__class {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--gold);
  letter-spacing: .05em;
}

.boarding__perf {
  height: 14px;
  background-image: radial-gradient(circle at 7px 7px, var(--ink) 4.5px, transparent 5px);
  background-size: 14px 14px;
  background-repeat: repeat-x;
  background-position: center;
}
.boarding__perf--bottom { background-color: var(--cream); margin-top: 1rem; }

.form-card.boarding form { padding: 1.75rem 2rem 1rem; }

.form-card.boarding .field span {
  color: var(--ink);
  opacity: .85;
}
.form-card.boarding .field span em { color: var(--magnum-red); }
.form-card.boarding .field input {
  background: rgba(255,255,255,.7);
  color: var(--ink);
  border: 1.5px solid rgba(0,0,0,.15);
}
.form-card.boarding .field input::placeholder { color: rgba(26,6,6,.4); }
.form-card.boarding .field input[type="date"] { color-scheme: light; }
.form-card.boarding .field input:focus {
  background: #fff;
  border-color: var(--magnum-red);
  box-shadow: 0 0 0 3px rgba(200,16,46,.15);
}
.form-card.boarding .hint {
  color: rgba(26,6,6,.55);
}
.form-card.boarding .field .optional {
  font-size: .7rem;
  color: rgba(26,6,6,.45);
  font-weight: 600;
  text-transform: none;
  letter-spacing: .02em;
  margin-left: .25rem;
}
.form-card.boarding .field input[type="file"] {
  background: rgba(245,190,38,.12);
  border: 2px dashed rgba(200,16,46,.35);
  cursor: pointer;
}
.form-card.boarding .field input[type="file"]::file-selector-button {
  background: var(--magnum-red);
  color: var(--cream);
}

.consent-block {
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin: 1.25rem 0 1.5rem;
}
.consent-block .checkbox { margin-bottom: .65rem; color: var(--ink); }
.consent-block .checkbox:last-child { margin-bottom: 0; }
.consent-block .checkbox span { color: var(--ink); opacity: .9; }
.consent-block .checkbox a { color: var(--magnum-red); text-decoration: underline; }
.consent-block .checkbox span em { color: var(--magnum-red); font-style: normal; }

.btn--block { width: 100%; }

.boarding__foot {
  background: var(--ink);
  color: var(--gold);
  padding: .85rem 2rem;
  display: flex; justify-content: space-between;
  font-family: var(--font-sans);
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.boarding__foot strong { color: var(--cream); margin-left: .35rem; letter-spacing: .1em; }

@media (max-width: 600px) {
  .boarding__head { flex-direction: column; gap: .25rem; align-items: flex-start; }
  .boarding__head-right { text-align: left; }
  .form-card.boarding form { padding: 1.25rem 1.25rem 1rem; }
  .boarding__foot { padding: .8rem 1.25rem; flex-wrap: wrap; gap: .35rem; }
  .form-card.boarding::before, .form-card.boarding::after { display: none; }
}

/* ============================== Section CTA blocks ============================== */
.section-cta {
  margin-top: 3rem;
  padding: 2rem 1.5rem;
  text-align: center;
  background:
    radial-gradient(ellipse at center, rgba(245,190,38,.12) 0%, transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.01) 100%);
  border: 1px solid rgba(245,190,38,.18);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.section-cta p {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: .03em;
  color: var(--gold);
  margin: 0;
}

/* ============================== FAQ ============================== */
.faq {
  padding: 5rem 0;
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, transparent 0%, rgba(200,16,46,.06) 50%, transparent 100%);
}
.faq h2 { text-align: center; margin-bottom: 2.5rem; }

.faq-list { display: flex; flex-direction: column; gap: .75rem; }

.faq-item {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .25s, background .25s;
}
.faq-item[open] {
  background: rgba(245,190,38,.06);
  border-color: rgba(245,190,38,.4);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 1.4rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--cream);
  transition: color .15s;
  -webkit-tap-highlight-color: transparent;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-item summary:hover { color: var(--gold); }
.faq-item[open] summary { color: var(--gold); }
.faq-item summary > span:first-child { flex: 1; }

.faq-icon {
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(245,190,38,.15);
  color: var(--gold);
  border-radius: 50%;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  transition: transform .25s ease, background .15s;
  font-family: var(--font-sans);
}
.faq-item[open] .faq-icon {
  transform: rotate(45deg);
  background: var(--gold);
  color: var(--ink);
}

.faq-answer {
  padding: 0 1.4rem 1.25rem;
  font-size: .96rem;
  line-height: 1.7;
  color: rgba(255,246,225,.88);
  animation: faqOpen .3s ease;
}
.faq-answer p { margin: 0; }
.faq-answer a { color: var(--gold); text-decoration: underline; }
@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================== Decorative palm corners (subtle) ============================== */
.prizes::before,
.faq::after {
  content: "";
  position: absolute;
  width: 220px; height: 220px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%23F5BE26' stroke-width='1.2' stroke-linecap='round' opacity='0.45'><path d='M50 95 Q50 70 50 45'/><path d='M50 50 Q35 35 12 30'/><path d='M50 50 Q40 30 28 12'/><path d='M50 50 Q60 30 75 18'/><path d='M50 50 Q70 38 90 35'/><path d='M50 50 Q42 45 18 50'/><path d='M50 50 Q60 45 82 52'/></g></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: .5;
  z-index: 1;
}
.prizes::before { top: 1rem; right: -40px; transform: rotate(15deg); }
.faq::after { bottom: 1rem; left: -40px; transform: rotate(-25deg) scaleX(-1); }
@media (max-width: 700px) { .prizes::before, .faq::after { display: none; } }

/* Reduced motion ============================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-delay: 0s !important; transition-duration: .001s !important; }
  .plane { display: none; }
  .sky-trail { display: none; }
}

/* ============================== Utility ============================== */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ============================== Legal page ============================== */
.legal {
  padding: 8rem 0 4rem;
  max-width: 800px; margin: 0 auto;
  position: relative; z-index: 2;
}
.legal h1 { font-family: var(--font-display); font-size: 3rem; color: var(--gold); margin-bottom: .5rem; }
.legal .updated { font-size: .85rem; opacity: .6; margin-bottom: 2rem; }
.legal h2 { font-family: var(--font-sans); font-size: 1.4rem; font-weight: 800; margin: 2rem 0 .75rem; color: var(--gold); }
.legal h3 { font-family: var(--font-sans); font-size: 1.1rem; font-weight: 700; margin: 1.5rem 0 .5rem; color: var(--cream); }
.legal p, .legal li { font-size: .95rem; opacity: .9; line-height: 1.7; }
.legal ul, .legal ol { padding-left: 1.4rem; }
.legal a { color: var(--gold); text-decoration: underline; }
.legal .placeholder {
  background: rgba(245,190,38,.1);
  border-left: 3px solid var(--gold);
  padding: .75rem 1rem;
  margin: 1rem 0;
  font-size: .85rem;
  border-radius: 4px;
}