:root {
  --dk: #16181b;
  --dk2: #1e2227;
  --dk3: #252b32;
  --dk4: #2c333c;
  --silver: #8a9099;
  --light: #c8cdd4;
  --white: #eef0f3;
  --red: #c0392b;
  --red2: #e74c3c;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{font-family:'Montserrat',sans-serif;background:var(--dk);color:var(--white);overflow-x:hidden}

/* ── NAV (копия с главной) ── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;height:66px;
  background:rgba(22,24,27,.97);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(192,57,43,.22);
  display:flex;align-items:center;justify-content:space-between;padding:0 2rem;
}
.nav-logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.nav-logo img{height:52px;width:52px;object-fit:contain;border-radius:8px}
.nav-links{display:flex;gap:1.3rem;list-style:none}
.nav-links a{color:var(--silver);text-decoration:none;font-size:0.77rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;transition:color .2s;white-space:nowrap}
.nav-links a:hover,.nav-links a.active{color:var(--red2)}
.nav-right{display:flex;gap:.5rem;align-items:center;flex-shrink:0}
.nav-lk{display:flex;align-items:center;gap:5px;color:var(--silver);text-decoration:none;font-size:0.68rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase;border:1px solid rgba(138,144,153,.22);padding:.32rem .8rem;transition:all .2s;white-space:nowrap}
.nav-lk:hover{border-color:var(--red2);color:var(--white)}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:5px;margin-left:.5rem}
.burger span{width:22px;height:2px;background:var(--silver);display:block;transition:all .3s}
.mob-menu{display:none;position:fixed;top:66px;left:0;right:0;background:var(--dk2);
  border-bottom:1px solid rgba(192,57,43,.2);z-index:999;padding:1rem 2rem;flex-direction:column;gap:.6rem}
.mob-menu.open{display:flex}
.mob-menu a{color:var(--silver);text-decoration:none;font-size:0.9rem;font-weight:600;
  letter-spacing:1px;text-transform:uppercase;padding:.5rem 0;border-bottom:1px solid rgba(138,144,153,.07)}

/* ── THEME TOGGLE BTN (копия с главной) ── */
.theme-toggle{
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(138,144,153,.3);
  background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;transition:all .25s;flex-shrink:0;color:var(--silver);
}
.theme-toggle:hover{border-color:var(--red);color:var(--red2);background:rgba(192,57,43,.08);transform:rotate(20deg)}

@media(max-width:1600px){
  nav{padding:0 1.2rem}
  .nav-logo img{height:44px;width:44px}
  .nav-links{gap:.85rem}
  .nav-links a{font-size:.72rem;letter-spacing:.45px}
  .nav-right{gap:.35rem}
  .nav-lk{padding:.32rem .58rem;font-size:.66rem;letter-spacing:.35px}
  .theme-toggle{width:32px;height:32px;font-size:.95rem}
}
@media(max-width:1340px){
  nav{padding:0 .8rem}
  .nav-links{gap:.6rem}
  .nav-links a{font-size:.66rem;letter-spacing:.25px}
  .nav-lk{padding:.34rem .5rem;font-size:0;gap:0}
}
@media(max-width:1100px){
  .nav-links{display:none}
  .burger{display:flex}
  .nav-lk,.theme-toggle{display:none}
}

/* ── LIGHT THEME (копия логики с главной, чтобы страница не оставалась чёрной при включённой светлой теме) ── */
body.light-theme{
  --dk:#f2eeea;--dk2:#e9e4de;--dk3:#e0dbd4;--dk4:#d4cec6;
  --silver:#5a6270;--light:#3a4250;--white:#1a2030;
  background:var(--dk);color:var(--white)
}
body.light-theme nav{background:rgba(240,242,245,.97);border-bottom:1px solid rgba(192,57,43,.22)}
body.light-theme .avto-hero-glow{background:linear-gradient(to bottom, rgba(242,238,234,.65) 0%, rgba(242,238,234,.4) 45%, rgba(242,238,234,.85) 100%)}
body.light-theme .avto-gallery-control{background:rgba(242,238,234,.82);color:var(--white)}
body.light-theme .avto-gallery-counter{background:rgba(242,238,234,.85);color:var(--white)}

/* ── SHARED (копия с главной) ── */
.wrap{max-width:1140px;margin:0 auto;padding:0 2rem}
.sec-label{font-size:0.69rem;color:var(--red);letter-spacing:3px;text-transform:uppercase;font-weight:700;margin-bottom:.5rem;text-align:center}
.sec-desc{color:var(--silver);font-size:1.03rem;line-height:1.7;font-weight:300;text-align:center;max-width:640px;margin:0 auto}
.bg2{background:var(--dk2)}

/* ── PAGE ── */
.avto-page{padding-top:66px}

/* ── HERO ── */
.avto-hero{position:relative;overflow:hidden;padding:4rem 0 3.5rem}
.avto-hero-bg{
  position:absolute;inset:0;
  background:url('/images/bg-cases.jpg') center center/cover no-repeat;
  opacity:.12;filter:saturate(.5);
}
.avto-hero-glow{
  position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(22,24,27,.65) 0%, rgba(22,24,27,.4) 45%, rgba(22,24,27,.85) 100%);
}
.avto-hero-wrap{position:relative;z-index:1;text-align:center}
.avto-back{margin:0 0 1.4rem}
.avto-back a{color:var(--silver);font-size:0.8rem;text-decoration:none;letter-spacing:.3px}
.avto-back a:hover{color:var(--red2)}
.avto-title{
  font-family:'Bebas Neue',sans-serif;font-size:clamp(2.4rem,6vw,4rem);letter-spacing:2px;
  margin:0 0 1rem;color:var(--white);
}
.avto-intro{margin:0 auto}

