:root {
  --ink:#10233f; --muted:#627188; --paper:#f5f7fa; --panel:#fff; --line:#dce3eb;
  --navy:#12365d; --blue:#1769aa; --cyan:#08a6a6; --mint:#dff7f3;
  --shadow:0 22px 60px rgba(18,54,93,.11);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,"Noto Sans Thai","Leelawadee UI",Tahoma,sans-serif; line-height:1.7; }
a { color:inherit; }
.skip-link { position:absolute; left:16px; top:-80px; z-index:10; background:#fff; border:2px solid var(--blue); border-radius:8px; padding:9px 14px; }
.skip-link:focus { top:12px; }
.site-header { min-height:72px; display:flex; align-items:center; justify-content:space-between; max-width:1180px; margin:auto; padding:0 24px; }
.wordmark { display:flex; align-items:center; gap:10px; font-weight:800; text-decoration:none; letter-spacing:-.02em; }
.wordmark-mark { display:grid; place-items:center; width:36px; height:36px; border-radius:9px; background:var(--navy); color:#fff; font-size:13px; letter-spacing:.04em; }
nav { display:flex; gap:24px; }
nav a { color:var(--muted); font-size:14px; font-weight:700; text-decoration:none; }
nav a:hover { color:var(--blue); }
main { max-width:1180px; margin:auto; padding:0 24px 72px; }
.hero { position:relative; overflow:hidden; min-height:510px; padding:72px clamp(28px,7vw,86px); border-radius:26px; background:linear-gradient(135deg,#102f51 0%,#154f75 62%,#0f8589 100%); color:#fff; box-shadow:var(--shadow); }
.hero::after { content:""; position:absolute; width:520px; height:520px; right:-170px; top:-210px; border:1px solid rgba(255,255,255,.22); border-radius:50%; box-shadow:0 0 0 70px rgba(255,255,255,.035),0 0 0 145px rgba(255,255,255,.025); }
.eyebrow { margin:0 0 12px; color:var(--cyan); font-size:12px; font-weight:900; letter-spacing:.14em; }
.hero .eyebrow { color:#76f2df; }
h1 { max-width:850px; margin:0; font-size:clamp(38px,6vw,70px); line-height:1.12; letter-spacing:-.045em; }
.hero-copy { max-width:710px; margin:26px 0 32px; color:#dbeaf3; font-size:18px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:10px 19px; border-radius:10px; font-weight:800; text-decoration:none; }
.button.primary { background:#fff; color:var(--navy); }
.button.secondary { border:1px solid rgba(255,255,255,.48); color:#fff; }
.facts { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; max-width:760px; margin:52px 0 0; border:1px solid rgba(255,255,255,.2); border-radius:12px; overflow:hidden; }
.facts div { padding:14px 18px; background:rgba(5,29,49,.22); }
.facts dt { color:#a9c5d6; font-size:12px; }
.facts dd { margin:2px 0 0; font-weight:800; }
.section { padding:82px 0 0; scroll-margin-top:20px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; }
h2 { margin:0; font-size:clamp(30px,4vw,46px); line-height:1.2; letter-spacing:-.035em; }
.search-wrap input { width:min(330px,80vw); min-height:46px; padding:10px 14px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); font:inherit; }
.search-wrap input:focus { outline:3px solid rgba(23,105,170,.18); border-color:var(--blue); }
.search-status { min-height:25px; margin:8px 0 4px; color:var(--muted); font-size:13px; }
.guide-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:20px; }
.guide-card { padding:28px; border:1px solid var(--line); border-radius:18px; background:var(--panel); box-shadow:0 8px 28px rgba(18,54,93,.05); }
.card-topline { display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-size:12px; }
.level { color:#057a72; font-weight:900; letter-spacing:.08em; }
.guide-card h3 { max-width:720px; margin:20px 0 12px; font-size:27px; line-height:1.3; }
.guide-card h3 a { text-decoration:none; }
.guide-card h3 a:hover { color:var(--blue); }
.guide-card p { color:var(--muted); }
.tag-list { display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:22px 0; list-style:none; }
.tag-list li { padding:5px 9px; border-radius:7px; background:var(--mint); color:#12635f; font-size:12px; font-weight:700; }
.text-link { color:var(--blue); font-weight:800; text-underline-offset:4px; }
.empty-state { padding:36px; border:1px dashed #aeb8c5; border-radius:14px; text-align:center; color:var(--muted); }
.publish { margin-top:82px; padding:62px; border-radius:22px; background:#e8eef4; }
.steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin-top:36px; }
.steps article { border-top:3px solid var(--cyan); padding-top:18px; }
.steps span { color:var(--blue); font-size:12px; font-weight:900; }
.steps h3 { margin:7px 0 4px; }
.steps p { margin:0; color:var(--muted); }
code { padding:2px 5px; border-radius:5px; background:#d6e0ea; font-family:"SFMono-Regular",Consolas,monospace; font-size:.9em; }
footer { border-top:1px solid var(--line); color:var(--muted); text-align:center; font-size:13px; padding:22px; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
:focus-visible { outline:3px solid #46d9cc; outline-offset:3px; }
@media (max-width:760px) {
  .site-header { min-height:64px; }
  nav { display:none; }
  main { padding:0 14px 48px; }
  .hero { min-height:auto; padding:46px 24px; border-radius:18px; }
  .hero-copy { font-size:16px; }
  .facts { grid-template-columns:1fr; }
  .section { padding-top:60px; }
  .section-heading { align-items:stretch; flex-direction:column; }
  .search-wrap input { width:100%; }
  .publish { margin-top:60px; padding:34px 22px; }
  .steps { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }