/* ===== Reset & base ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body,
h1, h2, h3, h4, p,
ul, ol, figure {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* ===== Design tokens ===== */
:root {
  --color-bg: #ffffff;
  --color-bg-alt: #f7f6f5;
  --color-canvas: #e6e6e6;
  --color-surface: #ffffff;
  --color-surface-alt: #f3f1ef;
  --color-border: #e7e4e1;
  --color-text: #1c1b1a;
  --color-text-muted: #6f6a66;
  --color-brand-blue: #0a4595;
  --color-accent: #ee2600;
  --color-accent-hover: #c81f00;
  --color-accent-soft: rgba(238, 38, 0, 0.10);
  --color-success: #2f9e6e;

  --font-base: "Golos Text", "Segoe UI", system-ui, -apple-system, sans-serif;

  --container-width: 1320px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 28px;

  --shadow-card: 0 20px 40px -20px rgba(28, 27, 26, 0.14);
  --transition-fast: 0.18s ease;
  --transition-med: 0.3s ease;
}

body {
  font-family: var(--font-base);
  background: var(--color-canvas);
  color: var(--color-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 16px;
}

@media (min-width: 1440px) {
  .container {
    padding: 0 32px;
  }

  section {
    margin-left: 32px;
    margin-right: 32px;
  }
}

section {
  position: relative;
  width: calc(100% - 32px);
  max-width: 1920px;
  margin: 0 auto 24px;
  padding: 96px 0;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  /* so jumping to a #section-id anchor (e.g. from the footer sitemap)
     doesn't tuck the section's top under the sticky header. */
  scroll-margin-top: 96px;
}

/* ===== Split feature (text half + full-bleed photo half) =====
   Breaks from the usual padded/rounded card: the photo runs edge-to-edge
   the full height of the row, flush against a plain-tinted text column —
   a deliberate one-off treatment, not the site's default section chrome. */
.split-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  padding: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface-alt);
}

.split-feature__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
  padding: 96px 64px;
}

.split-feature__text .lead {
  color: var(--color-text-muted);
}

.split-feature__list ul {
  list-style: disc;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
  color: var(--color-text-muted);
}

.split-feature__media {
  position: relative;
  min-height: 480px;
}

.split-feature__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1024px) {
  .split-feature {
    grid-template-columns: 1fr;
  }

  .split-feature__text {
    padding: 56px 32px;
  }

  .split-feature__media {
    min-height: 320px;
  }
}

/* A small gap so the first section doesn't sit flush against the sticky
   header — every other section already gets one via the previous section's
   bottom margin, but the first has no "previous" to create it. */
main > section:first-of-type {
  margin-top: 16px;
}

.section-heading {
  max-width: 640px;
  margin: 0 auto 56px;
  text-align: center;
}

.section-heading p.lead {
  margin-top: 16px;
}

/* The homepage intro carries the big h1 (up to 150px) — it needs a much
   wider column than a regular h2 section heading, the lead paragraph stays
   narrow underneath it for readability. */
.section-heading.is-wide {
  max-width: 1100px;
}

.section-heading.is-wide p.lead {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.section-heading.is-left {
  margin-left: 0;
  text-align: left;
}

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 12px;
}

/* Type scale matched to lar.tech's own breakpoints (736 / 1280 / 1440 / 1920px) */
h1, h2, h3, h4 {
  font-weight: 500;
}

h1 {
  font-size: 32px;
  line-height: 105%;
  letter-spacing: -0.4px;
}

h2 {
  font-size: 64px;
  line-height: 95%;
  letter-spacing: -0.6px;
}

h3 {
  font-size: 28px;
  line-height: 110%;
  letter-spacing: -0.6px;
}

h4 {
  font-size: 18px;
  line-height: 110%;
}

@media (min-width: 736px) {
  h1 { font-size: 60px; }
  h3 { font-size: 34px; }
  h4 { font-size: 26px; }
}

@media (min-width: 1280px) {
  h1 { font-size: 100px; }
}

@media (min-width: 1440px) {
  h1 { font-size: 90px; }
  h4 { font-size: 28px; }
}

@media (min-width: 1920px) {
  h1 { font-size: 150px; }
  h3 { font-size: 42px; }
}

/* Base body copy — matches lar.tech's own bare <p> recipe: 16px/400/120%,
   growing at the same 736/1440 breakpoints as the rest of the type scale.
   Components with their own more specific p rule (cards, news, etc.) still
   win on whatever they explicitly set — this only fills in the rest. */
p {
  font-size: 16px;
  font-weight: 400;
  line-height: 120%;
}

@media (min-width: 736px) {
  p { font-size: 18px; }
}

@media (min-width: 1440px) {
  p { font-size: 20px; }
}

p.lead {
  font-size: 1.15rem;
  color: var(--color-text-muted);
}

.text-muted {
  color: var(--color-text-muted);
}

/* ===== Legal documents (privacy / terms) =====
   Numbering is generated with CSS counters, not typed out by hand — add,
   remove or reorder a section/clause and the numbers stay correct. */
.legal-toc {
  padding: 0;
  margin-bottom: 48px;
}

.legal-toc h4 {
  margin-bottom: 16px;
}

