/* EVstore landing page — mobile-first, RTL-safe (logical properties), no :has(), no nesting, no container queries. */

/* ---------- Local variables (never redefine tokens from tokens.css) ---------- */
:root {
  --l-max: 1240px;
  --l-pad: 20px;
  --l-nav-h: 68px;
  --l-glass-border: rgba(255, 255, 255, 0.08);
  --l-glass-hi: rgba(255, 255, 255, 0.05);
  --l-card-bg: rgba(16, 23, 20, 0.62);
  --l-grid-line: rgba(52, 211, 153, 0.06);
  --l-mock-bg: #0B1210;
  --l-mock-panel: rgba(255, 255, 255, 0.04);
  --l-mock-line: rgba(255, 255, 255, 0.12);
  --l-code-bg: rgba(52, 211, 153, 0.08);
  --l-ring: rgba(52, 211, 153, 0.35);
  --l-primary-rgb: 52, 211, 153;
}
:root[data-theme="light"] {
  --l-glass-border: rgba(6, 95, 70, 0.12);
  --l-glass-hi: rgba(255, 255, 255, 0.9);
  --l-card-bg: rgba(255, 255, 255, 0.78);
  --l-grid-line: rgba(16, 185, 129, 0.08);
  --l-mock-bg: #0F1714;
  --l-mock-panel: rgba(255, 255, 255, 0.05);
  --l-mock-line: rgba(255, 255, 255, 0.12);
  --l-code-bg: rgba(16, 185, 129, 0.10);
  --l-ring: rgba(16, 185, 129, 0.30);
  --l-primary-rgb: 16, 185, 129;
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--l-nav-h) + 12px); }
body { overflow-x: hidden; line-height: 1.55; -webkit-font-smoothing: antialiased; }
main { display: block; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { text-decoration: none; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.container { width: 100%; max-width: var(--l-max); margin-inline: auto; padding-inline: var(--l-pad); }
.muted { color: var(--ev-text-muted); }
.small { font-size: 0.875rem; }
.ico { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico--sm { width: 16px; height: 16px; }
html.is-rtl .dir-flip { transform: scaleX(-1); }

/* Gradient headline text */
.grad-text {
  background-image: linear-gradient(120deg, var(--ev-text) 0%, var(--ev-text) 45%, var(--ev-grad-start) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
:root[data-theme="light"] .grad-text { background-image: linear-gradient(120deg, var(--ev-text) 0%, var(--ev-text) 50%, var(--ev-grad-end) 100%); }

/* ---------- Skip link ---------- */
.skip-link { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 200; background: var(--ev-primary); color: #041b12; padding: 10px 16px; border-radius: var(--ev-r-pill); font-weight: 600; transition: top .2s; }
.skip-link:focus { top: 12px; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: var(--ev-r-pill); font-weight: 600; line-height: 1.15; white-space: nowrap; transition: transform .35s var(--ev-ease), box-shadow .35s var(--ev-ease), background-color .25s, border-color .25s, color .25s; border: 1px solid transparent; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn--sm { padding: 9px 16px; font-size: .9rem; }
.btn--lg { padding: 15px 24px; font-size: 1.02rem; }
.btn--xl { padding: 18px 32px; font-size: 1.12rem; }
.btn--primary { background: linear-gradient(135deg, var(--ev-grad-start), var(--ev-grad-end)); color: #fff; box-shadow: 0 8px 24px rgba(var(--l-primary-rgb), .25); }
:root[data-theme="light"] .btn--primary { color: #fff; }
.btn--primary:hover { box-shadow: 0 14px 36px rgba(var(--l-primary-rgb), .38); }
.btn--glow { position: relative; }
.btn--glow::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; background: linear-gradient(135deg, var(--ev-grad-start), transparent 60%); opacity: 0; filter: blur(10px); z-index: -1; transition: opacity .4s; }
.btn--glow:hover::after { opacity: .8; }
.btn--glass { background: var(--ev-glass); border-color: var(--l-glass-border); color: var(--ev-text); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.btn--glass:hover { border-color: var(--ev-outline); background: var(--ev-surface-2); }
.btn--ghost { color: var(--ev-text-muted); }
.btn--ghost:hover { color: var(--ev-text); }
.btn__stack { display: inline-flex; flex-direction: column; align-items: flex-start; text-align: start; line-height: 1.1; }
.btn__meta { font-size: .72rem; font-weight: 500; opacity: .8; margin-top: 3px; letter-spacing: .02em; }
.btn__meta:empty { display: none; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--ev-r-pill); color: var(--ev-text); border: 1px solid transparent; transition: background-color .25s, border-color .25s, transform .3s var(--ev-ease); }
.icon-btn:hover { background: var(--l-glass-hi); border-color: var(--l-glass-border); }

/* ---------- Eyebrow / chips / pills ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px 6px 10px; border-radius: var(--ev-r-pill); border: 1px solid var(--ev-outline); background: rgba(var(--l-primary-rgb), .07); color: var(--ev-primary); font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
html.is-rtl .eyebrow { letter-spacing: 0; }
.eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ev-primary); box-shadow: 0 0 0 4px rgba(var(--l-primary-rgb), .22); animation: pulse-dot 2.2s ease-in-out infinite; }
@keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 3px rgba(var(--l-primary-rgb), .22); } 50% { box-shadow: 0 0 0 7px rgba(var(--l-primary-rgb), .08); } }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--ev-r-pill); font-size: .74rem; font-weight: 700; letter-spacing: .03em; line-height: 1; }
.chip--premium { background: linear-gradient(135deg, var(--ev-yellow), #f59e0b); color: #2b1d02; }
.chip--installed { background: rgba(var(--l-primary-rgb), .14); color: var(--ev-primary); border: 1px solid var(--ev-outline); }
.chip--inline { margin-inline-start: 4px; text-transform: none; letter-spacing: 0; }
.pill { display: inline-flex; align-items: center; padding: 10px 20px; margin-inline-end: 12px; border-radius: var(--ev-r-pill); border: 1px solid var(--l-glass-border); background: var(--l-card-bg); color: var(--ev-text-muted); font-weight: 500; font-size: .95rem; white-space: nowrap; }

/* ---------- Cards / glass ---------- */
.card { position: relative; border-radius: var(--ev-r-lg); border: 1px solid var(--l-glass-border); background: var(--l-card-bg); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); padding: 28px; overflow: hidden; transition: border-color .35s, box-shadow .35s, transform .35s var(--ev-ease); }
.card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(160deg, var(--l-glass-hi), transparent 45%); pointer-events: none; opacity: .7; }
:root[data-theme="light"] .card::before { opacity: .4; }
.card--sm { padding: 22px; border-radius: var(--ev-r-ml); }
.card--glow { box-shadow: var(--ev-glow); border-color: var(--ev-outline); }
.card__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(var(--l-primary-rgb), .12); color: var(--ev-primary); border: 1px solid var(--ev-outline); margin-bottom: 18px; }
.card__title { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: 8px; }
.card__desc { color: var(--ev-text-muted); font-size: .98rem; }
.glow-box { position: relative; border-radius: 28px; }
.glow-box::before { content: ""; position: absolute; inset: 10% 5%; background: radial-gradient(closest-side, rgba(var(--l-primary-rgb), .35), transparent); filter: blur(40px); z-index: 0; }

/* ---------- Sections ---------- */
.section { position: relative; padding-block: 72px; }
.section__head { max-width: 720px; margin: 0 auto 40px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.section__head--start { text-align: start; align-items: flex-start; margin-inline: 0; }
.section__title { font-size: clamp(1.9rem, 5.2vw, 3rem); font-weight: 700; line-height: 1.08; letter-spacing: -.025em; }
html.font-cairo .section__title, html.font-cairo .hero__title { letter-spacing: 0; line-height: 1.25; }
.section__sub { color: var(--ev-text-muted); font-size: 1.08rem; max-width: 60ch; }

/* ---------- Checks list ---------- */
.checks { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.checks li { display: flex; align-items: flex-start; gap: 12px; font-size: 1.02rem; }
.checks__ico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: rgba(var(--l-primary-rgb), .14); color: var(--ev-primary); border: 1px solid var(--ev-outline); margin-top: 1px; }
.checks--compact li { font-size: .95rem; }

/* ---------- Car banner ---------- */
.car-banner { position: relative; z-index: 60; background: linear-gradient(90deg, rgba(var(--l-primary-rgb), .18), rgba(var(--l-primary-rgb), .06)); border-bottom: 1px solid var(--ev-outline); font-size: .92rem; }
.car-banner__inner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-block: 10px; }
.car-banner .ico { color: var(--ev-primary); }

/* ---------- NAV ---------- */
.nav { position: sticky; top: 0; z-index: 50; transition: background-color .3s, border-color .3s, box-shadow .3s; border-bottom: 1px solid transparent; }
.nav.is-scrolled { background: var(--ev-glass); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); border-bottom-color: var(--l-glass-border); box-shadow: 0 10px 40px rgba(0,0,0,.18); }
.nav__inner { display: flex; align-items: center; gap: 16px; height: var(--l-nav-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.2rem; letter-spacing: -.02em; }
.brand__mark { width: 38px; height: 17px; }
.brand__name { color: var(--ev-text); }
.nav__links { display: none; align-items: center; gap: 4px; margin-inline-start: 12px; }
.nav__links a { padding: 8px 12px; border-radius: var(--ev-r-pill); color: var(--ev-text-muted); font-weight: 500; font-size: .95rem; transition: color .2s, background-color .2s; }
.nav__links a:hover { color: var(--ev-text); background: var(--l-glass-hi); }
.nav__tools { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.nav__cta { display: none; }
.nav__burger { display: inline-flex; }

/* Language switcher */
.lang { position: relative; }
.lang__btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding-inline: 10px 8px; border-radius: var(--ev-r-pill); border: 1px solid var(--l-glass-border); background: var(--l-glass-hi); color: var(--ev-text); font-weight: 500; font-size: .92rem; transition: border-color .25s, background-color .25s; }
.lang__btn:hover { border-color: var(--ev-outline); }
.lang__flag { font-size: 1.15rem; line-height: 1; }
.lang__name { display: none; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lang__chev { width: 14px; height: 14px; opacity: .7; transition: transform .25s; }
.lang.is-open .lang__chev { transform: rotate(180deg); }
.lang__list { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); width: 230px; max-height: min(70vh, 520px); overflow: auto; margin: 0; padding: 6px; border-radius: var(--ev-r-md); border: 1px solid var(--l-glass-border); background: var(--ev-surface); box-shadow: var(--ev-shadow); z-index: 70; transform-origin: top; animation: pop-in .18s var(--ev-ease); }
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.lang__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 10px; color: var(--ev-text); text-align: start; font-size: .95rem; }
.lang__item:hover, .lang__item:focus { background: rgba(var(--l-primary-rgb), .1); outline: none; }
.lang__item[aria-selected="true"] { color: var(--ev-primary); font-weight: 600; }
.lang__item .lang__flag { width: 24px; text-align: center; }
.lang__item .ico { margin-inline-start: auto; width: 16px; height: 16px; opacity: 0; }
.lang__item[aria-selected="true"] .ico { opacity: 1; }

/* Theme toggle */
.theme-btn__sun, .theme-btn__moon { position: absolute; transition: transform .4s var(--ev-ease), opacity .3s; }
.theme-btn { position: relative; }
.theme-btn__sun { opacity: 0; transform: rotate(-90deg) scale(.5); }
.theme-btn__moon { opacity: 1; transform: none; }
:root[data-theme="light"] .theme-btn__sun { opacity: 1; transform: none; }
:root[data-theme="light"] .theme-btn__moon { opacity: 0; transform: rotate(90deg) scale(.5); }

/* Mobile sheet */
.nav-sheet { position: fixed; inset: 0; z-index: 90; background: var(--ev-bg); display: flex; flex-direction: column; padding: 0 var(--l-pad) 24px; animation: sheet-in .3s var(--ev-ease); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.nav-sheet[hidden] { display: none; }
.nav-sheet__head { display: flex; align-items: center; justify-content: space-between; height: var(--l-nav-h); }
.nav-sheet__links { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; }
.nav-sheet__links a { font-size: 1.7rem; font-weight: 700; padding: 12px 6px; border-radius: 12px; letter-spacing: -.02em; }
.nav-sheet__links a:hover { color: var(--ev-primary); }
.nav-sheet__foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.nav-sheet__foot .btn { width: 100%; }
body.is-locked { overflow: hidden; }

/* ---------- HERO ---------- */
.hero { position: relative; overflow: hidden; padding-block: 56px 40px; min-height: calc(100vh - var(--l-nav-h)); display: flex; flex-direction: column; justify-content: center; }
.aurora { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.aurora__blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; will-change: transform; }
.aurora__blob--1 { width: 60vw; height: 60vw; max-width: 720px; max-height: 720px; inset-inline-start: -15%; top: -20%; background: radial-gradient(circle, rgba(var(--l-primary-rgb), .55), rgba(6, 95, 70, .1) 65%, transparent 72%); animation: drift-1 22s ease-in-out infinite alternate; }
.aurora__blob--2 { width: 50vw; height: 50vw; max-width: 620px; max-height: 620px; inset-inline-end: -12%; top: 10%; background: radial-gradient(circle, rgba(16, 185, 129, .35), rgba(81, 162, 255, .12) 55%, transparent 72%); animation: drift-2 26s ease-in-out infinite alternate; }
.aurora__blob--3 { width: 40vw; height: 40vw; max-width: 520px; max-height: 520px; inset-inline-start: 35%; bottom: -25%; background: radial-gradient(circle, rgba(6, 95, 70, .6), transparent 70%); animation: drift-3 30s ease-in-out infinite alternate; }
:root[data-theme="light"] .aurora__blob { opacity: .35; }
@keyframes drift-1 { to { transform: translate(12%, 18%) scale(1.15); } }
@keyframes drift-2 { to { transform: translate(-14%, 22%) scale(1.1); } }
@keyframes drift-3 { to { transform: translate(-18%, -12%) scale(1.2); } }
.aurora__grid { position: absolute; inset: 0; background-image: linear-gradient(var(--l-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--l-grid-line) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 70%); }
.hero__inner { position: relative; z-index: 1; display: grid; gap: 44px; align-items: center; }
.hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; text-align: start; }
.hero__title { font-size: clamp(2.4rem, 8.5vw, 4.6rem); font-weight: 700; line-height: 1.02; letter-spacing: -.035em; }
.hero__sub { font-size: clamp(1.05rem, 2.2vw, 1.25rem); color: var(--ev-text-muted); max-width: 52ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.stats { display: flex; flex-wrap: wrap; gap: 8px 36px; margin-top: 10px; padding-top: 22px; border-top: 1px solid var(--ev-divider); width: 100%; }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat__value { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; color: var(--ev-text); line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat__label { color: var(--ev-text-muted); font-size: .88rem; }

/* Head unit stage */
.hero__visual { position: relative; z-index: 1; }
.hu-stage { position: relative; width: 100%; max-width: 680px; margin-inline: auto; padding: 36px 0 30px; }
.hu { position: relative; z-index: 2; transform-style: preserve-3d; transition: transform .1s linear; }
.hu__bezel { position: relative; border-radius: 22px; padding: 10px; background: linear-gradient(160deg, #1f2a26, #0a100e 60%, #161f1b); box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06), inset 0 1px 0 rgba(255,255,255,.12); }
.hu__bezel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 60px rgba(var(--l-primary-rgb), .22); pointer-events: none; animation: screen-glow 5s ease-in-out infinite alternate; }
@keyframes screen-glow { to { box-shadow: 0 0 90px rgba(var(--l-primary-rgb), .38); } }
.hu__screen { position: relative; overflow: hidden; border-radius: 14px; background: var(--l-mock-bg); color: #fff; font-size: 12px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.hu__screen::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 80% 10%, rgba(52, 211, 153, .18), transparent 60%), radial-gradient(40% 40% at 10% 100%, rgba(6, 95, 70, .35), transparent 70%); pointer-events: none; }
.hu__glare { position: absolute; inset: -40% -60%; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.07) 48%, rgba(255,255,255,.02) 52%, transparent 60%); pointer-events: none; z-index: 5; animation: glare 9s ease-in-out infinite; }
@keyframes glare { 0%, 20% { transform: translateX(-30%); } 60%, 100% { transform: translateX(30%); } }
html.is-rtl .hu__glare { animation-direction: reverse; }
.hu__status { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; font-size: 11px; color: rgba(255,255,255,.75); border-bottom: 1px solid var(--l-mock-line); }
.hu__status-left, .hu__status-right, .hu__brand { display: inline-flex; align-items: center; gap: 8px; }
.hu__brand { font-size: 11px; letter-spacing: .02em; }
.hu__brand b { font-weight: 700; color: #fff; }
.hu__signal { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }
.hu__signal i { width: 3px; background: #fff; border-radius: 1px; opacity: .85; }
.hu__signal i:nth-child(1) { height: 4px; } .hu__signal i:nth-child(2) { height: 6px; } .hu__signal i:nth-child(3) { height: 8px; } .hu__signal i:nth-child(4) { height: 10px; opacity: .35; }
.hu__batt { position: relative; width: 20px; height: 10px; border: 1.5px solid rgba(255,255,255,.7); border-radius: 3px; display: inline-block; }
.hu__batt::after { content: ""; position: absolute; inset-inline-end: -4px; top: 2px; width: 2px; height: 4px; background: rgba(255,255,255,.7); border-radius: 1px; }
.hu__batt i { position: absolute; inset: 1.5px; inset-inline-end: 30%; background: var(--ev-primary); border-radius: 1px; }
.hu__body { position: relative; display: flex; }
.hu__side { display: flex; flex-direction: column; gap: 3px; width: 92px; padding: 10px 8px; border-inline-end: 1px solid var(--l-mock-line); flex: 0 0 auto; }
.hu__tab { display: flex; align-items: center; gap: 7px; padding: 7px 8px; border-radius: 9px; color: rgba(255,255,255,.62); font-size: 11px; font-weight: 500; cursor: default; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hu__tab .ico { width: 14px; height: 14px; }
.hu__tab.is-active { background: rgba(52, 211, 153, .16); color: #fff; box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .35); }
.hu__tab--mini { padding: 6px 8px; }
.hu__side-spacer { flex: 1 1 auto; }
.hu__main { flex: 1 1 auto; min-width: 0; padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 9px; }
.hu__search { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 9px; background: var(--l-mock-panel); border: 1px solid var(--l-mock-line); color: rgba(255,255,255,.5); font-size: 11px; }
.hu__search .ico { width: 13px; height: 13px; }
.hu__cursor { width: 1px; height: 12px; background: var(--ev-primary); animation: blink 1.1s steps(2) infinite; }
@keyframes blink { to { opacity: 0; } }
.hu__featured { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; overflow: hidden; background: linear-gradient(120deg, rgba(52, 211, 153, .35), rgba(6, 95, 70, .45)); border: 1px solid rgba(52, 211, 153, .4); }
.hu__featured::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.14) 50%, transparent 70%); transform: translateX(-100%); animation: shimmer 4s ease-in-out infinite; }
@keyframes shimmer { 0%, 30% { transform: translateX(-100%); } 70%, 100% { transform: translateX(100%); } }
.hu__featured-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.hu__featured-eyebrow { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.hu__featured strong { font-size: 14px; font-weight: 700; }
.hu__featured-sub { font-size: 10px; color: rgba(255,255,255,.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hu__featured .chip { font-size: 9px; padding: 4px 8px; flex: 0 0 auto; }
.hu__featured-art { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.12); color: #fff; flex: 0 0 auto; }
.hu__featured-art .ico { width: 22px; height: 22px; }
.hu__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hu__tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 9px 6px 8px; border-radius: 11px; background: var(--l-mock-panel); border: 1px solid var(--l-mock-line); min-width: 0; }
.hu__tile-name { font-size: 10px; color: rgba(255,255,255,.8); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hu__tile-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 18px; padding-inline: 8px; border-radius: 999px; font-size: 9px; font-weight: 700; background: rgba(52, 211, 153, .18); color: var(--ev-primary); border: 1px solid rgba(52, 211, 153, .35); }
.hu__tile-btn.is-done { background: transparent; border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.55); }
.hu__tile-btn .ico { width: 11px; height: 11px; }
.hu__tile--demo { border-color: rgba(52, 211, 153, .35); }
.hu__install { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 62px; height: 18px; border-radius: 999px; overflow: hidden; font-size: 9px; font-weight: 700; background: rgba(52, 211, 153, .18); color: var(--ev-primary); border: 1px solid rgba(52, 211, 153, .35); transition: background-color .3s, color .3s, border-color .3s; }
.hu__install-bar { position: absolute; inset: 0; inset-inline-end: 100%; background: rgba(52, 211, 153, .35); transition: inset-inline-end 1.2s var(--ev-ease); }
.hu__install-txt { position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; gap: 3px; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .3s var(--ev-ease); white-space: nowrap; padding-inline: 6px; }
.hu__install-txt .ico { width: 10px; height: 10px; }
.hu__install.state-0 .hu__install-txt--0 { opacity: 1; transform: none; }
.hu__install.state-1 .hu__install-txt--1 { opacity: 1; transform: none; }
.hu__install.state-1 .hu__install-bar { inset-inline-end: 8%; }
.hu__install.state-2 { background: var(--ev-primary); color: #03261a; border-color: var(--ev-primary); }
.hu__install.state-2 .hu__install-bar { inset-inline-end: 0; opacity: 0; }
.hu__install.state-2 .hu__install-txt--2 { opacity: 1; transform: none; }
.hu__chin { display: flex; justify-content: center; padding-top: 8px; }
.hu__chin span { width: 46px; height: 5px; border-radius: 3px; background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.22), rgba(255,255,255,.08)); }
.hu-shadow { position: absolute; inset-inline: 10%; bottom: 0; height: 40px; background: radial-gradient(ellipse at center, rgba(var(--l-primary-rgb), .4), transparent 70%); filter: blur(18px); z-index: 1; }

/* App icons (gradient squares) */
.app-ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; color: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25); flex: 0 0 auto; }
.app-ico .ico { width: 18px; height: 18px; stroke-width: 2; }
.g-emerald { background: linear-gradient(135deg, #34D399, #065F46); }
.g-mint { background: linear-gradient(135deg, #6EE7B7, #10B981); }
.g-blue { background: linear-gradient(135deg, #51A2FF, #1D4ED8); }
.g-gold { background: linear-gradient(135deg, #FACC15, #D97706); }
.g-violet { background: linear-gradient(135deg, #A78BFA, #6D28D9); }
.g-rose { background: linear-gradient(135deg, #FB7185, #BE123C); }

/* Floating icons around the head unit */
.hu-float { position: absolute; z-index: 3; will-change: transform; filter: drop-shadow(0 10px 20px rgba(0,0,0,.35)); }
.hu-float > * { animation: float 6s ease-in-out infinite; }
.hu-float .app-ico { width: 52px; height: 52px; border-radius: 16px; }
.hu-float .app-ico .ico { width: 26px; height: 26px; }
.hu-float--1 { inset-inline-start: -4%; top: 4%; }
.hu-float--2 { inset-inline-end: -3%; top: 12%; }
.hu-float--3 { inset-inline-start: 8%; bottom: 8%; }
.hu-float--4 { inset-inline-end: 6%; bottom: 4%; }
.hu-float--5 { inset-inline-end: 22%; top: -2%; }
.hu-float--2 > * { animation-delay: -1.5s; }
.hu-float--3 > * { animation-delay: -3s; }
.hu-float--4 > * { animation-delay: -4.5s; }
.hu-float--5 > * { animation-delay: -2s; }
.hu-float--5 .chip { padding: 9px 14px; font-size: .85rem; background: var(--ev-surface); box-shadow: var(--ev-shadow); }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

@media (max-width: 639px) {
  .hu__side { width: 44px; padding: 8px 6px; }
  .hu__tab span { display: none; }
  .hu__tab { justify-content: center; padding: 7px 0; }
  .hu__grid { grid-template-columns: repeat(3, 1fr); }
  .hu__tile:nth-child(n+7) { display: none; }
  .hu__featured-sub { display: none; }
  .hu-float .app-ico { width: 40px; height: 40px; border-radius: 12px; }
  .hu-float .app-ico .ico { width: 20px; height: 20px; }
  .hu-float--1 { inset-inline-start: 0; top: 0; }
  .hu-float--2 { inset-inline-end: 0; top: 6%; }
  .hu-float--3 { inset-inline-start: 4%; bottom: 4%; }
  .hu-float--4 { inset-inline-end: 2%; bottom: 0; }
  .hu-float--5 { inset-inline-end: 18%; top: -4%; }
  .hu-float--5 .chip { padding: 7px 11px; font-size: .78rem; }
}

/* Scroll hint */
.scroll-hint { position: relative; z-index: 1; display: none; flex-direction: column; align-items: center; gap: 8px; margin: 28px auto 0; color: var(--ev-text-dim); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.scroll-hint__line { width: 1px; height: 44px; background: linear-gradient(var(--ev-primary), transparent); position: relative; overflow: hidden; }
.scroll-hint__line::after { content: ""; position: absolute; inset: 0; background: var(--ev-bg); animation: scroll-line 1.8s var(--ev-ease) infinite; }
@keyframes scroll-line { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

/* ---------- MARQUEE ---------- */
.marquee { position: relative; padding-block: 14px 8px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__row { overflow: hidden; padding-block: 6px; }
.marquee__track { display: flex; width: max-content; animation: marquee-ltr 48s linear infinite; }
.marquee__row--reverse .marquee__track { animation-direction: reverse; }
.marquee__row:hover .marquee__track { animation-play-state: paused; }
html.is-rtl .marquee__track { animation-name: marquee-rtl; }
@keyframes marquee-ltr { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marquee-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }

/* ---------- FEATURES (bento) ---------- */
.bento { display: grid; grid-template-columns: 1fr; gap: 16px; }
.bento__item { min-height: 200px; display: flex; flex-direction: column; }
.card__art { position: absolute; pointer-events: none; }
.card__art--apps { inset-inline-end: 18px; bottom: 16px; display: grid; grid-template-columns: repeat(4, 34px); gap: 10px; opacity: .9; }
.card__art--apps .app-ico { animation: float 5s ease-in-out infinite; }
.card__art--apps .app-ico:nth-child(2n) { animation-delay: -2s; }
.card__art--apps .app-ico:nth-child(3n) { animation-delay: -3.5s; }
.card__art--toggles { inset-inline-end: 22px; top: 26px; display: flex; gap: 8px; }
.mini-toggle { width: 34px; height: 20px; border-radius: 999px; background: rgba(255,255,255,.12); position: relative; transition: background-color .4s; border: 1px solid var(--l-glass-border); }
.mini-toggle i { position: absolute; top: 2px; inset-inline-start: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .4s var(--ev-ease); }
.mini-toggle.is-on { background: var(--ev-primary); }
.mini-toggle.is-on i { transform: translateX(14px); }
html.is-rtl .mini-toggle.is-on i { transform: translateX(-14px); }
.card__art--toggles .mini-toggle:nth-child(1) { animation: mini-toggle 6s infinite; }
.card__art--toggles .mini-toggle:nth-child(2) { animation: mini-toggle 6s -2s infinite; }
.card__art--toggles .mini-toggle:nth-child(3) { animation: mini-toggle 6s -4s infinite; }
@keyframes mini-toggle { 0%, 40% { background-color: rgba(255,255,255,.12); } 50%, 90% { background-color: var(--ev-primary); } }
.card__art--toggles .mini-toggle i { animation: mini-knob 6s infinite; }
.card__art--toggles .mini-toggle:nth-child(2) i { animation-delay: -2s; }
.card__art--toggles .mini-toggle:nth-child(3) i { animation-delay: -4s; }
@keyframes mini-knob { 0%, 40% { transform: translateX(0); } 50%, 90% { transform: translateX(14px); } }
html.is-rtl .card__art--toggles .mini-toggle i { animation-name: mini-knob-rtl; }
@keyframes mini-knob-rtl { 0%, 40% { transform: translateX(0); } 50%, 90% { transform: translateX(-14px); } }
.card__art--cast { inset-inline-end: 22px; bottom: 24px; display: flex; align-items: center; gap: 10px; }
.mini-screen { width: 56px; height: 36px; border-radius: 8px; border: 1px solid var(--l-glass-border); background: var(--l-mock-panel); position: relative; overflow: hidden; }
.mini-screen::after { content: ""; position: absolute; inset: 8px; border-radius: 4px; background: linear-gradient(135deg, var(--ev-grad-start), var(--ev-grad-end)); animation: mini-cast-a 4s var(--ev-ease) infinite; }
.mini-screen--b::after { animation-name: mini-cast-b; }
@keyframes mini-cast-a { 0%, 30% { opacity: 1; transform: none; } 55%, 100% { opacity: 0; transform: translateX(40px); } }
@keyframes mini-cast-b { 0%, 30% { opacity: 0; transform: translateX(-40px); } 55%, 100% { opacity: 1; transform: none; } }
html.is-rtl .mini-screen::after { animation-name: mini-cast-a-rtl; }
html.is-rtl .mini-screen--b::after { animation-name: mini-cast-b-rtl; }
@keyframes mini-cast-a-rtl { 0%, 30% { opacity: 1; transform: none; } 55%, 100% { opacity: 0; transform: translateX(-40px); } }
@keyframes mini-cast-b-rtl { 0%, 30% { opacity: 0; transform: translateX(40px); } 55%, 100% { opacity: 1; transform: none; } }
.mini-beam { width: 22px; height: 2px; background: linear-gradient(90deg, var(--ev-primary), transparent); }

/* 3D tilt (set via JS custom props) */
.tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); transition: transform .4s var(--ev-ease), border-color .35s, box-shadow .35s; }
.tilt:hover { border-color: var(--ev-outline); box-shadow: 0 20px 50px rgba(0,0,0,.35), 0 0 0 1px rgba(var(--l-primary-rgb), .25), var(--ev-glow); }
.tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--l-primary-rgb), .14), transparent 45%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.tilt:hover::after { opacity: 1; }
:root[data-theme="light"] .tilt:hover { box-shadow: 0 20px 50px rgba(6, 95, 70, .15), 0 0 0 1px rgba(var(--l-primary-rgb), .3); }

/* ---------- SPOTLIGHT ---------- */
.spot__inner { display: grid; gap: 36px; align-items: center; }
.spot__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.spot__visual { position: relative; }
.mock { position: relative; z-index: 1; border-radius: 20px; background: var(--l-mock-bg); color: #fff; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08); overflow: hidden; font-size: 12px; }
.mock__status { display: flex; align-items: center; justify-content: space-between; padding: 9px 16px; font-size: 11px; color: rgba(255,255,255,.7); border-bottom: 1px solid var(--l-mock-line); }

/* EVControl mock */
.mock--evc { padding-bottom: 0; }
.evc { position: relative; padding: 16px; display: flex; flex-direction: column; gap: 14px; background: radial-gradient(70% 60% at 100% 0%, rgba(52,211,153,.18), transparent 60%); }
.evc__hero { display: flex; align-items: center; gap: 12px; }
.evc__car { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(135deg, var(--ev-grad-start), var(--ev-grad-end)); color: #fff; }
.evc__car .ico { width: 24px; height: 24px; }
.evc__title { font-size: 15px; font-weight: 700; }
.evc__range { margin-inline-start: auto; width: 90px; }
.evc__range-bar { display: block; height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.evc__range-bar i { display: block; height: 100%; width: 78%; border-radius: 3px; background: linear-gradient(90deg, var(--ev-grad-end), var(--ev-grad-start)); animation: charge 6s ease-in-out infinite alternate; }
@keyframes charge { from { width: 60%; } to { width: 88%; } }
.evc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.evc__tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 12px; border-radius: 14px; background: var(--l-mock-panel); border: 1px solid var(--l-mock-line); color: rgba(255,255,255,.6); animation: evc-tile 9s infinite; }
.evc__tile .ico { width: 22px; height: 22px; }
.toggle { position: relative; width: 38px; height: 22px; border-radius: 999px; background: rgba(255,255,255,.14); animation: toggle-bg 9s infinite; }
.toggle i { position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); animation: toggle-knob 9s var(--ev-ease) infinite; }
html.is-rtl .toggle i { animation-name: toggle-knob-rtl; }
.evc__tile--1, .evc__tile--1 .toggle, .evc__tile--1 .toggle i { animation-delay: 0s; }
.evc__tile--2, .evc__tile--2 .toggle, .evc__tile--2 .toggle i { animation-delay: -1.5s; }
.evc__tile--3, .evc__tile--3 .toggle, .evc__tile--3 .toggle i { animation-delay: -3s; }
.evc__tile--4, .evc__tile--4 .toggle, .evc__tile--4 .toggle i { animation-delay: -4.5s; }
.evc__tile--5, .evc__tile--5 .toggle, .evc__tile--5 .toggle i { animation-delay: -6s; }
.evc__tile--6, .evc__tile--6 .toggle, .evc__tile--6 .toggle i { animation-delay: -7.5s; }
@keyframes evc-tile { 0%, 30% { color: rgba(255,255,255,.6); border-color: var(--l-mock-line); background: var(--l-mock-panel); } 38%, 78% { color: #fff; border-color: rgba(52,211,153,.5); background: rgba(52,211,153,.14); } 86%, 100% { color: rgba(255,255,255,.6); border-color: var(--l-mock-line); background: var(--l-mock-panel); } }
@keyframes toggle-bg { 0%, 30% { background: rgba(255,255,255,.14); } 38%, 78% { background: #34D399; } 86%, 100% { background: rgba(255,255,255,.14); } }
@keyframes toggle-knob { 0%, 30% { transform: translateX(0); } 38%, 78% { transform: translateX(16px); } 86%, 100% { transform: translateX(0); } }
@keyframes toggle-knob-rtl { 0%, 30% { transform: translateX(0); } 38%, 78% { transform: translateX(-16px); } 86%, 100% { transform: translateX(0); } }
.evc__finger { position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; background: rgba(255,255,255,.25); box-shadow: 0 0 0 6px rgba(255,255,255,.08); pointer-events: none; animation: finger 9s var(--ev-ease) infinite; inset-inline-start: 0; top: 0; }
@keyframes finger {
  0% { transform: translate(28%, 300%); opacity: 0; } 8% { opacity: 1; transform: translate(28%, 300%) scale(1); } 12% { transform: translate(28%, 300%) scale(.75); } 16% { transform: translate(28%, 300%) scale(1); }
  30% { transform: translate(600%, 300%); } 34% { transform: translate(600%, 300%) scale(.75); } 38% { transform: translate(600%, 300%) scale(1); }
  50% { transform: translate(1150%, 300%); } 54% { transform: translate(1150%, 300%) scale(.75); } 58% { transform: translate(1150%, 300%) scale(1); }
  70% { transform: translate(28%, 800%); } 74% { transform: translate(28%, 800%) scale(.75); } 78% { transform: translate(28%, 800%) scale(1); opacity: 1; }
  90%, 100% { transform: translate(28%, 800%); opacity: 0; }
}
html.is-rtl .evc__finger { animation-name: finger-rtl; }
@keyframes finger-rtl {
  0% { transform: translate(-28%, 300%); opacity: 0; } 8% { opacity: 1; transform: translate(-28%, 300%) scale(1); } 12% { transform: translate(-28%, 300%) scale(.75); } 16% { transform: translate(-28%, 300%) scale(1); }
  30% { transform: translate(-600%, 300%); } 34% { transform: translate(-600%, 300%) scale(.75); } 38% { transform: translate(-600%, 300%) scale(1); }
  50% { transform: translate(-1150%, 300%); } 54% { transform: translate(-1150%, 300%) scale(.75); } 58% { transform: translate(-1150%, 300%) scale(1); }
  70% { transform: translate(-28%, 800%); } 74% { transform: translate(-28%, 800%) scale(.75); } 78% { transform: translate(-28%, 800%) scale(1); opacity: 1; }
  90%, 100% { transform: translate(-28%, 800%); opacity: 0; }
}

/* EVCast mock */
.cast { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 6%; padding: 10px 0; }
.cast__screen { position: relative; flex: 0 0 44%; height: 0; padding-bottom: 28%; border-radius: 14px; background: var(--l-mock-bg); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 24px 60px rgba(0,0,0,.45); overflow: hidden; }
.cast__bar { position: absolute; top: 0; inset-inline: 0; height: 14px; background: rgba(255,255,255,.05); border-bottom: 1px solid var(--l-mock-line); }
.cast__label { position: absolute; top: 20px; inset-inline-start: 12px; font-size: 10px; color: rgba(255,255,255,.55); font-weight: 600; }
.cast__ghost { position: absolute; inset-inline-start: 12px; bottom: 12px; width: 44%; height: 42%; border-radius: 8px; border: 1px dashed rgba(255,255,255,.2); animation: ghost 5s var(--ev-ease) infinite; }
@keyframes ghost { 0%, 20% { opacity: 0; } 35%, 100% { opacity: 1; } }
.cast__landing { position: absolute; inset: 22px 12px 12px; border-radius: 10px; background: linear-gradient(135deg, rgba(250,204,21,.35), rgba(217,119,6,.25)); border: 1px solid rgba(250,204,21,.4); animation: landing 5s var(--ev-ease) infinite; }
@keyframes landing { 0%, 55% { opacity: 0; transform: scale(.9); } 68%, 100% { opacity: 1; transform: none; } }
.cast__flyer { position: absolute; z-index: 3; inset-inline-start: 6%; top: 42%; display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 16px 40px rgba(0,0,0,.4); animation: fly 5s var(--ev-ease) infinite; }
.cast__flyer-lines { display: flex; flex-direction: column; gap: 4px; }
.cast__flyer-lines i { display: block; height: 4px; border-radius: 2px; background: rgba(255,255,255,.6); width: 40px; }
.cast__flyer-lines i:last-child { width: 26px; opacity: .6; }
@keyframes fly { 0%, 15% { transform: translate(0, 0) scale(1); opacity: 1; } 55% { transform: translate(var(--fly-x, 240%), -60%) scale(1.15); opacity: 1; } 66% { transform: translate(var(--fly-x, 240%), -20%) scale(.9); opacity: 0; } 100% { transform: translate(0, 0); opacity: 0; } }
.cast { --fly-x: 260%; }
html.is-rtl .cast { --fly-x: -260%; }
.cast__path { position: absolute; inset-inline: 44% 44%; top: 46%; display: flex; justify-content: space-between; align-items: center; }
.cast__path i { width: 6px; height: 6px; border-radius: 50%; background: var(--ev-primary); opacity: .3; animation: path-dot 5s infinite; }
.cast__path i:nth-child(2) { animation-delay: .3s; } .cast__path i:nth-child(3) { animation-delay: .6s; }
@keyframes path-dot { 20% { opacity: .3; } 35% { opacity: 1; transform: scale(1.6); } 50% { opacity: .3; transform: none; } }

/* Browser mock */
.mock--brw { min-height: 300px; }
.brw__tabs { display: flex; align-items: flex-end; gap: 4px; padding: 8px 10px 0; background: rgba(0,0,0,.25); }
.brw__tab { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 9px 9px 0 0; color: rgba(255,255,255,.55); font-size: 11px; max-width: 120px; white-space: nowrap; overflow: hidden; }
.brw__tab .ico { width: 12px; height: 12px; }
.brw__tab.is-active { background: var(--l-mock-bg); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.brw__tab--new { padding: 7px 10px; font-size: 14px; }
.brw__bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--l-mock-line); }
.brw__nav { display: inline-flex; gap: 6px; }
.brw__nav i { width: 8px; height: 8px; border: 1.5px solid rgba(255,255,255,.4); border-width: 0 0 1.5px 1.5px; transform: rotate(45deg); display: block; margin-top: 2px; }
.brw__nav i:last-child { transform: rotate(225deg); margin-top: 0; }
.brw__url { flex: 1 1 auto; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: var(--l-mock-panel); border: 1px solid var(--l-mock-line); font-size: 11px; color: rgba(255,255,255,.8); min-width: 0; }
.brw__url .ico { width: 11px; height: 11px; color: var(--ev-primary); }
.brw__url-text { direction: ltr; unicode-bidi: isolate; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brw__dl { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; color: var(--ev-primary); animation: dl-bounce 6s infinite; }
@keyframes dl-bounce { 0%, 55% { transform: none; } 58% { transform: translateY(3px); } 61% { transform: none; } }
.brw__page { padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; }
.brw__line { display: block; height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); width: 90%; }
.brw__line--title { height: 14px; width: 55%; background: rgba(255,255,255,.14); }
.brw__line--short { width: 60%; }
.brw__cards { display: flex; gap: 10px; margin-block: 6px; }
.brw__cards span { flex: 1 1 0; height: 54px; border-radius: 10px; background: linear-gradient(135deg, rgba(52,211,153,.25), rgba(6,95,70,.2)); border: 1px solid rgba(52,211,153,.2); }
.brw__toast { position: absolute; inset-inline-end: 14px; bottom: 14px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: #142019; border: 1px solid rgba(52,211,153,.4); box-shadow: 0 16px 40px rgba(0,0,0,.5); font-size: 11px; animation: toast 6s var(--ev-ease) infinite; overflow: hidden; min-width: 160px; }
.brw__toast-ico { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ev-primary); color: #03261a; }
.brw__toast-txt { display: flex; flex-direction: column; gap: 2px; }
.brw__toast-txt b { font-weight: 700; direction: ltr; unicode-bidi: isolate; }
.brw__toast-txt span { color: rgba(255,255,255,.6); font-size: 10px; }
.brw__toast-prog { position: absolute; bottom: 0; inset-inline: 0; height: 3px; background: rgba(255,255,255,.08); }
.brw__toast-prog i { display: block; height: 100%; background: var(--ev-primary); animation: toast-prog 6s linear infinite; transform-origin: 0 50%; }
html.is-rtl .brw__toast-prog i { transform-origin: 100% 50%; }
@keyframes toast { 0%, 60% { opacity: 0; transform: translateY(20px); } 66%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(20px); } }
@keyframes toast-prog { 0%, 60% { transform: scaleX(0); } 66% { transform: scaleX(.2); } 90%, 100% { transform: scaleX(1); } }

/* ---------- EASY INSTALL ---------- */
.easy { overflow: hidden; }
.easy__inner { display: grid; gap: 40px; align-items: center; }
.easy__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.easy__points { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; }
.easy__point { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--ev-r-md); border: 1px solid var(--l-glass-border); background: var(--l-card-bg); font-weight: 500; }
.easy__point .ico { color: var(--ev-primary); }
.easy__note { margin-top: -6px; }
.easy__visual { position: relative; min-height: 340px; display: flex; align-items: center; justify-content: center; }
.tap { position: relative; width: 320px; height: 320px; display: flex; align-items: center; justify-content: center; }
.tap__ring { position: absolute; width: 96px; height: 96px; border-radius: 50%; border: 1px solid var(--ev-primary); opacity: 0; animation: ripple 3.6s ease-out infinite; }
.tap__ring--2 { animation-delay: .5s; } .tap__ring--3 { animation-delay: 1s; }
@keyframes ripple { 0% { transform: scale(.6); opacity: .7; } 60%, 100% { transform: scale(3.4); opacity: 0; } }
.tap__core { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(135deg, var(--ev-grad-start), var(--ev-grad-end)); color: #fff; box-shadow: 0 0 0 10px rgba(var(--l-primary-rgb), .12), 0 20px 50px rgba(var(--l-primary-rgb), .35); animation: tap-core 3.6s var(--ev-ease) infinite; }
.tap__core .ico { width: 40px; height: 40px; stroke-width: 2; }
@keyframes tap-core { 0%, 5% { transform: scale(1); } 9% { transform: scale(.88); } 16% { transform: scale(1.06); } 22%, 100% { transform: scale(1); } }
.tap__stack { position: absolute; inset: 0; }
.tap__app { position: absolute; display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 14px; background: var(--ev-surface); border: 1px solid var(--l-glass-border); box-shadow: var(--ev-shadow); animation: tap-app 3.6s var(--ev-ease) infinite; }
.tap__app .app-ico { width: 30px; height: 30px; border-radius: 9px; }
.tap__app .app-ico .ico { width: 16px; height: 16px; }
.tap__bar { display: block; width: 56px; height: 5px; border-radius: 3px; background: var(--ev-divider); position: relative; overflow: hidden; }
.tap__bar::after { content: ""; position: absolute; inset: 0; background: var(--ev-primary); transform: scaleX(0); transform-origin: 0 50%; animation: tap-bar 3.6s var(--ev-ease) infinite; }
html.is-rtl .tap__bar::after { transform-origin: 100% 50%; }
.tap__check { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ev-primary); color: #03261a; transform: scale(0); animation: tap-check 3.6s var(--ev-ease) infinite; }
.tap__check .ico { width: 11px; height: 11px; stroke-width: 2.6; }
.tap__app--1 { inset-inline-start: 0; top: 4%; animation-delay: 0s; }
.tap__app--2 { inset-inline-end: 0; top: 16%; animation-delay: .12s; }
.tap__app--3 { inset-inline-start: 2%; bottom: 20%; animation-delay: .24s; }
.tap__app--4 { inset-inline-end: 2%; bottom: 8%; animation-delay: .36s; }
.tap__app--5 { inset-inline-start: 30%; bottom: -4%; animation-delay: .48s; }
.tap__app--1 .tap__bar::after, .tap__app--1 .tap__check { animation-delay: 0s; }
.tap__app--2 .tap__bar::after, .tap__app--2 .tap__check { animation-delay: .12s; }
.tap__app--3 .tap__bar::after, .tap__app--3 .tap__check { animation-delay: .24s; }
.tap__app--4 .tap__bar::after, .tap__app--4 .tap__check { animation-delay: .36s; }
.tap__app--5 .tap__bar::after, .tap__app--5 .tap__check { animation-delay: .48s; }
@keyframes tap-app { 0%, 8% { border-color: var(--l-glass-border); transform: translateY(0); } 14% { transform: translateY(-4px); } 55%, 80% { border-color: var(--ev-outline); transform: translateY(0); } 100% { border-color: var(--l-glass-border); } }
@keyframes tap-bar { 0%, 10% { transform: scaleX(0); } 50%, 85% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes tap-check { 0%, 50% { transform: scale(0); } 58%, 88% { transform: scale(1); } 100% { transform: scale(0); } }
.tap__label { position: absolute; inset-inline-start: 50%; transform: translateX(-50%); bottom: -34px; opacity: 0; animation: tap-label 3.6s var(--ev-ease) infinite; }
html.is-rtl .tap__label { transform: translateX(50%); }
@keyframes tap-label { 0%, 55% { opacity: 0; } 62%, 88% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- INSTALL ---------- */
.steps { position: relative; display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 28px; }
.steps__line { display: none; }
.step { display: flex; flex-direction: column; gap: 10px; }
.step__num { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.step__num b { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--ev-grad-start), var(--ev-grad-end)); color: #fff; font-size: 1.05rem; font-weight: 700; box-shadow: 0 8px 20px rgba(var(--l-primary-rgb), .3); }
.step__label { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ev-primary); }
html.is-rtl .step__label { letter-spacing: 0; }
.step__ico { position: absolute; inset-inline-end: 22px; top: 24px; width: 40px; height: 40px; color: var(--ev-text-dim); opacity: .5; }
.step__title { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; }
.step__desc { color: var(--ev-text-muted); }
.shorturl { display: grid; gap: 28px; padding: 32px; margin-bottom: 40px; }
.shorturl__main { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.shorturl__label { font-weight: 600; color: var(--ev-text-muted); }
.shorturl__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; width: 100%; }
.shorturl__code { font-size: clamp(1.35rem, 4.5vw, 2rem); font-weight: 700; letter-spacing: -.01em; padding: 12px 20px; border-radius: var(--ev-r-md); background: var(--l-code-bg); border: 1px dashed var(--ev-outline); color: var(--ev-primary); direction: ltr; unicode-bidi: isolate; word-break: break-all; }
.copy-btn { position: relative; }
.copy-btn__done { display: none; }
.copy-btn.is-copied .copy-btn__idle { display: none; }
.copy-btn.is-copied .copy-btn__done { display: inline; }
.copy-btn.is-copied { border-color: var(--ev-primary); color: var(--ev-primary); }
.shorturl__cta { margin-top: 4px; }
.qr { display: flex; flex-direction: column; align-items: center; gap: 12px; justify-self: center; }
.qr__box { width: 180px; height: 180px; padding: 12px; border-radius: 18px; background: #fff; box-shadow: 0 10px 40px rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; }
.qr__box svg { width: 100%; height: 100%; display: block; }
.qr__placeholder { width: 100%; height: 100%; border-radius: 8px; background-image: linear-gradient(45deg, #0c1512 25%, transparent 25%, transparent 75%, #0c1512 75%), linear-gradient(45deg, #0c1512 25%, #fff 25%, #fff 75%, #0c1512 75%); background-size: 16px 16px; background-position: 0 0, 8px 8px; opacity: .85; }
.qr__caption { font-size: .9rem; color: var(--ev-text-muted); font-weight: 500; }
.install__alt-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 16px; letter-spacing: -.01em; }
.alts { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 28px; }
.alt { display: flex; flex-direction: column; gap: 8px; }
.alt__ico { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(var(--l-primary-rgb), .12); color: var(--ev-primary); margin-bottom: 4px; }
.alt__title { font-size: 1.05rem; font-weight: 700; }
.alt__desc { color: var(--ev-text-muted); font-size: .95rem; }
.alt__code { align-self: flex-start; margin-top: 4px; padding: 6px 12px; border-radius: 10px; background: var(--l-code-bg); color: var(--ev-primary); font-weight: 600; font-size: .95rem; direction: ltr; unicode-bidi: isolate; }
.compat { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-radius: var(--ev-r-ml); border: 1px solid var(--ev-outline); background: rgba(var(--l-primary-rgb), .06); }
.compat .ico { color: var(--ev-primary); width: 28px; height: 28px; }
.compat div { display: flex; flex-direction: column; gap: 2px; }

/* ---------- SIGN IN ---------- */
.signin { padding-block: 24px 72px; }
.signin__card { display: grid; gap: 24px; padding: 32px; }
.signin__glyphs { display: flex; align-items: center; padding-inline-end: 14px; }
.glyph { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; color: #fff; border: 3px solid var(--ev-surface); box-shadow: 0 10px 30px rgba(0,0,0,.35); margin-inline-end: -14px; animation: float 5s ease-in-out infinite; }
.glyph .ico { width: 30px; height: 30px; }
.glyph--wa { background: linear-gradient(135deg, #25D366, #128C7E); }
.glyph--tg { background: linear-gradient(135deg, #37AEE2, #1E73BE); animation-delay: -1.6s; }
.glyph--guest { background: linear-gradient(135deg, #9CA3AF, #4B5563); animation-delay: -3.2s; }
.signin__copy { display: flex; flex-direction: column; gap: 12px; }
.signin__title { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 700; letter-spacing: -.02em; }

/* ---------- FAQ ---------- */
.faq__inner { display: grid; gap: 32px; }
.accordion { display: flex; flex-direction: column; gap: 10px; }
.acc { border-radius: var(--ev-r-ml); border: 1px solid var(--l-glass-border); background: var(--l-card-bg); transition: border-color .3s, box-shadow .3s; overflow: hidden; }
.acc.is-open { border-color: var(--ev-outline); box-shadow: 0 0 0 1px rgba(var(--l-primary-rgb), .1); }
.acc__h { font-size: 1.05rem; font-weight: 600; }
.acc__btn { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 20px 22px; text-align: start; color: var(--ev-text); font-weight: 600; font-size: 1.05rem; line-height: 1.35; transition: color .2s; }
.acc__btn:hover { color: var(--ev-primary); }
.acc__chev { width: 20px; height: 20px; color: var(--ev-text-muted); transition: transform .35s var(--ev-ease); }
.acc.is-open .acc__chev { transform: rotate(180deg); color: var(--ev-primary); }
.acc__panel { height: 0; overflow: hidden; transition: height .4s var(--ev-ease); }
.acc__panel[hidden] { display: block; height: 0; }
.acc__panel p { padding: 0 22px 22px; color: var(--ev-text-muted); font-size: 1rem; max-width: 70ch; }

/* ---------- CTA band ---------- */
.cta-band { padding-block: 24px 80px; }
.cta-band__box { position: relative; overflow: hidden; text-align: center; padding: 64px 24px; border-radius: 32px; border: 1px solid var(--ev-outline); background: linear-gradient(160deg, rgba(var(--l-primary-rgb), .14), rgba(6, 95, 70, .08) 50%, transparent); display: flex; flex-direction: column; align-items: center; gap: 22px; }
.cta-band__aurora { position: absolute; inset: -40% -20%; background: radial-gradient(40% 50% at 30% 40%, rgba(var(--l-primary-rgb), .35), transparent 70%), radial-gradient(35% 45% at 75% 60%, rgba(81, 162, 255, .18), transparent 70%); filter: blur(50px); animation: drift-1 18s ease-in-out infinite alternate; pointer-events: none; }
.cta-band__logo { position: relative; width: 96px; height: 43px; filter: drop-shadow(0 0 24px rgba(var(--l-primary-rgb), .6)); }
.cta-band__title { position: relative; font-size: clamp(1.9rem, 6vw, 3.4rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; max-width: 14ch; }
.cta-band .btn { position: relative; }
.cta-band__car { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; color: var(--ev-text-muted); }
.cta-band__car a { color: var(--ev-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- FOOTER ---------- */
.footer { border-top: 1px solid var(--ev-divider); padding-block: 48px 28px; background: linear-gradient(180deg, transparent, rgba(var(--l-primary-rgb), .04)); }
.footer__inner { display: grid; grid-template-columns: 1fr; gap: 32px; }
.footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer__brand .brand__mark { width: 46px; height: 21px; }
.footer__tagline { max-width: 32ch; }
.footer__col { display: flex; flex-direction: column; gap: 10px; }
.footer__col h4 { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ev-text-dim); margin-bottom: 4px; }
html.is-rtl .footer__col h4 { letter-spacing: 0; }
.footer__col a { color: var(--ev-text-muted); transition: color .2s; width: fit-content; }
.footer__col a:hover { color: var(--ev-primary); }
.footer__langs { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.footer__langs a { font-size: .9rem; }
.footer__langs a.is-current { color: var(--ev-primary); font-weight: 600; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--ev-divider); }
.footer__made { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- Reveal (CSS fallback when GSAP is missing) ---------- */
html.reveal-css [data-reveal], html.reveal-css [data-reveal-stagger] > * { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ev-ease), transform .9s var(--ev-ease); }
html.reveal-css [data-reveal].is-visible, html.reveal-css [data-reveal-stagger].is-visible > * { opacity: 1; transform: none; }
html.reveal-css [data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: .08s; }
html.reveal-css [data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: .16s; }
html.reveal-css [data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: .24s; }
html.reveal-css [data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: .32s; }
html.reveal-css [data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: .40s; }
html.reveal-css [data-reveal-stagger].is-visible > *:nth-child(n+7) { transition-delay: .48s; }

/* ---------- Breakpoints ---------- */
@media (min-width: 640px) {
  :root { --l-pad: 28px; }
  .lang__name { display: inline; }
  .lang__btn { min-width: 150px; justify-content: flex-start; }
  .nav__cta { display: inline-flex; }
  .easy__points { grid-template-columns: 1fr 1fr; }
  .alts { grid-template-columns: repeat(3, 1fr); }
  .signin__card { grid-template-columns: auto 1fr; align-items: center; padding: 40px; }
  .shorturl { grid-template-columns: 1fr auto; align-items: center; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento__item--1 { grid-column: span 2; min-height: 260px; }
  .section { padding-block: 96px; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .steps__line { display: block; position: absolute; top: 48px; inset-inline: 12%; height: 2px; z-index: 0; background: var(--ev-divider); overflow: hidden; border-radius: 2px; }
  .steps__line i { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--ev-primary), transparent); transform: translateX(-100%); animation: line-run 3.5s var(--ev-ease) infinite; }
  html.is-rtl .steps__line i { animation-name: line-run-rtl; }
  @keyframes line-run { to { transform: translateX(100%); } }
  @keyframes line-run-rtl { from { transform: translateX(100%); } to { transform: translateX(-100%); } }
  .step { z-index: 1; }
  .scroll-hint { display: flex; }
}

@media (min-width: 900px) {
  .nav__links { display: flex; }
  .nav__burger { display: none; }
  .hero { padding-block: 40px 30px; }
  .hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; }
  .hero__title { font-size: clamp(2.8rem, 4.6vw, 4.4rem); }
  .hu-stage { padding: 44px 0 30px; }
  .spot__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; }
  .spot--flip .spot__copy { order: 2; }
  .spot--flip .spot__visual { order: 1; }
  .easy__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; }
  .faq__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 56px; align-items: start; }
  .section__head--start { position: sticky; top: calc(var(--l-nav-h) + 24px); }
  .bento { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(210px, auto); }
  .bento__item--1 { grid-column: span 2; grid-row: span 1; }
  .bento__item--4 { grid-column: span 2; }
  .bento__item--5 { grid-row: span 2; }
  .footer__inner { grid-template-columns: 1.4fr 1fr 1fr 1.6fr; }
  .hero__ctas .btn--lg { padding-block: 16px; }
}

@media (min-width: 1200px) {
  :root { --l-pad: 32px; }
  .hero { min-height: calc(100vh - var(--l-nav-h)); }
  .hero__inner { gap: 56px; }
  .hu-stage { max-width: 720px; }
  .section { padding-block: 112px; }
  .bento { gap: 18px; }
}

@media (min-width: 1600px) {
  :root { --l-max: 1280px; }
  .hero__title { font-size: 4.8rem; }
  .hu-stage { max-width: 760px; }
}

/* ---------- Sticky mobile CTA (only rendered ≤ 639px, see below) ---------- */
.sticky-cta { display: none; }

/* ---------- Tablet (640–899px): single column, keep decorative art out of the copy ---------- */
@media (min-width: 640px) and (max-width: 899px) {
  .hero { min-height: auto; }
  .hu { transform: perspective(1400px) rotateX(4deg) rotateY(-6deg); }
  html.is-rtl .hu { transform: perspective(1400px) rotateX(4deg) rotateY(6deg); }
  .bento__item { min-height: 0; }
  .card__art { position: static; margin-top: auto; padding-top: 18px; }
  .card__art--apps { justify-content: start; }
  .card__art--toggles, .card__art--cast { justify-content: flex-start; }
  .spot__visual { max-width: 560px; margin-inline: auto; width: 100%; }
  .easy__visual { min-height: 300px; }
  .section { padding-block: 80px; }
}

/* ---------- Phone (≤ 639px): compact, vertical rhythm, everything inside the viewport ---------- */
@media (max-width: 639px) {
  /* Rhythm & type */
  .section { padding-block: 56px; }
  .section__head { gap: 12px; margin-bottom: 28px; }
  .section__title { font-size: clamp(1.75rem, 7vw, 2.2rem); line-height: 1.12; letter-spacing: -.02em; }
  .section__sub { font-size: 1rem; line-height: 1.55; }
  .eyebrow { font-size: .72rem; padding: 5px 12px 5px 9px; }
  .checks { gap: 10px; }
  .checks li { font-size: .98rem; gap: 10px; }
  .checks__ico { width: 24px; height: 24px; }
  .btn--lg { padding: 14px 20px; font-size: 1rem; }

  /* Hero: sell on the first screen, mockup after */
  .hero { min-height: auto; padding-block: 22px 20px; }
  .hero__inner { gap: 24px; }
  .hero__copy { gap: 16px; }
  .hero__title { font-size: clamp(2.1rem, 9.2vw, 2.4rem); line-height: 1.05; letter-spacing: -.03em; }
  .hero__sub { font-size: 1rem; line-height: 1.5; }
  .hero__ctas { flex-direction: column; width: 100%; gap: 10px; }
  .hero__ctas .btn { width: 100%; min-height: 56px; padding-block: 10px; }
  .hero__ctas .btn__stack { align-items: center; text-align: center; }
  .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 2px; padding-top: 16px; }
  .stat { align-items: center; text-align: center; padding-inline: 6px; border-inline-start: 1px solid var(--ev-divider); }
  .stat:first-child { border-inline-start: 0; }
  .stat__value { font-size: 1.4rem; }
  .stat__label { font-size: .78rem; }
  .aurora__blob { opacity: .38; filter: blur(48px); }
  :root[data-theme="light"] .aurora__blob { opacity: .25; }
  .aurora__grid { background-size: 48px 48px; }
  .hu-stage { padding: 20px 0 18px; max-width: 100%; }
  .hu { transform: perspective(1100px) rotateX(5deg) rotateY(-7deg); }
  html.is-rtl .hu { transform: perspective(1100px) rotateX(5deg) rotateY(7deg); }
  .hu__bezel { padding: 8px; border-radius: 18px; }
  .hu__screen { border-radius: 12px; }
  .hu__grid { gap: 7px; }
  .hu__tile { padding: 8px 5px 7px; }
  .hu-float--3, .hu-float--4 { display: none; }
  .hu-float .app-ico { width: 42px; height: 42px; border-radius: 13px; }
  .hu-float .app-ico .ico { width: 21px; height: 21px; }
  .hu-float--1 { inset-inline-start: 2px; top: 0; }
  .hu-float--2 { inset-inline-end: 0; top: 46%; }
  .hu-float--5 { inset-inline-end: 12px; top: 0; }
  .hu-float--5 .chip { padding: 8px 12px; font-size: .78rem; }
  .hu-shadow { height: 30px; }

  /* Marquee */
  .marquee { padding-block: 8px 4px; }
  .marquee__row { padding-block: 4px; }
  .marquee__row--reverse { display: none; }
  .pill { padding: 8px 14px; margin-inline-end: 8px; font-size: .85rem; }

  /* Features: row cards (icon | title + desc), art on its own row below the copy */
  .bento { gap: 12px; }
  .bento__item { min-height: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 0; align-items: start; align-content: start; padding: 16px; }
  .bento__item .card__icon { width: 44px; height: 44px; border-radius: 13px; margin: 0; grid-column: 1; grid-row: 1 / span 2; }
  .bento__item .card__title { grid-column: 2; grid-row: 1; font-size: 1.05rem; line-height: 1.3; margin-bottom: 3px; }
  .bento__item .card__desc { grid-column: 2; grid-row: 2; font-size: .9rem; line-height: 1.42; }
  .bento__item .card__art { position: static; grid-column: 1 / -1; grid-row: 3; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ev-divider); opacity: 1; }
  .card__art--apps { display: flex; gap: 10px; }
  .card__art--apps .app-ico { width: 36px; height: 36px; border-radius: 11px; }
  .card__art--apps .app-ico:nth-child(n+7) { display: none; }
  .card__art--toggles, .card__art--cast { justify-content: flex-start; }

  /* Spotlights: visual first, then copy */
  .spot { padding-block: 44px; }
  .spot__inner { gap: 18px; }
  .spot__visual { order: -1; }
  .spot__copy { gap: 12px; }
  .glow-box::before { inset: 15% 10%; filter: blur(30px); }
  .mock { border-radius: 16px; }
  .evc { padding: 12px; gap: 10px; }
  .evc__grid { gap: 8px; }
  .evc__tile { padding: 10px; gap: 10px; border-radius: 12px; }
  .evc__car { width: 38px; height: 38px; border-radius: 12px; }
  .cast { padding: 6px 0; }
  .cast__screen { flex-basis: 47%; padding-bottom: 33%; border-radius: 12px; }
  .cast__flyer { padding: 6px; gap: 6px; }
  .cast__flyer .app-ico { width: 28px; height: 28px; }
  .cast__flyer-lines i { width: 30px; }
  .cast__flyer-lines i:last-child { width: 20px; }
  .mock--brw { min-height: 220px; }
  .brw__page { padding: 12px 14px; gap: 8px; }
  .brw__toast { min-width: 140px; padding: 8px 12px; }

  /* Easy install: compact visual first, 2×2 glass tiles */
  .easy { padding-block: 44px 52px; }
  .easy__inner { gap: 14px; }
  .easy__visual { order: -1; min-height: 0; padding-bottom: 32px; }
  .tap { width: 236px; height: 236px; }
  .tap__core { width: 80px; height: 80px; }
  .tap__core .ico { width: 32px; height: 32px; }
  .tap__ring { width: 80px; height: 80px; }
  .tap__app { padding: 6px 10px 6px 6px; gap: 8px; border-radius: 12px; }
  .tap__app .app-ico { width: 26px; height: 26px; border-radius: 8px; }
  .tap__bar { width: 44px; }
  .easy__copy { gap: 14px; }
  .easy__points { grid-template-columns: 1fr 1fr; gap: 10px; }
  .easy__point { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 13px; font-size: .88rem; line-height: 1.35; }
  .easy__note { margin-top: -2px; font-size: .85rem; }

  /* Install: vertical timeline, full-width short URL, compact alternatives */
  .install { padding-block: 56px 48px; }
  .install .section__head { margin-bottom: 24px; }
  .steps { gap: 0; margin-bottom: 20px; }
  .step { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: start; padding: 0 0 22px; border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible; box-shadow: none; }
  .step::before { display: none; }
  .step::after { content: ""; position: absolute; inset-inline-start: 19px; top: 44px; bottom: 6px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--ev-primary), rgba(var(--l-primary-rgb), .12)); }
  .step:last-child::after { display: none; }
  .step:last-child { padding-bottom: 0; }
  .step__num { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
  .step__label { display: none; }
  .step__ico { inset-inline-end: 0; top: 6px; width: 26px; height: 26px; opacity: .4; }
  .step__title { grid-column: 2; font-size: 1.1rem; line-height: 1.3; padding-inline-end: 34px; margin-top: 8px; }
  .step__desc { grid-column: 2; font-size: .95rem; line-height: 1.5; }
  .shorturl { padding: 18px; gap: 16px; margin-bottom: 24px; }
  .shorturl__main { gap: 12px; }
  .shorturl__label { font-size: .92rem; }
  .shorturl__row { position: relative; flex-wrap: nowrap; }
  .shorturl__code { flex: 1 1 auto; width: 100%; font-size: 1.3rem; line-height: 1.3; padding: 15px 92px 15px 16px; border-radius: 14px; word-break: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.is-rtl .shorturl__code { padding: 15px 16px 15px 92px; }
  .copy-btn { position: absolute; inset-inline-end: 7px; top: 7px; bottom: 7px; min-width: 78px; padding: 0 12px; }
  .shorturl__cta { width: 100%; min-height: 54px; margin-top: 0; }
  .qr { gap: 8px; }
  .qr__box { width: 152px; height: 152px; padding: 10px; border-radius: 16px; }
  .qr__caption { font-size: .85rem; }
  .install__alt-title { font-size: 1.15rem; margin-bottom: 12px; }
  .alts { gap: 10px; margin-bottom: 20px; }
  .alt { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: start; padding: 13px 14px; }
  .alt__ico { width: 40px; height: 40px; border-radius: 12px; margin: 0; grid-column: 1; grid-row: 1 / span 3; }
  .alt__title { grid-column: 2; font-size: 1rem; }
  .alt__desc { grid-column: 2; font-size: .88rem; line-height: 1.42; }
  .alt__code { grid-column: 2; font-size: .9rem; padding: 5px 10px; margin-top: 6px; }
  .compat { padding: 10px 12px; gap: 10px; border-radius: 14px; font-size: .85rem; align-items: flex-start; }
  .compat .ico { width: 20px; height: 20px; margin-top: 2px; }
  .compat div { display: block; line-height: 1.45; }
  .compat strong { margin-inline-end: 6px; }

  /* Sign-in */
  .signin { padding-block: 4px 40px; }
  .signin__card { padding: 20px; gap: 14px; }
  .glyph { width: 52px; height: 52px; margin-inline-end: -12px; }
  .glyph .ico { width: 24px; height: 24px; }
  .signin__title { font-size: 1.35rem; }
  .signin__copy { gap: 10px; }
  .signin__copy > .muted { font-size: .95rem; }

  /* FAQ */
  .faq { padding-block: 52px 40px; }
  .faq__inner { gap: 18px; }
  .accordion { gap: 8px; }
  .acc { border-radius: 16px; }
  .acc__btn { padding: 15px 16px; min-height: 56px; font-size: 1rem; gap: 12px; }
  .acc__panel p { padding: 0 16px 16px; font-size: .95rem; }

  /* Final CTA band */
  .cta-band { padding-block: 4px 56px; }
  .cta-band__box { padding: 32px 20px; gap: 14px; border-radius: 24px; }
  .cta-band__logo { width: 72px; height: 32px; }
  .cta-band__title { font-size: clamp(1.75rem, 8vw, 2.4rem); }
  .cta-band .btn--xl { width: 100%; min-height: 56px; padding: 12px 20px; font-size: 1.02rem; }
  .cta-band__car { font-size: .92rem; }
  .cta-band__car a { display: inline-block; padding: 8px 4px; }

  /* Footer: 2-column grid (Links | Legal), language chips */
  .footer { padding-block: 28px 16px; }
  .footer__inner { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  .footer__brand { grid-column: 1 / -1; gap: 6px; }
  .footer__tagline { font-size: .92rem; }
  .footer__col { gap: 0; }
  .footer__col h4 { margin-bottom: 6px; }
  .footer__col a { display: inline-flex; align-items: center; min-height: 40px; font-size: .92rem; }
  .footer__col--wide { grid-column: 1 / -1; }
  .footer__langs { gap: 10px; }
  .footer__langs a { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 12px; border-radius: var(--ev-r-pill); border: 1px solid var(--l-glass-border); background: var(--l-card-bg); font-size: .82rem; }
  .footer__langs a.is-current { border-color: var(--ev-outline); background: rgba(var(--l-primary-rgb), .1); }
  .footer__bottom { flex-direction: column; margin-top: 18px; padding-top: 14px; gap: 4px; }
  .footer__bottom .small { font-size: .8rem; }

  /* Sticky download bar: slides in after the hero, hides near the final CTA / footer */
  .sticky-cta { display: block; position: fixed; inset-inline: 0; bottom: 0; z-index: 45; padding: 10px var(--l-pad) calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--ev-glass); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); border-top: 1px solid var(--l-glass-border); box-shadow: 0 -10px 40px rgba(0,0,0,.25); transform: translateY(110%); visibility: hidden; transition: transform .45s var(--ev-ease), visibility 0s linear .45s; }
  .sticky-cta.is-visible { transform: none; visibility: visible; transition: transform .45s var(--ev-ease), visibility 0s; }
  .sticky-cta .btn { width: 100%; min-height: 52px; padding-block: 8px; }
  .sticky-cta .btn__stack { flex-direction: row; align-items: baseline; gap: 8px; }
  .sticky-cta .btn__meta { margin-top: 0; }
}

/* ---------- Light theme refinements ---------- */
:root[data-theme="light"] .pill { color: var(--ev-text-muted); }
:root[data-theme="light"] .hu__bezel { background: linear-gradient(160deg, #2a3532, #101715 60%, #1c2622); }
:root[data-theme="light"] .hu-shadow { opacity: .6; }
:root[data-theme="light"] .nav.is-scrolled { box-shadow: 0 10px 40px rgba(6, 95, 70, .08); }
:root[data-theme="light"] .brw__toast { background: #142019; }
:root[data-theme="light"] .tap__app, :root[data-theme="light"] .hu-float--5 .chip { background: #fff; }
:root[data-theme="light"] .glyph { border-color: #fff; }
:root[data-theme="light"] .mini-toggle { background: rgba(0,0,0,.12); }
:root[data-theme="light"] .mini-toggle.is-on { background: var(--ev-primary); }
:root[data-theme="light"] .hu__tile-btn { color: #047857; }
:root[data-theme="light"] .app-ico { box-shadow: 0 6px 16px rgba(6, 95, 70, .25), inset 0 1px 0 rgba(255,255,255,.35); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .marquee__track { animation: none; }
  .hu-float, .tilt { transform: none !important; }
  .aurora__blob { animation: none; }
  html.reveal-css [data-reveal], html.reveal-css [data-reveal-stagger] > * { opacity: 1; transform: none; }
}