/* ====================================================================
   HomeWow Landing Page - design system
   A fork of the portfolio landing-page template, and the second DARK one.
   The section grammar and script.js are inherited unchanged; only the
   tokens, the fonts and the motif differ.

   TOKENS COME FROM THE SHIPPED APP: src/theme/tokens.ts in the app repo
   (color.bg #0F0E0D, card #1A1817, text #F7F4EF, text2 #8C857C, text3
   #6E665E, accent #E25934, credit #EDB902, positive #7FA37A).

   CONTRAST, measured (WCAG) on the app bg #0F0E0D:
     #E25934  accent           5.25:1   carries text
     #F7F4EF  text            17.58:1   AAA
     #8C857C  text2            5.29:1   text on the page bg only
     #9A938A  derived          6.35:1   muted copy (5.83:1 on cards)
     #6E665E  text3            3.42:1   graphics / large text only
     #B84A2A  derived          3.72:1   large numerals / graphics
     #EDB902  credit          10.60:1   second accent

   THE DARK-FORK TRAP: the accent reads fine AS text on dark, so it is
   tempting to fill a button with it and put white on top. White on #E25934
   is 3.68:1 and fails. The primary button carries the PAGE colour as its
   label (#0F0E0D on #E25934 = 5.25:1), which is what the app's own filled
   controls do (its active tab and CTA labels use color.bg on color.accent).
   The CTA gradient therefore runs LIGHTER (#E25934 -> #E9673F) so the label
   only ever gains contrast; a darker end stop would drop it to 4.38:1.
   ==================================================================== */

:root {
  /* ===== Brand (the app's accent, plus a ramp derived at the same hue) ===== */
  --brand-50:  #fbefe9;   /* DERIVED - only used on the accent CTA slab */
  --brand-100: rgba(226, 89, 52, 0.12);
  --brand-200: #f5c2b2;   /* DERIVED */
  --brand-300: #ee9b80;   /* DERIVED */
  --brand-400: #eb7a57;   /* DERIVED */
  --brand-500: #E25934;   /* THE app accent - 5.25:1 on #0F0E0D, carries text */
  --brand-600: #EDB902;   /* app token color.credit - 10.6:1, the second accent */
  --brand-700: #E25934;   /* alias: on dark the accent IS the text-safe step */
  --brand-800: #eb7a57;   /* lighter, for hover on dark */
  --brand-900: #b84a2a;   /* DERIVED - 3.72:1, large numerals / graphics */
  --deep-900:  #0a0908;   /* DERIVED - deeper than the app bg, footer only */

  /* ===== Ember gradient (warm corner wash, dark end of the accent hue) ===== */
  --ember-1: #201512;
  --ember-2: #1d1512;
  --ember-3: #5a2a1a;
  --ember-4: #6e2612;

  /* ===== CTA - accent fill, PAGE-DARK label. Never white on the accent. ===== */
  --cta-from: #E25934;
  --cta-to:   #E9673F;         /* DERIVED, same hue LIGHTER; label stays 5.95:1 */
  --cta-from-hover: #EE7B57;
  --cta-to-hover:   #E9673F;
  --cta-ink: #0F0E0D;          /* 5.25:1 on the fill */

  /* ===== Ink - INVERTED. On a dark page the ramp runs light-to-dark. ===== */
  --ink-900: #F7F4EF;     /* app text - 17.58:1 */
  --ink-700: #E4DFD7;     /* DERIVED  - 14.6:1 */
  --ink-600: #B5B0A8;     /* DERIVED  -  8.94:1, body copy */
  --ink-500: #9A938A;     /* DERIVED  -  6.35:1 */
  --ink-300: #6E665E;     /* app text3 - 3.42:1, placeholders and graphics only */
  --ink-200: #4A443F;     /* DERIVED  - graphics only */
  --ink-100: #26221F;     /* DERIVED  - hairlines */

  /* ===== Status ===== */
  --success: #7FA37A;     /* app color.positive */
  --success-dark: #7FA37A;
  --error: #ff8a8a;       /* light enough to read on #0F0E0D */
  --warning: #EDB902;

  /* ===== Surfaces (app's own ladder) ===== */
  --white: #F7F4EF;
  --canvas: #0F0E0D;      /* color.bg */
  --wash: #0F0E0D;
  --surface: #1A1817;     /* color.card */
  --surface-2: #24201E;   /* color.track */

  /* ===== Semantic ===== */
  --text: var(--ink-900);
  --text-body: var(--ink-600);
  --text-mute: var(--ink-500);

  --border: #2a2623;
  --border-strong: #3d3834;
  --border-brand: rgba(226, 89, 52, 0.32);

  /* ===== Elevation - on a dark page a shadow cannot be seen, so depth is
     carried by a lighter surface plus a hairline. The shadows below are kept
     for the few elements that sit on the accent CTA card, where they DO read. */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px -6px rgba(0, 0, 0, 0.55);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4), 0 14px 34px -12px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4), 0 30px 60px -22px rgba(0, 0, 0, 0.7);
  --shadow-brand: 0 14px 34px -12px rgba(226, 89, 52, 0.5);
  --shadow-cta: 0 14px 30px -10px rgba(226, 89, 52, 0.38), 0 0 0 4px rgba(226, 89, 52, 0.12);

  /* ===== Radii - the app's own (radius.card 24, hero 28, block 18, pill) ===== */
  --radius-btn: 9999px;
  --radius-input: 9999px;
  --radius-sm: 18px;
  --radius: 22px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --radius-full: 9999px;

  /* ===== Layout ===== */
  --section: clamp(76px, 9vw, 124px);
  --container: 1200px;

  /* ===== Motion ===== */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  /* Both families are the app's OWN (the font export in src/theme/tokens.ts):
     DM Sans for UI and body, Instrument Serif for display. Both are on
     Google Fonts, so nothing here is a substitute. */
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--canvas);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
}