.legal-toc ol {
  list-style: none;
  counter-reset: toc;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legal-toc li {
  counter-increment: toc;
}

.legal-toc li::before {
  content: counter(toc) ". ";
  font-weight: 600;
  color: var(--color-accent);
}

.legal-toc a:hover {
  color: var(--color-accent);
}

.legal-wrap {
  max-width: 820px;
  margin: 0 auto;
}

.legal-doc {
  counter-reset: section;
}

.legal-section {
  counter-increment: section;
  counter-reset: clause;
  margin-bottom: 48px;
  scroll-margin-top: 100px;
}

.legal-section:last-child {
  margin-bottom: 0;
}

.legal-section h3 {
  margin-bottom: 20px;
}

.legal-section h3::before {
  content: counter(section) ". ";
  color: var(--color-accent);
}

.legal-list {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.legal-list > li {
  counter-increment: clause;
  padding-left: 52px;
  position: relative;
  color: var(--color-text);
}

.legal-list > li::before {
  content: counter(section) "." counter(clause) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
}

.legal-list ul {
  margin-top: 12px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legal-list ul li {
  list-style: disc;
  color: var(--color-text-muted);
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  white-space: nowrap;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--color-accent);
  color: #fff;
}

.btn-primary:hover {
  background: var(--color-accent-hover);
}

.btn-outline {
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.btn-outline:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Second brand color (bvts.ru's own red + blue button pair) — used
   wherever we mirror that pair, e.g. the header's "Написать в MAX". */
.btn-secondary {
  background: var(--color-brand-blue);
  color: #fff;
}

.btn-secondary:hover {
  background: var(--color-accent-hover);
}

/* Phone-number button closing out a promo block (solution-content). */
.promo-phone-btn {
  margin-top: 16px;
}

/* ===== Header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}

.site-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

.logo {
  display: flex;
  align-items: center;
}

.logo-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Playful little location hint next to the header logo — desktop only,
   there's no room for it once the header collapses into the drawer. */
.logo-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--color-brand-blue);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.logo-badge__pin {
  display: inline-block;
  animation: logo-badge-bounce 2.4s ease-in-out infinite;
}

.logo-badge__divider {
  opacity: 0.5;
}

@keyframes logo-badge-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-badge__pin {
    animation: none;
  }
}

@media (max-width: 1280px) {
  .logo-badge {
    display: none;
  }
}

.logo-img {
  height: 24px;
  width: auto;
}

/* Header's own logo reads slightly larger than the footer's. */
.logo-img--header {
  height: 28px;
}

/* The nav is its own full-width row below the logo/phone/buttons row —
   plenty of room for generous spacing without fighting header-actions for
   space on a single line. */
.main-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-block: 12px;
  border-top: 1px solid var(--color-border);
}

/* Phone + button pair repeated inside the mobile drawer — see the
   max-width: 1280px block below, which is the only place this shows. */
.main-nav__contact {
  display: none;
}

.main-nav a {
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-weight: 500;
  line-height: 90%;
  letter-spacing: -0.6px;
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: color var(--transition-fast), background var(--transition-fast);
}

@media (min-width: 1440px) {
  .main-nav a {
    font-size: 18px;
  }
}

.main-nav a:hover {
  color: var(--color-text);
  background: var(--color-surface-alt);
}

.main-nav a.is-active {
  color: var(--color-text);
  background: var(--color-accent-soft);
}

/* ===== Nav dropdown (Марки / О компании) =====
   Same trigger + click-to-toggle on every breakpoint (no hover-only state —
   it has to work on touch too), just repositioned: a floating panel on the
   wide horizontal nav, an inline expanding list once the nav collapses into
   the mobile drawer. */
.main-nav .has-submenu {
  position: relative;
}

.main-nav .has-submenu > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  vertical-align: 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transform-origin: 55% 55%;
  transition: transform var(--transition-fast);
}

.main-nav .has-submenu.is-open > a::after {
  transform: rotate(225deg);
}

.main-nav .submenu {
  display: none;
  flex-direction: column;
  gap: 2px;
}

.main-nav .has-submenu.is-open .submenu {
  display: flex;
}

@media (min-width: 1281px) {
  /* Desktop: reveal on hover as well as click, so the panel opens as soon
     as a pointer lands on the trigger — click still works for keyboard/
     touch users landing on this breakpoint (e.g. a touch laptop). */
  .main-nav .has-submenu:hover > .submenu {
    display: flex;
  }

  .main-nav .has-submenu:hover > a::after {
    transform: rotate(225deg);
  }
}

@media (min-width: 1281px) {
  .main-nav .submenu {
    position: absolute;
    /* Flush against the trigger (no gap) so the pointer never leaves
       .has-submenu's hover box on the way down to the panel — the panel's
       own padding supplies the visual breathing room instead. */
    top: 100%;
    left: 0;
    z-index: 50;
    min-width: 240px;
    padding: 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
  }
}

