/* ==========================================================================
   Voron Glass — Brand Site
   Colors, type and spacing follow "Corporate Visual Style — Voron Glass":
   Automotive / Performance / Durable / Clean / Technical.
   Typography stack: Calibri (Bold for headings / Regular for body) with
   Carlito as the free metric-compatible fallback for non-Windows systems.
   ========================================================================== */

:root{
  --vg-black:#0a0a0b;
  --vg-graphite:#16171a;
  --vg-graphite-2:#202226;
  --vg-graphite-3:#2c2e33;
  --vg-gray:#6b6d72;
  --vg-light-gray:#f2f2f3;
  --vg-white:#ffffff;
  --vg-red:#ff1400;
  --vg-red-dark:#c31000;

  --font-heading:'Calibri','Carlito','Segoe UI',Arial,sans-serif;
  --font-body:'Calibri','Carlito','Segoe UI',Arial,sans-serif;

  --header-h:84px;
  --container:1280px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--vg-black);
  color:var(--vg-white);
  font-family:var(--font-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:700;margin:0;}
p{margin:0;}

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

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.site-header{
  position:fixed;
  top:calc(var(--header-h) * -1.4); left:0; right:0;
  z-index:100;
  height:var(--header-h);
  display:flex;
  align-items:center;
  background:linear-gradient(to bottom, rgba(10,10,11,.85), rgba(10,10,11,0));
  opacity:0;
  transition:background .4s var(--ease), box-shadow .4s var(--ease);
}
/* Note: intentionally NOT using `transform` here — a transform on this fixed
   header would create a new containing block for its fixed-position
   descendant (.nav-menu on mobile), breaking its full-viewport overlay. */
.site-header.nav-in{
  animation:navDrop 1s var(--ease) .15s forwards;
}
.site-header.scrolled{
  background:rgba(10,10,11,.92);
  backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
@keyframes navDrop{
  0%{top:calc(var(--header-h) * -1.4); opacity:0;}
  100%{top:0; opacity:1;}
}

.nav-inner{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.brand{display:flex;align-items:center;}
.brand-logo{
  display:block;
  height:30px;
  width:auto;
}

.nav-menu > ul{
  display:flex;
  align-items:center;
  gap:36px;
}
.nav-menu > ul > li > a{
  font-size:.92rem;
  font-weight:700;
  letter-spacing:.02em;
  padding:10px 2px;
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:color .25s;
}
.nav-menu > ul > li > a::after{
  content:'';
  position:absolute;
  left:0; right:100%;
  bottom:2px;
  height:2px;
  background:var(--vg-red);
  transition:right .3s var(--ease);
}
.nav-menu > ul > li > a:hover{color:var(--vg-red);}
.nav-menu > ul > li > a:hover::after{right:0;}
.chev{transition:transform .25s;}
.has-dropdown:hover .chev{transform:rotate(180deg);}

.has-dropdown{position:relative;}
.dropdown{
  position:absolute;
  top:100%;
  left:50%;
  transform:translate(-50%,8px);
  min-width:250px;
  background:var(--vg-graphite-2);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  padding:8px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  box-shadow:0 20px 40px rgba(0,0,0,.45);
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translate(-50%,0);
}
.dropdown li a{
  display:block;
  padding:11px 14px;
  border-radius:6px;
  font-size:.86rem;
  font-weight:400;
  color:var(--vg-light-gray);
  transition:background .2s, color .2s;
}
.dropdown li a:hover{background:rgba(255,20,0,.12);color:var(--vg-red);}

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:40px;height:40px;
  background:transparent;
  border:0;
  cursor:pointer;
  padding:0;
}
.nav-toggle span{
  height:2px; width:100%;
  background:var(--vg-white);
  border-radius:2px;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ==========================================================================
   CINEMATIC SCENE (Hero -> Brand intro)
   ========================================================================== */
.scene{
  position:relative;
  height:200vh;
}
.layer{
  position:sticky;
  top:0;
  height:100vh;
  width:100%;
  overflow:hidden;
}

/* --- Hero layer --- */
.hero-layer{
  z-index:1;
  display:flex;
  align-items:center;
}
.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:68% 58%;
  transform-origin:65% 38%;
  will-change:transform;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(100deg, rgba(6,6,7,.92) 0%, rgba(6,6,7,.72) 30%, rgba(6,6,7,.28) 56%, rgba(6,6,7,.15) 100%),
    linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 30%);
  will-change:opacity;
}
.hero-grain{
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:3px 3px;
  mix-blend-mode:overlay;
  pointer-events:none;
}

.hero-content{
  position:relative;
  z-index:2;
  max-width:var(--container);
  width:100%;
  margin:0 auto;
  padding:0 32px;
  will-change:transform, opacity;
}
.hero-content h1{
  font-size:clamp(2.6rem, 6vw, 5rem);
  line-height:1.03;
  max-width:820px;
  margin-bottom:22px;
  text-shadow:0 4px 30px rgba(0,0,0,.35);
}
.hero-content .subtitle{
  font-size:clamp(1rem, 1.6vw, 1.25rem);
  color:var(--vg-light-gray);
  max-width:520px;
  line-height:1.5;
  margin-bottom:38px;
}

[data-reveal]{
  opacity:0;
  transform:translateX(56px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.hero-content.in-view [data-reveal]{opacity:1; transform:translateX(0);}
.hero-content.in-view [data-reveal][data-delay="0"]{transition-delay:.15s;}
.hero-content.in-view [data-reveal][data-delay="1"]{transition-delay:.32s;}
.hero-content.in-view [data-reveal][data-delay="2"]{transition-delay:.5s;}
.hero-content.in-view [data-reveal][data-delay="3"]{transition-delay:.68s;}
.hero-content.in-view [data-reveal][data-delay="4"]{transition-delay:.86s;}

.hero-actions{display:flex;gap:18px;flex-wrap:wrap;}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 34px;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.03em;
  border-radius:999px;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .25s var(--ease), background .25s, border-color .25s, color .25s;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--vg-red);color:var(--vg-white);}
.btn-primary:hover{background:var(--vg-red-dark);}
.btn-outline{background:transparent;border-color:rgba(255,255,255,.55);color:var(--vg-white);}
.btn-outline:hover{border-color:var(--vg-white);background:rgba(255,255,255,.08);}

.scroll-cue{
  position:absolute;
  bottom:34px;
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color:rgba(255,255,255,.75);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.scroll-cue i{
  width:1px;height:34px;
  background:linear-gradient(to bottom, rgba(255,255,255,.9), rgba(255,255,255,0));
  animation:scrollCue 1.8s ease-in-out infinite;
}
@keyframes scrollCue{
  0%{transform:scaleY(.3); transform-origin:top;}
  50%{transform:scaleY(1); transform-origin:top;}
  50.01%{transform-origin:bottom;}
  100%{transform:scaleY(.3); transform-origin:bottom;}
}

/* --- Brand intro layer (rises + scales over hero) --- */
.brand-hero-layer{
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,20,0,.10), transparent 45%),
    linear-gradient(180deg, var(--vg-graphite) 0%, var(--vg-black) 100%);
  transform:translateY(100%) scale(.94);
  will-change:transform;
}
.brand-hero-inner{
  max-width:980px;
  margin:0 auto;
  padding:0 32px;
  text-align:center;
}
.brand-headline{
  font-size:clamp(2.1rem, 5.4vw, 4.2rem);
  line-height:1.08;
  display:flex;
  flex-wrap:wrap;
  gap:.35em;
  justify-content:center;
  margin-bottom:28px;
}
.hl{color:var(--vg-light-gray);}
.hl-accent{
  color:var(--vg-red);
  position:relative;
}
.brand-copy{
  max-width:900px;
  margin:0 auto;
  font-size:clamp(.95rem, 1.4vw, 1.1rem);
  line-height:1.65;
  color:rgba(242,242,243,.82);
}

/* ==========================================================================
   BRAND BODY: STATS + PRODUCTS
   ========================================================================== */
.brand-body{
  position:relative;
  z-index:3;
  background:var(--vg-black);
  padding-bottom:0;
}

.stat-number{
  font-family:var(--font-heading);
  font-weight:700;
  color:var(--vg-white);
  line-height:1;
  letter-spacing:-.01em;
}

/* --- "Engineered Around Your Vehicle" bento block --------------------- */
.spec-block{
  max-width:var(--container);
  margin:0 auto;
  padding:56px 32px 100px;
}

