/* ============================================================
   FOOTER — Premium Industrial Corporate Footer
   Graphite-steel depth. Quieter than CTA. Supporting layer.
   ============================================================ */

.footer {
  /*
    Vertical graphite gradient — top slightly lighter, base deeper.
    No pure black, no navy. Industrial dark steel panel.
  */
  background-color: #0C1522;
  background-image:
    /* ① Top atmospheric dissolve — soft CTA→footer transition */
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.030) 0%,
      transparent 8%
    ),
    /* ② Main depth gradient — graphite steel, no black crush at base */
    linear-gradient(
      180deg,
      #0F1724 0%,
      #0D1623 55%,
      #0C1522 100%
    ),
    /* ③ Warm industrial amber tint — right side only */
    radial-gradient(
      circle at 85% 20%,
      rgba(217, 119, 6, 0.035),
      transparent 45%
    ),
    /* ④ Steel ambient — left bottom counter-balance */
    radial-gradient(
      circle at 15% 80%,
      rgba(148, 163, 184, 0.030),
      transparent 40%
    ),
    /* ⑤ Blueprint grid — asymmetric opacity: barely visible watermark */
    repeating-linear-gradient(
      0deg,
      transparent, transparent 39px,
      rgba(90, 145, 210, 0.013) 39px,
      rgba(90, 145, 210, 0.013) 40px
    ),
    repeating-linear-gradient(
      90deg,
      transparent, transparent 39px,
      rgba(90, 145, 210, 0.010) 39px,
      rgba(90, 145, 210, 0.010) 40px
    );
  position: relative;
}

/*
  Amber gradient separator between CTA and footer.
  Thin, centered peak, fades to transparent at edges.
*/
.footer::before {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(217, 119, 6, 0.18) 12%,
    rgba(217, 119, 6, 0.48) 50%,
    rgba(217, 119, 6, 0.18) 88%,
    transparent 100%
  );
}


/* ── Main section ── */

.footer__main {
  padding: var(--sp-16) 0 var(--sp-12);
}

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

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-10);
}


/* ────────────────────────────────
   Column 1: Brand — visual anchor
   ──────────────────────────────── */

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

.footer__logo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.footer__logo-mark {
  width: 44px;
  height: 44px;
  background: rgba(217, 119, 6, 0.13);
  border: 1px solid rgba(217, 119, 6, 0.30);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  /* Brighter amber — brand anchor */
  color: #F59E0B;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.footer__logo-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.footer__logo-name {
  font-size: var(--text-lg);
  font-weight: 800;
  /* Sharper — primary brand text */
  color: rgba(240, 246, 252, 0.94);
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.footer__logo-sub {
  font-size: var(--text-xs);
  color: rgba(226, 232, 240, 0.30);
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.footer__brand-desc {
  font-size: var(--text-sm);
  color: rgba(226, 232, 240, 0.62);
  line-height: 1.80;
  max-width: 300px;
}

/* Stats row */
.footer__stats {
  display: flex;
  gap: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255, 255, 255, 0.055);
}

.footer__stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.footer__stat-num {
  font-size: var(--text-base);
  font-weight: 700;
  /* Brighter amber metric — subtle warm glow, no neon */
  color: #F59E0B;
  line-height: 1;
  text-shadow: 0 0 12px rgba(217, 119, 6, 0.08);
}

.footer__stat-text {
  font-size: 10px;
  color: rgba(226, 232, 240, 0.26);
  line-height: 1.2;
  letter-spacing: 0.02em;
}


/* ────────────────────────────────
   Column headers
   ──────────────────────────────── */

.footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.footer__col-title {
  font-size: 11px;
  font-weight: 700;
  color: rgba(226, 232, 240, 0.44);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  line-height: 1.2;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  margin: 0;
}


/* ────────────────────────────────
   Navigation links
   ──────────────────────────────── */

.footer__nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.footer__nav-link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(226, 232, 240, 0.66);
  text-decoration: none;
  line-height: 1.3;
  display: inline-flex;
  align-items: center;
  transition: color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.footer__nav-link:hover {
  color: rgba(255, 255, 255, 0.92);
  transform: translateX(2px);
}

/* Services column — slightly quieter than nav */
.footer__services-link {
  font-size: var(--text-sm);
  font-weight: 400;
  color: rgba(226, 232, 240, 0.54);
  text-decoration: none;
  line-height: 1.3;
  display: inline-flex;
  transition: color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.footer__services-link:hover {
  color: rgba(255, 255, 255, 0.92);
  transform: translateX(2px);
}


/* ────────────────────────────────
   Contact items — slightly prominent
   ──────────────────────────────── */

.footer__contacts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.footer__contact-icon {
  /* Amber-hinted icon — subtle industrial glow */
  color: rgba(217, 119, 6, 0.55);
  flex-shrink: 0;
  margin-top: 2px;
  filter: drop-shadow(0 0 6px rgba(217, 119, 6, 0.10));
}

.footer__contact-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}

.footer__contact-text {
  font-size: var(--text-sm);
  color: rgba(226, 232, 240, 0.64);
  line-height: 1.5;
  text-decoration: none;
  transition: color 0.2s ease;
}

/* Phone number — focal contact point */
.footer__contacts .footer__contact-item:first-child .footer__contact-text {
  font-weight: 600;
  color: rgba(240, 246, 252, 0.84);
}

a.footer__contact-text:hover {
  color: var(--c-amber);
}


/* ────────────────────────────────
   Messenger buttons — frosted industrial
   ──────────────────────────────── */

.footer__messengers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding-top: var(--sp-2);
}

