:root{--bg:#fff4f9;--ink:#3a2432;--mut:#8b6a7c;--pink:#ff7eb6;--rose:#ff5d8f;--lav:#b9a4ff;--sky:#8fd3ff;--card:#ffffffcc;--bd:#ffd0e4;--r:22px}
@media(prefers-color-scheme:dark){:root{--bg:#1b1218;--ink:#fbeaf3;--mut:#c9a3b8;--card:#2b1d26cc;--bd:#4c3243}}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.7 "Noto Sans Thai",system-ui,sans-serif;overflow-x:hidden}
h1,h2,h3,.logo{font-family:"Fredoka","Noto Sans Thai",sans-serif;line-height:1.2}
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden}
.bg i{position:absolute;width:46vmax;height:46vmax;border-radius:50%;filter:blur(70px);opacity:.5;animation:drift 18s ease-in-out infinite alternate}
.bg i:nth-child(1){background:var(--pink);top:-15vmax;left:-10vmax}
.bg i:nth-child(2){background:var(--lav);right:-14vmax;top:20vh;animation-delay:-6s}
.bg i:nth-child(3){background:var(--sky);bottom:-20vmax;left:20vw;animation-delay:-11s}
@keyframes drift{to{transform:translate(6vw,8vh) scale(1.15)}}
#petals span{position:fixed;top:-8vh;z-index:0;pointer-events:none;animation:fall linear infinite}
@keyframes fall{to{transform:translate(12vw,110vh) rotate(540deg)}}
.nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:14px;padding:12px 5vw;backdrop-filter:blur(14px)}
.logo{font-size:1.35rem;font-weight:600;color:var(--rose);text-decoration:none;margin-right:auto}
.nav a{color:var(--ink);text-decoration:none;font-size:.95rem}.nav a:hover{color:var(--rose)}
button,.btn{font:inherit;cursor:pointer}
#lang{border:2px solid var(--pink);background:none;color:var(--ink);border-radius:99px;padding:2px 14px}
main{max-width:1080px;margin:0 auto;padding:0 5vw 40px}
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;min-height:82vh;padding:36px 0}
h1{font-size:clamp(2.3rem,6vw,4rem);margin:0 0 12px;background:linear-gradient(100deg,var(--rose),var(--lav) 55%,var(--sky),var(--rose));-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200%;animation:shine 6s linear infinite}
@keyframes shine{to{background-position:200% 0}}
.hero p{color:var(--mut);font-size:1.1rem;max-width:34ch}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.btn{display:inline-block;padding:12px 26px;border-radius:99px;text-decoration:none;font-weight:600;background:linear-gradient(135deg,var(--pink),var(--rose));color:#fff;box-shadow:0 8px 24px #ff5d8f55;transition:transform .2s}
.btn:hover{transform:translateY(-3px) scale(1.03)}.btn.ghost{background:none;color:var(--ink);border:2px solid var(--pink);box-shadow:none}
.stage{background:var(--card);border:2px solid var(--bd);border-radius:28px;padding:16px;box-shadow:0 20px 60px #ff7eb633}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.tabs button{border:0;background:var(--bd);color:var(--ink);border-radius:99px;padding:4px 14px;font-size:.9rem}
.tabs button.on{background:var(--rose);color:#fff}
.scene{border-left:5px solid var(--c,var(--pink));background:#00000008;border-radius:14px;padding:14px 16px;min-height:220px;animation:pop .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.96)}}
.scene h3{margin:0 0 6px}.row{margin:4px 0;color:var(--mut)}
.bar{display:flex;gap:2px;margin:10px 0;font-size:1.1rem}
.bar b{font-weight:400;opacity:.25;animation:beat 6s linear infinite;animation-delay:calc(var(--i)*.55s)}
@keyframes beat{0%,8%{opacity:.25;transform:scale(1)}12%,100%{opacity:1;transform:scale(1.15)}}
.btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.btns span{background:var(--bd);border-radius:10px;padding:2px 12px;animation:pop .4s backwards;animation-delay:calc(var(--i)*.08s + .3s)}
section{padding:54px 0 10px}h2{font-size:1.9rem;text-align:center;margin:0 0 26px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.card{background:var(--card);border:2px solid var(--bd);border-radius:var(--r);padding:18px;transition:transform .25s}
.card:hover{transform:translateY(-6px) rotate(-1deg)}
.card .ic{font-size:2rem;display:block;transition:transform .4s}.card:hover .ic{transform:scale(1.3) rotate(12deg)}
.card h3{margin:.3em 0}.card p{margin:0;color:var(--mut);font-size:.95rem}
.rv{opacity:0;transform:translateY(24px);transition:.7s}.rv.in{opacity:1;transform:none}
footer{text-align:center;color:var(--mut);padding:36px 5vw 60px}footer a{color:var(--rose)}
.lang{display:flex;gap:8px;justify-content:center;margin:14px 0}
.lang button{border:2px solid var(--pink);background:var(--card);color:var(--ink);border-radius:99px;padding:4px 16px}
.lang button.on{background:var(--rose);color:#fff;border-color:var(--rose)}
.legal h2{border-left:6px solid var(--pink);padding-left:12px;text-align:left}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
article{background:var(--card);border:2px solid var(--bd);border-radius:var(--r);padding:6px 20px 14px;overflow-wrap:anywhere}
article h3{font-size:1rem;color:var(--rose);margin:1.1em 0 .2em}
body.only-th [lang=en],body.only-en [lang=th]{display:none}
body.only-th .cols,body.only-en .cols{grid-template-columns:1fr}
:focus-visible{outline:3px solid var(--lav);outline-offset:3px}
@media(max-width:800px){.hero,.cols{grid-template-columns:1fr}.hero{min-height:0}.nav a:not(.logo){display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

/* ---- one page-load moment: hero rises once, staggered — not motion scattered everywhere ---- */
@media(prefers-reduced-motion:no-preference){
  .hero h1{animation:hero-rise .7s cubic-bezier(.2,.8,.2,1) both}
  .hero p{animation:hero-rise .7s cubic-bezier(.2,.8,.2,1) .1s both}
  .hero .cta{animation:hero-rise .7s cubic-bezier(.2,.8,.2,1) .2s both}
}
@keyframes hero-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---- faux-glass cards: a frosted look via gradient + inset highlight, not per-card
   backdrop-filter — stacking real blur on a whole grid of cards is what makes this kind
   of page stutter on older phones (iPhone 11 included), so the blur budget below is spent
   on the one or two panels on screen at a time (nav, the ⋯ sheet) instead. ---- */
.card,.pcard,.cmdgrp,.stage,article,.status-row{
  background:linear-gradient(165deg,var(--card),color-mix(in srgb,var(--card) 55%,transparent));
  box-shadow:inset 0 1px 0 #ffffff30,0 14px 34px -18px #00000030;
}

/* ---- subtle grain over the drifting blobs so the gradient doesn't look flat/plasticky ---- */
.bg::after{content:"";position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;pointer-events:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
  background-size:180px 180px}

/* ---- cross-page navigation feels like an app, not a hard reload — no JS, ignored where unsupported ---- */
@media(prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:elv-out .35s cubic-bezier(.2,.8,.2,1) both}
  ::view-transition-new(root){animation:elv-in .4s cubic-bezier(.2,.8,.2,1) both}
  @keyframes elv-out{to{opacity:0;transform:scale(.985)}}
  @keyframes elv-in{from{opacity:0;transform:scale(1.015)}}
}