/* =========================================================
   ETH Summit 2026 · Landing 02 · mobile
   invitation + prize draw · deep space blue / violet
   ========================================================= */

:root{
  --bg:      #05060e;
  --bg-2:    #090b18;
  --eth:     #627eea;
  --eth-l:   #a8b6ff;
  --eth-x:   #d7deff;
  --eth-d:   #2c3796;
  --violet:  #a78bfa;
  --cyan:    #22d3ee;
  --ink:     #eef0fb;
  --muted:   #a6adc9;
  --dim:     #7f87a8;
  --line:    rgba(120,140,255,.22);
  --line-2:  rgba(255,255,255,.07);
  --serif:   "Playfair Display","Didot","Bodoni 72","Times New Roman",Georgia,serif;
  --sans:    -apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",Arial,sans-serif;
  --mono:    ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  --pad:     20px;
  --card-w:  min(68vw,264px);
}

*,*::before,*::after{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }
html{ background:#000; -webkit-text-size-adjust:100%; }

body{
  font-family:var(--sans);
  color:var(--ink);
  background:
    radial-gradient(120% 52% at 50% -10%, rgba(98,126,234,.30), transparent 62%),
    radial-gradient(78% 42% at 104% 22%, rgba(167,139,250,.20), transparent 64%),
    radial-gradient(70% 40% at -6% 62%, rgba(34,211,238,.12), transparent 66%),
    linear-gradient(180deg,#080a16 0%, var(--bg) 46%, #04050c 100%);
  background-attachment:fixed;
  min-height:100vh; min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* subtle grid */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(120,140,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,140,255,.055) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(90% 62% at 50% 0%, #000 12%, transparent 78%);
  -webkit-mask-image:radial-gradient(90% 62% at 50% 0%, #000 12%, transparent 78%);
}

img{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer; }

/* ---------- Page shell ---------- */
.page{
  position:relative; z-index:1;
  padding:0 var(--pad) calc(180px + env(safe-area-inset-bottom));
  max-width:560px; margin:0 auto;
}

/* ---------- Top bar ---------- */
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 0 4px; }
.brand{ display:flex; align-items:center; gap:9px; min-width:0; }
.brand-mark{ display:flex; filter:drop-shadow(0 0 12px rgba(120,150,255,.55)); }
.brand-text{ display:flex; flex-direction:column; min-width:0; }
.brand-text b{ font-size:13px; font-weight:800; letter-spacing:.14em; color:#eef1ff; }
.brand-text i{ margin-top:5px; font-style:normal; font-size:7.4px; letter-spacing:.26em; color:#9aa3c7; }

.live-tag{
  display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
  height:26px; padding:0 11px;
  font-size:10px; letter-spacing:.08em; color:var(--eth-l);
  border:1px solid var(--line); border-radius:999px;
  background:rgba(98,126,234,.10);
  white-space:nowrap;
}
.live-tag .dot{
  width:5px; height:5px; border-radius:50%; background:#4ade80;
  box-shadow:0 0 8px #4ade80; animation:pulse 1.9s ease-in-out infinite;
}

/* ---------- Ticker ---------- */
.ticker{
  margin:14px calc(var(--pad) * -1) 0;
  padding:7px 0; overflow:hidden;
  border-top:1px solid rgba(120,140,255,.16);
  border-bottom:1px solid rgba(120,140,255,.16);
  background:linear-gradient(90deg, rgba(98,126,234,.09), rgba(167,139,250,.03), rgba(98,126,234,.09));
}
.ticker-track{
  display:flex; align-items:center; gap:12px;
  width:max-content; white-space:nowrap;
  font-size:10.5px; letter-spacing:.05em;
  animation:ticker 26s linear infinite;
}
.ticker-track span{ color:#bcc6ef; }
.ticker-track i{ font-style:normal; color:rgba(150,170,255,.5); }

/* ---------- Hero ---------- */
.hero{ position:relative; padding:26px 0 0; overflow:hidden; animation:fadeUp .8s .05s ease both; }
.hero-glow{
  position:absolute; z-index:0; top:-14px; right:-30px;
  width:158px; height:158px; pointer-events:none;
  opacity:.11; transform:rotate(-9deg);
  filter:blur(.4px) drop-shadow(0 0 42px rgba(98,126,234,.75));
}
.hero-glow svg{ width:100%; height:100%; }
.hero > *:not(.hero-glow){ position:relative; z-index:1; }

.kicker{
  display:flex; align-items:center; gap:7px;
  margin:0 0 12px; font-size:10.5px; letter-spacing:.17em;
  color:#b9c4f2; text-transform:uppercase;
}
.k-dot{
  width:5px; height:5px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 10px var(--cyan);
  animation:pulse 2.1s ease-in-out infinite;
}

.prize-label{
  display:inline-flex; align-items:center; gap:7px;
  margin:0 0 8px; padding:4px 10px;
  border-radius:999px;
  font-size:9.5px; font-weight:700; letter-spacing:.16em;
  color:#ffd479;
  border:1px solid rgba(255,212,121,.38);
  background:linear-gradient(100deg, rgba(255,212,121,.16), rgba(255,212,121,.05));
  box-shadow:0 0 22px -8px rgba(255,205,90,.8);
}
.prize-label i{ width:5px; height:5px; border-radius:50%; background:#ffd479; box-shadow:0 0 8px #ffd479; animation:pulse 1.9s ease-in-out infinite; }

.hero-prize{ display:flex; align-items:flex-end; gap:11px; margin:0; line-height:.84; font-weight:400; }
.hero-prize .cur{
  font-family:var(--serif); font-size:86px; font-weight:600; letter-spacing:-.04em;
  color:transparent;
  background:linear-gradient(168deg,#ffffff 0%,#e4e9ff 20%,#a8b6ff 52%,#7d8df0 82%,#627eea 100%);
  -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 4px 10px rgba(170,190,255,.55)) drop-shadow(0 12px 40px rgba(98,126,234,.65));
}
.hero-prize .unit{
  font-family:var(--serif); font-size:20px; letter-spacing:.15em; font-weight:600;
  color:#dfe6ff; padding-bottom:14px;
  text-shadow:0 0 18px rgba(168,182,255,.5);
}

.hero-lead{
  margin:14px 0 0; font-size:12px; font-weight:700;
  letter-spacing:.20em; color:#dfe5ff; text-transform:uppercase;
}

.desc{ margin:13px 0 0; font-size:12px; line-height:1.74; color:#bec5e0; letter-spacing:.01em; }
.desc b{ color:#dbe2ff; font-weight:700; }

/* Countdown */
.timer{
  display:block; width:100%; margin-top:18px;
  padding:12px 13px 13px;
  border:1px solid var(--line); border-radius:15px;
  background:linear-gradient(180deg, rgba(98,126,234,.11), rgba(0,0,0,.38));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 16px 40px -26px rgba(98,126,234,.95);
}
.timer-label{
  display:flex; align-items:center; gap:7px;
  margin:0 0 10px; font-size:9px; letter-spacing:.18em; color:#a4aed2;
}
.timer-label::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, rgba(150,170,255,.22), transparent); }
.tgrid{ display:flex; align-items:stretch; gap:6px; }
.tcell{
  flex:1; min-width:0;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:8px 2px 7px; border-radius:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  border:1px solid rgba(150,170,255,.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.tcell b{
  font-family:var(--serif); font-size:23px; line-height:1; font-weight:500;
  color:#f2f5ff; font-variant-numeric:tabular-nums; letter-spacing:.01em;
  text-shadow:0 0 18px rgba(150,175,255,.65);
}
.tcell span{ font-size:7.4px; letter-spacing:.13em; color:#aab4d4; }
.tgrid > i{
  align-self:center; font-style:normal; font-size:12px; line-height:1;
  color:#7b87b8; transform:translateY(-3px);
}

/* Social proof */
.proof{ display:flex; align-items:center; gap:8px; margin-top:16px; font-size:10.5px; color:#aab3d4; letter-spacing:.02em; }
.proof b{ color:#dde3ff; font-family:var(--serif); font-size:12.5px; letter-spacing:.03em; }
.avs{ display:flex; }
.avs i{
  width:20px; height:20px; margin-left:-6px;
  display:flex; align-items:center; justify-content:center;
  font-style:normal; font-size:7.5px; font-weight:700; color:#0a0d1c; letter-spacing:.02em;
  border-radius:50%; border:1.4px solid #070a14;
  background:linear-gradient(140deg,#d7deff,#8ea1f5);
}

/* ---------- Invitation ticket ---------- */
.sec-tag{
  display:flex; align-items:center; gap:9px;
  margin:0 0 12px; font-size:9.5px; font-weight:700;
  letter-spacing:.2em; color:#c3cdec; text-transform:uppercase;
}
.sec-tag i{
  font-family:var(--mono); font-style:normal; font-size:8.5px;
  letter-spacing:.1em; color:#ffd479;
}
.sec-tag span{ flex:1; height:1px; background:linear-gradient(90deg, rgba(150,170,255,.30), rgba(150,170,255,.02)); }

.invite-wrap{ margin-top:32px; animation:fadeUp .8s .1s ease both; }

.invite{
  position:relative; overflow:hidden;
  border-radius:18px;
  padding:1px;
  background:linear-gradient(150deg, rgba(190,205,255,.66), rgba(120,140,255,.16) 34%, rgba(167,139,250,.5) 62%, rgba(120,140,255,.18));
  box-shadow:0 22px 60px -30px rgba(98,126,234,.9), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.invite::after{
  content:""; position:absolute; inset:1px; z-index:2; pointer-events:none;
  border-radius:17px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), inset 0 1px 0 rgba(255,255,255,.09);
}
.invite-holo{
  position:absolute; inset:-40%; z-index:0; pointer-events:none;
  background:conic-gradient(from 0deg,
    rgba(98,126,234,.00) 0deg, rgba(120,150,255,.34) 58deg, rgba(167,139,250,.28) 118deg,
    rgba(34,211,238,.20) 178deg, rgba(98,126,234,.00) 250deg, rgba(167,139,250,.26) 320deg, rgba(98,126,234,.00) 360deg);
  animation:holo 9s linear infinite;
  opacity:.55;
}
.invite-top,.invite-bottom{ position:relative; z-index:1; background:linear-gradient(180deg, rgba(12,15,32,.94), rgba(8,10,22,.97)); }
.invite-top{ border-radius:17px 17px 0 0; padding:16px 26px 14px 16px; }
.admit-strip{
  position:absolute; z-index:3; top:9px; right:0; bottom:9px; width:16px;
  display:flex; align-items:center; justify-content:center;
  font-size:6.6px; font-weight:700; letter-spacing:.30em;
  color:rgba(214,225,255,.74);
  writing-mode:vertical-rl;
  border-left:1px dashed rgba(160,175,255,.20);
  background:linear-gradient(180deg, rgba(255,255,255,.02), transparent);
  pointer-events:none;
}

.invite-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.invite-label{ font-size:9px; letter-spacing:.24em; color:#9fabe0; }
.invite-badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 8px; border-radius:999px;
  font-size:8.5px; letter-spacing:.10em; color:#9df3c0;
  border:1px solid rgba(74,222,128,.34); background:rgba(74,222,128,.10);
  white-space:nowrap;
}
.invite-badge i{ width:4px; height:4px; border-radius:50%; background:#4ade80; box-shadow:0 0 7px #4ade80; }

.invite-main{ display:flex; align-items:center; gap:12px; margin-top:14px; }
.invite-eth{ width:42px; height:42px; flex:0 0 auto; filter:drop-shadow(0 0 16px rgba(120,150,255,.65)); }
.invite-title h2{
  margin:0; font-size:15px; font-weight:800; letter-spacing:.10em; color:#f2f5ff;
}
.invite-title p{ margin:5px 0 0; font-size:10px; color:#aab3d4; letter-spacing:.03em; }

.invite-tear{ position:relative; z-index:2; display:flex; align-items:center; height:18px; background:linear-gradient(180deg, rgba(12,15,32,.96), rgba(8,10,22,.97)); }
.tear-line{ flex:1; height:1px; margin:0 12px;
  background-image:linear-gradient(90deg, rgba(160,175,255,.5) 0 5px, transparent 5px 10px);
  background-size:10px 1px;
}
.tear-l,.tear-r{
  width:9px; height:9px; position:absolute; top:50%; margin-top:-4.5px;
  border-radius:50%; background:#04050c;
}
.tear-l{ left:-5px; box-shadow:inset -1px 0 0 rgba(160,175,255,.3); }
.tear-r{ right:-5px; box-shadow:inset 1px 0 0 rgba(160,175,255,.3); }

.invite-bottom{ border-radius:0 0 17px 17px; padding:14px 26px 16px 16px; }
.invite-fields{ display:flex; gap:10px; }
.ifield{ flex:1; min-width:0; }
.ifield span{ display:block; font-size:8px; letter-spacing:.18em; color:#98a2c8; }
.ifield b{ display:block; margin-top:5px; font-size:12px; letter-spacing:.06em; color:#e6eaff; font-weight:700; }
.ifield b.pend{ color:#a8b4e0; font-size:10.5px; letter-spacing:.08em; white-space:nowrap; }

.invite-code{ margin-top:14px; padding-top:12px; border-top:1px solid rgba(120,140,255,.14); }
.invite-code span{ display:block; font-size:8px; letter-spacing:.18em; color:#98a2c8; }
.invite-code b{
  display:block; margin-top:5px;
  font-family:var(--mono); font-size:15px; letter-spacing:.12em; color:#cfd8ff;
  text-shadow:0 0 16px rgba(150,175,255,.5);
}
.invite-bars{
  margin-top:12px; height:22px;
  background-image:repeating-linear-gradient(90deg, rgba(190,205,255,.55) 0 1.5px, transparent 1.5px 4px, rgba(190,205,255,.3) 4px 5px, transparent 5px 9px);
  opacity:.26;
  mask-image:linear-gradient(90deg, #000, #000 62%, transparent);
  -webkit-mask-image:linear-gradient(90deg, #000, #000 62%, transparent);
}
.invite-hint{
  display:flex; align-items:center; gap:6px; justify-content:center;
  margin:10px 0 0; font-size:9.5px; color:#8d97bd; letter-spacing:.02em;
}
.invite-hint i{ width:4px; height:4px; border-radius:50%; background:#627eea; box-shadow:0 0 8px #627eea; }

/* ---------- Prize showcase ---------- */
.showcase{ margin-top:36px; }
.showcase-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:0 0 12px; }
.showcase-head h2{
  margin:0; font-size:11.5px; font-weight:700; letter-spacing:.16em; color:#dfe5ff; text-transform:uppercase;
}
.showcase-head .cn{ font-family:var(--serif); font-size:14px; color:#fff; letter-spacing:.02em; }
.pool-sum{
  display:block; margin-top:5px; font-style:normal;
  font-family:var(--sans); font-size:9.5px; font-weight:600;
  letter-spacing:.12em; color:#ffd479; text-transform:uppercase;
}
.hint{ font-size:10px; letter-spacing:.05em; color:#a2acd0; display:inline-flex; align-items:center; gap:3px; white-space:nowrap; }
.hint b{ font-family:var(--serif); font-size:12.5px; font-weight:500; color:#e6eaff; letter-spacing:.04em; }
.hint i{ font-style:normal; color:#8790b4; }
.hint em{ font-style:normal; margin-left:4px; color:#8f99bf; }
.hint span{ font-family:var(--serif); font-size:11.5px; color:#9aa4cb; }

.stage{ position:relative; }

.swiper{
  display:flex; gap:12px;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:6px calc((100% - var(--card-w)) / 2 + var(--pad)) 10px;
  margin:0 calc(var(--pad) * -1);
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.swiper::-webkit-scrollbar{ display:none; }

.card{
  position:relative; flex:0 0 var(--card-w); width:var(--card-w);
  scroll-snap-align:center;
  border-radius:16px; overflow:hidden;
  padding:18px 16px 16px;
  background:linear-gradient(180deg, rgba(18,22,44,.95), rgba(9,11,24,.98));
  border:1px solid rgba(120,140,255,.18);
  transform-origin:center 60%;
  will-change:transform,opacity;
  display:flex; flex-direction:column;
}
.card-glow{
  position:absolute; inset:-1px; border-radius:17px; pointer-events:none;
  background:radial-gradient(72% 58% at 50% -12%, var(--tier-a, rgba(98,126,234,.5)), transparent 70%);
  opacity:.9;
}
.card > *{ position:relative; z-index:1; }

.tier-legend{ border-color:rgba(255,212,121,.36); --tier-a:rgba(255,205,90,.62); --tier:#ffd479; }
.tier-epic{ border-color:rgba(167,139,250,.34); --tier-a:rgba(167,139,250,.55); --tier:#b79bfb; }
.tier-rare{ border-color:rgba(96,165,250,.32); --tier-a:rgba(96,165,250,.5); --tier:#8ab8fb; }
.tier-uncommon{ border-color:rgba(34,211,238,.30); --tier-a:rgba(34,211,238,.45); --tier:#6ee0ee; }
.tier-common{ border-color:rgba(148,163,184,.28); --tier-a:rgba(148,163,184,.4); --tier:#b3bdd1; }

.tier-tag{
  align-self:flex-start;
  padding:3px 8px; border-radius:4px;
  font-size:8.2px; letter-spacing:.16em; font-weight:700;
  color:var(--tier);
  border:1px solid rgba(160,175,255,.34);
  border-color:color-mix(in srgb, var(--tier) 42%, transparent);
  background:rgba(160,175,255,.10);
  background:color-mix(in srgb, var(--tier) 12%, transparent);
}
.card-icon{
  position:relative;
  margin:18px 0 14px;
  width:56px; height:56px; color:var(--tier);
  filter:drop-shadow(0 0 18px rgba(150,175,255,.45));
  filter:drop-shadow(0 0 18px color-mix(in srgb, var(--tier) 55%, transparent));
}
.card-icon::before{
  content:""; position:absolute; z-index:0;
  left:-11px; top:-11px; right:-11px; bottom:-11px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 46%, currentColor, transparent 66%);
  opacity:.17;
}
.card-icon svg{ position:relative; z-index:1; width:100%; height:100%; }
.card-icon.icon-hw,.card-icon.icon-merch{ width:48px; height:48px; }

.card h3{
  margin:0; font-family:var(--serif); font-size:23px; font-weight:500;
  letter-spacing:.01em; color:#f2f5ff;
  font-variant-numeric:tabular-nums;
}
.card-note{ margin:6px 0 0; font-size:10.5px; line-height:1.5; color:#a8b0d0; }

.card-foot{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-top:16px; padding-top:12px;
  border-top:1px solid rgba(120,140,255,.14);
}
.odds{ font-family:var(--mono); font-size:9px; letter-spacing:.06em; color:#9aa4cb; }
.winners{
  flex:0 0 auto; padding:3px 7px; border-radius:4px;
  font-size:9px; letter-spacing:.03em;
  color:var(--tier);
  border:1px solid rgba(160,175,255,.3);
  border-color:color-mix(in srgb, var(--tier) 34%, transparent);
  background:rgba(160,175,255,.08);
  background:color-mix(in srgb, var(--tier) 10%, transparent);
  white-space:nowrap;
}

/* ---------- Arrows ---------- */
.nav{
  position:absolute; z-index:6; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#dbe2ff;
  border:1px solid rgba(150,170,255,.34);
  background:radial-gradient(circle at 50% 30%, rgba(40,50,96,.92), rgba(10,13,28,.94));
  box-shadow:0 10px 26px -12px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.03) inset;
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.nav svg{ width:16px; height:16px; }
.nav-prev{ left:-6px; }
.nav-next{ right:-6px; }
.nav:active{ transform:translateY(-50%) scale(.94); }
.nav::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid rgba(150,170,255,.16);
  animation:halo 2.6s ease-in-out infinite;
}
.nav-prev svg{ animation:nudgeL 2.4s ease-in-out infinite; }
.nav-next svg{ animation:nudgeR 2.4s ease-in-out infinite; }

/* dots */
.dots{ display:flex; align-items:center; justify-content:center; gap:5px; margin-top:4px; min-height:8px; }
.dots i{
  width:5px; height:5px; border-radius:99px;
  background:rgba(160,175,255,.24);
  transition:width .3s ease, background .3s ease;
}
.dots i.on{ width:20px; background:linear-gradient(90deg,#8ea1f5,#d7deff); }

/* ---------- Perks ---------- */
.perks{
  display:flex; margin:32px 0 0; padding:17px 0; list-style:none;
  border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
}
.perks li{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:7px;
  font-size:10px; letter-spacing:.01em; color:#b0b8d6; text-align:center; line-height:1.35;
}
.perks li + li{ border-left:1px solid var(--line-2); }
.perks svg{ color:#8ea1f5; }

/* ---------- Stock ---------- */
.stock{ margin-top:20px; }
.stock-row{ display:flex; align-items:baseline; justify-content:space-between; font-size:11px; color:#aab3d4; letter-spacing:.01em; }
.stock-row b{ color:#e6eaff; font-family:var(--serif); font-size:13px; letter-spacing:.03em; }
.stock-left b{ color:#ffcf7a; }
.bar{ position:relative; height:5px; margin-top:10px; border-radius:99px; overflow:hidden; background:rgba(255,255,255,.07); }
.bar i{
  position:absolute; inset:0 auto 0 0; width:0; border-radius:99px;
  background:linear-gradient(90deg,#2c3796,#627eea 52%,#c7d2ff);
  box-shadow:0 0 16px rgba(98,126,234,.7);
  transition:width 1.6s cubic-bezier(.22,1,.36,1);
}
.bar i::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation:flow 2.4s linear infinite;
}

.legal{ margin:16px 0 0; font-size:10px; line-height:1.68; color:#b0b8d6; }
.foot{ margin:20px 0 0; text-align:center; font-family:var(--serif); font-size:9px; letter-spacing:.22em; color:#7b83a6; }

/* ---------- Social proof toast ---------- */
.toast{
  position:fixed; z-index:35; left:50%;
  bottom:calc(168px + env(safe-area-inset-bottom));
  transform:translate(-50%, 14px);
  display:flex; align-items:center; gap:9px;
  max-width:min(330px, calc(100% - 40px));
  padding:9px 13px 9px 9px;
  border-radius:12px;
  border:1px solid rgba(150,170,255,.22);
  background:linear-gradient(180deg, rgba(20,25,48,.96), rgba(8,10,22,.98));
  box-shadow:0 18px 44px -20px rgba(0,0,0,.95);
  opacity:0; pointer-events:none;
  transition:opacity .34s ease, transform .34s ease;
}
.toast.show{ opacity:1; transform:translate(-50%, 0); }
.toast-av{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:8.5px; font-weight:700; color:#0a0d1c; letter-spacing:.02em;
  background:linear-gradient(140deg,#d7deff,#8ea1f5);
}
.toast-body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.toast-body b{ font-size:10.5px; color:#eef1ff; font-weight:700; }
.toast-body span{ font-size:10px; color:#9aa3c7; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- Sticky CTA ---------- */
.cta-bar{
  position:fixed; z-index:40; left:0; right:0; bottom:0;
  padding:9px var(--pad) calc(9px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(5,6,14,0), rgba(5,6,14,.82) 42%, rgba(4,5,12,.98));
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.cta-bar > *{ max-width:560px; margin-left:auto; margin-right:auto; }

.btn-main{
  position:relative; display:block; width:100%; min-height:54px;
  padding:8px 16px 9px;
  border-radius:14px; overflow:hidden;
  background:linear-gradient(100deg,#8ea1f5 0%,#c7d2ff 26%,#627eea 62%,#8b7df0 100%);
  box-shadow:0 14px 34px -14px rgba(98,126,234,.95), inset 0 1px 0 rgba(255,255,255,.45);
  color:#080b1a;
  transition:transform .16s ease;
}
.btn-main::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 34%, rgba(255,255,255,.55) 48%, transparent 62%);
  transform:translateX(-120%);
  animation:btnShine 4.2s 1s ease-in-out infinite;
}
.btn-main:active{ transform:scale(.985); }
.btn-main-txt{
  position:relative; z-index:1;
  display:block; font-size:15.5px; font-weight:800; letter-spacing:.02em; color:#080b1a;
}
.btn-main-sub{
  position:relative; z-index:1;
  display:block; margin-top:3px;
  font-size:10px; font-weight:500; letter-spacing:.01em; color:rgba(8,11,26,.8);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.btn-main-sub b{ font-weight:800; }
.btn-main-sub i{ font-style:normal; margin:0 5px; opacity:.65; }

.btn-ghost{
  display:flex; align-items:center; justify-content:center; gap:6px;
  width:100%; height:30px; margin-top:6px;
  font-size:11.5px; font-weight:600; letter-spacing:.10em; color:#b6c0e6;
  border:0; border-radius:10px; background:transparent;
  transition:color .2s ease, background .2s ease;
}
.btn-ghost svg{ opacity:.75; }
.btn-ghost:active{ color:#e2e8ff; background:rgba(150,170,255,.09); }

/* ---------- Apply sheet ---------- */
.sheet{ position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end; justify-content:center; visibility:hidden; }
.sheet.open{ visibility:visible; }
.sheet-mask{ position:absolute; inset:0; background:rgba(2,3,9,.76); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); opacity:0; transition:opacity .28s ease; }
.sheet.open .sheet-mask{ opacity:1; }
.sheet-panel{
  position:relative; z-index:1; width:100%; max-width:560px;
  max-height:92dvh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:22px var(--pad) calc(22px + env(safe-area-inset-bottom));
  border-radius:22px 22px 0 0;
  border-top:1px solid rgba(150,170,255,.26);
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(98,126,234,.20), transparent 62%),
    linear-gradient(180deg,#0c1024,#07090f 60%);
  box-shadow:0 -20px 60px -20px rgba(0,0,0,.95);
  transform:translateY(100%);
  transition:transform .34s cubic-bezier(.22,1,.36,1);
}
.sheet.open .sheet-panel{ transform:translateY(0); }
.sheet-x{
  position:absolute; top:14px; right:14px;
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; color:#aab3d4;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
}
.sheet-head{ padding-right:34px; }
.sheet.is-done .sheet-head{ display:none; }
.sheet.is-done .success{ padding-top:26px; }
.sheet-kicker{ margin:0 0 10px; font-size:9.5px; letter-spacing:.22em; color:#9fb0e8; }
.sheet-head h2{
  margin:0; font-family:var(--serif); font-size:25px; font-weight:500; line-height:1.22; color:#f4f6ff;
}
.sheet-head h2 em{
  font-style:normal; color:transparent;
  background:linear-gradient(100deg,#e8ecff,#a8b6ff 60%,#8b7df0);
  -webkit-background-clip:text; background-clip:text;
}
.sheet-sub{ margin:9px 0 0; font-size:11px; line-height:1.6; color:#9aa3c7; }

.form{ margin-top:18px; }
.field{ display:block; margin-bottom:12px; }
.field-label{
  display:block; margin-bottom:8px;
  font-size:9.5px; letter-spacing:.14em; color:#a8b4e0; text-transform:uppercase;
}
.field-label .opt{ font-style:normal; letter-spacing:.04em; text-transform:none; color:#98a2c8; }
.field input{
  width:100%; height:48px; padding:0 14px;
  font-size:14px; color:#eef1ff;
  border-radius:11px;
  border:1px solid rgba(150,170,255,.22);
  background:rgba(255,255,255,.045);
  outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.field input::placeholder{ color:#6f7899; }
.field input:focus{
  border-color:rgba(150,170,255,.6);
  box-shadow:0 0 0 3px rgba(98,126,234,.16);
  background:rgba(255,255,255,.07);
}
.form-err{ margin:0 0 10px; min-height:0; font-size:10.5px; color:#ff9c96; letter-spacing:.01em; }
.form-err:empty{ display:none; }

.agree{ display:flex; align-items:flex-start; gap:8px; margin-top:6px; font-size:10.5px; line-height:1.5; color:#98a1c6; }
.agree input{
  appearance:none; -webkit-appearance:none;
  flex:0 0 auto; width:16px; height:16px; margin:1px 0 0;
  border-radius:4px; border:1px solid rgba(150,170,255,.42);
  background:rgba(255,255,255,.05);
  position:relative;
}
.agree input:checked{ background:linear-gradient(140deg,#a8b6ff,#627eea); border-color:transparent; }
.agree input:checked::after{
  content:""; position:absolute; left:5px; top:1.5px;
  width:4px; height:8px; border:solid #0a0d1c; border-width:0 1.6px 1.6px 0;
  transform:rotate(42deg);
}

.btn-submit{
  width:100%; height:52px; margin-top:16px;
  border-radius:12px;
  font-size:14.5px; font-weight:800; letter-spacing:.02em; color:#080b1a;
  background:linear-gradient(100deg,#8ea1f5,#c7d2ff 30%,#627eea 78%);
  box-shadow:0 14px 30px -14px rgba(98,126,234,.95), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .16s ease, opacity .2s;
}
.btn-submit:active{ transform:scale(.985); }
.btn-submit[disabled]{ opacity:.6; }
.form-tip{ margin:10px 0 0; text-align:center; font-size:9.5px; color:#7d87ae; letter-spacing:.02em; }

/* success */
.success{ text-align:center; padding:6px 0 4px; }
.success-ring{
  width:52px; height:52px; margin:0 auto 12px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#9df3c0;
  border:1px solid rgba(74,222,128,.42);
  background:rgba(74,222,128,.10);
  box-shadow:0 0 30px -8px rgba(74,222,128,.75);
  animation:pop .5s cubic-bezier(.22,1.4,.4,1) both;
}
.success h3{ margin:0; font-family:var(--serif); font-size:22px; font-weight:500; color:#f4f6ff; }
.success p{ margin:9px 0 0; font-size:11.5px; line-height:1.68; color:#9aa3c7; }
.success-ticket{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  margin-top:16px; padding:12px 14px;
  text-align:center;
  border-radius:11px; border:1px dashed rgba(150,170,255,.34);
  background:rgba(98,126,234,.08);
}
.success-ticket span{ font-size:8.5px; letter-spacing:.18em; color:#8f99bf; }
.success-ticket b{ font-family:var(--mono); font-size:14px; letter-spacing:.1em; color:#e6eaff; }
.success-timer{ margin-top:12px; font-size:11px; color:#9aa3c7; }
.success-timer b{ color:#ffcf7a; font-weight:700; }

/* ---------- Animations ---------- */
@keyframes ticker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.45; transform:scale(.86); } }
@keyframes holo{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@keyframes flow{ from{ transform:translateX(-100%); } to{ transform:translateX(100%); } }
@keyframes btnShine{ 0%,72%{ transform:translateX(-120%); } 92%,100%{ transform:translateX(120%); } }
@keyframes halo{ 0%,100%{ opacity:.25; transform:scale(1); } 50%{ opacity:.7; transform:scale(1.06); } }
@keyframes nudgeL{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(-2.4px); } }
@keyframes nudgeR{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(2.4px); } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
@keyframes pop{ from{ opacity:0; transform:scale(.7); } to{ opacity:1; transform:scale(1); } }

/* ---------- Small screen tweaks ---------- */
@media (max-width:359px){
  :root{ --card-w:min(72vw,232px); }
  .hero-prize .cur{ font-size:66px; }
  .tcell b{ font-size:19px; }
  .tgrid{ gap:4px; }
  .hero-glow{ width:160px; height:160px; }
  .brand-text b{ font-size:12px; }
  .live-tag{ font-size:9px; padding:0 8px; }
  .invite-title h2{ font-size:13.5px; }
  .btn-main-txt{ font-size:14.5px; }
}

/* ---------- Desktop preview ---------- */
@media (min-width:900px){
  body{
    display:flex; justify-content:center; align-items:flex-start;
    padding:28px 0;
  }
  .page{ width:100%; }
}

/* ---------- Motion preference ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}