:root {
  --base: #010922;
  --panel: rgba(5, 17, 51, 0.9);
  --accent: #4d7dff;
  --accent-soft: #9bb5ff;
  --text: #f1f4ff;
  --muted: rgba(241, 244, 255, 0.75);
  font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
}

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

.grid { position:fixed; inset:0; pointer-events:none; background:radial-gradient(circle at 20% 10%, rgba(77,125,255,0.25), transparent 60%), radial-gradient(circle at 70% 0%, rgba(155,181,255,0.2), transparent 60%), linear-gradient(180deg, rgba(0,0,0,0.6), transparent); }

header { position:fixed; top:0; left:0; right:0; z-index:10; display:flex; justify-content:space-between; align-items:center; padding:18px 40px; backdrop-filter:blur(16px); background:rgba(1,9,34,0.6); border-bottom:1px solid rgba(255,255,255,0.1); }
main { padding-top:120px; }

.brand { display:flex; align-items:center; gap:12px; }
.brand-mark { width:54px; height:54px; border-radius:20%; border:1px solid rgba(255,255,255,0.15); background:rgba(77,125,255,0.2); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.brand-mark img { width:100%; height:100%; object-fit:cover; border-radius:20%; }

nav { display:flex; gap:18px; flex-wrap:wrap; }
nav a { color:var(--muted); text-decoration:none; font-size:0.9rem; letter-spacing:0.08em; }

.cta { background:linear-gradient(120deg, var(--accent), var(--accent-soft)); color:#050d2b; border:none; border-radius:999px; padding:11px 26px; font-weight:600; text-decoration:none; box-shadow:0 20px 45px rgba(77,125,255,0.35); }
.ghost { border:1px solid rgba(255,255,255,0.3); color:var(--text); border-radius:999px; padding:11px 24px; background:transparent; font-weight:600; }

.hero { min-height:100vh; display:flex; flex-direction:column; justify-content:flex-start; gap:32px; padding:120px 40px 80px; position:relative; text-align:center; }
.hero-stage { position:absolute; inset:0; pointer-events:none; }
.orb { position:absolute; width:280px; height:280px; border-radius:50%; filter:blur(10px); opacity:0.6; animation:float 10s ease-in-out infinite; }
.orb-a { top:20%; left:15%; background:radial-gradient(circle, rgba(77,125,255,0.7), transparent); }
.orb-b { bottom:18%; right:12%; background:radial-gradient(circle, rgba(155,181,255,0.7), transparent); animation-delay:3s; }
.wireframe { position:absolute; left:50%; top:50%; width:420px; height:420px; transform:translate(-50%, -50%) rotateX(65deg); border:1px solid rgba(255,255,255,0.1); border-radius:50%; box-shadow:0 0 60px rgba(77,125,255,0.3); animation:spin 14s linear infinite; }
.hero-copy { max-width:100%; margin:0 auto; position:relative; }
.hero-copy h1 { font-size:clamp(2.8rem, 4vw, 4rem); margin:16px 0; line-height:1.25; }
.hero-copy p { color:var(--muted); font-size:1.1rem; line-height:1.7; }
.hero-cta { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }

.panel { width:min(1200px, 100% - 80px); margin:60px auto; padding:32px; background:var(--panel); border:1px solid rgba(255,255,255,0.1); border-radius:32px; box-shadow:0 40px 80px rgba(0,0,0,0.5); position:relative; overflow:hidden; }
.panel::after { content:""; position:absolute; inset:1px; border-radius:32px; border:1px solid rgba(77,125,255,0.2); pointer-events:none; }
.panel-head h2 { margin:0; font-size:2.2rem; }
.panel-head p { margin:6px 0 18px; color:var(--muted); }

.lines-grid, .core-grid, .concept-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:18px; }
.lines-grid article, .core-grid article, .concept-grid article { padding:18px; border-radius:24px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.02); backdrop-filter:blur(12px); position:relative; overflow:hidden; }
.lines-grid article::before, .core-grid article::before, .concept-grid article::before { content:""; position:absolute; inset:0; border-radius:inherit; border:1px solid rgba(77,125,255,0.15); mix-blend-mode:screen; }
.lines-grid span { font-size:0.75rem; letter-spacing:0.3em; color:var(--accent-soft); }

.process-track { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:18px; }
.process-track article { padding:20px; border-radius:26px; border:1px solid rgba(255,255,255,0.1); background:rgba(4,10,30,0.7); box-shadow:inset 0 0 30px rgba(77,125,255,0.2); }

.future-list { display:flex; flex-direction:column; gap:16px; }
.future-list article { padding:18px; border-radius:24px; border:1px solid rgba(255,255,255,0.08); background:rgba(4,10,30,0.65); box-shadow:0 20px 50px rgba(0,0,0,0.4); }

.connect { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.connect p { color:var(--muted); }

@keyframes float { 0%,100% { transform:translate3d(0,0,0) scale(1); } 50% { transform:translate3d(20px,-30px,40px) scale(1.05); } }
@keyframes spin { 0% { transform:translate(-50%, -50%) rotateX(65deg) rotateZ(0deg); } 100% { transform:translate(-50%, -50%) rotateX(65deg) rotateZ(360deg); } }

@media (max-width:768px) {
  header { flex-direction:column; gap:12px; }
  nav { justify-content:center; }
  .panel { width:calc(100% - 32px); margin:40px auto; }
  .connect { flex-direction:column; align-items:flex-start; }
}