@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:optional;src:url(/assets/fonts/inter-400.3f2e9a6465.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:optional;src:url(/assets/fonts/inter-600.483a19ef23.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:optional;src:url(/assets/fonts/inter-700.628b62f70d.woff2) format('woff2')}
@font-face{font-family:'Inter Fallback';src:local('Arial'),local('Helvetica Neue'),local('Roboto');ascent-override:90.44%;descent-override:22.52%;line-gap-override:0%;size-adjust:107.12%}
/* easyph.uz (v1.1). Tokens mirror the app (mobile/lib/core/theme/tokens.dart): warm "milk" light, unchanged dark.
   Mobile-first; built into site/assets/site.<hash>.css by scripts/build-site.py (fonts and brand colors prepended/appended). */
:root {
  color-scheme: light;
  --primary: #1E5EFF;
  --primary-ink: #1B4FD6;
  --on-primary: #FFFFFF;
  --accent: #FF7A1A;
  /* Headline keyword gradient: brand orange -> pink -> violet. On milk the orange and pink are deepened slightly so
     every point of the gradient keeps >= 3.3:1 (WCAG AA for large text); #7C4DFF is 4.4:1 as is. */
  --hl-1: #E15E00;
  --hl-2: #FF2972;
  --hl-3: #7C4DFF;
  --shadow-hover: 0 2px 4px rgba(80, 60, 20, .06), 0 16px 34px -10px rgba(80, 60, 20, .26);
  --toast-bg: #1F2430;
  --toast-text: #F8F5EE;
  --primary-soft: #E8EEFF;
  --on-primary-soft: #0A1F66;
  /* Accent tint (same tokens as the app: accentTint / onAccentTint): the accent as a soft background + what is drawn
     on it, AA. Light: peach with a clear burnt orange (was a brown #8A3600). Dark: violet, never a brown tint. */
  --accent-tint: #FFEBDC;
  --accent-on-tint: #B93A00;
  --accent-ring: color-mix(in srgb, #FF7A1A 22%, transparent);
  --band-glow-2: color-mix(in srgb, #FF7A1A 14%, var(--surface));
  --bg: #F8F5EE;
  --bg-alt: #F3EEE4;
  --surface: #FFFDF8;
  --surface-2: #F1ECE2;
  --outline: #E7E0D2;
  --text: #1F2430;
  --text-2: #5F6676;
  --shadow: 0 1px 2px rgba(80, 60, 20, .04), 0 12px 32px -8px rgba(80, 60, 20, .10);
  --shadow-lg: 0 2px 4px rgba(80, 60, 20, .04), 0 28px 60px -16px rgba(80, 60, 20, .22);
  --glow-1: rgba(30, 94, 255, .16);
  --glow-2: rgba(255, 122, 26, .14);
  --phone-frame: linear-gradient(145deg, #EDE6D8, #CFC5B2);
  --radius: 18px;
  --font: Inter, 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --primary: #5B8CFF;
    --primary-ink: #7FA4FF;
    --on-primary: #0A1433;
    --accent: #FF9447;
    /* On night: #FF7A1A 7.3:1, #FF3D7F 5.7:1, violet lightened to #875CFF (4.6:1). */
    --hl-1: #FF7A1A;
    --hl-2: #FF3D7F;
    --hl-3: #875CFF;
    --shadow-hover: 0 16px 34px -12px rgba(0, 0, 0, .75);
    --toast-bg: #F2F4F7;
    --toast-text: #0B0F1A;
    --primary-soft: #1A2A55;
    --on-primary-soft: #D6E2FF;
    --accent-tint: #241B4A;
    --accent-on-tint: #B39DFF;
    --accent-ring: rgba(124, 77, 255, .35);
    --band-glow-2: color-mix(in srgb, #7C4DFF 18%, var(--surface));
    --bg: #0B0F1A;
    --bg-alt: #0F1422;
    --surface: #151B2B;
    --surface-2: #1E2638;
    --outline: #2A3348;
    --text: #F2F4F7;
    --text-2: #A3ADBE;
    --shadow: none;
    --shadow-lg: 0 30px 70px -20px rgba(0, 0, 0, .6);
    --glow-1: rgba(91, 140, 255, .18);
    --glow-2: rgba(124, 77, 255, .16);
    --phone-frame: linear-gradient(145deg, #3A4560, #1E2638);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --primary: #5B8CFF;
  --primary-ink: #7FA4FF;
  --on-primary: #0A1433;
  --accent: #FF9447;
  /* On night: #FF7A1A 7.3:1, #FF3D7F 5.7:1, violet lightened to #875CFF (4.6:1). */
  --hl-1: #FF7A1A;
  --hl-2: #FF3D7F;
  --hl-3: #875CFF;
  --shadow-hover: 0 16px 34px -12px rgba(0, 0, 0, .75);
  --toast-bg: #F2F4F7;
  --toast-text: #0B0F1A;
  --primary-soft: #1A2A55;
  --on-primary-soft: #D6E2FF;
  --accent-tint: #241B4A;
  --accent-on-tint: #B39DFF;
  --accent-ring: rgba(124, 77, 255, .35);
  --band-glow-2: color-mix(in srgb, #7C4DFF 18%, var(--surface));
  --bg: #0B0F1A;
  --bg-alt: #0F1422;
  --surface: #151B2B;
  --surface-2: #1E2638;
  --outline: #2A3348;
  --text: #F2F4F7;
  --text-2: #A3ADBE;
  --shadow: none;
  --shadow-lg: 0 30px 70px -20px rgba(0, 0, 0, .6);
  --glow-1: rgba(91, 140, 255, .18);
  --glow-2: rgba(124, 77, 255, .16);
  --phone-frame: linear-gradient(145deg, #3A4560, #1E2638);
}

/* Only the current language is visible. Without JS the page stays in Uzbek. */
html[data-lang="uz"] [data-l]:not([data-l="uz"]),
html[data-lang="ru"] [data-l]:not([data-l="ru"]),
html[data-lang="en"] [data-l]:not([data-l="en"]) { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.65 var(--font);
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
main { flex: 1; }
a { color: var(--primary-ink); text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; color: var(--text); text-wrap: balance; overflow-wrap: anywhere; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; }
button { font: inherit; color: inherit; }
.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 16px; }
.ico { width: 22px; height: 22px; flex: none; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; border-radius: 10px;
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); }
.skip:focus { top: 12px; }

/* ------------------------------------------------------------------ header */
.top { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid transparent;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.5) blur(14px); -webkit-backdrop-filter: saturate(1.5) blur(14px);
  transition: border-color .2s; }
.top.scrolled { border-bottom-color: var(--outline); }
.top-row { display: flex; align-items: center; gap: 16px; height: 64px; }
.logo { display: inline-flex; align-items: center; text-decoration: none; border-radius: 8px; }
/* Brand kit horizontal logo (543×168): light variant on light surfaces, dark on dark. Background images, so only the
   variant in use is downloaded and the theme toggle can switch it. */
.logo-img { display: block; width: 104px; height: 32px; flex: none;
  background: url(/assets/brand/logo-horizontal-light.svg) left center / contain no-repeat; }
.logo-img.sm { width: 91px; height: 28px; }
.logo-img.xs { width: 78px; height: 24px; } /* kit minimum: 24 px tall */
:root[data-theme="dark"] .logo-img { background-image: url(/assets/brand/logo-horizontal-dark.svg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-img { background-image: url(/assets/brand/logo-horizontal-dark.svg); }
}
.nav { display: none; gap: 4px; margin-left: 12px; }
.nav a { padding: 8px 12px; border-radius: 10px; color: var(--text-2); text-decoration: none; font-size: 15px; font-weight: 600; }
.controls { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.langs { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--outline); }
.langs button { border: 0; background: none; cursor: pointer; min-width: 38px; min-height: 32px; padding: 0 9px;
  border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text-2); }
/* Keyed on html[data-lang] (set in <head>) so the right pill shows from first paint. */
html[data-lang="uz"] [data-set-lang="uz"],
html[data-lang="ru"] [data-set-lang="ru"],
html[data-lang="en"] [data-set-lang="en"] { background: var(--primary); color: var(--on-primary); }
.theme { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--outline); background: var(--surface); color: var(--text); }
.theme .ico { width: 19px; height: 19px; }
.ico-sun { display: none; }
:root[data-theme="dark"] .ico-sun { display: block; }
:root[data-theme="dark"] .ico-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ico-sun { display: block; }
  :root:not([data-theme="light"]) .ico-moon { display: none; }
}

/* ------------------------------------------------------------------ buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px;
  padding: 0 22px; border-radius: 999px; font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none;
  border: 1px solid transparent; transition: transform .15s, box-shadow .2s, background-color .2s, border-color .2s; }
.btn .ico { width: 20px; height: 20px; }
.btn-primary { background: var(--primary); color: var(--on-primary);
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--primary) 70%, transparent); }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--outline); box-shadow: var(--shadow); }
.btn-ghost .ico { color: var(--primary); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* ------------------------------------------------------------------ hero */
.hero { position: relative; overflow: hidden; padding: 40px 0 56px; }
.glow { position: absolute; border-radius: 50%; pointer-events: none; }
.g1 { width: 560px; height: 560px; right: -180px; top: -200px; background: radial-gradient(closest-side, var(--glow-1), transparent); }
.g2 { width: 460px; height: 460px; right: 120px; top: 260px; background: radial-gradient(closest-side, var(--glow-2), transparent); }
.hero-grid { position: relative; display: grid; gap: 48px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--outline); color: var(--text-2); font-size: 14px; font-weight: 600;
  box-shadow: var(--shadow); margin-bottom: 22px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-ring); }
.hero h1 { font-size: clamp(38px, 9.6vw, 66px); font-weight: 700; line-height: 1.06; letter-spacing: -.035em; max-width: 13em; }
/* Keyword: orange -> pink -> violet, repeated mirror-wise on a 200% wide background so the sweep loops seamlessly. */
.hl { background: linear-gradient(100deg, var(--hl-1), var(--hl-2), var(--hl-3), var(--hl-2), var(--hl-1)) 0 50% / 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  padding-right: .04em; }
@keyframes hl-sweep { to { background-position: -200% 50%; } }
@media (forced-colors: active) { .hl { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; } }
.lead { margin-top: 20px; font-size: 18px; line-height: 1.6; color: var(--text-2); max-width: 32em; }
.hero .cta { margin-top: 32px; }

/* Phone mock-up (decorative): the app's real UI language, no product photos. */
.phone { justify-self: center; width: min(320px, 86vw); padding: 9px; border-radius: 46px; background: var(--phone-frame);
  box-shadow: var(--shadow-lg); position: relative; }
.phone::before { content: ""; position: absolute; top: 18px; left: 50%; width: 76px; height: 20px; margin-left: -38px;
  border-radius: 20px; background: #10131B; z-index: 2; }
.phone-screen { border-radius: 38px; background: var(--bg); padding: 46px 14px 18px; overflow: hidden; }
.ps-bar { display: flex; align-items: center; margin-bottom: 12px; }
.ps-search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--outline); color: var(--text-2); font-size: 13px; margin-bottom: 14px; }
.ps-search .ico { width: 16px; height: 16px; }
.ps-search span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-brands { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 14px; }
.ps-h { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.ps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mc { background: var(--surface); border: 1px solid var(--outline); border-radius: 16px; padding: 6px 6px 10px;
  box-shadow: var(--shadow); font-size: 11px; line-height: 1.35; min-width: 0; }
.mc-img { aspect-ratio: 1; border-radius: 11px; margin-bottom: 8px; display: grid; place-items: center; }
.mc-device { width: 34%; aspect-ratio: 9 / 18; border-radius: 9px; border: 2px solid color-mix(in srgb, var(--text) 30%, transparent);
  background: color-mix(in srgb, var(--surface) 60%, transparent); }
.t1 { background: linear-gradient(150deg, #DCE6FF, #F2F5FF); }
.t2 { background: linear-gradient(150deg, #FFE4CF, #FFF4EA); }
.t3 { background: linear-gradient(150deg, #E7E0D2, #F7F3EA); }
.t4 { background: linear-gradient(150deg, #DDF3E7, #F1FAF5); }
:root[data-theme="dark"] .mc-img { background: var(--surface-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mc-img { background: var(--surface-2); } }
.mc-price { font-weight: 700; font-size: 14px; }
.mc-title { display: flex; align-items: center; gap: 4px; color: var(--text); white-space: nowrap; overflow: hidden; }
.mc-title span { overflow: hidden; text-overflow: ellipsis; }
.mc-glyph { width: 11px; height: 11px; flex: none; }
.chip { display: inline-block; margin-top: 5px; padding: 1px 8px; border-radius: 999px; background: var(--primary-soft);
  color: var(--on-primary-soft); font-size: 10px; font-weight: 600; }

/* ------------------------------------------------------------------ sections and cards */
.sec { padding: 56px 0; }
.sec-alt { background: var(--bg-alt); border-block: 1px solid var(--outline); }
.sec-head { max-width: 640px; margin-bottom: 32px; }
.kicker { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary-ink); margin-bottom: 10px; }
.sec h2 { font-size: clamp(28px, 6.4vw, 42px); font-weight: 700; line-height: 1.14; letter-spacing: -.028em; }
.sec-text { margin-top: 12px; color: var(--text-2); font-size: 18px; }
.grid { display: grid; gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--outline); border-radius: var(--radius); box-shadow: var(--shadow); }
.feat, .step { padding: 24px; height: 100%; transition: transform .2s, box-shadow .2s, border-color .2s; }
.feat:hover, .step:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 30%, var(--outline)); box-shadow: var(--shadow-lg); }
.feat-ico { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; margin-bottom: 18px;
  background: var(--primary-soft); color: var(--primary-ink); }
/* Alternating blue / accent-tint icon tiles (accent tint: peach on light, violet on dark). */
.feat:nth-child(even) .feat-ico, .step:nth-child(2) .feat-ico { background: var(--accent-tint); color: var(--accent-on-tint); }
.feat h3, .step h3, .tip h3 { font-size: 19px; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; margin-bottom: 8px; }
.feat p, .step p, .tip p { color: var(--text-2); font-size: 16px; line-height: 1.6; }
.step { position: relative; }
.step-n { position: absolute; top: 20px; right: 22px; font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -.04em;
  color: var(--outline); }

/* Brands strip: same rules as the app — official logo in ink on a soft tint, or a wordmark. */
.brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; }
.br { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.br-tile { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--tile, var(--surface-2));
  border: 1px solid var(--outline); color: var(--text); transition: color .2s, transform .2s, box-shadow .2s; }
.br-logo { width: 30px; height: 30px; }
.br-logo.wide { width: 46px; height: 46px; } /* wordmarks are a thin band in the square viewBox: larger box, same SVG */
.br-word { font-weight: 700; font-size: 12.5px; letter-spacing: -.02em; color: var(--brand, var(--text)); max-width: 56px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br:hover .br-tile { color: var(--brand, var(--text)); transform: translateY(-2px); box-shadow: var(--shadow); }
.br-name { font-size: 14px; font-weight: 600; color: var(--text-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br.sm { gap: 4px; }
.br.sm .br-tile { width: 100%; height: auto; aspect-ratio: 1; border-radius: 14px; }
.br.sm .br-logo { width: 46%; height: 46%; }
.br.sm .br-logo.wide { width: 72%; height: 72%; }
.br.sm .br-word { font-size: 9.5px; max-width: 90%; }
.br.sm .br-name { font-size: 10px; }

/* Safety */
.safety { padding: 28px 20px; background: linear-gradient(160deg, var(--surface), color-mix(in srgb, var(--accent-tint) 45%, var(--surface))); }
.safety .sec-head { margin-bottom: 24px; }
.tips { display: grid; gap: 18px; }
.tip { display: flex; gap: 14px; align-items: flex-start; }
.tip-ico { display: inline-grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--outline); color: var(--accent-on-tint); }
.tip h3 { font-size: 17px; margin-bottom: 4px; }

/* FAQ (native <details>: keyboard and screen-reader friendly without JS) */
.faq { display: grid; gap: 10px; }
.faq-item { background: var(--surface); border: 1px solid var(--outline); border-radius: 16px; box-shadow: var(--shadow); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer;
  list-style: none; padding: 18px 20px; font-weight: 600; font-size: 17px; line-height: 1.4; border-radius: 16px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--primary-ink); }
.faq-chev { width: 20px; height: 20px; color: var(--text-2); transition: transform .2s; }
.faq-item[open] .faq-chev { transform: rotate(180deg); }
.faq-a { padding: 0 20px 18px; color: var(--text-2); font-size: 16px; }

/* Final CTA */
.sec-cta { padding-top: 16px; }
.cta-band { position: relative; overflow: hidden; border-radius: 28px; padding: 40px 22px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px; border: 1px solid var(--outline);
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--primary) 14%, var(--surface)), transparent 60%),
              radial-gradient(120% 140% at 100% 100%, var(--band-glow-2), var(--surface) 70%); }
.cta-band h2 { font-size: clamp(26px, 6vw, 40px); font-weight: 700; letter-spacing: -.028em; line-height: 1.15; max-width: 18em; }
.cta-band p { color: var(--text-2); font-size: 18px; max-width: 34em; }
.cta-band .cta { justify-content: center; margin-top: 8px; }

/* ------------------------------------------------------------------ legal and simple pages */
.doc { max-width: 820px; padding-top: 28px; padding-bottom: 64px; }
.doc-card { padding: 28px 20px; margin-top: 16px; }
.doc h1 { font-size: clamp(28px, 7vw, 40px); font-weight: 700; letter-spacing: -.028em; line-height: 1.15; }
.meta { color: var(--text-2); font-size: 14px; margin-top: 10px; }
.prose { margin-top: 24px; display: grid; gap: 16px; font-size: 17px; line-height: 1.7; max-width: 68ch; }
/* Sections and lists in app texts ("## " heading, "• " lines; build-site.py paragraphs()). */
.prose h2 { margin-top: 14px; font-size: 21px; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; }
.prose ul { display: grid; gap: 8px; }
.prose li { position: relative; padding-left: 22px; }
.prose li::before { content: ""; position: absolute; left: 6px; top: .72em; width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary); }
/* A related page at the end of a document (privacy -> account deletion and back). */
.doc-link { display: flex; align-items: center; gap: 12px; margin-top: 32px; padding: 16px 18px; border-radius: 14px;
  border: 1px solid var(--outline); background: var(--bg); color: var(--text); text-decoration: none; font-weight: 600; }
.doc-link .ico { color: var(--primary-ink); }
.doc-link .doc-link-go { margin-left: auto; color: var(--text-2); }

/* Account deletion page: two ways (app / Telegram), then what is deleted, what is kept and when. */
.del-lead { margin-top: 18px; color: var(--text-2); font-size: 18px; line-height: 1.6; max-width: 40em; }
.del-ways { display: grid; gap: 16px; margin-top: 28px; }
.del-way { display: flex; flex-direction: column; align-items: flex-start; padding: 20px 18px; border-radius: var(--radius);
  border: 1px solid var(--outline); background: var(--bg); }
.del-way .feat-ico { margin-bottom: 16px; }
.del-way .feat-ico.alt { background: var(--accent-tint); color: var(--accent-on-tint); }
.del-way .kicker { margin-bottom: 4px; }
.del-way h2, .del-sec h2 { font-size: 21px; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; }
.del-steps { display: grid; gap: 12px; margin-top: 16px; }
.del-steps li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.55; }
.del-n { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--primary-soft); color: var(--on-primary-soft); font-size: 13px; font-weight: 700; }
.del-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 18px; font-size: 15px; font-weight: 600; }
.del-note .ico { width: 20px; height: 20px; color: var(--primary-ink); }
.del-extra { margin-top: 8px; color: var(--text-2); font-size: 15px; }
.del-way .btn { margin-top: 20px; }
.del-sec { margin-top: 40px; }
.del-sec h2 { display: flex; align-items: center; gap: 10px; }
.del-sec h2 .ico { color: var(--primary-ink); }
.del-list { display: grid; margin-top: 14px; border: 1px solid var(--outline); border-radius: 14px; overflow: hidden; }
.del-list li { display: grid; gap: 2px; padding: 14px 16px; font-size: 16px; line-height: 1.55; }
.del-list li + li { border-top: 1px solid var(--outline); }
.del-list li.ck { grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.del-list li.ck .ico { width: 20px; height: 20px; margin-top: 2px; color: var(--primary-ink); }
.del-list .k { color: var(--text-2); }
.del-list .v { font-weight: 700; color: var(--text); }
.back { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); text-decoration: none; font-weight: 600; font-size: 15px;
  padding: 6px 2px; }
