/* ============================================================================
   Cosmixon Hub — "Aurora Glass" page styles for /, /apps/, /about/.

   Tokens, @font-face and the COSMIX/ON wordmark live in cosmixon-brand.css,
   which every page links FIRST (parallel request, no @import chain) and which
   /admin/hub links too. Do not redefine them here.

   Other signature marks that must survive:
     "24/7 ONLINE" + pulsing .pip   (hero tagline, / only)
     "24/7 UPTIME"                  (footer, all pages)
   ========================================================================== */

/* ── Reset / base ────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{
  background:var(--ink-900);
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 16px);
}
html[lang="th"]{line-height:1.85}
html[lang="en"]{line-height:1.62}
body{
  margin:0; min-height:100vh;
  display:flex; flex-direction:column;
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  color:var(--text);
  background:var(--ink-900);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* Real affordances — the old page forced its custom cursor onto every link
   with `a,button{cursor:inherit}`, losing pointer/I-beam semantics site-wide. */
a,button,[role="button"],summary,label[for]{cursor:pointer}
input,textarea,select{cursor:auto}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:700;color:var(--text-hi);line-height:1.18}
:lang(th) h1,:lang(th) h2,:lang(th) h3{line-height:1.35}
p{margin:0 0 var(--s4)}
button{font:inherit;color:inherit;background:none;border:0}
::selection{background:rgba(0,207,255,.28);color:#fff}

.page{width:100%;max-width:var(--page);margin-inline:auto;padding-inline:var(--s5)}
main{flex:1;position:relative;z-index:1}
.prose{max-width:var(--measure)}

/* Screen-reader only + skip link */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:fixed;top:-120px;left:var(--s4);z-index:200;
  padding:12px 18px;min-height:44px;display:inline-flex;align-items:center;
  border-radius:var(--r-sm);background:var(--ink-700);color:var(--text-hi);
  border:1px solid var(--glass-line-hi);transition:top var(--t-fast)}
.skip:focus{top:calc(var(--header-h) + 10px)}

/* ── Background: aurora + static starfield + grain ───────────────────────── */
/* Replaces the old .galaxy / .nebula(filter:blur) / 2x rAF <canvas> / CRT scanlines.
   No filter:blur() anywhere — a multi-stop radial gradient IS the blur, and costs
   one composited paint instead of an offscreen raster pass every animated frame. */
.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;isolation:isolate;overflow:hidden}
.aurora b{
  position:absolute;display:block;border-radius:50%;
  mix-blend-mode:screen;will-change:transform;
  animation:drift var(--d) ease-in-out infinite alternate;
}
.aurora .b1{--d:34s;width:62vmax;height:62vmax;top:-24vmax;left:-14vmax;
  background:radial-gradient(circle,rgba(0,207,255,.34),rgba(0,207,255,.11) 42%,transparent 70%)}
.aurora .b2{--d:41s;animation-delay:-12s;width:70vmax;height:70vmax;bottom:-30vmax;right:-18vmax;
  background:radial-gradient(circle,rgba(123,97,255,.36),rgba(123,97,255,.12) 44%,transparent 72%)}
.aurora .b3{--d:28s;animation-delay:-20s;width:46vmax;height:46vmax;top:34%;left:42%;
  background:radial-gradient(circle,rgba(0,230,118,.22),rgba(0,230,118,.07) 40%,transparent 68%)}
@keyframes drift{to{transform:translate3d(6vw,4vh,0) scale(1.14)}}

/* Static stars — zero JS, zero rAF, zero battery. One slow opacity breathe. */
.aurora::after{
  content:'';position:absolute;inset:0;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1.1px 1.1px at 78% 12%, rgba(198,229,255,.75), transparent 60%),
    radial-gradient(1.6px 1.6px at 42% 62%, rgba(255,255,255,.70), transparent 60%),
    radial-gradient(1px 1px at 88% 74%, rgba(157,123,255,.80), transparent 60%),
    radial-gradient(1.2px 1.2px at 26% 84%, rgba(0,207,255,.70), transparent 60%),
    radial-gradient(1px 1px at 62% 34%, rgba(255,255,255,.60), transparent 60%),
    radial-gradient(1.3px 1.3px at 6% 52%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 94% 42%, rgba(198,229,255,.60), transparent 60%);
  background-repeat:repeat;
  background-size:520px 420px;
  opacity:.55;
  animation:twinkle 9s ease-in-out infinite alternate;
}
@keyframes twinkle{from{opacity:.42}to{opacity:.72}}

/* Grain — kills gradient banding, which is where glassmorphism visibly falls
   apart on 8-bit panels. ~700 bytes, no layout cost. */
.grain{
  position:fixed;inset:0;z-index:60;pointer-events:none;
  opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Shooting star (hub page only; JS gates it on reduced-motion + tab visibility) */
.shoot{
  position:fixed;width:120px;height:1.5px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
  animation:shoot 1.4s ease-out forwards;
}
@keyframes shoot{
  0%{opacity:0;transform:translate3d(0,0,0) scaleX(.2)}
  18%{opacity:1}
  100%{opacity:0;transform:translate3d(340px,190px,0) scaleX(1)}
}

/* ── Glass surface ───────────────────────────────────────────────────────── */
/* The opaque fallback is the DEFAULT declaration. Blur is the ENHANCEMENT.
   Inverting this yields unreadable near-transparent cards wherever
   backdrop-filter is unsupported — and it looks fine on the dev machine. */
.glass{
  background:var(--glass-base);
  border:1px solid var(--glass-line);
  border-radius:var(--r-lg);
  box-shadow:var(--e1),var(--glass-inner);
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .glass{
    background:var(--glass-wash),var(--glass-base);
    -webkit-backdrop-filter:var(--glass-blur);
            backdrop-filter:var(--glass-blur);
  }
}

/* ── Header ──────────────────────────────────────────────────────────────── */
/* Absorbs the old position:fixed .admin-dot into normal flow — no more
   env(safe-area-inset) math, no risk of a floating 44px target over content. */
.site-header{
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid transparent;
  transition:background var(--t-fast),border-color var(--t-fast);
}
.site-header.is-stuck{
  background:rgba(5,6,15,.82);
  border-bottom-color:var(--glass-line);
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .site-header.is-stuck{
    background:rgba(5,6,15,.66);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
            backdrop-filter:blur(14px) saturate(140%);
  }
}
.header-row{
  display:flex;align-items:center;gap:var(--s4);
  min-height:var(--header-h);flex-wrap:wrap;
}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;min-width:0}
.brand svg{width:26px;height:26px;flex:none}
.site-nav{display:flex;align-items:center;gap:2px;margin-inline-start:auto}
.site-nav a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 14px;
  border-radius:var(--r-sm);font-size:var(--fs-sm);color:var(--text-mid);
  transition:color var(--t-fast),background var(--t-fast);
}
.site-nav a:hover{color:var(--text-hi);background:rgba(255,255,255,.06)}
.site-nav a[aria-current="page"]{color:var(--cyan-200);background:rgba(0,207,255,.10)}
.header-tools{display:flex;align-items:center;gap:var(--s2)}
.admin-link{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--r-sm);color:var(--text-dim);
  transition:color var(--t-fast),background var(--t-fast);
}
.admin-link:hover{color:var(--cyan-200);background:rgba(0,207,255,.10)}
.admin-link svg{width:17px;height:17px}

