/* ============================================================
   HERO SECTION — Premium Industrial Hero
   Light section. Subtle blueprint grid + atmospheric gradients.
   Left: typography + CTA + trust metrics. Right: visual zone.
   ============================================================ */

.hero {
  background: #FFFFFF;
  padding: var(--sp-14) 0 var(--sp-16);
  position: relative;
  overflow: hidden;
}

/* Blueprint grid — matches quiz section pattern */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent, transparent 40px,
      rgba(31, 41, 51, 0.028) 40px,
      rgba(31, 41, 51, 0.028) 41px
    ),
    repeating-linear-gradient(
      90deg,
      transparent, transparent 40px,
      rgba(31, 41, 51, 0.028) 40px,
      rgba(31, 41, 51, 0.028) 41px
    );
  pointer-events: none;
  z-index: 0;
}

/* Subtle depth — text side brighter, image side slightly heavier */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 22% 55%, rgba(255, 255, 255, 0.52) 0%, transparent 50%),
    radial-gradient(ellipse at 82% 48%, rgba(15, 23, 42, 0.028) 0%, transparent 45%);
  pointer-events: none;
  z-index: 0;
}

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

.hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
}


/* ── Content (left / text) ── */

.hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}


/* ── Label ── */

.hero__label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--c-amber);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.hero__label::before {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background: var(--c-amber);
  border-radius: 2px;
  flex-shrink: 0;
}


/* ── Headline ── */

.hero__headline {
  font-size: clamp(2.25rem, 5.2vw, 3.75rem);
  font-weight: 800;
  color: #080D14;
  line-height: 1.03;
  letter-spacing: -0.032em;
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: balance;
}

/* "любой сложности" — amber gradient emphasis */
.hero__headline em {
  font-style: normal;
  background: linear-gradient(
    125deg,
    #D97706 0%,
    #F59E0B 55%,
    #D97706 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ── Subheadline ── */

.hero__subheadline {
  font-size: var(--text-md);
  font-weight: 500;
  color: rgba(70, 80, 92, 0.92);
  line-height: 1.72;
  max-width: 520px;
}


/* ── CTA Buttons ── */

.hero__cta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-top: var(--sp-3);
}


/* ── Trust metrics ── */

.hero__trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5) var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-border-light);
}

.hero__trust-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-left: var(--sp-4);
}

/* Amber left accent bar per metric */
.hero__trust-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 2.5px;
  background: linear-gradient(
    to bottom,
    rgba(217, 119, 6, 0.85),
    rgba(217, 119, 6, 0.32)
  );
  border-radius: 2px;
}

.hero__trust-value {
  font-size: clamp(1.625rem, 3vw, 2.125rem);
  font-weight: 800;
  color: #080D14;
  line-height: 1;
  letter-spacing: -0.036em;
}

.hero__trust-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: rgba(70, 80, 92, 0.78);
  line-height: 1.4;
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.hero__trust-item:hover .hero__trust-value {
  color: var(--c-amber);
  transition: color 0.2s ease;
}


/* ── Visual zone (right) ── */

.hero__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #16222e;
  order: -1;
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow:
    0 32px 72px rgba(15, 23, 42, 0.20),
    0 10px 28px rgba(15, 23, 42, 0.10),
    0 2px 6px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

/* Top-left industrial corner bracket */
.hero__visual::before {
  content: '';
  position: absolute;
  top: 18px;
  left: 18px;
  width: 26px;
  height: 26px;
  border-top: 1.5px solid rgba(217, 119, 6, 0.50);
  border-left: 1.5px solid rgba(217, 119, 6, 0.50);
  z-index: 5;
  pointer-events: none;
}

/* Bottom-right industrial corner bracket */
.hero__visual::after {
  content: '';
  position: absolute;
  bottom: 18px;
  right: 18px;
  width: 26px;
  height: 26px;
  border-bottom: 1.5px solid rgba(217, 119, 6, 0.36);
  border-right: 1.5px solid rgba(217, 119, 6, 0.36);
  z-index: 5;
  pointer-events: none;
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


/* ── Photo overlay — cinematic depth, vignette, atmosphere ── */

.hero__visual-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background:
    /* Cinematic bottom vignette — heavier, more depth */
    linear-gradient(
      180deg,
      rgba(8, 12, 22, 0.10) 0%,
      rgba(8, 12, 22, 0.00) 30%,
      rgba(8, 12, 22, 0.55) 100%
    ),
    /* Left-edge darkening — cinematic frame */
    linear-gradient(
      90deg,
      rgba(8, 12, 22, 0.28) 0%,
      transparent 30%
    ),
    /* Right-edge vignette */
    linear-gradient(
      270deg,
      rgba(8, 12, 22, 0.16) 0%,
      transparent 24%
    ),
    /* Amber warm glow — welding sparks atmosphere */
    radial-gradient(
      ellipse at 62% 72%,
      rgba(217, 119, 6, 0.10) 0%,
      rgba(217, 119, 6, 0.03) 38%,
      transparent 58%
    ),
    /* Cool blue top-left — industrial plant lighting */
    radial-gradient(
      ellipse at 8% 10%,
      rgba(80, 120, 190, 0.16) 0%,
      transparent 50%
    );
}

