:root{
  --bg:#0b0e14;
  --bg2:#0f1420;
  --card:#111826;
  --text:#e8eefc;
  --muted:#a6b0c3;
  --line:#22304a;
  --accent:#ffd54a;
  --accent2:#ffb300;
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --radius: 18px;
  --radius2: 26px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1100px 500px at 20% 0%, rgba(255,213,74,.12), transparent 60%),
              radial-gradient(900px 500px at 80% 10%, rgba(82,157,255,.10), transparent 60%),
              linear-gradient(180deg, var(--bg), #070a10 60%);
  color:var(--text);
}

a{color:inherit}
.container{width:min(1120px, 92vw); margin:0 auto;}

.muted{color:var(--muted)}
.small{font-size:12px}
.lead{font-size:18px; line-height:1.5; color:var(--muted)}

.topbar{
  border-bottom:1px solid rgba(255,255,255,.06);
  background: rgba(7,10,16,.55);
  backdrop-filter: blur(10px);
}
.topbar__row{
  display:flex; gap:14px;
  align-items:center; justify-content:space-between;
  padding:10px 0;
}
.topbar__left{display:flex; gap:12px; align-items:center; flex-wrap:wrap;}
.topbar__right{display:flex; gap:12px; align-items:center;}

.badge{
  display:inline-flex; align-items:center; justify-content:center;
  padding:4px 10px; border:1px solid rgba(255,255,255,.10);
  border-radius:999px; color:var(--muted); font-size:12px;
}

.toplink{color:var(--muted); text-decoration:none}
.topphone{font-weight:700; text-decoration:none}

.header{
  position:sticky; top:0;
  z-index:20;
  background: rgba(7,10,16,.55);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header__row{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:16px;
}
.logo{display:flex; gap:10px; align-items:center; text-decoration:none}
.logo__mark{
  width:38px; height:38px; border-radius:12px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color:#131313; font-weight:900;
}
.logo__text{font-weight:800; letter-spacing:.2px}

.logo__img{
  display:block;
  height:38px;
  width:auto;
}
.logo__img--footer{
  height:44px;
}
@media (max-width: 980px){
  .logo__img{ height:34px; }
  .logo__img--footer{ height:40px; }
}

/* Brand logo on main hero */
.hero__brand{ margin-bottom: 12px; }
.brand__logo{
  display:block;
  height:72px;
  width:auto;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.35));
}
@media (max-width: 980px){
  .brand__logo{ height:56px; }
}


.nav{display:flex; gap:18px; align-items:center}
.nav a{color:var(--muted); text-decoration:none; font-weight:600; font-size:14px}
.nav a:hover{color:var(--text)}

.header__actions{display:flex; gap:10px; align-items:center}

.btn{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color:var(--text);
  padding:10px 14px;
  border-radius: 14px;
  text-decoration:none;
  font-weight:700;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{transform: translateY(-1px); border-color: rgba(255,255,255,.18)}
.btn--primary{
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-color: transparent;
  color:#141414;
}
.btn--ghost{background: rgba(255,255,255,.02)}
.link{color:var(--accent); text-decoration:none; font-weight:700}

.hero{padding:48px 0 22px;}
.hero__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:22px;
  align-items:stretch;
}
.hero h1{font-size:44px; line-height:1.05; margin:0 0 12px;}
.hero__cta{display:flex; gap:12px; margin:18px 0 18px; flex-wrap:wrap}
.hero__bullets{display:flex; gap:10px; flex-wrap:wrap}
.chip{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color:var(--muted);
  font-weight:700;
  font-size:13px;
}

.hero__card{
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
  overflow:hidden;
}
.hero__img{
  height:310px;
  position:relative;
  background:
    radial-gradient(300px 180px at 70% 35%, rgba(255,213,74,.25), transparent 70%),
    linear-gradient(120deg, rgba(255,200,40,.18), rgba(255,255,255,.02)),
    url("./assets/company.png") center 35%/cover no-repeat;
}

.hero__img--razblok{
  height:300px;
  background:
    radial-gradient(300px 180px at 70% 35%, rgba(255,213,74,.25), transparent 70%),
    linear-gradient(120deg, rgba(255,200,40,.18), rgba(255,255,255,.02)),
    url("./assets/razblok-hero.png") center 50%/cover no-repeat;
}
@media (max-width: 560px){
  .hero__img--razblok{
    height:270px;
    background:
      radial-gradient(260px 160px at 70% 30%, rgba(255,213,74,.22), transparent 70%),
      linear-gradient(120deg, rgba(255,200,40,.14), rgba(255,255,255,.01)),
      url("./assets/razblok-hero.png") center 45%/cover no-repeat;
  }
}

.hero__stats{
  position:absolute;
  left:16px;
  right:16px;
  bottom:16px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}
.stat{
  border:1px solid rgba(255,200,40,.18);
  background: rgba(9, 15, 30, .78);
  backdrop-filter: blur(6px);
  border-radius: 16px;
  padding:12px;
}
.stat__num{font-weight:900}
.stat__label{color: rgba(255,255,255,.72); font-size:12px; margin-top:4px}

.section{padding:46px 0}
.section--alt{background: rgba(255,255,255,.02); border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06)}
.section__head{margin-bottom:18px}
.section__head h2{margin:0 0 6px; font-size:30px}
.section__head p{margin:0}

.cards{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
}
.card{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(17,24,38,.55);
  padding:16px;
  min-height: 170px;
}
.card h3{margin:0 0 8px}
.card p{margin:0 0 14px; color:var(--muted); line-height:1.5}

