/* =====================================================================
   BGISite homepage — luminous fractal hero
   A deterministic fractal tree grows continuously out of one root on a
   dark-navy panel (wwwroot/js/home-fractal.js). All colors flow through
   the --fx-* custom properties below, so the seasonal accent shifts are
   pure CSS; the JS reads them via getComputedStyle. With JS off or
   reduced motion, the fully grown static SVG partial shows instead.
   ===================================================================== */

/* ---- Hero panel ------------------------------------------------------ */
.fractal-hero {
  /* summer = the base palette; other seasons shift accents only */
  --fx-bg-1: hsl(222 47% 12%);
  --fx-bg-2: hsl(220 42% 18%);
  --fx-c0: hsl(221 60% 50%);        /* stroke ramp: root ... */
  --fx-c1: hsl(175 72% 55%);        /* ... tips              */
  --fx-tip: hsl(170 90% 68%);       /* luminous tip dots     */
  --fx-label: hsl(174 55% 78%);
  --fx-label-glow: hsl(172 85% 60% / .55);
  --fx-mtn-face: hsl(221 30% 20%);
  --fx-mtn-shade: hsl(223 34% 15%);

  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  background:
    radial-gradient(120% 60% at 70% 0%, hsl(221 55% 24% / .5), transparent 60%),
    linear-gradient(180deg, var(--fx-bg-1), var(--fx-bg-2));
}
.fractal-hero.season-winter {
  --fx-bg-1: hsl(224 44% 11%);
  --fx-c1: hsl(192 70% 60%);
  --fx-tip: hsl(196 95% 74%);
  --fx-label: hsl(196 60% 80%);
  --fx-label-glow: hsl(196 90% 62% / .55);
}
.fractal-hero.season-spring {
  --fx-c1: hsl(163 62% 52%);
  --fx-tip: hsl(152 80% 66%);
  --fx-label: hsl(158 50% 78%);
  --fx-label-glow: hsl(156 80% 56% / .55);
}
.fractal-hero.season-fall {
  --fx-tip: hsl(40 95% 64%);
  --fx-label: hsl(40 70% 78%);
  --fx-label-glow: hsl(38 90% 55% / .5);
}

