/* Hero — editorial dark, logo-led, NO fake content.
 *
 * No rings, no ripples, no concentric circles. The visual side
 * is just the Qlean Q-mark sitting on a quiet soft glow, with a
 * gentle 3D tilt + breathing scale continuous animation that
 * makes the mark feel alive without being busy. */

.hero {
  position: relative;
  padding-block: clamp(140px, 17vw, 200px) clamp(80px, 12vw, 130px);
  isolation: isolate;
  overflow: hidden;
}

/* Quiet background — a single brand-tinted horizon line + faint
 * pinpoint grid. */
.hero::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand) 38%, var(--brand) 62%, transparent);
  opacity: 0.4;
  z-index: -1;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.3), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.3), transparent 70%);
  opacity: 0.5;
  pointer-events: none;
  z-index: -1;
}

.hero__layout {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(40px, 7vw, 96px);
}

.hero__copy { max-width: 640px; }
.hero__eyebrow { margin-block-end: var(--sp-4); }

.hero__title { display: block; margin-block-end: var(--sp-5); }
.hero__title em { font-style: normal; color: var(--brand); }
.hero__title-sub {
  display: block;
  font-size: clamp(1.1rem, 1.6vw, 1.45rem);
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: -0.005em;
  margin-block-start: var(--sp-3);
}

.hero__sub {
  font-size: var(--fs-lead);
  color: var(--text-2);
  line-height: 1.65;
  max-width: 52ch;
}

.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: var(--sp-6); }

.hero__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-block-start: var(--sp-6);
  color: var(--text-3);
  font-size: 0.85rem;
}
.hero__meta-sep { width: 24px; height: 1px; background: var(--line-strong); }

/* ─── Visual stage — quiet, mark-only ─────────────────── */
.hero__visual {
  position: relative;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 420px);
}

.hero__mark-wrap {
  position: relative;
  width: clamp(220px, 26vw, 340px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  perspective: 900px;
  isolation: isolate;
}

/* Single soft cyan glow drifting slowly behind the mark — no
 * ring, no concentric outlines. */
.hero__mark-wrap::before {
  content: "";
  position: absolute;
  inset: 12%;
  background: radial-gradient(circle, rgba(19, 181, 243, 0.30) 0%, transparent 60%);
  filter: blur(50px);
  z-index: -1;
  animation: hero-glow-drift 9s var(--ease-soft) infinite;
}
@keyframes hero-glow-drift {
  0%, 100% { opacity: 0.7; transform: translate3d(0, 0, 0) scale(0.96); }
  50%      { opacity: 1;   transform: translate3d(2%, -1%, 0) scale(1.06); }
}

/* The mark — slow 3D tilt on the Y axis + breathing scale. The
 * two animations run at different periods so the combined
 * motion never repeats exactly, which keeps it from feeling
 * mechanical. */
.hero__mark {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 1;
  transform-origin: center center;
  animation: hero-mark-tilt 11s var(--ease-soft) infinite,
             hero-mark-breathe 7s var(--ease-soft) infinite;
  filter: drop-shadow(0 22px 50px rgba(19, 181, 243, 0.22));
  will-change: transform;
}

@keyframes hero-mark-tilt {
  0%, 100% { transform: perspective(900px) rotateY(0deg) rotateX(0deg); }
  25%      { transform: perspective(900px) rotateY(8deg)  rotateX(-2deg); }
  50%      { transform: perspective(900px) rotateY(0deg)  rotateX(0deg); }
  75%      { transform: perspective(900px) rotateY(-8deg) rotateX(2deg); }
}
@keyframes hero-mark-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

/* Combine both transforms in supporting browsers via custom
 * properties so they don't conflict. */
@supports (animation-composition: add) {
  .hero__mark { animation-composition: add; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__mark { animation: none; }
  .hero__mark-wrap::before { animation: none; }
}