:root {
  --bg: var(--atlas-color-deep-abyss);
  --text: var(--atlas-color-cloud-white);
  --muted: var(--atlas-color-mist-gray);
  --accent: #9f8451;
  --nav-muted: #7f8aa1;
  --border: rgba(255, 255, 255, 0.12);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  min-height: 100%;
  margin: 0;
  padding: 0;
}

body {
  color: var(--text);
  font-family: var(--atlas-font-sans);
  background: radial-gradient(circle at 50% 44%, #111f3d 0%, #0b1430 38%, #081125 66%, #060e1f 100%);
  overflow-x: hidden;
}

a {
  color: var(--atlas-color-silver-steel);
  text-decoration: none;
}

a:hover {
  color: var(--text);
}

/* Header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  border-bottom: 1px solid transparent;
}

.site-header--scrolled {
  background: rgba(8, 14, 31, 0.48);
  backdrop-filter: blur(8px);
}

.site-header-inner {
  width: min(1320px, 96vw);
  min-height: 58px;
  margin: 0 auto;
  padding: 1.1rem 1rem 0.95rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--atlas-color-cloud-white);
  font-family: var(--atlas-font-sans);
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  opacity: 0.94;
}

.brand:hover {
  color: var(--atlas-color-cloud-white);
}

.brand-logo-mark {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background: url("/img/logo-clean.png") center / contain no-repeat;
  filter: brightness(1.7) contrast(1.02);
}

.brand-text {
  display: inline;
  transform: translateY(1px);
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 1.15rem;
}

.nav-link {
  color: var(--nav-muted);
  font-size: 0.57rem;
  letter-spacing: 0.2em;
  transition: color 0.25s ease;
  text-transform: none;
  opacity: 0.92;
}

.nav-link:hover {
  color: var(--atlas-color-cloud-white);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--atlas-radius-sm);
  padding: 0.55rem 1rem;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.16s ease;
}

.btn-primary {
  background: var(--atlas-color-antique-gold);
  color: #0c1427;
}

.btn-primary:hover {
  background: var(--atlas-color-amber-glow);
  color: #08101f;
}

.btn-secondary {
  background: transparent;
  color: var(--atlas-color-cloud-white);
  border-color: rgba(188, 197, 208, 0.4);
}

.btn-secondary:hover {
  border-color: rgba(232, 236, 241, 0.72);
  background: rgba(255, 255, 255, 0.04);
}

.btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 0.9rem;
}

/* Main */
.main {
  min-height: 100vh;
}

.landing-container {
  width: min(1152px, 94vw);
  margin: 0 auto;
}

/* Hero */
.landing-hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 5.8rem 1.25rem 2rem;
  overflow: hidden;
  isolation: isolate;
}

.landing-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.landing-hero-map-lines {
  position: absolute;
  inset: 0;
  opacity: 0.54;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(132, 153, 191, 0.12) 0%, rgba(132, 153, 191, 0.04) 24%, transparent 64%),
    repeating-radial-gradient(
      circle at 50% 50%,
      rgba(132, 153, 191, 0.08) 0 1px,
      transparent 2px 46px
    ),
    repeating-linear-gradient(
      to right,
      transparent 0 6.95%,
      rgba(132, 153, 191, 0.045) 7%,
      transparent 7.06% 14%
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0 8.95%,
      rgba(132, 153, 191, 0.038) 9%,
      transparent 9.06% 18%
    ),
    linear-gradient(116deg, transparent 28%, rgba(132, 153, 191, 0.05) 50%, transparent 72%),
    linear-gradient(64deg, transparent 34%, rgba(132, 153, 191, 0.045) 50%, transparent 66%),
    linear-gradient(24deg, transparent 42%, rgba(132, 153, 191, 0.04) 50%, transparent 58%),
    linear-gradient(156deg, transparent 40%, rgba(132, 153, 191, 0.035) 50%, transparent 60%);
  mix-blend-mode: screen;
}

.landing-hero-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 48%, rgba(196, 169, 110, 0.06) 0%, rgba(196, 169, 110, 0.015) 26%, transparent 68%),
    radial-gradient(circle at 50% 52%, rgba(46, 70, 115, 0.08) 0%, rgba(46, 70, 115, 0.03) 38%, transparent 84%);
}

.landing-hero-vline {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent, rgba(126, 145, 181, 0.15) 17%, rgba(126, 145, 181, 0.2) 50%, rgba(126, 145, 181, 0.14) 82%, transparent);
  opacity: 0.36;
}