.back .ico { width: 18px; height: 18px; }
.simple { position: relative; overflow: hidden; }
.simple-in { position: relative; max-width: 600px; padding-top: 72px; padding-bottom: 88px; display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: 18px; }
/* The app icon: milk version on the light theme, the primary ink version on dark (brand kit rule). */
.simple-ico { display: block; width: 88px; height: 88px; border-radius: 22%; box-shadow: var(--shadow-lg);
  background: url(/assets/brand/app-icon-milk.webp) center / cover; }
:root[data-theme="dark"] .simple-ico { background-image: url(/assets/brand/app-icon-ink.webp); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .simple-ico { background-image: url(/assets/brand/app-icon-ink.webp); }
}
.simple h1 { font-size: clamp(26px, 7vw, 38px); font-weight: 700; letter-spacing: -.028em; line-height: 1.15; }
.simple p { color: var(--text-2); font-size: 18px; }
.simple .cta { justify-content: center; }

/* ------------------------------------------------------------------ footer */
.foot { border-top: 1px solid var(--outline); background: var(--bg-alt); padding: 36px 0 28px; color: var(--text-2); font-size: 15px; }
.foot-grid { display: grid; gap: 22px; }
.foot-tag { margin-top: 8px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
.foot-links a { color: var(--text); text-decoration: none; font-weight: 600; }
.foot-legal { display: grid; gap: 6px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--outline); font-size: 13px; }