/* Language toggle */
.lang{
  display:inline-flex;align-items:center;padding:2px;gap:2px;
  border-radius:var(--r-pill);border:1px solid var(--glass-line);
  background:rgba(255,255,255,.04);
}
.lang button{
  min-height:44px;min-width:44px;padding:0 12px;border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;
  font-family:var(--font-display);color:var(--text-dim);
  transition:color var(--t-fast),background var(--t-fast);
}
.lang button:hover{color:var(--text-hi)}
.lang button[aria-pressed="true"]{color:var(--ink-900);background:var(--cyan-200)}

/* header-sized wordmark */
.brand .wordmark{font-size:15px;letter-spacing:.20em}
/* Hub page only: hero already carries the big mark, so hold the header copy
   back until the hero is scrolled past — never two wordmarks at once, and
   never a header with no mark at all. */
.site-header.defer-mark .brand .wordmark{
  opacity:0;transform:translateY(-4px);
  transition:opacity var(--t-mid),transform var(--t-mid);
}
.site-header.defer-mark.is-stuck .brand .wordmark{opacity:1;transform:none}
/* hero-sized wordmark */
.hero .wordmark{font-size:var(--fs-display);letter-spacing:.10em;margin-bottom:var(--s3)}

/* ── Hub pill (Cosmixon interconnect standard) ───────────────────────────── */
/* Inline, in flow, never position:fixed. >=44px tall. Theme-neutral. */
.hub-pill{
  display:inline-flex;align-items:center;gap:6px;
  min-height:44px;padding:10px 15px;box-sizing:border-box;
  border-radius:9px;white-space:nowrap;
  font-size:var(--fs-sm);color:var(--text-mid);
  background:rgba(127,127,127,.12);border:1px solid rgba(127,127,127,.24);
  transition:color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);
}
.hub-pill:hover{
  color:var(--cyan-200);border-color:rgba(0,207,255,.45);
  box-shadow:0 0 22px -6px rgba(0,207,255,.55);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 22px;border-radius:var(--r-pill);
  font-family:var(--font-display);font-size:var(--fs-sm);font-weight:600;
  letter-spacing:.02em;
  transition:transform var(--t-mid),box-shadow var(--t-mid),
             background var(--t-fast),border-color var(--t-fast),color var(--t-fast);
}
.btn-primary{
  color:#04121a;
  background:linear-gradient(120deg,var(--cyan-200),var(--mint-200));
  box-shadow:0 10px 30px -12px rgba(0,207,255,.7);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 42px -14px rgba(0,207,255,.85)}
.btn-ghost{
  color:var(--text);border:1px solid var(--glass-line-hi);background:rgba(255,255,255,.04);
}
.btn-ghost:hover{color:var(--text-hi);border-color:rgba(0,207,255,.42);background:rgba(0,207,255,.08)}

/* ── Section furniture ───────────────────────────────────────────────────── */
.section{padding-block:var(--section-y)}
.section-tight{padding-block:clamp(56px,7vw,96px)}
/* the row that holds the ⬡ Hub pill — sits just under the header, not a section */
.subnav{padding-block:var(--s5) var(--s7)}
.eyebrow{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-display);
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--text-dim);margin-bottom:var(--s5);
}
.eyebrow::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--glass-line),transparent)}
.section-head{margin-bottom:var(--s7)}
.section-head p{color:var(--text-mid);max-width:var(--measure);margin:var(--s3) 0 0}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding-block:clamp(56px,9vw,104px) clamp(48px,7vw,88px);
}
.logo-wrap{position:relative;width:96px;height:96px;margin-bottom:var(--s5);animation:float 5s ease-in-out infinite}
.logo-aura{position:absolute;inset:-32%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,207,255,.30),rgba(123,97,255,.14) 55%,transparent 78%);
  filter:blur(14px);animation:auraPulse 4.2s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes auraPulse{0%,100%{opacity:.55;transform:scale(.94)}50%{opacity:1;transform:scale(1.08)}}
@keyframes spinCW{to{transform:rotate(360deg)}}
@keyframes spinCCW{to{transform:rotate(-360deg)}}
@keyframes corePulse{0%,100%{opacity:.75;r:5}50%{opacity:1;r:6.4}}
.ring1{transform-origin:50% 50%;animation:spinCW 20s linear infinite}
.ring2{transform-origin:50% 50%;animation:spinCCW 15s linear infinite}
.ring3{transform-origin:50% 50%;animation:spinCW 9s linear infinite}
.ring-dash{transform-origin:50% 50%;animation:spinCCW 30s linear infinite}
.orbit{transform-origin:50% 50%;animation:spinCW 24s linear infinite}
.core{animation:corePulse 3.4s ease-in-out infinite}

/* tagline — SIGNATURE MARK #2 lives here ("24/7 ONLINE" + .pip) */
.tagline{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
  font-family:var(--font-display);
  font-size:var(--fs-xs);letter-spacing:.22em;text-transform:uppercase;
  color:var(--text-dim);margin-bottom:var(--s6);
}
.tagline::before,.tagline::after{content:'';width:46px;height:1px;
  background:linear-gradient(90deg,transparent,var(--glass-line-hi))}
