/* ============================================================================
   SyzUp landing — base reset + design tokens
   v2: WCAG sweep, hero rebuild, features grid, FAQ, reviews, final CTA
   ========================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

:root {
  /* surfaces */
  --bg: #FFFFFF;
  --bg-cream: #F4F1EA;
  --bg-dark: #0A0A0A;
  --bg-dark-2: #141414;
  --bg-phone: #13110E;
  --bg-phone-cell: #1F1B14;

  /* ink */
  --ink: #0A0A0A;
  --ink-soft: #2C2620;          /* ~12.5:1 on white */
  --ink-muted: #555;            /* ~7.5:1 on white */
  --ink-faint: #6E6E6E;         /* 5.13:1 on white, 4.55:1 on cream — AA both.
                                   #777 measured 4.48:1 and 3.97:1: below AA. */
  --ink-fainter: #5A5044;
  --ink-on-dark: #FFFFFF;
  --ink-on-dark-soft: #B8B8B8;  /* ~7:1 on #0A0A0A */
  --ink-on-dark-faint: #888;    /* ~4.6:1 on #0A0A0A — AA body min */

  /* lines */
  --line: #E5E5E5;
  --line-strong: #CCCCCC;
  --line-dark: #2A2418;
  --line-dark-strong: #5A3A1E;

  /* brand orange */
  --orange: #FF5A1F;
  --orange-deep: #C24400;       /* ~5.8:1 on white — AA-safe small text */
  --orange-tint: rgba(255, 90, 31, 0.05);
  --orange-bg: rgba(255, 90, 31, 0.10);
  --orange-bg-strong: rgba(255, 90, 31, 0.15);
  --orange-border: rgba(255, 90, 31, 0.30);
  --orange-glow: rgba(255, 90, 31, 0.18);

  /* layout */
  --max: 1100px;
  --pad-x: clamp(20px, 4vw, 36px);
  --pad-y: clamp(64px, 9vw, 112px);
  --radius: 12px;
  --radius-lg: 16px;

  /* focus */
  --focus: 0 0 0 3px rgba(255, 90, 31, 0.45);
}

html {
  /* Declaring the scheme is what opts this page OUT of Chrome-on-Android's
     "Auto dark theme for web contents", which otherwise algorithmically
     inverts the cream manifesto, the orange system and the light/dark section
     rhythm with no designer in the loop. The product is Android-first, so that
     is the majority case, not an edge one. It also makes UA surfaces
     (scrollbars, form controls) agree with the design instead of guessing.
     Note the <meta name="theme-color" media="(prefers-color-scheme: dark)">
     in the template still promises a dark theme that does not exist — either
     build one or drop that meta. */
  color-scheme: light;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;  /* prevent iOS auto-zoom on text */
  text-size-adjust: 100%;
  overflow-x: hidden;  /* fallback: Safari < 16 ignores `clip` */
  overflow-x: clip;
  scroll-padding-top: 80px;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;  /* fallback: Safari < 16 ignores `clip` */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

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

/* ============================================================================
   A11y — skip link + focus
   ========================================================================= */

.skip-link {
  position: absolute;
  top: -100px;
  inset-inline-start: 16px;
  background: var(--ink);
  color: var(--ink-on-dark);
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  z-index: 1000;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 12px;
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

/* visible focus styles (replaces default) */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================================================
   Eyebrow + accent
   ========================================================================= */

.eyebrow {
  font-size: 13px;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--ink);
  text-transform: uppercase;
  margin-bottom: 28px;
}

/* on dark sections — bright orange has 7:1 contrast on #0A0A0A */
.moment--dark .eyebrow--orange,
.pricing .eyebrow--orange { color: var(--orange); }

/* on light sections — use deeper orange for small text contrast */
.eyebrow--orange { color: var(--orange-deep); }

.eyebrow--ink { color: var(--ink); }

.accent { color: var(--orange); }

/* ============================================================================
   Buttons
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  font-family: inherit;
  text-decoration: none;
}

.btn--lg {
  padding: 16px 28px;
  font-size: 15px;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--dark {
  background: var(--bg-dark);
  color: var(--ink-on-dark);
}
.btn--dark:hover { background: #1A1A1A; }

.btn--orange {
  background: var(--orange);
  color: var(--bg-dark);
}
.btn--orange:hover { background: #FF6B35; box-shadow: 0 8px 24px var(--orange-glow); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--ink-on-dark); }

.btn--outline-light {
  background: transparent;
  color: var(--ink-on-dark);
  border: 1.5px solid var(--line-dark-strong);
}
.btn--outline-light:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--orange);
}

.btn svg { flex-shrink: 0; }

/* ============================================================================
   NAV
   ========================================================================= */

.nav {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  z-index: 100;
  /* iPhone: notch / Dynamic Island (landscape + standalone "Add to Home Screen") */
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

.nav__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px var(--pad-x);
  /* Sections carry --pad-x on the outer element, outside their max-width box,
     so past 1100 + 2 * --pad-x the padding stops counting and the content
     edge is the max-width edge. The padding here sits inside the box, so it
     kept eating --pad-x at every width and the logo sat that much further in
     than every heading below it. Widening the box by the padding puts the
     content edge back on --max. Padding stays put, so the safe-area insets on
     .nav still work, and below the breakpoint nothing moves. */
  max-width: calc(var(--max) + 2 * var(--pad-x));
  margin: 0 auto;
  gap: 24px;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink);
  flex-shrink: 0;
}

