:root {
  --bg: #070709;
  --bg-soft: #0f1014;
  --surface: rgba(18, 19, 25, 0.9);
  --surface-2: rgba(23, 24, 31, 0.94);
  --surface-3: rgba(10, 11, 15, 0.92);
  --stroke: rgba(255,255,255,0.08);
  --stroke-strong: rgba(255,255,255,0.18);
  --text: #f6f7fb;
  --muted: #a9aeb9;
  --muted-2: #7f8591;
  --accent: #ff2028;
  --accent-2: #b80713;
  --accent-glow: rgba(255, 32, 40, 0.28);
  --white-glow: rgba(255,255,255,0.14);
  --shadow-lg: 0 28px 90px rgba(0,0,0,0.55);
  --shadow-md: 0 18px 45px rgba(0,0,0,0.36);
  --radius: 22px;
  --radius-sharp: 18px 4px 18px 4px;
  --container: 1280px;
  --skew-cut: 18px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; }
body.film-impact {
  font-family: Inter, Arial, "Helvetica Neue", Helvetica, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 14% 0%, rgba(255,30,41,0.16), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(255,255,255,0.08), transparent 24%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.015) 0 2px, transparent 2px 24px),
    linear-gradient(180deg, #09090b 0%, #070709 26%, #0a0b0e 100%);
  min-height: 100vh;
  line-height: 1.58;
  letter-spacing: 0.008em;
  position: relative;
  overflow-x: hidden;
}
body.film-impact::before,
body.film-impact::after {
  content: "";
  position: fixed;
  inset: auto;
  pointer-events: none;
  z-index: 0;
}
body.film-impact::before {
  top: 0;
  right: -14vw;
  width: 44vw;
  height: 44vw;
  background: radial-gradient(circle, rgba(255,32,40,0.15) 0%, rgba(255,32,40,0.06) 32%, transparent 70%);
  filter: blur(12px);
}
body.film-impact::after {
  bottom: -16vw;
  left: -18vw;
  width: 48vw;
  height: 48vw;
  background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 64%);
}

a {
  color: #fff;
  text-decoration: none;
  transition: color .25s ease, opacity .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
a:hover { color: #fff; }
img { max-width: 100%; display: block; height: auto; }

h1, h2, h3, h4, h5 {
  font-family: Inter, Arial, sans-serif;
  font-weight: 900;
  line-height: 1.04;
  color: #fff;
  letter-spacing: -0.04em;
}
h1 { font-size: clamp(2.8rem, 7vw, 5.6rem); }
h2 { font-size: clamp(2.1rem, 4vw, 3.6rem); }
h3 { font-size: clamp(1.3rem, 2.3vw, 2rem); }
p { color: var(--muted); }
.uppercase { text-transform: uppercase; }

.wrap {
  width: min(var(--container), calc(100% - 32px));
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.header {
  position: sticky;
  top: 0;
  z-index: 1200;
  background: rgba(7, 7, 10, 0.72);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 28px rgba(0,0,0,0.28);
}
.header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,32,40,0.7) 18%, rgba(255,255,255,0.35) 50%, rgba(255,32,40,0.7) 82%, transparent 100%);
}
.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 20px;
  min-height: 84px;
  width: min(var(--container), calc(100% - 32px));
  margin: 0 auto;
}
.logo-placeholder {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 0;
  min-width: 172px;
}
.logo-placeholder::before {
  content: "AVTO";
  font-size: 1.86rem;
  color: #f6f7fb;
  text-shadow: 0 0 24px rgba(255,255,255,0.16);
  letter-spacing: -0.05em;
  transform: skewX(-10deg);
}
.logo-placeholder::after {
  content: "PRO";
  font-size: 1.86rem;
  color: var(--accent);
  text-shadow: 0 0 24px rgba(255,32,40,0.28);
  letter-spacing: -0.05em;
  transform: skewX(-10deg);
}
.logo-placeholder:hover { opacity: .96; }
.header-phone {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border-radius: 999px;
  color: #fff;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  white-space: nowrap;
}
.header-phone::before {
  content: "сегодня 09:00–22:00";
  color: var(--muted-2);
  font-size: .68rem;
  letter-spacing: .08em;
}
.header-phone a {
  color: #fff;
  font-weight: 800;
  font-size: .92rem;
  letter-spacing: 0;
}
.header-phone a:hover { color: #fff; }

.nav-toggle {
  display: none;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
  border-radius: 16px 4px 16px 4px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 5px auto;
  border-radius: 999px;
  background: #fff;
}

.main-nav {
  justify-self: end;
}
.main-nav ul { list-style: none; }
.main-nav > ul {
  display: flex;
  align-items: center;
  gap: 4px;
}
.main-nav > ul > li {
  position: relative;
}
.main-nav > ul > li > a {
  display: inline-flex;
  align-items: center;
  min-height: 84px;
  padding: 0 14px;
  color: rgba(255,255,255,0.86);
  font-size: .74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  position: relative;
}
.main-nav > ul > li > a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 18px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,32,40,0.18) 12%, rgba(255,32,40,1) 50%, rgba(255,32,40,0.18) 88%, transparent 100%);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
}
.main-nav > ul > li > a:hover,
.main-nav > ul > li.active > a { color: #fff; }
.main-nav > ul > li > a:hover::after,
.main-nav > ul > li.active > a::after { transform: scaleX(1); }

.main-nav li ul {
  display: none;
  position: absolute;
  top: calc(100% - 10px);
  left: 0;
  min-width: 290px;
  padding: 12px;
  background: rgba(11,12,17,0.97);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px 4px 18px 4px;
  box-shadow: var(--shadow-lg);
}
.main-nav li:hover > ul { display: block; }
.main-nav li ul li + li { margin-top: 6px; }
.main-nav li ul li a {
  display: block;
  padding: 12px 14px;
  color: var(--muted);
  background: rgba(255,255,255,0.02);
  border: 1px solid transparent;
  border-radius: 12px 4px 12px 4px;
  font-size: .88rem;
  line-height: 1.35;
}
.main-nav li ul li a:hover {
  color: #fff;
  border-color: rgba(255,32,40,0.25);
  background: linear-gradient(180deg, rgba(255,32,40,0.12), rgba(255,255,255,0.02));
}
.main-nav li ul li ul {
  top: 0;
  left: calc(100% + 10px);
}

.hero {
  position: relative;
  overflow: hidden;
  padding: 56px 0 28px;
  min-height: 800px;
  background:
    radial-gradient(circle at 20% 16%, rgba(255,255,255,0.09), transparent 16%),
    radial-gradient(circle at 82% 14%, rgba(255,32,40,0.24), transparent 25%),
    linear-gradient(140deg, #0b0b0f 0%, #07080b 42%, #111318 100%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(106deg, transparent 0 13%, rgba(255,255,255,0.06) 13.3%, transparent 13.7%, transparent 23%, rgba(255,32,40,0.18) 23.4%, transparent 24%),
    repeating-linear-gradient(100deg, transparent 0 126px, rgba(255,255,255,0.018) 126px 128px),
    linear-gradient(0deg, rgba(0,0,0,0.26), rgba(0,0,0,0.08));
  mix-blend-mode: screen;
  opacity: .78;
}
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 190px;
  background: linear-gradient(180deg, transparent 0%, rgba(7,7,9,0.2) 22%, rgba(7,7,9,1) 100%);
}
.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(420px, 1.06fr);
  gap: 28px;
  align-items: stretch;
}
.hero-layout--brutal { align-items: center; }
.hero-copy {
  position: relative;
  padding: 18px 10px 0 0;
  z-index: 2;
}
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.03);
  border-radius: 999px;
  color: rgba(255,255,255,0.84);
  font-size: .71rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .22em;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.02) inset;
}
.hero-kicker::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 16px var(--accent);
}
.hero-title {
  max-width: 820px;
  margin-top: 18px;
  font-size: clamp(3rem, 6.4vw, 6rem);
  line-height: .94;
  text-transform: uppercase;
  letter-spacing: -0.07em;
  font-style: italic;
}
.hero-title .hero-main {
  display: block;
  background: linear-gradient(180deg, #ffffff 0%, #d8dbe2 50%, #8f95a2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 18px 40px rgba(0,0,0,0.35);
}
.hero-title .hero-accent {
  display: block;
  color: var(--accent);
  margin-top: 10px;
  text-shadow: 0 0 24px rgba(255,32,40,0.22);
}
.hero-lead {
  margin-top: 18px;
  max-width: 680px;
  font-size: clamp(.98rem, 1.48vw, 1.16rem);
  line-height: 1.65;
  color: #d4d8e1;
}
.hero-copy .cta-actions {
  margin-top: 22px;
}
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.trust-pill {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  border-radius: 999px;
  color: #fff;
  font-size: .66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.hero-aside {
  align-self: end;
  display: grid;
  gap: 18px;
  z-index: 2;
}
.hero-sharp-card {
  display: block;
  padding: 22px 24px 22px 92px;
  position: relative;
  min-height: 128px;
  clip-path: polygon(18px 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
    linear-gradient(135deg, rgba(255,32,40,0.18), rgba(18,19,25,0.95) 55%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.hero-sharp-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, rgba(255,32,40,0.12) 0%, transparent 42%), linear-gradient(90deg, rgba(255,255,255,0.08), transparent 20%);
  mix-blend-mode: screen;
}
.hero-sharp-card::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -10px;
  width: 120px;
  height: 140%;
  transform: skewX(-26deg);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent);
}
.hero-sharp-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 24px 60px rgba(0,0,0,0.42), 0 0 0 1px rgba(255,32,40,0.14) inset;
}
.hero-sharp-card > span {
  position: absolute;
  left: 24px;
  top: 20px;
  font-size: 2rem;
  line-height: 1;
  font-weight: 900;
  color: rgba(255,255,255,0.26);
  font-style: italic;
}
.hero-sharp-card strong,
.hero-sharp-card em { position: relative; z-index: 1; display: block; }
.hero-sharp-card strong {
  color: #fff;
  font-size: 1.18rem;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -.03em;
}
.hero-sharp-card em {
  margin-top: 8px;
  font-style: normal;
  font-size: .92rem;
  line-height: 1.5;
  color: #c4cad5;
}
.hero-bottom-bar {
  position: relative;
  z-index: 2;
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.hero-stat {
  min-height: 84px;
  padding: 17px 16px;
  display: grid;
  gap: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  box-shadow: var(--shadow-md);
}
.hero-stat b {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: rgba(255,255,255,0.58);
}
.hero-stat span {
  color: #fff;
  font-size: .98rem;
  font-weight: 800;
  line-height: 1.2;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.btn {
  --btn-bg: linear-gradient(180deg, #ff2d35 0%, #d40f19 100%);
  --btn-color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 11px 22px;
  border: 1px solid rgba(255,255,255,0.08);
  clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  background: var(--btn-bg);
  color: var(--btn-color) !important;
  text-transform: uppercase;
  font-weight: 900;
  font-size: .72rem;
  letter-spacing: .15em;
  box-shadow: 0 14px 26px rgba(212,15,25,0.24);
  position: relative;
  isolation: isolate;
  text-decoration: none !important;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 1px;
  clip-path: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent 50%, rgba(0,0,0,0.1) 100%);
  mix-blend-mode: screen;
  opacity: .6;
  z-index: -1;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(212,15,25,0.3), 0 0 0 1px rgba(255,255,255,0.08) inset;
}
.btn-outline {
  --btn-bg: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  --btn-color: #fff;
  border-color: rgba(255,255,255,0.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 16px 28px rgba(0,0,0,0.22);
}
.btn-outline:hover {
  box-shadow: inset 0 0 0 1px rgba(255,32,40,0.2), 0 22px 38px rgba(0,0,0,0.34);
}


.hero-blades {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.hero-blade {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 14px;
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.84);
  font-size: .62rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .18em;
}
.hero-blade--solid {
  background: linear-gradient(180deg, rgba(255,32,40,0.95), rgba(170,10,18,0.96));
  color: #fff;
  box-shadow: 0 14px 26px rgba(170,10,18,0.22);
}
.hero-stage {
  position: relative;
  z-index: 2;
  padding: 24px 0 0;
}
.hero-stage-lines {
  position: absolute;
  inset: 42px -28px 110px 16%;
  background:
    linear-gradient(126deg, transparent 0 20%, rgba(255,255,255,0.08) 20.3%, transparent 20.8%),
    linear-gradient(116deg, transparent 0 45%, rgba(255,32,40,0.22) 45.3%, transparent 46%),
    linear-gradient(180deg, rgba(255,32,40,0.12), transparent 45%);
  filter: blur(.3px);
  pointer-events: none;
}
.hero-machine {
  position: relative;
  min-height: 580px;
  border: 1px solid rgba(255,255,255,0.08);
  clip-path: polygon(28px 0, 100% 0, calc(100% - 22px) 100%, 0 100%);
  background:
    radial-gradient(circle at 76% 18%, rgba(255,32,40,0.22), transparent 24%),
    linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01) 28%),
    linear-gradient(140deg, rgba(255,32,40,0.14), rgba(12,13,16,0.98) 46%, rgba(6,7,10,1) 100%);
  box-shadow: 0 34px 90px rgba(0,0,0,0.5);
  overflow: hidden;
}
.hero-machine::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.18) 52%, rgba(0,0,0,0.9) 100%),
    linear-gradient(102deg, rgba(255,255,255,0.07) 0 2%, transparent 2.3% 100%),
    linear-gradient(127deg, transparent 0 62%, rgba(255,32,40,0.1) 62.3%, transparent 63.2%);
  pointer-events: none;
  z-index: 2;
}
.hero-machine::after {
  content: "";
  position: absolute;
  top: -8%;
  right: -7%;
  width: 42%;
  height: 42%;
  background: radial-gradient(circle, rgba(255,32,40,0.22), transparent 68%);
  filter: blur(16px);
  pointer-events: none;
  z-index: 1;
}
.hero-machine-badge {
  position: absolute;
  top: 22px;
  left: 24px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 14px;
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  background: linear-gradient(180deg, rgba(255,32,40,0.94), rgba(161,10,17,0.95));
  color: #fff;
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
  box-shadow: 0 12px 24px rgba(161,10,17,0.26);
}
.hero-machine-media {
  position: absolute;
  inset: 54px 18px 96px 18px;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.18)),
    url('/images/hero/hero-gwagen.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right bottom;
  filter: drop-shadow(0 30px 45px rgba(0,0,0,0.44));
  z-index: 1;
}
.hero-machine-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: grid;
  gap: 8px;
  padding: 24px 24px 22px;
  background: linear-gradient(180deg, rgba(6,7,9,0), rgba(6,7,9,0.82) 26%, rgba(6,7,9,0.98) 100%);
}
.hero-machine-caption span,
.hero-machine-caption strong,
.hero-machine-caption em {
  display: block;
}
.hero-machine-caption span {
  color: rgba(255,255,255,0.56);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.hero-machine-caption strong {
  color: #fff;
  font-size: clamp(1.5rem, 2vw, 2.05rem);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: -.05em;
}
.hero-machine-caption em {
  font-style: normal;
  color: #cfd4de;
  font-size: .9rem;
  line-height: 1.45;
  max-width: 88%;
}
.hero-stage-tags {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.hero-stage-tag {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 10px 14px;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: var(--shadow-md);
}
.hero-stage-tag:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.34), 0 0 0 1px rgba(255,32,40,0.14) inset;
}
.hero-stage-tag b {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: linear-gradient(180deg, rgba(255,32,40,0.94), rgba(161,10,17,0.95));
  color: #fff;
  font-size: .68rem;
  font-style: italic;
  border-radius: 0;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.hero-stage-tag span {
  color: #fff;
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.2;
}

.services-top {
  position: relative;
  z-index: 5;
  margin-top: -78px;
  padding: 0 0 34px;
}
.services-top-intro {
  padding: 34px 32px 30px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(18,19,25,0.96), rgba(11,12,16,0.96));
  border-radius: 28px 6px 28px 6px;
  box-shadow: var(--shadow-lg);
}
.services-top-intro::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
}
.services-top-intro h2 {
  max-width: 820px;
  font-size: clamp(2rem, 4vw, 3.35rem);
  text-transform: uppercase;
}
.services-top-intro h2::after {
  content: "";
  display: block;
  width: 140px;
  height: 4px;
  margin-top: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), rgba(255,255,255,0.85));
}
.services-top-intro p {
  max-width: 880px;
  margin-top: 18px;
  font-size: 1.02rem;
  color: #ccd1db;
}
.services-top-intro a { color: #fff; border-bottom: 1px solid rgba(255,255,255,0.2); }

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}
.service-card {
  position: relative;
  min-height: 236px;
  padding: 26px 22px 22px;
  clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent 35%),
    linear-gradient(140deg, rgba(255,32,40,0.18), rgba(16,17,22,0.98) 52%, rgba(9,10,13,1) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0 56%, rgba(255,255,255,0.08) 56.2%, transparent 57%), radial-gradient(circle at 18% 18%, rgba(255,255,255,0.08), transparent 25%);
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 56px rgba(0,0,0,0.42), 0 0 0 1px rgba(255,32,40,0.12) inset;
}
.service-card > * { position: relative; z-index: 1; }
.service-card .label {
  position: absolute;
  top: 20px;
  left: 24px;
  color: rgba(255,255,255,0.56);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .24em;
}
.service-card .num {
  position: absolute;
  top: 44px;
  left: 22px;
  font-size: 2.5rem;
  line-height: 1;
  color: rgba(255,255,255,0.22);
  background: none;
  width: auto;
  height: auto;
  border-radius: 0;
  font-weight: 900;
  font-style: italic;
}
.service-card h4 {
  margin-top: 86px;
  font-size: 1.18rem;
  line-height: 1.08;
  text-transform: uppercase;
  color: #fff;
}
.service-card a.btn {
  margin-top: 20px;
  align-self: flex-start;
  min-height: 42px;
  padding: 9px 15px;
  font-size: .64rem;
}

