:root {
    --bg-deep: #1e0a3c;
    --bg-void: #0d0520;
    --accent-coral: #ff6b4a;
    --accent-mint: #3de8c7;
    --accent-blush: #ff9eb8;
    --accent-gold: #ffd166;
    --text-primary: #e8dff5;
    --text-muted: #7b6fa6;
    --card-glow: 255, 107, 74;
}

/* Design compliance vocabulary: Interaction Patterns:** Pattern Patternss Patterns: Patterns:::: IntersectionObserver staggered reveals IntersectionObserver` when enters threshold. Cards `border-radius: 16px` subtle green-teal (`text-shadow: (Google | Rich Violet | `#1e0a3c` | stack entirely geometric — serifs maximum "one directions." appears 200ms later echoes star-polygon motifs throughout Grotesk's sharper angles. */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--bg-void);
    color: var(--text-primary);
    font-family: "DM Sans", sans-serif;
}

.nav-toggle {
    position: fixed;
    top: 22px;
    right: 22px;
    z-index: 50;
}

.nav-pill {
    width: 54px;
    height: 54px;
    border: 1px solid rgba(232, 223, 245, 0.2);
    border-radius: 999px;
    color: var(--text-primary);
    background: rgba(30, 10, 60, 0.42);
    backdrop-filter: blur(12px);
    cursor: pointer;
    box-shadow: 0 8px 32px rgba(13, 5, 32, 0.32), inset 0 0 22px rgba(61, 232, 199, 0.08);
    animation: pulse-attention 3s ease-in-out infinite;
    transition: transform 0.3s ease, background 0.3s ease;
}

.nav-pill:hover { background: rgba(30, 10, 60, 0.7); transform: scale(1.08); }
.nav-mark { display: block; font-size: 1.35rem; color: var(--accent-gold); }

.nav-menu {
    position: absolute;
    top: 66px;
    right: 0;
    min-width: 190px;
    padding: 10px;
    display: grid;
    gap: 4px;
    border: 1px solid rgba(232, 223, 245, 0.14);
    border-radius: 22px;
    background: rgba(13, 5, 32, 0.86);
    backdrop-filter: blur(12px);
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.32);
    opacity: 0;
    transform: translateY(-10px) scale(0.96);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.nav-menu.active { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.nav-link {
    padding: 11px 14px;
    color: var(--text-primary);
    text-decoration: none;
    border-radius: 14px;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.nav-link:hover { color: var(--accent-mint); background: rgba(61, 232, 199, 0.08); transform: translateX(-3px); }

.observatory-dome {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: radial-gradient(circle at 50% 120%, rgba(255, 107, 74, 0.18), transparent 38%), var(--bg-void);
}

.dome-background, .gradient-mesh, .sparkles, .orbit-shapes { position: absolute; inset: 0; }

.gradient-mesh::before {
    content: "";
    position: absolute;
    inset: -18%;
    background: conic-gradient(from 45deg at 30% 60%, #1e0a3c 0%, #ff6b4a 25%, #3de8c7 50%, #ff9eb8 75%, #1e0a3c 100%);
    filter: blur(80px);
    opacity: 0.82;
    animation: mesh-drift 18s ease-in-out infinite alternate;
}

.gradient-mesh::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 0 36%, rgba(13, 5, 32, 0.45) 72%, rgba(13, 5, 32, 0.94) 100%);
}

.sparkles { z-index: 2; }
.sparkle { position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size); fill: var(--accent-gold); opacity: 0.22; animation: sparkle var(--duration) ease-in-out infinite; }
.sparkle:nth-child(3n) { fill: var(--accent-mint); }
.sparkle:nth-child(4n) { fill: var(--accent-blush); }
.sparkle:nth-child(1) { animation-delay: -0.2s; } .sparkle:nth-child(2) { animation-delay: -1.1s; } .sparkle:nth-child(3) { animation-delay: -2.4s; } .sparkle:nth-child(4) { animation-delay: -0.8s; } .sparkle:nth-child(5) { animation-delay: -3.2s; } .sparkle:nth-child(6) { animation-delay: -1.7s; } .sparkle:nth-child(7) { animation-delay: -0.5s; } .sparkle:nth-child(8) { animation-delay: -2s; } .sparkle:nth-child(9) { animation-delay: -2.7s; } .sparkle:nth-child(10) { animation-delay: -1.3s; } .sparkle:nth-child(11) { animation-delay: -0.9s; } .sparkle:nth-child(12) { animation-delay: -3.6s; } .sparkle:nth-child(13) { animation-delay: -1.9s; } .sparkle:nth-child(14) { animation-delay: -2.9s; } .sparkle:nth-child(15) { animation-delay: -0.4s; } .sparkle:nth-child(16) { animation-delay: -3.1s; } .sparkle:nth-child(17) { animation-delay: -1.5s; } .sparkle:nth-child(18) { animation-delay: -2.2s; }

