:root {
  --red: #FF2800;
  --bg: #FFFFFF;
  --heading: #111827;
  --ink: #0F172A;
  --text-2: #6B7280;
  --text-3: #64748B;
  --muted: #9CA3AF;
  --border: #CBD5E1;
  --border-2: #D1D5DB;
  --chip: #E5E7EB;
  --success: #16A34A;
  --error: #DC2626;
  --black: #000000;

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius-btn: 16px;
  --radius-card: 16px;
  --radius-input: 12px;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.12);
  --nav-h: 64px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); -webkit-text-size-adjust: 100%; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
p { margin: 0; }
h1, h2, h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 800;
  color: var(--heading);
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
  hyphens: auto;
}
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 6px; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--heading); color: #fff; padding: 10px 14px; border-radius: 10px; }
.skip-link:focus { top: 12px; }

.container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.grid-12 { display: grid; gap: 24px; }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 24px; border-radius: var(--radius-btn);
  font-family: var(--sans); font-weight: 700; font-size: 18px; line-height: 1.2;
  text-align: center; transition: transform 0.2s var(--ease), background-color 0.2s, box-shadow 0.2s;
}
.btn .icon { width: 20px; height: 20px; flex: none; transition: transform 0.2s var(--ease); }
.btn-primary { background: var(--red); color: #FFFFFF; }
.btn-primary:hover { background: #E62400; box-shadow: 0 8px 20px -10px rgba(255, 40, 0, 0.7); }
.btn-primary:hover .icon { transform: translateX(3px); }
.btn-primary:active { transform: scale(0.98); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.btn-sm { padding: 10px 16px; font-size: 15px; border-radius: 12px; }
.btn-block { width: 100%; }

.text-link { font-weight: 500; color: var(--muted); transition: color 0.2s; }
.text-link:hover { color: var(--heading); }
.text-link-red { display: inline-flex; gap: 6px; font-weight: 700; color: var(--red); }
.text-link-red:hover { color: #E62400; }
.text-link-red span[aria-hidden] { transition: transform 0.2s var(--ease); }
.text-link-red:hover span[aria-hidden] { transform: translateX(3px); }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: transparent; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--nav-h); }
.logo { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.logo-mark { width: auto; height: 34px; }
.logo-word { font-family: var(--sans); font-weight: 800; font-size: 28px; line-height: 1; letter-spacing: -0.03em; color: var(--heading); }
.logo-white .logo-word { color: #FFFFFF; }
.logo-lg .logo-mark { height: 44px; }
.logo-lg .logo-word { font-size: 36px; }
.logo-i { position: relative; }
.logo-i::after {
  content: ""; position: absolute; left: 50%; top: 0.02em; transform: translateX(-50%);
  width: 0.24em; height: 0.24em; border-radius: 50%; background: #0AFFFF;
}
.nav-links { display: none; }
.nav-links a { font-weight: 500; font-size: 15px; color: var(--text-2); white-space: nowrap; transition: color 0.2s; }
.nav-links a:hover { color: var(--heading); }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-cta { display: none; }

.lang-toggle { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 3px; border: 1px solid var(--border-2); border-radius: 999px; background: #F3F4F6; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; }
.lang-thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: var(--red); box-shadow: 0 2px 6px -2px rgba(255, 40, 0, 0.5); transition: transform 0.3s var(--ease); }
html[lang="fr"] .lang-thumb { transform: translateX(100%); }
.lang-opt { position: relative; min-width: 34px; padding: 5px 8px; text-align: center; color: var(--text-2); transition: color 0.3s var(--ease); }
html[lang="en"] [data-lang-opt="en"], html[lang="fr"] [data-lang-opt="fr"] { color: #fff; }
.lang-toggle:hover .lang-opt { color: var(--heading); }
html[lang="en"] .lang-toggle:hover [data-lang-opt="en"], html[lang="fr"] .lang-toggle:hover [data-lang-opt="fr"] { color: #fff; }
.lang-toggle:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.menu-btn { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; color: var(--heading); }
.menu-btn svg { width: 24px; height: 24px; }
.menu-btn .i-close, .menu-btn[aria-expanded="true"] .i-menu { display: none; }
.menu-btn[aria-expanded="true"] .i-close { display: block; }

.mobile-menu { border-top: 1px solid var(--border-2); background: #FFFFFF; }
.mobile-menu nav { display: flex; flex-direction: column; padding-top: 8px; padding-bottom: 24px; }
.mobile-menu nav > a:not(.btn) { padding: 14px 0; font-size: 18px; font-weight: 500; color: var(--heading); border-bottom: 1px solid var(--border-2); }
.mobile-menu .btn { margin-top: 20px; }

/* ---------- Hero ---------- */
.hero { padding: 40px 0 72px; }
.hero-copy { text-align: center; }
.hero h1 { font-size: clamp(38px, 10vw, 68px); line-height: 1.06; letter-spacing: -0.02em; }
.lead { margin-top: 20px; font-size: 18px; line-height: 1.55; color: var(--text-2); }
.hero .lead { max-width: 34em; margin-left: auto; margin-right: auto; }
.hero-actions { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 32px; }
.hero-actions .btn { width: 100%; }
.hero-visual { position: relative; display: flex; flex-direction: column; align-items: center; margin-top: 48px; }
.phone {
  position: relative; width: 272px; aspect-ratio: 9 / 18.5; padding: 10px;
  background: #111111; border: 2px solid #000000; border-radius: 44px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 30px 60px -24px rgba(15, 23, 42, 0.7);
}
.phone::before { content: ""; position: absolute; z-index: 3; top: 18px; left: 50%; transform: translateX(-50%); width: 76px; height: 22px; border-radius: 999px; background: var(--heading); }
.phone-screen { position: relative; height: 100%; border-radius: 34px; overflow: hidden; background: var(--border-2); color: #FFFFFF; }
.slides, .slide { position: absolute; inset: 0; margin: 0; }
.slide { opacity: 0; transition: opacity 0.6s ease; }
.slide.is-active { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
/* Live screen UI — sized in em so it scales with the phone */
.phone-screen { font-size: 10px; line-height: 1.3; }
.phone-screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, transparent 22%, transparent 42%, rgba(0, 0, 0, 0.78) 100%);
}
.status-bar, .live-header, .screen-rail, .screen-bottom { position: absolute; z-index: 2; }

.status-bar { top: 0.9em; left: 2.4em; right: 2.2em; display: flex; justify-content: space-between; align-items: center; font-size: 1.2em; font-weight: 600; }
.status-icons { display: flex; gap: 0.35em; }
.status-icons svg { width: 1.2em; height: 1.2em; }
.status-icons .fill { fill: currentColor; stroke: none; }

.live-header { top: 4.2em; left: 1.2em; right: 1.2em; display: flex; align-items: center; justify-content: space-between; gap: 0.5em; }
.host-pill { display: flex; align-items: center; gap: 0.5em; min-width: 0; padding: 0.35em 0.4em 0.35em 0.35em; border-radius: 999px; background: rgba(0, 0, 0, 0.72); }
.host-avatar-wrap { position: relative; flex: none; }
.host-avatar { width: 2.8em; height: 2.8em; border-radius: 50%; object-fit: cover; border: 0.15em solid var(--red); }
.host-avatar-wrap .badge-live { position: absolute; left: 50%; bottom: -0.45em; transform: translateX(-50%); font-size: 0.65em; padding: 0.15em 0.45em; line-height: 1.2; }
.host-meta { min-width: 0; }
.host-meta strong { display: block; font-size: 1.05em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.host-meta small { display: flex; align-items: center; gap: 0.3em; font-size: 0.95em; opacity: 0.9; }
.host-meta small svg { width: 1em; height: 1em; fill: currentColor; stroke: none; }
.follow-btn { flex: none; background: var(--red); color: #FFFFFF; font-weight: 700; font-size: 1em; letter-spacing: 0.03em; text-transform: uppercase; padding: 0.6em 0.8em; border-radius: 999px; }
.live-pill { flex: none; display: flex; align-items: center; gap: 0.35em; padding: 0.7em 0.75em; border-radius: 999px; background: rgba(0, 0, 0, 0.72); font-size: 1.1em; font-weight: 600; font-variant-numeric: tabular-nums; }
.live-pill svg { width: 1.2em; height: 1.2em; }
.badge-live { background: var(--red); color: #FFFFFF; font-size: 0.85em; font-weight: 700; letter-spacing: 0.06em; padding: 0.3em 0.6em; border-radius: 999px; }

.phone-screen .rail-cart { position: absolute; z-index: 2; right: 1.2em; top: 10.5em; }
.screen-rail { right: 1.2em; bottom: 12.8em; display: flex; flex-direction: column; align-items: center; gap: 1.1em; }
.rail-item { display: flex; flex-direction: column; align-items: center; gap: 0.3em; }
.rail-item small { font-size: 1em; font-weight: 600; white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.rail-btn { position: relative; display: grid; place-items: center; width: 3.8em; height: 3.8em; border-radius: 50%; background: rgba(0, 0, 0, 0.78); }
.rail-btn svg { width: 1.9em; height: 1.9em; }
.rail-cart em { position: absolute; top: -0.3em; right: -0.3em; display: grid; place-items: center; min-width: 1.7em; height: 1.7em; padding: 0 0.3em; border-radius: 999px; background: var(--red); font-style: normal; font-size: 1em; font-weight: 700; }

.screen-bottom { left: 1.2em; right: 1.2em; bottom: 1.2em; display: flex; flex-direction: column; gap: 0.9em; }
.live-comments { display: flex; flex-direction: column; gap: 0.8em; padding-right: 4em; }
.live-comments li { display: flex; gap: 0.7em; align-items: flex-start; animation: comment-in 0.45s var(--ease) both; }
.live-comments li:nth-child(2) { animation-delay: 0.9s; }
.comment-avatar { flex: none; display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; background: rgba(255, 255, 255, 0.9); color: var(--heading); font-size: 0.95em; font-weight: 700; }
.live-comments strong { display: block; font-size: 1.1em; font-weight: 700; }
.live-comments p { font-size: 1.15em; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
@keyframes comment-in { from { opacity: 0; transform: translateY(0.6em); } }

.product-card { display: flex; align-items: center; gap: 0.8em; padding: 0.7em; border-radius: 1.2em; background: rgba(17, 24, 39, 0.92); }
.product-thumb { flex: none; width: 4.4em; height: 4.4em; border-radius: 0.7em; object-fit: cover; }
.product-info { flex: 1; min-width: 0; }
.product-name { display: -webkit-box; font-size: 1.2em; font-weight: 700; line-height: 1.2; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.product-price { display: block; font-size: 1.1em; opacity: 0.9; white-space: nowrap; }
.product-escrow { display: flex; align-items: center; gap: 0.3em; margin-top: 0.2em; font-size: 0.95em; color: #86EFAC; white-space: nowrap; }
.product-escrow svg { flex: none; width: 1.1em; height: 1.1em; }
.buy-btn { flex: none; background: var(--red); color: #FFFFFF; font-weight: 700; font-size: 1.1em; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.75em 1.1em; border-radius: 999px; }

.rail-wallet { cursor: pointer; }
.rail-wallet .rail-btn { transition: background-color 0.2s, transform 0.2s var(--ease); }
.rail-wallet:hover .rail-btn { background: rgba(0, 0, 0, 0.7); transform: scale(1.06); }
.rail-wallet[aria-expanded="true"] .rail-btn { background: var(--red); }
.rail-wallet .rail-btn::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255, 40, 0, 0.7); animation: wallet-hint 1.8s ease-out 2.5s 3;
}
@keyframes wallet-hint { to { box-shadow: 0 0 0 0.9em rgba(255, 40, 0, 0); } }

/* Wallet sheet (shared by hero + trust phones) */
.wallet-sheet { background: #111827; color: #FFFFFF; border-radius: 2.2em 2.2em 0 0; padding: 0.9em 1.4em 1.3em; box-shadow: 0 -1em 3em rgba(0, 0, 0, 0.35); }
.sheet-handle { display: block; width: 3.6em; height: 0.4em; margin: 0 auto 1em; border-radius: 999px; background: rgba(255, 255, 255, 0.25); }
.wallet-sheet .sheet-title { color: #FFFFFF; font-size: 1.9em; line-height: 1.15; }
.sheet-sub { margin-top: 0.4em; font-size: 1.1em; color: var(--muted); }
.balance-card { display: flex; align-items: center; justify-content: space-between; gap: 0.8em; margin-top: 1.1em; padding: 0.9em 1.1em; border-radius: 1.2em; background: #1F2937; }
.balance-card > div { min-width: 0; }
.balance-card small { display: block; font-size: 0.9em; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.balance-card strong { display: block; margin-top: 0.1em; font-size: 2em; font-weight: 700; white-space: nowrap; }
.balance-escrow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2em 0.35em; margin-top: 0.35em; font-size: 0.95em; color: #86EFAC; }
.balance-escrow svg { flex: none; width: 1.1em; height: 1.1em; }
.balance-escrow b { font-weight: 700; white-space: nowrap; }
.balance-icon { flex: none; display: grid; place-items: center; width: 3.4em; height: 3.4em; border-radius: 50%; background: rgba(255, 255, 255, 0.1); }
.balance-icon svg { width: 1.7em; height: 1.7em; }
.sheet-label { display: block; margin: 1.1em 0 0.6em; font-size: 0.95em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.pay-methods { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5em; }
.pay-methods li { display: flex; align-items: center; gap: 0.9em; padding: 0.65em 0.9em; border-radius: 1.1em; border: 1px solid rgba(255, 255, 255, 0.28); }
.pm-icon { flex: none; display: grid; place-items: center; width: 3em; height: 3em; border-radius: 0.8em; background: rgba(255, 255, 255, 0.08); color: var(--muted); }
.pm-icon svg { width: 1.5em; height: 1.5em; }
.pay-methods .is-linked .pm-icon { background: rgba(255, 40, 0, 0.16); color: var(--red); }
.pm-text { flex: 1; min-width: 0; }
.pm-text strong { display: block; font-size: 1.2em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-text small { display: block; font-size: 0.95em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-state { flex: none; display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.5); color: var(--muted); }
.pm-state svg { width: 1.1em; height: 1.1em; stroke-width: 2.5; }
.pay-methods .is-linked .pm-state { background: var(--success); border-color: var(--success); color: #FFFFFF; }
.sheet-btn { display: block; margin-top: 1.1em; padding: 1em; border-radius: 1.2em; background: var(--red); text-align: center; font-size: 1.2em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

.sheet-backdrop { position: absolute; inset: 0; z-index: 5; background: rgba(0, 0, 0, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.hero-wallet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; transform: translateY(105%); transition: transform 0.45s var(--ease); cursor: pointer; }
.wallet-open .sheet-backdrop { opacity: 1; pointer-events: auto; cursor: pointer; }
.wallet-open .hero-wallet { transform: none; }

.trust-phone { position: relative; display: flex; justify-content: center; }
.trust-float { position: absolute; z-index: 5; font-size: 8px; }
.trust-float .app { box-shadow: 0 14px 40px rgba(15, 23, 42, 0.2); }
.trust-otp { left: 0; bottom: 8%; rotate: -4deg; }
.trust-lock { right: 0; top: 14%; rotate: 5deg; }
.wallet-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.55); }
.wallet-static { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; }

.comment-bar { display: flex; align-items: center; gap: 0.7em; }
.comment-input { flex: 1; min-width: 0; padding: 0.9em 1.3em; border-radius: 999px; background: rgba(255, 255, 255, 0.32); font-size: 1.1em; color: rgba(255, 255, 255, 0.92); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.send-btn { flex: none; display: grid; place-items: center; width: 3.6em; height: 3.6em; border-radius: 50%; background: var(--red); }
.send-btn svg { width: 1.6em; height: 1.6em; }

.dots { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.dots button { width: 8px; height: 8px; border-radius: 999px; background: var(--chip); transition: width 0.3s var(--ease), background-color 0.3s; }
.dots button[aria-selected="true"] { width: 24px; background: var(--red); }
.dots button:hover:not([aria-selected="true"]) { background: var(--muted); }

/* ---------- Sections ---------- */
.section { padding: 72px 0; }
.section-tight-top { padding-top: 24px; }
.section-head { margin-bottom: 32px; }
.section h2 { font-size: clamp(32px, 7vw, 48px); line-height: 1.1; letter-spacing: -0.015em; }

.card { background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius-card); }

/* How it works: phone stage + steps */
.how-grid { align-items: center; gap: 40px; }
.how-copy { order: -1; }
.how-copy .lead { max-width: 22em; }

/* The stage is sized in em: 56em = stage width, so everything scales together. */
.how-media { container-type: inline-size; width: 100%; max-width: 480px; margin: 0 auto; }
.how-stage { position: relative; aspect-ratio: 4 / 5; overflow: visible; background: transparent; font-size: 7px; font-size: calc(100cqw / 56); }
.how-phone {
  position: absolute; z-index: 2; left: 50%; top: 50%; width: 24em; height: 50em; padding: 0.9em;
  border: 0.22em solid #000000; border-radius: 3.8em; background: #111; transform: translate(-50%, -50%);
  box-shadow: 0 0 0 0.12em rgba(0, 0, 0, 0.55), 0 2.4em 4.8em -1.2em rgba(0, 0, 0, 0.55);
}
.how-phone .app-feed { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 2.9em; font-size: 1.11em; }
.how-side { position: absolute; z-index: 1; top: 50%; font-size: 0.8em; }
.how-side .app { min-height: 48em; border: 0.12em solid rgba(15, 23, 42, 0.22); border-radius: 2.6em; box-shadow: 0 1.6em 3.2em -1em rgba(0, 0, 0, 0.35); }
.how-side-left { left: 2.5em; transform: translateY(-44%); }
.how-side-right { right: 2.5em; transform: translateY(-56%); }
.how-side-right .app,
.how-side-right .app-chat { overflow: visible; }
.how-side-right .chat-body { position: relative; z-index: 2; }
.how-side-right .bubble,
.how-side-right .bubble-offer {
  box-shadow: 0 0.7em 1.6em rgba(15, 23, 42, 0.18);
}

/* Audience: one photo + floating app screens, copy on the right */
.aud-grid { align-items: center; gap: 40px; }
.aud-copy { order: -1; }
.aud-copy h2 { font-size: clamp(32px, 7vw, 48px); line-height: 1.1; letter-spacing: -0.015em; }
.aud-copy .lead { max-width: 28em; }

.aud-media { container-type: inline-size; width: 100%; max-width: 480px; margin: 0 auto; }
.aud-stage { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 24px; background: #111; font-size: 7px; font-size: calc(100cqw / 56); }
.aud-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.aud-stage::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.18); }
.aud-phone {
  position: absolute; z-index: 2; left: 54%; top: 50%; width: 24em; height: 50em; padding: 0.9em;
  border: 0.22em solid #000000; border-radius: 3.8em; background: #111; transform: translate(-50%, -50%);
  box-shadow: 0 0 0 0.12em rgba(0, 0, 0, 0.55), 0 2.4em 4.8em -1.2em rgba(0, 0, 0, 0.55);
}
.aud-phone .app-foryou { width: 100%; height: 100%; border-radius: 2.9em; font-size: 0.9em; }
.aud-side { position: absolute; z-index: 1; left: 2em; top: 50%; font-size: 0.78em; transform: translateY(-48%); }
.aud-side .app { min-height: 48em; border: 0.12em solid rgba(15, 23, 42, 0.22); border-radius: 2.6em; box-shadow: 0 1.6em 3.2em -1em rgba(0, 0, 0, 0.4); }

.app-cats { width: 26em; padding: 1.4em 1.4em 0; overflow: hidden; }
.cats-search { display: flex; align-items: center; gap: 0.7em; padding: 0.85em 1.1em; border-radius: 999px; background: #F3F4F6; font-size: 1.15em; color: var(--text-3); }
.cats-search svg { width: 1.4em; height: 1.4em; flex: none; }
.cats-title { display: block; margin: 1.2em 0 1em; font-size: 1.7em; font-weight: 800; }
.cats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2em 0.6em; }
.cats-item { display: grid; justify-items: center; gap: 0.5em; text-align: center; font-size: 1.05em; font-weight: 600; }
.cats-item img, .cats-empty { width: 6.4em; height: 6.4em; border-radius: 50%; object-fit: cover; background: #F3F4F6; }

.app-tabs { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 1.4em; padding: 0.7em 0 1em; border-top: 0.08em solid var(--border-2); }
.app-tabs span { display: grid; justify-items: center; gap: 0.25em; color: var(--text-3); }
.app-tabs span.is-on { color: var(--red); }
.app-tabs svg { width: 1.8em; height: 1.8em; }
.app-tabs b { font-size: 0.85em; font-weight: 600; }

.app-foryou { display: flex; flex-direction: column; overflow: hidden; background: #FFFFFF; color: var(--heading); line-height: 1.3; text-align: left; }
.fy-chrome { flex: none; background: #FFFFFF; }
.fy-status { display: flex; justify-content: space-between; align-items: center; padding: 0.55em 1.2em 0.15em; font-size: 1em; font-weight: 600; }
.fy-status .status-icons { display: flex; gap: 0.35em; }
.fy-status svg { width: 1.2em; height: 1.2em; }
.fy-status .fill { fill: currentColor; stroke: none; }
.fy-top { display: flex; align-items: center; gap: 0.55em; padding: 0.4em 0.85em 0.3em; }
.fy-search { flex: 1; display: flex; align-items: center; gap: 0.4em; min-width: 0; padding: 0.5em 0.8em; border: 0.1em solid var(--border); border-radius: 999px; font-size: 0.95em; color: var(--text-3); }
.fy-search svg { width: 1.2em; height: 1.2em; flex: none; }
.fy-top > svg { width: 1.55em; height: 1.55em; flex: none; }
.fy-tabs { display: flex; justify-content: center; gap: 1.3em; padding: 0.25em 0.6em 0.1em; font-size: 0.95em; font-weight: 600; color: #111; white-space: nowrap; }
.fy-tabs .is-on { color: var(--red); box-shadow: inset 0 -0.16em 0 var(--red); padding-bottom: 0.35em; }
.fy-stage { position: relative; flex: 1; min-height: 0; background: #111; }
.fy-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fy-seller {
  position: absolute; z-index: 2; left: 0; right: 0; top: 0;
  display: flex; align-items: center; gap: 0.55em;
  padding: 0.7em 0.85em; background: transparent; color: #111;
}
.fy-seller img { width: 2.4em; height: 2.4em; border-radius: 50%; object-fit: cover; background: transparent; }
.fy-seller strong { display: block; font-size: 0.95em; }
.fy-seller small { display: flex; align-items: center; gap: 0.2em; font-size: 0.82em; color: #374151; }
.fy-seller small svg { width: 0.9em; height: 0.9em; }
.fy-follow { margin-left: auto; padding: 0.3em 0.85em; border: 0.1em solid #111; border-radius: 999px; background: transparent; font-size: 0.9em; font-weight: 600; }
.fy-rail { position: absolute; z-index: 2; right: 0.85em; bottom: 0.9em; display: grid; justify-items: center; gap: 2.25em; color: #FFFFFF; }
.fy-rail svg { width: 2.15em; height: 2.15em; stroke-width: 2; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)); }
.fy-product {
  position: absolute; z-index: 3; left: 0.8em; right: 3.8em; bottom: 5.1em;
  display: flex; align-items: center; gap: 0.75em;
  padding: 0.9em 0.7em 0.9em 1em; border-radius: 1.2em;
  background: rgba(17, 17, 17, 0.96); color: #FFFFFF;
  box-shadow:
    0 0.2em 0.4em rgba(0, 0, 0, 0.25),
    0 1.1em 2.4em rgba(0, 0, 0, 0.5);
}
.fy-product strong { display: block; font-size: 0.95em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
.fy-product small { display: block; font-size: 0.88em; font-weight: 600; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
.fy-buy { flex: none; margin-left: auto; padding: 0.55em 1.05em; border-radius: 999px; background: var(--red); color: #FFFFFF; font-size: 0.9em; font-weight: 700; }
.fy-caption { position: absolute; left: 1em; right: 4.1em; bottom: 1em; margin: 0; font-size: 0.88em; color: #FFFFFF; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
.fy-bar { flex: none; margin-top: 0; padding: 0.4em 0 0.65em; border-top: 0.08em solid var(--border-2); background: #FFFFFF; }
.fy-bar b { font-size: 0.72em; }
.fy-bar span.is-on svg { fill: currentColor; stroke-width: 1.2; }

/* Trust */
.trust { border-top: 1px solid var(--border-2); border-bottom: 1px solid var(--border-2); }
.trust-intro .lead { max-width: 28em; }
.pay { margin-top: 32px; }
.pay-label { display: block; margin-bottom: 12px; font-size: 14px; font-weight: 600; color: var(--text-3); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px solid var(--border-2); border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--heading); background: #FFFFFF;
}
.chip svg { width: 16px; height: 16px; color: var(--text-3); }
/* Cities */
.city { position: relative; display: flex; align-items: flex-end; min-height: 78vh; min-height: 78svh; overflow: hidden; background: #111111; color: #FFFFFF; }
.city-media { position: absolute; inset: 0; overflow: hidden; }
.city-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); will-change: transform; }
.city-media::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); }
.city .city-inner { position: relative; z-index: 1; width: 100%; padding-top: 120px; padding-bottom: 56px; }
.city-copy h2 { color: #FFFFFF; font-size: clamp(44px, 10vw, 88px); line-height: 1.02; letter-spacing: -0.02em; }
.city-copy p { margin-top: 12px; font-size: 20px; color: rgba(255, 255, 255, 0.85); }
.city-copy .chips { margin-top: 24px; }

/* Reveal on scroll */
.js-reveal .reveal {
  opacity: 0; transform: translateY(40px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), border-color 0.2s, box-shadow 0.2s;
  transition-delay: calc(var(--i, 0) * 110ms);
}
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }

/* Lenis smooth scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Full-screen scenes (desktop, enabled by script.js) */
.is-scenes .hero,
.is-scenes main > .section,
.is-scenes .final {
  display: flex; flex-direction: column; justify-content: center;
  min-height: calc(100vh - var(--nav-h)); padding-top: 40px; padding-bottom: 40px;
}
.is-scenes .city { min-height: calc(100vh - var(--nav-h)); }
.is-scenes .hero > .container,
.is-scenes main > .section > .container,
.is-scenes .final > .container { width: 100%; }
.is-scenes .section-head { margin-bottom: 32px; }
.is-scenes .how-media { max-width: min(560px, calc((100vh - var(--nav-h) - 80px) * 0.8)); }
.is-scenes .aud-media { max-width: min(560px, calc((100vh - var(--nav-h) - 80px) * 0.8)); }
.is-scenes .trust { border-top: 0; border-bottom: 0; }

/* Snap scenes (touch and small screens, enabled by script.js) */
html.is-snap { scroll-snap-type: y mandatory; scroll-padding-top: var(--nav-h); }
.is-snap .hero,
.is-snap main > section { scroll-snap-align: start; }
.is-snap .footer { scroll-snap-align: end; }
.is-snap .hero,
.is-snap main > .section,
.is-snap .final {
  display: flex; flex-direction: column; justify-content: center;
  min-height: calc(100vh - var(--nav-h)); min-height: calc(100svh - var(--nav-h));
}
.is-snap .city { min-height: calc(100vh - var(--nav-h)); min-height: calc(100svh - var(--nav-h)); }
.is-snap .hero > .container,
.is-snap main > .section > .container,
.is-snap .final > .container { width: 100%; }

/* Final CTA */
.final { background: var(--black); color: #FFFFFF; padding: 56px 0 80px; overflow: hidden; }
.final-inner { display: flex; flex-direction: column; align-items: center; }
.final-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; }
.final h2 { margin-top: 28px; color: #FFFFFF; font-size: clamp(32px, 7vw, 52px); line-height: 1.1; max-width: 16em; text-wrap: balance; }
.final-copy p { margin-top: 16px; font-size: 18px; color: var(--muted); }
.final-copy .btn { margin-top: 32px; width: 100%; }

/* Floating UI collage */
.final-stage { position: relative; width: 100%; max-width: 560px; height: 58em; font-size: 6.4px; margin-bottom: 24px; }
.fl { position: absolute; translate: 0 var(--py, 0); opacity: 0; scale: 0.85; transition: opacity 0.8s var(--ease), scale 0.8s var(--ease); }
.final.is-in .fl { opacity: 1; scale: 1; }
.fl:nth-child(2) { transition-delay: 0.08s; } .fl:nth-child(3) { transition-delay: 0.16s; }
.fl:nth-child(4) { transition-delay: 0.24s; } .fl:nth-child(5) { transition-delay: 0.32s; }
.fl:nth-child(6) { transition-delay: 0.4s; }  .fl:nth-child(7) { transition-delay: 0.48s; }
.fl:nth-child(8) { transition-delay: 0.56s; }
.fl-in { rotate: var(--r); animation: float var(--d) ease-in-out infinite alternate; }
@keyframes float { from { transform: translateY(-0.8em); } to { transform: translateY(0.8em) rotate(1.5deg); } }
.fl.is-dim { filter: grayscale(0.7) brightness(0.5); }

.fl-momo { left: 2%; top: 1%; z-index: 3; }
.fl-trend { left: 33%; top: 0; }
.fl-chat { left: 60%; top: 6%; z-index: 2; }
.fl-feed { left: 3%; top: 12%; z-index: 2; }
.fl-search { left: 24%; top: 59%; z-index: 4; }
.fl-interests { left: 1%; top: 75%; }
.fl-wallet { left: 64%; top: 48%; z-index: 3; }
.fl-delivered { left: 12%; top: 88%; z-index: 4; }

.ui-chip { display: inline-flex; align-items: center; gap: 0.8em; padding: 0.8em 1.4em 0.8em 0.8em; border-radius: 999px; background: #1F1F1F; color: #FFFFFF; font-size: 1.4em; font-weight: 600; white-space: nowrap; }
.ui-check {
  --badge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M99 50L98 52.5L95.3 54.8L91.9 56.6L89.1 58.3L87.7 60.1L88 62.3L89.6 65.2L91.6 68.5L92.8 71.8L92.4 74.5L90.3 76.2L86.8 76.8L83 76.7L79.7 76.7L77.6 77.6L76.7 79.7L76.7 83L76.8 86.8L76.2 90.3L74.5 92.4L71.8 92.8L68.5 91.6L65.2 89.6L62.3 88L60.1 87.7L58.3 89.1L56.6 91.9L54.8 95.3L52.5 98L50 99L47.5 98L45.2 95.3L43.4 91.9L41.7 89.1L39.9 87.7L37.7 88L34.8 89.6L31.5 91.6L28.2 92.8L25.5 92.4L23.8 90.3L23.2 86.8L23.3 83L23.3 79.7L22.4 77.6L20.3 76.7L17 76.7L13.2 76.8L9.7 76.2L7.6 74.5L7.2 71.8L8.4 68.5L10.4 65.2L12 62.3L12.3 60.1L10.9 58.3L8.1 56.6L4.7 54.8L2 52.5L1 50L2 47.5L4.7 45.2L8.1 43.4L10.9 41.7L12.3 39.9L12 37.7L10.4 34.8L8.4 31.5L7.2 28.2L7.6 25.5L9.7 23.8L13.2 23.2L17 23.3L20.3 23.3L22.4 22.4L23.3 20.3L23.3 17L23.2 13.2L23.8 9.7L25.5 7.6L28.2 7.2L31.5 8.4L34.8 10.4L37.7 12L39.9 12.3L41.7 10.9L43.4 8.1L45.2 4.7L47.5 2L50 1L52.5 2L54.8 4.7L56.6 8.1L58.3 10.9L60.1 12.3L62.3 12L65.2 10.4L68.5 8.4L71.8 7.2L74.5 7.6L76.2 9.7L76.8 13.2L76.7 17L76.7 20.3L77.6 22.4L79.7 23.3L83 23.3L86.8 23.2L90.3 23.8L92.4 25.5L92.8 28.2L91.6 31.5L89.6 34.8L88 37.7L87.7 39.9L89.1 41.7L91.9 43.4L95.3 45.2L98 47.5Z'/%3E%3C/svg%3E");
  display: grid; place-items: center; width: 2.1em; height: 2.1em; background: var(--success); flex: none;
  -webkit-mask: var(--badge) center / 100% 100% no-repeat;
  mask: var(--badge) center / 100% 100% no-repeat;
}
.ui-check svg { width: 55%; height: 55%; stroke: #FFFFFF; stroke-width: 3.2; }
.ui-check-lg { width: 3.4em; height: 3.4em; }

.ui-search { display: flex; align-items: center; gap: 0.9em; width: 30em; padding: 1.1em 1.5em; border-radius: 999px; background: #FFFFFF; color: var(--heading); box-shadow: 0 1.5em 4em rgba(0, 0, 0, 0.6); }
.ui-search svg { width: 2.2em; height: 2.2em; flex: none; color: var(--text-3); }
.ui-search .ui-x { width: 1.8em; height: 1.8em; margin-left: auto; color: var(--muted); }
.ui-typed { font-size: 1.8em; font-weight: 500; white-space: nowrap; }
.ui-caret { width: 0.15em; height: 2.2em; background: var(--red); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

.final .app, .final .app-feed { box-shadow: 0 2em 5em rgba(0, 0, 0, 0.6); }
.fl-chat .app-chat { width: 22em; }
.fl-trend .app-trend { width: 21em; }
.fl-interests .app-interests { width: 23em; }
.fl-feed .app-feed { width: 19em; }

.ui-wallet { width: 26em; font-size: 0.62em; border-radius: 2.2em; overflow: hidden; box-shadow: 0 2em 5em rgba(0, 0, 0, 0.6); }
.ui-wallet .wallet-sheet { border-radius: 2.2em; }

.ui-note { display: flex; align-items: center; gap: 1em; padding: 1em 1.6em 1em 1em; border-radius: 1.6em; background: #FFFFFF; color: var(--heading); box-shadow: 0 1.5em 4em rgba(0, 0, 0, 0.6); white-space: nowrap; }
.ui-note strong { display: block; font-size: 1.4em; }
.ui-note small { display: block; font-size: 1.15em; color: var(--text-3); }

/* App UI cards (rebuilt from the SAFICK app screens) */
.app { background: #FFFFFF; color: var(--heading); border: 1px solid rgba(15, 23, 42, 0.22); border-radius: 1.6em; line-height: 1.3; text-align: left; }
.app-label { display: block; font-size: 1.35em; font-weight: 800; line-height: 1.2; }
.app-pill { flex: none; margin-left: auto; padding: 0.55em 1.3em; border-radius: 999px; background: var(--red); color: #FFFFFF; font-size: 1.1em; font-weight: 700; white-space: nowrap; }
.chips-wrap { display: flex; flex-wrap: wrap; gap: 0.6em; margin-top: 1em; }
.app-chip { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.55em 0.9em; border: 1px solid var(--border); border-radius: 0.8em; font-size: 1.1em; font-weight: 600; color: var(--text); white-space: nowrap; }
.app-chip svg { width: 1.1em; height: 1.1em; color: var(--red); }
.app-chip.is-on { background: var(--red); border-color: var(--red); color: #FFFFFF; border-radius: 999px; }
.app-chip.is-off { background: #F3F4F6; border-color: transparent; border-radius: 999px; }
.app-trend, .app-interests { padding: 1.3em; }

.app-feed { position: relative; width: 20em; aspect-ratio: 9 / 14; border-radius: 1.8em; overflow: hidden; background: #1C1C1C; color: #FFFFFF; line-height: 1.3; text-align: left; }
.feed-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feed-head { position: absolute; left: 0.8em; right: 0.8em; top: 0.8em; display: flex; align-items: center; gap: 0.7em; padding: 0.5em; border-radius: 1.4em; background: rgba(0, 0, 0, 0.7); }
.feed-head img { width: 2.8em; height: 2.8em; border-radius: 50%; border: 0.15em solid #FFFFFF; object-fit: cover; }
.feed-head strong { display: block; font-size: 1.2em; }
.feed-head small { display: flex; align-items: center; gap: 0.2em; font-size: 1em; }
.feed-head small svg { width: 1em; height: 1em; }
.feed-head strong, .feed-head small { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
.feed-follow { margin-left: auto; padding: 0.45em 1em; border-radius: 0.8em; background: rgba(255, 255, 255, 0.5); font-size: 1.05em; font-weight: 600; }
.feed-rail { position: absolute; right: 1.1em; bottom: 7em; display: grid; gap: 1.3em; }
.feed-rail svg { width: 2em; height: 2em; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5)); }
.feed-product { position: absolute; left: 0.9em; right: 0.9em; bottom: 0.9em; display: flex; align-items: center; gap: 0.8em; padding: 0.9em 1em; border-radius: 1.2em; background: rgba(17, 17, 17, 0.96); }
.feed-product strong { display: block; font-size: 1.15em; }
.feed-product small { display: block; font-size: 1.1em; font-weight: 700; color: var(--red); }

.app-chat { width: 24em; overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: 0.8em; padding: 1em 1.2em; border-bottom: 1px solid var(--border-2); }
.chat-av { position: relative; display: grid; place-items: center; width: 2.8em; height: 2.8em; border-radius: 50%; background: var(--red); color: #FFFFFF; font-size: 1em; font-weight: 700; }
.chat-av::after { content: ""; position: absolute; right: 0; bottom: 0; width: 0.8em; height: 0.8em; border-radius: 50%; background: var(--success); border: 0.15em solid #FFFFFF; }
.chat-head strong { display: block; font-size: 1.2em; }
.chat-head small { display: block; font-size: 1em; font-weight: 600; color: var(--success); }
.chat-pin, .pay-item { display: flex; align-items: center; gap: 0.8em; }
.chat-pin { padding: 0.8em 1.2em; background: #F3F4F6; }
.chat-pin img, .pay-item img { width: 3em; height: 3em; border-radius: 0.6em; object-fit: cover; }
.chat-pin strong, .pay-item strong { display: block; font-size: 1.1em; }
.chat-pin small, .pay-item small { display: block; font-size: 1.05em; font-weight: 700; color: var(--red); }
.chat-body { display: flex; flex-direction: column; gap: 0.6em; padding: 1.1em 1.2em 1.3em; }
.bubble { max-width: 82%; padding: 0.65em 1em; border-radius: 1.1em; font-size: 1.1em; }
.bubble-in { align-self: flex-start; background: #F3F4F6; border-bottom-left-radius: 0.3em; }
.bubble-out { align-self: flex-end; background: var(--red); color: #FFFFFF; border-bottom-right-radius: 0.3em; }
.bubble-offer { align-self: flex-end; background: #FFF1EE; border: 1px solid #FFD2C7; }
.bubble-offer small { display: flex; align-items: center; gap: 0.35em; font-size: 0.8em; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--red); }
.bubble-offer small svg { width: 1.2em; height: 1.2em; }
.bubble-offer strong { display: block; font-size: 1.5em; }

.app-pay { width: 24em; padding: 1.3em; }
.pay-title { display: block; font-size: 1.4em; font-weight: 800; }
.pay-item { margin-top: 1em; }
.pay-label { display: block; margin: 1.1em 0 0.5em; font-size: 0.95em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.pay-row { display: flex; align-items: center; gap: 0.7em; margin-top: 0.5em; padding: 0.75em 0.9em; border: 1px solid var(--border); border-radius: 1em; font-size: 1.1em; font-weight: 600; }
.pay-row.is-selected { border-color: var(--red); background: #FFF1EE; }
.pay-radio { width: 1.2em; height: 1.2em; border-radius: 50%; border: 0.15em solid var(--muted); }
.is-selected .pay-radio { border-color: var(--red); box-shadow: inset 0 0 0 0.2em #FFF1EE; background: var(--red); }
.pay-held { display: flex; align-items: center; gap: 0.5em; margin-top: 1em; font-size: 1em; font-weight: 600; color: var(--success); }
.pay-held svg { width: 1.3em; height: 1.3em; flex: none; }
.pay-btn { display: block; margin-top: 1em; padding: 0.9em; border-radius: 1em; background: var(--red); color: #FFFFFF; text-align: center; font-size: 1.2em; font-weight: 700; }

.app-otp { width: 23em; padding: 1.4em; }
.otp-boxes { display: flex; gap: 0.5em; margin-top: 1em; }
.otp-boxes span { display: grid; place-items: center; width: 2.4em; height: 2.9em; border: 0.12em solid var(--red); border-radius: 0.6em; font-size: 1.3em; font-weight: 700; }
.otp-ok { display: flex; align-items: center; gap: 0.6em; margin-top: 1.1em; font-size: 1.1em; font-weight: 700; color: var(--success); }
.otp-ok .ui-check { width: 1.7em; height: 1.7em; }
.app-lock { display: inline-flex; align-items: center; gap: 0.8em; padding: 0.9em 1.4em 0.9em 1em; border-radius: 999px; font-size: 1.3em; font-weight: 800; white-space: nowrap; }
.app-lock .logo-mark { width: auto; height: 2.4em; padding: 0; }
.app-lock small { display: block; font-size: 0.75em; font-weight: 600; color: var(--text-3); }

/* Footer */
.footer { background: #FFFFFF; color: var(--heading); padding: 64px 0 28px; }
.footer-top { display: flex; flex-direction: column; gap: 40px; }
.footer-brand .logo-mark { height: 32px; }
.footer-brand .logo-word { font-size: 26px; }
.footer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.footer-col-title { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--heading); }
.footer-col a { font-size: 14px; font-weight: 500; color: var(--text-2); transition: color 0.2s; }
.footer-col a:hover { color: var(--heading); }
.footer-bar { display: flex; flex-direction: column; gap: 22px; margin-top: 72px; }
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; font-size: 13px; color: var(--muted); }
.footer-legal a, .footer-lang { color: var(--muted); transition: color 0.2s; }
.footer-legal a:hover, .footer-lang:hover { color: var(--heading); }
.footer-lang { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.footer-lang svg { width: 16px; height: 16px; }
.footer-social { display: flex; align-items: center; gap: 22px; }
.footer-social a { color: var(--text-2); transition: color 0.2s; }
.footer-social a:hover { color: var(--heading); }
.footer-social svg { width: 18px; height: 18px; }

/* ================= Breakpoints ================= */
@media (min-width: 640px) {
  .container { padding: 0 32px; }
  .hero-actions { flex-direction: row; justify-content: center; gap: 24px; }
  .hero-actions .btn, .final-copy .btn { width: auto; }
  .final-stage { font-size: 9px; }
  .phone { width: 300px; }
  .phone-screen { font-size: 11px; }
}

@media (min-width: 960px) {
  :root { --nav-h: 72px; }
  .grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }

  .hero { padding: 64px 0 104px; }
  .hero-grid { align-items: center; }
  .hero-copy { grid-column: 1 / span 7; text-align: left; }
  .hero .lead { margin-left: 0; max-width: 27em; }
  .hero-actions { justify-content: flex-start; }
  .hero-visual { grid-column: 8 / span 5; margin-top: 0; }
  .phone { width: 330px; }
  .phone-screen { font-size: 12px; }
  .hero h1 { font-size: clamp(48px, 5vw, 62px); }

  .section { padding: 112px 0; }
  .section-tight-top { padding-top: 0; }
  .section-head { margin-bottom: 48px; max-width: 820px; }
  .how-grid { gap: 24px; }
  .how-media { grid-column: 1 / span 6; grid-row: 1; max-width: 560px; }
  .how-copy { grid-column: 8 / span 5; grid-row: 1; order: 0; }
  .aud-grid { gap: 24px; }
  .aud-media { grid-column: 1 / span 6; grid-row: 1; max-width: 560px; }
  .aud-copy { grid-column: 8 / span 5; grid-row: 1; order: 0; }

  .trust-intro { grid-column: 1 / span 6; align-self: center; }
  .trust-phone { grid-column: 8 / span 5; align-self: center; }
  .trust-float { font-size: 9.5px; }
  .trust-otp { left: -12%; }
  .trust-lock { right: -8%; }

  .city { min-height: 88vh; min-height: 88svh; }
  .city .city-inner { padding-bottom: 88px; }

  .final { padding: 88px 0; }
  .final-inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; }
  .final-stage { grid-column: 1 / span 7; max-width: none; margin: 0; font-size: 11px; }
  .final-copy { grid-column: 8 / span 5; align-items: flex-start; text-align: left; }
  .final h2 { font-size: clamp(40px, 4.2vw, 56px); }

  .footer-top { flex-direction: row; justify-content: space-between; align-items: flex-start; }
  .footer-cols { grid-template-columns: auto auto; gap: 72px; }
  .footer-bar { flex-direction: row; justify-content: space-between; align-items: center; }
}

@media (min-width: 1080px) {
  .nav-links { display: flex; gap: 28px; }
  .nav-cta { display: inline-flex; }
  .menu-btn, .mobile-menu { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fl-in, .ui-caret { animation: none !important; }
  .fl { opacity: 1; scale: 1; }  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}