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

:root {
  --base: #040404;
  --panel: #0c0d10;
  --glow: #37ff9f22;
  --edge: #37ff9f;
  --text: #f7f7f7;
  --muted: rgba(247,247,247,0.65);
  font-family: "Space Grotesk", system-ui, sans-serif;
}

* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--base); color:var(--text); }

.noise { position:fixed; inset:0; pointer-events:none; background-image:linear-gradient(rgba(55,255,159,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(55,255,159,0.07) 1px, transparent 1px), radial-gradient(circle at 30% 20%, rgba(55,255,159,0.2), transparent 55%), radial-gradient(circle at 70% 10%, rgba(55,255,159,0.15), transparent 60%); background-size:60px 60px, 60px 60px, 100% 100%, 100% 100%; background-position:0 0, 0 0, 0 0, 0 0; opacity:0.9; mix-blend-mode:screen; }

header { position:fixed; top:0; left:0; right:0; z-index:10; display:flex; align-items:center; justify-content:space-between; padding:18px 48px; background:rgba(4,4,4,0.85); border-bottom:1px solid rgba(55,255,159,0.2); }
.brand { display:flex; align-items:center; gap:12px; }
.brand-mark { width:58px; height:58px; border-radius:18px; border:1px solid rgba(55,255,159,0.4); overflow:hidden; box-shadow:0 0 25px rgba(55,255,159,0.5); }
.brand-mark img { width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }
nav { display:flex; gap:16px; flex-wrap:wrap; }
nav a { color:var(--muted); text-decoration:none; letter-spacing:0.1em; text-transform:uppercase; font-size:0.75rem; }
nav a:hover { color:var(--text); }

main { padding-top:120px; }

.hero { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:60px 4vw 80px; position:relative; overflow:hidden; }
.hero-shell { position:absolute; inset:0; }
.hero-ring { position:absolute; width:60vw; height:60vw; max-width:900px; max-height:900px; border:1px solid rgba(55,255,159,0.3); border-radius:50%; left:50%; top:50%; transform:translate(-50%, -50%); }
.hero-pillar { position:absolute; width:480px; max-width:70vw; height:80vh; border:1px solid rgba(55,255,159,0.2); border-radius:40px; left:50%; top:50%; transform:translate(-50%, -50%) rotateX(55deg); background:linear-gradient(180deg, rgba(55,255,159,0.08), transparent); }
.hero-grid { position:absolute; inset:15% 10%; border:1px solid rgba(55,255,159,0.2); }
.hero-copy { width:100%; max-width:960px; text-align:center; margin:0 auto; position:relative; }
.eyebrow { text-transform:uppercase; letter-spacing:0.4em; font-size:0.8rem; color:var(--muted); }
.hero-copy h1 { font-size:clamp(2.5rem, 5vw, 4.5rem); line-height:1.2; margin:18px 0; }
.lead { font-size:1.2rem; line-height:1.6; color:var(--muted); }
.hero-stats { margin:32px auto; display:flex; gap:18px; flex-wrap:wrap; justify-content:center; }
.hero-stats article { flex:1 1 220px; max-width:280px; padding:18px; border-radius:18px; border:1px solid rgba(55,255,159,0.35); background:rgba(4,4,4,0.6); box-shadow:0 0 35px rgba(55,255,159,0.2); text-transform:uppercase; letter-spacing:0.2em; font-size:0.7rem; }
.hero-stats strong { display:block; margin-top:8px; font-size:1.8rem; letter-spacing:0.15em; color:var(--text); }
.hero-cta { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }

.cta { background:var(--edge); color:#041205; border:none; border-radius:999px; padding:12px 28px; font-weight:600; text-decoration:none; letter-spacing:0.05em; }
.ghost { border:1px solid rgba(55,255,159,0.35); background:transparent; color:var(--text); border-radius:999px; padding:12px 28px; font-weight:600; }

.panel { width:min(1200px, 100% - 64px); margin:60px auto; padding:40px; background:var(--panel); border-radius:32px; border:1px solid rgba(55,255,159,0.25); box-shadow:0 0 60px var(--glow); position:relative; }
.panel-head h2 { margin:8px 0 12px; font-size:2.4rem; }
.panel-head p { margin:0; color:var(--muted); }

.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:20px; }
.card { padding:24px; border-radius:24px; border:1px solid rgba(55,255,159,0.25); background:rgba(6,6,8,0.9); box-shadow:0 0 35px rgba(55,255,159,0.18); }
.card-icon { width:56px; height:56px; border-radius:16px; border:1px solid rgba(55,255,159,0.4); display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:var(--edge); }
.card ul { list-style:none; padding:0; margin:16px 0 0; display:flex; flex-direction:column; gap:6px; }
.card li { padding:6px 0; border-bottom:1px solid rgba(247,247,247,0.05); color:var(--muted); }

.grid-ribbon { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:20px; }
.grid-ribbon article { padding:24px; border-radius:30px 6px 30px 6px; border:1px solid rgba(55,255,159,0.25); background:rgba(5,6,7,0.9); box-shadow:0 0 30px rgba(55,255,159,0.15); }
.grid-ribbon h3 { margin-top:12px; }
.chip { width:48px; height:48px; border-radius:14px; border:1px solid rgba(55,255,159,0.35); display:flex; align-items:center; justify-content:center; color:var(--edge); }

.flow-band { display:flex; gap:20px; flex-wrap:wrap; }
.flow-band article { flex:1; min-width:220px; padding:24px; border-radius:28px; border:1px solid rgba(55,255,159,0.3); background:rgba(7,7,9,0.9); box-shadow:0 0 35px rgba(55,255,159,0.16); position:relative; }
.node { width:54px; height:54px; border-radius:50%; border:1px solid rgba(55,255,159,0.4); display:flex; align-items:center; justify-content:center; margin-bottom:12px; color:var(--edge); }
.flow-band article:not(:last-child)::after { content:""; position:absolute; top:50%; right:-12px; width:24px; height:1px; background:rgba(55,255,159,0.4); }

.future-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:18px; }
.future-grid article { padding:22px; border-radius:22px; border:1px solid rgba(55,255,159,0.25); background:rgba(6,7,9,0.9); box-shadow:0 0 30px rgba(55,255,159,0.14); }

.contact { text-align:center; }
.contact .cta { margin-top:24px; }

svg { color:var(--edge); }

@media (max-width:768px) {
  header { padding:16px 24px; flex-direction:column; gap:12px; }
  nav { justify-content:center; }
  .hero { padding:140px 20px 80px; }
  .panel { width:calc(100% - 32px); padding:28px; }
  .flow-band article:not(:last-child)::after { display:none; }
}