/* 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: none;
  gap: 12px;
}
.brand-text::before,
.logo.brand-text::before {
  content: "";
  width: 34px;
  height: 42px;
  flex: 0 0 34px;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 80'%3E%3Cpath fill='%2300c8ff' d='M32 3 56 12v20c0 19-10 34-24 45C18 66 8 51 8 32V12L32 3Z'/%3E%3Cpath fill='%23020b18' d='M32 12 48 18v15c0 13-6 24-16 33C22 57 16 46 16 33V18l16-6Z'/%3E%3Cpath fill='%23f7fbff' d='m28.5 44.2-8.1-8.1 4.4-4.4 3.7 3.7 10.9-12.3 4.7 4.1z'/%3E%3C/svg%3E") center / contain no-repeat;
  box-shadow: none;
  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: 30px; height: 37px; flex-basis: 30px; border-radius: 0; box-shadow: none; }
  .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: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(150px, 43vw, 196px) !important;
    grid-template-areas:
      "price art"
      "subtitle art"
      "text art"
      "note note"
      "actions actions" !important;
    align-items: start !important;
    gap: 0 clamp(12px, 3.8vw, 18px) !important;
    overflow: hidden !important;
    padding: clamp(20px, 5vw, 28px) clamp(16px, 5vw, 24px) !important;
    background: #020711 !important;
  }

  .pricing-art-bg {
    grid-area: art !important;
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: clamp(270px, 78vw, 350px) !important;
    margin: 0 !important;
    background-image: url("assets/section-pricing-key-mobile-20260713.png?v=20260713-final-4") !important;
    background-position: center center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    opacity: .98 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    filter: brightness(1.08) saturate(1.04) !important;
  }

  .pricing-copy {
    display: contents !important;
    padding-top: 0 !important;
  }

  .price,
  .pricing-copy h3,
  .pricing-copy .pricing-text,
  .pricing-copy .pricing-note,
  .pricing-actions {
    position: relative !important;
    z-index: 1 !important;
    min-width: 0 !important;
  }

  .price {
    grid-area: price !important;
  }

  .pricing-copy h3 {
    grid-area: subtitle !important;
  }

  .pricing-copy .pricing-text {
    grid-area: text !important;
  }

  .pricing-copy .pricing-note {
    grid-area: note !important;
    width: 100% !important;
    margin-top: clamp(12px, 3.5vw, 16px) !important;
  }

  .pricing-copy h3,
  .pricing-copy .pricing-text,
  .pricing-copy .pricing-note,
  .pricing-copy .price-sub {
    max-width: none !important;
  }

  .pricing-copy .pricing-text,
  .pricing-copy .pricing-note {
    font-size: clamp(12px, 3.25vw, 13.2px) !important;
    line-height: 1.3 !important;
  }

  .price {
    white-space: normal !important;
    font-size: clamp(15px, 3.8vw, 17px) !important;
    line-height: 1.08 !important;
  }

  .price span {
    display: inline !important;
    margin: 0 8px 0 0 !important;
    font-size: clamp(34px, 9.4vw, 42px) !important;
    line-height: .96 !important;
  }

  .price {
    width: max-content !important;
    max-width: calc(100vw - 64px) !important;
    white-space: nowrap !important;
  }

  .pricing-actions {
    grid-area: actions !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: clamp(18px, 5vw, 24px) !important;
  }

  .pricing-actions .btn {
    width: 100% !important;
    min-height: 44px !important;
    padding-inline: 11px !important;
    font-size: clamp(12px, 3.15vw, 13px) !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }
}