/* Atmosphere - a warm accent wash top-right and a dark rust glow bottom-right
   over the app bg, page-wide and fixed so long scrolls keep the light source
   in one place. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(900px 640px at 82% -12%, rgba(226, 89, 52, 0.13), transparent 60%),
    radial-gradient(760px 560px at -8% 12%, rgba(90, 42, 26, 0.30), transparent 58%),
    radial-gradient(1000px 700px at 88% 106%, rgba(110, 38, 18, 0.28), transparent 62%),
    radial-gradient(700px 520px at 8% 94%, rgba(226, 89, 52, 0.07), transparent 58%),
    var(--wash);
  z-index: 0;
  pointer-events: none;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color 0.25s var(--ease-out); }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul, ol { list-style: none; }

::selection { background: var(--brand-500); color: var(--cta-ink); }

/* Visible keyboard focus - never remove without an equivalent replacement */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: 6px;
}
.btn:focus-visible, .store-btn:focus-visible, .nav-cta:focus-visible { outline-offset: 3px; }

/* Anchor targets clear the fixed navbar when arrived at from another page
   (in-page links get the same offset from script.js). */
section[id], header[id] { scroll-margin-top: 92px; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
  z-index: 1;
}

/* Skip link - visible only on keyboard focus */
.skip-link {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 200;
  padding: 12px 22px;
  background: var(--brand-500);
  color: var(--cta-ink);
  font-weight: 700;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: 0; }

/* Screen-reader-only helper for labels that must exist but not show */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ===== Typography =====
   The app sets every title in Instrument Serif (regular, with an italic
   accent word - TitleSerif) and everything else in DM Sans, and the store
   creative does the same. Instrument Serif ships in one weight only, so the
   headings are weight 400 (a bolder weight would be a synthesised faux-bold)
   and the accent word is the italic cut. */
