/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding: 120px 0 100px;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Background image layer — abstract tech pattern via CSS */
.hero__bg-image {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(105,246,184,0.02) 0px,
      transparent 1px,
      transparent 80px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(119,230,255,0.015) 0px,
      transparent 1px,
      transparent 80px
    ),
    radial-gradient(ellipse 40% 30% at 75% 25%, rgba(105,246,184,0.06) 0%, transparent 100%),
    radial-gradient(ellipse 35% 25% at 25% 75%, rgba(119,230,255,0.04) 0%, transparent 100%),
    radial-gradient(circle at 60% 50%, rgba(105,246,184,0.03) 0%, transparent 50%);
  opacity: 1;
  mix-blend-mode: normal;
}

/* Gradient overlay on top of image */
.hero__bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--clr-bg) 0%, rgba(var(--clr-bg-rgb), 0.6) 40%, rgba(var(--clr-bg-rgb), 0.8) 100%);
}

/* Subtle dot grid */
.hero__grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(var(--clr-overlay-rgb), 0.06) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse 75% 55% at 50% 38%, black 20%, transparent 100%);
}

/* Primary large glow — top-right */
.hero__glow--1 {
  position: absolute;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(var(--clr-accent-rgb), 0.22) 0%, transparent 68%);
  top: -15%;
  right: -12%;
  filter: blur(64px);
  pointer-events: none;
}

/* Secondary glow — bottom-left */
.hero__glow--2 {
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(var(--clr-teal-rgb), 0.12) 0%, transparent 70%);
  bottom: 5%;
  left: -8%;
  filter: blur(72px);
  pointer-events: none;
}

/* Ambient mesh center glow */
.hero__bg::after {
  content: '';
  position: absolute;
  width: 900px;
  height: 500px;
  background: radial-gradient(ellipse, rgba(var(--clr-accent-rgb), 0.07) 0%, transparent 70%);
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* ── Two-column layout ── */
.hero__layout {
  position: relative;
  z-index: var(--z-base);
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}

@media (min-width: 1024px) {
  .hero__layout {
    grid-template-columns: 7fr 5fr;
    gap: 64px;
  }
}

.hero__inner {
  max-width: 820px;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(var(--clr-accent-rgb), 0.09);
  border: 1px solid rgba(var(--clr-accent-rgb), 0.22);
  border-radius: 100px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--clr-accent-light);
  margin-bottom: 32px;
  backdrop-filter: blur(8px);
}

.hero__badge-dot {
  width: 6px;
  height: 6px;
  background: var(--clr-teal);
  border-radius: 50%;
  animation: pulse-dot 2.4s ease infinite;
  box-shadow: 0 0 6px var(--clr-teal);
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.75); }
}

.hero__headline {
  font-family: var(--font-display);
  font-size: clamp(40px, 7vw, 70px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--clr-text-1);
  margin-bottom: 26px;
  text-wrap: balance;
  text-shadow: 0 0 15px rgba(var(--clr-accent-rgb), 0.15);
}

.hero__headline--accent {
  background: linear-gradient(125deg, var(--clr-accent-light) 10%, var(--clr-teal) 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero__sub {
  font-size: clamp(16px, 2.1vw, 19px);
  color: var(--clr-text-2);
  max-width: 600px;
  line-height: 1.72;
  margin-bottom: 44px;
  font-weight: 400;
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 72px;
}

.hero__stats {
  display: flex;
  align-items: center;
  gap: 36px;
  flex-wrap: wrap;
}

.hero__stat { text-align: left; }

.hero__stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  color: var(--clr-text-1);
  line-height: 1;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 15px rgba(var(--clr-accent-rgb), 0.2);
}

.hero__stat-label {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--clr-text-3);
  margin-top: 5px;
  letter-spacing: 0.01em;
}

.hero__stat-sep {
  width: 1px;
  height: 44px;
  background: var(--clr-border);
}

/* ── Floating Glass Cards ── */
.hero__cards {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  display: none;
}

@media (min-width: 1024px) {
  .hero__cards { display: flex; align-items: center; justify-content: center; }
}

/* Pulsing orbit ring */
.hero__cards-orbit {
  position: absolute;
  inset: 0;
  border: 20px solid rgba(var(--clr-accent-rgb), 0.04);
  border-radius: 50%;
  animation: orbit-pulse 4s ease-in-out infinite;
}

@keyframes orbit-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.03); opacity: 0.6; }
}

/* Base float card */
.hero__float-card {
  background: rgba(25, 37, 64, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(var(--clr-accent-rgb), 0.1);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Architecture card — bottom-left, tilted */
.hero__float-card--arch {
  position: absolute;
  z-index: 20;
  width: 300px;
  padding: 32px;
  transform: rotate(-3deg) translateY(12px) translateX(-8px);
  left: 20%;
  top: 35%;
}

.hero__float-card--arch:hover {
  transform: rotate(0deg) translateY(8px) translateX(-8px);
}

.hero__float-icon {
  font-size: 36px;
  color: var(--clr-accent);
  margin-bottom: 16px;
  display: block;
}

.hero__float-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--clr-text-1);
  margin: 0 0 8px;
}

.hero__float-desc {
  font-size: 13px;
  color: var(--clr-text-2);
  line-height: 1.5;
  margin: 0;
}

/* Metric card — top-right, tilted opposite */
.hero__float-card--metric {
  position: absolute;
  z-index: 30;
  width: 270px;
  padding: 32px;
  transform: rotate(6deg);
  top: 5%;
  right: -8%;
  border-color: rgba(var(--clr-accent-rgb), 0.2);
  background: rgba(20, 31, 56, 0.8);
}

.hero__float-card--metric:hover {
  transform: rotate(0deg);
}

.hero__float-metric-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.hero__float-icon--cyan {
  font-size: 22px;
  color: var(--clr-teal);
}

.hero__float-metric-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--clr-teal);
}

.hero__float-metric-value {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 700;
  color: var(--clr-text-1);
  line-height: 1;
  margin-bottom: 6px;
}

.hero__float-metric-pct {
  color: var(--clr-accent);
}

/* Node card — bottom, small, more tilted */
.hero__float-card--node {
  position: absolute;
  z-index: 10;
  width: 240px;
  padding: 20px 24px;
  transform: rotate(-8deg);
  left: 5%;
  bottom: -2%;
}

.hero__float-card--node:hover {
  transform: rotate(0deg);
}

.hero__float-node-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero__float-node-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(var(--clr-accent-rgb), 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hero__float-node-icon .material-symbols-outlined {
  font-size: 20px;
  color: var(--clr-accent);
}

.hero__float-node-text {
  font-size: 14px;
  font-weight: 700;
  color: var(--clr-text-1);
}

/* ── Scroll hint ── */
.hero__scroll-hint {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-text-3);
}

.hero__scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--clr-accent-light), transparent);
  animation: scroll-line 2s ease infinite;
}

@keyframes scroll-line {
  0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
  30% { opacity: 1; }
  60% { transform: scaleY(1); transform-origin: top; }
  61% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}