/* ecomvision · дизайн-система v2 (8.11.2026)
   Одна сетка, одна типографика, одна навигация — в духе продуктовых страниц Apple.
   Шрифт: системный SF Pro на устройствах Apple, Inter Tight — на остальных.
   Сетка: текст ≤ 980 px, галереи ≤ 1200 px, поля 22 px на телефоне. */

@font-face { font-family: "Inter Tight"; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-tight-cyrillic-v9.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter Tight"; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-tight-latin-v9.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --page: #fbfbfd;
  --tile: #f5f5f7;
  --white: #ffffff;
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --ink-3: #86868b;
  --hair: rgba(0, 0, 0, 0.08);
  --link: #0066cc;
  --blue: #0071e3;
  --blue-hi: #0077ed;
  --night: #000000;
  --night-tile: #161617;
  --night-ink: #f5f5f7;
  --night-ink-2: #a1a1a6;
  --mint: #1f9d55;
  --text-w: 980px;
  --wide-w: 1200px;
  --gutter: max(22px, env(safe-area-inset-left));
  --r-tile: 28px;
  --r-card: 18px;
  --ease: cubic-bezier(0.28, 0.11, 0.32, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 64px; }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 17px/1.47059 var(--font);
  letter-spacing: -0.022em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.btn:focus-visible { border-radius: 980px; }
.isl__pill:focus-visible { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; z-index: 100; background: var(--white); padding: 8px 12px; border-radius: 8px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--text-w)); margin: 0 auto; }
.wrap--wide { width: min(100% - 2 * var(--gutter), var(--wide-w)); margin: 0 auto; }
.center { text-align: center; }