.tagline::after{background:linear-gradient(90deg,var(--glass-line-hi),transparent)}
.tagline .live{
  color:var(--mint-200);font-weight:700;letter-spacing:.18em;
  text-shadow:0 0 10px rgba(0,230,118,.55);
}
.tagline .live .pip{
  display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:7px;
  background:var(--mint);vertical-align:middle;
  box-shadow:0 0 8px var(--mint);          /* static so it survives reduced-motion */
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;box-shadow:0 0 8px var(--mint)}
  50%{opacity:.45;box-shadow:0 0 14px var(--mint)}
}
.hero-lead{
  font-size:clamp(19px,2.6vw,25px);font-weight:600;color:var(--text-hi);
  max-width:40ch;margin:0 auto var(--s3);line-height:1.55;
}
:lang(th) .hero-lead{line-height:1.7}
.hero-sub{
  font-size:var(--fs-lead);color:var(--text-mid);max-width:58ch;margin:0 auto var(--s6);
}
.hero-cta{display:flex;gap:var(--s3);flex-wrap:wrap;justify-content:center}

/* ── Trust bar (real numbers only — never invent one) ────────────────────── */
.trust-wrap{padding-block:0 clamp(40px,5vw,64px)}
.trustbar{
  display:grid;grid-template-columns:repeat(4,1fr);
  padding:var(--s5) var(--s4);
}
.trustbar > div{
  display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;
  padding:var(--s2) var(--s3);
  border-inline-start:1px solid var(--glass-line);
}
.trustbar > div:first-child{border-inline-start:0}
.trustbar b{
  font-family:var(--font-display);font-weight:700;line-height:1.1;
  font-size:clamp(21px,2.8vw,29px);letter-spacing:.02em;
  color:var(--text-hi);font-variant-numeric:tabular-nums;
}
.trustbar .t-mint{color:var(--mint-200);text-shadow:0 0 14px rgba(0,230,118,.35)}
.trustbar span{font-size:var(--fs-sm);color:var(--text-mid)}

/* ── Cards (shared by bento + directory) ─────────────────────────────────── */
/* Per-card accent is a variable, not five duplicated colour classes. That is
   what makes the old ".red .card-icon has no tint" bug structurally
   inexpressible — one rule now serves every hue. */
.card{
  --accent:var(--cyan);
  position:relative;display:flex;flex-direction:column;gap:10px;
  padding:var(--s5);border-radius:var(--r-lg);
  background:var(--glass-base);
  border:1px solid var(--glass-line);
  box-shadow:var(--e1),var(--glass-inner);
  transition:transform var(--t-mid),border-color var(--t-fast),box-shadow var(--t-mid);
}
.card.cyan{--accent:var(--cyan)}
.card.mint{--accent:var(--mint)}
.card.violet{--accent:var(--violet)}
.card.amber{--accent:var(--amber)}
.card.rose{--accent:var(--rose)}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .card{
    background:var(--glass-wash),var(--glass-base);
    -webkit-backdrop-filter:var(--glass-blur);
            backdrop-filter:var(--glass-blur);
  }
}
/* top accent hairline — quiet at rest, lights up on hover */
.card::before{
  content:'';position:absolute;top:0;left:12%;right:12%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,
    color-mix(in srgb,var(--accent) 60%,transparent),transparent);
  opacity:.45;transition:opacity var(--t-mid);
}
.card:hover::before{opacity:1}
.card::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 100% at 0% 0%,
    color-mix(in srgb,var(--accent) 14%,transparent),transparent 62%);
  opacity:0;transition:opacity var(--t-mid);
}
.card:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  box-shadow:var(--e2),0 14px 42px -14px color-mix(in srgb,var(--accent) 42%,transparent);
}
.card:hover::after{opacity:1}
.card-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:12px;
  color:var(--accent);
  background:rgba(0,207,255,.12);                                  /* fallback */
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--accent) 20%,transparent),
    color-mix(in srgb,var(--accent) 7%,transparent));
  border:1px solid rgba(255,255,255,.07);
  border-color:color-mix(in srgb,var(--accent) 28%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),
    0 0 18px -10px color-mix(in srgb,var(--accent) 60%,transparent);
}
.card-icon svg{width:21px;height:21px}
/* Title reads in high-contrast white; the hue lives in the icon chip, the
   hairline and the hover glow — accent-coloured headings read as toys. */
.card-title{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-family:var(--font-display);font-size:var(--fs-h3);font-weight:600;
  color:var(--text-hi);line-height:1.25;
}
.card:hover .card-title{color:color-mix(in srgb,var(--accent) 45%,var(--text-hi))}
.card-desc{color:var(--text-mid);font-size:var(--fs-sm);margin:0}
.card-go{
  margin-top:auto;padding-top:var(--s2);
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-xs);letter-spacing:.10em;text-transform:uppercase;
  font-family:var(--font-display);color:var(--text-dim);
  transition:color var(--t-fast),transform var(--t-fast);
}
.card:hover .card-go{color:var(--accent)}
.card:hover .card-go .arrow{transform:translate(2px,-2px)}
.card-go .arrow{display:inline-block;transition:transform var(--t-fast)}

/* Badges */
.badge{
  display:inline-flex;align-items:center;
  padding:3px 9px;border-radius:var(--r-pill);
  font-family:var(--font-display);
  font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid currentColor;
}
.badge-live{color:var(--mint);background:rgba(0,230,118,.10)}
.badge-beta{color:var(--amber);background:rgba(255,171,0,.10)}
.badge-alpha{color:var(--rose);background:rgba(255,77,141,.10)}
.badge-demo{color:var(--violet-200);background:rgba(123,97,255,.12)}
.badge-download{color:var(--cyan-200);background:rgba(0,207,255,.10)}

/* Live status hook — renders nothing until a real endpoint exists.
   See hydrateStatus() in app.js. Do not fake it. */
.app-status{display:none}

