:root {
  --bg0: #070812;
  --bg1: #0b1b2e;
  --text: #e9edf5;
  --muted: rgba(233,237,245,.76);
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--text);
  background:
    radial-gradient(1200px 800px at 30% 20%, rgba(86,175,255,.18), transparent 55%),
    radial-gradient(900px 600px at 75% 70%, rgba(175,120,255,.16), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow: hidden;
}

/* Layout */
.wrap {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;          /* centers logo + statement vertically */
  justify-items: center;        /* centers horizontally */
  padding: 40px 22px 28px;
  position: relative;
  z-index: 2;
}

.hero {
  width: min(860px, 100%);
  text-align: center;
}

.logo {
  display: block;
  width: min(520px, 90vw);   /* scales responsively */
  height: auto;              /* preserves image aspect ratio */
  margin: 0 auto 22px;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.statement {
  max-width: 56ch;
  margin: 0 auto;
  font-size: clamp(16px, 2.1vw, 20px);
  line-height: 1.6;
  color: var(--muted);
}

.statement strong { color: var(--text); }

.contact {
  display: grid;
  gap: 10px;
  justify-items: center;
}

.btn {
  padding: 12px 18px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
}

.fineprint { font-size: 13px; opacity: .6; margin: 0; }

/* Footer links */
.footerNav {
margin-top: 6px;
}


.footerLink {
font-size: 13px;
color: rgba(233,237,245,0.7);
text-decoration: none;
}


.footerLink:hover {
text-decoration: underline;
}

/* CSS Snow */
.snow {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.snow span {
  position: absolute;
  top: -12vh;
  left: calc(var(--x) * 1vw);
  width: calc((var(--s) + 1) * 1px);   /* slightly larger flakes */
  height: calc((var(--s) + 1) * 1px);
  border-radius: 999px;
  background: rgba(255,255,255,var(--a));
  animation: fall var(--d) linear infinite;
  animation-delay: calc(var(--delay) * -1s);
}

@keyframes fall {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-80px,120vh,0); } /* drift left */
}

/* Flake variations (first 12 are plenty; rest inherit defaults if you add more) */
.snow span:nth-child(1)  { --x: 6;  --s: 3; --a: .55; --d: 12s; --delay: 1; }
.snow span:nth-child(2)  { --x: 14; --s: 4; --a: .35; --d: 16s; --delay: 8; }
.snow span:nth-child(3)  { --x: 22; --s: 3; --a: .50; --d: 14s; --delay: 4; }
.snow span:nth-child(4)  { --x: 31; --s: 5; --a: .28; --d: 18s; --delay: 11; }
.snow span:nth-child(5)  { --x: 39; --s: 3; --a: .48; --d: 13s; --delay: 6; }
.snow span:nth-child(6)  { --x: 47; --s: 4; --a: .32; --d: 17s; --delay: 14; }
.snow span:nth-child(7)  { --x: 55; --s: 3; --a: .58; --d: 12.5s; --delay: 9; }
.snow span:nth-child(8)  { --x: 63; --s: 6; --a: .22; --d: 20s; --delay: 17; }
.snow span:nth-child(9)  { --x: 71; --s: 3; --a: .46; --d: 15s; --delay: 3; }
.snow span:nth-child(10) { --x: 79; --s: 4; --a: .30; --d: 18s; --delay: 10; }
.snow span:nth-child(11) { --x: 87; --s: 3; --a: .52; --d: 13.5s; --delay: 7; }
.snow span:nth-child(12) { --x: 95; --s: 5; --a: .24; --d: 19s; --delay: 15; }

@media (prefers-reduced-motion: reduce) {
  .snow span { animation: none; opacity: .25; }
}