:root {
  --bg: #0b0f14;
  --bg-deep: #070a0e;
  --ink: #e6edf3;
  --muted: #9aa7b3;
  --accent: #48d2ff;
  --stroke: #1f2a38;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  color: var(--ink);
  background-color: var(--bg);
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    radial-gradient(circle at 20% 10%, rgba(72, 210, 255, 0.18), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(49, 242, 197, 0.12), transparent 50%);
  background-size: 90px 90px, 90px 90px, 100% 100%, 100% 100%;
  line-height: 1.6;
  color-scheme: dark;
}

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

.page {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.container {
  width: min(1100px, 92%);
  margin: 0 auto;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 1rem;
  background: var(--accent);
  color: #0b0f14;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  z-index: 10;
}

.skip-link:focus {
  left: 1rem;
}

.site-header {
  position: fixed;
  top: 1.2rem;
  right: 1.5rem;
  z-index: 5;
}

.header-email {
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(72, 210, 255, 0.35);
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: rgba(15, 21, 30, 0.6);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.single-view {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.hero {
  width: 100%;
  padding: 6rem 0 4rem;
}

.core {
  display: flex;
  align-items: center;
}

.core-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-size: clamp(2.2rem, 3.8vw, 3.6rem);
  letter-spacing: 0.02em;
}

.core-list li {
  padding: 0.2rem 0;
  border-bottom: 1px solid var(--stroke);
}

.core-list li:last-child {
  border-bottom: none;
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  animation: fadeUp 0.7s ease forwards;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 980px) {
  .single-view {
    min-height: auto;
  }

  .hero {
    padding-top: 6.5rem;
  }

  .core-list {
    font-size: clamp(2rem, 8vw, 3rem);
  }
}

@media (max-width: 640px) {
  .site-header {
    top: 1rem;
    right: 1rem;
  }

  .hero {
    padding-top: 7rem;
  }
}