.spec-grid{
  display:grid;
  grid-template-columns:2.27fr 1fr 1.62fr;
  gap:20px;
}
.spec-card{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,20,0,.3);
  background:var(--vg-graphite);
  opacity:0;
  transform:translateY(50px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.spec-card.in-view{opacity:1;transform:translateY(0);}
.spec-card[data-delay="0"]{transition-delay:0s;}
.spec-card[data-delay="1"]{transition-delay:.12s;}
.spec-card[data-delay="2"]{transition-delay:.24s;}
.spec-card[data-delay="3"]{transition-delay:.36s;}
.spec-card[data-delay="4"]{transition-delay:.48s;}

.spec-text{
  grid-column:1;
  grid-row:1;
  padding:40px 38px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:18px;
}
.spec-text h3{
  font-size:clamp(1.35rem, 2vw, 1.7rem);
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--vg-white);
}
.spec-text p{
  font-size:.96rem;
  line-height:1.65;
  color:rgba(242,242,243,.78);
}

.spec-photo-large{
  grid-column:2 / span 2;
  grid-row:1;
  aspect-ratio:8/5;
}
.spec-video{
  grid-column:1;
  grid-row:2;
  aspect-ratio:16/10;
  background:#000;
  border-color:rgba(255,20,0,.45);
}
.spec-stats{
  grid-column:2;
  grid-row:2;
  background:linear-gradient(155deg, var(--vg-red) 0%, var(--vg-red-dark) 100%);
  border-color:transparent;
  padding:28px 26px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.spec-photo-small{
  grid-column:3;
  grid-row:2;
}

.spec-photo img,
.spec-video video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.spec-stat{
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.28);
}
.spec-stat:last-child{border-bottom:none;}
.spec-stat-number{
  display:block;
  /* Начертание задаём здесь, а не наследуем от .stat-number: этот класс висит
     только на счётчиках, поэтому «24/7» и «Lifetime Warranty» выглядели легче
     соседнего «600+». */
  font-family:var(--font-heading);
  font-weight:700;
  color:var(--vg-white);
  line-height:1;
  letter-spacing:-.01em;
  font-size:clamp(1.6rem, 2.6vw, 2.1rem);
  margin-bottom:4px;
}
/* Словесный акцент вместо цифры («Lifetime Warranty»): кегль чуть меньше,
   иначе длинная фраза ломается на три строки и карточка вырастает. */
.spec-stat-word{
  font-size:clamp(1.25rem, 1.9vw, 1.6rem);
  line-height:1.15;
}
.spec-stat-label{
  display:block;
  font-size:.85rem;
  color:rgba(255,255,255,.9);
  font-weight:700;
}

.products{
  max-width:var(--container);
  margin:0 auto;
  padding:40px 32px 140px;
}
.section-heading{
  text-align:center;
  margin-bottom:56px;
  opacity:0;
  transform:translateY(40px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.section-heading.in-view{opacity:1;transform:translateY(0);}
.section-heading h2{
  font-size:clamp(1.8rem, 3.4vw, 2.6rem);
  color:var(--vg-white);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.section-heading p{
  max-width:640px;
  margin:16px auto 0;
  font-size:1rem;
  line-height:1.6;
  color:var(--vg-gray);
}

.product-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.product-card{
  background:var(--vg-graphite);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  overflow:hidden;
  opacity:0;
  transform:translateY(64px);
  transition:opacity .85s var(--ease), transform .85s var(--ease), border-color .3s;
}
.product-card.in-view{opacity:1;transform:translateY(0);}
.product-card[data-delay="0"]{transition-delay:0s;}
.product-card[data-delay="1"]{transition-delay:.15s;}
.product-card[data-delay="2"]{transition-delay:.3s;}
.product-card:hover{border-color:rgba(255,20,0,.4);}

.product-media{
  position:relative;
  aspect-ratio:16/11;
  overflow:hidden;
}
.product-media img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .7s var(--ease), filter .5s;
  filter:saturate(1.02) contrast(1.03);
}
.product-card:hover .product-media img{transform:scale(1.07);}
.product-media::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(10,10,11,0) 55%, rgba(10,10,11,.55) 100%);
}

.product-info{padding:28px 26px 30px;}
.product-info h3{
  font-size:1.28rem;
  margin-bottom:12px;
  color:var(--vg-white);
}
.product-info p{
  font-size:.95rem;
  line-height:1.6;
  color:var(--vg-gray);
  margin-bottom:20px;
  min-height:80px;
}
.card-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:.9rem;
  color:var(--vg-red);
  letter-spacing:.02em;
}
.card-cta span{transition:transform .25s var(--ease);}
.card-cta:hover span{transform:translateX(6px);}

/* ==========================================================================
   WHERE TO BUY / BECOME A DEALER — CTA CARDS
   ========================================================================== */
.cta-block{
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px 100px;
}
.cta-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:28px;
}
.cta-card{
  border-radius:14px;
  padding:44px 42px;
  opacity:0;
  transform:translateY(50px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.cta-card.in-view{opacity:1;transform:translateY(0);}
.cta-card[data-delay="0"]{transition-delay:0s;}
.cta-card[data-delay="1"]{transition-delay:.15s;}
.cta-card h3{
  font-size:clamp(1.3rem, 2.2vw, 1.6rem);
  color:var(--vg-white);
  margin-bottom:16px;
}
.cta-card p{
  font-size:.98rem;
  line-height:1.6;
  margin-bottom:28px;
}
.cta-card-dark{
  background:var(--vg-graphite);
  border:1px solid rgba(255,20,0,.25);
}
.cta-card-dark p{color:var(--vg-gray);}
.cta-card-red{
  background:linear-gradient(155deg, #6b0f08 0%, #200704 100%);
  border:1px solid rgba(255,255,255,.08);
}
.cta-card-red p{color:rgba(255,255,255,.82);}
.card-cta-light{color:var(--vg-white);}

/* ==========================================================================
   PRODUCTION / QUALITY — full-bleed photo section, reveals on scroll
   ========================================================================== */
.production-block{
  position:relative;
  min-height:88vh;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.production-bg{position:absolute;inset:0;z-index:0;}
.production-bg-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:58% 50%;
  opacity:.2;
  transform:scale(1.06);
  filter:brightness(.6);
  transition:opacity 1.4s var(--ease), transform 1.4s var(--ease), filter 1.4s var(--ease);
}
.production-block.in-view .production-bg-img{
  opacity:1;
  transform:scale(1);
  filter:brightness(.82);
}
.production-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(100deg, rgba(6,6,7,.88) 0%, rgba(6,6,7,.62) 32%, rgba(6,6,7,.22) 60%, rgba(6,6,7,.08) 100%),
    linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,0) 30%);
}
.production-content{
  position:relative;
  z-index:1;
  max-width:var(--container);
  width:100%;
  margin:0 auto;
  padding:80px 32px;
}
.production-content h2{
  font-size:clamp(2rem, 4vw, 3.1rem);
  line-height:1.12;
  max-width:620px;
  margin-bottom:24px;
  color:var(--vg-white);
  text-shadow:0 4px 30px rgba(0,0,0,.35);
}
.production-content p{
  font-size:clamp(1rem, 1.5vw, 1.1rem);
  line-height:1.6;
  color:var(--vg-light-gray);
  max-width:520px;
  margin-bottom:34px;
}
.prod-item{
  opacity:0;
  transform:translateX(56px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.production-block.in-view .prod-item{opacity:1;transform:translateX(0);}
.production-block.in-view .prod-item[data-delay="0"]{transition-delay:.1s;}
.production-block.in-view .prod-item[data-delay="1"]{transition-delay:.28s;}
.production-block.in-view .prod-item[data-delay="2"]{transition-delay:.46s;}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
  position:relative;
  z-index:3;
  background:var(--vg-graphite);
  border-top:1px solid rgba(255,255,255,.07);
  padding:64px 32px 28px;
}
.footer-top{
  max-width:var(--container);
  margin:0 auto;
  padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.brand-footer{margin-bottom:14px;}
.brand-footer .brand-logo{height:26px;}
.footer-tagline{color:var(--vg-gray);max-width:420px;font-size:.92rem;line-height:1.5;}

.footer-grid{
  max-width:var(--container);
  margin:0 auto;
  padding:44px 0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
}
.footer-col h4{
  font-size:.82rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--vg-red);
  margin-bottom:18px;
}
.footer-col ul{display:flex;flex-direction:column;gap:12px;}
.footer-col a{
  font-size:.9rem;
  color:var(--vg-light-gray);
  opacity:.85;
  transition:opacity .2s, color .2s;
}
.footer-col a:hover{opacity:1;color:var(--vg-red);}

.footer-bottom{
  max-width:var(--container);
  margin:0 auto;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.07);
  color:var(--vg-gray);
  font-size:.82rem;
}

/* ==========================================================================
   ABOUT US PAGE
   ========================================================================== */

