/* shared tokens, buttons, nav, footer, and CTA band live in hera-shared.css */

/* ============================================================
   BLOCK 1 — HERO
   ============================================================ */
.hera-hero{
  padding:88px 0 80px;
  background:
    radial-gradient(1100px 500px at 82% -10%, var(--hera-blue-pale) 0%, transparent 60%),
    var(--hera-surface);
}
.hera-hero .container{
  display:grid; grid-template-columns:1fr; max-width:840px; text-align:center;
}
.hera-hero .container > *{ margin-left:auto; margin-right:auto; }
.hera-hero h1{ font-size:clamp(32px, 4.4vw, 52px); font-weight:900; }
.hera-hero .lede{ font-size:18px; color: var(--hera-ink-soft); max-width:62ch; margin-bottom:32px; }
.hera-hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }

/* Quick stat row under the hero — count of certified integrations by category */
.hero-stat-row{
  display:flex; gap:40px; justify-content:center; flex-wrap:wrap;
  margin-top:44px; padding-top:36px; border-top:1px solid var(--hera-border);
}
.hero-stat{ text-align:center; }
.hero-stat .num{ font-family:var(--font-display); font-weight:900; font-size:32px; color:var(--hera-blue-core); line-height:1; }
.hero-stat .label{ font-family:var(--font-data); font-weight:700; font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--hera-ink-faint); margin-top:6px; }

/* ============================================================
   INTEGRATIONS GRID (categorized, visual cards)
   ============================================================ */
.hera-integrations{ background: var(--hera-surface-alt); }
.integrations-head{ max-width:70ch; margin-bottom:20px; }

.category-tabs{
  display:flex; gap:8px; flex-wrap:wrap; margin-bottom:40px;
}
.category-tabs button{
  font-family:var(--font-data); font-weight:700; font-size:13px;
  letter-spacing:0.04em; text-transform:uppercase;
  border:1px solid var(--hera-border); background:#fff; color:var(--hera-ink-soft);
  padding:10px 18px; border-radius:999px; cursor:pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.category-tabs button.active,
.category-tabs button:hover{ background:var(--hera-blue-core); color:#fff; border-color:var(--hera-blue-core); }

.integration-category{ margin-bottom:44px; }
.integration-category:last-child{ margin-bottom:0; }
.category-label{
  font-family:var(--font-data); font-weight:700; font-size:12.5px;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--hera-ink-faint);
  margin-bottom:8px;
}
.category-title{ font-size:20px; margin-bottom:18px; }

.integration-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.integration-card{
  background:#fff; border:1px solid var(--hera-border); border-radius:var(--radius-md);
  padding:22px 18px; text-align:center;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.integration-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-card); border-color:var(--hera-blue-soft); }
.integration-mark{
  width:52px; height:52px; margin:0 auto 14px;
  border-radius:12px; background:var(--hera-blue-pale); color:var(--hera-blue-core);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:900; font-size:18px;
}
.integration-name{ font-size:14.5px; font-weight:500; color:var(--hera-ink); margin-bottom:4px; }
.integration-badge{
  font-family:var(--font-data); font-weight:700; font-size:10px;
  letter-spacing:0.06em; text-transform:uppercase; color:#1E9E63;
}
@media (max-width:900px){
  .integration-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:520px){
  .integration-grid{ grid-template-columns:1fr 1fr; }
}

/* ============================================================
   "DON'T SEE YOUR SYSTEM" strip
   ============================================================ */
.integrations-note{
  margin-top:8px; padding:26px 28px;
  background:#fff; border:1px solid var(--hera-border); border-radius:var(--radius-lg);
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.integrations-note p{ margin:0; font-size:15px; color:var(--hera-ink); max-width:60ch; }
.integrations-note p b{ display:block; font-size:12.5px; color:var(--hera-ink-faint); font-family:var(--font-data); letter-spacing:0.06em; text-transform:uppercase; margin-bottom:4px; }