.nav__links {
  display: flex;
  gap: 28px;
  font-size: 14px;
  font-weight: 500;
  margin-inline-start: auto;
  margin-inline-end: 24px;
}

.nav__links a {
  position: relative;
  color: var(--ink-soft);
  padding: 8px 0;
  transition: color 0.15s ease;
}

.nav__links a:hover,
.nav__links a:focus-visible { color: var(--orange-deep); }

/* "The myth" — story link, subtly distinguished */
.nav__links a.nav__myth {
  color: var(--orange-deep);
  font-style: italic;
}
.nav__links a.nav__myth:hover,
.nav__links a.nav__myth:focus-visible { color: var(--orange); }

.nav__cta {
  padding: 10px 18px;
  font-size: 14px;
  flex-shrink: 0;
}

/* language switcher */
.nav__lang {
  position: relative;
  flex-shrink: 0;
  margin-inline-start: 4px;
}

.nav__lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 7px 10px 7px 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.nav__lang-btn:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.nav__lang-btn:focus-visible {
  border-color: var(--ink);
  color: var(--ink);
  /* no `outline: none` — the global 3px orange outline is the only cue that
     clears WCAG 1.4.11; a 1px border colour change does not. */
}

.nav__lang-chev {
  transition: transform 0.18s ease;
}
.nav__lang-btn[aria-expanded="true"] .nav__lang-chev {
  transform: rotate(180deg);
}

