:root {
  --bg: #080b10;
  --bg-2: #0d1219;
  --ink: #f4f1e9;
  --muted: rgba(244, 241, 233, .48);
  --line: rgba(162, 184, 214, .07);
  --mx: 50%;
  --my: 44%;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100svh;
  overflow: hidden;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(178, 202, 236, .085), transparent 24rem),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.025), transparent 42rem),
    linear-gradient(145deg, var(--bg-2) 0%, var(--bg) 48%, #06080c 100%);
}

::selection { background: var(--ink); color: var(--bg); }

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 100;
  transform: translateY(-180%);
  padding: .62rem .85rem;
  color: var(--bg);
  background: var(--ink);
  text-decoration: none;
  font-size: .75rem;
}
.skip-link:focus { transform: translateY(0); }

.stage {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 4vw, 4rem);
}

.hero {
  width: min(90vw, 1180px);
  display: grid;
  justify-items: center;
  gap: clamp(1.25rem, 2.4vw, 2rem);
  transform: translateY(-1.5vh);
}

.logo-wrap {
  position: relative;
  width: min(84vw, 1060px);
  color: var(--ink);
  isolation: isolate;
}

/* broad halo behind the logo, kept subtle so the mark still feels printed */
.logo-wrap::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 14% 10%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(195, 216, 245, .11), rgba(195, 216, 245, .025) 42%, transparent 72%);
  filter: blur(32px);
  opacity: .55;
  animation: haloBreath 7.5s ease-in-out infinite;
}

.logo-vector svg,
.logo-fallback {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.logo-vector circle {
  transform-box: fill-box;
  transform-origin: center;
  opacity: var(--base, .74);
  animation: dotBreath var(--speed, 8s) ease-in-out var(--delay, 0s) infinite;
  will-change: opacity, transform, filter;
}

/* A small subset becomes the lamp-like twinkle. */
.logo-vector circle.is-spark {
  animation-name: dotBreath, twinkle;
  animation-duration: var(--speed, 8s), var(--spark-speed, 4.2s);
  animation-delay: var(--delay, 0s), var(--spark-delay, 0s);
  animation-timing-function: ease-in-out, ease-in-out;
  animation-iteration-count: infinite, infinite;
}

.logo-vector circle.spark-now {
  opacity: 1 !important;
  transform: scale(1.16);
  filter: drop-shadow(0 0 3px rgba(255,255,255,.95)) drop-shadow(0 0 10px rgba(164,202,255,.42));
}

.eyebrow {
  margin: 0;
  display: flex;
  align-items: center;
  gap: .8rem;
  color: var(--muted);
  font-size: clamp(.56rem, .9vw, .72rem);
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.eyebrow .dot { opacity: .3; }

.site-footer {
  position: fixed;
  z-index: 3;
  left: clamp(1rem, 2.6vw, 2.6rem);
  right: clamp(1rem, 2.6vw, 2.6rem);
  bottom: clamp(1rem, 2vw, 1.8rem);
  display: flex;
  justify-content: center;
  gap: .75rem;
  color: rgba(244, 241, 233, .24);
  font-size: .54rem;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* fine film grain gives the page a fashion/editorial finish */
.grain {
  position: absolute;
  inset: -45%;
  opacity: .026;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.76' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.85'/%3E%3C/svg%3E");
  transform: rotate(.7deg);
}

/* faint running-track forms: visible only when you look for them */
.track {
  position: absolute;
  width: 80vw;
  height: 30vw;
  min-height: 220px;
  border: 1px solid var(--line);
  border-radius: 50%;
  opacity: .66;
  filter: drop-shadow(0 0 10px rgba(103,146,203,.025));
}
.track::before,
.track::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(166,190,224,.04);
  border-radius: inherit;
}
.track::before { inset: 15px; }
.track::after { inset: 31px; }
.track-a {
  left: -38vw;
  top: -13vw;
  transform: rotate(-12deg);
  animation: trackFloatA 18s ease-in-out infinite alternate;
}
.track-b {
  right: -40vw;
  bottom: -16vw;
  transform: rotate(17deg);
  animation: trackFloatB 21s ease-in-out infinite alternate;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

@keyframes dotBreath {
  0%, 100% { opacity: calc(var(--base, .74) * .72); transform: scale(.985); }
  45% { opacity: var(--base, .74); transform: scale(1); }
  60% { opacity: calc(var(--base, .74) * .86); transform: scale(.994); }
}

/* quick light pulse surrounded by long quiet intervals */
@keyframes twinkle {
  0%, 40%, 52%, 100% { filter: none; }
  45% { opacity: 1; transform: scale(1.13); filter: drop-shadow(0 0 2px rgba(255,255,255,.94)) drop-shadow(0 0 9px rgba(168,206,255,.34)); }
  47% { opacity: .78; transform: scale(1.01); filter: drop-shadow(0 0 2px rgba(255,255,255,.28)); }
  49% { opacity: 1; transform: scale(1.09); filter: drop-shadow(0 0 3px rgba(255,255,255,.8)) drop-shadow(0 0 7px rgba(168,206,255,.26)); }
}

@keyframes haloBreath {
  0%, 100% { opacity: .36; transform: scale(.98); }
  50% { opacity: .68; transform: scale(1.025); }
}

@keyframes trackFloatA {
  from { transform: translate3d(0,0,0) rotate(-12deg); }
  to { transform: translate3d(2vw,1.2vw,0) rotate(-10deg); }
}
@keyframes trackFloatB {
  from { transform: translate3d(0,0,0) rotate(17deg); }
  to { transform: translate3d(-1.5vw,-1vw,0) rotate(19deg); }
}

@media (max-width: 720px) {
  .hero { width: 94vw; transform: translateY(-2.5vh); }
  .logo-wrap { width: 92vw; }
  .logo-wrap::before { inset: 8% 1%; filter: blur(24px); }
  .track { width: 118vw; height: 56vw; }
  .site-footer { font-size: .48rem; gap: .52rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .logo-vector circle { opacity: .82; transform: none; filter: none; }
  .logo-wrap::before { opacity: .42; transform: none; }
}