.cars{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
.car{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(17,24,38,.55);
  border-radius: var(--radius2);
  overflow:hidden;
}
.car__body{padding:16px}
.props{margin:10px 0 14px; padding-left:18px; color:var(--muted)}
.price{font-weight:900}
.car__foot{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}

.calc{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(17,24,38,.55);
  border-radius: var(--radius2);
  padding:16px;
}
.calc__grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:12px;
  align-items:end;
}
.field{display:flex; flex-direction:column; gap:8px; font-weight:700; font-size:13px; color:var(--muted)}
.field select,.field input{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  color:var(--text);
  outline:none;
}
.calc__result{
  grid-column: 1 / -1;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.big{font-size:34px; font-weight:900}

.steps{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
.step{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(17,24,38,.55);
  border-radius: var(--radius2);
  padding:16px;
}
.step__num{
  width:38px; height:38px; border-radius:12px;
  display:grid; place-items:center;
  background: rgba(255,213,74,.18);
  border:1px solid rgba(255,213,74,.35);
  color:var(--accent);
  font-weight:900;
}

.leadbox{
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(135deg, rgba(255,213,74,.12), rgba(17,24,38,.55));
  border-radius: var(--radius2);
  padding:18px;
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap:16px;
  align-items:center;
}

/* ===== Rent: warning / refusal section ===== */
.section--warn .section__head{margin-bottom:22px}
.warn{
  display:grid;
  grid-template-columns: 1.35fr .85fr;
  gap:22px;
  align-items:stretch;
}
.warn__list{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.warn__item{
  display:flex;
  gap:12px;
  padding:14px 14px;
  border-radius:16px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 40px rgba(0,0,0,.28);
}
.warn__item--wide{grid-column:1 / -1}
.warn__icon{
  width:44px;
  height:44px;
  flex:0 0 44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background: radial-gradient(120% 120% at 30% 20%, rgba(255,214,74,.28) 0%, rgba(255,214,74,.08) 44%, rgba(255,255,255,0) 70%);
  border:1px solid rgba(255,214,74,.22);
}
.warn__text{min-width:0}
.warn__title{font-weight:700; margin-bottom:4px}
.warn__desc{color:rgba(255,255,255,.72); line-height:1.35}

.warn__side{
  position:relative;
  border-radius:22px;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.warn__side::before{
  content:"";
  position:absolute;
  inset:-40px;
  background: radial-gradient(60% 60% at 30% 20%, rgba(255,214,74,.22) 0%, rgba(255,214,74,0) 60%),
              radial-gradient(60% 60% at 80% 60%, rgba(0,180,255,.14) 0%, rgba(0,180,255,0) 60%);
  filter: blur(10px);
}
.warn__sideInner{position:relative; padding:18px}
.warn__art{
  width:100%;
  aspect-ratio: 4 / 3;
  border-radius:18px;
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.10);
  display:grid;
  place-items:center;
}
.warn__hint{margin-top:12px; color:rgba(255,255,255,.72)}

@media (max-width: 980px){
  .warn{grid-template-columns:1fr}
  .warn__art{aspect-ratio: 16/9}
}

@media (max-width: 640px){
  .warn__list{grid-template-columns:1fr}
  .warn__item{padding:13px}
  .warn__icon{width:42px;height:42px;flex-basis:42px}
}
.form{display:grid; grid-template-columns: 1fr 1fr; gap:10px}
.input{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  color:var(--text);
  outline:none;
}
.form .btn{grid-column: 1 / -1}
.form .muted{grid-column: 1 / -1}

/* ===== Lead form (в секции "Заявка на подключение") =====
   Делаем поля пропорциональными и удобными на десктопе.
   На мобильных — складываем в 1 колонку.
*/
.leadbox .form{
  grid-template-columns: 1fr 1fr 1fr auto;
  align-items:end;
}
.leadbox .form .btn{
  grid-column: auto;
  white-space: nowrap;
}
.leadbox .form .muted{
  grid-column: 1 / -1;
}
.leadbox .input{min-width:0}

@media (max-width: 980px){
  .leadbox .form{grid-template-columns: 1fr}
  .leadbox .form .btn{grid-column: 1 / -1; width:100%}
}

.faq details{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(17,24,38,.55);
  border-radius: var(--radius);
  padding:14px 16px;
  margin-bottom:10px;
}
.faq summary{cursor:pointer; font-weight:800}
.faq p{color:var(--muted); line-height:1.6}

.footer{
  padding:32px 0;
  border-top:1px solid rgba(255,255,255,.06);
  background: rgba(7,10,16,.55);
}
.footer__grid{
  display:grid;
  grid-template-columns: 1.2fr .9fr .7fr;
  gap:14px;
}
.footer__bottom{padding-top:18px; border-top:1px solid rgba(255,255,255,.06); margin-top:18px}
.logo--footer{margin-bottom:10px}

.modal{
  position:fixed; inset:0;
  display:none;
  align-items:center; justify-content:center;
  padding:18px;
  z-index:50;
}
.modal.is-open{display:flex}
.modal__overlay{
  position:absolute; inset:0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(8px);
}
.modal__box{
  position:relative;
  width:min(520px, 92vw);
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(17,24,38,.92);
  box-shadow: var(--shadow);
  padding:14px;
}
.modal__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 6px 12px;
}
.iconbtn{
  width:42px; height:42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  color:var(--text);
  cursor:pointer;
}

@media (max-width: 980px){
  .cards{grid-template-columns: repeat(2, 1fr)}
  .cars{grid-template-columns: 1fr}
  .hero__grid{grid-template-columns: 1fr}
  .calc__grid{grid-template-columns: repeat(2, 1fr)}
  .leadbox{grid-template-columns: 1fr}
  .footer__grid{grid-template-columns: 1fr}
  .nav{display:none}
  .burger{display:inline-block}
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 30px;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 30px;
    text-align: center;
    font-weight: bold;
}

.adv, .review {
  background: white;
  padding: 25px;
  border-radius: 8px;
  text-align: center;
}

/*
  ВАЖНО:
  Ниже раньше был дубль стилей для `.form` (display:flex), который ломал все формы
  (поля становились узкими/непропорциональными). Оставляем единый вариант формы выше.
*/

@media (max-width: 768px) {
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}


/* ===== Services grid on homepage (5 cards) ===== */
.cards--services{grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));}

