/* ── Home page base ──────────────────────────────────────────────────── */

/* One seamless dark page — no section background blocks or divider bars */
.home-hero-carousel,
.home-features,
.home-cta {
  background: transparent;
  border: none;
}

/* ── Hero Carousel ───────────────────────────────────────────────────── */

.home-hero-carousel {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  padding-top: var(--header-height);
  overflow-x: clip;
}

/* Subtle grid texture */
.home-hero-carousel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--color-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}

/* ── Spotlight blobs ─────────────────────────────────────────────────── */

.home-spotlight {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

.home-spotlight--1 {
  width: 700px;
  height: 700px;
  top: 0%;
  left: -5%;
  background: radial-gradient(circle, rgba(var(--accent-rgb, 124 58 237), 0.22) 0%, rgba(var(--accent-rgb, 124 58 237), 0.08) 40%, transparent 70%);
  animation: spotlight1 26s ease-in-out infinite;
}

.home-spotlight--2 {
  width: 580px;
  height: 580px;
  top: 35%;
  right: -4%;
  background: radial-gradient(circle, rgba(var(--accent-rgb, 124 58 237), 0.16) 0%, rgba(var(--accent-rgb, 124 58 237), 0.05) 45%, transparent 70%);
  animation: spotlight2 34s ease-in-out infinite;
}

.home-spotlight--3 {
  width: 420px;
  height: 420px;
  bottom: 8%;
  left: 25%;
  background: radial-gradient(circle, rgba(var(--accent-rgb, 124 58 237), 0.13) 0%, rgba(var(--accent-rgb, 124 58 237), 0.04) 45%, transparent 70%);
  animation: spotlight3 20s ease-in-out infinite;
}

@keyframes spotlight1 {
  0%   { transform: translate(0,      0); }
  20%  { transform: translate(120px, -80px); }
  45%  { transform: translate(60px,   140px); }
  70%  { transform: translate(-80px,  60px); }
  100% { transform: translate(0,      0); }
}

@keyframes spotlight2 {
  0%   { transform: translate(0,       0); }
  25%  { transform: translate(-150px, -110px); }
  55%  { transform: translate(-40px,   100px); }
  80%  { transform: translate(100px,   30px); }
  100% { transform: translate(0,       0); }
}

@keyframes spotlight3 {
  0%   { transform: translate(0,     0); }
  35%  { transform: translate(80px, -100px); }
  65%  { transform: translate(-60px, 70px); }
  100% { transform: translate(0,     0); }
}

/* Top text block */
.home-hero-carousel__top {
  text-align: center;
  padding: 0 var(--gutter);
  z-index: var(--z-raised);
}

.home-hero-carousel__eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.home-hero-carousel__title {
  font-size: clamp(var(--text-3xl), 5.5vw, var(--text-5xl));
  font-weight: 800;
  color: var(--color-text);
  line-height: var(--leading-tight);
  letter-spacing: -0.025em;
}

.home-hero-carousel__title strong {
  color: var(--color-accent);
  font-weight: 800;
}

/* 3D scene slot */
.home-hero-carousel__scene {
  flex-shrink: 0;
  z-index: var(--z-raised);
}

/* CTAs */
.home-hero-carousel__ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: 0 var(--gutter);
  z-index: var(--z-raised);
}

/* Scroll-down arrow */
.home-hero-carousel__scroll {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-subtle);
  animation: scrollBounce 2s ease-in-out infinite;
  z-index: var(--z-raised);
  cursor: pointer;
  background: none;
  border: none;
  padding: var(--space-2);
  border-radius: var(--radius-full);
  transition: color var(--transition-fast);
}

.home-hero-carousel__scroll:hover { color: var(--color-text-muted); }

.home-hero-carousel__scroll svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(8px); }
}

/* Mobile */
@media (max-width: 767px) {
  .home-hero-carousel {
    justify-content: flex-start;
    gap: var(--space-6);
    padding-top: calc(var(--header-height) + var(--space-8));
    padding-bottom: var(--space-8);
  }
}

/* ── Features ────────────────────────────────────────────────────────── */

.home-features {
  padding: var(--space-24) var(--gutter);
}

.home-features__inner {
  max-width: var(--content-width);
  margin: 0 auto;
}

.home-features__heading {
  text-align: center;
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-12);
}

.home-features__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 640px) {
  .home-features__grid { grid-template-columns: repeat(3, 1fr); }
}

.home-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  padding: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition:
    border-color var(--transition-base),
    box-shadow   var(--transition-base),
    transform    var(--transition-base);
}

.home-feature:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-glow);
  transform: translateY(-4px);
}

.home-feature__icon {
  width: 52px;
  height: 52px;
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  flex-shrink: 0;
  transition: background var(--transition-base), transform var(--transition-base);
}

.home-feature:hover .home-feature__icon {
  background: color-mix(in srgb, var(--color-accent) 20%, transparent);
  transform: scale(1.1) rotate(-4deg);
}

.home-feature__icon svg { width: 28px; height: 28px; fill: currentColor; }

.home-feature__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
}

.home-feature__body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

/* ── Bottom CTA ──────────────────────────────────────────────────────── */

.home-cta {
  padding: var(--space-24) var(--gutter);
  text-align: center;
}

.home-cta__inner {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

.home-cta__title {
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  font-weight: 800;
  color: var(--color-text);
  line-height: var(--leading-tight);
}

.home-cta__body {
  font-size: var(--text-base);
  color: var(--color-text-muted);
}