@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/fraunces-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../assets/fonts/jakarta-latin.woff2') format('woff2');
}

/* OD-LAYOUT-PRIMITIVES v1 - structure only: display, flex/grid, overflow, wrapping, ratio. */
@layer od-layout {
  :where(.od-stack,.od-row,.od-row-top,.od-cluster,.od-grid,.od-field,.od-stat,.od-cell,.od-tile) > :where(*) { min-width: 0; }

  /* containers */
  .od-stack   { display: flex; flex-direction: column; gap: var(--od-gap, 8px); }
  .od-row     { display: flex; align-items: center; gap: var(--od-gap, 8px); }
  .od-row-top { display: flex; align-items: flex-start; gap: var(--od-gap, 8px); }
  .od-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--od-gap, 8px); }
  .od-fill    { flex: 1 1 0; min-width: 0; }
  .od-fixed   { flex: none; }
  .od-grid    { display: grid; gap: var(--od-gap, 12px); grid-template-columns: repeat(var(--od-cols, 3), minmax(0, 1fr)); }

  /* stacked information */
  .od-stat, .od-field, .od-cell { display: grid; gap: var(--od-gap, 2px); }
  :where(.od-stat,.od-field,.od-cell) > :where(*) { display: block; }
  .od-tile { display: grid; grid-template-rows: auto 1fr; }
  :where(.od-tile) > :where(*) { display: block; }

  /* media */
  .od-media { display: block; width: 100%; height: auto; aspect-ratio: var(--od-ratio, auto); }
  .od-media-cover { object-fit: cover; }

  /* text formatting */
  .od-truncate { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .od-clamp-2, .od-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .od-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
  .od-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
  .od-lines-2 { min-height: calc(2 * 1.4em); }
  .od-nowrap  { white-space: nowrap; }
  .od-keep    { word-break: keep-all; overflow-wrap: anywhere; }

  /* screen skeleton */
  .od-screen { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
  .od-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }

  /* horizontal rail */
  .od-rail { display: flex; gap: var(--od-gap, 8px); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
             padding-inline: var(--od-rail-pad, 16px); scroll-padding-inline: var(--od-rail-pad, 16px); }
  .od-rail::-webkit-scrollbar { display: none; }
  :where(.od-rail) > :where(*) { flex: none; scroll-snap-align: start; }
  :where(.od-rail) > :where(:last-child) { margin-inline-end: var(--od-rail-pad, 16px); }

  .od-spacer { flex: none; visibility: hidden; pointer-events: none; }
  .od-touch  { min-width: 44px; min-height: 44px; }
}

:root{
  --green-950:#002d14;
  --green-900:#003d1c;
  --green-800:#00481f;
  --green-700:#005B29;
  --green-600:#0a6f36;
  --green-100:#e6f1ea;
  --green-50:#f1f7f3;
  --gold-700:#8a6a0f;
  --gold-600:#a9821f;
  --gold-500:#D4AF37;
  --gold-300:#e6cf85;
  --gold-100:#f8efd2;
  --ink:#12261B;
  --ink-soft:#3d5045;
  --muted:#66786d;
  --ground:#FBFAF7;
  --surface:#ffffff;
  --line:#e6e3d9;
  --line-strong:#d6d2c4;

  --maxw:1200px;
  --gutter:clamp(20px,5vw,56px);

  --r-s:12px;
  --r-m:20px;
  --r-l:28px;
  --r-xl:40px;

  --sh-s:0 1px 2px rgba(18,38,27,.05), 0 6px 18px -8px rgba(18,38,27,.14);
  --sh-m:0 18px 46px -20px rgba(18,38,27,.32);
  --sh-gold:0 16px 34px -14px rgba(163,127,24,.55);

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in:cubic-bezier(.7,0,.84,0);

  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--ground);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-display); font-weight:600; line-height:1.08; letter-spacing:-.015em; color:var(--ink); }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:3px solid var(--gold-600); outline-offset:3px; border-radius:6px; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.ico{ width:1.25em; height:1.25em; flex:none; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.ico-fill{ fill:currentColor; stroke:none; }

.skip{ position:absolute; left:12px; top:-60px; z-index:100; background:var(--green-700); color:#fff; padding:10px 16px; border-radius:10px; transition:top .2s var(--ease-out); }
.skip:focus{ top:12px; }

.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--green-700); }
.eyebrow .ico{ width:18px; height:18px; color:var(--gold-600); }

