:root{
  --bg:#f5fbff;
  --surface:rgba(255,255,255,.72);
  --surface-strong:rgba(255,255,255,.9);
  --text:#0f1f33;
  --muted:#5b6b80;
  --blue:#0c4da2;
  --cyan:#08d9ff;
  --cyan2:#36f5ff;
  --deep:#071f4d;
  --silver:#d9e7f3;
  --line:rgba(11,87,164,.13);
  --shadow:0 24px 80px rgba(8,58,110,.14);
  --radius:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Inter","Noto Sans Thai",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 14% 16%, rgba(8,217,255,.18), transparent 26rem),
    radial-gradient(circle at 82% 10%, rgba(12,77,162,.14), transparent 28rem),
    linear-gradient(180deg,#ffffff 0%,var(--bg) 44%,#ffffff 100%);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input{font:inherit}
.orb{position:fixed;border-radius:999px;pointer-events:none;filter:blur(14px);z-index:-1;opacity:.35;animation:float 9s ease-in-out infinite alternate}
.orb-1{width:280px;height:280px;background:#55e9ff;left:-90px;top:170px}
.orb-2{width:220px;height:220px;background:#0c4da2;right:-80px;top:240px;animation-delay:1s}
.orb-3{width:160px;height:160px;background:#a7f3ff;left:45%;bottom:120px;animation-delay:2s}
@keyframes float{to{transform:translate3d(30px,-40px,0) scale(1.08)}}
.site-header{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px clamp(18px,4vw,56px);
  backdrop-filter:blur(18px);
  background:rgba(255,255,255,.72);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.16em;color:var(--blue)}
.brand img{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 6px 18px rgba(8,217,255,.3))}
.main-nav{display:flex;gap:6px;align-items:center}
.main-nav a{padding:10px 13px;border-radius:999px;color:#17365d;font-weight:700;font-size:.94rem}
.main-nav a:hover{background:rgba(8,217,255,.12)}
.nav-pill{background:linear-gradient(135deg,var(--blue),#08aeea)!important;color:white!important;box-shadow:0 10px 30px rgba(12,77,162,.18)}
.nav-toggle{display:none;border:0;background:transparent;font-size:1.7rem;color:var(--blue)}
.section-pad{padding:clamp(58px,8vw,118px) clamp(20px,5vw,78px)}
.compact{padding-top:72px;padding-bottom:72px}
.hero{min-height:calc(100vh - 74px);display:grid;grid-template-columns:1.06fr .94fr;align-items:center;gap:48px;position:relative}
.eyebrow,.section-kicker{display:inline-flex;align-items:center;gap:10px;font-weight:900;color:var(--blue);letter-spacing:.08em;text-transform:uppercase;font-size:.86rem}
.eyebrow span{width:42px;height:2px;background:linear-gradient(90deg,var(--cyan),var(--blue));display:inline-block}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(2.45rem,5vw,5.7rem);line-height:.98;margin-bottom:22px;letter-spacing:-.055em;background:linear-gradient(135deg,#061a41 0%,#0c4da2 48%,#0cdcff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-size:clamp(1.8rem,3.3vw,3.2rem);line-height:1.08;letter-spacing:-.035em;margin-bottom:16px;color:#081d43}
h3{font-size:1.23rem;margin-bottom:10px;color:#092451}
.lead{font-size:clamp(1.05rem,1.6vw,1.32rem);line-height:1.85;color:var(--muted);max-width:820px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.hero-actions.center{justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;padding:14px 20px;border:1px solid transparent;font-weight:900;transition:.22s ease;cursor:pointer;white-space:nowrap}
.btn.primary{background:linear-gradient(135deg,var(--blue),#0aaeea 78%,var(--cyan));color:white;box-shadow:0 18px 44px rgba(12,77,162,.24)}
.btn.secondary{background:white;color:var(--blue);border-color:rgba(12,77,162,.15);box-shadow:0 12px 34px rgba(8,58,110,.09)}
.btn.ghost{background:rgba(255,255,255,.38);color:#17365d;border-color:rgba(12,77,162,.12)}
.btn:hover{transform:translateY(-3px);box-shadow:0 20px 52px rgba(12,77,162,.22)}
.btn.mini{padding:10px 14px;font-size:.92rem;margin-top:auto}.btn.full{width:100%;margin-top:18px}
.trust-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;color:#40607f;font-weight:800}
.trust-row span{padding:9px 13px;background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:999px}
.glass{background:var(--surface);border:1px solid rgba(255,255,255,.8);box-shadow:var(--shadow);backdrop-filter:blur(18px)}
.hero-visual{position:relative;min-height:620px;display:grid;place-items:center}
.logo-card{width:min(520px,100%);border-radius:38px;padding:34px;position:relative;overflow:hidden;transform-style:preserve-3d}
.logo-card:before,.cta-inner:before{content:"";position:absolute;inset:-2px;background:radial-gradient(circle at 50% 35%,rgba(8,217,255,.22),transparent 45%);z-index:-1}
.logo-card img{border-radius:26px;mix-blend-mode:multiply}
.pulse-ring{position:absolute;width:160px;height:160px;border:1px solid rgba(8,217,255,.36);border-radius:50%;top:30%;left:50%;transform:translate(-50%,-50%);animation:pulse 2.5s infinite}
@keyframes pulse{0%{transform:translate(-50%,-50%) scale(.7);opacity:.9}100%{transform:translate(-50%,-50%) scale(1.8);opacity:0}}
.founder-card{position:absolute;right:0;bottom:30px;display:flex;align-items:end;gap:16px;border-radius:26px;padding:12px 18px 12px 8px;max-width:340px}
.founder-card img{width:124px;height:172px;object-fit:contain;align-self:flex-end;filter:drop-shadow(0 15px 22px rgba(0,0,0,.12))}
.founder-card strong{display:block;color:#061a41}.founder-card small{color:var(--muted);font-weight:700}
.stats-wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:0 clamp(20px,5vw,78px) 30px;margin-top:-44px;position:relative;z-index:3}
.stat{border-radius:24px;padding:22px;text-align:center}.stat b{display:block;font-size:clamp(1.75rem,3vw,2.7rem);color:var(--blue);letter-spacing:-.04em}.stat span{color:var(--muted);font-weight:800}
.vision{display:grid;grid-template-columns:.85fr 1.15fr;gap:54px;align-items:center}
.vision-image{background:linear-gradient(145deg,rgba(8,217,255,.16),rgba(12,77,162,.08));border-radius:40px;padding:18px;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.7)}
.vision-image img{width:100%;border-radius:30px;object-fit:cover;background:white}
.vision-copy blockquote{font-size:clamp(1.15rem,2vw,1.7rem);line-height:1.82;margin:18px 0 20px;padding:24px;border-left:5px solid var(--cyan);background:rgba(255,255,255,.72);border-radius:0 24px 24px 0;color:#183253;box-shadow:0 20px 50px rgba(8,58,110,.08)}
.signature{font-weight:900;color:var(--blue)}.signature span{font-weight:700;color:var(--muted)}
.section-head{text-align:center;max-width:860px;margin:0 auto 34px}.section-head p:not(.section-kicker){color:var(--muted);line-height:1.8;font-size:1.04rem}.section-kicker{justify-content:center;display:flex;margin-bottom:10px}
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.feature-card{border-radius:26px;padding:24px;min-height:242px;display:flex;flex-direction:column;transition:.24s ease;animation-delay:var(--d)}.feature-card:hover{transform:translateY(-8px)}
.icon-bubble{width:54px;height:54px;display:grid;place-items:center;border-radius:18px;background:linear-gradient(135deg,rgba(8,217,255,.24),rgba(12,77,162,.12));font-size:1.72rem;margin-bottom:18px}.feature-card p,.product-card p{color:var(--muted);line-height:1.75}.feature-card a{margin-top:auto;color:var(--blue);font-weight:900}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.product-card{border-radius:28px;padding:24px;display:flex;flex-direction:column;min-height:390px;position:relative;overflow:hidden}.product-card:after{content:"";position:absolute;right:-60px;top:-60px;width:160px;height:160px;background:rgba(8,217,255,.13);border-radius:50%}.product-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:18px}.badge{background:linear-gradient(135deg,#e8fbff,#fff);border:1px solid rgba(8,217,255,.3);color:var(--blue);font-weight:900;border-radius:999px;padding:8px 11px}.product-top strong{color:#0c4da2;font-size:1.15rem}.product-card ul{padding-left:18px;color:#36516f;line-height:1.9;margin-bottom:24px}
.tool-panel{border-radius:34px;padding:34px;display:grid;grid-template-columns:.86fr 1.14fr;gap:28px;align-items:center}.tool-panel p{color:var(--muted);line-height:1.8}.tool-list{display:flex;gap:12px;flex-wrap:wrap}.tool-list span{padding:12px 14px;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid var(--line);font-weight:900;color:#17365d}
.game-layout{display:grid;grid-template-columns:1fr 340px;gap:22px}.game-card,.leaderboard{border-radius:30px;padding:20px}.game-top{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}.game-top div{border-radius:18px;background:rgba(255,255,255,.72);padding:12px;text-align:center;border:1px solid var(--line)}.game-top span{display:block;color:var(--muted);font-size:.85rem;font-weight:800}.game-top b{display:block;font-size:1.35rem;color:var(--blue)}
.spark-game{height:360px;border-radius:24px;background:radial-gradient(circle at 50% 50%,rgba(8,217,255,.18),rgba(12,77,162,.07)),linear-gradient(145deg,#f9fdff,#eaf7ff);border:1px solid rgba(12,77,162,.14);position:relative;overflow:hidden;cursor:crosshair}.spark{position:absolute;width:48px;height:48px;border-radius:50%;background:radial-gradient(circle,#fff 0 12%,#36f5ff 24%,#0aaeea 55%,#0c4da2 100%);box-shadow:0 0 22px rgba(8,217,255,.9),0 0 60px rgba(8,217,255,.45);animation:sparkPop .85s ease}.spark:after{content:"✦";position:absolute;inset:0;display:grid;place-items:center;color:white;font-size:1.05rem}@keyframes sparkPop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.game-actions{display:flex;gap:10px;margin-top:14px}.game-actions input{flex:1;border:1px solid var(--line);border-radius:999px;padding:0 16px;background:white;min-width:0}.leaderboard h3{margin-bottom:16px}.leaderboard ol{margin:0;padding-left:24px;line-height:2.05;color:#17365d;font-weight:800}.leaderboard li::marker{color:var(--blue);font-weight:900}
.idea-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.idea{border-radius:24px;padding:20px}.idea b{display:block;color:var(--blue);font-size:1.08rem;margin-bottom:9px}.idea span{color:var(--muted);line-height:1.65}
.cta{text-align:center}.cta-inner{position:relative;overflow:hidden;border-radius:38px;padding:48px 28px}.cta-inner img{width:112px;margin:0 auto 16px}.cta-inner p{color:var(--muted);font-size:1.08rem}
.site-footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:26px clamp(18px,4vw,56px);border-top:1px solid var(--line);color:#4d6380;font-weight:700}.site-footer a{color:var(--blue);font-weight:900}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease}.reveal.show{opacity:1;transform:none}.delay-1{transition-delay:.12s}
@media (max-width: 980px){
  .hero,.vision,.tool-panel,.game-layout{grid-template-columns:1fr}.hero{padding-top:56px}.hero-visual{min-height:520px}.stats-wrap,.cards-grid,.product-grid,.idea-grid{grid-template-columns:repeat(2,1fr)}.founder-card{right:10px}.main-nav{position:fixed;right:18px;left:18px;top:76px;display:none;flex-direction:column;align-items:stretch;background:rgba(255,255,255,.94);border:1px solid var(--line);padding:14px;border-radius:24px;box-shadow:var(--shadow)}.main-nav.open{display:flex}.main-nav a{text-align:center}.nav-toggle{display:block}
}
@media (max-width: 640px){
  .section-pad{padding-left:16px;padding-right:16px}.stats-wrap,.cards-grid,.product-grid,.idea-grid{grid-template-columns:1fr}.stats-wrap{margin-top:0}.hero-actions{flex-direction:column}.btn{width:100%}.hero-visual{min-height:auto}.logo-card{padding:18px;border-radius:28px}.founder-card{position:relative;right:auto;bottom:auto;margin-top:16px;width:100%;max-width:none}.game-top{grid-template-columns:1fr}.game-actions{flex-direction:column}.game-actions input{min-height:48px}.spark-game{height:300px}.site-footer{display:block;text-align:center}.brand span{font-size:.9rem;letter-spacing:.12em}
}