@media (max-width: 1280px) {
  .main-nav .has-submenu {
    display: flex;
    flex-direction: column;
  }

  .main-nav .submenu {
    padding: 0 0 8px 16px;
  }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

.header-phone {
  font-size: 16px;
  font-weight: 500;
  line-height: 90%;
  letter-spacing: -0.6px;
  white-space: nowrap;
}

@media (min-width: 1440px) {
  .header-phone {
    font-size: 18px;
  }
}

.header-phone:hover {
  color: var(--color-accent);
}

.link-arrow {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 2px;
  white-space: nowrap;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.link-arrow:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* ===== Gradient CTA button (lar.tech-style header button) ===== */
.btn-gradient {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 28px;
  border-radius: 16px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -0.2px;
  white-space: nowrap;
  /* Strictly horizontal ("to right") so the gradient line matches the
     background-position pan axis exactly — an angled gradient (e.g. 120deg)
     breaks the seamless math since its line length depends on box aspect
     ratio. Stops repeat at 0/50/100% so a 0%→100% pan loops with no seam. */
  background-image: linear-gradient(to right,
    var(--color-accent-hover) 0%,
    var(--color-brand-blue) 25%,
    var(--color-accent-hover) 50%,
    var(--color-brand-blue) 75%,
    var(--color-accent-hover) 100%
  );
  background-size: 200% 100%;
  animation: btn-gradient-run 6s linear infinite;
  transition: transform var(--transition-fast);
}

.btn-gradient:hover {
  transform: translateY(-1px);
}

.btn-gradient:active {
  transform: translateY(0);
}

@keyframes btn-gradient-run {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@media (min-width: 1440px) {
  .btn-gradient {
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-gradient {
    animation: none;
  }
}

/* Rectangular black "МЕНЮ" button, matching lar.tech's own menu-button
   pattern (label + animated bars, no visible border — solid fill instead). */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--color-text);
  cursor: pointer;
}

.nav-toggle-label {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.nav-toggle-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-toggle-icon span,
.nav-toggle-icon span::before,
.nav-toggle-icon span::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  background: #fff;
  position: relative;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.nav-toggle-icon span::before { position: absolute; top: -6px; }
.nav-toggle-icon span::after { position: absolute; top: 6px; }

.nav-toggle.is-open .nav-toggle-icon span { background: transparent; }
.nav-toggle.is-open .nav-toggle-icon span::before { top: 0; transform: rotate(45deg); background: #fff; }
.nav-toggle.is-open .nav-toggle-icon span::after { top: 0; transform: rotate(-45deg); background: #fff; }

/* ===== Page intro (replaces hero) ===== */
.page-intro {
  position: relative;
  overflow: hidden;
  padding: 96px 0 64px;
  background: radial-gradient(ellipse 120% 100% at 25% 10%, #161c3a 0%, #080a16 55%, #030308 100%);
  color: #fff;
}

.page-intro .container {
  position: relative;
  z-index: 1;
}

.page-intro-badge {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 2;
  width: 120px;
  height: auto;
  opacity: 0.9;
}

@media (max-width: 640px) {
  .page-intro-badge {
    top: 16px;
    right: 16px;
    width: 84px;
  }
}

.page-intro .section-heading {
  margin-bottom: 48px;
}

.page-intro .eyebrow {
  color: var(--color-accent);
}

.page-intro h1 {
  color: #fff;
}

.page-intro p.lead {
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.72);
}

/* Photo hero (bvts.ru): swaps the cosmic scene for a real site photo — no
   nebula/starfield/galaxy behind it, just a dark gradient for text contrast. */
.page-intro.is-photo {
  background:
    linear-gradient(180deg, rgba(8, 14, 28, .6) 0%, rgba(4, 6, 12, .82) 100%),
    url('../images/hero-servis-odintsovo.png') center/cover no-repeat;
}

.page-intro.is-photo::before,
.page-intro.is-photo::after {
  content: none;
}

.page-intro .btn-outline {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

.page-intro .btn-outline:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

/* Nebula glow — soft drifting color blobs, clearly breathing/moving */
.page-intro::before {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 28%, rgba(240, 132, 102, 0.4), transparent 40%),
    radial-gradient(circle at 82% 12%, rgba(108, 99, 255, 0.34), transparent 44%),
    radial-gradient(circle at 55% 88%, rgba(47, 158, 110, 0.22), transparent 48%);
  filter: blur(55px);
  animation: cosmic-nebula-drift 16s ease-in-out infinite alternate;
}

/* Starfield — three depths drifting at very different speeds/sizes so the
   parallax (near stars fast + big, far stars slow + tiny) actually reads.
   Each layer shifts by exactly one background tile, so every loop is
   seamless — same trick as the header CTA gradient: no jump on restart. */
.page-intro::after,
.page-header::after,
.solution-media::after {
  content: "";
  position: absolute;
  inset: -15%;
  z-index: 0;
  pointer-events: none;
  background-image:
    /* far: tiny, dim, slow */
    radial-gradient(1px 1px at 8% 15%, rgba(255, 255, 255, .55), transparent 100%),
    radial-gradient(1px 1px at 32% 55%, rgba(255, 255, 255, .5), transparent 100%),
    radial-gradient(1px 1px at 58% 22%, rgba(255, 255, 255, .6), transparent 100%),
    radial-gradient(1px 1px at 78% 68%, rgba(255, 255, 255, .45), transparent 100%),
    radial-gradient(1px 1px at 92% 40%, rgba(255, 255, 255, .55), transparent 100%),
    /* mid: medium, brighter, faster */
    radial-gradient(1.8px 1.8px at 15% 70%, rgba(255, 255, 255, .8), transparent 100%),
    radial-gradient(1.8px 1.8px at 45% 30%, #fff, transparent 100%),
    radial-gradient(1.8px 1.8px at 70% 85%, rgba(255, 255, 255, .75), transparent 100%),
    radial-gradient(1.8px 1.8px at 90% 10%, rgba(255, 255, 255, .85), transparent 100%),
    /* near: big, brightest, fastest */
    radial-gradient(2.8px 2.8px at 25% 40%, #fff, transparent 100%),
    radial-gradient(3px 3px at 65% 60%, rgba(255, 255, 255, .9), transparent 100%),
    radial-gradient(2.6px 2.6px at 88% 80%, #fff, transparent 100%);
  background-size:
    220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px,
    340px 340px, 340px 340px, 340px 340px, 340px 340px,
    520px 520px, 520px 520px, 520px 520px;
  background-repeat: repeat;
  animation:
    cosmic-stars-drift 34s linear infinite,
    cosmic-stars-twinkle 3.5s ease-in-out infinite alternate;
}

@keyframes cosmic-nebula-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-6%, 4%, 0) scale(1.15); }
}

@keyframes cosmic-stars-drift {
  0% {
    background-position:
      0 0, 0 0, 0 0, 0 0, 0 0,
      0 0, 0 0, 0 0, 0 0,
      0 0, 0 0, 0 0;
  }
  100% {
    background-position:
      -220px -220px, -220px -220px, -220px -220px, -220px -220px, -220px -220px,
      -340px -340px, -340px -340px, -340px -340px, -340px -340px,
      -520px -520px, -520px -520px, -520px -520px;
  }
}

@keyframes cosmic-stars-twinkle {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* Shooting stars — comet streaks that fly across on staggered timers,
   the clearest, most legible motion cue in the whole scene. */
.cosmic-shooting-stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.shooting-star {
  position: absolute;
  top: 0;
  left: -10%;
  width: 160px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95), transparent);
  border-radius: 999px;
  opacity: 0;
  animation: cosmic-shoot 32s ease-in infinite;
}

.shooting-star-1 { top: 14%; animation-delay: 0s; }
.shooting-star-2 { top: 42%; animation-delay: 11.2s; }
.shooting-star-3 { top: 68%; animation-delay: 22.4s; }

@keyframes cosmic-shoot {
  0% { transform: translate(0, 0) rotate(-22deg); opacity: 0; }
  4% { opacity: 1; }
  24% { transform: translate(130vw, 60vh) rotate(-22deg); opacity: 0; }
  100% { transform: translate(130vw, 60vh) rotate(-22deg); opacity: 0; }
}

/* Galaxies — large soft elliptical glows with a bright core, evoking distant
   spiral galaxies seen at an angle. Rotation is extremely slow (minutes per
   turn) — just enough to feel alive without being a distracting spin. */
.cosmic-galaxy {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
}

.cosmic-galaxy-1 {
  top: 4%;
  right: -10%;
  width: 560px;
  height: 240px;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(255, 255, 255, .9) 0%,
    rgba(200, 190, 255, .5) 6%,
    rgba(140, 120, 255, .26) 20%,
    rgba(140, 120, 255, .1) 42%,
    transparent 70%);
  animation: cosmic-galaxy-spin-1 220s linear infinite, cosmic-galaxy-pulse 11s ease-in-out infinite alternate;
}

.cosmic-galaxy-2 {
  bottom: 0%;
  left: -12%;
  width: 400px;
  height: 170px;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(255, 255, 255, .85) 0%,
    rgba(255, 200, 170, .45) 7%,
    rgba(240, 132, 102, .24) 22%,
    rgba(240, 132, 102, .08) 45%,
    transparent 72%);
  animation: cosmic-galaxy-spin-2 280s linear infinite, cosmic-galaxy-pulse 14s ease-in-out infinite alternate-reverse;
}

@keyframes cosmic-galaxy-spin-1 {
  from { transform: rotate(-22deg); }
  to { transform: rotate(338deg); }
}

@keyframes cosmic-galaxy-spin-2 {
  from { transform: rotate(16deg); }
  to { transform: rotate(-344deg); }
}

@keyframes cosmic-galaxy-pulse {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

/* Milky Way — a hazy diagonal band of light dusted with faint stars,
   sitting still behind everything else; it only breathes, it doesn't drift. */
.cosmic-milkyway {
  position: absolute;
  top: 40%;
  left: -35%;
  width: 170%;
  height: 320px;
  pointer-events: none;
  transform: rotate(-18deg);
  animation: cosmic-milkyway-glow 12s ease-in-out infinite alternate;
}

/* Haze: several overlapping soft blobs of uneven size, heavily blurred so
   there's no straight edge left anywhere — a cloud, not a rectangle. */
.cosmic-milkyway::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Sizes are % of this element's own (huge) box, not px — so neighbouring
     blobs always overlap by design regardless of viewport width. Fixed-px
     blobs on a 170%-wide element were too small to ever touch each other,
     which read as isolated dots instead of a band. */
  background-image:
    radial-gradient(32% 70% at 8% 55%, rgba(210, 215, 255, .35), transparent 70%),
    radial-gradient(34% 85% at 26% 40%, rgba(220, 225, 255, .42), transparent 70%),
    radial-gradient(36% 95% at 45% 60%, rgba(230, 235, 255, .5), transparent 70%),
    radial-gradient(36% 90% at 65% 45%, rgba(235, 238, 255, .5), transparent 70%),
    radial-gradient(34% 80% at 82% 58%, rgba(220, 225, 255, .4), transparent 70%),
    radial-gradient(30% 65% at 96% 42%, rgba(210, 215, 255, .28), transparent 70%);
  filter: blur(45px);
}

/* Dust: a dense scatter of small, sharp stars sitting inside the haze band. */
.cosmic-milkyway::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 30%, rgba(255, 255, 255, .8), transparent 100%),
    radial-gradient(1px 1px at 24% 62%, rgba(255, 255, 255, .6), transparent 100%),
    radial-gradient(1px 1px at 37% 22%, rgba(255, 255, 255, .7), transparent 100%),
    radial-gradient(1px 1px at 50% 68%, rgba(255, 255, 255, .55), transparent 100%),
    radial-gradient(1px 1px at 63% 34%, rgba(255, 255, 255, .8), transparent 100%),
    radial-gradient(1px 1px at 76% 58%, rgba(255, 255, 255, .6), transparent 100%),
    radial-gradient(1px 1px at 88% 26%, rgba(255, 255, 255, .7), transparent 100%);
  background-size: 70px 70px;
  background-repeat: repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
}

