/* === Home (Desktop) — Polished Light Theme === */
/* ใช้กับจอเดสก์ท็อป/แล็ปท็อป (แนะนำให้ลิงก์ด้วย media="(min-width:1025px)") */
/* ไม่แตะ HTML/JS */

:root{
  --bg: #f7fafc;
  --bg-2: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --ring: #e5e7eb;
  --brand: #2563eb;
  --brand-2:#60a5fa;
  --accent: #34d399;
  --shadow: 0 12px 34px rgba(2,8,23,.08);
  --radius: 16px;

  /* motion */
  --hero-drift-speed: 26s;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Prompt',sans-serif;
  background:
    radial-gradient(900px 500px at 70% -10%, rgba(96,165,250,.12), transparent),
    linear-gradient(180deg, #f6fbff 0%, var(--bg) 38%);
  color:var(--text);
  margin:0;
}

.container{max-width:1120px; margin:0 auto; padding:0 16px}
a{color:inherit; text-decoration:none}

/* ---------------- Header ---------------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--bg-2); border-bottom:1px solid var(--ring);
  backdrop-filter:saturate(140%) blur(6px);
}
.header-inner{display:flex; align-items:center; gap:14px; padding:10px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; color:var(--brand)}
.brand .brand-name{color:var(--brand)}
.nav{display:flex; gap:6px; margin-left:8px}
.nav-link{
  padding:8px 12px; border-radius:12px; color:var(--text); font-weight:600;
  transition:background .18s ease, transform .12s ease;
}
.nav-link:hover,.nav-link.is-active{background:rgba(99,102,241,.08)}
.auth{margin-left:auto; display:flex; gap:8px; align-items:center}
.menu-btn{display:none; border:1px solid var(--ring); border-radius:10px; padding:6px 10px; background:transparent; color:var(--text)}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:12px; border:1px solid var(--ring);
  color:var(--text); font-weight:800; background:#fff;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn.ghost{background:transparent}
.btn.ghost:hover{background:#f1f5f9}
.btn.primary{
  background:linear-gradient(135deg, var(--brand), var(--accent));
  border:none; color:#000; box-shadow:0 10px 24px rgba(37,99,235,.18);
}
.btn.primary:hover{filter:saturate(110%) brightness(1.02)}
.btn.lg{padding:12px 18px; border-radius:14px}

/* Keyboard focus */
:where(a, button, .chip, .card):focus{outline:none}
:where(a, button, .chip, .card):focus-visible{
  box-shadow:0 0 0 3px rgba(37,99,235,.25), 0 0 0 6px rgba(37,99,235,.12);
  border-radius:12px;
}

/* ---------------- HERO ---------------- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1200px 600px at 18% -10%, #e7f2ff, transparent 70%),
    radial-gradient(1200px 600px at 92% 110%, #e8fff6, transparent 65%),
    linear-gradient(180deg, #f6fbff, #ffffff);
  border-bottom:1px solid var(--ring);
}
.hero > *{position:relative; z-index:1}
.hero::before{
  /* gradient drift soft glow */
  content:""; position:absolute; inset:-10% -5%; z-index:0; pointer-events:none;
  background:
    radial-gradient(1200px 600px at 20% -10%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 60%),
    radial-gradient(900px 520px at 80% 110%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%);
  filter:blur(28px);
  animation: heroBgDrift var(--hero-drift-speed) ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes heroBgDrift{
  0%{transform:translate3d(-2%,-1%,0)} 50%{transform:translate3d(2%,1%,0)} 100%{transform:translate3d(1%,-2%,0)}
}
@media (prefers-reduced-motion: reduce){ .hero::before{animation:none} }

.hero-inner{
  display:grid; grid-template-columns:1.35fr 1fr; gap:20px; align-items:center; padding:38px 0 24px;
}

.hero-text h1{
  margin:0 0 8px; font-size:clamp(26px,3.6vw,44px); line-height:1.15;
  letter-spacing:-.02em; font-weight:900;
}
.hero-text h1 span{color:var(--brand)}
.muted{color:var(--muted)}
.small{font-size:.92rem}
.cta{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap}

.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border:1px solid #dbeafe; background:#eef2ff; color:#1e40af;
  border-radius:999px; font-weight:800; font-size:.92rem; margin-bottom:6px;
}

/* Right-side hero card (ถ้ามี) */
.hero-card{
  background:#fff; border:1px solid var(--ring); border-radius:20px; padding:16px;
  box-shadow:0 22px 60px rgba(15,23,42,.12), 0 10px 24px rgba(15,23,42,.06);
  position:relative; overflow:hidden;
}
.hero-card::after{
  /* gradient border mask */
  content:""; position:absolute; inset:0; border-radius:20px; padding:1px;
  background:linear-gradient(135deg, var(--brand), var(--accent));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
.checklist{margin:8px 0 0; padding-left:18px}
.checklist li{margin:6px 0; color:var(--text)}
.hero-note{font-size:12px; color:var(--muted); margin-top:8px}

/* ---------------- Sections ---------------- */
.benefits{padding:26px 0}
.shortcuts{padding:8px 0 40px}
.shortcuts .shortcuts-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px}
.shortcuts h2{font-size:1.24rem; margin:0}

/* shortcut chips (ถ้ามีใน HTML) */
.chip-link{
  display:inline-flex; align-items:center; gap:8px; padding:10px 12px;
  border-radius:999px; border:1px solid var(--ring); background:#fff; color:var(--text); font-weight:800;
  box-shadow:0 6px 18px rgba(15,23,42,.06);
  transition:transform .14s ease, background .18s ease, box-shadow .18s ease;
}
.chip-link:hover{transform:translateY(-1px); background:#f8fafc}

/* ---------------- Cards Grid ---------------- */
.cards{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px;
}
.card{
  background:#fff; border:1px solid var(--ring); border-radius:20px; padding:16px;
  color:inherit; box-shadow:0 12px 30px rgba(15,23,42,.06);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  position:relative; overflow:hidden;
}
.card::before{
  content:""; position:absolute; inset:-1px; border-radius:22px;
  background:linear-gradient(135deg, rgba(37,99,235,.22), rgba(52,211,153,.22));
  opacity:0; transition:opacity .18s ease;
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 36px rgba(2,8,23,.12);
  border-color:#dbeafe; background:#fcfdff;
}
.card:hover::before{opacity:1}
.card .icon{font-size:28px}
.card .title{font-weight:900; margin:6px 0 4px}
.card .desc{color:var(--muted); font-size:.95rem}

.grid .container{padding:28px 0}
.grid h2{margin:0 0 12px}

.site-footer{border-top:1px solid var(--ring); background:var(--bg-2)}
.footer-inner{display:flex; justify-content:space-between; align-items:center; padding:16px 0}

/* --- user pill in header when logged in --- */
.user-pill{display:flex; align-items:center; gap:10px}
.user-pill .avatar{
  width:28px; height:28px; border-radius:9999px; display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#a5b4fc,#34d399); color:#fff; font-weight:700; font-size:12px; box-shadow:0 2px 6px rgba(0,0,0,.08)
}
.user-pill .name{font-weight:600}