/* ===== NEO-S Landing Pages — shared styles ===== */
:root{
  --bg:#070B16; --bg-2:#0C1322; --card:#111A2E; --line:#1E2A44;
  --txt:#EAF0FF; --txt-dim:#95A3C2;
  --blue:#3B82F6; --cyan:#22D3EE; --violet:#8B5CF6; --green:#34D399; --gold:#E2B679; --red:#F87171;
  --grad:linear-gradient(120deg,#22D3EE,#3B82F6 45%,#8B5CF6);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--txt);font-family:'IBM Plex Sans Thai','Space Grotesk',sans-serif;line-height:1.75;font-size:16px;-webkit-font-smoothing:antialiased}
a{color:var(--cyan);text-decoration:none}
img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:'Space Grotesk','IBM Plex Sans Thai',sans-serif;line-height:1.35}

.topbar{background:var(--bg-2);border-bottom:1px solid var(--line);font-size:13.5px}
.topbar-in{max-width:1080px;margin:0 auto;padding:8px 20px;display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.topbar a{color:var(--txt-dim)}
.topbar a:hover{color:var(--cyan)}
nav{border-bottom:1px solid var(--line);background:rgba(7,11,22,.9);backdrop-filter:blur(10px);position:sticky;top:0;z-index:50}
.nav-in{max-width:1080px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:flex;align-items:center;gap:10px;color:var(--txt)}
.logo-txt{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:21px;letter-spacing:.5px}
.nav-links{display:flex;gap:20px;font-size:14.5px;flex-wrap:wrap}
.nav-links a{color:var(--txt-dim)}
.nav-links a:hover{color:var(--txt)}
.nav-cta{background:var(--grad);color:#050A14;font-weight:700;padding:9px 18px;border-radius:10px;font-size:14.5px;white-space:nowrap}

.crumb{font-size:13px;color:var(--txt-dim);padding:16px 0 0}
.crumb a{color:var(--txt-dim)}

.hero{padding:34px 0 52px}
.eyebrow{display:inline-block;font-size:13px;font-weight:600;color:var(--cyan);border:1px solid rgba(34,211,238,.35);background:rgba(34,211,238,.07);padding:6px 14px;border-radius:999px;margin-bottom:20px}
h1{font-size:clamp(29px,5vw,48px);font-weight:700;margin-bottom:18px}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lead{font-size:clamp(16px,2.1vw,18.5px);color:var(--txt-dim);max-width:780px;margin-bottom:26px}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px}
.btn{display:inline-block;padding:13px 26px;border-radius:12px;font-weight:700;font-size:15.5px;transition:transform .18s}
.btn-1{background:var(--grad);color:#050A14}
.btn-2{border:1px solid var(--line);background:var(--card);color:var(--txt)}
.btn:hover{transform:translateY(-2px)}
.stats{display:flex;gap:14px;flex-wrap:wrap}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 20px;min-width:138px}
.stat b{display:block;font-family:'Space Grotesk',sans-serif;font-size:25px;font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat span{font-size:13px;color:var(--txt-dim)}

section{padding:52px 0;border-top:1px solid var(--line)}
.sec-tag{font-size:12.5px;font-weight:600;letter-spacing:2px;color:var(--cyan);text-transform:uppercase;margin-bottom:10px}
h2{font-size:clamp(24px,3.6vw,36px);font-weight:700;margin-bottom:14px}
.sec-lead{color:var(--txt-dim);max-width:760px;margin-bottom:34px}
h3{font-size:19px;font-weight:700;margin-bottom:10px}
p{margin-bottom:14px}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px;transition:border-color .2s,transform .2s}
.card:hover{border-color:rgba(34,211,238,.5);transform:translateY(-3px)}
.card .ico{font-size:28px;margin-bottom:12px;display:block}
.card p{color:var(--txt-dim);font-size:15px}
.card ul{list-style:none;margin-top:12px}
.card li{font-size:14.5px;color:var(--txt-dim);padding-left:22px;position:relative;margin-bottom:7px}
.card li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:700}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.step{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px}
.step .n{width:32px;height:32px;border-radius:9px;background:var(--grad);color:#050A14;font-family:'Space Grotesk',sans-serif;font-weight:700;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.step p{color:var(--txt-dim);font-size:14.5px;margin:0}

table.cmp{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;font-size:15px}
table.cmp th,table.cmp td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
table.cmp th{background:var(--bg-2);font-weight:700;font-size:14.5px}
table.cmp tr:last-child td{border-bottom:none}
table.cmp td.bad{color:var(--red)}
table.cmp td.good{color:var(--green)}
.tbl-scroll{overflow-x:auto}

.price{background:var(--card);border:1px solid rgba(34,211,238,.35);border-radius:20px;padding:32px}
.price .old{color:var(--txt-dim);text-decoration:line-through;font-size:18px}
.price .now{font-family:'Space Grotesk',sans-serif;font-size:42px;font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.price .per{color:var(--txt-dim);font-size:15px;margin-bottom:18px}
.price ul{list-style:none}
.price li{padding-left:24px;position:relative;margin-bottom:9px;font-size:15px}
.price li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:700}
.note{font-size:13px;color:var(--txt-dim);margin-top:18px;line-height:1.8}

details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 22px;margin-bottom:12px}
details[open]{border-color:rgba(34,211,238,.4)}
summary{cursor:pointer;font-weight:600;font-size:16px;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"▾";float:right;color:var(--cyan)}
details[open] summary::after{content:"▴"}
details p{margin:12px 0 0;color:var(--txt-dim);font-size:15px}

.cta{background:linear-gradient(160deg,rgba(34,211,238,.09),rgba(139,92,246,.09));border:1px solid var(--line);border-radius:22px;padding:44px 32px;text-align:center}
.cta h2{margin-bottom:12px}
.contact-row{display:flex;gap:10px 26px;flex-wrap:wrap;justify-content:center;margin-top:22px;font-size:15px}

.rel{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.rel a{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:14px;color:var(--txt)}
.rel a:hover{border-color:var(--cyan)}

footer{border-top:1px solid var(--line);padding:34px 0;text-align:center;color:var(--txt-dim);font-size:13.5px}
footer .fl{display:flex;gap:10px 22px;flex-wrap:wrap;justify-content:center;margin-bottom:14px}

/* ===== ARTICLE ===== */
.art{max-width:780px;margin:0 auto;padding:0 20px}
.art .pmeta{font-size:13.5px;color:var(--txt-dim);margin-bottom:18px}
.art .cat{display:inline-block;font-size:12px;font-weight:600;letter-spacing:1.5px;color:var(--cyan);text-transform:uppercase;margin-bottom:12px}
.art h1{font-size:clamp(27px,4.4vw,42px);margin-bottom:14px}
.art .stand{font-size:18px;color:var(--txt-dim);margin-bottom:30px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.art h2{font-size:clamp(21px,3vw,29px);margin:44px 0 14px}
.art h3{font-size:19px;margin:28px 0 10px}
.art p{margin-bottom:16px;font-size:16.5px}
.art ul,.art ol{margin:0 0 18px 22px}
.art li{margin-bottom:9px;font-size:16.5px}
.art strong{color:var(--txt)}
.art .toc{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 26px;margin-bottom:34px}
.art .toc div{font-weight:700;margin-bottom:10px}
.art .toc ol{margin:0 0 0 20px}
.art .toc li{margin-bottom:6px;font-size:15.5px}
.art blockquote{border-left:3px solid var(--cyan);background:var(--card);padding:18px 22px;border-radius:0 12px 12px 0;margin:24px 0}
.art blockquote p{margin:0;color:var(--txt-dim)}
.box{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 26px;margin:26px 0}
.box.warn{border-color:rgba(226,182,121,.45)}
.box.warn::before{content:"⚠️ ";}
.box p:last-child{margin-bottom:0}
.art .cta-in{background:linear-gradient(160deg,rgba(34,211,238,.09),rgba(139,92,246,.09));border:1px solid var(--line);border-radius:18px;padding:30px;margin:40px 0;text-align:center}
.art .cta-in h3{margin:0 0 10px}
.art .cta-in p{color:var(--txt-dim);font-size:15.5px}
.art .next{border-top:1px solid var(--line);margin-top:44px;padding-top:28px}
.art .next h3{margin-top:0}

@media(max-width:640px){ .nav-links{display:none} section{padding:40px 0} .art p,.art li{font-size:16px} }