@keyframes cosmic-milkyway-glow {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
  .page-intro::before,
  .page-intro::after,
  .page-header::before,
  .page-header::after,
  .solution-media::before,
  .solution-media::after,
  .shooting-star,
  .cosmic-galaxy-1,
  .cosmic-galaxy-2,
  .cosmic-milkyway {
    animation: none;
  }

  .ufo,
  .ufo-beam,
  .alien,
  .alien-pupil-wrap,
  .alien-pupil,
  .alien-arm,
  .alien-arm-r {
    animation: none;
  }

  .ufo { opacity: 1; transform: translateX(0); }
  .ufo-beam { opacity: 1; transform: scaleY(1); }
  .alien { opacity: 1; transform: translateY(0) scale(1); }
  .alien-arm { transform: rotate(192deg); }
  .alien-arm-r { transform: rotate(-192deg); }
  .alien-pupil { height: 4px; }
}

/* Industry cards float as frosted glass over the cosmic background */
.page-intro .industry-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
}

.page-intro .industry-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--color-accent);
}

.page-intro .industry-card h3 {
  color: #fff;
}

.page-intro .industry-card .index {
  color: rgba(255, 255, 255, 0.18);
}

.hero-cta {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Left-aligned variant — used wherever the CTA row sits inside a
   left-aligned text column (contact/solution content) rather than a
   centered hero. */
.hero-cta--left {
  justify-content: flex-start;
  margin-top: 24px;
}

/* ===== Reusable lead-paragraph width/spacing utilities =====
   Every page's body copy reuses the same handful of (max-width, margin)
   combinations for its p.lead paragraphs — named by role instead of
   repeating the values as inline styles on every page. */
.section-lede-wide {
  max-width: 1260px;
  margin: -16px auto 40px;
  text-align: justify;
}

.service-lead {
  max-width: 1260px;
  margin: 20px 0 24px;
  text-align: justify;
}

/* ===== Section header row (heading left, link right) ===== */
.section-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.section-header-row .section-heading {
  margin: 0;
  text-align: left;
  max-width: 560px;
}

/* ===== Stats ===== */
/* On lar.tech this block isn't its own card — the white stat tiles sit
   directly on the page background inside a plain container. Strip the
   section-as-card background/radius, but keep the same outer margin as
   every other section so it lines up in the page rhythm. */
.stats-section {
  background: none;
  border-radius: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* Fixed 2-column layout, same container width as every other section. */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 640px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

@media (min-width: 1440px) {
  .stats-grid { gap: 24px; }
}

.stat {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  min-height: 120px;
}

@media (min-width: 1440px) {
  .stat { padding: 32px; }
}

.stat h3 {
  color: var(--color-accent);
}

.stat p {
  color: var(--color-text);
  margin: 0;
}

.stat-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-accent);
}

