/* ============================================================================
   Silicon: Tech Tycoon — site styles
   Self-contained design system for the GitHub Pages site (landing + privacy +
   support). Mirrors the app's DesignSystem tokens: light-primary, automatic
   dark mode, real accent, 8pt grid, glass cards. No external requests — system
   font stack only (consistent with the app's no-tracking ethos).
   ============================================================================ */

/* ---- Tokens : light (primary) -------------------------------------------- */
:root {
  --bg: #f4f5f7;
  --bg-2: #eceef1;
  --surface: #ffffff;
  --surface-2: #fbfbfc;
  --ink: #1a1d23;
  --ink-2: #5b6270;
  --ink-3: #858b99;
  --hairline: #e5e7eb;

  --accent: #2563eb;
  --accent-2: #1e40af;
  --accent-3: #60a5fa;
  --accent-soft: #eaf1fe;
  --accent-ink: #ffffff;

  --positive: #10b981;
  --positive-soft: #e7f7f1;

  /* Liquid-glass card material (translucent surface + inner top highlight) */
  --glass: color-mix(in srgb, var(--surface) 72%, transparent);
  --glass-stroke: color-mix(in srgb, var(--hairline) 88%, transparent);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --nav-glass: color-mix(in srgb, var(--bg) 70%, transparent);

  --shadow-subtle: 0 1px 2px rgba(16, 19, 28, 0.05);
  --shadow-card: 0 1px 2px rgba(16, 19, 28, 0.06), 0 12px 32px rgba(16, 19, 28, 0.08);
  --shadow-float: 0 10px 28px rgba(16, 19, 28, 0.12), 0 34px 64px rgba(16, 19, 28, 0.14);

  /* Spacing — strict 8pt scale (with fine half-steps) */
  --sp-2: 2px;  --sp-4: 4px;  --sp-6: 6px;  --sp-8: 8px;  --sp-12: 12px;
  --sp-16: 16px; --sp-20: 20px; --sp-24: 24px; --sp-32: 32px; --sp-40: 40px;
  --sp-48: 48px; --sp-64: 64px; --sp-80: 80px; --sp-96: 96px; --sp-128: 128px;

  /* Radius */
  --r-chip: 999px;
  --r-button: 12px;
  --r-card: 16px;
  --r-xl: 24px;
  --r-2xl: 32px;

  /* Type — fluid, clamps for premium scaling */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-rounded: -apple-system, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
  --fs-display: clamp(2.5rem, 1.7rem + 3.6vw, 4.25rem);
  --fs-h1: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  --fs-h2: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
  --fs-h3: 1.1875rem;
  --fs-lede: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-caption: 0.8125rem;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snappy: cubic-bezier(0.2, 0.9, 0.3, 1);
  --t-fast: 180ms;
  --t-med: 320ms;
  --t-slow: 520ms;

  --maxw: 1120px;
  --readw: 720px;

  color-scheme: light dark;
}

/* ---- Tokens : dark (auto) ------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1115;
    --bg-2: #15181d;
    --surface: #1a1d23;
    --surface-2: #1f232a;
    --ink: #f4f5f7;
    --ink-2: #9ca3af;
    --ink-3: #6b7280;
    --hairline: #2a2f37;

    --accent: #3b82f6;
    --accent-2: #60a5fa;
    --accent-3: #93c5fd;
    --accent-soft: #16233d;

    --positive: #10b981;
    --positive-soft: #11241d;

    --glass: color-mix(in srgb, var(--surface) 70%, transparent);
    --glass-stroke: rgba(255, 255, 255, 0.08);
    --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --nav-glass: color-mix(in srgb, var(--bg) 64%, transparent);

    --shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.4);
    --shadow-float: 0 10px 28px rgba(0, 0, 0, 0.5), 0 34px 64px rgba(0, 0, 0, 0.55);
  }
}

/* ---- Reset / base -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { min-height: 100vh; line-height: 1.5; overflow-x: hidden; }

::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }

a { color: var(--accent); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--accent-2); }

img, svg { display: block; max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Layout helpers ------------------------------------------------------ */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--sp-24); }
.section { padding-block: clamp(var(--sp-64), 9vw, var(--sp-128)); }
.section--tight { padding-block: clamp(var(--sp-48), 7vw, var(--sp-80)); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-8);
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
}
.eyebrow::before {
  content: ""; width: 18px; height: 1.5px; border-radius: 2px;
  background: currentColor; opacity: 0.5;
}