.landing-hero-stars {
  position: absolute;
  inset: -12%;
  background-repeat: repeat;
  pointer-events: none;
}

.stars-layer-a {
  opacity: 0.66;
  background-image: radial-gradient(circle at 12% 18%, rgba(235, 241, 255, 0.95) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 10%, rgba(222, 231, 246, 0.9) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 33%, rgba(226, 235, 255, 0.95) 0 1.2px, transparent 2px),
    radial-gradient(circle at 24% 42%, rgba(218, 229, 247, 0.7) 0 1px, transparent 2px),
    radial-gradient(circle at 6% 72%, rgba(218, 229, 247, 0.75) 0 1px, transparent 2px),
    radial-gradient(circle at 92% 66%, rgba(225, 234, 250, 0.65) 0 1px, transparent 2px),
    radial-gradient(circle at 37% 86%, rgba(205, 219, 246, 0.6) 0 1px, transparent 2px);
  animation: twinkleA 9s ease-in-out infinite alternate;
}

.stars-layer-b {
  opacity: 0.42;
  background-image: radial-gradient(circle at 18% 24%, rgba(240, 245, 255, 0.8) 0 1px, transparent 2px),
    radial-gradient(circle at 63% 21%, rgba(228, 235, 255, 0.72) 0 1px, transparent 2px),
    radial-gradient(circle at 79% 58%, rgba(222, 233, 252, 0.7) 0 1px, transparent 2px),
    radial-gradient(circle at 31% 69%, rgba(230, 238, 253, 0.65) 0 1px, transparent 2px),
    radial-gradient(circle at 11% 89%, rgba(219, 233, 251, 0.56) 0 1px, transparent 2px);
  animation: twinkleB 6.8s ease-in-out infinite alternate;
}

.stars-layer-c {
  opacity: 0.32;
  background-image: radial-gradient(circle at 26% 14%, rgba(216, 228, 247, 0.6) 0 1px, transparent 2px),
    radial-gradient(circle at 48% 36%, rgba(210, 223, 245, 0.56) 0 1px, transparent 2px),
    radial-gradient(circle at 81% 80%, rgba(198, 214, 241, 0.56) 0 1px, transparent 2px),
    radial-gradient(circle at 40% 63%, rgba(194, 213, 244, 0.5) 0 1px, transparent 2px);
  animation: twinkleC 11s ease-in-out infinite alternate;
}

.landing-hero-atlas-wrap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.landing-hero-atlas-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(7, 13, 27, 0) 0%,
    rgba(7, 13, 27, 0.06) 48%,
    rgba(7, 13, 27, 0.18) 68%,
    rgba(7, 13, 27, 0.34) 86%,
    rgba(7, 13, 27, 0.56) 100%
  );
}

.landing-hero-atlas {
  width: min(505px, 59vw);
  max-width: 505px;
  opacity: 0.085;
  filter: saturate(0.07) brightness(1.18) contrast(0.86) blur(0.8px);
  /* Nudge right so compass vertical axis aligns with center ley line. */
  transform: translate(2.1%, 2.7%);
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(
    ellipse at 50% 46%,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.74) 26%,
    rgba(0, 0, 0, 0.38) 50%,
    rgba(0, 0, 0, 0.14) 66%,
    rgba(0, 0, 0, 0.04) 80%,
    transparent 95%
  );
  mask-image: radial-gradient(
    ellipse at 50% 46%,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.74) 26%,
    rgba(0, 0, 0, 0.38) 50%,
    rgba(0, 0, 0, 0.14) 66%,
    rgba(0, 0, 0, 0.04) 80%,
    transparent 95%
  );
}

.landing-hero-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: min(95vw, 1120px);
  margin-top: -0.6rem;
  transform: translateX(0);
}

.landing-hero-logo {
  width: clamp(86px, 10vw, 120px);
  height: auto;
  margin-bottom: 1.4rem;
  opacity: 0.98;
  filter: brightness(1.06);
}

.landing-hero-wordmark {
  margin: 0 auto;
  color: #edf3ff;
  font-family: var(--atlas-font-sans);
  font-size: clamp(2.2rem, 4.9vw, 4.4rem);
  font-weight: 300;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-shadow: 0 0 22px rgba(220, 231, 255, 0.09);
  line-height: 1.13;
  display: grid;
  justify-items: center;
  gap: 0.18em;
}

.landing-hero-wordmark span {
  display: block;
}

.landing-hero-divider {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0.95rem 0 0.3rem;
  color: rgba(175, 151, 95, 0.78);
}

.landing-hero-divider span {
  width: 6.2rem;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(171, 146, 90, 0.38), transparent);
}