/* Blueprint grid accent — very faint, gives technical flavor */
.hero__visual-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent, transparent 49px,
      rgba(255, 255, 255, 0.022) 49px,
      rgba(255, 255, 255, 0.022) 50px
    ),
    repeating-linear-gradient(
      90deg,
      transparent, transparent 49px,
      rgba(255, 255, 255, 0.022) 49px,
      rgba(255, 255, 255, 0.022) 50px
    );
}

/* Amber scan-line accent at bottom — industrial data readout feel */
.hero__visual-overlay::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(217, 119, 6, 0.55) 20%,
    rgba(245, 158, 11, 0.80) 50%,
    rgba(217, 119, 6, 0.55) 80%,
    transparent 100%
  );
}


/* ── Image placeholder — premium industrial visual zone ── */

.hero__image-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Rich layered dark — steel blue depth */
  background:
    linear-gradient(
      160deg,
      #1e3044 0%,
      #16222e 45%,
      #1a2d3e 100%
    );
}

/* Blueprint grid — more presence on dark */
.hero__image-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent, transparent 39px,
      rgba(100, 160, 220, 0.055) 39px,
      rgba(100, 160, 220, 0.055) 40px
    ),
    repeating-linear-gradient(
      90deg,
      transparent, transparent 39px,
      rgba(100, 160, 220, 0.055) 39px,
      rgba(100, 160, 220, 0.055) 40px
    );
  pointer-events: none;
}

/* Amber focal glow + cool ambient from bottom-left */
.hero__image-placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse at 68% 42%,
      rgba(217, 119, 6, 0.10) 0%,
      rgba(217, 119, 6, 0.04) 35%,
      transparent 62%
    ),
    radial-gradient(
      ellipse at 15% 85%,
      rgba(100, 160, 220, 0.06) 0%,
      transparent 50%
    ),
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.0) 60%,
      rgba(0, 0, 0, 0.32) 100%
    );
  pointer-events: none;
}

/* The SVG + text inside placeholder sit above pseudo-elements */
.hero__image-placeholder > * {
  position: relative;
  z-index: 1;
}

/* Engineering SVG illustration container */
.hero__placeholder-svg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8) var(--sp-10);
  z-index: 1;
}

.hero__placeholder-svg svg {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.55;
}

/* Subtle "RENDER ZONE" label */
.hero__image-placeholder-text {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 9px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.18);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}


/* ── Entry Animations ── */

