:root {
  --base: #040308;
  --panel: rgba(8, 10, 22, 0.92);
  --red: #ff4d4d;
  --green: #35ffb0;
  --blue: #4a7dff;
  --text: #f5f7ff;
  --muted: rgba(245, 247, 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 15% 15%, rgba(74,125,255,0.25), transparent 55%), radial-gradient(circle at 85% 10%, rgba(53,255,176,0.2), transparent 55%), radial-gradient(circle at 30% 70%, rgba(255,77,77,0.2), transparent 60%); }

header { position:fixed; top:0; left:0; right:0; z-index:10; display:flex; align-items:center; justify-content:space-between; padding:20px 48px; backdrop-filter:blur(18px); background:rgba(4,4,12,0.65); 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.2); background:linear-gradient(135deg, rgba(255,77,77,0.4), rgba(74,125,255,0.4)); 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:14px; flex-wrap:wrap; padding:10px 18px; border-radius:999px; border:1px solid rgba(255,255,255,0.15); background:rgba(4,4,12,0.5); box-shadow:0 18px 40px rgba(0,0,0,0.35); }
nav a { color:var(--muted); text-decoration:none; letter-spacing:0.08em; font-size:0.85rem; padding:8px 14px; border-radius:999px; border:1px solid transparent; transition:all 0.2s ease; }
nav a:hover { border-color:rgba(255,255,255,0.3); background:rgba(255,255,255,0.05); color:var(--text); }

.cta { background:linear-gradient(120deg, var(--red), var(--blue)); color:#06060c; border:none; border-radius:999px; padding:11px 26px; font-weight:600; text-decoration:none; box-shadow:0 24px 50px rgba(74,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; text-align:center; padding:180px 40px 80px; position:relative; gap:32px; }
.hero-stage { position:absolute; inset:0; pointer-events:none; }
.beam { position:absolute; width:2px; height:60%; left:50%; top:10%; transform-origin:bottom center; animation:beamGlow 8s ease-in-out infinite; }
.beam-a { background:linear-gradient(180deg, rgba(255,77,77,0.8), transparent); transform:translateX(-120px) rotate(-8deg); }
.beam-b { background:linear-gradient(180deg, rgba(53,255,176,0.8), transparent); transform:translateX(0) rotate(0deg); animation-delay:2s; }
.beam-c { background:linear-gradient(180deg, rgba(74,125,255,0.8), transparent); transform:translateX(120px) rotate(8deg); animation-delay:4s; }
.prism { position:absolute; width:320px; height:320px; left:50%; top:45%; transform:translate(-50%, -50%) rotateX(60deg); border:1px solid rgba(255,255,255,0.2); border-radius:30%; box-shadow:0 0 60px rgba(74,125,255,0.4), inset 0 0 40px rgba(53,255,176,0.3); animation:prismSpin 18s linear infinite; }
.hero-copy { max-width:100%; margin:0 auto; position:relative; }
.hero-copy h1 { font-size:clamp(2.8rem, 4vw, 4.2rem); line-height:1.3; margin:16px 0; }
.hero-copy p { color:var(--muted); font-size:1.1rem; line-height:1.8; }
.hero-cta { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }

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

.card-icon { width:52px; height:52px; border-radius:18px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.15); display:flex; align-items:center; justify-content:center; margin-bottom:14px; position:relative; overflow:hidden; }
.card-icon::after, .card-icon::before { content:""; position:absolute; border-radius:999px; }
.icon-vector::after { width:4px; height:32px; background:var(--blue); box-shadow:-12px -8px 0 var(--red), 12px 8px 0 var(--green); }
.icon-spine::after { width:32px; height:4px; background:var(--green); box-shadow:0 8px 0 rgba(255,255,255,0.4), 0 -8px 0 rgba(255,255,255,0.2); }
.icon-rail::after { width:32px; height:32px; border:2px solid var(--blue); border-radius:12px; }
.icon-collect::after { width:30px; height:30px; border-radius:50%; border:2px solid var(--red); box-shadow:0 0 20px rgba(255,77,77,0.4); }
.icon-validate::after { width:30px; height:30px; border-radius:8px; border:2px solid var(--green); box-shadow:0 0 18px rgba(53,255,176,0.4); }
.icon-relay::after { width:34px; height:2px; background:var(--blue); box-shadow:0 -6px 0 rgba(255,255,255,0.5), 0 6px 0 rgba(255,255,255,0.3); }
.icon-prism::after { width:28px; height:28px; transform:rotate(45deg); border:2px solid var(--blue); box-shadow:0 0 20px rgba(74,125,255,0.4); }
.icon-vector-tile::after { width:30px; height:14px; border-radius:6px; background:linear-gradient(90deg, var(--red), var(--blue)); }
.icon-relay-slate::after { width:36px; height:10px; border-radius:12px; background:linear-gradient(90deg, var(--green), var(--blue)); }
.icon-auto::after { width:10px; height:32px; background:var(--red); box-shadow:12px 0 0 var(--green), -12px 0 0 var(--blue); }
.icon-audit::after { width:28px; height:28px; border-radius:50%; border:2px solid var(--green); }
.icon-dm::after { width:32px; height:22px; border-radius:12px; border:2px solid var(--blue); border-bottom-left-radius:2px; border-bottom-right-radius:2px; }
.icon-precision::after { width:26px; height:26px; border-radius:6px; border:2px solid var(--red); }
.icon-depth::after { width:18px; height:18px; border-radius:50%; border:2px solid var(--blue); box-shadow:0 0 0 6px rgba(74,125,255,0.3); }
.icon-calm::after { width:28px; height:10px; border-radius:12px; background:rgba(255,255,255,0.5); }