.stat-label {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* ===== UFO easter egg (6th stat tile) =====
   A tiny looping scene: saucer flies in, beam turns on, an alien rises
   out of it, looks up, then left, then forward, and gives a thumbs up —
   before the whole thing reverses and flies off for the next loop. */
.stat-ufo {
  background: transparent;
  align-items: center;
  justify-content: center;
  min-height: 180px;
}

.ufo-scene {
  position: relative;
  width: 100%;
  height: 150px;
}

.ufo {
  position: absolute;
  top: 14px;
  left: 50%;
  width: 76px;
  height: 16px;
  margin-left: -38px;
  animation: ufo-fly 12s ease-in-out infinite;
}

.ufo-dome {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 18px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: linear-gradient(180deg, #e4f9ff 0%, #7fd8f0 100%);
  box-shadow: 0 0 10px rgba(127, 216, 240, 0.7);
}

.ufo-body {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #c3ccd6 0%, #6b7684 100%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

.ufo-beam {
  position: absolute;
  top: 40px;
  left: 50%;
  width: 56px;
  height: 66px;
  margin-left: -28px;
  background: linear-gradient(180deg, rgba(255, 244, 180, 0.55), rgba(255, 244, 180, 0));
  clip-path: polygon(38% 0%, 62% 0%, 100% 100%, 0% 100%);
  transform-origin: top center;
  opacity: 0;
  animation: ufo-beam 12s ease-in-out infinite;
}

.alien {
  position: absolute;
  top: 76px;
  left: 50%;
  width: 26px;
  height: 60px;
  margin-left: -13px;
  opacity: 0;
  animation: alien-rise 12s ease-in-out infinite;
}

/* Cute "capsule" alien — rounded pill-shaped body banded green/yellow/gold,
   one big round eye with a closed happy-arc eyelid, two ball-tipped
   antennae and stubby legs — modelled after the friendly blob-alien
   clipart look rather than the classic grey-alien silhouette. */
.alien-capsule {
  position: relative;
  width: 26px;
  height: 50px;
  margin: 0 auto;
  border-radius: 13px 13px 8px 8px / 15px 15px 8px 8px;
  background: linear-gradient(
    180deg,
    #4caf50 0%, #4caf50 64%,
    #f0d84a 64%, #f0d84a 72%,
    #e3a828 72%, #e3a828 100%
  );
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  z-index: 1;
}

.alien-antenna {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 11px;
  background: #4caf50;
  border-radius: 2px;
  transform-origin: bottom center;
}

.alien-antenna-l { left: 4px; transform: rotate(-25deg); }
.alien-antenna-r { right: 4px; transform: rotate(25deg); }

.alien-antenna span {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: #4caf50;
}

/* The white of the eye stays put; only the pupil moves to look around.
   The pupil is a full circle while it's in motion (up / left) and settles
   into a happy half-circle arc only once the alien is looking straight
   ahead — done by animating the clipping box's height, not the ::before
   circle itself, so the same shape always clips from its top edge. */
.alien-eye {
  position: absolute;
  top: 5px;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: #fff;
}

.alien-pupil-wrap {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  animation: alien-look 12s ease-in-out infinite;
}

.alien-pupil {
  position: relative;
  width: 8px;
  height: 8px;
  overflow: hidden;
  animation: alien-pupil-shape 12s ease-in-out infinite;
}

.alien-pupil::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1a2b1a;
}

.alien-mouth {
  position: absolute;
  top: 24px;
  left: 50%;
  width: 7px;
  height: 4px;
  margin-left: -3.5px;
  background: #1f7a3d;
  border-radius: 0 0 6px 6px;
}

.alien-leg {
  position: absolute;
  bottom: -4px;
  width: 6px;
  height: 6px;
  background: #e3a828;
  border-radius: 0 0 4px 4px;
}

.alien-leg-l { left: 3px; transform: rotate(-8deg); }
.alien-leg-r { right: 3px; transform: rotate(8deg); }

.alien-arm {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: -1px;
  width: 4px;
  height: 16px;
  background: #4caf50;
  border-radius: 3px;
  transform-origin: top center;
  transform: rotate(35deg);
  animation: alien-arm 12s ease-in-out infinite;
}

.alien-thumb {
  position: absolute;
  bottom: -6px;
  left: -1.5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4caf50;
}

.alien-arm-r {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: -1px;
  width: 4px;
  height: 16px;
  background: #4caf50;
  border-radius: 3px;
  transform-origin: top center;
  transform: rotate(-35deg);
  animation: alien-arm-r 12s ease-in-out infinite;
}

.alien-thumb-r {
  position: absolute;
  bottom: -6px;
  right: -1.5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4caf50;
}

@keyframes ufo-fly {
  0%   { transform: translateX(-160px); opacity: 0; }
  8%   { transform: translateX(0); opacity: 1; }
  85%  { transform: translateX(0); opacity: 1; }
  95%  { transform: translateX(160px); opacity: 0; }
  100% { transform: translateX(-160px); opacity: 0; }
}

@keyframes ufo-beam {
  0%, 9%    { opacity: 0; transform: scaleY(0); }
  14%, 80%  { opacity: 1; transform: scaleY(1); }
  88%, 100% { opacity: 0; transform: scaleY(0); }
}

@keyframes alien-rise {
  0%, 11%   { opacity: 0; transform: translateY(26px) scale(0.7); }
  16%, 82%  { opacity: 1; transform: translateY(0) scale(1); }
  88%, 100% { opacity: 0; transform: translateY(26px) scale(0.7); }
}

@keyframes alien-look {
  0%, 18%   { transform: translate(0, 0); }
  26%, 34%  { transform: translate(0, -2px); }
  42%       { transform: translate(0, 0); }
  50%, 58%  { transform: translate(-2px, 0); }
  66%, 100% { transform: translate(0, 0); }
}

/* Round while moving (up/left), half-circle "happy" arc once settled
   looking straight ahead — clips the fixed circle in .alien-pupil::before
   from the top down, so it always reads as the top half, never a sliver. */
@keyframes alien-pupil-shape {
  0%, 18%   { height: 4px; }
  23%       { height: 8px; }
  58%       { height: 8px; }
  63%, 100% { height: 4px; }
}

/* Left arm sweeps up clockwise (increasing degrees); the right arm mirrors
   it with a counter-clockwise sweep so both raise symmetrically inward. */
@keyframes alien-arm {
  0%, 68%   { transform: rotate(35deg); }
  76%, 84%  { transform: rotate(192deg); }
  92%, 100% { transform: rotate(35deg); }
}

@keyframes alien-arm-r {
  0%, 68%   { transform: rotate(-35deg); }
  76%, 84%  { transform: rotate(-192deg); }
  92%, 100% { transform: rotate(-35deg); }
}

/* ===== Solution rows (alternating text / media) ===== */
.solution-rows {
  display: flex;
  flex-direction: column;
}

.solution-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 56px 0;
  border-bottom: 1px solid var(--color-border);
  scroll-margin-top: 96px;
}

.solution-rows > .solution-row:last-child {
  border-bottom: none;
}

.solution-row.is-reverse .solution-media {
  order: 2;
}

.solution-row.is-reverse .solution-content {
  order: 1;
}

.solution-media {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border-radius: var(--radius-lg);
  min-height: 280px;
  background: radial-gradient(ellipse 120% 100% at 25% 10%, #0b0e22 0%, #04050d 45%, #010102 100%);
  border: 1px solid var(--color-border);
}

.solution-media img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  height: auto;
}

/* Screenshot wrapped in a browser-window chrome, floating on the cosmic
   background — the traffic-light dots are pure decoration (no real tabs). */
.browser-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
  background: #fff;
}

