@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { --ink: #07111f; --panel: #0d1d31; --blue: #325da1; --cyan: #58d7ff; --white: #f4f7fb; --muted: #91a0b5; --line: rgba(173, 205, 240, .17); }
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body { background: var(--ink); color: var(--white); font-family: 'Space Grotesk', sans-serif; overflow-x: hidden; }
body::before { background: radial-gradient(circle at 72% 8%, rgba(50, 93, 161, .35), transparent 33%), linear-gradient(112deg, rgba(7, 17, 31, .97) 32%, rgba(7, 17, 31, .78)), url('img/Backgroundimage.jpg') center / cover fixed; content: ''; inset: 0; opacity: .7; pointer-events: none; position: fixed; z-index: -2; }
body::after { background-image: linear-gradient(rgba(88, 215, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(88, 215, 255, .035) 1px, transparent 1px); background-size: 70px 70px; content: ''; inset: 0; opacity: .55; pointer-events: none; position: fixed; z-index: -1; }
a { color: inherit; text-decoration: none; }
.noise { height: 100%; inset: 0; opacity: .025; pointer-events: none; position: fixed; z-index: 5; }
.site-header, main, footer { max-width: 1240px; margin: auto; padding-left: 36px; padding-right: 36px; }
.site-header { align-items: center; display: grid; grid-template-columns: 1fr auto 1fr; padding-top: 27px; position: relative; z-index: 10; }
.brand { justify-self: start; }
.brand { align-items: center; display: flex; font-size: 13px; font-weight: 700; gap: 10px; letter-spacing: .14em; }
.brand-mark { display: inline-block; height: 28px; object-fit: cover; object-position: center; transform: skew(-10deg); width: 28px; }
.nav-links { display: flex; gap: 35px; justify-self: center; }
.menu-toggle { display: none; }
.nav-links .mobile-cta { display: none; }
.nav-links a, .header-cta { color: var(--muted); font-size: 14px; font-weight: 600; }
.nav-links a { font-size: 22px; font-weight: 700; }
.nav-links a:hover, .social-links a:hover { color: var(--cyan); }
.header-cta { align-items: center; background: transparent; border: 1px solid var(--line); color: var(--white); cursor: default; display: inline-flex; font: 600 16px 'Space Grotesk', sans-serif; justify-self: end; padding: 14px 22px; }
.header-cta:hover { color: var(--cyan); }
.header-cta span, .primary-button span { color: var(--cyan); margin-left: 10px; }
.hero { align-items: center; display: grid; gap: 90px; grid-template-columns: minmax(0, 1.05fr) minmax(380px, .85fr); min-height: 735px; padding-top: 45px; }
.eyebrow, .section-kicker, .mono-label, .contract-label, .panel-top, .panel-bottom, .feature-number, footer { font-family: 'DM Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow { color: var(--cyan); font-size: 14px; margin-bottom: 27px; }
.status-dot { background: var(--cyan); border-radius: 50%; box-shadow: 0 0 13px var(--cyan); display: inline-block; height: 6px; margin: 0 8px 1px 0; width: 6px; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.055em; }
h1 { font-size: clamp(58px, 8vw, 112px); line-height: .92; max-width: 680px; }
h1 em, h2 span { color: var(--cyan); font-style: normal; }
.hero-text { color: var(--muted); font-size: 17px; line-height: 1.6; margin: 32px 0 30px; max-width: 500px; }
.hero-actions { align-items: center; display: flex; gap: 27px; }
.primary-button { background: var(--cyan); color: var(--ink); font-size: 13px; font-weight: 700; padding: 15px 19px; }
.primary-button:hover { box-shadow: 0 0 24px rgba(88, 215, 255, .35); transform: translateY(-2px); }
.text-link { color: var(--muted); font-size: 12px; }
.text-link span { color: var(--cyan); margin-left: 7px; }
.contract-row { align-items: center; border-bottom: 1px solid var(--line); color: var(--muted); display: flex; font-family: 'DM Mono', monospace; font-size: 10px; gap: 13px; margin-top: 61px; max-width: 540px; overflow: hidden; padding-bottom: 12px; }
.contract-label { color: var(--cyan); font-size: 9px; }
.contract-row #caText { color: var(--white); font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.signal-panel { background: rgba(13, 29, 49, .78); border: 1px solid var(--line); min-height: 455px; padding: 18px 20px; position: relative; }
.signal-panel::after { border: 1px solid var(--cyan); border-left: 0; border-bottom: 0; content: ''; height: 34px; position: absolute; right: -1px; top: -1px; width: 34px; }
.panel-top, .panel-bottom { color: var(--muted); display: flex; font-size: 9px; justify-content: space-between; }
.panel-live { color: var(--cyan); }
.orbit-wrap { align-items: center; display: flex; height: 372px; justify-content: center; position: relative; }
.orbit { border: 1px solid rgba(88, 215, 255, .42); border-radius: 50%; position: absolute; }
.orbit-one { height: 270px; transform: rotate(33deg) skewY(-17deg); width: 270px; }
.orbit-two { border-color: rgba(255,255,255,.15); height: 205px; transform: rotate(-38deg) skewY(15deg); width: 315px; }
.orbit::after, .orbit::before { background: var(--cyan); border-radius: 50%; box-shadow: 0 0 10px var(--cyan); content: ''; height: 7px; position: absolute; width: 7px; }
.orbit::after { left: 18%; top: 19%; }.orbit::before { bottom: 11%; right: 18%; }
.core { align-items: center; background: var(--blue); border: 5px solid rgba(88, 215, 255, .22); border-radius: 50%; box-shadow: 0 0 50px rgba(50, 93, 161, .75); display: flex; flex-direction: column; height: 128px; justify-content: center; overflow: hidden; position: relative; width: 128px; }
.core span { font-size: 31px; font-weight: 700; letter-spacing: -.08em; }.core small { color: #c8e6f5; font: 8px/1.25 'DM Mono', monospace; letter-spacing: .12em; margin-top: 5px; text-align: center; }
.node { color: var(--muted); font: 9px/1.4 'DM Mono', monospace; letter-spacing: .09em; position: absolute; }.node b { color: var(--white); font-weight: 400; }.node-one { left: 7%; top: 24%; }.node-two { bottom: 22%; right: 5%; text-align: right; }.node-three { bottom: 8%; left: 12%; }
.intro-band { border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); display: grid; gap: 50px; grid-template-columns: .65fr 1fr 1fr; padding: 87px 0; }
.section-kicker { color: var(--cyan); font-size: 10px; }.intro-band h2, .community h2 { font-size: clamp(36px, 4.4vw, 59px); line-height: .98; }.intro-band > p:last-child, .community-copy > p { color: var(--muted); font-size: 15px; line-height: 1.7; max-width: 355px; }
.features { padding: 105px 0 120px; }.section-heading { display: flex; justify-content: space-between; }.mono-label { color: var(--muted); font-size: 10px; }.mono-label span { color: var(--cyan); margin-left: 9px; }.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 43px; }.feature-card { border: 1px solid var(--line); min-height: 245px; padding: 26px; position: relative; transition: border-color .25s, transform .25s; }.feature-card:hover { border-color: rgba(88,215,255,.65); transform: translateY(-5px); }.feature-highlight { background: linear-gradient(135deg, rgba(50,93,161,.72), rgba(13,29,49,.72)); }.feature-number { color: var(--cyan); font-size: 10px; }.feature-card h3 { font-size: 24px; margin: 57px 0 14px; }.feature-card p { color: var(--muted); font-size: 13px; line-height: 1.6; max-width: 285px; }.feature-line { background: var(--cyan); bottom: 25px; height: 2px; left: 26px; position: absolute; width: 34px; }
.community { align-items: end; border-top: 1px solid var(--line); display: grid; gap: 100px; grid-template-columns: 1fr 1fr; padding: 105px 0 125px; }.community-copy { max-width: 430px; }.social-links { border-top: 1px solid var(--line); display: flex; gap: 34px; margin-top: 37px; padding-top: 16px; }.social-links a { color: var(--white); font: 500 13px 'DM Mono', monospace; }.social-links span { color: var(--cyan); margin-left: 16px; }
.image-section { display: grid; gap: 15px; grid-template-columns: repeat(3, 1fr); padding: 0 0 105px; }.image-slot { aspect-ratio: 2 / 3; background: rgba(13, 29, 49, .42); border: 1px solid var(--line); overflow: hidden; }.image-slot img { display: block; height: 100%; object-fit: contain; object-position: center; width: 100%; }
footer { border-top: 1px solid var(--line); color: var(--muted); display: flex; font-size: 9px; justify-content: space-between; padding-bottom: 26px; padding-top: 20px; }
@media (max-width: 800px) { .site-header, main, footer { padding-left: 20px; padding-right: 20px; }.site-header { grid-template-columns: minmax(0, 1fr) auto auto; }.header-cta:not(.mobile-cta) { display: none; }.nav-links { background: rgba(13, 29, 49, .98); border: 1px solid var(--line); display: none; flex-direction: column; gap: 0; justify-self: auto; padding: 8px 0; position: absolute; right: 20px; top: calc(100% + 12px); width: min(220px, calc(100vw - 40px)); z-index: 20; }.nav-links.is-open { display: flex; }.nav-links a { padding: 12px 16px; }.nav-links .mobile-cta { display: flex; justify-content: center; margin: 8px 12px 4px; padding: 11px 16px; }.menu-toggle { align-items: center; background: transparent; border: 1px solid var(--line); cursor: pointer; display: flex; flex-direction: column; gap: 4px; height: 40px; justify-content: center; padding: 0; position: relative; width: 40px; z-index: 21; }.menu-toggle span { background: var(--white); display: block; height: 2px; transition: transform .2s, opacity .2s; width: 18px; }.menu-toggle.is-open span:first-child { transform: translateY(6px) rotate(45deg); }.menu-toggle.is-open span:nth-child(2) { opacity: 0; }.menu-toggle.is-open span:last-child { transform: translateY(-6px) rotate(-45deg); }.hero { display: flex; flex-direction: column; gap: 55px; min-height: 0; padding-bottom: 90px; padding-top: 90px; }.hero-copy { width: 100%; }.signal-panel { min-width: 0; width: 100%; }.intro-band, .community { display: block; }.intro-band h2 { margin: 25px 0; }.community-copy { margin-top: 35px; }.feature-grid, .image-section { grid-template-columns: 1fr; }.features { padding-bottom: 90px; padding-top: 80px; }.intro-band, .community { padding: 75px 0; }.image-section { padding-bottom: 75px; } }
@media (max-width: 480px) { .site-header { gap: 8px; padding-top: 18px; }.brand { font-size: 11px; gap: 7px; }.brand-mark { height: 24px; width: 24px; }.header-cta { font-size: 13px; padding: 9px 11px; }.menu-toggle { height: 36px; width: 36px; }.hero { gap: 42px; padding-bottom: 70px; padding-top: 70px; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }.contract-row { font-size: 8px; margin-top: 42px; }.signal-panel { min-height: 390px; padding-left: 14px; padding-right: 14px; }.orbit-wrap { height: 315px; transform: scale(.82); }.intro-band h2, .community h2 { font-size: 41px; }.section-heading { align-items: flex-start; flex-direction: column; gap: 16px; }.social-links { align-items: flex-start; flex-direction: column; gap: 18px; }.social-links span { margin-left: 10px; }footer { flex-direction: column; gap: 10px; line-height: 1.5; } }