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

:root { color-scheme: dark; font-family: 'DM Sans', sans-serif; color: #f8f7ff; background: #171629; }
* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-height: 100vh; }
.page { min-height: 100vh; position: relative; overflow: hidden; background: radial-gradient(circle at 72% 48%, #3a2861 0, #211b3c 27%, transparent 54%), radial-gradient(circle at 0 100%, #292040 0, transparent 43%), #171629; display: flex; flex-direction: column; }
.page::before { content: ''; position: absolute; inset: 0; opacity: .12; pointer-events: none; background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(90deg, transparent 30%, #000 100%); }
.topbar, .footer, .hero { width: min(100% - 96px, 1380px); margin-inline: auto; position: relative; z-index: 1; }
.topbar { padding-block: 42px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: #fff; font: 800 28px/1 'Manrope', sans-serif; letter-spacing: -.08em; }
.brand-dot { color: #ff4aa2; }
.brand-mark, .visual-mark { position: relative; display: inline-block; width: 29px; height: 28px; }
.brand-mark span, .visual-mark span { position: absolute; display: block; width: 7px; height: 22px; border-radius: 8px; background: #ff4aa2; transform: rotate(38deg); }
.brand-mark span:nth-child(1), .visual-mark span:nth-child(1) { left: 2px; top: 5px; }
.brand-mark span:nth-child(2), .visual-mark span:nth-child(2) { left: 11px; top: 0; background: #9f83ff; }
.brand-mark span:nth-child(3), .visual-mark span:nth-child(3) { left: 20px; top: 5px; }
.portal-label { padding: 9px 13px; border: 1px solid #ffffff30; border-radius: 100px; color: #c8c1df; font: 700 11px/1 'Manrope', sans-serif; letter-spacing: .18em; }
.hero { flex: 1; min-height: 620px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr); align-items: center; gap: 48px; padding-block: 55px 85px; }
.hero-copy { max-width: 660px; }
.eyebrow { display: flex; align-items: center; gap: 11px; margin: 0 0 29px; color: #c8b8ff; font: 700 12px/1.4 'Manrope', sans-serif; letter-spacing: .2em; }
.eyebrow-line { width: 27px; height: 2px; background: #ff4aa2; }
h1 { margin: 0; font: 800 clamp(50px, 6.1vw, 90px)/1.08 'Manrope', sans-serif; letter-spacing: -.075em; }
h1 em { font-style: normal; color: #ff64b2; }
.lead { max-width: 560px; margin: 31px 0 30px; color: #c7c3d7; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.65; }
.status { display: inline-flex; align-items: center; gap: 11px; padding: 13px 17px; border: 1px solid #a88cff50; border-radius: 12px; background: #a88cff14; color: #e3d9ff; font-size: 14px; font-weight: 700; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff64b2; box-shadow: 0 0 0 5px #ff64b226; }
.visual { position: relative; width: min(100%, 580px); aspect-ratio: 1; margin-left: auto; }
.orbit { position: absolute; border: 1px solid #bb9dff38; border-radius: 50%; inset: 9%; }
.orbit-two { inset: 23%; border-color: #bb9dff60; }
.orbit-three { inset: 36%; border-color: #ff64b260; }
.visual::before { content: ''; position: absolute; inset: 4%; border-radius: 50%; background: radial-gradient(circle, #a777ff30 0, transparent 64%); filter: blur(30px); }
.visual-center { position: absolute; inset: 42%; display: grid; place-items: center; border-radius: 30%; background: linear-gradient(145deg, #ff70b9, #a681ff); box-shadow: 0 24px 70px #ec53a866, inset 0 1px #ffffff90; transform: rotate(-12deg); }
.visual-mark { transform: scale(2) rotate(12deg); }
.visual-mark span { background: #fff !important; }
.satellite { position: absolute; display: block; width: 14px; height: 14px; border-radius: 50%; background: #ff70b9; box-shadow: 0 0 30px #ff70b9aa; }
.satellite-one { top: 11%; left: 45%; }
.satellite-two { top: 56%; right: 12%; width: 10px; height: 10px; background: #b79cff; }
.satellite-three { bottom: 18%; left: 19%; width: 9px; height: 9px; background: #b79cff; }
.footer { display: flex; justify-content: space-between; gap: 20px; padding-block: 28px 37px; border-top: 1px solid #ffffff20; color: #8e89aa; font-size: 13px; }
@media (max-width: 800px) { .topbar, .footer, .hero { width: min(100% - 40px, 650px); } .topbar { padding-block: 29px; } .hero { grid-template-columns: 1fr; min-height: auto; gap: 0; padding-block: 85px 40px; } .visual { width: min(70%, 350px); margin: -15px auto 0; } h1 { font-size: clamp(48px, 10vw, 75px); } .lead { max-width: 600px; } }
@media (max-width: 480px) { .brand { font-size: 25px; } .portal-label { font-size: 9px; padding: 8px; } .hero { padding-top: 75px; } .visual { width: min(82%, 300px); } .footer { font-size: 12px; } }
@media (prefers-reduced-motion: no-preference) { .satellite-one { animation: glow 4s ease-in-out infinite; } .satellite-two { animation: glow 4s ease-in-out 1.3s infinite; } @keyframes glow { 50% { opacity: .4; transform: scale(.7); } } }