/* ------------------------------------------------------------------ interactive states
   Every button and link: hover lifts 2px with a stronger soft shadow (or a brighter fill), press scales to .98,
   keyboard focus gets a brand-blue ring, 150-200 ms transitions. Lift and press only when motion is allowed
   (see the motion section); colors and shadows change either way. */
a, button, summary { cursor: pointer; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 10px; }
.btn, .nav a, .langs button, .theme, .logo, .faq-item, .foot-links a, .back, .play-btn, .skip, .doc-link {
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease,
    border-color .18s ease, filter .18s ease; }
.btn-primary:hover { box-shadow: 0 16px 30px -12px color-mix(in srgb, var(--primary) 80%, transparent); filter: brightness(1.06); }
.btn-ghost:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--outline)); box-shadow: var(--shadow-hover); }
.nav a:hover { color: var(--text); background: var(--surface-2); box-shadow: var(--shadow-hover); }
.langs button:not([aria-pressed="true"]):hover { color: var(--text); background: var(--surface); box-shadow: var(--shadow-hover); }
html[data-lang="uz"] [data-set-lang="uz"]:hover, html[data-lang="ru"] [data-set-lang="ru"]:hover,
html[data-lang="en"] [data-set-lang="en"]:hover { filter: brightness(1.08); }
.theme:hover { background: var(--surface-2); box-shadow: var(--shadow-hover); }
.logo:hover { filter: brightness(1.04); }
.faq-item:hover { border-color: color-mix(in srgb, var(--primary) 30%, var(--outline)); box-shadow: var(--shadow-hover); }
.foot-links a:hover { color: var(--primary-ink); text-decoration: underline; }
.back:hover { color: var(--primary-ink); }
.doc-link:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--outline)); box-shadow: var(--shadow-hover); }

