@font-face { font-family: "Inter"; font-style: normal; font-weight: 300 800; font-display: swap; src: url(inter.woff2) format("woff2"); }
:root {
  --bg: #070c11;
  --teal: #50cca5;
  --teal-2: #2aa3c8;
  --ink: #e9f3f0;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: radial-gradient(1200px 800px at 50% 42%, #0d1a20 0%, var(--bg) 62%) fixed, var(--bg);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
#net { position: fixed; inset: 0; width: 100%; height: 100%; opacity: .55; }

/* slow drifting glow behind the mark */
.aurora { position: fixed; inset: 0; pointer-events: none; filter: blur(70px); opacity: .55; }
.aurora span { position: absolute; border-radius: 50%; mix-blend-mode: screen; }
.aurora span:nth-child(1) { width: 46vmax; height: 46vmax; left: 50%; top: 44%; background: radial-gradient(circle, rgba(80,204,165,.34), transparent 65%);
  animation: drift1 26s ease-in-out infinite alternate; }
.aurora span:nth-child(2) { width: 38vmax; height: 38vmax; left: 38%; top: 56%; background: radial-gradient(circle, rgba(42,163,200,.26), transparent 65%);
  animation: drift2 32s ease-in-out infinite alternate; }
.aurora span:nth-child(3) { width: 30vmax; height: 30vmax; left: 62%; top: 34%; background: radial-gradient(circle, rgba(120,230,190,.18), transparent 65%);
  animation: drift3 38s ease-in-out infinite alternate; }
@keyframes drift1 { from { transform: translate(-50%, -50%) scale(1); } to { transform: translate(-44%, -56%) scale(1.12); } }
@keyframes drift2 { from { transform: translate(-50%, -50%) scale(1.05); } to { transform: translate(-58%, -42%) scale(.92); } }
@keyframes drift3 { from { transform: translate(-50%, -50%) scale(.95); } to { transform: translate(-42%, -48%) scale(1.1); } }

main {
  position: relative; z-index: 1; min-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px 16px; text-align: center;
}
.mark { width: clamp(150px, 30vmin, 260px); aspect-ratio: 1; position: relative; animation: rise 1.6s cubic-bezier(.2,.7,.2,1) both; }
.mark::before { content: ""; position: absolute; inset: -18%; border-radius: 50%;
  background: radial-gradient(circle, rgba(80,204,165,.28), transparent 62%); filter: blur(18px); animation: breathe 7s ease-in-out infinite; }
.mark img { position: relative; width: 100%; height: auto; display: block; filter: drop-shadow(0 8px 30px rgba(80,204,165,.25)); }
h1 {
  margin: clamp(26px, 5vmin, 42px) 0 0; font-weight: 300; text-transform: uppercase;
  font-size: clamp(22px, 4.4vmin, 40px); letter-spacing: .42em; padding-left: .42em; /* keep visually centred despite tracking */
  color: var(--ink); animation: rise 1.6s .25s cubic-bezier(.2,.7,.2,1) both;
}
h1 span { font-weight: 700; color: var(--teal); }
.rule { width: clamp(60px, 12vmin, 110px); height: 1px; margin-top: 22px;
  background: linear-gradient(90deg, transparent, var(--teal), transparent); animation: widen 2s .6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes breathe { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes widen { from { opacity: 0; transform: scaleX(0); } to { opacity: .9; transform: scaleX(1); } }

@media (max-width: 420px) { h1 { letter-spacing: .3em; padding-left: .3em; } }
@media (prefers-reduced-motion: reduce) {
  .aurora span, .mark, .mark::before, h1, .rule { animation: none !important; }
  .aurora span:nth-child(1), .aurora span:nth-child(2), .aurora span:nth-child(3) { transform: translate(-50%, -50%); }
}