/* ===========================================================
   MARTICS.CO — production stylesheet (Martics Design System)
   Brand red #FB2C3A · Hanken Grotesk + IBM Plex Mono · light,
   Slack/Linear-clean. Self-hosted fonts + Thai fallback.
   =========================================================== */

/* Thai glyph coverage (Hanken Grotesk is Latin-only) */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;500;600;700&family=Sarabun:wght@400;500;600&display=swap');

/* ── Self-hosted webfonts ─────────────────────────────────── */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/HankenGrotesk-400.woff2') format('woff2');
}
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/IBMPlexMono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/IBMPlexMono-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/IBMPlexMono-600.woff2') format('woff2'); }

/* ── Tokens ────────────────────────────────────────────────── */
:root {
  /* Brand red */
  --brand-50:#FFECEE; --brand-100:#FFD3D8; --brand-200:#FFA8B1; --brand-300:#FB7984;
  --brand-400:#FB4E5C; --brand-500:#FB2C3A; --brand-600:#D80E26; --brand-700:#AE0A1E;
  --brand-800:#840714; --brand-900:#4A050D;
  /* Neutrals */
  --neutral-0:#FFFFFF; --neutral-50:#FAFAFA; --neutral-75:#F4F5F6; --neutral-100:#EFEFEF;
  --neutral-200:#E0E0E0; --neutral-300:#C7C7C7; --neutral-400:#9A9A9A; --neutral-500:#6E6E6E;
  --neutral-600:#525252; --neutral-700:#404040; --neutral-800:#262626; --neutral-900:#1A1A1A;
  /* Success / semantic */
  --success-50:#E8F8EF; --success-500:#21C063; --success-600:#168F47;
  --red-50:#FBEAEA; --red-500:#B03030; --red-600:#8F2424;
  --amber-500:#E0922F; --blue-500:#2F6FE0;

  /* Semantic aliases */
  --brand:var(--brand-500); --brand-hover:var(--brand-600); --brand-press:var(--brand-700);
  --brand-ink:var(--brand-900); --brand-tint:var(--brand-50); --on-brand:var(--neutral-0);
  --text-strong:var(--neutral-900); --text-body:var(--neutral-800); --text-muted:var(--neutral-500);
  --text-disabled:var(--neutral-400); --text-on-dark:var(--neutral-0); --text-link:var(--brand-600);
  --surface-page:var(--neutral-50); --surface-card:var(--neutral-0); --surface-sunken:var(--neutral-75);
  --surface-dark:var(--brand-900);
  --border-subtle:var(--neutral-200); --border-strong:var(--neutral-300); --border-focus:var(--brand-500);
  --positive:var(--success-600); --positive-tint:var(--success-50); --negative:var(--red-500);

  /* Type */
  --font-display:'Hanken Grotesk','IBM Plex Sans Thai',system-ui,-apple-system,sans-serif;
  --font-sans:'Hanken Grotesk','IBM Plex Sans Thai',system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono','IBM Plex Sans Thai',ui-monospace,'SF Mono',monospace;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-extra:800;
  --tracking-tight:-0.02em; --tracking-snug:-0.01em; --tracking-caps:0.12em;

  /* Spacing / radius / shadow / motion */
  --space-4:16px; --space-6:24px; --space-8:32px; --space-16:64px; --space-20:80px; --space-24:96px;
  --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:20px; --radius-full:999px;
  --shadow-xs:0 1px 2px rgba(26,26,26,.05);
  --shadow-sm:0 1px 3px rgba(26,26,26,.07),0 1px 2px rgba(26,26,26,.04);
  --shadow-md:0 4px 12px rgba(26,26,26,.08),0 1px 3px rgba(26,26,26,.05);
  --shadow-lg:0 12px 28px rgba(26,26,26,.10),0 2px 6px rgba(26,26,26,.05);
  --shadow-brand:0 8px 24px rgba(251,44,58,.30); --ring-focus:0 0 0 3px rgba(251,44,58,.28);
  --ease-out:cubic-bezier(.22,1,.36,1); --dur-fast:120ms; --dur-base:200ms; --dur-slow:360ms;
  --container:1200px; --pad-x:clamp(28px,5vw,64px);
}