/* --- Simple page hero (static photo, not part of the cinematic scene) --- */
.page-hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.page-hero-bg{position:absolute;inset:0;z-index:0;}
.page-hero-bg img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:78% 48%;
}

/* --- "From Raw Material to Finished Product" process cards -------------- */
.process-block{
  max-width:var(--container);
  margin:0 auto;
  padding:100px 32px;
}
.process-card{
  background:var(--vg-graphite);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  overflow:hidden;
  opacity:0;
  transition:opacity .8s var(--ease), transform .8s var(--ease), border-color .3s;
}
.process-card:hover{border-color:rgba(255,20,0,.4);}
.process-card:hover .product-media img{transform:scale(1.07);}
.process-card[data-anim="up"]{transform:translateY(60px);}
.process-card[data-anim="down"]{transform:translateY(-60px);}
.process-card.in-view{opacity:1;transform:translateY(0);}
.process-card[data-delay="0"]{transition-delay:.1s;}
.process-card[data-delay="1"]{transition-delay:.2s;}
.process-card[data-delay="2"]{transition-delay:.3s;}

/* --- Results screen: darkened production photo + stats + CTA cards ------ */
.results-block{
  position:relative;
  overflow:hidden;
  padding:110px 32px;
}
.results-bg{position:absolute;inset:0;z-index:0;}
.results-bg-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 40%;
  filter:brightness(.38) saturate(.9);
}
.results-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(6,6,7,.82) 0%, rgba(6,6,7,.9) 100%);
}
.results-content{
  position:relative;
  z-index:1;
  max-width:820px;
  margin:0 auto;
  text-align:center;
}
.results-statement{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:clamp(1.6rem, 3.2vw, 2.5rem);
  line-height:1.25;
  color:var(--vg-white);
  margin-bottom:20px;
  opacity:0;
  transform:translateY(40px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.results-statement.in-view{opacity:1;transform:translateY(0);}
.results-heading{
  font-size:clamp(1rem, 1.6vw, 1.15rem);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--vg-red);
  margin-bottom:0;
  opacity:0;
  transform:translateY(40px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:.1s;
}
.results-heading.in-view{opacity:1;transform:translateY(0);}

.results-stats{
  position:relative;
  z-index:1;
  max-width:var(--container);
  margin:56px auto 0;
  display:flex;
  justify-content:center;
  gap:80px;
  flex-wrap:wrap;
}
.results-stat{
  text-align:center;
  opacity:0;
  transform:translateY(40px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.results-stat.in-view{opacity:1;transform:translateY(0);}
.results-stat[data-delay="0"]{transition-delay:0s;}
.results-stat[data-delay="1"]{transition-delay:.12s;}
.results-stat[data-delay="2"]{transition-delay:.24s;}
.results-stat .stat-number{
  display:block;
  font-size:clamp(2.2rem, 4vw, 3.2rem);
  margin-bottom:6px;
}
.results-stat .stat-number::after{
  content:'';
  display:block;
  width:44px;height:3px;
  background:var(--vg-red);
  margin:14px auto 0;
}
.results-stat-label{
  display:block;
  font-size:.92rem;
  font-weight:700;
  color:rgba(242,242,243,.78);
  max-width:180px;
  margin:0 auto;
}

.results-cta{
  position:relative;
  z-index:1;
  max-width:var(--container);
  margin:70px auto 0;
}

/* ==========================================================================
   TAPE-ON PRODUCT PAGE
   ========================================================================== */

/* --- Hero: same cinematic scene layer as the home page, left-aligned text,
   with 3 benefit plates pinned along the bottom ---------------------------- */
.tapeon-hero-layer .hero-bg img{
  object-position:62% 52%;
  transform-origin:56% 44%;
}
/* A static scrim on top of the photo. It is deliberately separate from
   .hero-overlay, whose opacity the scene script animates between .55 and 1 —
   leaning on that one alone would leave the headline washed out at rest. */
.tapeon-hero-layer .hero-bg::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(100deg, rgba(4,4,5,.94) 0%, rgba(4,4,5,.86) 24%, rgba(4,4,5,.6) 44%, rgba(4,4,5,.24) 68%, rgba(4,4,5,.1) 100%),
    linear-gradient(to top, rgba(4,4,5,.8) 0%, rgba(4,4,5,.22) 26%, rgba(4,4,5,0) 48%);
}
.tapeon-hero-layer .hero-content h1{
  font-size:clamp(2.1rem, 4.2vw, 3.6rem);
  max-width:900px;
  margin-bottom:18px;
}
.tapeon-hero-layer .hero-content .subtitle{max-width:600px;}
.hero-tagline{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:clamp(1.15rem, 2vw, 1.45rem);
  color:var(--vg-red);
  line-height:1.35;
  margin-bottom:18px;
}

/* --- Sunroof page hero: кадр снят сверху, машина в правой половине -------- */
.sunroof-hero-layer .hero-bg img{
  object-position:62% 46%;
  transform-origin:56% 40%;
}
.sunroof-hero-layer .hero-bg::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(100deg, rgba(4,4,5,.94) 0%, rgba(4,4,5,.84) 26%, rgba(4,4,5,.55) 48%, rgba(4,4,5,.2) 72%, rgba(4,4,5,.08) 100%),
    linear-gradient(to top, rgba(4,4,5,.8) 0%, rgba(4,4,5,.22) 26%, rgba(4,4,5,0) 48%);
}
.sunroof-hero-layer .hero-content h1{
  font-size:clamp(2rem, 3.9vw, 3.4rem);
  max-width:900px;
  margin-bottom:18px;
}
.sunroof-hero-layer .hero-content .subtitle{max-width:620px;}

/* --- In-Channel page hero: same layer mechanics as Tape-On, own framing -- */
.inchannel-hero-layer .hero-bg img{
  object-position:58% 54%;
  transform-origin:52% 44%;
}
.inchannel-hero-layer .hero-bg::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(100deg, rgba(4,4,5,.94) 0%, rgba(4,4,5,.86) 24%, rgba(4,4,5,.6) 44%, rgba(4,4,5,.24) 68%, rgba(4,4,5,.1) 100%),
    linear-gradient(to top, rgba(4,4,5,.8) 0%, rgba(4,4,5,.22) 26%, rgba(4,4,5,0) 48%);
}
.inchannel-hero-layer .hero-content h1{
  font-size:clamp(2rem, 3.9vw, 3.4rem);
  max-width:900px;
  margin-bottom:18px;
}
.inchannel-hero-layer .hero-content .subtitle{max-width:620px;}

.hero-benefits{
  position:absolute;
  left:0; right:0; bottom:44px;
  z-index:2;
}
.hero-benefits-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.hero-benefit{
  display:flex;
  align-items:flex-start;
  gap:14px;
  background:rgba(22,23,26,.72);
  backdrop-filter:blur(8px);
  border:0;
  border-radius:14px;
  padding:18px 20px;
  opacity:0;
  transform:translateY(30px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.hero-benefit.in-view{opacity:1;transform:translateY(0);}
.hero-benefit[data-delay="0"]{transition-delay:0s;}
.hero-benefit[data-delay="1"]{transition-delay:.12s;}
.hero-benefit[data-delay="2"]{transition-delay:.24s;}
.hero-benefit-icon{
  flex:0 0 auto;
  width:40px;height:40px;
  border-radius:9px;
  background:var(--vg-red);
  display:flex;align-items:center;justify-content:center;
}
.hero-benefit-icon svg{width:22px;height:22px;}
.hero-benefit-title{display:block;font-weight:700;color:var(--vg-white);font-size:.96rem;margin-bottom:4px;}
.hero-benefit-text{display:block;font-size:.85rem;color:var(--vg-gray);line-height:1.45;}

/* --- "Engineering in Every Detail": scene layer 2 on the Tape-On page.
   The photo fades in first, then the plus hotspots pop in left-to-right, then
   the first card opens. Hovering another hotspot swaps the card. ----------- */
.tape-detail-layer{
  display:block;
  background:var(--vg-black);
}
/* No z-index here on purpose: without a stacking context the hotspots below
   can lift themselves above .tape-detail-inner, so the heading never covers
   or blocks them. */
.tape-detail-bg{
  position:absolute;
  inset:0;
  overflow:hidden;
}
/* The photo fills the screen, but inside a box that keeps its true 16:9 shape
   and is grown until it covers the viewport. That way `cover` never crops the
   frame itself, so the percentage-positioned hotspots stay glued to the car
   whatever the screen proportions are. */
.hotspot-frame{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:max(100%, calc(100vh * 16 / 9));
  aspect-ratio:16/9;
}
.tape-detail-scrim{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(100deg, rgba(4,4,5,.9) 0%, rgba(4,4,5,.74) 24%, rgba(4,4,5,.4) 46%, rgba(4,4,5,.14) 72%, rgba(4,4,5,.06) 100%),
    linear-gradient(to bottom, rgba(4,4,5,.86) 0%, rgba(4,4,5,.3) 22%, rgba(4,4,5,0) 42%);
}
/* This box spans the whole screen, so it must not swallow clicks aimed at the
   hotspots underneath it — only its own interactive parts take pointer input. */
.tape-detail-inner{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:calc(var(--header-h) + 26px) 32px 32px;
  display:flex;
  flex-direction:column;
  pointer-events:none;
}
.tape-detail-head{
  max-width:640px;
  margin:0 auto 26px;
  text-align:center;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.hotspot-cards{pointer-events:auto;}
.tape-detail-layer.js-ready .tape-detail-head{opacity:0;transform:translateY(30px);}
.tape-detail-layer.scene-revealed .tape-detail-head{opacity:1;transform:translateY(0);}
.tape-detail-head h2{
  font-size:clamp(1.6rem, 3vw, 2.4rem);
  color:var(--vg-white);
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:14px;
}
.tape-detail-head p{
  font-size:.95rem;
  line-height:1.6;
  color:rgba(242,242,243,.78);
}

.hotspot-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:opacity .9s var(--ease), transform 1.3s var(--ease);
}
.tape-detail-layer.js-ready .hotspot-photo{opacity:0;transform:scale(1.05);}
.tape-detail-layer.scene-revealed .hotspot-photo{opacity:1;transform:scale(1);}

/* Plus hotspots pinned to the deflector line by percentage, so they stay put
   at every stage size (the stage keeps a fixed 16:9 box for exactly this). */
.hotspot{
  position:absolute;
  z-index:3;
  width:34px;height:34px;
  margin:0;padding:0;
  border:0;
  border-radius:50%;
  background:var(--vg-red);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transform:translate(-50%,-50%);
  transition:opacity .45s var(--ease), transform .45s var(--ease), box-shadow .3s;
  box-shadow:0 0 0 3px rgba(255,20,0,.22), 0 0 12px rgba(255,20,0,.75);
}
.tape-detail-layer.js-ready .hotspot{opacity:0;transform:translate(-50%,-50%) scale(.3);}
.hotspot svg{width:20px;height:20px;pointer-events:none;}
/* Widen the tap/hover target without changing the visual size. */
.hotspot::after{content:'';position:absolute;inset:-11px;border-radius:50%;}
.tape-detail-layer.scene-revealed .hotspot{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
  animation:hotspotPulse 2.6s ease-in-out infinite 1.6s;
}
.tape-detail-layer.scene-revealed .hotspot[data-hotspot="0"]{transition-delay:.75s;}
.tape-detail-layer.scene-revealed .hotspot[data-hotspot="1"]{transition-delay:.9s;}
.tape-detail-layer.scene-revealed .hotspot[data-hotspot="2"]{transition-delay:1.05s;}
.tape-detail-layer.scene-revealed .hotspot[data-hotspot="3"]{transition-delay:1.2s;}
.tape-detail-layer.scene-revealed .hotspot[data-hotspot="4"]{transition-delay:1.35s;}
@keyframes hotspotPulse{
  0%,100%{box-shadow:0 0 0 3px rgba(255,20,0,.22), 0 0 12px rgba(255,20,0,.75);}
  50%{box-shadow:0 0 0 6px rgba(255,20,0,.14), 0 0 20px rgba(255,20,0,.95);}
}
/* The selected hotspot burns brighter and stops pulsing. */
.tape-detail-layer.scene-revealed .hotspot.is-active{
  animation:none;
  transform:translate(-50%,-50%) scale(1.18);
  box-shadow:
    0 0 0 5px rgba(255,255,255,.28),
    0 0 0 11px rgba(255,20,0,.22),
    0 0 26px rgba(255,20,0,1),
    0 0 46px rgba(255,20,0,.6);
}
.hotspot:focus-visible{outline:2px solid #fff;outline-offset:4px;}

/* Cards stack in the same left-hand slot over the photo; only one is shown. */
.hotspot-cards{
  position:absolute;
  top:34%;
  left:32px;
  width:360px;
  z-index:2;
}
.hotspot-card{
  position:absolute;
  top:0; left:0; right:0;
  background:rgba(16,17,20,.92);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,20,0,.35);
  border-radius:14px;
  padding:16px 18px 18px;
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.hotspot-card:not(.is-active){opacity:0;visibility:hidden;}
.tape-detail-layer.js-ready .hotspot-card{opacity:0;visibility:hidden;transform:translateY(12px);}
.tape-detail-layer.scene-revealed .hotspot-card.is-active{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition-delay:1.6s;
}
/* Once the intro has played, later card swaps are instant, not delayed. */
.tape-detail-layer.intro-done .hotspot-card.is-active{transition-delay:0s;}
.hotspot-card-media{
  aspect-ratio:16/10;
  border-radius:9px;
  overflow:hidden;
  background:var(--vg-graphite);
  margin-bottom:14px;
}
.hotspot-card-media img{width:100%;height:100%;object-fit:cover;}
.hotspot-card h3{
  font-size:.95rem;
  line-height:1.3;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--vg-white);
  margin-bottom:8px;
}
.detail-num{color:var(--vg-red);}
.hotspot-card p{
  font-size:.86rem;
  line-height:1.55;
  color:rgba(242,242,243,.75);
}

/* --- "No-Drill Installation": 3 steps + a red video CTA card ------------- */
.install-block{
  max-width:var(--container);
  margin:0 auto;
  padding:100px 32px;
}
.install-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.install-grid .product-info p{min-height:0;}
.install-card-cta{
  background:linear-gradient(155deg, var(--vg-red) 0%, var(--vg-red-dark) 100%);
  border-color:transparent;
  display:flex;
  align-items:center;
}
.install-card-cta:hover{border-color:transparent;}
.install-cta-body{padding:32px 28px;}
.install-cta-body h3{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:1.2rem;
  color:var(--vg-white);
  line-height:1.3;
  margin-bottom:12px;
}
.install-cta-body p{
  font-size:.92rem;
  line-height:1.55;
  color:rgba(255,255,255,.86);
  margin-bottom:24px;
}
.btn-white{
  background:var(--vg-white);
  color:var(--vg-red);
  padding:14px 26px;
  font-size:.9rem;
}
.btn-white:hover{background:var(--vg-light-gray);color:var(--vg-red-dark);}
.btn-white span{transition:transform .25s var(--ease);margin-left:8px;}
.btn-white:hover span{transform:translateX(5px);}

/* --- Video popup --------------------------------------------------------- */
.video-modal{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
}
.video-modal[hidden]{display:none;}
.video-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(4,4,5,.88);
  backdrop-filter:blur(6px);
}
.video-modal-box{
  position:relative;
  width:100%;
  max-width:960px;
}
.video-modal-frame{
  position:relative;
  aspect-ratio:16/9;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  background:var(--vg-black);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.video-modal-frame iframe,
.video-modal-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;}
.video-modal-close{
  position:absolute;
  top:-46px;
  right:0;
  width:38px;height:38px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  color:var(--vg-white);
  font-size:1.6rem;
  line-height:1;
  cursor:pointer;
  transition:background .2s;
}
.video-modal-close:hover{background:var(--vg-red);}
.video-modal-fallback{
  display:block;
  margin-top:14px;
  text-align:center;
  font-size:.85rem;
  color:var(--vg-gray);
  transition:color .2s;
}
.video-modal-fallback:hover{color:var(--vg-red);}

/* --- Reviews slider ------------------------------------------------------ */
.reviews-block{
  max-width:var(--container);
  margin:0 auto;
  padding:100px 32px;
}
.reviews-viewport{position:relative;}
/* Подсказка, что лента листается: правый край карточек уходит в затухание.
   Без неё ряд выглядел как аккуратно закончившийся список. */
.reviews-viewport::after{
  content:'';
  position:absolute;
  top:0; right:0; bottom:14px;
  width:64px;
  pointer-events:none;
  z-index:1;
  background:linear-gradient(to right, rgba(10,10,11,0), var(--vg-black) 82%);
}
.reviews-track{
  display:flex;
  gap:24px;
  overflow-x:auto;
  /* Explicitly off: `overflow-x:auto` alone also turns on vertical scrolling,
     and the cards' pre-reveal translateY makes the track briefly overflow. */
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  padding:4px 4px 14px;
  scrollbar-width:none;
}
.reviews-track::-webkit-scrollbar{display:none;}
.review-card{
  flex:0 0 auto;
  width:320px;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  background:var(--vg-graphite);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  padding:28px 26px;
  opacity:0;
  /* Kept small on purpose: the track clips vertically, so a big pre-reveal
     offset would show the card cut off while it slides in. */
  transform:translateY(18px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.review-card.in-view{opacity:1;transform:translateY(0);}
.review-card[data-delay="0"]{transition-delay:0s;}
.review-card[data-delay="1"]{transition-delay:.08s;}
.review-card[data-delay="2"]{transition-delay:.16s;}
.review-card[data-delay="3"]{transition-delay:.24s;}
.review-card[data-delay="4"]{transition-delay:.32s;}
.review-stars{color:var(--vg-red);font-size:1.05rem;letter-spacing:3px;margin-bottom:14px;}
.review-meta{font-weight:700;color:var(--vg-white);font-size:.92rem;margin-bottom:10px;}
.review-text{font-size:.9rem;line-height:1.6;color:var(--vg-gray);flex:1;}
.review-card-more{
  align-items:center;
  justify-content:center;
  text-align:center;
  background:linear-gradient(155deg, var(--vg-red) 0%, var(--vg-red-dark) 100%);
  border-color:transparent;
}
.review-more-title{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:1.15rem;
  color:var(--vg-white);
  margin-bottom:12px;
}
.review-card-more .review-text{color:rgba(255,255,255,.85);text-align:center;margin-bottom:22px;flex:none;}
.review-card-more .card-cta{color:var(--vg-white);justify-content:center;}

.reviews-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;height:44px;
  border-radius:50%;
  background:var(--vg-graphite-2);
  border:1px solid rgba(255,255,255,.12);
  color:var(--vg-white);
  font-size:1.5rem;
  line-height:1;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  z-index:2;
  transition:background .2s, border-color .2s;
}
.reviews-arrow:hover{background:var(--vg-red);border-color:var(--vg-red);}
.reviews-arrow-prev{left:-22px;}
.reviews-arrow-next{right:-22px;}

/* ==========================================================================
   BECOME A DEALER PAGE
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */
.page-hero-bg--dealer img{object-position:70% 50%;}
/* Extra scrim on top of the photo so the copy stays readable at every width —
   on narrow screens the image creeps under the text as `cover` crops it. */
.page-hero-bg--dealer::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(100deg, rgba(4,4,5,.94) 0%, rgba(4,4,5,.86) 26%, rgba(4,4,5,.62) 48%, rgba(4,4,5,.3) 72%, rgba(4,4,5,.16) 100%),
    linear-gradient(to top, rgba(4,4,5,.7) 0%, rgba(4,4,5,.2) 24%, rgba(4,4,5,0) 46%);
}
.dealer-hero .hero-content h1{
  font-size:clamp(2.1rem, 4.4vw, 3.7rem);
  max-width:760px;
  margin-bottom:16px;
}
.dealer-hero .hero-text{max-width:660px;}
.dealer-hero .hero-tagline{color:var(--vg-red);margin-bottom:24px;}
.dealer-hero .hero-content .subtitle{max-width:620px;margin-bottom:32px;}

.dealer-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 26px;
}
.dealer-chips li{
  padding:9px 17px;
  border-radius:999px;
  background:rgba(22,23,26,.72);
  backdrop-filter:blur(8px);
  font-size:.85rem;
  font-weight:700;
  color:var(--vg-light-gray);
  white-space:nowrap;
}

/* --- Why partner: 2x2 of benefit cards ---------------------------------- */
.dealer-benefits{
  max-width:var(--container);
  margin:0 auto;
  padding:100px 32px;
}
.dealer-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:28px;
}
.dealer-card{
  background:var(--vg-graphite);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  padding:38px 34px;
  opacity:0;
  transform:translateY(50px);
  transition:opacity .85s var(--ease), transform .85s var(--ease), border-color .3s;
}
.dealer-card.in-view{opacity:1;transform:translateY(0);}
.dealer-card[data-delay="0"]{transition-delay:0s;}
.dealer-card[data-delay="1"]{transition-delay:.12s;}
.dealer-card[data-delay="2"]{transition-delay:.24s;}
.dealer-card[data-delay="3"]{transition-delay:.36s;}
.dealer-card:hover{border-color:rgba(255,20,0,.4);}
.dealer-card h3{
  font-size:clamp(1.1rem, 1.8vw, 1.4rem);
  line-height:1.25;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--vg-white);
  margin-bottom:14px;
}
/* <em> is only used to tint the emphasised words — never for italics. */
.dealer-card h3 em{font-style:normal;color:var(--vg-red);}
.dealer-card p{
  font-size:.95rem;
  line-height:1.65;
  color:var(--vg-gray);
}
.dealer-card strong{color:var(--vg-light-gray);font-weight:700;}

