/* MonoVPN theme — desktop rebuild from Figma node 75:10075 (1920px main page).
 * Section-by-section, every value sourced via Figma MCP get_design_context.
 * Frame: 1920×5836. Background dark #0C0E12, accent #4E47DD.
 */

/* ── Fonts ────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'SF Pro Display';
  src: url('../fonts/SFProDisplay-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: url('../fonts/SFProDisplay-RegularItalic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: url('../fonts/SFProDisplay-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: url('../fonts/SFProDisplay-Semibold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: url('../fonts/SFProDisplay-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ── Reset + tokens ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Figma palette — taken from Figma node 75:10075 colour styles */
  --bg:           #0C0E12;
  --accent:       #4E47DD;
  --accent-2:     #5C55E5;
  --muted:        #94979C;
  --text:         #FFFFFF;
  --glass:        rgba(78, 71, 221, 0.05);
  --glass-mid:    rgba(78, 71, 221, 0.10);
  --border-soft:  rgba(78, 71, 221, 0.20);
  --green:        #34C759;
  --green-soft:   rgba(52, 199, 89, 0.10);
  /* Themeable glassy surfaces (dark = white tint over dark bg) */
  --surface:        rgba(255, 255, 255, 0.05);
  --surface-strong: rgba(255, 255, 255, 0.10);
  --surface-border: rgba(255, 255, 255, 0.10);
  /* 1 Figma px === 1 css px when viewport === 1920. Falls back to 6px floor
     so very narrow viewports stay readable. */
  --u: max(0.375px, calc(100vw / 1920));
}

/* Light theme — Figma node 140:1814 "Web Light Theme" */
[data-theme="light"] {
  --bg:             #F5F5F9;
  --text:           #181D27;
  --muted:          #6E7178;
  --surface:        rgba(78, 71, 221, 0.05);
  --surface-strong: rgba(78, 71, 221, 0.10);
  --surface-border: rgba(78, 71, 221, 0.15);
}

/* Theme toggle icon: moon in dark, sun in light */
.theme-icon { display: inline-flex; align-items: center; justify-content: center; }
[data-theme="dark"] .theme-icon--sun  { display: none; }
[data-theme="light"] .theme-icon--moon { display: none; }

html, body { background: var(--bg); color: var(--text); }
body {
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* WordPress emits inline <script>/<style> as direct children of body; the
   following sections rely on default block flow and would render them as
   visible text without this rule. Mandatory per rebuild plan. */
script, style, noscript { display: none !important; }

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; background: transparent; border: 0; padding: 0; color: inherit; cursor: pointer; }

.root-wrap { overflow: hidden; }

.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 9px;
}

/* ──────────────────────────────────────────────────────────────────────────
 * HEADER  —  Figma 75:10174 (frame 1920 × 120, fixed top, glass).
 * Header Base (75:10175): bg rgba(78,71,221,0.05), backdrop-blur 15.55px,
 *   border-bottom rgba(78,71,221,0.2).
 * Logo (75:10176): left calc(8.33%+43px)=203, top 50, 221×50.
 * Center menu (75:10177): centered at calc(45.83%+4px)=884, top 50, width 440,
 *   gap 40 → Home (active pill) | Locations | Support | About.
 * Right group (75:10183): left calc(66.67%+31px)=1311, top 50, gap 40 →
 *   Lang pill | Theme toggle | Download CTA.
 * ────────────────────────────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  height: calc(120 * var(--u));
  z-index: 100;
  background: var(--glass);
  backdrop-filter: blur(15.55px);
  -webkit-backdrop-filter: blur(15.55px);
  border-bottom: 1px solid var(--border-soft);
  transition: transform 0.35s ease;
}
.nav.nav-hidden { transform: translateY(-100%); }

/* Logo block. */
.nav-left {
  position: absolute;
  left: calc(203 * var(--u));
  top:  calc(50 * var(--u));
  width:  calc(221 * var(--u));
  height: calc(50 * var(--u));
}
.nav-logo-icon { display: block; width: 100%; height: 100%; }
.nav-logo-icon svg { width: 100%; height: 100%; display: block; }
.nav-logo-desktop { display: block; }
.nav-logo-mobile  { display: none; }
.nav-brand        { display: none; }

/* Center menu container. */
.nav-links {
  position: absolute;
  left: calc(884 * var(--u));
  top:  calc(50 * var(--u));
  transform: translateX(-50%);
  width:  calc(440 * var(--u));
  height: calc(50 * var(--u));
}
.nav-menu, .nav-menu ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: calc(40 * var(--u));
  height: 100%;
}
.nav-menu li { display: flex; align-items: center; }
.nav-menu a, .nav-link {
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 400;
  font-size: calc(18 * var(--u));
  line-height: 20px;
  letter-spacing: -0.54px;
  color: var(--muted);
  white-space: nowrap;
}
/* Active item (Figma 75:10178 "Home"): bg pill rgba(78,71,221,0.1),
   padding 35/15, rounded 10, bold white. */
.nav-menu .current-menu-item a,
.nav-menu li.active a,
.nav-link.active {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(50 * var(--u));
  padding: 0 calc(35 * var(--u));
  background: var(--glass-mid);
  border-radius: calc(10 * var(--u));
  font-weight: 700;
  color: var(--text);
}

