:root {
  color-scheme: dark;
  --bg: #080b12;
  --panel: rgba(16, 22, 34, .76);
  --text: #f1f4fb;
  --muted: #8791a6;
  --cyan: #65f3db;
  --violet: #9b8cff;
  --line: rgba(190, 205, 235, .13);
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  margin: 0; min-height: 100vh; overflow-x: hidden; position: relative;
  background: radial-gradient(ellipse at 50% 35%, #12182a 0%, var(--bg) 56%);
  color: var(--text); font-family: "Space Grotesk", system-ui, sans-serif;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .25;
  background-image: linear-gradient(rgba(130,150,190,.055) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(130,150,190,.055) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, black, transparent 92%);
}
.noise { position: fixed; inset: 0; pointer-events: none; z-index: 3; opacity: .035; }
.orb { position: fixed; border-radius: 50%; filter: blur(1px); pointer-events: none; }
.orb-one { width: 390px; height: 390px; right: -150px; top: 14%; border: 1px solid rgba(101,243,219,.17); box-shadow: 0 0 90px rgba(101,243,219,.055), inset 0 0 70px rgba(101,243,219,.035); }
.orb-two { width: 250px; height: 250px; left: -135px; bottom: 9%; border: 1px solid rgba(155,140,255,.18); box-shadow: 0 0 80px rgba(155,140,255,.07); }
.topbar, main, footer { width: min(1080px, calc(100% - 48px)); margin: 0 auto; }
.topbar { height: 92px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); position: relative; z-index: 1; }
.wordmark { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--text); font-size: 15px; font-weight: 700; letter-spacing: -.04em; }
.mark { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(101,243,219,.45); border-radius: 9px; color: var(--cyan); font-size: 20px; }
.mark span { color: var(--violet); }
.muted { color: #7c8498; font-weight: 500; }
.top-status, .eyebrow, .card-top, .log-line, .card-bottom, .scroll-note, .coordinates, .version, footer { font-family: "DM Mono", monospace; }
.top-status { display: flex; gap: 9px; align-items: center; color: #8d98ad; font-size: 10px; letter-spacing: .13em; }
.pulse, .tiny-dot, .footer-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px rgba(101,243,219,.85); }
.hero { padding: 94px 0 46px; position: relative; z-index: 1; }
.eyebrow { display: flex; align-items: center; gap: 12px; color: var(--cyan); font-size: 10px; letter-spacing: .17em; }
.eyebrow-line { display: inline-block; width: 27px; height: 1px; background: var(--cyan); }
h1 { margin: 27px 0 20px; font-size: clamp(64px, 10vw, 112px); line-height: .89; letter-spacing: -.085em; font-weight: 600; }
.gradient-text { background: linear-gradient(105deg, var(--cyan) 10%, #9bd9f6 48%, var(--violet) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.intro { color: #a6afc2; font-size: clamp(16px, 2vw, 19px); line-height: 1.7; margin: 28px 0 39px; }
.signal-card { max-width: 680px; border: 1px solid rgba(158,176,214,.2); background: var(--panel); backdrop-filter: blur(16px); border-radius: 13px; overflow: hidden; box-shadow: 0 20px 80px rgba(0,0,0,.2); }
.card-top { display: flex; justify-content: space-between; gap: 12px; padding: 17px 20px; border-bottom: 1px solid var(--line); color: #929db3; font-size: 9px; letter-spacing: .11em; }
.card-top > span:first-child { display: flex; align-items: center; gap: 9px; }
.tiny-dot { width: 5px; height: 5px; }
.log-line { display: grid; grid-template-columns: 66px 142px 1fr; gap: 10px; padding: 13px 20px; border-bottom: 1px solid rgba(190,205,235,.065); font-size: 10px; letter-spacing: .015em; }
.log-time { color: #59657d; }
.log-ok { color: var(--cyan); }
.log-warn { color: #c0adff; }
.log-desc { color: #a1abc0; }
.card-bottom { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; color: #626e83; font-size: 8px; letter-spacing: .14em; }
.mini-bars { display: flex; align-items: end; gap: 3px; height: 13px; }
.mini-bars i { display: block; width: 3px; border-radius: 2px; background: var(--cyan); opacity: .75; animation: bars 1s ease-in-out infinite alternate; }
.mini-bars i:nth-child(1), .mini-bars i:nth-child(5) { height: 5px; }
.mini-bars i:nth-child(2), .mini-bars i:nth-child(7) { height: 9px; animation-delay: .3s; }
.mini-bars i:nth-child(3), .mini-bars i:nth-child(6) { height: 12px; animation-delay: .6s; }
.mini-bars i:nth-child(4), .mini-bars i:nth-child(8) { height: 7px; animation-delay: .15s; }
@keyframes bars { to { opacity: .25; transform: scaleY(.55); } }
.hero-footer { max-width: 680px; margin-top: 27px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.scroll-note, .coordinates { color: #67738a; font-size: 8px; letter-spacing: .12em; display: flex; align-items: center; gap: 9px; }
.scroll-dot { width: 4px; height: 4px; background: var(--violet); border-radius: 50%; }
.bottom-note { display: flex; align-items: center; gap: 18px; border-top: 1px solid var(--line); padding: 27px 0 31px; position: relative; z-index: 1; }
.note-symbol { color: var(--violet); font-size: 25px; }
.bottom-note strong { font-size: 13px; font-weight: 600; }
.bottom-note p { margin: 5px 0 0; color: #7e899e; font-size: 12px; }
.version { margin-left: auto; text-align: right; color: #9c9fb8; font-size: 9px; line-height: 1.8; letter-spacing: .08em; }
.version span { color: #566178; font-size: 8px; }
footer { min-height: 65px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 18px; color: #5c677c; font-size: 8px; letter-spacing: .08em; position: relative; z-index: 1; }
.footer-center { text-align: center; }
.footer-right { display: flex; align-items: center; gap: 8px; }
.footer-dot { width: 4px; height: 4px; background: #8075dc; box-shadow: none; }
@media (max-width: 620px) {
  .topbar, main, footer { width: calc(100% - 36px); }
  .topbar { height: 74px; }
  .hero { padding-top: 72px; }
  .log-line { grid-template-columns: 53px 1fr; gap: 6px 9px; padding: 12px 14px; }
  .log-desc { grid-column: 2; }
  .card-top, .card-bottom { padding-left: 14px; padding-right: 14px; }
  .card-top { font-size: 8px; }
  .hero-footer { gap: 12px; }
  .bottom-note { align-items: flex-start; }
  .version { font-size: 8px; }
  footer { padding: 17px 0; flex-wrap: wrap; line-height: 1.6; }
  .footer-center { order: 3; width: 100%; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }