/* ==========================================================================
   КОМПОНЕНТЫ: шапка, прогресс, оглавление, таблицы, карточки, калькуляторы
   ========================================================================== */

/* --------------------------------------------------------------------------
   Шапка
   -------------------------------------------------------------------------- */
.hdr{
  position:fixed; inset:0 0 auto; z-index:90;
  transition:transform .45s var(--ease), background .3s, box-shadow .3s, backdrop-filter .3s;
}
.hdr__in{
  display:flex; align-items:center; gap:18px;
  height:66px; width:100%; max-width:var(--wrap); margin-inline:auto;
  padding-inline:var(--gut);
}
.hdr.is-stuck{
  background:rgba(245,247,250,.82);
  backdrop-filter:blur(18px) saturate(1.6);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);
  box-shadow:0 1px 0 var(--line), 0 8px 30px rgba(14,17,22,.05);
}
.hdr.is-hidden{ transform:translateY(-100%); }

.brand{ display:flex; align-items:center; gap:11px; flex:none; }
.brand__mark{ width:30px; height:30px; flex:none; }
.brand__txt{ line-height:1.06; }
.brand__t{ font-family:var(--display); font-size:15px; font-weight:600; letter-spacing:-.03em; display:block; }
.brand__s{ font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); }

/* Горизонтальная полоса прогресса — под шапкой */
.prog{
  position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg, var(--red) 0%, var(--ember) 42%, var(--gold) 72%, var(--red) 100%);
  background-size:220% 100%;
  transform-origin:0 50%; transform:scaleX(0);
  animation:progShift 7s linear infinite;
}
@keyframes progShift{ to{ background-position:220% 0; } }
.prog__head{
  position:absolute; right:0; top:50%; width:9px; height:9px; border-radius:50%;
  transform:translate(50%,-50%); background:#fff; box-shadow:0 0 0 2px var(--red), 0 0 12px rgba(217,31,50,.6);
}

.hdr__nav{
  display:flex; align-items:center; gap:1px; margin-left:auto;
  min-width:0; overflow:hidden;               /* страховка от переполнения строки */
}
.hdr__nav a{
  font-size:13px; font-weight:500; padding:8px 8px; border-radius:100px;
  color:var(--ink-2); transition:background .25s, color .25s; white-space:nowrap;
}
.hdr__nav a:hover{ background:rgba(14,17,22,.05); }
.hdr__nav a.is-active{ color:var(--red); font-weight:650; background:rgba(217,31,50,.075); }
.hdr__cta{ display:flex; align-items:center; gap:8px; flex:none; margin-left:14px; }

/* Логотип может сжиматься: подпись убираем раньше, чем начинается теснота */
.brand{ min-width:0; }
@media (max-width:1360px){ .brand__s{ display:none; } }

/* Кнопка-бургер и мобильное меню */
.burger{ display:flex; width:44px; height:44px; border-radius:12px; align-items:center; justify-content:center; flex:none; }
.burger:hover{ background:rgba(14,17,22,.05); }
.burger span{ display:block; width:19px; height:1.8px; background:var(--ink); border-radius:2px; position:relative; transition:transform .3s var(--ease); }
.burger span::before,.burger span::after{ content:''; position:absolute; left:0; width:19px; height:1.8px; background:var(--ink); border-radius:2px; transition:transform .3s var(--ease), top .3s; }
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }
.burger.on span{ transform:rotate(45deg); }
.burger.on span::before{ top:0; transform:rotate(-90deg); }
.burger.on span::after{ top:0; opacity:0; }

.mnav{
  position:fixed; inset:66px 0 auto; z-index:88; background:rgba(245,247,250,.97);
  backdrop-filter:blur(18px); border-bottom:1px solid var(--line);
  padding:14px var(--gut) 22px; max-height:calc(100vh - 66px); overflow-y:auto;
  transform:translateY(-12px); opacity:0; pointer-events:none; transition:opacity .3s, transform .3s;
}
/* на широких экранах — компактная сетка в две колонки */
@media (min-width:900px){
  .mnav.on{ display:grid; grid-template-columns:1fr 1fr; gap:0 28px; }
  .mnav a:nth-child(15),.mnav a:nth-child(16){ border-bottom:0; }
}
.mnav.on{ opacity:1; transform:none; pointer-events:auto; }
.mnav a{ display:flex; align-items:baseline; gap:12px; padding:11px 2px; border-bottom:1px solid var(--line-2); font-size:15.5px; font-weight:500; }
.mnav a .n{ font-family:var(--mono); font-size:11px; color:var(--red); flex:none; width:20px; }
.mnav a.is-active{ color:var(--red); }

/* --------------------------------------------------------------------------
   Оглавление (блок)
   -------------------------------------------------------------------------- */
.toc{ display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:0; border-top:1px solid var(--line); }
.toc a{
  display:grid; grid-template-columns:38px 1fr auto; gap:12px; align-items:center;
  padding:15px 6px 15px 0; border-bottom:1px solid var(--line-2);
  transition:padding .3s var(--ease), color .25s, background .25s;
}
.toc a:hover{ padding-left:10px; background:linear-gradient(90deg, rgba(217,31,50,.05), transparent 70%); }
.toc .n{ font-family:var(--mono); font-size:11.5px; color:var(--muted); }
.toc .t{ font-size:15.5px; font-weight:550; letter-spacing:-.012em; }
.toc .d{ font-family:var(--mono); font-size:11px; color:var(--muted-2); }
.toc a:hover .n,.toc a.is-active .n{ color:var(--red); }
.toc a.is-active .t{ color:var(--red); }
.toc a.is-active{ background:linear-gradient(90deg, rgba(217,31,50,.06), transparent 60%); }

