/* ═══════════════════════════════════════════
   LCS GO — брутализм, американский work-truck
   Жёсткая сетка, толстые чёрные линии, никаких
   скруглений и мягких теней. Тень только сдвигом.
   ═══════════════════════════════════════════ */

:root{
  --ink:#0A0A0A;          /* всё чёрное — линии, текст, рамки */
  --paper:#FFFFFF;
  --cream:#F4F1EA;        /* тёплая бумага вместо серого */
  --dim:#3D3D3D; --mute:#6B6B6B;
  --acc:var(--brand,#26A17B);   /* цвет бренда, подставляется движком */
  --red:#E8140C;          /* американский красный */
  --gold:#FFB700;
  --line:3px solid var(--ink);
  --line-thin:2px solid var(--ink);
  --f:'Archivo','Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --wrap:1240px;
  --nav-h:62px;
}

/* ─── ТЁМНАЯ ТЕМА ───
   Инверсия, а не перекраска: бумага чернеет, чернила белеют.
   Красный на чёрном слепнет — берём светлее. */
:root[data-theme="dark"]{
  --ink:#F2F0EA; --paper:#0C0C0C; --cream:#161616;
  --dim:#C9C6BE; --mute:#8A8781;
  --acc:var(--brand-dark,#3ECFA0); --red:#FF4A3D; --gold:#FFC933;
}
html{color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 8px)}
body{font-family:var(--f);font-size:17px;line-height:1.5;color:var(--ink);
  background:var(--paper);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
svg{fill:none;stroke-linecap:square;stroke-linejoin:miter}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{line-height:.95;font-weight:900;letter-spacing:-.03em;
  text-transform:uppercase}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}

/* ─── ПЕРЕКЛЮЧЕНИЕ ЯЗЫКА ───
   Прячем неактивный язык. При показе возвращаем ЕГО display,
   иначе блочные заголовки схлопываются в строку. */
[data-lang-ru]{display:none !important}
html[lang="ru"] [data-lang-en]{display:none !important}
html[lang="ru"] span[data-lang-ru],
html[lang="ru"] b[data-lang-ru],
html[lang="ru"] em[data-lang-ru],
html[lang="ru"] i[data-lang-ru]{display:inline !important}
html[lang="ru"] h1[data-lang-ru],
html[lang="ru"] h2[data-lang-ru],
html[lang="ru"] h3[data-lang-ru],
html[lang="ru"] h4[data-lang-ru],
html[lang="ru"] p[data-lang-ru],
html[lang="ru"] div[data-lang-ru],
html[lang="ru"] summary[data-lang-ru]{display:block !important}
html[lang="ru"] li[data-lang-ru]{display:list-item !important}
html[lang="ru"] a.btn[data-lang-ru],
html[lang="ru"] button[data-lang-ru]{display:inline-flex !important}
html[lang="ru"] label[data-lang-ru]{display:block !important}
html[lang="ru"] .fcols li a[data-lang-ru],
html[lang="ru"] .fbot .legal a[data-lang-ru]{display:inline !important}
/* .rtx — span, но по макету блочный; общее правило для span показало бы
   обе языковые версии сразу */
.rating .rtx[data-lang-ru]{display:none !important}
html[lang="ru"] .rating .rtx[data-lang-en]{display:none !important}
html[lang="ru"] .rating .rtx[data-lang-ru]{display:block !important}
/* Языковые версии в ячейках таблицы и полосах — своя раскладка */
html[lang="ru"] .kpi div[data-lang-ru],
html[lang="ru"] .tick span[data-lang-ru]{display:block !important}

/* ═══ НАВИГАЦИЯ ═══ */
.nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:100;
  background:var(--paper);border-bottom:var(--line)}