/* The two number-led cards: the figure is the headline, not the text. */
.dealer-figure{margin-bottom:8px;line-height:1;}
.dealer-figure .stat-number,
.dealer-figure-static{
  display:block;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:clamp(3.2rem, 6vw, 5rem);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--vg-white);
}
.dealer-card--figure h3{
  font-size:.95rem;
  letter-spacing:.14em;
  color:var(--vg-red);
  margin-bottom:16px;
}
.dealer-card--figure h3::after{
  content:'';
  display:block;
  width:44px;height:3px;
  background:var(--vg-red);
  margin-top:16px;
}

.dealer-card-media{
  aspect-ratio:16/9;
  border-radius:12px;
  overflow:hidden;
  background:var(--vg-graphite-2);
  margin-bottom:24px;
}
.dealer-card-media img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .7s var(--ease);
}
.dealer-card--media:hover .dealer-card-media img{transform:scale(1.05);}

.dealer-list{
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.dealer-list li{
  position:relative;
  padding-left:18px;
  font-size:.9rem;
  line-height:1.5;
  color:var(--vg-gray);
}
.dealer-list li::before{
  content:'';
  position:absolute;
  left:0; top:.55em;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--vg-red);
}

/* --- Dealer application form -------------------------------------------- */
.dealer-form-block{
  position:relative;
  background:
    radial-gradient(circle at 25% 10%, rgba(255,20,0,.09), transparent 45%),
    linear-gradient(180deg, var(--vg-graphite) 0%, var(--vg-black) 100%);
  border-top:1px solid rgba(255,255,255,.07);
  padding:100px 32px 110px;
  /* The header is fixed, so anchor jumps have to stop short of it. */
  scroll-margin-top:var(--header-h);
}
.dealer-form-inner{
  max-width:900px;
  margin:0 auto;
}
.dealer-form{
  background:var(--vg-graphite);
  border:1px solid rgba(255,255,255,.07);
  border-radius:18px;
  padding:44px;
  opacity:0;
  transform:translateY(40px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.dealer-form.in-view{opacity:1;transform:translateY(0);}
.form-honey{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}

.dealer-form-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px 24px;
}
.form-field{display:flex;flex-direction:column;gap:9px;}
.form-field--full{grid-column:1 / -1;}
.form-field label{
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--vg-gray);
}
.req{color:var(--vg-red);}
.form-field input,
.form-field textarea{
  font-family:var(--font-body);
  font-size:1rem;
  color:var(--vg-white);
  background:var(--vg-black);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  padding:15px 18px;
  transition:border-color .2s, background .2s;
}
.form-field textarea{min-height:130px;resize:vertical;}
.form-field input:focus,
.form-field textarea:focus{
  outline:none;
  border-color:var(--vg-red);
  background:#0e0e10;
}
.form-field input:user-invalid,
.form-field textarea:user-invalid{border-color:var(--vg-red);}

