:root {
  --bg: #0a0b0d;
  --fg: #f1f2f4;
  --fg-muted: #8b919c;
  --accent: #b7c2cf;
  --ink: #070809;
  --glass: rgba(241, 242, 244, 0.045);
  --glass-strong: rgba(241, 242, 244, 0.08);
  --border: rgba(241, 242, 244, 0.12);
  --border-strong: rgba(241, 242, 244, 0.22);
  --shadow: 0 28px 70px rgba(0, 0, 0, 0.5);
  --radius: 1.25rem;
  --radius-sm: 0.75rem;
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, sans-serif;
  --header-h: 4.5rem;
  --max: 92rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 240ms;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--fg);
  background: var(--bg);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 55% 40% at 100% 0%, rgba(183, 194, 207, 0.08), transparent 55%),
    radial-gradient(ellipse 45% 35% at 0% 100%, rgba(241, 242, 244, 0.04), transparent 50%),
    linear-gradient(180deg, #0e1014 0%, #0a0b0d 50%, #08090b 100%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.12;
  background-image: url("https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=1600&auto=format&fit=crop&q=55");
  background-size: cover;
  background-position: center 30%;
  mix-blend-mode: luminosity;
  filter: grayscale(1);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.65), transparent 60%);
  pointer-events: none;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

button,
.btn,
.nav a,
.brand,
.glass-social {
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes drop {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.anim-header {
  animation: drop 0.55s var(--ease) both;
}

.anim-hero {
  animation: rise 0.7s var(--ease) 0.08s both;
}

.anim-hero-delay {
  animation: rise 0.7s var(--ease) 0.2s both;
}