/* ==========================================================
   N3X — Page components (shared across Home / About / Coaches / Niches)
   ========================================================== */

/* ---------- Hero ---------- */
.hero{ position:relative; padding:6.5rem 0 5.5rem; overflow:hidden; }
.hero-glow{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.hero-glow::before, .hero-glow::after{
  content:''; position:absolute; border-radius:50%; filter:blur(90px); opacity:.35;
}
.hero-glow::before{ width:520px; height:520px; background:var(--teal); top:-220px; left:-160px; }
.hero-glow::after{ width:480px; height:480px; background:var(--blue); top:-120px; right:-180px; }

.hero-inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:3.5rem; align-items:center; }
.hero-copy .eyebrow{ margin-bottom:1.3rem; }
.hero-headline{ font-size:clamp(2.5rem,4.6vw,4.1rem); margin-bottom:1.4rem; }
.word-cycle-wrap{ display:inline-block; position:relative; }
.word-cycle{
  display:inline-block; background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent;
  transition:opacity .3s ease, transform .3s ease;
}
.word-cycle.cycle-out{ opacity:0; transform:translateY(8px); }
.hero-sub{ font-size:1.15rem; color:var(--ink-soft); max-width:520px; margin-bottom:2rem; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:2.6rem; }
.hero-trust{ display:flex; flex-wrap:wrap; gap:1.6rem; align-items:center; }
.trust-pill{ display:flex; align-items:center; gap:.5rem; font-size:.82rem; font-weight:600; color:var(--ink-soft); }
.trust-pill svg{ width:16px; height:16px; stroke:var(--teal); flex-shrink:0; }

.hero-visual{ position:relative; }
.hero-card-stack{ position:relative; height:440px; }
.hero-float-card{
  position:absolute; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); padding:1.4rem 1.5rem;
  animation:float 6s ease-in-out infinite;
}
.hero-float-card.c1{ top:0; left:10%; width:250px; animation-delay:0s; }
.hero-float-card.c2{ top:180px; left:0; width:220px; animation-delay:1.2s; }
.hero-float-card.c3{ bottom:0; right:0; width:250px; animation-delay:.6s; }
.hero-float-card .card-icon{ width:38px; height:38px; border-radius:10px; background:var(--grad-brand-soft); display:flex; align-items:center; justify-content:center; margin-bottom:.75rem; font-size:1.15rem; }
.hero-float-card h4{ font-family:var(--font-display); font-size:.95rem; margin-bottom:.3rem; }
.hero-float-card p{ font-size:.78rem; color:var(--ink-soft); }
.hero-float-card .card-metric{ font-family:var(--font-display); font-size:1.6rem; font-weight:700; background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }

.hero-orbit{ position:absolute; inset:0; border:1.5px dashed var(--border-strong); border-radius:50%; opacity:.6; animation:spin 40s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

@media (max-width:1024px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-visual{ display:none; }
}

/* ---------- Page hero (interior pages) ---------- */
.page-hero{ position:relative; padding:4.5rem 0 4rem; overflow:hidden; text-align:center; }
.page-hero .eyebrow{ justify-content:center; }
.page-hero h1{ font-size:clamp(2.3rem,4.5vw,3.6rem); max-width:820px; margin:0 auto 1.2rem; }
.page-hero p{ max-width:640px; margin:0 auto; color:var(--ink-soft); font-size:1.1rem; }
.breadcrumb{ display:flex; justify-content:center; align-items:center; gap:.5rem; font-size:.78rem; color:var(--ink-faint); margin-bottom:1.4rem; }
.breadcrumb a:hover{ color:var(--blue); }

/* ---------- Stat bar ---------- */
.stat-bar{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.stat-card{ text-align:center; padding:1.6rem 1rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); }
.stat-num{ font-family:var(--font-display); font-size:2.2rem; font-weight:700; background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat-label{ font-size:.8rem; color:var(--ink-soft); margin-top:.3rem; }
@media (max-width:768px){ .stat-bar{ grid-template-columns:1fr 1fr; } }

/* ---------- Service cards ---------- */
.service-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.service-card{
  position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:2rem 1.8rem; transition:transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med);
  overflow:hidden;
}
.service-card::before{
  content:''; position:absolute; inset:0; background:var(--grad-brand-soft); opacity:0; transition:opacity var(--t-med);
}
.service-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent; }
.service-card:hover::before{ opacity:1; }
.service-card > *{ position:relative; }
.service-icon{ width:52px; height:52px; border-radius:14px; background:var(--grad-brand); display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:1.3rem; color:#fff; box-shadow:0 10px 22px rgba(6,156,253,.25); transition:transform var(--t-med) var(--ease); }
.service-card:hover .service-icon{ transform:rotate(-6deg) scale(1.06); }
.service-card h3{ font-size:1.18rem; margin-bottom:.6rem; }
.service-card p{ font-size:.9rem; color:var(--ink-soft); margin-bottom:1.1rem; }
.service-link{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-display); font-size:.8rem; font-weight:700; color:var(--blue); }
.service-link .arrow{ transition:transform var(--t-fast) var(--ease); }
.service-card:hover .service-link .arrow{ transform:translateX(4px); }
@media (max-width:1024px){ .service-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .service-grid{ grid-template-columns:1fr; } }

/* ---------- Why choose us ---------- */
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.why-card{ padding:1.9rem 1.6rem; border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--border); transition:border-color var(--t-med), transform var(--t-med) var(--ease); }
.why-card:hover{ border-color:var(--teal); transform:translateY(-4px); }
.why-icon{ font-size:1.6rem; margin-bottom:1rem; }
.why-card h3{ font-size:1.05rem; margin-bottom:.5rem; }
.why-card p{ font-size:.87rem; color:var(--ink-soft); }
@media (max-width:1024px){ .why-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .why-grid{ grid-template-columns:1fr; } }