/* ── Bento (hub page) ────────────────────────────────────────────────────── */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s4)}
.bento .card{grid-column:span 2}
.bento .card.is-half{grid-column:span 3}
.bento .card.is-feature{grid-column:span 4;padding:var(--s6)}
.bento .card.is-feature .card-icon{width:52px;height:52px;border-radius:14px}
.bento .card.is-feature .card-icon svg{width:26px;height:26px}
.bento .card.is-feature .card-title{font-size:clamp(20px,2.6vw,26px)}
.bento .card.is-feature .card-desc{font-size:var(--fs-body)}
.bento-more{margin-top:var(--s6);display:flex;justify-content:center}

/* ── Capability grid ─────────────────────────────────────────────────────── */
/* Solid panels on purpose (no backdrop-filter): glass is reserved for the
   clickable app cards, and 6 more blur surfaces would cost GPU for nothing. */
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin:0;padding:0}
.caps li{
  list-style:none;padding:var(--s5);border-radius:var(--r-lg);
  background:linear-gradient(160deg,rgba(255,255,255,.03),transparent 55%),var(--ink-800);
  border:1px solid var(--glass-line);
  transition:border-color var(--t-fast);
}
.caps li:hover{border-color:var(--glass-line-hi)}
.caps h3{font-size:var(--fs-h3);margin-bottom:8px;color:var(--text-hi)}
.caps p{color:var(--text-mid);font-size:var(--fs-sm);margin:0}
.caps .cap-mark{
  display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;
  border-radius:10px;margin-bottom:var(--s3);
  color:var(--cyan-200);background:rgba(0,207,255,.10);
  border:1px solid rgba(0,207,255,.20);
}
.caps .cap-mark svg{width:18px;height:18px}

/* ── Quote / teaser panel ────────────────────────────────────────────────── */
.quote{padding:var(--s7);text-align:center}
.quote blockquote{
  margin:0 auto var(--s5);max-width:52ch;
  font-family:var(--font-display);font-size:var(--fs-h3);
  color:var(--text-hi);line-height:1.6;
}
:lang(th) .quote blockquote{line-height:1.8}

/* ── Directory (/apps/) ──────────────────────────────────────────────────── */
.filters{
  display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;
  margin-bottom:var(--s6);
}
.filter{
  min-height:44px;padding:0 16px;border-radius:var(--r-pill);
  font-size:var(--fs-sm);color:var(--text-mid);
  border:1px solid var(--glass-line);background:rgba(255,255,255,.04);
  transition:color var(--t-fast),background var(--t-fast),border-color var(--t-fast);
}
.filter:hover{color:var(--text-hi);border-color:var(--glass-line-hi)}
.filter[aria-pressed="true"]{
  color:var(--ink-900);background:var(--cyan-200);border-color:transparent;font-weight:600;
}
.search{
  flex:1;min-width:200px;min-height:44px;padding:0 16px;
  border-radius:var(--r-pill);font:inherit;font-size:var(--fs-sm);
  color:var(--text-hi);background:rgba(255,255,255,.04);
  border:1px solid var(--glass-line);
}
.search::placeholder{color:var(--text-dim)}
.search:focus{outline:none;border-color:rgba(0,207,255,.5);background:rgba(0,207,255,.06)}
.result-count{
  font-size:var(--fs-sm);color:var(--text-dim);margin-bottom:var(--s5);min-height:1.4em;
}
/* intrinsic-size ~ real group height (heading + one card row + margin) so the
   /apps/#labs deep link lands on target instead of ~90px off */
.group{margin-bottom:var(--s8);content-visibility:auto;contain-intrinsic-size:0 500px}
.group:last-of-type{margin-bottom:0}
.grid{
  display:grid;gap:var(--s4);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));
}
.empty-note{color:var(--text-mid);padding:var(--s6) 0}

/* ── About page ──────────────────────────────────────────────────────────── */
.namebreak{
  display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:center;align-items:baseline;
  padding:var(--s6);text-align:center;
}
.namebreak span{
  font-family:var(--font-display);font-size:clamp(22px,4.6vw,40px);font-weight:700;
  letter-spacing:.04em;
}
.namebreak .p-cosmo{color:var(--cyan-200)}
.namebreak .p-mix{color:var(--violet-200)}
.namebreak .p-on{color:var(--mint-100);text-shadow:0 0 14px rgba(0,230,118,.55)}
.namebreak .plus{color:var(--text-mid);font-size:.78em;font-weight:400;padding:0 var(--s2)}
.etym{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.etym article{padding:var(--s5)}
.etym h3{font-size:var(--fs-h3);margin-bottom:var(--s2)}
.etym p{color:var(--text-mid);font-size:var(--fs-sm);margin:0}
.etym .e-cosmo h3{color:var(--cyan-200)}
.etym .e-mix h3{color:var(--violet-200)}
.etym .e-on h3{color:var(--mint-200)}


.timeline{margin:0;padding:0;list-style:none;position:relative}
.timeline::before{
  content:'';position:absolute;left:7px;top:8px;bottom:8px;width:1px;
  background:linear-gradient(180deg,rgba(0,207,255,.5),rgba(123,97,255,.35),transparent);
}
.timeline li{position:relative;padding:0 0 var(--s6) var(--s7)}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{
  content:'';position:absolute;left:2px;top:9px;width:11px;height:11px;border-radius:50%;
  background:var(--ink-900);border:2px solid var(--cyan);box-shadow:0 0 10px rgba(0,207,255,.6);
}
.timeline li.is-closed::before{border-color:var(--text-dim);box-shadow:none}
.timeline .t-when{
  display:block;font-family:var(--font-display);font-size:var(--fs-xs);
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);margin-bottom:4px;
}
.timeline .t-what{color:var(--text-hi);font-weight:600;display:block;margin-bottom:4px}
.timeline p{color:var(--text-mid);font-size:var(--fs-sm);margin:0}

/* ── Footer — SIGNATURE MARK #3 ("24/7 UPTIME") ──────────────────────────── */
/* Real grid. Replaces the old inline-style hacks: a flex:1 0 100% spacer div
   plus style="color:..." / style="opacity:.4" attributes in the markup. */