.nav .in{max-width:var(--wrap);margin:0 auto;padding:0 28px;height:100%;
  display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
/* Плашка знака: фон — чернила, сам знак — бумага. В тёмной теме
   переменные инвертируются, поэтому контраст держится сам.
   Раньше знак был залит жёстким #fff и пропадал на светлой плашке. */
.brand .mk{width:46px;height:46px;flex-shrink:0;border:var(--line-thin);
  background:var(--ink)}
.brand .mk path{fill:var(--paper)}
.brand .wm{font-weight:900;font-size:24px;letter-spacing:-.05em;text-transform:uppercase}
.brand .wm i{font-style:normal;color:var(--acc)}
.nav .links{display:flex;gap:0;margin-left:auto;align-items:center;height:100%}
.nav .links a{font-size:13px;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;padding:0 18px;height:100%;display:flex;align-items:center;
  border-left:var(--line-thin);transition:background .12s,color .12s}
.nav .links a:hover{background:var(--ink);color:var(--paper)}
.nav .tools{display:flex;height:100%;flex-shrink:0}
.iconbtn{width:46px;border:none;border-left:var(--line-thin);background:var(--paper);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  color:var(--ink);font-size:12px;font-weight:900;font-family:var(--f);
  text-transform:uppercase;transition:background .12s,color .12s}
.iconbtn:hover{background:var(--ink);color:var(--paper)}
.iconbtn svg{width:17px;height:17px;stroke:currentColor;stroke-width:2.4}
/* Рейтинг живёт в герое под лидом — см. .rating ниже */
.nav .navcta{display:inline-flex;align-items:center;padding:0 22px;height:100%;
  background:var(--acc);color:#fff;font-size:13px;font-weight:900;
  text-transform:uppercase;letter-spacing:.06em;border-left:var(--line-thin);
  transition:background .12s}
.nav .navcta:hover{background:var(--ink)}
.moon{display:none}
html[data-theme="dark"] .sun{display:none}
html[data-theme="dark"] .moon{display:block}

/* ═══ КНОПКИ ═══
   Тень — жёсткий сдвиг блока, без размытия. При нажатии
   кнопка «доезжает» до тени. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:900;font-size:15px;padding:16px 30px;cursor:pointer;
  font-family:var(--f);text-transform:uppercase;letter-spacing:.05em;
  border:var(--line);background:var(--paper);color:var(--ink);
  box-shadow:5px 5px 0 var(--ink);transition:transform .1s,box-shadow .1s}
.btn:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)}
.btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--ink)}
.btn-p{background:var(--acc);color:#fff}
.btn-lg{padding:20px 38px;font-size:17px}

/* ═══ ГЕРОЙ ═══ */
.hero{padding:calc(var(--nav-h) + 56px) 0 0;position:relative;overflow:hidden}
/* Диагональная штриховка вместо мягкого градиента */
.hero:before{content:"";position:absolute;top:0;right:0;width:44%;height:100%;
  z-index:0;pointer-events:none;opacity:.07;
  background:repeating-linear-gradient(45deg,var(--ink) 0 2px,transparent 2px 11px)}
.hero .wrap{position:relative;z-index:1}

.eyebrow{display:inline-flex;align-items:center;gap:9px;background:var(--ink);
  color:var(--paper);padding:9px 18px;font-size:12px;font-weight:900;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:30px}
.eyebrow svg{width:14px;height:14px;stroke:var(--gold);stroke-width:2.6}

.hero h1{font-size:clamp(46px,9.2vw,116px);margin-bottom:26px;max-width:14ch;
  letter-spacing:-.045em}
.hero h1 em{font-style:normal;color:var(--acc);
  /* Подчёркивание толстой линией, а не цветом — читается на печати */
  box-shadow:inset 0 -.14em 0 var(--gold)}
.usflag{width:clamp(58px,8vw,106px);height:auto;display:inline-block;
  vertical-align:baseline}
.hero .lead{font-size:clamp(17px,2vw,21px);color:var(--dim);max-width:56ch;
  line-height:1.5;margin-bottom:34px;font-weight:500}
.hero .lead b{color:var(--ink);font-weight:800}
/* ─── РЕЙТИНГ В ГЕРОЕ ───
   Плашка с чёрной рамкой и жёсткой тенью — как кнопки.
   Звёзды залиты золотом: у прочих иконок stroke, поэтому fill явно. */
.rating{display:inline-flex;align-items:center;gap:14px;margin-bottom:34px;
  border:var(--line);padding:12px 20px;background:var(--paper);
  box-shadow:5px 5px 0 var(--ink)}
.rating .stars{display:inline-flex;gap:3px}
.rating .stars svg{width:26px;height:26px;stroke:none}
/* Заливка на path, а не на svg — иначе перебивает градиент пятой звезды */
.rating .stars svg path{fill:var(--gold)}
.rating .stars svg path[fill^="url"]{fill:url(#st9)}
.rating b{font-size:26px;font-weight:900;letter-spacing:-.04em;line-height:1}
.rating .rtx{font-size:12.5px;font-weight:800;color:var(--dim);line-height:1.3;
  text-transform:uppercase;letter-spacing:.04em;max-width:22ch;
  padding-left:14px;border-left:var(--line-thin)}

.hero .cta{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.hero .note{font-size:13px;color:var(--mute);margin-bottom:56px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em}

/* ═══ KPI — ТАБЛО ═══
   Одна коробка, разделённая линиями. Не четыре карточки. */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);border:var(--line);
  border-bottom:none;background:var(--paper)}
.kpi{padding:26px 24px 30px;border-right:var(--line)}
.kpi:last-child{border-right:none}
.kpi b{display:block;font-size:clamp(34px,4.6vw,58px);font-weight:900;
  letter-spacing:-.05em;line-height:.9;margin-bottom:12px}
.kpi:nth-child(1) b{color:var(--acc)}
.kpi:nth-child(2) b{color:var(--red)}
.kpi:nth-child(3) b{color:var(--ink)}
.kpi:nth-child(4) b{color:var(--acc)}
.kpi span{font-size:12.5px;color:var(--dim);display:block;line-height:1.35;
  font-weight:700;text-transform:uppercase;letter-spacing:.04em}

/* ═══ БЕГУЩАЯ ПОЛОСА ═══
   Чёрная лента через всю ширину. Трек продублирован — сдвиг
   ровно на половину, поэтому стык не виден. */
.ticker{background:var(--ink);color:var(--paper);padding:15px 0;overflow:hidden;
  border-block:var(--line)}
.tick-track{display:flex;gap:0;width:max-content;animation:slide 40s linear infinite}
@keyframes slide{to{transform:translateX(-50%)}}
.tick-track span{font-size:14px;font-weight:900;white-space:nowrap;padding:0 22px;
  text-transform:uppercase;letter-spacing:.08em;display:flex;align-items:center;gap:11px}
/* Цветная полоска продукта вместо общего ромба */
.tick-track span:before{content:"";width:22px;height:5px;background:var(--pc,var(--gold));
  flex-shrink:0}
@media (prefers-reduced-motion:reduce){.tick-track{animation:none}}

/* ═══ СЕКЦИИ ═══ */
section{padding:96px 0;border-bottom:var(--line)}
section.cream{background:var(--cream)}
.shead{margin-bottom:56px;max-width:66ch}
/* Номер секции — крупная цифра слева, как в печатном макете */
.shead .num{font-size:13px;font-weight:900;letter-spacing:.16em;color:var(--acc);
  display:block;margin-bottom:16px;text-transform:uppercase}
.shead h2{font-size:clamp(34px,6.4vw,78px);margin-bottom:20px;letter-spacing:-.04em}
.shead h2 em{font-style:normal;color:var(--acc)}
.shead p{font-size:clamp(16px,1.8vw,19px);color:var(--dim);line-height:1.5;
  font-weight:500;max-width:60ch}

/* ═══ ПРОБЛЕМА — СПИСОК, НЕ КАРТОЧКИ ═══
   Крупные пронумерованные строки с толстыми разделителями. */
.probs{border-top:var(--line)}
.prob{display:grid;grid-template-columns:100px 1fr;gap:32px;padding:38px 0;
  border-bottom:var(--line);align-items:start}
.prob .no{font-size:clamp(40px,5vw,68px);font-weight:900;line-height:.85;
  color:var(--red);letter-spacing:-.05em}
.prob h3{font-size:clamp(21px,2.6vw,30px);margin-bottom:12px;letter-spacing:-.03em}
.prob p{font-size:16px;color:var(--dim);line-height:1.55;max-width:60ch;font-weight:500}

/* ═══ УСЛУГИ — СЕТКА-КЛЕТКА ═══
   Ячейки смыкаются рамками, зазора нет: одна таблица, а не карточки. */
.servs{display:grid;grid-template-columns:repeat(3,1fr);border:var(--line);
  border-right:none;border-bottom:none}
.serv{padding:36px 32px 40px;border-right:var(--line);border-bottom:var(--line);
  position:relative;transition:background .12s,color .12s}
.serv:hover{background:var(--ink);color:var(--paper)}
.serv:hover p,.serv:hover li{color:var(--paper)}
.serv:hover .sno{color:var(--gold)}
/* Последняя ячейка в ряду из трёх — пустая заливка, чтобы сетка была ровной */
.serv.fill{background:var(--acc);color:#fff}
.serv.fill:hover{background:var(--acc)}
.serv.fill p{color:#fff}
.serv .sno{font-size:12px;font-weight:900;letter-spacing:.14em;margin-bottom:20px;
  display:block;color:var(--acc);transition:color .12s}
.serv h3{font-size:clamp(22px,2.4vw,28px);margin-bottom:14px;letter-spacing:-.03em}
.serv p{font-size:15px;color:var(--dim);line-height:1.55;margin-bottom:22px;font-weight:500}
.serv ul{list-style:none;display:flex;flex-direction:column;gap:0}
.serv li{font-size:13.5px;color:var(--dim);padding:10px 0 10px 24px;position:relative;
  border-top:var(--line-thin);font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;line-height:1.35}
/* Маркер — квадрат, не галочка и не кружок */
.serv li:before{content:"";position:absolute;left:0;top:14px;width:9px;height:9px;
  background:var(--acc)}
.serv:hover li:before{background:var(--gold)}
.serv.fill li{color:#fff;border-color:rgba(255,255,255,.35)}
.serv.fill li:before{background:#fff}

.prodcta{margin-top:34px;display:flex;gap:16px;flex-wrap:wrap}

/* ═══ СЕМЬЯ ПРОДУКТОВ — СЕТКА-КЛЕТКА 4×2 ═══
   Ячейки смыкаются рамками. Вся карточка — ссылка. */
/* Сетка-клетка 4×2: ячейки смыкаются рамками, видны все продукты сразу */
.prods{display:grid;grid-template-columns:repeat(4,1fr);border:var(--line);
  border-right:none;border-bottom:none}
.prod{padding:30px 26px 28px;border-right:var(--line);border-bottom:var(--line);
  display:flex;flex-direction:column;position:relative;
  transition:background .12s,color .12s}
.prod:hover{background:var(--ink);color:var(--paper)}
.prod:hover p{color:var(--paper)}
.prod:hover .pno{color:var(--gold)}
.prod:hover .arw{color:var(--gold);transform:translateX(6px)}
/* Шапка карточки: значок слева, крупный номер справа */
.phead{display:flex;align-items:center;justify-content:space-between;
  gap:14px;margin-bottom:20px}
.prod .pno{font-size:clamp(34px,3.4vw,46px);font-weight:900;letter-spacing:-.06em;
  line-height:.8;color:var(--pc);transition:color .12s}
.prod h3{font-size:clamp(19px,2vw,23px);margin-bottom:12px;letter-spacing:-.03em}
.prod p{font-size:14px;color:var(--dim);line-height:1.5;font-weight:500;
  flex:1;margin-bottom:18px}
.prod .arw{font-size:24px;font-weight:900;line-height:1;color:var(--pc);
  transition:transform .14s,color .12s;align-self:flex-start}

/* Знак продукта — плашка в его фирменном цвете.
   --pc задаётся на карточке, поэтому цвет живёт в одном месте. */
.prod .pmk{width:46px;height:46px;background:var(--pc);flex-shrink:0;
  display:flex;align-items:center;justify-content:center}
.prod .pmk svg{width:28px;height:28px;fill:#fff;stroke:none}
/* На ховере карточка чернеет — плашка остаётся цветной и держит опознавание */
.prod:hover .pmk{box-shadow:0 0 0 2px var(--paper)}

/* Цвет задаётся классом, а не позицией: трек дублируется,
   и nth-child промахнулся бы на второй половине ленты */
.p-voice{--pc:#26A17B}  /* фирменный зелёный */
.p-chat {--pc:#22C3D6}  /* бирюзовый */
.p-post {--pc:#8B5CF6}  /* фиолетовый */
.p-phone{--pc:#F97316}  /* оранжевый */
.p-ads  {--pc:#FBBF24}  /* жёлтый */
.p-meta {--pc:#2563EB}  /* синий */
.p-seo  {--pc:#10B981}  /* зелёный светлее VOICE */
.p-send {--pc:#EF4444}  /* красный */

/* ═══ ИНДУСТРИИ — ВЕРТИКАЛЬНЫЕ ЛЕНТЫ ═══
   Четыре колонки, каждая едет сама, соседние в разные стороны.
   Список внутри трека продублирован — сдвиг ровно на половину
   высоты не даёт видимого стыка. */
.inds{border-block:var(--line);margin-bottom:22px;overflow:hidden;position:relative}
/* Края уходят в фон секции, а не обрубаются */
.inds:before,.inds:after{content:"";position:absolute;top:0;bottom:0;width:100px;
  z-index:2;pointer-events:none}
.inds:before{left:0;background:linear-gradient(90deg,var(--cream),transparent)}
.inds:after{right:0;background:linear-gradient(270deg,var(--cream),transparent)}
/* Две полосы навстречу: верхняя влево, нижняя вправо */
.irow{overflow:hidden}
.irow + .irow{border-top:var(--line)}
.irow .itrack{display:flex;width:max-content;animation:indleft 46s linear infinite}
.irow:nth-child(2) .itrack{animation-name:indright;animation-duration:52s}
@keyframes indleft{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes indright{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.irow .itrack{animation:none}}

.ind{padding:18px 22px;border-right:var(--line);position:relative;flex-shrink:0;
  display:flex;gap:14px;align-items:center;white-space:nowrap}
/* Значок сектора — квадратная плашка со знаком, цвет один на всю ленту */
.ind .iic{width:38px;height:38px;flex-shrink:0;background:var(--ink);
  display:flex;align-items:center;justify-content:center}
.ind .iic svg{width:20px;height:20px;stroke:var(--paper);stroke-width:2.2}
.ind.ai .iic{background:var(--acc)}
.ind.ai .iic svg{stroke:#fff}
.ind .txt{min-width:0}
.ind b{display:block;font-size:14px;font-weight:900;text-transform:uppercase;
  letter-spacing:-.02em;line-height:1.15;margin-bottom:5px}
.ind span{display:none}
html[lang="ru"] .ind b{display:none}
html[lang="ru"] .ind span{display:block;font-size:14px;font-weight:900;
  text-transform:uppercase;letter-spacing:-.02em;line-height:1.15;margin-bottom:5px}
.ind i{font-style:normal;font-size:13px;font-weight:800;color:var(--acc);
  letter-spacing:.02em}
.indnote{font-size:13px;color:var(--mute);font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;line-height:1.5}
.indnote b{color:var(--ink);font-weight:900}
/* Образец значка AI-native внутри подписи под лентой */
.indnote .dot{display:inline-block;width:11px;height:11px;background:var(--acc);
  vertical-align:-1px;margin-right:2px}

/* ═══ ФЛАГИ — ОДНА ГОРИЗОНТАЛЬНАЯ ЛЕНТА ═══
   Трек продублирован, поэтому сдвиг ровно на половину
   не даёт видимого стыка. На ховере встаёт. */
.flags{border-block:var(--line);overflow:hidden;position:relative;margin-bottom:40px}
.flags:before,.flags:after{content:"";position:absolute;top:0;bottom:0;width:90px;
  z-index:2;pointer-events:none}
.flags:before{left:0;background:linear-gradient(90deg,var(--paper),transparent)}
.flags:after{right:0;background:linear-gradient(270deg,var(--paper),transparent)}
.ftrack{display:flex;width:max-content;animation:flagslide 44s linear infinite}
.flags:hover .ftrack{animation-play-state:paused}
@keyframes flagslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ftrack{animation:none}}
.ftrack span{padding:20px 26px;border-right:var(--line);flex-shrink:0;
  font-size:16px;font-weight:900;letter-spacing:.03em;white-space:nowrap;
  display:flex;align-items:center;gap:13px;transition:background .12s,color .12s}
.ftrack span:hover{background:var(--ink);color:var(--paper)}
/* Эмодзи-флаг крупнее подписи — он и есть главный знак в ленте */
.ftrack i{font-style:normal;font-size:34px;line-height:1}

/* ═══ КАК РАБОТАЕМ — ЛЕНТА ШАГОВ ═══ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);border:var(--line);
  border-right:none}
.step{padding:32px 26px 36px;border-right:var(--line);position:relative}
.step .n{font-size:clamp(44px,5vw,72px);font-weight:900;line-height:.8;
  letter-spacing:-.06em;color:var(--ink);margin-bottom:22px;display:block;
  opacity:.16}
.step h3{font-size:clamp(19px,2vw,24px);margin-bottom:12px}
.step p{font-size:14.5px;color:var(--dim);line-height:1.5;font-weight:500}
.step .when{display:inline-block;font-size:11.5px;font-weight:900;letter-spacing:.1em;
  text-transform:uppercase;background:var(--gold);color:var(--ink);
  padding:6px 12px;margin-top:18px}

/* ═══ ТАРИФЫ — СМЫКАЮЩИЕСЯ КОЛОНКИ ═══ */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);border:var(--line);
  border-right:none}
.tier{border-right:var(--line);display:flex;flex-direction:column;position:relative}
.tier.best{background:var(--ink);color:var(--paper)}
.tier.best p,.tier.best li{color:var(--paper)}
/* В тёмной теме --ink светлый, и выделенный тариф выворачивался белым.
   Держим его синим — акцент остаётся акцентом в обеих темах. */
html[data-theme="dark"] .tier.best{background:var(--acc);color:#fff}
html[data-theme="dark"] .tier.best p,
html[data-theme="dark"] .tier.best li{color:#fff}
html[data-theme="dark"] .tier.best .th{border-color:#fff}
html[data-theme="dark"] .tier.best .price{color:var(--gold)}
html[data-theme="dark"] .tier.best .price s{color:rgba(255,255,255,.8)}
html[data-theme="dark"] .tier.best li{border-color:rgba(255,255,255,.3)}
.tier .tag{position:absolute;top:0;right:0;font-size:11px;font-weight:900;
  letter-spacing:.1em;text-transform:uppercase;background:var(--gold);
  color:var(--ink);padding:8px 14px}
.tier .th{padding:34px 30px 26px;border-bottom:var(--line)}
.tier.best .th{border-color:var(--paper)}
.tier .th h3{font-size:clamp(24px,2.6vw,32px);margin-bottom:12px}
.tier .th p{font-size:14.5px;color:var(--dim);line-height:1.45;min-height:64px;
  font-weight:500}
.tier .price{font-size:clamp(38px,4.4vw,56px);font-weight:900;letter-spacing:-.05em;
  margin-top:20px;line-height:.9;color:var(--acc)}
.tier.best .price{color:var(--gold)}
.tier .price s{display:block;font-size:12px;font-weight:800;color:var(--mute);
  text-decoration:none;letter-spacing:.04em;margin-top:14px;text-transform:uppercase;
  line-height:1.35}
.tier.best .price s{color:var(--dim)}
.tier ul{list-style:none;padding:0 30px;display:flex;flex-direction:column;
  gap:0;flex:1}
.tier li{font-size:14px;color:var(--dim);padding:13px 0 13px 24px;position:relative;
  line-height:1.35;font-weight:600;border-bottom:var(--line-thin)}
.tier li:last-child{border-bottom:none}
.tier.best li{border-color:rgba(242,240,234,.22)}
.tier li:before{content:"";position:absolute;left:0;top:17px;width:9px;height:9px;
  background:var(--acc)}
.tier.best li:before{background:var(--gold)}
.tier .foot{padding:26px 30px 30px}
.tier .foot .btn{width:100%}
.tier.best .foot .btn{box-shadow:5px 5px 0 var(--gold)}
.tier.best .foot .btn:hover{box-shadow:3px 3px 0 var(--gold)}

/* ═══ FAQ — СТРОКИ ═══ */
.faq{border-top:var(--line)}
.faq details{border-bottom:var(--line)}
.faq summary{padding:26px 0;font-weight:900;font-size:clamp(17px,2vw,22px);
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  gap:20px;align-items:center;text-transform:uppercase;letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font-size:30px;font-weight:400;color:var(--acc);
  flex-shrink:0;line-height:1;transition:transform .18s}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq .a{padding:0 0 28px;font-size:16px;color:var(--dim);line-height:1.6;
  max-width:74ch;font-weight:500}

/* ═══ ФИНАЛ + ФОРМА ═══ */
.fgrid{display:grid;grid-template-columns:1fr 1fr;border:var(--line)}
.fleft{padding:48px 40px;border-right:var(--line)}
.fleft h2{font-size:clamp(30px,4.4vw,56px);margin-bottom:20px;letter-spacing:-.04em}
.fleft h2 em{font-style:normal;color:var(--acc)}
.fleft .lead{font-size:17px;color:var(--dim);line-height:1.55;margin-bottom:32px;
  font-weight:500}
.fsteps{display:flex;flex-direction:column;border-top:var(--line-thin)}
.fstep{padding:18px 0;display:flex;gap:16px;align-items:flex-start;
  border-bottom:var(--line-thin)}
.fstep .n{width:30px;height:30px;background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;font-weight:900;
  font-size:14px;flex-shrink:0}
.fstep b{display:block;font-size:15px;margin-bottom:4px;text-transform:uppercase;
  letter-spacing:-.01em}
.fstep span{font-size:14px;color:var(--dim);line-height:1.45;font-weight:500}

.formwrap{padding:48px 40px;background:var(--cream)}
.formwrap h3{font-size:clamp(24px,2.8vw,32px);margin-bottom:8px}
.formwrap .sub{font-size:14px;color:var(--dim);margin-bottom:28px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em}
.fld{margin-bottom:18px}
.fld label{display:block;font-size:12px;font-weight:900;margin-bottom:8px;
  text-transform:uppercase;letter-spacing:.09em}
.fld input,.fld select,.fld textarea{width:100%;padding:14px 16px;
  border:var(--line-thin);background:var(--paper);color:var(--ink);
  font-size:16px;font-family:var(--f);font-weight:600;
  transition:box-shadow .1s,transform .1s}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;
  box-shadow:4px 4px 0 var(--acc)}
.fld textarea{resize:vertical;min-height:80px}
.formwrap .btn{width:100%;margin-top:8px}
.formwrap .fine{font-size:12px;color:var(--mute);margin-top:16px;line-height:1.5;
  font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.okmsg{display:none;background:var(--acc);color:#fff;border:var(--line);
  padding:22px;font-size:16px;font-weight:800;margin-top:16px;
  box-shadow:5px 5px 0 var(--ink);text-transform:uppercase}
.okmsg.show{display:block}

/* ═══ ПОЛОСА КОНТАКТОВ ═══
   Телефон по центру крупно, под ним почта. Флаг США — прямоугольный
   SVG без скруглений, в тон остальной вёрстке. */
.callbar{background:var(--acc);color:#fff;padding:60px 0;border-bottom:var(--line);
  text-align:center}
.callbar .in{display:flex;flex-direction:column;align-items:center;gap:26px}
/* white-space:nowrap — иначе длинный номер рвётся на три строки */
.callbar a{font-size:clamp(24px,4.2vw,52px);font-weight:900;letter-spacing:-.05em;
  display:inline-flex;align-items:center;gap:16px;text-transform:uppercase;
  transition:color .12s;line-height:1;white-space:nowrap;max-width:100%}
.callbar a:hover{color:var(--gold)}
.callbar a svg.ic{width:34px;height:34px;stroke:currentColor;stroke-width:2.6;flex-shrink:0}
.callbar .lbl{font-size:12px;font-weight:900;letter-spacing:.16em;
  text-transform:uppercase;display:block;margin-bottom:12px;opacity:.8}
/* Флаг в полосе — с белой рамкой, иначе белые полосы тонут в зелёном фоне */
.callbar .usf{width:clamp(44px,5.6vw,74px);height:auto;flex-shrink:0;
  border:2px solid #fff;display:block}
.callbar .mail{font-size:clamp(19px,2.8vw,34px);letter-spacing:-.03em}
.callbar .mail svg.ic{width:26px;height:26px}

/* ═══ ПОДВАЛ ═══ */
footer{background:var(--paper);padding:76px 0 32px}
/* Крупный подвал всегда тёмный — перебивает базовый footer */
footer.bigfoot{background:#0A0A0A!important;color:#fff!important}
.bigfoot .wm{color:var(--paper)}.bigfoot .fabout .mk{background:var(--acc);border:none}
.bigfoot .fabout p{color:rgba(242,240,234,.7)}
.bigfoot h4{color:rgba(242,240,234,.5);border-bottom:1px solid rgba(242,240,234,.18)}
.bigfoot li a{color:rgba(242,240,234,.75)}.bigfoot li a:hover{color:var(--acc)}
.bigfoot .fbar p{color:rgba(242,240,234,.5)}
.bigfoot .legal a{color:rgba(242,240,234,.5)}
.bigfoot .fcont a{color:var(--acc)}
.fcols{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1fr;gap:40px;
  padding-bottom:52px;border-bottom:var(--line)}
.fcols .brand{margin-bottom:20px}
.fcols .brand .mk{width:58px;height:58px}
.fcols .brand .wm{font-size:29px}
.fcols .about p{font-size:15px;color:var(--dim);line-height:1.6;max-width:34ch;
  margin-bottom:26px;font-weight:500}
.fcols h4{font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);margin-bottom:18px;padding-bottom:12px;border-bottom:var(--line-thin)}
.fcols ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.fcols li a{font-size:14px;color:var(--dim);font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;transition:color .12s}
.fcols li a:hover{color:var(--acc)}
.fcont{display:flex;flex-direction:column;gap:12px}
.fcont a{display:inline-flex;align-items:center;gap:12px;font-size:17px;
  font-weight:900;transition:color .12s;text-transform:uppercase}
.fcont a:hover{color:var(--acc)}
.fcont a svg{width:19px;height:19px;stroke:var(--acc);stroke-width:2.5;flex-shrink:0}

.fstates{padding:34px 0;border-bottom:var(--line)}
.fstates h4{font-size:12px;font-weight:900;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);margin-bottom:16px}
.fstates .list{display:flex;flex-wrap:wrap;gap:0}
.fstates .list span{font-size:13px;font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;padding:7px 16px 7px 0;margin-right:16px;
  border-right:var(--line-thin);line-height:1}
.fstates .list span:last-child{border-right:none;color:var(--acc)}

.fbot{padding-top:26px;display:flex;justify-content:space-between;gap:20px;
  flex-wrap:wrap;align-items:center}
.fbot p{font-size:12.5px;color:var(--mute);max-width:62ch;line-height:1.5;
  font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.fbot .legal{display:flex;gap:22px;flex-wrap:wrap}
.fbot .legal a{font-size:12.5px;color:var(--mute);font-weight:800;
  text-transform:uppercase;letter-spacing:.05em;transition:color .12s}
.fbot .legal a:hover{color:var(--acc)}

/* ═══ АДАПТИВ ═══ */
@media (max-width:1080px){
  .servs{grid-template-columns:repeat(2,1fr)}
  .steps,.tiers{grid-template-columns:repeat(2,1fr)}
  .prods{grid-template-columns:repeat(2,1fr)}
  .inds{grid-template-columns:repeat(3,1fr)}
  .fcols{grid-template-columns:1fr 1fr;gap:32px}
  .fcols .about{grid-column:1 / -1}
  .fcols .about p{max-width:none}
  .nav .links{display:none}
}
@media (max-width:430px){
  .rating{gap:10px;padding:10px 14px}
  .rating .stars svg{width:21px;height:21px}
  .rating b{font-size:21px}
  .rating .rtx{font-size:11.5px;padding-left:10px}
  /* Логотип 46px на узкой шапке не оставляет места кнопкам */
  .nav .brand .mk{width:36px;height:36px}
  .nav .brand .wm{font-size:19px}
  .nav .in{gap:10px;padding:0 12px}
  .nav .navcta{padding:0 14px;font-size:12px}
  .iconbtn{width:38px}
}
@media (max-width:760px){
  section{padding:62px 0}
  .hero{padding:calc(var(--nav-h) + 36px) 0 0}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .kpi{border-bottom:var(--line)}
  .kpi:nth-child(2){border-right:none}
  .kpi:nth-child(4){border-right:none}
  .servs,.steps,.tiers,.prods{grid-template-columns:1fr}
  .serv,.step,.tier,.prod{border-right:none;border-bottom:var(--line)}
  .inds{grid-template-columns:repeat(2,1fr)}
  .flags span{flex:1 1 50%;min-width:0}
  .steps{border-bottom:none}
  .tiers{border-bottom:none}
  .fgrid{grid-template-columns:1fr}
  .fleft{border-right:none;border-bottom:var(--line);padding:34px 24px}
  .formwrap{padding:34px 24px}
  .prob{grid-template-columns:1fr;gap:12px;padding:28px 0}
  .fcols{grid-template-columns:1fr}
  .callbar .in{gap:32px}
  .wrap{padding:0 20px}
}

/* ─── ЛЕНТЫ ВО ВСЮ ШИРИНУ ───
   Блоки лежат внутри .wrap, но должны идти от края до края, как тикер.
   Вырываем их наружу: 50vw в каждую сторону от центра контейнера. */
/* width:100vw раздувал сам .wrap, и соседние сетки (.steps) уезжали
   на всю ширину вместе с ним. Задаём ширину полями, а не width —
   контейнер тогда остаётся прежним. */
.inds,.flags{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  border-left:none;border-right:none}
.indnote{margin-top:22px}
