/* ============================================================================
   lc.css — стили портала lynkco.com.ru
   Визуальная система снята с официального европейского lynkco.com
   (бандл main.e4fe8b22.css, 698 347 байт). Superiority Plan, раздел 6.

   Шрифт: Inter вместо проприетарного LynkCo Type — решение владельца 19.09.2026.
   Причина техническая: в LynkCo Type 432 глифа и ноль кириллических.
   size-adjust:92% подогнан по метрикам оригинала (x-height 88,5%, cap-height 93,5%).
   ============================================================================ */

@font-face{
  font-family:'LC Sans';font-style:normal;font-weight:300 800;font-display:swap;
  size-adjust:92%;
  src:local('Inter');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'LC Sans';font-style:normal;font-weight:300 800;font-display:swap;
  size-adjust:92%;
  src:local('Inter');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  /* — поверхности — */
  --bg:#000000;
  --surface-1:#131313;
  --surface-2:#1C1C1C;
  --surface-3:#262626;
  --surface-4:#393939;
  --surface-5:#464646;
  --line:#4A4A4A;

  /* — текст — */
  --text:#FFFFFF;
  --text-2:#E6E6E6;
  --text-3:#B3B3B3;
  --text-disabled:#B3B3B3;
  --bg-disabled:#2F2F2F;

  /* — бренд — */
  --green-500:#1EF1C6;      /* единственная реальная переменная оригинала */
  --green-300:#0EE7BB;
  --green-400:#0DCEA7;
  --green-600:#0A9E80;
  --green-800:#076E59;
  --urban-jungle:#043E32;
  --purple:#5D1EF1;
  --magenta:#D34DF4;
  --orange:#F47F4D;
  --plum:#33043E;
  --error:#F44D6F;
  --warning:#F1C71E;

  --selected-color:var(--green-500);
  --radius:8px;
  --header-h:56px;
  --font:'LC Sans',Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
}
.skip-link{position:absolute;left:16px;top:-80px;z-index:1000;padding:12px;background:var(--bg);color:var(--text)}
.skip-link:focus{top:8px}
.calculator{display:grid;gap:22px;margin-block:24px;padding:24px;background:var(--surface-1);border-radius:12px}
.calc-field{display:grid;gap:8px;font-size:1rem}
.calc-field input,.calc-field select{width:100%;min-width:0;min-height:48px;padding:12px;font:inherit;border:1px solid var(--line);border-radius:8px;color:var(--text);background:var(--surface-2)}
.calc-field input::placeholder{color:var(--text-3)}
.calc-field input[aria-invalid=true]{border-color:var(--error)}
.calc-submit{min-height:48px;padding:12px 22px;border:0;border-radius:8px;background:var(--green-500);color:var(--bg);font:inherit;font-weight:600;cursor:pointer;white-space:normal}
.calc-check{display:flex;align-items:flex-start;gap:12px;cursor:pointer}
.calc-check input{min-width:24px;min-height:24px;accent-color:var(--green-500)}
.calc-result{display:block;line-height:1.6;min-height:3.2em}
.calc-result.error{color:var(--error)}
.cfg-trim{padding:24px}
.cfg-trim h3{margin-block:0 16px}
.cfg-tab,.cfg-chip{height:auto!important;min-height:44px;padding-block:10px!important;white-space:normal}
.source{overflow-wrap:anywhere}
.privacy-banner{position:fixed;z-index:100;bottom:16px;right:16px;max-width:480px;margin-left:16px;padding:22px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px}
.privacy-banner p{font-size:14px;line-height:1.5;margin-bottom:12px}
.privacy-actions{display:flex;gap:12px;flex-wrap:wrap}
.privacy-actions button{flex:1;min-height:44px;cursor:pointer;border:1px solid var(--line);border-radius:8px;padding:10px;background:var(--surface-3);color:var(--text);font:inherit}
@media(max-width:600px){.calculator,.cfg-trim{padding:16px}.hero .content{padding-top:40px}.t-h1-big{overflow-wrap:break-word}}
@media(min-width:1024px){ :root{ --header-h:72px } }

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}   /* иначе display:flex у .mobile-menu перебивает атрибут */
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background-color:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:1rem;line-height:1.5rem;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--green-500);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;transition:color .18s ease,text-decoration-color .18s ease}
a:hover{color:var(--green-300);text-decoration-color:var(--green-600)}
:focus-visible{outline:2px dashed var(--green-500);outline-offset:2px}
::selection{background:var(--green-500);color:#000}

/* ============================ 1. СЕТКА ==================================== */
/* Оригинал: 4 кол / 24px → 8 кол / 32px → 12 кол / 64px → 12×80px + 11×16px = 1136px */
.grid{
  display:grid;position:relative;width:100%;
  grid-template-columns:repeat(4,1fr);gap:24px;
  padding-left:24px;padding-right:24px;
}
@media(min-width:768px){ .grid{grid-template-columns:repeat(8,1fr);gap:16px;
  padding-left:32px;padding-right:32px;justify-content:center} }
@media(min-width:1024px){ .grid{grid-template-columns:repeat(12,1fr);gap:16px;
  padding-left:64px;padding-right:64px} }
@media(min-width:1280px){ .grid{grid-template-columns:repeat(12,80px);gap:16px;
  padding-left:0;padding-right:0;margin-inline:auto} }
.grid.noPad{padding-left:0!important;padding-right:0!important}

.full{grid-column:1/span 4}
@media(min-width:768px){ .full{grid-column:1/span 8} }
@media(min-width:1024px){ .full{grid-column:1/span 12} }

.col-text{grid-column:1/span 4}
@media(min-width:768px){ .col-text{grid-column:1/span 7} }
@media(min-width:1024px){ .col-text{grid-column:1/span 8} }

.col-half{grid-column:1/span 4}
@media(min-width:768px){ .col-half{grid-column:span 4} }
@media(min-width:1024px){ .col-half{grid-column:span 6} }

/* вертикальный ритм секций */
.section{width:100%}
.padTop{padding-top:48px}
.padBottom{padding-bottom:48px}
@media(min-width:768px){ .padTop{padding-top:56px} .padBottom{padding-bottom:56px} }
@media(min-width:1024px){ .padTop{padding-top:80px} .padBottom{padding-bottom:80px} }
.padTopS{padding-top:24px}
@media(min-width:1024px){ .padTopS{padding-top:40px} }
.alt{background-color:var(--surface-1)}

/* ========================== 2. ТИПОГРАФИКА ================================ */
/* Шкала оригинала: rem-значения сохранены как есть. Medium-начертание → 600. */
.t-h1-big{font-size:2.625rem;line-height:3.125rem;letter-spacing:-.063rem;font-weight:600;margin:0}
@media(min-width:768px){ .t-h1-big{font-size:3.5rem;line-height:4.188rem} }
@media(min-width:1024px){ .t-h1-big{font-size:4.5rem;line-height:5.4rem;letter-spacing:-.125rem} }

.t-h1{font-size:2rem;line-height:2.375rem;letter-spacing:0;font-weight:600;margin:0}
@media(min-width:768px){ .t-h1{font-size:2.5rem;line-height:3rem;letter-spacing:-.063rem} }
@media(min-width:1024px){ .t-h1{font-size:3rem;line-height:3.5rem} }

.t-h2{font-size:1.5rem;line-height:1.813rem;font-weight:600;margin:0}
@media(min-width:768px){ .t-h2{font-size:2rem;line-height:2.375rem} }

.t-h3{font-size:1.25rem;line-height:1.5rem;font-weight:600;margin:0}
@media(min-width:768px){ .t-h3{font-size:1.5rem;line-height:1.813rem} }

.t-h4{font-size:1.125rem;line-height:1.375rem;font-weight:600;margin:0}
@media(min-width:768px){ .t-h4{font-size:1.25rem;line-height:1.5rem} }

.overline{font-size:.875rem;line-height:1.063rem;letter-spacing:.25rem;
  text-transform:uppercase;font-weight:600;color:var(--text);margin:0}
@media(min-width:768px){ .overline{font-size:1rem;line-height:1.2rem} }

.body{font-size:1rem;line-height:1.5rem;margin:0 0 1rem}
@media(min-width:1024px){ .body{font-size:1.125rem;line-height:1.75rem} }
.lede{font-size:1.125rem;line-height:1.625rem;color:var(--text-2);margin:0 0 1rem}
@media(min-width:1024px){ .lede{font-size:1.375rem;line-height:2rem} }
.small{font-size:.875rem;line-height:1.25rem;color:var(--text-3)}
@media(min-width:1024px){ .small{font-size:1rem;line-height:1.5rem} }
.muted{color:var(--text-2)}

/* проза статьи */
.prose{max-width:68ch}
.prose h2{font-size:1.5rem;line-height:1.813rem;font-weight:600;margin:40px 0 12px}
@media(min-width:768px){ .prose h2{font-size:2rem;line-height:2.375rem;margin-top:56px} }
.prose h3{font-size:1.25rem;line-height:1.5rem;font-weight:600;margin:28px 0 10px}
.prose p{font-size:1rem;line-height:1.625rem;margin:0 0 1rem;color:var(--text-2)}
@media(min-width:1024px){ .prose p{font-size:1.125rem;line-height:1.8rem} }
.prose ul,.prose ol{margin:0 0 1rem;padding-left:1.25rem;color:var(--text-2)}
.prose li{margin-bottom:.5rem;line-height:1.6}
.prose strong{color:var(--text);font-weight:600}
.prose a{color:var(--green-500)}
.prose figure{margin:28px 0}
.prose figure img{border-radius:var(--radius);width:100%}
.prose figcaption{font-size:.875rem;line-height:1.25rem;color:var(--text-3);margin-top:10px}

/* ============================ 3. ШАПКА ==================================== */
body>header.header{
  display:flex;align-items:center;justify-content:space-between;
  background-color:var(--bg);height:var(--header-h);
  padding:0 8px 0 18px;position:sticky;left:0;top:0;z-index:11;
}
@media(min-width:768px){ body>header.header{padding:0 32px} }
.header .mark{display:flex;align-items:center;gap:8px;color:var(--text);
  text-decoration:none;font-weight:700;font-size:1rem;letter-spacing:.01em;
  border-radius:39px;padding:10px 16px;margin-left:-16px}
.header .mark small{display:block;font-size:.5rem;letter-spacing:.22em;
  font-weight:500;color:var(--text-3);text-transform:uppercase;margin-top:2px}
.desktop-nav{display:none}
@media(min-width:1024px){
  .desktop-nav{display:flex;flex-direction:row;align-items:center;gap:8px}
  .desktop-nav a{display:flex;align-items:center;height:40px;padding:0 16px;
    border-radius:40px;color:var(--text);text-decoration:none;font-weight:600;
    font-size:1.125rem;line-height:1.375rem;transition:background .18s ease}
  .desktop-nav a:hover{background:var(--urban-jungle);color:var(--text)}
}
.burger{display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 10px;background:var(--surface-3);border:none;
  border-radius:40px;cursor:pointer}
.burger span{display:block;height:2px;background:var(--text);border-radius:2px}
@media(min-width:1024px){ .burger{display:none} }

.mobile-menu{position:fixed;inset:0;z-index:20;background:var(--surface-1);
  padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.mobile-menu a{display:flex;align-items:center;min-height:56px;padding:0 20px;
  background:var(--surface-3);border-radius:var(--radius);color:var(--text);
  text-decoration:none;font-weight:600}
.mobile-menu a:hover{background:var(--urban-jungle)}
.mobile-menu .close{align-self:flex-end;width:44px;height:44px;background:var(--surface-5);
  border:none;border-radius:50%;color:var(--text);font-size:24px;cursor:pointer;margin-bottom:8px}

/* ============================ 4. КНОПКИ =================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:52px;padding:0 24px;border:none;border-radius:300px;
  font-family:var(--font);font-weight:600;font-size:1rem;line-height:1.188rem;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background .2s ease-in-out,color .2s ease-in-out;
}
.btn.primary{background:var(--selected-color);color:#000}
.btn.primary:hover{background:var(--green-600);color:#000}
.btn.primary:active{background:var(--green-800)}
.btn.white{background:#fff;color:#000}
.btn.white:hover{background:var(--text-3)}
.btn.grey{background:var(--surface-2);color:var(--text)}
.btn.grey:hover{background:var(--urban-jungle)}
.btn.outline{background:none;color:var(--text);box-shadow:inset 0 0 0 1px var(--text)}
.btn.outline:hover{box-shadow:inset 0 0 0 1px var(--green-500);color:var(--green-500)}
.btn[disabled],.btn.disabled{background:var(--bg-disabled);color:var(--text-disabled);
  pointer-events:none}
.btn-row{display:flex;flex-direction:column;gap:16px;width:100%}
@media(min-width:768px){ .btn-row{flex-direction:row;width:fit-content;align-items:center} }

/* ============================= 5. HERO ==================================== */
.hero{position:relative;display:grid;align-items:end;
  min-height:calc(85vh - var(--header-h));overflow:hidden}
.hero.compact{min-height:auto;padding-top:64px;padding-bottom:56px}
.hero .bg{position:absolute;inset:0;z-index:0}
.hero .bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--object-pos,center)}
.hero .bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.56),rgba(0,0,0,.8))}
.hero .content{position:relative;z-index:1;display:flex;flex-direction:column;gap:24px;
  grid-column:1/span 4;grid-row:1;padding-bottom:48px}
