:root { --background: #030508; --ink: #f4f1e9; --gold: 211 165 103; --page-inline: clamp(1.5rem, 4vw, 4rem); }

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

html, body { width: 100%; min-width: 20rem; min-height: 100%; margin: 0px; background: var(--background); }

body { overflow: hidden; color: var(--ink); font-family: "Helvetica Neue", "Avenir Next", "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif; text-rendering: geometricprecision; -webkit-font-smoothing: antialiased; }

.landing { position: relative; isolation: isolate; width: 100%; min-height: 100svh; overflow: hidden; background: radial-gradient(at 50% 49%, rgba(34, 38, 43, 0.15) 0px, rgba(18, 21, 25, 0.08) 29%, transparent 58%), radial-gradient(at 50% 52%, transparent 0px, transparent 22%, rgba(0, 0, 0, 0.14) 66%, rgba(0, 0, 0, 0.58) 100%), linear-gradient(rgb(6, 8, 11) 0%, rgb(3, 5, 8) 51%, rgb(2, 4, 7) 100%); }

.landing::after { position: absolute; z-index: 8; inset: 0px; pointer-events: none; content: ""; background: linear-gradient(90deg, rgba(0, 0, 0, 0.34), transparent 17%, transparent 83%, rgba(0, 0, 0, 0.34)), linear-gradient(rgba(0, 0, 0, 0.18), transparent 20%, transparent 78%, rgba(0, 0, 0, 0.32)); }

.star-field { position: absolute; z-index: 1; inset: 0px; width: 100%; height: 100%; opacity: 1; }

.grain { position: absolute; z-index: 7; inset: -50%; width: 200%; height: 200%; pointer-events: none; opacity: 0.042; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.74'/%3E%3C/svg%3E"); transform: rotate(0.001deg); mix-blend-mode: soft-light; }

.brand-lockup { position: absolute; z-index: 10; top: 11.75%; left: 50%; width: calc(100% - 2 * var(--page-inline)); transform: translateX(-50%); text-align: center; }

.brand-lockup h1 { margin: 0px; color: rgba(247, 244, 237, 0.98); font-size: clamp(1.28rem, 1.93vw, 2rem); font-weight: 300; line-height: 1; letter-spacing: 0.86em; text-indent: 0.86em; text-transform: uppercase; text-shadow: rgba(255, 247, 229, 0.08) 0px 0px 18px; white-space: nowrap; }

.orbital-system { position: absolute; z-index: 3; top: 48.78%; left: 50%; width: min(78vmin, 50vw, 50rem); min-width: 37.5rem; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); }

.ambient-glow { position: absolute; z-index: -1; top: 50%; left: 50%; width: 72%; aspect-ratio: 1 / 1; border-radius: 50%; background: radial-gradient(circle, rgba(239, 183, 104, 0.08) 0px, rgba(155, 94, 38, 0.035) 35%, transparent 70%); transform: translate(-50%, -50%); }

.orbits { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(rgba(242, 192, 119, 0.28) 0px 0px 0.45px) drop-shadow(rgba(113, 73, 35, 0.05) 0px 0px 5px); }

.orbit { fill: none; stroke: url("#orbit-mid"); stroke-width: 0.88; vector-effect: non-scaling-stroke; }

.orbit--1 { stroke: url("#orbit-inner"); stroke-width: 1.05; }

.orbit--2 { stroke: url("#orbit-mid"); opacity: 0.72; }

.orbit--3 { stroke: url("#orbit-inner"); opacity: 0.7; }

.orbit--4 { stroke: url("#orbit-mid"); opacity: 0.82; }

.orbit--5 { stroke: url("#orbit-outer"); opacity: 0.66; }

.orbit--6 { stroke: url("#orbit-outer"); stroke-width: 0.76; opacity: 0.68; }

.point { fill: rgb(228, 213, 189); opacity: 0.6; filter: drop-shadow(rgba(238, 220, 187, 0.48) 0px 0px 2px); }

.point--warm { fill: rgb(217, 168, 100); opacity: 0.9; }

.stellar-core { position: absolute; z-index: 2; top: 50%; left: 50%; width: 0px; height: 0px; }

.stellar-core::before, .stellar-core::after { position: absolute; top: 50%; left: 50%; border-radius: 50%; content: ""; transform: translate(-50%, -50%); }

.stellar-core::before { width: 11.5rem; height: 11.5rem; background: radial-gradient(circle, rgba(255, 250, 233, 0.15) 0px, rgba(241, 199, 133, 0.07) 14%, rgba(188, 122, 56, 0.024) 34%, transparent 68%); filter: blur(2.4px); }

.stellar-core::after { width: 5.4rem; height: 5.4rem; background: radial-gradient(circle, rgba(255, 255, 252, 0.92) 0px, rgba(255, 255, 252, 0.92) 6%, rgba(255, 248, 228, 0.66) 14%, rgba(255, 223, 169, 0.28) 30%, rgba(219, 151, 79, 0.08) 49%, transparent 72%); filter: blur(1.75px); }

.beam, .core-corona, .core-disc, .core-light { position: absolute; top: 50%; left: 50%; display: block; transform: translate(-50%, -50%); }

.core-corona { width: 8.1rem; height: 8.1rem; opacity: 0.78; background: radial-gradient(circle, rgba(255, 255, 248, 0.9) 0px, rgba(255, 255, 248, 0.9) 6%, rgba(255, 239, 207, 0.98) 12%, rgba(249, 199, 124, 0.19) 29%, transparent 62%); filter: blur(3.2px); }

.core-corona::after { position: absolute; top: 50%; left: 50%; width: 72%; height: 72%; content: ""; background: radial-gradient(circle, rgba(255, 253, 241, 0.58) 0px, rgba(255, 253, 241, 0.58) 8%, rgba(255, 221, 163, 0.22) 31%, transparent 70%); clip-path: polygon(50% 0px, 56% 39%, 100% 50%, 56% 61%, 50% 100%, 44% 61%, 0px 50%, 44% 39%); filter: blur(1.6px); transform: translate(-50%, -50%) rotate(45deg); }

.core-disc { width: 4.8rem; height: 4.8rem; border: 0px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 251, 0.98) 0px, rgba(255, 255, 251, 0.98) 7%, rgba(255, 247, 223, 0.68) 19%, rgba(255, 220, 164, 0.25) 40%, transparent 73%); }