/* ===== Footer brand (compact icon) ===== */
.brand-footer{display:flex; align-items:center; gap:12px}
.brand-footer__name{font-weight:900; letter-spacing:.2px}
.brand-footer__pin{
  width:38px; height:38px; border-radius:14px;
  position:relative;
  display:inline-block;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}

.brand-footer__logo{
  width:44px;
  height:44px;
  flex:0 0 44px;
  object-fit:contain;
  display:block;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.35));
}

 (max-width: 520px){
  .brand-footer__logo{width:40px;height:40px;flex-basis:40px;}
}
.brand-footer__pin:after{
  content:"";
  position:absolute;
  left:50%; top:54%;
  width:12px; height:12px;
  transform:translate(-50%, -50%);
  border-radius:999px;
  background: rgba(0,0,0,.35);
}

/* Footer navigation spacing */
.footer__nav p{margin:0 0 10px}
.footer__nav p:last-child{margin-bottom:0}


/* ===== Header dropdown (Services) ===== */
.nav__dropdown{position:relative; display:flex; align-items:center}
.nav__toggle{
  background:none; border:0; padding:0;
  color:var(--muted); font-weight:600; font-size:14px;
  cursor:pointer;
}
.nav__toggle:hover{color:var(--text)}
.nav__menu{
  display:none;
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  min-width:260px;
  padding:10px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(17,24,38,.98);
  box-shadow: var(--shadow);
}
.nav__menu a{
  display:block;
  padding:10px 10px;
  border-radius: 12px;
  color:var(--muted);
  text-decoration:none;
  font-weight:700;
  font-size:14px;
}
.nav__menu a:hover{
  background: rgba(255,255,255,.04);
  color:var(--text);
}
.nav__dropdown.is-open .nav__menu{display:block}

/* Hover dropdown for desktop */
@media (hover:hover){
  .nav__dropdown:hover .nav__menu{display:block}
}

/* Mobile: dropdown becomes accordion inside burger menu */
@media (max-width: 980px){
  .nav__dropdown{width:100%; flex-direction:column; align-items:stretch; gap:8px}
  .nav__toggle{
    width:100%;
    text-align:left;
    padding:10px 12px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.02);
  }
  .nav__menu{
    position:static;
    min-width:auto;
    padding:0;
    border:none;
    background: transparent;
    box-shadow:none;
  }
  .nav__dropdown.is-open .nav__menu a{
    padding:10px 12px;
  }
}

@media (max-width: 980px){
  .nav{ display:flex !important; flex-wrap:wrap; gap:12px !important; justify-content:flex-start; }
  .header__row{ align-items:flex-start; }
  .header__actions{ display:none; } /* hide big CTA button on very narrow screens to save space */
}

/* Override: keep Services dropdown open for 3s after leaving */
.nav__menu{ transition: opacity .18s ease, transform .18s ease, visibility 0s !important; }

/* Invisible bridge: keeps hover active while moving cursor */
.nav__dropdown::after{
  content: "";
  position: absolute;
  left: -20px;
  right: -20px;
  top: 100%;
  height: 60px; /* big buffer zone */
}

/* Dropdown menu positioning */
.nav__menu{
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 260px;
  z-index: 999;
}

/* Show menu on hover/focus */
.nav__dropdown:hover .nav__menu,
.nav__dropdown:focus-within .nav__menu{
  display: block;
}

/* EXTRA safety: keep menu open even if cursor briefly leaves */
.nav__menu:hover{
  display: block;
}


/* ===== Burger (clean) ===== */
.burger{
  display:none;
  width:42px; height:42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  cursor:pointer;
  position:relative;
  z-index:10000;
}
.burger span{
  display:block; height:2px; width:18px;
  margin:4px auto;
  background: var(--text);
  border-radius:999px;
}


/* ===== Services dropdown hover-bridge (keeps menu open while moving cursor) ===== */
.nav__dropdown{ position: relative; }
.nav__dropdown::after{
  content: "";
  position: absolute;
  left: -20px;
  right: -20px;
  top: 100%;
  height: 60px; /* buffer zone */
}
/* menu positioning */
.nav__menu{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 260px;
  z-index: 999;
}

/* ===== Smooth dropdown animation (desktop) ===== */
.nav__menu{
  display:block;              /* allow transition */
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform: translateY(4px);
  transition: opacity .10s ease, transform .10s ease, visibility 0s;
}
.nav__dropdown:hover .nav__menu,
.nav__dropdown:focus-within .nav__menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform: translateY(0);
  transition: opacity .10s ease, transform .10s ease, visibility 0s;
}


@media (max-width: 980px){
  .nav{ display:none; }
  .burger{ display:inline-block; }
  .nav.is-open{
    display:flex;
    position:fixed;
    top:64px; left:4vw; right:4vw;
    padding:14px;
    border-radius: var(--radius2);
    border:1px solid rgba(255,255,255,.10);
    background: rgba(17,24,38,.96);
    flex-direction:column;
    gap:10px;
    z-index:9999;
  }
  /* dropdown inside opened mobile menu */
  .nav__menu{
    position: static;
    min-width: auto;
    margin-top: 8px;
    padding: 10px;
    border-radius: 16px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.18);
    transform:none;
  }
  .nav__dropdown::after{ display:none; } /* bridge not needed on mobile */
  .nav__menu{ opacity:1; visibility:visible; pointer-events:auto; transition:none; display:none; }
  .nav__dropdown.is-open .nav__menu{ display:block; }
  .nav__toggle{ width:100%; text-align:left; }
}


/* Keep burger clickable */
.header{ position:sticky; top:0; z-index:9000; }
.header__actions{ position:relative; z-index:10000; }


.header__actions .btn{ display:none !important; } /* hide big CTA to save space */
  .burger{ display:inline-block !important; }