.gold-text{ color:var(--gold-700); }
.section{ padding-block:clamp(64px,9vw,120px); }
.section-head{ max-width:640px; }
.section-head h2{ font-size:clamp(30px,4.6vw,46px); }
.section-head p{ margin-top:14px; color:var(--muted); font-size:clamp(16px,1.6vw,18px); }

/* ---------- nav ---------- */
/* ---------- nav ---------- */
.nav{ position:sticky; top:0; z-index:50; background:rgba(251,250,247,.94); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid transparent; transition:border-color .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.nav.scrolled{ border-bottom-color:var(--line); box-shadow:0 10px 30px -24px rgba(18,38,27,.5); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:14px; height:74px; }
.brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.brand img{ height:38px; max-width:135px; width:auto; object-fit:contain; flex-shrink:0; }
.brand-txt{ display:grid; line-height:1.15; }
.brand-txt b{ font-size:13px; font-weight:800; letter-spacing:.02em; color:var(--green-800); }
.brand-txt span{ font-size:10.5px; font-weight:600; letter-spacing:.06em; color:var(--muted); text-transform:uppercase; }
#beranda, #event, #cara, #faq, .section, .hero{ scroll-margin-top:86px; }
.nav-links{ display:none; align-items:center; gap:6px; margin-inline-start:8px; }
.nav-links a{ padding:10px 14px; border-radius:999px; font-size:15px; font-weight:600; color:var(--ink-soft); transition:color .18s, background-color .18s; }
.nav-links a:hover, .nav-links a.active, .nav-links a[aria-current="page"]{ color:var(--green-700); background:var(--green-50); font-weight:700; }
.nav-cta{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.nav-cta .nav-btn-desktop{ display:none !important; }
@media (min-width: 640px){
  .nav-cta .nav-btn-desktop{ display:inline-flex !important; }
}
.nav-toggle{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid var(--line-strong); background:var(--surface); border-radius:12px; cursor:pointer; flex-shrink:0; }
.nav-toggle .ico{ width:20px; height:20px; color:var(--green-800); }

@media (max-width: 480px){
  .nav-inner{ height:62px; gap:8px; }
  .brand img{ height:34px; max-width:110px; }
  .nav-cta{ gap:6px; }
  .nav-cta .btn-sm{ padding:8px 13px; font-size:13px; min-height:40px; }
  .nav-toggle{ width:40px; height:40px; border-radius:10px; }
}

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; border:1.5px solid transparent; border-radius:999px; padding:14px 24px; font-size:15.5px; font-weight:700; cursor:pointer; transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background-color .18s, color .18s, border-color .18s; text-align:center; }
.btn .ico{ width:18px; height:18px; }
.btn-gold{ background:var(--gold-500); color:#1c1404; box-shadow:var(--sh-gold); }
.btn-gold:hover{ background:#c8a230; transform:translateY(-2px); }
.btn-green{ background:var(--green-700); color:#fff; box-shadow:0 16px 34px -16px rgba(0,91,41,.7); }
.btn-green:hover{ background:var(--green-800); transform:translateY(-2px); }
.btn-outline{ background:transparent; border-color:currentColor; color:var(--green-700); }
.btn-outline:hover{ background:var(--green-700); color:#fff; border-color:var(--green-700); transform:translateY(-2px); }
.btn-ghost{ background:transparent; border-color:var(--line-strong); color:var(--ink-soft); }
.btn-ghost:hover{ background:var(--green-50); color:var(--green-700); }
.btn-lg{ padding:17px 30px; font-size:16.5px; }
.btn-block{ width:100%; }
.btn-sm{ padding:10px 18px; font-size:14px; min-height:44px; }

.mobile-menu{ display:none; }
.mobile-menu.open{ display:block; border-top:1px solid var(--line); background:var(--surface); }
.mobile-menu ul{ display:grid; gap:4px; padding:14px var(--gutter) 22px; }
.mobile-menu a{ display:block; padding:14px 12px; border-radius:12px; font-weight:600; color:var(--ink-soft); }
.mobile-menu a:hover{ background:var(--green-50); color:var(--green-700); }
.mobile-menu .btn{ margin-top:8px; }

/* ---------- hero ---------- */
.hero{ position:relative; padding-top:clamp(34px,5vw,60px); padding-bottom:clamp(56px,8vw,96px); overflow:hidden; }
.hero::before{ content:""; position:absolute; inset:0; z-index:-1; background:
  radial-gradient(680px 420px at 88% 4%, rgba(212,175,55,.14), transparent 70%),
  radial-gradient(620px 480px at 6% 90%, rgba(0,91,41,.08), transparent 72%); }
.hero-grid{ display:grid; gap:clamp(40px,6vw,64px); align-items:center; }
.hero-copy{ max-width:600px; }
.hero h1{ margin-top:20px; font-size:clamp(38px,7.2vw,68px); letter-spacing:-.03em; }
.hero h1 .gold-text{ display:inline-block; }
.hero-lead{ margin-top:22px; font-size:clamp(16.5px,1.9vw,19px); line-height:1.65; color:var(--ink-soft); max-width:34em; }
.hero-actions{ margin-top:32px; display:flex; flex-wrap:wrap; gap:14px; }
.hero-trust{ margin-top:30px; display:flex; flex-wrap:wrap; gap:10px 22px; }
.hero-trust li{ display:flex; align-items:center; gap:9px; font-size:14.5px; font-weight:600; color:var(--ink-soft); }
.hero-trust .ico{ width:18px; height:18px; color:var(--green-600); }

.hero-visual{ position:relative; }
.stage{ position:relative; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-m); border:1px solid rgba(255,255,255,.6); background:var(--green-900); }
.stage img{ width:100%; height:auto; display:block; }
.stage::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,45,20,.28), rgba(0,45,20,0) 42%); pointer-events:none; }
.stage-tag{ position:absolute; left:18px; top:18px; display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; background:rgba(255,255,255,.92); color:var(--green-800); font-size:13px; font-weight:700; box-shadow:var(--sh-s); }
.stage-tag .ico{ width:16px; height:16px; color:var(--gold-600); }

.wheel-wrap{ position:absolute; right:-14px; top:-26px; width:clamp(132px,26vw,196px); aspect-ratio:1; }
.wheel{ position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.30), rgba(255,255,255,0) 60%),
    conic-gradient(from -90deg,
      var(--green-700) 0deg 30deg, var(--gold-500) 30deg 60deg,
      var(--green-700) 60deg 90deg, var(--gold-500) 90deg 120deg,
      var(--green-700) 120deg 150deg, var(--gold-500) 150deg 180deg,
      var(--green-700) 180deg 210deg, var(--gold-500) 210deg 240deg,
      var(--green-700) 240deg 270deg, var(--gold-500) 270deg 300deg,
      var(--green-700) 300deg 330deg, var(--gold-500) 330deg 360deg);
  box-shadow:inset 0 0 0 8px var(--gold-100), inset 0 0 0 11px var(--gold-500), inset 0 0 0 13px #fff, 0 20px 40px -18px rgba(0,45,20,.6);
  animation:spin 46s linear infinite;
}
.wheel::after{ content:""; position:absolute; inset:37%; border-radius:50%; background:var(--green-800); box-shadow:inset 0 0 0 4px var(--gold-500), inset 0 0 0 6px #fff; }
.wheel-hub{ position:absolute; inset:37%; display:grid; place-items:center; z-index:2; }
.wheel-hub span{ font-family:var(--font-display); font-weight:700; font-size:clamp(13px,2.6vw,18px); color:var(--gold-300); letter-spacing:.02em; }
.wheel-needle{ position:absolute; left:50%; top:-8px; transform:translateX(-50%); z-index:3; width:0; height:0; border-left:11px solid transparent; border-right:11px solid transparent; border-top:20px solid var(--green-800); filter:drop-shadow(0 3px 4px rgba(0,0,0,.3)); }
@keyframes spin{ to{ transform:rotate(360deg); } }

.float-cards{ display:grid; gap:12px; margin-top:16px; }
.fcard{ display:flex; align-items:center; gap:14px; padding:15px 18px; border-radius:var(--r-m); background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-m); }
.fcard-ic{ display:grid; place-items:center; width:46px; height:46px; border-radius:14px; flex:none; }
.fcard-ic .ico{ width:22px; height:22px; }
.fcard-ic.green{ background:var(--green-50); color:var(--green-700); }
.fcard-ic.gold{ background:var(--gold-100); color:var(--gold-700); }
.fcard-num{ font-family:var(--font-display); font-weight:700; font-size:24px; line-height:1.05; color:var(--ink); font-variant-numeric:tabular-nums; }
.fcard-lab{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--muted); }
.pulse{ position:relative; width:10px; height:10px; border-radius:50%; background:var(--green-600); flex:none; }
.pulse::after{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--green-600); animation:pulse 1.8s var(--ease-out) infinite; }
@keyframes pulse{ 0%{ transform:scale(1); opacity:.6; } 70%{ transform:scale(3); opacity:0; } 100%{ opacity:0; } }

.flake{ position:absolute; z-index:4; pointer-events:none; }
.flake-ticket{ left:-16px; bottom:64px; width:clamp(56px,12vw,82px); animation:float 6s ease-in-out infinite; }
.flake-coin{ right:6%; bottom:112px; width:clamp(38px,8vw,56px); animation:float 5s ease-in-out infinite .8s; }
@keyframes float{ 0%,100%{ transform:translateY(0) rotate(-6deg); } 50%{ transform:translateY(-14px) rotate(4deg); } }

/* ---------- stats strip ---------- */
.stats{ background:var(--green-800); color:#fff; }
.stats-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px; background:rgba(255,255,255,.12); border-radius:var(--r-l); overflow:hidden; }
.stat{ background:var(--green-800); padding:26px clamp(18px,3vw,32px); }
.stat b{ display:block; font-family:var(--font-display); font-weight:700; font-size:clamp(28px,4vw,40px); color:var(--gold-300); line-height:1.05; font-variant-numeric:tabular-nums; }
.stat span{ display:block; margin-top:8px; font-size:14.5px; font-weight:600; color:rgba(255,255,255,.78); }

/* ---------- steps ---------- */
.steps{ display:grid; gap:22px; margin-top:clamp(36px,5vw,56px); }
.step{ position:relative; padding:32px 28px 30px; border-radius:var(--r-l); background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-s); }
.step-ic{ display:grid; place-items:center; width:66px; height:66px; border-radius:50%; background:var(--green-700); color:#fff; box-shadow:0 14px 26px -12px rgba(0,91,41,.7); }
.step-ic .ico{ width:30px; height:30px; }
.step-no{ position:absolute; right:24px; top:22px; font-family:var(--font-display); font-weight:700; font-size:30px; color:var(--green-100); }
.step h3{ margin-top:22px; font-size:21px; }
.step p{ margin-top:10px; color:var(--muted); font-size:15.5px; }
.step-line{ display:none; }

/* ---------- event ---------- */
.event{ background:linear-gradient(180deg,var(--green-50),var(--ground)); }
.event-grid{ display:grid; gap:clamp(30px,5vw,52px); align-items:center; }
.prize{ position:relative; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-m); border:1px solid rgba(255,255,255,.7); }
.prize img{ width:100%; height:auto; }
.prize-badge{ position:absolute; left:20px; top:20px; padding:9px 16px; border-radius:999px; background:var(--gold-500); color:#1c1404; font-size:13px; font-weight:800; letter-spacing:.02em; box-shadow:var(--sh-gold); }
.timeline{ display:grid; gap:0; }
.tl{ display:grid; grid-template-columns:auto 1fr; gap:18px; padding-bottom:26px; }
.tl:last-child{ padding-bottom:0; }
.tl-dot{ position:relative; width:16px; height:16px; border-radius:50%; background:var(--gold-500); box-shadow:0 0 0 5px var(--gold-100); margin-top:5px; }
.tl:not(:last-child) .tl-dot::after{ content:""; position:absolute; left:50%; top:20px; transform:translateX(-50%); width:2px; height:calc(100% + 26px - 16px); background:var(--line-strong); }
.tl h3{ font-size:18px; font-family:var(--font-body); font-weight:700; }
.tl p{ margin-top:5px; color:var(--muted); font-size:14.5px; }
.tl-state{ display:inline-flex; align-items:center; gap:7px; margin-top:9px; font-size:12.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--green-700); }
.tl-state.now::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--green-600); animation:pulse 1.8s var(--ease-out) infinite; }

