/* ============================================
   goes faster - Modern Stylesheet
   ============================================ */

/* --- Self-hosted Lexend (variable font, weights 300–700) --- */
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/lexend-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/lexend-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --color-primary: #64A03C;
  --color-primary-light: #7ab852;
  --color-primary-dark: #4e7d2e;
  --color-primary-glow: rgba(100, 160, 60, 0.15);
  --color-dark: #0f1210;
  --color-dark-soft: #161b17;
  --color-gray-900: #181d19;
  --color-gray-800: #252b26;
  /* Borders and surfaces only. As text on --color-dark this is 1.81:1,
     far under the 4.5:1 AA floor — it is legible solely on a light
     background, which is why .store-badge-label may still use it. */
  --color-gray-700: #3a4239;
  --color-gray-400: #9ca89b;
  --color-gray-300: #c8d0c6;
  --color-gray-100: #f0f3ef;
  --color-white: #ffffff;
  --gradient-brand: linear-gradient(135deg, #64A03C, #8cc63f);
  --gradient-hero: linear-gradient(160deg, #0f1210 0%, #141f16 40%, #1a2818 70%, #0f1210 100%);
  --font-heading: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.16);
  --shadow-glow: 0 0 60px rgba(100, 160, 60, 0.15);
  --max-width: 1200px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
  scroll-behavior: smooth;
  /* The nav is position:fixed (~68px unscrolled, ~56px scrolled), so anchor
     jumps — the landing page's /#features and /#download, the legal pages'
     skip-link, and every TOC link inside the iubenda-embedded documents —
     would otherwise land their target underneath it. */
  scroll-padding-top: 88px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-gray-300);
  background-color: var(--color-dark);
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-primary-light);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--color-white);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-white);
}

/* --- Utility --- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.gradient-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- Navigation --- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 20px 0;
  transition: all var(--transition);
}

.nav.scrolled {
  background: rgba(15, 18, 16, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* The app-icon mark, so the site and the store listing read as one product.
   alt="" on purpose — the wordmark next to it already names the link. */
.nav-logo-mark {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}

.nav-links a {
  color: var(--color-gray-400);
  font-size: 0.9rem;
  font-weight: 500;
  transition: color var(--transition);
}

.nav-links a:hover {
  color: var(--color-white);
}

.nav-links .btn-nav {
  padding: 8px 20px;
  border-radius: 100px;
  background: var(--gradient-brand);
  color: var(--color-dark);
  font-weight: 600;
  font-size: 0.85rem;
}

.nav-links .btn-nav:hover {
  opacity: 0.9;
  color: var(--color-dark);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-white);
  margin: 5px 0;
  transition: var(--transition);
  border-radius: 2px;
}

/* --- Hero Section --- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--gradient-hero);
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -20%;
  width: 80%;
  height: 80%;
  background: radial-gradient(circle, rgba(100, 160, 60, 0.06) 0%, transparent 70%);
  animation: float 20s ease-in-out infinite;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: -30%;
  right: -20%;
  width: 70%;
  height: 70%;
  background: radial-gradient(circle, rgba(140, 198, 63, 0.04) 0%, transparent 70%);
  animation: float 25s ease-in-out infinite reverse;
}

@keyframes float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(30px, -30px) rotate(5deg); }
  66% { transform: translate(-20px, 20px) rotate(-3deg); }
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: 0 24px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 100px;
  background: rgba(100, 160, 60, 0.1);
  border: 1px solid rgba(100, 160, 60, 0.2);
  color: var(--color-primary-light);
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 32px;
  letter-spacing: 0.02em;
}

.hero-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.hero h1 {
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
  line-height: 1.05;
}

.hero p {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--color-gray-400);
  max-width: 580px;
  margin: 0 auto 20px;
  line-height: 1.6;
  font-weight: 400;
}

.hero-platforms {
  font-size: 0.85rem;
  color: var(--color-gray-400);
  margin-bottom: 36px;
  font-weight: 400;
}

.hero-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  border: none;
  transition: all var(--transition);
  text-decoration: none;
  font-family: var(--font-body);
}

.btn-primary {
  background: var(--gradient-brand);
  color: var(--color-dark);
  box-shadow: 0 4px 20px rgba(100, 160, 60, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(100, 160, 60, 0.4);
  color: var(--color-dark);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
  color: var(--color-white);
}

.btn-arrow {
  transition: transform var(--transition);
}

.btn:hover .btn-arrow {
  transform: translateX(3px);
}

/* --- Sections --- */
.section {
  padding: 120px 0;
  position: relative;
}

.section-alt {
  background: rgba(255, 255, 255, 0.015);
}

.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 80px;
}

.section-label {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary-light);
  margin-bottom: 16px;
}

.section-header h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.section-header p {
  font-size: 1.05rem;
  color: var(--color-gray-400);
}

