/* VA-Admin — стили сайта.
   Системные шрифты, без внешних библиотек. Светлая основа, чёрные акцентные секции,
   крупная типографика, плитки со скруглёнными углами, кнопки-капсулы. */

@property --n { syntax: "<integer>"; initial-value: 14; inherits: false; }

:root {
  --text: #1b1c1f;
  --text-mid: #43454b;
  --text-2: #6b6e76;
  --text-3: #8a8d94;
  --bg: #fff;
  --bg-2: #f4f5f7;
  --line: #d5d7dc;
  --line-2: #e7e8ec;
  --black: #000;
  --ink: #151517;
  --on-dark: #f4f5f7;
  --on-dark-2: #a3a5ab;
  --accent: #0a66d8;
  --accent-hover: #0958ba;
  --accent-dark: #57a6ff;
  --ok: #248a3d;
  --led: #30d158;
  --amber: #ff9f0a;
  --warn: #b64400;
  --r-l: 28px;
  --r-m: 22px;
  --r-s: 14px;
  --nav-h: 52px;
  --wrap: 1120px;
  --gutter: clamp(16px, 4vw, 32px);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --ease: cubic-bezier(.25, .1, .25, 1);
  --shadow: 0 2px 6px rgba(0, 0, 0, .04), 0 18px 44px rgba(0, 0, 0, .09);
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23248a3d' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E");
  --check-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2330d158' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E");
  --cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9302c' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E");
}

/* ---------- Основа */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 20px); scroll-behavior: smooth; }
body { margin: 0; font: 400 17px/1.5 var(--font); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-wrap: break-word; }
img, svg { max-width: 100%; }
h1, h2, h3 { margin: 0 0 .5em; font-family: var(--display); font-weight: 600; color: inherit; text-wrap: balance; }
h1 { font-size: clamp(2.25rem, 1.2rem + 4.2vw, 4rem); line-height: 1.06; letter-spacing: -.024em; }
h2 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); line-height: 1.08; letter-spacing: -.02em; }
h3 { font-size: 1.3rem; line-height: 1.2; letter-spacing: -.012em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid rgba(10, 102, 216, .55); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.muted { color: var(--text-2); }
/* заголовок только для программ чтения с экрана и структуры документа */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.small { font-size: .88rem; }
.lead { font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); line-height: 1.36; color: var(--text-mid); }
.eyebrow { margin: 0 0 .7rem; font: 600 .95rem/1.3 var(--font); color: var(--text-2); }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 100; padding: .6rem 1rem; background: #fff; border-radius: 10px; box-shadow: var(--shadow); }
.icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.more::after, .card-more::after { content: ""; display: inline-block; width: .42em; height: .42em; margin-left: .32em; border: solid currentColor; border-width: .1em .1em 0 0; transform: translateY(-.08em) rotate(45deg); }