.section-head { max-width: 640px; margin-bottom: clamp(var(--sp-32), 5vw, var(--sp-64)); }
.section-head h2 {
  font-size: var(--fs-h2); font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.08; margin-top: var(--sp-12);
}
.section-head p { font-size: var(--fs-lede); color: var(--ink-2); margin-top: var(--sp-16); line-height: 1.55; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

/* ---- Buttons / chips ----------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8);
  padding: 13px 22px; border-radius: var(--r-button);
  font-family: inherit; font-size: var(--fs-small); font-weight: 700; letter-spacing: -0.01em;
  cursor: pointer; border: 1px solid transparent; white-space: nowrap;
  transition: transform var(--t-fast) var(--ease-snappy), box-shadow var(--t-med) var(--ease),
              background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-subtle); }
.btn--primary:hover { color: var(--accent-ink); box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 40%, transparent); transform: translateY(-1px); }
.btn--ghost { background: var(--glass); border-color: var(--glass-stroke); color: var(--ink); box-shadow: var(--glass-hi); backdrop-filter: saturate(1.4) blur(8px); -webkit-backdrop-filter: saturate(1.4) blur(8px); }
.btn--ghost:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--glass-stroke)); color: var(--ink); transform: translateY(-1px); }
.btn--lg { padding: 16px 28px; font-size: var(--fs-body); }

.chip {
  display: inline-flex; align-items: center; gap: var(--sp-8);
  padding: 7px 14px; border-radius: var(--r-chip);
  background: var(--glass); border: 1px solid var(--glass-stroke); box-shadow: var(--glass-hi);
  font-size: var(--fs-caption); font-weight: 600; color: var(--ink-2);
  backdrop-filter: saturate(1.4) blur(8px); -webkit-backdrop-filter: saturate(1.4) blur(8px);
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--positive); box-shadow: 0 0 0 4px color-mix(in srgb, var(--positive) 18%, transparent); }
.chip--accent { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--glass-stroke)); background: color-mix(in srgb, var(--accent-soft) 80%, transparent); }
.chip strong { color: var(--ink); font-weight: 700; }

/* ---- Top nav ------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--nav-glass);
  backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-med) var(--ease), background var(--t-med) var(--ease);
}
.nav.is-scrolled { border-bottom-color: var(--glass-stroke); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16); height: 64px; }
.brand { display: inline-flex; align-items: center; gap: var(--sp-12); color: var(--ink); font-weight: 700; }
.brand:hover { color: var(--ink); }
.brand__icon { width: 32px; height: 32px; border-radius: 9px; box-shadow: var(--shadow-subtle); }
.brand__name { font-size: 1.0625rem; letter-spacing: -0.02em; }
.brand__name span { color: var(--ink-3); font-weight: 600; }
.nav__links { display: flex; align-items: center; gap: var(--sp-8); }
.nav__links a:not(.btn) {
  color: var(--ink-2); font-size: var(--fs-small); font-weight: 600;
  padding: 8px 12px; border-radius: var(--r-button);
}
.nav__links a:not(.btn):hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.nav__cta { margin-left: var(--sp-4); }
@media (max-width: 640px) {
  .nav__links a:not(.btn) { display: none; }
}

/* ---- Hero ---------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding-top: clamp(var(--sp-48), 7vw, var(--sp-96)); padding-bottom: clamp(var(--sp-64), 9vw, var(--sp-128)); }
.hero__mesh {
  position: absolute; inset: -20% -10% auto -10%; height: 720px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 50% at 78% 18%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%),
    radial-gradient(38% 44% at 12% 8%, color-mix(in srgb, var(--accent-3) 22%, transparent), transparent 70%),
    radial-gradient(50% 60% at 50% -10%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 70%);
  filter: blur(8px); opacity: 0.9;
  animation: meshDrift 22s ease-in-out infinite alternate;
}
@keyframes meshDrift { from { transform: translate3d(-1.5%, -1%, 0) scale(1); } to { transform: translate3d(2%, 1.5%, 0) scale(1.06); } }

.hero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(var(--sp-32), 5vw, var(--sp-64));
  align-items: center;
}
@media (max-width: 880px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--sp-48); }
}
.hero__copy { max-width: 600px; }
.hero h1 {
  font-size: var(--fs-display); font-weight: 850; letter-spacing: -0.04em; line-height: 1.02;
  margin-top: var(--sp-20);
}
.hero h1 .grad {
  background: linear-gradient(120deg, var(--accent-2), var(--accent) 45%, var(--accent-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__lede { font-size: var(--fs-lede); color: var(--ink-2); line-height: 1.55; margin-top: var(--sp-24); max-width: 36ch; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-12); margin-top: var(--sp-32); }
.hero__meta { display: flex; flex-wrap: wrap; gap: var(--sp-8); margin-top: var(--sp-32); }

/* ---- Hero device illustration ------------------------------------------- */
.device-stage { position: relative; display: grid; place-items: center; min-height: 460px; perspective: 1400px; }
.device-glow {
  position: absolute; width: 78%; height: 78%; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 45%, transparent), transparent 65%);
  filter: blur(60px); opacity: 0.7;
}
.device {
  position: relative; z-index: 1; width: min(280px, 70vw);
  filter: drop-shadow(0 30px 60px rgba(16, 19, 28, 0.28));
  transform: rotateY(-14deg) rotateX(5deg) rotateZ(0.5deg);
  transform-style: preserve-3d; will-change: transform;
  transition: transform var(--t-slow) var(--ease);
}
.device-stage[data-tilt] .device { transition: transform 120ms linear; }
@media (prefers-reduced-motion: no-preference) {
  .device { animation: floaty 7s ease-in-out infinite; }
}
@keyframes floaty {
  0%, 100% { transform: rotateY(-14deg) rotateX(5deg) translateY(0); }
  50%      { transform: rotateY(-11deg) rotateX(4deg) translateY(-12px); }
}