/* ── Base ──────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; font-family:var(--font-sans); font-size:16px; line-height:1.5;
  color:var(--text-body); background:var(--surface-page);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6 { font-family:var(--font-display); color:var(--text-strong); letter-spacing:var(--tracking-tight); line-height:1.08; margin:0; font-weight:var(--weight-bold); }
h1 { font-size:clamp(40px,6vw,68px); font-weight:var(--weight-extra); }
h2 { font-size:clamp(30px,4vw,46px); }
h3 { font-size:21px; }
p { margin:0; }
a { color:var(--text-link); text-decoration:none; transition:color var(--dur-fast) var(--ease-out); }
a:hover { color:var(--brand); }
img,svg { display:block; max-width:100%; }
::selection { background:var(--brand-100); color:var(--brand-900); }
:focus-visible { outline:none; box-shadow:var(--ring-focus); border-radius:var(--radius-sm); }
mark { background:var(--brand-100); color:var(--brand-900); padding:0 3px; border-radius:3px; }

/* ── Bilingual EN/TH (driven by body.lang-th + script.js) ──── */
[data-th] { display:none !important; }
span[data-th] { display:none !important; }
body.lang-th [data-en] { display:none !important; }
body.lang-th [data-th] { display:block !important; }
body.lang-th span[data-en] { display:none !important; }
body.lang-th span[data-th] { display:inline !important; }
body.lang-th li[data-en] { display:none !important; }
body.lang-th li[data-th] { display:list-item !important; }

/* ── Layout helpers ────────────────────────────────────────── */
.container { max-width:var(--container); margin:0 auto; padding:0 var(--pad-x); }
.section { padding:clamp(40px,5vw,72px) 0; }
.eyebrow {
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono);
  font-size:12px; font-weight:var(--weight-medium); letter-spacing:var(--tracking-caps);
  text-transform:uppercase; color:var(--brand-hover); margin:0;
}
.eyebrow__line { width:16px; height:1px; background:currentColor; opacity:.4; }
.eyebrow__n { opacity:.55; }
.mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-sans); font-weight:var(--weight-semibold); font-size:16px; line-height:1;
  padding:13px 22px; border-radius:var(--radius-md); border:1px solid transparent; cursor:pointer;
  white-space:nowrap; transition:background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn:active { transform:scale(.98); }
.btn-primary { background:var(--brand); color:var(--on-brand); box-shadow:var(--shadow-brand); }
.btn-primary:hover { background:var(--brand-hover); color:var(--on-brand); }
.btn-outline, .btn-secondary { background:var(--surface-card); color:var(--text-strong); border-color:var(--border-strong); box-shadow:var(--shadow-xs); }
.btn-outline:hover, .btn-secondary:hover { background:var(--surface-sunken); border-color:var(--brand); color:var(--text-strong); }
.btn-dark { background:var(--neutral-900); color:var(--on-brand); }
.btn-dark:hover { background:var(--neutral-800); color:var(--on-brand); }
.btn-lg { padding:16px 30px; font-size:18px; }