.form-consent{
  grid-column:1 / -1;
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.form-consent input{
  flex:0 0 auto;
  width:20px;height:20px;
  margin-top:2px;
  accent-color:var(--vg-red);
}
.form-consent label{
  font-size:.9rem;
  line-height:1.5;
  color:var(--vg-gray);
  text-transform:none;
  letter-spacing:0;
  font-weight:400;
}
.form-consent a{color:var(--vg-red);}
.form-consent a:hover{text-decoration:underline;}

.form-actions{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
  margin-top:6px;
}
.form-actions .btn{border:2px solid transparent;cursor:pointer;}
.form-status{
  font-size:.9rem;
  line-height:1.4;
  color:var(--vg-gray);
}
.form-status.is-error{color:var(--vg-red);}
.form-status.is-ok{color:var(--vg-light-gray);}
.dealer-form.is-sending .btn{opacity:.6;pointer-events:none;}

/* --- Thank-you page ------------------------------------------------------ */
.thanks-block{
  min-height:78vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:calc(var(--header-h) + 60px) 32px 90px;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,20,0,.10), transparent 50%),
    var(--vg-black);
}
.thanks-inner{
  max-width:640px;
  text-align:center;
  opacity:0;
  transform:translateY(40px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.thanks-inner.in-view{opacity:1;transform:translateY(0);}
.thanks-mark{
  display:flex;
  align-items:center;
  justify-content:center;
  width:64px;height:64px;
  margin:0 auto 26px;
  border-radius:50%;
  background:var(--vg-red);
  box-shadow:0 0 0 8px rgba(255,20,0,.14), 0 0 30px rgba(255,20,0,.5);
}
.thanks-mark svg{width:32px;height:32px;}
.thanks-inner h1{
  font-size:clamp(1.9rem, 3.6vw, 2.8rem);
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--vg-white);
  margin-bottom:18px;
}
.thanks-inner p{
  font-size:1.02rem;
  line-height:1.65;
  color:var(--vg-gray);
  margin-bottom:34px;
}
.thanks-actions{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
}

/* ==========================================================================
   WHERE TO BUY + CONTACTS PAGES
   ========================================================================== */

/* --- Compact page header (list pages carry no hero photo) ---------------- */
.page-head{
  padding:calc(var(--header-h) + 78px) 32px 58px;
  background:
    radial-gradient(circle at 28% 0%, rgba(255,20,0,.11), transparent 55%),
    linear-gradient(180deg, var(--vg-graphite) 0%, var(--vg-black) 100%);
  /* Никакой разделительной линии: экран ниже идёт на том же фоне, и полоса
     читалась как шов посреди страницы. */
}
.page-head-inner{
  /* Контейнер секции ниже — это max-width:1280 ВМЕСТЕ с его боковыми
     паддингами, т.е. содержимое шириной 1216. Здесь паддинги висят на самой
     секции, поэтому чистую 1280 нужно уменьшить на те же 2x32 — иначе H1
     стоит на 32px левее карточек под ним. */
  max-width:calc(var(--container) - 64px);
  margin:0 auto;
  opacity:0;
  transform:translateY(30px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.page-head-inner.in-view{opacity:1;transform:translateY(0);}
.page-head h1{
  font-size:clamp(2rem, 4vw, 3.2rem);
  line-height:1.1;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--vg-white);
  max-width:900px;
  margin-bottom:18px;
}
.page-head p{
  font-size:clamp(1rem, 1.5vw, 1.12rem);
  line-height:1.6;
  color:var(--vg-gray);
  max-width:680px;
}

/* --- Dealer tabs + lists ------------------------------------------------- */
.dealers-block{
  max-width:var(--container);
  margin:0 auto;
  padding:66px 32px 96px;
  /* Footer links land here with a #filter hash, so clear the fixed header. */
  scroll-margin-top:var(--header-h);
}
.dealer-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:44px;
}
.dealer-tab{
  padding:14px 26px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:transparent;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:.92rem;
  letter-spacing:.02em;
  color:var(--vg-light-gray);
  cursor:pointer;
  transition:background .25s, border-color .25s, color .25s;
}
.dealer-tab:hover{border-color:var(--vg-white);}
.dealer-tab[aria-selected="true"]{
  background:var(--vg-red);
  border-color:var(--vg-red);
  color:var(--vg-white);
}
.dealer-panel[hidden]{display:none;}

.dealers-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.dealer-item{
  background:var(--vg-graphite);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  padding:30px 28px;
  opacity:0;
  transform:translateY(40px);
  transition:opacity .8s var(--ease), transform .8s var(--ease), border-color .3s;
}
.dealer-item.in-view{opacity:1;transform:translateY(0);}
.dealer-item[data-delay="0"]{transition-delay:0s;}
.dealer-item[data-delay="1"]{transition-delay:.1s;}
.dealer-item[data-delay="2"]{transition-delay:.2s;}
.dealer-item:hover{border-color:rgba(255,20,0,.4);}
.dealer-item h3{
  font-size:1.05rem;
  line-height:1.3;
  color:var(--vg-white);
  margin-bottom:14px;
}
.dealer-dba{
  display:block;
  font-size:.88rem;
  font-weight:400;
  color:var(--vg-gray);
}
.dealer-address{
  font-style:normal;
  font-size:.92rem;
  line-height:1.6;
  color:var(--vg-gray);
  margin-bottom:16px;
}
.dealer-contact{display:flex;flex-direction:column;gap:7px;}
.dealer-contact a{
  font-size:.9rem;
  color:var(--vg-light-gray);
  transition:color .2s;
  word-break:break-word;
}
.dealer-contact a:hover{color:var(--vg-red);}
.dealer-contact .dealer-site{color:var(--vg-red);font-weight:700;}

/* --- Online retail cards ------------------------------------------------- */
.retail-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.retail-card{
  display:flex;
  flex-direction:column;
  background:var(--vg-graphite);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  padding:32px 30px;
  opacity:0;
  transform:translateY(40px);
  transition:opacity .8s var(--ease), transform .8s var(--ease), border-color .3s;
}
.retail-card.in-view{opacity:1;transform:translateY(0);}
.retail-card[data-delay="0"]{transition-delay:0s;}
.retail-card[data-delay="1"]{transition-delay:.12s;}
.retail-card[data-delay="2"]{transition-delay:.24s;}
.retail-card:hover{border-color:rgba(255,20,0,.4);}
/* Блок .retail-logo убран вместе с квадратами-заглушками: пока настоящих
   логотипов маркетплейсов нет, карточка начинается сразу с названия. */
.retail-card h3{
  font-size:1.2rem;
  color:var(--vg-white);
  margin-bottom:10px;
}
.retail-card p{
  flex:1;
  font-size:.93rem;
  line-height:1.6;
  color:var(--vg-gray);
  margin-bottom:22px;
}

/* --- "Want to sell Voron Glass?" band ----------------------------------- */
.dealer-cta-band{
  padding:0 32px 100px;
}
.dealer-cta-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:54px 44px;
  border-radius:18px;
  text-align:center;
  background:linear-gradient(150deg, var(--vg-red) 0%, var(--vg-red-dark) 100%);
  opacity:0;
  transform:translateY(40px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.dealer-cta-inner.in-view{opacity:1;transform:translateY(0);}

/* Фото-фон под плашкой: снимок снизу, поверх него та же красная заливка,
   что была раньше, только теперь полупрозрачная — иначе фото не видно. */
.dealer-cta-photo{
  position:relative;
  overflow:hidden;
  background:var(--vg-black);
  isolation:isolate;
}
.dealer-cta-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 45%;
  z-index:-2;
}
.dealer-cta-photo::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  /* Машина на снимке тоже красная, поэтому чистая красная заливка её съедает.
     Держим красный ощутимо прозрачнее и подкладываем тёмный слой — силуэт
     проявляется, а белый текст поверх остаётся контрастным. */
  background:
    linear-gradient(150deg, rgba(255,20,0,.46) 0%, rgba(195,16,0,.56) 100%),
    linear-gradient(180deg, rgba(8,8,9,.42) 0%, rgba(8,8,9,.62) 100%);
}
.dealer-cta-photo h2,
.dealer-cta-photo p,
.dealer-cta-photo .btn{position:relative;}
.dealer-cta-inner h2{
  font-size:clamp(1.5rem, 2.8vw, 2.1rem);
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--vg-white);
  margin-bottom:12px;
}
.dealer-cta-inner p{
  font-size:1rem;
  line-height:1.6;
  color:rgba(255,255,255,.88);
  max-width:520px;
  margin:0 auto 28px;
}

