:root{
  --bg:#070b14;
  --panel:rgba(255,255,255,.035);
  --line:rgba(255,255,255,.09);
  --ink:#e8ecf5;
  --muted:#8b97ae;
  --accent:#5b8cff;
  --accent2:#22d3ee;
  --ok:#34d399;
  --radius:18px;
  --font:"Segoe UI",system-ui,-apple-system,"Noto Sans Thai","Sarabun",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 20px;
  position:relative;
  overflow-x:hidden;
}

/* พื้นหลัง */
.grid-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 40%, #000 40%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%, #000 40%, transparent 100%);
}
.glow{
  position:fixed; z-index:0; pointer-events:none;
  top:-18vh; left:50%; transform:translateX(-50%);
  width:min(900px,110vw); height:min(900px,110vw);
  background:radial-gradient(circle, rgba(91,140,255,.20) 0%, rgba(34,211,238,.09) 38%, transparent 68%);
  filter:blur(12px);
}

.wrap{position:relative; z-index:1; width:100%; max-width:660px}

/* แบรนด์ */
.brand{display:flex; align-items:center; gap:12px; margin:0 0 26px 2px}
.brand-mark{display:flex; color:var(--accent2)}
.brand-text{display:flex; flex-direction:column; line-height:1.2}
.brand-text strong{font-size:17px; font-weight:600; letter-spacing:.3px}
.brand-text small{font-size:12px; color:var(--muted); letter-spacing:1.4px; text-transform:uppercase}

/* การ์ด */
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:38px 34px 34px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 24px 70px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
}

.status{
  display:inline-flex; align-items:center; gap:9px;
  margin:0 0 22px;
  padding:6px 14px 6px 11px;
  font-size:12.5px; color:#b9c6dd;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(52,211,153,.05);
}
.dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--ok);
  box-shadow:0 0 0 3px rgba(52,211,153,.16);
}

h1{
  margin:0 0 18px;
  font-size:clamp(21px,4.4vw,31px);
  font-weight:600;
  letter-spacing:-.4px;
  line-height:1.25;
  background:linear-gradient(100deg,#ffffff 10%,#9db9ff 55%,#6fe3f5 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  word-break:break-word;
}

.lead{margin:0 0 26px; font-size:15px; line-height:1.85; color:#c2cddf}
.lead-en{color:var(--muted); font-size:13.5px}

.checks{list-style:none; margin:0; padding:22px 0 0; border-top:1px solid var(--line); display:grid; gap:12px}
.checks li{display:flex; align-items:center; gap:11px; font-size:13.5px; color:#a9b6cc}
.tick{
  flex:0 0 auto; width:16px; height:16px; border-radius:50%;
  border:1px solid rgba(52,211,153,.45);
  background:
    linear-gradient(rgba(52,211,153,.14),rgba(52,211,153,.14)) padding-box;
  position:relative;
}
.tick::after{
  content:""; position:absolute; left:5px; top:2px;
  width:4px; height:8px;
  border:solid var(--ok); border-width:0 1.6px 1.6px 0;
  transform:rotate(45deg);
}

.foot{
  margin:24px 4px 0;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-size:12px; color:#5f6b81;
}
.sep{opacity:.5}

@media (max-width:520px){
  .card{padding:30px 22px 26px}
  .lead{font-size:14.5px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}