:root {
  --ink: #edf4ff;
  --muted: #9aabc1;
  --navy: #09111f;
  --navy-raised: #101d30;
  --navy-soft: #13243a;
  --line: rgba(185, 207, 233, 0.18);
  --line-strong: rgba(185, 207, 233, 0.32);
  --blue: #78b6ff;
  --blue-bright: #b8d9ff;
  --cyan: #9ee9f5;
  --orange: #ffad75;
  --sans: "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif;
  --display: "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--navy);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

.site-shell { position: relative; overflow: hidden; }

.ambient { position: absolute; border-radius: 999px; filter: blur(90px); pointer-events: none; }
.ambient-one { width: 44rem; height: 44rem; top: -22rem; right: -14rem; background: rgba(71, 129, 206, .18); }
.ambient-two { width: 30rem; height: 30rem; top: 38rem; left: -22rem; background: rgba(49, 113, 153, .13); }

.grid-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .42;
  background-image: linear-gradient(rgba(168, 197, 230, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(168, 197, 230, .045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black 0, transparent 86%);
}

.site-header, main, .site-footer { position: relative; z-index: 1; }
.site-header, .site-footer { max-width: 1180px; margin: 0 auto; padding: 1.5rem 2.5rem; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.wordmark { display: inline-flex; align-items: center; gap: .62rem; font-size: .85rem; font-weight: 700; letter-spacing: -.025em; }
.wordmark em { color: var(--blue); font-style: normal; font-weight: 500; }
.wordmark-mark { display: grid; width: 1.85rem; height: 1.85rem; place-items: center; color: var(--cyan); border: 1px solid rgba(158, 233, 245, .55); border-radius: 50%; font-size: .75rem; box-shadow: 0 0 24px rgba(158, 233, 245, .12); }
.nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.25rem); color: var(--muted); font-size: .78rem; }
.nav a:not(.nav-cta), .footer-top { transition: color .2s ease; }
.nav a:not(.nav-cta):hover, .footer-top:hover { color: var(--ink); }
.nav-cta { padding: .68rem 1rem; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink); transition: background .2s ease, border-color .2s ease; }
.nav-cta:hover { background: rgba(120, 182, 255, .12); border-color: rgba(120, 182, 255, .6); }

.hero { max-width: 1180px; min-height: 640px; margin: 0 auto; padding: clamp(4rem, 11vw, 8rem) 2.5rem clamp(5rem, 11vw, 8rem); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr); align-items: center; gap: 4rem; }
.eyebrow { margin: 0 0 1.4rem; color: var(--blue-bright); font-size: .68rem; font-weight: 700; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; }
.status-dot { display: inline-block; width: .45rem; height: .45rem; margin-right: .42rem; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 13px var(--cyan); vertical-align: .07em; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--display); font-weight: 650; letter-spacing: -.065em; line-height: .95; }
h1 { max-width: 700px; margin-bottom: 1.6rem; font-size: clamp(3.8rem, 8vw, 7.8rem); }
h1 span, h2 span { color: var(--blue); }
.hero-lede { max-width: 30rem; margin-bottom: 2rem; color: var(--muted); font-size: 1.03rem; line-height: 1.72; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.4rem; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.45rem; padding: .95rem 1.15rem; border: 1px solid transparent; font-size: .75rem; font-weight: 700; letter-spacing: .02em; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--blue); color: #071222; }
.button-primary:hover { background: var(--blue-bright); }
.button-secondary { border-color: var(--line-strong); color: var(--ink); }
.button-secondary:hover { border-color: var(--blue); background: rgba(120, 182, 255, .1); }
.text-link { display: inline-flex; gap: .5rem; align-items: center; color: var(--blue-bright); font-size: .78rem; font-weight: 700; }
.text-link:hover { color: var(--ink); }
.hero-note { display: flex; align-items: center; gap: .8rem; margin-top: 5.5rem; color: var(--muted); font-size: .73rem; }
.hero-note span, .product-index { color: var(--orange); font-size: .62rem; font-weight: 700; letter-spacing: .12em; }
.hero-note p { margin: 0; }

