*{
  box-sizing:border-box;
  user-select:none;
  caret-color:transparent;
}

html,body{height:100%}

:root{
  --sx: 50vw;
  --sy: 40vh;

  --bg0:#070812;
  --bg1:#0b0f1e;

  --text:#eef1ff;
  --muted: rgba(238,241,255,.78);
  --hair: rgba(238,241,255,.12);

  --card: rgba(14, 17, 32, .62);
  --shadow: 0 22px 90px rgba(0,0,0,.55);
  --radius: 26px;
}

body{
  margin:0;
  background: linear-gradient(180deg, var(--bg0), var(--bg1));
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  overflow:hidden;
}

/* background */
.bg{ position:fixed; inset:0; z-index:-1; }

.aurora{
  position:absolute;
  inset:-45%;
  opacity:.6;
  filter: blur(36px) saturate(1.25);
  mix-blend-mode: screen;
  will-change: transform, filter;
  animation:
    drift 28s linear infinite,
    rotate 90s linear infinite,
    hue 36s linear infinite;
}

.a1{
  background:
    radial-gradient(800px 520px at 30% 35%, rgba(124,92,255,.65), transparent 65%),
    radial-gradient(700px 480px at 72% 28%, rgba(90,182,255,.55), transparent 68%);
  animation-duration: 32s, 110s, 44s;
}
.a2{
  background:
    radial-gradient(820px 560px at 40% 78%, rgba(36,209,143,.45), transparent 68%),
    radial-gradient(680px 480px at 86% 72%, rgba(255,120,180,.30), transparent 70%);
  animation-duration: 38s, 130s, 52s;
  animation-direction: reverse, normal, reverse;
}
.a3{
  background:
    radial-gradient(760px 540px at 58% 46%, rgba(255,235,120,.22), transparent 70%),
    radial-gradient(720px 520px at 18% 82%, rgba(90,182,255,.28), transparent 70%);
  animation-duration: 46s, 160s, 60s;
}

@keyframes drift{
  0%   { transform: translate(0%, 0%) scale(1); }
  20%  { transform: translate(3%, -2%) scale(1.04); }
  40%  { transform: translate(-2%, 3%) scale(1.02); }
  60%  { transform: translate(2%, 2%) scale(1.06); }
  80%  { transform: translate(-3%, -1%) scale(1.03); }
  100% { transform: translate(0%, 0%) scale(1); }
}
@keyframes rotate{ from { rotate:0deg; } to { rotate:360deg; } }
@keyframes hue{
  0%   { filter: blur(36px) saturate(1.25) hue-rotate(0deg); }
  50%  { filter: blur(38px) saturate(1.3) hue-rotate(22deg); }
  100% { filter: blur(36px) saturate(1.25) hue-rotate(0deg); }
}

.grain{
  position:absolute;
  inset:0;
  opacity:.12;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.spotlight{
  position:absolute;
  inset:0;
  background: radial-gradient(
    320px 320px at var(--sx) var(--sy),
    rgba(255,255,255,.12),
    rgba(255,255,255,.06),
    transparent 70%
  );
  mix-blend-mode: screen;
  pointer-events:none;
}

/* layout */
.wrap{
  min-height:100%;
  display:grid;
  place-items:center;
  padding: clamp(14px, 3.5vw, 28px);
  gap: 16px;
}

/* this is the big mobile fix */
.card{
  width: min(92vw, 900px);
  padding: clamp(28px, 6vw, 58px) clamp(18px, 4.5vw, 40px);
  text-align:center;

  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);

  position:relative;
  animation: rise .8s ease-out both;
}

@keyframes rise{
  from{ opacity:0; transform: translateY(12px) scale(.985); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

.card::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: calc(var(--radius) + 2px);
  padding:2px;
  background: linear-gradient(135deg,
    rgba(124,92,255,.55),
    rgba(36,209,143,.35),
    rgba(90,182,255,.35)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:.5;
  pointer-events:none;
}

.kicker{
  margin:0 0 12px;
  font-size: 13px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color: rgba(238,241,255,.65);
}

/* wraps naturally on mobile, looks one-line naturally on desktop */
h1{
  margin:0 0 14px;
  font-size: clamp(34px, 6.4vw, 72px);
  line-height: 1.06;
  letter-spacing: .01em;
  text-wrap: balance;
  max-inline-size: 18ch;
  margin-inline: auto;
}

.line{
  margin:0;
  font-size: clamp(18px, 4.4vw, 22px);
  color: var(--muted);
}

/* footer: normal flow by default so it can't overlap content */
.footer{
  color: rgba(238,241,255,.55);
  font-size: 12px;
  text-align:center;
  padding: 0 12px;
}

/* on larger screens, tuck it to the bottom like before */
@media (min-height: 640px) and (min-width: 520px){
  .wrap{ padding-bottom: 40px; }
  .footer{
    position:fixed;
    bottom:14px;
    left:0; right:0;
  }
}

@media (prefers-reduced-motion: reduce){
  .aurora{ animation:none; }
  .card{ animation:none; }
}