h1, h2, h3, h4 {
  font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.1;
  color: var(--text);
}
h1 .accent, h2 .accent, h3 .accent { font-style: italic; }
.display {
  font-size: clamp(2.9rem, 6.2vw, 4.9rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1;
}
.accent { color: var(--brand-500); }
/* Second accent - the app's own #EDB902, a half-step warmer than the
   primary so the two never read as the same colour. */
.accent-alt { color: var(--brand-600); }

/* Eyebrow - the app's own EYEBROW label style: small, tracked caps */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-500);
  padding: 8px 16px 8px 13px;
  border: 1px solid var(--border-brand);
  border-radius: var(--radius-full);
  background: rgba(226, 89, 52, 0.08);
  backdrop-filter: blur(10px);
}
.eyebrow svg { width: 15px; height: 15px; flex-shrink: 0; }
.eyebrow.alt {
  color: var(--brand-600);
  border-color: rgba(237, 185, 2, 0.3);
  background: rgba(237, 185, 2, 0.09);
}

.section-intro {
  max-width: 740px;
  margin: 0 auto 56px;
  text-align: center;
}
.section-intro .eyebrow { margin-bottom: 20px; }
.section-intro h2 {
  font-size: clamp(2rem, 3.9vw, 2.9rem);
  margin-bottom: 16px;
}
.section-intro p { font-size: 1.06rem; color: var(--text-body); }

/* Section rule - a hairline that fades out, used instead of hard dividers */
.hairline {
  height: 1px;
  border: 0;
  background: linear-gradient(to right, transparent, var(--border-strong) 18%, var(--border-strong) 82%, transparent);
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  padding: 16px 30px;
  border-radius: var(--radius-btn);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out),
              background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out),
              color 0.25s var(--ease-out);
  white-space: nowrap;
  border: 1px solid transparent;
  line-height: 1.2;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Primary - accent fill running to a LIGHTER step of the same hue, so the
   page-colour label only gains contrast across the sweep. */
.btn-primary {
  background: linear-gradient(160deg, var(--cta-from) 0%, var(--cta-to) 100%);
  /* NOT white. White on #E25934 is 3.68:1 and fails; the page colour on the
     same fill is 5.25:1, and it is what the app's own filled controls use. */
  color: var(--cta-ink);
  border-color: var(--cta-to);
  box-shadow: var(--shadow-cta), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn-primary:hover {
  background: linear-gradient(160deg, var(--cta-from-hover) 0%, var(--cta-to-hover) 100%);
  transform: translateY(-2px);
  box-shadow: 0 18px 38px -12px rgba(226, 89, 52, 0.45), 0 0 0 5px rgba(226, 89, 52, 0.18),
              inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-900);
  border-color: var(--border-strong);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  border-color: var(--brand-500);
  color: var(--brand-500);
  background: rgba(226, 89, 52, 0.08);
  transform: translateY(-2px);
}
.btn-ghost:active { transform: translateY(0); }

/* ===== Store buttons ===== */
.store-buttons { display: flex; flex-wrap: wrap; gap: 14px; }
.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  padding: 12px 24px;
  background: var(--white);
  border: 1px solid var(--white);
  border-radius: var(--radius-btn);
  color: var(--canvas);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), background-color 0.25s var(--ease-out);
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, 0.8);
}
.store-btn:hover { background: var(--brand-500); color: var(--cta-ink); transform: translateY(-2px); }
.store-btn svg { width: 26px; height: 26px; flex-shrink: 0; }
.store-btn-text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.store-btn-text small { font-size: 0.66rem; letter-spacing: 0.04em; opacity: 0.86; }
.store-btn-text strong { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }

/* Not-yet-live store: rendered as a real disabled control, never a dead link */
.store-btn.is-pending {
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink-500);
  border: 1px dashed var(--border-strong);
  box-shadow: none;
  cursor: default;
}
.store-btn.is-pending:hover { transform: none; background: rgba(255, 255, 255, 0.05); color: var(--ink-500); box-shadow: none; }
.store-btn.is-pending svg { opacity: 0.55; }
.store-btn.is-pending .store-btn-text strong { color: var(--ink-600); }
.store-pending-tag {
  margin-left: 4px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-500);
  background: rgba(226, 89, 52, 0.12);
  border: 1px solid var(--border-brand);
  border-radius: var(--radius-full);
  padding: 4px 9px;
  align-self: center;
}

