:root {
  --bg: #05060a;
  --ink: #e8ecf4;
  --dim: #8b94a7;
  --accent: #5eead4;
  --accent2: #818cf8;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  overflow-x: hidden;
}
.mono { font-family: 'IBM Plex Mono', monospace; }

#space { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
.grain {
  position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.4rem 2.2rem;
  mix-blend-mode: difference;
}
.logo { font-weight: 700; letter-spacing: .35em; font-size: .95rem; }
.logo span { color: var(--accent); font-weight: 300; }
.nav-tag { font-size: .7rem; color: var(--dim); letter-spacing: .2em; }

main { position: relative; z-index: 3; }
.panel {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 6rem 2rem;
}

.hero { flex-direction: column; text-align: center; }
.hero-title { font-size: clamp(2.2rem, 6.5vw, 5.2rem); font-weight: 500; line-height: 1.12; }
.hero-title .line { display: block; overflow: hidden; }
.accent {
  background: linear-gradient(100deg, var(--accent), var(--accent2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub { margin-top: 2.4rem; color: var(--dim); font-size: .85rem; letter-spacing: .15em; }

.block { max-width: 640px; }
.block.wide { max-width: 1040px; }
.block.center { text-align: center; }
.kicker { color: var(--accent); font-size: .75rem; letter-spacing: .3em; text-transform: uppercase; margin-bottom: 1.2rem; }
h2 { font-size: clamp(1.8rem, 4vw, 3.2rem); font-weight: 500; line-height: 1.15; margin-bottom: 1.4rem; }
.block p { color: var(--dim); font-size: 1.08rem; line-height: 1.75; }

.cards {
  display: grid; gap: 1rem; margin-top: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.card {
  border: 1px solid rgba(232,236,244,.08);
  border-radius: 14px;
  padding: 1.6rem;
  background: rgba(10,12,20,.55);
  backdrop-filter: blur(6px);
  transition: border-color .35s, transform .35s;
}
.card:hover { border-color: rgba(94,234,212,.45); transform: translateY(-4px); }
.card > span { color: var(--accent); font-size: .8rem; }
.card h3 { margin: .7rem 0 .5rem; font-size: 1.15rem; font-weight: 500; }
.card p { font-size: .92rem; line-height: 1.6; }

.finale-line { font-size: clamp(2.2rem, 5.5vw, 4.4rem); }
.contact { margin-top: 3.2rem; font-size: .75rem; letter-spacing: .25em; color: var(--dim); }