:root{
--bg: #070b14;
--grid: #00e6ff; /* neon cyan for grid lines /
--grid2: #00ffd6; / lighter cyan for highlights /
--mount: #2a0e3e; / magenta-tinted mountain base /
--mount2: #5b0a6a; / deeper magenta accents /
--neon: #ff1aff; / magenta accent */
--fg: #e8f0ff;
}
*{box-sizing:border-box}
html,body{height:100%; margin:0}
body{font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:var(--fg); background:var(--bg); overflow:hidden}

/* Scene container */
.scene{position:relative; min-height:100vh; width:100%; overflow:hidden; isolation:isolate}

/* Grid road layer: cyan grid lines receding into distance */
.layer-grid{ position:absolute; inset:0;
background:
linear-gradient(to bottom, rgba(0,0,0,0) 0 60%, rgba(0,0,0,.25) 60% 100%),
repeating-linear-gradient(0deg, rgba(0,0,0,.0) 0 0),
repeating-linear-gradient(90deg, rgba(0,0,0,.0) 0 0);
background-size: 100% 100%, 60px 100%, 60px 100%;
opacity:.95; mix-blend-mode: screen; pointer-events:none;
transform: perspective(800px) rotateX(8deg);
}

/* Magenta mountains silhouette layer */
.layer-mountains{ position:absolute; left:0; right:0; bottom:0; height:48%;
background: linear-gradient(to top, var(--mount) 0%, transparent 60%), linear-gradient(to top, var(--mount2) 0%, transparent 60%);
clip-path: polygon(0 60%, 8% 48%, 18% 60%, 28% 50%, 40% 62%, 52% 52%, 66% 64%, 78% 54%, 92% 60%, 100% 64%, 100% 100%, 0 100%);
opacity:.95; z-index:2; mix-blend-mode: screen;
}
.layer-mountains:after{
content:"";
position:absolute; left:0; right:0; bottom:0; height:60%;
background: linear-gradient(to top, rgba(255,0,170,.25), rgba(255,0,170,0) 60%);
clip-path: polygon(0 70%, 12% 58%, 22% 66%, 34% 54%, 46% 66%, 60% 60%, 72% 68%, 88% 60%, 100% 66%, 100% 100%, 0 100%);
filter: blur(1px);
z-index:3; pointer-events:none;
}

/* Starry ambience (subtle) */
.layer-stars{ position:absolute; inset:0;
background: radial-gradient(circle at 15% 25%, rgba(255,255,255,.7) 0 2px, transparent 3px),
radial-gradient(circle at 70% 15%, rgba(180,255,255,.7) 0 2px, transparent 3px),
radial-gradient(circle at 40% 70%, rgba(0,255,212,.7) 0 2px, transparent 3px);
background-size: 2px 2px, 2px 2px, 2px 2px; opacity:.6; z-index:1; mix-blend-mode: overlay;
pointer-events:none; animation: twinkle 6s infinite linear;
}
@keyframes twinkle{0%{opacity:.4}50%{opacity:.9}100%{opacity:.4}}

/* UI shell and content */
.shell{ position:relative; z-index:4; display:flex; align-items:center; justify-content:space-between;
padding:16px 20px;}
.logo{font-family: "Orbitron", Arial, sans-serif; font-weight:900; letter-spacing:2px;
color:#6ff6ff; text-shadow:0 0 12px #00ffd6; font-size:1.25rem}
.nav{display:flex; gap:14px}
.nav a{color:#e0ffff; text-decoration:none; font-weight:600; letter-spacing:.5px}
.content-shell{position:relative; padding:40px 20px; max-width:1000px; margin:0 auto; z-index:4}
.section{ padding:48px 0; border-top:1px solid rgba(0,255,230,.25); }
.section h1{ font-size:2.2rem; margin:0 0 8px; color:#d8fff2 }
.section h2{ font-size:1.6rem; margin:0 0 6px; color:#eaffff }
.section p{ color:#d6faff; line-height:1.6; max-width:66ch }
.footer{ padding:14px 20px; font-size:12px; color:#9bd0ff; border-top:1px solid rgba(0,255,230,.25) }

/* Responsiveness */
@media (max-width: 800px){
.nav{display:none}
.logo{font-size:1rem}
.layer-grid{background-size: 100% 100%}
}
@media (prefers-reduced-motion: reduce){
.layer-grid,.layer-stars{animation: none}
}