:root {
  /* ── Brand ─────────────────────────────────────── */
  --brand:           #0B5CD9;
  --brand-2:         #25D2FF;
  --brand-gradient:  linear-gradient(135deg, #0B5CD9 0%, #1E8FFF 45%, #25D2FF 100%);
  --brand-gradient-text: linear-gradient(135deg, #0B5CD9 0%, #25D2FF 100%);

  /* Cobalt ramp */
  --cobalt-50:  #EAF2FE;  --cobalt-100: #CEDEFC;  --cobalt-200: #9DBDF9;
  --cobalt-400: #3B7BF3;  --cobalt-500: #1A66E8;  --cobalt-600: #0B5CD9;

  /* Cyan ramp */
  --cyan-400: #25D2FF;  --cyan-600: #0793BD;  --cyan-700: #066F8E;

  /* Slate */
  --slate-50:  #F6F8FB;  --slate-100: #EBEFF5;  --slate-200: #D8DFEA;
  --slate-400: #8C99AD;  --slate-500: #64718A;  --slate-700: #323D50;
  --slate-900: #131A26;

  /* Semantic tokens */
  --fg-1: var(--slate-900); --fg-2: var(--slate-700);
  --fg-3: var(--slate-500); --fg-4: var(--slate-400);
  --bg-canvas:  #FFFFFF; --bg-surface: #FFFFFF; --bg-muted: var(--slate-50);

  /* ── Typography ────────────────────────────────── */
  --font-sans:    'Inter','Noto Sans TC',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-display: 'Nunito','Inter','Noto Sans TC',-apple-system,sans-serif;
  --font-mono:    'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* ── Spacing ───────────────────────────────────── */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  /* ── Radius ────────────────────────────────────── */
  --r-sm:   8px; --r-md:  12px; --r-lg:  16px; --r-xl:  22px; --r-pill: 999px;

  /* ── Shadow ────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(11,28,60,0.04);
  --shadow-md: 0 4px 12px rgba(11,28,60,0.06), 0 1px 2px rgba(11,28,60,0.04);
  --shadow-lg: 0 12px 24px rgba(11,28,60,0.08), 0 2px 4px rgba(11,28,60,0.04);
  --shadow-brand: 0 12px 32px rgba(11,92,217,0.30);

  /* ── Motion ────────────────────────────────────── */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur:  160ms;
  --dur-slow: 320ms;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg-canvas);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-feature-settings: 'kern', 'liga', 'calt', 'ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button { font-family: inherit; }

/* ── Shared Partials: Nav ──────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 100; height: 64px;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--slate-100);
  display: flex; align-items: center; padding: 0 32px;
  transition: box-shadow 160ms ease;
}
.nav.scrolled { box-shadow: 0 1px 12px rgba(11,28,60,0.08); }
.nav-inner {
  max-width: 1280px; width: 100%; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-logo { height: 36px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-link {
  font-size: 14px; font-weight: 500; color: var(--fg-2);
  padding: 6px 12px; border-radius: var(--r-md); text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-link:hover { background: var(--bg-muted); color: var(--fg-1); }
.nav-cta {
  font-size: 14px; font-weight: 600; color: #fff;
  padding: 8px 18px; border-radius: var(--r-md);
  background: var(--brand-gradient); text-decoration: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  box-shadow: var(--shadow-brand);
}
.nav-cta:hover { opacity: 0.9; transform: translateY(-1px); }

/* ── Shared Partials: Footer ───────────────────────── */
.footer {
  background: var(--slate-900); color: var(--slate-400);
  padding: 48px 32px; text-align: center; font-size: 13px;
}
.footer-brand { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.footer-brandname {
  font-family: var(--font-display); font-weight: 800; font-size: 16px;
  background: var(--brand-gradient-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.footer-tag { font-size: 13px; color: var(--slate-500); }
.footer-links { display: flex; gap: 24px; justify-content: center; margin-top: 12px; }
.footer-link { color: var(--slate-500); text-decoration: none; font-size: 13px; }
.footer-link:hover { color: var(--cyan-400); }
.footer-copy { margin-top: 24px; font-size: 12px; color: var(--slate-500); opacity: 0.7; }
.footer-stats { font-size: 12px; color: var(--slate-500); margin-top: 8px; }
.footer-stats strong { color: var(--cyan-400); font-family: var(--font-mono); font-feature-settings: 'tnum' 1; }