:root {
  --bg: #020406;
  --panel: rgba(9, 13, 18, .88);
  --panel-2: rgba(255,255,255,.045);
  --text: #f7f9fb;
  --muted: #9aa8b4;
  --cyan: #48d7f5;
  --ice: #b8f1fb;
  --border: rgba(184, 241, 251, .14);
  --shadow: 0 35px 90px rgba(0,0,0,.58);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: "DM Sans", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 50% -20%, rgba(72,215,245,.14), transparent 37%),
    linear-gradient(150deg, #020406 0%, #070b10 55%, #020406 100%);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .20;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
}
.ambient { position: fixed; border-radius: 999px; filter: blur(90px); pointer-events: none; }
.ambient-one { width: 280px; height: 280px; background: rgba(72,215,245,.14); top: 8%; left: -100px; }
.ambient-two { width: 340px; height: 340px; background: rgba(184,241,251,.08); right: -130px; bottom: 4%; }
.shell { width: 100%; min-height: 100vh; display: grid; place-items: center; padding: 38px 18px; }
.card {
  position: relative;
  width: min(100%, 620px);
  padding: clamp(28px, 6vw, 52px);
  border: 1px solid var(--border);
  border-radius: 30px;
  background: linear-gradient(145deg, rgba(14,20,27,.94), rgba(5,8,12,.92));
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184,241,251,.8), transparent);
}
.eyebrow { display: flex; justify-content: center; align-items: center; gap: 10px; color: var(--cyan); text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; font-weight: 700; }
.eyebrow span { width: 24px; height: 1px; background: var(--cyan); }
.brand-logo { display: block; width: min(100%, 500px); height: auto; margin: 26px auto 32px; mix-blend-mode: screen; }
h1 { margin: 0; text-align: center; font-family: "Space Grotesk", sans-serif; font-size: clamp(2.35rem, 8vw, 4.25rem); line-height: .98; letter-spacing: -.055em; }
h1 em { font-style: normal; color: var(--ice); }
.intro { max-width: 520px; margin: 22px auto 30px; text-align: center; color: var(--muted); font-size: clamp(1rem, 2.7vw, 1.08rem); line-height: 1.7; }
.links { display: grid; gap: 12px; }
.link, .feature-link {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 15px 17px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 17px;
  color: var(--text);
  text-decoration: none;
  background: var(--panel-2);
  transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}
.feature-link { background: linear-gradient(120deg, rgba(72,215,245,.18), rgba(184,241,251,.07)); border-color: rgba(72,215,245,.32); }
.link:hover, .feature-link:hover { transform: translateY(-3px); border-color: rgba(72,215,245,.48); background: rgba(72,215,245,.095); box-shadow: 0 14px 34px rgba(0,0,0,.28); }
.icon-wrap { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: rgba(184,241,251,.08); border: 1px solid rgba(184,241,251,.12); }
.icon-wrap svg { width: 22px; height: 22px; fill: var(--ice); }
.link strong, .feature-link strong { display: block; font-size: 1rem; letter-spacing: -.015em; }
.link small, .feature-link small { display: block; margin-top: 3px; color: var(--muted); font-size: .82rem; }
.arrow { color: var(--cyan); font-size: 1.15rem; transition: transform .2s ease; }
.link:hover .arrow, .feature-link:hover .arrow { transform: translate(2px,-2px); }
blockquote { margin: 34px 0 0; padding: 23px 20px 0; border-top: 1px solid var(--border); text-align: center; color: #dfe8ee; font-family: "Space Grotesk", sans-serif; font-size: 1.06rem; }
blockquote cite { display: block; margin-top: 7px; color: var(--cyan); font-family: "DM Sans", sans-serif; font-size: .76rem; font-style: normal; letter-spacing: .12em; text-transform: uppercase; }
footer { display: flex; justify-content: space-between; gap: 18px; margin-top: 28px; color: #71808c; font-size: .74rem; }
footer p { margin: 0; }
@media (max-width: 520px) {
  .card { border-radius: 24px; }
  .brand-logo { margin-bottom: 26px; }
  .link, .feature-link { grid-template-columns: 44px 1fr auto; padding: 13px; }
  .icon-wrap { width: 44px; height: 44px; }
  footer { flex-direction: column; align-items: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}