@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root { --accent: #7cff32; --bg: #0b1020; --panel: #131b30; --text: #f5f7ff; --muted: #aab4cb; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: 'DM Sans', Arial, sans-serif; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; max-width:1160px; padding:1.25rem 1.5rem; margin:auto; }
.brand { font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-.03em; }
nav { display:flex; gap:1.5rem; color:var(--muted); font-size:.95rem; }
nav a:hover { color:var(--accent); }
.menu-button { display:none; background:transparent; color:var(--text); border:1px solid #39445e; padding:.5rem .8rem; border-radius:.6rem; }
.hero { position:relative; overflow:hidden; min-height:440px; padding:6rem max(1.5rem, calc((100vw - 1100px)/2)); background:radial-gradient(ellipse at 85% 35%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 36%), linear-gradient(135deg,#111a30,#0b1020 70%); }
.hero > * { position:relative; z-index:1; }
.eyebrow { color:var(--accent); font-size:.76rem; font-weight:700; letter-spacing:.18em; }
h1,h2 { font-family:'Space Grotesk',sans-serif; line-height:1.12; }
h1 { max-width:850px; margin:.5rem 0 1rem; font-size:clamp(2.6rem,7vw,5.6rem); letter-spacing:-.055em; }
.intro { max-width:600px; color:var(--muted); font-size:1.15rem; }
.cta { display:inline-flex; align-items:center; gap:.75rem; margin-top:1.2rem; padding:.85rem 1.15rem; border-radius:.75rem; color:#0b1020; background:var(--accent); font-weight:700; }
.orb { position:absolute!important; border:1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius:50%; pointer-events:none; }
.orb-one { width:270px; height:270px; right:10%; top:17%; box-shadow:0 0 80px color-mix(in srgb, var(--accent) 12%, transparent), inset 0 0 50px color-mix(in srgb, var(--accent) 8%, transparent); }
.orb-two { width:150px; height:150px; right:16%; top:29%; border-style:dashed; }
.content { max-width:1160px; margin:auto; padding:5rem 1.5rem; }
.section-title { font-size:clamp(2rem,4vw,3rem); margin:.4rem 0 2rem; letter-spacing:-.04em; }
.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.card { min-height:200px; padding:1.5rem; border:1px solid #26314a; border-radius:1rem; background:linear-gradient(145deg,var(--panel),#101729); }
.number { display:inline-grid; place-items:center; width:2.2rem; height:2.2rem; border-radius:.7rem; color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); font-weight:700; font-size:.8rem; }
.card h2 { margin:1.2rem 0 .5rem; font-size:1.3rem; }
.card p,.about p { color:var(--muted); }
.about { padding:3rem max(1.5rem, calc((100vw - 1100px)/2)); background:#101729; }
.about h2 { font-size:2rem; }
.about p { max-width:760px; }
footer { display:flex; justify-content:space-between; gap:1rem; max-width:1160px; padding:1.5rem; margin:auto; color:var(--muted); font-size:.85rem; }
@media(max-width:700px) { .hero { min-height:400px; padding-top:4.5rem; padding-bottom:4.5rem; } .orb-one { right:-100px; top:20%; } .orb-two { right:-40px; top:32%; } .cards { grid-template-columns:1fr; } .menu-button { display:block; } nav { display:none; position:absolute; z-index:5; top:65px; right:1rem; padding:1rem; border-radius:.8rem; background:var(--panel); flex-direction:column; } nav.open { display:flex; } .topbar { position:relative; } }