.page-content {
  padding: 36px 0 84px;
}
.page-content p + p,
.page-content p + ul,
.page-content p + figure,
.page-content ul + p,
.page-content figure + .cta-box,
.page-content table + .notice-box,
.page-content .gallery-grid + .price-table,
.page-content .price-table + .notice-box,
.page-content .notice-box + .cta-box { margin-top: 20px; }
.page-content > .wrap > p,
.page-content > .wrap > ul,
.page-content > .wrap > figure,
.page-content > .wrap > div,
.page-content > .wrap > table,
.page-content > .wrap > section {
  position: relative;
  z-index: 1;
}
.page-content > .wrap > p:first-child {
  font-size: 1.08rem;
  color: #d6dbe5;
}
.page-content h2 {
  margin-bottom: 18px;
  text-transform: uppercase;
}
.page-content h2::after,
.page-content h3::after {
  content: "";
  display: block;
  width: 86px;
  height: 3px;
  margin-top: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), rgba(255,255,255,0.7));
}
.page-content h3 { margin-bottom: 10px; }
.info-list,
.contact-list {
  list-style: none;
  display: grid;
  gap: 10px;
  margin-top: 18px;
}
.info-list li,
.contact-list li {
  position: relative;
  padding: 16px 16px 16px 54px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px 4px 16px 4px;
  color: #dbe0ea;
}
.info-list li::before,
.contact-list li::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 18px;
  width: 18px;
  height: 18px;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background: linear-gradient(180deg, #fff, var(--accent));
  box-shadow: 0 0 16px rgba(255,32,40,0.2);
}

.content-grid-2,
.feature-grid,
.gallery-grid,
.review-grid,
.category-grid {
  display: grid;
  gap: 22px;
}
.content-grid-2 { grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr); }
.feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery-grid, .review-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.portfolio-card,
.info-card,
.feature-box,
.review-card,
.category-card,
.notice-box,
.cta-box,
.lead-image {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
    linear-gradient(160deg, rgba(255,32,40,0.08), rgba(19,20,25,0.96) 54%, rgba(10,11,15,1) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sharp);
  box-shadow: var(--shadow-md);
}
.portfolio-card::before,
.info-card::before,
.feature-box::before,
.review-card::before,
.category-card::before,
.notice-box::before,
.cta-box::before,
.lead-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, rgba(255,255,255,0.07), transparent 32%), linear-gradient(90deg, transparent 0 70%, rgba(255,32,40,0.1) 100%);
  pointer-events: none;
}
.portfolio-card:hover,
.info-card:hover,
.feature-box:hover,
.review-card:hover,
.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 56px rgba(0,0,0,0.42), 0 0 0 1px rgba(255,32,40,0.14) inset;
}
.portfolio-card img,
.category-card img,
.lead-image img {
  width: 100%;
  min-height: 240px;
  object-fit: cover;
  background: linear-gradient(135deg, rgba(255,32,40,0.12), rgba(255,255,255,0.04));
}
.portfolio-card-body,
.category-card-body,
.info-card,
.feature-box,
.review-card,
.notice-box,
.cta-box {
  padding: 28px;
}
.portfolio-card-body h3,
.category-card-body h3,
.info-card h3,
.feature-box h3,
.review-card h3,
.cta-box h3 {
  text-transform: uppercase;
}
.portfolio-card-body p,
.category-card-body p,
.info-card p,
.feature-box p,
.review-card p,
.cta-box p,
.notice-box p { margin-top: 12px; }
.category-card { min-height: 100%; }
.category-card a { display: block; height: 100%; }

.feature-box { min-height: 240px; }
.feature-box h3::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background: linear-gradient(180deg, #fff, var(--accent));
}
.review-card .meta {
  font-size: .82rem;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: .16em;
}
.review-card p {
  margin-top: 14px;
  color: #e0e4ed;
}
.notice-box {
  padding: 22px 24px;
  color: #e3e6ef;
}
.notice-box strong { color: #fff; }

.lead-image {
  padding: 0;
}
.image-caption {
  padding: 14px 18px 18px;
  color: rgba(255,255,255,0.72);
  font-size: .92rem;
}
.image-fallback {
  min-height: 240px;
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 28px;
  text-align: center;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,0.08), transparent 18%),
    radial-gradient(circle at 84% 16%, rgba(255,32,40,0.22), transparent 22%),
    linear-gradient(135deg, rgba(255,32,40,0.14), rgba(12,13,17,0.98) 56%);
}
.image-fallback span,
.image-fallback b {
  display: block;
  text-transform: uppercase;
}
.image-fallback span {
  font-size: .76rem;
  letter-spacing: .24em;
  color: rgba(255,255,255,0.56);
}
.image-fallback b {
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  line-height: 1.05;
  color: #fff;
  letter-spacing: -.04em;
}
.no-image img { display: none !important; }
.no-image .image-fallback { border-top: 1px solid rgba(255,255,255,0.04); }

