:root {
  --bg1: #08122b;
  --bg2: #224690;
  --ink: #f3f7ff;
  --muted: #c0cdee;
  --line: rgba(255,255,255,.14);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 20% 20%, rgba(112,170,255,.34), transparent 24%),
    radial-gradient(circle at 80% 30%, rgba(255,120,190,.26), transparent 22%),
    radial-gradient(circle at 50% 80%, rgba(112,255,212,.18), transparent 18%),
    linear-gradient(140deg, var(--bg1), var(--bg2));
  overflow-x: hidden;
}

.aurora,
.aurora::before,
.aurora::after {
  content: "";
  position: fixed;
  inset: -15%;
  pointer-events: none;
  filter: blur(60px);
  opacity: .6;
}

.aurora {
  background: radial-gradient(circle at 30% 30%, rgba(130,177,255,.25), transparent 30%);
  animation: drift 16s ease-in-out infinite alternate;
}

.aurora::before {
  background: radial-gradient(circle at 70% 25%, rgba(255,118,196,.24), transparent 28%);
  animation: drift 18s ease-in-out infinite alternate-reverse;
}

.aurora::after {
  background: radial-gradient(circle at 45% 70%, rgba(112,255,212,.18), transparent 26%);
  animation: drift 14s ease-in-out infinite alternate;
}

@keyframes drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to { transform: translate3d(2%, 2%, 0) scale(1.08); }
}

.wrap {
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 28px 0;
}

.brand,
h1,
h2,
h3 {
  font-family: "Space Grotesk", sans-serif;
  margin: 0;
}

.shell {
  padding: 18px;
  border-radius: 36px;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--line);
  backdrop-filter: blur(26px);
  box-shadow: 0 40px 90px rgba(0,0,0,.28);
}

.hero {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 18px;
}

.panel {
  padding: 34px;
  border-radius: 28px;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}

.eyebrow {
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .76rem;
  color: #d7e1ff;
  font-weight: 800;
}

h1 {
  font-size: clamp(3rem, 6vw, 5.5rem);
  line-height: .9;
  max-width: 580px;
}

p {
  line-height: 1.8;
  color: var(--muted);
}

.screen-shell {
  position: relative;
  min-height: 620px;
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.menu-layer,
.glass-layer {
  position: absolute;
  inset: 0;
}

.menu-layer {
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  transform: scale(.96);
  transition: opacity .5s ease, transform .5s ease;
}

.screen-shell.is-broken .menu-layer {
  opacity: 1;
  transform: scale(1);
}

.menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.menu-card {
  padding: 22px;
  border-radius: 24px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: white;
  text-decoration: none;
  backdrop-filter: blur(10px);
  transition: transform .22s ease, background .22s ease;
}

.menu-card:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,.14);
}

.menu-card span {
  display: inline-block;
  margin-bottom: 10px;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #dfe8ff;
}

.glass-layer {
  cursor: pointer;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)),
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 26%),
    rgba(255,255,255,.06);
  backdrop-filter: blur(16px);
  transition: opacity .45s ease, transform .45s ease;
}

.glass-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), transparent 40%),
    radial-gradient(circle at var(--cursor-x, 50%) var(--cursor-y, 50%), rgba(255,255,255,.16), transparent 18%);
  pointer-events: none;
}

.glass-layer.shatter {
  opacity: 0;
  transform: scale(1.08);
  pointer-events: none;
}

.glass-copy {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 2;
}

.glass-copy strong {
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: white;
}

.glass-copy p {
  color: rgba(255,255,255,.78);
  margin-bottom: 0;
}

.tap {
  display: inline-flex;
  margin-top: 18px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: white;
  font-size: .84rem;
}

.crack {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .2s ease, transform .25s ease;
  pointer-events: none;
  --impact-x: 50%;
  --impact-y: 50%;
  --crack-core: rgba(255,255,255,.95);
  --crack-line: rgba(233,243,255,.84);
  --crack-haze: rgba(255,255,255,.18);
}

