/* ───────────────────────────────────────────────────────────
   Skills Lab — Library design system
   identity เดียวกับ HomeOffice: ลีนขาว · navy ink + accent blue
   tokens อ้างอิง homeoffice/web/styles.css
   ─────────────────────────────────────────────────────────── */
:root{
  --ink:26 32 50; --muted:92 100 120; --faint:150 156 172;
  --line:26 32 50; --surface:249 250 252; --card:255 255 255; --accent:37 99 235;
  --ok:13 148 136; --warn:202 138 4;
  --sh-sm:0 1px 2px rgb(26 32 50/.04),0 1px 1px rgb(26 32 50/.03);
  --sh-md:0 4px 14px -4px rgb(26 32 50/.09),0 2px 6px -2px rgb(26 32 50/.06);
  --sh-lg:0 22px 54px -26px rgb(26 32 50/.22);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Anuphan",system-ui,sans-serif;color:rgb(var(--ink));background:rgb(var(--surface));line-height:1.6;-webkit-font-smoothing:antialiased}
.disp{font-family:"Bai Jamjuree",sans-serif;letter-spacing:-.01em;line-height:1.12}
.num{font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
.wrap{max-width:1040px;margin:0 auto;padding:0 22px}
.eyebrow{display:inline-block;font-family:"Bai Jamjuree";font-size:12.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:rgb(var(--accent))}
.muted{color:rgb(var(--muted))}

/* nav */
nav{position:sticky;top:0;z-index:30;background:rgb(var(--surface)/.85);backdrop-filter:blur(10px);border-bottom:1px solid rgb(var(--line)/.09)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{display:flex;align-items:center;gap:10px;font-family:"Bai Jamjuree";font-weight:700;font-size:18px}
.logo .mark{width:34px;height:34px;border:1.5px solid rgb(var(--ink));border-radius:10px;display:grid;place-items:center;color:rgb(var(--ink))}
.logo .mark svg{width:18px;height:18px}
.navlinks{display:flex;gap:6px;align-items:center;font-size:14px;font-weight:500}
.navlinks a{color:rgb(var(--muted));padding:7px 12px;border-radius:9px;transition:.14s}
.navlinks a:hover{color:rgb(var(--ink));background:rgb(var(--ink)/.04)}
.navlinks a.cta{color:#fff;background:rgb(var(--ink));border:1px solid rgb(var(--ink))}
.navlinks a.cta:hover{background:rgb(var(--accent));border-color:rgb(var(--accent))}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid rgb(var(--line)/.16);background:rgb(var(--card));color:rgb(var(--ink));padding:11px 18px;border-radius:11px;font-size:14.5px;font-weight:600;cursor:pointer;box-shadow:var(--sh-sm);transition:.15s}
.btn:hover{border-color:rgb(var(--ink)/.32)}
.btn svg{width:17px;height:17px}
.btn-primary{background:rgb(var(--ink));color:#fff;border:1px solid rgb(var(--ink))}
.btn-primary:hover{background:rgb(var(--accent));border-color:rgb(var(--accent))}

/* chips / badges */
.chip{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;border:1px solid rgb(var(--line)/.14);padding:6px 13px;border-radius:9999px;background:rgb(var(--card));color:rgb(var(--muted))}
.chip svg{width:15px;height:15px;color:rgb(var(--accent))}
.zone{font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:9999px;border:1px solid}
.zone.free{color:#0f766e;border-color:rgb(13 148 136/.34);background:rgb(13 148 136/.07)}
.zone.lock{color:#7a6b25;border-color:rgb(202 138 4/.34);background:rgb(202 138 4/.08)}

/* hero — ลีนขาว + accent radial เดียว (ไม่ใช่ blob หลายตัว) */
.hero{position:relative;padding:62px 0 30px;
  background-image:radial-gradient(900px 380px at 80% -25%,rgb(37 99 235/.07),transparent 60%)}
.hero .eyebrow{margin-bottom:14px}
.hero h1{font-size:clamp(32px,5vw,52px);font-weight:700;max-width:18ch;margin-bottom:14px}
.hero p.lead{font-size:18px;color:rgb(var(--muted));max-width:60ch}
.hero .cta-row{display:flex;gap:11px;margin-top:26px;flex-wrap:wrap}
.hero .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}

/* section heads */
section{padding:32px 0}
.sec-head{margin-bottom:18px}
.sec-head h2{font-size:clamp(22px,3vw,28px);font-weight:700;display:flex;align-items:center;gap:11px}
.sec-head h2 .ico{width:30px;height:30px;border-radius:9px;background:rgb(var(--accent)/.09);display:grid;place-items:center;color:rgb(var(--accent))}
.sec-head h2 .ico svg{width:18px;height:18px}
.sec-head .sub{color:rgb(var(--muted));font-size:15.5px;margin-top:6px}

/* card grid (resources) */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:15px}
.card{position:relative;display:flex;flex-direction:column;background:rgb(var(--card));border:1px solid rgb(var(--line)/.1);border-radius:16px;box-shadow:var(--sh-sm);padding:22px;transition:.16s;height:100%}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:rgb(var(--accent)/.32)}
.card .cico{width:42px;height:42px;border-radius:12px;background:rgb(var(--accent)/.08);border:1px solid rgb(var(--accent)/.16);display:grid;place-items:center;color:rgb(var(--accent));margin-bottom:13px}
.card .cico svg{width:21px;height:21px}
.card h3{font-family:"Bai Jamjuree";font-size:18.5px;font-weight:700;margin-bottom:6px}
.card p{color:rgb(var(--muted));font-size:14px;flex:1}
.card .tags{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 13px}
.card .tags span{font-size:11.5px;background:rgb(var(--ink)/.05);color:rgb(var(--muted));border-radius:7px;padding:3px 9px;font-weight:500}
.card .go{font-weight:600;font-size:14px;color:rgb(var(--accent));display:inline-flex;align-items:center;gap:5px}
.card .free{position:absolute;top:18px;right:18px}

/* dark panel (premium / cta) — ใช้ ink navy แทน gradient slop */
.panel{background:rgb(var(--ink));color:#fff;border-radius:20px;padding:38px 34px;position:relative;overflow:hidden;
  background-image:radial-gradient(600px 280px at 88% -20%,rgb(37 99 235/.32),transparent 62%)}
.panel .eyebrow{color:#93c5fd}
.panel h2{font-family:"Bai Jamjuree";font-size:clamp(23px,3.2vw,31px);font-weight:700;margin:8px 0 6px}
.panel .psub{color:rgb(255 255 255/.78);font-size:15.5px;max-width:62ch}
.panel .plist{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin:24px 0}
.panel .pcard{background:rgb(255 255 255/.05);border:1px solid rgb(255 255 255/.12);border-radius:14px;padding:18px;position:relative}
.panel .pcard .lk{position:absolute;top:15px;right:15px;color:rgb(255 255 255/.5)}.panel .pcard .lk svg{width:15px;height:15px}
.panel .pcard .pico{color:#93c5fd;margin-bottom:8px}.panel .pcard .pico svg{width:22px;height:22px}
.panel .pcard h4{font-family:"Bai Jamjuree";font-size:16.5px;font-weight:700;margin-bottom:4px}
.panel .pcard p{font-size:13px;color:rgb(255 255 255/.72)}
.panel .pcta{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15.5px;color:rgb(var(--ink));background:#fff;padding:13px 26px;border-radius:12px;margin-top:2px}
.panel .pcta:hover{background:#93c5fd}
.panel .pnote{font-size:13px;color:rgb(255 255 255/.6);margin-top:12px}

/* contact */
.contact{text-align:center;background:rgb(var(--card));border:1px solid rgb(var(--line)/.1);border-radius:18px;box-shadow:var(--sh-md);padding:34px;max-width:660px;margin:0 auto}
.contact h2{font-family:"Bai Jamjuree";font-size:23px;font-weight:700}
.contact p{color:rgb(var(--muted));margin:8px 0 18px}
.contact .line{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15.5px;color:#fff;background:#06c755;padding:13px 28px;border-radius:12px;box-shadow:0 12px 28px -12px rgb(6 199 85/.5)}

footer{color:rgb(var(--faint));font-size:13px;padding:40px 22px;text-align:center;border-top:1px solid rgb(var(--line)/.08);margin-top:18px}

@media(max-width:760px){.panel .plist{grid-template-columns:1fr}.panel{padding:30px 22px}.hero{padding:46px 0 22px}}
@media(max-width:560px){section{padding:24px 0}}
html,body{overflow-x:hidden;max-width:100%}*{overflow-wrap:break-word}img{max-width:100%}