:root {
  color-scheme: light dark;

  /* Brand */
  --navy-deep: #111118;
  --navy: #1E3A8A;
  --green: #30D158;
  --green-deep: #166534;
  --green-deeper: #14532D;
  --green-soft: #DCFCE7;
  --green-on-dark: #30D158;
  --green-text: #86EFAC;
  --wordmark-accent: #30D158;   /* "key" in the privacykey wordmark — matches icon, gradient fades to Green Deep */
  --wordmark-accent-deep: #166534; /* gradient stop — never flips */
  --wordmark-gradient: linear-gradient(180deg, #30D158 0%, #30D158 60%, #166534 100%);

  /* Product accent — PrivacyTracker brand blue. Pinned to the colour
     baked into PrivacyTracker's brand-icon.png so the "Open PrivacyTracker"
     CTA inside the green app-card reads as the product's identity rather
     than the privacykey family colour. Doesn't flip in dark mode (the
     dark-mode override below only nudges the hover tone). */
  --product-blue: #0a84ff;
  --product-blue-deep: #0066cc;
  --product-blue-hover: #0077ed;

  /* Product accent — privacycommand brand indigo. Same role as
     --product-blue above, but for the privacycommand card. Pulled
     from the privacycommand brand SVGs (indigo-700 → indigo-900). */
  --product-indigo: #4338CA;
  --product-indigo-deep: #312E81;
  --product-indigo-hover: #4F46E5;

  /* Neutrals */
  --ink: #0F172A;
  --slate: #334155;
  --muted: #475569;
  --line: #E2E8F0;
  --line-strong: #CBD5E1;
  --surface: #FFFFFF;
  --surface-soft: #F8FAFC;

  /* Semantic surfaces that flip in dark */
  --nav-bg: rgba(255, 255, 255, 0.78);
  --hero-gradient-top: #FFFFFF;
  --hero-gradient-bottom: #F8FAFC;
  --btn-ghost-bg: #FFFFFF;
  --ui-border: #7C8795;
  --coming-bg: #F8FAFC;
  --coming-border: #7C8795;
  --focus-ring: #166534;

  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-btn: 10px;   /* buttons, CTAs, link hovers, chips — unified square-ish shape */
  --shadow-soft: 0 30px 60px -30px rgba(17, 17, 24, 0.25);
  --shadow-lift: 0 40px 80px -40px rgba(17, 17, 24, 0.45);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #E6EDF5;
    --slate: #CBD5E1;
    --muted: #9AA7B8;
    --line: #2A2A33;
    --line-strong: #3A3A44;
    --surface: #1A1A22;
    --surface-soft: #111118;

    --green-deep: #30D158;
    --green-soft: #14532D;
    --navy: #93C5FD;
    --navy-deep: #111118;

    --nav-bg: rgba(17, 17, 24, 0.78);
    --hero-gradient-top: #14141C;
    --hero-gradient-bottom: #111118;
    --btn-ghost-bg: #1A1A22;
    --ui-border: #7C8795;
    --coming-bg: #14141C;
    --coming-border: #7C8795;
    --focus-ring: #30D158;

    --shadow-soft: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
    --shadow-lift: 0 40px 80px -40px rgba(0, 0, 0, 0.8);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  font-family: 'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  color: var(--ink);
  background: var(--surface-soft);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
}
html[lang^="zh"] body {
  font-family: 'Inter', 'Noto Sans SC', system-ui, -apple-system, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}
img { display: block; max-width: 100%; }
a { color: var(--navy); text-decoration: none; }
a:hover {
  color: var(--green-deep);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 6px;
}
.btn:focus-visible,
.app-link:focus-visible,
.nav-cta:focus-visible { outline-offset: 3px; border-radius: var(--radius-btn); }

.skip-link {
  position: absolute; left: 12px; top: -48px;
  display: inline-flex; align-items: center;
  background: var(--ink); color: var(--surface) !important;
  padding: 10px 16px; border-radius: var(--radius-btn);
  min-height: 44px; box-sizing: border-box;
  font-weight: 600; font-size: 14px;
  z-index: 100;
  transition: top .15s ease;
}
.skip-link:focus, .skip-link:focus-visible {
  top: 12px;
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.nav-brand {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 4px;
  min-height: 44px;
}
.nav-brand img { height: 32px; width: auto; }
.nav-brand .wm { font-weight: 700; letter-spacing: -0.4px; color: var(--ink); font-size: 18px; }
.nav-brand .wm .accent {
  color: var(--wordmark-accent); /* fallback */
  background-image: var(--wordmark-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.nav-links { display: flex; align-items: center; gap: 12px; }
.nav-links a.nav-link-inline {
  color: var(--slate); font-weight: 500; font-size: 14px;
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 10px;
  border: 2px solid transparent;
  border-radius: var(--radius-btn);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.nav-links a.nav-link-inline:hover {
  color: var(--ink);
  border-color: var(--ink);
  text-decoration: none;
}
.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--navy-deep); color: #fff !important;
  padding: 10px 18px; border-radius: var(--radius-btn); font-weight: 700; font-size: 14px;
  min-height: 44px; box-sizing: border-box;
  border: 2px solid var(--navy-deep);
  white-space: nowrap;
  flex: 0 0 auto;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.nav-cta svg { width: 16px; height: 16px; flex: 0 0 auto; }
.nav-cta:hover {
  background: #2A2A35; color: #fff !important;
  border-color: #2A2A35;
  transform: translateY(-1px);
  text-decoration: none;
}
@media (prefers-color-scheme: dark) {
  .nav-cta { background: #1F1F28; border-color: #2A2A35; }
  .nav-cta:hover { background: #2A2A35; border-color: #3A3A46; }
}

/* Language switcher */
.lang-switcher {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 28px 0 12px;
  border: 2px solid var(--ui-border);
  background: var(--btn-ghost-bg);
  color: var(--slate);
  border-radius: var(--radius-btn);
  min-height: 44px;
  font-weight: 600;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.lang-switcher:hover { color: var(--ink); border-color: var(--ink); background: var(--surface-soft); }
.lang-switcher svg { width: 14px; height: 14px; flex-shrink: 0; }
.lang-switcher select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  font-size: 14px;
  padding: 8px 0;
  cursor: pointer;
  outline: none;
}
.lang-switcher::after {
  content: "";
  position: absolute; right: 12px; top: 50%;
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.lang-switcher:focus-within {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}
.lang-switcher select option { color: var(--ink); background: var(--surface); }

@media (max-width: 720px) {
  .nav-links a.nav-link-inline { display: none; }
  .lang-switcher { padding: 0 26px 0 10px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 480px at 85% -10%, rgba(48, 209, 88, 0.12), transparent 60%),
    radial-gradient(900px 420px at -10% 20%, rgba(30, 58, 138, 0.08), transparent 60%),
    linear-gradient(180deg, var(--hero-gradient-top) 0%, var(--hero-gradient-bottom) 100%);
  padding: 72px 0 80px;
  border-bottom: 1px solid var(--line);
}
.hero h1 {
  font-size: clamp(38px, 5.6vw, 76px);
  font-weight: 700; letter-spacing: -2.2px;
  margin: 18px 0 10px; line-height: 1.02;
  color: var(--ink);
}
.hero h1 .accent {
  color: var(--wordmark-accent); /* fallback */
  background-image: var(--wordmark-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero .lede {
  font-size: clamp(17px, 1.6vw, 20px);
  color: var(--slate);
  max-width: 640px; margin: 10px 0 28px;
}
.hero > .container { position: relative; z-index: 1; }
.hero-rain {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* Soft vignette so rain fades into hero edges and doesn't compete with the headline. */
  -webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, #000 55%, transparent 95%);
          mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, #000 55%, transparent 95%);
  opacity: 0.55;
}
.hero-rain canvas { display: block; width: 100%; height: 100%; }
@media (prefers-color-scheme: dark) { .hero-rain { opacity: 0.75; } }
@media (prefers-reduced-motion: reduce) { .hero-rain { display: none; } }
/* No-JS fallback — the inline script in <head> swaps html.no-js → html.js
   the moment JS runs. If it never runs, hide the empty canvas so the page
   doesn't show a blank decorative slab. The hero still carries its CSS
   gradient backdrop so the section reads as designed. */
.no-js .hero-rain { display: none; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px; border-radius: var(--radius-btn);
  font-weight: 700; font-size: 15px;
  border: 2px solid transparent;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn-primary {
  background: var(--green-deep); color: #fff !important;
  border-color: var(--green-deeper);
  box-shadow: 0 14px 32px -12px rgba(6, 78, 59, 0.75), inset 0 0 0 1px rgba(255,255,255,0.08);
}
.btn-primary:hover {
  background: var(--green-deeper); color: #fff !important;
  border-color: var(--ink);
  transform: translateY(-1px);
  text-decoration: none;
  box-shadow: 0 18px 36px -10px rgba(6, 78, 59, 0.85), inset 0 0 0 1px rgba(255,255,255,0.12);
}
.btn-ghost {
  background: var(--btn-ghost-bg); color: var(--ink) !important;
  border-color: var(--ink);
  box-shadow: 0 6px 20px -12px rgba(17, 17, 24, 0.35);
}
.btn-ghost:hover {
  border-color: var(--green-deep);
  color: var(--green-deep) !important;
  transform: translateY(-1px);
  text-decoration: none;
  box-shadow: 0 10px 28px -12px rgba(6, 95, 70, 0.45);
}
.btn svg { width: 16px; height: 16px; }

@media (prefers-color-scheme: dark) {
  .btn-primary {
    background: #30D158; color: #111118 !important;
    border-color: #BBF7D0;
    box-shadow: 0 14px 32px -12px rgba(48, 209, 88, 0.7), inset 0 0 0 1px rgba(255,255,255,0.12);
  }
  .btn-primary:hover {
    background: #86EFAC; color: #111118 !important;
    border-color: #E6EDF5;
  }
  .btn-ghost { border-color: var(--ink); }
  .btn-ghost:hover { border-color: #30D158; color: #30D158 !important; }
}

/* ---------- Konami remix overrides ----------
   Body picks up .remix-indigo or .remix-tracker when the easter-egg
   palette swaps — .btn-primary follows the active product's palette.
   Light + dark variants mirror the default green block above. */

/* privacycommand — indigo */
body.remix-indigo .btn-primary {
  background: #4338CA; color: #fff !important;
  border-color: #312E81;
  box-shadow: 0 14px 32px -12px rgba(67, 56, 202, 0.75), inset 0 0 0 1px rgba(255,255,255,0.08);
}
body.remix-indigo .btn-primary:hover {
  background: #312E81; color: #fff !important;
  border-color: var(--ink);
  box-shadow: 0 18px 36px -10px rgba(67, 56, 202, 0.85), inset 0 0 0 1px rgba(255,255,255,0.12);
}
@media (prefers-color-scheme: dark) {
  body.remix-indigo .btn-primary {
    background: #818CF8; color: #111118 !important;
    border-color: #C7D2FE;
    box-shadow: 0 14px 32px -12px rgba(129, 140, 248, 0.7), inset 0 0 0 1px rgba(255,255,255,0.12);
  }
  body.remix-indigo .btn-primary:hover {
    background: #A5B4FC; color: #111118 !important;
    border-color: #E6EDF5;
  }
}

/* privacytracker — blue */
body.remix-tracker .btn-primary {
  background: #0a84ff; color: #fff !important;
  border-color: #0066d6;
  box-shadow: 0 14px 32px -12px rgba(10, 132, 255, 0.75), inset 0 0 0 1px rgba(255,255,255,0.08);
}
body.remix-tracker .btn-primary:hover {
  background: #0066d6; color: #fff !important;
  border-color: var(--ink);
  box-shadow: 0 18px 36px -10px rgba(10, 132, 255, 0.85), inset 0 0 0 1px rgba(255,255,255,0.12);
}
@media (prefers-color-scheme: dark) {
  body.remix-tracker .btn-primary {
    background: #5fb0ff; color: #111118 !important;
    border-color: #93C5FD;
    box-shadow: 0 14px 32px -12px rgba(95, 176, 255, 0.7), inset 0 0 0 1px rgba(255,255,255,0.12);
  }
  body.remix-tracker .btn-primary:hover {
    background: #93C5FD; color: #111118 !important;
    border-color: #E6EDF5;
  }
}

/* Smooth the swap so the button doesn't snap when Konami fires */
.btn-primary {
  transition: transform .15s ease,
              background 250ms ease,
              border-color 250ms ease,
              box-shadow 250ms ease,
              color 250ms ease;
}

/* ---------- Section ---------- */
section { padding: 80px 0; border-bottom: 1px solid var(--line); }
section:last-of-type { border-bottom: 0; }
.kicker {
  display: inline-block;
  font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--green-deep); font-weight: 600; margin-bottom: 10px;
}
h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700; letter-spacing: -1px;
  margin: 0 0 10px; color: var(--ink);
}
.intro {
  color: var(--slate); max-width: 720px;
  font-size: 17px; margin: 4px 0 32px;
}

.principles {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px; margin-top: 8px;
}
@media (max-width: 900px) { .principles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .principles { grid-template-columns: 1fr; } }
.principle {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 22px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.principle:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); border-color: var(--line-strong); }
.principle .dot {
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--green); display: inline-block; margin-bottom: 12px;
  box-shadow: 0 0 0 6px rgba(48, 209, 88, 0.12);
}
.principle h3 { margin: 0 0 6px; font-size: 17px; font-weight: 600; letter-spacing: -0.2px; }
.principle p { margin: 0; font-size: 14px; color: var(--slate); line-height: 1.55; }

/* ---------- Apps ---------- */
.apps-head {
  display: flex; align-items: end; justify-content: space-between; gap: 20px;
  margin-bottom: 32px; flex-wrap: wrap;
}
.apps-head .copy { max-width: 640px; }
.apps-head p { margin: 0; }

.apps-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 820px) { .apps-grid { grid-template-columns: 1fr; } }

.app-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.app-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); border-color: var(--line-strong); }
.app-card.featured {
  background: linear-gradient(160deg, var(--navy-deep) 0%, #1F1F2A 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-lift);
}
.app-card.featured::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(700px 320px at 110% -20%, rgba(48, 209, 88, 0.18), transparent 60%);
  pointer-events: none;
}
.app-card.featured > * { position: relative; z-index: 1; }
.app-card.featured p, .app-card.featured .app-meta { color: rgba(255,255,255,0.82); }
.app-card.featured h3 { color: #fff; }

.app-top { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.app-icon {
  width: 56px; height: 56px; border-radius: 14px;
  display: grid; place-items: center; flex-shrink: 0;
  background: var(--navy-deep);
}
.app-card.featured .app-icon {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
}
.app-icon img { width: 72%; height: auto; }
.app-title h3 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.3px; }

/* Per-product wordmark gradients on the second half of each product name.
   Each product carries its own brand gradient so the family page reads as
   a directory of distinct apps, not a wall of identical text. */
.app-title h3 .accent-tracker {
  background-image: linear-gradient(135deg, #0a84ff 0%, #1E3A8A 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.app-title h3 .accent-command {
  background-image: linear-gradient(135deg, #4338CA 0%, #5B21B6 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@media (prefers-color-scheme: dark) {
  .app-title h3 .accent-tracker {
    background-image: linear-gradient(135deg, #5AB1FF 0%, #0a84ff 100%);
  }
  .app-title h3 .accent-command {
    background-image: linear-gradient(135deg, #A5B4FC 0%, #818CF8 100%);
  }
}
.app-title .app-meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; color: var(--slate);
  margin-top: 2px; display: block;
}
.app-badge {
  margin-left: auto;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--radius-btn);
  background: var(--green-soft); color: var(--green-deeper);
  font-weight: 700;
}
@media (prefers-color-scheme: dark) {
  .app-badge { color: var(--green-text); }
}
.app-card.featured .app-badge {
  background: rgba(48, 209, 88, 0.2);
  color: #BBF7D0;
}

/* Beta state — purple accent (not part of core palette; used sparingly for app status) */
.app-badge.beta {
  background: #EDE9FE;         /* violet-100 */
  color: #5B21B6;              /* violet-800 — AAA on violet-100 (~8.2:1) */
}
@media (prefers-color-scheme: dark) {
  .app-badge.beta {
    background: rgba(167, 139, 250, 0.18);
    color: #DDD6FE;            /* violet-200 — AAA on navy deep ground */
  }
}
.app-card.featured .app-badge.beta {
  background: rgba(167, 139, 250, 0.22);
  color: #E9D5FF;              /* violet-200 on navy-deep featured card */
}

.app-body { color: var(--slate); font-size: 15px; line-height: 1.6; }
.app-card.featured .app-body { color: rgba(255,255,255,0.82); }

.app-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 22px; }
.app-tag {
  font-size: 12px; font-weight: 500;
  padding: 4px 10px; border-radius: var(--radius-btn);
  background: var(--surface-soft); color: var(--slate);
  border: 1px solid var(--line);
}
.app-card.featured .app-tag {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.82);
}

.app-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.app-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--radius-btn);
  font-weight: 700; font-size: 14px;
  min-height: 44px; box-sizing: border-box;
  border: 2px solid var(--ui-border);
  background: var(--surface); color: var(--ink) !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.app-link:hover {
  border-color: var(--ink);
  background: var(--surface-soft);
  transform: translateY(-1px);
  color: var(--ink) !important;
  text-decoration: none;
  box-shadow: 0 8px 20px -12px rgba(17, 17, 24, 0.35);
}
.app-link.primary {
  background: var(--product-blue); border-color: var(--product-blue-deep); color: #fff !important;
  box-shadow: 0 12px 26px -12px rgba(10, 132, 255, 0.75), inset 0 0 0 1px rgba(255,255,255,0.08);
}
.app-link.primary:hover {
  background: var(--product-blue-hover); border-color: var(--ink); color: #fff !important;
  box-shadow: 0 16px 30px -10px rgba(10, 132, 255, 0.85), inset 0 0 0 1px rgba(255,255,255,0.12);
}
/* Per-product override — indigo CTA on the privacycommand card. */
.app-card.command .app-link.primary {
  background: var(--product-indigo); border-color: var(--product-indigo-deep); color: #fff !important;
  box-shadow: 0 12px 26px -12px rgba(67, 56, 202, 0.75), inset 0 0 0 1px rgba(255,255,255,0.08);
}
.app-card.command .app-link.primary:hover {
  background: var(--product-indigo-hover); border-color: var(--ink); color: #fff !important;
  box-shadow: 0 16px 30px -10px rgba(67, 56, 202, 0.85), inset 0 0 0 1px rgba(255,255,255,0.12);
}
.app-card.featured .app-link:not(.primary) {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.35);
  color: #fff !important;
}
.app-card.featured .app-link:not(.primary):hover {
  background: rgba(255,255,255,0.16);
  border-color: #fff;
}
.app-link svg { width: 14px; height: 14px; }
@media (prefers-color-scheme: dark) {
  .app-link.primary {
    background: var(--product-blue); border-color: #5fb0ff; color: #fff !important;
  }
  .app-link.primary:hover { background: #409cff; border-color: #E6EDF5; color: #fff !important; }
  .app-card.command .app-link.primary {
    background: var(--product-indigo); border-color: #818CF8; color: #fff !important;
  }
  .app-card.command .app-link.primary:hover { background: var(--product-indigo-hover); border-color: #E6EDF5; color: #fff !important; }
  .app-link:not(.primary) { border-color: var(--line-strong); }
  .app-link:not(.primary):hover { border-color: var(--ink); background: var(--surface); }
}

.app-card.coming {
  background: var(--coming-bg);
  border: 1px dashed var(--coming-border);
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 260px;
}
.app-card.coming:hover { transform: none; box-shadow: none; border-color: var(--slate); }
.coming-inner { padding: 16px; }
.coming-inner h3 { margin: 0 0 6px; color: var(--ink); font-size: 18px; }
.coming-inner p { margin: 0; color: var(--slate); font-size: 14px; }
.coming-icon-light { display: block; }
.coming-icon-dark  { display: none; }
@media (prefers-color-scheme: dark) {
  .coming-icon-light { display: none; }
  .coming-icon-dark  { display: block; }
}

/* ---------- Footer ---------- */
footer {
  padding: 56px 0 0;                /* bottom padding lives on .footer-bottom now,
                                       so the rain band can sit flush at the page edge */
  color: var(--slate); font-size: 14px;
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.footer-inner {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 32px;
  align-items: start;
}
@media (max-width: 820px) { .footer-inner { grid-template-columns: 1fr; } }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.footer-brand img { height: 28px; width: auto; }
.footer-brand .wm { font-weight: 700; color: var(--ink); }
.footer-brand .wm .accent {
  color: var(--wordmark-accent); /* fallback */
  background-image: var(--wordmark-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.footer-col h4 {
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--slate); margin: 0 0 12px; font-weight: 700;
}
.footer-col a {
  display: inline-flex; align-items: center;
  color: var(--slate); padding: 6px 10px; font-size: 14px;
  min-height: 44px; margin-left: -10px;
  border: 2px solid transparent;
  border-radius: var(--radius-btn);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.footer-col a:hover {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--surface-soft);
  text-decoration: none;
}
.footer-bottom {
  margin-top: 32px; padding-top: 20px;
  padding-bottom: 28px;             /* breathing room before the rain band starts */
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: var(--slate);
}

/* ---------- Long-press easter egg ----------
   Triggered by hero-rain.js when the privacykey logo is held still for
   ~1.5s. The pulse uses filter (not transform) so it doesn't fight the
   drag-cut transform that may still be applied to the same element. */
@keyframes pk-pulse {
  0%   { filter: drop-shadow(0 0 0 rgba(48, 209, 88, 0)); }
  35%  { filter: drop-shadow(0 0 22px rgba(48, 209, 88, 0.75)); }
  100% { filter: drop-shadow(0 0 0 rgba(48, 209, 88, 0)); }
}
.pk-pulse { animation: pk-pulse 0.7s ease-out; }

.pk-thanks {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);          /* sits above the logo, not below */
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.2px;
  color: var(--green-deep);
  background: var(--green-soft);
  border: 1px solid rgba(48, 209, 88, 0.45);
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);        /* starts 4px below resting, slides up */
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
  text-decoration: none !important;
  z-index: 5;
}
.pk-thanks.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.pk-thanks:hover { background: #BBF7D0; color: var(--green-deeper); }
@media (prefers-color-scheme: dark) {
  .pk-thanks {
    color: #BBF7D0;
    background: rgba(48, 209, 88, 0.15);
    border-color: rgba(48, 209, 88, 0.35);
  }
  .pk-thanks:hover { background: rgba(48, 209, 88, 0.25); color: #DCFCE7; }
}

/* ---------- Footer rain band ----------
   Same shader / particle system as the hero (driven by hero-rain.js
   discovering every [data-hero-rain] element on the page). The band
   has no .accent or .btn descendants, so the roof array stays empty
   and rain just falls — no bouncing, no doubling, no cursor splash. */
.footer-rain {
  position: relative;
  height: 140px;
  overflow: hidden;
  pointer-events: none;
  /* Top edge fades in so the rain doesn't slam against the credit row. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 100%);
}
.footer-rain canvas { display: block; width: 100%; height: 100%; }
@media (prefers-color-scheme: dark) { .footer-rain { opacity: 0.75; } }
@media (prefers-reduced-motion: reduce) { .footer-rain { display: none; } }
/* Same no-JS fallback for the footer band — without JS the canvas is
   empty, so the 140px strip would just be wasted space at the page edge. */
.no-js .footer-rain { display: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}