:root {
  --ink: #03070b;
  --ink-2: #09121a;
  --paper: #edf3f6;
  --mist: #aebbc4;
  --acid: #27baf2;
  --ice: #8fdbfa;
  --sand: #c6d0d7;
  --line: rgba(194, 218, 232, .18);
  --sans: "Manrope", sans-serif;
  --serif: "Sora", sans-serif;
}

body {
  background:
    radial-gradient(circle at 72% 8%, rgba(31, 150, 207, .08), transparent 25%),
    var(--ink);
}

.brand-logo {
  width: clamp(220px, 20vw, 292px);
  height: 56px;
  display: flex;
  align-items: center;
}

.brand-logo img {
  display: block;
  width: 100%;
  height: auto;
}

em {
  font-family: "Sora", sans-serif;
  font-style: normal;
  font-weight: 400;
}

.site-header.scrolled {
  background: rgba(3, 7, 11, .91);
  border-color: rgba(117, 197, 235, .14);
}

.nav-cta,
.button {
  border-color: rgba(203, 230, 242, .48);
}

.button--solid {
  background: linear-gradient(120deg, #1478a8, #2bc5ff);
  border-color: #2bc5ff;
  color: #020609;
  box-shadow: 0 10px 35px rgba(27, 164, 222, .16);
}

.button--solid:hover {
  box-shadow: 0 14px 45px rgba(27, 164, 222, .3);
}

.hero > .media-backdrop {
  filter: brightness(.56) saturate(.75) contrast(1.07);
}

.hero .hero-shade {
  background:
    linear-gradient(180deg, rgba(1, 4, 7, .66), rgba(2, 7, 11, .19) 42%, rgba(2, 6, 9, .91)),
    linear-gradient(90deg, rgba(1, 5, 8, .76), rgba(2, 7, 11, .05) 70%);
}

.hero h1 {
  font-family: "Sora", sans-serif;
  font-weight: 500;
  letter-spacing: -.075em;
}

.hero .brand-period {
  color: var(--acid);
}

.hero-emblem {
  position: absolute;
  right: var(--pad);
  top: 18%;
  width: clamp(90px, 11vw, 160px);
  filter: drop-shadow(0 12px 35px rgba(0, 0, 0, .38));
}

.atlas-fallback {
  background:
    radial-gradient(circle at 68% 30%, rgba(42, 190, 244, .3), transparent 25%),
    radial-gradient(circle at 32% 70%, rgba(169, 189, 202, .14), transparent 32%),
    linear-gradient(145deg, #102536, #020609 68%);
}

.atlas-fallback::after {
  opacity: .18;
  filter: hue-rotate(140deg);
}

.statement,
.closing-cta {
  background: radial-gradient(circle at 50% 45%, rgba(36, 175, 229, .08), transparent 43%);
}

.display em {
  color: var(--ice);
}

.round-link,
.filters button,
.price-card,
.viewer-frame {
  border-color: rgba(141, 201, 230, .2);
}

.world-card:hover .round-link,
.filters button.active {
  background: var(--acid);
  color: var(--ink);
}

.split-feature__copy,
.viewer {
  background: #e7eef2;
}

.split-feature__copy .eyebrow,
.viewer .eyebrow,
.use-cases .eyebrow,
.price-card--featured .eyebrow {
  color: #116b94;
}

.use-cases {
  background: linear-gradient(135deg, #b8dce9, #78c7e8);
  color: #03070b;
}

.price-card--featured {
  background: linear-gradient(155deg, #edf5f8, #cbdce5);
}

.contact-layout,
.page-intro {
  background:
    radial-gradient(circle at 80% 20%, rgba(37, 184, 239, .13), transparent 27%),
    linear-gradient(150deg, #091823, #03070b 61%);
}

.footer-logo {
  width: min(330px, 85%);
  height: auto;
  margin: -45px 0 -28px;
}

.site-footer {
  background: #020508;
}

@media (max-width: 980px) {
  .nav-toggle {
    display: block !important;
    color: #edf3f6;
    background: rgba(5, 13, 19, .68);
    border: 1px solid rgba(141, 201, 230, .22);
    border-radius: 50%;
    backdrop-filter: blur(10px);
  }

  .nav-toggle::before {
    content: "MENU";
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .08em;
  }

  .nav-toggle span {
    display: none;
  }

  .main-nav {
    background: radial-gradient(circle at 80% 12%, rgba(39, 186, 242, .17), transparent 30%), #03070b;
  }

  .hero-emblem {
    top: 16%;
    width: 92px;
  }
}

@media (max-width: 620px) {
  .brand-logo {
    width: 220px;
    height: 46px;
  }

  .hero h1 {
    font-size: 14.2vw;
    letter-spacing: -.07em;
  }

  .hero-bottom {
    width: 100%;
  }

  .hero-bottom .button-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .hero-bottom .button {
    min-width: 0;
    padding-inline: 8px;
    font-size: 11px;
  }

  .footer-logo {
    margin-top: -30px;
  }
}

/* ==========================================================================
   Readability — larger menu, buttons and supporting text.
   Lives here (an already-linked stylesheet) so it applies on a plain refresh.
   ========================================================================== */
body { font-size: 18px; line-height: 1.6; }
/* Desktop nav only — the mobile overlay keeps its large type from site.css. */
@media (min-width: 981px) { .main-nav { font-size: 17px; gap: clamp(22px, 2.4vw, 42px); } }
.nav-cta { font-size: 16px; padding: 13px 22px; }
.button { font-size: 17px; padding: 16px 28px; min-height: 54px; }
.eyebrow { font-size: 13px; letter-spacing: .14em; }
.hero-bottom > p { font-size: clamp(21px, 2.1vw, 34px); }
.intro-copy { font-size: clamp(21px, 2.3vw, 33px); }
.process-list h3 { font-size: 22px; }
.process-list p { font-size: 16.5px; max-width: 470px; }
.world-card > a > p { font-size: 16px; }
.world-card__copy .eyebrow, .card-index, .route-list .eyebrow { font-size: 13px; }
.split-feature__copy p { font-size: 19px; }
.route-list strong { font-size: 16px; }
.price-card > p { font-size: 16.5px; }
.price-card li { font-size: 15px; }
.editorial-rows article > p:last-child { font-size: 16.5px; }
.world-story dl div { font-size: 16.5px; }
.world-hero-copy > p:last-child { font-size: 21px; }
.contact-intro > p { font-size: 22px; }
.contact-form label { font-size: 13px; }
.contact-form input, .contact-form textarea { font-size: 18px; }
.site-footer, .footer-links a, .footer-meta a, .footer-meta span { font-size: 15px; }
.pricing-note, .form-status, .text-link { font-size: 15px; }
.hero-emblem { width: clamp(160px, 19vw, 300px); top: 13%; }
.footer-logo { width: min(360px, 88%); }

@media (max-width: 620px) {
  body { font-size: 16.5px; }
  .button { font-size: 15px; }
}

/* Films — every render generated for the world, playable on its page. */
.films-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2vw, 34px); margin-top: 12px; }
.film { margin: 0; }
.film video {
  width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .32); display: block;
}
.film figcaption { padding: 13px 2px 0; font-size: 17px; color: var(--paper); }
.films-count { color: var(--mist); font-size: 15px; margin: 0; }
@media (max-width: 620px) { .films-grid { grid-template-columns: 1fr; } }

/* World hero (e.g. Mont Blanc) — the footage was too dark. Brighten it and
   keep the darkening weighted to the bottom, where the caption sits. */
.hero--world > .media-backdrop { filter: brightness(.82) saturate(.9) contrast(1.02); }
.hero--world .hero-shade {
  background:
    linear-gradient(180deg, rgba(2, 7, 11, .12), transparent 38%, rgba(2, 6, 9, .82)),
    linear-gradient(90deg, rgba(1, 5, 8, .28), transparent 55%);
}