/* Ensure Services dropdown becomes visible immediately on hover */
.nav__dropdown:hover .nav__menu,
.nav__dropdown:focus-within .nav__menu{
  transition-delay: 0s !important;
}


/* ===== Mobile header: nav inside burger ===== */
@media (max-width: 980px){
  .nav{ display:none; }
  .burger{ display:inline-block; }

  .header__actions{ display:flex; align-items:center; gap:10px; }
  .header__actions .btn{ display:none; }

  .nav.is-open{
    display:flex;
    position:fixed;
    top:64px; left:4vw; right:4vw;
    padding:14px;
    border-radius: var(--radius2);
    border:1px solid rgba(255,255,255,.10);
    background: rgba(17,24,38,.96);
    flex-direction:column;
    gap:10px;
    z-index:9999;
  }

  .nav__dropdown::after{ display:none; }
  .nav__menu{
    position: static;
    min-width: auto;
    margin-top: 8px;
    padding: 10px;
    border-radius: 16px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.18);
    transform:none;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:none;
    display:none;
  }
  .nav__dropdown.is-open .nav__menu{ display:block; }
  .nav__toggle{ width:100%; text-align:left; }
}


/* ===== ENFORCE mobile burger behavior (final override) ===== */
@media (max-width: 980px){
  .nav{ display:none !important; }
  .nav.is-open{ display:flex !important; }
  .burger{ display:inline-block !important; pointer-events:auto !important; }
  .header__actions{ display:flex !important; }
}
/* ===== FINAL: header above any overlays ===== */
.header{ z-index: 30000 !important; }
.topbar{ position: relative; z-index: 29999; }
.burger{ z-index: 31000 !important; pointer-events:auto !important; cursor:pointer; }
.nav__dropdown::after{ pointer-events:none; }
/* ===== FINAL: mobile nav hidden until burger ===== */
@media (max-width: 980px){
  .nav{ display:none !important; }
  .nav.is-open{ display:flex !important; }
  .header__actions{ display:flex !important; align-items:center; gap:10px; }
  .header__actions .btn{ display:none !important; }
  .burger{ display:inline-block !important; }
}
/* ===== BURGER desktop hide enforce ===== */
.burger{ display:none !important; }
@media (max-width: 980px){
  .burger{ display:inline-block !important; }
}
/* ===== Mobile burger menu layout v2 (only mobile) ===== */
@media (max-width: 980px){
  .nav.is-open{
    /* overlay */
    display:block !important;
    position:fixed;
    top:78px; left:4vw; right:4vw;
    max-width: 980px;
    padding:16px;
    border-radius: var(--radius2);
    border:1px solid rgba(255,255,255,.10);
    background: rgba(17,24,38,.96);
    z-index:9999;
    overflow:hidden;
  }

  /* left column */
  .nav.is-open > a,
  .nav.is-open .nav__dropdown{
    width: 56%;
  }
  .nav.is-open > a{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding:12px 12px;
    border-radius:14px;
    text-align:left;
  }
  .nav.is-open > a:hover{
    background: rgba(255,255,255,.04);
  }

  .nav.is-open .nav__dropdown{
    position: static;
  }
  .nav.is-open .nav__toggle{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding:12px 12px;
    border-radius:14px;
    text-align:left;
  }

  /* divider */
  .nav.is-open::after{
    content:"";
    position:absolute;
    top:14px; bottom:14px;
    left:58%;
    width:1px;
    background: rgba(255,255,255,.08);
  }

  /* right panel: services submenu */
  .nav.is-open .nav__menu{
    display:none;
    position:absolute;
    top:12px; right:12px; bottom:12px;
    width: 40%;
    overflow:auto;
    padding:10px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.18);
  }
  .nav.is-open .nav__dropdown.is-open .nav__menu{
    display:block;
  }

  /* right panel links */
  .nav.is-open .nav__menu a{
    display:block;
    padding:10px 12px;
    border-radius:12px;
    text-align:left;
  }
  .nav.is-open .nav__menu a:hover{
    background: rgba(255,255,255,.04);
  }

  /* hide desktop hover-bridge inside burger overlay */
  .nav.is-open .nav__dropdown::after{ display:none; }
}

@media (max-width: 980px){ .nav.is-open{ align-items:stretch !important; } }


/* ===== Mobile burger submenu: right-side panel without overlap ===== */
@media (max-width: 980px){
  .nav.is-open{
    display:grid !important;
    grid-template-columns: 55% 45%;
    column-gap: 12px;
  }

  /* left column items */
  .nav.is-open > a,
  .nav.is-open .nav__dropdown{
    width: 100% !important;
  }

  /* remove old divider */
  .nav.is-open::after{ display:none; }

  /* right panel always placed in second column */
  .nav.is-open .nav__menu{
    position: static !important;
    grid-column: 2;
    height: auto;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    display:none;
  }

  .nav.is-open .nav__dropdown.is-open .nav__menu{
    display:block;
  }

  /* left column wrapper */
  .nav.is-open > a,
  .nav.is-open .nav__dropdown{
    grid-column: 1;
  }
}

/* ===== Final approved header logo ===== */
.logo{
  display:flex;
  align-items:center;
}
.logo__image{
  height:56px;
  width:auto;
  display:block;
}
@media(max-width:1100px){
  .logo__image{ height:48px; }
}
@media(max-width:480px){
  .logo__image{ height:40px; }
}


/* ===== Desktop: hover bridge for "Услуги" dropdown (no layout shift) ===== */
@media (hover:hover){
  .nav__dropdown{ position:relative; }
  .nav__dropdown::after{
    content:"";
    position:absolute;
    left:0;
    top:100%;
    width:100%;
    height:14px; /* covers the visual gap (top: calc(100% + 10px)) */
    pointer-events:auto;
  }
}