.beam--horizontal::after, .beam--vertical::after, .beam--diagonal-a::after, .beam--diagonal-b::after { position: absolute; top: 50%; left: 50%; content: ""; transform: translate(-50%, -50%); }

.beam--horizontal { width: 20.5rem; height: 0.87rem; background: radial-gradient(rgba(255, 252, 239, 0.94) 0px, rgba(255, 231, 187, 0.99) 12%, rgba(227, 168, 98, 0.08) 32%, transparent 70%); filter: blur(0.35px); }

.beam--horizontal::after { width: 100%; height: 1px; background: linear-gradient(90deg, transparent 0px, rgba(211, 157, 88, 0.28) 17%, rgba(231, 181, 111, 0.85) 38%, rgba(255, 249, 230, 0.98) 49.4%, rgba(255, 249, 230, 0.98) 50.6%, rgba(231, 181, 111, 0.85) 62%, rgba(211, 157, 88, 0.28) 83%, transparent 100%); box-shadow: rgba(255, 226, 177, 0.14) 0px 0px 0.35rem; }

.beam--vertical { width: 0.8rem; height: 19.5rem; background: radial-gradient(rgba(255, 252, 239, 0.96) 0px, rgba(255, 231, 187, 0.93) 12%, rgba(227, 168, 98, 0.08) 32%, transparent 70%); filter: blur(0.35px); }

.beam--vertical::after { width: 1px; height: 100%; background: linear-gradient(transparent 0px, rgba(211, 157, 88, 0.28) 16%, rgba(255, 219, 168, 0.62) 38%, rgb(255, 250, 232) 49.4%, rgb(255, 250, 232) 50.6%, rgba(233, 183, 112, 0.68) 62%, rgba(211, 157, 88, 0.28) 84%, transparent 100%); box-shadow: rgba(255, 226, 177, 0.16) 0px 0px 0.35rem; }

.beam--diagonal-a, .beam--diagonal-b { width: 11rem; height: 0.5rem; opacity: 0.68; background: radial-gradient(rgba(255, 244, 218, 0.88) 0px, rgba(255, 251, 197, 0.94) 20%, transparent 53%); filter: blur(0.45px); }

.beam--diagonal-a::after, .beam--diagonal-b::after { width: 120%; height: 0.75px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgb(251, 243, 229), rgba(255, 255, 255, 0)); }

.beam--diagonal-a { transform: translate(-50%, -50%) rotate(45deg); }