/* ---------- Process ---------- */
.process-track{ position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:1.2rem; }
.process-track::before{
  content:''; position:absolute; top:34px; left:6%; right:6%; height:2px;
  background:linear-gradient(90deg, var(--teal), var(--aqua), var(--blue)); opacity:.4;
}
.process-step{ position:relative; text-align:center; }
.process-num{
  width:68px; height:68px; margin:0 auto 1.2rem; border-radius:50%; background:var(--surface); border:2px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:1.2rem;
  transition:border-color var(--t-med), background var(--t-med), color var(--t-med), transform var(--t-med) var(--ease);
}
.process-step:hover .process-num{ background:var(--grad-brand); border-color:transparent; color:#fff; transform:scale(1.08); }
.process-step h3{ font-size:1.02rem; margin-bottom:.5rem; }
.process-step p{ font-size:.84rem; color:var(--ink-soft); }
@media (max-width:1024px){ .process-track{ grid-template-columns:1fr 1fr; } .process-track::before{ display:none; } }
@media (max-width:560px){ .process-track{ grid-template-columns:1fr; } }

/* ---------- Industries grid ---------- */
.industry-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; }
.industry-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:.6rem; padding:1.4rem 1.2rem;
  background:var(--grad-brand-soft); border:1.5px solid rgba(20,217,168,.28); border-radius:var(--radius-md);
  transition:transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med), background var(--t-med);
}
.industry-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent; background:var(--grad-brand); }
.industry-card:hover h4, .industry-card:hover span{ color:#fff; }
.industry-emoji{ font-size:1.5rem; width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:10px; background:rgba(255,255,255,.6); transition:background var(--t-med); }
.industry-card:hover .industry-emoji{ background:rgba(255,255,255,.22); }
.industry-card h4{ font-family:var(--font-display); font-size:.92rem; font-weight:600; transition:color var(--t-med); }
.industry-card span{ font-size:.74rem; color:var(--ink-faint); transition:color var(--t-med); }
@media (max-width:1024px){ .industry-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .industry-grid{ grid-template-columns:1fr 1fr; } }

.industry-tabs{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2.2rem; }
.industry-tab{ padding:.55rem 1.15rem; border-radius:var(--radius-pill); border:1.5px solid var(--border-strong); font-family:var(--font-display); font-size:.78rem; font-weight:600; color:var(--ink-soft); transition:all var(--t-fast); }
.industry-tab:hover, .industry-tab.active{ background:var(--grad-brand); border-color:transparent; color:#fff; }

/* ---------- Featured industry spotlight ---------- */
.spotlight{ background:var(--surface); color:rgba(255,255,255,.85); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; position:relative; }
.spotlight-inner{ display:grid; grid-template-columns:1fr 1fr; gap:0; }
.spotlight-copy{ padding:clamp(2.5rem,5vw,4rem); }
.spotlight .eyebrow{ color:var(--teal); }
.spotlight h2{ color:#fff; font-size:clamp(1.8rem,3vw,2.4rem); margin-bottom:1rem; }
.spotlight p{ color:rgba(255,255,255,.6); margin-bottom:1.6rem; }
.spotlight-list{ margin-bottom:2rem; }
.spotlight-list li{ display:flex; align-items:flex-start; gap:.65rem; font-size:.9rem; color:rgba(255,255,255,.75); margin-bottom:.75rem; }
.spotlight-list svg{ width:18px; height:18px; stroke:var(--teal); flex-shrink:0; margin-top:2px; }
.spotlight-visual{ position:relative; background:var(--grad-brand-soft); display:flex; align-items:center; justify-content:center; padding:2.5rem; }
.spotlight-visual-card{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-lg); padding:2rem; width:100%; backdrop-filter:blur(6px); }
.spotlight-visual-card .stat-num{ -webkit-text-fill-color:initial; background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
@media (max-width:900px){ .spotlight-inner{ grid-template-columns:1fr; } .spotlight-visual{ padding:2rem; min-height:220px; } }

/* ---------- Testimonials ---------- */
.testi-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
.testi-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:2rem; transition:transform var(--t-med) var(--ease), box-shadow var(--t-med); }
.testi-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.testi-stars{ color:var(--aqua); letter-spacing:.15em; margin-bottom:1rem; font-size:.9rem; }
.testi-quote{ font-size:1rem; color:var(--ink); margin-bottom:1.4rem; line-height:1.7; }
.testi-person{ display:flex; align-items:center; gap:.8rem; }
.testi-avatar{ width:44px; height:44px; border-radius:50%; background:var(--grad-brand); display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-display); font-weight:700; font-size:.85rem; }
.testi-name{ font-family:var(--font-display); font-weight:700; font-size:.9rem; }
.testi-role{ font-size:.78rem; color:var(--ink-faint); }
@media (max-width:768px){ .testi-grid{ grid-template-columns:1fr; } }

/* ---------- Case study cards ---------- */
.case-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
.case-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.8rem; transition:transform var(--t-med) var(--ease), box-shadow var(--t-med); }
.case-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.case-metric{ font-family:var(--font-display); font-weight:700; font-size:2rem; background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:.6rem; }
.case-card h4{ font-size:.95rem; margin-bottom:.5rem; }
.case-card p{ font-size:.83rem; color:var(--ink-soft); }
@media (max-width:1024px){ .case-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .case-grid{ grid-template-columns:1fr; } }

/* ---------- FAQ ---------- */
.faq-list{ max-width:820px; margin:0 auto; }
.faq-item{ border-bottom:1px solid var(--border); }
.faq-q{ display:flex; justify-content:space-between; align-items:center; width:100%; padding:1.4rem 0; text-align:left; font-family:var(--font-display); font-size:1rem; font-weight:600; }
.faq-q .plus{ font-size:1.3rem; color:var(--blue); transition:transform var(--t-med) var(--ease); flex-shrink:0; margin-left:1rem; }
.faq-item.open .faq-q .plus{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height var(--t-med) var(--ease); }
.faq-item.open .faq-a{ max-height:300px; }
.faq-a p{ padding-bottom:1.4rem; color:var(--ink-soft); font-size:.92rem; line-height:1.7; max-width:680px; }