/* Шапка с фотографией (страница Contacts): кадр из hero, затемнённый к низу,
   чтобы он растворялся в фоне следующего блока без видимой границы. */
.page-head-photo{
  position:relative;
  overflow:hidden;
  background:var(--vg-black);
  isolation:isolate;
  /* Чуть выше обычной шапки: кадру нужен воздух, иначе от фотографии остаётся
     полоска и затемнение читается как обрезка, а не как переход. */
  padding-bottom:104px;
}
.page-head-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:58% 42%;
  z-index:-2;
}
.page-head-photo::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(100deg, rgba(6,6,7,.92) 0%, rgba(6,6,7,.78) 34%, rgba(6,6,7,.5) 62%, rgba(6,6,7,.38) 100%),
    linear-gradient(180deg, rgba(6,6,7,.28) 0%, rgba(6,6,7,.62) 48%, rgba(6,6,7,.9) 78%, var(--vg-black) 94%);
}
.page-head-photo .page-head-inner{position:relative;}

/* --- Contacts ------------------------------------------------------------ */
.contacts-block{
  max-width:var(--container);
  margin:0 auto;
  padding:66px 32px 100px;
}
.contacts-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:28px;
}
.contact-card{
  background:var(--vg-graphite);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  padding:40px 36px;
  opacity:0;
  transform:translateY(40px);
  transition:opacity .8s var(--ease), transform .8s var(--ease), border-color .3s;
}
.contact-card.in-view{opacity:1;transform:translateY(0);}
.contact-card[data-delay="0"]{transition-delay:0s;}
.contact-card[data-delay="1"]{transition-delay:.12s;}
.contact-card:hover{border-color:rgba(255,20,0,.4);}
.contact-card h2{
  font-size:clamp(1.3rem, 2.2vw, 1.7rem);
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--vg-white);
  margin-bottom:10px;
}
.contact-note{
  font-size:.92rem;
  line-height:1.6;
  color:var(--vg-gray);
  margin-bottom:24px;
}
.contact-card h2 + .contact-rows{margin-top:24px;}
.contact-rows{
  display:flex;
  flex-direction:column;
  gap:22px;
}
.contact-row{
  display:flex;
  flex-direction:column;
  gap:6px;
  /* Без красной вертикальной черты: подпись строки и так набрана красным,
     а полоса дробила карточку на части. */
}
.contact-label{
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--vg-red);
}
.contact-row address{
  font-style:normal;
  font-size:1rem;
  line-height:1.55;
  color:var(--vg-light-gray);
}
.contact-row a{
  font-size:1rem;
  color:var(--vg-light-gray);
  transition:color .2s;
  word-break:break-word;
}
.contact-row a:hover{color:var(--vg-red);}

