/* ──────────────────────────────────────────────────────────────────────────
   Hero interaction — Option B (Vercel / Linear / Cloudflare style).

   The headline stays fully legible: hovering a keyword only recolours it
   (cyan + heavier weight). A fixed visual panel on the right of the hero
   crossfades to that keyword's image — fade + scale + blur-to-focus.
   No image is ever drawn over the text; no tooltip; no cursor following.
   Below 992px the panel stacks below the copy as a compact 3D preview.
   ────────────────────────────────────────────────────────────────────────── */

:root{
  --hero-accent: #16bed6;   /* cyan keyword + active highlight */
}

/* ── Interactive keywords ────────────────────────────────────────────────── */
.hero-rword{
  /* inline (not inline-block) so adjacent punctuation never orphans */
  color: inherit;
  font-weight: inherit;
  cursor: pointer;
  outline: none;
  transition: color .3s ease, font-weight .3s ease, text-shadow .3s ease;
  -webkit-text-decoration: none;
  text-decoration: none;
}
.hero-rword:hover,
.hero-rword:focus-visible,
.hero-rword.is-active{
  color: var(--hero-accent);
  font-weight: 800;
  text-shadow: 0 0 28px rgba(22, 190, 214, .28);
}

/* ── Two-column hero (desktop only) ──────────────────────────────────────── */
.hero-split{ width: 100%; }

@media (min-width: 992px){
  .hero-split{
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    align-items: center;
    column-gap: clamp(32px, 4.5vw, 76px);
    text-align: left;
  }

  /* Left column: undo the centred constraints so the copy reads left-aligned */
  .hero-split__copy{ margin-bottom: 0 !important; }
  .hero-split__copy .text-align-center{ text-align: left; }
  .hero-split__copy .max-width-large,
  .hero-split__copy .max-width-886,
  .hero-split__copy .max-width-600{ max-width: none; }
  .hero-split__copy .align-center{ margin-left: 0; margin-right: 0; }
  .hero-split__copy .flex-center{ justify-content: flex-start; align-items: flex-start; }
  .hero-split__copy .margin-bottom.margin-small.flex-center{ flex-flow: column; }
  .hero-split__copy .button-wrapper{ justify-content: flex-start; }
}

/* ── 3D visual panel ─────────────────────────────────────────────────────── */
.hero-visual{
  display: block;
  width: min(100%, 620px);
  margin: clamp(26px, 8vw, 42px) auto 0;
}

.hero-visual__frame{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(22, 190, 214, .22), rgba(22, 190, 214, 0) 34%),
    radial-gradient(circle at 75% 20%, rgba(34, 78, 190, .30), rgba(34, 78, 190, 0) 32%),
    linear-gradient(145deg, #081323 0%, #0b1727 52%, #07111e 100%);
  border: 1px solid rgba(148, 198, 255, .18);
  box-shadow:
    0 30px 60px -34px rgba(2, 26, 54, .68),
    inset 0 1px 0 rgba(255,255,255,.14);
  isolation: isolate;
  transform-style: preserve-3d;
}

.hero-visual__frame::before{
  content: "";
  position: absolute;
  inset: 14px;
  z-index: 1;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at center, #000 0%, rgba(0,0,0,.76) 43%, transparent 78%);
  pointer-events: none;
}

.hero-visual__canvas{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
}

.hero-visual__layer{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.06);
  filter: blur(18px) saturate(.8);
  mix-blend-mode: screen;
  transition:
    opacity .6s ease,
    transform .9s cubic-bezier(.16, .84, .36, 1),
    filter .6s ease;
  will-change: opacity, transform, filter;
}

.hero-visual__layer.is-shown{
  opacity: .16;
  transform: scale(1);
  filter: blur(8px) saturate(1.05);
}

.hero-visual__sheen{
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,0) 24%),
    radial-gradient(circle at 50% 52%, rgba(22,190,214,.10), rgba(22,190,214,0) 42%),
    linear-gradient(0deg, rgba(7,17,30,.72) 0%, rgba(7,17,30,0) 46%);
}

.hero-visual__chip,
.hero-visual__metric{
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255,255,255,.16);
  color: #f6fbff;
  background: rgba(8, 19, 35, .64);
  box-shadow: 0 18px 38px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.10);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.hero-visual__chip{
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
  animation: heroFloat 6s ease-in-out infinite;
}

.hero-visual__chip--ads{ top: 16px; left: 16px; }
.hero-visual__chip--infra{ right: 14px; top: 31%; animation-delay: -1.5s; }
.hero-visual__chip--ai{ left: 18px; bottom: 58px; animation-delay: -3s; }

.hero-visual__metric{
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 104px;
  padding: 10px 12px;
  border-radius: 12px;
  animation: heroFloat 7s ease-in-out infinite;
}

.hero-visual__metric strong{
  font-size: 15px;
  line-height: 1.05;
  letter-spacing: -.01em;
}

.hero-visual__metric em{
  color: rgba(224, 242, 254, .72);
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
}

.hero-visual__metric--profit{ right: 16px; bottom: 48px; animation-delay: -2.2s; }
.hero-visual__metric--uptime{ left: 42%; top: 16px; animation-delay: -4s; }

@keyframes heroFloat{
  0%, 100%{ transform: translate3d(0, 0, 0); }
  50%{ transform: translate3d(0, -9px, 0); }
}

.hero-visual__label{
  position: absolute;
  left: 18px;
  bottom: 16px;
  right: 18px;
  z-index: 6;
  margin: 0;
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: .01em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s ease, transform .55s cubic-bezier(.16, .84, .36, 1);
  pointer-events: none;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}

.hero-visual__label.is-shown{
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 479px){
  .hero-visual{
    width: 100%;
    margin-top: 24px;
  }

  .hero-visual__frame{
    aspect-ratio: 1 / .86;
    border-radius: 16px;
  }

  .hero-visual__chip--ai,
  .hero-visual__metric--uptime{
    display: none;
  }

  .hero-visual__chip--ads{ top: 12px; left: 12px; }
  .hero-visual__chip--infra{ right: 12px; top: 38%; }
  .hero-visual__metric--profit{ right: 12px; bottom: 38px; }
  .hero-visual__label{ left: 14px; right: 14px; bottom: 12px; font-size: 12px; }
}

@media (min-width: 992px){
  .hero-visual{
    width: 100%;
    margin-top: 0;
  }
  .hero-visual__frame{
    aspect-ratio: 5 / 4;
    max-height: 500px;
    margin-left: auto;
    border-radius: 22px;
  }

  .hero-visual__frame::before{
    inset: 18px;
    border-radius: 18px;
    background-size: 42px 42px;
  }

  .hero-visual__layer.is-shown{
    opacity: .18;
  }

  .hero-visual__chip{
    min-height: 34px;
    padding: 0 13px;
    font-size: 12px;
  }

  .hero-visual__chip--ads{ top: 24px; left: 28px; }
  .hero-visual__chip--infra{ right: 24px; top: 30%; animation-delay: -1.5s; }
  .hero-visual__chip--ai{ left: 34px; bottom: 88px; animation-delay: -3s; }

  .hero-visual__metric{
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 132px;
    padding: 13px 15px;
    border-radius: 14px;
  }

  .hero-visual__metric strong{
    font-size: 18px;
  }

  .hero-visual__metric em{
    font-size: 11px;
  }

  .hero-visual__metric--profit{ right: 34px; bottom: 72px; animation-delay: -2.2s; }
  .hero-visual__metric--uptime{ left: 40%; top: 28px; animation-delay: -4s; }

  /* Caption that swaps with the active keyword */
  .hero-visual__label{
    left: 22px;
    bottom: 20px;
    right: 22px;
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce){
  .hero-visual__chip,
  .hero-visual__metric{
    animation: none;
  }
  .hero-visual__layer{
    transition-duration: .25s;
    transform: none;
    filter: none;
  }
  .hero-visual__layer:not(.is-shown){ filter: blur(0); }
}