/* Home page: static hero (no scroll-pin/zoom — that was tried and
   explicitly removed) + VULNKON spotlight. The hero is a normal section:
   scrolls past like any other, no sticky, no scroll-driven transitions. */

:root {
  --hero-phase-height: 100vh;
}

.hero-story {
  position: relative;
}

.hero-story__sticky {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-block: var(--space-2xl);
}

.hero-story__inner {
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
  width: 100%;
  position: relative;
}

.hero-story__headline {
  font-size: clamp(2.25rem, 1.7rem + 2.6vw, 4.25rem);
  margin-bottom: var(--space-md);
}

.hero-story__static {
  display: block;
}

.hero-story__phrases {
  display: block;
  color: var(--color-accent-blue-strong);
}

.hero-story__lede {
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  max-width: 44rem;
  margin-bottom: var(--space-lg);
}

.hero-story__visual {
  position: relative;
  width: 100%;
  max-width: 30rem;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
}

@media (min-width: 64rem) {
  .hero-story__inner {
    grid-template-columns: 1.1fr 1fr;
  }
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-story__visual[data-enhanced='true'] .hero__fallback {
  opacity: 0;
  visibility: hidden;
}

/* --- Product spotlight on home: VULNKON, ENTERKON, BUSSKON all visible at
   once (not a one-at-a-time carousel) — one full-viewport section, VULNKON
   as the larger flagship card with its own 3D visual, ENTERKON/BUSSKON as
   two smaller supporting cards stacked beside it. Same "one big + smaller
   supporting" weighting as the mega-menu's Home card. */

.spotlight-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-block: var(--space-2xl);
  overflow: hidden;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, color-mix(in srgb, var(--color-accent-blue) 10%, transparent), transparent);
}

/* A slow ambient drift behind the cards — full-bleed, so it isn't confined
   to the card boxes the way .spotlight-card::before's glow is. */
.spotlight-section::before {
  content: '';
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--color-accent-cyan) 8%, transparent), transparent 45%),
    radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--color-accent-blue) 8%, transparent), transparent 45%);
  animation: spotlight-ambient-drift 18s ease-in-out infinite;
  pointer-events: none;
}

@keyframes spotlight-ambient-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(2%, -2%, 0) scale(1.08); }
}

.spotlight-section__inner {
  position: relative;
  width: 100%;
  /* Deliberately more generous than --container-pad: this section is
     full-bleed (no .container wrapping it), so on a wide viewport the
     usual container padding reads as almost nothing against the full
     browser width — it looked like content was bleeding off the edge. */
  padding-inline: clamp(1.5rem, 6vw, 6rem);
}

.spotlight-section__head {
  max-width: 40rem;
  margin-inline: auto;
  margin-bottom: var(--space-xl);
}

.spotlight-section__head h2 {
  font-size: var(--fs-2xl);
}

.spotlight-showcase {
  display: grid;
  gap: var(--space-lg);
  align-items: stretch;
}

@media (min-width: 64rem) {
  .spotlight-showcase {
    grid-template-columns: 1.3fr 1fr;
  }
}

.spotlight-card {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-strong);
  background: linear-gradient(160deg, var(--color-bg-elevated), var(--color-bg-surface));
  padding: var(--space-xl);
  overflow: hidden;
  transition: border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.spotlight-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(49, 130, 206, 0.22), transparent 45%);
  pointer-events: none;
}

.spotlight-card--primary:hover {
  border-color: var(--color-accent-blue);
  box-shadow: var(--shadow-lg);
}

.spotlight-card .cta-row {
  margin-top: var(--space-lg);
}

/* Staggered entrance: each card's own [data-reveal] fade/rise (see
   components.css) fires on the same intersection, so without a delay all
   three would pop in simultaneously — offsetting them in reading order
   (flagship first, then each supporting card) reads as one connected
   sequence instead. */
.spotlight-card[data-reveal] { transition-delay: 0s; }
.spotlight-stack .spotlight-card[data-reveal]:nth-of-type(1) { transition-delay: 0.12s; }
.spotlight-stack .spotlight-card[data-reveal]:nth-of-type(2) { transition-delay: 0.24s; }

.spotlight-card h3 {
  font-size: var(--fs-xl);
  margin-bottom: var(--space-sm);
}

.spotlight-card__tagline {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  color: var(--color-accent-cyan);
  margin-bottom: var(--space-sm);
}

.spotlight-card__points {
  display: grid;
  gap: var(--space-2xs);
  margin-block: var(--space-md);
}

.spotlight-card__points li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.spotlight-card--primary {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
  padding: var(--space-2xl) var(--space-xl);
}

@media (min-width: 40rem) {
  .spotlight-card--primary {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.spotlight-card__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  overflow: hidden;
  background: var(--color-bg-surface);
}

.spotlight-card__visual canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* The VULNKON card's static fallback <img> (.vk-visual__fallback) is
   normally hidden-on-enhance by a rule in vulnkon.css — but this page's
   extra_css doesn't include that file, so without this the fallback image
   stays in normal flow, stacked on top of/behind the absolutely-positioned
   canvas above, overlapping into what reads as two logos. */
.spotlight-card__visual[data-enhanced='true'] .vk-visual__fallback {
  opacity: 0;
  visibility: hidden;
}

.spotlight-card__visual .vk-visual__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Deliberately small — the two supporting cards need to stay compact so all
   three products still fit on one screen together with the flagship card,
   not scale up to match its visual. */
.spotlight-card__visual--sm {
  width: 5.5rem;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}

.spotlight-stack {
  display: grid;
  gap: var(--space-lg);
}

.spotlight-card--secondary {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: var(--space-md);
}

.spotlight-card__text {
  flex: 1;
  min-width: 0;
}

.spotlight-card--secondary h3 {
  font-size: var(--fs-lg);
}

.spotlight-card--secondary:hover {
  border-color: var(--color-accent-blue);
  transform: translateY(-2px);
}

.spotlight-card__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .spotlight-card--secondary:hover {
    transform: none;
  }
}