.footer__messenger-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px var(--sp-3);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.030),
    rgba(255, 255, 255, 0.015)
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(226, 232, 240, 0.50);
  text-decoration: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    background 0.28s ease,
    border-color 0.28s ease,
    color 0.28s ease,
    transform 0.28s ease;
}

.footer__messenger-btn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.footer__messenger-btn:hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(217, 119, 6, 0.20);
  color: rgba(226, 232, 240, 0.76);
  transform: translateY(-1px);
}


/* ────────────────────────────────
   Bottom bar — legal line
   ──────────────────────────────── */

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 -1px 0 rgba(217, 119, 6, 0.04);
  padding: var(--sp-5) 0;
}

.footer__bottom-inner {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: var(--sp-2);
  text-align: center;
}

.footer__copy {
  font-size: 12px;
  color: rgba(226, 232, 240, 0.34);
  line-height: 1.3;
}

.footer__policy {
  font-size: 12px;
  color: rgba(226, 232, 240, 0.34);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer__policy:hover {
  color: rgba(255, 255, 255, 0.72);
}

.footer__credit {
  font-size: 11px;
  color: rgba(226, 232, 240, 0.20);
  letter-spacing: 0.02em;
}


/* ════════════════════════════════════════
   MOBILE (max 767px): Atmospheric industrial ending
   Philosophy: cinematic, not a sitemap.
   Brand credibility → emotional hook → phone hero → action.
   No navigation. No columns. No UI chrome.
   ════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── Atmospheric top padding ── */
  .footer__main {
    padding: 52px 0 44px;
  }

  /* ── Grid: single column, rhythm by section padding ── */
  .footer__grid {
    gap: 0;
  }


  /* ─────────────────────────────────────
     BRAND — credibility anchor
     Logo · company name · tagline · desc · stats
     ───────────────────────────────────── */

  .footer__brand {
    gap: 14px;
    padding-bottom: 32px;
  }

  .footer__logo-mark {
    width: 40px;
    height: 40px;
    font-size: 11px;
  }

  .footer__logo-name {
    font-size: var(--text-base);
  }

  .footer__brand-desc {
    font-size: 13.5px;
    line-height: 1.68;
    color: rgba(226, 232, 240, 0.36);
    max-width: none;
  }

  .footer__stats {
    gap: 0;
    justify-content: space-between;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.045);
  }

  .footer__stat {
    gap: 5px;
  }

  .footer__stat-num {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
  }

  .footer__stat-text {
    font-size: 10px;
    color: rgba(226, 232, 240, 0.20);
    letter-spacing: 0.03em;
  }


  /* ─────────────────────────────────────
     HIDE NAVIGATION — mobile is not a sitemap
     ───────────────────────────────────── */

  .footer__col--nav,
  .footer__col--services {
    display: none;
  }


  /* ─────────────────────────────────────
     CTA BLOCK — emotional industrial ending
     "Обсудим ваш проект" + supporting promise.
     Centered. Thin amber separator above.
     Generous vertical breathing room.
     ───────────────────────────────────── */

  .footer__cta-block {
    padding: 40px 0 36px;
    text-align: center;
    border-top: 1px solid rgba(217, 119, 6, 0.10);
  }

  .footer__cta-heading {
    font-size: 22px;
    font-weight: 700;
    color: rgba(240, 246, 252, 0.84);
    line-height: 1.22;
    letter-spacing: -0.016em;
    margin: 0 0 10px;
  }

  .footer__cta-sub {
    font-size: 13.5px;
    font-weight: 400;
    color: rgba(226, 232, 240, 0.36);
    line-height: 1.68;
    max-width: 268px;
    margin: 0 auto;
  }


  /* ─────────────────────────────────────
     CONTACTS — cinematic focal area
     No header label. Full center composition.
     Phone hero → secondary group → messengers → CTA.
     ───────────────────────────────────── */

  .footer__col:last-child {
    gap: 0;
    padding-top: 0;
    border-top: none;
  }

  /* Suppress column title — no "Контакты" label */
  .footer__col:last-child .footer__col-title {
    display: none;
  }

  /* Contact list: margin-based rhythm */
  .footer__contacts {
    gap: 0;
  }

  /* Center all contact rows */
  .footer__contacts .footer__contact-item {
    justify-content: center;
  }

  /*
    PHONE — primary hero element.
    28px / 700 — dominant typographic anchor of the footer.
    Bright: rgba(240,246,252,0.94) — stands clear in the dark panel.
    Generous bottom margin separates it from the secondary group.
  */
  .footer__contacts .footer__contact-item:first-child {
    align-items: center;
    margin-bottom: 28px;
  }

  .footer__contacts .footer__contact-item:first-child .footer__contact-icon {
    color: rgba(217, 119, 6, 0.68);
    filter: none;
    margin-top: 0;
  }

  .footer__contacts .footer__contact-item:first-child .footer__contact-icon svg {
    width: 18px;
    height: 18px;
  }

  .footer__contacts .footer__contact-item:first-child .footer__contact-text {
    font-size: 28px;
    font-weight: 700;
    color: rgba(240, 246, 252, 0.94);
    letter-spacing: -0.024em;
    line-height: 1;
  }

  /*
    SECONDARY — email / address / hours.
    Deliberately quiet: they support the phone, not compete.
    Tight spacing: the group reads as a single compact unit.
  */
  .footer__contacts .footer__contact-item:not(:first-child) {
    align-items: center;
    margin-bottom: 10px;
  }

  .footer__contacts .footer__contact-item:last-child {
    margin-bottom: 0;
  }

  .footer__contacts .footer__contact-item:not(:first-child) .footer__contact-icon {
    color: rgba(217, 119, 6, 0.34);
    filter: none;
    margin-top: 0;
  }

  .footer__contacts .footer__contact-item:not(:first-child) .footer__contact-icon svg {
    width: 14px;
    height: 14px;
  }

  .footer__contacts .footer__contact-item:not(:first-child) .footer__contact-text {
    font-size: 13px;
    font-weight: 400;
    color: rgba(226, 232, 240, 0.36);
    line-height: 1.4;
  }


  /* ─────────────────────────────────────
     MESSENGER BUTTONS — atmospheric pills
     Equal width pair. Barely visible at rest.
     Gentle amber glow on hover.
     ───────────────────────────────────── */

  .footer__messengers {
    flex-wrap: nowrap;
    gap: 10px;
    padding-top: 28px;
    justify-content: center;
  }

  .footer__messenger-btn {
    flex: none;
    width: 138px;
    justify-content: center;
    padding: 11px 0;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.025em;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.022);
    border: 1px solid rgba(255, 255, 255, 0.072);
    color: rgba(226, 232, 240, 0.38);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition:
      background 0.28s ease,
      border-color 0.28s ease,
      color 0.28s ease;
  }

  .footer__messenger-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }

  .footer__messenger-btn:hover {
    transform: none;
    border-color: rgba(217, 119, 6, 0.26);
    color: rgba(226, 232, 240, 0.68);
    background: rgba(217, 119, 6, 0.04);
  }


  /* ─────────────────────────────────────
     CTA BUTTON — final conversion action
     Full width. Amber gradient. Decisive.
     ───────────────────────────────────── */

  .footer__cta-btn {
    display: block;
    margin-top: 24px;
    padding: 15px 24px;
    background: linear-gradient(
      135deg,
      rgba(217, 119, 6, 0.88) 0%,
      rgba(245, 158, 11, 0.78) 100%
    );
    border: 1px solid rgba(245, 158, 11, 0.28);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.97);
    text-align: center;
    text-decoration: none;
    letter-spacing: 0.02em;
    box-shadow:
      0 2px 14px rgba(217, 119, 6, 0.16),
      0 1px 4px rgba(15, 23, 42, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition:
      background 0.25s ease,
      box-shadow 0.25s ease;
  }

  .footer__cta-btn:hover {
    background: linear-gradient(
      135deg,
      rgba(217, 119, 6, 0.96) 0%,
      rgba(245, 158, 11, 0.88) 100%
    );
    box-shadow:
      0 4px 20px rgba(217, 119, 6, 0.24),
      0 1px 4px rgba(15, 23, 42, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }


  /* ─────────────────────────────────────
     BOTTOM BAR — ultra minimal
     Centered stacked. Copyright + policy.
     ───────────────────────────────────── */

  .footer__bottom {
    padding: 20px 0;
  }

  .footer__bottom-inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
  }

  .footer__copy,
  .footer__policy {
    font-size: 11.5px;
    color: rgba(226, 232, 240, 0.22);
  }

  .footer__credit {
    display: none;
  }
}


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