/* ==========================================================================
   LEGAL PAGES (Cookie / Privacy / Terms / Warranty)
   ========================================================================== */
.legal-block{
  max-width:var(--container);
  margin:0 auto;
  padding:56px 32px 100px;
}
.legal-inner{
  /* Юридический текст читают строкой, а не сканируют — держим комфортную
     длину строки вместо полной ширины контейнера. */
  max-width:820px;
  color:var(--vg-light-gray);
  font-size:1rem;
  line-height:1.75;
}
.legal-inner h2{
  font-size:clamp(1.25rem, 2.1vw, 1.6rem);
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--vg-white);
  margin:44px 0 14px;
}
.legal-inner h2:first-child{margin-top:0;}
.legal-inner h3{
  font-size:1.05rem;
  color:var(--vg-white);
  margin:28px 0 10px;
}
.legal-inner p{margin-bottom:16px;}
.legal-inner ul,
.legal-inner ol{
  margin:0 0 18px;
  padding-left:22px;
  list-style:disc;
}
.legal-inner ol{list-style:decimal;}
.legal-inner li{margin-bottom:8px;}
.legal-inner strong{color:var(--vg-white);}
.legal-inner a{
  color:var(--vg-red);
  text-decoration:underline;
  text-underline-offset:3px;
  word-break:break-word;
}
.legal-inner a:hover{color:var(--vg-white);}
.legal-inner code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.88em;
  padding:2px 6px;
  border-radius:5px;
  background:rgba(255,255,255,.07);
  color:var(--vg-white);
}
/* Таблицы в политиках заметно шире колонки текста, поэтому скроллятся сами,
   а не растягивают страницу. */
