/* Keyframes (hero-specific only — shared ones live in base.css) */
@keyframes lutFloat1 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@keyframes lutFloat2 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@keyframes lutFloat3 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(4px, -8px) rotate(.6deg); }
}
@keyframes lutWaveX {
  from { background-position-x: 0; }
  to { background-position-x: 14px; }
}

/* Full-bleed first screen — no card, no frame. Background comes from the
   global .site-bg canvas showing through; this section stays transparent
   so there is nothing here to seam against assembly. */
.hero-viewport {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: transparent;
  color: var(--color-text-primary);
  font-family: var(--font-body);
}

/* Content grid — same container system as assembly */
.hero__container {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: calc(var(--header-height) + 40px) var(--section-padding) 64px;
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 36px;
  align-items: center;
  z-index: 3;
}

@media (min-width: 1920px) {
  .hero__container {
    gap: 64px;
  }
}

@media (max-width: 1199px) {
  .hero__container {
    gap: 24px;
  }
}

/* Left copy */
.hero__copy {
  position: relative;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  margin: 24px 0 0;
  letter-spacing: var(--ls-heading);
  color: var(--color-text-primary-strong);
  text-wrap: balance;
  max-width: 560px;
}

.hero__title span {
  color: var(--color-accent);
}

.hero__subtitle {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 22px 0 0;
  max-width: 460px;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
}

.hero__stats {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 36px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: .04em;
  color: var(--color-text-dim);
}

.hero__stats b {
  color: #e6e6e0;
  font-size: 15px;
  font-weight: 600;
}

.hero__stats-sep {
  opacity: .4;
}

/* Right scene — centers the device mockup, mirrors assembly__scene */
.hero__scene {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

/* Mockup (device preview) — fixed intrinsic size by design, like a
   screenshot. Its cards are absolutely positioned in that 560x440
   coordinate space (see the --sx/--sy scatter deltas below), so
   below 1024px it isn't reflowed narrower — it's scaled down as a
   whole via .hero__mockup-shell, which reserves exactly the scaled
   footprint in the layout so nothing overflows or gets clipped. */
.hero__mockup-shell {
  position: relative;
}

.hero__mockup {
  position: relative;
  width: 560px;
  height: 440px;
  max-width: 100%;
  cursor: pointer;
  perspective: 1300px;
}

@media (max-width: 1023px) {
  .hero__mockup-shell {
    width: calc(560px * var(--hero-scale, .85));
    height: calc(440px * var(--hero-scale, .85));
  }

  .hero__mockup {
    width: 560px;
    height: 440px;
    max-width: none;
    transform: scale(var(--hero-scale, .85));
    transform-origin: top left;
  }
}

@media (max-width: 767px) {
  .hero__mockup-shell { --hero-scale: .68; }
}

@media (max-width: 599px) {
  .hero__mockup-shell { --hero-scale: .56; }
}

@media (max-width: 389px) {
  .hero__mockup-shell { --hero-scale: .48; }
}

/* Large monitors — the container above grows, so nudge the scene up
   too rather than leaving it looking small in the extra space. */
@media (min-width: 1920px) {
  .hero__mockup {
    transform: scale(1.15);
    transform-origin: center;
  }
}

@media (min-width: 2560px) {
  .hero__mockup {
    transform: scale(1.4);
  }

  .hero__container {
    gap: 96px;
  }
}

.hero__mockup-tilt {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .3s ease-out;
}

.hero__mockup-glow {
  position: absolute;
  inset: -16px;
  border-radius: 20px;
  background: radial-gradient(closest-side, rgba(200, 255, 46, .28), transparent);
  opacity: 0;
  transition: opacity .5s ease;
  transform: translateZ(-40px);
  pointer-events: none;
}

.hero__mockup-glow.is-visible {
  opacity: 1;
}

.hero__mockup-frame {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-mockup);
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-deep), inset 0 1px 0 rgba(255, 255, 255, .05);
  transform: translateZ(-10px);
}

.hero__mockup .browser-bar {
  transform: translateZ(-8px);
}

.hero__mockup-stage {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 46px;
  bottom: 16px;
  transform-style: preserve-3d;
}