.browser-frame-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: #e7e4e1;
}

.browser-frame-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.browser-frame-bar span:nth-child(1) { background: #ff5f57; }
.browser-frame-bar span:nth-child(2) { background: #febc2e; }
.browser-frame-bar span:nth-child(3) { background: #28c840; }

.browser-frame img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

/* Real industry photo filling the whole .solution-media block edge to edge
   (unlike .browser-frame, which floats as a smaller card on the cosmic
   background) — used on solutions.html. */
.solution-media:has(.photo-frame) {
  padding: 0;
}

.photo-frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.photo-frame img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
}

/* App icon shown floating on the cosmic .solution-media background —
   the mobile-apps page equivalent of .browser-frame / .photo-frame. */
.app-icon-showcase {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.app-icon-tile {
  width: 148px;
  height: 148px;
  border-radius: 34px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
}

.app-icon-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app-icon-showcase-label {
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
}

.app-icon-showcase-label span {
  display: block;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 400;
  font-size: 0.82rem;
  margin-top: 4px;
}

@media (min-width: 736px) {
  .app-icon-tile {
    width: 180px;
    height: 180px;
    border-radius: 40px;
  }
}

/* ===== Store badges (App Store / Google Play / RuStore / AppGallery) =====
   All four use the matched badge set from gosuslugi.ru's landing kit —
   Apple/Google/Huawei ship natively at an identical 135x40, and the RuStore
   badge (190x56) lands on the same ~135px width once scaled to the same
   height, so a single fixed slot fits all four with no visible letterboxing. */
.store-badges {
  margin: 24px 0;
}

.store-badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.store-badge-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.store-badges .store-badge-slot {
  width: 135px;
  height: 40px;
}

.footer-stores .store-badge-slot {
  width: 95px;
  height: 28px;
}

.store-badge-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.store-badges.is-soon .store-badge-img {
  filter: grayscale(1);
  opacity: 0.55;
  transition: filter var(--transition-fast), opacity var(--transition-fast);
}

.store-badges.is-soon a:hover .store-badge-img {
  filter: none;
  opacity: 1;
}

.store-badges-note {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin: 0 0 12px;
}

.footer-stores a.is-soon {
  filter: grayscale(1);
  opacity: 0.6;
}

.footer-stores a.is-soon:hover {
  filter: none;
  opacity: 1;
}

.solution-content .tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  margin-bottom: 16px;
}

.solution-content h3 {
  font-size: 1.6rem;
  margin-bottom: 14px;
}

.solution-content p {
  color: var(--color-text-muted);
  max-width: 52ch;
}

/* ===== Grids & cards ===== */
.grid {
  display: grid;
  gap: 28px;
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 32px;
  transition: transform var(--transition-med), border-color var(--transition-med), box-shadow var(--transition-med);
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-card);
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 20px;
}

.card h3 {
  margin-bottom: 10px;
}

.card p {
  color: var(--color-text-muted);
}

.card-link {
  display: inline-block;
  margin-top: 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-accent);
}

/* Section variants */
.section-alt {
  background: var(--color-bg-alt);
}

/* ===== Product card (with price/tag) ===== */
.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-card .tag {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  margin-bottom: 16px;
}

.feature-list {
  margin: 20px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feature-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.92rem;
  color: var(--color-text-muted);
}

.feature-list li::before {
  content: "✓";
  color: var(--color-success);
  font-weight: 700;
}

.product-card .card-footer {
  margin-top: auto;
  padding-top: 20px;
}

/* ===== Industry / solutions tiles ===== */
.industry-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: linear-gradient(160deg, var(--color-surface-alt), var(--color-surface));
  border: 1px solid var(--color-border);
  padding: 32px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: border-color var(--transition-med), transform var(--transition-med);
}

.industry-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-4px);
}

.industry-card .index {
  position: absolute;
  top: 24px;
  right: 28px;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--color-border);
}

/* Brand tiles (bvts.ru): industry-card reused with a real logo image instead
   of the numbered index badge — DAF/MAN/FAW/SITRAK/KAMAZ/MERCEDES-BENZ. */
.brand-card {
  justify-content: flex-start;
  gap: 20px;
}

.brand-card__logo {
  width: 72px;
  height: 72px;
  padding: 8px;
  object-fit: contain;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

/* ===== News / articles ===== */
.news-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  transition: transform var(--transition-med), border-color var(--transition-med);
}

.news-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-accent);
}

.news-thumb {
  position: relative;
  height: 170px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-surface-alt), var(--color-bg-alt));
}

/* Source photos are pulled at their native (large) resolution and scaled
   down to the thumb's display box via object-fit — always downscaling,
   never upscaling, so they stay sharp on retina/high-DPI screens. */
.news-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.news-meta {
  display: flex;
  gap: 12px;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}

.news-meta .category {
  color: var(--color-accent);
  font-weight: 600;
}

.news-body h3 {
  margin-bottom: 10px;
  font-size: 1.1rem;
}

.news-body p {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  flex: 1;
}