/* Floating component chips around the device */
.float-chip {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; gap: var(--sp-8);
  padding: 8px 13px; border-radius: var(--r-chip);
  background: var(--glass); border: 1px solid var(--glass-stroke);
  box-shadow: var(--shadow-card), var(--glass-hi);
  backdrop-filter: saturate(1.5) blur(12px); -webkit-backdrop-filter: saturate(1.5) blur(12px);
  font-size: var(--fs-caption); font-weight: 700; color: var(--ink); white-space: nowrap;
}
.float-chip i { width: 8px; height: 8px; border-radius: 2.5px; display: inline-block; }
.float-chip--1 { top: 10%; left: -2%; animation: bob 6s ease-in-out infinite; }
.float-chip--2 { top: 42%; right: -6%; animation: bob 6s ease-in-out infinite 1.4s; }
.float-chip--3 { bottom: 9%; left: 4%; animation: bob 6s ease-in-out infinite 0.7s; }
@media (prefers-reduced-motion: reduce) { .float-chip { animation: none !important; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (max-width: 460px) { .float-chip { font-size: 0.75rem; padding: 6px 10px; } .float-chip--2 { right: -2%; } }

/* ---- Trust strip --------------------------------------------------------- */
.trust { border-block: 1px solid var(--hairline); background: var(--surface-2); }
.trust__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-12) var(--sp-32);
  padding-block: var(--sp-24);
}
.trust__item { display: inline-flex; align-items: center; gap: var(--sp-8); color: var(--ink-2); font-size: var(--fs-small); font-weight: 600; }
.trust__item svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
.trust__item strong { color: var(--ink); }

/* ---- Feature grid -------------------------------------------------------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-20); }
@media (max-width: 880px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }

.card {
  position: relative; padding: var(--sp-24);
  background: var(--glass); border: 1px solid var(--glass-stroke); border-radius: var(--r-card);
  box-shadow: var(--shadow-card), var(--glass-hi);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
@media (prefers-reduced-motion: no-preference) {
  .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-float), var(--glass-hi); border-color: color-mix(in srgb, var(--accent) 30%, var(--glass-stroke)); }
}
.feature__glyph {
  width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center;
  margin-bottom: var(--sp-16);
  background: color-mix(in srgb, var(--accent-soft) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
}
.feature__glyph svg { width: 24px; height: 24px; }
.card h3 { font-size: var(--fs-h3); font-weight: 750; letter-spacing: -0.02em; }
.card p { color: var(--ink-2); margin-top: var(--sp-8); font-size: var(--fs-small); line-height: 1.6; }

/* ---- Showcase band (parametric variety) ---------------------------------- */
.showcase { background: var(--bg-2); border-block: 1px solid var(--hairline); }
.showcase__devices {
  display: flex; align-items: flex-end; justify-content: center; gap: clamp(var(--sp-16), 4vw, var(--sp-48));
  margin-top: var(--sp-48); flex-wrap: wrap;
}
.mini-device { width: clamp(120px, 22vw, 168px); filter: drop-shadow(0 18px 34px rgba(16, 19, 28, 0.2)); transition: transform var(--t-med) var(--ease); }
@media (prefers-reduced-motion: no-preference) { .mini-device:hover { transform: translateY(-8px) rotate(-1deg); } }
.mini-device--tablet { width: clamp(150px, 26vw, 210px); }
.showcase__caption { text-align: center; color: var(--ink-2); font-size: var(--fs-small); margin-top: var(--sp-32); max-width: 52ch; margin-inline: auto; }

