/* ============================================================
   Tektome — Home hero variations (Options 1 & 2)
   Switched via [data-hero] on .hero-switch. Option 3 = existing hero.
   Light mode, brand tokens only.
   ============================================================ */

/* show only the active option */
.hero-switch[data-hero="opt1"] .hero-opt1,
.hero-switch[data-hero="opt2"] .hero-opt2 { display: block; }
.hero-switch[data-hero="opt1"] .hero-opt2,
.hero-switch[data-hero="opt2"] .hero-opt1 { display: none; }

.hero-alt { font-family: var(--font-sans); color: var(--color-data-black); }
.hero-alt__eyebrow {
  font-family: var(--font-mono);
  font-size: 13px; font-weight: var(--fw-semibold);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-arch-purple); margin: 0 0 20px;
}
.accent { color: var(--color-arch-purple); }

/* ---------- Option 1: two-column, pillars ---------- */
.hero-opt1 { background: var(--color-draft-white); }
.hero-alt__inner {
  max-width: 1240px; margin: 0 auto;
  padding: clamp(56px, 7vw, 104px) 40px clamp(48px, 6vw, 88px);
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 5vw, 80px); align-items: center;
}
.hero-alt__title {
  font-weight: var(--fw-light);
  font-size: clamp(40px, 5vw, 64px); line-height: 1.04;
  letter-spacing: -0.02em; margin: 0; text-wrap: balance;
}
.hero-alt__lede {
  font-size: 18px; line-height: 1.65; color: var(--fg-secondary);
  margin: 24px 0 0; max-width: 46ch; text-wrap: pretty;
}
.hero-alt__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero-alt__pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hero-pillar {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: 22px 22px 20px;
}
.hero-pillar--core { border-color: var(--purple-300); box-shadow: 0 12px 30px -16px rgba(81,86,219,0.5); }
.hero-pillar__badge {
  display: inline-block;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: var(--fw-semibold);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-arch-purple); background: var(--purple-50);
  border-radius: var(--radius-pill); padding: 4px 10px; margin-bottom: 12px;
}
.hero-pillar__badge--green { color: var(--color-success, #1F8A5B); background: #E6F4EC; }
.hero-pillar__badge--red { color: #C2410C; background: #FBE8DD; }
.hero-pillar__badge--yellow { color: #9A6700; background: #FBF1D0; }
.hero-pillar__name { font-size: 17px; font-weight: var(--fw-semibold); letter-spacing: -0.01em; margin: 0 0 8px; line-height: 1.2; }
.hero-pillar__sub { font-size: 13.5px; line-height: 1.5; color: var(--fg-secondary); margin: 0; text-wrap: pretty; }

/* ---------- Option 2: bold centered statement ---------- */
.hero-opt2 {
  background:
    radial-gradient(120% 90% at 50% -10%, var(--purple-50) 0%, rgba(236,236,252,0) 60%),
    var(--color-draft-white);
}
.hero-alt2__inner {
  position: relative; z-index: 1;
  max-width: 960px; margin: 0 auto; text-align: center;
  padding: clamp(64px, 8vw, 120px) 40px clamp(56px, 7vw, 96px);
}
.hero-alt2__eyebrow { text-align: center; }
.hero-alt2__title {
  font-weight: var(--fw-light);
  font-size: clamp(40px, 6vw, 76px); line-height: 1.02;
  letter-spacing: -0.025em; margin: 0; color: var(--color-data-black);
}
.hero-rotator {
  display: inline-block; color: var(--color-arch-purple); font-weight: var(--fw-semibold);
  min-width: 1ch;
}
.hero-rotator::after { content: ""; }
.hero-alt2__lede {
  font-size: 19px; line-height: 1.6; color: var(--fg-secondary);
  margin: 26px auto 0; max-width: 60ch; text-wrap: pretty;
}
.hero-alt2__actions { justify-content: center; margin-top: 34px; }
.hero-alt2__stats {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(28px, 5vw, 72px); margin-top: clamp(44px, 5vw, 64px);
  padding-top: clamp(32px, 4vw, 44px); border-top: 1px solid var(--border-subtle);
}
.hero-stat { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hero-stat__num { font-size: clamp(32px, 4vw, 46px); font-weight: var(--fw-light); letter-spacing: -0.02em; color: var(--color-arch-purple); line-height: 1; }
.hero-stat__label { font-size: 14px; color: var(--fg-secondary); }

/* ---------- hero stat number animations (run once, no loop) ---------- */
.hero-stat__num { display: inline-flex; align-items: center; justify-content: center; min-height: 1.05em; min-width: 1.6ch; font-variant-numeric: tabular-nums; }
.hero-inf { width: 1.6em; height: 1em; overflow: visible; display: block; }
.hero-inf__path { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.hs-count { display: inline-flex; align-items: baseline; will-change: transform; }

.hero-alt2__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 32px; }
.hero-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: var(--fw-medium); color: var(--color-data-black);
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-pill); padding: 8px 16px;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.hero-chip:hover { background: var(--purple-50); border-color: var(--color-arch-purple); color: var(--color-arch-purple); }

/* ---------- chip solution icons (from the mega-menu icon set) ---------- */
.hero-chip__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--color-arch-purple); }
.hero-chip__icon svg { display: block; width: 16px; height: 16px; }
.hero-chip__label { line-height: 1; white-space: nowrap; }

/* ---------- smooth in-page scroll to How It Works ---------- */
html { scroll-behavior: smooth; }
#how-it-works { scroll-margin-top: 88px; }

/* ---------- ghost button (used by alt heroes) ---------- */
.tk-btn--ghost {
  background: transparent;
  color: var(--color-data-black);
  border: 1px solid var(--border-default);
}
.tk-btn--ghost:hover { background: var(--color-light-gray); border-color: var(--color-arch-purple); color: var(--color-arch-purple); }

/* ---------- responsive ---------- */
@media (max-width: 880px) {
  .hero-alt__inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-alt__pillars { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .hero-alt__pillars { grid-template-columns: 1fr; }
  .hero-alt2__stats { gap: 28px; }
}