/* ---- Fractal stage (full-bleed; the tree itself lives right of the copy) */
.fractal-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.fractal-stage canvas,
.fractal-stage .fx-static {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.fx-static svg { width: 100%; height: 100%; display: block; }
.fx-static path { vector-effect: non-scaling-stroke; }   /* honest line weights despite the stretch-to-fit viewBox */
html.fx-js .fx-static { display: none; }

/* Static-fallback stroke bands: root blue blending to tip teal */
.fx-static .fxb0 { stroke: var(--fx-c0); }
.fx-static .fxb1 { stroke: color-mix(in oklab, var(--fx-c0), var(--fx-c1) 25%); }
.fx-static .fxb2 { stroke: color-mix(in oklab, var(--fx-c0), var(--fx-c1) 50%); }
.fx-static .fxb3 { stroke: color-mix(in oklab, var(--fx-c0), var(--fx-c1) 78%); }
.fx-static .fxb4 { stroke: var(--fx-c1); }
.fx-static .fxdot { fill: var(--fx-tip); }

.fx-mountains {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  height: min(34%, 300px);
  opacity: .8;
}

/* ---- Benefit labels --------------------------------------------------- */
.fx-labels {
  position: absolute;
  inset: 0;
  margin: 0; padding: 0;
  list-style: none;
  z-index: 2;
}
.fx-label {
  position: absolute;
  left: var(--ax); top: var(--ay);
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-family: Aptos, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  font-size: .82rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  /* near-white with a dark separation halo, then the seasonal glow outside it */
  color: hsl(0 0% 100% / .96);
  text-shadow:
    0 1px 2px hsl(222 50% 6% / .95),
    0 0 8px hsl(222 50% 8% / .9),
    0 0 22px var(--fx-label-glow);
}
/* Anchor points — the JS steers each limb's tip to land exactly here.
   Kept in CSS (not inline) so breakpoints can move them. The tree grows
   diagonally from the lower-right corner, so the labels arc from mid-left
   up to the top-right. */
.fx-label:nth-child(1) { --ax: 52%; --ay: 72%; }
.fx-label:nth-child(2) { --ax: 56%; --ay: 50%; }
.fx-label:nth-child(3) { --ax: 63%; --ay: 32%; }
.fx-label:nth-child(4) { --ax: 73%; --ay: 19%; }
.fx-label:nth-child(5) { --ax: 84%; --ay: 11%; }
.fx-label:nth-child(6) { --ax: 94%; --ay: 9%;  }

/* Narrow desktops: the copy column reaches further across, so the low-left
   labels slide right to stay clear of it */
@media (min-width: 1200px) and (max-width: 1439.98px) {
  .fx-label:nth-child(1) { --ax: 60%; --ay: 72%; }
  .fx-label:nth-child(2) { --ax: 63%; --ay: 50%; }
  .fx-label:nth-child(3) { --ax: 68%; --ay: 32%; }
  .fx-label:nth-child(4) { --ax: 76%; --ay: 19%; }
  .fx-label:nth-child(5) { --ax: 86%; --ay: 11%; }
}

/* With JS running, each label waits for its branch, then blooms in */
html.fx-js .fx-label {
  opacity: 0;
  transform: translate(-50%, -38%) scale(.9);
  transition: opacity .5s ease, transform .65s cubic-bezier(.34, 1.56, .64, 1);
}
html.fx-js .fx-label.on {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ---- Divider into the light sections ---------------------------------- */
.hero-divider {
  position: absolute;
  bottom: -1px; left: 0;
  width: 100%;
  height: clamp(40px, 7vw, 90px);
  display: block;
  z-index: 3;
}

/* ---- Hero copy (dark-panel treatment) ---------------------------------- */
.fractal-hero .hero-copy {
  position: relative; z-index: 4;
  max-width: 34rem;
  margin-left: clamp(1.5rem, 6vw, 7rem);
  padding: 2rem 0 4rem;
}
.fractal-hero h1 { color: #fff; }
.fractal-hero h1 .text-primary { color: hsl(200 90% 78%) !important; }
.fractal-hero .text-muted-2 { color: hsl(220 25% 78%) !important; }
.fractal-hero .brand-badge {
  background: hsl(0 0% 100% / .08);
  border: 1px solid hsl(0 0% 100% / .14);
  color: var(--fx-label);
}
.fractal-hero .btn-primary {
  background: linear-gradient(90deg, hsl(221 65% 52%), hsl(176 70% 42%));
  border: 0;
}
.fractal-hero .btn-primary:hover { filter: brightness(1.12); }
/* Direct properties, not --bs-btn-* vars: the bundled Bootstrap is 5.1 */
.fractal-hero .btn-secondary {
  color: #fff;
  background-color: transparent;
  border-color: hsl(0 0% 100% / .35);
}
.fractal-hero .btn-secondary:hover,
.fractal-hero .btn-secondary:focus {
  color: #fff;
  background-color: hsl(0 0% 100% / .1);
  border-color: hsl(0 0% 100% / .5);
}
.fractal-hero .btn-secondary:active {
  color: #fff;
  background-color: hsl(0 0% 100% / .15);
  border-color: hsl(0 0% 100% / .5);
}

.hero-checks {
  list-style: none; padding: 0; margin: 0 0 1.25rem;
  display: flex; flex-wrap: wrap; gap: .4rem 1.5rem;
  font-size: .9rem; font-weight: 600; color: hsl(0 0% 100% / .88);
}
.hero-checks .bi { color: var(--fx-tip); margin-right: .35rem; }

.hero-stats { display: flex; gap: 2.25rem; }
.hero-stats .stat b {
  display: block; font-size: 1.3rem; font-weight: 700;
  color: hsl(174 70% 68%);
  font-family: "Aptos Display", Aptos, "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
}
.hero-stats .stat span { font-size: .78rem; color: hsl(220 20% 68%); }

/* ---- Responsive --------------------------------------------------------
   Below 1200px the copy column would collide with the label fan, so the
   hero stacks: copy on top, full-width fractal below. */
@media (max-width: 1199.98px) {
  .fractal-hero { flex-direction: column; align-items: stretch; min-height: 0; }
  .fractal-stage { position: relative; inset: auto; width: 100%; height: 56vh; order: 2; }
  .fractal-hero .hero-copy {
    order: 1;
    margin: 0 auto;
    padding: 4rem 1.25rem 1rem;
    text-align: center;
  }
  .hero-stats, .hero-checks { justify-content: center; }
  .fx-label { font-size: .62rem; letter-spacing: .1em; }
  .fx-label:nth-child(1) { --ax: 10%; --ay: 52%; }
  .fx-label:nth-child(2) { --ax: 17%; --ay: 26%; }
  .fx-label:nth-child(3) { --ax: 37%; --ay: 10%; }
  .fx-label:nth-child(4) { --ax: 64%; --ay: 10%; }
  .fx-label:nth-child(5) { --ax: 84%; --ay: 26%; }
  .fx-label:nth-child(6) { --ax: 91%; --ay: 52%; }
}
@media (max-width: 479.98px) {
  .fx-label--tight { display: none; }
}

/* Reduced motion: the script bows out before animating (no .fx-js class),
   so the static grown tree shows; make sure label transitions are inert too */
@media (prefers-reduced-motion: reduce) {
  .fx-label { transition: none !important; opacity: 1 !important; }
}

/* ---- Fractal vine rail ---------------------------------------------------
   ONE continuous vine grows down the left margin across four sections.
   Each section carries a segment whose stem starts at the exact x where the
   previous segment ended; preserveAspectRatio="none" + height:100% stretches
   every segment to its section's height so the joins always line up. Each
   segment draws itself in as its section scrolls into view (progressive
   enhancement; without scroll-timeline support the vine shows fully grown).
   Tuned for the light sections: brand blue stem, teal sprays, glowing dots. */
.fx-vine {
  position: absolute;
  pointer-events: none;
}
.fx-vine.vine-rail {
  left: clamp(.25rem, 2vw, 2.5rem);
  top: 0;
  width: 120px;
  height: 100%;
}
@media (max-width: 1399.98px) { .fx-vine { display: none; } }

.fx-vine path { fill: none; stroke-linecap: round; stroke-dasharray: 1; }
.fx-vine .vm  { stroke: hsl(220 50% 45% / .40); }
.fx-vine .vs1 { stroke: hsl(195 55% 42% / .45); }
.fx-vine .vs2 { stroke: hsl(175 60% 40% / .48); }
.fx-vine .vd {
  fill: hsl(175 70% 42%);
  transform-box: fill-box; transform-origin: center;
  filter: drop-shadow(0 0 3px hsl(175 80% 50% / .7));
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .fx-vine .vm  { animation: vine-grow linear both; animation-timeline: view(block 92% 50%); }
    .fx-vine .vs1 { animation: vine-grow linear both; animation-timeline: view(block 82% 44%); }
    .fx-vine .vs2 { animation: vine-grow linear both; animation-timeline: view(block 76% 40%); }
    .fx-vine .vd  { animation: vine-dot  linear both; animation-timeline: view(block 70% 38%); }
  }
}
@keyframes vine-grow { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes vine-dot  { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }

/* ---- Marketing sections ---------------------------------------------- */
.ms-kicker {
  display: block;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: hsl(var(--bg-accent));
  margin-bottom: .5rem;
}

.cycle-card {
  border-radius: 1rem;
  padding: 1.75rem 1.9rem;
}
.cycle-card .cycle-kicker {
  display: block;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: .5rem;
}
.cycle-up {
  background: linear-gradient(135deg, hsl(46 90% 94%), hsl(28 80% 92%));
  border: 1px solid hsl(38 60% 82%);
}
.cycle-up .cycle-kicker { color: hsl(30 80% 40%); }
.cycle-up p { color: hsl(24 30% 30%); }
.cycle-down {
  background: linear-gradient(135deg, hsl(220 50% 30%), hsl(220 45% 22%));
  border: 1px solid hsl(220 40% 34%);
  color: #fff;
}
.cycle-down h3 { color: #fff; }
.cycle-down .cycle-kicker { color: hsl(175 55% 60%); }
.cycle-down p { color: hsl(220 30% 82%); }

.release-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.release-list li { display: flex; gap: 1rem; align-items: flex-start; }
.release-list .bi {
  flex-shrink: 0;
  width: 2.6rem; height: 2.6rem; border-radius: .6rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: hsl(220 50% 45% / .1); color: hsl(var(--bg-primary));
  font-size: 1.2rem;
}
.release-list b { display: block; margin-bottom: .1rem; }
.release-list span { font-size: .92rem; color: hsl(var(--bg-muted-foreground)); }

.receipts {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .5rem .6rem; margin-top: 1.25rem;
}
.receipts span {
  padding: .3rem .8rem; border-radius: 50rem;
  background: hsl(220 50% 45% / .08);
  color: hsl(var(--bg-primary));
  font-size: .82rem; font-weight: 600;
}

.quote-band { padding: 4.5rem 0; }
.quote-text {
  font-family: "Aptos Display", Aptos, "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  font-weight: 600; color: #fff;
  margin-bottom: .75rem;
}
.quote-text.quote-long {
  font-size: clamp(1.15rem, 2vw, 1.7rem);
  font-weight: 500;
  max-width: 56rem;
  margin-left: auto; margin-right: auto;
  line-height: 1.5;
}
.quote-attr { color: rgba(255, 255, 255, .72); font-size: .95rem; margin: 0; }