.lines-grid, .core-grid, .concept-grid, .future-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:18px; }
.lines-grid article, .core-grid article, .concept-grid article, .future-grid article { padding:20px; border-radius:26px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.02); backdrop-filter:blur(10px); position:relative; overflow:hidden; }
.lines-grid article::before, .core-grid article::before, .concept-grid article::before, .future-grid article::before { content:""; position:absolute; inset:0; border-radius:inherit; border:1px solid rgba(255,255,255,0.05); }
.lines-grid span { font-size:0.7rem; letter-spacing:0.35em; color:var(--muted); }

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

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

@keyframes beamGlow { 0%,100% { opacity:0.4; } 50% { opacity:1; } }
@keyframes prismSpin { 0% { transform:translate(-50%, -50%) rotateX(60deg) rotateZ(0deg); } 100% { transform:translate(-50%, -50%) rotateX(60deg) rotateZ(360deg); } }

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

.card.vector-card { background:linear-gradient(135deg, rgba(74,125,255,0.2), rgba(255,255,255,0.02)); }
.card.spine-card { background:linear-gradient(135deg, rgba(53,255,176,0.18), rgba(255,255,255,0.02)); }
.card.rail-card { background:linear-gradient(135deg, rgba(255,77,77,0.2), rgba(255,255,255,0.02)); }
.process-card.collect-card { background:radial-gradient(circle at top, rgba(255,77,77,0.25), rgba(6,7,20,0.9)); }
.process-card.validate-card { background:radial-gradient(circle at top, rgba(53,255,176,0.25), rgba(6,7,20,0.9)); }
.process-card.relay-card { background:radial-gradient(circle at top, rgba(74,125,255,0.25), rgba(6,7,20,0.9)); }
.core-card.prism-card-shape { background:linear-gradient(160deg, rgba(74,125,255,0.2), rgba(53,255,176,0.05)); }
.core-card.vector-card-shape { background:linear-gradient(160deg, rgba(255,77,77,0.2), rgba(74,125,255,0.05)); }
.core-card.relay-card-shape { background:linear-gradient(160deg, rgba(53,255,176,0.2), rgba(255,255,255,0.05)); }
.future-card.future-auto { background:linear-gradient(135deg, rgba(255,77,77,0.25), rgba(255,255,255,0.03)); }
.future-card.future-audit { background:linear-gradient(135deg, rgba(53,255,176,0.25), rgba(255,255,255,0.03)); }
.future-card.future-dm { background:linear-gradient(135deg, rgba(74,125,255,0.25), rgba(255,255,255,0.03)); }
.concept-card.concept-precision { background:linear-gradient(135deg, rgba(255,77,77,0.18), rgba(255,255,255,0.02)); }
.concept-card.concept-depth { background:linear-gradient(135deg, rgba(74,125,255,0.18), rgba(255,255,255,0.02)); }
.concept-card.concept-calm { background:linear-gradient(135deg, rgba(53,255,176,0.18), rgba(255,255,255,0.02)); }