/* ── hero.css ── */

.hero {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 32px;
  background: transparent;
  /* Pass mouse events through to grid tiles beneath */
  pointer-events: none;
}

/* Re-enable only on interactive/text elements */
.hero .rule-top,
.hero .eyebrow,
.hero .headline,
.hero .headline-plain,
.hero .subtext,
.hero .cta-btn {
  pointer-events: all;
}

.rule-top {
  width: 32px;
  height: 1px;
  background: var(--violet);
  margin: 0 auto 18px;
  opacity: 0.6;
}

.eyebrow {
  font-family: 'Lato', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--slate);
  opacity: 0.5;
  margin-bottom: 28px;
}

.headline {
  font-family: 'Libertinus Serif', 'Georgia', serif;
  font-size: clamp(44px, 6.5vw, 84px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.1;
  color: var(--slate);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.headline-plain {
  font-family: 'Libertinus Serif', 'Georgia', serif;
  font-size: clamp(44px, 6.5vw, 84px);
  font-weight: 400;
  font-style: normal;
  line-height: 1.1;
  color: var(--slate);
  margin-bottom: 32px;
  letter-spacing: -0.01em;
}

.headline .accent    { color: var(--violet); }
.headline-plain .accent-r { color: var(--rose); }

.subtext {
  font-family: 'Lato', sans-serif;
  font-size: clamp(13px, 1.2vw, 15.5px);
  font-weight: 300;
  color: var(--slate);
  opacity: 0.7;
  margin-bottom: 42px;
  max-width: 400px;
  line-height: 1.85;
  letter-spacing: 0.03em;
}

.cta-btn {
  font-family: 'Lato', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: var(--violet);
  color: #fff;
  border: none;
  border-radius: 2px;
  padding: 14px 40px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background 0.25s, transform 0.15s, box-shadow 0.25s;
  box-shadow: 0 4px 24px rgba(100,141,229,0.25);
}
.cta-btn:hover {
  background: var(--slate);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(76,75,99,0.22);
}
.cta-btn .arr { opacity: 0.7; transition: transform 0.2s, opacity 0.2s; }
.cta-btn:hover .arr { transform: translateX(4px); opacity: 1; }