/* ── Nav ───────────────────────────────────────────────────── */
.nav {
  position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between;
  height:68px; padding:0 var(--pad-x); border-bottom:1px solid var(--border-subtle);
  background:rgba(255,255,255,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.nav__logo { display:inline-block; font-family:var(--font-display); font-weight:var(--weight-extra); font-size:20px; letter-spacing:-.02em; color:var(--text-strong); }
.nav__logo:hover { color:var(--text-strong); }
.nav__logo img { width:30px; height:30px; }
/* Small red brand plus, raised to the top-right of the wordmark */
/* Small red brand plus, pinned to the top-right of the wordmark */
.logo-plus { display:inline-block; color:var(--brand); font-weight:var(--weight-extra); font-size:.4em; line-height:1; vertical-align:top; margin-left:0.5px; transform:translateY(.12em); }
.footer__logo .logo-plus { color:var(--brand-300); }
.nav__logo span { color:var(--brand); }
.nav__links { display:flex; align-items:center; gap:6px; }
.nav__links > a {
  font-size:14px; font-weight:var(--weight-medium); color:var(--text-muted);
  padding:8px 12px; border-radius:var(--radius-sm);
}
.nav__links > a:hover { color:var(--text-strong); background:var(--surface-sunken); }
.nav__links > a.active { color:var(--brand-hover); }
.nav__lang { display:inline-flex; margin-left:8px; border:1px solid var(--border-subtle); border-radius:var(--radius-full); overflow:hidden; }
.nav__lang button { font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.06em; padding:6px 11px; border:none; background:transparent; color:var(--text-muted); cursor:pointer; transition:all var(--dur-fast) var(--ease-out); }
.nav__lang button.active { background:var(--brand); color:var(--on-brand); }
.nav__right { display:flex; align-items:center; gap:10px; }
.nav__hamburger { display:none; flex-direction:column; gap:5px; width:44px; height:44px; align-items:center; justify-content:center; border:1px solid var(--border-subtle); border-radius:var(--radius-sm); background:var(--surface-card); cursor:pointer; }
.nav__hamburger span { width:18px; height:2px; background:var(--text-strong); border-radius:2px; }

.nav__mobile { display:none; flex-direction:column; gap:4px; padding:12px var(--pad-x) 20px; background:var(--surface-card); border-bottom:1px solid var(--border-subtle); }
.nav__mobile.open { display:flex; }
.nav__mobile a { font-size:16px; font-weight:var(--weight-medium); color:var(--text-body); padding:14px 6px; border-bottom:1px solid var(--border-subtle); }
.nav__mobile__lang { display:inline-flex; margin-top:10px; border:1px solid var(--border-subtle); border-radius:var(--radius-full); overflow:hidden; align-self:flex-start; }
.nav__mobile__lang button { font-family:var(--font-mono); font-size:12px; padding:7px 16px; border:none; background:transparent; color:var(--text-muted); cursor:pointer; }
.nav__mobile__lang button.active { background:var(--brand); color:var(--on-brand); }

/* ── Hero ──────────────────────────────────────────────────── */
.hero { padding-top:clamp(28px,4vw,56px); padding-bottom:clamp(24px,3.5vw,44px); }
.hero__grid { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center; }
.hero__eyebrow { display:inline-flex; align-items:center; gap:9px; }
.hero__pulse { width:8px; height:8px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 0 rgba(251,44,58,.5); animation:pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(251,44,58,.45);} 70%{box-shadow:0 0 0 8px rgba(251,44,58,0);} 100%{box-shadow:0 0 0 0 rgba(251,44,58,0);} }
.hero__title { margin:20px 0 0; }
.hero__title em { font-style:italic; color:var(--brand-hover); }
.hero__sub { margin-top:22px; max-width:520px; font-size:18px; line-height:1.65; color:var(--text-muted); }
.hero__ctas { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.hero__reassure { margin-top:16px; font-family:var(--font-mono); font-size:12px; color:var(--text-muted); letter-spacing:.02em; }
.hero__engines { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:36px; padding-top:24px; border-top:1px solid var(--border-subtle); }
.hero__engines-label { font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--text-muted); margin-right:4px; }
.hero__engine { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:13px; font-weight:500; color:var(--neutral-700); background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-full); padding:6px 13px; box-shadow:var(--shadow-xs); }
.hero__engine::before { content:'◈'; color:var(--brand); font-size:12px; }