.site-footer{
  position:relative;z-index:1;
  border-top:1px solid var(--glass-line);
  padding-block:var(--s5);margin-top:var(--s7);
  font-size:var(--fs-xs);
}
.footer-row{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s4);
  font-family:var(--font-display);letter-spacing:.10em;text-transform:uppercase;
}
.footer-copy{color:var(--text-dim);justify-self:start}
.footer-end{display:flex;align-items:center;gap:var(--s3);justify-self:end}
.uptime{
  display:inline-flex;align-items:center;gap:8px;justify-self:center;
  color:var(--mint-200);font-weight:700;letter-spacing:.16em;
  text-shadow:0 0 10px rgba(0,230,118,.4);
}
.uptime .dot{
  width:7px;height:7px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 8px var(--mint);
  animation:pulse 2s ease-in-out infinite;
}
.report-link{
  display:inline-flex;align-items:center;gap:6px;
  min-height:44px;padding:0 14px;border-radius:var(--r-sm);
  color:var(--text-dim);letter-spacing:.10em;
  transition:color var(--t-fast),background var(--t-fast);
}
.report-link:hover{color:var(--cyan-200);background:rgba(0,207,255,.10)}

/* ── Report modal ────────────────────────────────────────────────────────── */
.modal-back{
  position:fixed;inset:0;z-index:120;display:none;
  align-items:center;justify-content:center;padding:var(--s5);
  background:rgba(2,3,10,.72);
}
.modal-back.is-open{display:flex}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .modal-back{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
}
.modal{
  width:100%;max-width:460px;padding:var(--s6);
  border-radius:var(--r-xl);
  background:var(--ink-800);border:1px solid var(--glass-line-hi);
  box-shadow:var(--e3);
  animation:modalIn var(--t-mid) both;
}
@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.modal h2{font-size:var(--fs-h3);margin-bottom:var(--s2)}
.modal .hint{color:var(--text-mid);font-size:var(--fs-sm);margin-bottom:var(--s5)}
.field{display:block;margin-bottom:var(--s4)}
.field span{display:block;font-size:var(--fs-sm);color:var(--text-mid);margin-bottom:6px}
.field textarea,.field input{
  width:100%;padding:12px 14px;border-radius:var(--r-sm);
  font:inherit;font-size:var(--fs-sm);color:var(--text-hi);
  background:rgba(255,255,255,.04);border:1px solid var(--glass-line);
  resize:vertical;
}
.field textarea{min-height:104px}
.field textarea:focus,.field input:focus{
  outline:none;border-color:rgba(0,207,255,.5);background:rgba(0,207,255,.06);
}
.modal-actions{display:flex;gap:var(--s2);justify-content:flex-end;margin-top:var(--s5)}
.modal-msg{font-size:var(--fs-sm);margin-top:var(--s3);min-height:1.4em}
.modal-msg.ok{color:var(--mint-200)}
.modal-msg.err{color:var(--rose)}

/* ══════════════════════════════════════════════════════════════════════════
   2026-08-27 landing redesign — new sections start here.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Scroll choreography — THE CONTRACT ──────────────────────────────────── */
/* Pure CSS scroll-driven animation, no JS. Rules that keep this safe:
     · The un-animated state IS the finished state. Every scroll animation is
       declared ONLY inside @supports (animation-timeline:…) so the ~16% of
       browsers without support render the complete page, never blank elements.
     · Also wrapped in @media (prefers-reduced-motion:no-preference): the global
       kill-switch at the end of this file forces 0.01ms durations, and a scroll
       animation caught by it can freeze mid-state — so it must not exist at all
       under reduced motion.
     · animation-fill-mode:both always; animation-duration never (a scroll
       timeline ignores duration).
     · transform / opacity only — the "no animated blur" rule from the aurora
       section applies here too. */

/* Registered once, top level. Registering alone renders nothing; only the
   guarded count-up below ever animates it. */
@property --n{syntax:'<integer>';inherits:false;initial-value:0}

/* Dormant by default (progressive enhancement, lit inside the guarded blocks) */
.progress-rail{display:none}   /* decorative indicator — hiding IS the fallback */
.stat-anim{display:none}       /* static number in .stat-static is the default  */

@keyframes railGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes heroExit{from{opacity:1;transform:none}to{opacity:.3;transform:translateY(-26px) scale(.987)}}
@keyframes rvIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes satFly{
  from{opacity:0;transform:translate(-50%,-50%) scale(.3)}
  to{opacity:1;transform:translate(calc(-50% + var(--ox)),calc(-50% + var(--oy))) scale(1)}
}
/* captions 1–3: in, hold, out. Consecutive step timelines overlap by ~34% of
   a cover, so the visible window is kept narrow and the exit finishes just as
   the next caption's entrance completes — two captions never collide at
   readable opacity in the shared grid cell. */
@keyframes capCycle{
  0%{opacity:0;transform:translateY(22px)}
  14%{opacity:1;transform:none}
  38%{opacity:1;transform:none}
  50%{opacity:0;transform:translateY(-16px)}
  100%{opacity:0;transform:translateY(-16px)}
}
@keyframes capLast{
  0%{opacity:0;transform:translateY(22px)}
  14%{opacity:1;transform:none}
  100%{opacity:1;transform:none}
}
@keyframes countTo4{from{--n:0}to{--n:4}}
@keyframes countTo15{from{--n:0}to{--n:15}}

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:scroll()){
    /* progress rail — 2px under the sticky header, driven by document scroll */
    .progress-rail{
      display:block;position:absolute;left:0;right:0;bottom:-1px;
      height:var(--rail-h);pointer-events:none;
    }
    .progress-rail .rail-fill{
      display:block;height:100%;transform-origin:0 50%;transform:scaleX(0);
      background:linear-gradient(90deg,var(--cyan),var(--violet),var(--mint));
      animation:railGrow linear both;
      animation-timeline:scroll(root block);
    }
    /* hero recedes as the story takes over (rest state = fully visible) */
    .hero{
      animation:heroExit linear both;
      animation-timeline:scroll(root block);
      animation-range:0px 90vh;
    }
  }
  @supports (animation-timeline:view()){
    /* generic reveal — completes at 40% of entry so late-page elements that
       cannot scroll far always reach the finished state */
    .rv{
      animation:rvIn linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 40%;
    }
    /* stat count-up: visual number becomes the animated counter; the static
       one stays in the accessibility tree (sr-only) so SRs read a real value */
    .stat-static{
      position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;
      clip:rect(0 0 0 0);white-space:nowrap;
    }
    .stat-anim{
      display:inline-block;min-width:2ch;
      animation-timing-function:linear;animation-fill-mode:both;
      animation-timeline:view();
      animation-range:entry 0% cover 45%;
    }
    .stat-anim.sa-4{animation-name:countTo4}
    .stat-anim.sa-15{animation-name:countTo15}
    .stat-anim::after{counter-reset:sn var(--n);content:counter(sn)}
  }
}