@media(min-width:768px){
  .hero .content{grid-column:1/span 6;gap:32px}
  .hero .content .txt{gap:24px}
}
@media(min-width:1024px){ .hero .content{grid-column:1/span 7} }
.hero .txt{display:flex;flex-direction:column;gap:16px}
.hero .txt .lede{max-width:654px;color:var(--text-2)}

/* чипы фактов под заголовком */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;height:34px;padding:0 14px;
  border-radius:300px;background:rgba(255,255,255,.1);backdrop-filter:blur(6px);
  font-size:.875rem;font-weight:500;color:var(--text)}
.chip b{color:var(--green-500);font-weight:600;margin-right:6px}

/* ======================= 6. БЛОК КЛЮЧЕВЫХ ЦИФР ============================ */
.figures{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media(min-width:768px){ .figures{grid-template-columns:repeat(4,1fr);gap:16px} }
.figure{display:flex;flex-direction:column;gap:6px;padding-bottom:16px;
  border-bottom:4px solid var(--warning)}
.figure b{font-size:2rem;line-height:2.25rem;font-weight:600;font-variant-numeric:tabular-nums}
@media(min-width:1024px){ .figure b{font-size:2.5rem;line-height:2.75rem} }
.figure span{font-size:.875rem;line-height:1.25rem;color:var(--text-2)}

/* ========================= 7. ТАБЛИЦЫ ТТХ ================================= */
/* Оригинал даёт таблицу в двух режимах: table-view на десктопе, card-view на мобиле. */
.table-view{display:none}
@media(min-width:768px){
  .table-view{display:block;position:relative;margin-top:32px;
    padding:40px 36px;border-radius:var(--radius);background-color:var(--surface-2)}
  .table-view .scroller{width:100%;overflow-x:auto;scrollbar-width:thin}
  .table-view table{width:100%;border-collapse:collapse}
  .table-view thead{border-bottom:1px solid var(--line)}
  .table-view th{min-width:160px;padding:0 32px 24px;text-align:left;vertical-align:top;
    font-weight:600;text-transform:uppercase;font-size:.875rem;letter-spacing:.06em;
    color:var(--text-3)}
  .table-view td{padding:20px 32px;vertical-align:top;font-size:1rem;line-height:1.5rem;
    border-bottom:1px solid rgba(74,74,74,.45);font-variant-numeric:tabular-nums}
  .table-view tbody tr:last-child td{border-bottom:0}
  .table-view .lead{position:sticky;left:0;z-index:2;padding-left:0;
    background-color:var(--surface-2);background-clip:padding-box;
    color:var(--text-2);font-weight:500}
  .table-view .lead::after{content:"";position:absolute;left:100%;top:0;
    width:1px;height:100%;background:var(--line)}
}
@media(min-width:1024px){
  .table-view{padding:48px 40px 48px 36px}
  .table-view th{min-width:176px}
  .table-view td{font-size:1.125rem;line-height:1.75rem}
}

.card-view{display:block;position:relative;margin-top:28px}
@media(min-width:768px){ .card-view{display:none} }
.card-view .scroller{width:100%;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none}
.card-view .scroller::-webkit-scrollbar{display:none}
.card-view .rail{display:flex;gap:20px;padding-bottom:24px}
.spec-card{display:flex;flex:0 0 auto;flex-direction:column;gap:20px;
  width:calc(100% - 40px);padding:24px;border-radius:var(--radius);
  background-color:var(--surface-2);scroll-snap-align:start}
@media(min-width:420px){ .spec-card{width:320px} }
.spec-card .heading{padding-bottom:16px;border-bottom:1px solid var(--line);
  text-transform:uppercase;font-weight:600;font-size:.875rem;letter-spacing:.06em}
.spec-card .cell{display:flex;flex-direction:column;gap:6px}
.spec-card .cell .k{font-size:.8125rem;color:var(--text-3)}
.spec-card .cell .v{font-size:1rem;font-variant-numeric:tabular-nums}

/* простая контентная таблица (цены, сравнения) */
.tbl{width:100%;overflow-x:auto;border-radius:var(--radius);
  background:var(--surface-2);margin:24px 0}
.tbl table{width:100%;border-collapse:collapse;font-size:.9375rem}
.tbl th,.tbl td{padding:14px 18px;text-align:left;
  border-bottom:1px solid rgba(74,74,74,.45);vertical-align:top}
.tbl thead th{font-size:.8125rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-3);font-weight:600;white-space:nowrap}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl td.num,.tbl th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl .hl{color:var(--green-500);font-weight:600}