/* ===== Navbar ===== */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 14px 0;
  transition: background-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.navbar.scrolled {
  /* High opacity on purpose: this is a light page, so a thinner veil lets
     body text read straight through the bar. */
  background: rgba(15, 14, 13, 0.9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--border);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.nav-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}
.nav-logo img {
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { font-size: 0.94rem; font-weight: 600; color: var(--ink-600); }
.nav-links a:hover { color: var(--brand-500); }
.nav-cta { padding: 12px 22px; font-size: 0.9rem; }
/* The link rule above out-specifies .btn-primary, which would leave the CTA
   with dark ink on its fill. Restate the colour at matching specificity. */
.nav-links a.btn-primary,
.nav-links a.btn-primary:hover { color: var(--cta-ink); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav-toggle span {
  width: 22px; height: 2px;
  background: var(--ink-900);
  border-radius: 2px;
  transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}

/* ===== Glow motif =====
   A soft accent bloom behind the phone plus a slow ring of rays. It is the
   same structural slot in the
   markup (.sunburst / .horizon are kept as class names so the ported
   section CSS reads unchanged) with a different device inside it. */
.sunburst {
  position: absolute;
  left: 50%; top: 52%;
  width: 128%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle, rgba(226, 89, 52, 0.30) 0%, rgba(226, 89, 52, 0.10) 38%, transparent 66%),
    repeating-conic-gradient(
      from 0deg,
      rgba(226, 89, 52, 0.16) 0deg 1.6deg,
      transparent 1.6deg 9deg
    );
  -webkit-mask-image: radial-gradient(circle, transparent 30%, #000 44%, #000 60%, transparent 76%);
          mask-image: radial-gradient(circle, transparent 30%, #000 44%, #000 60%, transparent 76%);
  animation: emberTurn 120s linear infinite;
}
@keyframes emberTurn {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* The horizon line under the hero - the app's accent, fading out to
   nothing at both ends and cleared through the middle so it never crosses
   the phone. */
.horizon {
  position: absolute;
  left: -6%; right: -6%;
  bottom: 9%;
  height: 2px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--brand-900) 20%, var(--brand-500) 50%, var(--brand-900) 80%, transparent);
  border-radius: 2px;
  opacity: 0.8;
  -webkit-mask-image: linear-gradient(to right, #000 0 30%, transparent 38% 62%, #000 70% 100%);
          mask-image: linear-gradient(to right, #000 0 30%, transparent 38% 62%, #000 70% 100%);
}

/* ===== Frameless panel shots =====
   HomeWow's store screenshots are NOT all device mock-ups: four of the six
   are floating UI panels composited on the app's own near-black. Wrapping
   those in a phone bezel would invent a device the source never showed, so
   they render bare and simply blend into the page - which only works
   because this fork is dark and the panels are cut from the same #0F0E0D. */
.panel-shot {
  position: relative;
  width: min(430px, 92%);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--canvas);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
}
.panel-shot img { width: 100%; display: block; }

/* ===== Screen frame - real app screens, our own bezel =====
   The store screenshots draw the device as a floating white outline with a
   gap, so the crops here are the SCREEN ONLY and this frame supplies the
   device. Two variants, because the shots crop from two directions:
   the default is rounded at the top and fades out at the bottom (the screen
   continues); .open-top is its mirror. */
.phone-frame {
  position: relative;
  border-radius: 42px 42px 8px 8px;
  padding: 7px 7px 0;
  /* A warm dark bronze bezel, kept dark so the phone reads as an object ON the page rather
     than a white card cut out of it. */
  background: linear-gradient(160deg, #4a3a30 0%, #2a211c 46%, #17120f 100%);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 34px 64px -26px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
}
.phone-frame img {
  width: 100%;
  border-radius: 36px 36px 0 0;
  display: block;
  background: var(--surface);
}

/* ===== Footer ===== */
.footer {
  padding: 74px 0 30px;
  background: var(--deep-900);
  border-top: 1px solid var(--border);
  position: relative;
  z-index: 1;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 56px;
  margin-bottom: 44px;
}
.footer-brand .nav-logo { margin-bottom: 16px; }
.footer-brand p {
  color: var(--text-mute);
  font-size: 0.9rem;
  line-height: 1.65;
  max-width: 380px;
}
.footer-col h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-900);
  margin-bottom: 18px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 12px; }
.footer-col a { font-size: 0.92rem; color: var(--text-mute); }
.footer-col a:hover { color: var(--brand-500); }
.footer-legal {
  font-size: 0.78rem;
  color: var(--text-mute);
  line-height: 1.6;
  padding-top: 26px;
  border-top: 1px solid var(--border);
  max-width: 900px;
}
.footer-bottom {
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  color: var(--text-mute);
  font-size: 0.85rem;
}
.footer-bottom a { color: var(--brand-500); font-weight: 600; }
.footer-bottom a:hover { text-decoration: underline; }

/* ===== Reveal on scroll ===== */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
}
.reveal-stagger.in > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0.04s; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 0.12s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 0.20s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 0.28s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 0.36s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 0.44s; }
.reveal-stagger.in > *:nth-child(7) { transition-delay: 0.52s; }
.reveal-stagger.in > *:nth-child(8) { transition-delay: 0.60s; }
.reveal-stagger.in > *:nth-child(9) { transition-delay: 0.68s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; }
}