/* Right group. */
.nav-right {
  position: absolute;
  left: calc(1311 * var(--u));
  top:  calc(50 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(40 * var(--u));
  height: calc(50 * var(--u));
}
.nav-right-controls {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
  height: calc(50 * var(--u));
}

/* Language pill (75:10185) — flag emoji + code + chevron */
.nav-globe {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--u));
  height: calc(50 * var(--u));
  padding: calc(5 * var(--u)) calc(20 * var(--u));
  background: var(--glass-mid);
  border-radius: calc(10 * var(--u));
  cursor: pointer;
  user-select: none;
}
.nav-globe-icon {
  display: flex;
  align-items: center;
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  flex-shrink: 0;
}
.nav-globe-icon svg { width: 100%; height: 100%; display: block; }
.nav-globe-text {
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 700;
  font-size: calc(18 * var(--u));
  line-height: 20px;
  letter-spacing: -0.54px;
  color: var(--text);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Language dropdown — glassmorphism panel */
.lang-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 200;
  min-width: 100%;
  width: max-content;
  background: rgba(18, 20, 38, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  padding: 6px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s 0.15s;
  pointer-events: none;
}
/* Invisible bridge fills the 8px gap so :hover isn't lost moving pill→dropdown */
.lang-dropdown::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}
.nav-globe:hover .lang-dropdown,
.nav-globe:focus-within .lang-dropdown {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: auto;
}
.lang-dropdown ul { list-style: none; }
.lang-dropdown li a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 20px;
  border-radius: 8px;
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 700;
  font-size: calc(15 * var(--u));
  line-height: 20px;
  letter-spacing: -0.3px;
  color: #4E47DD;
  transition: background 0.1s ease, color 0.1s ease;
  white-space: nowrap;
  text-transform: uppercase;
}
.lang-dropdown li a:hover { background: rgba(78, 71, 221, 0.12); color: #4E47DD; }
.lang-dropdown li.current-lang a { background: rgba(78, 71, 221, 0.18); color: #4E47DD; }
.lang-name { font-weight: 700; }
/* Light theme: white frosted dropdown */
[data-theme="light"] .lang-dropdown {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(78, 71, 221, 0.15);
  box-shadow: 0 8px 32px rgba(24, 29, 39, 0.18);
}

/* Theme toggle (75:10188-189) — bg rgba(78,71,221,0.1), pl:5 pr:50 py:5,
   rounded 10, 95×50. Knob 40×40 sits on the left in dark state. */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width:  calc(95 * var(--u));
  height: calc(50 * var(--u));
  padding: calc(5 * var(--u));
  background: var(--glass-mid);
  border-radius: calc(10 * var(--u));
  cursor: pointer;
  transition: background 0.25s ease;
}
.theme-toggle-knob {
  flex-shrink: 0;
  width:  calc(40 * var(--u));
  height: calc(40 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(5 * var(--u));
  background: var(--accent);
  color: #fff;
  transition: transform 0.25s ease, background 0.25s ease;
}
/* Knob slides right in light theme (switch behaviour) */
[data-theme="light"] .theme-toggle-knob { transform: translateX(calc(45 * var(--u))); }
.theme-toggle-knob svg { width: 100%; height: 100%; display: block; }

/* Download CTA (75:10192) — bg #4E47DD, pad 35/15, rounded 10, 18 bold. */
.nav-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(50 * var(--u));
  padding: 0 calc(35 * var(--u));
  background: var(--accent);
  border-radius: calc(10 * var(--u));
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 700;
  font-size: calc(18 * var(--u));
  line-height: 20px;
  letter-spacing: -0.54px;
  color: var(--text);
  white-space: nowrap;
  transition: background .2s ease, transform .2s ease;
}
.nav-download:hover { background: var(--accent-2); transform: translateY(-2px); }

/* Hamburger + mobile menu overlay — desktop-hidden; mobile rules added when
   the mobile section is rebuilt later. */
.nav-hamburger { display: none; }
.nav-menu-overlay { display: none; }

/* ──────────────────────────────────────────────────────────────────────────
 * HERO BLOCK  —  Figma 140:220 ("Hero Block", frame 1727×1280 at page-left
 *   203, rendered as full-bleed 100% wide).
 * Stack (back→front):
 *   - 2 glow ellipses (75:10267, 75:10268)
 *   - 3 purple swooshes (75:10272-74 Union)
 *   - 2 horizontal rings under globe (75:10270-71 Ellipse 12/13)
 *   - cat with globe PNG (75:10275 image 14)
 *   - small ellipses overlay (75:10276 Elipses)
 * Positions are translated from Figma's inner-image coordinates so that the
 * Gaussian-blurred SVGs render at full size (we do not apply CSS blur).
 *   rendered_w  = outer_w × (1 + 2 × |inset.h|)
 *   img_left_px = outer_left − outer_w × |inset.h|
 * ────────────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  width: 100%;
  height: calc(1280 * var(--u));
  background: var(--bg);
}

.hero-animation {
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-animation > img { position: absolute; display: block; max-width: none; }
.hero-glow-1-mob, .hero-glow-2-mob { display: none !important; }
.hero-ellipse12-mob, .hero-ellipse13-mob,
.hero-union-mob, .hero-union1-mob, .hero-union2-mob,
.hero-elipses-mob { display: none !important; }
/* Mobile cat glows — CSS blur divs, hidden on desktop */
.hero-cat-glow-1, .hero-cat-glow-2 { display: none; }

/* Globe (75:10145) — SVG grid sphere behind all layers. */
.hero-globe-block {
  left:   calc(33.33% + (102.38 * var(--u)));
  top:    0;
  width:  calc(1177.62 * var(--u));
  height: calc(1280 * var(--u));
  z-index: 1;
}
/* Glow 1 (75:10267) — feGaussianBlur stdDev=301, opacity 0.31.
   Full SVG 2075.23×1884.6; origin: top=-376, left=50%-558.62px. */
.hero-glow-1 {
  left:   calc(50% - (558.62 * var(--u)));
  top:    calc(-376 * var(--u));
  width:  calc(2075.23 * var(--u));
  height: calc(1884.6 * var(--u));
  z-index: 2;
}
/* Glow 2 (75:10268) — feGaussianBlur stdDev=205, opacity 0.6.
   Full SVG 1691.68×1375.01; origin: top=-155, left=50%-365.8px. */
.hero-glow-2 {
  left:   calc(50% - (365.8 * var(--u)));
  top:    calc(-155 * var(--u));
  width:  calc(1691.68 * var(--u));
  height: calc(1375.01 * var(--u));
  z-index: 3;
}
/* Ellipse12 (75:10270) — bottom oval 1, full SVG 719.93×234.02. */
.hero-ellipse12 {
  left:   calc(50% + (81.72 * var(--u)));
  top:    calc(777 * var(--u));
  width:  calc(719.93 * var(--u));
  height: calc(234.02 * var(--u));
  z-index: 4;
}
/* Ellipse13 (75:10271) — bottom oval 2, full SVG 561.424×200.107. */
.hero-ellipse13 {
  left:   calc(58.33% + (1 * var(--u)));
  top:    calc(772 * var(--u));
  width:  calc(561.424 * var(--u));
  height: calc(200.107 * var(--u));
  z-index: 5;
}
/* Union (75:10272) — swoosh arc 1, full SVG 986.984×1091.85. */
.hero-union {
  left:   calc(58.33% - (145.24 * var(--u)));
  top:    calc(46 * var(--u));
  width:  calc(986.984 * var(--u));
  height: calc(1091.85 * var(--u));
  z-index: 6;
}
/* Union1 (75:10273) — swoosh arc 2, full SVG 660.642×749.933. */
.hero-union1 {
  left:   calc(58.33% + (0.8 * var(--u)));
  top:    calc(217 * var(--u));
  width:  calc(660.642 * var(--u));
  height: calc(749.933 * var(--u));
  z-index: 7;
}
/* Union2 (75:10274) — swoosh arc 3, full SVG 746.042×835.333. */
.hero-union2 {
  left:   calc(50% + (52.7 * var(--u)));
  top:    calc(174 * var(--u));
  width:  calc(746.042 * var(--u));
  height: calc(835.333 * var(--u));
  z-index: 8;
}
/* Cat (75:10275 image 14) — container clips; inner img 116.55% left-aligned
   (Figma exact). object-fit removed — shadow was shifting with cover crop. */
.hero-cat-wrap {
  position: absolute;
  right:  calc(-10 * var(--u));
  top:    calc(119 * var(--u));
  width:  calc(1287 * var(--u));
  height: calc(877 * var(--u));
  overflow: hidden;
  z-index: 9;
  pointer-events: none;
}
.hero-cat {
  position: absolute;
  display: block;
  max-width: none;
  width:  116.55%;
  height: 100.05%;
  left:   -0.03%;
  top:    -0.08%;
}
/* Lottie fills the same container as hero-cat img */
.hero-cat-lottie { display: block; width: 100%; height: 100%; }

/* Elipses (75:10276) — orbital rings in front of cat, 733.855×310.967. */
.hero-elipses {
  left:   calc(50% + (33 * var(--u)));
  top:    calc(485 * var(--u));
  width:  calc(733.855 * var(--u));
  height: calc(310.967 * var(--u));
  z-index: 10;
}

/* Heading column (Figma 75:10146) — left calc(8.33%+43px)=203, top 170,
   width 738, gap-80 between badge and text block. Each child rendered as
   its own absolute layer so the badge can stay at the Figma-exact top:170. */

/* "7 days free" badge (75:10147). */
.hero-badge {
  position: absolute;
  z-index: 11;
  left: calc(8.33% + (43 * var(--u)));
  top:  calc(170 * var(--u));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(20 * var(--u));
  padding: calc(10 * var(--u)) calc(20 * var(--u));
  background: var(--glass-mid);
  border: 1px solid var(--border-soft);
  border-radius: calc(10 * var(--u));
}
.hero-badge-dot {
  flex-shrink: 0;
  width:  calc(5 * var(--u));
  height: calc(5 * var(--u));
  background: var(--accent);
  border-radius: 50%;
}
.hero-badge-text {
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 700;
  font-size: calc(18 * var(--u));
  line-height: 20px;
  letter-spacing: -0.54px;
  color: var(--accent);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Heading text container (75:10150). Figma absolute coords: "Privacy" at
   top:290 (badge.top 170 + badge.h 40 + gap 80), "in one click" at top:412
   (gap-10 below Privacy → 290 + 112 = 402? Figma renders 122 below via
   leading=0.7), desc at top:564 (gap-40 below line 2). */
.hero-content {
  position: absolute;
  z-index: 11;
  left: calc(8.33% + (43 * var(--u)));
  top:  calc(290 * var(--u));
  width: calc(738 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--u));
  overflow: visible;
}
.hero-title {
  margin: 0;
  overflow: visible;
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 400;
  font-size: calc(160 * var(--u));
  line-height: 82%;
  letter-spacing: -8px;
  color: var(--text);
  white-space: nowrap;
  padding-left: calc(150 * var(--u));
  text-indent: calc(-150 * var(--u));
}
html[lang|="pl"] .hero-title-line2 { white-space: nowrap; }
html[lang|="pl"] .hero-title,
html[lang|="pt"] .hero-title { padding-left: 0; text-indent: 0; }
html[lang|="pl"] .hero-desc,
html[lang|="pt"] .hero-desc { margin-left: 0; }
.hero-title-accent {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}
/* Description (75:10154) — 32/leading 0.8/-0.96, w:581, color #94979C. */
.hero-desc {
  margin: 0;
  margin-left: calc(150 * var(--u));
  max-width: 475px;
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 400;
  font-size: calc(32 * var(--u));
  line-height: 120%;
  letter-spacing: -0.96px;
  color: var(--muted);
}
.hero-desc br {
  display: block;
  content: '';
  margin-bottom: calc(14 * var(--u));
}

/* CTA group (75:10155) — left 203, top 869, flex column gap 20 (buttons
   row, then note row). */
.hero-cta {
  position: absolute;
  z-index: 11;
  left: calc(8.33% + (43 * var(--u)));
  top:  calc(869 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
  align-items: flex-start;
}
.hero-buttons {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
}

/* AppStore button (75:10157) — bg white, h 70, px:30 py:5, rounded 10,
   flex column items-center. "Download on the" 14/-0.42 #94979C + row Apple
   icon 20×20 + "AppStore" 18 bold black tracking -0.54. */
.hero-btn-store {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(70 * var(--u));
  padding: calc(5 * var(--u)) calc(30 * var(--u));
  background: var(--text);
  border-radius: calc(10 * var(--u));
  transition: transform .2s ease, opacity .2s ease, background-color .25s ease;
  --fill-0: var(--bg);
}
.hero-btn-store:hover { transform: translateY(-2px); opacity: 0.9; }
.hero-btn-store-sub {
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 400;
  font-size: calc(14 * var(--u));
  line-height: 20px;
  letter-spacing: -0.42px;
  color: var(--muted);
  white-space: nowrap;
}
.hero-btn-store-main {
  display: flex;
  align-items: center;
  gap: calc(5 * var(--u));
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 700;
  font-size: calc(18 * var(--u));
  line-height: 20px;
  letter-spacing: -0.54px;
  color: var(--bg);
  white-space: nowrap;
}
/* SVG icons exported from Figma include width="100%" height="100%" which can
   make flex items grow past the CSS box. Hard-cap dimensions; PHP also
   stamps explicit width/height attrs on the inlined <svg>. */
.hero-btn-store-icon {
  flex-grow: 0; flex-shrink: 0;
  flex-basis: calc(20 * var(--u));
  width:  calc(20 * var(--u));
  height: calc(20 * var(--u));
  max-width:  calc(20 * var(--u));
  max-height: calc(20 * var(--u));
  min-width: 0; min-height: 0;
  display: block;
}
.hero-btn-store-icon svg { width: 100%; height: 100%; display: block; }

/* How it works button (75:10166) — bg #4E47DD solid (NOT glass), border
   rgba(78,71,221,0.2), h 70, px:30 py:5, gap 20, rounded 10. Arrow 20×11.084
   + "How it works" 18 bold white tracking -0.54. */
.hero-btn-how {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(20 * var(--u));
  height: calc(70 * var(--u));
  padding: calc(5 * var(--u)) calc(30 * var(--u));
  background: var(--accent);
  border: 1px solid var(--border-soft);
  border-radius: calc(10 * var(--u));
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 700;
  font-size: calc(18 * var(--u));
  line-height: 20px;
  letter-spacing: -0.54px;
  color: var(--text);
  white-space: nowrap;
  transition: background .2s ease, transform .2s ease;
}
.hero-btn-how:hover { background: var(--accent-2); transform: translateY(-2px); }
.hero-btn-how-arrow {
  flex-grow: 0; flex-shrink: 0;
  flex-basis: calc(20 * var(--u));
  width:  calc(20 * var(--u));
  height: calc(11.084 * var(--u));
  max-width:  calc(20 * var(--u));
  max-height: calc(11.084 * var(--u));
  min-width: 0; min-height: 0;
  display: block;
}
.hero-btn-how-arrow svg { width: 100%; height: 100%; display: block; }
.hero-btn-how-arrow svg path { fill: #FFFFFF; }

/* Bottom note (75:10170): "Cancel anytime · No commitment", 18 regular
   white tracking -0.54, gap 20. */
.hero-note {
  display: inline-flex;
  align-items: center;
  gap: calc(20 * var(--u));
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 400;
  font-size: calc(18 * var(--u));
  line-height: 1.1;
  letter-spacing: -0.54px;
  color: var(--text);
}
.hero-note-dot {
  flex-shrink: 0;
  width:  calc(5 * var(--u));
  height: calc(5 * var(--u));
  background: var(--accent);
  border-radius: 50%;
}

/* Desktop-only elements hidden */
.hero-cat-mobile { display: none; }
.hero-globe-mobile { display: none; }
.hero-orbit-mobile { display: none; }

/* ──────────────────────────────────────────────────────────────────────────
 * HERO — Mobile  (≤ 700px)
 * Stack layout: badge → title → CTA → cat image at bottom.
 * All absolute positions converted to flow; --u floor (0.375px) causes
 * calc()-based sizes to land too small, so mobile overrides use px/vw.
 * ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  h2 { line-height: 100%; }

  /* Hero: absolute-positioned layout matching Figma mobile 200:436 (375×~920px).
     Figma order (top→bottom): badge(115), title(195), subtitle(357), cat(409),
     buttons(757), trust-note(847). All elements absolute. */
  .hero {
    /* Hero fills the first screen; CTA is pinned near the bottom edge and the
       cat sits behind/below it. Nav is fixed (75px) + 40px Figma gap → -115px. */
    height: calc(100vh - 115px);
    min-height: 600px;
    margin-top: 115px;
    display: block;
    position: relative;
    overflow: visible;
  }

  /* Animation layer — globe + glows + rings + elipses, all Figma-exact px */
  .hero-animation {
    display: block;
    position: absolute;
    inset: 0;
    z-index: auto; /* no stacking context — children compete with hero-cat-mobile directly */
    overflow: visible;
    pointer-events: none;
  }
  /* Desktop globe wireframe — hidden on mobile */
  .hero-globe-block { display: none !important; }
  /* Globe Main Block — Figma 202:1392, right:0 top:437 374×407, below glows (z1) */
  .hero-globe-mobile {
    display: block;
    position: absolute;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    top: 460px;
    bottom: auto;
    width: 374px;
    height: 407px;
    max-width: none;
    z-index: 1;
    pointer-events: none;
  }
  /* Desktop glows/rings hidden on mobile — !important to beat .hero-animation > img specificity */
  .hero-glow-1 { display: none !important; }
  .hero-glow-2 { display: none !important; }
  /* SVG mob glows replaced by CSS divs hero-cat-glow-1/2 */
  .hero-glow-1-mob { display: none !important; }
  .hero-glow-2-mob { display: none !important; }
  /* Desktop ellipses/rings hidden on mobile */
  .hero-ellipse12, .hero-ellipse13,
  .hero-union, .hero-union1, .hero-union2,
  .hero-elipses { display: none !important; }
  /* Orbital ring elements hidden — new cat PNG (Group 61) has rings baked in */
  .hero-ellipse12-mob, .hero-ellipse13-mob,
  .hero-union-mob, .hero-union1-mob, .hero-union2-mob,
  .hero-elipses-mob { display: none !important; }
  /* Hide desktop cat inside animation — use hero-cat-mobile instead */
  .hero-cat-wrap { display: none !important; }

  /* Cat CSS glows — radial-gradient (filter:blur clips badly with overflow:hidden) */
  .hero-cat-glow-1 {
    display: none;
  }
  .hero-cat-glow-2 {
    display: block;
    position: absolute;
    left: calc(50% - 280px);
    top: 430px;
    bottom: auto;
    width: 560px;
    height: 480px;
    background: radial-gradient(ellipse at center, rgba(78, 71, 221, 0.65) 0%, transparent 55%);
    z-index: 3;
    pointer-events: none;
  }

  .hero-cat-mobile {
    display: block !important;
    position: absolute;
    /* Centred horizontally + raised so the cat (tail/paws) is fully visible and
       the CTA buttons land inside the first screen — identical in both themes. */
    left: 50% !important;
    right: auto !important;
    margin: 0;
    transform: translateX(-50%) !important;
    top: 360px;
    bottom: auto;
    width: 420px; /* current size; sits below the buttons, clipped at screen edge */
    height: auto;
    z-index: 9;
    pointer-events: none;
    order: unset;
  }

  .hero-orbit-mobile { display: none; }

  /* Badge — Figma .element-days-free: left=19, top=0, pad 10/20, #4e47dd1a,
     radius 10, border 1px #4e47dd33 */
  .hero-badge {
    position: absolute;
    left: 19px;
    top: 0;
    order: unset;
    margin: 0;
    gap: 20px;
    padding: 10px 20px;
    background: #4e47dd1a;
    border: 1px solid #4e47dd33;
    border-radius: 10px;
    z-index: 12;
  }
  .hero-badge-dot { width: 5px; height: 5px; background: #4e47dd; border-radius: 2.5px; }
  /* Badge text — 700/#4e47dd/16px/-0.48/20lh */
  .hero-badge-text { font-weight: 700; color: #4e47dd; font-size: 16px; line-height: 125%; letter-spacing: -0.48px; }

  /* Text block — Figma .group-2: top=80, left=19, width=332, gap=40.
     DOM split: line-1 in .hero-title, line-2+desc in .hero-title-block.
     Privacy →(10)→ in one click →(40)→ desc — achieved with hero-content gap
     10 and hero-title-block gap 40. */
  .hero-content {
    position: absolute;
    left: 19px;
    top: 80px;
    width: calc(100% - 38px);
    order: unset;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    z-index: 12;
  }
  /* h1: 80px, 100% lh, -4px tracking, white; "click" gets accent overrides */
  .hero-title { margin: 0; line-height: 82%; font-size: 80px; letter-spacing: -4px; color: var(--text); padding-left: 0; text-indent: 0; white-space: normal; }
  .hero-title-accent { color: #4e47dd; font-style: italic; letter-spacing: -3.2px; }
  /* Description — Figma: #94979c/18px/-0.54/60% lh */
  .hero-desc { font-size: 18px; line-height: 120%; letter-spacing: -0.54px; width: 100%; color: #94979c; margin-left: 0; }
  .hero-desc p { line-height: 120%; margin: 0 0 14px; }
  .hero-desc p:last-child { margin-bottom: 0; }
  .hero-desc br { display: none; }

  /* CTA — Figma .group-4: top=642, left=19, fluid width */
  .hero-cta {
    position: absolute;
    left: 19px;
    right: 19px;
    /* Sits just under the hero text, near the top of the first screen; the cat
       follows below it. */
    top: 290px;
    bottom: auto;
    width: 100%;
    order: unset;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 12;
  }
  /* Buttons row — fluid, left-aligned */
  .hero-buttons {
    display: flex;
    height: 70px;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 10px;
    margin-top: 10px;
  }
  /* AppStore — inline-flex flex-col h70 center pad5/20 #fff radius10 */
  .hero-btn-store {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 70px;
    padding: 5px 20px;
    background: var(--text);
    border-radius: 10px;
    flex: 0 0 auto;
    --fill-0: var(--bg);
  }
  .hero-btn-store-sub { color: var(--muted); font-size: 14px; line-height: 143%; letter-spacing: -0.42px; }
  /* AppStore label — 700/18px/-0.54 */
  .hero-btn-store-main { font-weight: 700; color: var(--bg); font-size: 18px; line-height: 111%; letter-spacing: -0.54px; gap: 5px; align-items: center; }
  .hero-btn-store-icon { width: 20px; height: 20px; flex-basis: 20px; max-width: 20px; max-height: 20px; }
  /* How it works — inline-flex h70 center gap20 pad5/20 #4e47dd radius10
     border 1px #4e47dd33 */
  .hero-btn-how {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 70px;
    padding: 5px 20px;
    gap: 20px;
    background: #4e47dd;
    border: 1px solid #4e47dd33;
    border-radius: 10px;
    flex: 0 0 auto;
  }
  /* How it works label — 700/#fff/16px/-0.48 */
  .hero-btn-how span:last-child { font-weight: 700; color: #ffffff; font-size: 16px; line-height: 125%; letter-spacing: -0.48px; }
  .hero-btn-how-arrow { width: 20px; height: 11px; flex-basis: 20px; max-width: 20px; max-height: 11px; }
  /* Note — Figma .layout: inline-flex w250 h18 center gap10. Texts
     #fff/16px/-0.48/17.6lh; dot 5×5 #4e47dd */
  .hero-note {
    display: inline-flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    line-height: 110%;
    letter-spacing: -0.48px;
    color: var(--text);
  }
  .hero-note-dot { width: 5px; height: 5px; background: #4e47dd; border-radius: 2.5px; }
}

/* ──────────────────────────────────────────────────────────────────────────
 * PAIN  —  Figma 140:222 ("2 Block" — Why do you need a VPN?).
 * Section spans page-y 1180–1660 → height 481.
 * 4 cards (440-441 × 230, p:40, rounded:10, glass bg + soft border) in two
 * columns: left at calc(8.33%+43px)=203, right at calc(66.67%-4px)=1276,
 * each column with 2 cards stacked (top:0 and top:250 within section).
 * Center cluster: heading "Why do you / need a VPN?" at top:1237 (64/center,
 * second line italic + #4E47DD), brand logo glow at top:1369.
 * ────────────────────────────────────────────────────────────────────────── */
.pain {
  position: relative;
  width: 100%;
  min-height: calc(680 * var(--u));
  background: var(--bg);
}

.pain-grid { position: static; }

.pain-card {
  position: absolute;
  width: calc(440 * var(--u));
  height: calc(230 * var(--u));
  padding: calc(40 * var(--u));
  background: var(--glass-mid);
  border: 1px solid var(--border-soft);
  border-radius: calc(10 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(35 * var(--u));
  align-items: flex-start;
  overflow: hidden;
}
.pain-card:nth-child(1) { left: calc(8.33% + (43 * var(--u))); top: calc(0 * var(--u)); }   /* Public Wi-Fi */
.pain-card:nth-child(2) { left: calc(8.33% + (43 * var(--u))); top: calc(250 * var(--u)); } /* ISP surveillance */
.pain-card:nth-child(3) { left: calc(66.67% - (4 * var(--u))); top: calc(0 * var(--u)); }   /* Blocks and censorship */
.pain-card:nth-child(4) { left: calc(66.67% - (4 * var(--u))); top: calc(250 * var(--u)); } /* Overpaying abroad */

/* Card header (75:10195 etc.) — flex row gap 20, title fills 1fr,
   icon 40×40 right. Title 32 bold #4E47DD tracking -0.96 leading none. */
.pain-card h3 {
  flex: 1 0 0;
  min-width: 0;
  margin: 0;
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 700;
  font-size: calc(32 * var(--u));
  line-height: 1;
  letter-spacing: -0.96px;
  color: var(--accent);
  order: 1;
}
/* Wrap header row using flex on the card itself via grid — easier to keep
   icon+title aligned without restructuring PHP. We use display:grid with
   2 columns where first row is icon+title and second row is description. */
.pain-card {
  display: grid;
  grid-template-columns: 1fr calc(40 * var(--u));
  grid-template-rows: auto 1fr;
  gap: calc(20 * var(--u));
  row-gap: calc(35 * var(--u));
}
.pain-card h3 { grid-column: 1; grid-row: 1; align-self: start; }
.pain-card .pain-card-icon { grid-column: 2; grid-row: 1; width: calc(40 * var(--u)); height: calc(40 * var(--u)); display: block; align-self: start; }
.pain-card .pain-card-icon svg,
.pain-card .pain-card-icon img { width: 100%; height: 100%; display: block; }
.pain-card p {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 400;
  font-size: calc(18 * var(--u));
  line-height: 1.1;
  letter-spacing: -0.54px;
  color: var(--text);
  align-self: end;
}

/* Centre heading (75:10237) — centre at (50%, 57px within section). */
.pain-title {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: calc(57 * var(--u));
  transform: translate(-50%, -50%);
  width: calc(421 * var(--u));
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 400;
  font-size: calc(64 * var(--u));
  line-height: 100%;
  letter-spacing: -3.2px;
  color: var(--text);
  text-align: center;
}
.pain-title-regular { display: block; }
.pain-title-accent {
  display: block;
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}

/* Centre logo glow (75:10236) — 180×180 container, inset -73.83% bleeds glow. */
.pain-logo {
  position: absolute;
  left: 50%;
  top: calc(190 * var(--u));
  transform: translateX(-50%);
  width: calc(180 * var(--u));
  height: calc(180 * var(--u));
  z-index: 1;
  pointer-events: none;
}
.pain-logo-inner {
  position: absolute;
  top: -73.83%;
  left: -73.83%;
  right: -73.83%;
  bottom: -73.83%;
}
.pain-logo-inner img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

/* Connector lines (75:10220 right, 75:10229 left — scaleX mirror). */
.pain-lines-right {
  position: absolute;
  left: calc(41.67% + 17 * var(--u));
  top: calc(111 * var(--u));
  width: calc(464 * var(--u));
  height: calc(261 * var(--u));
  z-index: 1;
  pointer-events: none;
}
.pain-lines-left {
  position: absolute;
  left: calc(25% + 158 * var(--u));
  top: calc(111 * var(--u));
  width: calc(179 * var(--u));
  height: calc(261 * var(--u));
  z-index: 1;
  pointer-events: none;
  transform: scaleX(-1);
}
.pain-lines-right img,
.pain-lines-left img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ──────────────────────────────────────────────────────────────────────────
 * HOW IT WORKS  —  Figma 75:10076 ("3 Block", page-y 1868–2745, height 877).
 * Centre column: iPhone mockup at calc(33.33%+104px)=744, top:0, 432×877.
 * Four surrounding step blocks:
 *   Step 1 (75:10088): left calc(8.33%+78px)=238, top:0 (badge | card)
 *   Step 2 (75:10105): left calc(66.67%-3px)=1277, top:215 (card | badge)
 *   Step 3 (75:10096): left calc(8.33%+75px)=235, top:430 (badge | card, active)
 *   Result (75:10113): left calc(66.67%-3px)=1277, top:645 (card | badge)
 * Title "How it / works" (75:10087): translate-y:-50%, left calc(66.67%-3px)=1277,
 *   top:25.5 within section (Figma top:1893.5, section starts 1868).
 * ────────────────────────────────────────────────────────────────────────── */
.how {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: calc(1072 * var(--u));
  background: var(--bg);
}

.how .section-title {
  position: absolute;
  z-index: 2;
  left: calc(66.67% - (3 * var(--u)));
  top:  calc(25.5 * var(--u));
  width: calc(315 * var(--u));
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 400;
  font-size: calc(64 * var(--u));
  line-height: 100%;
  letter-spacing: -3.2px;
  color: var(--text);
}
.how .section-title .accent {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}

/* Connector lines overlay (Figma 75:10077 — dashed lines from cards to phone). */
.steps-lines {
  position: absolute;
  left: calc(25% + (10 * var(--u)));
  top:  calc(122 * var(--u));
  width:  calc(940 * var(--u));
  height: calc(651 * var(--u));
  pointer-events: none;
  z-index: 1;
}
.steps-lines svg { width: 100%; height: 100%; display: block; }
.steps-lines svg line { transition: stroke 0.35s ease, stroke-opacity 0.35s ease; }

/* Line highlight on step hover — .how gets data-active-step from theme.js */
/* step1 (top-left) → Line 5 */
.how[data-active-step="step1"] [data-line="5"]  { stroke: var(--accent); stroke-opacity: 1; }
/* step2 (top-right) → Line 9 + Line 6 (right-top corner) + Line 8 (right vertical) + Line 7 (mid-right horizontal) */
.how[data-active-step="step2"] [data-line="9"],
.how[data-active-step="step2"] [data-line="6"],
.how[data-active-step="step2"] [data-line="8"],
.how[data-active-step="step2"] [data-line="7"]  { stroke: var(--accent); stroke-opacity: 1; }
/* step3 (bottom-left) → Line 10 + Line 12 (left vertical) + Line 11 (bottom-left horizontal) */
.how[data-active-step="step3"] [data-line="10"],
.how[data-active-step="step3"] [data-line="12"],
.how[data-active-step="step3"] [data-line="11"] { stroke: var(--accent); stroke-opacity: 1; }
/* result (bottom-right) → Line 13 only (short bottom horizontal) */
.how[data-active-step="result"] [data-line="13"] { stroke: var(--accent); stroke-opacity: 1; }

/* Markup wraps each pair of steps in .steps-col + a central .phone-wrap.
   Desktop ignores that grouping and positions every .step-item absolutely. */
.steps-inner { display: contents; }
.steps-col   { display: contents; }

/* Phone preview (Figma 75:10121 — phone shell composed from many tiny SVG
   shapes; we render the existing PNG mockup at the outer 432×877 footprint). */
.phone-wrap {
  position: absolute;
  left: calc(33.33% + (104 * var(--u)));
  top:  0;
  width:  calc(432 * var(--u));
  height: calc(877 * var(--u));
  z-index: 1;
}
.phone-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.phone-frame {
  position: relative;
  z-index: 1;
  border-radius: calc(73 * var(--u));
  overflow: hidden;
}

/* iOS-style swipe area — clipped to exact screen coordinates from Figma 75:10467.
   PHONE outer starts at left:3.32px, SCREEN inset:18.28px → total left:21.6px.
   width:425.354 - 2×18.28 = 388.8px; height:877.957 - 2×18.28 = 841.4px. */
.phone-screen-area {
  position: absolute;
  z-index: 2;
  left:   calc(21.6 * var(--u));
  top:    calc(18.28 * var(--u));
  width:  calc(388.8 * var(--u));
  height: calc(841.4 * var(--u));
  border-radius: calc(54.831 * var(--u));
  overflow: hidden;
}
.screen-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

/* Step item layout — flex row, badge + card, gap 20. */
.step-item {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  gap: calc(20 * var(--u));
  cursor: pointer;
}
.step-item[data-step="step1"]   { left: calc(8.33% + (78 * var(--u))); top: 0; }
.step-item[data-step="step2"]   { left: calc(66.67% - (3 * var(--u))); top: calc(215 * var(--u)); flex-direction: row-reverse; }
.step-item[data-step="step3"]   { left: calc(8.33% + (75 * var(--u))); top: calc(430 * var(--u)); }
.step-item[data-step="result"]  { left: calc(66.67% - (3 * var(--u))); top: calc(645 * var(--u)); flex-direction: row-reverse; }

/* Step badge pill (75:10089/97/111/119). Default: glass-white + muted.
   Step 3 (active): glass-purple + accent. */
.step-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(10 * var(--u)) calc(20 * var(--u));
  background: linear-gradient(var(--surface), var(--surface)), var(--bg);
  border: 1px solid var(--surface-border);
  border-radius: calc(10 * var(--u));
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 700;
  font-size: calc(18 * var(--u));
  line-height: 20px;
  letter-spacing: -0.54px;
  color: var(--muted);
  text-transform: uppercase;
  white-space: nowrap;
}
.step-item.is-active .step-num {
  background: linear-gradient(var(--glass-mid), var(--glass-mid)), var(--bg);
  border-color: var(--border-soft);
  color: var(--accent);
}

/* Step card (75:10091/106/099/115). Default: glass-white + #94979C title.
   Step 3 (active): glass-purple + #4E47DD title + white body. */
.step-card {
  flex-shrink: 0;
  width: calc(286 * var(--u));
  padding: calc(40 * var(--u));
  background: linear-gradient(var(--surface), var(--surface)), var(--bg);
  border: 1px solid var(--surface-border);
  border-radius: calc(10 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--u));
  transition: border-color 0.2s ease, background 0.2s ease;
}
.step-card-header {
  display: flex;
  align-items: flex-start;
  gap: calc(40 * var(--u));
  width: 100%;
}
.step-card-header h3 {
  flex: 1 0 0;
  min-width: 0;
}
.step-card-icon {
  flex-shrink: 0;
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  max-width: none;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.step-item.is-active .step-card-icon,
.step-card:hover .step-card-icon { opacity: 1; }
.step-card h3 {
  margin: 0;
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 700;
  font-size: calc(32 * var(--u));
  line-height: 1;
  letter-spacing: -0.96px;
  color: var(--muted);
  transition: color 0.2s ease;
}
.step-card p {
  margin: 0;
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 400;
  font-size: calc(18 * var(--u));
  line-height: 1.1;
  letter-spacing: -0.54px;
  color: var(--muted);
  transition: color 0.2s ease;
}
.step-item.is-active .step-card {
  background: linear-gradient(var(--glass-mid), var(--glass-mid)), var(--bg);
  border-color: var(--border-soft);
}
.step-item.is-active .step-card h3 { color: var(--accent); }
.step-item.is-active .step-card p  { color: var(--text); }
.step-card:hover {
  border-color: var(--border-soft);
  background: linear-gradient(var(--glass-mid), var(--glass-mid)), var(--bg);
}
.step-card:hover h3 { color: var(--accent); }
.step-card:hover p  { color: var(--text); }

/* Mobile Swiper — hidden on desktop, shown on mobile */
.phone-mobile-wrap { display: none; }
.phone-mobile-slider { display: none !important; }
.how-step-indicator { display: none; }

@media (max-width: 768px) {
  .how { min-height: 0; overflow: visible; }
  .steps-lines   { display: none !important; }
  .step-item, .phone-wrap { display: none !important; }
  .how .section-title { display: none !important; }
  .phone-mobile-wrap { display: block; }
  .phone-mobile-slider { display: block !important; padding-bottom: calc(30px + 2rem); }
  .swiper-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0 20px;
  }
  .mobile-step-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
  }
  /* Step num badge: Figma px-20 py-10, rounded-10, glass-mid bg, accent text */
  .mobile-step-card .step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background: var(--glass-mid);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    font-family: 'SF Pro Display', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.48px;
    color: var(--accent);
    text-transform: uppercase;
    width: fit-content;
  }
  .mobile-step-card.is-active .step-num { color: var(--accent); }
  .mobile-step-card .step-card {
    width: 100%;
    padding: 20px;
    border-radius: 10px;
    gap: 20px;
    background: rgba(78,71,221,0.1);
    border: 1px solid rgba(78,71,221,0.2);
  }
  .mobile-step-card .step-card .step-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 20px;
  }
  .mobile-step-card .step-card .step-card-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: 1;
  }
  .mobile-step-card .step-card h3 { font-size: 24px; letter-spacing: -0.72px; color: var(--accent); flex: 1; }
  .mobile-step-card .step-card p  { font-size: 16px; color: var(--text); }
  .mobile-step-card.is-active .step-card { background: rgba(78,71,221,0.1); border: 1px solid rgba(78,71,221,0.2); }
  .mobile-step-card.is-active .step-card h3 { color: var(--accent); }
  .mobile-step-card.is-active .step-card p  { color: var(--text); }
  /* Static phone frame with swapping inner screens (mobile "How it works") */
  .phone-mobile-frame-wrap {
    position: relative;
    width: 216.615px;
    height: 447.108px;
    margin: 0 auto;
  }
  .phone-mobile-frame {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    position: relative;
    z-index: 1;
  }
  .phone-mobile-screen-area {
    position: absolute;
    z-index: 2;
    left: 10.83px;
    top: 9.16px;
    width: 194.87px;
    height: 426px;
    border-radius: 27.5px;
    overflow: hidden;
  }
  .phone-mobile-screen-area .screen-img {
    object-fit: fill;
  }
  /* Arrow nav buttons — outside swiper (overflow:hidden), inside wrapper */
  .phone-mobile-wrap { position: relative; }
  .swiper-slide { padding: 0; }
  .mobile-slider-prev,
  .mobile-slider-next {
    position: absolute;
    top: 224px;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    background: var(--surface-border);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    padding: 0;
    transition: background 0.2s;
  }
  .mobile-slider-prev { left: 0; }
  .mobile-slider-next { right: 0; }
  .mobile-slider-prev:hover,
  .mobile-slider-next:hover { background: #4e47dd; }
  .mobile-slider-prev.swiper-button-disabled,
  .mobile-slider-next.swiper-button-disabled { opacity: 0.3; pointer-events: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
 * FEATURES  —  Figma 79:2021 ("4 Block", page-y 2940–3638, height 698).
 * Full-bleed code-pattern background, then 4 feature cards in 2×2 grid:
 *   Card 1 (Military):     left calc(8.33%+137px)=297, top:238 [icon | card]
 *   Card 2 (Max speed):    left calc(8.33%+137px)=297, top:478 [icon | card]
 *   Card 3 (500+ servers): left calc(41.67%+15px)=815, top:238 [card | icon, ACTIVE]
 *   Card 4 (Zero-log):     left calc(41.67%+15px)=815, top:478 [card | icon]
 * Heading "Everything / for your protection" at top-right.
 * ────────────────────────────────────────────────────────────────────────── */
.features {
  position: relative;
  width: 100%;
  min-height: calc(710 * var(--u));
  background: var(--bg);
}

/* Code/hex background (Figma 140:1233) — full-width, centered, absolute. */
.features-code-bg {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: calc(1920 * var(--u));
  height: calc(635 * var(--u));
  pointer-events: none;
  z-index: 0;
}
.features-code-bg svg { width: 100%; height: 100%; display: block; }
.features-code-bg--mob { display: none; }

/* Section heading (75:10263) — "Everything" italic accent above, then
   "for your protection" white. Both stacked at top-right area. */
.features .section-title {
  position: absolute;
  z-index: 2;
  left: calc(66.67% - (3 * var(--u)));
  top:  calc(127 * var(--u));
  width: calc(543 * var(--u));
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 400;
  font-size: calc(64 * var(--u));
  line-height: 90%;
  letter-spacing: -3.2px;
  color: var(--text);
}
.features .section-title .accent {
  display: block;
  font-style: italic;
  color: var(--accent);
}
.features .section-title .regular {
  display: block;
  margin-left: calc(153 * var(--u));
  width: calc(390 * var(--u));
  color: var(--text);
  font-style: normal;
}
/* The 153u indent is tuned for EN "Everything"; translated accent words are
   much shorter, so the white line looked detached far to the right. Pull it in
   under the accent word, but keep it clear of the right-column feature icon
   (its right edge is ~51u from the title's left). 62u clears the icon with a
   small gap and sits under the 2nd–3rd letter of every translated accent word.
   Desktop only — mobile flows the heading inline. */
@media (min-width: 769px) {
  html:not([lang|="en"]) .features .section-title .regular { margin-left: calc(62 * var(--u)); }
  html[lang|="pl"] .features .section-title .regular { width: calc(457 * var(--u)); }
  html[lang|="pt"] .features .section-title .regular { width: calc(439 * var(--u)); }
  /* EN "How it works" fits on one line; translated headings wrap to two and the
     accent word dropped onto the dashed connector line. Raise the non-EN steps
     heading into the empty space above so the lower line clears the lines. */
  html:not([lang|="en"]) .how .section-title { top: calc(-6 * var(--u)); }
  /* CTA card has a fixed height with overflow:hidden. pl/pt titles wrap to three
     lines (vs two elsewhere), pushing the app buttons past the clip. Give those
     two a taller card so the buttons stay visible. Other languages use 688u. */
  html[lang|="pl"] .cta-card,
  html[lang|="pt"] .cta-card { height: calc(790 * var(--u)); }
  /* The card grew by 102u (790-688); the phone, its fade strip and both glow
     layers are top-anchored, so push them down by the same amount to keep them
     against the bottom edge like every other language. */
  html[lang|="pl"] .cta-phones,      html[lang|="pt"] .cta-phones,
  html[lang|="pl"] .cta-phones-fade, html[lang|="pt"] .cta-phones-fade,
  html[lang|="pl"] .cta-glow-1,      html[lang|="pt"] .cta-glow-1,
  html[lang|="pl"] .cta-glow-2,      html[lang|="pt"] .cta-glow-2 {
    transform: translateY(calc(102 * var(--u)));
  }
  /* Align both prices to the same vertical level on every language (Figma:
     monthly price 75:10295 and yearly price 75:10306 both sit at y199 from the
     card top). Yearly: fixed header height 124u + the is-best 35u gap lands the
     price at 199u. Monthly: reserve the name block (119u) + a 40u gap so the
     price lands at the same 199u instead of being floated to the card bottom by
     margin-top:auto. */
  /* html-prefixed to outrank the later base .pricing-card rules at equal class
     specificity (media queries add no specificity, so source order would
     otherwise let the base win). */
  html .pricing-card-header { height: calc(124 * var(--u)); }
  html .pricing-card:not(.is-best) .pricing-name { height: calc(119 * var(--u)); }
  html .pricing-card:not(.is-best) .pricing-price { margin-top: calc(40 * var(--u)); }
  /* Yearly: replace the uniform 35u flex gap (which inflated the card to ~470u)
     with explicit Figma spacing — header→price 35u (price lands at y199),
     price→discount 20u (discount at y270), discount→note 10u (note at y310).
     With a 1-line note this brings the card back to its Figma 370u height. */
  html .pricing-card.is-best { gap: 0; }
  html .pricing-card.is-best .pricing-price { margin-top: calc(35 * var(--u)); margin-bottom: 0; }
  html .pricing-card.is-best .pricing-discount { margin-top: calc(20 * var(--u)); margin-bottom: 0; }
  html .pricing-card.is-best .pricing-note { margin-top: calc(10 * var(--u)); }
}

/* Features grid — contents wrapper that hosts absolutely-positioned items. */
.features-grid { display: contents; }

.feature-item {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: calc(20 * var(--u));
}
.feature-item:nth-child(1) { left: calc(8.33% + (137 * var(--u))); top: calc(238 * var(--u)); }
.feature-item:nth-child(2) { left: calc(8.33% + (137 * var(--u))); top: calc(478 * var(--u)); }
.feature-item:nth-child(3) { left: calc(41.67% + (15 * var(--u)));  top: calc(238 * var(--u)); flex-direction: row-reverse; }
.feature-item:nth-child(4) { left: calc(41.67% + (15 * var(--u)));  top: calc(478 * var(--u)); flex-direction: row-reverse; }

.feature-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 5px;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  gap: 10px;
  --fill-0: #94979C;
}
.feature-icon svg, .feature-icon img { width: 100%; height: 100%; display: block; }
/* Icon paths follow --fill-0 (grey → accent on hover); only the icon, not the square */
.feature-icon svg path { fill: var(--fill-0, #94979C); transition: fill 0.2s ease; }
.feature-item:hover .feature-icon { --fill-0: var(--accent); }
.feature-item:hover .feature-card { border-color: var(--border-soft); }

.feature-card {
  flex-shrink: 0;
  width: calc(440 * var(--u));
  height: calc(220 * var(--u));
  padding: calc(40 * var(--u));
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: calc(10 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
}
.feature-card h3 {
  margin: 0;
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 700;
  font-size: calc(32 * var(--u));
  line-height: 1;
  letter-spacing: -0.96px;
  color: var(--text);
}
.feature-card p {
  margin: 0;
  flex: 1 0 0;
  display: flex;
  align-items: flex-end;
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 400;
  font-size: calc(18 * var(--u));
  line-height: 1.1;
  letter-spacing: -0.54px;
  color: var(--muted);
}

/* Active card (hover): glass purple bg, accent title, purple icon. */
.feature-item.is-active .feature-card {
  background: var(--glass-mid);
  border-color: var(--border-soft);
}
.feature-item.is-active .feature-card h3 { color: var(--accent); }
.feature-item.is-active .feature-card p  { color: var(--text); }
.feature-item.is-active .feature-icon { --fill-0: #4E47DD; }

/* ──────────────────────────────────────────────────────────────────────────
 * PRICING  —  Figma 75:10282 ("5 Block", page-y 3772–4293, height 521).
 * Left: heading "Simple and fair pricing" + sub "First 7 days free for all plans".
 * Right: 2 cards (Monthly + Yearly), Yearly active. Cat head + paw + glow.
 * ────────────────────────────────────────────────────────────────────────── */
.pricing {
  position: relative;
  width: 100%;
  min-height: calc(838 * var(--u));
  background: var(--bg);
  scroll-margin-top: calc(120 * var(--u));
}

/* Purple glow behind cat (Figma 75:10283) — CSS radial-gradient replacement.
   Container 180px at left(50%+96), top(51). Image extends 132.5% all sides →
   effective glow center at left(50%+186), top(141), radius ~330px. */
.pricing-glow {
  position: absolute;
  left: calc(50% + (186 * var(--u)));
  top:  calc(141 * var(--u));
  transform: translate(-50%, -50%);
  width:  calc(660 * var(--u));
  height: calc(660 * var(--u));
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(78,71,221,0.45) 0%, rgba(78,71,221,0.2) 35%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Small focused glow directly behind cat — 180×180px centered on cat body */
.pricing-cat-glow {
  position: absolute;
  left: calc(33.33% + (420 * var(--u)));
  top:  calc(200 * var(--u));
  transform: translate(-50%, -50%);
  width:  calc(180 * var(--u));
  height: calc(180 * var(--u));
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(78,71,221,0.7) 0%, rgba(78,71,221,0.35) 50%, transparent 80%);
  pointer-events: none;
  z-index: 1;
  filter: blur(calc(20 * var(--u)));
}

/* Desktop cat — HEAD (Figma 75:10288): right:calc(33.33%+23px), top:117, 286×151, scaleX(-1) */
.pricing-cat-desk-head {
  position: absolute;
  right: calc(33.33% + (23 * var(--u)));
  top:  calc(117 * var(--u));
  width:  calc(286 * var(--u));
  height: calc(151 * var(--u));
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
  transform: scaleX(-1);
}
.pricing-cat-desk-head img {
  position: absolute;
  width: 142.23%; height: 183.62%;
  left: -4.81%; top: -50.85%;
  max-width: none; display: block;
}
/* Desktop cat — PAW (Figma 75:10314): left:calc(50%+11px), top:268, 439×370 */
.pricing-cat-desk-paw {
  position: absolute;
  left: calc(50% + (11 * var(--u)));
  top:  calc(268 * var(--u));
  width:  calc(439 * var(--u));
  height: calc(370 * var(--u));
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.pricing-cat-desk-paw img {
  position: absolute;
  width: 92.71%; height: 92.45%;
  left: 5.50%; top: -0.01%;
  max-width: none; display: block;
}
/* Mobile cat elements — hidden on desktop */
.pricing-cat-mob { display: none; }
.pricing-cat-mob-glow { display: none; }

/* Heading (75:10285) — Figma center y=54, but fixed nav=120px hides it.
   Shifted to top=130 (below nav), same as features pattern (y=127).
   left calc(16.67%+37px)=357, w 440, font 64, tracking -3.2, leading 0.8. */
.pricing .section-title {
  position: absolute;
  z-index: 2;
  left: calc(16.67% + (37 * var(--u)));
  top:  calc(130 * var(--u));
  width: calc(440 * var(--u));
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 400;
  font-size: calc(64 * var(--u));
  line-height: 100%;
  letter-spacing: -3.2px;
  color: var(--text);
}
.pricing .section-title .accent {
  font-style: italic;
  color: var(--accent);
}

/* Sub copy (75:10286) — Figma top:150, shifted to 277 (title bottom 232 + 45px gap). */
.pricing-sub {
  position: absolute;
  z-index: 2;
  left: calc(16.67% + (37 * var(--u)));
  top:  calc(277 * var(--u));
  width: calc(215 * var(--u));
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 400;
  font-size: calc(32 * var(--u));
  line-height: 90%;
  letter-spacing: -0.96px;
  color: var(--muted);
}
.pricing-sub br { line-height: 14px; }

/* Cards row — left calc(33.33%+23.5px), top:268 (Figma 43:1194), w 593. */
.pricing-cards {
  position: absolute;
  z-index: 2;
  left: calc(33.33% + (23.5 * var(--u)));
  top:  calc(268 * var(--u));
  width: calc(593 * var(--u));
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  height: auto;
}

/* Pricing Swiper — Swiper CSS from CDN clips cards on desktop because the
 * .swiper wrapper applies overflow:hidden + each .swiper-slide forces 100%
 * width. JS only inits Swiper at <=768px, so unwind those styles on desktop
 * and let the existing .pricing-cards (absolute, 2-col flex) layout take over.
 * On mobile (<=768px) Swiper init re-applies its own sliding behaviour.
 *
 * Selectors are doubled (`.pricing-swiper.swiper`) so they beat the CDN's
 * `.swiper {…}` rules — that stylesheet is enqueued after ours, so a plain
 * single-class selector loses the cascade tie. */
/* Pricing swiper: desktop uses absolute 2-col layout; mobile uses Swiper JS.
   Desktop rules are scoped to min-width:769px so the transform:none doesn't
   block Swiper's inline translate on mobile (CSS !important beats inline styles). */
@media (min-width: 769px) {
  .pricing-swiper.swiper {
    display: contents;
    overflow: visible;
    width: auto;
  }
  .pricing-swiper.swiper > .swiper-wrapper {
    position: absolute;
    z-index: 1;
    left: calc(33.33% + (23.5 * var(--u)));
    top:  calc(268 * var(--u));
    width: calc(593 * var(--u));
    /* Swiper CDN sets height:100% on .swiper-wrapper, which fills the whole
     * pricing section; combined with align-items:flex-end this dumped the
     * cards into the very bottom of the section (visible in the Y of the cat
     * decoration). Override to size to content. */
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    transform: none;
    box-sizing: border-box;
  }
  .pricing-swiper.swiper > .swiper-wrapper > .swiper-slide {
    flex-shrink: 0;
    width: auto;
    height: auto;
    display: flex;
  }
  .pricing-swiper-pagination { display: none; }
}

.pricing-card {
  flex-shrink: 0;
  width: calc(287 * var(--u));
  min-height: calc(370 * var(--u));
  padding: calc(40 * var(--u));
  border-radius: calc(10 * var(--u));
  background: var(--surface);
  border: 1px solid var(--surface-border);
  display: flex;
  flex-direction: column;
}
/* Dark (Figma 75:10298): translucent purple glass, purple title, accent badge. */
.pricing-card.is-best {
  background: rgba(78, 71, 221, 0.1);
  border-color: rgba(78, 71, 221, 0.2);
  gap: calc(35 * var(--u));
}
/* Light: highlighted card sits on solid accent → all text white. */
[data-theme="light"] .pricing-card.is-best {
  background: #4E47DD;
  border-color: transparent;
}
[data-theme="light"] .pricing-card.is-best .pricing-name,
[data-theme="light"] .pricing-card.is-best .pricing-currency,
[data-theme="light"] .pricing-card.is-best .pricing-amount,
[data-theme="light"] .pricing-card.is-best .pricing-period,
[data-theme="light"] .pricing-card.is-best .pricing-note,
[data-theme="light"] .pricing-card.is-best .pricing-note-white { color: #fff; }
[data-theme="light"] .pricing-card.is-best .pricing-old { color: rgba(255, 255, 255, 0.6); }

/* Header for the Yearly card (75:10302) — title + "Best value" badge. */
.pricing-card-header {
  display: flex;
  align-items: flex-start;
  width: calc(220 * var(--u));
}
/* Inner row: name + badge side by side, badge vertically centred relative to
   the plan-name text block regardless of how many lines the badge wraps to. */
.pricing-name-row {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  justify-content: space-between;
}
.pricing-name-row .pricing-name { flex: 0 0 auto; width: calc(68 * var(--u)); }
/* Cap the badge so long translated labels (RU "ВЫГОДНЕЕ ВСЕГО", PL "NAJLEPSZA
   WARTOŚĆ") wrap inside the pill instead of stealing the title's width and
   shoving "Premium" under the badge. EN "Best value" stays one line. */
.pricing-badge { flex: 0 0 auto; width: fit-content; }
.pricing-badge {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding: calc(5 * var(--u)) calc(10 * var(--u));
  background: var(--accent);
  border-radius: calc(10 * var(--u));
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 700;
  font-size: calc(14 * var(--u));
  line-height: 1.2;
  letter-spacing: -0.42px;
  color: #fff;
  text-transform: uppercase;
  white-space: normal;
  text-align: left;
}
/* Light theme: badge sits on solid purple card → translucent white. */
[data-theme="light"] .pricing-badge { background: rgba(255, 255, 255, 0.20); }

/* Plan name (75:10294 Monthly / 75:10303 Premium Yearly) — 18 bold, color
   varies by state. */
.pricing-name {
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 700;
  font-size: calc(18 * var(--u));
  line-height: 1;
  letter-spacing: -0.54px;
  color: var(--muted);
}
.pricing-card.is-best .pricing-name { color: var(--accent); }
[data-theme="light"] .pricing-card.is-best .pricing-name { color: #fff; }
/* Light theme: monthly (left) card copy goes solid dark, not muted grey. */
[data-theme="light"] .pricing-name,
[data-theme="light"] .pricing-period,
[data-theme="light"] .pricing-note { color: var(--text); }

/* Price row (75:10296 / 75:10307) — $ 32 #4E47DD + amount 64 white +
   period 18 #94979C, all on the same baseline (leading 0.8). */
.pricing-price {
  margin-top: auto;
  margin-bottom: calc(40 * var(--u));
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -3.2px;
}
.pricing-card.is-best .pricing-price {
  margin-top: 0;
  margin-bottom: calc(20 * var(--u));
}
.pricing-currency {
  font-size: calc(32 * var(--u));
  line-height: 0.8;
  letter-spacing: -0.96px;
  color: var(--accent);
}
.pricing-amount {
  font-size: calc(64 * var(--u));
  line-height: 0.8;
}
.pricing-period {
  font-size: calc(18 * var(--u));
  line-height: 0.8;
  letter-spacing: -0.54px;
  color: var(--muted);
  margin-left: calc(2 * var(--u));
}

/* Discount row (75:10309) — old price line-through opacity-60 + green pill. */
.pricing-discount {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  margin-bottom: calc(10 * var(--u));
}
.pricing-old {
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 400;
  font-size: calc(18 * var(--u));
  line-height: 1.1;
  letter-spacing: -0.54px;
  color: var(--accent);
  opacity: 0.6;
  text-decoration: line-through;
}
.pricing-save {
  display: inline-flex;
  align-items: center;
  padding: calc(5 * var(--u)) calc(10 * var(--u));
  background: rgba(52, 199, 89, 0.1);
  border-radius: calc(10 * var(--u));
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 700;
  font-size: calc(18 * var(--u));
  line-height: 20px;
  letter-spacing: -0.54px;
  color: #34C759;
  text-transform: uppercase;
}
/* Light theme: solid green pill, white text. */
[data-theme="light"] .pricing-save { background: #34C759; color: #fff; }

/* Note text (75:10297 / 75:10313). */
.pricing-note {
  margin: 0;
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 400;
  font-size: calc(18 * var(--u));
  line-height: 1.1;
  letter-spacing: -0.54px;
  color: var(--muted);
}
.pricing-note-white { color: var(--text); }
.pricing-card .pricing-note { width: 100%; }
.pricing-nav { display: none; }

/* ──────────────────────────────────────────────────────────────────────────
 * FINAL CTA — Figma 75:10315 ("6 Block", top=4493, 1820×648px card).
 * Card: left=50px, width=1820px, height=688px, bg rgba(78,71,221,0.1),
 *   border rgba(78,71,221,0.2), border-radius 10px, overflow hidden.
 * Logo: left=calc(33.33%+91px), top=80px, 229×52px.
 * Text: left=calc(58.33%+3px), top=80px, width=555px.
 * Phones: left=calc(8.33%+43px), top=72px, 757×574.59px.
 * ────────────────────────────────────────────────────────────────────────── */
.final-cta {
  position: relative;
  width: 100%;
  min-height: calc(888 * var(--u));
  background: var(--bg);
}

.cta-card {
  position: absolute;
  left: calc(50 * var(--u));
  top: 0;
  width: calc(1820 * var(--u));
  height: calc(688 * var(--u));
  background: rgba(78, 71, 221, 0.10);
  border: 1px solid rgba(78, 71, 221, 0.20);
  border-radius: calc(10 * var(--u));
  overflow: hidden;
}
/* Glow layer 1 — Figma 75:10319: 5 blurred ellipses, #4E47DD, normal blend.
   Container 824×646 sits in phone zone; img extends 500px in all directions (viewBox 1824×1646). */
.cta-glow-1 {
  position: absolute;
  left:   calc(119 * var(--u));
  top:    calc(177 * var(--u));
  width:  calc(824 * var(--u));
  height: calc(646 * var(--u));
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}
.cta-glow-1 img {
  position: absolute;
  top:    -77.39%;
  left:   -60.68%;
  width:  221.36%;
  height: 254.78%;
  display: block;
  max-width: none;
}

/* Glow layer 2 — Figma 75:10325: blob path + Gaussian blur, #ABA7FF, color-dodge.
   Color-dodge against card background creates vivid purple brightening in phone area. */
.cta-glow-2 {
  position: absolute;
  left:   calc(133 * var(--u));
  top:    calc(150 * var(--u));
  width:  calc(835 * var(--u));
  height: calc(527 * var(--u));
  mix-blend-mode: color-dodge;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}
.cta-glow-2 img {
  position: absolute;
  top:    -20.53%;
  left:   -12.96%;
  width:  125.92%;
  height: 141.06%;
  display: block;
  max-width: none;
}
.cta-card::before,
.cta-card::after { content: none; }

.cta-phones {
  position: absolute;
  left: calc(8.33% + (43 * var(--u)));
  top:  calc(114 * var(--u));
  width:  calc(757 * var(--u));
  height: calc(574 * var(--u));
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.cta-phones img {
  position: absolute;
  width: 100%;
  height: 176.94%;
  top: -0.02%;
  left: 0;
  max-width: none;
}

/* Dark strip to hide the bottom portion of phones at the card edge */
.cta-phones-fade {
  position: absolute;
  left: calc(8.33% + (43 * var(--u)));
  top:  calc(473 * var(--u));
  width:  calc(339 * var(--u));
  height: calc(215 * var(--u));
  background: #0d0e12;
  pointer-events: none;
}

/* Mobile phones image + glow layers: hidden on desktop, shown at <=768px. */
.cta-phones-mobile { display: none; }
.cta-mob-glow-l1, .cta-mob-glow-l2 { display: none; }

.cta-logo {
  position: absolute;
  left: calc(33.33% + (91 * var(--u)));
  top:  calc(80 * var(--u));
  width:  calc(229 * var(--u));
  height: calc(52 * var(--u));
  z-index: 2;
}
.cta-logo img,
.cta-logo svg { display: block; width: 100%; height: 100%; }

.cta-text {
  position: absolute;
  left: calc(58.33% + (3 * var(--u)));
  top:  calc(80 * var(--u));
  width: calc(555 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(80 * var(--u));
  align-items: flex-start;
}

.cta-heading {
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--u));
  align-items: flex-start;
  width: 100%;
}

.cta-title {
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 400;
  font-size: calc(120 * var(--u));
  line-height: 80%;
  letter-spacing: -6px;
  color: var(--text);
}
.cta-title em {
  font-style: italic;
  color: var(--accent);
}

.cta-desc {
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 400;
  font-size: calc(32 * var(--u));
  line-height: 90%;
  letter-spacing: -0.96px;
  color: var(--muted);
  width: calc(555 * var(--u)); /* fit "…MonoVPN —" on line 1 so the <br> gives a clean 2-line layout */
}
.cta-desc strong { color: var(--text); font-weight: 400; }

.cta-buttons {
  display: flex;
  gap: calc(20 * var(--u));
  align-items: flex-end;
}

.cta-btn-appstore {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(4 * var(--u));
  height: calc(70 * var(--u));
  padding: calc(5 * var(--u)) calc(30 * var(--u));
  background: var(--text);
  border-radius: calc(10 * var(--u));
  flex-shrink: 0;
  text-decoration: none;
  transition: transform .2s ease, opacity .2s ease;
}
.cta-btn-appstore:hover { transform: translateY(-2px); opacity: 0.9; }
.cta-btn-appstore .btn-sub {
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 400;
  font-size: calc(14 * var(--u));
  line-height: 20px;
  letter-spacing: -0.42px;
  color: var(--muted);
}
.cta-btn-appstore .btn-main {
  display: flex;
  align-items: center;
  gap: calc(5 * var(--u));
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 700;
  font-size: calc(18 * var(--u));
  line-height: 20px;
  letter-spacing: -0.54px;
  color: var(--bg);
}
.cta-btn-appstore .btn-icon,
.cta-btn-appstore .btn-main > svg {
  width: calc(16 * var(--u));
  height: calc(20 * var(--u));
  display: block;
  flex: none;
}

.cta-btn-soon {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  align-items: center;
  flex-shrink: 0;
}
.cta-btn-soon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(10 * var(--u)) calc(20 * var(--u));
  background: rgba(78, 71, 221, 0.10);
  border: 1px solid rgba(78, 71, 221, 0.20);
  border-radius: calc(10 * var(--u));
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 700;
  font-size: calc(18 * var(--u));
  line-height: 20px;
  letter-spacing: -0.54px;
  color: var(--accent);
  text-transform: uppercase;
}
.cta-btn-soon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(5 * var(--u));
  height: calc(70 * var(--u));
  padding: calc(10 * var(--u)) calc(30 * var(--u));
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: calc(10 * var(--u));
  text-decoration: none;
  min-width: calc(164 * var(--u));
  transition: background .2s ease, transform .2s ease;
}
.cta-btn-soon-btn:hover { background: var(--surface-strong); transform: translateY(-2px); }
.cta-btn-soon-btn .btn-sub {
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 400;
  font-size: calc(14 * var(--u));
  line-height: 20px;
  letter-spacing: -0.42px;
  color: var(--muted);
}
.cta-btn-soon-btn .btn-row {
  display: flex;
  align-items: center;
  gap: calc(5 * var(--u));
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 700;
  font-size: calc(18 * var(--u));
  line-height: 20px;
  letter-spacing: -0.54px;
  color: var(--muted);
}
.cta-btn-soon-btn .btn-icon,
.cta-btn-soon-btn .btn-row > svg {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  display: block;
  flex: none;
}

/* ──────────────────────────────────────────────────────────────────────────
 * FOOTER — Figma 140:1239 ("Footer", bottom of 5836px frame).
 * Structure: flex-col gap-80, pb-50, centered.
 *   - Line: 1px border top
 *   - Menu: flex row gap-271 with 4 col groups + logo
 *   - Info: copyright + email row
 * ────────────────────────────────────────────────────────────────────────── */
.footer {
  position: relative;
  width: 100%;
  padding-top: calc(80 * var(--u));
  padding-bottom: calc(50 * var(--u));
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(80 * var(--u));
}

.footer-line {
  width: 100%;
  height: 1px;
  background: rgba(78, 71, 221, 0.20);
}

/* Footer uses standard container on desktop (max-width 1440px). Mobile override below in media query. */

.footer-menu {
  position: relative;
  width: calc(1514 * var(--u));
  height: calc(245 * var(--u));
  flex-shrink: 0;
}

.footer-col-group {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.footer-col-1 { left: 0; }
.footer-col-2 { left: calc(306 * var(--u)); }
.footer-col-3 { left: calc(613 * var(--u)); }
.footer-col-4 { left: calc(918 * var(--u)); }

.footer-col-title {
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 400;
  font-size: calc(32 * var(--u));
  line-height: 0.8;
  letter-spacing: -1.6px;
  color: var(--text);
  width: calc(191 * var(--u));
}

.footer-col-links {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
  align-items: flex-start;
  margin-top: calc(75 * var(--u));
  width: calc(139 * var(--u));
}
.footer-col-links a {
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 400;
  font-size: calc(18 * var(--u));
  line-height: 1.1;
  letter-spacing: -0.54px;
  color: var(--muted);
  text-decoration: none;
  display: block;
  width: 100%;
  transition: color 0.2s;
}
.footer-col-links a:hover { color: var(--text); }
.footer-col-links a.active { color: var(--muted); }

.footer-soon-row {
  display: flex;
  gap: calc(20 * var(--u));
  align-items: center;
  width: 100%;
}
.footer-soon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(5 * var(--u)) calc(15 * var(--u));
  background: rgba(78, 71, 221, 0.10);
  border: 1px solid rgba(78, 71, 221, 0.20);
  border-radius: calc(10 * var(--u));
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 700;
  font-size: calc(14 * var(--u));
  line-height: 20px;
  letter-spacing: -0.42px;
  color: var(--accent);
  text-transform: uppercase;
  white-space: nowrap;
}

.footer-social-row {
  display: flex;
  gap: calc(20 * var(--u));
  align-items: flex-start;
  margin-top: calc(75 * var(--u));
}
.footer-social-icon {
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  display: block;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: calc(8 * var(--u));
  border: 1px solid var(--surface-border);
  background: var(--surface);
  transition: border-color 0.2s ease, background 0.2s ease;
}
a.footer-social-icon:hover {
  border-color: var(--accent);
  background: var(--glass-mid);
  --fill-0: var(--accent);
}
/* Light theme: solid accent square with a white icon on hover. */
[data-theme="light"] a.footer-social-icon:hover {
  background: var(--accent);
  border-color: var(--accent);
  --fill-0: #fff;
}
.footer-social-icon img,
.footer-social-icon svg { width: 100%; height: 100%; display: block; }

.footer-logo-wrap {
  position: absolute;
  left: calc(1380 * var(--u));
  top: 0;
  height: calc(30 * var(--u));
  width: calc(134 * var(--u));
  flex-shrink: 0;
}
.footer-logo-wrap img,
.footer-logo-wrap svg { width: 100%; height: 100%; display: block; }

.footer-bottom {
  display: flex;
  width: 100%;
  position: relative;
  padding-top: calc(80 * var(--u));
}
.footer-bottom-left { display: contents; }
.footer-bottom-logo { display: none; }
.footer-copy {
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 400;
  font-size: calc(18 * var(--u));
  line-height: 1.1;
  letter-spacing: -0.54px;
  color: var(--muted);
  opacity: 0.5;
  margin-left: 0;
}
.footer-email {
  position: absolute;
  right: calc(50 * var(--u));
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 400;
  font-size: calc(18 * var(--u));
  line-height: 1.1;
  letter-spacing: -0.54px;
  color: var(--muted);
  opacity: 0.5;
  text-decoration: none;
  text-align: right;
}

/* ===================================================================
 * LOCATIONS PAGE — Figma node 75:10478 (1920×3438).
 * Hero: 160px display type, staggered two-line layout.
 * Stats: 4 accent cards, 287px each, 20px gap.
 * Table: 1208px centered, 3 cols (Country 440 / Speed 133 / Protocols 1fr).
 * Mobile: pending (Bogdan to provide Figma mobile node).
 * =================================================================== */

.loc-page {
  position: relative;
  width: 100%;
  background: var(--bg);
  padding-top: calc(200 * var(--u));
  padding-bottom: calc(160 * var(--u));
}

/* ── Globe & glow decorations ──────────────────────────────────────────── */
.loc-globe {
  position: absolute;
  top: 0; right: 0;
  width: calc(1103 * var(--u));
  height: calc(1199 * var(--u));
  pointer-events: none;
  z-index: 0;
}
.loc-globe img {
  width: 100%; height: 100%;
  display: block; max-width: none;
}
.loc-glow {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: calc(1680 * var(--u));
  height: calc(3344 * var(--u));
  pointer-events: none;
  z-index: 0;
}
.loc-glow img {
  width: 100%; height: 100%;
  display: block; max-width: none;
}

/* ── Hero heading — two staggered absolute lines ───────────────────────── */
.loc-hero {
  position: relative;
  z-index: 1;
}
.loc-hero-heading {
  position: relative;
  /* height = (line2 top offset 132) + (line2 line-height 160×0.7 = 112) = 244px */
  height: calc(244 * var(--u));
  letter-spacing: calc(-8 * var(--u));
}
.loc-hero-line1,
.loc-hero-line2 {
  position: absolute;
  white-space: nowrap;
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 400;
  font-size: calc(160 * var(--u));
  line-height: 0.7;
  color: var(--text);
}
/* Figma: line1 left = calc(50% - 485px) @ 1920 = 475px */
.loc-hero-line1 { top: 0; left: calc(475 * var(--u)); }
/* Figma: line2 right edge = calc(50% + 438.55px) @ 1920 → right = 521px from viewport edge */
.loc-hero-line2 { top: calc(132 * var(--u)); right: calc(521 * var(--u)); }

.loc-accent-italic {
  font-style: italic;
  color: var(--accent);
}
.loc-muted  { color: var(--muted); }
.loc-in     { font-size: calc(120 * var(--u)); }

/* Hero subtitle */
.loc-hero-sub {
  margin-top: calc(40 * var(--u));
  text-align: center;
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 400;
  font-size: calc(32 * var(--u));
  line-height: 0.8;
  letter-spacing: calc(-0.96 * var(--u));
  color: var(--muted);
}
.loc-hero-sub p + p { margin-top: calc(14 * var(--u)); }

/* ── Centered content column (stats + table) ───────────────────────────── */
.loc-inner {
  position: relative;
  z-index: 1;
  width: calc(1208 * var(--u));
  margin: calc(60 * var(--u)) auto 0;
}

/* ── Stat cards ─────────────────────────────────────────────────────────── */
.loc-stats {
  display: flex;
  gap: calc(20 * var(--u));
}
.loc-stat-card {
  flex: 0 0 calc(287 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(20 * var(--u));
  padding: calc(40 * var(--u)) calc(20 * var(--u));
  background: rgba(78, 71, 221, 0.40);
  border: 1px solid #4E47DD;
  border-radius: 10px;
  backdrop-filter: blur(5px);
  text-align: center;
}
.loc-stat-num {
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 400;
  font-size: calc(64 * var(--u));
  line-height: 0.7;
  letter-spacing: calc(-3.2 * var(--u));
  color: var(--text);
  width: 100%;
}
.loc-stat-accent { color: var(--accent); }
.loc-stat-label {
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 700;
  font-size: calc(32 * var(--u));
  line-height: 1;
  letter-spacing: calc(-0.96 * var(--u));
  color: var(--text);
  width: 100%;
}
/* Light theme: solid accent card, all text white. */
[data-theme="light"] .loc-stat-card { background: #4E47DD; border-color: transparent; }
[data-theme="light"] .loc-stat-num,
[data-theme="light"] .loc-stat-accent,
[data-theme="light"] .loc-stat-label { color: #fff; }

/* ── Table section ──────────────────────────────────────────────────────── */
.loc-table-section {
  margin-top: calc(60 * var(--u));
}

/* 3-column layout — Figma node 75:10577 */
.loc-table-cols {
  display: flex;
  gap: calc(20 * var(--u));
  align-items: flex-start;
}
.loc-col {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
  flex-shrink: 0;
}
.loc-col-country { width: calc(440 * var(--u)); }
.loc-col-speed   { width: calc(133 * var(--u)); }
.loc-col-proto   { flex: 1; }

/* Column header */
.loc-col-head {
  background: rgba(78, 71, 221, 0.1);
  border: 1px solid rgba(78, 71, 221, 0.2);
  border-radius: calc(10 * var(--u));
  padding: calc(10 * var(--u)) calc(20 * var(--u));
}
.loc-col-head p {
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 700;
  font-size: calc(18 * var(--u));
  letter-spacing: calc(-0.54 * var(--u));
  color: var(--accent);
  text-transform: uppercase;
  line-height: 1.2;
}

/* Column body box */
.loc-col-body {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: calc(10 * var(--u));
  padding: calc(20 * var(--u));
  display: flex;
  flex-direction: column;
}

/* Row items */
.loc-row-item {
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 700;
  font-size: calc(18 * var(--u));
  letter-spacing: calc(-0.54 * var(--u));
  color: #94979c;
  line-height: 1.2;
  text-transform: uppercase;
}
.loc-row-item + .loc-row-item {
  border-top: 1px solid var(--surface-border);
  margin-top: calc(20 * var(--u));
  padding-top: calc(20 * var(--u));
}

/* Country row — flag + name */
.loc-row-country {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
}
.loc-flag { display: none; }
.loc-flag-img {
  width: calc(20 * var(--u));
  height: calc(15 * var(--u));
  flex-shrink: 0;
  display: block;
  border-radius: calc(2 * var(--u));
  object-fit: cover;
}
.loc-country-name { white-space: nowrap; }

/* Bottom note */
.loc-more {
  margin-top: calc(40 * var(--u));
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 400;
  font-size: calc(32 * var(--u));
  line-height: 0.8;
  letter-spacing: calc(-0.96 * var(--u));
  color: var(--muted);
  text-align: center;
}

/* ===================================================================
 * MOBILE LAYOUT — @media (max-width: 768px)
 * Figma source: node 200:436 (375px frame). All px from Figma MCP.
 * Sections: Nav | Pain | How (title only) | Features | Pricing | CTA | Footer
 * =================================================================== */
@media (max-width: 768px) {

  .container { padding: 0 20px; }

  /* ── NAV ─────────────────────────────────────────────────────── */
  .nav { height: 75px; }

  .nav-left {
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 105px;
    height: 24px;
  }
  .nav-logo-desktop { display: none; }
  .nav-logo-mobile  { display: block; }

  .nav-links { display: none; }

  .nav-right {
    left: auto;
    right: 0;
    top: 0;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 16px;
    gap: 0;
  }
  .nav-right-controls { display: none; }
  .nav-download       { display: none; }

  .nav-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    cursor: pointer;
  }
  .nav-hamburger-icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* Animate hamburger bars → X; hide the static close SVG */
  .nav-hamburger-close { display: none; }
  .nav-hamburger-open svg { overflow: visible; }
  .nav-hamburger-open svg path {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-box: fill-box;
    transform-origin: center;
  }
  .nav-hamburger[aria-expanded="true"] .nav-hamburger-open svg path:first-child {
    transform: translateY(5.57px) rotate(45deg);
  }
  .nav-hamburger[aria-expanded="true"] .nav-hamburger-open svg path:last-child {
    transform: translateY(-5.57px) rotate(-45deg);
  }

  /* Prevent body scroll when menu is open */
  body.nav-locked { overflow: hidden; }

  /* Mobile menu overlay — Figma 269:470.
     Full-screen behind the fixed nav (z-index 100). Grid layout:
     col 1 = nav links, col 2 = controls, row 2 = download button. */
  .nav-menu-overlay {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr auto;
    position: fixed;
    inset: 0;
    z-index: 98;
    background: var(--bg);
    padding: 155px 20px 40px;
    gap: 0 20px;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    overflow-y: auto;
  }
  .nav-menu-overlay.nav-menu-overlay-open {
    transform: translateX(0);
    pointer-events: auto;
  }

  /* Nav links — col 1, row 1 */
  .nav-menu-mobile-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 40px;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
  }
  .nav-menu-mobile-list li a {
    font-family: 'SF Pro Display', sans-serif;
    font-weight: 400;
    font-size: 36px;
    line-height: 0.6;
    letter-spacing: -1.08px;
    color: var(--text);
    display: block;
    padding: 0;
    text-decoration: none;
  }
  .nav-menu-mobile-list .current-menu-item > a { color: var(--accent); }

  /* Language + Theme — col 2, row 1 */
  .nav-menu-mobile-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }
  /* Theme toggle pill — fixed px to match desktop 1:1 (overrides calc(N*--u)) */
  .nav-menu-theme-toggle {
    background: rgba(78, 71, 221, 0.1);
    border-radius: 10px;
    padding: 5px;
    flex-shrink: 0;
    width: 95px;
    height: 50px;
    justify-content: flex-start;
  }
  .nav-menu-theme-toggle .theme-toggle-knob {
    width: 40px;
    height: 40px;
    border-radius: 5px;
  }
  [data-theme="light"] .nav-menu-theme-toggle .theme-toggle-knob { transform: translateX(45px); }
  /* Language pill */
  .nav-menu-lang {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(78, 71, 221, 0.1);
    border-radius: 10px;
    height: 50px;
    padding: 0 20px;
    position: relative;
    cursor: pointer;
    user-select: none;
  }
  .nav-menu-lang-icon svg { width: 20px; height: 20px; display: block; }
  .nav-menu-lang-text {
    font-family: 'SF Pro Display', sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.54px;
    color: var(--text);
  }
  /* Mobile lang dropdown */
  .nav-menu-lang-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 210;
    min-width: 100%;
    width: max-content;
    background: rgba(18, 20, 38, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    padding: 6px;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s 0.15s;
    pointer-events: none;
  }
  .nav-menu-lang.lang-open .nav-menu-lang-dropdown {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: auto;
  }
  .nav-menu-lang-dropdown ul { list-style: none; }
  .nav-menu-lang-dropdown li a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px 20px;
    border-radius: 8px;
    font-family: 'SF Pro Display', sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.3px;
    color: #4E47DD;
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.1s ease, color 0.1s ease;
  }
  .nav-menu-lang-dropdown li a:hover,
  .nav-menu-lang-dropdown li a:active { background: rgba(78, 71, 221, 0.12); color: #4E47DD; }
  .nav-menu-lang-dropdown li.current-lang a { background: rgba(78, 71, 221, 0.18); color: #4E47DD; }
  [data-theme="light"] .nav-menu-lang-dropdown {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(78, 71, 221, 0.15);
    box-shadow: 0 8px 32px rgba(24, 29, 39, 0.18);
  }

  /* Download — spans full width, row 2 */
  .nav-menu-download {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70px;
    padding: 5px 30px;
    background: #4e47dd;
    border: 1px solid rgba(78, 71, 221, 0.2);
    border-radius: 10px;
    font-family: 'SF Pro Display', sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.48px;
    color: #fff;
    text-decoration: none;
    width: 100%;
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 40px;
  }

  /* ── PAIN  (Why do you need a VPN?) ─────────────────────────── */
  .hero { margin-bottom: 120px; }

  .pain {
    min-height: 0;
    padding-bottom: 40px;
    overflow: visible;
    margin-bottom: 120px;
  }
  .pain-title {
    position: relative;
    left: auto; top: auto;
    transform: none;
    width: 100%;
    font-size: 36px;
    line-height: 110%;
    letter-spacing: -1.8px;
    text-align: center;
    margin-bottom: 26px;
  }
  .pain-title-accent { margin-top: 0; }

  .pain-logo {
    position: relative;
    left: auto; top: auto;
    transform: none;
    width: 105px; height: 105px;
    margin: 0 auto 40px;
  }

  .pain-lines-right,
  .pain-lines-left { display: none; }

  .pain-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }
  .pain-card {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100%;
    height: auto !important;
    overflow: visible;
    padding: 20px;
    border-radius: 10px;
    grid-template-columns: 1fr 40px;
    gap: 20px;
    row-gap: 35px;
  }
  .pain-card h3 { font-size: 24px; letter-spacing: -0.72px; line-height: 100%; max-width: 180px; }
  .pain-card .pain-card-icon {
    width: 40px; height: 40px;
    display: block;
    align-self: start;
    flex-shrink: 0;
  }
  .pain-card .pain-card-icon svg,
  .pain-card .pain-card-icon img { width: 40px; height: 40px; max-width: 40px; max-height: 40px; display: block; }
  .pain-card p { font-size: 16px; letter-spacing: -0.48px; line-height: 1.1; }

  /* ── HOW IT WORKS — show title on mobile ────────────────────── */
  .how {
    padding-top: 0;
    margin-bottom: 120px;
  }
  /* Figma: title on left + "Step N" badge on right (same row) */
  .how .section-title {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    position: relative !important;
    left: auto !important; top: auto !important;
    transform: none !important;
    width: auto !important;
    font-size: 36px;
    letter-spacing: -1.8px;
    line-height: 100%;
    padding: 0 0 40px;
    gap: 8px;
  }
  /* Push step indicator to far right */
  .how-step-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 10px 20px;
    background: rgba(78,71,221,0.1);
    border: 1px solid rgba(78,71,221,0.2);
    border-radius: 10px;
    font-family: 'SF Pro Display', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.48px;
    line-height: 20px;
    color: var(--accent);
    text-transform: uppercase;
    white-space: nowrap;
  }
  /* Hide duplicate step-num inside slide (indicator is in title row) */
  .mobile-step-card .step-num { display: none; }
  /* Desktop: hide the indicator (only for mobile) */

  /* ── FEATURES  (Everything for your protection) ──────────────── */
  /* Section is positioning context so texture escapes container padding */
  .features { min-height: 0; overflow: visible; margin-top: 80px; margin-bottom: 120px; position: relative; }
  /* padding-top = texture height → content flows below absolute texture */
  .features > .container { padding-top: 120px; }

  .features-code-bg--desk { display: none; }
  /* Absolute texture: 373×117px centered — exact Figma 240:567 values */
  .features-code-bg--mob {
    display: block;
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 373px;
    height: 117px;
    overflow: hidden;
  }
  .features-code-bg--mob svg { width: 100%; height: 100%; display: block; }

  .features .section-title {
    position: relative;
    left: auto; top: auto;
    width: auto;
    font-size: 36px;
    letter-spacing: -1.8px;
    line-height: 100%;
    padding-top: 0;
    margin-bottom: 40px;
  }
  .features .section-title .accent { display: inline; }
  .features .section-title .regular {
    display: inline;
    margin-left: 0;
    width: auto;
    margin-top: 0;
  }

  .features-grid {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
  }
  .feature-item {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100%;
    flex-direction: row !important;
    gap: 17px;
    align-items: flex-start;
  }
  /* Figma: icon = 40×40 purple square, icon slightly smaller inside */
  .feature-icon {
    width: 40px; height: 40px;
    flex-shrink: 0;
    background: #4e47dd;
    border-radius: 10px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    --fill-0: #fff;
  }
  .feature-icon svg,
  .feature-icon img { width: 20px; height: 20px; max-width: 20px; max-height: 20px; display: block; }
  .feature-icon svg path { fill: #fff; }
  .feature-card {
    flex: 1;
    width: auto;
    height: auto;
    padding: 20px;
    border-radius: 10px;
    gap: 35px;
    background: rgba(78,71,221,0.1);
    border: 1px solid rgba(78,71,221,0.2);
  }
  .feature-card h3 {
    font-size: 24px;
    letter-spacing: -0.72px;
    color: var(--accent);
  }
  .feature-card p {
    font-size: 16px;
    letter-spacing: -0.48px;
    line-height: 1.1;
    color: var(--text);
  }

  /* ── PRICING ─────────────────────────────────────────────────── */
  .pricing {
    min-height: 0;
    scroll-margin-top: 75px;
    margin-bottom: 120px;
  }
  .pricing-glow      { display: none; }
  .pricing-cat-glow  { display: none; }
  /* Desktop cat elements hidden on mobile */
  .pricing-cat-desk-head,
  .pricing-cat-desk-paw { display: none; }

  /* Cat attached to .pricing-slide-yearly (moves with card on swipe) */
  .pricing-slide-yearly {
    position: relative;
    overflow: visible;
  }

  /* Mobile glow — purple blur circle behind cat, z-index 2 */
  .pricing-cat-mob-glow {
    display: block;
    position: absolute;
    right: 22px;
    top: -45px;
    width: 108px;
    height: 108px;
    background: #4E47DD;
    border-radius: 50%;
    filter: blur(71.55px);
    pointer-events: none;
    z-index: 2;
  }

  /* Mobile cat — portrait image (Group 63.png), positioned top-left of yearly slide */
  .pricing-swiper { margin-top: 72px; } /* room so the cat clears the heading */
  .pricing-cat-mob {
    display: block;
    position: absolute;
    left: -10px;
    top: -78px;
    width: 300px;
    pointer-events: none;
    z-index: 3;
  }
  .pricing-cat-mob img {
    width: 100%;
    height: auto;
    display: block;
  }
  /* Blur on the non-active (side) card */
  .pricing-swiper .swiper-slide:not(.swiper-slide-active) .pricing-card {
    filter: blur(3px);
    opacity: 0.55;
    transition: filter 0.3s, opacity 0.3s;
  }

  .pricing .section-title {
    position: relative;
    left: auto; top: auto;
    width: auto;
    font-size: 36px;
    letter-spacing: -1.8px;
    padding-top: 60px;
    margin-bottom: 20px;
  }
  .pricing .section-title .regular {
    margin-left: 0;
    width: auto;
    margin-top: 0;
  }
  /* Figma: leading-0.6 + mb-14px per line */
  .pricing-sub {
    position: relative;
    left: auto; top: auto;
    width: auto;
    font-size: 18px;
    letter-spacing: -0.54px;
    line-height: 90%;
    margin-bottom: 20px;
  }
  .pricing-sub p { margin: 0 0 14px; }
  .pricing-sub p:last-child { margin-bottom: 0; }
  .pricing-swiper.swiper {
    display: block;
    overflow: visible; /* allow cat elements to extend outside swiper bounds */
    width: 100%;
    margin-top: 40px;
    padding-bottom: 0;
    position: relative;
    z-index: 2;
  }
  .pricing-swiper.swiper > .swiper-wrapper {
    position: relative;
    display: flex;
  }
  .pricing-swiper.swiper > .swiper-wrapper > .swiper-slide {
    flex-shrink: 0;
    width: 260px !important;
  }
  .pricing-swiper .swiper-wrapper { align-items: center; }
  .pricing-swiper .swiper-slide {
    width: 260px !important;
    height: 260px;
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 0;
  }
  .pricing-cards {
    position: relative;
    left: auto; top: auto;
    width: auto;
    flex-direction: row;
    gap: 0;
    align-items: stretch;
  }
  .pricing-card {
    width: 260px;
    height: 260px;
    padding: 20px;
    border-radius: 10px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .pricing-card.is-best { gap: 20px; }
  .pricing-card-header { width: 100%; gap: 10px; }
  .pricing-badge {
    display: flex;
    width: fit-content;
    padding: 5px 10px;
    justify-content: center;
    align-items: center;
    gap: 20px;
    border-radius: 10px;
    background: #4E47DD;
    color: #FFF;
    font-family: 'SF Pro Display', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: -0.42px;
    text-transform: uppercase;
  }
  .pricing-name        { font-size: 16px; }
  .pricing-name-row { width: 100%; justify-content: space-between; gap: 20px; }
  .pricing-name-row .pricing-name { width: 62px; flex: 0 0 62px; }
  .pricing-price       { letter-spacing: -3.2px; }
  .pricing-currency    { font-size: 24px; }
  .pricing-amount      { font-size: 64px; }
  .pricing-period      { font-size: 16px; }
  .pricing-note        { font-size: 16px; }
  .pricing-card .pricing-note { width: 100%; }
  .pricing-save        { font-size: 16px; letter-spacing: -0.48px; }
  .pricing-old         { font-size: 16px; letter-spacing: -0.48px; }
  .pricing-note        { letter-spacing: -0.48px; }
  .pricing-swiper-pagination { display: none; }
  .pricing-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
  }
  .pricing-slider-prev,
  .pricing-slider-next {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    background: var(--surface-border);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s;
  }
  .pricing-slider-prev:not(.swiper-button-disabled),
  .pricing-slider-next:not(.swiper-button-disabled) { opacity: 1; }
  .pricing-slider-prev:hover,
  .pricing-slider-next:hover { background: var(--accent); opacity: 1; }
  .pricing-slider-prev.swiper-button-disabled,
  .pricing-slider-next.swiper-button-disabled { opacity: 0.3; pointer-events: none; }

  /* ── CTA ─────────────────────────────────────────────────────── */
  .final-cta {
    min-height: 0;
    margin-bottom: 120px;
  }
  .cta-card {
    position: relative;
    left: auto; top: auto;
    width: 100%;
    height: auto;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    padding-bottom: 310px;
    gap: 40px;
  }
  .cta-glow-1, .cta-glow-2 { display: none; }
  .cta-phones            { display: none; }
  .cta-phones-fade       { display: none; }

  /* Figma 202:1102 — base glow layer (normal blend), behind phones */
  /* Glow blob — PNG, full card width, centered */
  .cta-mob-glow-l1 {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 1;
  }
  .cta-mob-glow-l1 img {
    display: block;
    width: 100%;
    height: auto;
  }
  .cta-mob-glow-l2 { display: none; }
  /* Figma 240:2173: absolute at card bottom, centered */
  .cta-phones-mobile {
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 296px;
    height: 279px;
    object-fit: cover;
    object-position: top center;
    z-index: 2;
  }

  .cta-logo {
    position: relative;
    left: auto; top: auto;
    width: 105px; height: 24px;
    z-index: 2;
    order: 1;
    align-self: center;
  }
  .cta-text {
    position: relative;
    left: auto; top: auto;
    width: 100%;
    gap: 40px;
    order: 2;
    align-items: center;
    text-align: center;
  }
  .cta-heading { gap: 20px; align-items: center; }
  .cta-title {
    font-size: 80px;
    line-height: 80%;
    letter-spacing: -4px;
    text-align: center;
  }
  /* Figma: leading-0.6 + mb-14px per line */
  .cta-desc {
    font-size: 18px;
    letter-spacing: -0.54px;
    width: auto;
    text-align: center;
    line-height: 90%;
  }
  .cta-desc p { margin: 0 0 14px; }
  .cta-desc p:last-child { margin-bottom: 0; }

  .cta-buttons {
    flex-direction: column;
    gap: 20px;
    width: 100%;
    align-items: center;
    order: 3;
  }
  .cta-btn-appstore {
    height: 70px;
    max-width: 140px;
    border-radius: 10px;
    padding: 5px 20px;
  }
  .cta-btn-appstore .btn-sub  { font-size: 14px; line-height: 20px; }
  .cta-btn-appstore .btn-main { font-size: 18px; gap: 5px; }

  .cta-btn-soon {
    position: relative;
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-top: 0;
  }
  .cta-btn-soon-badge {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(78,71,221,0.1);
    border: 1px solid rgba(78,71,221,0.2);
    border-radius: 10px;
    color: var(--accent);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.48px;
    padding: 10px 20px;
    line-height: 20px;
    width: auto;
    order: 2;
  }
  .cta-btn-soon-btn {
    width: auto;
    height: 70px;
    border-radius: 10px;
    padding: 5px 20px;
    min-width: 0;
    order: 1;
  }
  .cta-btn-soon-btn .btn-sub { font-size: 14px; }
  .cta-btn-soon-btn .btn-row { font-size: 18px; column-gap: 5px; }
  .cta-btn-appstore .btn-main > svg,
  .cta-btn-soon-btn .btn-row > svg { flex: none; width: 20px; height: 20px; }

  /* Desktop-only mobile image hidden on desktop */
  .cta-phones-mobile { display: none; }
}

/* Show mobile phone in CTA only on mobile */
@media (max-width: 768px) {
  .cta-phones-mobile { display: block; }
}

/* ===================================================================
 * FOOTER MOBILE — @media (max-width: 768px)
 * Figma 240:2264: 2×2 grid, Product+Pages / Legal+Social. Footer-bottom
 * stacked vertically, logo at grid row-3 right-aligned.
 * =================================================================== */
@media (max-width: 768px) {
  /* Override desktop passthrough — footer needs 20px side padding on mobile */
  .footer > .container { padding: 0 20px; }

  .footer {
    padding-top: 40px;
    padding-bottom: 40px;
    gap: 40px;
  }
  .footer-menu {
    position: relative;
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    column-gap: 20px;
    row-gap: 40px;
  }
  .footer-col-group {
    position: relative;
    left: auto; top: auto;
    display: flex;
    flex-direction: column;
  }
  .footer-col-1 { grid-column: 1; grid-row: 1; }
  .footer-col-2 { grid-column: 2; grid-row: 1; }
  .footer-col-3 { grid-column: 1; grid-row: 2; }
  .footer-col-4 { grid-column: 2; grid-row: 2; }

  .footer-logo-wrap { display: none; }

  .footer-col-title {
    font-size: 24px;
    letter-spacing: -1.2px;
    width: auto;
  }
  .footer-col-links {
    margin-top: 40px;
    width: auto;
    gap: 20px;
  }
  .footer-col-links a { font-size: 16px; letter-spacing: -0.48px; }

  .footer-soon-row { gap: 20px; }
  .footer-soon-badge {
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 14px;
  }

  .footer-social-row { margin-top: 40px; gap: 20px; }
  .footer-social-icon { width: 40px; height: 40px; }

  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    padding-top: 40px;
  }
  .footer-bottom-left {
    display: flex;
    flex-direction: column;
    gap: 56px;
  }
  .footer-copy  { margin-left: 0; font-size: 16px; width: 147px; }
  .footer-email { position: relative; right: auto; font-size: 16px; text-align: left; }
  .footer-bottom-logo {
    display: flex;
    align-items: center;
    width: 105px;
    height: 24px;
    flex-shrink: 0;
  }
  .footer-bottom-logo svg,
  .footer-bottom-logo img { width: 100%; height: 100%; display: block; }
}

/* ===================================================================
 * LOCATIONS PAGE MOBILE — @media (max-width: 768px)
 * Figma source: node 240:2268 (375px frame). All px from Figma MCP.
 * =================================================================== */
@media (max-width: 768px) {

  .loc-page {
    padding-top: 115px;
    padding-bottom: 80px;
  }

  /* Globe: mobile dimensions from Figma node 244:3010 */
  .loc-globe {
    width: 374px;
    height: 407px;
  }

  /* Glow: decorative — hide on mobile */
  .loc-glow { display: none; }

  /* ── Hero ─────────────────────────────────────────────────────────── */
  .loc-hero-heading {
    height: auto;
    text-align: center;
    letter-spacing: 0;
  }

  .loc-hero-line1,
  .loc-hero-line2 {
    position: static;
    display: block;
    text-align: center;
    font-size: 0;
    letter-spacing: 0;
    white-space: normal;
    line-height: 1;
  }

  .loc-hero-line1 { margin-bottom: 14px; }

  /* 500+, 70+ — accent italic 48px */
  .loc-accent-italic {
    font-size: 48px;
    line-height: 0.6;
    letter-spacing: -2.4px;
  }

  /* "servers", "countries" labels — 36px white */
  .loc-hero-line1 > span:not(.loc-accent-italic):not(.loc-muted),
  .loc-hero-line2 > span:not(.loc-accent-italic) {
    font-size: 36px;
    line-height: 0.6;
    letter-spacing: -1.8px;
    color: var(--text);
  }

  /* "in" connector — 36px muted */
  .loc-in {
    font-size: 36px;
    letter-spacing: -1.8px;
    line-height: 0.6;
  }

  .loc-hero-sub {
    margin-top: 30px;
    font-size: 18px;
    line-height: 60%;
    letter-spacing: -0.54px;
    text-align: center;
  }
  .loc-hero-sub p + p { margin-top: 14px; }

  /* ── Inner column ─────────────────────────────────────────────────── */
  .loc-inner {
    width: 100%;
    margin-top: 40px;
    padding: 0 20px;
    box-sizing: border-box;
  }

  /* ── Stat cards — 2×2 flex-wrap ───────────────────────────────────── */
  .loc-stats {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    width: 336px;
    margin-left: auto;
    margin-right: auto;
  }

  .loc-stat-card {
    flex: 0 0 163px;
    padding: 20px 10px;
    gap: 10px;
    border-radius: 10px;
  }

  .loc-stat-num {
    font-size: 36px;
    letter-spacing: -1.8px;
    line-height: 0.7;
  }

  .loc-stat-label {
    font-size: 18px;
    letter-spacing: -0.54px;
    line-height: 1;
  }

  /* ── Table — horizontal scroll ────────────────────────────────────── */
  .loc-table-section {
    margin-top: 20px;
    margin-left: -20px;
    margin-right: -20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
  }

  .loc-table-cols {
    gap: 10px;
    width: 598px;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: content-box;
    align-items: flex-start;
  }

  .loc-col        { gap: 10px; }
  .loc-col-country { width: 143px; }
  .loc-col-speed   { width: 133px; }
  .loc-col-proto   { width: 302px; flex: none; }

  .loc-col-head { border-radius: 10px; padding: 10px 20px; }
  .loc-col-head p {
    font-size: 16px;
    letter-spacing: -0.48px;
    line-height: 20px;
  }

  .loc-col-body { border-radius: 10px; padding: 20px; }

  .loc-row-item {
    font-size: 16px;
    letter-spacing: -0.48px;
    line-height: 20px;
  }

  .loc-row-item + .loc-row-item {
    margin-top: 10px;
    padding-top: 10px;
  }

  .loc-flag-img { width: 20px; height: 15px; }

  /* ── Bottom note ──────────────────────────────────────────────────── */
  .loc-more {
    margin-top: 40px;
    font-size: 18px;
    letter-spacing: -0.54px;
    line-height: 1;
    max-width: 216px;
    white-space: normal;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ===================================================================
 * ABOUT US PAGE — Figma node 75:10996 (1920px frame).
 * line-height: 1+ per Bogdan rule (no sub-100% on this page).
 * =================================================================== */

.ab-page {
  position: relative;
  background: var(--bg);
  padding-top: calc(200 * var(--u));
  padding-bottom: calc(120 * var(--u));
}

/* Decorative glow — top-left purple radial, Figma node 75:11114 */
.ab-glow {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(1000 * var(--u));
  height: calc(900 * var(--u));
  background: radial-gradient(ellipse 50% 60% at 0% 30%, rgba(78,71,221,0.18) 0%, transparent 70%);
  pointer-events: none;
}

/* Centered 1206px column — no side padding, content widths are exact from Figma */
.ab-inner {
  width: calc(1206 * var(--u));
  margin: 0 auto;
}

/* ── Hero ─────────────────────────────────────────────────────────── */
.ab-hero {
  display: flex;
  align-items: flex-end;
}

.ab-hero-left {
  flex: 0 0 calc(766 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--u));
}

/* "About Us" — Figma: 160px, tracking -8px */
.ab-title {
  font-size: calc(160 * var(--u));
  line-height: 1;
  letter-spacing: calc(-8 * var(--u));
  color: var(--text);
  font-weight: 400;
  width: calc(669 * var(--u));
}

/* Left sub-text — Figma: 18px, #94979c, w-403px */
.ab-left-sub {
  font-size: calc(18 * var(--u));
  line-height: 1.1;
  letter-spacing: calc(-0.54 * var(--u));
  color: var(--muted);
  width: calc(403 * var(--u));
}

.ab-hero-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--u));
  padding-top: calc(10 * var(--u));
}

/* "Our Mission" heading — Figma: 64px, tracking -3.2px */
.ab-mission-heading {
  font-size: calc(64 * var(--u));
  line-height: 1;
  letter-spacing: calc(-3.2 * var(--u));
  font-weight: 400;
  width: calc(367 * var(--u));
}

.ab-mission-our { color: var(--text); }

.ab-mission-em {
  color: #4e47dd;
  font-style: italic;
}

/* Mission body — Figma: 18px, #94979c, w-367px */
.ab-mission-text {
  font-size: calc(18 * var(--u));
  line-height: 1.1;
  letter-spacing: calc(-0.54 * var(--u));
  color: var(--muted);
  width: calc(367 * var(--u));
}

/* ── Stat cards — Figma node 75:11077 ────────────────────────────── */
.ab-stats {
  display: flex;
  gap: calc(20 * var(--u));
  margin-top: calc(60 * var(--u));
  text-align: center;
}

.ab-stat-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
  align-items: center;
  justify-content: center;
  padding: calc(40 * var(--u)) calc(20 * var(--u));
  background: rgba(78,71,221,0.4);
  border: 1px solid #4e47dd;
  border-radius: calc(10 * var(--u));
}

/* Stat number — Figma: 64px, line-height 0.7 → using 1 per rule */
.ab-stat-num {
  font-size: calc(64 * var(--u));
  line-height: 1;
  letter-spacing: calc(-3.2 * var(--u));
  font-weight: 400;
  color: var(--text);
  width: 100%;
}

.ab-stat-accent { color: #4e47dd; }

/* Stat label — Figma: 32px bold */
.ab-stat-label {
  font-size: calc(32 * var(--u));
  font-weight: 700;
  line-height: 1;
  letter-spacing: calc(-0.96 * var(--u));
  color: var(--text);
  width: 100%;
}
/* Light theme: solid accent card, all text white. */
[data-theme="light"] .ab-stat-card { background: #4E47DD; border-color: transparent; }
[data-theme="light"] .ab-stat-num,
[data-theme="light"] .ab-stat-accent,
[data-theme="light"] .ab-stat-label { color: #fff; }
/* Light theme: body copy that was muted grey goes solid dark. */
[data-theme="light"] .ab-left-sub,
[data-theme="light"] .ab-mission-text,
[data-theme="light"] .ab-val-body { color: var(--text); }

/* ── Our Values — Figma node 140:1809 ────────────────────────────── */
.ab-values-section {
  margin-top: calc(120 * var(--u));
}

/* "Our Values" heading — Figma: 64px, centered */
.ab-values-heading {
  font-size: calc(64 * var(--u));
  line-height: 1;
  letter-spacing: calc(-3.2 * var(--u));
  font-weight: 400;
  text-align: center;
  color: var(--text);
}

.ab-val-our { color: var(--text); }

.ab-val-em {
  color: #4e47dd;
  font-style: italic;
}

/* 2×2 flex-wrap grid — Figma: gap 20px, cards 593px each */
.ab-values-grid {
  display: flex;
  flex-wrap: wrap;
  gap: calc(20 * var(--u));
  margin-top: calc(40 * var(--u));
}

/* Value card — Figma: 593×230px, bg rgba(78,71,221,0.1), border rgba(78,71,221,0.2), p-40, r-10 */
.ab-value-card {
  flex: 0 0 calc(593 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(35 * var(--u));
  padding: calc(40 * var(--u));
  background: rgba(78,71,221,0.1);
  border: 1px solid rgba(78,71,221,0.2);
  border-radius: calc(10 * var(--u));
  min-height: calc(230 * var(--u));
  box-sizing: border-box;
}

/* Card header: title (flex:1) + icon (40px) */
.ab-val-header {
  display: flex;
  align-items: flex-start;
  gap: calc(20 * var(--u));
}

/* Card title — Figma: 32px bold, #4e47dd */
.ab-val-title {
  flex: 1;
  font-size: calc(32 * var(--u));
  font-weight: 700;
  line-height: 1;
  letter-spacing: calc(-0.96 * var(--u));
  color: #4e47dd;
}

.ab-val-icon {
  flex-shrink: 0;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
}

/* Card body — Figma: 18px white, line-height 1.1 */
.ab-val-body {
  flex: 1;
  display: flex;
  align-items: flex-end;
  font-size: calc(18 * var(--u));
  line-height: 1.1;
  letter-spacing: calc(-0.54 * var(--u));
  color: var(--text);
}

/* ─── About Us — Mobile (Figma node 250:4460, 375px) ────────────────────── */
@media (max-width: 768px) {
  .ab-page {
    padding-top: 115px;
    padding-bottom: 60px;
  }

  .ab-glow {
    width: 250px;
    height: 250px;
    left: auto;
    right: -60px;
    top: 0;
    background: radial-gradient(ellipse 60% 60% at 100% 20%, rgba(78,71,221,0.18) 0%, transparent 70%);
  }

  .ab-inner {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  /* Hero: vertical stack */
  .ab-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 60px;
  }

  .ab-hero-left {
    flex: none;
    width: 100%;
    gap: 40px;
  }

  /* Figma: 80px, letter-spacing -4px */
  .ab-title {
    font-size: 80px;
    letter-spacing: -4px;
    line-height: 1;
    width: 100%;
  }

  .ab-left-sub {
    font-size: 18px;
    letter-spacing: -0.54px;
    line-height: 1.1;
    width: 100%;
  }

  .ab-hero-right {
    flex: none;
    width: 100%;
    gap: 40px;
    padding-top: 0;
  }

  /* Figma: 36px, letter-spacing -1.8px */
  .ab-mission-heading {
    font-size: 36px;
    letter-spacing: -1.8px;
    line-height: 1;
    width: 100%;
  }

  .ab-mission-text {
    font-size: 18px;
    letter-spacing: -0.54px;
    line-height: 1.1;
    width: 100%;
  }

  /* Stats: 2×2 grid — Figma: 163px cards, 10px gap */
  .ab-stats {
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 60px;
  }

  .ab-stat-card {
    flex: 0 0 calc(50% - 5px);
    padding: 20px 10px;
    gap: 10px;
    border-radius: 10px;
  }

  /* Figma: 36px num, letter-spacing -1.8px */
  .ab-stat-num {
    font-size: 36px;
    letter-spacing: -1.8px;
    line-height: 1;
  }

  /* Figma: 18px bold label */
  .ab-stat-label {
    font-size: 18px;
    letter-spacing: -0.54px;
    line-height: 1;
  }

  /* Values: single column */
  .ab-values-section {
    margin-top: 40px;
  }

  /* Figma: 36px, letter-spacing -1.8px, left-aligned on mobile */
  .ab-values-heading {
    font-size: 36px;
    letter-spacing: -1.8px;
    line-height: 1;
    text-align: left;
  }

  .ab-values-grid {
    flex-direction: column;
    gap: 10px;
    margin-top: 40px;
  }

  .ab-value-card {
    flex: none;
    width: 100%;
    padding: 20px;
    gap: 35px;
    min-height: 0;
    border-radius: 10px;
    box-sizing: border-box;
  }

  /* Figma: 24px, letter-spacing -0.72px */
  .ab-val-title {
    font-size: 24px;
    letter-spacing: -0.72px;
    line-height: 1;
  }

  .ab-val-icon {
    width: 40px;
    height: 40px;
  }

  /* Figma: 16px body, line-height 1.1 */
  .ab-val-body {
    font-size: 16px;
    letter-spacing: -0.48px;
    line-height: 1.1;
    align-items: flex-start;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SUPPORT PAGE — Desktop (Figma node 75:10865, 1920px)
   ═══════════════════════════════════════════════════════════════════════════ */

.sp-page {
  position: relative;
  background: var(--bg);
  padding-top: calc(200 * var(--u));
  padding-bottom: calc(120 * var(--u));
}

.sp-glow {
  position: absolute;
  left: 0; top: 0;
  width: calc(1931 * var(--u));
  height: calc(890 * var(--u));
  background: radial-gradient(ellipse 50% 60% at 0% 50%, rgba(78,71,221,0.18) 0%, transparent 70%);
  pointer-events: none;
}

.sp-inner {
  width: calc(1208 * var(--u));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: calc(80 * var(--u));
}

/* Hero: "Support" left + subtitle right — Figma: flex items-end, gap 367px */
.sp-hero {
  display: flex;
  align-items: flex-end;
  gap: calc(367 * var(--u));
}

/* Figma: 160px, letter-spacing -8px */
.sp-title {
  font-size: calc(160 * var(--u));
  line-height: 1;
  letter-spacing: calc(-8 * var(--u));
  color: var(--text);
  font-weight: 400;
  flex-shrink: 0;
}

/* Figma: 32px, muted, text-right, letter-spacing -0.96px */
.sp-subtitle {
  flex: 1;
  font-size: calc(32 * var(--u));
  line-height: 1;
  letter-spacing: calc(-0.96 * var(--u));
  color: var(--muted);
  text-align: right;
  padding-bottom: calc(8 * var(--u));
}

.sp-content {
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--u));
}

/* ── FAQ accordion ──────────────────────────────────────────────────────── */
.sp-faq {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
  list-style: none;
  padding: 0; margin: 0;
}

.sp-faq-item {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: calc(10 * var(--u));
  overflow: hidden;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.sp-faq-item.sp-open {
  background: rgba(78,71,221,0.1);
  border-color: rgba(78,71,221,0.2);
}

/* Figma: p 40px, gap 20px, items-center */
.sp-faq-question {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
  width: 100%;
  padding: calc(40 * var(--u));
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

/* Figma: 32px bold, muted closed → #4e47dd open */
.sp-faq-q-text {
  flex: 1;
  font-size: calc(32 * var(--u));
  font-weight: 700;
  line-height: 1;
  letter-spacing: calc(-0.96 * var(--u));
  color: var(--muted);
  transition: color 0.3s ease;
}

.sp-faq-item.sp-open .sp-faq-q-text {
  color: #4e47dd;
}

.sp-faq-arrow-box {
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  min-width: 40px;
  min-height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #94979C;
  border-radius: calc(5 * var(--u));
  transition: background 0.3s ease;
}

.sp-faq-item.sp-open .sp-faq-arrow-box {
  background: #4e47dd;
}

.sp-faq-arrow-icon {
  display: block;
  color: #ffffff;
  transition: transform 0.3s ease, color 0.3s ease;
}

.sp-faq-item.sp-open .sp-faq-arrow-icon {
  transform: rotate(180deg);
  color: #ffffff;
}

/* Figma: 18px white, line-height 1.1 */
.sp-faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 calc(40 * var(--u));
  padding-bottom: 0;
  font-size: calc(18 * var(--u));
  line-height: 1.1;
  letter-spacing: calc(-0.54 * var(--u));
  color: var(--text);
  opacity: 0;
  transition: max-height 0.35s ease, padding-bottom 0.35s ease, opacity 0.25s ease;
}

.sp-faq-item.sp-open .sp-faq-answer {
  max-height: 600px;
  padding-bottom: calc(40 * var(--u));
  opacity: 1;
}

/* ── Contact cards ──────────────────────────────────────────────────────── */
.sp-contacts {
  display: flex;
  gap: calc(20 * var(--u));
}

/* Figma: w 593px, h 184px, bg rgba(78,71,221,0.4), border #4e47dd, p 20px */
.sp-contact-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(40 * var(--u));
  height: calc(184 * var(--u));
  padding: calc(20 * var(--u));
  background: rgba(78,71,221,0.4);
  border: 1px solid #4e47dd;
  border-radius: calc(10 * var(--u));
  backdrop-filter: blur(5px);
  text-decoration: none;
  box-sizing: border-box;
  transition: transform 0.2s ease;
}
.sp-contact-card:hover { transform: translateY(-4px); }
/* Light theme: solid accent card, all text white. */
/* Muted page copy goes dark: subtitle + closed FAQ questions (open stays purple). */
[data-theme="light"] .sp-subtitle,
[data-theme="light"] .sp-faq-q-text { color: var(--text); }
[data-theme="light"] .sp-contact-card { background: #4E47DD; border-color: transparent; }
[data-theme="light"] .sp-contact-label,
[data-theme="light"] .sp-contact-sub,
[data-theme="light"] .sp-contact-handle { color: #fff; }

.sp-contact-top {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
  width: 100%;
}

/* Figma: 32px bold white */
.sp-contact-label {
  flex: 1;
  font-size: calc(32 * var(--u));
  font-weight: 700;
  line-height: 1;
  letter-spacing: calc(-0.96 * var(--u));
  color: var(--text);
}

.sp-contact-icon {
  display: block;
  width: calc(20 * var(--u));
  height: auto;
  flex-shrink: 0;
  object-fit: contain;
}

/* Figma: sub (flex-1, 18px) + handle (32px, text-right) */
.sp-contact-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: calc(3 * var(--u));
  flex: 1;
  width: 100%;
}

.sp-contact-sub {
  flex: 1;
  font-size: calc(18 * var(--u));
  line-height: 1.1;
  letter-spacing: calc(-0.54 * var(--u));
  color: var(--text);
}

/* Figma: 32px, letter-spacing -1.6px */
.sp-contact-handle {
  font-size: calc(32 * var(--u));
  line-height: 1;
  letter-spacing: calc(-1.6 * var(--u));
  color: var(--text);
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ─── Support — Mobile (Figma node 250:3479, 375px) ──────────────────────── */
@media (max-width: 768px) {
  .sp-page {
    padding-top: 115px;
    padding-bottom: 60px;
  }

  .sp-inner {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    gap: 40px;
  }

  .sp-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  /* Figma: 80px, letter-spacing -4px */
  .sp-title {
    font-size: 80px;
    letter-spacing: -4px;
    line-height: 1;
  }

  /* Figma: 18px, left-aligned on mobile */
  .sp-subtitle {
    font-size: 18px;
    letter-spacing: -0.54px;
    line-height: 1.3;
    text-align: left;
    width: 100%;
    padding-bottom: 0;
  }

  .sp-faq { gap: 10px; }
  .sp-faq-item { border-radius: 10px; }

  .sp-faq-question {
    padding: 20px;
    gap: 20px;
  }

  /* Figma: 24px, letter-spacing -0.72px */
  .sp-faq-q-text {
    font-size: 24px;
    letter-spacing: -0.72px;
    line-height: 1;
  }

  .sp-faq-arrow-box { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }

  /* Figma: 16px on mobile */
  .sp-faq-answer {
    padding: 0 20px 20px;
    font-size: 16px;
    letter-spacing: -0.48px;
    line-height: 1.1;
  }

  .sp-contacts {
    flex-direction: column;
    gap: 10px;
  }

  .sp-contact-card {
    height: auto;
    gap: 40px;
    padding: 20px;
    border-radius: 10px;
  }

  .sp-contact-top { gap: 20px; }

  /* Figma: 24px on mobile */
  .sp-contact-label {
    font-size: 24px;
    letter-spacing: -0.72px;
    line-height: 1;
  }

  .sp-contact-icon { width: 20px; }

  /* Mobile: sub + handle stacked vertically */
  .sp-contact-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* Figma: 16px */
  .sp-contact-sub {
    font-size: 16px;
    letter-spacing: -0.48px;
    line-height: 1.1;
  }

  /* Figma: 24px, text-left on mobile, letter-spacing -1.2px */
  .sp-contact-handle {
    font-size: 24px;
    letter-spacing: -1.2px;
    line-height: 1;
    text-align: left;
    width: 100%;
  }
}

/* ─── Download page — desktop (Figma node 75:11256, 1920px) ─────────────────── */

.dl-page {
  position: relative;
  background: var(--bg);
  padding-top: calc(200 * var(--u));
  padding-bottom: calc(120 * var(--u));
}

.dl-glow {
  position: absolute;
  left: 0;
  top: calc(17 * var(--u));
  width: calc(1931 * var(--u));
  height: calc(890 * var(--u));
  background: radial-gradient(ellipse 50% 60% at 0% 50%, rgba(78,71,221,0.18) 0%, transparent 70%);
  pointer-events: none;
}

.dl-inner {
  width: calc(1277 * var(--u));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(80 * var(--u));
}

/* Heading */
.dl-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40 * var(--u));
  width: 100%;
}

.dl-title {
  font-size: calc(160 * var(--u));
  line-height: 1;
  letter-spacing: calc(-8 * var(--u));
  color: var(--text);
  font-weight: 400;
  text-align: center;
}

.dl-title em {
  font-style: italic;
  color: #4e47dd;
}

.dl-subtitle {
  font-size: calc(32 * var(--u));
  line-height: 1;
  letter-spacing: calc(-0.96 * var(--u));
  color: var(--muted);
  text-align: center;
}

/* Cards column */
.dl-cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(20 * var(--u));
  width: 100%;
}

.dl-card {
  width: calc(593 * var(--u));
  padding: calc(20 * var(--u));
  border-radius: calc(10 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40 * var(--u));
  box-sizing: border-box;
}

.dl-card-ios {
  background: rgba(78,71,221,0.1);
  border: 1px solid rgba(78,71,221,0.2);
}

.dl-card-soon {
  background: var(--surface);
  border: 1px solid var(--surface-border);
}

.dl-card-text {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
  align-items: center;
  width: 100%;
}

.dl-card-block {
  display: flex;
  gap: calc(20 * var(--u));
  align-items: center;
  justify-content: center;
  width: 100%;
}

.dl-platform-name {
  display: flex;
  gap: calc(20 * var(--u));
  align-items: center;
  justify-content: center;
}

.dl-icon-apple,
.dl-icon-apple-btn,
.dl-icon-platform {
  display: block;
  flex-shrink: 0;
}

.dl-icon-apple      { width: calc(16 * var(--u)); height: calc(20 * var(--u)); }
.dl-icon-apple-btn  { width: calc(16 * var(--u)); height: calc(20 * var(--u)); }
.dl-icon-platform   { height: calc(20 * var(--u)); width: auto; }

.dl-platform-title {
  font-size: calc(32 * var(--u));
  font-weight: 700;
  line-height: 1;
  letter-spacing: calc(-0.96 * var(--u));
  text-align: center;
  white-space: nowrap;
}

.dl-title-white { color: var(--text); }
.dl-title-muted { color: var(--muted); }

/* AVAILABLE badge */
.dl-badge-available {
  display: flex;
  gap: calc(20 * var(--u));
  align-items: center;
  justify-content: center;
  padding: calc(10 * var(--u)) calc(20 * var(--u));
  background: rgba(52,199,89,0.1);
  border-radius: calc(10 * var(--u));
  width: calc(179 * var(--u));
  box-sizing: border-box;
}

.dl-badge-check {
  display: block;
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  flex-shrink: 0;
}

.dl-badge-available-text {
  font-size: calc(18 * var(--u));
  font-weight: 700;
  line-height: calc(20 * var(--u));
  letter-spacing: calc(-0.54 * var(--u));
  color: #34c759;
  text-transform: uppercase;
  white-space: nowrap;
}

/* SOON badge */
.dl-badge-soon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(10 * var(--u)) calc(20 * var(--u));
  background: rgba(78,71,221,0.1);
  border: 1px solid rgba(78,71,221,0.2);
  border-radius: calc(10 * var(--u));
}

.dl-badge-soon-text {
  font-size: calc(18 * var(--u));
  font-weight: 700;
  line-height: calc(20 * var(--u));
  letter-spacing: calc(-0.54 * var(--u));
  color: #4e47dd;
  text-transform: uppercase;
  white-space: nowrap;
}

.dl-card-desc {
  font-size: calc(18 * var(--u));
  line-height: 1.1;
  letter-spacing: calc(-0.54 * var(--u));
  text-align: center;
  width: 100%;
}

.dl-card-desc-white { color: var(--text); }
.dl-card-desc-muted { color: var(--muted); }

/* Light theme: iOS card solid accent, white text; solid green AVAILABLE badge;
   subtitle under heading goes dark. */
[data-theme="light"] .dl-subtitle { color: var(--text); }
/* Muted copy on the SOON cards (platform name + description) goes dark. */
[data-theme="light"] .dl-title-muted,
[data-theme="light"] .dl-card-desc-muted { color: var(--text); }
/* Windows / Google Play platform icons go black on the light SOON cards. */
[data-theme="light"] .dl-icon-platform { filter: brightness(0); }
[data-theme="light"] .dl-card-ios { background: #4E47DD; border-color: transparent; }
[data-theme="light"] .dl-card-ios .dl-title-white,
[data-theme="light"] .dl-card-ios .dl-card-desc-white { color: #fff; }
[data-theme="light"] .dl-card-ios .dl-icon-apple { filter: brightness(0) invert(1); }
[data-theme="light"] .dl-badge-available { background: #34C759; }
[data-theme="light"] .dl-badge-available-text { color: #fff; }
[data-theme="light"] .dl-badge-check { filter: brightness(0) invert(1); }

/* AppStore button */
.dl-appstore-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(70 * var(--u));
  padding: calc(5 * var(--u)) calc(30 * var(--u));
  background: white;
  border-radius: calc(10 * var(--u));
  text-decoration: none;
  gap: 2px;
  flex-shrink: 0;
  transition: transform .2s ease, opacity .2s ease;
}
.dl-appstore-btn:hover { transform: translateY(-2px); opacity: 0.9; }

.dl-appstore-label {
  font-size: calc(14 * var(--u));
  line-height: calc(20 * var(--u));
  letter-spacing: calc(-0.42 * var(--u));
  color: #94979c;
  white-space: nowrap;
}

.dl-appstore-row {
  display: flex;
  gap: calc(5 * var(--u));
  align-items: center;
}

.dl-appstore-name {
  font-size: calc(18 * var(--u));
  font-weight: 700;
  line-height: calc(20 * var(--u));
  letter-spacing: calc(-0.54 * var(--u));
  color: black;
  white-space: nowrap;
}

/* Notify me form */
.dl-notify-form {
  display: flex;
  gap: calc(20 * var(--u));
  align-items: center;
  width: 100%;
}

.dl-notify-input {
  flex: 1;
  height: calc(70 * var(--u));
  padding: calc(5 * var(--u)) calc(30 * var(--u));
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: calc(10 * var(--u));
  font-size: calc(18 * var(--u));
  font-weight: 700;
  color: var(--muted);
  letter-spacing: calc(-0.54 * var(--u));
  box-sizing: border-box;
  outline: none;
  font-family: inherit;
}

.dl-notify-input::placeholder { color: var(--muted); }

.dl-notify-btn {
  height: calc(70 * var(--u));
  padding: calc(5 * var(--u)) calc(30 * var(--u));
  background: #4e47dd;
  border: 1px solid rgba(78,71,221,0.2);
  border-radius: calc(10 * var(--u));
  font-size: calc(18 * var(--u));
  font-weight: 700;
  line-height: calc(20 * var(--u));
  letter-spacing: calc(-0.54 * var(--u));
  color: white;
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
  transition: background .2s ease, transform .2s ease;
}
.dl-notify-btn:hover { background: var(--accent-2); transform: translateY(-2px); }
/* Success state: green confirmation button */
.dl-notify-form.is-success .dl-notify-btn,
.dl-notify-form.is-success .dl-notify-btn:hover {
  background: #34C759;
  border-color: transparent;
  transform: none;
  cursor: default;
}
.dl-notify-input--err { border-color: #ff4d4f; }

/* Character illustration */
.dl-character {
  display: block;
  width: calc(268 * var(--u));
  height: calc(231 * var(--u));
  object-fit: cover;
  margin-top: calc(80 * var(--u));
}

/* Protocols */
.dl-protocols {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40 * var(--u));
  width: 100%;
}

.dl-protocols-heading {
  font-size: calc(64 * var(--u));
  line-height: 1;
  letter-spacing: calc(-3.2 * var(--u));
  color: var(--text);
  font-weight: 400;
  text-align: center;
}

.dl-tags {
  display: flex;
  gap: calc(20 * var(--u));
  flex-wrap: wrap;
  justify-content: center;
  padding: calc(10 * var(--u));
}

.dl-tag {
  display: flex;
  gap: calc(20 * var(--u));
  align-items: center;
  justify-content: center;
  padding: calc(10 * var(--u)) calc(20 * var(--u));
  background: rgba(78,71,221,0.1);
  border: 1px solid rgba(78,71,221,0.2);
  border-radius: calc(10 * var(--u));
}

.dl-tag-dot {
  width: calc(5 * var(--u));
  height: calc(5 * var(--u));
  min-width: 5px;
  min-height: 5px;
  background: #4e47dd;
  border-radius: 50%;
  flex-shrink: 0;
  display: block;
}

.dl-tag-text {
  font-size: calc(18 * var(--u));
  font-weight: 700;
  line-height: calc(20 * var(--u));
  letter-spacing: calc(-0.54 * var(--u));
  color: #4e47dd;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ─── Download — Mobile (Figma node 250:4965, 375px) ───────────────────────── */
@media (max-width: 768px) {
  .dl-page {
    padding-top: 115px;
    padding-bottom: 60px;
  }

  .dl-inner {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    gap: 40px;
    align-items: stretch;
  }

  .dl-heading {
    align-items: flex-start;
    gap: 40px;
  }

  .dl-title {
    font-size: 80px;
    letter-spacing: -4px;
    line-height: 1;
    text-align: left;
  }

  .dl-subtitle {
    font-size: 18px;
    letter-spacing: -0.54px;
    line-height: 1.3;
    text-align: left;
  }

  .dl-cards {
    gap: 20px;
    align-items: stretch;
  }

  .dl-card {
    width: 100%;
    padding: 20px;
    gap: 20px;
    border-radius: 10px;
  }

  .dl-card-text { gap: 20px; }
  .dl-card-block { gap: 20px; }
  .dl-platform-name { gap: 20px; }

  .dl-platform-title { font-size: 24px; letter-spacing: -0.72px; }

  .dl-icon-apple     { width: 13px; height: 16px; }
  .dl-icon-apple-btn { width: 13px; height: 16px; }
  .dl-icon-platform  { height: 18px; }

  .dl-badge-available {
    gap: 10px;
    padding: 10px 20px;
    width: auto;
    border-radius: 10px;
  }

  .dl-badge-check { width: 22px; height: 22px; }
  .dl-badge-available-text { font-size: 16px; }

  .dl-badge-soon { padding: 10px 20px; border-radius: 10px; }
  .dl-badge-soon-text { font-size: 16px; }

  .dl-card-desc { font-size: 16px; letter-spacing: -0.48px; }

  .dl-appstore-btn {
    height: 70px;
    padding: 5px 20px;
    border-radius: 10px;
  }

  .dl-appstore-label { font-size: 14px; }
  .dl-appstore-name  { font-size: 18px; }

  .dl-notify-form {
    flex-direction: column;
    gap: 10px;
  }

  .dl-notify-input {
    width: 100%;
    height: 70px;
    padding: 5px 30px;
    font-size: 16px;
    border-radius: 10px;
  }

  .dl-notify-btn {
    width: 100%;
    height: 70px;
    font-size: 16px;
    border-radius: 10px;
    padding: 5px 30px;
  }

  .dl-character {
    width: 220px;
    height: 190px;
    margin: 0 auto;
  }

  .dl-protocols { gap: 40px; }

  .dl-protocols-heading {
    font-size: 36px;
    letter-spacing: -1.8px;
    text-align: center;
  }

  .dl-tags {
    gap: 10px;
    padding: 0;
    justify-content: center;
  }

  .dl-tag {
    gap: 10px;
    padding: 10px 20px;
    border-radius: 10px;
  }

  .dl-tag-dot { width: 5px; height: 5px; }
  .dl-tag-text { font-size: 16px; letter-spacing: -0.48px; }
}

/* ── Docs / Legal pages — Figma 75:11404 (desk) + 250:5043 (mob) ──────────── */
.docs-page {
  position: relative;
  background: var(--bg);
  padding-top: calc(190 * var(--u));
  padding-bottom: calc(120 * var(--u));
}

.docs-glow {
  position: absolute;
  left: 0;
  top: calc(17 * var(--u));
  width: calc(1931 * var(--u));
  height: calc(890 * var(--u));
  background: radial-gradient(ellipse 50% 60% at 0% 50%, rgba(78,71,221,0.18) 0%, transparent 70%);
  pointer-events: none;
}

.docs-inner {
  width: calc(1514 * var(--u));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: calc(80 * var(--u));
}

/* Docs without TOC (EULA, Fair Usage, DMCA) — narrower 1204px container */
.docs-page--no-toc .docs-inner {
  width: calc(1204 * var(--u));
}

.docs-layout {
  display: flex;
  align-items: flex-start;
  gap: calc(155 * var(--u));
}

/* Sidebar TOC — shown only when JS adds .has-sidebar */
.docs-sidebar {
  display: none;
  flex-direction: column;
  gap: calc(10 * var(--u));
  width: calc(440 * var(--u));
  flex-shrink: 0;
  position: sticky;
  top: calc(100 * var(--u));
}
.docs-layout.has-sidebar .docs-sidebar { display: flex; }

.docs-toc-group {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
}
.docs-toc-item {
  display: flex;
  align-items: center;
  border-radius: calc(10 * var(--u));
  padding: calc(10 * var(--u)) calc(20 * var(--u));
  color: #94979c;
  font-size: calc(18 * var(--u));
  font-weight: 700;
  letter-spacing: calc(-0.54 * var(--u));
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.docs-toc-h2 {
  background: var(--surface);
  border: 1px solid var(--surface-border);
}
.docs-toc-h3 {
  background: transparent;
  border: 1px solid transparent;
}
.docs-toc-item:hover,
.docs-toc-item.is-active {
  background: rgba(78,71,221,0.1);
  border-color: rgba(78,71,221,0.2);
  color: #4e47dd;
}

/* Figma: 120px, tracking -6px, weight 400 — sits atop content column */
.docs-title {
  font-size: calc(120 * var(--u));
  line-height: 1;
  letter-spacing: calc(-6 * var(--u));
  color: var(--text);
  font-weight: 400;
  margin: 0;
}

/* Body content — styles for WP editor output */
.docs-body {
  flex: 1;
  min-width: 0;
  font-size: calc(18 * var(--u));
  line-height: 1.1;
  letter-spacing: calc(-0.54 * var(--u));
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--u));
}

/* Section headings: H2 number white (same size as title), H3 number purple italic */
.docs-body h2 {
  font-size: calc(64 * var(--u));
  line-height: 0.8;
  letter-spacing: calc(-3.2 * var(--u));
  font-weight: 400;
  color: var(--text);
  margin: 0;
}

.docs-body h2 .docs-num {
  color: var(--text);
  margin-right: calc(8 * var(--u));
}

.docs-body h3 {
  font-size: calc(36 * var(--u));
  line-height: 1.1;
  letter-spacing: calc(-1.08 * var(--u));
  font-weight: 400;
  color: var(--text);
  margin: 0;
}

.docs-body h3 .docs-num {
  color: #4e47dd;
  font-style: italic;
}

.docs-body p {
  margin: 0;
  line-height: 1.1;
}

.docs-body strong,
.docs-body b {
  color: var(--text);
  font-weight: 700;
}

.docs-body a {
  color: #4e47dd;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.docs-body ul,
.docs-body ol {
  padding-left: calc(27 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
  margin: 0;
}

.docs-body ul { list-style-type: disc; }
.docs-body ol { list-style-type: decimal; }

.docs-body li { line-height: 1.1; }
.docs-body li::marker { color: #4e47dd; }

/* Nested list indentation */
.docs-body li > ul,
.docs-body li > ol {
  margin-top: calc(20 * var(--u));
  padding-left: calc(40 * var(--u));
}

/* Callout card — Figma 75:13667 (General Information summary) */
.docs-body .docs-callout {
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--u));
  padding: calc(20 * var(--u));
  border: 1px solid var(--surface-border);
  border-radius: calc(10 * var(--u));
  background: var(--surface);
}

@media (max-width: 768px) {
  .docs-page {
    padding-top: 120px;
    padding-bottom: 60px;
  }

  .docs-inner {
    width: auto;
    padding: 0 20px;
    gap: 40px;
  }

  .docs-layout { flex-direction: column; gap: 32px; }
  .docs-sidebar { width: 100%; position: static; }
  .docs-toc-item { font-size: 16px; letter-spacing: -0.48px; }
  .docs-toc-group { gap: 5px; }

  .docs-title {
    font-size: 60px;
    letter-spacing: -3px;
    line-height: 0.85;
  }

  .docs-body {
    font-size: 16px;
    letter-spacing: -0.48px;
    gap: 20px;
  }

  .docs-body h2 {
    font-size: 36px;
    letter-spacing: -1.8px;
  }

  .docs-body h3 {
    font-size: 22px;
    letter-spacing: -0.66px;
  }

  .docs-body ul,
  .docs-body ol {
    padding-left: 20px;
    gap: 12px;
  }

  .docs-body .docs-callout {
    padding: 16px;
    gap: 24px;
    border-radius: 10px;
  }

  .docs-body li > ul,
  .docs-body li > ol {
    margin-top: 12px;
    padding-left: 20px;
  }
}

/* ─── Subscription expired / Renew page — Figma 75:11115 ─────────────── */
.renew {
  position: relative;
  padding: calc(200 * var(--u)) 0 calc(120 * var(--u));
}
.renew-glow {
  position: absolute;
  right: 0;
  top: calc(300 * var(--u));
  width: calc(1000 * var(--u));
  height: calc(900 * var(--u));
  background: radial-gradient(closest-side, rgba(78,71,221,0.35), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
/* Mobile cards block hidden on desktop */
.renew-mobile-cards { display: none; }
.renew-inner {
  position: relative;
  z-index: 1;
  width: calc(1514 * var(--u));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: calc(80 * var(--u));
}

/* Top row: title (left) + badge (right) — Figma both at y=200 */
.renew-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(60 * var(--u));
}

/* Body row: left text/buttons + right cards */
.renew-body {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: calc(60 * var(--u));
}

/* Left column — subtitle/tags at top, buttons pinned to bottom */
.renew-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(80 * var(--u));
  flex: 1;
  min-width: 0;
}
.renew-title {
  margin: 0;
  font-weight: 400;
  font-size: calc(120 * var(--u));
  line-height: 1;
  letter-spacing: calc(-6 * var(--u));
  color: var(--text);
  max-width: calc(1108 * var(--u));
}
.renew-title em {
  font-style: italic;
  color: #4e47dd;
}
.renew-lead {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
  max-width: calc(773 * var(--u));
}
.renew-subtitle {
  margin: 0;
  font-size: calc(32 * var(--u));
  line-height: 1;
  letter-spacing: calc(-0.96 * var(--u));
  color: #94979c;
}
.renew-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: calc(20 * var(--u));
}
.renew-tag {
  display: inline-flex;
  align-items: center;
  gap: calc(20 * var(--u));
  padding: calc(10 * var(--u)) calc(20 * var(--u));
  border-radius: calc(10 * var(--u));
  background: rgba(78,71,221,0.1);
  border: 1px solid rgba(78,71,221,0.2);
  color: #4e47dd;
  font-weight: 700;
  font-size: calc(18 * var(--u));
  line-height: 1.1;
  letter-spacing: calc(-0.54 * var(--u));
  text-transform: uppercase;
}
.renew-tag-dot {
  width: calc(5 * var(--u));
  height: calc(5 * var(--u));
  border-radius: 50%;
  background: #4e47dd;
  flex: none;
}

/* Buttons */
.renew-actions {
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--u));
}
.renew-buttons {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
}
.renew-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(20 * var(--u));
  height: calc(70 * var(--u));
  padding: 0 calc(30 * var(--u));
  border-radius: calc(10 * var(--u));
  font-weight: 700;
  font-size: calc(18 * var(--u));
  line-height: 1.1;
  letter-spacing: calc(-0.54 * var(--u));
  text-decoration: none;
  white-space: nowrap;
}
.renew-btn--app {
  background: #ffffff;
  color: #000000;
}
.renew-btn--app .renew-btn-icon {
  flex: none;
  width: calc(16 * var(--u));
  height: calc(20 * var(--u));
}
.renew-btn--support {
  background: #4e47dd;
  border: 1px solid rgba(78,71,221,0.2);
  color: #ffffff;
}
.renew-helper {
  margin: 0;
  font-size: calc(18 * var(--u));
  line-height: 1.1;
  letter-spacing: calc(-0.54 * var(--u));
  color: #94979c;
}

/* Right column */
.renew-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex-shrink: 0;
}
.renew-badge {
  display: inline-flex;
  align-items: center;
  gap: calc(20 * var(--u));
  padding: calc(10 * var(--u)) calc(20 * var(--u));
  border-radius: calc(10 * var(--u));
  background: rgba(238,194,57,0.1);
  border: 1px solid rgba(238,194,57,0.2);
  color: #eec239;
  font-weight: 700;
  font-size: calc(18 * var(--u));
  line-height: 1.1;
  letter-spacing: calc(-0.54 * var(--u));
  text-transform: uppercase;
}
.renew-badge-icon {
  display: inline-flex;
  flex: none;
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
}
.renew-badge-icon svg { width: 100%; height: 100%; display: block; }

.renew-cards-wrap {
  position: relative;
  width: calc(593 * var(--u));
}
/* Cat decorations reuse homepage assets via clipped-mask containers (Figma 75:11191) */
.renew-cat-paw {
  position: absolute;
  z-index: 1;
  left: calc(307 * var(--u));
  top: 0;
  width: calc(439 * var(--u));
  height: calc(370 * var(--u));
  overflow: hidden;
  pointer-events: none;
}
.renew-cat-paw img {
  position: absolute;
  width: 92.71%;
  height: 92.45%;
  left: 4.78%;
  top: -0.01%;
  max-width: none;
  display: block;
}
.renew-cat-head {
  position: absolute;
  z-index: 3;
  right: 0;
  top: calc(-151 * var(--u));
  width: calc(286 * var(--u));
  height: calc(151 * var(--u));
  overflow: hidden;
  pointer-events: none;
  transform: scaleX(-1);
}
.renew-cat-head img {
  position: absolute;
  width: 142.23%;
  height: 183.62%;
  left: -4.81%;
  top: -50.85%;
  max-width: none;
  display: block;
}
.renew-cards {
  position: relative;
  z-index: 2;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  gap: calc(20 * var(--u));
}
.renew-card {
  box-sizing: border-box;
  width: calc(287 * var(--u));
  min-height: calc(370 * var(--u));
  padding: calc(40 * var(--u));
  border-radius: calc(10 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--u));
}
.renew-card--monthly {
  background: var(--surface);
  border: 1px solid var(--surface-border);
}
.renew-card--yearly {
  width: calc(286 * var(--u));
  background: rgba(78,71,221,0.1);
  border: 1px solid rgba(78,71,221,0.2);
}
.renew-card-name {
  margin: 0;
  font-weight: 700;
  font-size: calc(18 * var(--u));
  line-height: 1.1;
  letter-spacing: calc(-0.54 * var(--u));
  color: #94979c;
}
.renew-card--yearly .renew-card-name { color: #4e47dd; flex: 1 1 auto; min-width: 0; }
.renew-card-head {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(20 * var(--u));
  flex-wrap: wrap; /* long translated badges drop to next line instead of overflowing */
}
.renew-best { flex: 0 0 auto; max-width: 100%; }
.renew-card--monthly .renew-card-name { flex: 1; }
.renew-best {
  display: inline-flex;
  align-items: center;
  padding: calc(5 * var(--u)) calc(10 * var(--u));
  border-radius: calc(10 * var(--u));
  background: #4e47dd;
  color: #fff;
  font-weight: 700;
  font-size: calc(14 * var(--u));
  line-height: 1.2;
  letter-spacing: calc(-0.42 * var(--u));
  text-transform: uppercase;
  white-space: nowrap;
}
.renew-card-foot {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
}
.renew-card--monthly .renew-card-foot { gap: calc(40 * var(--u)); }
.renew-price {
  margin: 0;
  line-height: 1;
  letter-spacing: calc(-3.2 * var(--u));
  white-space: nowrap;
}
.renew-cur { color: #4e47dd; font-size: calc(32 * var(--u)); }
.renew-amt { color: var(--text); font-size: calc(64 * var(--u)); }
.renew-per { color: #94979c; font-size: calc(18 * var(--u)); letter-spacing: calc(-0.54 * var(--u)); }
.renew-note {
  margin: 0;
  font-size: calc(18 * var(--u));
  line-height: 1.1;
  letter-spacing: calc(-0.54 * var(--u));
  color: #94979c;
  width: 100%;
}
.renew-note--white { color: var(--text); }
.renew-disc {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
}
.renew-old {
  color: #4e47dd;
  opacity: 0.6;
  font-size: calc(18 * var(--u));
  letter-spacing: calc(-0.54 * var(--u));
  text-decoration: line-through;
}
.renew-disc-badge {
  display: inline-flex;
  align-items: center;
  padding: calc(5 * var(--u)) calc(10 * var(--u));
  border-radius: calc(10 * var(--u));
  background: rgba(52,199,89,0.1);
  color: #34c759;
  font-weight: 700;
  font-size: calc(18 * var(--u));
  line-height: 1.1;
  letter-spacing: calc(-0.54 * var(--u));
  text-transform: uppercase;
}

/* Subscribe cards (desktop; .renew-cards is hidden on mobile) — align both
   prices to the same level and pin the badge top-right, mirroring the home
   pricing card / Figma. Reserve an equal head/name height (84u) so the foot —
   and the price that leads it — starts at the same y in both cards. Long
   translated badges wrap inside the pill instead of dropping below the title.
   html-prefixed to outrank the base .renew rules at equal class specificity. */
@media (min-width: 769px) {
  html .renew-card-head { flex: 0 0 auto; flex-wrap: nowrap; gap: calc(10 * var(--u)); height: calc(84 * var(--u)); }
  html .renew-card--monthly .renew-card-name { flex: 0 0 auto; height: calc(84 * var(--u)); }
  html .renew-best { white-space: normal; text-align: center; max-width: calc(124 * var(--u)); }
}

@media (max-width: 768px) {
  .renew { padding: 110px 0 40px; }
  .renew-inner {
    width: auto;
    padding: 0 20px;
    flex-direction: column;
    gap: 24px;
    text-align: center;
  }
  /* Badge above the title, centered */
  .renew-top {
    flex-direction: column-reverse;
    align-items: center;
    gap: 20px;
  }
  .renew-title {
    font-size: 40px;
    letter-spacing: -2px;
    max-width: none;
  }
  .renew-badge { font-size: 14px; }
  /* Icons: fixed px on mobile (no calc), never shrink */
  .renew-badge-icon { width: 20px; height: 20px; }
  .renew-tag-dot { width: 5px; height: 5px; }

  .renew-body { flex-direction: column; gap: 24px; }
  .renew-left { gap: 24px; align-items: center; }
  .renew-lead { align-items: center; max-width: none; }
  .renew-subtitle { font-size: 18px; letter-spacing: -0.54px; line-height: 1.3; }

  /* Tags stacked, centered */
  .renew-tags { flex-direction: column; align-items: center; width: 100%; gap: 12px; }
  .renew-tag { font-size: 14px; justify-content: center; }

  /* Buttons — Figma 250:7295/7304: white 215px, purple 170px, centered, stacked */
  .renew-actions { width: 100%; align-items: center; gap: 16px; }
  .renew-buttons { flex-direction: column; align-items: center; width: 100%; gap: 12px; }
  /* Auto width + real padding so the button fits its text in every language
     (fixed 215/170px clipped longer labels like pl "Skontaktuj się z pomocą"). */
  .renew-btn { height: 70px; font-size: 16px; border-radius: 10px; width: auto; padding: 0 28px; }
  .renew-btn--app .renew-btn-icon { width: 20px; height: 24px; }
  .renew-helper { font-size: 14px; }
  /* Fixed radii on mobile (no calc) */
  .renew-badge { border-radius: 10px; }
  .renew-tag { border-radius: 10px; }

  /* Desktop cards hidden; mobile uses homepage-style swiper (1:1) */
  .renew-right { display: none; }
  .renew-mobile-cards {
    display: block;
    width: 100%;
    min-height: 0;
    background: transparent;
    margin-top: 40px; /* room above the cat */
  }
  .renew-helper { max-width: none; } /* don't constrain the gray helper line */

  /* Slider arrows — above cards, left-aligned (Figma 250:7345) */
  .renew-mobile-cards .pricing-nav {
    display: flex;
    justify-content: flex-start;
    margin: 0 0 16px;
  }
  /* Slider arrows — match design: prev neutral, next purple */
  .renew-mobile-cards .pricing-slider-prev,
  .renew-mobile-cards .pricing-slider-next {
    border-radius: 10px;
    background: var(--surface);
    border: 1px solid var(--surface-border);
    color: #fff;
    opacity: 1;
  }
  .renew-mobile-cards .pricing-slider-next {
    background: #4e47dd;
    border-color: rgba(78,71,221,0.2);
  }
  .renew-mobile-cards .pricing-slider-prev:hover { background: var(--surface-border); }
  .renew-mobile-cards .pricing-slider-next:hover { filter: brightness(1.08); }
}

/* ─── Site-wide smooth interactions & button hovers ─────────────────── */
a,
button,
.renew-btn, .renew-tag, .renew-card,
.nav-download, .nav-menu-download, .nav-menu a, .nav-lang, .nav-theme,
.hero-btn-store, .hero-btn-how,
.cta-btn-appstore, .cta-btn-soon-btn,
.dl-appstore-btn, .dl-notify-btn, .dl-card,
.btn-main, .pricing-card, .pricing-slider-prev, .pricing-slider-next,
.support-card, .footer-menu a, .docs-body a {
  transition: color .2s ease, background-color .2s ease, border-color .2s ease,
              transform .2s ease, box-shadow .2s ease, filter .2s ease, opacity .2s ease;
}

/* Lift + brighten on the main action buttons */
.renew-btn:hover, .nav-download:hover, .nav-menu-download:hover,
.hero-btn-store:hover, .hero-btn-how:hover,
.cta-btn-appstore:hover, .dl-appstore-btn:hover, .dl-notify-btn:hover,
.btn-main:hover, .cta-btn-soon-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}
.renew-btn:active, .nav-download:active, .nav-menu-download:active,
.hero-btn-store:active, .hero-btn-how:active,
.cta-btn-appstore:active, .dl-appstore-btn:active, .dl-notify-btn:active,
.btn-main:active, .cta-btn-soon-btn:active {
  transform: translateY(0);
  filter: brightness(0.98);
}

/* Purple primary buttons — soft glow */
.renew-btn--support:hover, .nav-download:hover, .nav-menu-download:hover,
.btn-main:hover, .dl-notify-btn:hover {
  box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(78, 71, 221, 0.40);
}
/* White buttons — neutral shadow */
.renew-btn--app:hover, .hero-btn-store:hover, .dl-appstore-btn:hover {
  box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, 0.35);
}

/* Pricing/renew cards: no hover reaction (request 2026-05-26).
   Cards stay static on mouse-over — no lift, no border change (homepage
   pricing + subscribe page). Button/tag hovers are unaffected. */

/* Tag hover */
.renew-tag:hover { border-color: rgba(78, 71, 221, 0.45); }

@media (prefers-reduced-motion: reduce) {
  a, button, .renew-btn, .renew-tag, .renew-card,
  .nav-download, .nav-menu-download, .hero-btn-store, .hero-btn-how,
  .cta-btn-appstore, .dl-appstore-btn, .dl-notify-btn, .btn-main, .pricing-card {
    transition: none;
  }
  .renew-btn:hover, .renew-card:hover, .pricing-card:hover,
  .hero-btn-store:hover, .btn-main:hover { transform: none; }
}


/* ─── Light theme component fixes + smooth theme transition ─────────── */
/* Accent (purple) buttons & badges keep white text in both themes */
[data-theme="light"] .nav-download,
[data-theme="light"] .nav-menu-download,
[data-theme="light"] .hero-btn-how,
[data-theme="light"] .btn-main,
[data-theme="light"] .btn-sub,
[data-theme="light"] .dl-notify-btn,
[data-theme="light"] .cta-btn-soon-btn,
[data-theme="light"] .pricing-badge,
[data-theme="light"] .pricing-save,
[data-theme="light"] .renew-btn--support,
[data-theme="light"] .renew-best { color: #fff; }

/* ── Light theme: Subscription Expired (renew) page ──────────────────── */
/* Status badge: opaque yellow, dark text. */
[data-theme="light"] .renew-badge {
  background: rgba(238, 194, 57, 0.80);
  border-color: transparent;
  color: #181D27;
}
/* "Renew in the app" primary button: dark on light bg, white icon. */
[data-theme="light"] .renew-btn--app { background: #181D27; color: #fff; }
[data-theme="light"] .renew-btn--app .renew-btn-icon { filter: brightness(0) invert(1); }
/* Left column copy goes dark. */
[data-theme="light"] .renew-subtitle,
[data-theme="light"] .renew-helper { color: var(--text); }
/* Monthly (left) price card copy goes solid dark, not muted grey. */
[data-theme="light"] .renew-card-name,
[data-theme="light"] .renew-per,
[data-theme="light"] .renew-note { color: var(--text); }
/* Yearly card 1:1 with homepage light pricing best card. */
[data-theme="light"] .renew-card--yearly { background: #4E47DD; border-color: transparent; }
[data-theme="light"] .renew-card--yearly .renew-card-name,
[data-theme="light"] .renew-card--yearly .renew-cur,
[data-theme="light"] .renew-card--yearly .renew-amt,
[data-theme="light"] .renew-card--yearly .renew-per,
[data-theme="light"] .renew-card--yearly .renew-note--white { color: #fff; }
[data-theme="light"] .renew-card--yearly .renew-old { color: rgba(255, 255, 255, 0.6); }
[data-theme="light"] .renew-card--yearly .renew-best { background: rgba(255, 255, 255, 0.20); }
[data-theme="light"] .renew-card--yearly .renew-disc-badge { background: #34C759; color: #fff; }

/* Smooth fade when switching themes (incl. transform/shadow so hovers stay smooth) */
html, body, section, header, footer, .nav, .site-header,
[class*="-card"], [class*="-btn"], .theme-toggle, .docs-body, .docs-sidebar,
.renew-tag, .pricing-card, .step-card {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease,
              transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, opacity 0.2s ease;
}

/* ── Light theme: final CTA block ──────────────────────────────────── */
[data-theme="light"] .cta-card { background: #4E47DD; border-color: transparent; }
[data-theme="light"] .cta-logo { color: #fff; --fill-0: #fff; }
[data-theme="light"] .cta-btn-appstore { background: #000; }
[data-theme="light"] .cta-btn-appstore .btn-main { color: #fff; }
[data-theme="light"] .cta-btn-appstore .btn-sub  { color: rgba(255, 255, 255, 0.7); }
[data-theme="light"] .cta-btn-appstore .btn-icon,
[data-theme="light"] .cta-btn-appstore .btn-main > svg { --fill-0: #fff; }


/* Light theme: How-it-works connector lines (#94979C), CTA block */
[data-theme="light"] .steps-lines svg line { stroke: #94979C; }

/* Light theme: baked phone screens → hide dark app-screen overlays */

/* Light theme: CTA card content (on solid purple) */
[data-theme="light"] .cta-heading,
[data-theme="light"] .cta-heading *,
[data-theme="light"] .cta-desc,
[data-theme="light"] .cta-desc p,
[data-theme="light"] .cta-desc strong { color: #fff; }
[data-theme="light"] .cta-btn-soon-btn { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.10); }
[data-theme="light"] .cta-btn-soon-btn .btn-sub { color: rgba(255,255,255,0.7); }
[data-theme="light"] .cta-btn-soon-btn .btn-row { color: #fff; }
[data-theme="light"] .cta-btn-soon-btn .btn-icon,
[data-theme="light"] .cta-btn-soon-btn .btn-row > svg { --fill-0: #fff; }
[data-theme="light"] .cta-btn-soon-badge { background: rgba(255,255,255,0.20); border-color: rgba(78,71,221,0.20); color: #fff; }

/* Features code texture — theme × breakpoint visibility */
.features-code-bg--mob { display: none; }
.features-code-bg--desk.features-code-bg--light { display: none; }
[data-theme="light"] .features-code-bg--desk.features-code-bg--dark  { display: none; }
[data-theme="light"] .features-code-bg--desk.features-code-bg--light { display: block; }
@media (max-width: 768px) {
  .features-code-bg--desk { display: none; }
  .features-code-bg--mob.features-code-bg--dark  { display: block; }
  .features-code-bg--mob.features-code-bg--light { display: none; }
  [data-theme="light"] .features-code-bg--mob.features-code-bg--dark  { display: none; }
  [data-theme="light"] .features-code-bg--mob.features-code-bg--light { display: block; }
}

/* Light theme: CTA phones is a windowed composite (757×575) — fit, no tall crop */
[data-theme="light"] .cta-phones--has-light img { height: 100%; top: 0; }


/* ════════════════════════════════════════════════════════════════════════
   i18n letter-spacing relax — non-EN (ru/uk/pl/es/pt)              v4.3.3
   SF Pro Display negative tracking is tuned for Latin. On Cyrillic and
   diacritics it collapses the inter-word space (~1px) → words look glued.
   Scope = html:not([lang|="en"]) so EN keeps its Figma-exact tracking.
   Body copy → normal. Display headings → ~half (per-language tuned by QA).
   Generated from the 168 negative letter-spacing rules in this file.
   ════════════════════════════════════════════════════════════════════════ */
html:not([lang|="en"]) .ab-left-sub,
html:not([lang|="en"]) .ab-mission-text,
html:not([lang|="en"]) .ab-val-body,
html:not([lang|="en"]) .cta-btn-appstore .btn-main,
html:not([lang|="en"]) .cta-btn-appstore .btn-sub,
html:not([lang|="en"]) .cta-btn-soon-badge,
html:not([lang|="en"]) .cta-btn-soon-btn .btn-row,
html:not([lang|="en"]) .cta-btn-soon-btn .btn-sub,
html:not([lang|="en"]) .dl-appstore-label,
html:not([lang|="en"]) .dl-appstore-name,
html:not([lang|="en"]) .dl-badge-available-text,
html:not([lang|="en"]) .dl-badge-soon-text,
html:not([lang|="en"]) .dl-card-desc,
html:not([lang|="en"]) .dl-notify-btn,
html:not([lang|="en"]) .dl-notify-input,
html:not([lang|="en"]) .dl-tag-text,
html:not([lang|="en"]) .docs-body,
html:not([lang|="en"]) .docs-toc-item,
html:not([lang|="en"]) .feature-card p,
html:not([lang|="en"]) .footer-col-links a,
html:not([lang|="en"]) .footer-copy,
html:not([lang|="en"]) .footer-email,
html:not([lang|="en"]) .footer-soon-badge,
html:not([lang|="en"]) .hero-badge-text,
html:not([lang|="en"]) .hero-btn-how,
html:not([lang|="en"]) .hero-btn-how span:last-child,
html:not([lang|="en"]) .hero-btn-store-main,
html:not([lang|="en"]) .hero-btn-store-sub,
html:not([lang|="en"]) .hero-desc,
html:not([lang|="en"]) .hero-note,
html:not([lang|="en"]) .lang-dropdown li a,
html:not([lang|="en"]) .loc-col-head p,
html:not([lang|="en"]) .loc-row-item,
html:not([lang|="en"]) .nav-download,
html:not([lang|="en"]) .nav-globe-text,
html:not([lang|="en"]) .nav-link,
html:not([lang|="en"]) .nav-menu a,
html:not([lang|="en"]) .pain-card p,
html:not([lang|="en"]) .pricing-badge,
html:not([lang|="en"]) .pricing-name,
html:not([lang|="en"]) .pricing-note,
html:not([lang|="en"]) .pricing-old,
html:not([lang|="en"]) .pricing-period,
html:not([lang|="en"]) .pricing-save,
html:not([lang|="en"]) .renew-badge,
html:not([lang|="en"]) .renew-best,
html:not([lang|="en"]) .renew-btn,
html:not([lang|="en"]) .renew-card-name,
html:not([lang|="en"]) .renew-disc-badge,
html:not([lang|="en"]) .renew-helper,
html:not([lang|="en"]) .renew-note,
html:not([lang|="en"]) .renew-old,
html:not([lang|="en"]) .renew-per,
html:not([lang|="en"]) .renew-tag,
html:not([lang|="en"]) .sp-contact-sub,
html:not([lang|="en"]) .sp-faq-answer,
html:not([lang|="en"]) .step-card p,
html:not([lang|="en"]) .step-num {
  letter-spacing: normal;
}

html:not([lang|="en"]) .hero-title {
  letter-spacing: -4px;
}

html:not([lang|="en"]) .ab-title,
html:not([lang|="en"]) .dl-title,
html:not([lang|="en"]) .loc-hero-heading,
html:not([lang|="en"]) .sp-title {
  letter-spacing: calc(-4 * var(--u));
}

html:not([lang|="en"]) .cta-title {
  letter-spacing: -3px;
}

html:not([lang|="en"]) .docs-title,
html:not([lang|="en"]) .renew-title {
  letter-spacing: calc(-3 * var(--u));
}

html:not([lang|="en"]) .hero-title {
  letter-spacing: -2px;
}

html:not([lang|="en"]) .features .section-title,
html:not([lang|="en"]) .hero-title-accent,
html:not([lang|="en"]) .how .section-title,
html:not([lang|="en"]) .pain-title,
html:not([lang|="en"]) .pricing .section-title,
html:not([lang|="en"]) .pricing-price {
  letter-spacing: -1.6px;
}

html:not([lang|="en"]) .ab-mission-heading,
html:not([lang|="en"]) .ab-stat-num,
html:not([lang|="en"]) .ab-values-heading,
html:not([lang|="en"]) .dl-protocols-heading,
html:not([lang|="en"]) .docs-body h2,
html:not([lang|="en"]) .loc-stat-num,
html:not([lang|="en"]) .renew-price {
  letter-spacing: calc(-1.6 * var(--u));
}

html:not([lang|="en"]) .footer-col-title {
  letter-spacing: -0.8px;
}

html:not([lang|="en"]) .sp-contact-handle {
  letter-spacing: calc(-0.8 * var(--u));
}

html:not([lang|="en"]) .docs-body h3 {
  letter-spacing: calc(-0.54 * var(--u));
}

html:not([lang|="en"]) .cta-desc,
html:not([lang|="en"]) .feature-card h3,
html:not([lang|="en"]) .hero-desc,
html:not([lang|="en"]) .pain-card h3,
html:not([lang|="en"]) .pricing-currency,
html:not([lang|="en"]) .pricing-sub,
html:not([lang|="en"]) .step-card h3 {
  letter-spacing: -0.48px;
}

html:not([lang|="en"]) .ab-stat-label,
html:not([lang|="en"]) .ab-val-title,
html:not([lang|="en"]) .dl-platform-title,
html:not([lang|="en"]) .dl-subtitle,
html:not([lang|="en"]) .loc-hero-sub,
html:not([lang|="en"]) .loc-more,
html:not([lang|="en"]) .loc-stat-label,
html:not([lang|="en"]) .renew-subtitle,
html:not([lang|="en"]) .sp-contact-label,
html:not([lang|="en"]) .sp-faq-q-text,
html:not([lang|="en"]) .sp-subtitle {
  letter-spacing: calc(-0.48 * var(--u));
}

@media (max-width: 768px) {
html:not([lang|="en"]) .ab-left-sub,
html:not([lang|="en"]) .ab-mission-text,
html:not([lang|="en"]) .ab-stat-label,
html:not([lang|="en"]) .ab-val-body,
html:not([lang|="en"]) .ab-val-title,
html:not([lang|="en"]) .cta-btn-soon-badge,
html:not([lang|="en"]) .cta-desc,
html:not([lang|="en"]) .dl-card-desc,
html:not([lang|="en"]) .dl-platform-title,
html:not([lang|="en"]) .dl-subtitle,
html:not([lang|="en"]) .dl-tag-text,
html:not([lang|="en"]) .docs-body,
html:not([lang|="en"]) .docs-body h3,
html:not([lang|="en"]) .docs-toc-item,
html:not([lang|="en"]) .feature-card h3,
html:not([lang|="en"]) .feature-card p,
html:not([lang|="en"]) .footer-col-links a,
html:not([lang|="en"]) .how-step-indicator,
html:not([lang|="en"]) .loc-col-head p,
html:not([lang|="en"]) .loc-hero-sub,
html:not([lang|="en"]) .loc-more,
html:not([lang|="en"]) .loc-row-item,
html:not([lang|="en"]) .loc-stat-label,
html:not([lang|="en"]) .mobile-step-card .step-card h3,
html:not([lang|="en"]) .mobile-step-card .step-num,
html:not([lang|="en"]) .nav-menu-download,
html:not([lang|="en"]) .nav-menu-lang-dropdown li a,
html:not([lang|="en"]) .nav-menu-lang-text,
html:not([lang|="en"]) .pain-card h3,
html:not([lang|="en"]) .pain-card p,
html:not([lang|="en"]) .pricing-badge,
html:not([lang|="en"]) .pricing-note,
html:not([lang|="en"]) .pricing-old,
html:not([lang|="en"]) .pricing-save,
html:not([lang|="en"]) .pricing-sub,
html:not([lang|="en"]) .renew-subtitle,
html:not([lang|="en"]) .sp-contact-label,
html:not([lang|="en"]) .sp-contact-sub,
html:not([lang|="en"]) .sp-faq-answer,
html:not([lang|="en"]) .sp-faq-q-text,
html:not([lang|="en"]) .sp-subtitle {
  letter-spacing: normal;
}

html:not([lang|="en"]) .ab-title,
html:not([lang|="en"]) .cta-title,
html:not([lang|="en"]) .dl-title,
html:not([lang|="en"]) .sp-title {
  letter-spacing: -2px;
}

html:not([lang|="en"]) .pricing-price {
  letter-spacing: -1.6px;
}

html:not([lang|="en"]) .docs-title {
  letter-spacing: -1.5px;
}

html:not([lang|="en"]) .loc-accent-italic {
  letter-spacing: -1.2px;
}

html:not([lang|="en"]) .renew-title {
  letter-spacing: -1px;
}

html:not([lang|="en"]) .ab-mission-heading,
html:not([lang|="en"]) .ab-stat-num,
html:not([lang|="en"]) .ab-values-heading,
html:not([lang|="en"]) .dl-protocols-heading,
html:not([lang|="en"]) .docs-body h2,
html:not([lang|="en"]) .features .section-title,
html:not([lang|="en"]) .how .section-title,
html:not([lang|="en"]) .loc-hero-line1 > span:not(.loc-accent-italic):not(.loc-muted),
html:not([lang|="en"]) .loc-hero-line2 > span:not(.loc-accent-italic),
html:not([lang|="en"]) .loc-in,
html:not([lang|="en"]) .loc-stat-num,
html:not([lang|="en"]) .pain-title,
html:not([lang|="en"]) .pricing .section-title {
  letter-spacing: -0.9px;
}

html:not([lang|="en"]) .footer-col-title,
html:not([lang|="en"]) .sp-contact-handle {
  letter-spacing: -0.6px;
}

html:not([lang|="en"]) .nav-menu-mobile-list li a {
  letter-spacing: -0.54px;
}
}

/* Notify-form honeypot — visually removed, kept in the a11y/tab flow off-screen
   so humans never see or focus it; bots that fill it are dropped server-side. */
.dl-notify-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ── Smooth anchor scroll + horizontal-overflow guard ───────────────────────
   Section wrappers no longer clip (decorative cat/glow can extend past a
   section). .root-wrap{overflow:hidden} stays the primary side-scroll guard;
   `overflow-x: clip` here is extra insurance and (unlike hidden) does NOT
   create a scroll container, so position:sticky keeps working. */
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }

/* Support hero: non-EN subtitles run longer than EN. The 367u gap starves the
   right-hand subtitle column into ragged narrow lines — shrink it so the text
   reads in 2–4 normal lines. */
html:not([lang|="en"]) .sp-hero { gap: calc(140 * var(--u)); }
@media (max-width: 768px) {
  html:not([lang|="en"]) .sp-hero { gap: calc(56 * var(--u)); }
}

/* Mobile pricing: the cat peeks above the cards and overlapped the subtitle.
   Keep the cat as-is and push the cards block down so the cat clears the
   subtitle. Non-EN subtitles wrap longer → larger offset than EN. */
@media (max-width: 768px) {
  html[lang|="en"] .pricing-swiper { margin-top: 100px; }
  html:not([lang|="en"]) .pricing-swiper { margin-top: 132px; }
}

/* Polish: badge "NAJLEPSZA WARTOŚĆ" wraps inside a 100px pill. */
html[lang|="pl"] .pricing-badge {
  width: auto;
  max-width: 100px;
}

/* ── Mobile: shrink the large display headings so they fit phone widths in
   every language (long words like "Приватность"/"Privacidade" can't wrap).
   Applied to ALL languages incl. EN for identical sizing across the site. */
@media (max-width: 768px) {
  .hero-title,
  .cta-title,
  .ab-title,
  .sp-title,
  .dl-title { font-size: 52px; letter-spacing: -2px; }
  /* Legal titles have very long single words in some languages
     (e.g. ru "конфиденциальности"); smaller + allow break so they never clip. */
  .docs-title { font-size: 36px; overflow-wrap: break-word; }
}