/* ---------- CTA band ---------- */
.cta-band{ position:relative; border-radius:var(--radius-lg); overflow:hidden; background:var(--grad-brand); padding:clamp(3rem,6vw,4.5rem); text-align:center; }
.cta-band::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 20% 20%, rgba(255,255,255,.25), transparent 55%); }
.cta-band > *{ position:relative; }
.cta-band h2{ color:#fff; font-size:clamp(1.9rem,3.4vw,2.6rem); margin-bottom:1rem; }
.cta-band p{ color:rgba(255,255,255,.85); max-width:560px; margin:0 auto 2rem; font-size:1.05rem; }
.cta-band .btn-primary{ background:var(--ink); color:var(--bg); box-shadow:0 10px 26px rgba(0,0,0,.3); }
.cta-band .btn-primary:hover{ box-shadow:0 16px 34px rgba(0,0,0,.4); }

/* ---------- Pricing ---------- */
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; align-items:start; }
.price-card{ background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-lg); padding:2.2rem 1.9rem; transition:transform var(--t-med) var(--ease), box-shadow var(--t-med); position:relative; }
.price-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.price-card.featured{ border-color:transparent; background:var(--grad-brand); color:var(--bg); transform:scale(1.03); box-shadow:var(--shadow-lg); }
.price-card.featured:hover{ transform:scale(1.03) translateY(-6px); }
.price-badge{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--ink); color:var(--bg); font-family:var(--font-display); font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.4rem 1rem; border-radius:var(--radius-pill); }
.price-name{ font-family:var(--font-display); font-size:1.15rem; margin-bottom:.4rem; }
.price-card:not(.featured) .price-desc{ color:var(--ink-soft); }
.price-desc{ font-size:.85rem; margin-bottom:1.4rem; opacity:.75; }
.price-amount{ font-family:var(--font-display); font-size:2.4rem; font-weight:700; }
.price-period{ font-size:.8rem; opacity:.6; margin-bottom:1.6rem; }
.price-features{ margin-bottom:1.8rem; }
.price-features li{ display:flex; gap:.6rem; align-items:flex-start; font-size:.85rem; padding:.5rem 0; border-top:1px solid var(--border); }
.price-card.featured .price-features li{ border-color:rgba(21,21,28,.18); }
.price-features li svg{ width:16px; height:16px; stroke:var(--teal); flex-shrink:0; margin-top:2px; }
.price-card.featured .price-features li svg{ stroke:var(--bg); }
@media (max-width:1024px){ .pricing-grid{ grid-template-columns:1fr; max-width:440px; margin:0 auto; } .price-card.featured{ transform:none; } .price-card.featured:hover{ transform:translateY(-6px); } }

/* ---------- About-specific: mission/vision, timeline, family tree ---------- */
.mv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.mv-card{ padding:2.4rem; border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--border); }
.mv-card.mission{ background:var(--grad-brand); color:var(--bg); }
.mv-card.mission p{ color:rgba(21,21,28,.7); }
.mv-icon{ font-size:1.8rem; margin-bottom:1rem; }
.mv-card h3{ font-size:1.3rem; margin-bottom:.8rem; }
.mv-card p{ color:var(--ink-soft); line-height:1.75; }
@media (max-width:768px){ .mv-grid{ grid-template-columns:1fr; } }