/* ── CATALOG ── */
.avto-catalog-sec{padding:3.5rem 0}

.avto-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:24px;
}

.avto-card{
  display:flex;
  min-width:0;
  overflow:hidden;
  flex-direction:column;
  border:1px solid rgba(138,144,153,.14);
  border-radius:14px;
  background:var(--dk3);
  box-shadow:0 6px 22px rgba(0,0,0,.28);
  transition:border-color .2s, transform .2s;
}
.avto-card:hover{border-color:rgba(192,57,43,.4);transform:translateY(-2px)}

.avto-gallery{
  position:relative;
  overflow:hidden;
  aspect-ratio:16/10;
  background:var(--dk4);
}
.avto-gallery-image{display:block;width:100%;height:100%;object-fit:cover}
.avto-gallery-placeholder{
  display:grid;width:100%;height:100%;place-items:center;padding:24px;
  color:var(--silver);font-size:15px;text-align:center;
}
.avto-gallery-control{
  position:absolute;top:50%;display:grid;width:38px;height:38px;padding:0;
  transform:translateY(-50%);border:1px solid rgba(238,240,243,.3);border-radius:50%;
  color:var(--white);background:rgba(22,24,27,.72);box-shadow:0 2px 8px rgba(0,0,0,.35);
  cursor:pointer;font:inherit;font-size:25px;line-height:1;place-items:center;
  transition:border-color .2s, color .2s;
}
.avto-gallery-control:hover{border-color:var(--red2);color:var(--red2)}
.avto-gallery-control:focus-visible,.avto-button:focus-visible{outline:3px solid rgba(231,76,60,.35);outline-offset:3px}
.avto-gallery-control--previous{left:12px}
.avto-gallery-control--next{right:12px}
.avto-gallery-counter{
  position:absolute;right:12px;bottom:10px;margin:0;padding:3px 9px;border-radius:999px;
  color:var(--white);background:rgba(22,24,27,.75);font-size:12px;
}