.hero-art { position: relative; width: min(100%, 500px); aspect-ratio: .9; justify-self: end; display: grid; place-items: center; isolation: isolate; }
.hero-art::before { content: ""; position: absolute; width: 76%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(113, 182, 255, .28), rgba(113, 182, 255, 0) 70%); filter: blur(8px); z-index: -2; }
.hero-logo { width: 86%; height: 100%; object-fit: cover; object-position: center; mix-blend-mode: screen; opacity: 1; border-radius: 1rem; filter: saturate(1.08) contrast(1.06) drop-shadow(0 24px 40px rgba(0, 0, 0, .38)); mask-image: linear-gradient(to bottom, transparent 0, black 12%, black 90%, transparent 100%); }
.orbit { position: absolute; border: 1px solid rgba(158, 233, 245, .23); border-radius: 50%; transform: rotate(-31deg); }
.orbit-one { width: 90%; height: 45%; }
.orbit-two { width: 78%; height: 38%; transform: rotate(32deg); border-color: rgba(120, 182, 255, .22); }
.hero-art-label { position: absolute; color: var(--muted); font-size: .57rem; letter-spacing: .16em; }
.label-top { top: 2%; right: 3%; }
.label-bottom { bottom: 2%; left: 5%; color: var(--cyan); }

.signal-strip { max-width: 1180px; margin: 0 auto; padding: 1.15rem 2.5rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.signal-strip p { margin: 0; }
.signal-strip span { color: var(--orange); font-size: .78rem; }

.section { max-width: 1180px; margin: 0 auto; padding: clamp(6rem, 12vw, 10rem) 2.5rem; }
.section-heading { max-width: 32rem; margin-bottom: 4rem; }
.section-heading h2, .closing h2, .hatchery h2 { margin-bottom: 1.4rem; font-size: clamp(3rem, 6vw, 5.8rem); }
.section-heading > p:last-child, .hatchery-copy > p:not(.eyebrow) { color: var(--muted); font-size: .98rem; line-height: 1.75; }

.product-card { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(250px, .82fr) 1fr; min-height: 470px; border: 1px solid var(--line); background: linear-gradient(115deg, rgba(15, 31, 53, .9), rgba(9, 17, 31, .7)); }
.product-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid rgba(184, 217, 255, .06); background: linear-gradient(135deg, transparent 45%, rgba(158, 233, 245, .05)); }
.product-card-top { position: absolute; z-index: 2; inset: 1.35rem 1.5rem auto; display: flex; justify-content: space-between; }
.product-arrow { color: var(--blue-bright); font-size: 1.35rem; }
.product-visual { position: relative; min-height: 360px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 42%, rgba(113, 180, 255, .25), transparent 40%), #102239; }
.visual-orbit { position: absolute; width: 105%; height: 40%; border: 1px solid rgba(158, 233, 245, .28); border-radius: 50%; transform: rotate(-22deg); }
.visual-orbit-two { width: 85%; transform: rotate(28deg); border-color: rgba(255, 173, 117, .28); }
.product-orbit-copy { display: flex; align-items: baseline; gap: .18rem; color: var(--ink); font-size: clamp(2.5rem, 4vw, 4rem); font-weight: 750; letter-spacing: -.08em; transform: rotate(-8deg); }
.product-orbit-copy span { color: var(--cyan); font-weight: 400; }
.visual-spark { position: absolute; color: var(--orange); font-size: .9rem; }
.spark-one { top: 32%; left: 17%; }
.spark-two { right: 17%; bottom: 30%; color: var(--cyan); }
.product-card-copy { align-self: center; max-width: 26rem; padding: 4.8rem 4.5rem 3rem; }
.product-type { margin-bottom: .95rem; color: var(--orange); font-size: .66rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.product-card-copy h3 { margin-bottom: 1rem; font-family: var(--display); font-size: clamp(2.8rem, 5vw, 4.5rem); font-weight: 400; letter-spacing: -.07em; line-height: 1; }
.product-card-copy > p:not(.product-type) { margin-bottom: 1.8rem; color: var(--muted); font-size: .94rem; line-height: 1.75; }

.principles { display: grid; grid-template-columns: .82fr 1.18fr; gap: 6rem; border-top: 1px solid var(--line); }
.compact-heading { margin-bottom: 0; }
.principle-list { border-top: 1px solid var(--line); }
.principle { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1.25rem; padding: 1.8rem 0; border-bottom: 1px solid var(--line); }
.principle-number { color: var(--orange); font-size: .65rem; font-weight: 700; letter-spacing: .1em; }
.principle h3 { margin-bottom: .5rem; font-family: var(--sans); font-size: 1.05rem; font-weight: 600; letter-spacing: -.03em; }
.principle p { max-width: 29rem; margin-bottom: 0; color: var(--muted); font-size: .88rem; line-height: 1.7; }

.hatchery { display: grid; grid-template-columns: .55fr 1fr .35fr; align-items: center; gap: 3rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hatchery-mark { display: grid; width: 170px; height: 170px; place-items: center; border: 1px solid rgba(158, 233, 245, .3); border-radius: 50%; background: radial-gradient(circle, rgba(120, 182, 255, .18), transparent 64%); color: var(--cyan); font-size: 1.15rem; box-shadow: 0 0 70px rgba(120, 182, 255, .1); }
.hatchery-mark span { grid-area: 1 / 1; }
.hatchery-mark span:nth-child(1) { transform: translateY(-2.7rem); }
.hatchery-mark span:nth-child(2) { transform: translate(2.35rem, 1.35rem); color: var(--orange); }
.hatchery-mark span:nth-child(3) { transform: translate(-2.35rem, 1.35rem); }
.hatchery-copy { max-width: 35rem; }
.hatchery-copy .button { margin-top: .9rem; }
.hatchery-aside { justify-self: end; display: flex; gap: 1rem; align-items: center; color: var(--cyan); font-family: var(--display); font-size: 1.25rem; font-weight: 650; line-height: 1.15; }
.hatchery-aside p { margin: 0; }
.aside-line { width: 1px; height: 5rem; background: linear-gradient(var(--cyan), transparent); }

.closing { max-width: 840px; margin: 0 auto; padding: clamp(6rem, 15vw, 12rem) 2.5rem; text-align: center; }
.closing .eyebrow { color: var(--orange); }
.closing h2 { margin-bottom: 2.2rem; }
.closing .button { min-width: 230px; }

.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .68rem; }
.site-footer p { margin: 0; }
.footer-top { color: var(--blue-bright); }

@media (max-width: 800px) {
  .site-header, .site-footer { padding-left: 1.35rem; padding-right: 1.35rem; }
  .site-header { align-items: flex-start; }
  .nav { gap: 1rem; }
  .nav a:not(:last-child) { display: none; }
  .hero, .section { padding-left: 1.35rem; padding-right: 1.35rem; }
  .hero { min-height: auto; grid-template-columns: 1fr; gap: 2rem; padding-top: 5rem; }
  .hero-art { justify-self: center; width: min(100%, 390px); order: -1; }
  .hero-copy { text-align: left; }
  .hero-note { margin-top: 3.5rem; }
  .signal-strip { padding-left: 1.35rem; padding-right: 1.35rem; flex-wrap: wrap; justify-content: center; }
  .product-card { grid-template-columns: 1fr; }
  .product-visual { min-height: 300px; }
  .product-card-copy { max-width: none; padding: 3rem 2rem 3.5rem; }
  .principles { grid-template-columns: 1fr; gap: 3rem; }
  .hatchery { grid-template-columns: 1fr; gap: 2.5rem; }
  .hatchery-mark { width: 125px; height: 125px; }
  .hatchery-mark span:nth-child(1) { transform: translateY(-2rem); }
  .hatchery-mark span:nth-child(2) { transform: translate(1.75rem, 1rem); }
  .hatchery-mark span:nth-child(3) { transform: translate(-1.75rem, 1rem); }
  .hatchery-aside { justify-self: start; }
  .site-footer { flex-wrap: wrap; }
  .site-footer p { order: 3; width: 100%; }
}

@media (max-width: 460px) {
  .nav-cta { padding: .6rem .75rem; font-size: .68rem; }
  .nav-cta span { display: none; }
  h1 { font-size: clamp(3.4rem, 17vw, 5rem); }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 1.25rem; }
  .button { width: 100%; }
  .hero-art { width: 100%; }
  .signal-strip { align-items: flex-start; flex-direction: column; gap: .75rem; }
  .signal-strip span { display: none; }
  .closing { padding-left: 1.35rem; padding-right: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}