/* --- Steps (How It Works) --- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  counter-reset: step;
}

.step {
  padding: 40px 32px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all var(--transition);
  position: relative;
}

.step:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-4px);
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(100, 160, 60, 0.1);
  color: var(--color-primary-light);
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 24px;
}

.step h3 {
  font-size: 1.2rem;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

.step p {
  color: var(--color-gray-400);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* --- Feature Cards (grid) --- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.feature-card {
  padding: 36px 28px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gradient-brand);
  opacity: 0;
  transition: opacity var(--transition);
}

.feature-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-4px);
}

.feature-card:hover::before {
  opacity: 1;
}

.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: rgba(100, 160, 60, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--color-primary-light);
}

.feature-icon svg {
  width: 24px;
  height: 24px;
}

.feature-card h3 {
  font-size: 1.1rem;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.feature-card p {
  color: var(--color-gray-400);
  font-size: 0.9rem;
  line-height: 1.7;
}

/* --- Pricing Section --- */
.pricing-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 820px;
  margin: 0 auto;
}

.pricing-card {
  padding: 44px 36px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all var(--transition);
}

.pricing-card:hover {
  border-color: rgba(255, 255, 255, 0.1);
}

.pricing-card.featured {
  border-color: rgba(100, 160, 60, 0.3);
  background: rgba(100, 160, 60, 0.04);
  position: relative;
}

.pricing-card-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 100px;
  background: var(--gradient-brand);
  color: var(--color-dark);
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 20px;
}

.pricing-card h3 {
  font-size: 1.4rem;
  margin-bottom: 4px;
}

.pricing-amount {
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}

.pricing-period {
  color: var(--color-gray-400);
  font-size: 0.9rem;
  font-weight: 400;
}

.pricing-description {
  color: var(--color-gray-400);
  font-size: 0.85rem;
  margin-bottom: 28px;
  line-height: 1.6;
}

.pricing-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pricing-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--color-gray-300);
  font-size: 0.9rem;
  line-height: 1.5;
}

.pricing-list .check {
  color: var(--color-primary-light);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.pricing-note {
  text-align: center;
  margin-top: 40px;
  padding: 24px 32px;
  border-radius: var(--radius-md);
  background: rgba(100, 160, 60, 0.06);
  border: 1px solid rgba(100, 160, 60, 0.12);
}

.pricing-note p {
  color: var(--color-gray-300);
  font-size: 0.9rem;
  line-height: 1.7;
}

/* --- About Section --- */
.about-content {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.about-content p {
  font-size: 1.1rem;
  color: var(--color-gray-400);
  line-height: 1.8;
  margin-bottom: 20px;
}

.about-content p:last-child {
  margin-bottom: 0;
}

/* --- CTA Section --- */
.cta-section {
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}

.cta-card {
  position: relative;
  padding: 80px 60px;
  border-radius: var(--radius-xl);
  background: var(--gradient-brand);
  text-align: center;
  overflow: hidden;
}

.cta-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 60%;
  height: 200%;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  transform: rotate(-15deg);
}

/* Same relative+z-index treatment as the other .cta-card children, so it
   stacks above the decorative ::before blob. */
.cta-logo {
  width: 76px;
  height: 76px;
  border-radius: var(--radius-md);
  margin: 0 auto 28px;
  position: relative;
  z-index: 1;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

.cta-card h2 {
  color: var(--color-dark);
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.cta-card p {
  font-size: 1.1rem;
  color: rgba(15, 18, 16, 0.85);
  max-width: 500px;
  margin: 0 auto 36px;
  position: relative;
  z-index: 1;
}

.cta-card .btn {
  position: relative;
  z-index: 1;
  background: var(--color-white);
  color: var(--color-primary-dark);
  font-weight: 700;
}

.cta-card .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  color: var(--color-primary-dark);
}

.cta-stores {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  font-size: 0.85rem;
  color: rgba(15, 18, 16, 0.85);
}

/* --- Store Badges --- */
.store-badges {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}

/* Sized against Apple's and Google's own badges, which are ~50-60px tall.
   The label was 0.55rem (8.8px) — too small to read on any display. */
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 15px 30px 15px 22px;
  border-radius: 14px;
  background: var(--color-white);
  color: var(--color-dark);
  text-decoration: none;
  transition: all var(--transition);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.store-badge:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: var(--color-dark);
}

.store-badge svg {
  display: block;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
}

.store-badge-text {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.2;
}

.store-badge-label {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--color-gray-700);
  letter-spacing: 0.02em;
}

.store-badge-store {
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Dark variant for use on gradient backgrounds */
.store-badge-dark {
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--color-white);
}

.store-badge-dark:hover {
  background: rgba(0, 0, 0, 0.65);
  color: var(--color-white);
}

.store-badge-dark .store-badge-label {
  color: rgba(255, 255, 255, 0.75);
}

.store-badge-dark .store-badge-icon path {
  fill: var(--color-white);
}

/* --- Footer --- */
.footer {
  padding: 60px 0 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.footer-logo {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-white);
}

.footer-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
}

.footer-links a {
  color: var(--color-gray-400);
  font-size: 0.85rem;
  transition: color var(--transition);
}

.footer-links a:hover {
  color: var(--color-white);
}