.nav__lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  min-width: 168px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  list-style: none;
  margin: 0;
  padding: 6px;
  display: none;
  z-index: 100;
  /* 9 languages — don't overflow short viewports (landscape phones) */
  max-height: min(70vh, 420px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.nav__lang-menu--open { display: block; }

.nav__lang-menu li { margin: 0; }

.nav__lang-menu a {
  display: block;
  padding: 11px 12px;  /* ~44px tap target with 14px text */
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.12s ease;
}
.nav__lang-menu a:hover {
  background: var(--surface-1, #F5F5F4);
}
/* Keyboard focus needs the global outline. `outline: none` here won this
   selector on specificity and left a 1.09:1 background tint as the only
   focus cue across a 12-item menu. Inset, because the menu scrolls. */
.nav__lang-menu a:focus-visible {
  background: var(--surface-1, #F5F5F4);
  outline: 3px solid var(--orange);
  outline-offset: -3px;
}

/* hamburger */
.nav__toggle {
  display: none;
  background: transparent;
  border: 0;
  width: 40px;
  height: 40px;
  cursor: pointer;
  padding: 0;
  position: relative;
  margin-inline-start: auto;
}

.nav__toggle-bar {
  display: block;
  position: absolute;
  inset-inline-start: 8px;
  inset-inline-end: 8px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}
.nav__toggle-bar:nth-child(1) { top: 13px; }
.nav__toggle-bar:nth-child(2) { top: 19px; }
.nav__toggle-bar:nth-child(3) { top: 25px; }

.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) {
  top: 19px; transform: rotate(45deg);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) {
  top: 19px; transform: rotate(-45deg);
}

/* mobile-only CTA inside hamburger menu */
.nav__mobile-cta { display: none; }

@media (max-width: 880px) {
  .nav__toggle { display: block; }
  .nav__cta { display: none; }

  /* lang switcher zostaje widoczny, ale kompaktowy — min. 44px tap target */
  .nav__lang-btn {
    padding: 7px 8px 7px 10px;
    font-size: 12px;
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
  }
  .nav__lang-menu {
    /* na mobile: dropdown w lewo zeby nie wychodzil za ekran */
    inset-inline-end: 0;
    inset-inline-start: auto;
  }

  .nav__links {
    display: none;
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    inset-inline-end: 0;
    flex-direction: column;
    gap: 0;
    padding: 8px var(--pad-x) 24px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    margin: 0;
  }
  .nav__links--open { display: flex; }
  .nav__links a {
    padding: 16px 0;
    font-size: 16px;
    border-bottom: 1px solid var(--line);
  }
  .nav__links a:last-child { border-bottom: 0; }

  /* CTA at bottom of mobile menu */
  .nav__mobile-cta {
    display: block;
    margin-top: 16px;
    padding: 14px 22px !important;
    background: var(--orange);
    color: var(--bg-dark) !important;
    font-weight: 600;
    text-align: center;
    border-bottom: 0 !important;
    font-size: 15px !important;
    letter-spacing: 0.01em;
  }
  .nav__mobile-cta:hover,
  .nav__mobile-cta:focus-visible {
    background: #FF6B35;
    color: var(--bg-dark) !important;
  }
}

/* ============================================================================
   HERO — two-column with phone mockup
   ========================================================================= */

.hero {
  padding: clamp(24px, 3.5vw, 56px) var(--pad-x) clamp(40px, 6vw, 80px);
  position: relative;
  overflow: hidden;
}

.hero::before {
  /* subtle radial accent behind phone */
  content: '';
  position: absolute;
  top: 50%;
  inset-inline-end: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--orange-glow) 0%, transparent 60%);
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  max-width: var(--max);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.hero .eyebrow { margin-bottom: 0; }
.hero__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 18px);
}

.hero__title {
  font-size: clamp(40px, 5.2vw, 64px);
  line-height: 0.9;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--ink);
  overflow-wrap: break-word;
  hyphens: none;
}

.hero__sub {
  font-size: clamp(16px, 1.3vw, 18px);
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 540px;
  font-weight: 400;
}

.hero__sub strong { font-weight: 600; color: var(--ink); }

.hero__cta {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 4px;
}

.hero__proof {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 8px;
  list-style: none;
  padding: 0;
}

.hero__proof-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  color: var(--ink-soft);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.hero__proof-icon {
  color: var(--orange);
  flex-shrink: 0;
}

/* hero phone — visual right column */
.hero__visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 380px;
}

.hero__phone {
  width: 240px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.35), 0 8px 20px -10px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 2;
  animation: heroFloat 6s ease-in-out infinite;
}

.hero__badge {
  position: absolute;
  top: 14%;
  inset-inline-end: -8%;
  background: var(--bg-dark);
  color: var(--ink-on-dark);
  padding: 14px 18px;
  border: 1px solid var(--orange);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  letter-spacing: 0.12em;
  font-weight: 600;
  z-index: 3;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.4);
  animation: heroFloat 6s ease-in-out infinite;
  animation-delay: -3s;
}

.hero__badge-dot {
  width: 8px;
  height: 8px;
  background: var(--orange);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px var(--orange-bg);
}

.hero__badge-text strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: 0;
  margin-top: 2px;
}

@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@media (max-width: 880px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .hero__visual {
    min-height: auto;
    margin-top: 8px;
  }
  .hero__badge {
    inset-inline-end: -4%;
    top: 8%;
    padding: 12px 14px;
    font-size: 11px;
  }
  .hero__badge-text strong { font-size: 14px; }
}

@media (max-width: 480px) {
  .hero__title {
    font-size: clamp(44px, 13vw, 72px);
    letter-spacing: -0.04em;
  }
  .hero__phone { width: 240px; }
  .hero__cta .btn { flex: 1 1 auto; min-width: 0; }
  .hero__cta .btn--ghost { flex: 0 1 auto; }

  /* long localized labels (DE/RU/NL) must wrap instead of overflowing cards */
  .btn {
    white-space: normal;
    line-height: 1.3;
    text-align: center;
  }
}

/* ============================================================================
   FEATURES GRID
   ========================================================================= */