.news-body .card-link {
  margin-top: 16px;
}

.news-featured {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 40px;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  margin-bottom: 56px;
}

.news-featured .news-thumb {
  height: 100%;
  min-height: 260px;
  border-radius: var(--radius-md);
}

/* ===== Page header (for inner pages) =====
   Same cosmic system as the homepage page-intro, but darker/deeper: less
   nebula glow, a near-black base, so it reads as a quieter banner rather
   than a full hero. Stars and shooting stars are shared (see below). */
.page-header {
  position: relative;
  overflow: hidden;
  padding: 64px 0 48px;
  text-align: center;
  background: radial-gradient(ellipse 120% 100% at 25% 10%, #0b0e22 0%, #04050d 45%, #010102 100%);
  color: #fff;
}

.page-header .container {
  position: relative;
  z-index: 1;
}

.page-header .eyebrow {
  color: var(--color-accent);
}

.page-header h1 {
  color: #fff;
}

.page-header p.lead {
  max-width: 1260px;
  margin: 16px auto 0;
  color: rgba(255, 255, 255, 0.72);
}

/* Photo banner (inner pages: brand/service pages) — same treatment as the
   homepage's .page-intro.is-photo, just at the shorter .page-header height.
   Each page sets its own background-image inline on the section itself
   (not via a CSS custom property here — a var() substituted into a url()
   inside this external stylesheet resolves relative to css/style.css, not
   the HTML page, so a per-page inline --custom-prop silently 404s; the
   photo has to be a real inline background-image instead). The dark
   gradient for text contrast lives on ::before, layered above the photo. */
.page-header.is-photo {
  padding: 88px 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.page-header.is-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(8, 14, 28, .58) 0%, rgba(4, 6, 12, .8) 100%);
  animation: none;
  filter: none;
}

.page-header.is-photo::after {
  content: none;
}

/* One background-image per page — named by page rather than set inline,
   so every page-specific value still lives in this stylesheet. Paths are
   relative to this file (css/), hence the ../. */
.header-photo--daf { background-image: url('../images/hero-daf.jpg'); }
.header-photo--man { background-image: url('../images/hero-man.jpg'); }
.header-photo--faw,
.header-photo--mercedes-benz { background-image: url('../images/hero-faw-mercedes.png'); }
.header-photo--sitrak { background-image: url('../images/hero-sitrak.jpg'); }
.header-photo--kamaz { background-image: url('../images/hero-kamaz.png'); }
.header-photo--tonar { background-image: url('../images/hero-tonar.webp'); }
.header-photo--to { background-image: url('../images/header-to.jpeg'); }
.header-photo--remont { background-image: url('../images/header-remont.jpeg'); }
.header-photo--garantiya { background-image: url('../images/header-garantiya.jpeg'); }
.header-photo--about-parts { background-image: url('../images/header-about-parts.png'); }
.header-photo--contacts { background-image: url('../images/hero-servis-odintsovo.png'); }

.page-header::before,
.solution-media::before {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 28%, rgba(240, 132, 102, 0.24), transparent 40%),
    radial-gradient(circle at 82% 12%, rgba(108, 99, 255, 0.18), transparent 44%),
    radial-gradient(circle at 55% 88%, rgba(47, 158, 110, 0.12), transparent 48%);
  filter: blur(55px);
  animation: cosmic-nebula-drift 16s ease-in-out infinite alternate;
}

.breadcrumbs {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 8px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 16px;
}

.breadcrumbs a:hover {
  color: var(--color-accent);
}

