/* Launching Ideas — Bootstrap theme overrides + custom components
   Brand: charcoal #3A3A3A (header/footer), orange #ED5100 (accent) */

:root {
  --li-orange: #ed5100;
  --li-orange-dark: #c94500;
  --li-charcoal: #3a3a3a;
  --li-charcoal-soft: #4a4a4a;

  --bs-primary: var(--li-orange);
  --bs-primary-rgb: 237, 81, 0;
  --bs-dark: var(--li-charcoal);
  --bs-dark-rgb: 58, 58, 58;
  --bs-link-color: var(--li-orange);
  --bs-link-color-rgb: 237, 81, 0;
  --bs-link-hover-color: var(--li-orange-dark);
  --bs-link-hover-color-rgb: 201, 69, 0;
  --bs-body-color: #2b2b2b;
}

.btn-primary {
  --bs-btn-bg: var(--li-orange);
  --bs-btn-border-color: var(--li-orange);
  --bs-btn-hover-bg: var(--li-orange-dark);
  --bs-btn-hover-border-color: var(--li-orange-dark);
  --bs-btn-active-bg: var(--li-orange-dark);
  --bs-btn-active-border-color: var(--li-orange-dark);
  --bs-btn-disabled-bg: var(--li-orange);
  --bs-btn-disabled-border-color: var(--li-orange);
  font-weight: 700;
}
.btn-dark {
  --bs-btn-bg: var(--li-charcoal);
  --bs-btn-border-color: var(--li-charcoal);
  --bs-btn-hover-bg: #262626;
  --bs-btn-hover-border-color: #262626;
  font-weight: 700;
}
.text-brand { color: var(--li-orange) !important; }
.bg-charcoal { background-color: var(--li-charcoal) !important; }

h1, h2, h3, h4, h5 { color: var(--li-charcoal); }

/* kicker labels */
.kicker {
  color: var(--li-orange); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 0.8rem; margin-bottom: 6px;
}

/* top info bar */
.topbar { background: var(--li-charcoal); color: #cfcfcf; font-size: 0.85rem; }
.topbar a { color: #fff; text-decoration: none; }

/* navbar */
.navbar-brand img { height: 48px; width: auto; }
.navbar .nav-link { font-weight: 600; color: var(--li-charcoal); }
.navbar .nav-link.active, .navbar .nav-link:hover { color: var(--li-orange); }

/* heroes */
.hero {
  background: linear-gradient(135deg, #3a3a3a 0%, #4a4a4a 60%, #585858 100%);
  color: #fff; padding: 84px 0;
}
.hero h1, .page-hero h1 { color: #fff; }
.hero .lead, .page-hero p { color: #d2d2d2; }
.page-hero {
  background: linear-gradient(135deg, #3a3a3a 0%, #4a4a4a 100%);
  color: #fff; padding: 46px 0;
}
.page-hero h1 { margin: 0; }
.page-hero p { margin: 8px 0 0; }

/* cards */
.card { transition: box-shadow 0.18s ease, transform 0.18s ease; }
.card:hover { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12); transform: translateY(-3px); }
.card-img-top { aspect-ratio: 37/25; object-fit: cover; }
.card-title a { color: var(--li-charcoal); text-decoration: none; }
.card-title a:hover { color: var(--li-orange); }

/* pricing */
.price-amount { font-size: 2.6rem; font-weight: 800; color: var(--li-charcoal); }
.price-amount small { font-size: 1rem; font-weight: 600; color: #6b6b6b; }
.price-list li { padding: 8px 0 8px 28px; border-bottom: 1px dashed #e4e4e4; position: relative; list-style: none; text-align: left; }
.price-list li::before { content: "✓"; color: var(--li-orange); font-weight: 800; position: absolute; left: 4px; }
.border-brand { border-color: var(--li-orange) !important; border-width: 2px !important; }

/* accordion (FAQs) */
.accordion { --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(237, 81, 0, 0.2); }
.accordion-button { font-weight: 600; color: var(--li-charcoal); }
.accordion-button:not(.collapsed) { background: #fdf0e8; color: var(--li-orange-dark); }

/* blockquote */
blockquote.brand {
  border-left: 4px solid var(--li-orange); padding: 10px 22px;
  background: #f6f6f6; border-radius: 0 8px 8px 0;
  font-size: 1.15rem; color: var(--li-charcoal); font-style: italic;
}

/* CTA band */
.cta-band { background: var(--li-orange); color: #fff; padding: 52px 0; }
.cta-band h2 { color: #fff; margin: 0; }
.cta-band p { margin: 6px 0 0; color: #ffe0cd; }

/* footer */
footer.site { background: var(--li-charcoal); color: #b8b8b8; font-size: 0.95rem; }
footer.site h5 { color: #fff; font-size: 1rem; margin-bottom: 14px; }
footer.site a { color: #d6d6d6; text-decoration: none; }
footer.site a:hover { color: #fff; }
footer.site ul { list-style: none; margin: 0; padding: 0; }
footer.site ul li { margin-bottom: 8px; }
footer.site .legal { border-top: 1px solid rgba(255,255,255,0.12); font-size: 0.85rem; color: #9a9a9a; }
footer.site .logo-foot img { height: 40px; margin-bottom: 14px; }

/* ---------- process wheel (custom component) ---------- */
.wheel { position: relative; aspect-ratio: 1; max-width: 460px; margin: 0 auto; width: 100%; }
.wheel .ring {
  position: absolute; inset: 9%;
  border-radius: 50%; background: #efefef;
  display: flex; align-items: center; justify-content: center;
}
/* arc-arrows drawn between the stage bubbles (1 → 2 → … → 7) */
.wheel svg.flow {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
.wheel svg.flow path { fill: none; stroke: #4a4a4a; stroke-width: 2.6; stroke-linecap: round; }
.wheel svg.flow marker path { fill: #4a4a4a; stroke: none; }
.wheel button.node { z-index: 1; }
.wheel .ring span {
  font-size: clamp(1.4rem, 3vw, 2rem); color: #6b6b6b;
  font-weight: 300; text-align: center; line-height: 1.3;
}
.wheel button.node {
  position: absolute; transform: translate(-50%, -50%);
  width: 21%; aspect-ratio: 1; border-radius: 50%;
  background: #5a5a5a; color: #fff; border: 0; cursor: pointer;
  font: inherit; font-size: 0.82rem; font-weight: 600; line-height: 1.15;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 6%; transition: background 0.15s ease, transform 0.15s ease;
}
.wheel button.node:hover { background: var(--li-charcoal); }
.wheel button.node.active { background: var(--li-orange); transform: translate(-50%, -50%) scale(1.08); }
.wheel button.node .num {
  position: absolute; top: -2%; right: -2%;
  width: 30%; aspect-ratio: 1; border-radius: 50%;
  background: var(--li-orange); color: #fff; font-size: 0.78rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}
.wheel button.node.active .num { background: var(--li-charcoal); }
.stage-detail h3 { font-size: 1.5rem; }
.stage-detail ul li { margin-bottom: 7px; color: #6b6b6b; }
.stage-panel { display: none; }
.stage-panel.active { display: block; animation: fadeIn 0.25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 767px) {
  /* nodes at the 3 and 9 o'clock positions overhang the wheel box by ~5.5%
     per side — reserve that margin so nothing clips the viewport */
  .wheel { max-width: 340px; width: calc(100% - 36px); }
  .wheel button.node { font-size: 0.72rem; }
  .hero { padding: 60px 0; }
}