/* ====== S8 Design System ====== */
:root{
  /* Brand */
  --brand-1:#348EF3;
  --brand-2:#98C5F9;
  --accent:#5eead4;
  --ink:#0a2540;
  --muted:#5b7083;
  --bg:#ffffff;
  --card:#f7f9ff;
  --border:#e6eefc;
  --radius:20px;
  --shadow:0 10px 30px rgba(10,37,64,.08);
  --shadow-strong:0 20px 50px rgba(10,37,64,.16);

  /* Typography */
  --h1:clamp(28px,4.5vw,46px);
  --h2:clamp(20px,3vw,30px);
  --text:16px;

  /* Motion */
  --dur-fast:.2s;
  --dur:.5s;
}
/* Dark mode */
:root[data-theme="dark"]{
  --bg:#0b1220;
  --card:#0f1b33;
  --ink:#e6f0ff;
  --muted:#8aa0c6;
  --border:#1e2a46;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --shadow-strong:0 20px 60px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Bai Jamjuree",system-ui,Arial,sans-serif;
  font-size:var(--text);
  color:var(--ink);
  background: var(--bg);
  line-height:1.7;
  overflow-x:hidden;
}

/* ====== Animated Gradient Background ====== */
.hero{
  position:relative;
  padding:96px 16px 72px;
  text-align:center;
  isolation:isolate;
}
.hero::before{
  content:"";
  position:absolute; inset:-10%;
  background:
    radial-gradient(60% 60% at 20% 20%, rgba(152,197,249,.55), transparent 60%),
    radial-gradient(60% 60% at 80% 30%, rgba(52,142,243,.5), transparent 60%),
    conic-gradient(from 180deg at 50% 50%, #348EF3, #98C5F9, #60a5fa, #348EF3);
  filter: blur(40px) saturate(120%);
  opacity:.55;
  z-index:-1;
  animation: spinBG 18s linear infinite;
}
@keyframes spinBG{to{transform: rotate(360deg)}}

.logo{height:64px;margin-bottom:14px; filter: drop-shadow(0 6px 12px rgba(0,0,0,.15));}
h1{font-size:var(--h1);margin:8px 0 10px;letter-spacing:.2px}
h2{font-size:var(--h2);margin:30px 0 16px}
p.lead{max-width:860px;margin:0 auto 8px;color:var(--muted)}

/* ====== Nav (glass, sticky) ====== */
.nav{
  position:sticky; top:0; z-index:30;
  backdrop-filter: blur(10px);
  background: color-mix(in oklab, var(--bg) 65%, transparent);
  border-bottom:1px solid var(--border);
}
.nav .wrap{
  max-width:1200px; margin:auto; padding:8px 16px;
  display:flex; align-items:center; justify-content:space-between;
}
.nav .left{display:flex; align-items:center; gap:12px}
.nav .brand{font-weight:800; letter-spacing:.4px}
.nav a{
  color:var(--ink); text-decoration:none; font-weight:600;
  padding:10px 14px; border-radius:12px;
}
.nav a:hover{ background:var(--card)}

/* ====== Layout ====== */
.container{max-width:1100px; margin: 0 auto; padding: 32px 16px;}
.grid{display:grid; gap:16px}
.grid.cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* ====== Cards (glass) ====== */
.card{
  background:linear-gradient(180deg, color-mix(in oklab, var(--card) 85%, transparent), color-mix(in oklab, var(--card) 95%, transparent));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
  transition:transform var(--dur), box-shadow var(--dur), border-color var(--dur);
  position:relative; overflow:hidden;
}
.card::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.15) 40%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .8s ease;
}
.card:hover{
  transform: translateY(-4px);
  box-shadow:var(--shadow-strong);
  border-color: color-mix(in oklab, var(--brand-1) 30%, var(--border));
}
.card:hover::after{ transform: translateX(120%); }
.card h3{margin:8px 0 6px}
.card p{color:var(--muted); margin:0}

/* ====== Rainbow CTA ====== */
.btn-rainbow{
  --glow: rgba(255,255,255,.55);
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  font-weight:800; letter-spacing:.4px;
  text-transform:uppercase;
  padding:16px 40px; border-radius:999px;
  color:#fff; text-decoration:none;
  background: linear-gradient(90deg, red, orange, yellow, green, cyan, blue, violet);
  background-size:400% 400%;
  animation: rainbowMove 6s linear infinite;
  box-shadow: 0 0 0 2px rgba(255,255,255,.18), 0 16px 40px rgba(52,142,243,.25);
  position:relative; overflow:hidden; margin-top:14px;
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.btn-rainbow::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(120px 60px at var(--mx,50%) var(--my,50%), var(--glow), transparent 70%);
  opacity:.0; transition: opacity var(--dur-fast);
}
.btn-rainbow:hover{ transform: translateY(-2px) scale(1.02); box-shadow:0 20px 60px rgba(52,142,243,.35) }
.btn-rainbow:hover::before{ opacity:.9 }
@keyframes rainbowMove{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* ====== Reveal on scroll ====== */
.reveal{opacity:0; transform: translateY(12px); transition: opacity .65s ease, transform .65s ease}
.reveal.show{opacity:1; transform:none}

/* ====== Footer ====== */
footer{border-top:1px solid var(--border); padding:28px 16px; text-align:center; color:var(--muted)}

/* ====== Accessibility & Motion ====== */
@media (prefers-reduced-motion: reduce){
  *{animation: none !important; transition: none !important}
}

/* ====== Responsive tweaks ====== */
@media (max-width:680px){
  .nav .right{display:none}
}