.avto-card-body{display:flex;flex:1;flex-direction:column;padding:22px}
.avto-card-title{margin:0 0 5px;font-size:21px;line-height:1.25;color:var(--white);font-weight:600}
.avto-card-details{margin:0 0 18px;color:var(--silver);font-size:15px}
.avto-card-price{margin:0;font-size:25px;font-weight:700;line-height:1.2;color:var(--white)}
.avto-card-offers{
  align-self:flex-start;margin:10px 0 0;padding:5px 9px;border-radius:6px;
  color:var(--red2);background:rgba(192,57,43,.14);font-size:13px;font-weight:650;
}
.avto-card-action{margin-top:22px}

.avto-button{
  display:inline-flex;min-height:48px;align-items:center;justify-content:center;
  padding:12px 18px;border:none;border-radius:8px;color:#fff;
  background:linear-gradient(135deg,var(--red) 0%,var(--red2) 100%);
  box-shadow:0 4px 16px rgba(192,57,43,.35);
  font-size:15px;font-weight:700;line-height:1.3;text-align:center;text-decoration:none;
  transition:box-shadow .2s, transform .2s;
}
.avto-button:hover{box-shadow:0 6px 22px rgba(192,57,43,.55);transform:translateY(-1px)}
.avto-card .avto-button{width:100%}

.avto-status{
  margin:0 0 24px;padding:32px;border:1px solid rgba(138,144,153,.14);border-radius:12px;
  color:var(--silver);background:var(--dk3);text-align:center;
}
.avto-status[hidden]{display:none}

/* ── SUBSCRIPTION ── */
.avto-subscription-sec{padding:0 0 4.5rem}
.avto-subscription{
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  padding:34px 36px;border:1px solid rgba(192,57,43,.22);border-radius:14px;
  background:var(--dk2);
}
.avto-subscription-title{margin:0 0 5px;font-family:'Bebas Neue',sans-serif;font-size:1.7rem;letter-spacing:1px;color:var(--white)}
.avto-subscription-text{margin:0;color:var(--silver)}
.avto-qr{flex:0 0 auto;border:1px solid rgba(138,144,153,.2);border-radius:8px;background:#fff;padding:4px}
.avto-button--subscribe{flex:0 0 auto}

/* ── FOOTER (копия с главной) ── */
footer{background:var(--dk);border-top:1px solid rgba(192,57,43,.16);padding:2.5rem 2rem 1.5rem}
.footer-top{max-width:1140px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr 1fr;gap:2rem;padding-bottom:2rem;border-bottom:1px solid rgba(138,144,153,.08)}
.footer-brand{display:flex;align-items:center;gap:12px;margin-bottom:.9rem}
.footer-brand img{height:60px;width:60px;object-fit:contain;border-radius:8px}
.footer-logo{font-family:'Bebas Neue',sans-serif;font-size:2rem;letter-spacing:3px;color:var(--white)}
.footer-legal{font-size:0.74rem;color:var(--silver);line-height:1.7}
.footer-col-title{font-size:0.75rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--light);margin-bottom:.9rem}
.footer-links-list{list-style:none}
.footer-links-list li{padding:.28rem 0}
.footer-links-list a{color:var(--silver);text-decoration:none;font-size:0.83rem;transition:color .2s}
.footer-links-list a:hover{color:var(--red2)}
.footer-bottom{max-width:1140px;margin:.9rem auto 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem}
.footer-copy{font-size:0.72rem;color:var(--silver)}
.footer-fz{font-size:0.72rem;color:var(--silver)}

@media (max-width:720px){
  .footer-top{grid-template-columns:1fr}
}

@media (max-width: 900px) {
  .avto-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .avto-subscription{align-items:flex-start;flex-direction:column}
}

@media (max-width: 600px) {
  .wrap{padding:0 1.2rem}
  .avto-hero{padding:2.6rem 0}
  .avto-grid{grid-template-columns:1fr;gap:18px}
  .avto-catalog-sec{padding:2.2rem 0}
  .avto-subscription{margin-top:0;padding:24px 20px}
  .avto-subscription .avto-button{width:100%}
}

@media (prefers-reduced-motion: reduce) {
  .avto-button,.avto-card{transition:none}
}