:root {
  --bg: #040507;
  --bg-deep: #020308;
  --glass: rgba(255,255,255,.08);
  --glass-stroke: rgba(255,255,255,.14);
  --text: #e6f0ff;

  --c1: #00f0ff;
  --c2: #8a2bff;
  --c3: #ff2bd6;
  --c4: #00ff95;

  --radius: 24px;
  --shadow-lg: 0 10px 30px rgba(0,0,0,.35), 0 0 60px rgba(138,43,255,.15);
}

*,*::before,*::after { box-sizing: border-box; }
body {
  margin: 0;
  background: radial-gradient(1200px 700px at 70% 10%, rgba(138,43,255,.18), rgba(0,0,0,0) 60%),
              radial-gradient(900px 600px at 10% 80%, rgba(0,240,255,.12), rgba(0,0,0,0) 60%),
              var(--bg);
  color: var(--text);
  font-family: Manrope, system-ui, sans-serif;
  overflow-x: hidden;
}

.container { width: min(1200px, 92vw); margin-inline: auto; }

a { color: inherit; text-decoration: none; }

.gradient-text {
  font-family: Orbitron, sans-serif;
  background: linear-gradient(120deg, var(--c1), var(--c2), var(--c3), var(--c4));
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientShift 10s ease infinite;
  letter-spacing: .02em;
  filter: drop-shadow(0 0 18px rgba(0,255,255,.35))
          drop-shadow(0 0 42px rgba(255,43,214,.25));
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.intro {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: var(--bg-deep);
  animation: fadeOut 2.5s ease forwards;
  animation-delay: 2s;
  z-index: 50;
}
.intro__logo {
  font: 800 clamp(32px, 7vw + 8px, 140px) Orbitron, sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
}
@keyframes fadeOut {
  to { opacity: 0; visibility: hidden; }
}
header {
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(4,5,7,.65), rgba(4,5,7,0));
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0;
}
.brand { display: flex; gap: 10px; align-items: center; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.brand__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--c1);
  box-shadow: 0 0 16px var(--c1), 0 0 28px var(--c2);
}
nav a { margin-left: 24px; font-weight: 600; transition: color .25s ease; }
nav a:hover { color: var(--c1); }

section { padding: clamp(80px, 12vh, 160px) 0; }
h1,h2 { margin: 10px 0 16px; }
.section-title { font-size: clamp(32px, 5vw, 64px); text-align: center; margin-bottom: 50px; }
.lede { color: #b8c3d9; font-size: clamp(16px, 1.6vw, 22px); max-width: 65ch; margin: auto; text-align: center; }

.about-list { list-style:none; padding:0; margin:40px auto; display:grid; gap:16px; max-width:600px; text-align:left; }
.about-list li {
  background:var(--glass);
  border:1px solid var(--glass-stroke);
  border-radius:var(--radius);
  padding:14px 20px;
  backdrop-filter:blur(8px);
  box-shadow:var(--shadow-lg);
}

.card-grid { display:grid; gap:24px; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); }
.card {
  background:var(--glass);
  border:1px solid var(--glass-stroke);
  border-radius:var(--radius);
  padding:24px;
  backdrop-filter:blur(8px);
  box-shadow:var(--shadow-lg);
  text-align:center;
  font-weight:600;
  font-size:18px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 12px 35px rgba(0,0,0,.45), 0 0 60px rgba(0,240,255,.35);
}

footer { color: #9fb0c8; padding: 60px 0 90px; text-align:center; }
html {
  scroll-behavior: smooth;
}