/* ============================================================ Nexion — Base: reset, typography, layout primitives ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 400; line-height: 1.65; color: var(--text); background-color: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; min-height: 100vh; } img, svg, canvas { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; } /* ---- Headings ---- */ h1, h2, h3, h4 { font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } /* ---- Thai typography tuning ---- Negative tracking clips Thai vowel/tone marks; Thai needs taller line boxes for stacked marks. Activates automatically when i18n switches . */ :lang(th) body, body:lang(th) { line-height: 1.8; } :lang(th) h1, :lang(th) h2, :lang(th) h3, :lang(th) h4 { letter-spacing: 0; line-height: 1.45; } /* ---- Layout primitives ---- */ .container { width: 100%; max-width: var(--container-w); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); } .section { position: relative; padding-block: var(--section-pad); } .section-head { max-width: 640px; margin-bottom: clamp(2.5rem, 6vw, 4rem); } .section-head.center { margin-inline: auto; text-align: center; } .eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-tiny); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-bright); margin-bottom: 1rem; } .eyebrow::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: var(--grad-brand); } .section-head.center .eyebrow::after { content: ""; width: 24px; height: 2px; border-radius: 2px; background: var(--grad-brand); } .lead { color: var(--text-muted); font-size: 1.0625rem; margin-top: 1rem; text-wrap: pretty; } /* ---- Selection / focus / scrollbar ---- */ ::selection { background: var(--accent); color: #fcfcfc; } :focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; border-radius: 4px; } @media (min-width: 900px) { ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } }