:root{
  --bg:#F7F8FB; --surface:#FFFFFF; --surface-2:#F1F2F7;
  --text:#0B0F19; --muted:#5B6270; --border:#E4E6EE;
  --primary:#4F46E5; --primary-dark:#3730A3; --accent:#EEF0FF; --ring:#4F46E5;
  --btn-text:#FFFFFF; --gold:#B7791F;
}
.dark{
  --bg:#0A0C14; --surface:#12141F; --surface-2:#181B29;
  --text:#F3F4F8; --muted:#9AA0B4; --border:#242737;
  --primary:#818CF8; --primary-dark:#4F46E5; --accent:#1B1E30; --ring:#818CF8;
  --btn-text:#0A0C14; --gold:#E3B34E;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:100px;}
body{background:var(--bg); color:var(--text); font-family:'Inter','Noto Sans Thai',sans-serif; transition:background .3s,color .3s;}
.grad-text{background:linear-gradient(90deg,var(--primary),#22D3EE); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero-glow{position:absolute; inset:0; background:radial-gradient(600px circle at 50% 0%, rgba(79,70,229,.18), transparent 60%); pointer-events:none;}
.glass{background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:blur(14px); border:1px solid var(--border);}
.card-hover{transition:transform .3s ease, box-shadow .3s ease;}
.card-hover:hover{transform:translateY(-4px); box-shadow:0 20px 40px -20px rgba(0,0,0,.25);}
.btn-primary{background:var(--primary-dark); color:#fff; border-radius:.75rem; padding:.75rem 1.5rem; font-weight:600; transition:opacity .2s; display:inline-flex; align-items:center; gap:.5rem;}
.dark .btn-primary{background:var(--primary-dark); color:#fff;}
.btn-primary:hover{opacity:.88;}
.btn-outline{border:1px solid var(--border); color:var(--text); border-radius:.75rem; padding:.75rem 1.5rem; font-weight:600; transition:border-color .2s;}
.btn-outline:hover{border-color:var(--primary);}
.badge{background:var(--accent); color:var(--primary-dark); border-radius:999px; padding:.3rem .9rem; font-size:.78rem; font-weight:600; display:inline-flex; align-items:center; gap:.4rem;}
.dark .badge{color:var(--primary);}
.badge-soon{background:var(--surface-2); color:var(--muted); border-radius:999px; padding:.3rem .8rem; font-size:.72rem; font-weight:600;}
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
.reveal.show{opacity:1; transform:translateY(0);}
nav.floating{position:fixed; top:14px; left:50%; transform:translateX(-50%); width:min(1180px,94%); z-index:50; border-radius:1rem;}
.navlink{color:var(--muted); font-size:.92rem; font-weight:500; transition:color .2s;}
.navlink:hover, .navlink.active{color:var(--text);}
footer a{color:var(--muted);}
footer a:hover{color:var(--text);}
.faq-item[open] summary .chev{transform:rotate(180deg);}
.step-num{width:34px;height:34px;border-radius:9999px;background:var(--accent);color:var(--primary-dark);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;}
.dark .step-num{color:var(--primary);}
::selection{background:var(--primary); color:#fff;}
:focus-visible{outline:2px solid var(--ring); outline-offset:2px;}
.pkg-thumb{aspect-ratio:16/10;background:linear-gradient(135deg,var(--accent),var(--surface-2));border-radius:1rem;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.skip-link{position:absolute; left:-9999px; top:0; background:var(--primary-dark); color:#fff; padding:.75rem 1.25rem; border-radius:0 0 .5rem 0; z-index:100;}
.skip-link:focus{left:0;}
.breadcrumb{font-size:.82rem; color:var(--muted);}
.breadcrumb a{color:var(--muted);}
.breadcrumb a:hover{color:var(--text);}
img{max-width:100%; height:auto;}