.crack::before,
.crack::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.crack::before {
  background:
    radial-gradient(circle at var(--impact-x) var(--impact-y), rgba(255,255,255,.98) 0 1.2%, rgba(255,255,255,.58) 1.2% 2.1%, transparent 2.1% 100%),
    radial-gradient(circle at var(--impact-x) var(--impact-y), transparent 0 5.4%, rgba(255,255,255,.72) 5.4% 5.8%, transparent 5.8% 100%),
    radial-gradient(circle at var(--impact-x) var(--impact-y), transparent 0 9.4%, rgba(255,255,255,.34) 9.4% 9.8%, transparent 9.8% 100%),
    linear-gradient(12deg, transparent 0 47.8%, var(--crack-line) 48% 48.26%, transparent 48.45% 100%),
    linear-gradient(41deg, transparent 0 41.8%, var(--crack-line) 42% 42.22%, transparent 42.4% 100%),
    linear-gradient(78deg, transparent 0 45.8%, var(--crack-line) 46% 46.18%, transparent 46.35% 100%),
    linear-gradient(113deg, transparent 0 52.8%, var(--crack-line) 53% 53.22%, transparent 53.4% 100%),
    linear-gradient(146deg, transparent 0 43.8%, var(--crack-line) 44% 44.24%, transparent 44.42% 100%),
    linear-gradient(-18deg, transparent 0 54.8%, var(--crack-line) 55% 55.18%, transparent 55.35% 100%),
    linear-gradient(-54deg, transparent 0 49.8%, var(--crack-line) 50% 50.18%, transparent 50.34% 100%),
    linear-gradient(-88deg, transparent 0 47.8%, var(--crack-line) 48% 48.18%, transparent 48.34% 100%),
    linear-gradient(-128deg, transparent 0 50.8%, var(--crack-line) 51% 51.18%, transparent 51.34% 100%);
  filter: drop-shadow(0 0 7px rgba(255,255,255,.18));
  mask:
    radial-gradient(circle at var(--impact-x) var(--impact-y), #000 0 4.2%, transparent 4.5%),
    radial-gradient(circle at var(--impact-x) var(--impact-y), transparent 0 5%, #000 5.2% 31%, transparent 36%);
}

.crack::after {
  background:
    radial-gradient(circle at calc(var(--impact-x) + 3%) calc(var(--impact-y) - 2%), rgba(255,255,255,.44) 0 .45%, transparent .6%),
    radial-gradient(circle at calc(var(--impact-x) - 4%) calc(var(--impact-y) + 1%), rgba(255,255,255,.32) 0 .35%, transparent .5%),
    radial-gradient(circle at calc(var(--impact-x) + 7%) calc(var(--impact-y) + 4%), rgba(255,255,255,.28) 0 .3%, transparent .45%),
    radial-gradient(circle at calc(var(--impact-x) - 8%) calc(var(--impact-y) - 5%), rgba(255,255,255,.24) 0 .35%, transparent .52%),
    radial-gradient(circle at var(--impact-x) var(--impact-y), var(--crack-haze) 0 12%, transparent 22%),
    conic-gradient(from 0deg at var(--impact-x) var(--impact-y),
      transparent 0deg 9deg,
      rgba(255,255,255,.86) 9deg 10deg,
      transparent 10deg 37deg,
      rgba(255,255,255,.74) 37deg 38deg,
      transparent 38deg 72deg,
      rgba(255,255,255,.7) 72deg 73deg,
      transparent 73deg 118deg,
      rgba(255,255,255,.78) 118deg 119deg,
      transparent 119deg 168deg,
      rgba(255,255,255,.66) 168deg 169deg,
      transparent 169deg 217deg,
      rgba(255,255,255,.72) 217deg 218deg,
      transparent 218deg 260deg,
      rgba(255,255,255,.66) 260deg 261deg,
      transparent 261deg 304deg,
      rgba(255,255,255,.72) 304deg 305deg,
      transparent 305deg 360deg);
  opacity: .72;
  mask: radial-gradient(circle at var(--impact-x) var(--impact-y), transparent 0 2.8%, #000 3% 17%, transparent 27%);
}

.crack.one { transform: scale(1.01); }
.crack.two { transform: scale(1.03); }
.crack.three { transform: scale(1.05); }

.glass-layer.hit-1 .crack.one,
.glass-layer.hit-2 .crack.one,
.glass-layer.hit-2 .crack.two,
.glass-layer.hit-3 .crack.one,
.glass-layer.hit-3 .crack.two,
.glass-layer.hit-3 .crack.three {
  opacity: 1;
}

.info {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.info div {
  padding: 18px;
  border-radius: 20px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
}

.page {
  min-height: 100vh;
  padding: 26px 0 80px;
}

.page-hero {
  min-height: 58vh;
  border-radius: 34px;
  overflow: hidden;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    linear-gradient(180deg, rgba(8,18,43,.18), rgba(8,18,43,.74)),
    url("https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1600&q=80") center/cover;
  color: white;
}

.page-hero p {
  color: rgba(255,255,255,.82);
  max-width: 640px;
}

.page-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 28px;
}

.info-card {
  padding: 26px;
  border-radius: 28px;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--line);
  backdrop-filter: blur(12px);
}

@media (max-width: 920px) {
  .hero,
  .menu-grid,
  .info,
  .page-grid {
    grid-template-columns: 1fr;
  }

  .nav {
    flex-direction: column;
    align-items: flex-start;
  }

  .screen-shell {
    min-height: 540px;
  }
}