/* ── Quick picker (hero) ─────────────────────────────────────────────────── */
/* Self-selection chips, in-page anchors. Deliberately quieter than the CTAs
   above them — an index, not a second call to action. */
.picker{
  display:flex;align-items:center;justify-content:center;gap:var(--s2);
  flex-wrap:wrap;margin-top:var(--s6);
}
.picker-label{font-size:var(--fs-sm);color:var(--text-dim);margin:0}
.picker-chip{
  display:inline-flex;align-items:center;gap:9px;
  min-height:44px;padding:0 18px;border-radius:var(--r-pill);
  font-size:var(--fs-sm);color:var(--text-mid);
  background:rgba(255,255,255,.04);border:1px solid var(--glass-line);
  transition:color var(--t-fast),border-color var(--t-fast),
             background var(--t-fast),box-shadow var(--t-fast);
}
.picker-chip:hover{
  color:var(--text-hi);border-color:rgba(0,207,255,.42);
  background:rgba(0,207,255,.07);box-shadow:0 0 20px -8px rgba(0,207,255,.5);
}
.picker-chip .p-dot{width:7px;height:7px;border-radius:50%;flex:none}
.picker-chip.pc-cyan .p-dot{background:var(--cyan);box-shadow:0 0 7px rgba(0,207,255,.6)}
.picker-chip.pc-mint .p-dot{background:var(--mint);box-shadow:0 0 7px rgba(0,230,118,.6)}
.picker-chip.pc-rose .p-dot{background:var(--rose);box-shadow:0 0 7px rgba(255,77,141,.6)}

/* ── Flagship cards (#core) ──────────────────────────────────────────────── */
/* Bigger, more editorial than the bento cards they replace: one plain-language
   sentence + three proof bullets. Reuses the .card accent-variable system. */
.flag-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5)}
.card.card-flag{padding:var(--s6);gap:var(--s3)}
.card-flag .card-icon{width:52px;height:52px;border-radius:14px}
.card-flag .card-icon svg{width:26px;height:26px}
.card-flag .card-title{font-size:clamp(20px,2.6vw,26px)}
.flag-lede{color:var(--text);font-size:var(--fs-body);margin:0;max-width:46ch}
:lang(th) .flag-lede{line-height:1.75}
.flag-points{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.flag-points li{
  position:relative;padding-inline-start:19px;
  font-size:var(--fs-sm);color:var(--text-mid);
}
.flag-points li::before{
  content:'';position:absolute;inset-inline-start:0;top:.52em;
  width:7px;height:7px;border-radius:50%;
  background:color-mix(in srgb,var(--accent) 65%,transparent);
  box-shadow:0 0 9px -1px color-mix(in srgb,var(--accent) 70%,transparent);
}
@media (max-width:767px){.flag-grid{grid-template-columns:1fr}}

/* ── Orbit stage (#orbit) ────────────────────────────────────────────────── */
/* DEFAULT layout = the finished story: the core with all four satellites
   already parked in orbit, and the four statements as a plain stacked list.
   The 300vh pinned choreography exists ONLY inside the guarded block below —
   desktop + animation-timeline support + motion allowed. Mobile always gets
   the static layout: sticky full-height pins fight address-bar collapse. */
.orbit-track{position:relative}
.orbit-step{display:none}
.orbit-stage{display:flex;flex-direction:column;align-items:center;gap:var(--s6)}
.orbit-inner{display:flex;flex-direction:column;align-items:center;gap:var(--s6);width:100%}
.orbit-sky{
  position:relative;flex:none;
  width:min(100%,560px);height:clamp(230px,44vw,330px);margin-inline:auto;
}
.orbit-core{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:88px;height:88px;
}
.orbit-ringline{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:calc(var(--orbit-r)*2 + 48px);height:calc(var(--orbit-r)*1.2 + 48px);
  border:1px dashed rgba(159,233,255,.16);border-radius:50%;pointer-events:none;
}
.sat{
  position:absolute;top:50%;left:50%;
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  color:var(--sat-c,var(--cyan-200));
  background:rgba(9,12,26,.88);
  border:1px solid color-mix(in srgb,var(--sat-c,var(--cyan)) 42%,transparent);
  box-shadow:0 0 18px -6px color-mix(in srgb,var(--sat-c,var(--cyan)) 65%,transparent);
  /* rest state = final orbit slot (satFly only exists in the guarded block) */
  transform:translate(calc(-50% + var(--ox)),calc(-50% + var(--oy)));
}
.sat svg{width:19px;height:19px}
.sat-1{--ox:0px;--oy:calc(var(--orbit-r)*-.6);--sat-c:var(--cyan)}
.sat-2{--ox:var(--orbit-r);--oy:0px;--sat-c:var(--mint)}
.sat-3{--ox:0px;--oy:calc(var(--orbit-r)*.6);--sat-c:var(--violet-200)}
.sat-4{--ox:calc(var(--orbit-r)*-1);--oy:0px;--sat-c:var(--rose)}
.orbit-caps{
  display:flex;flex-direction:column;gap:var(--s4);
  max-width:560px;margin-inline:auto;text-align:center;
}
.orbit-cap{
  margin:0;font-family:var(--font-display);font-weight:600;color:var(--text-hi);
  font-size:clamp(17px,2.4vw,22px);
}
:lang(th) .orbit-cap{line-height:1.6}
.orbit-cap::before{
  content:attr(data-n);display:block;margin-bottom:4px;
  font-size:10px;letter-spacing:.22em;color:var(--text-dim); /* latin digits */
}
@media (prefers-reduced-motion:no-preference) and (min-width:768px){
  @supports (animation-timeline:view()){
    /* names declared on the spacers become visible to the pinned stage */
    .orbit-track{timeline-scope:--os1,--os2,--os3,--os4}
    .orbit-step{display:block;height:52vh}
    .os-1{view-timeline:--os1 block}
    .os-2{view-timeline:--os2 block}
    .os-3{view-timeline:--os3 block}
    .os-4{view-timeline:--os4 block}
    .orbit-stage{
      /* offset by the sticky header so the composition centres in the
         visible area, not behind the header bar */
      position:sticky;top:var(--header-h);
      min-height:calc(100vh - var(--header-h));justify-content:center;
    }
    /* captions collapse into one overlapping cell and take turns */
    .orbit-caps{display:grid;min-height:5.2em}
    .orbit-cap{grid-area:1/1;animation:capCycle linear both;animation-range:cover 0% cover 100%}
    .oc-1{animation-timeline:--os1}
    .oc-2{animation-timeline:--os2}
    .oc-3{animation-timeline:--os3}
    .oc-4{animation-name:capLast;animation-timeline:--os4}
    /* satellites fly from the core to their slots, one per step */
    .sat{animation:satFly linear both;animation-range:entry 0% entry 90%}
    .sat-1{animation-timeline:--os1}
    .sat-2{animation-timeline:--os2}
    .sat-3{animation-timeline:--os3}
    .sat-4{animation-timeline:--os4}
  }
}

/* ── Live chip row (#more) ───────────────────────────────────────────────── */
/* Quieter than the flagships, still clearly online (mint pip) and clickable. */
.chips{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:var(--s3)}
.chip{
  display:inline-flex;align-items:center;gap:10px;
  min-height:48px;padding:0 18px;border-radius:var(--r-pill);
  font-size:var(--fs-body);color:var(--text);
  background:var(--glass-base);border:1px solid var(--glass-line);
  box-shadow:var(--e1);
  transition:transform var(--t-mid),color var(--t-fast),
             border-color var(--t-fast),box-shadow var(--t-mid);
}
.chip:hover{
  transform:translateY(-2px);color:var(--text-hi);
  border-color:rgba(0,207,255,.4);
  box-shadow:var(--e1),0 10px 28px -12px rgba(0,207,255,.45);
}
.chip .pip{
  width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--mint);box-shadow:0 0 7px var(--mint);
}
.chip .arrow{
  color:var(--text-dim);font-size:var(--fs-sm);
  transition:transform var(--t-fast),color var(--t-fast);
}
.chip:hover .arrow{transform:translate(2px,-2px);color:var(--cyan-200)}
.chip-all{border-style:dashed;color:var(--text-mid);background:rgba(255,255,255,.03)}

