/* ====================================================================
   DogCare Landing Page - design system
   Fork of the portfolio landing-page template.
   Section grammar and script.js are inherited unchanged; only palette,
   type face, words and images differ.

   TOKENS COME FROM THE SHIPPED APP (src/theme/tokens.source.json):
     primary      #F58B44   -> --brand-400 (graphics only on white)
     primaryDeep  #A8480B   -> --brand-600 (the text-safe accent)
     brown        #673A1D   -> --brand-900
     primarySoft  #FCDBC5   -> --brand-200
     primaryTint  #FEF1E7   -> --brand-100
     secondary    #4A38B0   -> --warm-700 (second accent, secondaryDeep)
     ink #101828, textSecondary #475467, textMuted #5F6783,
     border #E4E7EC, danger #B42318, ok #137A3B
   DERIVED (not app tokens): --brand-50, --brand-300, --brand-500,
   --brand-700/800 and --deep-900, darker/lighter steps of the same orange.

   Measured on white:
     #a8480b  5.84:1  the app accent - holds white text AND reads as ink
     #8a3a08  7.81:1  text-safe step for small text on tinted surfaces
     #673a1d  9.55:1  headings, store buttons
     #3d2210 14.64:1  CTA card floor
     #e0702a  3.22:1  large text / graphics only
     #f58b44  2.43:1  graphics only
     #4a38b0  8.45:1  warm accent text
   If this palette is re-tinted, re-measure rather than assuming.

   TYPE: Plus Jakarta Sans is the app's own face (src/config/theme.ts
   fonts.plusJakartaSans) and is on Google Fonts. The app ships no serif,
   so headings use the same family at a heavier weight.
   ==================================================================== */

:root {
  /* ===== Brand (the app's orange) ===== */
  --brand-50:  #fff8f3;   /* derived */
  --brand-100: #fef1e7;   /* app token primaryTint */
  --brand-200: #fcdbc5;   /* app token primarySoft */
  --brand-300: #f9b98d;   /* derived */
  --brand-400: #f58b44;
  --brand-500: #e0702a;
  --brand-600: #a8480b;
  --brand-700: #8a3a08;
  --brand-800: #8a3a08;   /* alias: text-safe step on tinted surfaces */
  --brand-900: #673a1d;
  --deep-900:  #3d2210;

  /* Page sweep: soft peach into the app orange. */
  --dawn-pale:  #f9b98d;
  --dawn-mid:   #f58b44;
  --dawn-deep:  #e0702a;
  --dawn-deeper:#a8480b;

  /* Second accent - the app's own secondary violet, which carries text. */
  --warm-700: #4a38b0;

  /* ===== CTA - app orange into its brown, both stops clear of 4.5:1 ===== */
  --cta-from: #a8480b;
  --cta-to:   #8a3a08;
  --cta-from-hover: #8a3a08;
  --cta-to-hover:   #673a1d;

  /* ===== Ink (app tokens) ===== */
  --ink-900: #101828;
  --ink-700: #344054;
  --ink-600: #475467;
  --ink-500: #475467;
  --ink-300: #98a2b3;
  --ink-200: #d0d5dd;
  --ink-100: #f2f4f7;

  /* ===== Status (app tokens) ===== */
  --success: #137a3b;
  --success-dark: #137a3b;
  --error: #b42318;
  --warning: #b54708;

  /* ===== Surfaces ===== */
  --white: #ffffff;
  --canvas: #ffffff;
  --wash: #fffaf6;
  --surface: #ffffff;
  --surface-2: #fef1e7;   /* app token primaryTint */

  /* ===== Semantic ===== */
  --text: var(--ink-900);
  --text-body: var(--ink-500);
  --text-mute: #5f6783;   /* app token textMuted */

  --border: #e4e7ec;      /* app token border */
  --border-strong: #d0d5dd;
  --border-brand: rgba(168, 72, 11, 0.22);

  /* ===== Elevation ===== */
  --shadow-xs: 0 1px 2px rgba(61, 34, 16, 0.05);
  --shadow-sm: 0 1px 2px rgba(61, 34, 16, 0.06), 0 6px 16px -6px rgba(61, 34, 16, 0.09);
  --shadow-md: 0 2px 4px rgba(61, 34, 16, 0.04), 0 14px 34px -12px rgba(61, 34, 16, 0.17);
  --shadow-lg: 0 4px 8px rgba(61, 34, 16, 0.04), 0 30px 60px -22px rgba(61, 34, 16, 0.26);
  --shadow-brand: 0 14px 34px -12px rgba(168, 72, 11, 0.5);
  --shadow-cta: 0 14px 30px -10px rgba(61, 34, 16, 0.38), 0 0 0 4px rgba(168, 72, 11, 0.12);

  /* ===== Radii ===== */
  --radius-btn: 9999px;
  --radius-input: 9999px;
  --radius-sm: 18px;
  --radius: 22px;
  --radius-lg: 30px;
  --radius-xl: 38px;
  --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 {
  /* Plus Jakarta Sans is the app's OWN primary face (src/config/theme.ts), so
     the voice here is the app's, not a substitute. */
  font-family: 'Plus Jakarta 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. Lavender rising top-left, a faint warm settle bottom-right:
   the app icon's own sweep, turned into a page-wide light source. Fixed so
   long scrolls keep the light in one place. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(880px 620px at 78% -10%, rgba(245, 139, 68, 0.34), transparent 62%),
    radial-gradient(760px 560px at -8% 16%, rgba(254, 241, 231, 0.70), transparent 60%),
    radial-gradient(900px 660px at 88% 104%, rgba(168, 72, 11, 0.10), transparent 62%),
    radial-gradient(700px 520px at 12% 92%, rgba(168, 72, 11, 0.07), transparent 60%),
    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-200); color: var(--brand-900); }

