/* ============================================================
   Cascadia Family Group — design tokens & base styles
   ============================================================ */
:root {
  /* warm paper neutrals */
  --bg:        oklch(0.985 0.008 80);
  --bg-2:      oklch(0.965 0.010 78);
  --surface:   oklch(1 0 0);
  --ink:       oklch(0.255 0.018 215);
  --ink-soft:  oklch(0.46 0.015 215);
  --ink-faint: oklch(0.62 0.012 215);
  --line:      oklch(0.905 0.010 80);
  --line-soft: oklch(0.945 0.008 80);

  /* deep teal primary */
  --teal:      oklch(0.50 0.075 195);
  --teal-deep: oklch(0.40 0.062 197);
  --teal-ink:  oklch(0.32 0.050 198);
  --teal-wash: oklch(0.965 0.018 195);

  /* warm gold accent (share chroma family, vary hue) */
  --gold:      oklch(0.72 0.085 70);
  --gold-deep: oklch(0.58 0.080 65);
  --gold-wash: oklch(0.965 0.022 78);

  --font-serif: 'Newsreader', 'Noto Serif SC', Georgia, 'Times New Roman', serif;
  --font-sans:  'Plus Jakarta Sans', 'Noto Sans SC', system-ui, -apple-system, sans-serif;

  --shadow-sm: 0 1px 2px oklch(0.4 0.03 215 / 0.05), 0 2px 8px oklch(0.4 0.03 215 / 0.04);
  --shadow-md: 0 4px 14px oklch(0.4 0.03 215 / 0.07), 0 2px 6px oklch(0.4 0.03 215 / 0.05);
  --shadow-lg: 0 18px 50px oklch(0.35 0.04 215 / 0.12), 0 6px 18px oklch(0.35 0.04 215 / 0.07);

  --maxw: 1200px;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 26px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:lang(zh), .lang-zh { --font-serif: 'Noto Serif SC', 'Newsreader', serif; }

h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 500; color: var(--ink); margin: 0; line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; }

.lang-zh h1, .lang-zh h2, .lang-zh h3, .lang-zh h4 { font-weight: 600; letter-spacing: 0; }

/* layout */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.section { padding: 92px 0; }
.section-sm { padding: 60px 0; }
.eyebrow {
  font-family: var(--font-sans);
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--teal);
  display: inline-flex; align-items: center; gap: 9px;
}
.lang-zh .eyebrow { letter-spacing: 0.12em; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-sans); font-weight: 600; font-size: 15.5px;
  padding: 14px 24px; border-radius: 999px; border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--teal); color: #fff; box-shadow: 0 6px 18px oklch(0.5 0.075 195 / 0.28); }
.btn-primary:hover { background: var(--teal-deep); box-shadow: 0 10px 26px oklch(0.5 0.075 195 / 0.34); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--teal); color: var(--teal); }
.btn-gold { background: var(--gold-deep); color: #fff; }
.btn-gold:hover { filter: brightness(1.05); }
.btn-lg { padding: 17px 30px; font-size: 16.5px; }

/* generic cards */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}

/* image placeholders */
.ph {
  position: relative; overflow: hidden; border-radius: var(--radius);
  background-color: var(--bg-2);
  background-image: repeating-linear-gradient(135deg,
    oklch(0.92 0.012 200 / 0.7) 0 11px, transparent 11px 22px);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.ph span {
  font-family: 'Plus Jakarta Sans', monospace; font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em; color: var(--ink-faint); background: var(--surface);
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line);
  text-transform: uppercase;
}

.muted { color: var(--ink-soft); }
.serif { font-family: var(--font-serif); }

/* ============================================================
   Bilingual EN + 中文 — both shown at once, Chinese stacked
   beneath English in a quieter weight/colour.
   ============================================================ */
:root {
  --font-zh:       'Noto Sans SC', 'Plus Jakarta Sans', sans-serif;
  --font-zh-serif: 'Noto Serif SC', 'Newsreader', serif;
}
.bi    { display: block; }
.bi-en { display: block; }
.bi-zh {
  display: block;
  font-family: var(--font-zh);
  font-weight: 500;
  font-size: 0.78em;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  margin-top: 0.3em;
  color: color-mix(in srgb, currentColor 66%, transparent);
}
/* headings: Chinese in serif SC, smaller relative size */
h1 .bi-zh, h2 .bi-zh { font-family: var(--font-zh-serif); font-weight: 600; font-size: 0.5em;  margin-top: 0.34em; }
h3 .bi-zh, h4 .bi-zh { font-family: var(--font-zh-serif); font-weight: 600; font-size: 0.62em; }
/* eyebrow: keep Chinese legible and not uppercase */
.eyebrow .bi-zh { font-size: 0.95em; font-weight: 600; margin-top: 0.16em; }
/* buttons: tighter two-line stack */
.btn .bi-zh { font-size: 0.8em; margin-top: 0.1em; font-weight: 600; }