.star-glyph {
  width: auto !important;
  height: auto !important;
  background: none !important;
  color: rgba(178, 154, 95, 0.86);
  font-size: 0.68rem;
  letter-spacing: 0;
}

.landing-hero-kicker {
  margin: 0.15rem 0 1.25rem;
  color: rgba(129, 145, 178, 0.84);
  font-size: 0.55rem;
  letter-spacing: 0.52em;
  text-transform: uppercase;
}

.landing-hero-subtitle {
  margin: 0;
  color: rgba(184, 198, 221, 0.77);
  max-width: 43rem;
  font-size: 0.98rem;
  line-height: 1.58;
}

.landing-hero-scroll {
  position: absolute;
  bottom: 2.6rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(128, 143, 171, 0.82);
  font-size: 0.5rem;
  letter-spacing: 0.46em;
  text-transform: uppercase;
}

@keyframes twinkleA {
  0% { opacity: 0.48; transform: scale(1.005); }
  45% { opacity: 0.7; }
  100% { opacity: 0.55; transform: scale(1.015); }
}

@keyframes twinkleB {
  0% { opacity: 0.28; transform: translateY(0); }
  50% { opacity: 0.52; }
  100% { opacity: 0.36; transform: translateY(1px); }
}

@keyframes twinkleC {
  0% { opacity: 0.24; }
  60% { opacity: 0.38; }
  100% { opacity: 0.3; }
}

/* Principles */
.landing-principles {
  position: relative;
  padding: 2.5rem 1.25rem 5rem;
}

.landing-principles::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(120, 141, 178, 0.08), transparent 64%);
  pointer-events: none;
}

.principles-intro {
  position: relative;
  text-align: center;
  max-width: 52rem;
  margin: 0 auto 2.1rem;
}

.principles-kicker {
  margin: 0 0 0.55rem;
  color: rgba(154, 169, 194, 0.85);
  font-size: 0.58rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
}