/* Боковое липкое оглавление с индикатором места */
.rail{
  position:fixed; left:max(12px, calc(50% - 724px)); top:50%; transform:translateY(-50%); z-index:70;
  display:none; flex-direction:column; gap:2px; width:140px;
}
.rail a{ display:grid; grid-template-columns:16px 1fr; gap:9px; align-items:center; padding:4px 0; opacity:.62; transition:opacity .25s, transform .3s var(--ease); }
.rail a:hover{ opacity:1; transform:translateX(3px); }
.rail a.is-active{ opacity:1; }
.rail__dot{ width:16px; height:16px; position:relative; flex:none; }
.rail__dot::before{ content:''; position:absolute; left:0; top:50%; width:14px; height:1.5px; background:var(--muted-2); transform:translateY(-50%); transition:width .35s var(--ease), background .3s; }
.rail a.is-active .rail__dot::before{ width:16px; height:2.5px; background:var(--red); }
.rail__t{ font-family:var(--mono); font-size:10px; letter-spacing:.04em; color:var(--muted); text-transform:uppercase; line-height:1.3; }
.rail a.is-active .rail__t{ color:var(--ink); }
.rail__bar{ position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--line); }
.rail__fill{ position:absolute; left:0; width:2px; background:var(--red); transition:top .2s linear, height .2s linear; }

/* Плавающая кнопка «вверх» + мини-прогресс */
.fab{
  position:fixed; right:20px; bottom:20px; z-index:80;
  display:flex; align-items:center; gap:10px;
}
.fab__top{
  width:46px; height:46px; border-radius:50%; background:var(--ink); color:#fff;
  display:grid; place-items:center; box-shadow:var(--sh-2);
  opacity:0; pointer-events:none; transform:translateY(10px) scale(.9);
  transition:opacity .3s, transform .35s var(--ease), background .25s;
}
.fab__top.on{ opacity:1; pointer-events:auto; transform:none; }
.fab__top:hover{ background:var(--red); }
.fab__pct{
  font-family:var(--mono); font-size:11px; font-weight:600; color:var(--ink);
  background:rgba(255,255,255,.9); backdrop-filter:blur(8px);
  padding:5px 10px; border-radius:100px; box-shadow:var(--sh-1);
  opacity:0; transition:opacity .3s;
}
.fab__pct.on{ opacity:1; }

/* --------------------------------------------------------------------------
   Таблицы данных
   -------------------------------------------------------------------------- */