/* Mockup cards — shared behaviour */
.hero__mockup-card {
  position: absolute;
  transition: transform .95s var(--ease-pop), opacity .5s ease;
  transform: translate3d(0, 0, var(--hz)) rotate(0deg) scale(1);
  opacity: 1;
}

.hero__mockup-stage.is-scattered .hero__mockup-card {
  transform: translate3d(var(--sx), var(--sy), var(--sz)) rotate(var(--sr)) scale(var(--ss));
  opacity: var(--so);
}

.hero__mockup-card-inner {
  width: 100%;
  height: 100%;
  border-radius: 7px;
}

/* Individual card placement + scatter targets */
.hero__mockup-card--navbar {
  left: 0; top: 0; width: 520px; height: 40px;
  transition-delay: 0ms;
  --hz: 6px; --sx: -70px; --sy: -92px; --sz: -20px; --sr: -7deg; --ss: .9; --so: .85;
}
.hero__mockup-card--headline {
  left: 0; top: 54px; width: 300px; height: 84px;
  transition-delay: 40ms;
  --hz: 22px; --sx: -150px; --sy: 40px; --sz: 34px; --sr: 7deg; --ss: .85; --so: .85;
}
.hero__mockup-card--cta {
  left: 0; top: 150px; width: 140px; height: 36px;
  transition-delay: 90ms;
  --hz: 44px; --sx: -58px; --sy: 152px; --sz: 72px; --sr: 16deg; --ss: 1.05; --so: .9;
}
.hero__mockup-card--image {
  left: 330px; top: 54px; width: 190px; height: 132px;
  transition-delay: 60ms;
  --hz: 60px; --sx: 58px; --sy: -74px; --sz: 92px; --sr: 11deg; --ss: .8; --so: .85;
}
.hero__mockup-card--feature-a {
  left: 0; top: 206px; width: 160px; height: 82px;
  transition-delay: 120ms;
  --hz: 18px; --sx: -132px; --sy: 122px; --sz: -12px; --sr: -13deg; --ss: .9; --so: .85;
}
.hero__mockup-card--feature-b {
  left: 178px; top: 206px; width: 160px; height: 82px;
  transition-delay: 150ms;
  --hz: 30px; --sx: 22px; --sy: 188px; --sz: 54px; --sr: 9deg; --ss: .85; --so: .85;
}
.hero__mockup-card--feature-c {
  left: 356px; top: 206px; width: 164px; height: 82px;
  transition-delay: 110ms;
  --hz: 20px; --sx: 60px; --sy: 152px; --sz: 24px; --sr: -10deg; --ss: .9; --so: .85;
}
.hero__mockup-card--footer {
  left: 0; top: 305px; width: 520px; height: 64px;
  transition-delay: 170ms;
  --hz: 6px; --sx: -32px; --sy: 122px; --sz: -28px; --sr: -5deg; --ss: .92; --so: .85;
}