/* ========================== 8. КАРТОЧКИ =================================== */
.cards{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:768px){ .cards{grid-template-columns:repeat(2,1fr);gap:16px} }
@media(min-width:1024px){ .cards.three{grid-template-columns:repeat(3,1fr)} }
.mcard{display:flex;flex-direction:column;background:var(--surface-2);
  border-radius:var(--radius);overflow:hidden;text-decoration:none;color:var(--text);
  transition:background .2s ease}
.mcard:hover{background:var(--urban-jungle);color:var(--text)}
.mcard img{width:100%;aspect-ratio:4/3;object-fit:cover}
.mcard .body-wrap{display:flex;flex-direction:column;gap:8px;padding:20px 22px 24px}
.mcard .badge{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-500);font-weight:600}
.mcard h3{font-size:1.25rem;font-weight:600;margin:0}
.mcard p{font-size:.9375rem;color:var(--text-2);margin:0}

/* ============================ 9. FAQ ====================================== */
.faq-list{display:flex;flex-direction:column;gap:1px;background:var(--line);
  border-radius:var(--radius);overflow:hidden;margin-top:24px}
.faq-list details{background:var(--surface-2)}
.faq-list summary{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:20px 24px;cursor:pointer;font-weight:600;font-size:1.125rem;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font-size:1.5rem;color:var(--green-500);
  flex:0 0 auto;line-height:1}
.faq-list details[open] summary::after{content:"–"}
.faq-list details[open] summary{color:var(--green-500)}
.faq-list p{margin:0;padding:0 24px 22px;color:var(--text-2);line-height:1.65;max-width:68ch}

/* ==================== 10. КРОШКИ, ОГЛАВЛЕНИЕ, ССЫЛКИ ====================== */
.crumbbar{background:var(--surface-1);border-bottom:1px solid var(--surface-3)}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  padding:12px 0;font-size:.8125rem;color:var(--text-3)}
.crumbs a{color:var(--text-3);text-decoration:none}
.crumbs a:hover{color:var(--green-500)}
.crumbs span{color:var(--text-3)}

.layout{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:1024px){ .layout{grid-template-columns:minmax(0,1fr) 240px;gap:48px} }
.toc{font-size:.875rem;align-self:start}
@media(min-width:1024px){ .toc{position:sticky;top:calc(var(--header-h) + 16px)} }
.toc b{display:block;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:10px}
.toc a{display:block;padding:6px 10px;color:var(--text-2);text-decoration:none;
  box-shadow:inset 0 -1px var(--surface-3);border-radius:2px}
.toc a:hover{box-shadow:inset 0 -1px var(--green-500);background:var(--surface-1);color:var(--text)}

.rel{display:grid;grid-template-columns:1fr;gap:16px;margin-top:8px}
@media(min-width:768px){ .rel{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1024px){ .rel{grid-template-columns:repeat(4,1fr)} }
.rel a{display:flex;flex-direction:column;gap:6px;padding:20px;background:var(--surface-2);
  border-radius:var(--radius);text-decoration:none;color:var(--text);transition:background .2s}
.rel a:hover{background:var(--urban-jungle)}
.rel em{font-style:normal;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--green-500);font-weight:600}
.rel b{font-size:1rem;font-weight:600}
.rel span{font-size:.875rem;color:var(--text-2)}

/* ========================= 11. ГАЛЕРЕЯ ==================================== */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:24px}
@media(min-width:768px){ .gallery{grid-template-columns:repeat(3,1fr);gap:16px} }
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius)}
.gallery figcaption{font-size:.8125rem;color:var(--text-3);margin-top:8px}
.credit{font-size:.8125rem;color:var(--text-3);margin-top:16px}
.credit a{color:var(--text-3)}

/* ====================== 12. СНОСКИ И ИСТОЧНИКИ ============================ */
.byline{font-size:.875rem;line-height:1.5;color:var(--text-3);max-width:76ch}
.byline a{color:var(--text-3);text-decoration-color:var(--surface-5)}
.checked{display:inline-flex;align-items:center;gap:7px;font-size:.8125rem;
  color:var(--text-3);margin-bottom:12px}
.checked::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green-500)}
.note{border:1px solid var(--green-800);background:var(--surface-1);
  padding:18px 22px;border-radius:var(--radius);margin:24px 0}
.note.warn{border-color:var(--warning)}
.note.crit{border-color:var(--error)}
.note p:last-child{margin-bottom:0}

/* =========================== 13. ПОДВАЛ =================================== */
footer.site{background:var(--surface-1);margin-top:64px}
footer.site .top{display:grid;grid-template-columns:1fr;gap:32px;padding:48px 0 40px}
@media(min-width:768px){ footer.site .top{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1024px){ footer.site .top{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px} }
footer.site .col{display:flex;flex-direction:column;gap:10px}
footer.site .col b{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:4px;font-weight:600}
footer.site .col a{color:var(--text-2);text-decoration:none;font-size:.9375rem}
footer.site .col a:hover{color:var(--green-300)}
footer.site .legal{display:flex;flex-direction:column;gap:10px;
  padding:26px 0 44px;border-top:1px solid var(--surface-4);
  font-size:.8125rem;line-height:1.55;color:var(--text-3)}
footer.site .legal .links{display:flex;flex-wrap:wrap;gap:18px;margin-top:6px}
footer.site .legal a{color:var(--text-3)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;
    scroll-behavior:auto!important}
}

/* ======================= 14. ГЕНЕРАТИВНАЯ ИНФОГРАФИКА ===================== */
/* SVG строится из данных (viz.py). Цвета — только через переменные портала,
   чтобы графика жила в одной палитре с остальным сайтом. */
.viz{margin:28px 0;padding:28px 24px;background:var(--surface-2);
  border-radius:var(--radius);overflow:hidden}
.viz figcaption,.viz>figcaption{font-size:.875rem;line-height:1.45;color:var(--text-3);
  margin-top:14px;max-width:72ch}
.viz-svg{width:100%;height:auto;display:block;overflow:visible}

.v-body{fill:none;stroke:var(--surface-5);stroke-width:2}
.v-glass{fill:var(--surface-3)}
.v-wheel{fill:var(--surface-4)}
.v-axle{stroke:var(--surface-4);stroke-width:2;stroke-dasharray:6 6}
.v-ice{fill:var(--surface-4)}
.v-motor{fill:var(--green-500);opacity:.92}
.v-batt{fill:var(--urban-jungle);stroke:var(--green-800);stroke-width:1}
.v-dim{stroke:var(--text-3);stroke-width:1;
  marker-start:url(#vArrow);marker-end:url(#vArrow)}
.v-lbl{fill:var(--text-2);font-size:14px;font-family:var(--font)}
.v-lbl-sm{fill:var(--text-3);font-size:12px;font-family:var(--font)}
.v-val{fill:var(--text);font-size:14px;font-weight:600;font-family:var(--font);
  font-variant-numeric:tabular-nums}
.v-center{fill:var(--text);font-size:26px;font-weight:600;font-family:var(--font)}
.v-bar{fill:var(--green-500)}
.v-bar-bg{fill:var(--surface-4)}
.v-bar-hl{fill:var(--green-300)}
.v-seg-0{fill:var(--green-500)}
.v-seg-1{fill:var(--green-600)}
.v-seg-2{fill:var(--purple)}
.v-seg-3{fill:var(--magenta)}
.v-seg-4{fill:var(--orange)}

/* Полосы вырастают при появлении в кадре — читается как «данные считаются». */
.viz-bars rect{transform-origin:210px center;
  transition:transform .85s cubic-bezier(.22,.8,.25,1)}
.js .viz:not(.in-view) .viz-bars rect{transform:scaleX(0)}
.viz-bars rect:nth-of-type(2){transition-delay:.07s}
.viz-bars rect:nth-of-type(3){transition-delay:.14s}
.viz-bars rect:nth-of-type(4){transition-delay:.21s}
.viz-bars rect:nth-of-type(5){transition-delay:.28s}
.viz .v-motor{transform-box:fill-box;transform-origin:center;
  transition:transform .6s cubic-bezier(.22,.8,.25,1),opacity .4s ease}
.js .viz:not(.in-view) .v-motor{transform:scale(.3);opacity:0}
.viz .v-seg{transition:opacity .5s ease}
.js .viz:not(.in-view) .v-seg{opacity:0}

/* ========================= 15. АНИМАЦИИ ================================== */
/* Проявление секций при скролле — сдержанное, как на офсайте: короткий сдвиг
   и растворение, без параллакса и без «прыжков». */
.reveal{transition:opacity .7s cubic-bezier(.22,.8,.25,1),
  transform .7s cubic-bezier(.22,.8,.25,1)}
.js .reveal:not(.in-view){opacity:0;transform:translateY(22px)}
.reveal-d1{transition-delay:.08s}
.reveal-d2{transition-delay:.16s}
.reveal-d3{transition-delay:.24s}

/* Герой: кадр медленно наезжает, пока читают заголовок. */
.js .hero .bg img{animation:heroZoom 18s ease-out forwards}
@keyframes heroZoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.js .hero .content>*{animation:heroUp .8s cubic-bezier(.22,.8,.25,1) both}
.hero .txt .overline{animation-delay:.05s}
.hero .txt h1{animation-delay:.12s}
.hero .txt .lede{animation-delay:.2s}
.hero .chips{animation-delay:.28s}
@keyframes heroUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Карточки и ссылки-плитки приподнимаются под курсором. */
.mcard,.rel a{transition:background .25s ease,transform .25s cubic-bezier(.22,.8,.25,1)}
.mcard:hover,.rel a:hover{transform:translateY(-4px)}
.mcard img{transition:transform .5s cubic-bezier(.22,.8,.25,1)}
.mcard:hover img{transform:scale(1.04)}
.gallery figure{overflow:hidden;border-radius:var(--radius)}
.gallery img{transition:transform .55s cubic-bezier(.22,.8,.25,1);cursor:zoom-in}
.gallery figure:hover img{transform:scale(1.05)}

/* Цифры в блоке ключевых показателей досчитываются при появлении. */
.figure b{font-variant-numeric:tabular-nums}

/* ====================== 16. ЗИГЗАГ ТЕКСТ + ФОТО ========================== */
/* Фирменный приём офсайта: секции чередуют сторону изображения. */
.zig{display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
@media(min-width:768px){
  .zig{grid-template-columns:repeat(2,1fr);gap:40px}
  .zig.flip .zig-media{order:2}
}
@media(min-width:1024px){ .zig{gap:64px} }
.zig-media img{width:100%;border-radius:var(--radius);aspect-ratio:4/3;object-fit:cover}
.zig-text h3{margin:0 0 12px}
.zig-text p{color:var(--text-2);margin:0 0 12px;line-height:1.7}
.zig-text .overline{margin-bottom:12px;color:var(--green-500)}

/* =========================== 17. ЛАЙТБОКС ================================ */
.lb{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.94);
  display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;transition:opacity .25s ease}
.lb.on{opacity:1}
.lb img{max-width:100%;max-height:86vh;border-radius:var(--radius);
  transform:scale(.97);transition:transform .3s cubic-bezier(.22,.8,.25,1)}
.lb.on img{transform:scale(1)}
.lb figcaption{position:absolute;left:0;right:0;bottom:20px;text-align:center;
  color:var(--text-3);font-size:.875rem;padding:0 24px}
.lb button{position:absolute;top:18px;right:18px;width:48px;height:48px;
  border:none;border-radius:50%;background:var(--surface-3);color:var(--text);
  font-size:26px;cursor:pointer}
.lb button:hover{background:var(--urban-jungle)}
.lb .nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;
  background:var(--surface-2);opacity:.9}
.lb .prev{left:16px} .lb .next{right:16px}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero .bg img,.hero .content>*{animation:none}
  .viz-bars rect,.viz .v-motor,.viz .v-seg{transition:none;transform:none;opacity:1}
  .viz .v-motor{transform:scale(1)}
  .mcard:hover,.rel a:hover{transform:none}
}