.features {
  padding: var(--pad-y) var(--pad-x);
  background: var(--bg);
  border-top: 1px solid var(--line);
}

.features__inner {
  max-width: var(--max);
  margin: 0 auto;
}

.features__head {
  margin-bottom: clamp(40px, 5vw, 64px);
  max-width: 720px;
}

.features__title {
  font-size: clamp(32px, 4.5vw, 52px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--ink);
}

.features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  list-style: none;
}

.feature {
  background: var(--bg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background 0.2s ease;
}

.feature:hover {
  background: #FAFAFA;
}

.feature__icon {
  color: var(--orange);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--orange-bg);
  margin-bottom: 4px;
}

.feature__title {
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.feature__body {
  font-size: 15.5px;
  color: var(--ink-soft);
  line-height: 1.6;
}

@media (max-width: 880px) {
  .features__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .features__grid { grid-template-columns: 1fr; }
  .feature { padding: 28px 24px; }
}

/* ============================================================================
   PRODUCT MOMENT (alternating dark/light, copy + phone)
   ========================================================================= */

.moment {
  padding: var(--pad-y) var(--pad-x);
}

.moment--dark {
  background: var(--bg-dark);
  color: var(--ink-on-dark);
}

.moment--light {
  background: var(--bg);
  border-top: 1px solid var(--line);
}

.moment__inner {
  display: grid;
  grid-template-columns: minmax(0, 500px) 320px;
  grid-template-areas: "copy visual";
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  justify-content: center;
  max-width: var(--max);
  margin: 0 auto;
}

.moment--reverse .moment__inner {
  grid-template-columns: 320px minmax(0, 500px);
  grid-template-areas: "visual copy";
}

.moment__copy { grid-area: copy; min-width: 0; }
.moment__visual { grid-area: visual; min-width: 0; display: flex; justify-content: center; }

.moment__title {
  font-size: clamp(32px, 4.8vw, 52px);
  line-height: 1.0;
  font-weight: 700;
  letter-spacing: -0.035em;
  margin-bottom: 24px;
  overflow-wrap: break-word;
  hyphens: auto;
}

.moment__body {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 28px;
  max-width: 480px;
}

.moment--dark .moment__body { color: var(--ink-on-dark-soft); }
.moment--light .moment__body { color: var(--ink-soft); }

@media (max-width: 1024px) {
  .moment__inner,
  .moment--reverse .moment__inner {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "visual";
    gap: 40px;
    justify-items: center;
  }
  .moment__copy { max-width: 540px; width: 100%; }
}

.ministats {
  display: flex;
  gap: 32px;
  font-size: 14px;
  flex-wrap: wrap;
}

.ministat__num {
  display: block;
  font-size: 32px;
  font-weight: 700;
  color: var(--orange);
  line-height: 1;
  letter-spacing: -0.02em;
}

.ministat__lbl {
  display: block;
  color: var(--ink-on-dark-faint);
  margin-top: 4px;
  font-size: 14px;
}

.tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  list-style: none;
}

.tag {
  border: 1px solid var(--line-strong);
  padding: 8px 14px;
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
}

/* ============================================================================
   PHONE MOCKUP
   ========================================================================= */

.phone {
  background: var(--bg-dark);
  border-radius: 32px;
  padding: 7px;
  width: 240px;
  flex-shrink: 0;
}

/* larger phone for moment sections — they have more breathing room */
.phone--lg {
  width: 280px;
  border-radius: 36px;
  padding: 8px;
}

@media (max-width: 480px) {
  .phone--lg { width: 260px; }
}

/* Screenshot inside the device frame.
   Height comes from the image's own width/height attributes, so any
   screenshot aspect ratio works and there is no layout shift while it
   loads. Swap the files in /screens/ — no CSS change needed. */
.phone__shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 26px;
  background: var(--bg-phone);
}

.phone--lg .phone__shot { border-radius: 28px; }

.manifesto {
  background: var(--bg-cream);
  padding: var(--pad-y) var(--pad-x);
}

.manifesto__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 64px);
  align-items: start;
  max-width: var(--max);
  margin: 0 auto;
}