/* Card inner visuals */
.hero__mockup-card--navbar .hero__mockup-card-inner {
  animation: lutFloat1 6.5s ease-in-out infinite;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-soft);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
}
.hero__mockup-card--headline .hero__mockup-card-inner {
  animation: lutFloat2 7s ease-in-out infinite;
  animation-delay: .4s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 11px;
}
.hero__mockup-card--cta .hero__mockup-card-inner {
  animation: lutFloat3 5.5s ease-in-out infinite;
  animation-delay: .2s;
  border-radius: 5px;
  background: var(--color-accent);
  box-shadow: 0 10px 24px rgba(200, 255, 46, .32);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--color-accent-on-accent);
}
.hero__mockup-card--image .hero__mockup-card-inner {
  animation: lutFloat2 8s ease-in-out infinite;
  animation-delay: .6s;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-lifted);
  background: repeating-linear-gradient(135deg, rgba(200, 255, 46, .1) 0 10px, rgba(255, 255, 255, .03) 10px 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: rgba(200, 255, 46, .8);
}
.hero__mockup-card--feature-a .hero__mockup-card-inner,
.hero__mockup-card--feature-b .hero__mockup-card-inner,
.hero__mockup-card--feature-c .hero__mockup-card-inner {
  border-radius: 8px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-lifted);
  padding: 13px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.hero__mockup-card--feature-a .hero__mockup-card-inner {
  animation: lutFloat1 6s ease-in-out infinite;
  animation-delay: .8s;
}
.hero__mockup-card--feature-b .hero__mockup-card-inner {
  animation: lutFloat3 6.8s ease-in-out infinite;
  animation-delay: .3s;
}
.hero__mockup-card--feature-c .hero__mockup-card-inner {
  animation: lutFloat1 7.4s ease-in-out infinite;
  animation-delay: .5s;
}
.hero__mockup-card--footer .hero__mockup-card-inner {
  animation: lutFloat2 7.8s ease-in-out infinite;
  animation-delay: .1s;
  border-radius: 8px;
  background: var(--color-surface-3);
  border: 1px solid var(--color-border-faint);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

/* Hint */
.hero__hint {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: .03em;
  color: var(--color-text-dim-2);
  opacity: 0;
  transition: opacity .4s ease;
}

.hero__hint.is-visible {
  opacity: 1;
}

.hero__hint-icon {
  width: 16px;
  height: 16px;
  border: 1px solid var(--color-accent);
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  flex-shrink: 0;
  animation: lutPulse 1.8s ease-in-out infinite;
}

/* ============================================================
   Portrait tablet / phone — stacked, re-ordered composition
   ============================================================
   Desktop reads left-copy / right-scene because both columns fit
   side by side. Below 1024px that space is gone, so the section
   becomes a single flex column and re-sequences to: badge → H1 →
   mockup → tap hint → description → CTAs → stats (owner-specified
   order — the mockup needs to sit right under the headline, not at
   the bottom, so the touch interaction reads as the section's point,
   not an afterthought).

   .hero__copy/.hero__scene keep the markup nesting (no HTML reshuffle)
   but stop generating their own box, so their children become direct
   flex items of .hero__container and can be reordered independently
   of which of the two they used to belong to.

   This block is deliberately last in the file: it overrides earlier
   unconditional rules (.hero__scene's display:flex, .hero__copy's
   position:relative, etc.) for the same properties, and CSS resolves
   that tie by source order, not by which one sits in a media query. */
@media (max-width: 1023px) {
  .hero-viewport {
    display: block;
    min-height: auto;
  }

  .hero__container {
    display: flex;
    flex-direction: column;
    padding: calc(var(--header-height) + 28px) var(--section-padding) 56px;
    gap: 0;
  }

  .hero__copy,
  .hero__scene {
    display: contents;
  }

  .hero-viewport .badge { order: 1; }
  .hero__title { order: 2; max-width: none; text-align: center; }

  /* z-index:1 is enough to sit below the hint's z-index:5 (see base
     rule) — belt-and-braces against the scattered cards' own 3D
     transform/perspective stacking context, which was reading as
     "in front of" this next sibling in flow and swallowing the hint
     text entirely (the reported bug: scattered elements are all the
     user could see, no hint underneath them). */
  .hero__mockup-shell { order: 3; position: relative; z-index: 1; margin: 32px auto 0; }

  /* Solid plaque instead of bare text — legible regardless of what's
     behind it, and reads as part of the interactive scene rather than
     a caption that happens to sit nearby. */
  .hero__hint {
    order: 4;
    margin: 22px auto 0;
    justify-content: center;
    padding: 9px 16px;
    border-radius: 20px;
    background: rgba(18, 19, 17, .88);
    border: 1px solid var(--color-accent-border);
    box-shadow: var(--shadow-lifted);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--color-text-primary);
  }

  .hero__subtitle { order: 5; max-width: none; text-align: center; margin: 26px auto 0; }
  .hero__actions { order: 6; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
  .hero__stats { order: 7; justify-content: center; text-align: center; margin-top: 30px; flex-wrap: wrap; row-gap: 10px; }
}

@media (max-width: 599px) {
  .hero__actions {
    flex-direction: column;
    align-self: stretch;
  }

  .hero__actions .btn {
    width: 100%;
    text-align: center;
  }

  .hero__stats {
    gap: 14px;
  }
}