/* =====================================================
   TUNETERRA SIGNATURE DESIGN V4
   Phase 1: Navigation, atmosphere, hero and typography
   ===================================================== */

:root {
  --v4-midnight: #050c1d;
  --v4-navy: #0b1730;
  --v4-blue: #39b9ff;
  --v4-cyan: #72e7ff;
  --v4-white: #f5f9ff;
  --v4-muted: #aabbd4;
  --v4-border: rgba(130,190,255,.18);
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(ellipse at 80% 5%,
      rgba(22,101,205,.20), transparent 42%),
    radial-gradient(ellipse at 8% 45%,
      rgba(0,185,255,.07), transparent 38%),
    var(--v4-midnight);
  color: var(--v4-white);
}

/* Premium navigation */

.tt-nav {
  background: rgba(5,12,29,.88);
  border-bottom: 1px solid var(--v4-border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.tt-nav a {
  transition: color .25s ease, opacity .25s ease;
}

.tt-nav a:hover {
  color: var(--v4-cyan);
}

/* Premium hero */

header.tt-header > .tt-hero.tt-hero-orbital {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 74% 48%,
      rgba(28,120,255,.24), transparent 36%),
    linear-gradient(125deg,
      #071127 0%,
      #0a1d3b 48%,
      #061024 100%);
  border-bottom: 1px solid var(--v4-border);
}

.tt-hero-orbital .tt-hero-content {
  position: relative;
  z-index: 3;
}

.tt-hero-orbital h1 {
  color: var(--v4-white);
  letter-spacing: -.045em;
  text-wrap: balance;
}

.tt-hero-orbital h1 span {
  background: linear-gradient(
    105deg,
    #f4fbff 5%,
    #81dfff 48%,
    #3b9cff 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tt-hero-orbital .tt-hero-subtitle {
  color: #c1d1e8;
  line-height: 1.75;
  max-width: 570px;
}

.tt-hero-orbital .tt-globe-scene {
  filter: drop-shadow(0 0 45px rgba(34,145,255,.22));
}

/* Discovery section */

.v3-discovery {
  position: relative;
  background:
    linear-gradient(
      180deg,
      rgba(8,20,43,.96),
      rgba(5,12,29,.98)
    );
}

.v3-discovery h2,
.tt-main h2 {
  color: var(--v4-white);
  letter-spacing: -.025em;
}

/* Directory atmosphere */

.tt-main {
  background:
    radial-gradient(circle at 50% 0%,
      rgba(25,105,210,.09), transparent 55%),
    var(--v4-midnight);
}

/* Footer */

.tt-footer {
  background: #040916;
  border-top: 1px solid var(--v4-border);
}

/* Accessibility */

:focus-visible {
  outline: 2px solid var(--v4-cyan);
  outline-offset: 3px;
}

/* Mobile refinements */

@media (max-width: 900px) {
  header.tt-header > .tt-hero.tt-hero-orbital {
    background:
      radial-gradient(circle at 50% 72%,
        rgba(28,120,255,.20), transparent 48%),
      linear-gradient(180deg, #071127, #091a35);
  }

  .tt-hero-orbital .tt-hero-subtitle {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}