.breadcrumb {
  position: relative;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(7,8,11,0.84);
}
.breadcrumb .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: rgba(255,255,255,0.45);
}
.breadcrumb a { color: rgba(255,255,255,0.7); }
.breadcrumb .current { color: #fff; }
.page-hero {
  position: relative;
  overflow: hidden;
  min-height: 380px;
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 18% 24%, rgba(255,255,255,0.08), transparent 18%),
    radial-gradient(circle at 82% 20%, rgba(255,32,40,0.24), transparent 22%),
    linear-gradient(135deg, #09090d 0%, #0c0d12 48%, #14171d 100%);
  background-size: cover;
  background-position: center;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(0,0,0,0.64) 0%, rgba(0,0,0,0.42) 38%, rgba(255,32,40,0.16) 100%), linear-gradient(90deg, transparent 0 62%, rgba(255,255,255,0.08) 62.3%, transparent 62.8%);
}
.page-hero .wrap {
  position: relative;
  z-index: 1;
  padding: 58px 0;
}
.page-hero h1 {
  max-width: 900px;
  text-transform: uppercase;
  font-style: italic;
  text-shadow: 0 18px 42px rgba(0,0,0,0.45);
}
.page-hero p {
  margin-top: 16px;
  max-width: 760px;
  color: #dde2ec;
  font-size: 1.08rem;
}

.price-table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 18px 4px 18px 4px;
  box-shadow: var(--shadow-md);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
}
.price-table th,
.price-table td {
  padding: 16px 18px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.price-table th {
  background: rgba(255,32,40,0.12);
  color: #fff;
  text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: .14em;
}
.price-table td {
  color: #dde1ea;
}
.price-table tr:hover td { background: rgba(255,255,255,0.03); }

.footer {
  position: relative;
  padding: 28px 0;
  background: rgba(6,6,8,0.96);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,32,40,0.8) 30%, rgba(255,255,255,0.65) 50%, rgba(255,32,40,0.8) 70%, transparent 100%);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
}
.footer-contacts p + p { margin-top: 6px; }
.footer-contacts p,
.footer-nav a {
  color: rgba(255,255,255,0.72);
}
.footer-contacts a { color: #fff; }
.footer-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.footer-nav a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
  text-transform: uppercase;
  font-size: .74rem;
  letter-spacing: .15em;
}
.footer-nav a:hover { color: #fff; border-color: rgba(255,32,40,0.24); }
.footer-bottom {
  padding: 14px 16px 28px;
  text-align: center;
  color: rgba(255,255,255,0.38);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  background: rgba(6,6,8,0.96);
}

.scroll-top {
  position: fixed;
  right: 18px;
  bottom: 20px;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px 4px 18px 4px;
  background: linear-gradient(180deg, rgba(255,32,40,0.94), rgba(163, 10, 16, 0.96));
  color: #fff;
  box-shadow: 0 20px 38px rgba(163,10,16,0.34);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
  z-index: 1200;
}
.scroll-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .55s ease, transform .55s ease;
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1180px) {
  .header-inner {
    grid-template-columns: auto 1fr auto;
  }
  .header-phone { display: none; }
  .hero-layout { grid-template-columns: 1fr; }
  .hero-stage { padding-top: 4px; }
  .hero-machine { min-height: 520px; }
  .hero-stage-tags { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-aside { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .services-grid, .hero-bottom-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-grid, .gallery-grid, .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .nav-toggle { display: inline-block; justify-self: end; }
  .main-nav {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    left: 16px;
    right: 16px;
    background: rgba(10,11,15,0.98);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 24px 6px 24px 6px;
    box-shadow: var(--shadow-lg);
    padding: 14px;
  }
  .main-nav.open { display: block; }
  .main-nav > ul { display: block; }
  .main-nav > ul > li > a {
    min-height: auto;
    padding: 14px 12px;
  }
  .main-nav > ul > li > a::after { bottom: 8px; }
  .main-nav li ul {
    position: static;
    display: none;
    margin: 8px 0 10px;
    padding: 10px;
    min-width: 0;
  }
  .main-nav li:hover > ul { display: none; }
  .main-nav li.submenu-open > ul { display: block; }
  .main-nav li ul li ul { left: 0; top: 0; margin-top: 8px; }
  .hero {
    min-height: auto;
    padding-top: 40px;
  }
  .hero-bottom-bar,
  .hero-aside,
  .hero-stage-tags,
  .feature-grid,
  .gallery-grid,
  .review-grid,
  .category-grid,
  .services-grid,
  .content-grid-2,
  .footer-inner { grid-template-columns: 1fr; }
  .services-top {
    margin-top: -36px;
  }
  .hero-machine { min-height: 470px; }
  .hero-machine-media { inset: 52px 12px 88px 12px; background-position: center bottom; }
  .hero-machine-caption strong { font-size: 1.38rem; }
  .hero-machine-caption em { max-width: 100%; font-size: .84rem; }
}

@media (max-width: 640px) {
  .wrap { width: min(var(--container), calc(100% - 20px)); }
  .header-inner { min-height: 76px; gap: 12px; }
  .logo-placeholder::before,
  .logo-placeholder::after { font-size: 1.54rem; }
  .hero-title { font-size: clamp(2.24rem, 12.8vw, 3.54rem); }
  .hero-lead { font-size: .95rem; }
  .hero-copy .cta-actions,
  .cta-actions { display: grid; grid-template-columns: 1fr; }
  .btn { width: 100%; min-height: 48px; }
  .hero-sharp-card {
    padding: 20px 18px 20px 74px;
    min-height: 114px;
  }
  .hero-stat { min-height: 78px; }
  .services-top-intro,
  .portfolio-card-body,
  .category-card-body,
  .info-card,
  .feature-box,
  .review-card,
  .notice-box,
  .cta-box,
  .lead-image,
  .service-card { padding-left: 18px; padding-right: 18px; }
  .service-card { min-height: 212px; }
  .hero-blades { gap: 8px; }
  .hero-blade { min-height: 30px; padding: 6px 11px; font-size: .56rem; letter-spacing: .12em; }
  .hero-machine { min-height: 370px; }
  .hero-machine-badge { top: 14px; left: 14px; }
  .hero-machine-media { inset: 48px 8px 88px 8px; }
  .hero-machine-caption { padding: 18px 16px 16px; }
  .hero-machine-caption strong { font-size: 1.12rem; }
  .hero-machine-caption em { font-size: .78rem; }
  .hero-stage-tag { min-height: 52px; padding: 9px 12px; }
  .hero-stage-tag span { font-size: .66rem; }
  .page-hero { min-height: 300px; }
  .page-hero .wrap { padding: 42px 0; }
  .price-table { display: block; overflow-x: auto; }
}


/* v5 film motion + podium */
body.film-impact {
  font-size: 15px;
}
.site-motion-lines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .42;
  background:
    linear-gradient(112deg, transparent 0 18%, rgba(255,255,255,0.045) 18.12%, transparent 18.28%),
    linear-gradient(112deg, transparent 0 36%, rgba(255,32,40,0.11) 36.16%, transparent 36.42%),
    repeating-linear-gradient(112deg, transparent 0 118px, rgba(255,255,255,0.018) 118px 120px);
  mix-blend-mode: screen;
  animation: siteLinesDrift 16s linear infinite;
}
@keyframes siteLinesDrift {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-120px, 36px, 0); }
}
@keyframes stageLinesShift {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: -120px 28px, -190px 44px, 0 0; }
}
@keyframes heroCarFloat {
  0%,100% { transform: translate3d(0,0,0) scale(1.05); }
  50% { transform: translate3d(-10px,-8px,0) scale(1.06); }
}
@keyframes impactPulse {
  0%,100% { box-shadow: 0 14px 28px rgba(170,10,18,0.26); }
  50% { box-shadow: 0 18px 36px rgba(170,10,18,0.36); }
}
@keyframes podiumSpin {
  from { transform: translateX(-50%) rotate(0deg); }
  to { transform: translateX(-50%) rotate(360deg); }
}
@keyframes carYaw {
  0%,100% { transform: translate3d(-50%,0,0) rotateY(-10deg) rotateX(1deg); }
  50% { transform: translate3d(-50%,-10px,0) rotateY(10deg) rotateX(-1deg); }
}
@keyframes shineSweep {
  0% { transform: translateX(-120%) skewX(-18deg); opacity: 0; }
  18% { opacity: .45; }
  42% { transform: translateX(120%) skewX(-18deg); opacity: .12; }
  100% { transform: translateX(120%) skewX(-18deg); opacity: 0; }
}
@keyframes backlightPulse {
  0%,100% { opacity: .5; filter: blur(10px); }
  50% { opacity: .86; filter: blur(16px); }
}
h1 { font-size: clamp(2.6rem, 6.4vw, 5.1rem); }
h2 { font-size: clamp(1.9rem, 3.7vw, 3.15rem); }
p { font-size: .94rem; }
.header-inner { min-height: 78px; }
.header-phone { padding: 8px 14px; font-size: .68rem; }
.header-phone a { font-size: .84rem; }
.main-nav > ul > li > a { min-height: 78px; padding: 0 11px; font-size: .67rem; letter-spacing: .1em; }
.hero {
  padding: 72px 0 42px;
  min-height: 930px;
}
.hero::before { animation: stageLinesShift 14s linear infinite; }
.hero-layout { grid-template-columns: minmax(0, .88fr) minmax(520px, 1.12fr); gap: 32px; }
.hero-title { font-size: clamp(3.15rem, 6.5vw, 6.2rem); letter-spacing: -.08em; }
.hero-title .hero-accent { margin-top: 8px; }
.hero-lead { font-size: clamp(.9rem, 1.3vw, 1.02rem); max-width: 620px; }
.hero-kicker { font-size: .62rem; letter-spacing: .18em; padding: 7px 12px; }
.hero-blades { gap: 8px; }
.hero-blade { min-height: 31px; padding: 6px 12px; font-size: .56rem; }
.trust-pill { min-height: 34px; padding: 8px 11px; font-size: .58rem; letter-spacing: .11em; }
.hero-stage { padding-top: 0; }
.hero-stage-lines { inset: 28px -42px 92px 10%; animation: stageLinesShift 9s linear infinite; opacity: .92; }
.hero-machine { min-height: 690px; background:
    radial-gradient(circle at 74% 18%, rgba(255,32,40,0.28), transparent 26%),
    linear-gradient(132deg, rgba(255,255,255,0.075), rgba(255,255,255,0.01) 26%),
    linear-gradient(140deg, rgba(255,32,40,0.16), rgba(12,13,16,0.98) 46%, rgba(6,7,10,1) 100%); }
.hero-machine::before { background:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.14) 46%, rgba(0,0,0,0.86) 100%),
    linear-gradient(100deg, rgba(255,255,255,0.08) 0 2%, transparent 2.2% 100%),
    linear-gradient(128deg, transparent 0 58%, rgba(255,32,40,0.13) 58.3%, transparent 59.1%); }