/* ===== Legal / long-form pages ===== */
.legal { padding: 132px 0 80px; max-width: 800px; margin: 0 auto; }
.legal h1 {
  font-size: clamp(2.5rem, 4.6vw, 3.4rem);
  margin-bottom: 12px;
}
.legal .legal-meta {
  color: var(--text-mute);
  font-size: 0.9rem;
  margin-bottom: 36px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.legal h2 { font-size: 1.4rem; margin: 36px 0 12px; }
.legal h3 { font-size: 1.08rem; margin: 24px 0 8px; color: var(--ink-700); }
.legal p, .legal li { color: var(--text-body); font-size: 1rem; line-height: 1.78; margin-bottom: 12px; }
.legal ul, .legal ol { margin: 0 0 16px 22px; }
.legal ul { list-style: disc; }
.legal ol { list-style: decimal; }
.legal a { color: var(--brand-500); font-weight: 600; }
.legal a:hover { text-decoration: underline; }
.legal strong { color: var(--ink-900); font-weight: 700; }
.legal hr { margin: 34px 0; }
.legal-note {
  background: rgba(226, 89, 52, 0.07);
  border: 1px solid var(--border-brand);
  border-left: 4px solid var(--brand-500);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
  margin: 26px 0;
}
.legal-note p:last-child { margin-bottom: 0; }

/* ===== Responsive base ===== */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .nav-links {
    display: none;
    position: fixed;
    top: 70px; left: 16px; right: 16px;
    flex-direction: column;
    align-items: stretch;
    padding: 22px;
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-lg);
    gap: 16px;
  }
  .nav-links.open { display: flex; }
  .nav-toggle { display: flex; }
  .nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
  .nav-cta { width: 100%; justify-content: center; padding: 14px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .legal { padding: 112px 0 64px; }
}

@media (max-width: 420px) {
  .container { padding: 0 16px; }
  .nav-logo { font-size: 1.16rem; gap: 9px; }
  .nav-logo img { width: 34px; height: 34px; border-radius: 10px; }
  .display { font-size: 2.3rem; }
  .section-intro { margin-bottom: 40px; }
  .section-intro h2 { font-size: 1.72rem; }
  .section-intro p { font-size: 0.98rem; }
  .btn { padding: 14px 24px; font-size: 0.94rem; }
}

@media (min-width: 1600px) { :root { --container: 1300px; } }
@media (min-width: 1920px) { :root { --container: 1400px; } body { font-size: 17px; } }