/* LYKN REFLEXION · Lucky Fan Campaign. Tokens follow /design.md */
:root {
  --color-primary:#D9132A; --color-primary-strong:#B30E22; --color-primary-deep:#5A0912;
  --color-primary-text:#FF4D5E; --color-primary-tint:rgba(217,19,42,.14);
  --color-ice:#9CCBEF; --color-ice-tint:rgba(156,203,239,.12); --color-blush:#F4CFCF;
  --color-success:#4ADE80; --color-warning:#FBBF24; --color-danger:#FF5C6C;
  --text-heading:#F5F6F9; --text-body:#B9BDC9; --text-muted:#8B90A0; --text-placeholder:#666B7A;
  --bg-page:#07070A; --bg-elev:#0C0D12; --surface:#111219; --surface-2:#181A23;
  --glass:rgba(18,19,27,.72); --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.16);
  --font-display:"Chakra Petch","IBM Plex Sans Thai",system-ui,sans-serif;
  --font-sans:"IBM Plex Sans Thai","Noto Sans Thai",system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-xl:24px; --radius-pill:999px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-8:48px; --space-10:64px; --space-12:96px;
  --container:1180px; --gutter:16px;
  --ease:cubic-bezier(.2,.7,.2,1); --dur-fast:160ms; --dur-base:280ms;
  --gradient-chrome:linear-gradient(180deg,#FFFFFF 0%,#E4E7EE 38%,#8C93A3 52%,#D9DDE6 70%,#FFFFFF 100%);
  --gradient-crimson:linear-gradient(120deg,#FF3B4F 0%,#D9132A 45%,#7A0B18 100%);
  --gradient-ice:linear-gradient(120deg,#E4F2FD 0%,#9CCBEF 50%,#5C8DB5 100%);
  --gradient-hairline:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  --shadow-card:0 1px 0 0 rgba(255,255,255,.05) inset,0 20px 40px -20px rgba(0,0,0,.8);
  --shadow-float:0 1px 0 0 rgba(255,255,255,.08) inset,0 30px 60px -20px rgba(0,0,0,.9);
  --glow-crimson:0 0 0 1px rgba(217,19,42,.5),0 12px 40px -8px rgba(217,19,42,.45);
  --glow-ice:0 0 0 1px rgba(156,203,239,.45),0 12px 40px -8px rgba(156,203,239,.3);
  --shadow-dropdown:0 18px 48px rgba(0,0,0,.6);
  color-scheme: dark;
}
@media (min-width:768px){ :root{ --gutter:24px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg-page); color:var(--text-body); font:400 16px/1.7 var(--font-sans); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:var(--color-ice); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
button,input,select,textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--color-primary-text); outline-offset:3px; border-radius:4px; }
h1,h2,h3,h4{ color:var(--text-heading); margin:0; line-height:1.3; }
p{ margin:0; }
.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.container{ width:100%; max-width:calc(var(--container) + var(--gutter)*2); padding-inline:var(--gutter); margin-inline:auto; }
.skip{ position:absolute; left:16px; top:-60px; z-index:100; background:var(--color-primary); color:#fff; padding:10px 16px; border-radius:var(--radius-md); }
.skip:focus{ top:12px; }

/* ---------- Type helpers ---------- */
.eyebrow{ font:600 13px/1.4 var(--font-display); letter-spacing:.28em; text-transform:uppercase; color:var(--color-ice); display:inline-flex; align-items:center; gap:10px; }
.eyebrow::before{ content:""; width:28px; height:1px; background:var(--gradient-crimson); }
.chrome{ color:#E9ECF2; background:var(--gradient-chrome); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.crimson-text{ background:var(--gradient-crimson); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--color-primary-text); }
.ice-text{ background:var(--gradient-ice); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--color-ice); }
.section-title{ font:700 clamp(28px,2.4vw + 14px,40px)/1.15 var(--font-display); text-transform:uppercase; letter-spacing:.02em; }
.section-title-th{ font:700 clamp(22px,1.2vw + 16px,30px)/1.4 var(--font-sans); color:var(--text-heading); margin-top:6px; }
.section-lead{ margin-top:12px; max-width:640px; color:var(--text-body); }
.section-head{ margin-bottom:var(--space-8); }
.section-head.center{ text-align:center; }
.section-head.center .section-lead{ margin-inline:auto; }
.section-head.center .eyebrow::after{ content:""; width:28px; height:1px; background:var(--gradient-crimson); }
.muted{ color:var(--text-muted); }
.num{ font-family:var(--font-display); font-variant-numeric:tabular-nums; }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:10px 26px; border-radius:var(--radius-pill); border:1px solid transparent; font:600 16px/1.2 var(--font-sans); cursor:pointer; text-decoration:none!important; transition:background-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),color var(--dur-fast); white-space:nowrap; }
.btn svg{ width:18px; height:18px; flex:none; }
.btn-primary{ background:var(--color-primary); color:#fff; }
.btn-primary:hover{ background:var(--color-primary-strong); box-shadow:var(--glow-crimson); }
.btn-primary:active{ transform:translateY(1px); }
.btn-glass{ background:rgba(255,255,255,.04); border-color:var(--line-strong); color:var(--text-heading); }
.btn-glass:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.3); }
.btn-ghost{ background:transparent; color:var(--color-ice); padding-inline:10px; }
.btn-ghost:hover{ color:#fff; }
.btn-sm{ min-height:40px; padding:8px 18px; font-size:14.5px; }
.btn-block{ width:100%; }
.btn[disabled],.btn[aria-disabled="true"]{ background:#2A2C36; color:#6B7080; border-color:transparent; box-shadow:none; cursor:not-allowed; }
.btn .spinner{ width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Header ---------- */
.site-header{ position:sticky; top:0; z-index:50; transition:background-color var(--dur-base) var(--ease),border-color var(--dur-base); border-bottom:1px solid transparent; }
.site-header.scrolled{ background:rgba(7,7,10,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom-color:var(--line); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:68px; gap:16px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height:34px; width:auto; }
.nav{ display:none; gap:4px; }
.nav a{ color:var(--text-body); font-size:15px; font-weight:500; padding:8px 14px; border-radius:var(--radius-pill); transition:color var(--dur-fast),background-color var(--dur-fast); }
.nav a:hover,.nav a.active{ color:var(--text-heading); background:rgba(255,255,255,.06); text-decoration:none; }
.header-cta{ display:flex; align-items:center; gap:8px; }
.menu-btn{ display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center; background:rgba(255,255,255,.04); border:1px solid var(--line-strong); border-radius:12px; cursor:pointer; color:var(--text-heading); }
.menu-btn svg{ width:22px; height:22px; }
.mobile-nav{ display:none; position:fixed; inset:68px 0 auto 0; background:rgba(7,7,10,.97); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); padding:12px var(--gutter) 20px; z-index:49; }
.mobile-nav.open{ display:block; }
.mobile-nav a{ display:block; padding:14px 4px; color:var(--text-heading); font-weight:500; border-bottom:1px solid var(--line); }
.mobile-nav a:hover{ text-decoration:none; color:var(--color-primary-text); }
@media (min-width:960px){ .nav{ display:flex; } .menu-btn,.mobile-nav{ display:none!important; } }
@media (max-width:420px){ .header-cta .btn-primary{ padding-inline:16px; } }


/* ---------- Hero ---------- */
.hero{ position:relative; isolation:isolate; overflow:hidden; margin-top:-68px; padding-top:68px; min-height:min(900px,100svh); display:flex; align-items:stretch; }
.hero-media{ position:absolute; inset:0; z-index:-2; }
.hero-media img{ position:absolute; right:0; top:0; height:100%; width:100%; object-fit:cover; object-position:70% 30%; opacity:.9; }
.hero-media::after{ content:""; position:absolute; inset:0; background:
  linear-gradient(90deg,#07070A 0%,rgba(7,7,10,.92) 30%,rgba(7,7,10,.35) 62%,rgba(7,7,10,.15) 100%),
  linear-gradient(0deg,#07070A 0%,rgba(7,7,10,0) 30%),
  linear-gradient(180deg,rgba(7,7,10,.7) 0%,rgba(7,7,10,0) 22%); }
@media (max-width:767px){
  .hero-media img{ object-position:62% 20%; opacity:.55; }
  .hero-media::after{ background:linear-gradient(0deg,#07070A 8%,rgba(7,7,10,.75) 55%,rgba(7,7,10,.5) 100%); }
}
.hero-inner{ display:flex; flex-direction:column; justify-content:center; gap:28px; padding-block:56px 72px; width:100%; }
.hero-copy{ max-width:620px; }
.hero-logo{ width:min(520px,88%); height:auto; margin:18px 0 22px -6px; filter:drop-shadow(0 10px 30px rgba(0,0,0,.6)); }
.hero h2{ font:700 clamp(26px,2.4vw + 14px,40px)/1.35 var(--font-sans); color:var(--text-heading); }
.hero h2 em{ font-style:normal; color:var(--color-primary-text); }
.hero-sub{ margin-top:14px; font-size:clamp(16px,.4vw + 14.5px,18px); color:var(--text-body); max-width:560px; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.hero-status{ display:grid; gap:16px; max-width:620px; background:var(--glass); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--line); border-radius:var(--radius-lg); padding:18px 20px; box-shadow:var(--shadow-float); }
.status-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.live-pill{ display:inline-flex; align-items:center; gap:8px; font:600 12.5px/1 var(--font-display); letter-spacing:.14em; text-transform:uppercase; padding:7px 12px; border-radius:var(--radius-pill); background:var(--color-primary-tint); color:var(--color-primary-text); border:1px solid rgba(217,19,42,.45); }
.live-pill i{ width:8px; height:8px; border-radius:50%; background:var(--color-primary-text); box-shadow:0 0 0 0 rgba(255,77,94,.6); animation:pulse 1.8s infinite; }
.live-pill.is-before{ background:var(--color-ice-tint); color:var(--color-ice); border-color:rgba(156,203,239,.4); }
.live-pill.is-before i{ background:var(--color-ice); animation:none; }
.live-pill.is-ended{ background:rgba(255,255,255,.05); color:var(--text-muted); border-color:var(--line-strong); }
.live-pill.is-ended i{ background:var(--text-muted); animation:none; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(255,77,94,.55);} 70%{ box-shadow:0 0 0 10px rgba(255,77,94,0);} 100%{ box-shadow:0 0 0 0 rgba(255,77,94,0);} }
.countdown{ display:flex; gap:8px; }
.cd-unit{ min-width:62px; text-align:center; background:rgba(255,255,255,.035); border:1px solid var(--line); border-radius:12px; padding:8px 6px 6px; }
.cd-unit b{ display:block; font:700 26px/1 var(--font-display); color:var(--text-heading); font-variant-numeric:tabular-nums; }
.cd-unit span{ font-size:11.5px; color:var(--text-muted); }
.status-label{ font-size:14px; color:var(--text-body); }
.facts{ display:flex; flex-wrap:wrap; gap:8px; }
.fact{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:var(--radius-pill); border:1px solid var(--line-strong); font-size:14px; color:var(--text-heading); background:rgba(255,255,255,.03); }
.fact svg{ width:16px; height:16px; color:var(--color-ice); }
.fact.crimson{ border-color:rgba(217,19,42,.5); }
.fact.crimson svg{ color:var(--color-primary-text); }
@media (max-width:480px){ .cd-unit{ min-width:0; flex:1; } .countdown{ width:100%; } }

/* ---------- Shards (decor) ---------- */
.shard{ position:absolute; pointer-events:none; z-index:-1; background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.02) 60%); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(2px); opacity:.55; animation:drift 48s ease-in-out infinite alternate; }
.shard.s1{ width:120px; height:150px; clip-path:polygon(10% 0,100% 18%,72% 100%,0 70%); top:16%; right:8%; }
.shard.s2{ width:70px; height:90px; clip-path:polygon(0 10%,100% 0,60% 100%); bottom:22%; left:46%; animation-duration:60s; }
.shard.s3{ width:90px; height:60px; clip-path:polygon(0 0,100% 30%,40% 100%); top:30%; left:4%; background:linear-gradient(135deg,rgba(217,19,42,.35),rgba(217,19,42,0)); border-color:rgba(217,19,42,.3); animation-duration:54s; }
@keyframes drift{ 0%{ transform:translate3d(0,0,0) rotate(0deg);} 100%{ transform:translate3d(-24px,30px,0) rotate(14deg);} }

/* ---------- Sections ---------- */
section{ position:relative; }
.section{ padding-block:var(--space-10); }
@media (min-width:960px){ .section{ padding-block:var(--space-12); } }
.band{ background:var(--bg-elev); border-block:1px solid var(--line); }
.hairline{ height:1px; background:var(--gradient-hairline); border:0; margin:0; }
.glass-bg{ background:url(/assets/img/glass-bg.webp) center/cover no-repeat; }
.glass-bg::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(7,7,10,.92),rgba(7,7,10,.8) 50%,rgba(7,7,10,.95)); z-index:0; }
.glass-bg > *{ position:relative; z-index:1; }

/* Fact strip */
.strip{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.strip > div{ background:var(--bg-page); padding:22px 20px; }
.strip b{ display:block; font:700 clamp(36px,2.4vw + 22px,52px)/1 var(--font-display); }
.strip span{ display:block; margin-top:8px; font-size:14.5px; color:var(--text-body); }
.strip small{ display:block; font:600 11.5px/1.4 var(--font-display); letter-spacing:.18em; text-transform:uppercase; color:var(--text-muted); margin-top:2px; }
@media (min-width:768px){ .strip{ grid-template-columns:repeat(4,1fr); } }

/* Lane cards */
.lanes{ display:grid; gap:20px; }
@media (min-width:768px){ .lanes{ grid-template-columns:1fr 1fr; } }
.lane{ position:relative; overflow:hidden; border-radius:var(--radius-lg); padding:28px; background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.01)); border:1px solid var(--line); box-shadow:var(--shadow-card); transition:transform var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease),border-color var(--dur-base); }
.lane::before{ content:""; position:absolute; inset:-40% -20% auto auto; width:320px; height:320px; border-radius:50%; filter:blur(60px); opacity:.35; pointer-events:none; }
.lane.top{ border-color:rgba(217,19,42,.4); }
.lane.top::before{ background:var(--color-primary); }
.lane.lucky{ border-color:rgba(156,203,239,.35); }
.lane.lucky::before{ background:#3E6F98; }
.lane:hover{ transform:translateY(-2px); }
.lane.top:hover{ box-shadow:var(--glow-crimson); }
.lane.lucky:hover{ box-shadow:var(--glow-ice); }
.lane-head{ display:flex; align-items:center; gap:18px; }
.lane-num{ font:700 clamp(64px,4vw + 30px,88px)/.9 var(--font-display); }
.lane-title{ font:700 24px/1.2 var(--font-display); text-transform:uppercase; letter-spacing:.04em; color:var(--text-heading); }
.lane-sub{ font-size:14px; font-weight:600; margin-top:4px; }
.lane.top .lane-sub{ color:var(--color-primary-text); }
.lane.lucky .lane-sub{ color:var(--color-ice); }
.lane p{ margin-top:16px; }
.ticks{ list-style:none; padding:0; margin:18px 0 0; display:grid; gap:10px; }
.ticks li{ display:flex; gap:10px; align-items:flex-start; font-size:15px; }
.ticks svg{ width:18px; height:18px; flex:none; margin-top:4px; }
.lane.top .ticks svg{ color:var(--color-primary-text); }
.lane.lucky .ticks svg{ color:var(--color-ice); }

/* Steps */
.steps{ display:grid; gap:14px; counter-reset:step; }
@media (min-width:640px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .steps{ grid-template-columns:repeat(5,1fr); } }
.step{ position:relative; border:1px solid var(--line); background:rgba(255,255,255,.02); border-radius:var(--radius-lg); padding:22px 20px; transition:border-color var(--dur-base),background-color var(--dur-base); }
.step:hover{ border-color:var(--line-strong); background:rgba(255,255,255,.035); }
.step-num{ font:700 15px/1 var(--font-display); letter-spacing:.08em; }
.step:nth-child(odd) .step-num{ color:var(--color-primary-text); }
.step:nth-child(even) .step-num{ color:var(--color-ice); }
.step h3{ font-size:19px; margin-top:12px; }
.step .en{ font:600 13px/1.4 var(--font-display); letter-spacing:.06em; color:var(--color-ice); text-transform:uppercase; margin-top:2px; }
.step p{ margin-top:10px; font-size:14.5px; line-height:1.65; }
.step-icon{ position:absolute; top:18px; right:18px; width:22px; height:22px; color:var(--text-muted); }

/* Timeline */
.timeline{ position:relative; max-width:920px; margin-inline:auto; }
.timeline::before{ content:""; position:absolute; left:15px; top:8px; bottom:8px; width:1px; background:linear-gradient(180deg,rgba(217,19,42,.7),rgba(255,255,255,.12) 50%,rgba(156,203,239,.5)); }
.tl-item{ position:relative; display:grid; grid-template-columns:1fr; gap:4px 24px; padding:0 0 26px 48px; }
@media (min-width:768px){ .tl-item{ grid-template-columns:170px 1fr; padding-left:56px; } .timeline::before{ left:19px; } }
.tl-dot{ position:absolute; left:8px; top:6px; width:15px; height:15px; border-radius:50%; border:2px solid var(--line-strong); background:var(--bg-page); }
@media (min-width:768px){ .tl-dot{ left:12px; } }
.tl-item.done .tl-dot{ background:var(--text-muted); border-color:var(--text-muted); }
.tl-item.now .tl-dot{ background:var(--color-primary-text); border-color:var(--color-primary-text); animation:pulse 1.8s infinite; }
.tl-date{ font:700 16px/1.5 var(--font-display); color:var(--text-heading); letter-spacing:.02em; }
.tl-card{ border-radius:var(--radius-md); }
.tl-card h3{ font-size:17px; font-weight:600; line-height:1.55; }
.tl-card p{ font-size:14px; color:var(--text-muted); margin-top:4px; line-height:1.6; }
.tl-item.milestone .tl-card{ background:linear-gradient(120deg,rgba(244,207,207,.12),rgba(217,19,42,.12)); border:1px solid rgba(244,207,207,.28); padding:14px 16px; margin-top:-8px; }
.tl-item.milestone .tl-card h3{ color:#FFE9E9; font-weight:700; }
.tl-item.milestone .tl-date{ color:var(--color-blush); }
.tl-tag{ display:inline-block; margin-left:8px; font:600 11px/1 var(--font-display); letter-spacing:.14em; text-transform:uppercase; padding:4px 8px; border-radius:var(--radius-sm); vertical-align:2px; }
.tl-item.now .tl-tag{ background:var(--color-primary); color:#fff; }
.tl-item.done .tl-date,.tl-item.done .tl-card h3{ color:var(--text-muted); }

/* ---------- Join / forms ---------- */
.join-grid{ display:grid; gap:32px; align-items:start; }
@media (min-width:960px){ .join-grid{ grid-template-columns:.85fr 1.15fr; gap:56px; } }
.join-points{ list-style:none; padding:0; margin:24px 0 0; display:grid; gap:12px; }
.join-points li{ display:flex; gap:12px; align-items:flex-start; }
.join-points svg{ width:20px; height:20px; color:var(--color-success); flex:none; margin-top:3px; }
.panel{ background:var(--glass); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-float); padding:24px; }
@media (min-width:768px){ .panel{ padding:32px; } }
.seg{ display:grid; grid-template-columns:1fr 1fr; padding:4px; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:var(--radius-pill); margin-bottom:24px; }
.seg button{ min-height:42px; border:0; background:transparent; border-radius:var(--radius-pill); color:var(--text-body); font-weight:600; cursor:pointer; transition:background-color var(--dur-fast),color var(--dur-fast); }
.seg button[aria-selected="true"]{ background:var(--color-primary); color:#fff; }
.form-grid{ display:grid; gap:18px; }
@media (min-width:600px){ .form-grid.two{ grid-template-columns:1fr 1fr; } .span-2{ grid-column:1/-1; } }
.field label,.field .label{ display:block; font-size:14px; font-weight:600; color:var(--text-heading); margin-bottom:8px; }
.field .opt{ color:var(--text-muted); font-weight:400; }
.input,.select,.textarea{ width:100%; min-height:52px; padding:12px 16px; background:rgba(7,7,10,.6); border:1px solid var(--line-strong); border-radius:var(--radius-md); font-size:16px; color:var(--text-heading); transition:border-color var(--dur-fast),box-shadow var(--dur-fast); }
.textarea{ min-height:110px; resize:vertical; }
.input::placeholder,.textarea::placeholder{ color:var(--text-placeholder); }
.input:hover,.select:hover{ border-color:rgba(255,255,255,.28); }
.input:focus,.select:focus,.textarea:focus{ outline:none; border-color:var(--color-primary-text); box-shadow:0 0 0 3px rgba(255,77,94,.18); }
.input[aria-invalid="true"],.select[aria-invalid="true"]{ border-color:var(--color-danger); }
.input-group{ display:flex; align-items:stretch; }
.input-group .addon{ display:flex; align-items:center; padding:0 14px; border:1px solid var(--line-strong); border-right:0; border-radius:var(--radius-md) 0 0 var(--radius-md); color:var(--text-muted); background:rgba(255,255,255,.03); font-size:15px; }
.input-group .input{ border-radius:0 var(--radius-md) var(--radius-md) 0; }
.help{ font-size:12.5px; color:var(--text-muted); margin-top:6px; line-height:1.5; }
.err{ font-size:13px; color:var(--color-danger); margin-top:6px; line-height:1.5; display:none; }
.err.show{ display:block; }
.check{ display:flex; gap:12px; align-items:flex-start; cursor:pointer; font-size:14.5px; }
.check input{ width:20px; height:20px; margin-top:3px; accent-color:var(--color-primary); flex:none; }
.alert{ border-radius:var(--radius-md); padding:12px 16px; font-size:14.5px; margin-bottom:18px; display:none; }
.alert.show{ display:block; }
.alert.error{ background:rgba(255,92,108,.1); border:1px solid rgba(255,92,108,.4); color:#FFC2C8; }
.alert.success{ background:rgba(74,222,128,.08); border:1px solid rgba(74,222,128,.35); color:#BBF7D0; }
.alert.info{ background:var(--color-ice-tint); border:1px solid rgba(156,203,239,.35); color:#D6EBFA; }
.pills{ display:flex; flex-wrap:wrap; gap:8px; }
.pill-opt{ position:relative; }
.pill-opt input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.pill-opt span{ display:inline-flex; align-items:center; min-height:44px; padding:8px 18px; border-radius:var(--radius-pill); border:1px solid var(--line-strong); background:rgba(255,255,255,.03); font-size:14.5px; color:var(--text-body); transition:all var(--dur-fast); }
.pill-opt input:checked + span{ background:var(--color-primary-tint); border-color:var(--color-primary-text); color:#fff; }
.pill-opt input:focus-visible + span{ outline:2px solid var(--color-primary-text); outline-offset:2px; }
.drop{ position:relative; display:flex; align-items:center; gap:16px; border:1px dashed var(--line-strong); border-radius:var(--radius-md); padding:18px; background:rgba(255,255,255,.02); cursor:pointer; transition:border-color var(--dur-fast),background-color var(--dur-fast); }
.drop:hover,.drop.drag{ border-color:var(--color-primary-text); background:var(--color-primary-tint); }
.drop input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.drop .thumb{ width:64px; height:80px; border-radius:8px; background:rgba(255,255,255,.06); flex:none; display:flex; align-items:center; justify-content:center; overflow:hidden; color:var(--text-muted); }
.drop .thumb img{ width:100%; height:100%; object-fit:cover; }
.drop .thumb svg{ width:26px; height:26px; }
.drop b{ color:var(--text-heading); font-weight:600; display:block; word-break:break-all; }
.drop small{ color:var(--text-muted); font-size:13px; }

/* Member dashboard */
.member-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.avatar{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center; font:700 20px/1 var(--font-display); color:#fff; background:linear-gradient(var(--bg-page),var(--bg-page)) padding-box,linear-gradient(135deg,var(--color-primary-text),var(--color-ice)) border-box; border:2px solid transparent; flex:none; }
.who{ display:flex; align-items:center; gap:14px; }
.who h3{ font-size:22px; }
.who p{ font-size:13.5px; color:var(--text-muted); }
.score-card{ border-radius:var(--radius-lg); padding:22px; background:radial-gradient(120% 140% at 0% 0%,rgba(217,19,42,.2),rgba(18,19,27,.6) 55%),var(--surface); border:1px solid rgba(217,19,42,.3); }
.score-row{ display:flex; gap:24px; flex-wrap:wrap; align-items:flex-end; }
.score-row .big{ font:700 clamp(40px,3vw + 24px,60px)/1 var(--font-display); }
.score-row .rank{ font:700 clamp(30px,2vw + 18px,44px)/1 var(--font-display); color:var(--color-ice); }
.score-label{ font:600 11.5px/1.4 var(--font-display); letter-spacing:.18em; text-transform:uppercase; color:var(--text-muted); margin-bottom:6px; }
.progress{ position:relative; height:8px; border-radius:99px; background:rgba(255,255,255,.08); margin-top:22px; }
.progress > i{ position:absolute; left:0; top:0; bottom:0; border-radius:99px; background:linear-gradient(90deg,var(--color-primary),var(--color-primary-text) 60%,var(--color-ice)); }
.progress > b{ position:absolute; top:-5px; width:2px; height:18px; background:var(--color-blush); }
.progress-legend{ display:flex; justify-content:space-between; gap:12px; font-size:12.5px; color:var(--text-muted); margin-top:8px; }
.score-note{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); font-size:14px; display:flex; gap:8px; align-items:flex-start; }
.score-note svg{ width:18px; height:18px; flex:none; margin-top:3px; color:var(--color-success); }
.tiles{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:12px; }
@media (min-width:768px){ .tiles{ grid-template-columns:repeat(4,1fr); } }
.tile{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:16px; }
.tile .score-label{ margin-bottom:10px; }
.tile b{ font:700 30px/1 var(--font-display); color:var(--text-heading); }
.tile small{ font-size:13px; color:var(--text-muted); margin-left:4px; }
.tile.lucky{ border-color:rgba(156,203,239,.35); background:linear-gradient(160deg,rgba(156,203,239,.1),var(--surface)); }
.tile.lucky b{ color:var(--color-ice); }
.subtabs{ display:flex; gap:8px; margin:28px 0 18px; flex-wrap:wrap; }
.subtabs button{ min-height:42px; padding:8px 18px; border-radius:var(--radius-pill); border:1px solid var(--line-strong); background:transparent; color:var(--text-body); font-weight:600; cursor:pointer; }
.subtabs button[aria-selected="true"]{ background:#fff; color:#0A0A0E; border-color:#fff; }
.win-banner{ border-radius:var(--radius-lg); padding:18px 20px; margin-bottom:18px; background:var(--gradient-crimson); color:#fff; display:flex; gap:14px; align-items:center; }
.win-banner svg{ width:32px; height:32px; flex:none; }
.win-banner h4{ color:#fff; font-size:18px; }

/* Tables */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); }
table{ width:100%; border-collapse:collapse; font-size:14.5px; }
th{ text-align:left; font-weight:600; font-size:13px; color:var(--text-muted); padding:12px 16px; border-bottom:1px solid var(--line); white-space:nowrap; background:rgba(255,255,255,.02); }
td{ padding:12px 16px; border-bottom:1px solid var(--line); color:var(--text-body); vertical-align:middle; }
tr:last-child td{ border-bottom:0; }
td.r,th.r{ text-align:right; }
td.mono{ font-family:var(--font-display); color:var(--text-heading); font-variant-numeric:tabular-nums; }
.badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--radius-sm); font-size:12.5px; font-weight:600; white-space:nowrap; }
.badge.pending{ background:rgba(251,191,36,.12); color:#FCD34D; }
.badge.approved{ background:rgba(74,222,128,.12); color:#86EFAC; }
.badge.rejected{ background:rgba(255,92,108,.12); color:#FF9AA5; }
.badge.top{ background:var(--color-primary-tint); color:var(--color-primary-text); }
.badge.lucky{ background:var(--color-ice-tint); color:var(--color-ice); }
.badge.me{ background:var(--color-ice); color:#0A0A0E; }
.empty{ text-align:center; padding:40px 16px; color:var(--text-muted); }
.empty svg{ width:36px; height:36px; margin:0 auto 10px; color:var(--text-muted); }

/* ---------- Leaderboard ---------- */
.lb-grid{ display:grid; gap:24px; }
@media (min-width:1024px){ .lb-grid{ grid-template-columns:1fr 320px; } }
.podium{ display:grid; grid-template-columns:1fr 1.15fr 1fr; align-items:end; gap:10px; max-width:640px; margin:0 auto var(--space-8); }
.pod{ text-align:center; }
.pod .avatar{ margin:0 auto 8px; width:56px; height:56px; }
.pod .name{ font-weight:600; color:var(--text-heading); font-size:15px; margin-bottom:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pod .block{ border-radius:14px 14px 0 0; padding:18px 8px 16px; border:1px solid var(--line); border-bottom:0; }
.pod .block b{ display:block; font:700 42px/1 var(--font-display); }
.pod .block span{ display:block; margin-top:8px; font:600 15px/1 var(--font-display); color:var(--text-heading); }
.pod.p1 .block{ height:190px; background:linear-gradient(180deg,rgba(217,19,42,.35),rgba(217,19,42,.06)); border-color:rgba(217,19,42,.45); }
.pod.p2 .block{ height:150px; background:linear-gradient(180deg,rgba(156,203,239,.22),rgba(156,203,239,.03)); }
.pod.p3 .block{ height:124px; background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.02)); }
.pod .crown{ width:26px; height:26px; color:#FFD27A; margin:0 auto 4px; }
.lb-row-me td{ background:rgba(156,203,239,.08); }
.lb-cut td{ padding:0; border-bottom:0; }
.lb-cut div{ position:relative; text-align:center; font:600 12px/1 var(--font-display); letter-spacing:.14em; color:var(--color-primary-text); padding:12px 0; text-transform:uppercase; }
.lb-cut div::before{ content:""; position:absolute; left:16px; right:16px; top:50%; border-top:1px dashed rgba(255,77,94,.6); z-index:0; }
.lb-cut span{ position:relative; background:var(--surface); padding:0 12px; }
.mini-av{ display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.07); font:700 12px/1 var(--font-display); color:var(--text-heading); margin-right:10px; vertical-align:middle; }
.side-card{ border-radius:var(--radius-lg); padding:20px; border:1px solid var(--line); background:var(--surface); }
.side-card + .side-card{ margin-top:14px; }
.side-card h4{ font-size:16px; margin-bottom:8px; }
.side-card ul{ margin:0; padding-left:18px; font-size:14px; display:grid; gap:6px; }
.side-card.me{ border-color:rgba(156,203,239,.45); background:linear-gradient(160deg,rgba(156,203,239,.1),var(--surface)); }
.side-card.lucky{ border-color:rgba(217,19,42,.35); background:linear-gradient(160deg,rgba(217,19,42,.1),var(--surface)); }

/* Winners */
.win-cols{ display:grid; gap:20px; }
@media (min-width:900px){ .win-cols{ grid-template-columns:1fr 1fr; } }
.win-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:8px; max-height:560px; overflow:auto; }
.win-list li{ display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:var(--radius-md); background:rgba(255,255,255,.03); border:1px solid var(--line); font-size:14.5px; }
.win-list .pos{ font:700 14px/1 var(--font-display); color:var(--text-muted); min-width:28px; }
.win-list .n{ color:var(--text-heading); font-weight:600; }
.win-list .m{ margin-left:auto; color:var(--text-muted); font-size:13px; }

/* FAQ */
.faq{ max-width:860px; margin-inline:auto; display:grid; gap:10px; }
.faq details{ border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); transition:border-color var(--dur-fast); }
.faq details[open]{ border-color:var(--line-strong); }
.faq summary{ list-style:none; cursor:pointer; padding:18px 20px; font-weight:600; color:var(--text-heading); display:flex; justify-content:space-between; gap:16px; align-items:center; min-height:56px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary svg{ width:20px; height:20px; flex:none; transition:transform var(--dur-base) var(--ease); color:var(--text-muted); }
.faq details[open] summary svg{ transform:rotate(45deg); color:var(--color-primary-text); }
.faq .ans{ padding:0 20px 18px; font-size:15px; }
.faq ol{ margin:0; padding-left:22px; display:grid; gap:8px; }

/* CTA band */
.cta-band{ position:relative; overflow:hidden; border-radius:var(--radius-xl); padding:40px 28px; border:1px solid rgba(217,19,42,.35); background:radial-gradient(80% 120% at 100% 0%,rgba(217,19,42,.35),transparent 60%),radial-gradient(60% 100% at 0% 100%,rgba(156,203,239,.15),transparent 60%),var(--surface); text-align:center; }
.cta-band h2{ font:700 clamp(24px,1.6vw + 16px,34px)/1.35 var(--font-sans); }
.cta-band p{ margin:10px auto 22px; max-width:560px; }

/* Footer */
.site-footer{ border-top:1px solid var(--line); padding-block:40px 32px; background:#050507; }
.foot-grid{ display:grid; gap:24px; align-items:start; }
@media (min-width:768px){ .foot-grid{ grid-template-columns:1.2fr 1fr 1fr; } }
.site-footer img{ height:46px; width:auto; }
.site-footer h4{ font:600 12px/1.4 var(--font-display); letter-spacing:.2em; text-transform:uppercase; color:var(--text-muted); margin-bottom:12px; }
.site-footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:8px; font-size:14.5px; }
.site-footer ul a{ color:var(--text-body); }
.foot-bottom{ margin-top:32px; padding-top:20px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:13px; color:var(--text-muted); }

/* Toast */
.toast{ position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); opacity:0; z-index:200; background:#1C1E28; border:1px solid var(--line-strong); color:var(--text-heading); padding:12px 18px; border-radius:var(--radius-md); box-shadow:var(--shadow-dropdown); font-size:14.5px; transition:all var(--dur-base) var(--ease); pointer-events:none; max-width:calc(100% - 32px); }
.toast.show{ opacity:1; transform:translate(-50%,0); }
.toast.success{ border-color:rgba(74,222,128,.5); }
.toast.error{ border-color:rgba(255,92,108,.5); }

/* Reveal */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease),transform .6s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.skeleton{ background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.09),rgba(255,255,255,.04)); background-size:200% 100%; animation:sk 1.4s infinite; border-radius:8px; }
@keyframes sk{ to{ background-position:-200% 0; } }
[hidden]{ display:none!important; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none!important; transition:none!important; }
  .reveal{ opacity:1; transform:none; }
}
.join-grid > .span-all{ grid-column:1/-1; }

/* =========================================================
   /register page: flow explainer
   ========================================================= */
.page-hero{ position:relative; isolation:isolate; overflow:hidden; margin-top:-68px; padding:132px 0 56px; border-bottom:1px solid var(--line); }
.page-hero-media{ position:absolute; inset:0; z-index:-2; }
.page-hero-media img{ position:absolute; right:0; top:0; width:62%; height:100%; object-fit:cover; object-position:50% 25%; opacity:.6; }
.page-hero-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,#07070A 0%,#07070A 38%,rgba(7,7,10,.55) 70%,rgba(7,7,10,.35) 100%),linear-gradient(0deg,#07070A 0%,rgba(7,7,10,0) 45%); }
@media (max-width:767px){ .page-hero{ padding-top:108px; } .page-hero-media img{ width:100%; opacity:.3; } }
.crumbs{ display:flex; gap:8px; align-items:center; font-size:13.5px; color:var(--text-muted); margin-bottom:18px; }
.crumbs a{ color:var(--text-body); }
.page-title{ font:700 clamp(36px,3.6vw + 16px,64px)/1.15 var(--font-sans); margin:14px 0 12px; letter-spacing:-.01em; }
.page-title .amp{ font-family:var(--font-display); }
.key-dates{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin:32px 0 0; max-width:720px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
@media (min-width:640px){ .key-dates{ grid-template-columns:repeat(4,1fr); } }
.key-dates div{ background:rgba(10,10,14,.88); padding:14px 16px; }
.key-dates dt{ font:600 11px/1.4 var(--font-display); letter-spacing:.16em; text-transform:uppercase; color:var(--text-muted); }
.key-dates dd{ margin:4px 0 0; font:700 18px/1.3 var(--font-display); color:var(--text-heading); }
.key-dates .hl{ background:linear-gradient(120deg,rgba(244,207,207,.14),rgba(217,19,42,.18)),rgba(10,10,14,.88); }
.key-dates .hl dd{ color:var(--color-blush); }

/* Step rail */
.rail{ list-style:none; margin:0 auto var(--space-8); padding:0; display:grid; grid-template-columns:repeat(6,1fr); position:relative; max-width:980px; }
.rail::before{ content:""; position:absolute; left:calc(100%/12); right:calc(100%/12); top:22px; height:2px; background:linear-gradient(90deg,var(--color-primary),var(--color-primary-text) 45%,var(--color-ice)); opacity:.55; }
.rail li{ position:relative; text-align:center; }
.rail a{ display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--text-body); padding:0 2px; min-height:44px; }
.rail a:hover{ text-decoration:none; color:var(--text-heading); }
.rail-dot{ position:relative; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font:700 14px/1 var(--font-display); color:var(--text-heading); background:var(--bg-page); border:1.5px solid var(--line-strong); transition:all var(--dur-base) var(--ease); }
.rail a:hover .rail-dot{ border-color:var(--color-primary-text); box-shadow:var(--glow-crimson); }
.rail-label{ font-size:13.5px; font-weight:600; line-height:1.3; }
.rail li.done .rail-dot{ background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
.rail li.current .rail-dot{ border-color:var(--color-ice); color:var(--color-ice); box-shadow:0 0 0 5px rgba(156,203,239,.15); }
.rail li.current .rail-label{ color:var(--color-ice); }
@media (max-width:520px){ .rail-dot{ width:38px; height:38px; font-size:12.5px; } .rail::before{ top:18px; } .rail-label{ font-size:11.5px; } }

/* Flow cards */
.flow-grid{ display:grid; gap:16px; counter-reset:flow; }
@media (min-width:700px){ .flow-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1060px){ .flow-grid{ grid-template-columns:repeat(3,1fr); } }
.flow-card{ position:relative; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius-lg); background:linear-gradient(165deg,rgba(255,255,255,.035),rgba(255,255,255,.008)); padding:22px; scroll-margin-top:96px; transition:border-color var(--dur-base),box-shadow var(--dur-base),transform var(--dur-base) var(--ease); }
.flow-card:hover{ border-color:var(--line-strong); transform:translateY(-2px); }
.flow-card:target,.flow-card.flash{ border-color:var(--color-primary-text); box-shadow:var(--glow-crimson); }
.flow-card.done{ border-color:rgba(217,19,42,.35); }
.flow-card.current{ border-color:rgba(156,203,239,.55); box-shadow:var(--glow-ice); }
.flow-top{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.flow-ico{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--color-primary-tint); border:1px solid rgba(217,19,42,.35); color:var(--color-primary-text); flex:none; }
.flow-card:nth-child(even) .flow-ico{ background:var(--color-ice-tint); border-color:rgba(156,203,239,.35); color:var(--color-ice); }
.flow-ico svg,.j-ico svg,.prep-ico svg,.tip-card h3 svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.flow-num{ font:700 30px/1 var(--font-display); color:rgba(255,255,255,.14); margin-left:auto; }
.flow-here{ position:absolute; top:-11px; left:18px; font:600 11.5px/1 var(--font-display); letter-spacing:.12em; text-transform:uppercase; padding:6px 10px; border-radius:99px; background:var(--color-ice); color:#0A0A0E; }
.flow-card.done .flow-here{ background:var(--color-primary); color:#fff; }
.flow-card h3{ font-size:20px; }
.flow-card .en{ font:600 12.5px/1.4 var(--font-display); letter-spacing:.12em; text-transform:uppercase; color:var(--color-ice); margin-top:2px; }
.flow-card ul{ margin:14px 0 0; padding:0; list-style:none; display:grid; gap:8px; font-size:14.5px; }
.flow-card li{ position:relative; padding-left:18px; line-height:1.6; }
.flow-card li::before{ content:""; position:absolute; left:2px; top:.7em; width:6px; height:6px; border-radius:2px; background:var(--color-primary-text); transform:rotate(45deg); }
.flow-mock{ margin-top:auto; padding-top:18px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.flow-mock .mf{ flex:1 1 100%; font-size:12.5px; color:var(--text-muted); border:1px solid var(--line-strong); border-radius:8px; padding:7px 10px; background:rgba(7,7,10,.5); font-family:var(--font-display); }
.flow-mock .mf.short{ flex:1 1 40%; }
.flow-mock .mf.r{ text-align:right; color:var(--text-heading); }
.flow-mock .mf.slip{ flex:1 1 40%; border-style:dashed; color:var(--color-success); }
.flow-mock.row .arrow{ color:var(--text-muted); }
.flow-mock .earn{ font:700 24px/1 var(--font-display); }
.flow-mock small{ color:var(--text-muted); font-size:12.5px; margin-right:10px; }
.flow-chips{ margin-top:auto; padding-top:16px; display:flex; flex-wrap:wrap; gap:6px; }
.flow-chips span{ font-size:12.5px; padding:5px 10px; border-radius:99px; border:1px solid var(--line-strong); color:var(--text-heading); background:rgba(255,255,255,.03); }

/* Slip journey */
.journey{ display:grid; gap:14px; align-items:center; }
@media (min-width:960px){ .journey{ grid-template-columns:1fr 56px 1fr 56px 1.3fr; } }
.j-node{ display:flex; flex-direction:column; gap:6px; border:1px solid var(--line); border-radius:var(--radius-lg); padding:18px; background:var(--surface); }
.j-node h3{ font-size:17px; }
.j-node p{ font-size:14px; }
.j-ico{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.06); color:var(--text-heading); margin-bottom:4px; }
.j-node.pending{ border-color:rgba(251,191,36,.4); background:linear-gradient(160deg,rgba(251,191,36,.08),var(--surface)); }
.j-node.pending .j-ico{ background:rgba(251,191,36,.14); color:#FCD34D; }
.j-outcomes{ display:grid; gap:10px; }
.j-outcomes .j-node{ flex-direction:row; align-items:flex-start; gap:14px; }
.j-outcomes .j-ico{ flex:none; margin:0; }
.j-node.ok{ border-color:rgba(74,222,128,.4); background:linear-gradient(160deg,rgba(74,222,128,.08),var(--surface)); }
.j-node.ok .j-ico{ background:rgba(74,222,128,.15); color:#86EFAC; }
.j-node.bad{ border-color:rgba(255,92,108,.4); background:linear-gradient(160deg,rgba(255,92,108,.07),var(--surface)); }
.j-node.bad .j-ico{ background:rgba(255,92,108,.14); color:#FF9AA5; }
.j-arrow{ position:relative; height:28px; }
.j-arrow::before{ content:""; position:absolute; left:50%; top:0; bottom:6px; width:2px; transform:translateX(-50%); background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.45)); }
.j-arrow::after{ content:""; position:absolute; left:50%; bottom:0; width:10px; height:10px; border-right:2px solid rgba(255,255,255,.5); border-bottom:2px solid rgba(255,255,255,.5); transform:translateX(-50%) rotate(45deg); }
@media (min-width:960px){
  .j-arrow{ height:2px; }
  .j-arrow::before{ left:4px; right:10px; top:0; bottom:auto; width:auto; height:2px; transform:none; background:linear-gradient(90deg,rgba(255,255,255,.1),rgba(255,255,255,.45)); }
  .j-arrow::after{ left:auto; right:4px; top:-4px; bottom:auto; transform:rotate(-45deg); }
}
.slip-tips{ display:grid; gap:16px; margin-top:28px; }
@media (min-width:768px){ .slip-tips{ grid-template-columns:1fr 1fr; } }
.tip-card{ border-radius:var(--radius-lg); padding:20px; border:1px solid var(--line); background:var(--surface); }
.tip-card h3{ display:flex; align-items:center; gap:10px; font-size:17px; margin-bottom:12px; }
.tip-card.good h3 svg{ color:var(--color-success); }
.tip-card.bad h3 svg{ color:var(--color-warning); }
.tip-card ul{ margin:0; padding-left:20px; display:grid; gap:6px; font-size:14.5px; }

/* Points */
.formula{ display:grid; gap:16px; margin-bottom:24px; }
@media (min-width:768px){ .formula{ grid-template-columns:1fr 1fr; } }
.f-card{ display:flex; align-items:center; gap:20px; border-radius:var(--radius-lg); padding:22px; border:1px solid var(--line); }
.f-card.top{ border-color:rgba(217,19,42,.45); background:radial-gradient(120% 140% at 0% 0%,rgba(217,19,42,.22),transparent 60%),var(--surface); }
.f-card.lucky{ border-color:rgba(156,203,239,.4); background:radial-gradient(120% 140% at 0% 0%,rgba(156,203,239,.16),transparent 60%),var(--surface); }
.f-eq{ display:flex; align-items:baseline; gap:8px; flex:none; font-family:var(--font-display); }
.f-eq b{ font-size:clamp(34px,2vw + 22px,46px); line-height:1; color:var(--text-heading); }
.f-eq i{ font-style:normal; font-size:22px; font-weight:600; color:var(--text-body); }
.f-card.top .f-eq b{ color:var(--color-primary-text); }
.f-card.lucky .f-eq b{ color:var(--color-ice); }
.f-card h3{ font-size:18px; }
.f-card p{ font-size:14px; margin-top:4px; }
.pts-grid{ display:grid; gap:16px; }
@media (min-width:960px){ .pts-grid{ grid-template-columns:1.25fr 1fr; } }
.card-h{ font-size:17px; margin-bottom:14px; }
.pts-grid table td,.pts-grid table th{ padding:10px 12px; }
tfoot td{ border-top:1px solid var(--line-strong); border-bottom:0; background:rgba(255,255,255,.02); }
.calc-add{ display:flex; gap:8px; }
.calc-add .input{ min-height:48px; }
.calc-list{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; min-height:36px; }
.calc-chip{ display:inline-flex; align-items:center; gap:8px; padding:6px 6px 6px 12px; border-radius:99px; background:rgba(255,255,255,.05); border:1px solid var(--line-strong); font:600 14px/1 var(--font-display); color:var(--text-heading); }
.calc-chip button{ width:26px; height:26px; border-radius:50%; border:0; background:rgba(255,255,255,.08); color:var(--text-body); cursor:pointer; font-size:15px; line-height:1; }
.calc-chip button:hover{ background:var(--color-primary); color:#fff; }
.calc-total{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.calc-total b{ font-size:36px; line-height:1.1; }
.calc-note{ font-size:13.5px; margin-top:12px; color:var(--text-body); }
.calc-note b{ color:var(--text-heading); }
.fork-title{ font-size:19px; margin:48px 0 18px; text-align:center; }
.fork{ display:grid; gap:0; }
.fork-stem{ position:relative; display:flex; justify-content:center; padding-bottom:34px; }
.fork-stem span{ position:relative; z-index:1; font:600 13px/1 var(--font-display); letter-spacing:.12em; text-transform:uppercase; color:var(--text-heading); padding:10px 16px; border-radius:99px; border:1px solid var(--line-strong); background:var(--bg-page); }
.fork-stem::before{ content:""; position:absolute; left:50%; top:20px; bottom:0; width:2px; background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,.15)); }
.fork-stem::after{ content:""; position:absolute; bottom:0; left:25%; right:25%; height:2px; background:linear-gradient(90deg,var(--color-primary-text),rgba(255,255,255,.3) 50%,var(--color-ice)); }
.fork-lanes{ display:grid; gap:16px; }
@media (min-width:768px){ .fork-lanes{ grid-template-columns:1fr 1fr; } }
@media (max-width:767px){ .fork-stem::after{ display:none; } .fork-stem{ padding-bottom:20px; } }
.fork-lanes .lane-num{ font-size:clamp(44px,2.6vw + 26px,64px); }

/* Prep list */
.prep{ list-style:none; padding:0; margin:24px 0 0; display:grid; gap:12px; }
.prep li{ display:flex; gap:14px; align-items:flex-start; padding:14px; border-radius:var(--radius-md); border:1px solid var(--line); background:rgba(255,255,255,.02); }
.prep-ico{ width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:none; background:var(--color-primary-tint); color:var(--color-primary-text); }
.prep b{ display:block; color:var(--text-heading); font-size:15px; }
.prep span{ font-size:13.5px; color:var(--text-muted); }

/* Landing teaser */
.teaser{ display:grid; gap:32px; align-items:center; border:1px solid var(--line); border-radius:var(--radius-xl); padding:28px; background:radial-gradient(70% 120% at 100% 0%,rgba(217,19,42,.16),transparent 60%),radial-gradient(60% 100% at 0% 100%,rgba(156,203,239,.08),transparent 60%),var(--surface); }
@media (min-width:960px){ .teaser{ grid-template-columns:1fr 1fr; padding:44px; gap:48px; } }
.mini-flow{ list-style:none; margin:0; padding:0; display:grid; gap:0; position:relative; }
.mini-flow::before{ content:""; position:absolute; left:21px; top:24px; bottom:24px; width:2px; background:linear-gradient(180deg,var(--color-primary-text),var(--color-ice)); opacity:.6; }
.mini-flow li{ position:relative; display:flex; gap:16px; align-items:flex-start; padding:12px 0; }
.mf-n{ position:relative; z-index:1; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; flex:none; font:700 14px/1 var(--font-display); color:var(--text-heading); background:var(--bg-page); border:1.5px solid var(--line-strong); }
.mini-flow li.earn-row .mf-n{ background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
.mini-flow b{ display:block; color:var(--text-heading); font-size:16px; }
.mini-flow span{ font-size:14px; color:var(--text-body); }
.mini-flow span b{ display:inline; font-size:14px; }
/* Keep grid children from growing past the viewport (tables scroll inside .table-wrap) */
.pts-grid > *,.flow-grid > *,.journey > *,.fork-lanes > *,.join-grid > *,.lb-grid > *,.teaser > *,.slip-tips > *{ min-width:0; }
@media (max-width:520px){ .pts-grid table td,.pts-grid table th{ padding:9px 8px; font-size:13.5px; } }

/* =========================================================
   Motion layer (see assets/js/motion.js). Every effect here is
   disabled by the prefers-reduced-motion rule, which shows the final state.
   ========================================================= */
@property --ang{ syntax:'<angle>'; initial-value:0deg; inherits:false; }

/* Scroll progress */
.scroll-progress{ position:fixed; left:0; top:0; height:2px; width:100%; z-index:70; transform-origin:0 50%; transform:scaleX(0); background:linear-gradient(90deg,var(--color-primary),var(--color-primary-text) 55%,var(--color-ice)); box-shadow:0 0 12px rgba(255,77,94,.6); pointer-events:none; }

/* Hero canvas + depth layers */
.hero-fx{ position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; }
.motion .hero-media,.motion .page-hero-media{ translate:calc(var(--mx,0) * -14px) calc(var(--my,0) * -10px + var(--sy,0) * .18px); }
.motion .hero .shard,.motion .page-hero .shard{ translate:calc(var(--mx,0) * 34px) calc(var(--my,0) * 24px + var(--sy,0) * -.12px); }
.hero::before{ content:""; position:absolute; z-index:-1; width:60vmax; height:60vmax; left:-22vmax; bottom:-30vmax; border-radius:50%; background:radial-gradient(closest-side,rgba(217,19,42,.28),rgba(217,19,42,0)); filter:blur(10px); animation:glowDrift 18s ease-in-out infinite alternate; pointer-events:none; }
@keyframes glowDrift{ to{ transform:translate3d(10vmax,-6vmax,0) scale(1.15); } }

/* Hero intro sequence */
.hero-media img{ animation:kvIn 1.8s cubic-bezier(.16,1,.3,1) both,kenburns 28s 1.8s ease-in-out infinite alternate; }
@keyframes kvIn{ from{ opacity:0; transform:scale(1.16); } to{ transform:scale(1.04); } }
@keyframes kenburns{ from{ transform:scale(1.04) translate3d(0,0,0); } to{ transform:scale(1.12) translate3d(-1.6%,-1.2%,0); } }
.page-hero-media img{ animation:kvIn 1.6s cubic-bezier(.16,1,.3,1) both; }
@keyframes introUp{ from{ opacity:0; transform:translateY(22px); filter:blur(6px); } to{ opacity:1; transform:none; filter:none; } }
.hero .eyebrow,.hero h2,.hero-sub,.hero-ctas,.hero-status,
.page-hero .crumbs,.page-hero .eyebrow,.page-title,.page-hero .hero-sub,.page-hero .hero-ctas,.key-dates{ animation:introUp .9s cubic-bezier(.16,1,.3,1) both; }
.hero .eyebrow,.page-hero .crumbs{ animation-delay:.1s; }
.hero h2,.page-hero .eyebrow{ animation-delay:.55s; }
.hero-sub,.page-title{ animation-delay:.7s; }
.hero-ctas,.page-hero .hero-sub{ animation-delay:.85s; }
.hero-status,.page-hero .hero-ctas{ animation-delay:1s; }
.key-dates{ animation-delay:1.15s; }

/* Logo: blur-in + chrome sheen masked to the letterforms */
.logo-wrap{ position:relative; display:inline-block; width:min(520px,88%); margin:18px 0 22px -6px; animation:logoIn 1.5s .2s cubic-bezier(.16,1,.3,1) both; }
.logo-wrap .hero-logo{ width:100%; margin:0; }
.logo-wrap::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.95) 48%,rgba(255,190,198,.7) 53%,transparent 62%) no-repeat; background-size:300% 100%; background-position:150% 0; -webkit-mask:url(/assets/img/logo.webp) center/100% 100% no-repeat; mask:url(/assets/img/logo.webp) center/100% 100% no-repeat; mix-blend-mode:screen; animation:logoSheen 6.5s 1.6s ease-in-out infinite; }
@keyframes logoIn{ from{ opacity:0; filter:blur(16px) brightness(2); transform:scale(1.07) translateY(10px); } to{ opacity:1; filter:none; transform:none; } }
@keyframes logoSheen{ 0%{ background-position:150% 0; } 32%,100%{ background-position:-50% 0; } }

/* Rotating light border on key panels */
.hero-status,.cta-band,#authPanel,.teaser{ position:relative; }
.hero-status::before,.cta-band::after,#authPanel::before,.teaser::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; z-index:2;
  background:conic-gradient(from var(--ang),transparent 0 68%,rgba(255,77,94,.95) 80%,rgba(156,203,239,.85) 88%,transparent 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:spinBorder 7s linear infinite; }
@keyframes spinBorder{ to{ --ang:360deg; } }

/* Countdown digit flip */
.cd-unit b.flip{ animation:flip .45s cubic-bezier(.2,.8,.2,1); }
@keyframes flip{ from{ opacity:0; transform:translateY(-55%) rotateX(70deg); } to{ opacity:1; transform:none; } }

/* Marquee band */
.marquee-wrap{ overflow:hidden; padding:26px 0; margin-top:-12px; }
.marquee{ width:calc(100% + 80px); margin-left:-40px; transform:rotate(-1.6deg); border-block:1px solid rgba(217,19,42,.45); background:linear-gradient(90deg,rgba(90,9,18,.55),rgba(7,7,10,.9) 30%,rgba(7,7,10,.9) 70%,rgba(90,9,18,.55)); overflow:hidden; }
.marquee-track{ display:flex; width:max-content; animation:marquee 42s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track span{ display:inline-flex; align-items:center; gap:28px; padding:14px 14px; font:700 clamp(22px,1.6vw + 14px,40px)/1 var(--font-display); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.marquee-track .o{ color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.4); }
.marquee-track .c{ color:#E9ECF2; background:var(--gradient-chrome); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.marquee-track .r{ color:var(--color-primary-text); }
.marquee-track i{ width:12px; height:12px; flex:none; transform:rotate(45deg); background:var(--color-primary); box-shadow:0 0 12px rgba(255,77,94,.8); }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* Chrome sheen on section titles */
.section-title.chrome,.page-title .chrome{ background-image:linear-gradient(110deg,transparent 42%,rgba(255,255,255,1) 50%,transparent 58%),var(--gradient-chrome); background-size:250% 100%,100% 100%; background-repeat:no-repeat; background-position:200% 0,0 0; }
.section-head.in .section-title.chrome,.page-title .chrome{ animation:sheen 7s .35s ease-in-out infinite; }
@keyframes sheen{ 0%{ background-position:200% 0,0 0; } 28%,100%{ background-position:-100% 0,0 0; } }

/* Cursor spotlight */
.lane,.step,.flow-card,.side-card,.tip-card,.f-card,.j-node,.prep li,.tile,.strip > div,.panel,.teaser,.cta-band{ position:relative; }
.lane::after,.step::after,.flow-card::after,.side-card::after,.tip-card::after,.f-card::after,.j-node::after,.prep li::after,.tile::after,.strip > div::after,.panel::after,.teaser::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .35s; background:radial-gradient(380px circle at var(--spx,50%) var(--spy,50%),rgba(255,255,255,.075),transparent 45%); }
.lane:hover::after,.step:hover::after,.flow-card:hover::after,.side-card:hover::after,.tip-card:hover::after,.f-card:hover::after,.j-node:hover::after,.prep li:hover::after,.tile:hover::after,.strip > div:hover::after,.panel:hover::after,.teaser:hover::after{ opacity:1; }

/* Button shine */
.btn{ position:relative; overflow:hidden; isolation:isolate; transition:background-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),color var(--dur-fast),translate .3s var(--ease); }
.btn-primary::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%); transform:translateX(-130%); transition:transform .8s var(--ease); }
.btn-primary:hover::after{ transform:translateX(130%); }
.hero-ctas .btn-primary::after,.cta-band .btn-primary::after{ animation:btnShine 4.5s 2.4s ease-in-out infinite; }
@keyframes btnShine{ 0%{ transform:translateX(-130%); } 22%,100%{ transform:translateX(130%); } }

/* Timeline fill on scroll */
.timeline::after{ content:""; position:absolute; left:15px; top:8px; bottom:8px; width:2px; margin-left:-.5px; transform-origin:top; transform:scaleY(var(--tlp,0)); background:linear-gradient(180deg,var(--color-primary-text),var(--color-blush) 60%,var(--color-ice)); box-shadow:0 0 14px rgba(255,77,94,.55); }
@media (min-width:768px){ .timeline::after{ left:19px; } }
.motion .tl-item .tl-dot{ transition:background-color .4s,border-color .4s,box-shadow .4s,transform .4s cubic-bezier(.2,.8,.2,1); }
.motion .tl-item.lit .tl-dot{ border-color:var(--color-primary-text); box-shadow:0 0 0 4px rgba(255,77,94,.16),0 0 16px rgba(255,77,94,.6); transform:scale(1.15); }
.motion .tl-item.lit.milestone .tl-card{ box-shadow:0 0 0 1px rgba(244,207,207,.35),0 16px 40px -12px rgba(217,19,42,.45); }

/* Leaderboard: podium grows, rows cascade (first time only) */
#podium.play:not(.played) .block{ animation:podGrow 1.1s cubic-bezier(.16,1,.3,1) both; }
#podium.play:not(.played) .p1 .block{ animation-delay:.25s; }
#podium.play:not(.played) .p3 .block{ animation-delay:.12s; }
#podium.play:not(.played) .pod > :not(.block){ animation:introUp .7s .5s cubic-bezier(.16,1,.3,1) both; }
@keyframes podGrow{ from{ clip-path:inset(100% 0 0 0); } to{ clip-path:inset(0); } }
#lbBody.play:not(.played) tr{ animation:introUp .5s cubic-bezier(.16,1,.3,1) both; }
#lbBody.play:not(.played) tr:nth-child(n+2){ animation-delay:.04s; } #lbBody.play:not(.played) tr:nth-child(n+3){ animation-delay:.08s; }
#lbBody.play:not(.played) tr:nth-child(n+4){ animation-delay:.12s; } #lbBody.play:not(.played) tr:nth-child(n+5){ animation-delay:.16s; }
#lbBody.play:not(.played) tr:nth-child(n+6){ animation-delay:.2s; } #lbBody.play:not(.played) tr:nth-child(n+8){ animation-delay:.26s; }

/* Register rail: line draws, dots pop */
.rail::before{ transform-origin:left; transform:scaleX(0); transition:transform 1.4s .2s cubic-bezier(.16,1,.3,1); }
.rail.in::before{ transform:scaleX(1); }
.rail.in .rail-dot{ animation:pop .55s cubic-bezier(.2,1.4,.4,1) both; }
.rail.in li:nth-child(2) .rail-dot{ animation-delay:.12s; } .rail.in li:nth-child(3) .rail-dot{ animation-delay:.24s; }
.rail.in li:nth-child(4) .rail-dot{ animation-delay:.36s; } .rail.in li:nth-child(5) .rail-dot{ animation-delay:.48s; }
.rail.in li:nth-child(6) .rail-dot{ animation-delay:.6s; }
@keyframes pop{ from{ transform:scale(.4); opacity:0; } to{ transform:none; opacity:1; } }
.rail li.current .rail-dot{ animation:pop .55s cubic-bezier(.2,1.4,.4,1) both,pulseIce 2.2s 1s infinite; }
@keyframes pulseIce{ 0%{ box-shadow:0 0 0 0 rgba(156,203,239,.5); } 70%{ box-shadow:0 0 0 12px rgba(156,203,239,0); } 100%{ box-shadow:0 0 0 0 rgba(156,203,239,0); } }

/* Reveal: a touch of blur for depth */
.motion .reveal{ filter:blur(6px); transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease); }
.motion .reveal.in{ filter:none; }

@media (prefers-reduced-motion:reduce){
  .rail::before{ transform:none; }
  .timeline::after,.scroll-progress,.hero-fx,.hero::before{ display:none; }
}

/* LINE Login: brand-green button per LINE guidelines, "or" divider, connected-account chip */
.btn-line{ background:#06C755; color:#fff; }
.btn-line:hover{ background:#05B34C; box-shadow:0 0 0 4px rgba(6,199,85,.18); }
.btn-line:active{ background:#048F3D; transform:translateY(1px); }
.btn-line svg{ width:22px; height:22px; }
.line-entry{ margin-bottom:6px; }
.or{ display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--text-muted); font-size:13.5px; }
.or::before,.or::after{ content:""; flex:1; height:1px; background:var(--line); }
.line-chip{ display:flex; align-items:center; gap:12px; padding:12px 14px; margin-bottom:20px; border:1px solid rgba(6,199,85,.45); background:rgba(6,199,85,.08); border-radius:var(--radius-md); }
.line-chip b{ display:block; color:var(--text-heading); font-size:14.5px; }
.line-chip span{ font-size:13px; }
.line-chip > div{ flex:1; min-width:0; }
.line-chip .btn{ flex:none; }
.line-dot{ flex:none; width:36px; height:36px; border-radius:10px; background:#06C755; color:#fff; display:grid; place-items:center; }
.line-dot svg{ width:22px; height:22px; }
.line-badge{ display:inline-flex; align-items:center; gap:6px; padding:2px 10px 2px 6px; border-radius:var(--radius-pill); background:rgba(6,199,85,.14); color:#3FE08A; font-size:12.5px; font-weight:600; vertical-align:middle; }
.line-badge svg{ width:14px; height:14px; }
/* iOS Safari zooms into any focused field under 16px; keep form text at 16px+ on touch screens */
@media (hover:none) and (pointer:coarse){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea{ font-size:max(16px,1em)!important; }
}