/* ============================================================
   HUB FLYWHEEL — the ecosystem section on the homepage.
   Navy-on-cream pentagon wheel + status legend.
   Loaded ONLY by index.html. Isolated so no other page regresses.
   ============================================================ */

.hub-wheel{
  margin:52px auto 8px;
  max-width:720px;
}
.hub-wheel svg{width:100%;height:auto;display:block}

.hub-pent{fill:none;stroke:rgba(15,32,56,.28);stroke-width:2}
.hub-flow{
  fill:none;stroke:var(--orange);stroke-width:2.5;
  stroke-dasharray:16 210;animation:hubflow 4.6s linear infinite;
}
@keyframes hubflow{to{stroke-dashoffset:-226}}
.hub-spoke{stroke:rgba(15,32,56,.16);stroke-width:1.5}

.hub-node{fill:#FBF9F3;stroke:rgba(15,32,56,.42);stroke-width:2}
.hub-node--grow{fill:var(--orange);stroke:var(--orange)}
.hub-letter{font-family:"Barlow Condensed",sans-serif;font-weight:900;font-size:30px;fill:#16233A;text-anchor:middle}
.hub-node--grow + .hub-letter,.hub-letter--grow{fill:#F7F3EA}
.hub-stage{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:15px;letter-spacing:.16em;fill:#16233A;text-anchor:middle}

.hub-core{fill:#0F2038;stroke:var(--orange);stroke-width:2}
.hub-core image{}

.hub-tagline{
  text-align:center;margin-top:14px;
  font-family:"Crimson Pro",serif;font-style:italic;
  font-size:clamp(17px,1.7vw,21px);color:#5A6A85;
}

/* the status legend: one card per stage, ordered by the owner journey */
.hub-legend{
  display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:52px;
}
.hub-card{
  border:1px solid rgba(22,35,58,.16);background:#FBF9F3;border-radius:12px;
  padding:20px 18px 22px;display:flex;flex-direction:column;gap:10px;
}
.hub-card--grow{border-color:var(--orange);box-shadow:0 0 0 1px var(--orange)}
.hub-card-h{display:flex;align-items:center;gap:9px}
.hub-card-letter{
  font-family:"Barlow Condensed",sans-serif;font-weight:900;font-size:17px;
  width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:#16233A;color:#F7F3EA;flex:0 0 26px;
}
.hub-card--grow .hub-card-letter{background:var(--orange)}
.hub-card-stage{font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.1em;font-size:15px;color:#16233A}
.hub-here{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--orange);
}
.hub-items{list-style:none;display:flex;flex-direction:column;gap:8px;margin:0;padding:0}
.hub-items li{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;color:#3C4A62;line-height:1.35}
.hub-pill{
  flex:0 0 auto;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:3px 9px;
}
.hub-pill.live{background:rgba(242,120,48,.14);color:#B4530A;border:1px solid rgba(242,120,48,.4)}
.hub-pill.soon{background:rgba(22,35,58,.06);color:#6B7280;border:1px solid rgba(22,35,58,.18)}

@media (max-width:1000px){
  .hub-legend{grid-template-columns:1fr 1fr;gap:14px}
}
@media (max-width:560px){
  .hub-legend{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .hub-flow{animation:none}
}

/* ============================================================
   TWO DOORS (hero choice: losing customers / losing time)
   ============================================================ */
.doors{display:flex;flex-direction:column;gap:16px}
.door{
  display:block;text-decoration:none;
  background:var(--panel);border:1px solid rgba(242,238,229,.12);border-radius:16px;
  padding:22px 24px;box-shadow:0 24px 60px rgba(0,0,0,.4);
  transition:border-color .2s,transform .2s;
}
.door:hover,.door:focus-visible{border-color:rgba(242,120,48,.6);transform:translateY(-2px);outline:none}
.door-eyebrow{
  display:block;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:12.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--orange);
}
.door-problem{
  display:block;
  font-family:"Barlow Condensed",sans-serif;font-weight:900;text-transform:uppercase;
  font-size:32px;line-height:1;color:var(--cream);margin:7px 0 10px;
}
.door-problem .accent{color:var(--orange)}
.door-desc{display:block;font-size:13.5px;line-height:1.55;color:rgba(242,238,229,.72)}
.door-foot{
  display:flex;align-items:center;gap:8px;margin-top:14px;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:14px;
  letter-spacing:.04em;color:var(--cream);
}
.door-foot .arrow{color:var(--orange);transition:transform .2s}
.door:hover .door-foot .arrow{transform:translateX(4px)}

/* ============================================================
   WHY NOW — three stat blocks
   ============================================================ */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px}
.why-stat{border-top:2px solid var(--orange);padding-top:20px}
.why-num{
  font-family:"Barlow Condensed",sans-serif;font-weight:900;font-size:72px;line-height:.9;
  color:var(--cream);letter-spacing:-.01em;
}
.why-num .unit{font-size:38px;color:var(--orange);vertical-align:2px}
.why-cap{margin-top:14px;font-size:14.5px;line-height:1.55;color:rgba(242,238,229,.74);max-width:30ch}
.why-tonight{
  margin-top:46px;font-family:"Crimson Pro",serif;font-style:italic;
  font-size:clamp(20px,2.2vw,28px);color:var(--orange);max-width:34ch;
}
@media (max-width:900px){
  .why-grid{grid-template-columns:1fr;gap:32px}
  .why-num{font-size:60px}
}

/* second entry door highlighted on the flywheel (BUILD) */
.hub-node--build{stroke:var(--orange);stroke-width:2.5}
.hub-card--build{border-color:rgba(242,120,48,.55)}

/* offer slot on the closing band (price drops in once locked) */
.offer-slot{
  margin-top:26px;max-width:640px;
  border:1px solid rgba(242,238,229,.18);border-radius:14px;
  background:rgba(15,32,56,.42);padding:24px 26px;
}
.offer-line{font-size:16px;line-height:1.62;color:var(--cream)}
.offer-price{margin-top:12px;font-family:"Crimson Pro",serif;font-style:italic;font-size:16px;color:var(--slate)}

/* close-band CTAs: equal button heights + vertically centered text.
   Override engine-room's `.band .btn.solid{margin-top:30px}` (a standalone-CTA
   leftover) that was dropping only the solid button 30px inside the flex row. */
#ask .actions{align-items:center;flex-wrap:wrap}
#ask .actions .btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;line-height:1;margin-top:0}
#ask .actions .btn.ghost{border-color:rgba(242,238,229,.3)}