/* Bootstrap dark theme + hero only */
:root,
[data-bs-theme='dark'] {
  --bs-body-bg: #080b10;
  --bs-body-color: #e8edf4;
  --bs-secondary-color: #8b96a8;
  --bs-primary: #3dd6c6;
  --bs-font-sans-serif: 'IBM Plex Sans', system-ui, sans-serif;
  --bs-font-monospace: 'IBM Plex Mono', ui-monospace, monospace;
}

body {
  margin: 0;
  font-family: var(--bs-font-sans-serif);
  color: var(--bs-body-color);
  background: var(--bs-body-bg);
  -webkit-font-smoothing: antialiased;
}

.font-mono { font-family: var(--bs-font-monospace) !important; }

.hero {
  isolation: isolate;
  background: var(--bs-body-bg);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 50% 45% at 14% 18%, transparent 0%, var(--bs-body-bg) 68%),
    linear-gradient(to bottom, transparent 45%, var(--bs-body-bg) 100%);
  pointer-events: none;
}

.hero__content {
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 2rem;
  max-width: 56rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
  animation: hero-fade-up 0.9s ease-out both;
}

.hero__text {
  min-width: 0;
}

.hero__eyebrow {
  letter-spacing: 0.12em;
}

@media (max-width: 767.98px) {
  .hero__content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .hero__text {
    text-align: center !important;
  }
}

@media (max-width: 575.98px) {
  .hero__content {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(1.25rem); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__content { animation: none; }
}

.hero__tagline {
  font-family: var(--bs-font-sans-serif);
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--bs-body-color);
  letter-spacing: -0.01em;
}

.hero__callsign-inline {
  font-family: var(--bs-font-monospace);
  color: var(--bs-primary);
  font-weight: 600;
  letter-spacing: 0.08em;
}

.hero__intro {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--bs-body-color);
}

.hero__bio {
  font-size: 1rem;
  line-height: 1.7;
  max-width: 40rem;
}

.profile-frame {
  width: 180px;
  height: 180px;
  overflow: hidden;
  border: 1px solid #2a3344;
  border-radius: var(--bs-border-radius, 0.375rem);
  background: #0a0e14;
}

.profile-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  image-orientation: from-image;
}