/* PR #5 final branding and mobile hero polish only. */
@media (min-width: 821px) {
  .brand-logo-image {
    width: clamp(188px, 14vw, 224px) !important;
    max-height: 48px !important;
    filter: drop-shadow(0 0 18px rgba(255,255,255,.08)) !important;
  }

  .footer-brand .brand-logo-image {
    width: 224px !important;
    max-height: 50px !important;
  }
}

@media (max-width: 820px) {
  .hero {
    align-items: stretch !important;
    background: transparent !important;
  }

  .hero .eyebrow,
  .hero h1,
  .hero-lede,
  .hero-actions,
  .hero-note {
    align-self: flex-start !important;
    text-align: left !important;
  }

  .hero .eyebrow {
    gap: 8px !important;
    letter-spacing: .13em !important;
    margin-bottom: -2px !important;
  }

  .hero .eyebrow > span {
    width: 6px !important;
    height: 6px !important;
    flex-basis: 6px !important;
    opacity: .72 !important;
    box-shadow: 0 0 12px rgba(255,255,255,.18) !important;
  }

  .hero h1 {
    max-width: min(100%, 11.2ch) !important;
    line-height: 1.01 !important;
  }

  .brand-logo-image {
    width: clamp(154px, 42vw, 190px) !important;
    max-height: 42px !important;
    filter: drop-shadow(0 0 16px rgba(255,255,255,.09)) !important;
  }

  .footer-brand .brand-logo-image {
    width: 188px !important;
    max-height: 44px !important;
  }

  .hero-system {
    position: relative !important;
    overflow: visible !important;
  }

  .globe-stage.system-panel {
    background: linear-gradient(145deg, rgba(12,12,12,.9), rgba(4,4,4,.96)) !important;
    border-color: rgba(255,255,255,.105) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 18px 58px rgba(0,0,0,.38) !important;
    overflow: hidden !important;
  }

  .globe-stage.system-panel::before {
    opacity: .32 !important;
    background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.08), transparent 48%) !important;
  }

  .globe-sphere {
    opacity: .86 !important;
  }

  .globe-caption,
  .globe-kicker {
    color: rgba(177,179,172,.78) !important;
  }

  .hero-system .result-card {
    position: absolute !important;
    right: 18px !important;
    bottom: 18px !important;
    margin: 0 !important;
    background: rgba(7,7,7,.9) !important;
    border-color: rgba(255,255,255,.12) !important;
    box-shadow: 0 16px 44px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.06) !important;
  }

  body,
  .premium-homepage,
  main,
  .hero,
  .hero-system {
    background-color: #050505 !important;
  }

  .whatsapp-float {
    display: none !important;
  }
}

@media (max-width: 430px) {
  .brand-logo-image { width: 150px !important; }
  .footer-brand .brand-logo-image { width: 180px !important; }
  .hero { gap: 20px !important; }
  .hero h1 { line-height: 1.02 !important; }

  .hero-system .result-card {
    right: 15px !important;
    bottom: 15px !important;
    width: min(166px, calc(100% - 34px)) !important;
  }
}

@media (max-width: 390px) {
  .brand-logo-image { width: 146px !important; }
  .footer-brand .brand-logo-image { width: 176px !important; }

  .hero-system .result-card {
    right: 14px !important;
    bottom: 14px !important;
    width: min(158px, calc(100% - 30px)) !important;
  }
}