.beam--diagonal-b { transform: translate(-50%, -50%) rotate(-45deg); }

.beam--fine-a, .beam--fine-b { opacity: 0; }

.beam--fine-a { transform: translate(-50%, -50%) rotate(22.5deg); }

.beam--fine-b { transform: translate(-50%, -50%) rotate(-67.5deg); }

.core-light { width: 1.84rem; height: 1.84rem; border-radius: 50%; background: radial-gradient(circle, rgb(255, 255, 255) 0px, rgb(255, 255, 255) 46%, rgb(255, 254, 249) 62%, rgb(255, 237, 202) 79%, rgba(255, 219, 158, 0.14) 100%); box-shadow: rgb(255, 255, 255) 0px 0px 0.28rem, rgba(255, 251, 237, 0.92) 0px 0px 0.82rem, rgba(255, 222, 165, 0.48) 0px 0px 1.65rem, rgba(206, 133, 58, 0.15) 0px 0px 3rem; }

.status { position: absolute; z-index: 10; top: 82%; left: 50%; margin: 0px; color: rgb(var(--gold) / 96%); font-size: clamp(0.72rem, 1.05vw, 1.02rem); font-weight: 400; line-height: 1; letter-spacing: 0.58em; text-indent: 0.58em; text-transform: uppercase; text-shadow: rgba(225, 169, 97, 0.22) 0px 0px 0.9rem; transform: translateX(-50%); }

.site-footer { position: absolute; z-index: 10; bottom: max(1.15rem, env(safe-area-inset-bottom)); left: 50%; width: min(calc(100% - 3rem), 42rem); color: rgba(244, 241, 233, 0.46); font-size: clamp(0.6rem, 0.66vw, 0.72rem); font-weight: 300; line-height: 1.55; letter-spacing: 0.12em; text-align: center; transform: translateX(-50%); }

.site-footer p { margin: 0px; }

.site-footer__tagline { color: rgba(244, 241, 233, 0.58); }

.site-footer__contact { margin-top: 0.08rem; }

.site-footer__copyright { margin-top: 0.02rem; opacity: 0.72; }

.site-footer a { color: rgba(228, 202, 164, 0.66); text-decoration: none; text-underline-offset: 0.2em; transition: color 160ms ease; }

.site-footer a:hover, .site-footer a:focus-visible { color: rgba(255, 238, 210, 0.94); text-decoration: underline; }

.site-footer a:focus-visible { outline: 1px solid rgba(228, 202, 164, 0.66); outline-offset: 0.22rem; }

@media (max-aspect-ratio: 4 / 5) {
  .brand-lockup { top: max(9.5%, env(safe-area-inset-top)); }
  .brand-lockup h1 { font-size: clamp(1.05rem, 5.5vw, 1.55rem); letter-spacing: 0.49em; text-indent: 0.49em; }
  .orbital-system { top: 49%; width: min(96vw, 34rem); min-width: 0px; }
  .status { top: auto; bottom: max(14.5%, calc(env(safe-area-inset-bottom) + 2rem)); font-size: 0.75rem; }
  .site-footer { bottom: max(1rem, env(safe-area-inset-bottom)); width: calc(100% - 2rem); font-size: 0.6rem; letter-spacing: 0.08em; }
}

@media (max-height: 40rem) and (orientation: landscape) {
  .brand-lockup { top: 8%; }
  .orbital-system { width: min(82vmin, 31rem); min-width: 0px; }
  .status { top: auto; bottom: 5rem; }
  .site-footer { bottom: 0.55rem; font-size: 0.56rem; line-height: 1.35; }
}

@media (prefers-reduced-motion: no-preference) {
  .brand-lockup, .status, .site-footer { animation: 1.35s cubic-bezier(0.22, 1, 0.36, 1) 0s 1 normal both running reveal; }
  .status { animation-delay: 0.18s; }
  .site-footer { animation-delay: 0.3s; }
  .orbital-system { animation: 1.7s cubic-bezier(0.22, 1, 0.36, 1) 0s 1 normal both running orbit-reveal; }
  .stellar-core { animation: 7s ease-in-out 2s infinite normal none running breathe; }
}

@keyframes reveal { 
  0% { opacity: 0; filter: blur(4px); }
  100% { opacity: 1; filter: blur(0px); }
}

@keyframes orbit-reveal { 
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.97); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes breathe { 
  0%, 100% { opacity: 0.88; }
  50% { opacity: 1; }
}