/* Stablelink deployment overrides */
.brand-text,
.logo.brand-text {
  width: auto;
  min-width: 230px;
  height: auto;
  overflow: visible;
  color: #f7fbff;
  font-weight: 800;
  font-size: 29px;
  letter-spacing: 0;
  text-shadow: 0 0 20px rgba(0, 201, 255, .38);
  gap: 12px;
}
.brand-text::before,
.logo.brand-text::before {
  content: "";
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 13px;
  background: url(assets/favicon.png?v=20260713-final-4) center / contain no-repeat;
  box-shadow: 0 0 20px rgba(0,201,255,.32);
  margin-right: 0;
}
.hero-title-text {
  display: block;
  color: #fff;
  font-size: clamp(48px, 6vw, 82px);
  line-height: .94;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: 0 8px 20px rgba(0,0,0,.58), 0 0 24px rgba(0,201,255,.22);
  margin-bottom: 18px;
}
.hero-title span.hero-title-text { background: none; -webkit-background-clip: initial; color: #fff; }
.hero-art {
  background-image:
    linear-gradient(90deg, rgba(2, 7, 17, 0.98) 0%, rgba(2, 7, 17, 0.82) 30%, rgba(2, 7, 17, 0.22) 66%, rgba(2, 7, 17, 0.28) 100%),
    url("assets/hero-stablelink-tunnel-desktop-20260713.png?v=20260713-final-4");
  background-position: center, center center;
  background-size: cover, cover;
}
@media (max-width: 860px) {
  .brand-text { min-width: 0; font-size: 23px; gap: 10px; }
  .brand-text::before { width: 38px; height: 38px; flex-basis: 38px; border-radius: 11px; }
  .hero-art {
    background-image:
      linear-gradient(90deg, rgba(2, 7, 17, 0.98), rgba(2, 7, 17, 0.7) 52%, rgba(2, 7, 17, 0.24)),
      url("assets/hero-stablelink-tunnel-mobile-20260713.png?v=20260713-final-4");
    background-position: center, center top;
    background-size: cover, cover;
  }
  .hero-title-text { font-size: clamp(41px, 13vw, 58px); }
}

/* Stablelink neutral section visuals */
.pricing-panel {
  background: #020711;
}

.pricing-art-bg {
  background-image: url("assets/section-pricing-key-desktop-20260713.png?v=20260713-final-4");
  background-position: center center;
  background-size: cover;
  opacity: .96;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .5) 12%, #000 26%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .5) 12%, #000 26%, #000 100%);
}

.telegram-panel {
  background: #020711;
}

.telegram-panel::after {
  background:
    linear-gradient(90deg, rgba(2, 7, 17, 1) 0%, rgba(2, 7, 17, .95) 35%, rgba(2, 7, 17, .54) 51%, rgba(2, 7, 17, .08) 68%, transparent 100%);
}

.telegram-visual {
  inset: 0 0 0 42%;
  background-image: url("assets/section-telegram-phone-desktop-20260713.png?v=20260713-final-4");
  background-position: center right;
  background-size: cover;
  opacity: .96;
}

.support-panel::before {
  background-image:
    linear-gradient(90deg, rgba(1, 7, 19, 0) 0%, rgba(1, 7, 19, 0) 44%, rgba(1, 7, 19, .68) 67%, rgba(1, 7, 19, .98) 86%, rgba(1, 7, 19, .98) 100%),
    url("assets/section-support-headset-desktop-20260713.png?v=20260713-final-4");
  background-position: left top, center center;
  background-size: 100% 100%, cover;
  opacity: .84;
  filter: saturate(1.08) contrast(1.05) brightness(.9);
}

@media (max-width: 860px) {
  .pricing-panel {
    grid-template-columns: 1fr;
  }

  .pricing-art-bg {
    min-height: 300px;
    background-image: url("assets/section-pricing-key-mobile-20260713.png?v=20260713-final-4");
    background-position: center top;
    background-size: cover;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 74%, rgba(0, 0, 0, .74) 86%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 74%, rgba(0, 0, 0, .74) 86%, transparent 100%);
  }

  .telegram-panel {
    background: #020711;
  }

  .telegram-panel::after {
    background:
      linear-gradient(180deg, rgba(2, 7, 17, .08) 0%, rgba(2, 7, 17, .18) 39%, rgba(2, 7, 17, .82) 70%, rgba(2, 7, 17, 1) 100%);
  }

  .telegram-visual {
    inset: 0 0 auto;
    height: 330px;
    background-image: url("assets/section-telegram-phone-mobile-20260713.png?v=20260713-final-4");
    background-position: center top;
    background-size: cover;
    opacity: .9;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
  }

  .telegram-copy {
    padding-top: 310px;
  }

  .support-panel::before {
    height: 306px;
    background-image: url("assets/section-support-headset-mobile-20260713.png?v=20260713-final-4");
    background-position: center 42%;
    background-size: cover;
    opacity: .88;
    filter: saturate(1.08) contrast(1.05) brightness(.9);
  }
}


/* 2026-07-13 mobile shared stats and pricing background */
@media (max-width: 860px) {
  .quick-stats {
    background: transparent !important;
    padding: 0 0 18px !important;
  }

  .quick-stats-inner {
    padding: 14px !important;
    border-radius: 20px !important;
    background: linear-gradient(180deg, rgba(5, 17, 38, 0.86), rgba(2, 8, 20, 0.94)) !important;
    border: 1px solid rgba(0, 201, 255, 0.14) !important;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28) !important;
  }

  .quick-stat {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .pricing-panel {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    padding: 0 20px 22px !important;
    background: #020711 !important;
  }

  .pricing-art-bg {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: calc(100% + 40px) !important;
    height: clamp(250px, 72vw, 340px) !important;
    min-height: 0 !important;
    margin: 0 -20px -30px !important;
    background-image: url("assets/section-pricing-key-mobile-20260713.png?v=20260713-final-4") !important;
    background-position: center top !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    opacity: .98 !important;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 66%, rgba(0, 0, 0, .7) 82%, transparent 100%) !important;
    mask-image: linear-gradient(180deg, #000 0%, #000 66%, rgba(0, 0, 0, .7) 82%, transparent 100%) !important;
  }

  .pricing-copy {
    position: relative !important;
    z-index: 1 !important;
    padding-top: 0 !important;
  }
}