/* ===== Contacts page: fact list + map ===== */
.contact-facts {
  max-width: 720px;
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.contact-facts p {
  margin: 0;
}

.map-embed {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.map-embed iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}

.map-illustration {
  margin-top: 24px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.map-illustration img {
  width: 100%;
  display: block;
}

/* ===== Contact page ===== */
.contact-card:not(.distributor-card) {
  padding: 8px 0;
}

.contact-card h4 {
  margin-bottom: 16px;
}

/* Matches lar.tech's own contact-line type scale (their .text-2 class):
   16px base, regular weight, growing at the same 736/1440 breakpoints as
   the rest of our type scale. */
.contact-card p {
  color: var(--color-text);
  font-size: 16px;
  font-weight: 400;
  line-height: 120%;
  margin-top: 8px;
}

.contact-card p:first-of-type {
  margin-top: 0;
}

.contact-card p.text-muted {
  color: var(--color-text-muted);
}

.contact-card p,
.contact-card p a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.contact-line-icon {
  font-size: 1em;
  line-height: 1;
}

@media (min-width: 736px) {
  .contact-card p {
    font-size: 18px;
  }
}

@media (min-width: 1440px) {
  .contact-card p {
    font-size: 20px;
  }
}

.contact-card a:hover {
  color: var(--color-accent);
}

.distributor-card {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  align-items: center;
  gap: 40px;
}

/* Source file is 600×136 (~2x), displayed at half height so it stays sharp
   on retina — same approach as the Skolkovo footer logo. */
.distributor-logo {
  height: 40px;
  width: auto;
}

.distributor-name h4 {
  margin-bottom: 0;
}

@media (max-width: 1024px) {
  .distributor-card {
    grid-template-columns: auto 1fr;
  }

  .distributor-details {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .distributor-card {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .distributor-details {
    grid-column: auto;
  }
}

/* ===== CTA banner ===== */
.cta-banner {
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-accent-soft), var(--color-bg-alt));
  border: 1px solid var(--color-border);
  padding: 64px;
  text-align: center;
}

.cta-banner h2 {
  margin-bottom: 16px;
}

.cta-banner p {
  color: var(--color-text-muted);
  max-width: 520px;
  margin: 0 auto 32px;
}

.cta-banner .hero-cta {
  margin: 0;
}

/* ===== Video embed ===== */
.video-embed {
  max-width: 900px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.video-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ===== Footer ===== */
.site-footer {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  padding: 72px 0 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr repeat(6, 1fr);
  gap: 32px;
  padding-bottom: 48px;
}

.footer-stores {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.footer-stores a {
  transition: transform var(--transition-fast);
}

.footer-stores a:hover {
  transform: translateY(-2px);
}

.footer-about p {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  margin-top: 16px;
  max-width: 280px;
}

.footer-col h4 {
  font-size: 0.9rem;
  margin-bottom: 20px;
  color: var(--color-text);
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col a {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.footer-col a:hover {
  color: var(--color-accent);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  border-top: 1px solid var(--color-border);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  flex-wrap: wrap;
  gap: 12px;
}

.footer-bottom-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Source file is a native 320×73 asset (~2x), displayed at half size so it
   renders crisp on retina/high-DPI screens instead of just being upscaled. */
.footer-partner-logo {
  height: 32px;
  width: auto;
}

.footer-bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-bottom-links a:hover {
  color: var(--color-accent);
}

/* ===== Cookie bar ===== */
.cookie-bar {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 20px 28px;
  background: var(--color-text);
  color: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.cookie-bar p {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.75);
  max-width: 640px;
}

.cookie-bar-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.cookie-bar .btn-outline {
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.cookie-bar .btn-outline:hover {
  border-color: #fff;
  color: #fff;
}

.cookie-bar.is-hidden {
  display: none;
}

/* ===== Responsive ===== */
/* The footer sitemap has 7 groups (brand + 6 pages) — too many for one row
   below desktop-wide screens, so it wraps to 4 columns a bit earlier than
   the rest of the grid system. */
@media (max-width: 1440px) {
  .footer-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Tablet & below: nav collapses to the mobile menu, grids drop to 2 columns
   — mirrors lar.tech's own "lg" (1024px) cutover point. */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .news-featured { grid-template-columns: 1fr; }
  .solution-row { grid-template-columns: 1fr; gap: 32px; }
  .solution-row.is-reverse .solution-media,
  .solution-row.is-reverse .solution-content { order: initial; }
  .solution-media { min-height: 200px; order: -1; }
}

/* Nav items stop fitting the header between 1024–1280px, so the mobile
   menu button kicks in a tier earlier than the content grid breakpoints. */
@media (max-width: 1280px) {
  .main-nav {
    position: fixed;
    top: 76px;
    left: 0;
    right: 0;
    /* Negative z-index paints this behind .site-header's own background
       (its nearest positioned/z-indexed ancestor) as a belt-and-suspenders
       measure, but the real fix is geometric: the panel is anchored at
       the header's own bottom edge (top: 76px) and grows downward via
       max-height, so it can never occupy the header's own 0–76px band
       in the first place — no transform ever carries it up over the header. */
    z-index: -1;
    background: var(--color-bg);
    border-top: none;
    border-bottom: 1px solid var(--color-border);
    flex-direction: column;
    align-items: stretch;
    padding: 0 16px;
    gap: 4px;
    max-height: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    opacity: 0;
    transition: max-height var(--transition-med), opacity var(--transition-med), padding var(--transition-med);
  }

  /* Capped to the viewport (minus the 76px header) rather than a flat px
     figure — the "Марки" submenu alone adds 7 rows, "О компании" 2 more,
     so a fixed height clipped the list on shorter phones. Scrolls inside
     the drawer itself if it's still taller than the screen. */
  .main-nav.is-open {
    max-height: calc(100vh - 76px);
    overflow-y: auto;
    opacity: 1;
    padding: 16px;
  }

  .main-nav a {
    padding: 14px 16px;
  }

  .nav-toggle {
    display: flex;
  }

  /* The header's own phone + button pair is redundant once the drawer
     carries its own copy below the links — and it's what was overflowing
     the header on narrow screens in the first place. The phone number
     stays in the header itself even on mobile, since it's the one action
     that's useful without opening the menu. */
  .header-actions .btn {
    display: none;
  }

  /* Centered in the header row (between the logo and the hamburger) rather
     than pinned next to the toggle — reads as the header's own focal point
     on a narrow screen instead of looking stuck to one side. */
  .site-header__top {
    position: relative;
  }

  .header-actions .header-phone {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .main-nav__contact {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
  }

  /* .main-nav a (color/padding/letter-spacing, for the plain nav links)
     otherwise wins over .btn on these two — it's a class+type selector,
     outranking .btn's single class. Restore the real button look. */
  .main-nav__contact .btn {
    padding: 13px 28px;
    color: #fff;
    font-size: 0.95rem;
    letter-spacing: normal;
    line-height: normal;
  }
}

/* Phone: the same compact tier lar.tech uses below its "sm" (640px) breakpoint. */
@media (max-width: 640px) {
  section {
    padding: 64px 0;
    /* Base `section` sets width: calc(100% - 32px) with auto margins to
       self-center; fixing margin-left/right to 8px here without matching
       the width left the box over-constrained, so the browser silently
       blew out margin-right to 24px (rule 10.3.3) — pushing everything
       visibly off-center. Match width to the fixed margins to fix it. */
    width: calc(100% - 16px);
    margin-left: 8px;
    margin-right: 8px;
    margin-bottom: 16px;
    border-radius: var(--radius-md);
  }

  /* h2 is a flat 64px at every breakpoint (matches lar.tech's own .h2), which
     works for short section titles but overflows/wraps badly for long
     headlines like the featured news title on a narrow phone screen. */
  h2 {
    font-size: 30px;
    line-height: 105%;
  }

  .header-actions {
    gap: 12px;
  }

  .btn-gradient {
    height: 40px;
    padding: 0 16px;
    font-size: 13px;
    border-radius: 12px;
  }

  .nav-toggle {
    height: 40px;
    width: 40px;
    padding: 0;
    gap: 0;
    justify-content: center;
  }

  .nav-toggle-label {
    display: none;
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .cta-banner {
    padding: 40px 24px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  /* align-items: flex-start above makes children shrink-to-fit instead of
     stretching — without an explicit width, .footer-bottom-links sizes
     itself to fit all 3 links on one row (growing past the viewport)
     rather than wrapping. Constrain it to the real available width so
     flex-wrap actually has room to kick in. */
  .footer-bottom-links {
    width: 100%;
  }

  /* The dev-credit link is the 3rd item in a wrapping flex row — force it
     onto its own line on mobile instead of squeezing in as a "3rd column"
     next to the privacy/terms links. */
  .footer-bottom-links a:last-child {
    flex-basis: 100%;
  }

  .section-header-row {
    align-items: flex-start;
  }

  .cookie-bar {
    left: 12px;
    right: 12px;
    bottom: 12px;
    flex-direction: column;
    align-items: stretch;
    padding: 20px;
  }
}