/* ============================================
   HALO BIOLABS — HOMEPAGE SECTIONS
   Loaded only on the front page (see front-page.php)
   ============================================ */

/* ─── HERO ─── */
.halo-hero{
  position:relative;
  padding:6rem 3.5rem 5rem;
  overflow:hidden;
  min-height:560px;
  display:flex;
  align-items:center;
  background:var(--bg);
}
.halo-hero-content{
  position:relative;
  z-index:2;
  max-width:540px;
}
.halo-hero h1{
  font-family:"Cormorant Garamond",serif;
  font-size:72px;
  font-weight:300;
  line-height:1.0;
  letter-spacing:-1px;
  color:#fff;
  margin-bottom:1.6rem;
}
.halo-hero h1 em{
  font-style:italic;
  color:var(--gold-light);
}
.halo-hero-sub{
  font-size:15px;
  color:var(--muted);
  line-height:1.75;
  max-width:400px;
  margin-bottom:2.8rem;
}

/* ─── HERO NETWORK GRAPHIC ─── */
.halo-hero-graphic{
  position:absolute;
  right:-2%;
  top:50%;
  transform:translateY(-50%);
  width:55%;
  max-width:680px;
  z-index:1;
  opacity:0.9;
  pointer-events:none;
}
.halo-hero-graphic svg{
  width:100%;
  height:auto;
  display:block;
}
.halo-node-line{
  stroke:rgba(201,168,76,0.18);
  stroke-width:1;
  fill:none;
}
.halo-node-dot{
  fill:rgba(240,237,230,0.25);
}
.halo-node-dot.gold{
  fill:var(--gold);
}
.halo-node-ring{
  fill:none;
  stroke:rgba(201,168,76,0.35);
  stroke-width:1;
}

@media (max-width: 1100px){
  .halo-hero-graphic{ display:none; }
}

/* ─── SHARED SECTION HELPERS (front page only) ─── */
.halo-fp-section{ padding:4rem 3.5rem; }