/* Google Play: the official badge, unaltered (Google's guidelines: no recoloring, cropping or text on it; clear space
   of 1/4 of its height). Hover only lifts it and adds a soft shadow underneath; it is never brightened or tinted. */
.play-btn { display: inline-flex; padding: 0; border: 0; background: none; border-radius: 16px; line-height: 0; }
.play-badge { display: block; max-width: none; }
.pb-uz, .pb-en { margin: 1px; }        /* PNG padding (13.2 px at 54 px) + 1 px >= 13.5 px clear space */
.pb-ru { margin: 6px 14px; }           /* this PNG has no side padding and 8 px above/below */
.play-btn:hover .play-badge { filter: drop-shadow(0 10px 14px rgba(11, 20, 51, .28)); }
.soon-chip { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 5px 12px 5px 10px; border-radius: 999px;
  background: var(--accent-tint); color: var(--accent-on-tint); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.soon-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.hero-cta { margin-top: 28px; display: flex; flex-direction: column; align-items: flex-start; }
/* Left-aligned hero: let the PNG's transparent padding hang outside the text column so the visible badge lines up
   with the text. Only empty space moves; the clear space on the right/top/bottom stays intact. */
.hero-cta .pb-uz, .hero-cta .pb-en { margin-left: -12px; }
.hero-cta .pb-ru { margin-left: 0; }
.band-cta { margin-top: 6px; display: flex; flex-direction: column; align-items: center; }
.hero-cta .cta, .band-cta .cta { align-items: center; }
.band-cta .cta { justify-content: center; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0; }

/* "Coming soon" notice (role=status live region, filled by site.js). */
.toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 60; transform: translate(-50%, 12px);
  max-width: min(92vw, 420px); padding: 12px 18px; border-radius: 14px; background: var(--toast-bg); color: var(--toast-text);
  font-size: 15px; font-weight: 600; line-height: 1.4; text-align: center; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .45);
  opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }
.toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .18s ease, transform .18s ease; }
.toast:empty { display: none; }

/* ------------------------------------------------------------------ motion: below-the-fold entrance reveals only; none when reduced */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
  .js .reveal.in { opacity: 1; transform: none; }
  .btn:hover, .nav a:hover, .langs button:hover, .theme:hover, .logo:hover, .faq-item:hover, .foot-links a:hover,
  .back:hover, .play-btn:hover, .doc-link:hover { transform: translateY(-2px); }
  .btn:active, .nav a:active, .langs button:active, .theme:active, .logo:active, .faq-item:active,
  .foot-links a:active, .back:active, .play-btn:active, .doc-link:active { transform: translateY(0) scale(.98); }
  .hl { animation: hl-sweep 7s linear infinite; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ------------------------------------------------------------------ breakpoints */
@media (min-width: 600px) {
  .wrap { padding: 0 24px; }
  .g4, .g3 { grid-template-columns: 1fr 1fr; }
  .tips { grid-template-columns: 1fr 1fr; gap: 22px 28px; }
  .safety { padding: 40px; }
  .doc-card { padding: 44px 48px; }
  .del-way { padding: 24px; }
  .del-list li.kv { grid-template-columns: 1fr minmax(32%, auto); gap: 24px; align-items: baseline; }
  .del-list li.kv .v { text-align: right; }
  .cta-band { padding: 56px 40px; }
  .foot-grid { grid-template-columns: 1fr auto; align-items: start; }
}
@media (min-width: 760px) {
  .del-ways { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .nav { display: flex; }
  .hero { padding: 72px 0 88px; }
  .hero-grid { grid-template-columns: 1.1fr .9fr; gap: 56px; }
  .phone { justify-self: end; margin-right: 12px; }
  .sec { padding: 88px 0; }
  .g4 { grid-template-columns: repeat(4, 1fr); }
  .g3 { grid-template-columns: repeat(3, 1fr); }
  .brands { grid-template-columns: repeat(9, 1fr); }
  .faq-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; }
  .tips { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1200px) {
  .hero h1 { font-size: 68px; }
}
.br-apple{--tile:#E8E6E2;--brand:#000000}
.br-samsung{--tile:#EAEAF0;--brand:#1428A0}
.br-xiaomi{--tile:#FFF0E2;--brand:#1F2430}
.br-redmi{--tile:#FDE9E5;--brand:#E6212A}
.br-poco{--tile:#FEF8E2;--brand:#1F2430}
.br-honor{--tile:#E8E6E2;--brand:#000000}
.br-huawei{--tile:#FFE6E2;--brand:#FF0000}
.br-vivo{--tile:#EEEFF9;--brand:#415FFF}
.br-oppo{--tile:#ECF0E7;--brand:#2D683D}
.br-realme{--tile:#FDF7E2;--brand:#1F2430}
.br-tecno{--tile:#E8F0F7;--brand:#0070F0}
.br-infinix{--tile:#E8F6EA;--brand:#1F2430}
.br-google-pixel{--tile:#EEF2F8;--brand:#4285F4}
.br-oneplus{--tile:#FEE6E3;--brand:#F5010C}
.br-nokia{--tile:#E8EEF9;--brand:#005AFF}
.br-motorola{--tile:#FCE8E3;--brand:#E1140A}
.br-nothing{--tile:#E8E6E2;--brand:#000000}
.br-zte{--tile:#E8EFF2;--brand:#0066B3}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .br-apple{--tile:#121724;--brand:#F2F4F7}:root:not([data-theme="light"]) .br-samsung{--tile:#151D3E;--brand:#F2F4F7}:root:not([data-theme="light"]) .br-xiaomi{--tile:#1E2638;--brand:#FF6900}:root:not([data-theme="light"]) .br-redmi{--tile:#1E2638;--brand:#E6212A}:root:not([data-theme="light"]) .br-poco{--tile:#1E2638;--brand:#F7C600}:root:not([data-theme="light"]) .br-honor{--tile:#121724;--brand:#F2F4F7}:root:not([data-theme="light"]) .br-huawei{--tile:#1E2638;--brand:#FF0000}:root:not([data-theme="light"]) .br-vivo{--tile:#1C264D;--brand:#415FFF}:root:not([data-theme="light"]) .br-oppo{--tile:#19272E;--brand:#F2F4F7}:root:not([data-theme="light"]) .br-realme{--tile:#1E2638;--brand:#E5B800}:root:not([data-theme="light"]) .br-tecno{--tile:#12294B;--brand:#0070F0}:root:not([data-theme="light"]) .br-infinix{--tile:#123333;--brand:#00B25A}:root:not([data-theme="light"]) .br-google-pixel{--tile:#1C2C4B;--brand:#4285F4}:root:not([data-theme="light"]) .br-oneplus{--tile:#1E2638;--brand:#F5010C}:root:not([data-theme="light"]) .br-nokia{--tile:#12254D;--brand:#F2F4F7}:root:not([data-theme="light"]) .br-motorola{--tile:#1E2638;--brand:#E1140A}:root:not([data-theme="light"]) .br-nothing{--tile:#121724;--brand:#F2F4F7}:root:not([data-theme="light"]) .br-zte{--tile:#122741;--brand:#F2F4F7}}
:root[data-theme="dark"] .br-apple{--tile:#121724;--brand:#F2F4F7}:root[data-theme="dark"] .br-samsung{--tile:#151D3E;--brand:#F2F4F7}:root[data-theme="dark"] .br-xiaomi{--tile:#1E2638;--brand:#FF6900}:root[data-theme="dark"] .br-redmi{--tile:#1E2638;--brand:#E6212A}:root[data-theme="dark"] .br-poco{--tile:#1E2638;--brand:#F7C600}:root[data-theme="dark"] .br-honor{--tile:#121724;--brand:#F2F4F7}:root[data-theme="dark"] .br-huawei{--tile:#1E2638;--brand:#FF0000}:root[data-theme="dark"] .br-vivo{--tile:#1C264D;--brand:#415FFF}:root[data-theme="dark"] .br-oppo{--tile:#19272E;--brand:#F2F4F7}:root[data-theme="dark"] .br-realme{--tile:#1E2638;--brand:#E5B800}:root[data-theme="dark"] .br-tecno{--tile:#12294B;--brand:#0070F0}:root[data-theme="dark"] .br-infinix{--tile:#123333;--brand:#00B25A}:root[data-theme="dark"] .br-google-pixel{--tile:#1C2C4B;--brand:#4285F4}:root[data-theme="dark"] .br-oneplus{--tile:#1E2638;--brand:#F5010C}:root[data-theme="dark"] .br-nokia{--tile:#12254D;--brand:#F2F4F7}:root[data-theme="dark"] .br-motorola{--tile:#1E2638;--brand:#E1140A}:root[data-theme="dark"] .br-nothing{--tile:#121724;--brand:#F2F4F7}:root[data-theme="dark"] .br-zte{--tile:#122741;--brand:#F2F4F7}