/* ============================================================================
   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: #777;            /* ~4.5:1 on white — AA body min */
  --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 {
  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);
  max-width: var(--max);
  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,
.nav__lang-btn:focus-visible {
  border-color: var(--ink);
  color: var(--ink);
  outline: none;
}

.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,
.nav__lang-menu a:focus-visible {
  background: var(--surface-1, #F5F5F4);
  outline: none;
}

/* 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);
  max-width: var(--max);
  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 and Arabic
   ========================================================================= */

/* 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;
}

/* 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;
}