:root {
  --bg-start: #08090b;
  --bg-mid: #111215;
  --bg-end: #1a1c20;
  --text-main: rgba(246, 246, 246, 0.95);
  --text-soft: rgba(205, 205, 205, 0.84);
  --tile-border: rgba(230, 230, 230, 0.18);
  --tile-surface-1: rgba(36, 36, 36, 0.64);
  --tile-surface-2: rgba(18, 18, 18, 0.56);
  --tile-shadow: rgba(0, 0, 0, 0.4);
  --font-ui: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--text-main);
  font-family: var(--font-ui);
  background:
    radial-gradient(70vmax 65vmax at 9% 10%, rgba(255, 255, 255, 0.08), transparent 64%),
    radial-gradient(68vmax 60vmax at 92% 14%, rgba(206, 206, 206, 0.06), transparent 62%),
    radial-gradient(70vmax 70vmax at 50% 100%, rgba(140, 140, 140, 0.11), transparent 70%),
    linear-gradient(145deg, var(--bg-start), var(--bg-mid) 54%, var(--bg-end));
  letter-spacing: 0.01em;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), transparent 45%, rgba(0, 0, 0, 0.24));
}

.page {
  position: relative;
  isolation: isolate;
  width: min(900px, 92vw);
  min-height: min(760px, 94vh);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(16px, 2.2vh, 26px);
  padding: clamp(20px, 4vw, 42px);
}

.bg-lights {
  position: absolute;
  inset: -28% -22%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  filter: blur(20px) saturate(100%);
  mix-blend-mode: screen;
  transform: scale(1.08);
}

.bg-lights::before,
.bg-lights::after {
  content: "";
  position: absolute;
  inset: 0;
}

.bg-lights::before {
  background:
    radial-gradient(46vmax 34vmax at -4% 12%, rgba(238, 238, 238, 0.27), transparent 66%),
    radial-gradient(50vmax 36vmax at 104% 2%, rgba(198, 198, 198, 0.22), transparent 68%);
  transform: translateY(-10%) scale(1.08);
}

.bg-lights::after {
  background:
    radial-gradient(50vmax 38vmax at 2% 104%, rgba(178, 178, 178, 0.24), transparent 68%),
    radial-gradient(52vmax 40vmax at 100% 100%, rgba(228, 228, 228, 0.2), transparent 70%),
    radial-gradient(30vmax 18vmax at 50% 48%, rgba(255, 255, 255, 0.14), transparent 72%);
  transform: translateY(9%) scale(1.03);
}

.hero {
  z-index: 2;
  text-align: center;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0;
  font-size: clamp(1.28rem, 1.8vw + 0.9rem, 2rem);
  font-weight: 620;
  letter-spacing: 0.16em;
  color: rgba(245, 245, 245, 0.96);
}

.hero p {
  margin: 8px 0 0;
  font-size: clamp(0.72rem, 0.4vw + 0.66rem, 0.88rem);
  letter-spacing: 0.22em;
  color: rgba(187, 187, 187, 0.76);
}

.grid {
  position: relative;
  z-index: 2;
  width: min(730px, 86vw);
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
}

.tile {
  --from-x: 0vw;
  --from-y: 0vh;
  --delay: 0ms;
  position: relative;
  overflow: hidden;
  min-height: clamp(150px, 22vh, 220px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  border-radius: 22px;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--tile-border);
  background: linear-gradient(165deg, var(--tile-surface-1), var(--tile-surface-2));
  box-shadow:
    0 12px 28px var(--tile-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(18px) saturate(100%);
  -webkit-backdrop-filter: blur(18px) saturate(100%);
  opacity: 0;
  transform: translate3d(var(--from-x), var(--from-y), 0) scale(0.84);
  filter: blur(3px);
  will-change: transform, opacity, filter;
  transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}

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

.tile::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 32%, transparent 72%);
  opacity: 0.32;
}

.tile::after {
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.tile:hover,
.tile:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(236, 236, 236, 0.26);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 0 1px rgba(233, 233, 233, 0.08);
  outline: none;
}

.icon {
  width: clamp(50px, 3.5vw + 34px, 72px);
  height: clamp(50px, 3.5vw + 34px, 72px);
  color: rgba(246, 246, 246, 0.97);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2));
}

.icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.label {
  font-size: clamp(0.8rem, 0.42vw + 0.72rem, 0.98rem);
  font-weight: 560;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--text-soft);
}

.tile--1 {
  --from-x: -34vw;
  --from-y: -30vh;
  --delay: 40ms;
}

.tile--2 {
  --from-x: 34vw;
  --from-y: -30vh;
  --delay: 110ms;
}

.tile--3 {
  --from-x: -34vw;
  --from-y: 30vh;
  --delay: 180ms;
}

.tile--4 {
  --from-x: 34vw;
  --from-y: 30vh;
  --delay: 250ms;
}

body.ready .bg-lights {
  animation: backgroundGlow 2200ms cubic-bezier(0.22, 0.86, 0.22, 1) forwards;
}

body.ready .bg-lights::before {
  animation: beamSweepTop 2000ms cubic-bezier(0.22, 0.86, 0.22, 1) forwards;
}

body.ready .bg-lights::after {
  animation: beamSweepBottom 2100ms cubic-bezier(0.22, 0.86, 0.22, 1) forwards;
}

body.ready .tile {
  animation: appFlyIn 980ms var(--delay) cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes appFlyIn {
  0% {
    opacity: 0;
    transform: translate3d(var(--from-x), var(--from-y), 0) scale(0.84);
    filter: blur(3px);
  }
  45% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes backgroundGlow {
  0% {
    opacity: 0;
    transform: scale(1.1);
  }
  30% {
    opacity: 0.9;
  }
  100% {
    opacity: 0.34;
    transform: scale(1);
  }
}

@keyframes beamSweepTop {
  0% {
    opacity: 0;
    transform: translateY(-14%) scale(1.1) rotate(-1.3deg);
  }
  28% {
    opacity: 0.9;
  }
  100% {
    opacity: 0.5;
    transform: translateY(0%) scale(1) rotate(0deg);
  }
}

@keyframes beamSweepBottom {
  0% {
    opacity: 0;
    transform: translateY(12%) scale(1.06) rotate(1.4deg);
  }
  34% {
    opacity: 0.84;
  }
  100% {
    opacity: 0.46;
    transform: translateY(0%) scale(1) rotate(0deg);
  }
}

@media (max-width: 700px) {
  .page {
    min-height: 100vh;
    gap: 14px;
  }

  .grid {
    width: 100%;
    gap: 12px;
  }

  .tile {
    min-height: clamp(128px, 29vw, 166px);
    border-radius: 20px;
  }

  .label {
    letter-spacing: 0.09em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bg-lights,
  .bg-lights::before,
  .bg-lights::after,
  .tile {
    animation: none !important;
  }

  .bg-lights {
    opacity: 0.34;
    transform: none;
  }

  .tile {
    opacity: 1;
    transform: none;
    filter: none;
  }
}