@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/inter-latin.woff2) format("woff2");
  unicode-range: u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc,
    u+0304, u+0308, u+0329, u+2000-206f, u+20ac, u+2122, u+2191, u+2193, u+2212,
    u+2215, u+feff, u+fffd;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/inter-latin-ext.woff2) format("woff2");
  unicode-range: u+0100-02ba, u+02bd-02c5, u+02c7-02cc, u+02ce-02d7, u+02dd-02ff,
    u+0304, u+0308, u+0329, u+1d00-1dbf, u+1e00-1e9f, u+1ef2-1eff, u+2020,
    u+20a0-20ab, u+20ad-20c0, u+2113, u+2c60-2c7f, u+a720-a7ff;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
  size-adjust: 107.12%;
}

:root {
  --bg: #0a0a0a;
  --fg: #f5f5f3;
  --muted: #6b6b6b;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: Inter, "Inter Fallback", -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.shell {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}
.shell::before,
.shell::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.shell::before {
  background:
    radial-gradient(120% 80% at 50% 120%, rgba(120, 119, 198, 0.18) 0, transparent 55%),
    radial-gradient(90% 60% at 50% -10%, rgba(255, 255, 255, 0.05) 0, transparent 50%);
  z-index: 0;
}
.shell::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  z-index: 1;
  mix-blend-mode: overlay;
}

.header {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 28px clamp(20px, 4vw, 56px);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.header a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.25s ease;
}
.header a:hover { color: var(--fg); }

.main {
  position: relative;
  z-index: 3;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  padding: 0 16px;
}
.eyebrow {
  font-size: clamp(11px, 1.2vw, 13px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: clamp(18px, 4vh, 48px);
  opacity: 0;
  animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.05s forwards;
}

.wordmark {
  position: relative;
  z-index: 3;
  width: 100%;
  text-align: center;
  line-height: 0.82;
  user-select: none;
  overflow: hidden;
  padding: 0 clamp(12px, 3vw, 40px) clamp(8px, 3vh, 40px);
}
.wordmark h1 {
  font-weight: 900;
  font-size: 13.5vw;
  letter-spacing: -0.045em;
  white-space: nowrap;
  background: linear-gradient(180deg, #ffffff, #c9c7c1 60%, #8a8884);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transform: translateY(8%);
  opacity: 0;
  animation: riseMark 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s forwards;
}
.tld {
  font-weight: 800;
  background: linear-gradient(180deg, #b9b7b2, #7c7a76);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@keyframes rise {
  0% { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; }
}
@keyframes riseMark {
  0% { opacity: 0; transform: translateY(64px); }
  100% { opacity: 1; transform: translateY(8%); }
}

.footer {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(20px, 4vw, 56px) 26px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.footer span { opacity: 0.8; }

@media (max-width: 640px) {
  .wordmark h1 { font-size: 15vw; }
  .header { font-size: 11px; padding: 20px; }
  .footer { flex-direction: column; gap: 6px; padding-bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .eyebrow { opacity: 1; animation: none; }
  .wordmark h1 { opacity: 1; animation: none; transform: translateY(8%); }
}