/* AI-citation result panel (canonical Hero panel — deep-red surface) */
.hero-panel { background:var(--surface-dark); border-radius:var(--radius-xl); padding:28px; box-shadow:var(--shadow-xl,0 24px 56px rgba(26,26,26,.18)); color:#fff; }
.hero-panel__engine { font-family:var(--font-mono); font-size:11px; color:var(--brand-300); letter-spacing:var(--tracking-caps); text-transform:uppercase; }
.hero-panel__query { margin-top:16px; font-size:18px; line-height:1.5; color:rgba(255,255,255,.92); font-family:var(--font-mono); }
.hero-panel__sources { margin-top:18px; display:flex; flex-direction:column; gap:9px; }
.hero-src { display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-md); padding:10px 13px; font-family:var(--font-mono); font-size:13px; }
.hero-src__mark { color:rgba(255,255,255,.4); }
.hero-src__d { color:rgba(255,255,255,.6); }
.hero-src.hit { background:rgba(251,44,58,.28); border-color:rgba(255,107,120,.6); }
.hero-src.hit .hero-src__mark { color:var(--brand-300); }
.hero-src.hit .hero-src__d { color:#fff; }
.hero-src__tag { margin-left:auto; font-size:10px; color:var(--brand-300); letter-spacing:.08em; }
.hero-panel__cited { margin-top:22px; margin-bottom:10px; font-family:var(--font-mono); font-size:11px; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:var(--tracking-caps); }
.hero-panel__chips { display:flex; gap:8px; flex-wrap:wrap; }
.pchip { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:13px; font-weight:var(--weight-medium); color:var(--brand-700); background:var(--brand-tint); border:1px solid var(--brand-200); border-radius:var(--radius-full); padding:6px 13px 6px 11px; }
.pchip::before { content:'◈'; color:var(--brand); font-size:12px; }

/* ── Audit strip ───────────────────────────────────────────── */
.audit-strip { background:var(--surface-dark); color:var(--text-on-dark); }
.audit-strip__inner { display:flex; align-items:center; justify-content:space-between; gap:32px; padding:clamp(32px,5vw,56px) var(--pad-x); flex-wrap:wrap; }
.audit-strip__left { max-width:430px; }
.audit-strip__tag { display:inline-block; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--brand-200); margin-bottom:12px; }
.audit-strip__headline { font-family:var(--font-display); font-size:clamp(22px,3vw,30px); font-weight:var(--weight-bold); color:#fff; line-height:1.18; letter-spacing:var(--tracking-tight); }
.audit-strip__form { flex:1; min-width:300px; max-width:520px; }
.audit-strip__input-row { display:flex; gap:8px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:var(--radius-md); padding:6px; }
.audit-strip__input { flex:1; background:transparent; border:none; outline:none; color:#fff; font-family:var(--font-sans); font-size:15px; padding:10px 12px; }
.audit-strip__input::placeholder { color:rgba(255,255,255,.45); }
.audit-strip__btn { background:var(--brand); color:#fff; border:none; border-radius:var(--radius-sm); font-family:var(--font-sans); font-weight:var(--weight-semibold); font-size:15px; padding:10px 18px; cursor:pointer; white-space:nowrap; transition:background var(--dur-fast) var(--ease-out); }
.audit-strip__btn:hover { background:var(--brand-hover); }
.audit-strip__sub { margin-top:10px; font-family:var(--font-mono); font-size:11.5px; color:rgba(255,255,255,.55); }

/* ── Stats strip ───────────────────────────────────────────── */
.stats-strip { display:grid; grid-template-columns:repeat(4,1fr); max-width:var(--container); margin:0 auto; padding:clamp(32px,4vw,52px) var(--pad-x); gap:1px; }
.stat { display:flex; flex-direction:column; gap:8px; padding:0 clamp(12px,2vw,28px); border-left:1px solid var(--border-subtle); }
.stat:first-child { border-left:none; padding-left:0; }
.stat__num { font-family:var(--font-display); font-weight:var(--weight-extra); font-size:clamp(40px,5vw,60px); line-height:1; letter-spacing:var(--tracking-tight); color:var(--brand-hover); font-variant-numeric:tabular-nums; }
.stat__lbl { font-size:13.5px; line-height:1.5; color:var(--text-muted); }

/* ── Section head ──────────────────────────────────────────── */
.sec-head { display:flex; gap:20px; margin-bottom:clamp(20px,3vw,34px); align-items:flex-start; }
.sec-head__n { font-family:var(--font-mono); font-size:13px; color:var(--brand-hover); padding-top:6px; opacity:.7; }
.sec-head__body .label, .label { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px; font-weight:var(--weight-medium); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--brand-hover); margin:0 0 14px; }
.sec-head__body h2, h2 em { }
h2 em { font-style:normal; color:var(--brand); }

/* ── Grids ─────────────────────────────────────────────────── */
.g2 { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,64px); }
.g3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }

