/* ── Hero ─────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-block: var(--space-xl);
  background:
    radial-gradient(ellipse 90% 70% at 15% 50%, rgba(91, 95, 239, 0.09) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 85% 80%, rgba(91, 95, 239, 0.04) 0%, transparent 60%);
  overflow: hidden;
}

/* Grain noise overlay — breaks digital flatness */
.hero-grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 250px 250px;
  pointer-events: none;
  z-index: 0;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: var(--space-lg);
  position: relative;
  z-index: 1;
}

/* Display headline — tight tracking, tight leading */
.hero-title {
  font-size: clamp(36px, 4.8vw, 64px);
  letter-spacing: -0.035em;
  line-height: 1.03;
  text-wrap: balance;
  max-width: 14ch;
  margin-bottom: var(--space-md);
}

.hero-subtitle {
  color: var(--ink-60);
  font-size: 18px;
  line-height: 1.78;
  max-width: 44ch;
  text-wrap: pretty;
}

.hero-ctas {
  display: flex;
  gap: var(--space-sm);
  margin-top: calc(var(--space-md) * 1.5);
  flex-wrap: wrap;
}

.hero-graphic {
  position: relative;
}

.hero-graphic svg {
  width: 130%;
  max-width: none;
  margin-inline-start: -22%;
  filter: drop-shadow(0 0 60px rgba(91, 95, 239, 0.18));
}

/* ── Animation keyframes — global scope, always defined ───── */
@keyframes nexaiFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes nexaiFloat {
  0%, 100% { transform: translateY(0px)   rotate(0deg);  }
  40%       { transform: translateY(-10px) rotate(0.4deg); }
  70%       { transform: translateY(-5px)  rotate(-0.3deg); }
}

/* ── Default state: invisible until animation fires ─────────
   (fill-mode: forwards animates TO opacity 1 cleanly;
    no `backwards` so Chrome throttling can't freeze at 0) */
.hero-copy > * {
  opacity: 0;
  transform: translateY(24px);
}

.hero-graphic {
  opacity: 0;
}

/* ── Motion: staggered spring entries ───────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * {
    will-change: opacity, transform;
    animation: nexaiFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  .hero-copy > *:nth-child(1) { animation-delay: 0.1s; }
  .hero-copy > *:nth-child(2) { animation-delay: 0.2s; }
  .hero-copy > *:nth-child(3) { animation-delay: 0.3s; }

  /* Graphic: fade in → float forever */
  .hero-graphic {
    will-change: opacity, transform;
    animation:
      nexaiFadeUp  1s  cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards,
      nexaiFloat   8s  ease-in-out                   1.2s  infinite;
  }
}

/* ── Reduced motion: reveal immediately ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-copy > * {
    opacity: 1;
    transform: none;
  }
  .hero-graphic {
    opacity: 1;
  }
}

/* ── Mobile ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero {
    min-height: auto;
    padding-block: calc(var(--space-xl) * 0.65);
    align-items: flex-start;
  }
  .hero-inner {
    grid-template-columns: 1fr;
  }
  .hero-graphic {
    order: -1;
    opacity: 0.55;
    animation: none !important;
  }
  .hero-graphic svg {
    width: 80%;
    margin: 0 auto;
    margin-inline-start: auto;
    filter: none;
  }
  .hero-title { max-width: none; }
}