.manifesto__title {
  font-size: clamp(28px, 4.5vw, 48px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.035em;
  overflow-wrap: break-word;
  hyphens: auto;
  color: var(--ink);
}

.manifesto__title--orange {
  color: var(--orange-deep);  /* AA-safe on cream */
  margin-top: 12px;
}

.manifesto__body {
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.6;
  padding-top: 14px;
}

.manifesto__body p { margin-bottom: 18px; }
.manifesto__body p:last-child { margin-bottom: 0; }
.manifesto__body strong { font-weight: 700; color: var(--ink); }

@media (max-width: 880px) {
  .manifesto__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ============================================================================
   NUMBERS
   ========================================================================= */

.numbers {
  padding: clamp(48px, 6vw, 80px) var(--pad-x);
  border-top: 1px solid var(--line);
}

.numbers__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: var(--max);
  margin: 0 auto;
}

.number {
  padding: 16px 36px;
  border-inline-end: 1px solid var(--line);
}

.number:first-child { padding-inline-start: 0; }
.number:last-child {
  padding-inline-end: 0;
  border-inline-end: 0;
}

.number__big {
  font-size: clamp(44px, 5.5vw, 64px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 14px;
  color: var(--ink);
}

.number__big--orange { color: var(--orange-deep); }

.number__lbl {
  font-size: 15px;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 6px;
}

.number__sub {
  font-size: 14px;
  color: var(--ink-muted);
  line-height: 1.55;
}

@media (max-width: 720px) {
  .numbers__inner { grid-template-columns: 1fr; }
  .number {
    padding: 36px 0;
    border-inline-end: 0;
    border-bottom: 1px solid var(--line);
  }
  .number:last-child { border-bottom: 0; }
}

/* ============================================================================
   REVIEWS — section removed pending real Play Store reviews
   When re-adding, restore .reviews / .review styles from git history.
   ========================================================================= */

/* ============================================================================
   PRICING (dark)
   ========================================================================= */

.pricing {
  background: var(--bg-dark);
  color: var(--ink-on-dark);
  padding: var(--pad-y) var(--pad-x);
}

.pricing__inner {
  max-width: var(--max);
  margin: 0 auto;
}

.pricing__title {
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.035em;
  margin-bottom: 16px;
  max-width: 560px;
  overflow-wrap: break-word;
}

.pricing__intro {
  font-size: 16px;
  color: var(--ink-on-dark-soft);
  line-height: 1.6;
  max-width: 560px;
  margin-bottom: 48px;
}

.pricing__intro strong { color: var(--orange); font-weight: 700; }

.pricing__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

.plan {
  border: 1px solid var(--line-dark);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  background: var(--bg-dark-2);
}

.plan--featured {
  border-color: var(--orange);
  background: linear-gradient(180deg, var(--orange-tint) 0%, var(--bg-dark-2) 100%);
  box-shadow: 0 0 0 1px var(--orange);
}

.plan__badge {
  position: absolute;
  top: -10px;
  inset-inline-end: 24px;
  background: var(--orange);
  color: var(--bg-dark);
  font-size: 11px;
  letter-spacing: 0.18em;
  padding: 5px 12px;
  font-weight: 700;
}

.plan__lbl {
  font-size: 12px;
  color: var(--ink-on-dark-faint);
  letter-spacing: 0.2em;
  font-weight: 600;
}

.plan__lbl--orange { color: var(--orange); }

.plan__billing {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink-on-dark);
}

.plan__body {
  font-size: 15.5px;
  color: var(--ink-on-dark-soft);
  line-height: 1.6;
}

.plan__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
  padding: 16px 0;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.plan__features li {
  font-size: 15px;
  color: var(--ink-on-dark-soft);
  padding-inline-start: 24px;
  position: relative;
  line-height: 1.55;
}

.plan__features li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 6px;
  width: 14px;
  height: 8px;
  border-inline-start: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: rotate(-45deg);
}

.plan__features li strong { color: var(--orange); font-weight: 700; }

.plan .btn {
  margin-top: 8px;
}

.pricing__region-note {
  margin-top: 28px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-on-dark-faint);
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
}

.pricing__note {
  font-size: 14px;
  color: var(--ink-on-dark-faint);
  line-height: 1.55;
  text-align: center;
  border-top: 1px solid var(--line-dark);
  padding-top: 32px;
  margin-top: 16px;
}

