/* ===== ก่อนเทรด (korntrade) — shared styles ===== */
:root{
  --bg:#0f1115; --bg2:#161a21; --card:#1b2029; --line:#2a313c;
  --tx:#e7ecf3; --tx2:#9aa6b6; --acc:#38d39f; --acc2:#2bb3ff; --warn:#ffb020; --danger:#ff6b6b;
  --radius:16px; --max:1080px;
  --font:'Sarabun','Noto Sans Thai','Segoe UI',system-ui,sans-serif;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f6f8fb; --bg2:#eef2f7; --card:#ffffff; --line:#e2e8f0; --tx:#1a2230; --tx2:#5a6676; }
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font); background:var(--bg); color:var(--tx); line-height:1.65; -webkit-font-smoothing:antialiased}
a{color:inherit; text-decoration:none}
img{max-width:100%}
.wrap{max-width:var(--max); margin:0 auto; padding:0 20px}

/* NAV */
header.site{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--bg) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
nav{display:flex; align-items:center; gap:8px; height:62px}
.logo{font-weight:800; font-size:20px; letter-spacing:.3px; display:flex; align-items:center; gap:8px}
.logo b{color:var(--acc)}
.navlinks{margin-left:auto; display:flex; gap:4px; flex-wrap:wrap; align-items:center}
.navlinks a{padding:8px 12px; border-radius:10px; font-size:14.5px; color:var(--tx2)}
.navlinks a:hover{background:var(--bg2); color:var(--tx)}
.navlinks a.active{color:var(--tx); background:var(--bg2)}
.navlinks a.cta{background:var(--acc); color:#04140d; font-weight:700; padding:9px 16px; border-radius:11px}
.navlinks a.cta:hover{filter:brightness(1.08); background:var(--acc)}
.menubtn{display:none; margin-left:auto; background:none; border:1px solid var(--line); color:var(--tx); border-radius:10px; padding:8px 12px; font-size:18px; cursor:pointer}

/* HERO (home) */
.hero{padding:70px 0 50px; text-align:center; background:radial-gradient(60% 120% at 50% -10%, color-mix(in srgb,var(--acc) 14%, transparent), transparent 60%)}
.pill{display:inline-block; font-size:13px; color:var(--acc); border:1px solid color-mix(in srgb,var(--acc) 40%,var(--line)); background:color-mix(in srgb,var(--acc) 8%, transparent); padding:5px 14px; border-radius:100px; margin-bottom:22px}
.hero h1{font-size:clamp(30px,5.4vw,52px); line-height:1.2; font-weight:800; letter-spacing:-.5px}
.hero h1 span{color:var(--acc)}
.hero p{max-width:600px; margin:18px auto 30px; color:var(--tx2); font-size:clamp(16px,2.2vw,19px)}
.hbtns{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.btn{padding:13px 24px; border-radius:12px; font-weight:700; font-size:16px; border:1px solid var(--line); cursor:pointer; display:inline-block}
.btn.p{background:var(--acc); color:#04140d; border-color:var(--acc)}
.btn.s{background:var(--card); color:var(--tx)}
.btn:hover{transform:translateY(-1px)}

/* PAGE HERO (inner pages) */
.pagehero{padding:44px 0 26px; border-bottom:1px solid var(--line)}
.crumb{font-size:13px; color:var(--tx2); margin-bottom:10px}
.crumb a:hover{color:var(--acc)}
.pagehero h1{font-size:clamp(26px,4vw,38px); font-weight:800; letter-spacing:-.3px}
.pagehero p{color:var(--tx2); margin-top:10px; max-width:640px; font-size:16.5px}

/* SECTIONS */
.sec{padding:56px 0}
.sec h2{font-size:clamp(22px,3.4vw,30px); font-weight:800; margin-bottom:8px; text-align:center}
.sec .sub{text-align:center; color:var(--tx2); margin-bottom:34px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px}
.card .ic{font-size:26px; margin-bottom:12px}
.card h3{font-size:17.5px; margin-bottom:7px}
.card p{color:var(--tx2); font-size:14.5px}
.card.link:hover{border-color:color-mix(in srgb,var(--acc) 50%,var(--line)); transform:translateY(-2px); transition:.15s}

/* FEATURE */
.feat{background:var(--bg2); border:1px solid var(--line); border-radius:22px; padding:34px; display:grid; grid-template-columns:1.1fr 1fr; gap:28px; align-items:center}
.feat .tag{color:var(--acc2); font-weight:700; font-size:13.5px; letter-spacing:.5px}
.feat h3{font-size:clamp(20px,3vw,27px); margin:6px 0 12px; font-weight:800}
.feat p{color:var(--tx2); margin-bottom:18px}
.mock{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px}
.row{display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px dashed var(--line); font-size:14px}
.row:last-child{border:none}
.meter{height:8px; width:100px; border-radius:5px; background:linear-gradient(90deg,#ff5d5d,#ffb020,#38d39f)}

/* CASES */
.caselist{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.case{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:block}
.case.link:hover{border-color:color-mix(in srgb,var(--acc) 50%,var(--line)); transform:translateY(-2px); transition:.15s}
.case .top{padding:16px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px}
.case .top b{font-size:16px}
.case .body{padding:16px 18px}
.case .body p{color:var(--tx2); font-size:14px}
.badge{font-size:12px; padding:3px 9px; border-radius:8px; font-weight:700; white-space:nowrap}
.b-hot{background:color-mix(in srgb,var(--warn) 18%,transparent); color:var(--warn)}
.b-new{background:color-mix(in srgb,var(--acc) 16%,transparent); color:var(--acc)}
.b-soon{background:var(--bg2); color:var(--tx2)}

/* MONEY / BROKER */
.money{background:linear-gradient(135deg, color-mix(in srgb,var(--acc2) 12%,var(--card)), var(--card)); border:1px solid var(--line); border-radius:22px; padding:34px; text-align:center}
.money h2{margin-bottom:8px}
.money p{color:var(--tx2); max-width:560px; margin:0 auto 22px}

/* PROSE (articles) */
.prose{max-width:760px; margin:0 auto; padding:40px 0}
.prose h2{font-size:24px; font-weight:800; margin:34px 0 12px}
.prose h3{font-size:19px; font-weight:700; margin:26px 0 8px}
.prose p{margin:12px 0; color:var(--tx)}
.prose ul,.prose ol{margin:12px 0 12px 22px}
.prose li{margin:7px 0; color:var(--tx)}
.prose b,.prose strong{color:var(--tx)}
.prose .lead{font-size:18px; color:var(--tx2)}
.term{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin:14px 0}
.term b{color:var(--acc)}

/* STEPS */
.steps{counter-reset:s; max-width:760px; margin:0 auto}
.step{display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line)}
.step:last-child{border:none}
.step .n{counter-increment:s; flex:0 0 38px; height:38px; border-radius:11px; background:var(--acc); color:#04140d; font-weight:800; display:flex; align-items:center; justify-content:center}
.step .n::before{content:counter(s)}
.step h3{font-size:17px; margin-bottom:4px}
.step p{color:var(--tx2); font-size:14.5px}

/* CALLOUT */
.callout{border-left:4px solid var(--acc); background:var(--bg2); border-radius:0 12px 12px 0; padding:16px 20px; margin:20px 0}
.callout.warn{border-color:var(--warn)}
.callout.danger{border-color:var(--danger)}
.callout b{display:block; margin-bottom:4px}

/* TABLE */
.tblwrap{overflow-x:auto; margin:20px 0}
table.cmp{width:100%; border-collapse:collapse; min-width:520px; font-size:14.5px}
table.cmp th,table.cmp td{border:1px solid var(--line); padding:11px 13px; text-align:left}
table.cmp th{background:var(--bg2); font-weight:700}
table.cmp tr:hover td{background:color-mix(in srgb,var(--acc) 5%, transparent)}

/* FOOTER */
footer.site{border-top:1px solid var(--line); margin-top:40px; padding:34px 0; background:var(--bg2)}
.fcols{display:flex; gap:40px; flex-wrap:wrap; margin-bottom:24px}
.fcols div{font-size:14px}
.fcols b{display:block; margin-bottom:10px; font-size:13px; color:var(--tx2); letter-spacing:.5px; text-transform:uppercase}
.fcols a{display:block; color:var(--tx2); padding:3px 0}
.fcols a:hover{color:var(--tx)}
.disc{font-size:12.5px; color:var(--tx2); border-top:1px solid var(--line); padding-top:18px; line-height:1.7}
.disc b{color:var(--warn)}

@media(max-width:820px){
  .navlinks{display:none; position:absolute; top:62px; left:0; right:0; flex-direction:column; align-items:stretch; background:var(--bg); border-bottom:1px solid var(--line); padding:10px 20px}
  .navlinks.open{display:flex}
  .menubtn{display:block}
  .grid3,.grid4,.grid2,.caselist{grid-template-columns:1fr}
  .feat{grid-template-columns:1fr}
}