/* Visible keyboard focus - never remove without an equivalent replacement */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--brand-800);
  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-900);
  color: var(--white);
  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 =====
   Plus Jakarta Sans is the app's own face. The app ships no serif, so
   headings use the same family at weight 700 and body copy at 400-600. */
h1, h2, h3, h4 {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.14;
  color: var(--text);
}
.display {
  font-size: clamp(2.5rem, 5.4vw, 4.2rem);
  font-weight: 800;
  letter-spacing: -0.024em;
  line-height: 1.02;
}
.accent { color: var(--brand-800); }
/* Warm accent - the app's secondaryDeep, which clears 4.5:1 on white. */
.accent-alt { color: var(--warm-700); }

/* Eyebrow - carries the app icon's sunburst motif */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-800);
  padding: 8px 16px 8px 13px;
  border: 1px solid var(--border-brand);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadow-xs);
  backdrop-filter: blur(10px);
}
.eyebrow svg { width: 15px; height: 15px; flex-shrink: 0; }
.eyebrow.alt {
  color: var(--warm-700);
  border-color: rgba(168, 72, 11, 0.22);
  background: rgba(255, 255, 255, 0.9);
}

.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: 'Plus Jakarta 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 - the app's orange into its own brown. #a8480b is 5.84:1 behind a
   white label and #8a3a08 is 6.86:1, so both stops clear 4.5:1. */
.btn-primary {
  background: linear-gradient(160deg, var(--cta-from) 0%, var(--cta-to) 100%);
  color: var(--white);
  border-color: var(--cta-to);
  box-shadow: var(--shadow-cta), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.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(61, 34, 16, 0.5), 0 0 0 5px rgba(168, 72, 11, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.26);
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: rgba(255, 255, 255, 0.9);
  color: var(--brand-900);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-xs);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  border-color: var(--brand-500);
  color: var(--brand-800);
  background: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.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(--brand-900);
  border: 1px solid var(--brand-900);
  border-radius: var(--radius-btn);
  color: var(--white);
  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(61, 34, 16, 0.6);
}
.store-btn:hover { background: var(--brand-800); transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(61, 34, 16, 0.65); }
.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: var(--white);
  color: var(--ink-500);
  border: 1px dashed var(--border-strong);
  box-shadow: none;
  cursor: default;
}
.store-btn.is-pending:hover { transform: none; background: var(--white); box-shadow: none; }
.store-btn.is-pending svg { opacity: 0.55; }
.store-btn.is-pending .store-btn-text strong { color: var(--ink-700); }
.store-pending-tag {
  margin-left: 4px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-800);
  background: var(--brand-50);
  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(255, 255, 255, 0.93);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--border);
  box-shadow: 0 6px 24px -18px rgba(61, 34, 16, 0.5);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.nav-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 800;
  font-size: 1.32rem;
  letter-spacing: -0.012em;
  color: var(--brand-900);
}
.nav-logo img {
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  background: var(--white);
}
.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-800); }
.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(--white); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav-toggle span {
  width: 22px; height: 2px;
  background: var(--brand-900);
  border-radius: 2px;
  transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}

/* ===== Halo motif =====
   The app icon is a dog in profile against a large soft disc of light, and
   this page's signature device is a peach halo behind the hero image.
   The class names (sunburst, horizon) are kept so the ported section CSS
   reads unchanged. The rays are drawn with repeating-conic-gradient rather
   than 24 elements, masked to a ring so the image sits inside the halo
   rather than behind a solid disc. */
.sunburst {
  position: absolute;
  left: 50%; top: 50%;
  width: 132%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(168, 72, 11, 0.30) 0deg 2.1deg,
    transparent 1.6deg 8deg
  );
  -webkit-mask-image: radial-gradient(circle, transparent 33%, #000 42%, #000 62%, transparent 78%);
          mask-image: radial-gradient(circle, transparent 33%, #000 42%, #000 62%, transparent 78%);
  animation: sunTurn 90s linear infinite;
}
@keyframes sunTurn {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* A thin line the hero image sits on, like the floor under the dog in the
   icon. Masked hollow in the middle so it does not run straight through
   the image and read as a stray rule. */
.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-400) 20%, var(--brand-500) 50%, var(--brand-400) 80%, transparent);
  border-radius: 2px;
  opacity: 0.7;
  -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%);
}

/* ===== Screen frame (unused on this page) =====
   Kept from the template so a fork that has real screen captures can use
   it. DogCare's page shows photos from the app's own artwork instead, so it
   never invents a device around them. */
.phone-frame {
  position: relative;
  border-radius: 42px 42px 8px 8px;
  padding: 7px 7px 0;
  background: linear-gradient(160deg, #fcfbff 0%, #fef1e7 46%, #f9b98d 100%);
  box-shadow:
    0 2px 4px rgba(61, 34, 16, 0.07),
    0 34px 64px -26px rgba(61, 34, 16, 0.38),
    0 0 0 1px rgba(61, 34, 16, 0.05);
  -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(--white);
}

/* ===== Framed photo panels =====
   Photos and artwork from inside the app render bare with a hairline and a
   soft shadow, rather than inside a made-up device bezel. */
.panel-shot {
  position: relative;
  width: min(420px, 92%);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.panel-shot img { width: 100%; display: block; }

/* ===== Footer ===== */
.footer {
  padding: 74px 0 30px;
  background: var(--white);
  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: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--brand-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-800); }
.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-800); 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.1rem, 4vw, 2.9rem);
  margin-bottom: 12px;
  letter-spacing: -0.022em;
}
.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-800); 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: var(--brand-50);
  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(--white);
    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; } }