.hero-machine-badge { min-height: 32px; padding: 6px 12px; font-size: .54rem; animation: impactPulse 3.8s ease-in-out infinite; }
.hero-machine-media {
  inset: 42px -10px 90px 10px;
  background-image:
    radial-gradient(circle at 76% 18%, rgba(255,255,255,0.16), transparent 20%),
    radial-gradient(circle at 62% 72%, rgba(255,32,40,0.24), transparent 24%),
    linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.12)),
    url('/images/hero/hero-gwagen-cutout.png');
  background-repeat: no-repeat;
  background-size: auto, auto, auto, 108%;
  background-position: 72% 8%, 74% 76%, center, 88% 98%;
  filter: drop-shadow(0 40px 55px rgba(0,0,0,0.58));
  animation: heroCarFloat 7.4s ease-in-out infinite;
}
.hero-machine-impact {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 20px;
  z-index: 4;
  display: grid;
  gap: 8px;
}
.hero-machine-impact span,
.hero-machine-impact strong {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 82%;
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.hero-machine-impact span {
  min-height: 30px;
  padding: 6px 12px;
  background: linear-gradient(180deg, rgba(255,32,40,0.94), rgba(161,10,17,0.95));
  font-size: .52rem;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fff;
}
.hero-machine-impact strong {
  min-height: 44px;
  padding: 10px 16px;
  background: linear-gradient(180deg, rgba(12,13,17,0.92), rgba(6,7,10,0.98));
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff;
  font-size: clamp(1rem, 1.55vw, 1.34rem);
  line-height: 1.06;
  text-transform: uppercase;
  letter-spacing: -.045em;
}
.hero-stage-tag { min-height: 52px; padding: 8px 12px; }
.hero-stage-tag span { font-size: .64rem; }
.hero-bottom-bar { margin-top: 26px; gap: 10px; }
.hero-stat { min-height: 76px; padding: 14px 14px; }
.hero-stat b { font-size: .58rem; }
.hero-stat span { font-size: .84rem; line-height: 1.18; }
.btn { min-height: 44px; padding: 9px 18px; font-size: .62rem; letter-spacing: .13em; box-shadow: 0 12px 22px rgba(212,15,25,0.22); }
.btn:hover { box-shadow: 0 16px 28px rgba(212,15,25,0.28), 0 0 0 1px rgba(255,255,255,0.08) inset; }
.services-top { margin-top: 0; padding: 26px 0 34px; }
.services-top-intro { padding: 28px 28px 24px; }
.services-top-intro h2 { font-size: clamp(1.72rem, 3.2vw, 2.6rem); }
.services-top-intro p { font-size: .94rem; }
.service-card { min-height: 220px; padding: 22px 18px 18px; }
.service-card .label { font-size: .62rem; left: 20px; top: 18px; }
.service-card .num { font-size: 2.15rem; left: 18px; top: 38px; }
.service-card h4 { margin-top: 76px; font-size: 1rem; }
.service-card a.btn { min-height: 38px; padding: 8px 14px; font-size: .58rem; }
.page-content { padding-top: 26px; }
.page-content > .wrap > p:first-child, .page-hero p { font-size: 1rem; }
.breadcrumb .wrap, .footer-nav a, .footer-bottom { font-size: .68rem; }
.hero-visual-strip { position: relative; z-index: 3; margin-top: -6px; }
.hero-visual-card {
  position: relative;
  overflow: hidden;
  padding: 22px 24px;
  clip-path: polygon(18px 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
  border: 1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    linear-gradient(132deg, rgba(255,32,40,0.18), rgba(12,13,17,0.96) 52%, rgba(6,7,10,1) 100%);
  box-shadow: var(--shadow-lg);
}
.hero-visual-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(122deg, rgba(255,255,255,0.08), transparent 28%), linear-gradient(90deg, transparent 0 74%, rgba(255,32,40,0.1) 100%);
  pointer-events: none;
}
.hero-visual-meta {
  position: relative;
  z-index: 1;
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 5px 10px;
  background: linear-gradient(180deg, rgba(255,32,40,0.94), rgba(161,10,17,0.95));
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  color: #fff;
  font-size: .52rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.hero-visual-card h2 { position: relative; z-index: 1; margin-top: 14px; font-size: clamp(1.78rem, 3.1vw, 2.7rem); text-transform: uppercase; }
.hero-visual-card p { position: relative; z-index: 1; margin-top: 10px; max-width: 980px; color: #d6dce6; font-size: .92rem; }
.showroom-section { position: relative; z-index: 3; padding: 26px 0 18px; }
.showroom-layout { display: grid; grid-template-columns: minmax(0, .78fr) minmax(520px, 1.22fr); gap: 22px; align-items: stretch; }
.showroom-copy { padding: 24px 10px 0 0; }
.showroom-kicker { display: inline-flex; min-height: 30px; align-items: center; padding: 6px 11px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); border-radius: 999px; color: rgba(255,255,255,0.82); font-size: .58rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.showroom-copy h2 { margin-top: 16px; text-transform: uppercase; }
.showroom-copy p { margin-top: 12px; max-width: 520px; font-size: .92rem; color: #d1d7e2; }
.showroom-note-grid { display: grid; gap: 12px; margin-top: 22px; }
.showroom-note { display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 12px; padding: 12px 14px; clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.08); box-shadow: var(--shadow-md); }
.showroom-note b { display: inline-grid; place-items: center; width: 36px; height: 36px; background: linear-gradient(180deg, rgba(255,32,40,0.94), rgba(161,10,17,0.95)); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); color: #fff; font-size: .66rem; }
.showroom-note span { color: #fff; text-transform: uppercase; font-weight: 800; font-size: .7rem; letter-spacing: .08em; line-height: 1.2; }
.showroom-shell {
  --car-color:#16181d;
  position: relative;
  overflow: hidden;
  min-height: 640px;
  padding: 20px 20px 18px;
  clip-path: polygon(22px 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
  border: 1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(circle at 74% 16%, rgba(255,32,40,0.2), transparent 24%),
    radial-gradient(circle at 28% 26%, rgba(255,255,255,0.07), transparent 20%),
    linear-gradient(138deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015) 24%),
    linear-gradient(140deg, rgba(255,32,40,0.12), rgba(12,13,16,0.98) 48%, rgba(6,7,10,1) 100%);
  box-shadow: var(--shadow-lg);
}
.showroom-shell::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,0.08), transparent 24%), linear-gradient(90deg, transparent 0 72%, rgba(255,32,40,0.1) 100%); pointer-events: none; }
.podium-scene {
  --scene-rx: 0deg;
  --scene-ry: 0deg;
  position: relative;
  min-height: 500px;
  border: 1px solid rgba(255,255,255,0.06);
  clip-path: polygon(18px 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015)), linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.18) 60%, rgba(0,0,0,0.45) 100%);
  perspective: 1400px;
  transform-style: preserve-3d;
  transform: rotateX(var(--scene-rx)) rotateY(var(--scene-ry));
  transition: transform .28s ease;
}
.podium-grid { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 68px), repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 62px); mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,0.2) 20%, #000 70%); opacity: .28; }
.podium-backlight { position: absolute; left: 50%; bottom: 88px; width: 62%; height: 62%; transform: translateX(-50%); background: radial-gradient(circle, color-mix(in srgb, var(--car-color) 42%, rgba(255,32,40,0.4)) 0%, rgba(255,32,40,0.18) 32%, transparent 72%); animation: backlightPulse 4.8s ease-in-out infinite; }
.podium-ring { position: absolute; left: 50%; bottom: 52px; width: 74%; height: 74%; transform: translateX(-50%); border-radius: 50%; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 0 0 1px rgba(255,32,40,0.14) inset; animation: podiumSpin 14s linear infinite; }
.podium-ring::before, .podium-ring::after { content: ''; position: absolute; border-radius: 50%; inset: 8% 10%; border: 1px dashed rgba(255,255,255,0.05); }
.podium-ring::after { inset: 18% 20%; border-style: solid; border-color: rgba(255,32,40,0.16); }
.podium-base { position: absolute; left: 50%; bottom: 42px; width: 70%; height: 68px; transform: translateX(-50%); border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(8,9,11,1)); box-shadow: 0 30px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08) inset; }
.podium-base::after { content: ''; position: absolute; inset: 8px 12%; border-radius: 50%; background: radial-gradient(circle at 50% 38%, rgba(255,255,255,0.14), transparent 38%), linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.24)); }
.podium-car { position: absolute; left: 50%; bottom: 74px; width: min(88%, 760px); transform-style: preserve-3d; animation: carYaw 8.2s ease-in-out infinite; }
.podium-car img, .podium-car-tint, .podium-car-shine { position: absolute; inset: 0; width: 100%; height: auto; }
.podium-car img { position: relative; z-index: 2; filter: drop-shadow(0 36px 40px rgba(0,0,0,0.55)); }
.podium-car-tint {
  z-index: 3;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.18), transparent 34%), linear-gradient(180deg, color-mix(in srgb, var(--car-color) 92%, white 8%) 0%, var(--car-color) 100%);
  opacity: .9;
  mix-blend-mode: color;
  -webkit-mask: url('/images/hero/hero-gwagen-cutout.png') center/contain no-repeat;
  mask: url('/images/hero/hero-gwagen-cutout.png') center/contain no-repeat;
}
.podium-car-shine { z-index: 4; background: linear-gradient(115deg, transparent 0 38%, rgba(255,255,255,0.42) 42%, transparent 48%); opacity: .0; animation: shineSweep 5.2s ease-in-out infinite; mix-blend-mode: screen; -webkit-mask: url('/images/hero/hero-gwagen-cutout.png') center/contain no-repeat; mask: url('/images/hero/hero-gwagen-cutout.png') center/contain no-repeat; }
.showroom-controls { margin-top: 16px; display: grid; gap: 12px; }
.showroom-controls-head { display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.showroom-controls-head span { color: rgba(255,255,255,0.56); font-size: .56rem; font-weight: 900; text-transform: uppercase; letter-spacing: .18em; }
.showroom-controls-head strong { color: #fff; text-transform: uppercase; font-size: .74rem; letter-spacing: .08em; }
.color-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.color-swatch { position: relative; width: 34px; height: 34px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.16); background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 8px 18px rgba(0,0,0,0.24); cursor: pointer; }
.color-swatch::after { content: ''; position: absolute; inset: 5px; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.03)); }
.color-swatch.active { transform: scale(1.08); box-shadow: 0 0 0 2px rgba(255,255,255,0.14), 0 0 0 5px rgba(255,32,40,0.18), 0 10px 18px rgba(0,0,0,0.28); }
@media (max-width: 1180px) {
  .showroom-layout { grid-template-columns: 1fr; }
  .showroom-copy { padding-right: 0; }
  .showroom-shell { min-height: 600px; }
  .hero-layout { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .hero { min-height: auto; padding-top: 46px; }
  .hero-machine { min-height: 560px; }
  .hero-machine-media { inset: 48px 4px 96px 4px; background-size: auto, auto, auto, 110%; background-position: 74% 10%, 76% 76%, center, 78% 98%; }
  .hero-machine-impact strong { max-width: 90%; }
  .showroom-shell { min-height: 560px; }
  .podium-scene { min-height: 420px; }
  .podium-car { width: min(94%, 650px); bottom: 68px; }
}
@media (max-width: 640px) {
  body.film-impact { font-size: 14px; }
  .header-inner { min-height: 70px; }
  .main-nav > ul > li > a { font-size: .64rem; }
  .btn { min-height: 42px; padding: 8px 15px; font-size: .58rem; }
  .hero-title { font-size: clamp(2.2rem, 11vw, 3.8rem); }
  .hero-machine { min-height: 430px; }
  .hero-machine-media { inset: 52px -16px 82px -14px; background-size: auto, auto, auto, 130%; background-position: 78% 12%, 80% 76%, center, 74% 98%; }
  .hero-machine-impact { left: 14px; right: 14px; bottom: 14px; }
  .hero-machine-impact span { min-height: 26px; font-size: .46rem; }
  .hero-machine-impact strong { min-height: 38px; padding: 8px 12px; font-size: .86rem; max-width: 100%; }
  .hero-visual-card { padding: 18px 16px; }
  .hero-visual-card h2 { font-size: 1.48rem; }
  .showroom-shell { min-height: 500px; padding: 14px 14px 16px; }
  .podium-scene { min-height: 340px; }
  .podium-base { width: 86%; height: 54px; }
  .podium-ring { width: 92%; height: 92%; }
  .podium-car { width: 118%; left: 50%; bottom: 58px; }
  .showroom-controls-head { flex-direction: column; align-items: flex-start; }
  .color-swatch { width: 30px; height: 30px; }
}


/* v6 poster hero + real 3d configurator */
body.film-impact { font-size: 14px; }
.site-motion-lines {
  opacity: .56;
  background:
    linear-gradient(114deg, transparent 0 14%, rgba(255,255,255,0.06) 14.1%, transparent 14.26%),
    linear-gradient(114deg, transparent 0 29%, rgba(255,34,42,0.14) 29.14%, transparent 29.36%),
    linear-gradient(114deg, transparent 0 47%, rgba(255,255,255,0.03) 47.08%, transparent 47.26%),
    repeating-linear-gradient(114deg, transparent 0 132px, rgba(255,255,255,0.014) 132px 134px);
  animation: siteLinesDrift 11s linear infinite;
}
.site-motion-lines::before,
.site-motion-lines::after {
  content: '';
  position: absolute;
  inset: -14%;
  background: repeating-linear-gradient(124deg, transparent 0 164px, rgba(255,32,40,0.03) 164px 166px), repeating-linear-gradient(124deg, transparent 0 250px, rgba(255,255,255,0.016) 250px 252px);
  mix-blend-mode: screen;
  animation: siteLinesDriftAlt 15s linear infinite;
}
.site-motion-lines::after {
  opacity: .82;
  filter: blur(10px);
  animation-duration: 20s;
  animation-direction: reverse;
}
@keyframes siteLinesDriftAlt {
  from { transform: translate3d(0,0,0) scale(1); }
  to { transform: translate3d(140px,-58px,0) scale(1.02); }
}
.header-inner { min-height: 72px; }
.logo-placeholder { font-size: 1.05rem; letter-spacing: .24em; }
.header-phone { padding: 7px 12px; font-size: .62rem; }
.header-phone a { font-size: .78rem; }
.main-nav > ul > li > a { min-height: 72px; padding: 0 9px; font-size: .61rem; letter-spacing: .12em; }
.hero { padding: 82px 0 42px; min-height: 1040px; }
.hero-layout { grid-template-columns: minmax(0, .82fr) minmax(560px, 1.18fr); gap: 34px; }
.hero-title { font-size: clamp(3.3rem, 6.7vw, 6.7rem); }
.hero-lead { max-width: 560px; font-size: .84rem; }
.hero-kicker { font-size: .54rem; min-height: 28px; padding: 6px 11px; }
.hero-blade { min-height: 28px; padding: 5px 11px; font-size: .5rem; }
.trust-pill { min-height: 32px; padding: 7px 10px; font-size: .52rem; }
.cta-actions { gap: 10px; }
.btn { min-height: 40px; padding: 8px 14px; font-size: .54rem; letter-spacing: .14em; }
.hero-stage-lines {
  inset: 18px -90px 88px -2%;
  opacity: 1;
  background:
    linear-gradient(126deg, transparent 0 12%, rgba(255,255,255,0.1) 12.1%, transparent 12.3%),
    linear-gradient(126deg, transparent 0 26%, rgba(255,32,40,0.14) 26.2%, transparent 26.6%),
    linear-gradient(126deg, transparent 0 42%, rgba(255,255,255,0.06) 42.1%, transparent 42.34%),
    repeating-linear-gradient(126deg, transparent 0 116px, rgba(255,255,255,0.022) 116px 118px);
  animation: stageLinesPoster 7.5s linear infinite;
}
@keyframes stageLinesPoster {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-160px,48px,0); }
}
.hero-machine {
  min-height: 770px;
  clip-path: polygon(26px 0, 100% 0, calc(100% - 22px) 100%, 0 100%);
  background:
    radial-gradient(circle at 76% 16%, rgba(255,255,255,0.15), transparent 14%),
    radial-gradient(circle at 84% 18%, rgba(255,32,40,0.25), transparent 24%),
    linear-gradient(134deg, rgba(255,255,255,0.085), rgba(255,255,255,0.02) 18%),
    linear-gradient(142deg, rgba(255,32,40,0.16), rgba(14,15,18,0.98) 48%, rgba(5,7,10,1) 100%);
}
.hero-machine::before {
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.16) 48%, rgba(0,0,0,0.9) 100%),
    linear-gradient(100deg, rgba(255,255,255,0.1) 0 1.6%, transparent 1.8% 100%),
    linear-gradient(126deg, transparent 0 56%, rgba(255,32,40,0.12) 56.2%, transparent 57.2%),
    linear-gradient(132deg, transparent 0 76%, rgba(255,255,255,0.06) 76.2%, transparent 76.55%);
}
.hero-machine::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 150px;
  background: linear-gradient(180deg, rgba(255,32,40,0) 0%, rgba(255,32,40,0.12) 56%, rgba(0,0,0,0.72) 100%);
  pointer-events: none;
}
.hero-machine-plates {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 4;
  display: grid;
  gap: 8px;
}
.hero-plate {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 30px;
  padding: 6px 14px;
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  font-size: .5rem;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.hero-plate--primary { background: linear-gradient(180deg, #ff2c36 0%, #b00e18 100%); color: #fff; }
.hero-plate--dark { background: rgba(10,12,16,0.86); color: #fff; border: 1px solid rgba(255,255,255,0.08); }
.hero-machine-media {
  inset: 18px -32px 112px -26px;
  background-image:
    radial-gradient(circle at 76% 16%, rgba(255,255,255,0.18), transparent 16%),
    radial-gradient(circle at 58% 74%, rgba(255,32,40,0.24), transparent 24%),
    linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.12)),
    url('/images/hero/hero-gwagen-cutout.png');
  background-size: auto, auto, auto, 120%;
  background-position: 76% 10%, 76% 78%, center, 86% 96%;
  animation: heroCarFloat 6.6s ease-in-out infinite;
}
.hero-machine-impact {
  left: 18px;
  right: 18px;
  bottom: 18px;
  gap: 10px;
}
.hero-machine-impact strong, .hero-machine-impact em {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 92%;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}
.hero-machine-impact strong {
  min-height: 48px;
  padding: 11px 18px;
  background: linear-gradient(180deg, rgba(10,12,16,0.95), rgba(6,7,10,0.98));
  border: 1px solid rgba(255,255,255,0.08);
  font-size: clamp(1.08rem, 1.7vw, 1.46rem);
  line-height: 1.04;
  text-transform: uppercase;
  letter-spacing: -.045em;
}
.hero-machine-impact em {
  min-height: 30px;
  padding: 6px 13px;
  background: linear-gradient(180deg, rgba(255,32,40,0.94), rgba(161,10,17,0.95));
  color: #fff;
  font-style: normal;
  font-size: .5rem;
  font-weight: 900;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.hero-stage-tag { min-height: 48px; padding: 8px 11px; }
.hero-stage-tag span { font-size: .58rem; }
.hero-stat { min-height: 72px; padding: 13px 14px; }
.hero-stat b { font-size: .52rem; }
.hero-stat span { font-size: .76rem; }
.hero-visual-card { padding: 20px 22px; }
.hero-visual-meta { min-height: 26px; font-size: .48rem; padding: 4px 9px; }
.hero-visual-card h2 { font-size: clamp(1.7rem, 2.9vw, 2.45rem); }
.hero-visual-card p { font-size: .84rem; }
.services-top-intro p, .showroom-copy p, .page-content > .wrap > p:first-child, .page-hero p { font-size: .86rem; }
.service-card { min-height: 204px; padding: 20px 16px 16px; }
.service-card h4 { font-size: .92rem; }
.service-card a.btn { min-height: 36px; padding: 7px 12px; font-size: .52rem; }
.showroom-section { padding: 28px 0 20px; }
.showroom-layout { grid-template-columns: minmax(0, .72fr) minmax(580px, 1.28fr); gap: 24px; }
.showroom-kicker { min-height: 28px; padding: 5px 10px; font-size: .52rem; }
.showroom-copy h2 { font-size: clamp(1.75rem, 3vw, 2.6rem); }
.showroom-note { padding: 11px 13px; }
.showroom-note b { width: 34px; height: 34px; font-size: .6rem; }
.showroom-note span { font-size: .62rem; }
.showroom-shell { min-height: 690px; padding: 18px 18px 16px; }
.showroom-shell--3d::before { display: none; }
.viewer-frame {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  clip-path: polygon(18px 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
  border: 1px solid rgba(255,255,255,0.06);
  background:
    radial-gradient(circle at 78% 12%, rgba(255,255,255,0.08), transparent 16%),
    radial-gradient(circle at 70% 74%, rgba(255,32,40,0.17), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015)),
    linear-gradient(180deg, rgba(8,9,11,0.96), rgba(3,4,6,1));
}
.viewer-grid {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.022) 0 1px, transparent 1px 72px), repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 66px);
  mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,0.2) 22%, #000 72%);
  opacity: .42;
}
.viewer-glow {
  position: absolute;
  left: 50%;
  bottom: 96px;
  width: 64%;
  height: 58%;
  transform: translateX(-50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--car-color) 44%, rgba(255,32,40,0.5)) 0%, rgba(255,32,40,0.18) 34%, transparent 72%);
  filter: blur(12px);
  animation: backlightPulse 4.8s ease-in-out infinite;
}
.viewer-canvas {
  position: relative;
  z-index: 3;
  min-height: 520px;
}
.viewer-canvas canvas {
  display: block;
  width: 100% !important;
  height: 520px !important;
}
.viewer-loading {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.8);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: linear-gradient(180deg, rgba(7,8,10,0.1), rgba(7,8,10,0.34));
}
.viewer-overlay { position: absolute; pointer-events: none; }
.viewer-overlay--ring {
  left: 50%;
  bottom: 44px;
  width: 74%;
  height: 74%;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 0 0 1px rgba(255,32,40,0.14) inset;
  animation: podiumSpin 15s linear infinite;
}
.viewer-overlay--ring::before, .viewer-overlay--ring::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  inset: 8% 10%;
  border: 1px dashed rgba(255,255,255,0.06);
}
.viewer-overlay--ring::after { inset: 18% 20%; border-style: solid; border-color: rgba(255,32,40,0.18); }
.viewer-overlay--base {
  left: 50%;
  bottom: 30px;
  width: 70%;
  height: 64px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(8,9,11,1));
  box-shadow: 0 28px 40px rgba(0,0,0,0.52), 0 0 0 1px rgba(255,255,255,0.08) inset;
}
.viewer-overlay--base::after {
  content: '';
  position: absolute;
  inset: 7px 12%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 36%, rgba(255,255,255,0.12), transparent 38%), linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.24));
}
.viewer-overlay--accent {
  right: 20px;
  top: 20px;
  width: 42%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,32,40,0.42), transparent);
  box-shadow: 0 0 16px rgba(255,32,40,0.28);
}
.viewer-action-row { display: flex; flex-wrap: wrap; gap: 8px; }
.viewer-action {
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,32,40,0.92), rgba(156,11,18,0.95));
  color: #fff;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  font-size: .5rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, opacity .22s ease;
}
.viewer-action:hover { transform: translateY(-1px); box-shadow: 0 12px 20px rgba(212,15,25,0.22); }
.viewer-action--ghost { background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025)); }
.viewer-action.active { box-shadow: 0 0 0 1px rgba(255,255,255,0.12) inset, 0 0 0 4px rgba(255,32,40,0.12); }
.showroom-controls { gap: 10px; }
.showroom-controls-head span { font-size: .5rem; }
.showroom-controls-head strong { font-size: .64rem; }
.color-swatches { gap: 8px; }
.color-swatch { width: 30px; height: 30px; }
.color-swatch.active { transform: scale(1.06); }
@media (max-width: 1180px) {
  .hero-layout, .showroom-layout { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
}
@media (max-width: 980px) {
  .main-nav > ul > li > a { font-size: .58rem; }
  .hero { padding-top: 50px; }
  .hero-machine { min-height: 620px; }
  .hero-machine-media { inset: 28px -24px 106px -32px; background-size: auto, auto, auto, 126%; background-position: 76% 10%, 78% 78%, center, 84% 98%; }
  .viewer-frame, .viewer-canvas, .viewer-canvas canvas { min-height: 420px; height: 420px !important; }
  .showroom-shell { min-height: 590px; }
}
@media (max-width: 640px) {
  body.film-impact { font-size: 13px; }
  .header-inner { min-height: 66px; }
  .logo-placeholder { font-size: .94rem; letter-spacing: .2em; }
  .main-nav > ul > li > a { font-size: .56rem; }
  .btn { min-height: 38px; font-size: .52rem; }
  .hero-title { font-size: clamp(2.3rem, 11.2vw, 4rem); }
  .hero-machine { min-height: 470px; }
  .hero-machine-plates { top: 12px; left: 12px; }
  .hero-plate { min-height: 26px; padding: 5px 11px; font-size: .44rem; }
  .hero-machine-media { inset: 26px -14px 98px -30px; background-size: auto, auto, auto, 144%; background-position: 78% 12%, 82% 78%, center, 74% 100%; }
  .hero-machine-impact { left: 12px; right: 12px; bottom: 12px; }
  .hero-machine-impact strong { min-height: 40px; padding: 8px 12px; font-size: .86rem; max-width: 100%; }
  .hero-machine-impact em { min-height: 24px; padding: 5px 10px; font-size: .42rem; max-width: 100%; }
  .hero-visual-card { padding: 16px 14px; }
  .showroom-shell { min-height: 520px; padding: 12px 12px 14px; }
  .viewer-frame, .viewer-canvas, .viewer-canvas canvas { min-height: 320px; height: 320px !important; }
  .viewer-overlay--ring { width: 92%; height: 92%; }
  .viewer-overlay--base { width: 86%; height: 52px; }
}

/* v7 local car podium + tighter UI */
body.film-impact { font-size: 13px; }
.header-inner { min-height: 68px; }
.logo-placeholder { font-size: .98rem; letter-spacing: .22em; }
.header-phone { padding: 6px 10px; font-size: .58rem; }
.header-phone a { font-size: .72rem; }
.main-nav > ul > li > a { min-height: 68px; padding: 0 8px; font-size: .56rem; letter-spacing: .11em; }
.hero { padding: 78px 0 36px; min-height: 1080px; }
.hero-layout { grid-template-columns: minmax(0, .78fr) minmax(600px, 1.22fr); gap: 28px; }
.hero-kicker { font-size: .5rem; min-height: 26px; padding: 5px 10px; }
.hero-blade { min-height: 26px; padding: 4px 10px; font-size: .46rem; }
.hero-title { font-size: clamp(3.2rem, 6.9vw, 7.2rem); }
.hero-main, .hero-accent { letter-spacing: -.05em; }
.hero-lead { max-width: 520px; font-size: .76rem; }
.trust-pill { min-height: 30px; padding: 6px 10px; font-size: .48rem; }
.btn { min-height: 36px; padding: 7px 12px; font-size: .48rem; letter-spacing: .12em; }
.hero-machine { min-height: 808px; }
.hero-machine-plates { top: 16px; left: 16px; gap: 6px; }
.hero-plate { min-height: 28px; padding: 5px 12px; font-size: .46rem; }
.hero-machine-media {
  inset: 10px -48px 76px -42px;
  background-image:
    radial-gradient(circle at 78% 15%, rgba(255,255,255,0.22), transparent 15%),
    radial-gradient(circle at 72% 76%, rgba(255,32,40,0.28), transparent 26%),
    linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.16)),
    url('/images/hero/hero-gwagen-cutout.png');
  background-size: auto, auto, auto, 128%;
  background-position: 78% 12%, 74% 78%, center, 90% 100%;
  filter: drop-shadow(0 34px 40px rgba(0,0,0,.55));
}
.hero-stage-tag { min-height: 42px; padding: 7px 10px; }
.hero-stage-tag b { font-size: .66rem; }
.hero-stage-tag span { font-size: .54rem; }
.hero-bottom-bar { margin-top: 20px; }
.hero-stat { min-height: 66px; padding: 11px 12px; }
.hero-stat b { font-size: .48rem; }
.hero-stat span { font-size: .7rem; }
.hero-visual-card {
  padding: 22px 24px;
  background:
    linear-gradient(126deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01) 22%),
    linear-gradient(128deg, rgba(255,28,36,0.18), rgba(7,8,10,0.98) 46%, rgba(4,5,7,1));
}
.hero-visual-meta { min-height: 24px; font-size: .44rem; padding: 4px 9px; }
.hero-visual-card h2 { font-size: clamp(1.55rem, 2.8vw, 2.42rem); }
.hero-visual-card p { max-width: 760px; font-size: .76rem; }
.services-top-intro p, .showroom-copy p, .page-content > .wrap > p:first-child, .page-hero p { font-size: .78rem; }
.service-card { min-height: 186px; padding: 18px 14px 14px; }
.service-card h4 { font-size: .86rem; }
.service-card a.btn { min-height: 34px; padding: 6px 11px; font-size: .48rem; }
.showroom-kicker { min-height: 26px; padding: 4px 9px; font-size: .48rem; }
.showroom-copy h2 { font-size: clamp(1.62rem, 3vw, 2.48rem); }
.showroom-note { padding: 10px 12px; }
.showroom-note b { width: 32px; height: 32px; font-size: .56rem; }
.showroom-note span { font-size: .58rem; }
.showroom-shell { min-height: 678px; padding: 16px 16px 14px; }
.viewer-frame { min-height: 520px; perspective: 1500px; }
.viewer-canvas {
  position: relative;
  z-index: 3;
  min-height: 520px;
  display: grid;
  place-items: center;
}
.viewer-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  perspective: 1600px;
  overflow: hidden;
}
.viewer-trace {
  position: absolute;
  left: 50%;
  top: 18%;
  width: 66%;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.24), rgba(255,32,40,0.45), transparent);
  box-shadow: 0 0 22px rgba(255,32,40,0.22);
}
.viewer-shadow {
  position: absolute;
  left: 50%;
  bottom: 120px;
  width: min(78%, 560px);
  aspect-ratio: 1.8;
  transform: translateX(-50%) scale(1.05);
  background: url('/images/hero/hero-gwagen-shadow.png') center/contain no-repeat;
  opacity: .9;
  filter: blur(10px);
  mix-blend-mode: screen;
}
.viewer-platform {
  position: absolute;
  left: 50%;
  bottom: 54px;
  width: 70%;
  height: 78px;
  transform: translateX(-50%) perspective(1200px) rotateX(70deg);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 44%, rgba(255,255,255,0.18), rgba(255,255,255,0.03) 34%, rgba(0,0,0,.06) 35%, transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.88));
  box-shadow: 0 26px 42px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08) inset, 0 0 24px rgba(255,32,40,.14);
}
.viewer-platform::before,
.viewer-platform::after {
  content:'';
  position:absolute;
  inset: 12% 7%;
  border-radius:inherit;
}
.viewer-platform::before { border:1px solid rgba(255,255,255,.08); }
.viewer-platform::after {
  inset: 26% 24%;
  border:1px dashed rgba(255,32,40,.18);
}
.viewer-car-wrap {
  position: absolute;
  left: 50%;
  bottom: 118px;
  width: min(80%, 660px);
  aspect-ratio: 1.78;
  transform-style: preserve-3d;
  transform-origin: 50% 62%;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.viewer-car-wrap:active { cursor: grabbing; }
.viewer-car-stack {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.car-depth,
.car-tint,
.car-gloss,
.viewer-car-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.car-depth {
  background: url('/images/hero/hero-gwagen-cutout.png') center/contain no-repeat;
  transform: translateZ(var(--z));
  filter: brightness(0) saturate(0) blur(.45px);
  opacity: var(--o, .12);
}
.viewer-car-image {
  object-fit: contain;
  transform: translateZ(10px);
  filter: var(--car-filter) drop-shadow(0 18px 28px rgba(0,0,0,.42));
}
.car-tint,
.car-gloss {
  pointer-events: none;
  transform: translateZ(12px);
  -webkit-mask: url('/images/hero/hero-gwagen-cutout.png') center/contain no-repeat;
  mask: url('/images/hero/hero-gwagen-cutout.png') center/contain no-repeat;
}
.car-tint {
  background: radial-gradient(circle at 58% 38%, rgba(255,255,255,.08), transparent 24%), linear-gradient(135deg, color-mix(in srgb, var(--car-overlay) 82%, white 18%), var(--car-overlay));
  mix-blend-mode: color;
  opacity: var(--car-overlay-opacity, .08);
}
.car-gloss {
  background:
    radial-gradient(circle at var(--glare-x, 52%) 36%, rgba(255,255,255,.34), transparent 13%),
    linear-gradient(112deg, transparent 18%, rgba(255,255,255,.16) 28%, transparent 38%),
    linear-gradient(130deg, transparent 50%, rgba(255,255,255,.08) 58%, transparent 66%);
  mix-blend-mode: screen;
  opacity: .85;
}
.viewer-loading { display:none; }
.viewer-overlay--ring { width: 68%; height: 68%; bottom: 58px; }
.viewer-overlay--base { width: 66%; height: 56px; bottom: 38px; }
.viewer-action-row { gap: 7px; }
.viewer-action {
  min-height: 32px;
  padding: 6px 11px;
  font-size: .46rem;
  letter-spacing: .14em;
}
.showroom-controls { gap: 9px; }
.showroom-controls-head span { font-size: .46rem; }
.showroom-controls-head strong { font-size: .6rem; }
.color-swatches { gap: 7px; }
.color-swatch { width: 28px; height: 28px; }
@media (max-width: 1180px) {
  .hero-layout, .showroom-layout { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
}
@media (max-width: 980px) {
  .main-nav > ul > li > a { font-size: .54rem; }
  .hero { padding-top: 48px; }
  .hero-machine { min-height: 650px; }
  .hero-machine-media { inset: 18px -20px 70px -28px; background-size: auto, auto, auto, 134%; background-position: 78% 12%, 76% 78%, center, 86% 100%; }
  .viewer-frame, .viewer-canvas { min-height: 420px; }
  .viewer-car-wrap { width: min(88%, 580px); bottom: 102px; }
  .showroom-shell { min-height: 600px; }
}
@media (max-width: 640px) {
  body.film-impact { font-size: 12px; }
  .header-inner { min-height: 62px; }
  .logo-placeholder { font-size: .9rem; letter-spacing: .18em; }
  .main-nav > ul > li > a { font-size: .52rem; }
  .btn { min-height: 34px; font-size: .48rem; }
  .hero-title { font-size: clamp(2.15rem, 10.2vw, 3.7rem); }
  .hero-machine { min-height: 480px; }
  .hero-machine-media { inset: 18px -8px 66px -22px; background-size: auto, auto, auto, 150%; background-position: 78% 12%, 82% 78%, center, 78% 100%; }
  .hero-plate { min-height: 24px; padding: 5px 10px; font-size: .4rem; }
  .hero-stage-tag { min-height: 38px; }
  .hero-visual-card { padding: 16px 14px; }
  .showroom-shell { min-height: 530px; padding: 12px 12px 14px; }
  .viewer-frame, .viewer-canvas { min-height: 330px; }
  .viewer-shadow { bottom: 88px; width: 92%; }
  .viewer-platform { width: 84%; height: 62px; bottom: 30px; }
  .viewer-car-wrap { width: 94%; bottom: 74px; }
  .viewer-overlay--ring { width: 88%; height: 88%; }
  .viewer-overlay--base { width: 82%; height: 46px; bottom: 22px; }
}

/* ===== v8 local sedan configurator + full-width brand strip ===== */
.brand-strip-section{position:relative;z-index:3;margin-top:-2px;padding:8px 0 12px}
.brand-strip{position:relative;overflow:hidden;padding:22px 24px 20px;border:1px solid rgba(255,255,255,.08);clip-path:polygon(18px 0,100% 0,calc(100% - 18px) 100%,0 100%);background:linear-gradient(132deg,rgba(255,32,40,.16),rgba(12,13,17,.98) 50%,rgba(6,7,10,1) 100%);box-shadow:var(--shadow-lg)}
.brand-strip::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.08),transparent 22%),linear-gradient(90deg,transparent 0 70%,rgba(255,32,40,.12) 100%);pointer-events:none}
.brand-strip-top{position:relative;z-index:1;display:block;margin-bottom:12px;color:#fff;font-weight:1000;letter-spacing:.18em;text-transform:uppercase;font-size:.72rem}
.brand-strip-tags{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.brand-tag{display:inline-flex;align-items:center;min-height:26px;padding:5px 10px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:rgba(255,255,255,.88);clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);font-size:.48rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.brand-tag--solid{background:linear-gradient(180deg,rgba(255,32,40,.94),rgba(161,10,17,.96));border-color:rgba(255,32,40,.46)}
.brand-strip h2{position:relative;z-index:1;margin:0;font-size:clamp(1.9rem,4vw,3rem);text-transform:uppercase}
.brand-strip p{position:relative;z-index:1;margin:6px 0 0;color:#fff;font-size:clamp(.9rem,1.6vw,1.14rem);font-weight:900;text-transform:uppercase;letter-spacing:.06em}
.brand-strip-copy{position:relative;z-index:1;margin-top:12px;max-width:1120px;color:#d5dbe5;font-size:.82rem;line-height:1.65}

.hero-copy .hero-lead{max-width:470px;font-size:.7rem}
.logo-placeholder{font-size:1rem;letter-spacing:.2em}
.header-phone{padding:5px 9px;font-size:.54rem}
.header-phone a{font-size:.66rem}
.main-nav>ul>li>a{min-height:64px;padding:0 7px;font-size:.52rem;letter-spacing:.1em}
.btn{min-height:34px;padding:6px 11px;font-size:.46rem;letter-spacing:.13em}
.trust-pill{min-height:28px;padding:6px 9px;font-size:.45rem}
.hero-plate{min-height:24px;padding:5px 10px;font-size:.42rem}
.hero-stage-tag{min-height:40px;padding:7px 9px}
.hero-stage-tag b{font-size:.58rem}
.hero-stage-tag span{font-size:.5rem}
.hero-stat{min-height:62px;padding:10px 11px}
.hero-stat b{font-size:.44rem}
.hero-stat span{font-size:.64rem}
.services-top-intro p,.showroom-copy p,.page-content>.wrap>p:first-child,.page-hero p{font-size:.74rem}
.showroom-shell{min-height:700px;padding:16px 16px 14px;--car-color:#16181d}
.showroom-shell::before{display:none}
.viewer-frame,.viewer-canvas{position:relative;z-index:3;min-height:520px;display:grid;place-items:center}
.viewer-stage{position:absolute;inset:0;display:grid;place-items:center;perspective:1800px;overflow:hidden}
.viewer-shadow{left:50%;bottom:104px;width:min(74%,560px);aspect-ratio:1.95;transform:translateX(-50%) scale(1.04);background:radial-gradient(circle at 50% 50%,rgba(255,32,40,.22),rgba(255,32,40,.12) 24%,rgba(0,0,0,.42) 52%,transparent 74%);opacity:.95;filter:blur(18px);mix-blend-mode:screen}
.viewer-car-wrap{position:absolute;left:50%;bottom:124px;width:min(82%,660px);height:260px;transform-style:preserve-3d;transform-origin:50% 62%;cursor:grab;user-select:none;touch-action:none}
.viewer-car-wrap:active{cursor:grabbing}
.viewer-car-model{position:absolute;left:50%;top:50%;width:min(100%,560px);height:240px;transform:translate(-50%,-50%);transform-style:preserve-3d}
.car-cuboid,.car-panel,.wheel-3d,.car-ground-glow{position:absolute;transform-style:preserve-3d}
.car-cuboid{--w:100px;--h:40px;--d:80px;--x:0px;--y:0px;--z:0px;left:0;top:0;width:var(--w);height:var(--h);transform:translate3d(var(--x),var(--y),var(--z)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotateZ(var(--rz,0deg))}
.car-cuboid .face{position:absolute;display:block;backface-visibility:hidden;border:1px solid rgba(255,255,255,.06);box-shadow:inset 0 0 18px rgba(255,255,255,.03)}
.car-cuboid .front,.car-cuboid .back{width:100%;height:100%;background:linear-gradient(180deg,color-mix(in srgb,var(--car-color) 82%,white 18%),color-mix(in srgb,var(--car-color) 88%,black 12%))}
.car-cuboid .front{transform:translateZ(calc(var(--d)/2))}
.car-cuboid .back{transform:rotateY(180deg) translateZ(calc(var(--d)/2))}
.car-cuboid .right,.car-cuboid .left{width:var(--d);height:100%;left:50%;top:0;background:linear-gradient(180deg,color-mix(in srgb,var(--car-color) 72%,white 8%),color-mix(in srgb,var(--car-color) 86%,black 14%))}
.car-cuboid .right{transform:translateX(calc(var(--w)/2 - var(--d)/2)) rotateY(90deg)}
.car-cuboid .left{transform:translateX(calc(-1 * var(--w)/2 + var(--d)/2)) rotateY(-90deg)}
.car-cuboid .top,.car-cuboid .bottom{width:100%;height:var(--d);left:0;top:50%;background:linear-gradient(180deg,color-mix(in srgb,var(--car-color) 66%,white 34%),color-mix(in srgb,var(--car-color) 82%,black 18%))}
.car-cuboid .top{transform:translateY(calc(-1 * var(--d)/2 + var(--h)/2)) rotateX(90deg)}
.car-cuboid .bottom{transform:translateY(calc(var(--d)/2 - var(--h)/2)) rotateX(-90deg);background:linear-gradient(180deg,rgba(8,9,12,.92),rgba(2,3,4,1))}
.car-body-lower{--w:326px;--h:56px;--d:122px;--x:106px;--y:118px;--z:0px}
.car-hood{--w:134px;--h:34px;--d:122px;--x:58px;--y:96px;--z:0px;--rz:-1deg}
.car-cabin-base{--w:154px;--h:52px;--d:98px;--x:178px;--y:76px;--z:0px}
.car-roof{--w:94px;--h:28px;--d:88px;--x:212px;--y:52px;--z:0px}
.car-trunk{--w:92px;--h:28px;--d:112px;--x:356px;--y:100px;--z:0px}
.car-panel{border:1px solid rgba(255,255,255,.05);box-shadow:inset 0 0 18px rgba(255,255,255,.04)}
.car-windshield{left:190px;top:72px;width:62px;height:48px;transform:translateZ(0) rotateY(90deg) rotateX(26deg);background:linear-gradient(180deg,rgba(210,233,255,.3),rgba(36,44,60,.76));opacity:.92}
.car-backglass{left:318px;top:74px;width:52px;height:42px;transform:translateZ(0) rotateY(90deg) rotateX(-22deg);background:linear-gradient(180deg,rgba(210,233,255,.22),rgba(30,38,52,.74));opacity:.9}
.car-sideglass-left,.car-sideglass-right{width:130px;height:42px;top:76px;background:linear-gradient(180deg,rgba(210,233,255,.32),rgba(30,36,48,.84))}
.car-sideglass-left{left:184px;transform:translateZ(-50px)}
.car-sideglass-right{left:184px;transform:translateZ(50px)}
.car-grille{left:42px;top:112px;width:18px;height:34px;transform:translateZ(0) rotateY(90deg);background:linear-gradient(180deg,#15171c,#040506);box-shadow:0 0 0 1px rgba(255,255,255,.05),0 0 18px rgba(0,0,0,.3) inset}
.car-splitter{left:56px;top:146px;width:120px;height:10px;transform:translateZ(0) rotateX(90deg);background:linear-gradient(180deg,#090a0d,#1a1d23)}
.car-light{width:16px;height:10px;background:linear-gradient(90deg,rgba(255,255,255,.95),rgba(255,196,124,.78));box-shadow:0 0 14px rgba(255,220,170,.45)}
.car-light--front-left{left:56px;top:120px;transform:translateZ(-50px) rotateY(90deg)}
.car-light--front-right{left:56px;top:120px;transform:translateZ(50px) rotateY(90deg)}
.car-light--rear-left,.car-light--rear-right{width:13px;height:8px;background:linear-gradient(90deg,rgba(255,72,72,.9),rgba(122,12,18,.96));box-shadow:0 0 12px rgba(255,32,40,.36)}
.car-light--rear-left{left:444px;top:124px;transform:translateZ(-48px) rotateY(90deg)}
.car-light--rear-right{left:444px;top:124px;transform:translateZ(48px) rotateY(90deg)}
.wheel-3d{width:74px;height:74px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.2),rgba(74,80,90,.16) 24%,rgba(9,10,12,.9) 25%,rgba(10,11,13,1) 100%);box-shadow:0 0 0 7px rgba(6,7,9,1) inset,0 0 0 1px rgba(255,255,255,.06),0 18px 20px rgba(0,0,0,.32);overflow:hidden}
.wheel-3d::before{content:'';position:absolute;inset:10px;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(194,201,213,.76) 0 12deg,rgba(26,30,36,.96) 12deg 24deg);box-shadow:0 0 0 4px rgba(8,9,12,.9) inset}
.wheel-3d::after{content:'';position:absolute;inset:-8px;transform:translateZ(-10px);border-radius:50%;background:radial-gradient(circle,rgba(0,0,0,.8),rgba(0,0,0,0) 68%)}
.wheel-face,.wheel-inner{position:absolute;display:block;border-radius:50%}
.wheel-face{inset:24px;background:radial-gradient(circle at 36% 36%,rgba(255,255,255,.48),rgba(118,126,138,.28) 44%,rgba(18,19,23,.96) 100%);box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.wheel-inner{inset:31px;background:#090a0d;box-shadow:0 0 0 1px rgba(255,255,255,.05) inset}
.wheel-front-left{left:102px;top:142px;transform:translateZ(-58px)}
.wheel-front-right{left:102px;top:142px;transform:translateZ(58px)}
.wheel-rear-left{left:332px;top:142px;transform:translateZ(-58px)}
.wheel-rear-right{left:332px;top:142px;transform:translateZ(58px)}
.car-ground-glow{left:92px;top:170px;width:360px;height:52px;border-radius:50%;transform:translateZ(-2px);background:radial-gradient(circle at 50% 50%,rgba(255,32,40,.22),rgba(255,32,40,.08) 26%,rgba(0,0,0,.34) 60%,transparent 78%);filter:blur(10px);mix-blend-mode:screen}
.viewer-overlay--ring{width:68%;height:68%;bottom:58px}
.viewer-overlay--base{width:66%;height:56px;bottom:38px}
.showroom-controls{gap:9px}
.showroom-controls-head span{font-size:.46rem}
.showroom-controls-head strong{font-size:.6rem}
.viewer-action{min-height:31px;padding:6px 11px;font-size:.45rem;letter-spacing:.14em}
.color-swatches{gap:7px}
.color-swatch{width:28px;height:28px}

@media (max-width: 1180px){
  .brand-strip-copy{max-width:920px}
  .showroom-layout{grid-template-columns:1fr}
  .showroom-copy{padding-right:0}
}
@media (max-width: 980px){
  .brand-strip{padding:18px 18px 16px}
  .brand-strip-top{font-size:.6rem}
  .brand-strip h2{font-size:clamp(1.56rem,4.4vw,2.3rem)}
  .brand-strip p{font-size:.78rem}
  .brand-strip-copy{font-size:.72rem}
  .viewer-frame,.viewer-canvas{min-height:420px}
  .viewer-car-wrap{width:min(92%,600px);height:232px;bottom:106px}
  .viewer-car-model{width:min(100%,500px);height:212px}
  .car-body-lower{--x:88px;--y:108px;--w:296px;--d:110px}
  .car-hood{--x:48px;--y:88px;--w:124px;--d:110px}
  .car-cabin-base{--x:160px;--y:68px;--w:140px;--d:90px}
  .car-roof{--x:196px;--y:48px;--w:88px;--d:80px}
  .car-trunk{--x:320px;--y:92px;--w:86px;--d:100px}
  .car-windshield{left:166px;top:66px}.car-backglass{left:286px;top:68px}.car-sideglass-left,.car-sideglass-right{left:160px;width:120px}.car-sideglass-left{transform:translateZ(-46px)}.car-sideglass-right{transform:translateZ(46px)}
  .car-grille{left:36px;top:102px}.car-splitter{left:48px;top:136px;width:108px}
  .car-light--front-left,.car-light--front-right{left:48px;top:110px}.car-light--rear-left,.car-light--rear-right{left:404px;top:114px}
  .wheel-front-left,.wheel-front-right{left:84px;top:130px}.wheel-rear-left,.wheel-rear-right{left:286px;top:130px}
  .wheel-3d{width:66px;height:66px}.wheel-front-left{transform:translateZ(-52px)}.wheel-front-right{transform:translateZ(52px)}.wheel-rear-left{transform:translateZ(-52px)}.wheel-rear-right{transform:translateZ(52px)}
  .car-ground-glow{left:76px;top:156px;width:318px;height:44px}
}
@media (max-width: 640px){
  .brand-strip{padding:16px 14px 14px}
  .brand-strip-top{font-size:.52rem}
  .brand-strip-tags{gap:6px}
  .brand-tag{min-height:24px;padding:4px 8px;font-size:.42rem}
  .brand-strip h2{font-size:clamp(1.28rem,7.2vw,1.9rem)}
  .brand-strip p{font-size:.66rem}
  .brand-strip-copy{font-size:.66rem;line-height:1.55}
  .viewer-frame,.viewer-canvas{min-height:340px}
  .showroom-shell{min-height:560px;padding:12px 12px 14px}
  .viewer-car-wrap{width:96%;height:180px;bottom:80px}
  .viewer-car-model{width:380px;height:168px}
  .car-body-lower{--x:66px;--y:86px;--w:220px;--h:42px;--d:84px}
  .car-hood{--x:34px;--y:70px;--w:96px;--h:28px;--d:84px}
  .car-cabin-base{--x:116px;--y:54px;--w:110px;--h:40px;--d:70px}
  .car-roof{--x:146px;--y:38px;--w:72px;--h:20px;--d:62px}
  .car-trunk{--x:214px;--y:74px;--w:68px;--h:22px;--d:78px}
  .car-windshield{left:118px;top:52px;width:48px;height:36px}.car-backglass{left:204px;top:54px;width:40px;height:30px}.car-sideglass-left,.car-sideglass-right{left:118px;top:56px;width:90px;height:30px}.car-sideglass-left{transform:translateZ(-36px)}.car-sideglass-right{transform:translateZ(36px)}
  .car-grille{left:24px;top:82px;height:24px}.car-splitter{left:34px;top:108px;width:86px;height:8px}
  .car-light{width:12px;height:8px}.car-light--front-left,.car-light--front-right{left:34px;top:88px}.car-light--rear-left,.car-light--rear-right{left:284px;top:92px}
  .wheel-3d{width:48px;height:48px}.wheel-front-left,.wheel-front-right{left:62px;top:102px}.wheel-rear-left,.wheel-rear-right{left:232px;top:102px}.wheel-front-left{transform:translateZ(-38px)}.wheel-front-right{transform:translateZ(38px)}.wheel-rear-left{transform:translateZ(-38px)}.wheel-rear-right{transform:translateZ(38px)}
  .car-ground-glow{left:54px;top:118px;width:250px;height:34px}
}


/* v9 local visible configurator + hero split badges */
.hero-focus-row{display:grid;grid-template-columns:minmax(220px,1.25fr) repeat(3,minmax(110px,.55fr));gap:10px;max-width:760px;margin:16px 0 0}
.hero-focus{display:flex;align-items:center;justify-content:center;min-height:42px;padding:8px 14px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);text-transform:uppercase;letter-spacing:.12em;font-weight:900;font-size:.6rem;color:#fff;box-shadow:var(--shadow-md)}
.hero-focus--wide{justify-content:flex-start;padding-inline:16px;background:linear-gradient(180deg,rgba(255,34,44,.22),rgba(126,9,15,.12));border-color:rgba(255,34,44,.34)}

.showroom-shell--car{--car-angle:16deg;--car-shift-x:0px;overflow:hidden}
.showroom-shell--car .viewer-car-wrap{position:absolute;left:50%;bottom:112px;width:min(86%,660px);height:270px;transform-style:preserve-3d;transform-origin:50% 68%;cursor:grab;user-select:none;touch-action:none}
.showroom-shell--car .viewer-car-wrap:active{cursor:grabbing}
.showroom-shell--car .viewer-car-figure{position:absolute;inset:0;filter:drop-shadow(0 30px 50px rgba(0,0,0,.54)) drop-shadow(0 10px 20px rgba(255,28,39,.12));transform:translateX(var(--car-shift-x,0px))}
.showroom-shell--car .viewer-car-paint,
.showroom-shell--car .viewer-car-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;pointer-events:none}
.showroom-shell--car .viewer-car-paint{background:linear-gradient(155deg,color-mix(in srgb,var(--car-color) 86%,white 14%) 0%,var(--car-color) 40%,color-mix(in srgb,var(--car-color) 80%,black 20%) 100%);-webkit-mask:url('../images/hero/hero-gwagen-cutout.png') center bottom / contain no-repeat;mask:url('../images/hero/hero-gwagen-cutout.png') center bottom / contain no-repeat;opacity:.96;filter:saturate(1.15) brightness(.98)}
.showroom-shell--car .viewer-car-image--base{mix-blend-mode:luminosity;opacity:.92;filter:contrast(1.16) brightness(.96) grayscale(.22)}
.showroom-shell--car .viewer-car-image--shine{opacity:.86;mix-blend-mode:screen;filter:contrast(1.08) brightness(1.04)}
.showroom-shell--car .viewer-platform{width:min(74%,520px);height:112px;left:50%;bottom:34px;transform:translateX(-50%) perspective(920px) rotateX(78deg);background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.13),rgba(255,255,255,.02) 42%,rgba(255,24,34,.12) 57%,rgba(5,6,8,.02) 62%,rgba(5,6,8,0) 70%);border:1px solid rgba(255,255,255,.06);box-shadow:0 0 0 1px rgba(255,255,255,.03) inset,0 25px 55px rgba(0,0,0,.55)}
.showroom-shell--car .viewer-shadow--soft{left:50%;bottom:56px;width:min(62%,420px);height:54px;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(0,0,0,.52) 0%,rgba(0,0,0,.34) 44%,rgba(0,0,0,0) 78%)}
.showroom-shell--car .viewer-trace{left:50%;bottom:78px;width:min(68%,450px);height:4px;transform:translateX(-50%);background:linear-gradient(90deg,rgba(255,32,40,0),rgba(255,32,40,.92),rgba(255,255,255,.82),rgba(255,32,40,.92),rgba(255,32,40,0));filter:blur(.5px);opacity:.9}

@media (max-width:1180px){
  .hero-focus-row{grid-template-columns:1fr repeat(3,minmax(100px,.5fr));max-width:100%}
}
@media (max-width:860px){
  .hero-focus-row{grid-template-columns:1fr 1fr;gap:8px}
  .hero-focus{min-height:38px;font-size:.54rem;letter-spacing:.1em}
  .hero-focus--wide{grid-column:1 / -1}
  .showroom-shell--car .viewer-car-wrap{width:min(92%,600px);height:244px;bottom:104px}
}
@media (max-width:640px){
  .hero-focus-row{grid-template-columns:1fr;gap:7px;margin-top:14px}
  .hero-focus,.hero-focus--wide{grid-column:auto;justify-content:flex-start;padding-inline:14px}
  .showroom-shell--car .viewer-car-wrap{width:98%;height:200px;bottom:82px}
}