/* ============================================================================
   iDrive — marketing landing (/)
   The same design system as the account portal (/account) and the static
   pages: the shared tokens live in /assets/tokens.css (loaded first), the
   phone mockup in /assets/device.css, the header in /assets/site-header.css.
   Only landing-only tokens are defined here.

   Mobile-first, RTL-first (he/ar) with en/ru. Light + dark: the OS setting
   applies unless the visitor chose a theme (data-theme on <html>, persisted in
   localStorage 'idrive-theme' by site.js — the same key /account uses).
   ============================================================================ */

/* ------------------------------------------------------ Landing tokens -- */
:root {
    --maxw: var(--site-maxw);      /* .container = the header's inner width (tokens.css) */
    --gutter: var(--site-gutter);
    --band: #0B1626;           /* the deep band behind the trust section (both modes) */
    --band-ink: #E9EEF4;
    --band-soft: #9FB0C2;
}

/* ------------------------------------------------------------------ Base -- */
* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--site-header-h) + 16px); }

body {
    font-family: 'Assistant', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Rubik', sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
@supports (overflow-x: clip) { body { overflow-x: clip; } }
html[lang="ar"] body { font-family: 'Cairo', 'Assistant', system-ui, sans-serif; }
/* Assistant has no Cyrillic: Russian uses the system UI face throughout (no mixed digits). */
html[lang="ru"] body { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

a { color: var(--brand-700); text-decoration: none; }
img { max-width: 100%; display: block; }
svg { flex: none; }

h1, h2, h3 { letter-spacing: -0.025em; line-height: 1.1; color: var(--ink); font-weight: 800; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { letter-spacing: 0; line-height: 1.3; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

.eyebrow {
    display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
    font-size: 0.82rem; font-weight: 700; letter-spacing: 0.01em;
    color: var(--brand-700); background: var(--brand-050); border: 1px solid var(--brand-100);
    padding: 6px 14px; border-radius: var(--r-pill);
}
.eyebrow svg { width: 15px; height: 15px; }

.section { padding: 76px 0; position: relative; }
.section.flush { padding-top: 0; }
.section-head { max-width: 640px; margin: 0 auto 40px; text-align: center; }
.section-head h2 { font-size: clamp(1.85rem, 6.2vw, 3rem); margin: 16px 0 12px; }
.section-head p { font-size: 1.1rem; color: var(--ink-soft); }

/* -------------------------------------------------------------- Buttons ---- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font-family: inherit; font-size: 1rem; font-weight: 700; cursor: pointer;
    border: 1.5px solid transparent; border-radius: var(--r-pill); padding: 13px 24px;
    transition: transform 0.14s var(--ease), box-shadow 0.22s var(--ease), background 0.2s, border-color 0.2s, color 0.2s;
    text-decoration: none; line-height: 1.1; white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(0.995); }
.btn:focus-visible { outline: 3px solid var(--brand-glow); outline-offset: 2px; }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--brand-grad); color: #fff; box-shadow: var(--shadow-brand); }
.btn-primary:hover { box-shadow: 0 14px 30px -6px var(--brand-glow); transform: translateY(-1px); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); box-shadow: var(--shadow-xs); }
.btn-ghost:hover { border-color: var(--brand-400); color: var(--brand-700); }
.btn-lg { font-size: 1.06rem; padding: 16px 28px; }
.btn-sm { font-size: 0.9rem; padding: 10px 16px; }
.btn-block { width: 100%; }

/* ------------------------------------------- Header (static fallback) ------
   #site-header is the mount point for the shared header (/assets/site-header.js).
   What is styled here is only the static fallback shown until (or unless) the
   shared header mounts. */
/* The bar itself (full width, sticky) is .site-header in site-header.css; the fallback's inner row
   matches the shared .sh-shell. */
.nav-shell {
    max-width: var(--maxw); margin: 0 auto; height: var(--site-header-h);
    padding: 0 var(--gutter);
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 26px; width: auto; }
.nav-links { display: none; gap: 2px; list-style: none; }
.nav-links a { display: block; padding: 8px 13px; border-radius: var(--r-pill); font-weight: 600; font-size: 0.95rem; color: var(--ink-soft); transition: color 0.2s, background 0.2s; }
.nav-links a:hover { color: var(--ink); background: var(--chip-bg); }
.nav-right { display: flex; align-items: center; gap: 6px; }
.nav-login { display: none; }

.theme-toggle {
    display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none;
    background: var(--chip-bg); border: none; cursor: pointer; color: var(--ink);
    border-radius: var(--r-pill); transition: background 0.2s var(--ease), color 0.2s;
}
.theme-toggle:hover { background: var(--chip-bg-hover); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle:focus-visible, .lang-toggle:focus-visible { outline: 3px solid var(--brand-glow); outline-offset: 2px; }

.lang { position: relative; }
.lang-toggle {
    display: inline-flex; align-items: center; gap: 7px; height: 38px;
    background: var(--chip-bg); border: none; cursor: pointer;
    font-family: inherit; font-size: 0.9rem; font-weight: 600; color: var(--ink);
    padding: 0 12px; border-radius: var(--r-pill); transition: background 0.2s var(--ease);
}
.lang-toggle:hover { background: var(--chip-bg-hover); }
.lang-toggle svg { width: 16px; height: 16px; opacity: 0.8; }
.lang-toggle .lang-name { display: none; }
.lang-menu {
    position: absolute; inset-inline-end: 0; top: calc(100% + 10px);
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-md); box-shadow: var(--shadow-lg);
    padding: 6px; min-width: 176px; display: none; overflow: hidden;
    animation: menu-in 0.16s var(--ease-out);
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.lang-menu.open { display: block; }
.lang-menu button {
    display: flex; align-items: center; gap: 10px; width: 100%;
    background: none; border: none; cursor: pointer; font-family: inherit;
    font-size: 0.95rem; font-weight: 500; color: var(--ink); text-align: start;
    padding: 10px 12px; border-radius: 11px; transition: background 0.14s;
}
.lang-menu button:hover { background: var(--surface-2); }
.lang-menu button.active { background: var(--brand-050); color: var(--brand-700); font-weight: 700; }
.lang-menu .flag { font-size: 1.1rem; }

/* ------------------------------------------------------------ Device -------
   The phone itself is the shared component in /assets/device.css (sized by
   --device-w). Here: the tilted, scroll-reactive stage (Opal-style). site.js
   sets --sy/--sr on .device-scroll from the SCROLL position only — never the
   pointer — and does nothing under reduced motion. --dir flips the lean for
   RTL; .flip leans the other way. No box behind the phone: it floats on the
   page with a soft glow. */
.stage { position: relative; display: flex; justify-content: center; align-items: center; perspective: 1300px; --dir: -1; }
html[dir="rtl"] .stage { --dir: 1; }
.stage.flip { --dir: 1; }
html[dir="rtl"] .stage.flip { --dir: -1; }
.stage .halo {
    position: absolute; width: 78%; max-width: 460px; aspect-ratio: 1; border-radius: var(--r-pill);
    background: radial-gradient(circle, var(--halo), transparent 66%); filter: blur(14px);
}

/* Floating feature cards — each one quotes something genuinely visible on the
   screenshot it sits beside (see site.js FLOAT notes). */
.float-card {
    position: absolute; z-index: 5; display: flex; align-items: center; gap: 11px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-md); box-shadow: var(--shadow-md);
    padding: 10px 14px 10px 10px; max-width: 220px;
}
html[dir="rtl"] .float-card { padding: 10px 10px 10px 14px; }
.float-card .ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; color: #fff; background: var(--brand-grad); }
.float-card .ic svg { width: 20px; height: 20px; }
.float-card .ic.ok { background: linear-gradient(135deg, #3BC489, #12855A); }
.float-card .ic.warm { background: linear-gradient(135deg, #FF9A6E, #F0572B); }
.float-card .ic.slate { background: linear-gradient(135deg, #6C7A8C, #3F4B5B); }
.float-card .ttl { font-size: 0.74rem; font-weight: 600; color: var(--ink-faint); line-height: 1.25; }
.float-card .val { font-size: 1.02rem; font-weight: 800; color: var(--ink); line-height: 1.25; letter-spacing: -0.01em; }
.float-card .val.ok { color: var(--ok); }

/* ------------------------------------------------------------------ Hero --- */
.hero { position: relative; padding: 40px 0 28px; }
.hero::before {
    content: ""; position: absolute; inset: -120px 0 auto; height: 760px; z-index: -1; pointer-events: none;
    background:
        radial-gradient(640px 420px at 85% 10%, rgba(10, 124, 216, 0.16), transparent 65%),
        radial-gradient(520px 380px at 10% 40%, rgba(57, 160, 235, 0.12), transparent 60%);
}
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: center; }
.hero-copy { text-align: center; }
.hero-copy h1 { font-size: clamp(2.15rem, 9.4vw, 4.3rem); margin: 18px 0 16px; text-wrap: balance; }
html[lang="ru"] .hero-copy h1 { font-size: clamp(1.85rem, 8vw, 3.7rem); }
.hero-copy h1 .hl { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-lede { font-size: 1.14rem; color: var(--ink-soft); max-width: 34em; margin: 0 auto; text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.hero-note { margin-top: 12px; font-size: 0.88rem; color: var(--ink-faint); font-weight: 600; }
.hero-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin-top: 22px; }
.hero-chips > span { text-align: start; display: inline-flex; align-items: center; gap: 7px; font-size: 0.88rem; font-weight: 600; color: var(--ink-soft); }
.hero-chips svg { width: 16px; height: 16px; color: var(--ok); }

.hero-stage { min-height: 470px; }
.hero-stage .device { --device-w: 214px; }
.hero-stage .fa { top: 15%; inset-inline-start: max(0px, calc(50% - 190px)); }
.hero-stage .fb { bottom: 14%; inset-inline-end: max(0px, calc(50% - 186px)); }

/* ----------------------------------------------------------- Proof strip --- */
.proof { padding: 18px 0 8px; }
.proof-row {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
.proof-row > span {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-xs);
    border-radius: var(--r-pill); padding: 8px 15px; font-size: 0.9rem; font-weight: 700; color: var(--ink-soft);
}
.proof-row > span > svg { width: 16px; height: 16px; color: var(--brand); }

/* -------------------------------------------------------------- Features --- */
.features-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.f-card {
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
    border-radius: var(--r-lg); padding: 24px 22px;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.f-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.f-ic {
    width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
    background: var(--brand-050); color: var(--brand-700); margin-bottom: 18px;
    border: 1px solid var(--brand-100);
}
.f-ic svg { width: 26px; height: 26px; }
.f-card h3 { font-size: 1.2rem; margin-bottom: 7px; letter-spacing: -0.015em; }
.f-card p { color: var(--ink-soft); }

/* ------------------------------------------------------------- Showcase ---- */
.showcase { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
.showcase + .showcase { margin-top: 72px; }
.sc-text h3 { font-size: clamp(1.7rem, 5.6vw, 2.5rem); margin: 16px 0 12px; text-wrap: balance; }
.sc-text p { font-size: 1.08rem; color: var(--ink-soft); margin-bottom: 20px; }
.sc-list { list-style: none; display: grid; gap: 11px; }
.sc-list li { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.sc-list .tick { width: 26px; height: 26px; border-radius: var(--r-pill); background: var(--brand-050); color: var(--brand-700); display: grid; place-items: center; flex: none; }
.sc-list .tick svg { width: 14px; height: 14px; }
/* No panel behind the phone: it floats on the page background over a soft glow. */
.sc-media { position: relative; display: flex; justify-content: center; align-items: center; padding: 8px 0 24px; }
.sc-media .stage { width: 100%; min-height: 470px; }
.sc-media .device { --device-w: 200px; }
/* Cards sit low on the visible part of the phone, overlapping its edges, so the
   screen's headline content stays readable. */
.sc-media .fa { top: 40%; inset-inline-end: max(0px, calc(50% - 196px)); }
.sc-media .fb { top: 68%; inset-inline-start: max(0px, calc(50% - 196px)); }

/* ----------------------------------------------------------- How it works -- */
.steps { display: grid; grid-template-columns: 1fr; gap: 14px; counter-reset: step; }
.step-card {
    position: relative; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
    border-radius: var(--r-lg); padding: 24px 22px 24px;
}
.step-num {
    width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
    background: var(--brand-grad); color: #fff; font-weight: 800; font-size: 1.15rem; box-shadow: var(--shadow-brand);
    margin-bottom: 16px;
}
.step-card h3 { font-size: 1.2rem; margin-bottom: 6px; }
.step-card p { color: var(--ink-soft); }

/* --------------------------------------------------------------- Pricing --- */
.pricing-cards { display: grid; grid-template-columns: 1fr; gap: 18px; max-width: 820px; margin: 0 auto; }
.p-card {
    position: relative; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
    border-radius: var(--r-xl); padding: 30px 24px; display: flex; flex-direction: column;
}
.p-card.featured { border: 2px solid var(--brand); box-shadow: 0 0 0 5px var(--brand-050), var(--shadow-lg); }
.p-badge {
    position: absolute; top: -13px; inset-inline-end: 22px;
    background: var(--accent); color: #fff; font-size: 0.8rem; font-weight: 800;
    padding: 6px 13px; border-radius: var(--r-pill); box-shadow: 0 6px 14px -4px rgba(255, 122, 80, 0.6); white-space: nowrap;
}
.p-name { font-size: 1.05rem; color: var(--ink-soft); font-weight: 700; }
.p-price { display: flex; align-items: baseline; gap: 6px; margin: 10px 0 0; direction: ltr; justify-content: flex-end; }
html[dir="ltr"] .p-price { justify-content: flex-start; }
.p-price .num { font-size: 3.2rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--ink); }
.p-price .cur { font-size: 1.6rem; font-weight: 700; color: var(--ink-soft); }
.p-period { color: var(--ink-soft); font-weight: 600; margin-top: 6px; }
.p-sub { color: var(--ok); font-weight: 700; font-size: 0.92rem; margin-top: 2px; min-height: 1.5em; }
.p-list { list-style: none; display: grid; gap: 10px; margin: 22px 0 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.p-list li { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font-weight: 600; font-size: 0.97rem; }
.p-list svg { width: 18px; height: 18px; color: var(--brand); }
.p-card .btn { margin-top: auto; }
.pricing-note { text-align: center; color: var(--ink-faint); font-weight: 600; font-size: 0.92rem; margin-top: 22px; }

/* ----------------------------------------------------------------- Trust --- */
.trust-band {
    background: var(--band); color: var(--band-ink); border-radius: var(--r-xl);
    border: 1px solid var(--band-border, transparent);
    padding: 52px 20px; position: relative; overflow: hidden;
}
.trust-band::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(520px 320px at 100% 0%, rgba(46, 167, 242, 0.32), transparent 65%),
        radial-gradient(420px 300px at 0% 100%, rgba(10, 91, 190, 0.35), transparent 65%);
}
.trust-band > * { position: relative; }
.trust-band .section-head h2 { color: #fff; }
.trust-band .section-head p { color: var(--band-soft); }
.trust-band .eyebrow { background: rgba(142, 206, 255, 0.12); border-color: rgba(142, 206, 255, 0.24); color: #8ECEFF; }
.trust-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.t-card {
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--r-lg); padding: 22px 20px; display: flex; gap: 16px; align-items: flex-start;
}
.t-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--brand-grad); color: #fff; box-shadow: 0 10px 24px -8px rgba(10, 124, 216, 0.7); }
.t-ic svg { width: 23px; height: 23px; }
.t-card h3 { color: #fff; font-size: 1.12rem; margin-bottom: 5px; letter-spacing: -0.01em; }
.t-card p { color: var(--band-soft); font-size: 0.97rem; }
.t-card a { color: #8ECEFF; font-weight: 700; }

/* ------------------------------------------------------------ Download ----- */
.download {
    display: grid; grid-template-columns: 1fr; gap: 22px; align-items: center;
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-md);
    border-radius: var(--r-xl); padding: 34px 22px; text-align: center; position: relative; overflow: hidden;
}
.download::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(520px 300px at 50% 0%, rgba(10, 124, 216, 0.10), transparent 65%);
}
.download > * { position: relative; }
.download h2 { font-size: clamp(1.7rem, 5.6vw, 2.5rem); margin-bottom: 10px; }
.download p { color: var(--ink-soft); font-size: 1.06rem; max-width: 36em; margin: 0 auto; }
.stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.store {
    display: inline-flex; align-items: center; gap: 10px; direction: ltr;
    background: #0B0D10; color: #fff; border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px; padding: 9px 18px 9px 14px; min-width: 168px;
    transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.store:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.store svg { width: 26px; height: 26px; }
.store .st { display: flex; flex-direction: column; text-align: left; line-height: 1.1; }
.store small { font-size: 0.68rem; font-weight: 600; opacity: 0.8; letter-spacing: 0.02em; }
.store b { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.01em; font-family: 'Assistant', system-ui, sans-serif; }

/* ------------------------------------------------------------- Contact ----- */
.contact {
    text-align: center; background: var(--brand-grad); color: #fff; border-radius: var(--r-xl);
    padding: 44px 20px; box-shadow: var(--shadow-brand); position: relative; overflow: hidden;
}
.contact::before {
    content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%;
    top: -220px; inset-inline-end: -140px; background: radial-gradient(circle, rgba(255, 255, 255, 0.24), transparent 70%);
}
.contact > * { position: relative; }
.contact h2 { color: #fff; font-size: clamp(1.75rem, 5.6vw, 2.5rem); margin-bottom: 10px; }
.contact .sub { color: rgba(255, 255, 255, 0.85); font-size: 1.08rem; margin-bottom: 26px; }
.contact-mail {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; max-width: 100%;
    background: #fff; color: var(--brand-700); font-weight: 800; font-size: clamp(1rem, 4.4vw, 1.3rem);
    padding: 14px 24px; border-radius: var(--r-pill); box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.35);
    overflow-wrap: anywhere; transition: transform 0.18s var(--ease);
}
.contact-mail:hover { transform: translateY(-2px); }
.contact-mail svg { width: 22px; height: 22px; }
.contact-meta { color: rgba(255, 255, 255, 0.78); font-size: 0.93rem; margin-top: 18px; font-weight: 600; }

/* --------------------------------------------------------------- Footer ---- */
.site-footer { padding: 8px 0 36px; }
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.footer-links a { color: var(--ink-soft); font-weight: 600; font-size: 0.95rem; }
.footer-links a:hover { color: var(--ink); }
.footer-copy { color: var(--ink-faint); font-size: 0.88rem; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); text-align: center; }

/* -------------------------------------------------------- Scroll reveal ---- */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }

/* ======================================================== ≥ 600px ========= */
@media (min-width: 600px) {
    .features-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .pricing-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
    .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .trust-band { padding: 64px 40px; }
    .p-card { padding: 36px 30px; }
    .lang-toggle .lang-name { display: inline; }
    .nav-login { display: inline-flex; }
    .contact { padding: 60px 40px; }
}

/* ======================================================== ≥ 900px ========= */
@media (min-width: 900px) {
    .section { padding: 104px 0; }
    .section.flush { padding-top: 0; }
    .nav-links { display: flex; }
    .hero { padding: 72px 0 40px; }
    .hero-grid { grid-template-columns: 1.08fr 0.92fr; gap: 40px; }
    .hero-copy { text-align: start; }
    .hero-lede { margin: 0; }
    .hero-actions, .hero-chips { justify-content: flex-start; }
    .hero-stage { min-height: 600px; }
    .hero-stage .device { --device-w: 262px; }
    .hero-stage .fa { top: 16%; inset-inline-start: -4%; }
    .hero-stage .fb { bottom: 16%; inset-inline-end: -2%; }
    .features-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .f-card { padding: 30px 28px; }
    .showcase { grid-template-columns: 1fr 1fr; gap: 64px; }
    .showcase + .showcase { margin-top: 110px; }
    .showcase.reverse .sc-media { order: -1; }
    .sc-media .stage { min-height: 580px; }
    .sc-media .device { --device-w: 250px; }
    .sc-media .fa { inset-inline-end: calc(50% - 250px); }
    .sc-media .fb { inset-inline-start: calc(50% - 250px); }
    .steps { grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .step-card { padding: 30px 28px; }
    .trust-band { padding: 80px 64px; }
    .trust-grid { gap: 18px; }
    .t-card { padding: 26px 26px; }
    .download { grid-template-columns: 1fr auto; text-align: start; padding: 40px 44px; gap: 32px; }
    .download p { margin: 0; }
    .stores { flex-direction: column; }
    .footer-inner { flex-direction: row; justify-content: space-between; text-align: start; }
}

/* ======================================================= ≤ 380px ========== */
@media (max-width: 380px) {
    .nav-shell { gap: 6px; }
    .brand img { height: 22px; }
    .nav-right { gap: 4px; }
    .nav-right .btn-sm { padding: 9px 12px; font-size: 0.85rem; }
    .theme-toggle, .lang-toggle { width: 36px; height: 36px; }
    .lang-toggle { padding: 0; justify-content: center; }
    .float-card { max-width: 168px; padding: 8px 10px 8px 8px; gap: 8px; }
    html[dir="rtl"] .float-card { padding: 8px 8px 8px 10px; }
    .float-card .ic { width: 32px; height: 32px; border-radius: 10px; }
    .float-card .ic svg { width: 17px; height: 17px; }
    .float-card .val { font-size: 0.92rem; }
    .btn-lg { padding: 15px 22px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
    .js .reveal { opacity: 1; transform: none; }
}

/* ============================================================== Dark mode ===
   The shared token swap is in tokens.css; only the landing's own tokens here
   (same two guards: the OS setting unless the visitor chose light; an explicit
   data-theme="dark" always wins). */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --band: #0A1320; --band-border: rgba(142, 206, 255, 0.12); }
}
:root[data-theme="dark"] { --band: #0A1320; --band-border: rgba(142, 206, 255, 0.12); }