:root {
  --space-950: #06103a;
  --space-900: #101c56;
  --space-800: #1a2e67;
  --cream-100: #fffaf0;
  --cream-200: #fff4c8;
  --gold-300: #fff09d;
  --gold-500: #f1be35;
  --gold-700: #a76f1f;
  --ink-900: #27364f;
  --ink-600: #66728b;
  --sky-400: #54b7d2;
  --leaf-300: #a7e59a;
  --max-width: 1180px;
}

* {
  box-sizing: border-box;
}

html {
  background: #151515;
  color: var(--ink-900);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--cream-100);
}

a {
  color: inherit;
  text-decoration: none;
}

.site-shell {
  min-height: 100vh;
  background: var(--cream-100);
}

@media (pointer: fine) {
  .custom-cursor,
  .custom-cursor a,
  .custom-cursor button {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='28' viewBox='0 0 24 28'%3E%3Cpath d='M6.3 2.8C3.8 1.8 2.2 4 3.3 6.3l6.8 16.6c.7 1.6 2.9 1.5 3.5-.1l1.8-4.8 4.6 2c1.7.7 3.1-1.2 2-2.6L10.8 5.4C9.4 3.9 8.1 3.5 6.3 2.8Z' fill='%23fff4c8' stroke='%232b241b' stroke-width='1.65' stroke-linejoin='round'/%3E%3Cpath d='M11.6 22.9l3.3-7 5.9 2.7-3.4-4.1-4.3-1.1-1.5 9.5Z' fill='%23e8b33f' opacity='.92'/%3E%3Cpath d='M6.7 4.3c1.7.6 2.8 1.1 4.2 2.6l8.6 10-5.6-2.4-2.4 6.1L4.5 4.6c.5-.5 1.2-.6 2.2-.3Z' fill='%23fff7d4'/%3E%3Cpath d='M13.9 11.2l1 1.9 1.9 1-1.9 1-1 1.9-1-1.9-1.9-1 1.9-1 1-1.9Z' fill='%23ffd958' stroke='%23634b22' stroke-width='.55'/%3E%3Cpath d='M7.5 6.5c1.6.7 3.3 2 4.5 3.6' fill='none' stroke='%23ffffff' stroke-width='1.15' stroke-linecap='round' opacity='.76'/%3E%3C/svg%3E") 0 0, auto;
  }
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: .75rem 1rem;
  border-radius: 999px;
  background: var(--cream-100);
  color: var(--ink-900);
}

.skip-link:focus {
  top: 1rem;
}

.site-header,
.hero-inner,
.route-section,
.page-main,
.site-footer-inner {
  width: min(100% - 2rem, var(--max-width));
  margin: 0 auto;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: relative;
  z-index: 1;
  min-height: 6rem;
  padding: 1.25rem 0;
  color: var(--cream-100);
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0 calc((100vw - 100%) / -2);
  z-index: -1;
  background:
    radial-gradient(circle at 18% 50%, rgba(72,166,218,.58), transparent 23rem),
    radial-gradient(circle at 78% 42%, rgba(116,212,178,.34), transparent 18rem),
    linear-gradient(90deg, #102357 0%, var(--space-950) 52%, #12275f 100%);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  min-height: 3.5rem;
  font-weight: 900;
  font-size: 1rem;
}

.brand-logo {
  width: 3.5rem;
  height: 3.5rem;
  flex: 0 0 auto;
}

.brand-text {
  display: grid;
  line-height: .95;
}

.brand-text span {
  font-size: 1rem;
}

.brand-text small {
  color: var(--gold-300);
  font-size: .75rem;
}

.nav-list,
.footer-list {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  display: inline-flex;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  padding: .55rem .85rem;
  background: rgba(255,255,255,.13);
  font-weight: 800;
}

.hero {
  position: relative;
  overflow: hidden;
  background: var(--space-900);
  color: var(--cream-100);
}

.page-hero {
  min-height: 6rem;
  background: transparent;
}

.hero-inner {
  display: grid;
  position: relative;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, .8fr);
  gap: 2rem;
  padding: 4rem 0 4.5rem;
}