.family-tree{ display:grid; grid-template-columns:1fr; gap:1.5rem; max-width:900px; margin:0 auto; }
.family-mother{ text-align:center; padding:2rem; border-radius:var(--radius-lg); background:var(--grad-brand); color:var(--bg); max-width:420px; margin:0 auto; }
.family-mother .logo-mark{ margin:0 auto 1rem; background:var(--bg); color:var(--ink); box-shadow:none; }
.family-mother h3{ font-size:1.3rem; margin-bottom:.4rem; }
.family-mother p{ font-size:.85rem; color:rgba(21,21,28,.65); }
.family-branches{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; position:relative; padding-top:1.5rem; }
.family-branches::before{ content:''; position:absolute; top:0; left:16.5%; right:16.5%; height:2px; background:var(--border-strong); }
.family-branch{ text-align:center; padding:1.8rem 1.4rem; border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--border); position:relative; transition:transform var(--t-med) var(--ease), border-color var(--t-med); }
.family-branch::before{ content:''; position:absolute; top:-1.5rem; left:50%; width:2px; height:1.5rem; background:var(--border-strong); }
.family-branch:hover{ transform:translateY(-5px); border-color:var(--blue); }
.branch-mark{ width:46px; height:46px; border-radius:12px; background:var(--grad-brand); display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-display); font-weight:700; margin:0 auto 1rem; }
.family-branch h4{ font-family:var(--font-display); font-size:1rem; margin-bottom:.5rem; }
.family-branch p{ font-size:.82rem; color:var(--ink-soft); }
@media (max-width:768px){ .family-branches{ grid-template-columns:1fr; } .family-branches::before{ display:none; } .family-branch::before{ display:none; } }

.timeline{ position:relative; max-width:760px; margin:0 auto; }
.timeline::before{ content:''; position:absolute; left:19px; top:8px; bottom:8px; width:2px; background:var(--border-strong); }
.timeline-item{ position:relative; padding-left:56px; margin-bottom:2.4rem; }
.timeline-dot{ position:absolute; left:0; top:0; width:40px; height:40px; border-radius:50%; background:var(--grad-brand); display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-display); font-weight:700; font-size:.8rem; box-shadow:0 0 0 6px var(--bg); }
.timeline-item h4{ font-size:1.02rem; margin-bottom:.4rem; }
.timeline-item p{ font-size:.87rem; color:var(--ink-soft); }

.values-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
.value-card{ text-align:center; padding:1.8rem 1.2rem; }
.value-icon{ width:60px; height:60px; margin:0 auto 1rem; border-radius:50%; background:var(--grad-brand-soft); display:flex; align-items:center; justify-content:center; font-size:1.5rem; }
.value-card h4{ font-size:.95rem; margin-bottom:.4rem; }
.value-card p{ font-size:.82rem; color:var(--ink-soft); }
@media (max-width:1024px){ .values-grid{ grid-template-columns:1fr 1fr; } }

/* ---------- Coaches page: pain/solution ---------- */
.pain-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.pain-card{ padding:1.8rem; border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--aqua); }
.pain-card .pain-icon{ font-size:1.4rem; margin-bottom:.9rem; }
.pain-card h3{ font-size:1rem; margin-bottom:.5rem; }
.pain-card p{ font-size:.86rem; color:var(--ink-soft); }
@media (max-width:1024px){ .pain-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .pain-grid{ grid-template-columns:1fr; } }

.vs-panel{ display:grid; grid-template-columns:1fr auto 1fr; gap:2rem; align-items:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:2.5rem; }
.vs-col h3{ font-size:1rem; margin-bottom:1.2rem; display:flex; align-items:center; gap:.6rem; }
.vs-col.problems h3{ color:var(--ink-faint); }
.vs-col.solutions h3{ color:var(--blue); }
.vs-col li{ display:flex; gap:.6rem; align-items:flex-start; font-size:.88rem; color:var(--ink-soft); padding:.55rem 0; }
.vs-col li svg{ width:18px; height:18px; min-width:18px; stroke:var(--teal); flex-shrink:0; margin-top:2px; }
.vs-divider{ width:1px; height:100%; background:var(--border-strong); justify-self:center; }
@media (max-width:768px){ .vs-panel{ grid-template-columns:1fr; } .vs-divider{ width:100%; height:1px; } }

/* ---------- Generic 2up ---------- */
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
@media (max-width:900px){ .two-col{ grid-template-columns:1fr; } }