@keyframes hero-fade-up {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__label {
  animation: hero-fade-up 0.55s ease both;
  animation-delay: 0.10s;
}

.hero__headline {
  animation: hero-fade-up 0.60s ease both;
  animation-delay: 0.22s;
}

.hero__subheadline {
  animation: hero-fade-up 0.60s ease both;
  animation-delay: 0.36s;
}

.hero__cta {
  animation: hero-fade-up 0.60s ease both;
  animation-delay: 0.50s;
}

.hero__trust {
  animation: hero-fade-up 0.60s ease both;
  animation-delay: 0.64s;
}

.hero__visual {
  animation: hero-fade-up 0.75s ease both;
  animation-delay: 0.20s;
}

@media (prefers-reduced-motion: reduce) {
  .hero__label,
  .hero__headline,
  .hero__subheadline,
  .hero__cta,
  .hero__trust,
  .hero__visual {
    animation: none;
  }
}


/* ── Industrial corner brackets — engineering frame accent ── */

.hero__corner {
  position: absolute;
  width: 22px;
  height: 22px;
  z-index: 5;
  pointer-events: none;
}

.hero__corner--tl {
  top: 14px;
  left: 14px;
  border-top: 2px solid var(--c-amber);
  border-left: 2px solid var(--c-amber);
}

.hero__corner--tr {
  top: 14px;
  right: 14px;
  border-top: 2px solid var(--c-amber);
  border-right: 2px solid var(--c-amber);
}

.hero__corner--bl {
  bottom: 14px;
  left: 14px;
  border-bottom: 2px solid var(--c-amber);
  border-left: 2px solid var(--c-amber);
}

.hero__corner--br {
  bottom: 14px;
  right: 14px;
  border-bottom: 2px solid var(--c-amber);
  border-right: 2px solid var(--c-amber);
}


/* ── Mobile-only line break helper ── */

.hero__mobile-break {
  display: none;
}


/* ── Mobile only (max 767px) — premium industrial mobile experience ── */

@media (max-width: 767px) {

  /* Tighter fold — 10px under header (-6px), image enters hero immediately */
  .hero {
    padding: 10px 0 var(--sp-8);
  }

  /*
    Blueprint grid — subconscious engineering texture only.
    0.028 base → 0.006 mobile (–79% total).
  */
  .hero::before {
    background-image:
      repeating-linear-gradient(
        0deg,
        transparent, transparent 40px,
        rgba(31, 41, 51, 0.006) 40px,
        rgba(31, 41, 51, 0.006) 41px
      ),
      repeating-linear-gradient(
        90deg,
        transparent, transparent 40px,
        rgba(31, 41, 51, 0.006) 40px,
        rgba(31, 41, 51, 0.006) 41px
      );
  }

  /*
    Depth layering — ultra-soft warm glow behind render area,
    ambient light balance. Not cinematic overkill.
  */
  .hero::after {
    background:
      radial-gradient(ellipse at 50% 16%, rgba(217, 119, 6, 0.04) 0%, transparent 52%),
      radial-gradient(ellipse at 22% 70%, rgba(255, 255, 255, 0.48) 0%, transparent 50%),
      radial-gradient(ellipse at 82% 52%, rgba(15, 23, 42, 0.024) 0%, transparent 45%);
  }

  .hero__inner {
    /* 16px — tighter composition, image+content feel coupled */
    gap: var(--sp-4);
  }

  .hero__content {
    gap: var(--sp-3);
  }

  /* Label — pull closer to headline (−6px effective gap) */
  .hero__label {
    margin-bottom: -6px;
  }

  /* Both breaks active — clean 3-line rhythm:
     Сварочно-монтажные
     работы
     любой сложности       */
  .hero__mobile-break {
    display: block;
  }

  /*
    Headline — 2-line mobile composition:
    Сварочно-монтажные
    работы любой сложности
    Smaller clamp ensures line 2 fits on one line at 375px+.
    text-wrap: initial overrides base "balance" to respect the <br>.
  */
  .hero__headline {
    font-size: clamp(1.625rem, 7vw, 1.875rem);
    /* 0.94 — compact, massive, premium. Lines feel dense and engineered */
    line-height: 0.94;
    letter-spacing: -0.022em;
    max-width: none;
    text-wrap: initial;
  }

  /*
    Orange accent — premium matte amber, not loud saturated orange.
    Reduced saturation, brownish-gold tone.
    Must re-declare background-clip (background shorthand resets it).
  */
  .hero__headline em {
    background: linear-gradient(
      125deg,
      #A56007 0%,
      #C2750A 55%,
      #A56007 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
  }

  /* Description — editorial width, centered, breathes under headline */
  .hero__subheadline {
    font-size: var(--text-sm);
    max-width: 90%;
    line-height: 1.72;
    color: rgba(70, 80, 92, 0.84);
    text-align: center;
  }

  /* CTA — clear primary dominance */
  .hero__cta {
    padding-top: var(--sp-2);
    gap: 5px;
  }

  .hero__cta .btn {
    min-height: 50px;
    padding: 11px var(--sp-8);
    font-size: 13px;
    letter-spacing: 0.02em;
  }

  /* Primary — taller (60px), heavier weight — premium industrial CTA */
  .hero__cta .btn--primary {
    min-height: 60px;
    font-weight: 700;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.20) inset,
      0 -1px 0 rgba(0, 0, 0, 0.16) inset,
      0 4px 14px rgba(217, 119, 6, 0.26),
      0 1px 4px rgba(217, 119, 6, 0.14);
  }

  /* Secondary — subordinate ghost, softer border, clearly secondary */
  .hero__cta .btn--secondary {
    min-height: 46px;
    border-width: 1px;
    /* Reduced from 0.18 — lighter, doesn't compete with primary */
    border-color: rgba(31, 41, 51, 0.12);
    color: rgba(10, 15, 25, 0.44);
    font-weight: 500;
  }

  /*
    Visual zone — cinematic 3:2 ratio (aspect 1.5).
    ~11% shorter than original 4/3. Target: 1.45–1.6 ✓
    Premium 20px corners + softer depth shadow.
  */
  .hero__visual {
    aspect-ratio: 3 / 2;
    border-radius: 20px;
    box-shadow:
      0 20px 52px rgba(15, 23, 42, 0.17),
      0 6px 18px rgba(15, 23, 42, 0.10),
      0 2px 4px rgba(0, 0, 0, 0.07),
      0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  }

  /*
    Image top separation — ultra-soft white fade (7%) at the top edge.
    Visually lifts render away from the white header without killing mood.
  */
  .hero__visual-overlay {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, transparent 11%),
      linear-gradient(180deg, rgba(8, 12, 22, 0.10) 0%, rgba(8, 12, 22, 0.00) 30%, rgba(8, 12, 22, 0.55) 100%),
      linear-gradient(90deg, rgba(8, 12, 22, 0.28) 0%, transparent 30%),
      linear-gradient(270deg, rgba(8, 12, 22, 0.16) 0%, transparent 24%),
      radial-gradient(ellipse at 62% 72%, rgba(217, 119, 6, 0.10) 0%, rgba(217, 119, 6, 0.03) 38%, transparent 58%),
      radial-gradient(ellipse at 8% 10%, rgba(80, 120, 190, 0.16) 0%, transparent 50%);
  }

  /* Engineering SVG render — hidden on mobile, dark bg reads as premium */
  .hero__placeholder-svg {
    display: none;
  }

  /* Metrics — separate info block, compact but distinct */
  .hero__trust {
    /*
      16px: secondary btn → divider (breathing room, not void).
      Was 36px — reduced by 20px to kill dead space.
    */
    margin-top: 16px;
    gap: 10px var(--sp-3);
    /*
      22px inside stats — content breathes within the block.
      Total secondary→stats = 16 + 1px border + 22 = 39px (was 55px, −16px).
    */
    padding-top: 22px;
    /* Softer divider — visual rhythm, not a hard section break */
    border-top-color: rgba(15, 23, 42, 0.055);
  }

  .hero__trust-item {
    padding-left: var(--sp-3);
    gap: 3px;
  }

  /* Amber bar — very soft, supporting */
  .hero__trust-item::before {
    opacity: 0.45;
  }

  /* Numbers — strong, tight, industrial */
  .hero__trust-value {
    font-size: 1.25rem;
    letter-spacing: -0.032em;
  }

  /* Labels — low contrast, recede behind numbers */
  .hero__trust-label {
    font-size: 9px;
    letter-spacing: 0.015em;
    color: rgba(70, 80, 92, 0.55);
  }

  /* Industrial corner brackets — scaled to mobile visual */
  .hero__corner {
    width: 16px;
    height: 16px;
  }

  .hero__corner--tl,
  .hero__corner--tr {
    top: 10px;
  }

  .hero__corner--bl,
  .hero__corner--br {
    bottom: 10px;
  }

  .hero__corner--tl,
  .hero__corner--bl {
    left: 10px;
  }

  .hero__corner--tr,
  .hero__corner--br {
    right: 10px;
  }
}


/* ── Tablet (768px+) ── */

@media (min-width: 768px) {
  .hero {
    padding: var(--section-py-md) 0;
  }

  .hero__cta {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .hero__trust {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4);
  }

  .hero__visual {
    aspect-ratio: 16 / 9;
    order: 0;
  }
}


/* ── Desktop (1024px+) ── */

@media (min-width: 1024px) {
  .hero {
    padding: var(--section-py-lg) 0;
  }

  .hero__inner {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-12);
  }

  .hero__content {
    flex: 0 0 52%;
    max-width: 52%;
    gap: var(--sp-6);
  }

  .hero__subheadline {
    font-size: var(--text-lg);
  }

  .hero__visual {
    flex: 1;
    aspect-ratio: auto;
    height: 480px;
    order: 0;
    /* Slight rightward editorial offset — visual tension */
    margin-right: -12px;
  }
}


/* ── Large Desktop (1280px+) ── */

@media (min-width: 1280px) {
  .hero__visual {
    height: 560px;
    margin-right: -16px;
  }
}