/* ---- Privacy CTA band ---------------------------------------------------- */
.privacy-band { text-align: center; }
.privacy-band__inner {
  position: relative; overflow: hidden;
  padding: clamp(var(--sp-48), 7vw, var(--sp-80)) var(--sp-24);
  border-radius: var(--r-2xl); border: 1px solid var(--glass-stroke);
  background:
    radial-gradient(60% 120% at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    var(--surface);
  box-shadow: var(--shadow-card);
}
.privacy-band__shield { width: 54px; height: 54px; color: var(--accent); margin: 0 auto var(--sp-20); }
.privacy-band h2 { font-size: var(--fs-h2); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.privacy-band p { color: var(--ink-2); font-size: var(--fs-lede); max-width: 46ch; margin: var(--sp-16) auto var(--sp-32); line-height: 1.55; }

/* ---- Pricing ------------------------------------------------------------- */
.pricing { display: grid; place-items: center; }
.price-card {
  width: 100%; max-width: 460px; text-align: center;
  padding: clamp(var(--sp-32), 5vw, var(--sp-48));
  background: var(--glass); border: 1px solid var(--glass-stroke); border-radius: var(--r-2xl);
  box-shadow: var(--shadow-float), var(--glass-hi);
}
.price-card__badge { margin: 0 auto var(--sp-24); }
.price-card__amount { display: flex; align-items: baseline; justify-content: center; gap: var(--sp-6); }
.price-card__amount .num { font-size: clamp(3rem, 2rem + 4vw, 4rem); font-weight: 850; letter-spacing: -0.04em; line-height: 1; }
.price-card__amount .per { color: var(--ink-2); font-weight: 600; font-size: var(--fs-body); }
.price-card__sub { color: var(--ink-2); margin-top: var(--sp-12); font-size: var(--fs-small); }
.price-list { list-style: none; text-align: left; margin: var(--sp-32) auto 0; display: grid; gap: var(--sp-12); max-width: 320px; }
.price-list li { display: flex; align-items: flex-start; gap: var(--sp-12); color: var(--ink); font-size: var(--fs-small); }
.price-list svg { width: 20px; height: 20px; color: var(--positive); flex-shrink: 0; margin-top: 1px; }
.price-card__note { color: var(--ink-3); font-size: var(--fs-caption); margin-top: var(--sp-24); line-height: 1.5; }

/* ---- Footer -------------------------------------------------------------- */
.footer { border-top: 1px solid var(--hairline); background: var(--surface-2); }
.footer__grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--sp-32);
  padding-block: var(--sp-64) var(--sp-40);
}
@media (max-width: 720px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-32) var(--sp-24); } }
@media (max-width: 420px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__brand { max-width: 280px; }
.footer__brand p { color: var(--ink-2); font-size: var(--fs-small); margin-top: var(--sp-12); line-height: 1.55; }
.footer__col h4 { font-size: var(--fs-caption); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); margin-bottom: var(--sp-12); }
.footer__col a { display: block; color: var(--ink-2); font-size: var(--fs-small); padding-block: var(--sp-6); }
.footer__col a:hover { color: var(--accent); }
.footer__bar { display: flex; flex-wrap: wrap; gap: var(--sp-8) var(--sp-16); align-items: center; justify-content: space-between; padding-block: var(--sp-24); border-top: 1px solid var(--hairline); color: var(--ink-3); font-size: var(--fs-caption); }

/* ---- Prose (privacy / support reading column) --------------------------- */
.page-head { padding-top: clamp(var(--sp-48), 6vw, var(--sp-80)); padding-bottom: var(--sp-32); }
.page-head h1 { font-size: var(--fs-h1); font-weight: 850; letter-spacing: -0.035em; line-height: 1.05; margin-top: var(--sp-16); }
.page-head .updated { color: var(--ink-3); font-size: var(--fs-small); margin-top: var(--sp-12); }
.page-head p.intro { color: var(--ink-2); font-size: var(--fs-lede); margin-top: var(--sp-16); line-height: 1.55; max-width: 60ch; }