/* ---------- why ---------- */
.why-grid{ display:grid; gap:20px; margin-top:clamp(34px,4.5vw,52px); }
.why-card{ padding:28px 26px; border-radius:var(--r-l); background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-s); transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.why-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-m); }
.why-ic{ display:grid; place-items:center; width:52px; height:52px; border-radius:16px; background:var(--green-50); color:var(--green-700); }
.why-ic .ico{ width:26px; height:26px; }
.why-card h3{ margin-top:20px; font-size:19px; }
.why-card p{ margin-top:9px; color:var(--muted); font-size:15px; }

/* ---------- faq ---------- */
.faq{ max-width:820px; margin-inline:auto; margin-top:clamp(32px,4vw,48px); display:grid; gap:12px; }
.qa{ border:1px solid var(--line); border-radius:var(--r-m); background:var(--surface); overflow:hidden; }
.qa summary{ display:flex; align-items:center; gap:16px; padding:20px 22px; cursor:pointer; font-weight:700; font-size:16.5px; list-style:none; }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary .ico{ margin-inline-start:auto; width:20px; height:20px; color:var(--gold-600); transition:transform .25s var(--ease-out); flex:none; }
.qa[open] summary .ico{ transform:rotate(180deg); }
.qa p{ padding:0 22px 22px; color:var(--muted); font-size:15.5px; }

