.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: center;
  min-height: calc(100svh - var(--header-height));
  padding-block: clamp(3rem, 8vw, 5.5rem);
  background:
    radial-gradient(ellipse 80% 70% at 8% 12%, color-mix(in srgb, var(--color-brand) 16%, transparent), transparent 58%),
    radial-gradient(ellipse 70% 60% at 92% 8%, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 52%),
    radial-gradient(ellipse 55% 50% at 78% 92%, color-mix(in srgb, var(--color-cta) 10%, transparent), transparent 58%),
    var(--color-surface);
}

.hero__scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translate3d(calc(var(--mx, 0) * 14px), calc(var(--my, 0) * 10px + var(--hy, 0) * 22px), 0);
}

.hero__glow {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(80px);
}

.hero__glow--a {
  top: -20%;
  left: -10%;
  width: min(60vw, 42rem);
  height: min(60vw, 42rem);
  background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 34%, transparent), transparent 70%);
  animation: float-a 12s ease-in-out infinite alternate;
}

.hero__glow--b {
  right: -5%;
  bottom: -15%;
  width: min(45vw, 34rem);
  height: min(45vw, 34rem);
  background: radial-gradient(circle, color-mix(in srgb, var(--color-cta) 22%, transparent), transparent 70%);
  animation: float-b 15s ease-in-out infinite alternate;
}

.hero__field {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(118deg, transparent 0 36%, color-mix(in srgb, var(--color-accent) 14%, transparent) 42%, transparent 50%),
    linear-gradient(to right, color-mix(in srgb, var(--color-brand) 8%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--color-brand) 8%, transparent) 1px, transparent 1px);
  background-size: 140% 140%, 48px 48px, 48px 48px;
  mask-image: radial-gradient(ellipse at 72% 46%, #000 28%, transparent 78%);
}

.hero__grain {
  position: absolute;
  inset: 0;
  opacity: var(--hero-grain-opacity);
  mix-blend-mode: var(--hero-grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

.hero__copy p {
  max-width: var(--measure);
  color: var(--color-muted);
}

.js .hero__copy > * {
  opacity: 0;
  animation: hero-enter 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.js .hero__copy > *:nth-child(1) { animation-delay: 0.05s; }
.js .hero__copy > *:nth-child(2) { animation-delay: 0.12s; }
.js .hero__copy > *:nth-child(3) { animation-delay: 0.2s; }
.js .hero__copy > *:nth-child(4) { animation-delay: 0.28s; }
.js .hero__copy > *:nth-child(5) { animation-delay: 0.36s; }
.js .hero__copy > *:nth-child(6) { animation-delay: 0.44s; }

.hero__title {
  margin-bottom: var(--space-3);
  font-size: var(--text-display);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.hero__lead {
  margin-bottom: var(--space-4);
  font-size: var(--text-lead);
  font-weight: var(--weight-medium);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.hero__copy .hero__chips {
  margin-top: var(--space-5);
}

.hero__visual {
  margin: 0;
  perspective: 1400px;
}

.hero__visual-frame {
  transform: rotateX(calc(var(--my, 0) * -3deg)) rotateY(calc(var(--mx, 0) * 4deg))
    translate3d(calc(var(--mx, 0) * -8px), calc(var(--my, 0) * -6px + var(--hy, 0) * 16px), 0);
}

.js .hero__visual-frame img {
  opacity: 0;
  animation: hero-enter 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.16s both;
}

.hero__visual img,
.hero__visual svg,
.page-hero__visual img {
  width: min(100%, 38rem);
  margin-inline: auto;
  filter: drop-shadow(var(--hero-visual-shadow));
}

.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--space-7);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  scroll-margin-top: calc(var(--header-height) + 0.75rem);
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gradient-brand-soft);
  opacity: 0.7;
}

.page-hero p {
  max-width: var(--measure);
  margin-top: var(--space-4);
  color: var(--color-muted);
}

.page-hero .hero__actions {
  margin-top: var(--space-5);
}

.page-hero__inner {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.page-hero__inner .hero__chips {
  margin-top: var(--space-5);
}

.page-hero__visual {
  margin: 0;
}

.page-hero__visual img,
.product__visual img {
  width: min(100%, 28rem);
  margin-inline: auto;
}

.page-hero .split-media img {
  width: 100%;
  max-height: 22rem;
  object-fit: cover;
}

.cta {
  padding-block: var(--space-section);
  color: var(--color-invert-ink);
  background: color-mix(in srgb, var(--color-brand) 72%, var(--color-invert-bg));
  text-align: center;
}

.cta h2,
.cta p {
  color: var(--color-invert-ink);
}

.cta p {
  max-width: 38rem;
  margin-inline: auto;
  margin-top: var(--space-4);
}

.cta .btn {
  margin-top: var(--space-5);
}

.location {
  display: grid;
  gap: var(--space-5);
}

.pain-list li {
  padding: var(--space-4);
  border-left: 3px solid var(--color-brand);
  background: var(--color-surface);
  color: var(--color-muted);
}

.pain-list strong {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--color-brand-strong);
}

.split-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}

.split-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: color-mix(in srgb, #0b2545 28%, transparent);
}

.split-media img {
  width: 100%;
  height: 100%;
  min-height: 16rem;
  object-fit: cover;
}

@keyframes float-a {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(8%, 10%) scale(1.12); }
}

@keyframes float-b {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-9%, -7%) scale(1.14); }
}

@keyframes hero-enter {
  from {
    opacity: 0;
    transform: translateY(0.85rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (min-width: 48rem) {
  .hero__grid,
  .location {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

@media (min-width: 64rem) {
  .page-hero__inner:has(.page-hero__visual) {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

@media (max-width: 47.99rem) {
  .hero {
    min-height: 0;
  }

  .contact-layout {
    display: flex;
    flex-direction: column;
  }

  .contact-layout .form {
    order: -1;
  }
}

@media (pointer: coarse), (max-width: 47.99rem) {
  .hero__glow,
  .hero__grain,
  .hero__field {
    animation: none;
  }

  .hero__glow {
    filter: blur(40px);
  }

  .hero__scene,
  .hero__visual-frame {
    transform: none;
  }
}