/* ======================== 18. КОНФИГУРАТОР =============================== */
/* Весь контент лежит в разметке; JS только переключает видимость,
   поэтому без скриптов страница остаётся полным справочником. */
.cfg-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.cfg-tab{height:44px;padding:0 20px;border:none;border-radius:300px;
  background:var(--surface-2);color:var(--text-2);font-family:var(--font);
  font-weight:600;font-size:.9375rem;cursor:pointer;transition:background .2s,color .2s}
.cfg-tab:hover{background:var(--urban-jungle);color:var(--text)}
.cfg-tab.on{background:var(--green-500);color:#000}

.cfg-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.cfg-chip{height:38px;padding:0 16px;border:1px solid var(--surface-4);
  border-radius:300px;background:transparent;color:var(--text-2);
  font-family:var(--font);font-size:.875rem;cursor:pointer;
  transition:border-color .2s,color .2s,background .2s}
.cfg-chip:hover{border-color:var(--green-500);color:var(--text)}
.cfg-chip.on{border-color:var(--green-500);background:var(--urban-jungle);
  color:var(--green-500);font-weight:600}

.cfg-trim{background:var(--surface-2);border-radius:var(--radius);overflow:hidden}
.cfg-head{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start;
  justify-content:space-between;padding:26px 28px;border-bottom:1px solid var(--line)}
.cfg-head h3{margin:6px 0 4px}
.cfg-head .overline{color:var(--green-500);font-size:.75rem;letter-spacing:.18em}
.cfg-price{text-align:right;display:flex;flex-direction:column;align-items:flex-end}
.cfg-price b{font-size:2.25rem;line-height:1;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--green-500)}
.cfg-price span{font-size:.8125rem;color:var(--text-3);margin-top:4px}
.cfg-price em{font-style:normal;font-size:.9375rem;color:var(--text-2);margin-top:8px;
  font-variant-numeric:tabular-nums}

.cfg-rows{display:grid;grid-template-columns:1fr}
@media(min-width:768px){ .cfg-rows{grid-template-columns:repeat(2,1fr)} }
.cfg-row{display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:13px 28px;border-bottom:1px solid rgba(74,74,74,.35)}
.cfg-row .k{color:var(--text-3);font-size:.875rem}
.cfg-row .v{color:var(--text);font-size:.9375rem;text-align:right;
  font-variant-numeric:tabular-nums}
@media(min-width:768px){
  .cfg-row:nth-child(odd){border-right:1px solid rgba(74,74,74,.35)}
}

/* Без JS показываем все комплектации подряд — справочник остаётся целым. */
.js .cfg-trim[hidden],.js .cfg-panel[hidden]{display:none}
.cfg-trim[hidden],.cfg-panel[hidden]{display:block}
.cfg-trim+.cfg-trim{margin-top:20px}