/* ══ FunTG — shared styles for every page (index.html, products.html).
   Page-only styles stay inline in each page. Linked with ?v=<hash> by build.mjs. ══ */
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/space-grotesk-latin-wght.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-400.woff2") format("woff2"); }

:root {
  --bg: #FFFFFF; --ink: #0E0E10; --muted: #555B6B; --soft: #F5F6F9;
  --line: rgba(14, 14, 16, .1); --line-2: rgba(14, 14, 16, .2);
  --teal: #13CAD2; --purple: #752EA5; --indigo: #4F5CB6;
  --em: linear-gradient(100deg, #0B8E98 0%, #4F5CB6 55%, #752EA5 100%);
  --sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --gutter: clamp(16px, 4.5vw, 56px);
  --max: 1200px;
  --edge: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
}
html[lang="zh-Hant"] {
  --sans: "Space Grotesk", "PingFang HK", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
}

/* ── base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased; overflow-x: clip; }
html[lang="zh-Hant"] body { line-height: 1.85; }
a { color: inherit; }
img, svg { display: block; }
::selection { background: rgba(19, 202, 210, .25); }
:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: .6em 1em; border-radius: 999px;
  background: var(--ink); color: var(--bg); text-decoration: none; transition: top .2s; }
.skip:focus { top: 12px; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

main, .top, .foot { position: relative; z-index: 1; }

.eyebrow { margin: 0; font: 400 .75rem/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  display: inline-flex; align-items: center; gap: .6em; }
html[lang="zh-Hant"] .eyebrow { letter-spacing: .24em; font-family: var(--sans); font-size: .82rem; }
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, var(--teal), var(--purple)); }
em { font-style: normal; background: var(--em); -webkit-background-clip: text; background-clip: text; color: transparent; }
.h1, .h2, .statement { margin: 0; font-weight: 500; text-wrap: balance; }
.h2 { margin-top: 14px; font-size: clamp(2rem, 4.2vw, 3.4rem); letter-spacing: -.03em; line-height: 1.05; }
html[lang="zh-Hant"] :is(.h1, .h2, .statement) { letter-spacing: .01em; line-height: 1.22; }
.lede { margin: 18px 0 0; color: var(--muted); font-size: clamp(1.05rem, 1.6vw, 1.2rem); max-width: 36em; text-wrap: pretty; }
.sec { padding-block: clamp(96px, 16vh, 180px); }
.sec-head { max-width: 780px; }

.btn { display: inline-flex; align-items: center; gap: .55em; min-height: 48px; padding: 0 1.35em; border-radius: 999px;
  background: var(--ink); color: #fff; text-decoration: none; font-weight: 500; font-size: 1rem; white-space: nowrap;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(79, 92, 182, .6); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.btn--sm { min-height: 40px; padding: 0 1.05em; font-size: .92rem; }
.btn svg { width: 18px; height: 18px; }

/* ── header ────────────────────────────────────────────────────────── */
.top { position: sticky; top: 0; z-index: 10; transition: background-color .3s, box-shadow .3s; }
.top.is-stuck { background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: 0 1px 0 var(--line); }
.top__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 1.15rem; letter-spacing: -.01em; }
.nav { display: flex; gap: 28px; font-size: .95rem; }
.nav a { position: relative; text-decoration: none; color: var(--muted); transition: color .2s; padding-block: 6px; }
.nav a:hover, .nav a[aria-current="true"], .nav a[aria-current="page"] { color: var(--ink); }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--teal), var(--purple)); transform: scaleX(0); transition: transform .35s var(--ease); }
.nav a[aria-current="true"]::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.top__end { display: flex; align-items: center; gap: 10px; }
.lang { display: inline-flex; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); }
.lang button { appearance: none; border: 0; background: transparent; color: var(--muted); font: 500 .82rem/1 var(--sans);
  min-width: 40px; height: 34px; border-radius: 999px; cursor: pointer; transition: background-color .2s, color .2s; }
.lang button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.mail { display: none; width: 44px; height: 44px; border-radius: 50%; place-items: center; box-shadow: inset 0 0 0 1px var(--line-2); }
.mail svg { width: 18px; height: 18px; }
@media (max-width: 900px) { .nav { display: none; } }
@media (max-width: 520px) { .top__end .btn--sm { display: none; } .mail { display: grid; } .lang button { min-width: 44px; height: 38px; } }

/* ── closing + footer ──────────────────────────────────────────────── */
.end { position: relative; text-align: center; padding-block: clamp(110px, 18vh, 200px); border-top: 1px solid var(--line); overflow: hidden; }
.end::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(760px, 120vw); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  filter: blur(80px); opacity: .22; z-index: -1;
  background: conic-gradient(from 210deg, #13CAD2, #8BE9C5, #FFD98A, #F5A3D6, #752EA5, #13CAD2); }
.end img { margin: 0 auto 26px; }
.end .h2 { font-size: clamp(2.4rem, 6vw, 5rem); letter-spacing: -.04em; }
.end .lede { margin-inline: auto; }
.end .cta { margin-top: 34px; }
.foot { padding-block: 32px 40px; border-top: 1px solid var(--line); }
.foot__in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; color: var(--muted); font-size: .92rem; }
.foot__in a { text-underline-offset: 3px; }
.foot .brand { color: var(--ink); font-size: 1rem; }

/* ── motion (only when welcome) ────────────────────────────────────── */
html.anim .reveal { opacity: 0; translate: 0 22px; transition: opacity .8s var(--ease), translate .8s var(--ease); }
html.anim .reveal.in { opacity: 1; translate: 0 0; }
html.anim .stagger > .reveal:nth-child(2) { transition-delay: .08s; }
html.anim .stagger > .reveal:nth-child(3) { transition-delay: .16s; }
html.anim .stagger > .reveal:nth-child(4) { transition-delay: .24s; }
.tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease), box-shadow .35s var(--ease); }
.tilt.is-tilting { transition: transform .08s linear, box-shadow .35s var(--ease); }
.nw { white-space: nowrap; }

/* ── products: marks + status pills (home teaser and /products) ────── */
.pmark { display: block; flex: none; }
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: rgba(14, 14, 16, .05);
  font: 500 .82rem/1.2 var(--sans); color: var(--ink); white-space: nowrap; }
.pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent, var(--teal)); }
.foot__links { display: inline-flex; flex-wrap: wrap; gap: 8px 22px; }