.footer-contact {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-contact a {
  color: var(--color-gray-400);
  font-size: 0.85rem;
}

.footer-bottom {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
}

.footer-bottom p {
  color: var(--color-gray-400);
  font-size: 0.8rem;
  line-height: 1.8;
}

/* --- Animations (scroll reveal) --- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* --- Legal pages: /privacy/, /terms/ (iubenda embeds) --- */
/* iubenda's current embed ("ppRedesign") injects a COMPLETE light-themed
   document — its own panels, cards, tables and footer, with its own CSS. It is
   not the unstyled semantic HTML that navandy.css styles by hand, so do not
   copy that approach here and do NOT add .legal-body typography overrides:
   they fight iubenda's own rules, and the dark page's inherited light-grey
   text colour renders as near-invisible text on their white panels.
   Instead the embed gets its own light surface to live on. */
.legal-header {
  padding: 160px 0 48px;
  background: var(--color-dark-soft);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
}

.legal-header h1 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  margin-bottom: 8px;
}

.legal-header p {
  color: var(--color-gray-400);
}

.legal-section {
  padding: 56px 0 88px;
}

/* The light sheet the iubenda document sits on. overflow:hidden clips their
   full-bleed inner sections to the rounded corners; the explicit colour stops
   the dark page's text colour cascading into anything they leave unstyled. */
.legal-body {
  background: #ffffff;
  color: #1a1a1a;
  border-radius: var(--radius-lg);
  overflow: hidden;
  overflow-wrap: break-word;
}

/* Their own layout supplies the inner gutters at desktop widths; on narrow
   screens it collapses to nearly nothing, so add a little back. */
@media (max-width: 768px) {
  .legal-body {
    padding: 4px;
  }
}

/* Cascade firewall. iubenda's document is <div id="iub-legalDoc"><div
   class="container">…, and three of its class names collide with ours —
   container, btn, cta-section — while its headings and links rely on bare
   h1–h6 / a, which this stylesheet paints white and green for the dark page.
   Unchecked that gives white headings on a white panel and a pill-shaped
   contact button. Neutralise ours here and let iubenda's own CSS win. */
.legal-body .container {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

.legal-body .btn,
.legal-body .cta-section {
  display: revert;
  padding: revert;
  border-radius: revert;
  background: revert;
  box-shadow: none;
  font-weight: revert;
  font-size: revert;
}

.legal-body h1,
.legal-body h2,
.legal-body h3,
.legal-body h4,
.legal-body h5,
.legal-body h6,
.legal-body a {
  color: inherit;
}

/* The fallback link is the only thing in the sheet until iubenda.js swaps it
   for the document, so it has to be legible on white. */
.legal-body > .iubenda-embed {
  display: inline-block;
  padding: 24px;
  color: var(--color-primary-dark);
  text-decoration: underline;
}

.legal-note {
  margin: 32px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.9rem;
  color: var(--color-gray-400);
}

/* Visible only once focused, so keyboard users can jump past the nav. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  left: 0;
  color: var(--color-white);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .section {
    padding: 80px 0;
  }

  .section-header {
    margin-bottom: 48px;
  }

  .features-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .steps {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .pricing-layout {
    grid-template-columns: 1fr;
  }

  .cta-card {
    padding: 48px 24px;
  }

  .cta-section {
    padding: 80px 0;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(15, 18, 16, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column;
    padding: 24px;
    gap: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .nav-links.active {
    display: flex;
  }

  .nav-toggle {
    display: block;
  }
}

@media (max-width: 480px) {
  .section {
    padding: 60px 0;
  }

  .feature-card {
    padding: 28px 24px;
  }

  .step {
    padding: 28px 24px;
  }

  .pricing-card {
    padding: 32px 24px;
  }

  .hero h1 {
    font-size: 2.5rem;
  }
}

/* --- Accessibility --- */
/* Nothing here removed the UA focus ring, but the default is easy to lose
   against this palette, so state it explicitly. */
:focus-visible {
  outline: 3px solid var(--color-primary-light);
  outline-offset: 3px;
  border-radius: 2px;
}

/* The hero's float and the badge dot's pulse loop forever, and .reveal
   animates every section in on scroll. Honour a reduced-motion preference.
   (JS being off entirely is covered by the <noscript> block in each page,
   because .reveal starts invisible and only JS adds .visible.) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 640px) {
  .store-badge {
    gap: 12px;
    padding: 11px 22px 11px 16px;
    border-radius: 12px;
  }

  .store-badge svg {
    width: 34px;
    height: 34px;
  }

  .store-badge-label {
    font-size: 0.8rem;
  }

  .store-badge-store {
    font-size: 1.3rem;
  }
}

@media (max-width: 380px) {
  .store-badges {
    gap: 12px;
  }

  .store-badge {
    gap: 10px;
    padding: 9px 16px 9px 12px;
  }

  .store-badge svg {
    width: 28px;
    height: 28px;
  }

  .store-badge-label {
    font-size: 0.7rem;
  }

  .store-badge-store {
    font-size: 1.1rem;
  }
}

/* Four-platform shot. Intrinsic width/height are set on the <img> so the
   space is reserved before it loads and the section doesn't jump. */
.devices-shot {
  display: block;
  width: 100%;
  max-width: 1100px;
  height: auto;
  margin: 0 auto;
}