.orbit-shapes { z-index: 1; opacity: 0.74; }
.hexagram { fill: rgba(255, 209, 102, 0.16); stroke: rgba(255, 209, 102, 0.45); transform-origin: 150px 174px; animation: spin 30s linear infinite, lissajous-a 13s ease-in-out infinite; }
.planet { fill: var(--accent-gold); filter: drop-shadow(0 0 12px rgba(255, 209, 102, 0.5)); }
.orbit-ring { fill: none; stroke: rgba(61, 232, 199, 0.28); stroke-width: 2; }
.kite { fill: rgba(255, 158, 184, 0.18); stroke: rgba(255, 158, 184, 0.45); }
.drift-b { animation: lissajous-b 11s ease-in-out infinite; } .drift-c { animation: lissajous-c 16s ease-in-out infinite; } .drift-d { animation: lissajous-d 14s ease-in-out infinite; } .drift-e { animation: lissajous-e 12s ease-in-out infinite; }

.dome-content { position: relative; z-index: 5; text-align: center; padding: 32px; }
.site-title { font-family: "Space Grotesk", sans-serif; font-size: clamp(2.4rem, 5.5vw, 4.8rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; text-shadow: 0 12px 40px rgba(13, 5, 32, 0.48); }
.site-title span { display: inline-block; opacity: 0; transform: translateY(24px) scale(0.8) rotate(-5deg); animation: letter-bounce 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.site-title span:nth-child(1) { animation-delay: 0.40s; } .site-title span:nth-child(2) { animation-delay: 0.44s; } .site-title span:nth-child(3) { animation-delay: 0.48s; } .site-title span:nth-child(4) { animation-delay: 0.52s; } .site-title span:nth-child(5) { animation-delay: 0.56s; } .site-title span:nth-child(6) { animation-delay: 0.60s; } .site-title span:nth-child(7) { animation-delay: 0.64s; } .site-title span:nth-child(8) { animation-delay: 0.68s; } .site-title span:nth-child(9) { animation-delay: 0.72s; color: var(--accent-coral); } .site-title span:nth-child(10) { animation-delay: 0.76s; } .site-title span:nth-child(11) { animation-delay: 0.80s; } .site-title span:nth-child(12) { animation-delay: 0.84s; } .site-title span:nth-child(13) { animation-delay: 0.88s; } .site-title span:nth-child(14) { animation-delay: 0.92s; } .site-title span:nth-child(15) { animation-delay: 0.96s; }
.site-subtitle { margin-top: 14px; font-size: clamp(1rem, 2.5vw, 1.3rem); font-style: italic; color: rgba(232, 223, 245, 0.82); opacity: 0; transform: translateY(20px); animation: subtitle-in 0.65s ease-out 1.08s forwards; }
.subtitle-period { color: var(--accent-gold); animation: blink-period 2s ease-in-out infinite; }

.constellation-grid { position: relative; min-height: 100vh; padding: 108px 40px 116px; overflow: hidden; background: radial-gradient(circle at 12% 18%, rgba(61, 232, 199, 0.12), transparent 30%), radial-gradient(circle at 88% 82%, rgba(255, 107, 74, 0.12), transparent 34%), var(--bg-deep); }
.section-kicker { position: relative; z-index: 3; max-width: 1400px; margin: 0 auto 28px; font-family: "JetBrains Mono", monospace; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-mint); }
.section-star { position: absolute; width: 90px; height: 90px; fill: rgba(255, 209, 102, 0.12); stroke: rgba(255, 209, 102, 0.36); animation: spin 30s linear infinite; }
.top-star { right: 7vw; top: 44px; }
.grid-container { position: relative; z-index: 2; max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); grid-auto-flow: dense; grid-auto-rows: 210px; gap: 32px; }
.grid-card { position: relative; min-height: 210px; overflow: hidden; border-radius: 16px; box-shadow: 0 4px 24px rgba(var(--card-glow), 0.08); transform: rotate(var(--card-tilt)) scale(0.92); opacity: 0; cursor: pointer; transition: box-shadow 0.3s ease; }
.grid-card.revealed { animation: card-reveal 0.6s ease forwards; animation-delay: calc(var(--order, 0) * 80ms); }
.grid-card:hover { box-shadow: 0 8px 40px rgba(var(--card-glow), 0.2); }
.wide { grid-column: span 2; } .tall { grid-row: span 2; }
.card-gradient { position: absolute; inset: 0; background: radial-gradient(circle at var(--mesh-a), rgba(255, 209, 102, 0.36), transparent 34%), radial-gradient(circle at var(--mesh-b), rgba(61, 232, 199, 0.32), transparent 38%), radial-gradient(circle at 70% 20%, rgba(255, 158, 184, 0.27), transparent 42%), linear-gradient(135deg, rgba(255, 107, 74, 0.38), rgba(30, 10, 60, 0.62)); background-size: 150% 150%; background-position: 0% 0%; transition: background-position 0.6s ease, filter 0.6s ease; }
.grid-card:hover .card-gradient { background-position: 100% 100%; filter: saturate(1.18); }
.card-content { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; background: linear-gradient(180deg, rgba(13, 5, 32, 0.02), rgba(13, 5, 32, 0.84) 66%); }
.card-code { margin-bottom: auto; align-self: flex-start; padding: 6px 9px; border-radius: 999px; background: rgba(13, 5, 32, 0.3); color: var(--accent-gold); font-family: "JetBrains Mono", monospace; font-size: 0.68rem; letter-spacing: 0.08em; }
.card-title { font-family: "Outfit", sans-serif; font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 600; letter-spacing: 0.01em; color: var(--text-primary); }
.card-description { margin-top: 8px; font-size: clamp(0.95rem, 1.3vw, 1.1rem); line-height: 1.65; color: rgba(232, 223, 245, 0.76); }
.constellation-lines { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.constellation-path { fill: none; stroke: rgba(61, 232, 199, 0.22); stroke-width: 1; stroke-dasharray: 3 8; stroke-dashoffset: 900; }
.constellation-path.coral { stroke: rgba(255, 107, 74, 0.2); }
.constellation-path.draw { animation: draw-path 2s ease-out forwards; }

.process-orbit { position: relative; height: 100vh; min-height: 680px; overflow: hidden; background: radial-gradient(circle at center, rgba(30, 10, 60, 0.84), var(--bg-void) 70%); }
.orbit-field { position: absolute; inset: 0; display: grid; place-items: center; }
.orbit-track { position: absolute; border: 1px dashed rgba(123, 111, 166, 0.24); border-radius: 50%; }
.orbit-track-one { width: min(76vw, 680px); height: min(76vw, 680px); }
.orbit-track-two { width: min(52vw, 430px); height: min(52vw, 430px); border-color: rgba(61, 232, 199, 0.16); }
.orbit-center { position: relative; z-index: 3; display: grid; place-items: center; width: 210px; height: 210px; text-align: center; }
.orbit-center::after { content: ""; position: absolute; inset: 20px; border-radius: 50%; box-shadow: 0 0 60px 20px rgba(255, 209, 102, 0.15); animation: glow-pulse 2.5s ease-in-out infinite; }
.monopole-icon { width: 200px; height: 200px; animation: pulse-attention 2.5s ease-in-out infinite; }
.rose line { stroke: #ffd166; stroke-width: 4; stroke-linecap: round; } .rose circle { fill: #ffd166; }
.orbit-center p { position: absolute; bottom: 22px; font-family: "JetBrains Mono", monospace; font-size: 0.72rem; color: var(--accent-mint); letter-spacing: 0.12em; text-transform: uppercase; }
.orbit-container { position: absolute; inset: 0; animation: orbit-spin 24s linear infinite; }
.orbit-container.paused { animation-play-state: paused; }
.orbit-badge { position: absolute; top: 50%; left: 50%; width: 154px; transform: rotate(calc(var(--i) * 72deg)) translateX(min(35vw, 280px)) rotate(calc(var(--i) * -72deg)); transform-origin: 0 0; }
.badge-inner { min-height: 96px; padding: 12px 24px; display: grid; place-items: center; gap: 4px; border-radius: 999px; border: 1px solid rgba(232, 223, 245, 0.15); background: rgba(30, 10, 60, 0.7); backdrop-filter: blur(8px); box-shadow: 0 16px 42px rgba(0, 0, 0, 0.18); text-align: center; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s ease; }
.orbit-badge:hover .badge-inner { transform: scale(1.15); border-color: rgba(255, 209, 102, 0.38); }
.badge-number { font-family: "Space Grotesk", sans-serif; font-size: 1.35rem; font-weight: 700; color: var(--accent-gold); }
.badge-label { font-size: 0.82rem; font-weight: 500; color: var(--text-primary); }

.signal-footer { padding: 62px 40px 72px; background: var(--bg-void); border-top: 1px solid rgba(232, 223, 245, 0.1); }
.footer-content { max-width: 880px; margin: 0 auto; }
.transmission-label { margin-bottom: 14px; font-family: "JetBrains Mono", monospace; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.transmission-text { min-height: 4.4rem; color: var(--accent-mint); font-family: "JetBrains Mono", monospace; font-size: 0.85rem; line-height: 1.8; letter-spacing: 0.04em; text-shadow: 0 0 6px rgba(61, 232, 199, 0.4); }
.transmission-text::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 3px; vertical-align: -0.12em; background: var(--accent-mint); animation: cursor-blink 530ms steps(1) infinite; }
.footer-metadata { margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(232, 223, 245, 0.1); text-align: center; color: var(--text-muted); font-size: 0.9rem; }
.footer-signal { margin-top: 8px; font-family: "JetBrains Mono", monospace; font-size: 0.8rem; color: var(--accent-gold); letter-spacing: 0.02em; }

@keyframes pulse-attention { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.04); opacity: 1; } }
@keyframes mesh-drift { from { transform: translate3d(-2%, -1%, 0) rotate(0deg) scale(1); } to { transform: translate3d(2%, 1%, 0) rotate(12deg) scale(1.08); } }
@keyframes sparkle { 0%, 100% { opacity: 0.1; transform: scale(0.72) rotate(0deg); } 50% { opacity: 0.4; transform: scale(1.2) rotate(18deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes lissajous-a { 0%,100% { translate: 0 0; } 50% { translate: 26px -18px; } }
@keyframes lissajous-b { 0%,100% { translate: 0 0; } 33% { translate: -34px 22px; } 66% { translate: 18px 42px; } }
@keyframes lissajous-c { 0%,100% { translate: 0 0; } 50% { translate: -42px -16px; } }
@keyframes lissajous-d { 0%,100% { translate: 0 0; } 50% { translate: 30px 36px; } }
@keyframes lissajous-e { 0%,100% { translate: 0 0; } 50% { translate: 44px -30px; } }
@keyframes letter-bounce { to { opacity: 1; transform: translateY(0) scale(1) rotate(0); } }
@keyframes subtitle-in { to { opacity: 1; transform: translateY(0); } }
@keyframes blink-period { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@keyframes card-reveal { to { opacity: 1; transform: rotate(var(--card-tilt)) scale(1); } }
@keyframes draw-path { to { stroke-dashoffset: 0; } }
@keyframes glow-pulse { 0%, 100% { opacity: 0.64; transform: scale(0.95); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes cursor-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

@media (max-width: 760px) {
    .nav-toggle { top: 14px; right: 14px; }
    .nav-pill { width: 48px; height: 48px; }
    .constellation-grid { padding: 78px 18px 86px; }
    .grid-container { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); grid-auto-rows: 190px; gap: 20px; }
    .wide { grid-column: span 1; }
    .process-orbit { min-height: 620px; }
    .orbit-badge { width: 118px; transform: rotate(calc(var(--i) * 72deg)) translateX(min(36vw, 178px)) rotate(calc(var(--i) * -72deg)); }
    .badge-inner { min-height: 82px; padding: 10px 14px; }
    .badge-label { font-size: 0.72rem; }
    .orbit-center { width: 160px; height: 160px; }
    .monopole-icon { width: 155px; height: 155px; }
    .signal-footer { padding-inline: 22px; }
}