/* ── Labs band (#labs) ───────────────────────────────────────────────────── */
/* Deliberately dimmer than everything above it: matte panels, no glass, muted
   text — the visual demotion IS the honesty signal. Badges stay truthful. */
.labs-wrap{border-block:1px solid var(--glass-line);background:rgba(3,4,12,.55)}
.labs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--s4)}
.labs-card{
  display:flex;flex-direction:column;gap:8px;padding:var(--s5);
  border-radius:var(--r-md);
  background:var(--ink-800);border:1px solid var(--glass-line);
  transition:border-color var(--t-fast),transform var(--t-mid);
}
.labs-card:hover{border-color:var(--glass-line-hi);transform:translateY(-2px)}
.labs-name{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-family:var(--font-display);font-weight:600;
  color:var(--text);font-size:var(--fs-body);
}
.labs-card p{margin:0;font-size:var(--fs-sm);color:var(--text-dim)}
.labs-foot{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s6)}
.labs-note{margin:0;font-size:var(--fs-sm);color:var(--text-dim)}
.labs-note::before{
  content:'';display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--text-dim);opacity:.6;margin-right:9px;vertical-align:middle;
}
.labs-more{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;
  font-size:var(--fs-sm);color:var(--text-mid);
  transition:color var(--t-fast);
}
.labs-more:hover{color:var(--cyan-200)}
@media (max-width:1023px){.labs-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:599px){.labs-grid{grid-template-columns:1fr}}

/* ── Trust band (business identity) ──────────────────────────────────────── */
.trust-band{display:flex;align-items:stretch;gap:var(--s6);padding:var(--s6);flex-wrap:wrap}
.tb-list{
  display:grid;grid-template-columns:repeat(2,minmax(200px,1fr));
  gap:var(--s4) var(--s6);margin:0;flex:1;min-width:min(100%,420px);
}
.tb-list dt{
  font-family:var(--font-display);font-size:var(--fs-xs);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-dim);margin-bottom:3px;
}
.tb-list dd{margin:0;color:var(--text);font-size:var(--fs-body)}
.tb-contact{
  display:inline-flex;align-items:center;gap:6px;
  min-height:44px;padding:0 14px;margin:-10px 0 0 -14px;border-radius:var(--r-sm);
  color:var(--cyan-200);
  transition:color var(--t-fast),background var(--t-fast);
}
.tb-contact:hover{color:var(--text-hi);background:rgba(0,207,255,.10)}
/* DBD mark slot — the .is-placeholder state is a NEUTRAL dashed tile. The real
   government emblem must never render before the department issues it. */
.dbd-slot{
  flex:none;align-self:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  width:200px;min-height:124px;padding:var(--s4);text-align:center;
  border-radius:var(--r-md);font-size:var(--fs-sm);color:var(--text-dim);
}
.dbd-slot.is-placeholder{
  border:1.5px dashed rgba(255,255,255,.22);
  background:rgba(255,255,255,.02);
}
.dbd-slot .dbd-en{font-family:var(--font-display);font-size:var(--fs-xs);letter-spacing:.06em}
.tb-secure{
  flex-basis:100%;display:flex;align-items:center;gap:8px;margin:0;
  padding-top:var(--s4);border-top:1px solid var(--glass-line);
  color:var(--text-mid);font-size:var(--fs-sm);
}
.tb-secure svg{width:15px;height:15px;color:var(--mint-200);flex:none}
@media (max-width:767px){
  .trust-band{padding:var(--s5)}
  .tb-list{grid-template-columns:1fr}
  .dbd-slot{align-self:flex-start}
}