/* (entrance animation intentionally disabled — preview iframes run hidden,
   which pauses CSS animations at their first frame and would hide content.
   .rise is kept as an inert hook so markup needn't change.) */
.rise { opacity: 1; }

/* link with arrow */
.tlink { color: var(--teal-deep); font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; transition: gap .18s ease; }
.tlink:hover { gap: 11px; }

::selection { background: var(--teal-wash); }

/* ============================================================
   MINIMAL THEME  —  html.theme-min
   Clean tech-product look: white, hairline borders, flat,
   single restrained blue accent, sans-serif everything.
   ============================================================ */
html.theme-min {
  /* cool clean neutrals */
  --bg:        oklch(1 0 0);
  --bg-2:      oklch(0.985 0.003 255);
  --surface:   oklch(1 0 0);
  --ink:       oklch(0.24 0.012 260);
  --ink-soft:  oklch(0.47 0.012 260);
  --ink-faint: oklch(0.62 0.010 260);
  --line:      oklch(0.915 0.004 260);
  --line-soft: oklch(0.955 0.003 260);

  /* one restrained blue accent (replaces teal) */
  --teal:      oklch(0.55 0.16 257);
  --teal-deep: oklch(0.48 0.17 259);
  --teal-ink:  oklch(0.22 0.018 262);   /* dark sections -> near-black */
  --teal-wash: oklch(0.97 0.015 257);

  /* neutralize gold -> same blue accent so palette is monochrome + 1 hue */
  --gold:      oklch(0.55 0.16 257);
  --gold-deep: oklch(0.48 0.17 259);
  --gold-wash: oklch(0.97 0.012 257);

  /* sans everywhere, no serif display */
  --font-serif: 'Plus Jakarta Sans', 'Noto Sans SC', system-ui, sans-serif;

  /* flatter, tighter geometry */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;

  /* near-flat shadows */
  --shadow-sm: 0 1px 2px oklch(0.3 0.02 260 / 0.04);
  --shadow-md: 0 2px 8px oklch(0.3 0.02 260 / 0.06);
  --shadow-lg: 0 8px 30px oklch(0.3 0.02 260 / 0.08);
}

/* tighter, heavier display type instead of serif flourish */
html.theme-min h1, html.theme-min h2, html.theme-min h3, html.theme-min h4 {
  font-weight: 700; letter-spacing: -0.025em;
}
html.theme-min.lang-zh h1, html.theme-min.lang-zh h2,
html.theme-min.lang-zh h3, html.theme-min.lang-zh h4 { letter-spacing: -0.01em; }

/* Chinese sets --font-serif on every :lang(zh) element (incl. each heading),
   which would otherwise beat the html.theme-min value. Re-assert sans for
   Minimal + Chinese at the same element level, with higher specificity. */
html.theme-min:lang(zh), html.theme-min :lang(zh), html.theme-min.lang-zh, html.theme-min .lang-zh {
  --font-serif: 'Noto Sans SC', 'Plus Jakarta Sans', sans-serif;
}

/* eyebrow: drop the accent dash, go quiet grey */
html.theme-min .eyebrow { color: var(--ink-faint); font-weight: 600; letter-spacing: 0.13em; }
html.theme-min .eyebrow::before { display: none; }

/* cards: hairline, flat (lift only on hover where already wired) */
html.theme-min .card { box-shadow: none; border: 1px solid var(--line); }

/* buttons: product-style rounded-rect, no coloured glow */
html.theme-min .btn { border-radius: 9px; font-weight: 600; }
html.theme-min .btn-primary { box-shadow: none; }
html.theme-min .btn-primary:hover { box-shadow: none; }

/* strip the decorative layer that defines the "warm" look */
html.theme-min .float-card { display: none !important; }
html.theme-min .journey-arrow { display: none !important; }
html.theme-min .cta-blob { display: none !important; }

/* quieter placeholder fills */
html.theme-min .ph {
  background-color: var(--bg-2);
  background-image: repeating-linear-gradient(135deg,
    oklch(0.93 0.004 260 / 0.8) 0 11px, transparent 11px 22px);
}
html.theme-min .newcomer-band .ph,
html.theme-min .newcomer-ph { background: var(--teal-ink) !important; }

/* trust strip + dividers feel lighter */
html.theme-min .trust-strip span:first-child { color: var(--ink-faint); }

/* hero badge: flat outline chip instead of tinted pill */
html.theme-min .hero-grid > div:first-child > div:first-child {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink-soft) !important;
}

/* scrollbar (cosmetic) */
@media (min-width: 900px){
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; border: 3px solid var(--bg); }
}