.tbl-wrap{ position:relative; }
.tbl{ font-size:14.5px; }
.tbl thead th{
  text-align:left; font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  padding:0 12px 11px 0; border-bottom:1.5px solid var(--ink); white-space:nowrap;
}
.tbl tbody td{ padding:12px 12px 12px 0; border-bottom:1px solid var(--line-2); vertical-align:middle; }
.tbl tbody tr{ transition:background .25s; }
.tbl tbody tr:hover{ background:rgba(217,31,50,.035); }
.tbl .num{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.tbl .place{ font-family:var(--mono); font-weight:600; font-size:13px; color:var(--muted); }
.tbl .co{ font-weight:600; letter-spacing:-.012em; }
.tbl .site{ font-family:var(--mono); font-size:12.5px; }
.tbl .site a{ color:var(--muted); border-bottom:1px solid transparent; transition:color .22s, border-color .22s; }
.tbl .site a:hover{ color:var(--red); border-bottom-color:var(--red); }
.tbl .site a[data-nofollow]::after{ content:'↗'; font-size:9px; margin-left:3px; opacity:.5; }
.co-card__s a{ color:var(--muted); transition:color .22s; }
.co-card__s a:hover{ color:var(--red); }
.co-card__s a[data-nofollow]::after{ content:'↗'; font-size:9px; margin-left:3px; opacity:.5; }
.tbl .idx{ font-family:var(--mono); font-weight:700; font-size:15px; }
.tbl tbody tr.top1{ background:linear-gradient(90deg, rgba(217,31,50,.07), transparent 60%); }
.tbl tbody tr.top1 .place,.tbl tbody tr.top1 .idx{ color:var(--red); }

.rel{
  display:inline-block; font-family:var(--mono); font-size:11.5px; font-weight:700;
  padding:3px 8px; border-radius:5px; letter-spacing:.02em;
}
.rel--ap{ background:var(--red); color:#fff; }
.rel--a { background:rgba(217,31,50,.13); color:var(--red-deep); }
.rel--b { background:rgba(200,162,74,.2); color:#7A5E15; }
.rel--c { background:rgba(14,17,22,.07); color:var(--muted); }

/* Мини-бар индекса */
.ibar{ display:flex; align-items:center; gap:9px; min-width:132px; }
.ibar__track{ flex:1; height:5px; border-radius:3px; background:rgba(14,17,22,.08); overflow:hidden; }
.ibar__fill{ height:100%; border-radius:3px; background:linear-gradient(90deg, var(--ember), var(--red)); transition:width 1.1s var(--ease-out); }

/* Фильтры */
.filters{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.chip{
  display:inline-flex; align-items:center; gap:8px; min-height:38px; padding:0 14px;
  border-radius:100px; box-shadow:inset 0 0 0 1.3px var(--line);
  font-size:13.5px; font-weight:500; background:#fff; transition:box-shadow .25s, background .25s, color .25s;
}
.chip:hover{ box-shadow:inset 0 0 0 1.3px var(--ink); }
.chip.on{ background:var(--ink); color:#fff; box-shadow:none; }
.chip.on .c{ color:rgba(255,255,255,.6); }
.chip .c{ font-family:var(--mono); font-size:11px; color:var(--muted-2); }

.search{
  display:flex; align-items:center; gap:9px; min-height:44px; padding:0 16px;
  border-radius:100px; background:#fff; box-shadow:inset 0 0 0 1.3px var(--line);
  transition:box-shadow .25s; flex:1; min-width:200px;
}
.search:focus-within{ box-shadow:inset 0 0 0 1.5px var(--ink); }
.search input{ border:0; background:none; outline:none; font:inherit; width:100%; font-size:14.5px; }
.search input::placeholder{ color:var(--muted-2); }

/* --------------------------------------------------------------------------
   Карточки компаний (мобильная подача таблицы)
   -------------------------------------------------------------------------- */
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.co-card{
  background:#fff; border-radius:var(--r-m); overflow:hidden;
  box-shadow:var(--sh-1); transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  display:flex; flex-direction:column;
}
.co-card:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); }
.co-card__img{ aspect-ratio:4/3; overflow:hidden; background:var(--bg); }
.co-card__img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out); }
.co-card:hover .co-card__img img{ transform:scale(1.05); }
.co-card__b{ padding:14px 15px 16px; display:flex; flex-direction:column; gap:9px; flex:1; }
.co-card__top{ display:flex; align-items:baseline; gap:10px; }
.co-card__pl{ font-family:var(--mono); font-size:11.5px; font-weight:700; color:var(--red); }
.co-card__n{ font-size:16px; font-weight:650; letter-spacing:-.018em; }
.co-card__s{ font-family:var(--mono); font-size:11.5px; color:var(--muted); }
.co-card__i{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; }
.co-card__v{ font-family:var(--mono); font-size:20px; font-weight:700; letter-spacing:-.02em; }
.co-card__flags{ display:flex; flex-wrap:wrap; gap:4px; }
.flag{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 6px; border-radius:4px; background:rgba(14,17,22,.055); color:var(--muted); white-space:nowrap;
}
.flag--cold{ background:rgba(31,138,91,.13); color:#136B45; }
.flag--corp{ background:rgba(217,31,50,.1); color:var(--red-deep); }
.flag--sketch{ background:rgba(200,162,74,.2); color:#7A5E15; }

/* --------------------------------------------------------------------------
   Метрики / счётчики
   -------------------------------------------------------------------------- */
.metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-block:1px solid var(--line); }
@media (max-width:860px){ .metrics{ grid-template-columns:1fr 1fr; } }
.metric{ background:var(--bg); padding:22px 18px 24px; }
.metric--paper{ background:var(--paper); }
.metric__v{ font-family:var(--display); font-size:clamp(28px,3.6vw,46px); font-weight:600; line-height:1; letter-spacing:-.04em; }
.metric__v .u{ font-size:.44em; font-weight:500; color:var(--muted); letter-spacing:0; margin-left:3px; }
.metric__l{ font-family:var(--mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); margin-top:9px; }
.metric--red .metric__v{ color:var(--red); }

/* --------------------------------------------------------------------------
   Первый экран
   -------------------------------------------------------------------------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; padding-top:96px; padding-bottom:clamp(28px,4vw,58px); overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:0; }
#goat-canvas,#fire-canvas{ position:absolute; inset:0; width:100%; height:100%; }
#goat-canvas{ z-index:1; }
#fire-canvas{ z-index:2; pointer-events:none; }
.hero__grad{ position:absolute; inset:0; z-index:0; }
.hero__veil{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    radial-gradient(130% 86% at 76% 38%, rgba(245,247,250,0) 40%, rgba(245,247,250,.42) 78%, var(--bg) 100%),
    linear-gradient(180deg, rgba(245,247,250,.5) 0%, rgba(245,247,250,0) 24%, rgba(245,247,250,0) 66%, var(--bg) 99%);
}
.hero__in{ position:relative; z-index:4; width:100%; }
.hero__h1{
  font-family:var(--display); font-weight:600; letter-spacing:-.042em; line-height:.94;
  font-size:clamp(33px,7.6vw,112px); margin:.1em 0 .3em; max-width:16ch;
}
.hero__h1 .fire{
  background:linear-gradient(96deg, var(--red-deep) 0%, var(--red) 26%, var(--ember) 58%, var(--gold) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:200% 100%; animation:fireShift 8s linear infinite;
}
@keyframes fireShift{ to{ background-position:200% 0; } }
.hero__lead{ max-width:62ch; font-size:clamp(15px,1.5vw,19.5px); color:var(--ink-2); margin-bottom:26px; }
.hero__kicker{ display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; margin-bottom:20px; }

.hero__side{
  position:absolute; right:var(--gut); bottom:clamp(30px,5vw,72px); z-index:5;
  width:min(310px,32vw); text-align:right;
}
@media (max-width:1100px){ .hero__side{ display:none; } }

/* Скролл-подсказка */
.scrollcue{ display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.scrollcue i{ display:block; width:1px; height:30px; background:linear-gradient(180deg, var(--red), transparent); animation:cueDrop 2.1s ease-in-out infinite; }
@keyframes cueDrop{ 0%{ transform:scaleY(.3); transform-origin:top; opacity:0; } 50%{ opacity:1; } 100%{ transform:scaleY(1); transform-origin:top; opacity:0; } }

/* --------------------------------------------------------------------------
   Топ-5: подиум
   -------------------------------------------------------------------------- */
.podium{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; }
@media (max-width:1180px){ .podium{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:820px){ .podium{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .podium{ grid-template-columns:1fr; } }
.pod{ background:var(--paper); padding:22px 20px 24px; position:relative; transition:background .3s; }
.pod:hover{ background:#fff; }
.pod__n{ font-family:var(--display); font-size:clamp(40px,5vw,68px); font-weight:600; line-height:.82; letter-spacing:-.05em; color:rgba(14,17,22,.11); }
.pod--1 .pod__n{ color:var(--red); }
.pod__name{ font-size:19px; font-weight:650; letter-spacing:-.022em; margin:12px 0 2px; }
.pod__site{ font-family:var(--mono); font-size:11.5px; color:var(--muted); }
.pod__row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; }
.pod__idx{ font-family:var(--mono); font-size:26px; font-weight:700; letter-spacing:-.03em; }
.pod__why{ font-size:13.5px; color:var(--muted); margin-top:11px; line-height:1.5; }

/* --------------------------------------------------------------------------
   Методика: критерии
   -------------------------------------------------------------------------- */
.crit-grid{ display:grid; grid-template-columns:1fr; gap:0; }
@media (min-width:900px){ .crit-grid{ grid-template-columns:1fr 1fr; gap:0 40px; } }
.crit{ display:grid; grid-template-columns:26px 1fr auto; gap:10px; align-items:start; padding:11px 0; border-bottom:1px solid var(--line-2); transition:background .25s; }
.crit:hover{ background:rgba(217,31,50,.03); }
.crit__n{ font-family:var(--mono); font-size:11px; color:var(--muted-2); padding-top:3px; }
.crit__t{ font-size:14.5px; font-weight:550; letter-spacing:-.01em; }
.crit__w{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; padding:2px 6px; border-radius:4px; background:rgba(14,17,22,.06); color:var(--muted); }
.crit__w[data-w="5"]{ background:var(--red); color:#fff; }
.crit__w[data-w="4"]{ background:rgba(217,31,50,.14); color:var(--red-deep); }
.crit__w[data-w="3"]{ background:rgba(200,162,74,.22); color:#7A5E15; }

/* --------------------------------------------------------------------------
   Калькуляторы
   -------------------------------------------------------------------------- */
.calc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:16px; }
@media (max-width:760px){ .calc-grid{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------------------
   СЦЕНА КАЛЬКУЛЯТОРА: один активный на всю ширину + переключатели
   -------------------------------------------------------------------------- */
.calc-tabs{
  display:flex; gap:6px; overflow-x:auto; padding:4px 2px 10px; margin-bottom:18px;
  scrollbar-width:thin; -webkit-overflow-scrolling:touch;
}
.calc-tabs::-webkit-scrollbar{ height:5px; }
.calc-tabs::-webkit-scrollbar-thumb{ background:var(--line); border-radius:4px; }
.ctab{
  flex:none; display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:0 16px;
  border-radius:100px; box-shadow:inset 0 0 0 1.3px var(--line); background:#fff;
  font-size:13.5px; font-weight:550; color:var(--ink-2); white-space:nowrap;
  transition:background .25s, color .25s, box-shadow .25s, transform .25s var(--ease);
}
.ctab:hover{ box-shadow:inset 0 0 0 1.3px var(--ink); transform:translateY(-1px); }
.ctab .n{ font-family:var(--mono); font-size:10.5px; color:var(--muted-2); }
.ctab.on{ background:var(--ink); color:#fff; box-shadow:none; }
.ctab.on .n{ color:rgba(255,255,255,.6); }

.calc-stage{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:0; background:var(--paper); border-radius:var(--r-l); box-shadow:var(--sh-2); overflow:hidden; }
@media (max-width:960px){ .calc-stage{ grid-template-columns:1fr; } }
.calc-stage .calc{ box-shadow:none; border-radius:0; background:transparent; padding:clamp(20px,2.6vw,34px); transform:none; }
.calc-stage .calc:hover{ box-shadow:none; transform:none; }
.calc-stage__side{ background:linear-gradient(150deg, rgba(217,31,50,.05), rgba(200,162,74,.035)); padding:clamp(20px,2.6vw,34px); display:flex; flex-direction:column; gap:14px; }
@media (max-width:960px){ .calc-stage__side{ border-top:1px solid var(--line); } }
.calc-stage__formula{ font-family:var(--mono); font-size:12.5px; line-height:1.75; color:var(--ink-2); background:rgba(255,255,255,.72); border-radius:var(--r-s); padding:13px 15px; }
.calc-stage__formula b{ color:var(--red-deep); }
.calc-pane[hidden]{ display:none !important; }

/* Сетка рецептов — карточки одинаковой высоты, всегда видимые */
.recipe-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:18px; align-items:start; }
@media (max-width:760px){ .recipe-grid{ grid-template-columns:1fr; } }
.recipe-grid .card{ opacity:1; transform:none; }

/* Крупная форма внутри сцены */
.calc-stage .calc__t{ font-size:clamp(18px,2.1vw,25px); }
.calc-stage .calc__f{ gap:15px; }
.calc-stage .field__row{ gap:14px; }
@media (max-width:560px){ .calc-stage .field__row{ grid-template-columns:1fr; } }
.calc{
  background:var(--paper); border-radius:var(--r-m); padding:20px 20px 22px;
  box-shadow:var(--sh-1); display:flex; flex-direction:column; gap:14px;
  transition:box-shadow .4s var(--ease), transform .4s var(--ease);
}
.calc:hover{ box-shadow:var(--sh-2); transform:translateY(-2px); }
.calc__h{ display:flex; align-items:baseline; gap:10px; }
.calc__n{ font-family:var(--mono); font-size:11px; font-weight:700; color:var(--red); flex:none; }
.calc__t{ font-size:16px; font-weight:650; letter-spacing:-.02em; line-height:1.24; }
.calc__f{ display:flex; flex-direction:column; gap:11px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field__l{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.field input[type=number],.field input[type=text],.field select{
  min-height:44px; padding:0 13px; border-radius:var(--r-s); border:1px solid var(--line);
  background:#fff; font:inherit; font-size:15px; outline:none; transition:border-color .25s, box-shadow .25s;
  font-variant-numeric:tabular-nums;
}
.field input:focus,.field select:focus{ border-color:var(--red); box-shadow:0 0 0 3px rgba(217,31,50,.1); }
.field select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%, var(--muted) 50%),linear-gradient(135deg, var(--muted) 50%,transparent 50%); background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:34px; }
.field__row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.rng{ -webkit-appearance:none; appearance:none; width:100%; height:26px; background:none; }
.rng::-webkit-slider-runnable-track{ height:4px; border-radius:3px; background:linear-gradient(90deg, var(--red) var(--pct,40%), rgba(14,17,22,.1) var(--pct,40%)); }
.rng::-moz-range-track{ height:4px; border-radius:3px; background:rgba(14,17,22,.1); }
.rng::-moz-range-progress{ height:4px; border-radius:3px; background:var(--red); }
.rng::-webkit-slider-thumb{ -webkit-appearance:none; width:19px; height:19px; border-radius:50%; background:#fff; box-shadow:0 0 0 2px var(--red), var(--sh-1); margin-top:-7.5px; cursor:pointer; transition:transform .2s; }
.rng::-webkit-slider-thumb:hover{ transform:scale(1.14); }
.rng::-moz-range-thumb{ width:17px; height:17px; border-radius:50%; background:#fff; border:2px solid var(--red); cursor:pointer; }

.seg{ display:flex; gap:2px; background:rgba(14,17,22,.05); padding:3px; border-radius:100px; }
.seg button{ flex:1; min-height:36px; border-radius:100px; font-size:12.5px; font-weight:550; color:var(--muted); transition:background .25s, color .25s; padding:0 6px; }
.seg button.on{ background:#fff; color:var(--ink); box-shadow:var(--sh-1); }

.calc__out{
  margin-top:auto; padding:15px 16px; border-radius:var(--r-s);
  background:linear-gradient(135deg, rgba(217,31,50,.055), rgba(255,90,43,.04));
  border:1px solid rgba(217,31,50,.14);
}
.calc__val{ font-family:var(--display); font-size:clamp(24px,2.9vw,34px); font-weight:600; letter-spacing:-.035em; line-height:1; color:var(--red-deep); }
.calc__note{ font-size:12.5px; color:var(--ink-2); margin-top:8px; line-height:1.5; }
.calc__brk{ font-family:var(--mono); font-size:12px; color:var(--muted); margin-top:7px; display:flex; flex-wrap:wrap; gap:4px 14px; }
.calc__go{ display:flex; justify-content:flex-start; }

/* Переключатель «таблица / карточки» */
.viewsw{ display:inline-flex; gap:2px; background:rgba(14,17,22,.05); padding:3px; border-radius:100px; }
.viewsw button{ min-height:34px; padding:0 14px; border-radius:100px; font-size:12.5px; font-weight:550; color:var(--muted); }
.viewsw button.on{ background:#fff; color:var(--ink); box-shadow:var(--sh-1); }

/* --------------------------------------------------------------------------
   Секции-контент: сетки и карточки общего вида
   -------------------------------------------------------------------------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3.4vw,56px); align-items:start; }
.split--wide-left{ grid-template-columns:1.25fr .75fr; }
.split--wide-right{ grid-template-columns:.75fr 1.25fr; }
@media (max-width:900px){ .split,.split--wide-left,.split--wide-right{ grid-template-columns:1fr; } }

.card{
  background:var(--paper); border-radius:var(--r-m); padding:20px 20px 22px;
  box-shadow:var(--sh-1); transition:box-shadow .4s var(--ease), transform .4s var(--ease);
}
.card:hover{ box-shadow:var(--sh-2); transform:translateY(-2px); }
.card--flush{ padding:0; overflow:hidden; }
.card--flush .card__b{ padding:18px 20px 20px; }

.grid-2{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }
.grid-3{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
.grid-4{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; }

.figure{ position:relative; overflow:hidden; border-radius:var(--r-m); background:var(--bg); }
.figure img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease-out); }
.figure:hover img{ transform:scale(1.045); }
.figure--4x3{ aspect-ratio:4/3; }
.figure--16x9{ aspect-ratio:16/9; }
.figure--3x4{ aspect-ratio:3/4; }
.figure--1x1{ aspect-ratio:1; }
/* Чек-лист */
.chk{
  display:grid; grid-template-columns:20px 1fr; gap:13px; align-items:start;
  padding:13px 4px; border-bottom:1px solid var(--line-2); cursor:pointer;
  transition:background .25s, padding .3s var(--ease);
}
.chk:hover{ background:rgba(217,31,50,.03); padding-left:10px; }
.chk input{ position:absolute; opacity:0; width:0; height:0; }
.chk__box{
  width:20px; height:20px; border-radius:5px; flex:none; margin-top:1px;
  box-shadow:inset 0 0 0 1.6px var(--line); background:#fff; position:relative;
  transition:background .25s, box-shadow .25s, transform .25s var(--ease);
}
.chk__box::after{
  content:''; position:absolute; left:6px; top:2.5px; width:6px; height:11px;
  border-right:2px solid #fff; border-bottom:2px solid #fff;
  transform:rotate(42deg) scale(0); transform-origin:center; transition:transform .25s var(--ease);
}
.chk input:checked + .chk__box{ background:var(--red); box-shadow:inset 0 0 0 1.6px var(--red); }
.chk input:checked + .chk__box::after{ transform:rotate(42deg) scale(1); }
.chk input:focus-visible + .chk__box{ outline:2px solid var(--red); outline-offset:2px; }
.chk input:checked ~ .chk__t{ color:var(--muted); text-decoration:line-through; text-decoration-color:rgba(217,31,50,.5); text-decoration-thickness:1.5px; }
.chk__t{ font-size:14.8px; line-height:1.5; letter-spacing:-.012em; transition:color .25s; }

.swatch{ display:inline-flex; gap:3px; vertical-align:middle; margin-right:6px; }
.swatch i{ width:12px; height:12px; border-radius:3px; box-shadow:inset 0 0 0 1px rgba(14,17,22,.12); }

/* Список выбора компаний для сравнения */
.cmp-list{ display:flex; flex-direction:column; max-height:230px; overflow-y:auto; padding-right:4px; }
.cmp-row{ display:grid; grid-template-columns:18px 26px 1fr auto; gap:8px; align-items:center; padding:7px 4px; border-bottom:1px solid var(--line-2); cursor:pointer; border-radius:4px; transition:background .2s; }
.cmp-row:hover{ background:rgba(217,31,50,.04); }
.cmp-row input{ accent-color:var(--red); width:15px; height:15px; }
.cmp-row__n{ font-family:var(--mono); font-size:11px; color:var(--muted-2); }
.cmp-row__t{ font-size:13.5px; font-weight:500; letter-spacing:-.01em; }
.cmp-row__v{ font-size:12.5px; font-weight:600; color:var(--muted); }

.figure__cap{
  position:absolute; left:0; right:0; bottom:0; padding:26px 16px 13px;
  background:linear-gradient(180deg, transparent, rgba(14,17,22,.72));
  color:#fff; font-size:13px; font-weight:550; letter-spacing:-.01em;
}

/* Нумерованные шаги */
.steps{ counter-reset:s; display:flex; flex-direction:column; gap:0; }
.step{ display:grid; grid-template-columns:44px 1fr; gap:14px; padding:15px 0; border-bottom:1px solid var(--line-2); }
.step::before{ counter-increment:s; content:counter(s,decimal-leading-zero); font-family:var(--mono); font-size:12px; color:var(--red); font-weight:600; padding-top:2px; }
.step__t{ font-size:15.5px; font-weight:600; letter-spacing:-.015em; margin-bottom:3px; }
.step__d{ font-size:14px; color:var(--ink-2); line-height:1.55; }

/* Список-маркеры
   Маркер позиционируется абсолютно, содержимое остаётся обычным инлайн-потоком.
   Иначе текстовые узлы становятся grid-элементами и список рассыпается
   в колонку по одному слову. */
.dlist{ display:flex; flex-direction:column; }
.dlist li{
  position:relative; padding:9px 0 9px 19px; border-bottom:1px solid var(--line-2);
  font-size:14.5px; line-height:1.55;
}
.dlist li::before{
  content:''; position:absolute; left:1px; top:16px;
  width:6px; height:6px; border-radius:50%; background:var(--red);
}
.dlist--check li{ padding-left:23px; }
.dlist--check li::before{
  content:''; left:1px; top:14px; width:11px; height:6px; border-radius:0; background:none;
  border-left:2px solid var(--red); border-bottom:2px solid var(--red); transform:rotate(-45deg);
}
.dlist li b{ font-weight:650; }

/* Ценовые карточки */
.price-card{ background:var(--paper); border-radius:var(--r-m); padding:18px; box-shadow:var(--sh-1); }
.price-card__r{ font-family:var(--mono); font-size:20px; font-weight:700; letter-spacing:-.03em; color:var(--red-deep); }
.price-card__n{ font-size:15.5px; font-weight:650; margin-bottom:2px; }

/* Тренды */
.trend{ display:grid; grid-template-columns:96px 1fr; gap:14px; align-items:start; padding:16px 0; border-bottom:1px solid var(--line-2); }
.trend:first-child{ padding-top:0; }
.trend__im{ aspect-ratio:1; border-radius:var(--r-s); overflow:hidden; background:var(--bg); }
.trend__im img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:640px){ .trend{ grid-template-columns:64px 1fr; gap:11px; } }

/* Рецепты */
.recipe__ing{ font-size:13.5px; color:var(--ink-2); background:rgba(14,17,22,.035); border-radius:var(--r-s); padding:12px 14px; line-height:1.55; }
.recipe__meta{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:1px; background:var(--line); border-radius:var(--r-s); overflow:hidden; }
.recipe__m{ background:var(--paper); padding:11px 12px; }
.recipe__m b{ display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:500; margin-bottom:3px; }
.recipe__m span{ font-size:14px; font-weight:600; letter-spacing:-.012em; }
.recipe__verdict{ font-size:13.5px; color:var(--ink-2); border-left:2px solid var(--red); padding-left:12px; line-height:1.55; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq-group{ margin-bottom:26px; }
.faq-group__h{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--red); padding-bottom:9px; border-bottom:1.5px solid var(--ink); margin-bottom:2px; }
.acc{ border-bottom:1px solid var(--line-2); }
.acc__q{ width:100%; display:grid; grid-template-columns:1fr 22px; gap:14px; align-items:start; text-align:left; padding:15px 0; font-size:15.5px; font-weight:550; letter-spacing:-.014em; line-height:1.42; transition:color .25s; }
.acc__q:hover{ color:var(--red); }
.acc__i{ position:relative; width:22px; height:22px; flex:none; margin-top:1px; }
.acc__i::before,.acc__i::after{ content:''; position:absolute; left:50%; top:50%; background:var(--muted); transform:translate(-50%,-50%); transition:transform .35s var(--ease), background .25s; }
.acc__i::before{ width:11px; height:1.5px; }
.acc__i::after{ width:1.5px; height:11px; }
.acc.on .acc__i::after{ transform:translate(-50%,-50%) rotate(90deg); }
.acc.on .acc__i::before{ background:var(--red); }
.acc.on .acc__q{ color:var(--red); }
.acc__a{ overflow:hidden; height:0; transition:height .42s var(--ease); }
.acc__a > div{ padding:0 34px 17px 0; font-size:14.5px; color:var(--ink-2); line-height:1.62; }
.faq-search{ max-width:520px; }
.faq-none{ padding:34px 0; color:var(--muted); font-size:15px; }

/* --------------------------------------------------------------------------
   Футер
   -------------------------------------------------------------------------- */
.ftr{ background:var(--paper); border-top:1px solid var(--line); padding-block:clamp(36px,4.6vw,64px) 28px; }
.ftr__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:clamp(20px,3vw,44px); }
@media (max-width:900px){ .ftr__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .ftr__grid{ grid-template-columns:1fr; } }
.ftr__h{ font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.ftr__l{ display:flex; flex-direction:column; gap:7px; }
.ftr__l a{ font-size:14px; color:var(--ink-2); transition:color .2s; width:fit-content; }
.ftr__l a:hover{ color:var(--red); }
.ftr__bot{ display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:space-between; align-items:center; margin-top:clamp(26px,3.6vw,46px); padding-top:20px; border-top:1px solid var(--line); font-size:12.5px; color:var(--muted); }

/* --------------------------------------------------------------------------
   Градиентные волны фона
   -------------------------------------------------------------------------- */
.waves{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.waves__b{ position:absolute; border-radius:50%; filter:blur(72px); opacity:.5; mix-blend-mode:multiply; }
@keyframes drift1{ 0%,100%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(6vw,-4vh,0) scale(1.16); } }
@keyframes drift2{ 0%,100%{ transform:translate3d(0,0,0) scale(1.08); } 50%{ transform:translate3d(-7vw,5vh,0) scale(1); } }
@keyframes drift3{ 0%,100%{ transform:translate3d(0,0,0) scale(1); } 33%{ transform:translate3d(4vw,6vh,0) scale(1.12); } 66%{ transform:translate3d(-5vw,-3vh,0) scale(.95); } }
.waves__b--1{ width:60vw; height:60vw; left:-14vw; top:-16vw; background:radial-gradient(circle, rgba(217,31,50,.2), transparent 66%); animation:drift1 26s ease-in-out infinite; }
.waves__b--2{ width:52vw; height:52vw; right:-12vw; top:22vh; background:radial-gradient(circle, rgba(255,90,43,.16), transparent 66%); animation:drift2 32s ease-in-out infinite; }
.waves__b--3{ width:66vw; height:66vw; left:16vw; bottom:-26vw; background:radial-gradient(circle, rgba(200,162,74,.15), transparent 68%); animation:drift3 38s ease-in-out infinite; }
@media (max-width:760px){
  .waves__b{ filter:blur(52px); opacity:.42; }
}

/* Линейные градиентные полосы на бэках секций */
.gradband{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.gradband::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(112deg, rgba(217,31,50,.055) 0%, rgba(255,90,43,.028) 34%, rgba(200,162,74,.038) 62%, rgba(217,31,50,.05) 100%);
  background-size:240% 100%; animation:gband 22s linear infinite;
}
@keyframes gband{ to{ background-position:240% 0; } }
.gradband--soft::before{ background:linear-gradient(112deg, rgba(217,31,50,.035), rgba(255,90,43,.018) 40%, rgba(200,162,74,.026) 72%, rgba(217,31,50,.032)); background-size:240% 100%; }
.gradband--rule{ background:linear-gradient(180deg, transparent 0%, rgba(217,31,50,.02) 48%, transparent 100%); }
.band > .wrap{ position:relative; z-index:1; }

/* --------------------------------------------------------------------------
   SVG-иллюстрации: переливание цветов
   -------------------------------------------------------------------------- */
.svgicon{ overflow:visible; }
.svgicon [data-flow]{ animation:flowHue 7s linear infinite; }
.svgicon [data-flow="2"]{ animation-duration:9.4s; }
.svgicon [data-flow="3"]{ animation-duration:11.6s; }
.svgicon [data-flow="4"]{ animation-duration:8.2s; }
@keyframes flowHue{
  0%  { filter:hue-rotate(0deg) saturate(1); }
  50% { filter:hue-rotate(-24deg) saturate(1.28); }
  100%{ filter:hue-rotate(0deg) saturate(1); }
}
.svgicon [data-dash]{ stroke-dasharray:6 5; animation:dashRun 9s linear infinite; }
@keyframes dashRun{ to{ stroke-dashoffset:-110; } }
.svgicon [data-pulse]{ animation:svgPulse 3.2s var(--ease) infinite; }
@keyframes svgPulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.1); opacity:.72; } }
.svgicon [data-spin]{ transform-origin:center; animation:svgSpin 22s linear infinite; }
@keyframes svgSpin{ to{ transform:rotate(360deg); } }
.svgicon [data-breathe]{ animation:svgBreathe 5.4s ease-in-out infinite; }
@keyframes svgBreathe{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }

/* Ряд SVG-плиток */
.iconset{ display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:10px; }
.iconbox{
  aspect-ratio:1; border-radius:var(--r-s); background:var(--paper);
  box-shadow:var(--sh-1); display:grid; place-items:center; padding:15px;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.iconbox:hover{ transform:translateY(-3px) scale(1.03); box-shadow:var(--sh-2); }
.iconbox svg{ width:100%; height:100%; }

/* --------------------------------------------------------------------------
   Canvas-панели
   -------------------------------------------------------------------------- */
.cvpanel{ background:var(--paper); border-radius:var(--r-m); box-shadow:var(--sh-1); overflow:hidden; }
.cvpanel__h{ display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; justify-content:space-between; padding:15px 18px; border-bottom:1px solid var(--line); }
.cvpanel__t{ font-size:15px; font-weight:650; letter-spacing:-.018em; }
.cvpanel__c{ padding:14px; }
.cvpanel canvas{ width:100%; height:auto; aspect-ratio:auto; border-radius:var(--r-s); display:block; }
.cvpanel__c{ overflow:hidden; }
.cvpanel__lg{ display:flex; flex-wrap:wrap; gap:6px 14px; padding:0 18px 15px; }
.lg{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10.5px; color:var(--muted); }
.lg i{ width:9px; height:9px; border-radius:2px; flex:none; }

/* --------------------------------------------------------------------------
   Адаптив: планшет и мобильный
   -------------------------------------------------------------------------- */
@media (max-width:1499px){
  .rail{ display:none !important; }
}
@media (min-width:1500px){
  .rail{ display:flex; }
  .wrap,.wrap-narrow{ padding-left:calc(var(--gut) + 124px); }
  .hdr__in{ padding-left:calc(var(--gut) + 124px); }
}
@media (max-width:1200px){
  .hdr__nav{ display:none; }
}
@media (max-width:760px){
  body{ font-size:16px; }
  .hdr__in{ height:58px; gap:10px; }
  .brand__mark{ width:26px; height:26px; }
  .brand__t{ font-size:13.5px; }
  .brand__s{ font-size:8.5px; }
  .mnav{ inset:58px 0 auto; }
  section[id]{ scroll-margin-top:82px; }
  .hdr__cta .btn{ min-height:40px; padding:0 14px; font-size:13px; }
  .hero{ min-height:auto; padding-top:110px; padding-bottom:44px; }
  .hero__h1{ max-width:100%; }
  .metric{ padding:17px 14px 19px; }
  .calc{ padding:16px 15px 18px; }
  .card{ padding:16px 15px 18px; }
  .toc{ grid-template-columns:1fr; }
  .toc a{ grid-template-columns:30px 1fr; }
  .toc .d{ display:none; }
  .calc-grid{ grid-template-columns:1fr; }
  .cards{ grid-template-columns:1fr; }
  .grid-2,.grid-3{ grid-template-columns:1fr; }
  .faq-group__h{ position:sticky; top:58px; background:var(--bg); z-index:2; }
}
@media (max-width:420px){
  .btn{ min-height:46px; padding:0 18px; font-size:14px; }
  .field__row{ grid-template-columns:1fr; }
}

/* Печать */
@media print{
  .hdr,.rail,.fab,.waves,.mnav,.prog{ display:none !important; }
  body{ background:#fff; }
  .reveal{ opacity:1 !important; transform:none !important; }
  section[id]{ break-inside:avoid; }
}