/* ── Four-column footer (2026-08-27) ─────────────────────────────────────── */
/* Replaces .footer-row on the redesigned pages (.footer-row rules stay above,
   harmless, until every page is migrated). Signature "24/7 UPTIME" lives in
   the brand column. */
.footer-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:var(--s6) var(--s5);padding-block:var(--s6) var(--s5);
}
.fg-brand{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)}
.fg-brand .brand{min-height:44px}  /* it is a real link -- keep the touch target */
.fg-line{
  margin:0;max-width:30ch;
  font-family:var(--font-sans);font-size:var(--fs-sm);color:var(--text-mid);
  letter-spacing:0;text-transform:none;
}
.fg-h{
  margin:0 0 var(--s2);font-family:var(--font-display);font-weight:700;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-dim);
}
.fg-col ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.fg-col ul a{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--font-sans);font-size:var(--fs-sm);color:var(--text-mid);
  letter-spacing:0;text-transform:none;
  transition:color var(--t-fast);
}
.fg-col ul a:hover{color:var(--cyan-200)}
.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
  padding-block:var(--s4);border-top:1px solid var(--glass-line);
  font-family:var(--font-display);font-size:var(--fs-xs);
  letter-spacing:.10em;text-transform:uppercase;color:var(--text-dim);
}
@media (max-width:899px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:599px){
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;justify-content:center;text-align:center}
}

/* ── Legal page (/legal/) ────────────────────────────────────────────────── */
/* A document, not a show: static, readable, generous measure. */
.legal-draft{
  display:flex;gap:10px;align-items:flex-start;
  padding:var(--s4) var(--s5);border-radius:var(--r-md);
  border:1px dashed rgba(255,171,0,.45);background:rgba(255,171,0,.07);
  color:var(--text);font-size:var(--fs-sm);
}
.legal-draft b{color:var(--amber)}
.legal-nav{display:flex;gap:var(--s2);flex-wrap:wrap;margin:var(--s5) 0 0}
.legal-nav a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 16px;
  border-radius:var(--r-pill);font-size:var(--fs-sm);color:var(--text-mid);
  border:1px solid var(--glass-line);background:rgba(255,255,255,.04);
  transition:color var(--t-fast),border-color var(--t-fast);
}
.legal-nav a:hover{color:var(--text-hi);border-color:var(--glass-line-hi)}
.legal-updated{font-size:var(--fs-sm);color:var(--text-dim)}
.legal-sec{padding-block:clamp(48px,6vw,72px);border-top:1px solid var(--glass-line)}
.legal-sec.first{border-top:0}
.legal-sec h2{font-size:var(--fs-h2);margin-bottom:var(--s4)}
.legal-sec h3{font-size:var(--fs-h3);margin:var(--s5) 0 var(--s2);color:var(--text-hi)}
.legal-sec p,.legal-sec li{color:var(--text);font-size:var(--fs-body);max-width:var(--measure)}
.legal-sec ul{padding-inline-start:1.2em;margin:0 0 var(--s4)}
.legal-sec li{margin-bottom:6px}

/* ── Thai tracking ───────────────────────────────────────────────────────── */
/* Wide letter-spacing is a Latin small-caps device. Thai glyph clusters (base +
   vowel + tone) read as broken when tracked out, so relax it wherever a label
   is set in Thai. The Latin-only signature marks keep their own tracking via
   more specific rules (.live, .uptime, .wordmark). */
html[lang="th"] .eyebrow,
html[lang="th"] .footer-copy,
html[lang="th"] .report-link,
html[lang="th"] .card-go,
html[lang="th"] .fg-h,
html[lang="th"] .footer-bottom,
html[lang="th"] .tb-list dt,
html[lang="th"] .t-when{letter-spacing:.04em}
/* 10–11px labels are legible in Latin small-caps but not in Thai, whose vowels
   and tone marks sit above and below the base glyph. Give them 12px. */
html[lang="th"] .eyebrow,
html[lang="th"] .footer-row,
html[lang="th"] .card-go,
html[lang="th"] .fg-h,
html[lang="th"] .footer-bottom,
html[lang="th"] .tb-list dt,
html[lang="th"] .t-when{font-size:12px}

/* ── Focus ───────────────────────────────────────────────────────────────── */
/* outline, NOT box-shadow: cards use overflow:hidden-ish stacking and a
   box-shadow ring would be clipped. outline never is. */
:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:inherit;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:1023px){
  .caps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  :root{--header-h:56px}
  .trustbar{grid-template-columns:repeat(2,1fr);row-gap:var(--s4)}
  .trustbar > div:nth-child(odd){border-inline-start:0}
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento .card,.bento .card.is-half{grid-column:span 1}
  .bento .card.is-feature{grid-column:span 2;padding:var(--s5)}
  .etym{grid-template-columns:1fr}
  /* backdrop-filter kill switch: at this width a card covers nearly the whole
     viewport, so there is no aurora behind it left to blur. Costs nothing
     visible, reclaims the single largest GPU expense on the weakest hardware. */
  .card{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--ink-800)}
  .site-nav{order:3;width:100%;margin-inline-start:0;justify-content:flex-start}
  .header-tools{margin-inline-start:auto}
}
@media (max-width:599px){
  .page{padding-inline:var(--s4)}
  .brand .wordmark{font-size:14px;letter-spacing:.14em}
  .hero .wordmark{letter-spacing:.06em}
  .footer-row{grid-template-columns:1fr;justify-items:center;text-align:center;gap:var(--s3)}
  .footer-copy,.footer-end{justify-self:center}
  .quote{padding:var(--s5)}
  .namebreak{padding:var(--s5)}
  .caps{grid-template-columns:1fr}
}
@media (max-width:479px){
  .bento{grid-template-columns:1fr}
  .bento .card,.bento .card.is-half,.bento .card.is-feature{grid-column:span 1}
  .hero-cta .btn{width:100%}
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  /* The signature marks must still READ correctly when frozen. Their glow is
     declared on the base rules above precisely so this holds. */
  .aurora b{animation:none}
  .aurora::after{animation:none;opacity:.55}
}