.prose { max-width: var(--readw); margin-inline: auto; }
.prose__card {
  background: var(--glass); border: 1px solid var(--glass-stroke); border-radius: var(--r-card);
  box-shadow: var(--shadow-card), var(--glass-hi);
  padding: clamp(var(--sp-24), 4vw, var(--sp-32)); margin-bottom: var(--sp-16);
}
.prose__card h2 { font-size: 1rem; font-weight: 750; color: var(--accent); letter-spacing: -0.01em; margin-bottom: var(--sp-12); }
.prose__card h3 { font-size: var(--fs-body); font-weight: 700; margin: var(--sp-20) 0 var(--sp-8); }
.prose__card h3:first-of-type { margin-top: 0; }
.prose__card p { color: var(--ink-2); font-size: var(--fs-body); line-height: 1.7; }
.prose__card p + p { margin-top: var(--sp-12); }
.prose__card ul { padding-left: var(--sp-20); margin-top: var(--sp-8); }
.prose__card li { color: var(--ink-2); font-size: var(--fs-body); line-height: 1.7; margin-bottom: var(--sp-6); }
.prose__card .hl { color: var(--ink); font-weight: 650; }
.prose__card code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.875em; background: color-mix(in srgb, var(--ink) 8%, transparent); padding: 2px 6px; border-radius: 6px; }

.callout {
  display: flex; gap: var(--sp-12); align-items: flex-start;
  padding: var(--sp-16); border-radius: var(--r-button); margin-top: var(--sp-16);
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.callout svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.callout p { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.6; }

/* ---- FAQ accordion (support) -------------------------------------------- */
.faq {
  background: var(--glass); border: 1px solid var(--glass-stroke); border-radius: var(--r-card);
  box-shadow: var(--shadow-card), var(--glass-hi);
  margin-bottom: var(--sp-12); overflow: hidden;
}
.faq > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16);
  padding: var(--sp-20) var(--sp-24); cursor: pointer; list-style: none;
  font-size: var(--fs-body); font-weight: 700; letter-spacing: -0.01em; color: var(--ink);
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::after {
  content: ""; width: 11px; height: 11px; flex-shrink: 0;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg) translateY(-2px); transition: transform var(--t-med) var(--ease);
}
.faq[open] > summary::after { transform: rotate(225deg) translateY(0); }
.faq > summary:hover { color: var(--accent); }
.faq > summary:hover::after { border-color: var(--accent); }
.faq__body { padding: 0 var(--sp-24) var(--sp-24); }
.faq__body p { color: var(--ink-2); font-size: var(--fs-body); line-height: 1.7; }
.faq__body p + p { margin-top: var(--sp-12); }
.faq__body ul { padding-left: var(--sp-20); margin-top: var(--sp-8); }
.faq__body li { color: var(--ink-2); font-size: var(--fs-body); line-height: 1.7; margin-bottom: var(--sp-4); }
@media (prefers-reduced-motion: no-preference) {
  .faq[open] .faq__body { animation: faqIn var(--t-med) var(--ease); }
}
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.contact-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-16);
  padding: clamp(var(--sp-24), 4vw, var(--sp-32));
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card);
  box-shadow: var(--shadow-card); margin-top: var(--sp-24);
}
.contact-cta__text { flex: 1 1 240px; }
.contact-cta h3 { font-size: var(--fs-h3); font-weight: 750; letter-spacing: -0.02em; }
.contact-cta p { color: var(--ink-2); font-size: var(--fs-small); margin-top: var(--sp-4); }

/* ---- Scroll reveal (progressive enhancement) ----------------------------- */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal[data-delay="1"] { transition-delay: 80ms; }
.js .reveal[data-delay="2"] { transition-delay: 160ms; }
.js .reveal[data-delay="3"] { transition-delay: 240ms; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

.skip-link {
  position: absolute; left: var(--sp-16); top: -60px; z-index: 100;
  background: var(--accent); color: var(--accent-ink); padding: 10px 16px; border-radius: var(--r-button);
  font-weight: 700; font-size: var(--fs-small); transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: var(--sp-16); color: var(--accent-ink); }

/* ---------- Screenshots gallery ---------- */
.screens__strip {
  display: flex;
  gap: clamp(14px, 2.5vw, 28px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px clamp(16px, 5vw, 64px) 26px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.screens__strip::-webkit-scrollbar { display: none; }
.shot {
  margin: 0;
  flex: 0 0 auto;
  scroll-snap-align: center;
}
.shot img {
  display: block;
  height: clamp(440px, 62vh, 600px);
  width: auto;
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.55);
}
@media (max-width: 640px) {
  .shot img { height: 68vh; max-height: 560px; }
}