/* ==========================================================================
   WebsiteHeart - home.css
   Landing page only: hero, monitor card, pulse lines, features, stats, FAQ.
   ========================================================================== */

/* ============ HERO ============ */
.hero{
  padding: 88px 0 60px;
  overflow:hidden;
}
.hero .wrap{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items:center;
}
.hero h1{
  font-size: clamp(38px, 4.6vw, 60px);
  line-height:1.06;
  margin: 20px 0 22px;
  color: var(--pine);
}
.hero h1 em{
  font-style: italic;
  color: var(--moss);
}
.hero p.lead{
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 480px;
  margin-bottom: 32px;
}
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom: 22px; }
.hero-note{
  font-size: 13px;
  color: var(--ink-soft);
  font-family: var(--font-mono);
}

/* ============ HERO VISUAL: monitor card ============ */
.monitor-card{
  background: var(--pine);
  border-radius: 18px;
  padding: 28px 26px 8px;
  color: var(--paper);
  position:relative;
  box-shadow: 0 30px 60px -20px rgba(15,38,32,0.35);
}
.monitor-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 22px;
}
.monitor-url{
  font-family: var(--font-mono);
  font-size: 13px;
  color: rgba(241,244,241,0.7);
  display:flex; align-items:center; gap:8px;
}
.monitor-url .live-dot{
  width:7px;height:7px;border-radius:50%;
  background: var(--moss);
  animation: blink 2.4s ease-in-out infinite;
}
.monitor-badge{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--moss);
  border:1px solid rgba(63,166,114,0.4);
  padding: 4px 9px;
  border-radius: 20px;
  background: rgba(63,166,114,0.1);
}

.metric-row{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
.metric{
  background: var(--pine-2);
  border: 1px solid var(--pine-line);
  border-radius: 12px;
  padding: 14px 14px 12px;
}
.metric-label{
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color: rgba(241,244,241,0.55);
  margin-bottom:8px;
}
.metric-value{
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight:600;
}
.metric-value.good{ color: var(--moss); }
.metric-value.amber{ color: var(--amber); }

/* The ECG line inside the hero card. */
.pulse-wrap{
  border-top: 1px solid var(--pine-line);
  margin: 0 -26px;
  padding: 16px 26px 20px;
  overflow:hidden;
}
.pulse-caption{
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: rgba(241,244,241,0.45);
  margin-bottom: 8px;
  letter-spacing:.06em;
}
.pulse-line-svg{ width:100%; height:46px; overflow:visible; }
.pulse-track{
  fill:none;
  stroke: rgba(241,244,241,0.18);
  stroke-width:2;
}
.pulse-glow{
  fill:none;
  stroke: var(--moss);
  stroke-width:2.4;
  stroke-linecap: round;
  stroke-dasharray: 90 900;
  animation: travel 3.6s linear infinite;
}
@keyframes travel{
  0%{ stroke-dashoffset: 0; }
  100%{ stroke-dashoffset: -990; }
}

/* Full-width heartbeat divider between hero and features. */
.divider-pulse{
  width:100%;
  height:34px;
  display:block;
}
.divider-pulse .track{ fill:none; stroke: var(--line); stroke-width:1.5; }
.divider-pulse .glow{
  fill:none; stroke: var(--moss); stroke-width:2; stroke-linecap:round;
  stroke-dasharray: 60 900;
  animation: travel 5s linear infinite;
}

/* ============ FEATURES ============ */
.features{ padding: 46px 0 80px; }
.section-head{
  max-width: 620px;
  margin-bottom: 48px;
}
.section-head h2{
  font-size: clamp(28px,3.2vw,38px);
  margin-top:14px;
  color: var(--pine);
}
.section-head p{
  margin-top:14px;
  color: var(--ink-soft);
  font-size:16.5px;
}

.feature-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.feature-card{
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 30px 26px 32px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.feature-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -24px rgba(22,35,31,0.25);
}
.feature-icon{
  width:46px; height:46px;
  border-radius: 11px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 20px;
}
.feature-icon.seo{ background: rgba(227,169,63,0.16); }
.feature-icon.perf{ background: rgba(63,166,114,0.14); }
.feature-icon.uptime{ background: rgba(15,38,32,0.08); }
.feature-icon svg{ width:24px; height:24px; }

.feature-card h3{
  font-size: 21px;
  margin-bottom: 10px;
  color: var(--pine);
}
.feature-card p{ color: var(--ink-soft); font-size: 15px; }
.feature-tag{
  display:inline-block;
  margin-top:16px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--moss);
  font-weight:600;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  width:100%;
}

/* ============ STATS ============ */
.stats{
  background: var(--pine);
  color: var(--paper);
  padding: 72px 0;
  margin: 20px 0 0;
}
.stats .section-head .eyebrow{ color: var(--amber); }
.stats .section-head .eyebrow::before{ background: var(--amber); box-shadow: 0 0 0 3px rgba(227,169,63,0.18); }
.stats .section-head h2{ color: var(--paper); }
.stats .section-head p{ color: rgba(241,244,241,0.65); }

.stat-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 46px;
}
.stat{
  border-left: 1px solid var(--pine-line);
  padding-left: 22px;
}
.stat-value{
  font-family: var(--font-mono);
  font-size: clamp(30px,3.4vw,42px);
  font-weight:600;
  color: var(--paper);
}
.stat-value span{ color: var(--moss); }
.stat-label{
  margin-top: 8px;
  font-size: 14px;
  color: rgba(241,244,241,0.6);
  max-width: 190px;
}

/* ============ FAQ ============ */
.faq{ padding: 90px 0; }
.faq .wrap{
  display:grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 60px;
}
.faq-list{ display:flex; flex-direction:column; gap:12px; }
details{
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 22px;
  background: var(--paper-card);
}
summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:600;
  font-size: 15.5px;
  color: var(--pine);
}
summary::-webkit-details-marker{ display:none; }
summary::after{
  content:"+";
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--moss);
  transition: transform .2s ease;
  flex-shrink:0;
  margin-left: 16px;
}
details[open] summary::after{ content:"–"; }
details p{
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: 14.5px;
  padding-right: 20px;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 980px){
  .hero .wrap{ grid-template-columns: 1fr; }
  .hero{ padding-top: 40px; }
  .monitor-card{ order:-1; }
  .feature-grid{ grid-template-columns: 1fr; }
  .stat-grid{ grid-template-columns: repeat(2,1fr); row-gap: 32px; }
  .faq .wrap{ grid-template-columns: 1fr; }
}