@media (max-width: 880px) {
  .pricing__grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   FAQ
   ========================================================================= */

.faq {
  padding: var(--pad-y) var(--pad-x);
  background: var(--bg);
  border-top: 1px solid var(--line);
}

.faq__inner {
  max-width: 820px;
  margin: 0 auto;
}

.faq__head {
  margin-bottom: clamp(36px, 4vw, 48px);
}

.faq__title {
  font-size: clamp(32px, 4.5vw, 48px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--ink);
}

.faq__list {
  border-top: 1px solid var(--line);
}

.faq__item {
  border-bottom: 1px solid var(--line);
}

.faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 22px 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  transition: color 0.15s ease;
}

.faq__q::-webkit-details-marker { display: none; }

.faq__q:hover { color: var(--orange-deep); }

.faq__chev {
  width: 14px;
  height: 14px;
  position: relative;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.faq__chev::before,
.faq__chev::after {
  content: '';
  position: absolute;
  background: currentColor;
  transition: transform 0.25s ease;
}

.faq__chev::before {
  top: 6px; left: 0; right: 0; height: 2px;
}
.faq__chev::after {
  top: 0; bottom: 0; left: 6px; width: 2px;
}

.faq__item[open] .faq__chev::after { transform: scaleY(0); }
.faq__item[open] .faq__q { color: var(--orange-deep); }

.faq__a {
  padding: 0 0 22px;
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 680px;
}

.faq__a strong { color: var(--ink); font-weight: 600; }

/* ============================================================================
   FINAL CTA
   ========================================================================= */

.final-cta {
  padding: var(--pad-y) var(--pad-x);
  background: var(--bg-dark);
  color: var(--ink-on-dark);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.final-cta::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, var(--orange-glow) 0%, transparent 60%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.final-cta__inner {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.final-cta__title {
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.0;
  font-weight: 700;
  letter-spacing: -0.04em;
  margin-bottom: 18px;
}

.final-cta__sub {
  font-size: 17px;
  color: var(--ink-on-dark-soft);
  margin-bottom: 36px;
  line-height: 1.55;
}

/* ============================================================================
   FOOTER
   ========================================================================= */

.footer {
  background: var(--bg);
  border-top: 1px solid var(--line);
}

.footer__inner {
  padding: 32px var(--pad-x);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: var(--ink-muted);
  /* Same inset as .nav__inner — see the note there. */
  max-width: calc(var(--max) + 2 * var(--pad-x));
  margin: 0 auto;
  gap: 24px;
  flex-wrap: wrap;
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  color: var(--ink);
}

.footer__links {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

.footer__links a {
  color: var(--ink-muted);
  transition: color 0.15s ease;
  display: inline-block;
  padding: 8px 0;  /* comfortable tap target on touch */
}

.footer__links a:hover { color: var(--orange-deep); }

@media (max-width: 600px) {
  .footer__inner { flex-direction: column; align-items: flex-start; }
  .footer__links { gap: 16px 24px; }
}

/* ============================================================================
   STICKY MOBILE CTA — bottom bar visible on small screens, hides near footer
   ========================================================================= */

.sticky-cta {
  display: none;
}

@media (max-width: 880px) {
  .sticky-cta {
    display: block;
    position: fixed;
    inset-inline-start: 0;
    inset-inline-end: 0;
    bottom: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(10, 10, 10, 0.92);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    z-index: 90;
    transform: translateY(0);
    transition: transform 0.3s ease, opacity 0.3s ease;
    border-top: 1px solid rgba(255, 90, 31, 0.3);
  }

  .sticky-cta--hidden {
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
  }

  .sticky-cta__btn {
    width: 100%;
    padding: 14px 22px;
    font-size: 15px;
  }

  /* leave room for sticky bar so final-cta + footer aren't covered */
  body { padding-bottom: 76px; }
}

@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;
  }

  .hero__phone,
  .hero__badge { animation: none; }

  .sticky-cta { transition: none; }
}

/* ============================================================================
   SCRIPT SUPPORT — Korean, Arabic, Japanese, Chinese, Devanagari

   Turkish needs nothing: ı is named explicitly in the `latin` unicode-range in
   fonts.css, and İ ğ ş fall inside latin-ext, both of which already ship.
   ========================================================================= */

/* Inter carries no Hangul. Without this the browser silently substitutes a
   system font and the page looks half-finished even though the copy is fine. */
[lang="ko"] body,
[lang="ko"] {
  /* System Korean stack — Android: Noto Sans KR (system), iOS/macOS: Apple SD
     Gothic Neo, Windows: Malgun Gothic. No web-font payload for CJK. */
  font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Korean breaks lines between characters by default, which splits words in
   the middle. keep-all breaks at word boundaries instead. */
[lang="ko"] {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* Japanese and Simplified Chinese. Same no-payload approach as Korean —
   Android ships Noto CJK, macOS/iOS Hiragino and PingFang, Windows Yu Gothic
   and Microsoft YaHei. A subsetted web font would be 150-350 KB per weight
   and would need rebuilding on every copy change. */
[lang="ja"] body,
[lang="ja"] {
  font-family: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Meiryo', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

[lang="zh-Hans"] body,
[lang="zh-Hans"] {
  font-family: 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Deliberately NOT keep-all. Korean has spaces between words; Japanese and
   Chinese do not, so keep-all would leave the browser nowhere to break a
   paragraph and the layout would scroll sideways. `line-break: strict`
   applies kinsoku shori: no break before 。、」 and none after 「. */
[lang="ja"],
[lang="zh-Hans"] {
  word-break: normal;
  line-break: strict;
  overflow-wrap: break-word;
}

/* Devanagari stacks marks above and below the baseline, so 1.6 lets glyphs
   from adjacent lines touch. Same treatment Arabic already gets below. */
[lang="hi"] body,
[lang="hi"] {
  font-family: 'Noto Sans Devanagari', 'Nirmala UI', 'Kohinoor Devanagari', 'Mangal', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.85;
}

/* Inter carries no Arabic either. */
[lang="ar"] body,
[lang="ar"] {
  /* System Arabic stack — Android: Noto Sans Arabic (system), iOS/macOS:
     Geeza Pro, Windows: Segoe UI. No web-font payload for Arabic. */
  font-family: 'Noto Sans Arabic', 'Geeza Pro', 'Segoe UI', Tahoma, 'Inter', sans-serif;
}

/* Arabic is cursive — letters join. letter-spacing pulls those joins apart and
   renders the text as disconnected glyphs, which is close to unreadable. Every
   tracking value in this stylesheet has to be neutralised for Arabic, hence the
   blanket override rather than per-rule edits. */
[lang="ar"] * {
  letter-spacing: normal;
}

/* Arabic ascenders and descenders need more vertical room than Latin. */
[lang="ar"] body {
  line-height: 1.8;
}

/* Uppercasing does nothing in Arabic (no letter case) but does disable some
   ligatures in certain renderers. Turn it off where the design applies it. */
[lang="ar"] .eyebrow,
[lang="ar"] .nav__brand,
[lang="ar"] .btn {
  text-transform: none;
}

/* The layout mirrors automatically via logical properties and grid, but the
   phone frame reads better kept upright rather than flipped. */
[dir="rtl"] .phone__shot {
  transform: none;
}

/* --------------------------------------------------------------------------
   Bidi isolation for Latin runs inside RTL copy
   --------------------------------------------------------------------------
   `.` `+` `=` `(` `)` are bidi-NEUTRAL characters: in an RTL paragraph they
   resolve to the paragraph direction and jump to the wrong end of the run.
   Untreated, the Arabic hero rendered as ". Lift / . Forever / .Anyway" and
   the footer line lost its final full stop to the left edge.

   Two mechanisms, and they are not interchangeable:
     - `<bdi>` in the copy, for a Latin run INSIDE an Arabic sentence
       (`من <bdi>Exile</bdi> إلى <bdi>Ascended</bdi>.`). Only markup can
       isolate a fragment of a text node — CSS cannot reach inside one.
     - the rules below, for whole elements that are Latin by design even in
       Arabic (the wordmark, the +5kg badge) and for any headline a locale
       chooses to keep as a brand asset.
   `text-align: start` is restated because isolation alone does not move the
   box — without it an isolated LTR run still sits flush to the RTL edge. */
[dir="rtl"] .hero__title,
[dir="rtl"] .final-cta__title,
[dir="rtl"] .manifesto__title--orange,
[dir="rtl"] .footer__brand span {
  unicode-bidi: isolate;
  text-align: start;
}

/* Latin by design in every locale: the wordmark, and the PR badge whose
   "+5kg" would otherwise reorder to "5kg+" against the RTL paragraph. */
[dir="rtl"] .nav__brand span,
[dir="rtl"] .hero__badge-text {
  unicode-bidi: isolate;
  direction: ltr;
}