/* ── Compare (SEO vs GEO) ──────────────────────────────────── */
.compare { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border-subtle); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); overflow:hidden; }
.compare__col { background:var(--surface-card); padding:24px 22px 28px; }
.compare__col.geo { background:var(--brand-tint); }
.compare__head { font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--text-muted); margin-bottom:16px; }
.compare__col.geo .compare__head { color:var(--brand-hover); }
.compare ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.compare li { font-size:14px; line-height:1.45; color:var(--text-body); display:flex; gap:9px; }
.compare__col ul li::before { content:'✗'; color:var(--negative); flex:none; font-weight:600; }
.compare__col.geo ul li::before { content:'✓'; color:var(--positive); }

/* ── Cards ─────────────────────────────────────────────────── */
.card { background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:28px 26px; box-shadow:var(--shadow-sm); transition:box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); border-color:var(--brand); }
.card__icon { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:var(--radius-md); background:var(--brand-tint); color:var(--brand); font-size:20px; margin-bottom:18px; }
.card__title { font-size:19px; margin-bottom:10px; }
.card__body { font-size:14.5px; line-height:1.7; color:var(--text-muted); }

/* Generic feature list (services etc.) */
.feature-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.feature-list li { font-size:15px; line-height:1.6; color:var(--text-body); display:flex; gap:10px; }
.feature-list li::before { content:'✓'; color:var(--positive); flex:none; font-weight:700; }

