/* ============================================================
   ACS Design System — acs.css  (ACS-WEB-2569 §6)
   Advanced Chem Solution · navy & white
   Static site · no framework · no build step
   ============================================================ */

:root {
  --acs-navy-900: #071A38;
  --acs-navy-700: #0F2A54;
  --acs-navy-500: #1B4D96;
  --acs-cyan-500: #0E9BAA;
  --acs-amber-500: #E39A2B;   /* CTA only */
  --acs-ink: #16202E;
  --acs-slate: #5A6B82;
  --acs-line: #E2E8F0;
  --acs-surface: #F6F8FB;
  --acs-white: #FFFFFF;

  --font-sans: 'IBM Plex Sans Thai', 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --fs-base: 17px;
  --lh-th: 1.75;
  --measure: 68ch;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(7,26,56,.06), 0 6px 20px rgba(7,26,56,.06);
  --container: 1180px;
  --gutter: 16px;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-th);
  color: var(--acs-ink);
  background: var(--acs-white);
}
html[lang="en"] body { line-height: 1.6; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--acs-navy-500); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--acs-navy-700); }
:focus-visible { outline: 3px solid var(--acs-cyan-500); outline-offset: 2px; }
h1, h2, h3, h4 { color: var(--acs-navy-900); line-height: 1.3; margin: 0 0 .5em; font-weight: 600; }
h1 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); }
h2 { font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2rem); }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1em; max-width: var(--measure); }
small, .muted { color: var(--acs-slate); }
code, .mono, td.num, th.num { font-family: var(--font-mono); font-size: .95em; }
.visually-hidden { position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip-link { position:absolute; left:-999px; top:8px; background:var(--acs-navy-900); color:#fff; padding:.5rem 1rem; z-index:100; }
.skip-link:focus { left:8px; }

/* ---------- Layout ---------- */
.container { width: min(100% - 2*var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-block: clamp(2.5rem, 6vw, 5rem); }
.section--surface { background: var(--acs-surface); }
.section--navy { background: var(--acs-navy-700); color: #fff; }
.section--navy h2, .section--navy h3 { color: #fff; }
.grid { display: grid; gap: 1.25rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
@media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
.prose > * + * { margin-top: 1em; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.96); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--acs-line);
}
.site-header .container { display:flex; align-items:center; gap:1rem; min-height:64px; }
.brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--acs-navy-900); font-weight:700; letter-spacing:.2px; }
.brand__mark { width:36px; height:36px; }
.brand__sub { display:block; font-size:.72rem; font-weight:500; color:var(--acs-slate); line-height:1.2; }
.nav { margin-left:auto; display:flex; align-items:center; gap:.25rem; }
.nav a { padding:.5rem .7rem; border-radius:6px; text-decoration:none; color:var(--acs-ink); font-weight:500; }
.nav a:hover, .nav a[aria-current="page"] { background:var(--acs-surface); color:var(--acs-navy-700); }
.lang-switch { border:1px solid var(--acs-line); border-radius:999px; padding:.3rem .7rem; font-size:.85rem; text-decoration:none; color:var(--acs-navy-700); font-weight:600; }
.nav-toggle { display:none; margin-left:auto; background:none; border:1px solid var(--acs-line); border-radius:8px; padding:.45rem .6rem; font: inherit; color:var(--acs-navy-900); }
@media (max-width: 860px) {
  .nav-toggle { display:inline-flex; }
  .nav { display:none; position:absolute; left:0; right:0; top:64px; background:#fff; border-bottom:1px solid var(--acs-line); flex-direction:column; align-items:stretch; padding:.5rem var(--gutter) 1rem; }
  .nav.is-open { display:flex; }
  .nav a { padding:.75rem .5rem; }
}

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:46px; padding:.6rem 1.25rem; border-radius:8px;
  font: 600 1rem var(--font-sans); text-decoration:none; cursor:pointer;
  border:2px solid transparent; transition: transform .08s ease, box-shadow .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--acs-amber-500); color: var(--acs-navy-900); }
.btn--primary:hover { box-shadow: 0 4px 14px rgba(227,154,43,.45); color: var(--acs-navy-900); }
.btn--secondary { background: transparent; color: var(--acs-navy-700); border-color: var(--acs-navy-700); }
.btn--secondary:hover { background: var(--acs-surface); }
.section--navy .btn--secondary { color:#fff; border-color:#fff; }
.section--navy .btn--secondary:hover { background: rgba(255,255,255,.1); }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(3rem, 8vw, 6.5rem); background: linear-gradient(180deg, var(--acs-surface) 0%, #fff 100%); }
.hero__kicker { color: var(--acs-cyan-500); font-weight:600; font-size:.9rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.75rem; }
.hero p.lead { font-size:1.15rem; color:var(--acs-slate); }
.hero__actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.5rem; }
.hero__proof { display:flex; flex-wrap:wrap; gap:1.5rem; margin-top:2rem; padding-top:1.25rem; border-top:1px solid var(--acs-line); font-size:.9rem; color:var(--acs-slate); }

/* ---------- Cards ---------- */
.card {
  background:#fff; border:1px solid var(--acs-line); border-radius:var(--radius);
  padding:1.4rem; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:.5rem;
}
.card--link { text-decoration:none; color:inherit; transition: border-color .15s, transform .15s; }
.card--link:hover { border-color: var(--acs-navy-500); transform: translateY(-2px); }
.card__icon { width:44px; height:44px; color:var(--acs-cyan-500); }
.card h3 { margin:0; }
.card p { margin:0; color:var(--acs-slate); font-size:.97rem; }
.card__more { margin-top:auto; color:var(--acs-navy-500); font-weight:600; font-size:.95rem; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--acs-line); border-radius:var(--radius); }
table.acs { border-collapse:collapse; width:100%; min-width:560px; font-size:.95rem; background:#fff; }
table.acs th, table.acs td { padding:.7rem .9rem; border-bottom:1px solid var(--acs-line); text-align:left; vertical-align:top; }
table.acs thead th { position:sticky; top:0; background:var(--acs-navy-700); color:#fff; font-weight:600; }
table.acs tbody tr:nth-child(even) { background: var(--acs-surface); }
table.acs td.num, table.acs th.num { text-align:right; }

/* ---------- Callouts ---------- */
.callout { border-left:4px solid var(--acs-cyan-500); background:var(--acs-surface); padding:1rem 1.25rem; border-radius:0 var(--radius) var(--radius) 0; }
.callout--caution { border-left-color: var(--acs-amber-500); }
.callout__title { font-weight:700; color:var(--acs-navy-900); margin-bottom:.25rem; }

/* ---------- Accordion (FAQ) ---------- */
details.faq { border-bottom:1px solid var(--acs-line); padding:.25rem 0; }
details.faq summary { cursor:pointer; padding:.9rem 0; font-weight:600; color:var(--acs-navy-900); list-style:none; display:flex; justify-content:space-between; gap:1rem; }
details.faq summary::-webkit-details-marker { display:none; }
details.faq summary::after { content:"+"; color:var(--acs-cyan-500); font-size:1.4rem; line-height:1; }
details.faq[open] summary::after { content:"−"; }
details.faq .faq__body { padding: 0 0 1rem; color: var(--acs-slate); }

/* ---------- Breadcrumb ---------- */
.breadcrumb { font-size:.88rem; color:var(--acs-slate); padding-block:.9rem; }
.breadcrumb ol { list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; margin:0; padding:0; }
.breadcrumb li + li::before { content:"›"; margin-right:.4rem; color:var(--acs-line); }

/* ---------- Footer ---------- */
.site-footer { background: var(--acs-navy-900); color: #C9D3E3; font-size:.92rem; padding-block:3rem 5.5rem; }
.site-footer a { color:#fff; }
.site-footer h4 { color:#fff; font-size:.95rem; margin-bottom:.6rem; }
.site-footer ul { list-style:none; margin:0; padding:0; display:grid; gap:.35rem; }
.footer__legal { margin-top:2rem; padding-top:1.25rem; border-top:1px solid rgba(255,255,255,.12); font-size:.82rem; color:#93A3BC; }
@media (min-width: 861px) { .site-footer { padding-bottom:3rem; } }

/* ---------- Mobile sticky CTA bar ---------- */
.cta-bar {
  position:fixed; inset:auto 0 0 0; z-index:60; display:grid; grid-template-columns:1fr 1fr 1.3fr; gap:1px;
  background:var(--acs-line); border-top:1px solid var(--acs-line);
  padding-bottom: env(safe-area-inset-bottom);
}
.cta-bar a { display:flex; align-items:center; justify-content:center; gap:.4rem; min-height:54px; background:#fff; color:var(--acs-navy-900); font-weight:600; font-size:.9rem; text-decoration:none; }
.cta-bar a.cta-bar__primary { background: var(--acs-amber-500); }
@media (min-width: 861px) { .cta-bar { display:none; } }

/* ---------- Forms ---------- */
.field { display:grid; gap:.35rem; margin-bottom:1rem; }
.field label { font-weight:600; font-size:.95rem; }
.field input, .field select, .field textarea {
  font: inherit; padding:.65rem .8rem; border:1px solid var(--acs-line); border-radius:8px; background:#fff; color:var(--acs-ink); min-height:46px;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--acs-navy-500); }
.hp { position:absolute; left:-9999px; }

/* ---------- Utilities ---------- */
.text-center { text-align:center; }
.mt-1 { margin-top:.5rem; } .mt-2 { margin-top:1rem; } .mt-3 { margin-top:2rem; }
.stack > * + * { margin-top: 1rem; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition:none!important; scroll-behavior:auto!important; } }

@media (max-width: 600px) { .hero h1 br { display:none; } }