/* ── Типографика ─────────────────────────────────────────────────────── */
.t-hero { font: 600 clamp(44px, 6vw, 80px)/1.05 var(--font-display); letter-spacing: -0.015em; margin: 0; }
.t-section { font: 600 clamp(36px, 5.2vw, 64px)/1.06 var(--font-display); letter-spacing: -0.009em; margin: 0; }
.t-head { font: 600 clamp(28px, 3.4vw, 40px)/1.1 var(--font-display); letter-spacing: -0.004em; margin: 0; }
.t-tile { font: 600 clamp(24px, 2.5vw, 32px)/1.125 var(--font-display); letter-spacing: 0.004em; margin: 0; }
.t-eyebrow { font: 600 clamp(19px, 1.8vw, 24px)/1.17 var(--font-display); letter-spacing: 0.009em; margin: 0 0 8px; }
.t-lead { font: 400 clamp(19px, 1.9vw, 24px)/1.33 var(--font-display); letter-spacing: 0.009em; color: var(--ink-2); margin: 16px 0 0; }
.t-lead b, .t-body b { color: var(--ink); font-weight: 600; }
.t-body { font-size: 17px; line-height: 1.47; color: var(--ink-2); margin: 12px 0 0; }
.t-small { font-size: 14px; line-height: 1.43; color: var(--ink-2); letter-spacing: -0.016em; }
.t-fine { font-size: 12px; line-height: 1.34; color: var(--ink-2); letter-spacing: -0.01em; }
.grad { background: linear-gradient(90deg, #2f6fe4 0%, #1f9d8a 55%, #33a067 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── Кнопки ──────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 11px 22px;
  border-radius: 980px; background: var(--blue); color: #fff; font: 400 17px/1.18 var(--font); letter-spacing: -0.022em;
  border: 0; cursor: pointer; transition: background 0.2s var(--ease), transform 0.2s var(--ease); }
.btn:hover { background: var(--blue-hi); text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn--ghost { background: transparent; color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.btn--ghost:hover { background: var(--blue); color: #fff; }
.btn--dark { background: var(--ink); }
.btn--dark:hover { background: #000; }
.btn--sm { min-height: 28px; padding: 4px 12px; font-size: 12px; letter-spacing: -0.01em; }
.more { font-size: 17px; color: var(--link); white-space: nowrap; }
.more::after { content: "›"; display: inline-block; margin-left: 4px; transform: translateY(-1px) scale(1.15); }
.ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; margin-top: 28px; }

/* ── Общая полоса (глобальная навигация) ─────────────────────────────── */
.gnav { position: relative; z-index: 50; height: 44px; background: rgba(251, 251, 253, 0.84);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.gnav__in { height: 100%; width: min(100% - 2 * var(--gutter), var(--text-w)); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.gnav__logo { display: flex; align-items: center; gap: 7px; color: var(--ink); font: 600 14px/1 var(--font); letter-spacing: -0.01em; }
.gnav__logo img { width: 18px; height: 18px; border-radius: 5px; }
.gnav__logo:hover { text-decoration: none; }
.gnav__links { display: flex; gap: 34px; margin: 0; padding: 0; list-style: none; }
.gnav__links a, .gnav__lang a, .gnav__lang span { color: var(--ink); opacity: 0.8; font-size: 12px; letter-spacing: -0.01em; transition: opacity 0.2s; }
.gnav__links a:hover, .gnav__lang a:hover { opacity: 1; text-decoration: none; }
.gnav__links a[aria-current] { opacity: 1; font-weight: 600; }
.gnav__lang { display: flex; gap: 10px; align-items: center; }
.gnav__lang span { opacity: 1; font-weight: 600; }
.gnav__menu { display: none; width: 44px; height: 44px; margin-right: -12px; border: 0; background: none; cursor: pointer; position: relative; }
.gnav__menu i { position: absolute; left: 15px; width: 16px; height: 1.5px; background: var(--ink); border-radius: 1px; transition: transform 0.3s var(--ease); }
.gnav__menu i:first-child { top: 18px; } .gnav__menu i:last-child { top: 25px; }
.gnav.is-open .gnav__menu i:first-child { transform: translateY(3.5px) rotate(45deg); }
.gnav.is-open .gnav__menu i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.gsheet { display: none; }
@media (max-width: 833px) {
  .gnav__links, .gnav__lang { display: none; }
  .gnav__menu { display: block; }
  .gsheet { display: block; position: fixed; inset: 44px 0 0; z-index: 49; background: rgba(251, 251, 253, 0.98);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); padding: 20px var(--gutter);
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s; }
  .gnav.is-open + .gsheet { opacity: 1; visibility: visible; transform: none; }
  .gsheet a { display: block; color: var(--ink); font: 600 28px/1.6 var(--font-display); letter-spacing: 0.007em; }
  .gsheet a:hover { text-decoration: none; }
  .gsheet .gsheet__lang { margin-top: 24px; font: 400 17px/1.6 var(--font); color: var(--ink-2); }
  .gsheet .gsheet__lang a { display: inline; font: inherit; color: var(--link); margin-right: 16px; }
}

/* ── Полоса продукта (локальная навигация, липкая) ───────────────────── */
.lnav { position: sticky; top: 0; z-index: 40; height: 52px; background: rgba(251, 251, 253, 0.8);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hair); }
.lnav__in { height: 100%; width: min(100% - 2 * var(--gutter), var(--text-w)); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lnav__title { display: flex; align-items: center; gap: 10px; color: var(--ink); font: 600 21px/1 var(--font-display); letter-spacing: 0.011em; white-space: nowrap; }
.lnav__title img { width: 28px; height: 28px; border-radius: 7px; }
.lnav__title:hover { text-decoration: none; }
.lnav__menu { display: flex; align-items: center; gap: 24px; }
.lnav__links { display: flex; gap: 24px; margin: 0; padding: 0; list-style: none; }
.lnav__links a { color: var(--ink); font-size: 12px; letter-spacing: -0.01em; opacity: 0.88; }
.lnav__links a[aria-current] { opacity: 0.5; }
.lnav__links a:hover { color: var(--link); text-decoration: none; opacity: 1; }
.lnav__toggle { display: none; width: 34px; height: 34px; border: 0; background: none; cursor: pointer; color: var(--ink); }
.lnav__toggle svg { transition: transform 0.3s var(--ease); }
.lnav.is-open .lnav__toggle svg { transform: rotate(180deg); }
@media (max-width: 833px) {
  .lnav__title { font-size: 19px; }
  .lnav__title img { width: 24px; height: 24px; }
  .lnav__menu { gap: 6px; }
  .lnav__toggle { display: grid; place-items: center; }
  .lnav__links { position: absolute; left: 0; right: 0; top: 52px; flex-direction: column; gap: 0;
    padding: 6px var(--gutter) 18px; background: var(--page); box-shadow: 0 18px 30px -24px rgba(0, 0, 0, 0.35);
    border-bottom: 1px solid var(--hair); opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s; }
  .lnav.is-open .lnav__links { opacity: 1; visibility: visible; transform: none; }
  .lnav__links a { display: block; padding: 11px 0; font-size: 17px; border-bottom: 1px solid var(--hair); opacity: 1; }
  .lnav__links li:last-child a { border-bottom: 0; }
}

/* ── Устройства ───────────────────────────────────────────────────────
   iPhone: титановая кромка → чёрная рамка → экран с радиусом 13,7 % и островом.
   Размер задаёт --w (ширина устройства); всё остальное от неё. */
.iphone { --w: 300px; position: relative; width: var(--w); flex: none; border-radius: calc(var(--w) * 0.19);
  padding: calc(var(--w) * 0.012);
  background: linear-gradient(140deg, #d1d1d6 0%, #8e8e93 18%, #48484a 42%, #2c2c2e 60%, #8e8e93 86%, #c7c7cc 100%);
  box-shadow: 0 calc(var(--w) * 0.1) calc(var(--w) * 0.22) calc(var(--w) * -0.08) rgba(0, 0, 0, 0.2),
              0 calc(var(--w) * 0.02) calc(var(--w) * 0.05) calc(var(--w) * -0.02) rgba(0, 0, 0, 0.14); }
.iphone__body { border-radius: calc(var(--w) * 0.178); padding: calc(var(--w) * 0.032); background: #050505;
  box-shadow: inset 0 0 0 calc(var(--w) * 0.004) #2a2a2c; }
.iphone__screen { position: relative; overflow: hidden; border-radius: calc(var(--w) * 0.145); background: #000; aspect-ratio: 1206 / 2622; }
.iphone__screen img { width: 100%; height: 100%; object-fit: cover; }
.iphone__screen::after { content: ""; position: absolute; top: calc(var(--w) * 0.027); left: 50%; transform: translateX(-50%);
  width: calc(var(--w) * 0.29); height: calc(var(--w) * 0.086); border-radius: 999px; background: #000; }
.ipad { --w: 520px; position: relative; width: var(--w); flex: none; border-radius: calc(var(--w) * 0.075); padding: calc(var(--w) * 0.008);
  background: linear-gradient(140deg, #e5e5ea, #a1a1a6 30%, #636366 60%, #c7c7cc);
  box-shadow: 0 calc(var(--w) * 0.12) calc(var(--w) * 0.2) calc(var(--w) * -0.08) rgba(0, 0, 0, 0.28); }
.ipad__body { border-radius: calc(var(--w) * 0.068); padding: calc(var(--w) * 0.03); background: #050505; }
.ipad__screen { overflow: hidden; border-radius: calc(var(--w) * 0.035); aspect-ratio: 1400 / 2132; }
.ipad__screen img { width: 100%; height: 100%; object-fit: cover; }

/* ── Секции ──────────────────────────────────────────────────────────── */
.section { padding: clamp(80px, 11vw, 150px) 0; }
.section--tight { padding: clamp(60px, 8vw, 110px) 0; }
.section--tile { background: var(--tile); }
.section--white { background: var(--white); }
.section--night { background: var(--night); color: var(--night-ink); }
.section--night .t-lead, .section--night .t-body { color: var(--night-ink-2); }
.section--night .t-lead b, .section--night .t-body b { color: var(--night-ink); }
.section--night a { color: #2997ff; }
.section--cont { padding-top: 0 !important; }
.head { max-width: 820px; margin: 0 auto; text-align: center; }
.head--left { margin: 0; text-align: left; }

/* Hero */
.hero { padding: clamp(40px, 5vw, 64px) 0 0; overflow: hidden; background: linear-gradient(180deg, var(--page) 0%, var(--page) 55%, var(--tile) 100%); }
.hero__icon { width: clamp(72px, 7vw, 92px); margin: 0 auto 18px; border-radius: 22.5%; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.35); }
.hero__name { font: 600 clamp(21px, 2vw, 26px)/1.1 var(--font-display); margin: 0 0 8px; }
.hero .wrap { width: min(100% - 2 * var(--gutter), 1100px); }
.hero .t-lead { max-width: 760px; margin-left: auto; margin-right: auto; }
.hero__price { margin-top: 18px; }
.stage { position: relative; display: flex; justify-content: center; align-items: flex-end; margin-top: clamp(40px, 4.5vw, 64px);
  height: clamp(400px, 46vw, 620px); }
.stage .iphone { position: absolute; bottom: calc(var(--w) * -0.58); }
.stage .iphone--c { --w: clamp(250px, 30vw, 380px); z-index: 3; }
.stage .iphone--l, .stage .iphone--r { --w: clamp(210px, 25.5vw, 320px); z-index: 2; bottom: calc(var(--w) * -0.78); }
.stage .iphone--l { right: calc(50% + clamp(250px, 30vw, 380px) * 0.18); transform: rotate(-4deg); }
.stage .iphone--r { left: calc(50% + clamp(250px, 30vw, 380px) * 0.18); transform: rotate(4deg); }
@media (max-width: 640px) {
  .stage { height: 470px; }
  .stage .iphone--c { --w: 236px; bottom: -80px; }
  .stage .iphone--l, .stage .iphone--r { --w: 196px; bottom: -150px; }
  .stage .iphone--l { right: calc(50% + 34px); }
  .stage .iphone--r { left: calc(50% + 34px); }
}

/* Главное: плитки */
.bento { display: grid; gap: 20px; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 64px); }
.tile { position: relative; overflow: hidden; border-radius: var(--r-tile); background: var(--white); padding: clamp(28px, 3.2vw, 44px);
  min-height: 420px; display: flex; flex-direction: column; }
.section--white .tile { background: var(--tile); }
.tile--6 { grid-column: span 6; } .tile--4 { grid-column: span 4; } .tile--3 { grid-column: span 3; } .tile--2 { grid-column: span 2; }
.tile--night { background: #000 !important; color: var(--night-ink); }
.tile--night .t-body { color: var(--night-ink-2); }
.tile__kicker { font: 600 14px/1.3 var(--font); letter-spacing: -0.01em; color: var(--ink-2); margin: 0 0 10px; }
.tile--night .tile__kicker { color: var(--night-ink-2); }
.tile__art { margin-top: auto; padding-top: 28px; display: flex; justify-content: center; }
.tile__art--bleed { margin-left: calc(-1 * clamp(28px, 3.2vw, 44px)); margin-right: calc(-1 * clamp(28px, 3.2vw, 44px)); margin-bottom: calc(-1 * clamp(28px, 3.2vw, 44px)); }
.tile .iphone { --w: 230px; margin-bottom: -170px; }
.tile .mac { margin-bottom: calc(-1 * clamp(28px, 3.2vw, 44px)); }
.tile__art:not(:has(.iphone, .mac)) { margin-bottom: auto; }
.bignum { font: 600 clamp(64px, 10vw, 140px)/1 var(--font-display); letter-spacing: -0.03em; margin: 18px 0 0; font-variant-numeric: tabular-nums; }
.bignum small { font-size: 0.42em; letter-spacing: 0; color: var(--ink-2); font-weight: 500; }
.calc { margin: 22px 0 0; padding: 0; list-style: none; max-width: 420px; font-size: 15px; color: var(--ink-2); }
.calc li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--hair); font-variant-numeric: tabular-nums; }
.calc li:last-child { border-bottom: 0; color: var(--ink); font-weight: 600; }
@media (max-width: 1068px) { .tile--2 { grid-column: span 3; } .tile--4 { grid-column: span 6; } }
@media (max-width: 734px) { .bento { gap: 14px; } .tile--2, .tile--3, .tile--4 { grid-column: span 6; } .tile { min-height: 0; } .tile .iphone { --w: 210px; } }

/* Уведомление iOS (нарисовано вёрсткой) */
.notif { position: relative; width: 100%; max-width: 360px; display: flex; gap: 11px; align-items: center; padding: 12px 14px; border-radius: 20px;
  background: rgba(245, 245, 247, 0.92); box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.3), inset 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  text-align: left; font-size: 14px; line-height: 1.3; }
.notif + .notif { margin-top: 10px; transform: scale(0.95); opacity: 0.65; }
.notif img { width: 34px; height: 34px; border-radius: 8px; flex: none; }
.notif div { min-width: 0; padding-right: 34px; font-size: 13px; }
.notif b { display: block; font-weight: 600; color: var(--ink); }
.notif span { color: var(--ink-2); }
.notif time { position: absolute; top: 12px; right: 14px; font-size: 11px; color: var(--ink-3); white-space: nowrap; }

/* Строка ввода (нарисована вёрсткой) */
.typer { width: min(100%, 380px); margin: 0 auto; padding: 16px 18px; border-radius: 22px; background: var(--white);
  box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.28), inset 0 0 0 0.5px rgba(0, 0, 0, 0.06); text-align: left; }
.typer__line { font-size: 19px; color: var(--ink); }
.typer__line::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -0.15em; background: var(--blue); animation: caret 1.1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chips span { padding: 5px 10px; border-radius: 999px; background: var(--tile); font-size: 13px; color: var(--ink-2); }
.chips span:first-child { color: var(--ink); }

/* Сплит: текст + устройство */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.split--flip .split__media { order: -1; }
.split__media { display: flex; justify-content: center; align-items: flex-start; gap: 24px; }
.split__media .iphone { --w: clamp(240px, 24vw, 320px); }
.split__media .iphone + .iphone { margin-top: 80px; }
.split__media:has(.iphone + .iphone) .iphone { --w: clamp(200px, 19vw, 262px); }
.points { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 18px; }
.points li { padding-left: 34px; position: relative; color: var(--ink-2); }
.points li b { color: var(--ink); font-weight: 600; }
.section--night .points li { color: var(--night-ink-2); }
.section--night .points li b { color: var(--night-ink); }
.points li::before { content: ""; position: absolute; left: 2px; top: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat; }
@media (max-width: 834px) {
  .split { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }
  .split__media .iphone { --w: min(64vw, 270px); }
  .split__media:has(.iphone + .iphone) .iphone { --w: min(42vw, 230px); }
  .split__media .iphone + .iphone { margin-top: 50px; }
}

/* Везде */
.everywhere { display: flex; justify-content: center; align-items: flex-end; gap: 0; margin-top: clamp(48px, 6vw, 72px); }
.everywhere .ipad { --w: clamp(300px, 44vw, 560px); }
.everywhere .iphone { --w: clamp(150px, 17vw, 220px); margin-left: calc(var(--w) * -0.42); margin-bottom: calc(var(--w) * -0.06); z-index: 2; }
.platforms { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; margin-top: 48px; }
.platforms div { text-align: center; }
.platforms b { display: block; font: 600 21px/1.2 var(--font-display); }
.platforms span { font-size: 14px; color: var(--ink-2); }

/* Приватность: три колонки */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.trio div { padding: 32px; border-radius: var(--r-tile); background: var(--white); }
.section--white .trio div { background: var(--tile); }
.trio svg { width: 40px; height: 40px; color: var(--blue); margin-bottom: 18px; }
.trio h3 { font: 600 21px/1.2 var(--font-display); margin: 0; }
.trio p { margin: 8px 0 0; font-size: 15px; color: var(--ink-2); }
@media (max-width: 734px) { .trio { grid-template-columns: 1fr; } }

/* Цены */
.prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(40px, 5vw, 64px); align-items: stretch; }
.price { display: flex; flex-direction: column; padding: 36px 32px 32px; border-radius: var(--r-tile); background: var(--white); position: relative; }
.price--hero { box-shadow: 0 0 0 2px var(--blue); }
.price__flag { position: absolute; top: -12px; left: 32px; padding: 4px 12px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 600; }
.price h3 { font: 600 24px/1.2 var(--font-display); margin: 0; }
.price__sum { font: 600 48px/1 var(--font-display); letter-spacing: -0.02em; margin: 18px 0 0; }
.price__sum small { font-size: 17px; font-weight: 400; color: var(--ink-2); letter-spacing: -0.02em; }
.price__alt { font-size: 14px; color: var(--ink-2); margin: 8px 0 0; min-height: 20px; }
.price ul { list-style: none; padding: 0; margin: 24px 0 28px; display: grid; gap: 11px; font-size: 15px; line-height: 1.4; color: var(--ink); }
.price li { padding-left: 26px; position: relative; }
.price li::before { content: ""; position: absolute; left: 1px; top: 0.36em; width: 11px; height: 6px; border-left: 2px solid var(--mint); border-bottom: 2px solid var(--mint); transform: rotate(-45deg); }
.price__go { margin-top: auto; display: grid; gap: 10px; }
.price__go .btn { width: 100%; }
.price__note { text-align: center; font-size: 12px; color: var(--ink-3); margin-top: 10px; }
.prices-fine { max-width: 760px; margin: 36px auto 0; text-align: center; }
@media (max-width: 960px) { .prices { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; } }

/* Вопросы */
.faq { max-width: var(--text-w); margin: 48px auto 0; border-top: 1px solid var(--hair); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 24px 0; font: 600 clamp(19px, 1.9vw, 24px)/1.25 var(--font-display); letter-spacing: 0.009em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background:
  linear-gradient(var(--ink-2), var(--ink-2)) center/14px 1.5px no-repeat, linear-gradient(var(--ink-2), var(--ink-2)) center/1.5px 14px no-repeat;
  transition: transform 0.3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: -8px 0 24px; max-width: 760px; color: var(--ink-2); }

/* Финал */
.final { text-align: center; }
.final .hero__icon { margin-bottom: 26px; }

/* Подвал */
.foot { background: var(--tile); color: var(--ink-2); font-size: 12px; line-height: 1.34; letter-spacing: -0.01em; }
.foot__in { width: min(100% - 2 * var(--gutter), var(--text-w)); margin: 0 auto; padding: 20px 0 32px; }
.foot__notes { padding-bottom: 16px; border-bottom: 1px solid #d2d2d7; }
.foot__notes p { margin: 0 0 8px; }
.foot__crumbs { display: flex; align-items: center; gap: 8px; padding: 14px 0; border-bottom: 1px solid #d2d2d7; }
.foot__crumbs a { color: var(--ink); }
.foot__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 20px 0; border-bottom: 1px solid #d2d2d7; }
.foot__cols h4 { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--ink); }
.foot__cols a { display: block; color: var(--ink-2); padding: 3px 0; }
.foot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 16px; }
.foot__legal a { color: var(--ink-2); }
@media (max-width: 734px) { .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Появление при прокрутке — только с JS, без JS всё видно сразу */
.js .rise { opacity: 0; transform: translateY(32px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.js .rise.is-in { opacity: 1; transform: none; }
.js .rise[data-d="1"] { transition-delay: 0.08s; } .js .rise[data-d="2"] { transition-delay: 0.16s; } .js .rise[data-d="3"] { transition-delay: 0.24s; }
.js .stage .iphone { transition: transform 1.2s var(--ease), opacity 1.2s var(--ease); }
.js .stage:not(.is-in) .iphone--c { transform: translateY(60px); opacity: 0; }
.js .stage:not(.is-in) .iphone--l { transform: translate(40px, 80px) rotate(0deg); opacity: 0; }
.js .stage:not(.is-in) .iphone--r { transform: translate(-40px, 80px) rotate(0deg); opacity: 0; }
@media print { .js .rise, .js .stage .iphone { opacity: 1 !important; transform: none !important; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rise, .js .stage .iphone { transition: none; opacity: 1; transform: none; }
  .stage .iphone--l { transform: rotate(-4deg) !important; } .stage .iphone--r { transform: rotate(4deg) !important; }
  .typer__line::after, .inputline::after { animation: none; }
}

.tile .platforms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; margin: 0; width: 100%; }
.tile .platforms div { text-align: left; padding-top: 12px; border-top: 1px solid var(--hair); }

/* ── Главная студии: плитки приложений, принцип, ролик ─────────────────── */
.products { --art-h: clamp(300px, 26vw, 370px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0 12px; }
.product { position: relative; overflow: hidden; padding: 56px 28px 0; text-align: center;
  display: flex; flex-direction: column; align-items: center; background: var(--white); }
.product--tile { background: var(--tile); }
.product--night { background: #000; color: var(--night-ink); }
.product--night .product__tag, .product--night .product__meta { color: var(--night-ink-2); }
.product--night a { color: #2997ff; }
.product__icon { width: 64px; border-radius: 22.5%; margin-bottom: 14px; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.4); }
.product--night .product__icon { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 14px 34px -12px rgba(155, 92, 240, 0.6); }
.product h2 { font: 600 clamp(32px, 3.6vw, 48px)/1.08 var(--font-display); letter-spacing: -0.003em; margin: 0; }
.product__tag { font: 400 clamp(19px, 1.8vw, 24px)/1.25 var(--font-display); color: var(--ink-2); margin: 8px 0 0; max-width: 520px; }
.product__links { display: flex; gap: 12px 28px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.product__meta { font-size: 13px; color: var(--ink-2); margin: 12px 0 0; }
/* сцена (--art-h) одной высоты во всех плитках, поэтому верх устройств стоит на одной линии */
.product__art { text-align: left; margin-top: auto; padding-top: 40px; height: calc(var(--art-h) + 40px); display: flex; justify-content: center; align-items: flex-start; width: 100%; }
.product__art .iphone { --w: clamp(220px, 20vw, 280px); }
.product__art .mac { width: min(100%, 600px); flex: none; }
.product__art .mac__screen { aspect-ratio: auto; height: var(--art-h); }
.product__art .macwin { width: min(100%, 520px); flex: none; font-size: clamp(9.5px, 0.95vw, 13px); min-height: calc(var(--art-h) + 40px); }
.product__art .macwin__body { min-height: 0; }
.product__art .hud { margin-top: 0.3em; }
@media (max-width: 834px) { .products { grid-template-columns: 1fr; padding: 0; gap: 12px; --art-h: 300px; } .product { padding-top: 48px; } }
.rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 48px; margin-top: 64px; }
.rules h3 { font: 600 21px/1.24 var(--font-display); margin: 0; }
.rules p { margin: 8px 0 0; color: var(--ink-2); font-size: 17px; }
@media (max-width: 834px) { .rules { grid-template-columns: 1fr; gap: 28px; } }
.film { margin-top: clamp(40px, 5vw, 64px); border-radius: var(--r-tile); overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.film video { display: block; width: 100%; height: 100%; object-fit: cover; }
.product--night .btn, .section--night .btn, .tile--night .btn { color: #fff; }

/* ── Остров: переключатель приложений в общей полосе ─────────────────────
   Подпись сайта. В покое — чёрная капсула с иконками четырёх приложений
   (текущее подсвечено). Наведение, фокус или касание раскрывают её одним
   телом в панель со списком. Полосы прогресса нет: остров только для перехода. */
.isl { position: absolute; left: 50%; top: 6px; z-index: 60; transform: translateX(-50%);
  width: 132px; border-radius: 16px; background: #000; color: #f5f5f7; overflow: hidden;
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.06), 0 6px 16px -8px rgba(0, 0, 0, 0.5);
  transition: width 0.42s cubic-bezier(0.32, 0.72, 0, 1), border-radius 0.42s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.42s; }
.isl__pill { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 32px; padding: 0 12px;
  border: 0; background: none; color: inherit; cursor: pointer; }
.isl__pill img { width: 18px; height: 18px; border-radius: 5px; opacity: 0.55; transition: opacity 0.2s, transform 0.3s; }
.isl__pill img.on { opacity: 1; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85); }
.isl__pill svg { flex: none; margin-left: 2px; opacity: 0.6; transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1); }
.isl__drop { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.42s cubic-bezier(0.32, 0.72, 0, 1); }
.isl__drop > div { min-height: 0; overflow: hidden; }
.isl__list { padding: 4px 8px 6px; opacity: 0; transition: opacity 0.2s; }
.isl__item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 14px; color: #f5f5f7; }
.isl__item:hover, .isl__item:focus-visible { background: rgba(255, 255, 255, 0.09); text-decoration: none; outline: none; }
.isl__item[aria-current] { background: rgba(255, 255, 255, 0.06); }
.isl__item img { width: 34px; height: 34px; border-radius: 9px; flex: none; }
.isl__item span { flex: 1; min-width: 0; line-height: 1.25; }
.isl__item b { display: block; font-size: 15px; font-weight: 600; }
.isl__item small { display: block; font-size: 12px; color: #a1a1a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.isl__item em { flex: none; font-style: normal; font-size: 11px; font-weight: 600; color: #a1a1a6; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); }
.isl__item em.go { color: #30d158; background: rgba(48, 209, 88, 0.14); }
.isl__foot { display: flex; justify-content: space-between; gap: 12px; margin: 4px 2px 0; padding: 10px 10px 4px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 12px; color: #a1a1a6; }
.isl__foot a { color: #f5f5f7; opacity: 0.8; margin-left: 12px; }
.isl__foot a:hover { opacity: 1; text-decoration: none; }
.isl__foot b { color: #f5f5f7; font-weight: 600; margin-left: 12px; }
.isl.is-open { width: min(420px, calc(100vw - 24px)); border-radius: 26px; box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.08), 0 30px 60px -20px rgba(0, 0, 0, 0.55); }
.isl.is-open .isl__drop { grid-template-rows: 1fr; }
.isl.is-open .isl__list { opacity: 1; transition: opacity 0.3s 0.12s; }
.isl.is-open .isl__pill img { opacity: 1; }
.isl.is-open .isl__pill svg { transform: rotate(180deg); }
@media (hover: hover) {
  .isl:hover, .isl:focus-within { width: min(420px, calc(100vw - 24px)); border-radius: 26px; box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.08), 0 30px 60px -20px rgba(0, 0, 0, 0.55); }
  .isl:hover .isl__drop, .isl:focus-within .isl__drop { grid-template-rows: 1fr; }
  .isl:hover .isl__list, .isl:focus-within .isl__list { opacity: 1; transition: opacity 0.3s 0.12s; }
  .isl:hover .isl__pill img { opacity: 1; }
  .isl:hover .isl__pill svg, .isl:focus-within .isl__pill svg { transform: rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) { .isl, .isl__drop, .isl__list { transition: none !important; } }
/* с островом верхняя полоса держит только логотип слева и язык справа */
.gnav--isl .gnav__links, .gnav--isl .gnav__menu { display: none !important; }
.gnav--isl .gnav__lang { display: flex !important; }
@media (max-width: 520px) { .gnav--isl .gnav__lang { display: none !important; } .gnav--isl .gnav__logo span { display: none; } }

/* ── Тема «Дел» и мини-список ─────────────────────────────────────────── */
.theme-dela { --blue: #058551; --blue-hi: #04935a; --link: #047a4a; }
.theme-dela .grad { background: linear-gradient(90deg, #1d78a8 0%, #12907a 50%, #2aa868 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.theme-dela .points li::before { background-color: #058551; }
.theme-dela .tile--night .t-body b { color: #fff; }
.mini { width: 100%; max-width: 420px; margin: 0 auto; padding: 18px 20px 8px; border-radius: 22px; background: var(--white); text-align: left;
  box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.25), inset 0 0 0 0.5px rgba(0, 0, 0, 0.06); }
.section--tile .tile .mini, .tile .mini { background: var(--tile); box-shadow: none; }
.mini__h { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 600 17px/1.2 var(--font-display); }
.mini__h span { font-size: 13px; color: var(--ink-3); font-weight: 500; }
.mini__h svg { flex: none; }
.mini__row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--hair); }
.mini__row i { flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #aeaeb2; }
.mini__row i.done { background: #058551 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.6 2.6L13 6.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; box-shadow: none; }
.mini__row b { display: block; font-size: 15px; font-weight: 500; color: var(--ink); }
.mini__row small { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.mini__row .tag { display: inline-block; margin-top: 5px; padding: 1px 7px; border-radius: 6px; font-size: 11px; color: #a1531a; background: #fbe8d9; }
.ring { width: 56px; height: 56px; }
/* проекты по областям: круговой прогресс как в приложении */
.mini__row i.pie { box-shadow: inset 0 0 0 1.5px var(--c, #058551); background: conic-gradient(var(--c, #058551) var(--p, 40%), transparent 0) center/12px 12px no-repeat; background-clip: content-box; padding: 3px; }
.mini__row em { margin-left: auto; align-self: center; font-style: normal; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mini__row > div { min-width: 0; }
/* виджеты экрана «Домой» (вёрсткой) */
.widgets { display: flex; justify-content: center; gap: 14px; width: 100%; }
.wdg { flex: 0 1 160px; min-width: 0; aspect-ratio: 1; display: flex; flex-direction: column; padding: 14px 14px 12px; border-radius: 24px; background: var(--tile); text-align: left; }
.wdg p { margin: 0; }
.wdg__h { display: flex; justify-content: space-between; align-items: baseline; font: 600 14px/1.2 var(--font); color: var(--blue); margin-bottom: 4px !important; }
.wdg__h span { color: var(--ink-3); font-weight: 500; }
.wdg__row { display: block; margin-top: 8px !important; padding-left: 20px; position: relative; font-size: 13px; line-height: 1.25; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wdg__row i { position: absolute; left: 0; top: 1px; width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 0 0 1.3px #aeaeb2; }
.wdg--add { align-items: center; justify-content: center; gap: 10px; text-align: center; }
.wdg--add img { width: 40px; height: 40px; border-radius: 10px; }
.wdg--add b { font: 600 14px/1.2 var(--font); color: var(--ink); }


/* ══ Тёмная тема (TopHalo) ══════════════════════════════════════════════ */
.theme-dark { --page: #000; --tile: #0d0d0f; --white: #1c1c1e; --ink: #f5f5f7; --ink-2: #a1a1a6; --ink-3: #86868b;
  --hair: rgba(255, 255, 255, 0.12); --link: #c38bff; --blue: #9b5cf0; --blue-hi: #a970ff; color-scheme: dark; }
.theme-dark .lnav { background: rgba(22, 22, 23, 0.82); border-bottom-color: rgba(255, 255, 255, 0.1); }
.theme-dark .lnav__links a, .theme-dark .lnav__title, .theme-dark .lnav__toggle { color: #f5f5f7; }
@media (max-width: 833px) { .theme-dark .lnav__links { background: #161617; } }
.theme-dark .hero { background: radial-gradient(90% 60% at 50% 100%, rgba(155, 92, 240, 0.22), transparent 70%), #000; }
.theme-dark .grad { background: linear-gradient(90deg, #d7b4ff 0%, #b66bff 45%, #7f5cff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.theme-dark .points li::before { background-color: #9b5cf0; }
.theme-dark .foot { background: #0d0d0f; }
.theme-dark .foot__notes, .theme-dark .foot__crumbs, .theme-dark .foot__cols { border-color: #2c2c2e; }
.theme-dark .foot__crumbs a, .theme-dark .foot__cols h4 { color: #f5f5f7; }
.theme-dark .section--white { background: #000; }
.theme-dark .trio div, .theme-dark .section--white .trio div { background: #1c1c1e; }
.theme-dark .btn--ghost { color: #f5f5f7; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.theme-dark .btn--ghost:hover { background: #f5f5f7; color: #000; }
.theme-dark .hero__icon { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 20px 60px -10px rgba(155, 92, 240, 0.55); }

/* ══ Экран Mac с вырезом и острова TopHalo (всё в em) ═══════════════════
   Масштаб содержимого экрана берётся от ширины самого экрана (container query), а не окна:
   --span — сколько em укладывается в ширину экрана. 74 — весь экран (первый экран TopHalo),
   44 — крупный план у выреза (плитки, состояния, Shelf), 34 — узкая полоска в маленькой плитке.
   Пункты строки меню в <i> на крупном плане прячутся: рядом с островом им нет места. */
.mac { --span: 74; position: relative; width: 100%; max-width: 1040px; margin: 0 auto; container-type: inline-size;
  font-size: clamp(6.5px, 1.05vw, 14px); padding: 0.9em 0.9em 0; border-radius: 2em 2em 0 0; background: #0b0b0d;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 -2px 60px -10px rgba(155, 92, 240, 0.35); }
.mac__screen { position: relative; overflow: hidden; aspect-ratio: 16 / 7.4; border-radius: 1.2em 1.2em 0 0; font-size: calc(100cqi / var(--span));
  background: radial-gradient(70% 90% at 70% 10%, #6a35c2 0%, transparent 60%), radial-gradient(60% 80% at 15% 90%, #3a1c78 0%, transparent 65%),
              linear-gradient(180deg, #1a0d33 0%, #0c0618 100%); }
.mac--tall .mac__screen { aspect-ratio: 16 / 9.6; }
.mac--zoom { --span: 44; font-size: clamp(6px, 0.8vw, 11px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 -2px 40px -14px rgba(155, 92, 240, 0.3); }
.mac--strip { --span: 34; font-size: clamp(6px, 0.7vw, 9px); }
.mac--strip .mac__screen { aspect-ratio: 16 / 8; }
.mac--fade { -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 62%, transparent 100%); }
.mac__bar { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; height: 2.3em; padding: 0 1.2em;
  font: 500 1em/1 var(--font); color: rgba(255, 255, 255, 0.88); letter-spacing: 0; background: rgba(0, 0, 0, 0.18); white-space: nowrap; }
.mac__bar span { display: flex; gap: 1.3em; align-items: center; } .mac__bar b { font-weight: 700; } .mac__bar i, .mac__bar em { font-style: normal; }
.mac--zoom .mac__bar i, .mac--strip .mac__bar i { display: none; }
@media (max-width: 734px) {
  .mac--hero { --span: 44; } .mac--hero .mac__bar i { display: none; }
  .mac--zoom { --span: 38; } .mac--zoom .mac__screen:has(.halo--open) .mac__bar > span { visibility: hidden; }
}
.mac__cursor { position: absolute; z-index: 3; left: 57%; top: 1.5em; width: 1.6em; height: 2.2em; filter: drop-shadow(0 0.15em 0.25em rgba(0, 0, 0, 0.5)); }
.halo { position: absolute; z-index: 2; top: 0; left: 50%; transform: translateX(-50%); background: #000; color: #f5f5f7;
  border-radius: 0 0 1.4em 1.4em; font-family: var(--font); letter-spacing: 0; }
.halo--notch { width: 13em; height: 2.3em; border-radius: 0 0 0.9em 0.9em; }
.halo--pill { top: 0.45em; border-radius: 999px !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0.4em 1em rgba(0, 0, 0, 0.45); }
.halo__wing--ok { color: #30d158; }
.halo--compact, .halo--peak { height: 2.3em; display: flex; align-items: center; justify-content: space-between; padding: 0 1em; border-radius: 0 0 1em 1em; }
.halo--compact { width: 19em; } .halo--peak { width: 23em; }
.halo__art { width: 1.5em; height: 1.5em; border-radius: 0.35em; background: linear-gradient(135deg, #b66bff, #5b2bd1); flex: none; }
.halo__art--lg { width: 4.4em; height: 4.4em; border-radius: 0.9em; position: relative; }
.halo__art--lg::after { content: ""; position: absolute; inset: 1.2em 1em 1.6em; border: 0.32em solid rgba(255, 255, 255, 0.9); border-bottom: 0; border-radius: 3em 3em 0 0; }
.eq { display: flex; gap: 0.18em; align-items: flex-end; height: 1.1em; }
.eq i { width: 0.22em; border-radius: 0.1em; background: #c38bff; }
.eq i:nth-child(1) { height: 45%; } .eq i:nth-child(2) { height: 100%; } .eq i:nth-child(3) { height: 65%; } .eq i:nth-child(4) { height: 85%; } .eq i:nth-child(5) { height: 35%; }
.halo__wing { display: flex; align-items: center; gap: 0.45em; font-size: 1.05em; font-weight: 600; }
.halo__wing--timer { color: #ff9f0a; font-variant-numeric: tabular-nums; }
.halo__wing small { font-size: 0.85em; color: #a1a1a6; font-weight: 500; }
.halo--open { width: 34em; padding: 3em 1.6em 1.2em; border-radius: 0 0 2.2em 2.2em; box-shadow: 0 2em 4em -1em rgba(0, 0, 0, 0.6); }
.halo__now { display: flex; align-items: center; gap: 1.1em; }
.halo__now div { flex: 1; min-width: 0; }
.halo__now b { display: block; font-size: 1.25em; font-weight: 600; }
.halo__now small { display: block; font-size: 1em; color: #a1a1a6; margin-top: 0.15em; }
.halo__prog { display: flex; align-items: center; gap: 0.8em; margin-top: 1.1em; font-size: 0.85em; color: #a1a1a6; font-variant-numeric: tabular-nums; }
.halo__prog i { flex: 1; height: 0.38em; border-radius: 1em; background: linear-gradient(90deg, #f5f5f7 0 46%, rgba(255, 255, 255, 0.22) 46% 100%); }
.halo__ctrl { display: flex; justify-content: space-between; align-items: center; margin-top: 0.9em; padding: 0 0.4em; }
.halo__ctrl svg { width: 1.5em; height: 1.5em; fill: #f5f5f7; } .halo__ctrl svg.lg { width: 2.1em; height: 2.1em; }
.halo__ctrl svg.dim { fill: #a1a1a6; width: 1.3em; height: 1.3em; }
.halo__dots { display: flex; justify-content: center; gap: 0.45em; margin-top: 0.9em; }
.halo__dots i { width: 0.45em; height: 0.45em; border-radius: 50%; background: rgba(255, 255, 255, 0.25); } .halo__dots i:first-child { background: #f5f5f7; }
.halo__shelf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8em; margin-top: 0.9em; }
.halo__file { border-radius: 0.9em; background: #1c1c1e; padding: 0.7em; text-align: center; font-size: 0.9em; }
.halo__file i { display: block; height: 3.6em; border-radius: 0.5em; margin-bottom: 0.5em; }
.halo__file small { display: block; color: #86868b; font-size: 0.85em; margin-top: 0.15em; }
.halo__head { display: flex; justify-content: space-between; font-size: 1em; } .halo__head span { color: #a1a1a6; }
.halo__ev { display: flex; gap: 0.8em; align-items: center; padding: 0.7em 0; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 1em; }
.halo__ev:first-of-type { border-top: 0; }
.halo__ev i { width: 0.3em; align-self: stretch; border-radius: 1em; }
.halo__ev div { flex: 1; } .halo__ev b { display: block; font-weight: 600; } .halo__ev small { color: #a1a1a6; }
.halo__ev time { color: #a1a1a6; font-variant-numeric: tabular-nums; }
.halo__join { padding: 0.35em 0.9em; border-radius: 1em; background: #30d158; color: #000; font-weight: 600; font-size: 0.9em; }
.states { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(40px, 5vw, 64px); }
.state .mac__screen { aspect-ratio: 16 / 7.6; }
.state h3 { font: 600 21px/1.2 var(--font-display); margin: 20px 0 6px; }
.state p { margin: 0; color: var(--ink-2); font-size: 15px; }
@media (max-width: 834px) { .states { grid-template-columns: 1fr; gap: 40px; max-width: 520px; margin-left: auto; margin-right: auto; } }

/* ══ Установка, контрольная сумма, характеристики, заметки об оплате ════ */
.steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(40px, 5vw, 56px); counter-reset: s; }
.steps3 div { position: relative; padding: 32px 28px 28px; border-radius: var(--r-tile); background: var(--white); counter-increment: s; }
.steps3 div::before { content: counter(s); display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 18px; border-radius: 50%;
  background: var(--blue); color: #fff; font: 600 15px/1 var(--font); }
.steps3 h3 { font: 600 21px/1.24 var(--font-display); margin: 0; }
.steps3 p { margin: 8px 0 0; font-size: 15px; color: var(--ink-2); }
@media (max-width: 734px) { .steps3 { grid-template-columns: 1fr; } }
.dl { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; margin-top: 40px; }
.sha { margin: 28px auto 0; max-width: 760px; padding: 18px 22px; border-radius: 18px; background: var(--white); font-size: 13px; color: var(--ink-2); text-align: left; }
.sha code { display: block; margin-top: 6px; font: 500 13px/1.5 ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink); word-break: break-all; user-select: all; }
.notes { max-width: 820px; margin: 28px auto 0; display: grid; gap: 14px; font-size: 15px; color: var(--ink-2); }
.notes b { color: var(--ink); font-weight: 600; }
.specs2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin: 48px 0 0; }
.specs2 div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--hair); font-size: 15px; }
.specs2 dt { color: var(--ink-2); } .specs2 dd { margin: 0; color: var(--ink); }
@media (max-width: 834px) { .specs2 { grid-template-columns: 1fr; } .specs2 div { grid-template-columns: 120px 1fr; } }
.onecard { max-width: 760px; margin: clamp(40px, 5vw, 56px) auto 0; padding: clamp(32px, 4vw, 48px); border-radius: var(--r-tile); background: var(--white);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.onecard .price__sum { margin-top: 6px; }
.onecard ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; font-size: 15px; }
.onecard li { padding-left: 26px; position: relative; } 
.onecard li::before { content: ""; position: absolute; left: 1px; top: 0.36em; width: 11px; height: 6px; border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg); }
.onecard .btn { margin-top: 22px; }
@media (max-width: 734px) { .onecard { grid-template-columns: 1fr; } }
.paynote { max-width: 760px; margin: 0 auto 32px; padding: 16px 20px; border-radius: 18px; background: #fdecec; color: #8a1c1c; font-size: 15px; }
.paynote b { display: block; margin-bottom: 4px; } .paynote p { margin: 0 0 8px; }

/* ══ Nota: окно Mac с вставленным текстом и подсказка диктовки ═══════════ */
.theme-nota { --blue: #2551a8; --blue-hi: #1f4796; --link: #2551a8; }
.theme-nota .grad { background: linear-gradient(90deg, #1d1d1f 0%, #2551a8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.theme-nota .points li::before { background-color: #2551a8; }
.macwin { position: relative; width: 100%; max-width: 860px; margin: 0 auto; font-size: clamp(10px, 1.05vw, 14px); border-radius: 1.2em; background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 3em 6em -2em rgba(0, 0, 0, 0.3); overflow: hidden; text-align: left; }
.macwin__bar { display: flex; align-items: center; gap: 0.6em; height: 3em; padding: 0 1.2em; border-bottom: 1px solid rgba(0, 0, 0, 0.06); background: #f6f6f8; font-size: 1em; color: #6e6e73; }
.macwin__bar::before { content: ""; width: 4.2em; height: 0.9em; flex: none;
  background: radial-gradient(circle at 0.45em 50%, #ff5f57 0.42em, transparent 0.45em), radial-gradient(circle at 2.05em 50%, #febc2e 0.42em, transparent 0.45em), radial-gradient(circle at 3.65em 50%, #28c840 0.42em, transparent 0.45em); }
.macwin__bar b { margin-left: auto; margin-right: auto; color: #1d1d1f; font-weight: 600; }
.macwin__body { padding: 1.6em 2em 2em; min-height: 18em; display: flex; flex-direction: column; gap: 0.8em; }
.bubble { max-width: 70%; padding: 0.7em 1em; border-radius: 1.2em; font-size: 1.15em; line-height: 1.35; background: #e9e9eb; color: #1d1d1f; }
.bubble--me { align-self: flex-end; background: #2551a8; color: #fff; }
.inputline { margin-top: 0.4em; display: block; padding: 0.75em 1em; border-radius: 1.4em; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); font-size: 1.15em; color: #1d1d1f; }
.inputline em { font-style: normal; color: #2551a8; font-weight: 700; }
.inputline .term { color: #2551a8; }
.inputline::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -0.2em; background: #2551a8; animation: caret 1.1s steps(1) infinite; }
.hud { position: relative; align-self: center; margin-top: auto; display: inline-flex; align-items: center; gap: 0.7em; padding: 0.6em 1.1em 0.6em 0.8em;
  border-radius: 2em; background: #000; color: #f5f5f7; font-size: 1em; box-shadow: 0 1em 2em -0.8em rgba(0, 0, 0, 0.5); }
.hud kbd { font: 600 0.9em/1 var(--font); padding: 0.35em 0.55em; border-radius: 0.5em; background: rgba(255, 255, 255, 0.14); }
.hud .eq i { background: #7fa6ee; }
.said { display: grid; gap: 0; max-width: 560px; margin: 0 auto; border-radius: 22px; background: var(--tile); padding: 6px 22px; font-size: 15px; }
.said div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--hair); }
.said div:first-child { border-top: 0; }
.said span { color: var(--ink-2); } .said code { font: 600 14px/1.4 ui-monospace, "SF Mono", Menlo, monospace; color: #2551a8; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.92em; }

/* ── Переключатель языка в общей полосе (8.11): капсула RU | EN, видна и на телефоне ── */
.gnav__lang { display: inline-flex !important; align-items: center; gap: 0 !important; padding: 2px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14); }
.gnav__lang a, .gnav__lang span { display: block; padding: 3px 9px; border-radius: 999px; font-size: 11px !important; font-weight: 600; line-height: 1.3;
  letter-spacing: 0.02em; opacity: 1 !important; color: var(--ink) !important; text-decoration: none !important; }
.gnav__lang a { color: #6e6e73 !important; }
.gnav__lang a:hover { color: var(--ink) !important; }
.gnav__lang span { background: #1d1d1f; color: #fff !important; }
.gnav__lang:empty { display: none !important; }
@media (max-width: 520px) { .gnav--isl .gnav__lang { display: inline-flex !important; } }
/* тёмная полоса: TopHalo и тёмные документы */
.gnav--dark, .theme-dark .gnav { background: rgba(22, 22, 23, 0.86) !important; }
.gnav--dark .gnav__logo, .theme-dark .gnav__logo { color: #f5f5f7; }
.gnav--dark .gnav__lang, .theme-dark .gnav__lang { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); }
.gnav--dark .gnav__lang a, .theme-dark .gnav__lang a { color: #a1a1a6 !important; }
.gnav--dark .gnav__lang span, .theme-dark .gnav__lang span { background: #f5f5f7; color: #000 !important; }
.gnav--dark .isl, .theme-dark .isl { box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.18), 0 6px 16px -8px rgba(0, 0, 0, 0.5); }

.iphone, .ipad { align-self: flex-start; height: max-content; }
.tile__art .iphone, .product__art .iphone { align-self: auto; }