/* PhotoSwipe Pro template — extracted stylesheet */
    /* ──────────────────────────────────────────────────────────
       Satoshi — local @font-face (Light → Black + italics)
       ────────────────────────────────────────────────────────── */
    @font-face {
      font-family: 'Satoshi';
      src: url('../fonts/Satoshi-Light.otf') format('opentype');
      font-weight: 300; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: 'Satoshi';
      src: url('../fonts/Satoshi-LightItalic.otf') format('opentype');
      font-weight: 300; font-style: italic; font-display: swap;
    }
    @font-face {
      font-family: 'Satoshi';
      src: url('../fonts/Satoshi-Regular.otf') format('opentype');
      font-weight: 400; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: 'Satoshi';
      src: url('../fonts/Satoshi-Italic.otf') format('opentype');
      font-weight: 400; font-style: italic; font-display: swap;
    }
    @font-face {
      font-family: 'Satoshi';
      src: url('../fonts/Satoshi-Medium.otf') format('opentype');
      font-weight: 500; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: 'Satoshi';
      src: url('../fonts/Satoshi-MediumItalic.otf') format('opentype');
      font-weight: 500; font-style: italic; font-display: swap;
    }
    @font-face {
      font-family: 'Satoshi';
      src: url('../fonts/Satoshi-Bold.otf') format('opentype');
      font-weight: 700; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: 'Satoshi';
      src: url('../fonts/Satoshi-BoldItalic.otf') format('opentype');
      font-weight: 700; font-style: italic; font-display: swap;
    }
    @font-face {
      font-family: 'Satoshi';
      src: url('../fonts/Satoshi-Black.otf') format('opentype');
      font-weight: 900; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: 'Satoshi';
      src: url('../fonts/Satoshi-BlackItalic.otf') format('opentype');
      font-weight: 900; font-style: italic; font-display: swap;
    }

    /* ──────────────────────────────────────────────────────────
       Tokens
       ────────────────────────────────────────────────────────── */
    :root {
      /* --- Theme-aware tokens (flip in dark mode) --- */
      --text: #231212;
      --bg: #ffffff;
      --surface: #f4f4f4;
      --lavender: #e3e2f7;

      --text-70: rgba(35, 18, 18, 0.70);
      --text-50: rgba(35, 18, 18, 0.50);
      --text-20: rgba(35, 18, 18, 0.20);
      --text-08: rgba(35, 18, 18, 0.08);
      --text-04: rgba(35, 18, 18, 0.04);

      --lavender-2: #ecebfb;
      --lavender-3: #d6d4f1;

      /* --- Brand-only constants (NEVER change with theme) --- */
      --brand-dark: #231212;   /* for showcase bg, primary buttons, logo mark */
      --brand-light: #ffffff;  /* for showcase text, button text on brand-dark */

      /* --- Legacy aliases (keep existing CSS working) --- */
      --dark: var(--text);
      --white: var(--bg);
      --gray: var(--surface);
      --dark-70: var(--text-70);
      --dark-50: var(--text-50);
      --dark-20: var(--text-20);
      --dark-08: var(--text-08);
      --dark-04: var(--text-04);

      /* --- Shape, shadow, motion --- */
      --r-xs: 8px;
      --r-sm: 12px;
      --r-md: 20px;
      --r-lg: 28px;
      --r-xl: 40px;

      --shadow-sm: 0 1px 2px rgba(35,18,18,0.06);
      --shadow-md: 0 8px 24px rgba(35,18,18,0.08);
      --shadow-lg: 0 24px 60px rgba(35,18,18,0.12);
      --shadow-phone: 0 30px 80px rgba(35,18,18,0.18), 0 8px 20px rgba(35,18,18,0.10);

      --container: 1200px;

      --ease: cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* Dark theme — only the theme-aware tokens flip. Brand colors stay. */
    [data-theme="dark"] {
      --text: #f5f0eb;
      --bg: #141111;
      --surface: #1f1a1a;
      --lavender: #2d2549;
      --lavender-2: #3a3258;
      --lavender-3: #4a4170;

      --text-70: rgba(245, 240, 235, 0.72);
      --text-50: rgba(245, 240, 235, 0.52);
      --text-20: rgba(245, 240, 235, 0.22);
      --text-08: rgba(245, 240, 235, 0.10);
      --text-04: rgba(245, 240, 235, 0.05);
    }

    /* ──────────────────────────────────────────────────────────
       Reset
       ────────────────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
    body {
      margin: 0;
      font-family: 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
      font-weight: 400;
      color: var(--dark);
      background: var(--white);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
    }
    img, svg { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
    h1, h2, h3, h4 { font-weight: 900; line-height: 0.95; letter-spacing: -0.02em; }

    /* ──────────────────────────────────────────────────────────
       Layout helpers
       ────────────────────────────────────────────────────────── */
    .container {
      width: 100%;
      max-width: var(--container);
      margin-inline: auto;
      padding-inline: clamp(20px, 4vw, 56px);
    }

    /* ──────────────────────────────────────────────────────────
       Header
       ────────────────────────────────────────────────────────── */
    .header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255, 255, 255, 0.78);
      backdrop-filter: saturate(180%) blur(16px);
      -webkit-backdrop-filter: saturate(180%) blur(16px);
      border-bottom: 1px solid transparent;
      transition: background-color .3s var(--ease), border-color .25s var(--ease);
    }
    [data-theme="dark"] .header {
      background: rgba(20, 17, 17, 0.78);
    }
    .header.is-scrolled { border-bottom-color: var(--text-08); }
    .header__inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding-block: 18px;
    }
    .logo {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-weight: 900;
      font-size: 18px;
      letter-spacing: -0.01em;
      color: var(--text);
    }
    .logo__mark {
      width: 32px; height: 32px;
      border-radius: 10px;
      background: var(--brand-dark);
      display: grid; place-items: center;
      position: relative;
    }
    .logo__mark::before,
    .logo__mark::after {
      content: "";
      position: absolute;
      inset: 6px;
      border-radius: 4px;
      border: 2px solid var(--lavender);
    }
    .logo__mark::after {
      inset: 11px;
      border-color: var(--brand-light);
    }
    .nav {
      display: flex;
      gap: clamp(20px, 3vw, 44px);
    }
    .nav a {
      font-size: 15px;
      font-weight: 500;
      color: var(--text-70);
      transition: color .2s var(--ease);
    }
    .nav a:hover { color: var(--text); }

    .header__actions {
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    /* Theme toggle — sun icon visible in dark mode, moon in light mode */
    .theme-toggle {
      width: 40px; height: 40px;
      border-radius: 999px;
      border: 1.5px solid var(--text-20);
      background: transparent;
      color: var(--text);
      display: grid; place-items: center;
      cursor: pointer;
      transition: transform .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
    }
    .theme-toggle:hover {
      background: var(--text);
      color: var(--bg);
      border-color: var(--text);
      transform: translateY(-1px);
    }
    .theme-toggle__icon { width: 18px; height: 18px; }
    .theme-toggle__icon--sun  { display: none; }
    .theme-toggle__icon--moon { display: block; }
    [data-theme="dark"] .theme-toggle__icon--sun  { display: block; }
    [data-theme="dark"] .theme-toggle__icon--moon { display: none; }

    .cta-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 22px;
      border-radius: 999px;
      border: 1.5px solid var(--text);
      background: transparent;
      color: var(--text);
      font-weight: 500;
      font-size: 15px;
      transition: transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
    }
    .cta-pill:hover {
      background: var(--text);
      color: var(--bg);
      transform: translateY(-1px);
    }
    .cta-pill svg { width: 14px; height: 14px; }

    .nav-toggle {
      display: none;
      width: 44px; height: 44px;
      border-radius: 12px;
      border: 1px solid var(--text-08);
      color: var(--text);
      align-items: center; justify-content: center;
    }
    .nav-toggle svg { width: 22px; height: 22px; }

    /* ──────────────────────────────────────────────────────────
       Hero
       ────────────────────────────────────────────────────────── */
    .hero {
      position: relative;
      padding-top: clamp(40px, 6vw, 72px);
      padding-bottom: clamp(80px, 10vw, 140px);
      overflow: hidden;
    }

    .hero__grid {
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      align-items: start;
      gap: clamp(24px, 4vw, 56px);
    }

    .hero__title {
      font-size: clamp(64px, 13vw, 184px);
      font-weight: 900;
      color: var(--dark);
      margin: 0 0 clamp(24px, 4vw, 48px);
    }
    .hero__title .italic {
      display: block;
      font-weight: 300;
      font-style: italic;
      letter-spacing: -0.04em;
      line-height: 0.9;
    }

    /* lavender card with description */
    .hero__card {
      position: relative;
      background: var(--lavender);
      border-radius: var(--r-xl);
      padding: clamp(28px, 4vw, 48px);
      overflow: hidden;
    }
    .hero__card p {
      font-size: clamp(15px, 1.3vw, 17px);
      line-height: 1.55;
      color: var(--dark);
      max-width: 460px;
      margin: 0 0 clamp(20px, 3vw, 32px);
    }

    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 16px 32px;
      border-radius: 999px;
      background: var(--brand-dark);
      color: var(--brand-light);
      font-weight: 500;
      font-size: 15px;
      letter-spacing: -0.005em;
      transition: transform .2s var(--ease), box-shadow .2s var(--ease), opacity .2s var(--ease);
      box-shadow: 0 6px 16px rgba(35,18,18,0.18);
    }
    .btn-primary:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: 0 10px 24px rgba(35,18,18,0.22);
    }
    .btn-primary:disabled,
    .btn-primary[aria-disabled="true"] {
      cursor: not-allowed;
      opacity: 0.45;
      box-shadow: none;
      transform: none;
    }
    .btn-primary svg { width: 14px; height: 14px; transition: transform .2s var(--ease); }
    .btn-primary:hover:not(:disabled) svg { transform: translateX(3px); }

    .store-row {
      justify-content: center;
      display: flex;
      align-items: center;
      gap: clamp(16px, 2vw, 22px);
      flex-wrap: wrap;
    }
    .store-row__label {
      font-size: 34px;
      font-weight: 500;
      color: var(--dark-70);
      line-height: 1.4;
    }
    .store-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 11px 18px;
      border-radius: 14px;
      background: var(--brand-dark);
      color: var(--brand-light);
      transition: transform .2s var(--ease), opacity .2s var(--ease);
    }
    .store-btn:hover { transform: translateY(-2px); }
    .store-btn--ghost {
      background: transparent;
      color: var(--text);
      border: 1.5px solid var(--text-20);
    }
    .store-btn--ghost:hover { background: var(--text-04); }
    .store-btn svg { width: 24px; height: 24px; flex-shrink: 0; }
    .store-btn__txt {
      display: flex; flex-direction: column; line-height: 1.05;
    }
    .store-btn__small { font-size: 10px; opacity: 0.85; }
    .store-btn__big   { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }

    /* decorative swirl */
    .hero__swirl {
      position: absolute;
      pointer-events: none;
      inset: auto -8% -22% auto;
      width: 80%;
      max-width: 720px;
      opacity: 0.85;
      z-index: 0;
    }
    .hero__card > * { position: relative; z-index: 1; }

    /* phone mockup column */
    .hero__phone {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      margin-top: -20px;
    }

    /* ──────────────────────────────────────────────────────────
       App screenshot (static image)
       ────────────────────────────────────────────────────────── */
    .app-screenshot {
      display: block;
      width: clamp(240px, 28vw, 320px);
      height: auto;
      max-width: 100%;
      filter: drop-shadow(0 30px 60px rgba(35,18,18,0.18))
              drop-shadow(0 8px 16px rgba(35,18,18,0.08));
      z-index: 2;
    }
    .showcase__phone .app-screenshot {
      width: clamp(220px, 24vw, 280px);
    }

    /* ──────────────────────────────────────────────────────────
       Section primitives
       ────────────────────────────────────────────────────────── */
    section { position: relative; }
    .section-pad { padding-block: clamp(72px, 10vw, 128px); }
    .eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 6px 14px;
      background: var(--gray);
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--dark-70);
    }
    .eyebrow::before {
      content: ""; width: 6px; height: 6px;
      border-radius: 999px; background: var(--dark);
    }
    .section-title {
      font-size: clamp(36px, 6vw, 72px);
      font-weight: 900;
      letter-spacing: -0.03em;
      line-height: 1;
      margin: 18px 0 12px;
    }
    .section-title .italic {
      font-weight: 300; font-style: italic;
      letter-spacing: -0.04em;
    }
    .section-lead {
      max-width: 560px;
      font-size: clamp(15px, 1.2vw, 17px);
      color: var(--dark-70);
      line-height: 1.6;
    }

    /* ──────────────────────────────────────────────────────────
       Features
       ────────────────────────────────────────────────────────── */
    .features {
      background: var(--gray);
      border-radius: var(--r-xl);
    }
    .features__head {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
      align-items: end;
      margin-bottom: clamp(36px, 5vw, 56px);
    }
    .features__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .feature-card {
      background: var(--white);
      border-radius: var(--r-lg);
      padding: 32px;
      transition: transform .3s var(--ease), box-shadow .3s var(--ease);
      display: flex; flex-direction: column;
      min-height: 280px;
    }
    .feature-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
    }
    .feature-card__icon {
      width: 52px; height: 52px;
      border-radius: 16px;
      background: var(--lavender);
      display: grid; place-items: center;
      margin-bottom: 24px;
    }
    .feature-card__icon svg { width: 26px; height: 26px; }
    .feature-card h3 {
      font-size: 22px;
      font-weight: 900;
      letter-spacing: -0.01em;
      margin-bottom: 10px;
    }
    .feature-card p {
      font-size: 15px;
      color: var(--dark-70);
      line-height: 1.55;
    }
    .feature-card__more {
      margin-top: auto;
      padding-top: 18px;
      font-size: 14px;
      font-weight: 700;
      color: var(--dark);
      display: inline-flex; align-items: center; gap: 6px;
    }
    .feature-card__more svg { width: 12px; height: 12px; transition: transform .2s var(--ease); }
    .feature-card:hover .feature-card__more svg { transform: translateX(4px); }

    /* ──────────────────────────────────────────────────────────
       How it works — 3 steps
       ────────────────────────────────────────────────────────── */
    .how {
      background: var(--white);
    }
    .how__head { text-align: center; margin-bottom: clamp(36px, 5vw, 56px); }
    .how__head .section-lead { margin-inline: auto; }
    .how__steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      position: relative;
    }
    .step {
      background: var(--gray);
      border-radius: var(--r-lg);
      padding: 32px;
      position: relative;
    }
    .step__num {
      display: inline-block;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: var(--dark-50);
      margin-bottom: 12px;
    }
    .step h3 {
      font-size: 24px;
      font-weight: 900;
      letter-spacing: -0.01em;
      margin-bottom: 8px;
    }
    .step p {
      font-size: 15px;
      color: var(--dark-70);
      line-height: 1.55;
    }
    .step__visual {
      margin-top: 24px;
      height: 150px;
      border-radius: var(--r-md);
      background: var(--white);
      display: grid; place-items: center;
      overflow: hidden;
      position: relative;
    }

    /* tiny swipe demo */
    .mini-swipe {
      width: 100%; height: 100%;
      padding: 16px;
      position: relative;
    }
    .mini-card {
      position: absolute;
      width: 60%; aspect-ratio: 1 / 1.3;
      border-radius: 14px;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      box-shadow: 0 6px 14px rgba(35,18,18,0.12);
    }
    .mini-card--a {
      background: linear-gradient(160deg, #ff9a6e, #6a4c93);
      transform: translate(-72%, -50%) rotate(-6deg);
    }
    .mini-card--b {
      background: linear-gradient(180deg, #88c8ff, #1b3b6f);
      transform: translate(-28%, -50%) rotate(4deg);
      z-index: 2;
    }
    .mini-swipe .mini-card--b { animation: swipeHint 2.4s ease-in-out infinite; }
    @keyframes swipeHint {
      0%, 100% { transform: translate(-28%, -50%) rotate(4deg); }
      50%      { transform: translate(-50%, -50%) rotate(0deg); }
    }

    .mini-folders { display: flex; gap: 8px; }
    .mini-folder {
      width: 36px; height: 36px;
      border-radius: 10px;
      background: var(--lavender);
      display: grid; place-items: center;
    }
    .mini-folder svg { width: 18px; height: 18px; }
    .mini-lock {
      width: 60px; height: 60px;
      border-radius: 50%;
      background: var(--brand-dark);
      display: grid; place-items: center;
    }
    .mini-lock svg { width: 28px; height: 28px; color: var(--brand-light); }

    /* ──────────────────────────────────────────────────────────
       Showcase — phone + text (intentionally dark in both themes)
       ────────────────────────────────────────────────────────── */
    .showcase {
      background: var(--brand-dark);
      color: var(--brand-light);
      border-radius: var(--r-xl);
      overflow: hidden;
    }
    .showcase__grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: center;
      padding: clamp(40px, 6vw, 80px);
    }
    .showcase .eyebrow {
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.7);
    }
    .showcase .eyebrow::before { background: var(--lavender); }
    .showcase h2 {
      color: var(--white);
      margin-block: 18px 14px;
    }
    .showcase h2 .italic { color: var(--lavender); }
    .showcase p {
      color: rgba(255,255,255,0.7);
      max-width: 460px;
      font-size: 16px;
      line-height: 1.6;
    }
    .showcase__list {
      list-style: none;
      margin: 28px 0 0;
      padding: 0;
      display: grid; gap: 14px;
    }
    .showcase__list li {
      display: flex; align-items: flex-start; gap: 12px;
      font-size: 15px;
      color: rgba(255,255,255,0.85);
    }
    .showcase__list svg {
      width: 22px; height: 22px;
      flex-shrink: 0;
      color: var(--lavender);
    }
    .showcase__phone {
      display: flex; justify-content: center;
    }

    /* ──────────────────────────────────────────────────────────
       Stats
       ────────────────────────────────────────────────────────── */
    .stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      padding-block: clamp(48px, 6vw, 72px);
    }
    .stat {
      background: var(--gray);
      border-radius: var(--r-lg);
      padding: 28px 24px;
      text-align: left;
    }
    .stat__num {
      font-size: clamp(32px, 4vw, 44px);
      font-weight: 900;
      letter-spacing: -0.03em;
      line-height: 1;
    }
    .stat__label {
      margin-top: 8px;
      font-size: 14px;
      color: var(--dark-70);
    }

    /* ──────────────────────────────────────────────────────────
       CTA banner
       ────────────────────────────────────────────────────────── */
    .cta-banner {
      background: var(--lavender);
      border-radius: var(--r-xl);
      padding: clamp(48px, 7vw, 96px) clamp(28px, 5vw, 80px);
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .cta-banner h2 {
      font-size: clamp(40px, 7vw, 88px);
      margin-bottom: 14px;
    }
    .cta-banner h2 .italic {
      font-weight: 300; font-style: italic;
      letter-spacing: -0.04em;
    }
    .cta-banner p {
      max-width: 520px;
      margin: 0 auto 32px;
      font-size: clamp(15px, 1.2vw, 17px);
      color: var(--dark-70);
      line-height: 1.6;
    }
    .cta-banner__actions {
      display: inline-flex; gap: 12px; flex-wrap: wrap;
      justify-content: center;
    }
    .cta-banner__swirl {
      position: absolute;
      inset: auto -10% -40% auto;
      width: 70%;
      max-width: 600px;
      opacity: 0.5;
      pointer-events: none;
    }

    /* ──────────────────────────────────────────────────────────
       Footer
       ────────────────────────────────────────────────────────── */
    .motilogo {
      border-radius: 22.37%;
    object-fit: cover;
    }
    footer {
      padding: clamp(48px, 6vw, 72px) 0 32px;
      border-top: 1px solid var(--dark-08);
    }
    .footer__grid {
      display: grid;
      grid-template-columns: 2fr 153px;
      gap: 32px;
      margin-bottom: 48px;
    }
    .footer__brand p {
      font-size: 14px;
      color: var(--dark-70);
      max-width: 280px;
      margin-top: 12px;
      line-height: 1.6;
    }
    .footer__col h4 {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--dark-50);
      margin-bottom: 14px;
    }
    .footer__col ul {
      list-style: none; padding: 0; margin: 0;
      display: grid; gap: 10px;
    }
    .footer__col a {
      font-size: 15px;
      font-weight: 500;
      color: var(--dark);
      transition: color .2s var(--ease);
    }
    .footer__col a:hover { color: var(--dark-50); }
    .footer__bottom {
      display: flex; justify-content: space-between; align-items: center;
      padding-top: 24px;
      border-top: 1px solid var(--dark-08);
      font-size: 13px;
      color: var(--dark-50);
      flex-wrap: wrap;
      gap: 12px;
    }
    .footer__socials { display: flex; gap: 10px; }
    .footer__socials a {
      width: 36px; height: 36px;
      border-radius: 10px;
      border: 1px solid var(--dark-08);
      display: grid; place-items: center;
      transition: background .2s var(--ease), color .2s var(--ease);
    }
    .footer__socials a:hover { background: var(--brand-dark); color: var(--brand-light); }
    .footer__socials svg { width: 16px; height: 16px; }

    /* ──────────────────────────────────────────────────────────
       Reveal-on-scroll (subtle, content-only)
       ────────────────────────────────────────────────────────── */
    .reveal {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity .8s var(--ease), transform .8s var(--ease);
    }
    .reveal.is-visible {
      opacity: 1;
      transform: none;
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.001s !important;
        transition-duration: 0.001s !important;
      }
      .reveal { opacity: 1; transform: none; }
    }

    /* ──────────────────────────────────────────────────────────
       Responsive
       ────────────────────────────────────────────────────────── */
    @media (max-width: 1024px) {
      .hero__grid { grid-template-columns: 1fr; }
      .hero__phone { margin-top: 24px; }
      .features__head { grid-template-columns: 1fr; align-items: start; }
      .features__grid { grid-template-columns: repeat(2, 1fr); }
      .features__grid > :nth-child(3) { grid-column: span 2; }
      .how__steps { grid-template-columns: repeat(2, 1fr); }
      .how__steps > :nth-child(3) { grid-column: span 2; }
      .showcase__grid { grid-template-columns: 1fr; padding: 48px; }
      .showcase__phone { order: -1; }
      .stats { grid-template-columns: repeat(2, 1fr); }
      .footer__grid { grid-template-columns: 1.5fr 1fr 1fr; }
      .footer__col:nth-child(4) { grid-column: span 3; }
    }

    @media (max-width: 720px) {
      .nav { display: none; }
      .nav-toggle { display: inline-flex; }
      .header__inner { padding-block: 14px; }
      .cta-pill { padding: 10px 18px; font-size: 14px; }

      /* mobile drawer */
      .nav.is-open {
        display: flex;
        position: absolute;
        top: 100%; left: 16px; right: 16px;
        flex-direction: column;
        gap: 0;
        background: var(--white);
        border-radius: var(--r-lg);
        box-shadow: var(--shadow-lg);
        padding: 8px;
        margin-top: 8px;
      }
      .nav.is-open a {
        padding: 14px 16px;
        border-radius: var(--r-sm);
        font-size: 16px;
      }
      .nav.is-open a:hover { background: var(--gray); }

      .hero__title { font-size: clamp(54px, 18vw, 96px); }
      .hero__card { padding: 24px; }
      .store-row__label { font-size: 13px; max-width: 110px; }

      .features__grid, .how__steps { grid-template-columns: 1fr; }
      .features__grid > :nth-child(3), .how__steps > :nth-child(3) { grid-column: auto; }
      .feature-card, .step { padding: 24px; min-height: auto; }

      .stats { grid-template-columns: 1fr 1fr; }

      .footer__grid { grid-template-columns: 1fr 1fr; }
      .footer__col:nth-child(4) { grid-column: span 2; }
      .footer__bottom { justify-content: flex-start; }

      .app-screenshot { width: 240px; }
    }

    @media (max-width: 420px) {
      .stats { grid-template-columns: 1fr; }
      .footer__grid { grid-template-columns: 1fr; }
      .footer__col:nth-child(4) { grid-column: auto; }
    }

/* Active nav state (for multi-page template) */
.nav a.is-active {
  color: var(--dark);
  font-weight: 700;
}

    @media screen and (max-width: 788px) {
      .logotexty {
        display: none !important;
      }
    }