/* Login hero refinement. Visual-only: authentication and session behaviour are unchanged. */
.brand-panel {
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(5, 8, 12, .12) 0%, rgba(5, 8, 12, .28) 44%, rgba(5, 8, 12, .84) 100%),
    linear-gradient(90deg, rgba(5, 8, 12, .68) 0%, rgba(5, 8, 12, .24) 58%, rgba(5, 8, 12, .05) 100%),
    url('/static/assets/golden-mile-hub-hero.webp') 65% center / cover no-repeat;
}

.brand-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 88% 24%, rgba(232, 180, 64, .12), transparent 30rem),
    linear-gradient(180deg, rgba(4, 7, 11, .06), rgba(4, 7, 11, .22) 55%, rgba(4, 7, 11, .66));
  pointer-events: none;
}

.brand-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  width: auto;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  transform: none;
  box-shadow: none;
  background: linear-gradient(90deg, rgba(5, 8, 12, .76) 0%, rgba(5, 8, 12, .48) 38%, rgba(5, 8, 12, .14) 72%, rgba(5, 8, 12, .02) 100%);
  pointer-events: none;
}

.brand-panel__content {
  text-shadow: 0 2px 18px rgba(0, 0, 0, .30);
}

.brand-panel__topline {
  position: relative;
  z-index: 2;
}

/* Turn the rectangular source logo into an intentional, softly integrated glass plaque. */
.brand-logo-surface {
  width: min(268px, 56%);
  overflow: hidden;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .90), rgba(246, 242, 231, .78));
  box-shadow: 0 18px 50px rgba(0, 0, 0, .20), inset 0 1px rgba(255, 255, 255, .45);
  backdrop-filter: blur(10px) saturate(.88);
}

.brand-logo {
  opacity: .94;
  filter: saturate(.92) contrast(.98);
  mix-blend-mode: multiply;
}

.brand-message {
  max-width: 600px;
}

.brand-message .brand-kicker {
  color: rgba(255, 255, 255, .78);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .38);
}

.brand-panel h1 {
  text-shadow: 0 3px 24px rgba(0, 0, 0, .48);
}

.brand-support {
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .42);
}

.brand-pillars {
  border-top-color: rgba(255, 255, 255, .22);
  padding-top: 22px;
}

.brand-pillar span:last-child,
.brand-signoff {
  color: rgba(255, 255, 255, .86);
}

.environment-badge--hero {
  background: rgba(7, 10, 14, .60);
  border-color: rgba(225, 178, 68, .50);
}

@media (max-width: 1200px) {
  .brand-panel {
    background-position: 68% center;
  }

  .brand-logo-surface {
    width: min(230px, 58%);
  }

  .brand-panel h1 {
    font-size: clamp(2.35rem, 4vw, 4.2rem);
  }

  .brand-pillars {
    gap: 10px;
  }
}

@media (max-width: 900px) {
  .brand-panel {
    display: none;
  }
}