.hero-inner::before {
  content: "";
  position: absolute;
  inset: 0 calc((100vw - 100%) / -2);
  z-index: 0;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,244,190,.28), transparent 19%),
    radial-gradient(circle at 19% 18%, rgba(72,166,218,.66), transparent 23%),
    radial-gradient(circle at 78% 5%, rgba(116,212,178,.42), transparent 15%),
    linear-gradient(180deg, var(--space-950), var(--space-900) 60%, var(--space-800));
}

.hero-inner > * {
  position: relative;
  z-index: 1;
}

.hero h1 {
  max-width: 44rem;
  margin: 0;
  font-size: clamp(2.7rem, 7vw, 4.4rem);
  line-height: .96;
}

.hero-copy {
  max-width: 38rem;
  margin-top: 1rem;
  color: rgba(255,250,230,.86);
  font-size: 1.08rem;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 1.75rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: .9rem 1.35rem;
  font-weight: 900;
}

.button-primary {
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  color: #684711;
  box-shadow: 0 .45rem 0 var(--gold-700);
}

.button-secondary {
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.13);
  color: var(--cream-100);
}

.hero-visual {
  position: relative;
  min-height: 22rem;
}

.hero-visual::before {
  content: "";
  position: absolute;
  right: 2rem;
  top: 1rem;
  width: min(70vw, 18rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 28%, #e9ffd5 0 12%, #90db9a 13% 29%, var(--sky-400) 30% 58%, #2d5590 59% 100%);
  box-shadow: inset -2rem -2.25rem 0 rgba(11,24,72,.20), 0 0 4.5rem rgba(100,198,230,.48);
}

.hero-visual::after {
  content: "";
  position: absolute;
  right: 0;
  top: 8rem;
  width: min(80vw, 25rem);
  height: 5rem;
  border: 2px solid rgba(255,255,255,.24);
  border-radius: 50%;
  transform: rotate(-17deg);
}

.status-list,
.route-grid {
  display: grid;
  gap: 1rem;
}

.status-list {
  margin-top: 1.75rem;
}

.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 1rem;
  padding: .85rem 1rem;
  background: rgba(255,255,255,.13);
}

.pill {
  border-radius: 999px;
  padding: .45rem .7rem;
  background: #fff0a6;
  color: #6c4d13;
  font-size: .78rem;
  font-weight: 900;
}

.route-section {
  padding: 3rem 0;
}

.section-heading {
  max-width: 42rem;
  margin-bottom: 1.25rem;
}

.section-heading h2,
.page-main h1 {
  margin: 0 0 .5rem;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
}

.section-heading p,
.card p,
.page-main p {
  color: var(--ink-600);
}

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

.card {
  min-height: 9.5rem;
  border: 1px solid rgba(39,54,79,.12);
  border-radius: 1.25rem;
  padding: 1.1rem;
  background: linear-gradient(180deg, #ffffff, #eff7f8);
  box-shadow: 0 .85rem 2rem rgba(31,45,83,.09);
}

.card-icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: .85rem;
  border-radius: .9rem;
  background: #fff0a6;
  color: #745316;
  font-weight: 900;
}

.page-main {
  padding: 3rem 0;
}

.source-box {
  border: 1px solid rgba(39,54,79,.12);
  border-radius: 1.25rem;
  padding: 1rem;
  background: #fff;
}

.site-footer {
  background: #081134;
  color: rgba(255,250,230,.78);
}

.site-footer-inner {
  display: grid;
  grid-template-columns: 1.1fr .9fr .9fr;
  gap: 2rem;
  padding: 2.25rem 0;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: .75rem;
}

.footer-brand .brand-logo {
  width: 3rem;
  height: 3rem;
}

.footer-list {
  display: grid;
  gap: .35rem;
}

.footer-bottom {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(255,250,230,.58);
}

@media (max-width: 860px) {
  .site-header,
  .hero-inner,
  .site-footer-inner,
  .footer-bottom {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: flex-start;
  }

  .site-header {
    align-items: flex-start;
  }

  .route-grid {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    min-height: 14rem;
  }
}