/* ---------- final cta ---------- */
.final{ position:relative; overflow:hidden; background:var(--green-800); color:#fff; border-radius:var(--r-xl); padding:clamp(40px,6vw,72px) clamp(26px,5vw,64px); }
.final::before{ content:""; position:absolute; inset:0; background:radial-gradient(560px 320px at 84% 10%, rgba(212,175,55,.28), transparent 68%); pointer-events:none; }
.final h2{ position:relative; color:#fff; font-size:clamp(30px,5vw,50px); max-width:16em; }
.final h2 .gold-text{ color:var(--gold-300); }
.final p{ position:relative; margin-top:18px; color:rgba(255,255,255,.82); font-size:clamp(16px,1.8vw,18px); max-width:40em; }
.final-actions{ position:relative; margin-top:32px; display:flex; flex-wrap:wrap; gap:14px; }
.final-meta{ position:relative; margin-top:26px; display:flex; flex-wrap:wrap; gap:10px 24px; font-size:14px; font-weight:600; color:rgba(255,255,255,.78); }
.final-meta li{ display:flex; align-items:center; gap:8px; }
.final-meta .ico{ width:17px; height:17px; color:var(--gold-300); }

/* ---------- footer ---------- */
.footer{ margin-top:clamp(60px,8vw,100px); border-top:1px solid var(--line); }
.footer-grid{ display:grid; gap:36px; padding-block:clamp(44px,6vw,68px); }
.footer-brand{ max-width:320px; }
.footer-brand img{ height:46px; width:auto; }
.footer-brand p{ margin-top:16px; color:var(--muted); font-size:14.5px; }
.footer h4{ font-family:var(--font-body); font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--green-800); }
.footer ul{ margin-top:16px; display:grid; gap:11px; }
.footer li a, .footer li span{ color:var(--muted); font-size:14.5px; }
.footer li a:hover{ color:var(--green-700); }
.footer-bottom{ border-top:1px solid var(--line); padding-block:22px; display:grid; gap:12px; }
.footer-bottom p{ color:var(--muted); font-size:13px; }
.disclaimer{ margin-top:14px; padding:14px 16px; border-radius:12px; background:var(--gold-100); border:1px solid var(--gold-300); color:#5c4708; font-size:13px; line-height:1.55; }

/* ---------- whatsapp fab & cta buttons ---------- */
.btn-wa-final{ background:#25D366 !important; border:1.5px solid #25D366 !important; color:#002d14 !important; font-weight:700 !important; box-shadow:0 14px 28px -10px rgba(37,211,102,.55) !important; display:inline-flex; align-items:center; gap:9px; }
.btn-wa-final:hover{ background:#1ebc57 !important; border-color:#1ebc57 !important; color:#002d14 !important; transform:translateY(-2px); }
.btn-wa-final .ico{ color:#002d14 !important; }

.fab{ position:fixed; right:20px; bottom:20px; z-index:60; display:inline-flex; align-items:center; gap:10px; padding:13px 20px 13px 16px; border-radius:999px; background:#25D366 !important; color:#002d14 !important; font-weight:800 !important; font-size:15px; border:2px solid #ffffff !important; box-shadow:0 18px 36px -10px rgba(0,45,20,.45), 0 4px 14px rgba(37,211,102,.4) !important; transition:transform .2s var(--ease-out), background-color .2s; }
.fab:hover{ background:#1ebc57 !important; transform:translateY(-3px) scale(1.03); }
.fab .ico{ width:24px; height:24px; color:#002d14 !important; }
.fab span{ display:none; }

/* ---------- modal ---------- */
.modal{ position:fixed; inset:0; z-index:80; display:none; }
.modal.open{ display:grid; }
.modal-scrim{ position:absolute; inset:0; background:rgba(0,29,14,.55); backdrop-filter:blur(3px); }
.modal-panel{ position:relative; margin:auto; width:min(680px,calc(100% - 28px)); max-height:min(82vh,760px); display:grid; grid-template-rows:auto auto minmax(0,1fr); background:var(--surface); border-radius:var(--r-l); overflow:hidden; box-shadow:0 40px 80px -30px rgba(0,20,10,.6); animation:modalIn .28s var(--ease-out); }
@keyframes modalIn{ from{ opacity:0; transform:translateY(16px) scale(.98); } to{ opacity:1; transform:none; } }
.modal-head{ display:flex; align-items:center; gap:14px; padding:22px 24px; border-bottom:1px solid var(--line); }
.modal-head h3{ font-size:22px; }
.modal-head p{ font-size:13.5px; color:var(--muted); margin-top:3px; }
.modal-close{ margin-inline-start:auto; width:42px; height:42px; border-radius:12px; border:1px solid var(--line-strong); background:var(--surface); display:grid; place-items:center; cursor:pointer; }
.modal-close:hover{ background:var(--green-50); }
.modal-search{ padding:16px 24px; border-bottom:1px solid var(--line); }
.field{ display:grid; gap:7px; }
.field label{ font-size:13px; font-weight:700; color:var(--ink-soft); }
.field .control{ display:flex; align-items:center; gap:10px; border:1.5px solid var(--line-strong); border-radius:12px; padding:0 14px; background:var(--ground); }
.field .control:focus-within{ border-color:var(--green-600); background:#fff; }
.field .control .ico{ color:var(--muted); }
.field input{ flex:1; border:0; background:transparent; padding:12px 0; font:inherit; color:var(--ink); outline:none; }
.modal-list{ overflow-y:auto; padding:8px 12px 18px; }
.plist-row{ display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; padding:14px 12px; border-bottom:1px solid var(--line); }
.plist-row:last-child{ border-bottom:0; }
.plist-name{ font-weight:700; font-size:15px; }
.plist-sub{ font-size:13px; color:var(--muted); margin-top:3px; display:flex; align-items:center; gap:6px; }
.plist-sub .ico{ width:14px; height:14px; }
.ticket-pill{ font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--green-800); background:var(--green-50); border:1px solid var(--green-100); padding:6px 12px; border-radius:999px; white-space:nowrap; }
.modal-note{ padding:14px 24px; background:var(--gold-100); color:#5c4708; font-size:12.5px; }
.empty{ padding:40px 24px; text-align:center; color:var(--muted); }

/* ---------- reveal ---------- */
html.js .reveal{ opacity:0; transform:translateY(20px); }
html.js .reveal.in{ opacity:1; transform:none; transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); }

/* ---------- document / terms page styles ---------- */
.doc-hero{ position:relative; overflow:hidden; background:var(--green-800); color:#fff; }
.doc-hero::before{ content:""; position:absolute; inset:0; background:radial-gradient(560px 340px at 86% 6%, rgba(212,175,55,.26), transparent 68%); pointer-events:none; }
.doc-hero .wrap{ position:relative; padding-block:clamp(44px,6vw,76px); }
.doc-hero h1{ margin-top:18px; color:#fff; font-size:clamp(34px,6vw,58px); letter-spacing:-.03em; }
.doc-hero .subtitle{ margin-top:14px; color:rgba(255,255,255,.86); font-size:clamp(16px,2vw,20px); max-width:44em; }
.doc-hero .intro{ margin-top:18px; color:rgba(255,255,255,.74); font-size:15.5px; max-width:52em; }
.doc-meta{ margin-top:26px; display:flex; flex-wrap:wrap; gap:10px; }
.doc-meta span{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); font-size:13px; font-weight:600; color:rgba(255,255,255,.92); }
.doc-meta .ico{ width:16px; height:16px; color:var(--gold-300); }

.summary{ margin-top:-34px; position:relative; z-index:2; }
.summary-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); box-shadow:var(--sh-m); padding:clamp(24px,3.4vw,36px); }
.summary-card h2{ font-size:clamp(20px,2.6vw,26px); display:flex; align-items:center; gap:12px; }
.summary-card h2 .ico{ width:24px; height:24px; color:var(--gold-600); }
.summary-list{ margin-top:20px; display:grid; gap:14px; }
.summary-list li{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; }
.summary-list .num{ display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--green-700); color:#fff; font-weight:800; font-size:13px; margin-top:2px; }
.summary-list p{ font-size:15.5px; color:var(--ink-soft); }
.summary-list strong{ color:var(--ink); }

.doc-note{ margin-top:20px; display:grid; grid-template-columns:auto 1fr; gap:14px; padding:18px 20px; border-radius:var(--r-m); background:var(--gold-100); border:1px solid var(--gold-300); color:#5c4708; }
.doc-note .ico{ width:22px; height:22px; color:var(--gold-700); margin-top:2px; }
.doc-note strong{ display:block; }
.doc-note p{ font-size:14px; margin-top:5px; line-height:1.6; }

.doc-layout{ display:grid; gap:36px; padding-block:clamp(40px,6vw,72px); }

.toc{ border:1px solid var(--line); border-radius:var(--r-m); background:var(--surface); padding:20px; }
.toc h2{ font-family:var(--font-body); font-size:12.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--green-700); }
.toc ol{ margin-top:14px; display:grid; gap:2px; list-style:none; max-height:280px; overflow-y:auto; padding-right:4px; }
.toc a{ display:flex; gap:10px; padding:8px 10px; border-radius:10px; font-size:14px; font-weight:600; color:var(--ink-soft); transition:background-color .16s, color .16s; }
.toc a:hover{ background:var(--green-50); color:var(--green-700); }
.toc a .n{ color:var(--gold-700); font-variant-numeric:tabular-nums; font-weight:800; min-width:1.6em; }

.doc-body{ counter-reset:sec; min-width:0; }
.clause{ counter-increment:sec; scroll-margin-top:96px; }
.clause + .clause{ margin-top:clamp(36px,5vw,56px); }
.clause > h2{ font-size:clamp(21px,2.8vw,28px); display:flex; align-items:baseline; gap:12px; padding-bottom:14px; border-bottom:2px solid var(--green-100); }
.clause > h2::before{ content:counter(sec) "."; color:var(--gold-700); font-variant-numeric:tabular-nums; flex:none; }
.clause > h2 .anchor{ margin-inline-start:auto; font-family:var(--font-body); font-size:13px; font-weight:700; color:var(--muted); opacity:0; transition:opacity .16s; }
.clause > h2:hover .anchor, .clause > h2 .anchor:focus{ opacity:1; }

.points{ margin-top:20px; display:grid; gap:14px; counter-reset:pt; }
.points > li{ counter-increment:pt; position:relative; padding-left:62px; font-size:15.5px; line-height:1.68; color:var(--ink-soft); }
.points > li::before{ content:counter(sec) "." counter(pt); position:absolute; left:0; top:1px; font-weight:800; color:var(--green-700); font-variant-numeric:tabular-nums; font-size:14.5px; }
.points strong{ color:var(--ink); }

.sub{ margin-top:12px; display:grid; gap:10px; counter-reset:sub; list-style:none; padding:0; }
.sub > li{ counter-increment:sub; position:relative; padding-left:40px; font-size:15px; color:var(--ink-soft); }
.sub > li::before{ content:counter(sub, lower-roman) "."; position:absolute; left:0; top:0; font-weight:700; color:var(--gold-700); font-variant-numeric:tabular-nums; }

.callout{ margin-top:22px; border-radius:var(--r-m); padding:22px 24px; border:1px solid; }
.callout-head{ display:flex; align-items:center; gap:12px; font-weight:800; font-size:15px; letter-spacing:.02em; text-transform:uppercase; }
.callout-head .ico{ width:22px; height:22px; }
.callout p{ margin-top:12px; font-size:15px; line-height:1.65; }
.callout--danger{ background:var(--gold-100); border-color:var(--gold-300); }
.callout--danger .callout-head{ color:var(--gold-700); }
.callout--danger p{ color:#5c4708; }
.callout--important{ background:var(--green-800); border-color:var(--green-900); color:#fff; }
.callout--important .callout-head{ color:var(--gold-300); }
.callout--important p{ color:rgba(255,255,255,.9); }
.callout--important strong{ color:#fff; }
.callout--info{ background:var(--green-50); border-color:var(--green-100); }
.callout--info .callout-head{ color:var(--green-700); }
.callout--info p{ color:var(--ink-soft); }

.ph{ color:var(--gold-700); background:var(--gold-100); border:1px dashed var(--gold-300); border-radius:6px; padding:1px 7px; font-weight:700; font-size:.92em; white-space:nowrap; }

.doc-sign{ margin-top:clamp(44px,6vw,64px); padding:26px 28px; border-radius:var(--r-m); background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-s); }
.doc-sign h3{ font-size:19px; }
.doc-sign p{ margin-top:10px; color:var(--muted); font-size:14.5px; }
.doc-actions{ margin-top:20px; display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- referral trust banner ---------- */
.referral-banner{ background:var(--green-950); border-bottom:1px solid rgba(212,175,55,.35); color:#fff; font-size:13px; padding:10px 0; position:relative; z-index:45; }
.referral-banner-inner{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px 16px; text-align:center; }
.referral-banner-badge{ display:inline-flex; align-items:center; gap:6px; color:var(--gold-300); font-weight:700; }
.referral-banner-badge .ico{ width:16px; height:16px; color:var(--gold-500); flex-shrink:0; }
.referral-banner-agent{ display:inline-flex; align-items:center; gap:8px; color:#fff; }
.referral-banner-agent strong{ color:#fff; }
.referral-banner-agent .agent-tier-pill{ display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; background:rgba(212,175,55,.18); border:1px solid var(--gold-500); color:var(--gold-300); font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; }

/* ---------- responsive ---------- */
@media (min-width:640px){
  .stats-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .float-cards{ grid-template-columns:1fr 1fr; }
  .steps{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .why-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fab span{ display:inline; }
  .footer-grid{ grid-template-columns:1.4fr 1fr 1fr; }
  .summary-list{ grid-template-columns:1fr; }
}
@media (min-width:900px){
  .hero-grid{ grid-template-columns:1.02fr 1fr; gap:clamp(40px,4vw,72px); }
  .event-grid{ grid-template-columns:1.05fr .95fr; }
  .why-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .footer-bottom{ grid-template-columns:1fr auto; align-items:center; }
}
@media (min-width:960px){
  .doc-layout{ grid-template-columns:272px 1fr; gap:clamp(36px,5vw,64px); align-items:start; }
  .toc{ position:sticky; top:96px; }
  .toc ol{ max-height:calc(100vh - 260px); }
}
@media (min-width:1024px){
  .nav-links{ display:flex; }
  .nav-toggle{ display:none; }
  .mobile-menu{ display:none !important; }
  .hero-visual{ padding-bottom:96px; }
  .float-cards{ position:absolute; inset:0; margin:0; display:block; pointer-events:none; }
  .fcard{ position:absolute; pointer-events:auto; width:min(252px,74%); }
  .fcard.live{ left:-26px; bottom:132px; }
  .fcard.time{ right:-20px; bottom:28px; }
  .flake-ticket{ left:-26px; top:12%; bottom:auto; }
  .flake-coin{ right:auto; left:20%; bottom:-6px; }
  .wheel-wrap{ right:-30px; top:-34px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html.js .reveal{ opacity:1; transform:none; }
  .wheel{ animation:none; }
}