@media (min-width: 768px) {
  /* Hide mobile-only elements */
  .footer__cta-block {
    display: none;
  }

  .footer__cta-btn {
    display: none;
  }

  .footer__main {
    padding: var(--sp-20) 0 var(--sp-14);
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8) var(--sp-12);
  }

  .footer__brand {
    grid-column: span 2;
    padding-bottom: 0;
  }

  .footer__brand-desc {
    font-size: var(--text-sm);
    line-height: 1.80;
    color: rgba(226, 232, 240, 0.62);
    max-width: 480px;
  }

  .footer__stats {
    gap: var(--sp-6);
    justify-content: flex-start;
    border-top: 1px solid rgba(255, 255, 255, 0.055);
    padding-top: var(--sp-4);
  }

  .footer__stat-num {
    font-size: var(--text-base);
    letter-spacing: 0;
  }

  .footer__stat-text {
    font-size: 10px;
    color: rgba(226, 232, 240, 0.26);
  }

  /* Restore nav column */
  .footer__col--nav {
    gap: var(--sp-4);
    padding-top: 0;
    padding-bottom: 0;
    border-top: none;
  }

  .footer__col--nav .footer__col-title {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: rgba(226, 232, 240, 0.44);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 0;
  }

  /* Restore all nav items including the CTA link */
  .footer__col--nav .footer__nav li {
    border-bottom: none;
    display: list-item;
  }

  .footer__col--nav .footer__nav li:last-child {
    display: list-item;
    border-bottom: none;
  }

  .footer__col--nav .footer__nav {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--sp-3);
  }

  .footer__col--nav .footer__nav-link {
    font-size: var(--text-sm);
    color: rgba(226, 232, 240, 0.66);
  }

  .footer__col--nav .footer__nav-link:hover {
    transform: translateX(2px);
  }

  /* Restore services column */
  .footer__col--services {
    display: flex;
  }

  /* Restore contacts column */
  .footer__col:last-child {
    gap: var(--sp-4);
    padding-top: 0;
    border-top: none;
  }

  .footer__col:last-child .footer__col-title {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: rgba(226, 232, 240, 0.44);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 0;
  }

  /* Reset contact item overrides */
  .footer__contacts {
    gap: var(--sp-3);
  }

  .footer__contacts .footer__contact-item:first-child {
    align-items: flex-start;
    margin-bottom: 0;
  }

  .footer__contacts .footer__contact-item:first-child .footer__contact-icon {
    color: rgba(217, 119, 6, 0.55);
    filter: drop-shadow(0 0 6px rgba(217, 119, 6, 0.10));
    margin-top: 2px;
  }

  .footer__contacts .footer__contact-item:first-child .footer__contact-icon svg {
    width: 14px;
    height: 14px;
  }

  .footer__contacts .footer__contact-item:first-child .footer__contact-text {
    font-size: var(--text-sm);
    font-weight: 600;
    color: rgba(240, 246, 252, 0.84);
    letter-spacing: 0;
    line-height: 1.5;
  }

  .footer__contacts .footer__contact-item:not(:first-child) {
    align-items: flex-start;
    margin-bottom: 0;
  }

  .footer__contacts .footer__contact-item:not(:first-child) .footer__contact-icon {
    color: rgba(217, 119, 6, 0.55);
    filter: drop-shadow(0 0 6px rgba(217, 119, 6, 0.10));
    margin-top: 2px;
  }

  .footer__contacts .footer__contact-item:not(:first-child) .footer__contact-icon svg {
    width: 14px;
    height: 14px;
  }

  .footer__contacts .footer__contact-item:not(:first-child) .footer__contact-text {
    font-size: var(--text-sm);
    font-weight: 400;
    color: rgba(226, 232, 240, 0.64);
    line-height: 1.5;
  }

  /* Restore messenger buttons */
  .footer__messengers {
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding-top: var(--sp-2);
  }

  .footer__messenger-btn {
    flex: none;
    min-width: auto;
    justify-content: flex-start;
    padding: 6px var(--sp-3);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(255,255,255,0.030), rgba(255,255,255,0.015));
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(226, 232, 240, 0.50);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .footer__messenger-btn:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(217, 119, 6, 0.20);
    color: rgba(226, 232, 240, 0.76);
  }

  .footer__bottom {
    padding: var(--sp-5) 0;
  }

  .footer__bottom-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    gap: var(--sp-4);
  }

  .footer__copy,
  .footer__policy {
    font-size: 12px;
    color: rgba(226, 232, 240, 0.34);
  }

  .footer__credit {
    display: inline;
  }
}


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

@media (min-width: 1024px) {
  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1.4fr;
    gap: var(--sp-8);
  }

  .footer__brand {
    grid-column: auto;
  }

  .footer__brand-desc {
    max-width: 300px;
  }
}


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

@media (min-width: 1280px) {
  .footer__grid {
    gap: var(--sp-10);
  }
}