/* ═══════════════════════════════════════════
   hero.css — Hero / landing section
   ═══════════════════════════════════════════ */

.hero {
  min-height: 100vh;
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 120px clamp(24px, 6vw, 80px) 80px;
  position: relative; overflow: hidden; gap: 60px;
}

/* Large watermark text */
.hero-bg-text {
  position: absolute; bottom: -40px; right: -20px;
  font-family: var(--serif);
  font-size: clamp(120px, 20vw, 220px);
  font-weight: 700; color: transparent;
  -webkit-text-stroke: 1px rgba(27,58,107,0.32);
  letter-spacing: -0.05em;
  pointer-events: none; user-select: none; line-height: 1;
}

/* Eyebrow tag */
.hero-tag {
  font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--terra); margin-bottom: 24px;
  display: flex; align-items: center; gap: 10px;
}
.hero-tag::before {
  content: ''; display: block;
  width: 24px; height: 1px; background: var(--terra);
}

/* Main heading */
.hero-content h1 {
  font-family: var(--serif);
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 700; line-height: 1.25;
  letter-spacing: -0.02em; color: var(--cream);
  margin-bottom: 24px; padding-bottom: 6px; overflow: visible;
}
.hero-content h1 em { font-style: italic; color: var(--terra); }

/* Subtitle */
.hero-sub {
  color: var(--cream-dim);
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  max-width: 480px; margin-bottom: 48px; line-height: 1.75;
}

/* Stats row */
.hero-stats {
  display: flex; align-items: center;
  gap: 28px; margin-bottom: 56px;
}
.stat-num {
  display: block; font-family: var(--serif);
  font-size: 2.4rem; font-weight: 700;
  color: var(--terra); line-height: 1.3;
}
.stat-label {
  font-family: var(--mono); font-size: 0.65rem;
  letter-spacing: 0.08em; color: var(--cream-dim);
  text-transform: uppercase; margin-top: 4px;
}
.stat-divider { width: 1px; height: 40px; background: var(--border2); }

/* Scroll hint */
.scroll-hint {
  display: inline-flex; flex-direction: column;
  align-items: flex-start; gap: 8px;
  color: var(--cream-dim); font-family: var(--mono);
  font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; transition: color 0.2s;
}
.scroll-hint:hover { color: var(--terra); }
.scroll-arrow { animation: bounce 2s ease-in-out infinite; }

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

/* ── Tool chip grid (right side) ── */
.hero-visual {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 11px;
  align-content: start;
  padding: 10px 0 10px 20px;
}
.tool-chip {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 7px; padding: 15px 8px;
  border: 1px solid var(--border2);
  border-radius: 10px; background: var(--bg2);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  cursor: default;
}
.tool-chip:hover {
  border-color: var(--terra);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(27,58,107,0.12);
}
.tool-chip svg { width: 26px; height: 26px; flex-shrink: 0; }
.tool-chip span {
  font-family: var(--mono); font-size: 0.55rem;
  letter-spacing: 0.06em; color: var(--cream-dim);
  text-align: center; line-height: 1.2;
}
.tool-chip.feat {
  border-color: rgba(27,58,107,0.3);
  background: linear-gradient(135deg, var(--bg2), rgba(27,58,107,0.06));
}