.legal-table-wrap{
  overflow-x:auto;
  overflow-y:hidden;
  margin:0 0 24px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
}
.legal-table{
  width:100%;
  min-width:620px;
  border-collapse:collapse;
  font-size:.9rem;
}
.legal-table th,
.legal-table td{
  padding:13px 16px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.legal-table th{
  background:rgba(255,255,255,.04);
  color:var(--vg-white);
  font-weight:700;
  white-space:nowrap;
}
.legal-table tr:last-child td{border-bottom:none;}

/* --- Юридические ссылки в подвале --------------------------------------- */
.footer-legal{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 18px;
  margin-bottom:16px;
}
.footer-legal a{
  font-size:.82rem;
  color:var(--vg-light-gray);
  transition:color .2s;
}
.footer-legal a:hover{color:var(--vg-red);}
.footer-legal button{
  padding:0;
  border:0;
  background:none;
  font-family:inherit;
  font-size:.82rem;
  color:var(--vg-light-gray);
  cursor:pointer;
  transition:color .2s;
}
.footer-legal button:hover{color:var(--vg-red);}
.footer-legal a:focus-visible,
.footer-legal button:focus-visible{
  outline:2px solid var(--vg-red);
  outline-offset:3px;
  border-radius:3px;
}

/* ==========================================================================
   COOKIE CONSENT BANNER
   ========================================================================== */
.cookie-banner{
  position:fixed;
  left:0; right:0;
  bottom:0;
  /* Выше шапки (z-index:100) и попапа видео не перекрывает: попап получает
     свой слой поверх. Страница под баннером не блокируется и не затемняется. */
  z-index:200;
  padding:0 22px calc(18px + env(safe-area-inset-bottom, 0px));
  pointer-events:none;
}
.cookie-banner[hidden]{display:none;}
.cookie-banner-inner{
  pointer-events:auto;
  max-width:var(--container);
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:28px;
  padding:22px 26px;
  border-radius:16px;
  background:#0c0d11;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 18px 50px rgba(0,0,0,.6);
  transform:translateY(14px);
  opacity:0;
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.cookie-banner.is-shown .cookie-banner-inner{
  opacity:1;
  transform:translateY(0);
}
.cookie-banner-copy{flex:1;min-width:0;}
.cookie-banner-copy h2{
  font-size:1.05rem;
  color:var(--vg-white);
  margin-bottom:6px;
}
.cookie-banner-copy p{
  font-size:.88rem;
  line-height:1.55;
  color:var(--vg-light-gray);
  margin-bottom:8px;
}
.cookie-banner-links{
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
}
.cookie-banner-links a{
  font-size:.82rem;
  color:var(--vg-red);
  text-decoration:underline;
  text-underline-offset:3px;
}
.cookie-banner-links a:hover{color:var(--vg-white);}
.cookie-banner-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}
.cookie-banner-actions .btn{
  min-height:44px;
  white-space:nowrap;
}
.cookie-banner .btn:focus-visible,
.cookie-banner a:focus-visible{
  outline:2px solid var(--vg-white);
  outline-offset:3px;
}

@media (max-width:860px){
  .cookie-banner{padding:0 14px calc(14px + env(safe-area-inset-bottom, 0px));}
  .cookie-banner-inner{
    flex-direction:column;
    align-items:stretch;
    gap:18px;
    padding:20px 20px 22px;
  }
  .cookie-banner-actions{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .cookie-banner-actions .btn{
    width:100%;
    justify-content:center;
  }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:980px){
  .spec-grid{grid-template-columns:1fr;}
  .spec-text,
  .spec-photo-large,
  .spec-video,
  .spec-stats,
  .spec-photo-small{grid-column:1;grid-row:auto;}
  .spec-photo-large{aspect-ratio:16/10;}
  .spec-photo-small{aspect-ratio:16/10;}
  .product-grid{grid-template-columns:1fr;}
  .cta-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:repeat(2,1fr);}
  .results-stats{gap:48px;}
  .install-grid{grid-template-columns:repeat(2,1fr);}
  .dealer-form{padding:36px 30px;}
  .dealers-grid,
  .retail-grid{grid-template-columns:repeat(2,1fr);}
  .contacts-grid{grid-template-columns:1fr;}

  /* Below this width the card no longer fits beside the car — it drops to the
     bottom of the screen, with the hotspots still driving which one shows. */
  .hotspot-frame{width:max(100%, calc(46vh * 16 / 9));}
  .hotspot-cards{
    position:static;
    width:100%;
    margin-top:auto;
  }
  .hotspot-card{position:relative;}
  .hotspot-card:not(.is-active){display:none;}
  .hotspot-card-media{aspect-ratio:16/7;}
}

@media (max-width:860px){
  .nav-toggle{display:flex;}
  /* Same trap as `transform`: `backdrop-filter` on the fixed header makes it
     the containing block for its fixed-position descendant (.nav-menu), so
     once the visitor scrolled 40px the menu was laid out inside an 84px-tall
     box and collapsed to nothing. On phones the header gets a solid fill
     instead — the menu panel has its own blur anyway. */
  .site-header.scrolled{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:rgba(10,10,11,.97);
  }
  /* Freeze the page behind the open menu so the sheet scrolls, not the page. */
  body.nav-open{overflow:hidden;}
  .nav-menu{
    position:fixed;
    top:var(--header-h);
    left:0; right:0;
    bottom:0;
    /* Полностью непрозрачно: это полноэкранный оверлей, сквозь него не должен
       читаться контент страницы. Blur здесь не нужен и только грузит GPU. */
    background:var(--vg-black);
    transform:translateX(100%);
    transition:transform .35s var(--ease);
    overflow-y:auto;
  }
  .nav-menu.open{transform:translateX(0);}
  .nav-menu ul{flex-direction:column;align-items:flex-start;gap:0;padding:24px;width:100%;}
  .nav-menu > ul > li{width:100%;border-bottom:1px solid rgba(255,255,255,.08);}
  .nav-menu > ul > li > a{width:100%;padding:18px 4px;justify-content:space-between;}
  /* Перечисляем и hover/focus-within: на десктопе они центрируют выпадашку
     через `translate(-50%, …)`, и их специфичность (0,2,0) выше одиночного
     `.dropdown`. На телефоне тап по «Our Products» даёт элементу фокус,
     :focus-within срабатывает — и список уезжал на пол-ширины влево. */
  .dropdown,
  .has-dropdown:hover .dropdown,
  .has-dropdown:focus-within .dropdown{
    position:static;
    transform:none;
    opacity:1;visibility:visible;pointer-events:auto;
    display:none;
    width:100%;
    min-width:0;
    box-shadow:none;
    border:none;
    background:transparent;
    padding:0 0 10px;
  }
  .has-dropdown.open .dropdown{display:block;}
  .has-dropdown.open .chev{transform:rotate(180deg);}
  /* Стрелки на телефоне нужны как раз больше всего: жеста «свайп» по ряду
     карточек не видно, пока не попробуешь. Ставим их внутрь ленты — за её
     границами на узком экране места нет. */
  .reviews-arrow{
    width:38px;height:38px;
    font-size:1.3rem;
    background:rgba(10,10,11,.86);
    border-color:rgba(255,255,255,.22);
  }
  .reviews-arrow-prev{left:-4px;}
  .reviews-arrow-next{right:-4px;}
  .reviews-viewport::after{width:28px;}
  .install-grid{grid-template-columns:1fr;}
  /* Two benefit cards per row would get too narrow for the big figures. */
  .dealer-grid{grid-template-columns:1fr;gap:20px;}
  .dealer-card{padding:30px 26px;}
  .dealer-hero .hero-text{max-width:100%;}
  /* Текста в этом hero много, поэтому при `align-items:center` он упирался в
     шапку — визуально заголовок был к ней приклеен. На телефоне отпускаем
     фиксированную высоту и задаём явный отступ сверху. */
  .dealer-hero{
    min-height:auto;
    align-items:flex-start;
    padding:calc(var(--header-h) + 40px) 0 60px;
  }

  /* На широком экране текст лежит на тёмной левой части кадра, но на телефоне
     `cover` подтягивает машину под него, и заголовок с подзаголовком читались
     поверх светлого кузова. Добавляем плотную вертикальную подложку — по
     диагонали её не хватает, когда затемнять нужно всю ширину. */
  .hero-overlay{
    background:
      linear-gradient(100deg, rgba(6,6,7,.88) 0%, rgba(6,6,7,.7) 45%, rgba(6,6,7,.5) 100%),
      linear-gradient(to bottom, rgba(4,4,5,.72) 0%, rgba(4,4,5,.38) 22%, rgba(4,4,5,.55) 52%, rgba(4,4,5,.88) 100%);
  }

  /* As the viewport narrows, `cover` crops the truck heavily — pull the frame
     onto the front door window so the deflector itself stays in shot instead
     of the grille or the empty wall. */
  .tapeon-hero-layer .hero-bg img{object-position:74% 34%;}
  /* То же и на In-Channel: по умолчанию в кадр попадала решётка радиатора,
     а показывать надо дефлектор на передней двери (обведён на вашем скрине).
     Дефлектор стоит примерно на 75% ширины исходника, но при `cover` на узком
     экране видно лишь ~26% кадра, поэтому в процентах object-position это
     ближе к 89% — проценты здесь отсчитываются от «лишней» ширины, а не от
     самого изображения. */
  .inchannel-hero-layer .hero-bg img{object-position:89% 33%;}
  /* Диагональный скрим гасил как раз ту часть кадра, ради которой его и
     сдвинули. На телефоне заменяем его вертикальным: верхняя четверть, где
     текста нет, остаётся светлее — дефлектор виден; ниже плотность растёт,
     чтобы заголовок и абзац читались. */
  .inchannel-hero-layer .hero-bg::after{
    background:linear-gradient(180deg,
      rgba(4,4,5,.5) 0%,
      rgba(4,4,5,.14) 14%,
      rgba(4,4,5,.22) 30%,
      rgba(4,4,5,.72) 46%,
      rgba(4,4,5,.88) 100%);
  }

  /* На телефоне плашки с выгодами скрыты целиком. Свайп-ряд из трёх карточек
     всё равно показывал только первую и обрезок второй, отъедал низ первого
     экрана и наезжал на текст — а те же выгоды раскрыты ниже, на втором
     экране. На десктопе плашки остаются как были. */
  .hero-benefits{display:none;}
  .tapeon-hero-layer .hero-content .subtitle{
    font-size:.95rem;
    margin-bottom:0;
  }
}

@media (max-width:600px){
  .hero-content{padding:0 22px;}
  .spec-block{padding:16px 22px 70px;}
  .spec-text{padding:30px 26px;}
  .brand-headline{gap:.25em;}
  .products{padding:20px 22px 90px;}
  .cta-block{padding:0 22px 70px;}
  .cta-card{padding:34px 28px;}
  .production-block{min-height:70vh;}
  .production-content{padding:60px 22px;}
  .page-hero{min-height:80vh;}
  .page-hero-bg img{object-position:70% 50%;}
  .process-block{padding:60px 22px;}
  .results-block{padding:70px 22px;}
  .results-stats{gap:36px;margin-top:40px;}
  .results-cta{margin-top:50px;}
  .footer-grid{grid-template-columns:1fr;gap:26px;}
  .nav-inner{padding:0 20px;}
  /* Keep the top padding — without it the heading slides under the fixed header. */
  .tape-detail-inner{padding:calc(var(--header-h) + 18px) 22px 24px;}
  .tape-detail-head{margin-bottom:18px;}
  .tape-detail-head p{font-size:.88rem;}

  /* On a phone the five hotspots collapse into ~26px of each other along the
     window line — too tight to aim at. Drop them and let the four details be
     swiped through directly instead. */
  .hotspot{display:none;}
  .hotspot-cards{
    display:flex;
    gap:14px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    padding-bottom:4px;
  }
  .hotspot-cards::-webkit-scrollbar{display:none;}
  .hotspot-card{
    flex:0 0 82%;
    scroll-snap-align:start;
    padding:14px 16px 16px;
  }
  /* Every card is on show in the swipe row, so the single-card reveal rules
     above have to be undone at a specificity that actually beats them. */
  .tape-detail-layer .hotspot-card,
  .tape-detail-layer.js-ready .hotspot-card,
  .tape-detail-layer.js-ready .hotspot-card:not(.is-active),
  .tape-detail-layer.scene-revealed .hotspot-card.is-active{
    display:block;
    opacity:1;
    visibility:visible;
    transform:none;
    transition-delay:0s;
  }
  .install-block{padding:60px 22px;}
  .install-cta-body{padding:28px 24px;}
  .reviews-block{padding:60px 22px;}
  /* Уже, чем помещается в экран: между кромкой карточки и стрелкой остаётся
     полоска следующего отзыва — видно, что ряд продолжается. */
  .review-card{width:238px;}

  .dealer-chips li{white-space:normal;font-size:.8rem;padding:8px 14px;}
  .dealer-hero .hero-actions .btn{width:100%;}
  .dealer-benefits{padding:60px 22px;}

  .page-head{padding:calc(var(--header-h) + 54px) 22px 44px;}
  .dealers-block{padding:48px 22px 70px;}
  .dealers-grid,
  .retail-grid{grid-template-columns:1fr;}
  .dealer-tabs{gap:8px;margin-bottom:32px;}
  .dealer-tab{flex:1 1 100%;padding:13px 20px;font-size:.86rem;}
  .dealer-cta-band{padding:0 22px 70px;}
  .dealer-cta-inner{padding:38px 24px;}
  .dealer-cta-inner .btn{width:100%;}
  .contacts-block{padding:48px 22px 70px;}
  .contact-card{padding:30px 24px;}
  .dealer-form-block{padding:60px 22px 80px;}
  .dealer-form{padding:28px 22px;border-radius:14px;}
  .dealer-form-grid{grid-template-columns:1fr;gap:18px;}
  .form-actions{flex-direction:column;align-items:stretch;gap:14px;}
  .thanks-block{padding:calc(var(--header-h) + 40px) 22px 70px;}
  .thanks-actions .btn{width:100%;}
}