/* ===== FIX: Mobile burger Services accordion (full width, no wrap, normal spacing) ===== */
@media (max-width: 980px){
  /* Disable desktop hover-bridge & absolute dropdown positioning on mobile */
  .nav__dropdown::after{ display:none !important; }
  .nav__menu{
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    display: none !important; /* closed by default */
  }
  .nav__dropdown.is-open .nav__menu{ display:block !important; }

  /* Accordion button */
  .nav__toggle{
    width:100% !important;
    padding: 12px 16px !important;
  }

  /* Links in ONE line + tighter but normal paddings */
  .nav__menu a{
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 10px 16px !important;
    line-height: 1.25;
  }

  /* Reduce vertical gaps between items */
  .nav__dropdown{ gap:6px !important; }
}


/* ===== Highlight: Mobile Services accordion look ===== */
@media (max-width: 980px){
  /* Accordion container (Услуги) */
  

  /* Toggle row */
  .nav__toggle{
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  }

  /* Add a subtle accent when opened */
  .nav__dropdown.is-open .nav__toggle{
    border-color: rgba(255,200,40,.35);
    box-shadow:
      0 0 0 1px rgba(255,200,40,.12),
      0 14px 32px rgba(0,0,0,.28);
  }

  /* Menu panel */
  .nav__menu{
    margin-top: 10px !important;
    background: rgba(0,0,0,.18) !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 14px !important;
    overflow: hidden;
  }

  /* Link rows */
  .nav__menu a{
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,.05);
  }
  .nav__menu li:last-child a{ border-bottom: none; }

  .nav__menu a:hover{
    background: rgba(255,200,40,.10);
  }
  .nav__menu a:active{
    background: rgba(255,200,40,.16);
  }
}


/* ===== Clean mobile Services accordion (single highlight) ===== */
@media (max-width: 980px){
  .nav__dropdown{
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
  }

  .nav__toggle{
    border-radius: 16px;
    border: 1px solid rgba(255,200,40,.35);
    background: rgba(255,255,255,.02);
  }

  .nav__dropdown.is-open .nav__toggle{
    background: rgba(255,200,40,.08);
  }

  .nav__menu{
    margin-top: 8px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    background: rgba(0,0,0,.18) !important;
    box-shadow: 0 14px 32px rgba(0,0,0,.28);
  }
}


/* --- Cars cards: consistent images + SEO-friendly <img> --- */
@media (max-width: 640px){
  }

/* Slight warm overlay to fit site palette */
/* Raise only the 2nd card image a bit */
/* ===== FINAL override: raise 2nd car image (Comfort) ===== */

/* ===== Cars block: consistent images (index) =====
   Используем <img> в HTML для SEO (alt/индексация).
   В CSS только выравнивание и единый стиль. */
/* фирменный тёплый оверлей */
/* Точная корректировка кадра только для 2-й карточки */

/* ===== Cars cards (index): canonical styles (no duplicates) ===== */
.car__img{
  position: relative;
  height: 160px;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(0,0,0,.08);
}

.car__img > img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* По факту "поднять авто" = показывать больше нижней части кадра */
  object-position: center 65%;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.01);
}

/* фирменный тёплый оверлей */
.car__img::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(120deg, rgba(255,200,40,.12), rgba(0,0,0,0));
}

/* 2-я карточка — как ты настроил идеально */
.car__img--2 > img{
  object-position: center 70%;
}

/* 3-я карточка — как у 1-й (наследует 65%) */

/* ===== Mobile smart-cover: keep car photos meaningful (less crop, still fills) ===== */
@media (max-width: 980px){
  /* Give more vertical space so cover doesn't cut the car */
  .car__img{ height: 210px; }

  .car__img > img{
    object-fit: cover !important;
    transform: none !important;
    filter: saturate(1.03) contrast(1.03);
  }

  /* On narrow screens we show slightly lower part of the frame (car sits lower in photos) */
  .car__img--1 > img,
  .car__img--3 > img{
    object-position: center 78% !important;
  }

  .car__img--2 > img{
    object-position: center 76% !important;
  }

  /* Softer overlay on mobile */
  .car__img::after{
    background: linear-gradient(120deg, rgba(255,200,40,.08), rgba(0,0,0,0)) !important;
  }
}