.principles-title {
  margin: 0;
  color: #edf3ff;
  font-weight: 300;
  font-size: clamp(1.15rem, 2.2vw, 1.65rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.principles-lede {
  margin: 1rem auto 0;
  color: rgba(176, 193, 219, 0.75);
  max-width: 44rem;
  font-size: 0.95rem;
  line-height: 1.7;
}

.principles-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.principle-card {
  border: 1px solid rgba(138, 159, 193, 0.22);
  border-radius: 0.9rem;
  background: linear-gradient(160deg, rgba(13, 23, 45, 0.72), rgba(10, 18, 34, 0.78));
  backdrop-filter: blur(2px);
  padding: 1.15rem 1.1rem 1.2rem;
}

.principle-card h3 {
  margin: 0;
  color: #e8efff;
  font-size: 0.84rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
}

.principle-card p {
  margin: 0.72rem 0 0;
  color: rgba(176, 193, 219, 0.75);
  line-height: 1.62;
  font-size: 0.86rem;
}

/* Bio */
.bio-page {
  padding: 7.6rem 1.25rem 4rem;
}

.bio-shell {
  max-width: 62rem;
  margin: 0 auto;
}

.bio-kicker {
  margin: 0 0 0.6rem;
  color: rgba(154, 169, 194, 0.85);
  font-size: 0.62rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
}

.bio-title {
  margin: 0;
  color: #edf3ff;
  font-size: clamp(1.8rem, 3.3vw, 2.7rem);
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
}

.bio-lede {
  margin: 1rem 0 1.8rem;
  max-width: 46rem;
  color: rgba(184, 198, 221, 0.78);
  line-height: 1.75;
}

.bio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.bio-card {
  border: 1px solid rgba(138, 159, 193, 0.24);
  border-radius: 0.9rem;
  background: linear-gradient(160deg, rgba(13, 23, 45, 0.74), rgba(10, 18, 34, 0.82));
  padding: 1.2rem;
}

.bio-card h2 {
  margin: 0;
  color: #e8efff;
  font-size: 0.84rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.bio-card p {
  margin: 0.75rem 0 0;
  color: rgba(176, 193, 219, 0.75);
  line-height: 1.66;
  font-size: 0.9rem;
}

/* Form elements (for future use) */
label {
  display: grid;
  gap: 0.35rem;
  color: var(--atlas-color-silver-steel);
  font-size: 0.9rem;
}

input,
select,
textarea {
  width: 100%;
  min-height: 42px;
  border-radius: var(--atlas-radius-sm);
  border: 1px solid var(--border);
  background: rgba(11, 18, 38, 0.72);
  color: var(--text);
  padding: 0.6rem 0.72rem;
  font-family: var(--atlas-font-sans);
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid rgba(200, 150, 62, 0.48);
  outline-offset: 1px;
}

textarea {
  resize: vertical;
}

.field-validation-error {
  color: #f2b7b7;
  font-size: 0.78rem;
}

/* Launch scope builder */
.tool-page {
  padding: 8rem 1.5rem 5rem;
}

.tool-hero {
  max-width: 48rem;
  margin-bottom: 2rem;
}

.tool-kicker {
  margin: 0 0 0.75rem;
  color: var(--accent);
  font-family: var(--atlas-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.tool-title {
  margin: 0 0 1rem;
  color: var(--atlas-color-cloud-white);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 300;
  line-height: 1.08;
}

.tool-lede {
  margin: 0;
  max-width: 44rem;
  color: var(--atlas-color-silver-steel);
  font-size: 1rem;
  line-height: 1.75;
}

.tool-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 1.5rem;
  align-items: start;
}

.tool-card {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--atlas-radius-lg);
  background: linear-gradient(145deg, rgba(15, 24, 41, 0.94), rgba(11, 18, 38, 0.98));
  box-shadow: var(--atlas-shadow-soft);
  padding: 1.5rem;
}

.tool-card-header h2,
.result-section h3,
.result-next-step h3,
.preview-block h3 {
  margin: 0 0 0.5rem;
  color: var(--atlas-color-cloud-white);
  font-size: 1.1rem;
  font-weight: 500;
}

.tool-card-header p,
.preview-block p,
.result-note,
.result-next-step p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.tool-form {
  display: grid;
  gap: 1rem;
  margin-top: 1.25rem;
}

.tool-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.tool-field {
  display: grid;
  gap: 0.45rem;
}

.tool-textarea {
  min-height: 110px;
}

.helper-text {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.tool-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 0.5rem;
}

.tool-result-card {
  display: grid;
  gap: 1rem;
}

.tool-preview {
  display: grid;
  gap: 1rem;
}

.preview-block {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--atlas-radius-md);
  background: rgba(16, 27, 53, 0.72);
  padding: 1rem;
}

.result-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  border-radius: 999px;
  padding: 0.45rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.result-badge--low {
  background: rgba(83, 196, 132, 0.14);
  border: 1px solid rgba(83, 196, 132, 0.28);
  color: #95e0ad;
}

.result-badge--medium {
  background: rgba(200, 150, 62, 0.14);
  border: 1px solid rgba(200, 150, 62, 0.32);
  color: var(--accent);
}

.result-badge--high {
  background: rgba(209, 103, 103, 0.14);
  border: 1px solid rgba(209, 103, 103, 0.32);
  color: #f2b7b7;
}

.tool-meta-grid,
.tool-columns {
  display: grid;
  gap: 1rem;
}

.tool-meta-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tool-columns {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tool-meta-card,
.result-section,
.result-next-step {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--atlas-radius-md);
  background: rgba(16, 27, 53, 0.68);
  padding: 1rem;
}

.tool-meta-card span {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tool-meta-card strong {
  color: var(--atlas-color-cloud-white);
  font-size: 0.95rem;
}

.tool-list {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--atlas-color-silver-steel);
}

.tool-list li + li {
  margin-top: 0.7rem;
}

.validation-summary {
  display: grid;
  gap: 0.25rem;
  border: 1px solid rgba(209, 103, 103, 0.32);
  border-radius: var(--atlas-radius-md);
  background: rgba(209, 103, 103, 0.08);
  color: #f2b7b7;
  padding: 0.9rem 1rem;
}

.validation-summary:empty {
  display: none;
}

/* Responsive */
@media (max-width: 768px) {
  .header-nav {
    display: none;
  }

  .site-header-inner {
    justify-content: center;
    padding-top: 1rem;
  }

  .landing-hero {
    padding-top: 4.85rem;
  }

  .landing-hero-wordmark {
    letter-spacing: 0.24em;
    font-size: clamp(1.8rem, 8.8vw, 2.45rem);
  }

  .landing-hero-subtitle {
    max-width: 22rem;
    font-size: 0.92rem;
  }

  .landing-hero-atlas {
    width: min(430px, 90vw);
    transform: translate(1.6%, 2.7%);
  }

  .landing-hero-kicker {
    letter-spacing: 0.34em;
  }

  .principles-grid,
  .bio-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .tool-grid,
  .tool-form-grid,
  .tool-columns,
  .tool-meta-grid {
    grid-template-columns: 1fr;
  }
}