/* ─── MANIFESTO ─── */
.halo-manifesto{
  padding:6rem 3.5rem;
  background:var(--bg);
  overflow:hidden;
}
.halo-manifesto-headline{
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(36px,3.5vw,52px);
  font-weight:300;
  color:#fff;
  line-height:1.1;
  letter-spacing:-1px;
  margin-bottom:1rem;
}
.halo-manifesto-headline em{
  font-style:italic;
  color:var(--gold-light);
}
.halo-manifesto-sub{
  font-size:15px;
  color:var(--muted);
  line-height:1.8;
  max-width:55%;
  margin-bottom:4rem;
}
.halo-manifesto-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.halo-manifesto-card{ border-radius:14px; padding:2rem; }
.halo-manifesto-card.bad{ background:#0d0a0a; border:0.5px solid rgba(239,68,68,0.15); }
.halo-manifesto-card.good{ background:rgba(201,168,76,0.04); border:0.5px solid var(--gold-border); }
.halo-manifesto-card-label{
  font-size:9px; letter-spacing:0.2em; text-transform:uppercase;
  font-weight:700; margin-bottom:1rem;
}
.halo-manifesto-card.bad .halo-manifesto-card-label{ color:rgba(239,68,68,0.5); }
.halo-manifesto-card.good .halo-manifesto-card-label{ color:var(--gold); }
.halo-manifesto-card-title{
  font-size:20px; font-weight:700; color:#fff;
  margin-bottom:1.4rem; letter-spacing:-0.3px; line-height:1.2;
}
.halo-manifesto-card.bad .halo-manifesto-card-title{ color:rgba(239,68,68,0.65); }
.halo-manifesto-item{
  display:flex; align-items:flex-start; gap:10px;
  margin-bottom:10px; font-size:13px; color:var(--muted); line-height:1.5;
}
.halo-manifesto-item svg{ width:16px; height:16px; flex-shrink:0; margin-top:1px; }
.halo-manifesto-item.bad svg{ stroke:rgba(239,68,68,0.5); }
.halo-manifesto-item.good svg{ stroke:var(--gold); }

/* ─── HOW IT WORKS ─── */
.halo-how-section{
  padding:5rem 3.5rem;
  background:var(--bg2);
  border-top:0.5px solid var(--faint);
  border-bottom:0.5px solid var(--faint);
}
.halo-how-steps{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:0; margin-top:3rem; position:relative;
}
.halo-how-steps::before{
  content:'';
  position:absolute;
  top:22px;
  left:calc(16.666% + 22px);
  right:calc(16.666% + 22px);
  height:1px;
  background:linear-gradient(90deg, var(--gold-border), var(--gold-border) 50%, var(--gold-border));
  opacity:0.4;
  z-index:0;
}
.halo-how-step{ text-align:center; padding:0 2rem; }
.halo-step-num{
  width:44px; height:44px; border-radius:50%;
  border:0.5px solid var(--gold-border); background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 1.5rem; font-size:12px; font-weight:700;
  color:var(--gold); letter-spacing:0.06em; position:relative; z-index:1;
}
.halo-step-title{ font-size:16px; font-weight:700; color:#fff; margin-bottom:8px; letter-spacing:-0.2px; }
.halo-step-desc{ font-size:13px; color:var(--muted); line-height:1.65; }

/* ─── PAIN POINTS ─── */
.halo-pain-section{
  padding:5rem 3.5rem;
  background:var(--bg2);
  border-top:0.5px solid var(--faint);
  border-bottom:0.5px solid var(--faint);
}
.halo-pain-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:14px; margin-top:2.5rem;
}
.halo-pain-card{
  background:var(--bg); border:0.5px solid var(--faint);
  border-radius:14px; padding:1.8rem; position:relative; overflow:hidden;
}
.halo-pain-card::before{
  content:''; position:absolute; top:0; left:0;
  width:3px; height:100%; background:var(--gold);
}
.halo-pain-stat{ font-size:38px; font-weight:700; color:var(--gold); letter-spacing:-1.5px; line-height:1; margin-bottom:0.8rem; }
.halo-pain-title{ font-size:14px; font-weight:700; color:#fff; margin-bottom:8px; letter-spacing:-0.2px; }
.halo-pain-desc{ font-size:12px; color:var(--muted); line-height:1.65; }

/* ─── URGENCY BANNER ─── */
.halo-urgency-banner{
  margin:0 3.5rem 0;
  background:linear-gradient(135deg,rgba(201,168,76,0.1),rgba(201,168,76,0.02));
  border:0.5px solid var(--gold-border);
  border-radius:16px; padding:2rem 2.5rem;
  display:flex; justify-content:space-between; align-items:center;
  gap:2rem; flex-wrap:wrap;
}
.halo-urgency-left{ display:flex; align-items:center; gap:1.2rem; }
.halo-urgency-icon{
  width:48px; height:48px; border-radius:12px;
  background:var(--gold-dim); border:0.5px solid var(--gold-border);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.halo-urgency-icon .dashicons{ color:var(--gold); font-size:22px; width:22px; height:22px; }
.halo-urgency-text strong{ display:block; font-size:15px; color:#fff; font-weight:700; margin-bottom:2px; }
.halo-urgency-text span{ font-size:12px; color:var(--muted); }
.halo-urgency-badge{
  background:rgba(239,68,68,0.1); border:0.5px solid rgba(239,68,68,0.25);
  color:#f87171; font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px; white-space:nowrap;
}

/* ─── SOCIAL PROOF STRIP ─── */
.halo-proof-strip{
  padding:3rem 3.5rem; display:flex; justify-content:space-around;
  align-items:center; flex-wrap:wrap; gap:2rem; border-bottom:0.5px solid var(--faint);
}
.halo-proof-item{ text-align:center; }
.halo-proof-num{ font-size:32px; font-weight:700; color:#fff; letter-spacing:-1px; line-height:1; }
.halo-proof-num span{ color:var(--gold); }
.halo-proof-label{ font-size:11px; color:var(--muted); letter-spacing:0.08em; text-transform:uppercase; margin-top:6px; }

/* ─── FAQ ─── */
.halo-faq-section{
  padding:5rem 3.5rem;
  background:var(--bg2);
  border-top:0.5px solid var(--faint);
}
.halo-faq-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:12px; margin-top:2rem;
}
.halo-faq-item{
  background:var(--bg); border:0.5px solid var(--faint);
  border-radius:12px; overflow:hidden; transition:border-color 0.2s;
}
.halo-faq-item.open{ border-color:var(--gold-border); }
.halo-faq-q{
  display:flex; justify-content:space-between; align-items:center;
  padding:1.2rem 1.4rem; cursor:pointer; gap:12px;
}
.halo-faq-q-text{ font-size:13px; font-weight:600; color:#fff; line-height:1.4; }
.halo-faq-chevron{
  width:20px; height:20px; border:0.5px solid var(--faint);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:transform 0.2s, border-color 0.2s;
}
.halo-faq-item.open .halo-faq-chevron{ transform:rotate(180deg); border-color:var(--gold-border); }
.halo-faq-chevron svg{ width:10px; height:10px; stroke:var(--muted); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.halo-faq-item.open .halo-faq-chevron svg{ stroke:var(--gold); }
.halo-faq-a{ display:none; padding:0 1.4rem 1.2rem; font-size:12px; color:var(--muted); line-height:1.7; }
.halo-faq-item.open .halo-faq-a{ display:block; }

/* ─── CONTACT BANNER ─── */
.halo-contact-banner{
  margin:0 3.5rem 3rem;
  background:linear-gradient(135deg,rgba(201,168,76,0.08),rgba(201,168,76,0.03));
  border:0.5px solid var(--gold-border);
  border-radius:16px; padding:2.5rem;
  display:flex; justify-content:space-between; align-items:center;
  gap:2rem; flex-wrap:wrap;
}
.halo-contact-banner-text .halo-banner-eyebrow{
  font-size:10px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--gold); font-weight:600; margin-bottom:6px;
}
.halo-contact-banner-text h3{
  font-family:"Cormorant Garamond",serif; font-size:26px; font-weight:300;
  color:#fff; letter-spacing:-0.3px; margin-bottom:6px;
}
.halo-contact-banner-text p{ font-size:13px; color:var(--muted); line-height:1.6; max-width:480px; }

/* ─── RESPONSIVE ─── */
@media (max-width: 900px){
  .halo-manifesto-cards,
  .halo-how-steps,
  .halo-pain-grid,
  .halo-faq-grid{ grid-template-columns:1fr; gap:2.5rem; }
  .halo-how-steps::before{ display:none; }
  .halo-manifesto-sub{ max-width:100%; }
  .halo-hero h1{ font-size:48px; }
  .halo-hero{ padding:5rem 1.5rem 3rem; min-height:auto; }
  .halo-fp-section{ padding:3rem 1.5rem; }
  .halo-manifesto{ padding:3.5rem 1.5rem; }
  .halo-how-section,
  .halo-pain-section,
  .halo-faq-section{ padding:3.5rem 1.5rem; }
  .halo-urgency-banner,
  .halo-contact-banner{ margin-left:0; margin-right:0; flex-direction:column; align-items:flex-start; }
  .halo-proof-strip{ padding:2rem 1.5rem; gap:1.5rem 2.5rem; }
  .halo-faq-grid{ gap:12px; }
}

@media (max-width: 480px){
  .halo-hero h1{ font-size:38px; }
  .halo-eyebrow-text{ font-size:9px; }
  .halo-sec-title{ font-size:26px; }
  .halo-manifesto-headline{ font-size:30px; }
  .halo-pain-stat{ font-size:30px; }
}