:root{--bg:#050d1a;--bg-elevated:#0a1527db;--bg-panel:#081222eb;--surface:#ffffff0b;--surface-strong:#ffffff13;--border:#f5c8422e;--border-strong:#f5c84261;--text:#e2e8f0;--muted:#94a3b8;--accent:#f5c842;--accent-2:#1e6fff;--shadow-gold:0 18px 50px #f5c8422e;--shadow-blue:0 24px 60px #1e6fff38;--max-width:1200px;--radius-lg:28px;--radius-md:20px;--radius-sm:14px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{color:var(--text);background:radial-gradient(circle at 0 0,#1e6fff33,#0000 32%),radial-gradient(circle at 100% 0,#f5c8422e,#0000 24%),linear-gradient(#040913 0%,#050d1a 35%,#071220 100%);margin:0;font-family:Sora,Noto Sans Thai,Segoe UI,sans-serif}a{color:inherit}img{max-width:100%}.site-shell{position:relative;overflow:hidden}.site-shell:before,.site-shell:after{content:"";pointer-events:none;z-index:0;filter:blur(24px);border-radius:999px;width:420px;height:420px;position:fixed;inset:auto}.site-shell:before{background:radial-gradient(circle,#1e6fff38,#0000 68%);top:-120px;left:-120px}.site-shell:after{background:radial-gradient(circle,#f5c84224,#0000 70%);top:10%;right:-120px}.shell-content{z-index:1;position:relative}.container{width:min(calc(100% - 32px), var(--max-width));margin:0 auto}.site-header{z-index:100;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:linear-gradient(#040b16f5,#040b16db);border-bottom:1px solid #f5c8421f;position:fixed;top:0;left:0;right:0}.header-inner{justify-content:space-between;align-items:center;gap:16px;min-height:76px;padding:14px 0;display:flex}.brand-lockup{align-items:center;gap:12px;text-decoration:none;display:flex}.brand-lockup strong{color:#fff3bf;letter-spacing:.08em;text-transform:uppercase;font-size:.72rem;display:block}.brand-lockup span{color:var(--muted);font-size:.82rem;display:block}.nav-cluster{background:#ffffff05;border:1px solid #ffffff0d;border-radius:999px;align-items:center;gap:6px;padding:8px;display:none}.nav-link{color:#e2e8f0d1;border-radius:999px;padding:9px 12px;font-size:.92rem;text-decoration:none;transition:background-color .18s,color .18s,transform .18s}.nav-link:hover{color:#fff7db;background:#f5c84214;transform:translateY(-1px)}.cta-cluster{align-items:center;gap:10px;display:flex}.btn{border:1px solid #0000;border-radius:999px;justify-content:center;align-items:center;gap:8px;min-height:48px;padding:0 20px;font-weight:700;text-decoration:none;transition:transform .18s,box-shadow .18s,border-color .18s,background .18s;display:inline-flex}.btn:hover{transform:translateY(-1px)}.btn-primary{color:#091321;background:linear-gradient(135deg, #fff2a3 0%, var(--accent) 45%, #d39411 100%);box-shadow:var(--shadow-gold)}.btn-outline{color:var(--accent);border-color:var(--accent);background:#f5c8420a;box-shadow:inset 0 0 0 1px #f5c84214}.btn-ghost{color:var(--text);background:#94a3b80d;border-color:#94a3b82e}.hero{padding:116px 0 34px}.hero-grid{gap:22px;display:grid}.hero-banner{isolation:isolate;border-radius:calc(var(--radius-lg) + 4px);box-shadow:var(--shadow-blue);background:linear-gradient(140deg,#0f1d34f5,#040b16eb),radial-gradient(circle at 20% 20%,#f5c8421a,#0000 30%);border:1px solid #f5c84233;padding:28px;position:relative;overflow:hidden}.hero-banner:before,.hero-banner:after{content:"";pointer-events:none;position:absolute;inset:auto}.hero-banner:before{background:radial-gradient(circle,#1e6fff66,#0000 70%);border-radius:50%;width:260px;height:260px;top:-80px;right:-40px}.hero-banner:after{background:linear-gradient(90deg,#f5c842b3,#0000);width:320px;height:2px;bottom:28px;left:28px}.eyebrow{color:#fff0b3;letter-spacing:.14em;text-transform:uppercase;background:#f5c84214;border:1px solid #f5c84238;border-radius:999px;align-items:center;gap:8px;margin-bottom:16px;padding:8px 14px;font-size:.78rem;display:inline-flex}.eyebrow:before{content:"";background:var(--accent);border-radius:50%;width:9px;height:9px;box-shadow:0 0 18px #f5c842e6}.hero-copy{z-index:1;gap:18px;display:grid;position:relative}.hero-copy h1{text-transform:uppercase;letter-spacing:.04em;margin:0;font-size:clamp(2.8rem,10vw,5.6rem);line-height:.92}.hero-copy h1 span{color:#0000;background:linear-gradient(135deg, #fff7d4 10%, var(--accent) 42%, #ffef8e 70%, #1e6fff 100%);text-shadow:0 0 32px #f5c84233;-webkit-background-clip:text;background-clip:text;display:block}.hero-copy p{color:#e2e8f0db;max-width:780px;margin:0;font-size:1.05rem;line-height:1.8}.hero-metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;display:grid}.metric-card{border-radius:var(--radius-md);background:linear-gradient(#ffffff0f,#ffffff06),radial-gradient(circle at 100% 0,#1e6fff26,#0000 35%);border:1px solid #ffffff0f;padding:18px}.metric-card strong{color:#fff3b0;margin-bottom:6px;font-size:1.15rem;display:block}.metric-card span{color:var(--muted);font-size:.9rem;line-height:1.5}.hero-visual-card{border-radius:var(--radius-lg);box-shadow:var(--shadow-gold);background:linear-gradient(#ffffff0a,#ffffff05),radial-gradient(circle at 80% 20%,#1e6fff40,#0000 38%);border:1px solid #f5c84229;padding:18px}.hero-visual-card img{border-radius:18px;width:100%;margin:0 auto;display:block}.content-grid{gap:28px;padding-bottom:80px;display:grid}.toc-panel,.section-panel,.content-strip,.footer-panel{border-radius:var(--radius-lg);background:linear-gradient(#ffffff0b,#ffffff05),linear-gradient(#06101ef0,#06101ee0);border:1px solid #f5c84224;box-shadow:0 20px 60px #030a1457}.toc-panel{padding:24px}.panel-label{color:var(--accent);letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px;font-size:.78rem;font-weight:800}.toc-list{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px 18px;margin:0;padding:0;list-style:none;display:grid}.section-panel{gap:20px;padding:28px;display:grid;position:relative;overflow:hidden}.section-panel:after{content:"";background:radial-gradient(circle,#1e6fff29,#0000 68%);border-radius:50%;width:220px;height:220px;position:absolute;inset:auto -60px -80px auto}.section-heading{z-index:1;gap:8px;display:grid;position:relative}.section-heading h2{color:#fff8d1;margin:0;font-size:clamp(1.7rem,4vw,2.45rem)}.section-heading p{max-width:760px;color:var(--muted);margin:0;line-height:1.8}.section-body{z-index:1;gap:16px;display:grid;position:relative}.section-body h3{color:var(--accent);margin:0 0 4px;font-size:1.08rem}.section-body p{color:#e2e8f0e6;margin:0;line-height:1.95}.section-body strong{color:#fff1a4}.section-body a{color:#8bc0ff}.section-actions{flex-wrap:wrap;gap:12px;padding-top:4px;display:flex}.accent-rule{background:linear-gradient(90deg, var(--accent), var(--accent-2));border-radius:999px;width:88px;height:4px;box-shadow:0 0 18px #f5c84273}.info-grid,.trust-grid,.image-grid,.game-grid{gap:16px;display:grid}.trust-grid,.image-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.game-grid{grid-template-columns:repeat(1,minmax(0,1fr))}.mini-card{border-radius:var(--radius-md);background:linear-gradient(#f5c8420f,#ffffff06),linear-gradient(#07101df5,#07101de0);border:1px solid #ffffff0f;padding:18px}.mini-card strong{color:#fff3b3;margin-bottom:8px;display:block}.mini-card span{color:var(--muted);line-height:1.75}.content-strip{padding:18px}.content-strip img{border-radius:18px;width:100%;height:auto;display:block}.game-frame{box-shadow:var(--shadow-gold);background:#050d1adb;border:1px solid #f5c84233;border-radius:18px;overflow:hidden}.game-frame img{width:100%;height:auto;display:block}.game-frame span{color:#fff0b0;padding:12px 14px;font-weight:700;display:block}.faq-list{gap:16px;display:grid}.faq-item{border-radius:var(--radius-md);background:#ffffff06;border:1px solid #ffffff0f;padding:18px}.faq-item h3{color:#fff7cf;margin:0 0 8px}.footer-wrap{padding-bottom:40px}.footer-panel{flex-direction:column;gap:18px;padding:22px 24px;display:flex}.footer-meta{color:var(--muted);flex-direction:column;gap:12px;display:flex}.footer-links{flex-wrap:wrap;gap:14px 18px;display:flex}.footer-links a{color:#d9e6fb;text-decoration:none}@media (min-width:860px){.nav-cluster{display:flex}.hero-grid{grid-template-columns:minmax(0,1.3fr) minmax(340px,.8fr);align-items:stretch}.game-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.footer-panel,.footer-meta{flex-direction:row;justify-content:space-between;align-items:center}}@media (max-width:859px){.header-inner{flex-wrap:wrap}.cta-cluster{width:100%}.cta-cluster .btn{flex:1 1 0}.hero-metrics{grid-template-columns:1fr}}@media (max-width:540px){.container{width:min(calc(100% - 20px), var(--max-width))}.hero{padding-top:146px}.section-panel,.toc-panel,.hero-banner,.hero-visual-card{padding:20px}.brand-lockup span{display:none}.header-inner{gap:12px}}