/* ── Contact ───────────────────────────────────────────────── */
.contact-sec { background:var(--surface-sunken); }
.contact-layout { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,64px); align-items:start; }
.contact-sub { margin-top:20px; font-size:16px; line-height:1.7; color:var(--text-muted); max-width:420px; }
.contact-email { display:inline-block; margin-top:24px; font-family:var(--font-mono); font-size:15px; color:var(--brand-hover); }
.contact-right { background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:clamp(24px,3vw,36px); box-shadow:var(--shadow-sm); }
.cf { display:flex; flex-direction:column; gap:16px; }
.cf-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cf-field { display:flex; flex-direction:column; gap:6px; }
.cf-label { font-size:14px; font-weight:var(--weight-semibold); color:var(--text-strong); }
.cf-input { background:var(--surface-card); border:1px solid var(--border-strong); border-radius:var(--radius-md); padding:11px 13px; font-family:var(--font-sans); font-size:16px; color:var(--text-body); outline:none; transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.cf-input:focus { border-color:var(--brand); box-shadow:var(--ring-focus); }
.cf-submit { margin-top:4px; position:relative; }
.cf-submit__sending { display:none; }
.cf-submit.sending .cf-submit__label { visibility:hidden; }
.cf-submit.sending .cf-submit__sending { display:inline; position:absolute; }
.cf-status { font-size:13.5px; margin-top:4px; min-height:1em; }
.cf-status--ok { color:var(--positive); }
.cf-status--err { color:var(--negative); }

/* ── Footer ────────────────────────────────────────────────── */
.footer { background:var(--surface-dark); color:rgba(255,255,255,.7); padding:clamp(40px,5vw,56px) var(--pad-x); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; }
.footer__logo { display:inline-block; font-family:var(--font-display); font-weight:var(--weight-extra); font-size:18px; color:#fff; letter-spacing:-.02em; }
.footer__logo:hover { color:#fff; }
.footer__logo img { width:26px; height:26px; }
.footer__logo span { color:var(--brand-300); }
.footer__links { display:flex; flex-wrap:wrap; gap:22px; }
.footer__links a { font-size:14px; color:rgba(255,255,255,.7); }
.footer__links a:hover { color:#fff; }
.footer__copy { font-family:var(--font-mono); font-size:12px; color:rgba(255,255,255,.45); width:100%; padding-top:8px; border-top:1px solid rgba(255,255,255,.12); }

/* ── Page hero (interior pages) ────────────────────────────── */
.page-hero { padding:clamp(36px,5vw,64px) 0 clamp(18px,2.5vw,30px); }
.page-hero h1 { margin-top:18px; }
.page-hero .label { margin-bottom:0; }

/* ── Fade-up reveal ────────────────────────────────────────── */
.fade-up { opacity:0; transform:translateY(8px); transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.fade-up.visible { opacity:1; transform:translateY(0); }
.fade-up.d1 { transition-delay:.06s; } .fade-up.d2 { transition-delay:.12s; } .fade-up.d3 { transition-delay:.18s; }
@media (prefers-reduced-motion:reduce) { .fade-up { opacity:1; transform:none; } .hero__pulse { animation:none; } }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width:900px) {
  .hero__grid { grid-template-columns:1fr; }
  .hero__visual { order:-1; }
  .g2, .contact-layout { grid-template-columns:1fr; }
  .g3 { grid-template-columns:1fr; }
  .stats-strip { grid-template-columns:1fr 1fr; gap:32px 1px; }
  .stat { padding-left:clamp(12px,2vw,28px); }
  .stat:nth-child(3) { border-left:none; padding-left:0; }
}
@media (max-width:760px) {
  .nav__links { display:none; }
  .nav__hamburger { display:flex; }
  .audit-strip__inner { flex-direction:column; align-items:stretch; }
}
@media (max-width:560px) {
  .stats-strip { grid-template-columns:1fr; }
  .stat { border-left:none; padding-left:0; }
  .cf-row { grid-template-columns:1fr; }
  .compare { grid-template-columns:1fr; }
}

/* ── Chatbot widget (ported to brand) ──────────────────────── */
#mc-chat { position:fixed; bottom:28px; right:28px; z-index:9999; font-family:var(--font-sans); }
.mc-bubble { width:56px; height:56px; border-radius:50%; background:var(--brand); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-brand); transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); position:relative; z-index:1; }
.mc-bubble:hover { transform:scale(1.07); box-shadow:0 10px 30px rgba(251,44,58,.45); }
.mc-bubble svg { width:22px; height:22px; color:#fff; position:absolute; transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.mc-icon-close { opacity:0; transform:rotate(-45deg); }
.mc-bubble--open .mc-icon-chat { opacity:0; transform:rotate(45deg); }
.mc-bubble--open .mc-icon-close { opacity:1; transform:rotate(0deg); }
.mc-panel { position:absolute; bottom:68px; right:0; width:344px; max-width:calc(100vw - 32px); background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); box-shadow:var(--shadow-xl,0 24px 56px rgba(26,26,26,.18)); display:flex; flex-direction:column; overflow:hidden; opacity:0; transform:translateY(12px) scale(.97); pointer-events:none; transition:opacity .22s var(--ease-out), transform .22s var(--ease-out); transform-origin:bottom right; }
.mc-panel--open { opacity:1; transform:translateY(0) scale(1); pointer-events:all; }
.mc-header { padding:14px 16px; border-bottom:1px solid var(--border-subtle); background:var(--surface-sunken); }
.mc-header__info { display:flex; align-items:center; gap:10px; }
.mc-dot { width:8px; height:8px; border-radius:50%; background:var(--positive); flex-shrink:0; box-shadow:0 0 6px rgba(33,192,99,.6); }
.mc-header__name { font-size:14px; font-weight:var(--weight-semibold); color:var(--text-strong); }
.mc-header__sub { font-size:11.5px; color:var(--text-muted); font-family:var(--font-mono); letter-spacing:.03em; }
.mc-messages { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; min-height:220px; max-height:320px; scrollbar-width:thin; }
.mc-msg { display:flex; max-width:88%; }
.mc-msg--user { align-self:flex-end; }
.mc-msg--bot { align-self:flex-start; }
.mc-msg__bubble { padding:9px 13px; border-radius:var(--radius-md); font-size:13.5px; line-height:1.55; color:var(--text-body); }
.mc-msg--user .mc-msg__bubble { background:var(--brand); color:#fff; font-weight:500; border-radius:10px 10px 2px 10px; }
.mc-msg--bot .mc-msg__bubble { background:var(--surface-sunken); border:1px solid var(--border-subtle); border-radius:10px 10px 10px 2px; }
.mc-msg__bubble a { color:var(--brand-hover); }
.mc-dots { display:inline-flex; gap:4px; align-items:center; height:16px; }
.mc-dots span { width:6px; height:6px; border-radius:50%; background:var(--neutral-400); animation:mc-bounce 1.2s infinite ease-in-out; }
.mc-dots span:nth-child(2) { animation-delay:.2s; } .mc-dots span:nth-child(3) { animation-delay:.4s; }
@keyframes mc-bounce { 0%,60%,100%{transform:translateY(0); opacity:.4;} 30%{transform:translateY(-5px); opacity:1;} }
.mc-input-row { display:flex; align-items:center; gap:8px; padding:10px 12px; border-top:1px solid var(--border-subtle); background:var(--surface-sunken); }
.mc-input { flex:1; background:var(--surface-card); border:1px solid var(--border-strong); border-radius:var(--radius-sm); color:var(--text-body); font-family:var(--font-sans); font-size:16px; padding:9px 11px; outline:none; transition:border-color var(--dur-fast) var(--ease-out); }
.mc-input::placeholder { color:var(--text-muted); }
.mc-input:focus { border-color:var(--brand); }
.mc-send { width:40px; height:40px; border-radius:var(--radius-sm); background:var(--brand); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background var(--dur-fast) var(--ease-out); }
.mc-send:hover { background:var(--brand-hover); }
.mc-send:disabled { opacity:.4; cursor:not-allowed; }
.mc-send svg { width:15px; height:15px; color:#fff; }
.mc-footer-note { text-align:center; font-size:10.5px; color:var(--text-muted); font-family:var(--font-mono); padding:6px 0 8px; letter-spacing:.03em; }
@media (max-width:520px) { #mc-chat { bottom:18px; right:16px; } .mc-panel { width:calc(100vw - 32px); } }

/* ===========================================================
   LEGACY TOKEN ALIASES — let interior pages + their inline
   styles (services pricing, geo-audit tool) recolor to the new
   brand without rewriting every rule. Prefer the new tokens
   above in fresh work.
   =========================================================== */
:root {
  --accent:var(--brand); --accent-2:var(--brand-hover); --accent-bg:var(--brand-tint);
  --bg:var(--surface-page); --bg-2:var(--surface-sunken); --bg-3:var(--neutral-100);
  --border:var(--border-subtle); --nav-bg:rgba(255,255,255,.82);
  --text:var(--text-body); --text-2:var(--neutral-600); --text-3:var(--neutral-500);
  --ff-serif:var(--font-display); --ff-sans:var(--font-sans); --ff-mono:var(--font-mono); --ff-thai:var(--font-sans);
  --radius:var(--radius-md); --trans:var(--dur-base) var(--ease-out); --gap:clamp(20px,3vw,48px);
}

/* ── Knowledge: article list + body (ported, recolored) ─────── */
.article-list { display:flex; flex-direction:column; border:1px solid var(--border-subtle); border-radius:var(--radius-lg); overflow:hidden; background:var(--surface-card); }
.article-item { border-bottom:1px solid var(--border-subtle); }
.article-item:last-child { border-bottom:none; }
details.article-item summary { list-style:none; cursor:pointer; }
details.article-item summary::-webkit-details-marker { display:none; }
.article-summary { display:grid; grid-template-columns:1fr auto; align-items:start; gap:24px; padding:28px 30px; transition:background var(--dur-base) var(--ease-out); }
.article-summary:hover { background:var(--surface-sunken); }
details[open] .article-summary { background:var(--surface-sunken); border-bottom:1px solid var(--border-subtle); }
.article-meta { display:flex; align-items:center; gap:16px; margin-bottom:12px; }
.article-tag { font-family:var(--font-mono); font-size:11px; letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--brand-hover); }
.article-read { font-family:var(--font-mono); font-size:11px; color:var(--text-muted); }
.article-title { font-family:var(--font-display); font-size:clamp(18px,1.8vw,22px); font-weight:var(--weight-bold); line-height:1.25; letter-spacing:var(--tracking-snug); margin-bottom:10px; color:var(--text-strong); }
.article-excerpt { font-size:14.5px; color:var(--text-muted); line-height:1.7; max-width:680px; }
.article-chevron { font-size:14px; color:var(--text-muted); transition:transform var(--dur-base) var(--ease-out); padding-top:4px; flex-shrink:0; }
details[open] .article-chevron { transform:rotate(90deg); color:var(--brand); }
.article-body { padding:36px 30px 44px; max-width:760px; }
.article-body h2 { font-size:24px; font-weight:var(--weight-bold); margin:36px 0 14px; padding-top:28px; border-top:1px solid var(--border-subtle); }
.article-body h2:first-child { margin-top:0; padding-top:0; border-top:none; }
.article-body h3 { font-size:18px; font-weight:var(--weight-semibold); margin:24px 0 10px; }
.article-body p { font-size:15.5px; color:var(--text-body); line-height:1.8; margin-bottom:18px; }
.article-body ul, .article-body ol { padding-left:20px; margin-bottom:18px; }
.article-body li { font-size:15px; color:var(--text-body); line-height:1.75; margin-bottom:7px; }
.article-body ul li { list-style:disc; }
.article-body ol li { list-style:decimal; }
.article-body strong { color:var(--text-strong); font-weight:var(--weight-semibold); }
.callout { border-left:3px solid var(--brand); padding:14px 20px; background:var(--brand-tint); margin:24px 0; border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.callout p { margin:0; color:var(--text-body); font-size:15px; }

/* ── Services: service blocks, process, CTA (ported) ────────── */
.svc-block { display:grid; grid-template-columns:280px 1fr; gap:60px; align-items:start; padding:clamp(28px,4vw,52px) 0; border-top:1px solid var(--border-subtle); }
.svc-block:first-child { border-top:none; }
.svc-num { font-family:var(--font-mono); font-size:12px; color:var(--text-muted); margin-bottom:12px; letter-spacing:.06em; }
.svc-title { margin-bottom:12px; font-size:clamp(26px,3vw,34px); }
.svc-tag { display:inline-block; font-size:11px; letter-spacing:var(--tracking-caps); text-transform:uppercase; padding:5px 12px; border:1px solid var(--border-subtle); border-radius:var(--radius-full); color:var(--brand-hover); background:var(--brand-tint); font-family:var(--font-mono); margin-top:20px; }
.svc-note { margin-top:24px; padding-top:20px; border-top:1px solid var(--border-subtle); font-size:13px; color:var(--text-muted); font-family:var(--font-mono); letter-spacing:.02em; }
.process { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border-subtle); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); overflow:hidden; }
.step { background:var(--surface-card); padding:28px 24px 32px; }
.step__n { font-family:var(--font-mono); font-size:12px; color:var(--brand-hover); margin-bottom:16px; display:block; }
.step__title { font-size:17px; font-weight:var(--weight-semibold); line-height:1.4; margin-bottom:10px; }
.step__body { font-size:14px; color:var(--text-muted); line-height:1.65; }
.cta-sec { padding:clamp(40px,5vw,72px) 0; border-top:1px solid var(--border-subtle); text-align:center; }
.cta-sec h2 { margin:8px 0 18px; }
.cta-sec p { max-width:520px; margin:0 auto 28px; color:var(--text-muted); font-size:16px; line-height:1.7; }
.cta-sec .label { justify-content:center; }
@media (max-width:760px) { .svc-block { grid-template-columns:1fr; gap:24px; } .process { grid-template-columns:1fr 1fr; } }
@media (max-width:520px) { .process { grid-template-columns:1fr; } }

/* ── Mobile polish (focused fixes) ─────────────────────────── */
@media (max-width:760px) {
  .audit-strip__form { min-width:0; max-width:none; }
}
@media (max-width:560px) {
  .article-summary { padding:20px 18px; gap:14px; }
  .article-body { padding:24px 18px 32px; }
  .hero-panel { padding:20px; }
  .hero-panel__query { font-size:16px; }
}
@media (max-width:520px) {
  .audit-strip__input-row { flex-direction:column; }
  .audit-strip__btn { width:100%; }
}