/* === RENT PAGE: cars grid (11 cards) === */
.cars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:18px}
@media (max-width: 980px){.cars{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 640px){.cars{grid-template-columns:1fr}}
.car--tall .car__body{padding-top:18px}
.car--tall h3{margin:0 0 10px}
.props--mini{margin:0 0 14px;padding-left:18px;display:grid;gap:6px}
.car__foot--mini{display:flex;justify-content:flex-end}
.car__img{background-size:cover;background-position:center;min-height:200px}
.car--tall .car__img{min-height:220px}
@media (max-width: 640px){.car--tall .car__img{min-height:210px}}
/* ===== RENT: price left, button right (restore like fix20) ===== */
.car__foot--mini{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}
.car__foot--mini .price{
  margin-right: auto;
  white-space: nowrap;
  font-weight: 800;
}

/* --- QR band (putevye-listy) --- */
.qrband{
  margin-top: 16px;
  display: flex;
  gap: 22px;
  padding: 14px 18px;
  /* keep the band as compact as its content */
  height: auto;
  min-height: 0;
  align-items: start;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: radial-gradient(1200px 400px at 20% 0%, rgba(255,208,51,.14), transparent 55%),
              linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
.qrband__media{
  display:flex;
  /* stick QR to the top edge of the band */
  align-items:flex-start;
  justify-content:center;
  flex: 0 0 210px;
  /* QR size aligns with text block */
  align-self:flex-start;
}
.qrband__content{
  align-self: start;
  padding-top: 2px;
  flex: 1 1 auto;
}
.qrband__lead{
  margin: 0 0 10px;
  color: rgba(255,255,255,.80);
}
.qrband__media img{
  width: 100%;
  /* Keep the band compact on desktop */
  max-width: 210px;
  max-height: none;
  height: auto;
  display:block;
  border-radius: 18px;
}
.qrband__content h3{
  margin: 0 0 8px;
}
.qrband__list{
  margin: 8px 0 10px;
  padding-left: 18px;
  color: rgba(255,255,255,.86);
}
.qrband__list li{
  margin: 6px 0;
}

@media (max-width: 760px){
  .qrband{flex-direction: column; gap: 14px; padding: 16px 16px;}
  /* Mobile: compact layout — text first, QR under the text */
  .qrband__content{order: 1;}
  .qrband__media{order: 2; width: 100%; justify-content: center; align-items: center;}
  .qrband__media img{max-width: 240px;}
}


/* ===============================
   FIX: Always-visible topbar + header
   (prevents 'sticky' from stopping inside a parent container)
   =============================== */

:root{
  --topbar-h: 0px;
  --header-h: 0px;
}

/* When enabled via JS, reserve space so content doesn't go under bars */
body.has-fixed-topbars{
  padding-top: calc(var(--topbar-h) + var(--header-h));
}

body.has-fixed-topbars .topbar{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10000 !important;
}

body.has-fixed-topbars .header{
  position: fixed !important;
  top: var(--topbar-h) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
}

/* Make sure no parent clipping breaks fixed bars */
body.has-fixed-topbars .topbar,
body.has-fixed-topbars .header{
  transform: none !important;
}

/* Topbar Telegram icon */
.topbar__tg{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:10px;
  margin-left:10px;
  color: rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.topbar__tg:hover{background: rgba(255,255,255,.08);}
.topbar__tg svg{display:block}

/* ===== Topbar mobile fixes ===== */
.topbar__right,
.topbar__phone{
  white-space: nowrap;
}

.topbar__right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap: nowrap;
}

.topbar__tg{
  flex: 0 0 auto;
}

.topbar__tg svg{
  width:18px;
  height:18px;
}

/* Ensure phone does not break on small screens */
.topphone{
  white-space: nowrap;
}

/* ===== Anchor offset for fixed topbar + header ===== */
:root{
  --fixed-offset: 140px; /* topbar + header height */
}
#lead, .lead, .form, .lead-form{
  scroll-margin-top: var(--fixed-offset);
}

/* ===== Global mobile layout safety ===== */
html, body{max-width:100%; overflow-x:hidden;}
*, *::before, *::after{box-sizing:border-box;}
img, svg{max-width:100%; height:auto;}
.container{max-width:1200px; width:100%;}

@media (max-width: 992px){
  .container{padding-left:16px; padding-right:16px;}
}

@media (max-width: 768px){
  /* Prevent cards/grids from forcing horizontal scroll */
  .grid, .cards, .services__grid, .docs__grid, .rent__grid, .features__grid,
  .tariffs__grid, .steps__grid, .faq__grid{
    grid-template-columns: 1fr !important;
  }
  .row, .header__row, .footer__row{flex-wrap:wrap;}
  /* Keep email + phone on the same line in topbar */
  .topbar__row{flex-wrap:nowrap; align-items:flex-start;}
  .nav{max-width:100%;}
  .card, .service, .doc, .rent-card{min-width:0;}
  input, select, textarea{max-width:100%;}

  /* Forms: never keep 2 columns on small screens (iPhone 15 ≈ 393px) */
  .form{ grid-template-columns: 1fr !important; }
  .form .btn{ width:100%; }

  /* Topbar mobile layout (clean):
     - Hide email + schedule (they clutter on iPhone widths)
     - Phone on first line (right)
     - TG + "Заказать звонок" on ONE line under the phone (right)
  */
  .topbar__left{flex:1; min-width:0; align-items:center; gap:10px;}
  .topbar__left .toplink,
  .topbar__left .muted{display:none !important;}

  /* Right side layout on mobile:
     Row 1: phone (full width, right)
     Row 2: TG + button on ONE line (right)
  */
  .topbar__right{
    display:grid;
    grid-template-columns:auto auto;
    grid-template-areas:
      "phone phone"
      "tg btn";
    justify-content:end;
    justify-items:end;
    align-items:center;
    column-gap:10px;
    row-gap:8px;
  }
  .topbar__right .topphone{
    grid-area:phone;
    text-align:right;
    white-space:nowrap;
  }
  .topbar__right .topbar__tg{
    grid-area:tg;
  }
  .topbar__right .btn{
    grid-area:btn;
    width:auto;
    white-space:nowrap;
    min-width:0;
  }
  .topbar__right .btn--ghost{
    padding:7px 10px;
    font-size:13px;
    line-height:1.1;
  }
}

/* ===== Burger click safety ===== */
.burger{position:relative; z-index:10002;}
.header{z-index:10000;}
.topbar{z-index:10001;}

/* ===== Extra mobile layout polish (iPhone 15/15 Pro/Max) ===== */
@media (max-width: 560px){
  /* Make all main content grids strictly 1 column to avoid “half cards” and horizontal overflow */
  .cards{ grid-template-columns: 1fr !important; }
  .steps{ grid-template-columns: 1fr !important; }
  .calc__grid{ grid-template-columns: 1fr !important; }

  /* Hero stats: 2 columns + last item full width (looks ровно и не давит) */
  /* Keep stats in one row on mobile (3 equal cards) */
  .hero__stats{
    grid-template-columns: repeat(3, 1fr);
    gap:8px;
    left:12px;
    right:12px;
    bottom:12px;
  }
  .stat{ padding:10px; border-radius:14px; }
  .stat__num{ font-size:14px; }
  .stat__label{ font-size:11px; margin-top:3px; }

  /* Hero CTA buttons: stack nicely */
  .hero__cta{
    flex-direction: column;
    align-items: stretch;
  }
  .hero__cta .btn{
    width: 100%;
    justify-content: center;
  }

  /* Generic paired buttons block (used on documents pages too) */
  .btnpair{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .btnpair .btn{
    width:100%;
    justify-content:center;
  }
}
/* v6 patch marker */

/* ===== v6: iPhone 15+ mobile overflow fixes (coarse pointer) ===== */
@media (max-width: 640px) and (hover: none) and (pointer: coarse){
  /* Core grids that must never overflow on mobile */
  .steps,
  .cards,
  .cars,
  .services__grid,
  .docs__grid,
  .rent__grid,
  .features__grid,
  .tariffs__grid,
  .faq__grid,
  .hero__grid,
  .calc__grid,
  .warn,
  .warn__list{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Force single-column for “tiles/steps/cards” so nothing sticks out */
  .steps,
  .cards,
  .cars,
  .services__grid,
  .docs__grid,
  .rent__grid,
  .features__grid,
  .tariffs__grid,
  .faq__grid,
  .hero__grid,
  .calc__grid,
  .warn,
  .warn__list{
    grid-template-columns: 1fr !important;
  }

  /* Any grid/flex child should be allowed to shrink inside the viewport */
  .step,
  .card,
  .service,
  .doc,
  .rent-card,
  .car,
  .feature,
  .tariff,
  .faq details,
  .leadbox,
  .warn__item{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Prevent long words/links from pushing layout wider than screen */
  h1, h2, h3, p, a, li, .muted{
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Safety: if any section still tries to overflow, clip it */
  .section, .container{
    overflow-x: clip;
  }
}


/* --- SEO: real <img> inside car__img blocks (rent) --- */
.car__img img{width:100%;height:100%;object-fit:cover;display:block;}


/* --- Accessibility/SEO helper: visually hidden but indexable content --- */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}


/* ===== FAQ (UX + SEO) ===== */
.faq{padding:56px 0}
.faq h2{margin:0 0 16px;font-size:28px;line-height:1.15}
.faq__list{display:grid;gap:10px}
.faq__item{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:16px;overflow:hidden}
.faq__q{list-style:none;cursor:pointer;padding:14px 16px;font-weight:700}
.faq__q::-webkit-details-marker{display:none}
.faq__item[open] .faq__q{border-bottom:1px solid rgba(0,0,0,.08)}
.faq__a{padding:12px 16px 16px;color:rgba(0,0,0,.78)}
.faq__a p{margin:0}
@media (max-width:560px){
  .faq{padding:44px 0}
  .faq h2{font-size:22px}
  .faq__q{padding:12px 14px}
  .faq__a{padding:10px 14px 14px}
}

/* Breadcrumbs (UX + SEO) */
.breadcrumbs{padding:10px 0 0}
.breadcrumbs .container{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;line-height:1.3;color:var(--muted)}
.breadcrumbs a{color:var(--text);text-decoration:none}
.breadcrumbs a:hover{text-decoration:underline}
.breadcrumbs__sep{color:rgba(255,255,255,.25)}
@media (max-width:768px){.breadcrumbs{padding:8px 0 0}.breadcrumbs .container{font-size:12px}}


/* ===== SEO text blocks (Step 5) ===== */
.seo-block h3{margin:18px 0 8px;font-size:18px}
.seo-block p{max-width:900px}
@media (max-width:768px){.seo-block h3{font-size:16px}}

/* ===== Step 6: Image SEO / Performance ===== */
.car__img{background:none !important;}
.car__img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}

/* avoid layout shifts for hidden hero imgs */
.hero__img img.visually-hidden{width:1px;height:1px;}


/* === FIX: hero card should not stretch (removes dark empty strip under photo) === */
.hero__grid > .hero__card{
  align-self: start !important;
}


/* ===== Step 7 production cleanup ===== */
.hero__grid > .hero__card{align-self:start !important;}
.hero__card{height:auto !important;}
.hero__stats{z-index:5;}
img{max-width:100%;height:auto;}
@media (max-width:560px){
  .hero__stats{grid-template-columns:repeat(3, minmax(0,1fr));}
  .stat{min-width:0;}
}


/* Step 8: WebP optimized hero backgrounds */
.hero__img{
  background:
    radial-gradient(300px 180px at 70% 35%, rgba(255,213,74,.25), transparent 70%),
    linear-gradient(120deg, rgba(255,200,40,.18), rgba(255,255,255,.02)),
    image-set(url("./assets/company.webp") type("image/webp"), url("./assets/company.png") type("image/png")) center 35%/cover no-repeat;
}

.hero__img--razblok{
  background:
    radial-gradient(300px 180px at 70% 35%, rgba(255,213,74,.25), transparent 70%),
    linear-gradient(120deg, rgba(255,200,40,.18), rgba(255,255,255,.02)),
    image-set(url("./assets/razblok-hero.webp") type("image/webp"), url("./assets/razblok-hero.png") type("image/png")) center 50%/cover no-repeat;
}
@media (max-width: 560px){
  .hero__img--razblok{
    background:
      radial-gradient(260px 160px at 70% 30%, rgba(255,213,74,.22), transparent 70%),
      linear-gradient(120deg, rgba(255,200,40,.14), rgba(255,255,255,.01)),
      image-set(url("./assets/razblok-hero.webp") type("image/webp"), url("./assets/razblok-hero.png") type("image/png")) center 45%/cover no-repeat;
  }
}


/* Step 9 final polish: stable production safeguards */
.hero__grid > .hero__card{align-self:start !important;}
.footer a, .topbar a{overflow-wrap:anywhere;}
.card, .service, .step, .car, .faq__item{min-width:0;}
@media (max-width:560px){
  body{overflow-x:hidden;}
  .container{max-width:100%;}
}


/* Step 11 legal and contacts polish */
.legal h2{margin:22px 0 8px;font-size:22px}
.legal p{line-height:1.6}
.contacts-map .btnpair{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.form .small a,.footer a{ text-underline-offset:3px; }
@media (max-width:560px){
  .contacts-map .btnpair .btn{width:100%;justify-content:center}
}


/* Step 12 legal links on every page */
.footer__legal{
  width:min(1120px, 92vw);
  margin:22px auto 0;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  color:var(--muted);
  font-size:13px;
}
.footer__legal a{color:var(--muted); text-decoration:underline; text-underline-offset:3px}
.footer__legal a:hover{color:var(--text)}
@media (max-width:560px){
  .footer__legal{justify-content:center;text-align:center}
}


/* Step 15 knowledge quality pages: glossary + articles with thematic WebP cards */
.knowledge-hero{
  padding:46px 0 34px;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:
    radial-gradient(700px 320px at 15% 10%, rgba(255,213,74,.12), transparent 65%),
    radial-gradient(620px 280px at 85% 20%, rgba(82,157,255,.10), transparent 70%);
}
.knowledge-hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);
  gap:22px;
  align-items:stretch;
}
.knowledge-hero h1{font-size:48px;line-height:1.02;margin:14px 0 12px}
.knowledge-hero__panel{
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  border-radius:var(--radius2);
  box-shadow:var(--shadow);
  padding:24px;
  position:relative;
  overflow:hidden;
}
.knowledge-hero__panel:before{
  content:"";
  position:absolute;right:-40px;bottom:-60px;
  width:180px;height:180px;border-radius:50%;
  background:rgba(255,213,74,.14);
  filter:blur(8px);
}
.knowledge-hero__panel strong{display:block;font-size:56px;line-height:1;color:var(--accent)}
.knowledge-hero__panel span{display:block;font-weight:800;margin-top:8px}
.knowledge-hero__panel p{color:var(--muted);line-height:1.55}
.knowledge-filters{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.chip{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:var(--text);
  padding:9px 13px;
  border-radius:999px;
  cursor:pointer;
  font-weight:700;
}
.chip.is-active,.chip:hover{border-color:rgba(255,213,74,.45);background:rgba(255,213,74,.12)}
.knowledge-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.knowledge-grid--articles{grid-template-columns:repeat(3,minmax(0,1fr))}
.knowledge-card{
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  border-radius:22px;
  overflow:hidden;
  min-height:100%;
  box-shadow:0 18px 48px rgba(0,0,0,.22);
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}
.knowledge-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,213,74,.34);
  background:linear-gradient(180deg, rgba(255,213,74,.075), rgba(255,255,255,.025));
}
.knowledge-card__image{
  display:block;
  height:170px;
  overflow:hidden;
  background:rgba(255,255,255,.04);
}
.knowledge-card__image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.01);
  transition:transform .35s ease;
}
.knowledge-card:hover .knowledge-card__image img{transform:scale(1.06)}
.knowledge-card__body{padding:16px}
.knowledge-card__tag,.knowledge-card__meta span{
  display:inline-flex;
  border:1px solid rgba(255,213,74,.28);
  background:rgba(255,213,74,.10);
  color:#ffe58a;
  border-radius:999px;
  padding:6px 9px;
  font-size:12px;
  font-weight:800;
}
.knowledge-card__meta{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:10px}
.knowledge-card__meta time{font-size:12px;color:var(--muted)}
.knowledge-card h3{margin:12px 0 8px;font-size:20px;line-height:1.18}
.knowledge-card p{color:var(--muted);line-height:1.55}
.knowledge-card__link{font-weight:800;color:var(--accent);text-decoration:none}
.knowledge-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:22px;
  align-items:start;
}
.knowledge-article{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.035);
  border-radius:var(--radius2);
  padding:28px;
}
.knowledge-article__photo{
  display:block;
  height:320px;
  border-radius:22px;
  overflow:hidden;
  margin:-6px 0 22px;
  border:1px solid rgba(255,255,255,.10);
}
.knowledge-article__photo img{width:100%;height:100%;object-fit:cover;display:block}
.knowledge-article h1{font-size:42px;line-height:1.08;margin:14px 0}
.knowledge-article h2{font-size:26px;margin:28px 0 10px}
.knowledge-article p{line-height:1.75;color:rgba(232,238,252,.92)}
.knowledge-related{
  margin-top:28px;
  border:1px solid rgba(255,213,74,.22);
  background:rgba(255,213,74,.08);
  border-radius:20px;
  padding:18px;
}
.knowledge-aside{
  position:sticky;
  top:calc(var(--topbar-h, 0px) + var(--header-h, 0px) + 20px);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.035);
  border-radius:22px;
  padding:18px;
}
.knowledge-aside a{
  display:block;
  padding:10px 0;
  color:var(--muted);
  text-decoration:none;
  border-top:1px solid rgba(255,255,255,.07);
}
.knowledge-aside a:hover{color:var(--text)}
.cta-strip{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius2);
  padding:24px;
  background:linear-gradient(135deg, rgba(255,213,74,.10), rgba(255,255,255,.03));
}
.reveal{animation:knowledgeFadeUp .55s ease both}
@keyframes knowledgeFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.knowledge-card:nth-child(2){animation-delay:.04s}
.knowledge-card:nth-child(3){animation-delay:.08s}
.knowledge-card:nth-child(4){animation-delay:.12s}
.knowledge-card:nth-child(5){animation-delay:.16s}
.knowledge-card:nth-child(6){animation-delay:.20s}
@media (max-width:1100px){
  .knowledge-grid,.knowledge-grid--articles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .knowledge-hero__grid,.knowledge-layout{grid-template-columns:1fr}
  .knowledge-aside{position:static}
}
@media (max-width:560px){
  .knowledge-hero{padding:30px 0 24px}
  .knowledge-hero h1{font-size:36px}
  .knowledge-grid,.knowledge-grid--articles{grid-template-columns:1fr}
  .knowledge-card__image{height:190px}
  .knowledge-article{padding:20px}
  .knowledge-article__photo{height:220px}
  .knowledge-article h1{font-size:32px}
  .cta-strip{display:block}
  .cta-strip .btn{width:100%;justify-content:center;margin-top:12px}
}