/* Незаполненные значения из site.toml */
mark.todo { padding: 0 .3em; font-weight: 600; color: #5c4400; background: #fff1a8; border-radius: 5px; outline: 1.5px dashed #c99a00; outline-offset: 1px; }
.todo { outline: 2px dashed #e0a800; outline-offset: 3px; }

/* Появление блоков при прокрутке — классы ставит js/site.js */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Кнопки */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 44px; padding: .6em 1.4em; border: 1px solid transparent; border-radius: 980px; font: 500 1.02rem/1.2 var(--font); white-space: nowrap; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.btn:hover { text-decoration: none; }
.btn .icon { width: 1.12em; height: 1.12em; stroke-width: 1.8; }
.btn-primary { color: #fff; background: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { color: var(--accent); border-color: var(--accent); }
.btn-ghost:hover { color: #fff; background: var(--accent); }
.btn-urgent { color: #fff; background: var(--warn); }
.btn-urgent:hover { background: #933700; }
.btn-sm { min-height: 32px; padding: .34em 1em; font-size: .85rem; }
.actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.6rem 0; }

/* ---------- Шапка */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .8); border-bottom: 1px solid rgba(0, 0, 0, .08); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.header-row { display: flex; align-items: center; gap: 1rem; height: var(--nav-h); }
.logo { display: inline-flex; align-items: center; gap: .5rem; font: 600 1.15rem/1 var(--display); letter-spacing: -.02em; color: var(--text); white-space: nowrap; }
.logo:hover { text-decoration: none; }
.logo-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--led); box-shadow: 0 0 0 3px rgba(48, 209, 88, .22); animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(48, 209, 88, .06); } }
.nav-main { display: flex; gap: clamp(.1rem, 1vw, .9rem); margin: 0 auto; }
.nav-main a { padding: .4rem .55rem; font-size: .875rem; color: rgba(0, 0, 0, .78); }
.nav-main a:hover { color: #000; text-decoration: none; }
.nav-main a[aria-current] { font-weight: 600; color: #000; }
.header-actions { display: flex; align-items: center; gap: .9rem; margin-left: auto; }
.header-phone { display: inline-flex; align-items: center; gap: .4rem; font-size: .875rem; font-weight: 500; color: var(--text); white-space: nowrap; }
.header-phone:hover { color: var(--accent); text-decoration: none; }
.header-phone .icon { width: 15px; height: 15px; }
.nav-mobile { display: none; }
.nav-mobile summary { display: grid; place-items: center; width: 40px; height: 40px; margin-right: -8px; cursor: pointer; list-style: none; border-radius: 50%; }
.nav-mobile summary::-webkit-details-marker { display: none; }
.burger { position: relative; width: 18px; height: 10px; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; width: 18px; height: 1.6px; background: var(--text); border-radius: 2px; transition: transform .25s var(--ease), top .25s var(--ease); }
.burger::before { top: 0; }
.burger::after { top: 8px; }
.nav-mobile[open] .burger::before { top: 4px; transform: rotate(45deg); }
.nav-mobile[open] .burger::after { top: 4px; transform: rotate(-45deg); }
.nav-mobile nav { position: absolute; left: 0; right: 0; top: 100%; display: flex; flex-direction: column; max-height: calc(100vh - var(--nav-h)); padding: .6rem var(--gutter) 2rem; overflow: auto; background: #fff; border-bottom: 1px solid var(--line-2); box-shadow: 0 30px 40px rgba(0, 0, 0, .1); }
.nav-mobile nav a { padding: .8rem 0; font: 600 1.55rem/1.2 var(--display); letter-spacing: -.02em; color: var(--text); border-bottom: 1px solid var(--line-2); }
.nav-mobile nav a:last-child { border-bottom: 0; }
.nav-mobile nav a:hover { text-decoration: none; color: var(--accent); }
@media (max-width: 1023px) {
  .nav-main { display: none; }
  .nav-mobile { display: block; }
}
@media (max-width: 640px) {
  .header-actions { gap: .55rem; }
  .header-phone { display: grid; place-items: center; width: 36px; height: 36px; }
  .header-phone span { display: none; }
  .header-phone .icon { width: 19px; height: 19px; }
}
@media (max-width: 359px) { .header-actions .btn span { display: none; } }

/* ---------- Секции */
.section { padding: clamp(64px, 9vw, 120px) 0; }
.section.alt { background: var(--bg-2); }
.section.dark { color: var(--on-dark); background: var(--black); }
.section.tight-top { padding-top: 0; }
.section-head { max-width: 46rem; margin: 0 auto clamp(32px, 5vw, 56px); text-align: center; }
.section-head p { margin: 0; font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); line-height: 1.36; color: var(--text-2); }
.section-head .chips { justify-content: center; margin: 1.3rem 0 0; }
.section > .wrap > h2:first-child { margin-bottom: clamp(28px, 4vw, 48px); text-align: center; }
.dark .section-head p, .dark .muted { color: var(--on-dark-2); }
.dark a { color: var(--accent-dark); }
.split { display: grid; gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
.split h2 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); }
.split.even { align-items: stretch; }

/* ---------- Лента над первым экраном */
.ribbon { padding: .8rem 0; font-size: .9rem; line-height: 1.4; text-align: center; color: var(--text); background: var(--bg-2); }
.ribbon p { margin: 0; }
.ribbon a { white-space: nowrap; }
.ribbon.dark { color: var(--on-dark); background: var(--ink); }
.ribbon.dark a { color: var(--accent-dark); }

/* ---------- Первый экран */
.hero { padding: clamp(36px, 4.4vw, 60px) 0 clamp(56px, 8vw, 104px); overflow: hidden; text-align: center; }
.hero-title { margin: 0 auto .38em; font-size: clamp(2rem, 1rem + 4.2vw, 3.6rem); line-height: 1.06; letter-spacing: -.03em; }
.hero-title span { display: block; }
.hero-dark { padding-bottom: clamp(40px, 6vw, 72px); color: var(--on-dark); background: var(--black); }
.hero-dark > .wrap { position: relative; z-index: 1; }      /* текст поверх верхнего края видео */
.hero-dark .hero-title { color: #fff; }
.hero-dark .hero-title span { color: #9a9da4; }
.hero-dark .hero-lead, .hero-dark .hero-facts { color: var(--on-dark-2); }
.hero-dark a.more { color: var(--accent-dark); }
.hero-dark .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .45); }
.hero-dark .btn-ghost:hover { color: #000; background: #fff; border-color: #fff; }
.hero-dark .hero-facts li::before { background-image: var(--check-dark); }
.hero-dark .hero-facts { margin-top: clamp(8px, 2vw, 20px); }
/* видео: края кадра уходят в чёрное, поэтому рамки не видно */
.hero-video { max-width: 1400px; margin: clamp(-34px, -2.4vw, -8px) auto 0; }
.hero-video video { display: block; width: 100%; height: auto; }
@media (max-width: 700px) { .hero-video { margin-inline: -6%; } }
.hero-lead { max-width: 40rem; margin: 0 auto; font-size: clamp(1.12rem, 1rem + .7vw, 1.5rem); line-height: 1.36; color: var(--text-2); }
.hero .actions { justify-content: center; margin: 1.4rem 0 .9rem; }
.hero-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.8rem; margin: 0; font-size: 1.02rem; }
.hero-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 2rem; padding: 0; margin: clamp(26px, 4vw, 40px) 0 0; list-style: none; font-size: .96rem; color: var(--text-2); }
.hero-facts li { display: flex; align-items: center; gap: .45rem; }
.hero-facts li::before { content: ""; width: 1rem; height: 1rem; background: var(--check) center / contain no-repeat; }

/* «Фильм» в первом экране: три сцены по 7 секунд, цикл 21 секунда.
   Время появления каждого элемента задаёт переменная --d (секунды от начала цикла).
   Для проверки сцен цикл можно сдвинуть: :root { --t0: 9s } покажет девятую секунду. */
.film { max-width: 980px; margin: 0 auto; }
.section-head .film-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.8rem; font: 600 clamp(1.1rem, 1rem + .5vw, 1.4rem)/1.3 var(--display); letter-spacing: -.012em; }
.film-tabs span { --dim: #a9acb3; --lit: var(--text); color: var(--text); animation: lit 21s calc(var(--d) - .5s - var(--t0, 0s)) infinite backwards; }
.film-stage { position: relative; display: grid; height: 480px; overflow: hidden; text-align: left; color: var(--on-dark); border-radius: clamp(22px, 3vw, 32px); box-shadow: 0 30px 80px rgba(0, 0, 0, .2);
  background: radial-gradient(90% 70% at 100% 0%, rgba(48, 209, 88, .2), transparent 60%), radial-gradient(80% 70% at 0% 100%, rgba(10, 132, 255, .18), transparent 60%), #0b0b0d; }
@media (min-width: 760px) { .film-stage { height: auto; aspect-ratio: 2 / 1; } }
.scene { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; gap: clamp(14px, 2.2vw, 26px); min-width: 0; padding: clamp(56px, 7vw, 76px) clamp(20px, 5.5vw, 68px) clamp(22px, 4vw, 48px); animation: scene 21s calc(var(--d) - .5s - var(--t0, 0s)) infinite backwards; }
.scene-label { position: absolute; top: clamp(20px, 3vw, 32px); left: clamp(20px, 5.5vw, 68px); margin: 0; font-size: .85rem; color: var(--on-dark-2); }
.pop { animation: pop 21s calc(var(--d) - .5s - var(--t0, 0s)) infinite backwards; }
@keyframes scene { 0% { opacity: 0; } 2.4%, 31% { opacity: 1; } 33.33%, 100% { opacity: 0; } }
@keyframes pop { 0% { opacity: 0; transform: translateY(12px); } 2.4%, 34% { opacity: 1; transform: none; } 36%, 100% { opacity: 0; transform: none; } }
@keyframes lit { 0% { color: var(--dim); } 2.4%, 31% { color: var(--lit); } 33.33%, 100% { color: var(--dim); } }

.log { display: grid; gap: clamp(8px, 1.2vw, 12px); padding: 0; margin: 0; list-style: none; }
.log li { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: .75rem; padding: clamp(11px, 1.6vw, 17px) clamp(14px, 2vw, 22px); font-size: clamp(.95rem, .8rem + .62vw, 1.3rem); line-height: 1.3; background: rgba(255, 255, 255, .075); border-radius: 16px; }
.log time { font: 500 .8em var(--mono); color: var(--on-dark-2); }
.dot { display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: var(--on-dark-2); transform: translateY(-.08em); }
.dot.warn { background: var(--amber); }
.dot.info { background: #0a84ff; }
.dot.ok { background: var(--led); }

.uptime-num { margin: 0; font: 600 clamp(3.4rem, 2rem + 8.4vw, 8rem)/1 var(--display); letter-spacing: -.045em; color: #fff; }
.uptime-cap { margin: -.4rem 0 0; font-size: clamp(1rem, .9rem + .5vw, 1.3rem); color: var(--on-dark-2); }
.bars { display: grid; grid-template-columns: repeat(30, 1fr); align-items: end; gap: clamp(2px, .5vw, 5px); height: clamp(42px, 7vw, 72px); animation: wipe 21s calc(var(--d) - .5s - var(--t0, 0s)) infinite backwards; }
.bars i { height: 100%; background: var(--led); border-radius: 3px; }
.bars i.warn { height: 56%; background: var(--amber); }
@keyframes wipe { 0% { clip-path: inset(0 100% 0 0); } 7%, 34% { clip-path: inset(0 0 0 0); } 36%, 100% { clip-path: inset(0 100% 0 0); } }
.metrics { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; list-style: none; }
.metrics li { padding: .5rem .95rem; font-size: clamp(.85rem, .8rem + .3vw, 1rem); color: var(--on-dark-2); background: rgba(255, 255, 255, .085); border-radius: 980px; }
.metrics b { margin-right: .3em; font-weight: 600; color: #fff; }

.flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: clamp(6px, 1.4vw, 16px); }
.node { padding: clamp(12px, 2vw, 22px) clamp(6px, 1.4vw, 16px); text-align: center; background: rgba(255, 255, 255, .075); border-radius: 18px; }
.node .icon { width: clamp(24px, 3.4vw, 36px); height: clamp(24px, 3.4vw, 36px); margin-bottom: .45rem; stroke-width: 1.5; color: #fff; }
.node b { display: block; font-size: clamp(.85rem, .75rem + .5vw, 1.15rem); font-weight: 600; }
.node span { display: block; font-size: clamp(.7rem, .65rem + .3vw, .9rem); line-height: 1.25; color: var(--on-dark-2); }
.flow-link { position: relative; width: clamp(14px, 4vw, 54px); height: 2px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .34) 0 5px, transparent 5px 10px); }
.flow-link::after { content: ""; position: absolute; inset: -3px 0; background: radial-gradient(circle 4px at 4px 50%, var(--led) 96%, transparent) no-repeat; animation: travel 1.5s linear infinite; }
@keyframes travel { 0% { transform: translateX(0); opacity: 0; } 20%, 80% { opacity: 1; } 100% { transform: translateX(calc(100% - 8px)); opacity: 0; } }
.restore { display: grid; gap: .65rem; }
.restore-bar { height: 8px; overflow: hidden; background: rgba(255, 255, 255, .15); border-radius: 8px; }
.restore-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--led), #9ff0b6); border-radius: 8px; transform-origin: left; animation: fill 21s calc(var(--d) - .5s - var(--t0, 0s)) infinite backwards var(--ease); }
@keyframes fill { 0%, 3% { transform: scaleX(0); } 11%, 100% { transform: scaleX(1); } }
.restore p { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 0; font-size: clamp(.9rem, .8rem + .4vw, 1.15rem); color: var(--on-dark-2); }
.mins { font: 600 1.45em var(--display); letter-spacing: -.02em; color: #fff; white-space: nowrap; counter-reset: n var(--n); animation: mins 21s calc(var(--d) - .5s - var(--t0, 0s)) infinite backwards linear; }
.mins::before { content: counter(n); }
@keyframes mins { 0%, 3% { --n: 0; } 11%, 100% { --n: 14; } }
.restore-ok { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: clamp(1rem, .9rem + .5vw, 1.3rem); font-weight: 600; color: var(--led); }
.restore-ok::before { content: ""; width: 1.1em; height: 1.1em; background: var(--check-dark) center / contain no-repeat; }

.film-bar { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 34px; margin-top: 18px; }
.seg { width: 44px; height: 4px; overflow: hidden; background: var(--line); border-radius: 4px; }
.seg i { display: block; height: 100%; background: var(--text); transform-origin: left; animation: seg 21s calc(var(--d) - .5s - var(--t0, 0s)) infinite backwards linear; }
@keyframes seg { 0% { transform: scaleX(0); } 33.33% { transform: scaleX(1); } 33.34%, 100% { transform: scaleX(0); } }
.film-toggle { position: relative; width: 34px; height: 34px; margin-left: 8px; padding: 0; cursor: pointer; background: var(--line-2); border: 0; border-radius: 50%; transition: background-color .2s; }
.film-toggle:hover { background: var(--line); }
.film-toggle::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 12px; border: solid var(--text); border-width: 0 3px; transform: translate(-50%, -50%); }
.film-toggle[aria-pressed="true"]::before { width: 0; height: 0; border-width: 6.5px 0 6.5px 11px; border-color: transparent transparent transparent var(--text); transform: translate(-38%, -50%); }
.film figcaption { margin-top: 12px; font-size: .82rem; text-align: center; color: var(--text-3); }
.is-paused .film-tabs span, .is-paused .film *, .is-paused .film *::before, .is-paused .film *::after { animation-play-state: paused !important; }

/* ---------- Плитки услуг */
.cards { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); padding: 0; margin: 0; list-style: none; }
.card { position: relative; display: flex; flex-direction: column; min-height: 270px; padding: 32px 30px 28px; background: var(--bg-2); border-radius: var(--r-l); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.section.alt .card { background: #fff; }
.card:hover { transform: scale(1.012); box-shadow: var(--shadow); }
.card > .icon { width: 42px; height: 42px; margin-bottom: 1.5rem; stroke-width: 1.4; }
.card h3 { margin-bottom: .5rem; font-size: 1.5rem; line-height: 1.14; letter-spacing: -.018em; }
.card h3 a { color: inherit; }
.card h3 a:hover { text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card p { font-size: 1.02rem; line-height: 1.45; color: var(--text-2); }
.card-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .3rem 1rem; margin-top: auto; padding-top: .8rem; }
.card .card-price { margin: 0; font-weight: 600; color: var(--text); }
.card-more { font-size: 1.02rem; color: var(--accent); white-space: nowrap; }

/* ---------- Тарифы */
.tariffs { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: stretch; }
.tariff { position: relative; display: flex; flex-direction: column; padding: 52px 32px 32px; background: var(--bg-2); border-radius: var(--r-l); }
.section.alt .tariff { background: #fff; }
.tariff.featured { box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
.tariff-badge { position: absolute; top: 24px; left: 32px; margin: 0; font-size: .82rem; font-weight: 600; color: var(--warn); }
.tariff h3 { margin-bottom: .35rem; font-size: 1.9rem; letter-spacing: -.02em; }
.tariff-fits { min-height: 3em; font-size: 1.02rem; line-height: 1.4; color: var(--text-2); }
.tariff-price { margin: .5rem 0 1.5rem; font-size: .95rem; color: var(--text-2); }
.tariff-price strong { display: block; margin-bottom: .2rem; font: 600 clamp(2.5rem, 2rem + 1.6vw, 3.25rem)/1.05 var(--display); letter-spacing: -.03em; color: var(--text); }
.tariff .check { flex: 1; padding-top: 1.3rem; margin-bottom: 1.7rem; border-top: 1px solid var(--line); }
.tariffs-note { max-width: 46rem; margin: 2rem auto 0; font-size: .9rem; text-align: center; color: var(--text-2); }

/* Предложение для первых клиентов — тёмный блок над тарифами. Текст — в site.toml, [offer].
   Срок стоит в data-until: после него блок не собирается, а на выложенных страницах его прячет site.js */
.offer { display: grid; gap: 20px clamp(28px, 5vw, 64px); align-items: center; margin-bottom: 20px; padding: clamp(28px, 4vw, 44px); color: var(--on-dark); background: var(--ink); border-radius: var(--r-l); }
.offer[hidden] { display: none; }
.offer h3 { margin: 0 0 .6rem; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); letter-spacing: -.02em; color: #fff; }
.offer p { margin: 0; font-size: 1.05rem; line-height: 1.45; color: var(--on-dark); }
.offer .offer-badge { margin: 0 0 .7rem; font-size: .82rem; font-weight: 600; color: var(--amber); }
.offer-terms { padding: 0; margin: 0; list-style: none; font-size: .9rem; line-height: 1.45; color: var(--on-dark-2); }
.offer-terms li { position: relative; margin: .55rem 0; padding-left: 1.6rem; }
.offer-terms li::before { content: ""; position: absolute; left: 0; top: .2em; width: 1rem; height: 1rem; background: var(--check-dark) center / contain no-repeat; }
@media (min-width: 900px) { .offer { grid-template-columns: 1fr 1fr; } }

/* ---------- Списки */
.check, .cross { padding: 0; margin: 0 0 1rem; list-style: none; }
.check li, .cross li { position: relative; margin: .6rem 0; padding-left: 1.75rem; }
.check li::before, .cross li::before { content: ""; position: absolute; left: 0; top: .26em; width: 1.05rem; height: 1.05rem; background: var(--check) center / contain no-repeat; }
.cross li::before { background-image: var(--cross); }
.dark .check li::before, .feature-tile .check li::before { background-image: var(--check-dark); }
.cols-2 { columns: 2 300px; column-gap: 3rem; }
.cols-2 li { break-inside: avoid; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0 0 1rem; list-style: none; }
.chips li { padding: .36rem .95rem; font-size: .92rem; background: var(--bg-2); border-radius: 980px; }
.section.alt .chips li, .page-hero .chips li { background: #fff; }

/* ---------- Плитки преимуществ */
.features { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); padding: 0; margin: 0; list-style: none; }
.features li { padding: 30px 28px; background: var(--bg-2); border-radius: var(--r-m); }
.section.alt .features li { background: #fff; }
.features .icon { width: 34px; height: 34px; margin-bottom: 1.2rem; stroke-width: 1.5; }
.features h3 { margin-bottom: .45rem; font-size: 1.3rem; }
.features p { margin: 0; font-size: 1.02rem; line-height: 1.47; color: var(--text-2); }

/* ---------- Шаги */
.steps { display: grid; gap: 30px 24px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); padding: 0; margin: 0; list-style: none; counter-reset: step; }
.steps li { padding-top: 1.2rem; border-top: 1px solid var(--line); counter-increment: step; }
.steps li::before { content: counter(step); display: block; margin-bottom: .9rem; font: 600 2.75rem/1 var(--display); letter-spacing: -.03em; color: var(--text); }
.steps h3 { margin-bottom: .35rem; font-size: 1.2rem; }
.steps p { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--text-2); }

/* ---------- Заметки и панели */
.note { padding: 28px; background: var(--bg-2); border-radius: var(--r-m); }
.section.alt .note, .page-hero .note { background: #fff; }
.note > :last-child, .panel > :last-child { margin-bottom: 0; }
.note h3 { font-size: 1.25rem; }
.note.note-warn, .section.alt .note.note-warn { background: #fff4e3; }
.panel { padding: clamp(24px, 3vw, 36px); background: var(--bg-2); border-radius: var(--r-l); }
.section.alt .panel { background: #fff; }
.panel h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); }
.panel .note { background: #fff; }
.section.alt .panel .note { background: var(--bg-2); }
.panel .note.note-warn, .section.alt .panel .note.note-warn { background: #fff4e3; }

/* ---------- Главная: крупное высказывание, цифры, плитки */
.statement { overflow: hidden; text-align: center; }
.display { max-width: 15em; margin: 0 auto .45em; font-size: clamp(2rem, 1rem + 4.6vw, 4.4rem); line-height: 1.06; letter-spacing: -.03em; }
.display em { font-style: normal; color: var(--led); }
.intro { max-width: 44rem; margin: 0 auto; font-size: clamp(1.12rem, 1rem + .7vw, 1.55rem); line-height: 1.36; color: var(--on-dark-2); }
.stats { display: grid; gap: 20px; padding: 0; margin: clamp(40px, 6vw, 72px) 0 0; list-style: none; text-align: left; }
@media (min-width: 800px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stats li { padding: clamp(26px, 3vw, 38px); background: var(--ink); border-radius: var(--r-l); }
.stats b { display: block; font: 600 clamp(4.5rem, 3rem + 6vw, 7.5rem)/.95 var(--display); letter-spacing: -.05em; color: #fff; }
.stats h3 { margin: .7rem 0 .4rem; font-size: 1.4rem; color: #fff; }
.stats p { margin: 0; font-size: 1.02rem; line-height: 1.45; color: var(--on-dark-2); }
.statement-more { margin: 2.2rem 0 0; font-size: 1.1rem; }

.bento { display: grid; gap: 20px; grid-template-columns: repeat(6, 1fr); }
.tile { display: flex; flex-direction: column; grid-column: span 2; min-height: 250px; padding: clamp(26px, 3vw, 40px); background: var(--bg-2); border-radius: var(--r-l); }
.tile.w3 { grid-column: span 3; }
.section.alt .tile { background: #fff; }
.tile .icon { width: 36px; height: 36px; margin-bottom: auto; stroke-width: 1.4; }
.tile h3 { margin: 1.6rem 0 .5rem; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.85rem); line-height: 1.12; letter-spacing: -.02em; }
.tile.big h3 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); line-height: 1.05; letter-spacing: -.028em; }
.tile p { margin: 0; font-size: 1.04rem; line-height: 1.45; color: var(--text-2); }
@media (max-width: 899px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .tile, .tile.w3 { grid-column: span 1; min-height: 220px; }
  .tile.big { grid-column: span 2; }
}
@media (max-width: 599px) {
  .bento { grid-template-columns: 1fr; }
  .tile, .tile.w3, .tile.big { grid-column: auto; min-height: 0; }
  .tile .icon { margin-bottom: 0; }
}

.feature-tile { display: grid; gap: clamp(28px, 4vw, 60px); align-items: center; padding: clamp(28px, 5vw, 68px); color: var(--on-dark); border-radius: clamp(24px, 3vw, 36px);
  background: radial-gradient(70% 90% at 100% 0%, rgba(48, 209, 88, .2), transparent 60%), radial-gradient(60% 80% at 0% 100%, rgba(10, 132, 255, .16), transparent 60%), #0b0b0d; }
@media (min-width: 900px) { .feature-tile { grid-template-columns: 1.1fr .9fr; } }
.feature-tile h2 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); color: #fff; }
.feature-tile p { color: var(--on-dark-2); }
.feature-tile .check { color: var(--on-dark); }
.feature-tile .btn-ghost, .cta .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .45); }
.feature-tile .btn-ghost:hover, .cta .btn-ghost:hover { color: #000; background: #fff; border-color: #fff; }
.audit-card { margin: 0; padding: clamp(18px, 2.4vw, 26px); background: rgba(255, 255, 255, .075); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--r-m); }
.audit-card figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem; margin-bottom: .6rem; font-weight: 600; color: #fff; }
.audit-card figcaption span { font-size: .82rem; font-weight: 400; color: var(--on-dark-2); }
.audit-card ul { padding: 0; margin: 0; list-style: none; }
.audit-card li { display: grid; grid-template-columns: auto 1fr; gap: .1rem .7rem; padding: .8rem 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.audit-card li::before { content: ""; grid-row: span 2; width: .6rem; height: .6rem; margin-top: .45rem; border-radius: 50%; background: var(--led); }
.audit-card li.bad::before { background: var(--amber); }
.audit-card b { font-weight: 500; color: #fff; }
.audit-card li span { grid-column: 2; font-size: .92rem; color: var(--on-dark-2); }
.audit-card > p { margin: .9rem 0 0; padding-top: .9rem; font-size: .95rem; color: var(--on-dark); border-top: 1px solid rgba(255, 255, 255, .1); }

.clocks { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .6rem; margin-bottom: 1.6rem; padding-bottom: 1.6rem; text-align: center; border-bottom: 1px solid var(--line-2); }
.clocks b { display: block; font: 600 clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem)/1 var(--display); letter-spacing: -.035em; }
.clocks span { font-size: .9rem; color: var(--text-2); }
.clocks i { width: 2.2rem; height: 2px; background: var(--line); }

/* Градиентный текст — после базовых правил, иначе их цвет его перекроет */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .uptime-num, .stats b, .display em { color: transparent; -webkit-background-clip: text; background-clip: text; }
  .uptime-num { background-image: linear-gradient(180deg, #fff 35%, #9ff0b6); }
  .stats b { background-image: linear-gradient(180deg, #fff 20%, #7c7f87); }
  .display em { background-image: linear-gradient(90deg, #30d158, #7ee0ff); }
}

/* ---------- Внутренние страницы */
.crumbs-bar { padding-top: 1.1rem; }
.layout-page .crumbs-bar { background: var(--bg-2); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .2rem .45rem; padding: 0; margin: 0; list-style: none; font-size: .8rem; color: var(--text-2); }
.breadcrumbs li + li::before { content: "›"; margin-right: .45rem; color: var(--text-3); }
.breadcrumbs a { color: var(--text-2); }
.layout-prose .breadcrumbs, .layout-post .breadcrumbs { max-width: 760px; }
.page-hero { padding: clamp(26px, 4vw, 44px) 0 clamp(48px, 7vw, 88px); background: var(--bg-2); }
.page-hero h1 { margin-bottom: .36em; }
.page-hero-grid h1 { font-size: clamp(2.1rem, 1.2rem + 3.2vw, 3.5rem); }
.page-hero > .wrap:not(.page-hero-grid) { text-align: center; }
.page-hero > .wrap:not(.page-hero-grid) .lead { max-width: 44rem; margin-inline: auto; margin-bottom: 0; }
.page-hero-grid { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (min-width: 940px) { .page-hero-grid { grid-template-columns: 1.35fr 1fr; } }
.page-hero .check { margin: 1.5rem 0 0; font-size: 1.05rem; }
.price-box { padding: clamp(24px, 3vw, 34px); background: #fff; border-radius: var(--r-l); box-shadow: var(--shadow); }
.price-box-label { margin: 0; font-size: .85rem; font-weight: 600; color: var(--text-2); }
.price-box-value { margin: .2rem 0 .5rem; font: 600 clamp(2.3rem, 1.8rem + 1.5vw, 3rem)/1.05 var(--display); letter-spacing: -.03em; }
.price-box-note { font-size: .98rem; line-height: 1.4; color: var(--text-2); }
.price-box .actions { flex-direction: column; margin: 1.3rem 0 1.1rem; }
.price-box-foot { margin: 0; font-size: .82rem; color: var(--text-2); }

/* ---------- Таблицы */
.table-wrap { overflow-x: auto; padding: 6px clamp(16px, 2.6vw, 30px); background: var(--bg-2); border-radius: var(--r-m); }
.section.alt .table-wrap { background: #fff; }
.table-wrap + p, .table-wrap + .note { margin-top: 1.2rem; }
table.data { width: 100%; border-collapse: collapse; }
table.data:not(.prices) { min-width: 620px; }
.data th, .data td { padding: 1rem 1.2rem 1rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.data tbody tr:last-child > * { border-bottom: 0; }
.data thead th { padding-bottom: .7rem; font-size: .82rem; font-weight: 600; color: var(--text-2); }
.data tr.group th { padding-top: 2.2rem; font: 600 1.3rem/1.2 var(--display); letter-spacing: -.012em; }
.data tr.group:first-child th { padding-top: 1rem; }
.data td.price { padding-right: 0; font-weight: 600; text-align: right; white-space: nowrap; }
.data thead th:last-child { padding-right: 0; }
.prices thead th:last-child { text-align: right; }
.data small { display: block; margin-top: .2rem; font-size: .88rem; color: var(--text-2); }
.data td a { color: var(--text); }
.data td a:hover { color: var(--accent); }
@media (max-width: 560px) { .data td.price { white-space: normal; } }

/* ---------- Вопросы и ответы */
.faq-list { max-width: 50rem; margin-inline: auto; }
.faq-list h2 { margin: 3rem 0 1rem; font-size: clamp(1.5rem, 1.3rem + .8vw, 1.9rem); }
.faq-list h2:first-child { margin-top: 0; }
details.faq { border-bottom: 1px solid var(--line); }
details.faq:first-of-type, .faq-list h2 + details.faq { border-top: 1px solid var(--line); }
details.faq summary { position: relative; padding: 1.25rem 3rem 1.25rem 0; font: 600 1.2rem/1.3 var(--display); letter-spacing: -.01em; cursor: pointer; list-style: none; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: ""; position: absolute; right: .3rem; top: 50%; width: 1.1rem; height: 1.1rem; margin-top: -.55rem; background: linear-gradient(var(--text), var(--text)) center / 100% 1.6px no-repeat, linear-gradient(var(--text), var(--text)) center / 1.6px 100% no-repeat; transition: transform .3s var(--ease); }
details.faq[open] summary::after { transform: rotate(45deg); }
details.faq summary:hover { color: var(--accent); }
details.faq > div { padding: 0 3rem 1.4rem 0; color: var(--text-mid); }
details.faq > div > :last-child { margin-bottom: 0; }

/* ---------- Призыв в конце страницы */
.cta { padding: clamp(72px, 10vw, 128px) 0; text-align: center; color: var(--on-dark); background: var(--black); }
.cta-inner { display: block; }
.cta h2 { max-width: 22ch; margin-inline: auto; color: #fff; }
.cta p { max-width: 38rem; margin: 0 auto; font-size: 1.12rem; line-height: 1.42; color: var(--on-dark-2); }
.cta .actions { justify-content: center; margin: 2rem 0 0; }

/* ---------- Отзывы */
.reviews { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); padding: 0; margin: 0; list-style: none; }
.reviews li { width: 100%; max-width: 640px; justify-self: center; }
.review { display: flex; flex-direction: column; height: 100%; margin: 0; padding: 30px 30px 28px; background: var(--bg-2); border-radius: var(--r-l); }
.section.alt .review { background: #fff; }
.review blockquote { flex: 1; margin: 0 0 1.5rem; font-size: 1.1rem; line-height: 1.5; }
.review blockquote::before { content: "«"; display: block; margin-bottom: .3rem; font: 600 3.2rem/.7 var(--display); color: var(--accent); }
.review blockquote p { margin: 0; }
.review figcaption { display: grid; gap: .1rem; font-size: .95rem; }
.review figcaption span { color: var(--text-2); }
.review-meta { display: flex; flex-wrap: wrap; gap: .2rem 1rem; margin-top: .5rem; font-size: .85rem; }
.sign { display: flex; align-items: center; justify-content: center; gap: .9rem; margin: 2rem 0 0; }
.sign img { width: 56px; height: 56px; object-fit: cover; border-radius: 50%; }
.sign span { display: grid; text-align: left; font-size: .95rem; color: var(--text-2); }
.sign strong { font-size: 1.05rem; font-weight: 600; color: var(--text); }

/* ---------- Разборы */
.posts { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); padding: 0; margin: 0; list-style: none; }
.posts li { width: 100%; max-width: 640px; justify-self: center; }
.posts article { position: relative; height: 100%; padding: 30px; background: var(--bg-2); border-radius: var(--r-l); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.section.alt .posts article { background: #fff; }
.posts article:hover { transform: scale(1.012); box-shadow: var(--shadow); }
.posts h3 { font-size: 1.45rem; line-height: 1.18; letter-spacing: -.018em; }
.posts h3 a { color: inherit; }
.posts h3 a:hover { text-decoration: none; }
.posts h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.posts p:last-child { margin: 0; color: var(--text-2); }
.post-meta { margin-bottom: .6rem; font-size: .85rem; color: var(--text-2); }

/* ---------- Текстовые страницы */
.prose { max-width: 760px; padding-top: 2rem; padding-bottom: clamp(64px, 9vw, 120px); font-size: 1.1rem; line-height: 1.6; }
.prose h1 { margin-bottom: .6em; font-size: clamp(2.1rem, 1.4rem + 3vw, 3.25rem); }
.prose h2 { margin-top: 2.2em; font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem); }
.prose h3 { margin-top: 1.8em; font-size: 1.3rem; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: .4em 0; }
.prose .check, .prose .cross, .prose .chips { padding-left: 0; }
.prose code { padding: .14em .4em; font: .86em var(--mono); background: var(--bg-2); border-radius: 6px; }
.prose pre { padding: 1.2rem 1.4rem; overflow-x: auto; font: .86rem/1.62 var(--mono); color: var(--on-dark); background: var(--ink); border-radius: 16px; }
.prose pre code { padding: 0; font-size: inherit; color: inherit; background: none; }
.prose .note, .prose .panel { margin: 2rem 0; }
.post-header { margin-bottom: 1.6rem; }
.doc { font-size: 1rem; line-height: 1.55; }
.doc p { margin-bottom: .7em; }
.doc h2 { margin-top: 2em; font-size: 1.3rem; letter-spacing: -.01em; }

/* ---------- О нас и контакты */
.owner { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 800px) { .owner { grid-template-columns: 300px 1fr; } }
.owner > div:only-child { grid-column: 1 / -1; max-width: 46rem; }   /* фото ещё нет — текст на всю ширину */
.owner-photo { width: 100%; max-width: 300px; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-l); }
.footer-links a[href^="mailto:"] { overflow-wrap: anywhere; }
.contact-list { display: grid; gap: 1.1rem; padding: 0; margin: 0 0 1.6rem; list-style: none; }
.contact-list li { display: flex; align-items: flex-start; gap: .9rem; }
.contact-list .icon { margin-top: .12rem; }
.contact-list strong { display: block; font-weight: 600; }

/* ---------- Черновик */
.draft-banner { padding: .6rem 0; font-size: .9rem; text-align: center; color: #5c4400; background: #fff1a8; }

/* ---------- Плашка про cookie: есть на странице, только если включена Метрика */
.cookie-bar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; max-width: 780px; margin-inline: auto; padding: 16px 20px; font-size: .9rem; line-height: 1.45; color: var(--text); background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r-m); box-shadow: var(--shadow); }
.cookie-bar[hidden], .link-btn[hidden] { display: none; }
.cookie-bar p { flex: 1 1 320px; margin: 0; }
.cookie-actions { display: flex; gap: 8px; }
.link-btn { padding: 0; font: inherit; color: var(--text-mid); background: none; border: 0; cursor: pointer; }
.link-btn:hover { color: var(--text); text-decoration: underline; }

/* Сообщение владельцу сайта: браузер помечен как свой (адрес с #svoi на конце), см. site.js */
.own-note { position: fixed; left: 50%; bottom: 20px; z-index: 95; max-width: calc(100vw - 32px); margin: 0; padding: 10px 18px; font-size: .88rem; line-height: 1.4; text-align: center; color: var(--on-dark); background: var(--ink); border-radius: 999px; box-shadow: var(--shadow); transform: translateX(-50%); }

/* ---------- Подвал */
.site-footer { padding: 48px 0 28px; font-size: .84rem; line-height: 1.5; color: var(--text-2); background: var(--bg-2); }
.footer-grid { display: grid; gap: 28px 32px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.footer-brand .logo { margin-bottom: .8rem; }
.footer-brand p { max-width: 17rem; }
.footer-title { margin-bottom: .7rem; font: 600 .84rem/1.4 var(--font); letter-spacing: 0; color: var(--text); }
.footer-links { padding: 0; margin: 0; list-style: none; }
.footer-links li { margin: .5rem 0; }
.site-footer a { color: var(--text-mid); }
.site-footer a:hover { color: var(--text); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 2rem; margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); }
.footer-bottom p { margin: 0; }

/* ---------- 404 */
.not-found { padding: clamp(72px, 12vw, 150px) 0; text-align: center; }
.not-found .lead { max-width: 36rem; margin-inline: auto; }
.not-found .actions { justify-content: center; }

/* ---------- Без анимации: сцены первого экрана показываются друг под другом */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .film-stage { display: block; height: auto; aspect-ratio: auto; }
  .scene { position: relative; }
  .scene + .scene { border-top: 1px solid rgba(255, 255, 255, .12); }
  .film-bar { display: none; }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .site-footer, .cta, .skip-link, .crumbs-bar, .draft-banner, .actions, .ribbon, .film-bar { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  body { font-size: 11pt; }
  a { color: inherit; }
  .prose { max-width: none; padding: 0; }
}

/* ---------- Телефон: плитки компактнее */
@media (max-width: 640px) {
  .card { min-height: 0; padding: 26px 24px 22px; }
  .card > .icon { width: 36px; height: 36px; margin-bottom: 1.1rem; }
  .card h3 { font-size: 1.35rem; }
  .tariff { padding: 48px 24px 24px; }
  .tariff-badge { left: 24px; }
  .features li { padding: 24px 22px; }
  .stats b { font-size: 4rem; }
  details.faq summary { font-size: 1.08rem; }
  details.faq > div { padding-right: 0; }
}

/* ---------- Картинки (трёхмерные рендеры из tools/render) */
.art, .card-art, .tile-art, .hero-art, .page-art, .post-art { display: block; max-width: 100%; height: auto; }
.card-art { width: 172px; margin: -16px 0 4px -18px; }
.hero-side { display: grid; justify-items: center; }
.hero-side .price-box { width: 100%; }
.hero-art { position: relative; z-index: 1; width: min(350px, 76%); margin: -30px 0 -38px; }
.tile-art { width: 168px; margin: -18px 0 auto -18px; }
.tile.w3 .tile-art { width: 210px; margin: -22px 0 auto -22px; }
.tile .tile-art + h3 { margin-top: .6rem; }
.statement-video { max-width: 1240px; margin: clamp(4px, 2vw, 24px) auto 0; }
.statement-video video { display: block; width: 100%; height: auto; }
@media (max-width: 700px) { .statement-video { margin-inline: -8%; } }
.page-art { width: 200px; margin: -8px auto -4px; }
.post-art { width: 150px; margin: -14px 0 6px -14px; }
.post-cover { display: grid; place-items: center; margin: 0 0 2.2rem; background: var(--bg-2); border-radius: var(--r-l); }
.post-cover img { width: min(380px, 74%); }
.not-found .page-art { width: 230px; }
@media (max-width: 899px) {
  .tile.w3 .tile-art { width: 170px; margin: -18px 0 auto -18px; }
}
@media (max-width: 640px) {
  /* услуги — в две колонки, как значки приложений: картинка, название, цена */
  .cards { grid-template-columns: 1fr 1fr; gap: 12px; }
  .card { padding: 14px 14px 16px; border-radius: 22px; }
  .card-art { width: 112px; margin: -6px 0 0 -10px; }
  .card h3 { font-size: 1.02rem; line-height: 1.2; letter-spacing: -.01em; }
  .card > p { display: none; }
  .card-foot { padding-top: .5rem; }
  .card .card-price { font-size: .88rem; font-weight: 500; color: var(--text-2); }
  .card-more { display: none; }
  .hero-art { width: min(250px, 64%); margin: -10px 0 -30px; }
  .tile-art, .tile.w3 .tile-art { width: 140px; margin: -16px 0 0 -16px; }
  .page-art { width: 160px; }
}