/* Лендинг гарантии Babiators — warranty.babiators.ru.
   Тёмный immersive-дизайн (эталон register.html / ЛК): глубокий navy-градиент,
   светлые «плавающие» surface-карточки, Euclid, оранжевые/аква акценты. */
:root{
  --l-bg-1:#283655; --l-bg-2:#1E2945; --l-bg-3:#1A2240;
  --l-ink:#F3F1EA; --l-ink-2:#BCC4DA; --l-ink-3:#8A93AD;
  --l-surface:#18223E; --l-surface-hi:rgba(255,255,255,.05);
  --l-line:rgba(255,255,255,.10); --l-line-2:rgba(255,255,255,.17);
  --l-orange:#FF6B35; --l-orange-dk:#F0562A;
  --l-aqua:#5FD4C4; --l-blue:#7AA5F5; --l-yellow:#F8E200;
  --l-ease:cubic-bezier(.16,1,.3,1);
  --l-shadow:0 18px 44px rgba(0,0,0,.32);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-family,"Euclid Circular A","Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,sans-serif);
  background:
    radial-gradient(1100px 640px at 50% -6%, rgba(96,134,214,.20), transparent 60%),
    linear-gradient(180deg,var(--l-bg-1) 0%,var(--l-bg-2) 46%,var(--l-bg-3) 100%);
  background-color:var(--l-bg-2);
  color:var(--l-ink);line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;
  overflow-x:clip;
}
a{color:inherit}
img{max-width:100%;display:block}
/* width:100% обязателен: секции ниже — flex-колонки, а margin:0 auto у flex-элемента
   отменяет stretch и блок сжимается по содержимому (FAQ прыгал 854→960px при раскрытии) */
.wrap{width:100%;max-width:1400px;margin:0 auto;padding:0 40px}

/* Scroll-reveal: гейт html.js — без JS (и до его запуска) контент виден, без FOUC.
   Применяется только к секциям ниже первого экрана. */
/* Секции без hover-трансформа — reveal через opacity+сдвиг */
html.js .sec-head,html.js .step,html.js details.faq,html.js .cta-band{
  opacity:0;transform:translateY(24px);transition:opacity .7s var(--l-ease),transform .7s var(--l-ease)}
html.js .sec-head.is-in,html.js .step.is-in,html.js details.faq.is-in,html.js .cta-band.is-in{opacity:1;transform:none}
/* Карточки с hover-tilt — reveal ТОЛЬКО через opacity (transform свободен для hover) */
html.js .perk,html.js .term{opacity:0;transition:opacity .7s var(--l-ease)}
html.js .perk.is-in,html.js .term.is-in{opacity:1}

/* ===== HEADER — вынесен в site-nav.css (общий для всех страниц) ===== */

/* ===== HERO — full-bleed слайдер ===== */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;
  margin-top:-66px;padding-top:66px}
.hero-slider{position:absolute;inset:0;z-index:0}
/* Переход «наплыв с размытием»: новый кадр всплывает из расфокуса и садится в резкость */
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transform:scale(1.12);filter:blur(14px);
  transition:opacity 2.5s var(--l-ease),transform 2.5s var(--l-ease),filter 2.5s var(--l-ease);
  will-change:opacity,transform,filter}
.hero-slide.is-active{opacity:1;transform:scale(1);filter:blur(0)}
@media (prefers-reduced-motion:reduce){
  .hero-slide{transition:opacity .4s;transform:none;filter:none}
  .hero-slide.is-active{transform:none;filter:none}}
.hero-slide--1{background-image:url("../assets/warranty/hero/hero-bg.jpg")}
.hero-slide--2{background-image:url("../assets/warranty/hero/guarantee-bg.jpg")}
.hero-slide--3{background-image:url("../assets/warranty/hero/durability-bg.jpg")}
.hero-slide--4{background-image:url("../assets/warranty/hero/uv-bg.jpg")}
/* Затемняющий overlay для читаемости текста (темнее слева) */
.hero-overlay{position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(20,27,52,.94) 0%,rgba(20,27,52,.82) 40%,rgba(20,27,52,.42) 72%,rgba(20,27,52,.28) 100%),
    linear-gradient(180deg,rgba(20,27,52,.35),transparent 30%,transparent 70%,rgba(20,27,52,.5))}
/* Hero-контент — тот же centered-1400 wrap, что и шапка/секции → выровнен с логотипом.
   width:100% обязателен: .hero=flex, иначе wrap сжимается до контента и центрируется. */
.hero .wrap{width:100%}
.hero-content{position:relative;z-index:2;max-width:640px}
.hero .badge{display:inline-flex;align-items:center;gap:9px;background:rgba(255,107,53,.18);color:#FFC7B2;
  font-size:14px;font-weight:600;padding:9px 17px;border-radius:999px;margin-bottom:26px;border:1px solid rgba(255,107,53,.3);backdrop-filter:blur(4px)}
.hero h1{font-size:clamp(40px,5.8vw,72px);font-weight:800;letter-spacing:-.03em;line-height:1.02;color:#fff;margin-bottom:22px;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero h1 em{font-style:normal;color:var(--l-orange)}
.hero p{font-size:clamp(17px,1.7vw,21px);color:rgba(255,255,255,.86);margin-bottom:36px;max-width:44ch;text-shadow:0 1px 12px rgba(0,0,0,.3)}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
/* Печать-бейдж гарантии — справа в hero, полупрозрачная, с медленным вращением */
/* right отрицательный: при тройном размере печать не помещается в hero целиком,
   уводим её за правый край, иначе наезжает на заголовок и кнопки */
.hero-badge{position:absolute;z-index:1;right:-10%;top:67%;transform:translateY(-50%);
  width:clamp(570px,57vw,810px);height:auto;opacity:.45;pointer-events:none;
  filter:drop-shadow(0 0 26px rgba(255,255,255,.32)) drop-shadow(0 10px 30px rgba(0,0,0,.35));
  animation:heroBadgeSpin 220s linear infinite}
@keyframes heroBadgeSpin{to{transform:translateY(-50%) rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.hero-badge{animation:none}}
/* Точки-индикаторы слайдера */
.hero-dots{position:absolute;z-index:2;bottom:38px;left:0;right:0;display:flex;gap:10px;justify-content:center}
.hero-dot{position:relative;width:9px;height:9px;border-radius:50%;border:none;padding:0;cursor:pointer;
  background:rgba(255,255,255,.35);transition:background .2s,width .2s}
.hero-dot::before{content:"";position:absolute;inset:-9px} /* тач-зона ≥27px, визуал 9px */
.hero-dot.is-active{background:var(--l-orange);width:26px;border-radius:999px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:17px;font-weight:700;
  padding:18px 34px;border-radius:999px;border:none;cursor:pointer;text-decoration:none;transition:transform .18s var(--l-ease),background .18s,box-shadow .18s}
/* белый текст на оранжевом — решение дизайна (контраст ниже AA, заведено исключением в check:contrast) */
.btn-primary{background:var(--l-orange);color:#fff;box-shadow:0 6px 16px rgba(255,107,53,.24)}
.btn-primary:hover{background:var(--l-orange-dk);color:#fff;transform:translateY(-2px);box-shadow:0 10px 22px rgba(255,107,53,.3)}
.btn-ghost{background:rgba(255,255,255,.06);color:var(--l-ink);border:1px solid var(--l-line-2)}
.btn-ghost:hover{background:rgba(255,255,255,.11);transform:translateY(-2px)}

/* ===== SECTIONS ===== */
section{padding:84px 0}
.sec-head{text-align:center;max-width:760px;margin:0 auto 56px}
/* фирменный бейдж гарантии из дизайн-системы — по смыслу блока */
/* Печать над заголовком секции — белая полупрозрачная, крупная */
.sec-badge{width:312px;height:auto;margin:0 auto 20px;display:block;opacity:.35;
  filter:brightness(0) invert(1) drop-shadow(0 10px 26px rgba(0,0,0,.35))}
@media (max-width:560px){.sec-badge{width:220px;margin-bottom:16px}}
.sec-head h2{font-size:clamp(32px,4.2vw,48px);font-weight:800;color:var(--l-ink);letter-spacing:-.025em;margin-bottom:14px}
.sec-head p{color:var(--l-ink-2);font-size:18px}

/* Общая surface-карточка */
.perk,.step,.term,details.faq{
  background:linear-gradient(180deg,var(--l-surface-hi),transparent),var(--l-surface);
  border:1px solid var(--l-line);
}

/* perks */
.perks-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.perk{border-radius:24px;padding:42px 34px;text-align:center;box-shadow:var(--l-shadow);
  transition:transform .22s var(--l-ease),box-shadow .22s var(--l-ease),border-color .22s}
.perk:hover{transform:translateY(-6px);border-color:var(--l-line-2);box-shadow:0 30px 60px rgba(0,0,0,.42)}
/* Иконки в бренд-стилистике: плотные заливные силуэты в круглых плашках
   (тонкая обводка в квадратах читалась как дефолтный UI-кит, не как Babiators) */
.perk .e{width:84px;height:84px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;
  transition:transform .3s var(--l-ease)}
.perk:hover .e{transform:scale(1.08) rotate(-3deg)}
.perk .e svg{width:40px;height:40px}
.perk .e img{width:46px;height:auto}
.perk:nth-child(1) .e{background:rgba(122,165,245,.16);color:var(--l-blue)}
.perk:nth-child(2) .e{background:rgba(255,107,53,.16);color:#FF8C5F}
.perk:nth-child(3) .e{background:rgba(95,212,196,.16);color:var(--l-aqua)}
.perk h3{font-size:23px;font-weight:700;color:var(--l-ink);margin-bottom:11px}
.perk p{font-size:16px;color:var(--l-ink-2)}

/* steps — timeline с оранжевыми иконками (единый стиль с перками) */
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;position:relative;margin-top:8px}
.step{border-radius:22px;padding:46px 30px 40px;text-align:center;box-shadow:var(--l-shadow);position:relative;
  transition:transform .24s var(--l-ease),border-color .24s,box-shadow .24s}
.step:hover{transform:translateY(-5px);border-color:var(--l-line-2);box-shadow:0 30px 60px rgba(0,0,0,.42)}
.step-ic{width:72px;height:72px;border-radius:50%;
  background:rgba(255,107,53,.16);color:#FF8C5F;
  display:grid;place-items:center;margin:0 auto 24px;position:relative;z-index:1;
  transition:transform .3s var(--l-ease)}
.step:hover .step-ic{transform:translateY(-3px) scale(1.08) rotate(-3deg)}
.step-ic svg{width:34px;height:34px}
.step-ic img{width:40px;height:auto}
.step h3{font-size:19px;font-weight:700;color:var(--l-ink);margin-bottom:12px}
.step p{font-size:15.5px;color:var(--l-ink-2);line-height:1.55}

/* terms */
.terms-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:1040px;margin:0 auto}
.term{display:flex;gap:18px;align-items:flex-start;border-radius:20px;padding:26px 28px;box-shadow:var(--l-shadow)}
.term .ic{width:46px;height:46px;border-radius:13px;background:rgba(95,212,196,.15);color:var(--l-aqua);
  display:grid;place-items:center;flex:0 0 auto}
.term .ic svg{width:24px;height:24px}
.term b{display:block;font-size:17.5px;color:var(--l-ink);margin-bottom:5px;font-weight:700}
.term span{font-size:15px;color:var(--l-ink-2)}

/* faq */
.faq-list{max-width:960px;margin:0 auto}
details.faq{border-radius:20px;margin-bottom:14px;overflow:hidden;box-shadow:var(--l-shadow)}
.faq summary{padding:26px 30px;font-weight:600;font-size:19px;color:var(--l-ink);cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:30px;color:var(--l-orange);transition:transform .25s var(--l-ease);flex:0 0 auto}
.faq[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{background:rgba(255,255,255,.03)}
.faq[open] summary{border-bottom:1px solid var(--l-line)} /* отделяем заголовок от ответа */
.faq[open] summary:hover{background:transparent} /* открытый вопрос не подсвечиваем — фон бил впритык к тексту ответа */
.faq .a{overflow:hidden;padding:22px 30px 28px;font-size:16.5px;color:var(--l-ink-2);line-height:1.65} /* верхний отступ: ответ не жмётся к заголовку/ховеру */
.faq .a img{margin:12px 0;border-radius:10px;border:1px solid var(--l-line);max-width:260px}
.faq .a a{color:var(--l-blue);font-weight:600}

/* cta band */
.cta-band{position:relative;overflow:hidden;background:linear-gradient(135deg,#FF6B35,#FF9060 90%);
  border-radius:36px;padding:76px 44px;text-align:center;color:#fff;margin:8px 0}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 340px at 80% -20%,rgba(255,255,255,.25),transparent 60%)}
.cta-band>*{position:relative}
.cta-band h2{font-size:clamp(32px,4.4vw,50px);font-weight:800;margin-bottom:14px;letter-spacing:-.025em}
.cta-band p{opacity:.92;font-size:19px;margin-bottom:34px}
/* затемнён до 5:1 на белом (--l-orange-dk давал 3.46, #D4471F — 4.45; оба ниже AA) */
.cta-band .btn-primary{background:#fff;color:#C6421C;box-shadow:0 12px 30px rgba(0,0,0,.22)}
.cta-band .btn-primary:hover{background:#fff;color:#A83714;transform:translateY(-2px)}

/* footer */
.lp-footer{border-top:1px solid var(--l-line);padding:44px 0 32px;margin-top:28px}
.lp-footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px;align-items:flex-start}
.lp-footer .col img{height:26px;margin-bottom:16px;filter:brightness(0) invert(1);opacity:.92}
.lp-footer .col p{font-size:13px;color:var(--l-ink-3);line-height:1.7;max-width:360px}
.lp-footer .links{display:flex;flex-direction:column;gap:9px}
.lp-footer .links a{font-size:14px;color:var(--l-ink-2);text-decoration:none;font-weight:500}
.lp-footer .links a:hover{color:var(--l-orange)}
.lp-copy{text-align:center;color:var(--l-ink-3);font-size:12.5px;margin-top:28px}

/* ===== RESPONSIVE ===== */
@media (min-width:861px){
  /* соединительная линия timeline «как работает» */
  .steps-grid::before{content:"";position:absolute;top:60px;left:10%;right:10%;height:2px;
    background:linear-gradient(90deg,transparent,var(--l-line-2) 12%,var(--l-line-2) 88%,transparent);z-index:0}

  /* Каждый блок ≈ один экран (мягкий proximity-snap, не навязчиво) */
  html{scroll-snap-type:y proximity}
  .perks,.steps-section,.terms,#faq{
    min-height:100vh;display:flex;flex-direction:column;justify-content:center;
    scroll-snap-align:start;scroll-margin-top:66px}
}
@media (max-width:860px){
  .wrap{padding-left:18px;padding-right:18px} /* совпадает с шапкой → hero под логотипом */
  .perks-grid{grid-template-columns:1fr}
  .steps-grid{grid-template-columns:1fr 1fr}
  .terms-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .wrap{padding:0 18px}
  .steps-grid{grid-template-columns:1fr}
  section{padding:52px 0}
  .cta-band{padding:52px 26px;border-radius:26px}
  .hero h1{font-size:clamp(34px,8.6vw,46px)}
  .hero-cta{gap:12px}
  /* Бейдж крупный, уходит вниз за край экрана — обрезка намеренная */
  .hero-badge{right:-27%;top:auto;bottom:32px;transform:none;width:clamp(360px,102vw,480px);opacity:.4}
  @keyframes heroBadgeSpin{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion:reduce){.hero-badge{animation:none}}
  .sec-head{margin-bottom:36px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .sec-head,html.js .perk,html.js .step,html.js .term,html.js details.faq,html.js .cta-band{
    opacity:1;transform:none;transition:none}
  .btn,.perk,.faq summary::after{transition:none}
}

/* ============================================================
   Топ-эффекты: aurora-фон, grain, стат-полоса, свечение карточек
   ============================================================ */
/* Aurora — медленно дышащий градиент-меш (убирает плоский монохром).
   z-index:-1 → поверх базового фона body, под контентом. */
body::before{content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;opacity:.55;
  background:
   radial-gradient(38% 40% at 18% 12%,rgba(122,165,245,.30),transparent 60%),
   radial-gradient(34% 36% at 86% 22%,rgba(255,107,53,.18),transparent 60%),
   radial-gradient(44% 46% at 72% 88%,rgba(95,212,196,.16),transparent 60%);
  filter:blur(34px);animation:aurora 24s ease-in-out infinite alternate}
@keyframes aurora{to{transform:translate3d(4%,-3%,0) scale(1.14)}}

/* Стат-полоса — крупные editorial-цифры (соц.доказательство 16000+) */
.stats{padding:60px 0}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;text-align:center}
.stat{display:flex;flex-direction:column;gap:8px;position:relative}
.stat:not(:last-child)::after{content:"";position:absolute;right:-14px;top:12%;height:76%;width:1px;background:var(--l-line)}
.stat-num{font-size:clamp(40px,5vw,72px);font-weight:800;line-height:1;letter-spacing:-.03em;
  color:#fff;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff,#C9D3EE);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat-lbl{font-size:15px;color:var(--l-ink-2)}

.hero-microcopy{margin-top:16px;font-size:13px;color:rgba(255,255,255,.62);letter-spacing:.01em}

/* Свечение под курсором + база 3D-tilt для карточек */
.perk,.term{position:relative}
.perk::after,.term::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .3s;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(255,107,53,.16),transparent 60%);pointer-events:none}
.perk:hover::after,.term:hover::after{opacity:1}

@media (max-width:860px){
  .stats-grid{grid-template-columns:1fr 1fr;gap:24px 16px}
  .stat:nth-child(2)::after{display:none}
  .stat:nth-child(3){grid-column:1/-1}
}
@media (max-width:420px){ .stats-grid{grid-template-columns:1fr}.stat::after{display:none} }
@media (prefers-reduced-motion:reduce){ body::before{animation:none} }

/* Полоса маркетплейсов — доверие («настоящий бренд») */
.markets{padding:84px 0;text-align:center}
.markets-label{color:var(--l-ink-2);font-size:19px;margin-bottom:34px}
.markets-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:22px 46px}
.market-name{color:var(--l-ink-2);font-size:22px;font-weight:600;opacity:.72;transition:opacity .22s var(--l-ease),color .22s,transform .22s var(--l-ease)}
.market-name:hover{opacity:1;color:var(--l-ink);transform:translateY(-2px)}
/* Свой сайт в ряду площадок — логотипом, а не текстом */
.market-logo{display:inline-flex;align-items:center;opacity:.72;transition:opacity .22s var(--l-ease),transform .22s var(--l-ease)}
.market-logo img{height:18px;width:auto;filter:brightness(0) invert(1)}
.market-logo:hover{opacity:1;transform:translateY(-2px)}
@media (max-width:560px){ .market-logo img{height:13px} }
@media (max-width:560px){ .markets-logos{gap:14px 22px} .market-name{font-size:16px} }

/* Тонкое чередование фонов секций — разбивает плоский монохром */
.perks{background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 45%)}
.steps-section{background:radial-gradient(130% 90% at 50% 0%,rgba(0,0,0,.16),transparent 55%)}
.terms{background:linear-gradient(180deg,transparent,rgba(122,165,245,.055))}
.markets{background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
/* Волосяные световые разделители между секциями */
.perks,.steps-section,.terms,#faq{border-top:1px solid rgba(255,255,255,.05)}

/* каскад появления шагов: читается как последовательность, а не одновременный хлопок */
html.js .step:nth-child(1){transition-delay:0s}
html.js .step:nth-child(2){transition-delay:.08s}
html.js .step:nth-child(3){transition-delay:.16s}
html.js .step:nth-child(4){transition-delay:.24s}
@media (prefers-reduced-motion:reduce){html.js .step{transition-delay:0s!important}}