/* GENERATED -- green theme, derived from the blue stylesheet of the same name.
   Do not hand-edit: rebuild with `python3 tools/theme/build.py`.
   Blue -> #00823b (the previous brand green #039746, deepened to clear AA);
   purple/orange -> #8cc63f (logo lime);
   no blue surfaces: navy fills become deep green, navy type stays navy.
   Product --pa accents and .industry-card keep their variety, minus blue. */
/* ==========================================================================
   GENZERP BUSINESS BRAIN — hero visual

   Mount:    <div id="business-brain"></div>
   Requires: business-brain.js (+ GSAP; degrades to a static composition without it)

   ─── WHERE TO CHANGE COLOURS ──────────────────────────────────────────────
   Every colour lives in the .bb-scope token block below. Nothing else
   hard-codes one, including the SVG gradients (they read the tokens).

   ─── HOW IT SCALES ────────────────────────────────────────────────────────
   The script measures the container and writes --bb-s (0.62 → 1). Every size
   here is calc(Npx * var(--bb-s)), so the whole scene scales as one piece —
   no size media queries needed.
   ========================================================================== */
.bb-scope{
  --bb-navy:#0a2f73;
  --bb-blue:#00823b;
  --bb-orange:#8cc63f;
  --bb-purple:#548000;
  --bb-green:#13a878;
  --bb-bg:#f5faf6;
  --bb-white:#ffffff;
  --bb-ink:#0b2450;
  --bb-muted:#607664;
  --bb-line:#e2ede4;
  --bb-s:1;                      /* written by the script — do not set by hand */
}

/* ---------- stage ---------- */
.bb{position:relative;width:100%;max-width:560px;margin:0 auto;aspect-ratio:1/1;
  font-family:inherit;color:var(--bb-ink);
  /* the faint ground the whole scene sits on */
  background:
    radial-gradient(circle at 50% 46%,rgba(84,128,0,.10),transparent 46%),
    radial-gradient(circle at 50% 46%,rgba(0,130,59,.09),transparent 62%)}
.bb-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}

/* ---------- connectors + particles ---------- */
.bb-link{fill:none;stroke:url(#bbLink);stroke-width:1.15;stroke-linecap:round;opacity:.42;
  transition:stroke-width .3s ease}
.bb-link.is-on{stroke-width:2.1}
.bb.is-hot .bb-link{stroke-width:1.5}
.bb.is-hot .bb-link.is-on{stroke-width:2.1}

/* var() does not resolve inside an SVG presentation attribute, so the gradient
   stops are coloured here instead — they still read the .bb-scope tokens. */
.bb-g1{stop-color:var(--bb-blue)}
.bb-g2{stop-color:var(--bb-purple)}
.bb-g3{stop-color:#ffffff}
.bb-g4{stop-color:var(--bb-purple)}
.bb-g5{stop-color:var(--bb-blue)}
.bb-dot{fill:url(#bbDot)}
.bb-ring{fill:none;stroke:var(--bb-purple);stroke-width:1;opacity:.18}
.bb-ring.b{stroke:var(--bb-blue);opacity:.14}
.bb-orbit{fill:var(--bb-blue);opacity:.3}
.bb-out{fill:none;stroke:var(--bb-purple);stroke-width:1.2;stroke-dasharray:3 4;opacity:.5}

/* ---------- positioners (CSS owns this transform — GSAP never touches it) ---------- */
.bb-pos{position:absolute;transform:translate(-50%,-50%);will-change:transform}

/* ---------- AI core ---------- */
.bb-core{position:relative;width:calc(132px * var(--bb-s));height:calc(132px * var(--bb-s));
  border-radius:50%;display:grid;place-items:center;color:#ffffff;text-align:center;
  background:radial-gradient(circle at 34% 28%,#27a153,var(--bb-blue) 42%,var(--brand-deep) 100%);
  box-shadow:0 calc(16px * var(--bb-s)) calc(38px * var(--bb-s)) rgba(0,130,59,.34),
             inset 0 0 calc(26px * var(--bb-s)) rgba(255,255,255,.16)}
.bb-core:before{content:"";position:absolute;inset:calc(-13px * var(--bb-s));border-radius:50%;
  border:1px solid rgba(84,128,0,.34)}
.bb-core:after{content:"";position:absolute;inset:calc(-26px * var(--bb-s));border-radius:50%;
  background:radial-gradient(circle,rgba(84,128,0,.16),transparent 68%)}
.bb-core b{display:block;font-size:calc(15px * var(--bb-s));letter-spacing:calc(-.35px * var(--bb-s));line-height:1}
.bb-core span{display:block;font-size:calc(8px * var(--bb-s));letter-spacing:calc(1.5px * var(--bb-s));
  font-weight:700;opacity:.72;margin-top:calc(4px * var(--bb-s))}

/* ---------- business module cards ---------- */
.bb-mod{display:flex;align-items:center;gap:calc(8px * var(--bb-s));cursor:default;
  padding:calc(8px * var(--bb-s)) calc(12px * var(--bb-s)) calc(8px * var(--bb-s)) calc(8px * var(--bb-s));
  background:var(--bb-white);border:1px solid var(--bb-line);border-radius:calc(13px * var(--bb-s));
  box-shadow:0 calc(8px * var(--bb-s)) calc(20px * var(--bb-s)) rgba(0,59,23,.09);
  white-space:nowrap;will-change:transform}
.bb-mod i{width:calc(26px * var(--bb-s));height:calc(26px * var(--bb-s));flex:none;
  border-radius:calc(8px * var(--bb-s));display:grid;place-items:center;color:#ffffff;
  background:linear-gradient(140deg,var(--bb-blue),var(--bb-purple))}
.bb-mod i svg{width:calc(14px * var(--bb-s));height:calc(14px * var(--bb-s));display:block}
.bb-mod.t-green i{background:linear-gradient(140deg,var(--bb-green),var(--bb-blue))}
.bb-mod.t-orange i{background:linear-gradient(140deg,var(--bb-orange),var(--bb-purple))}
.bb-mod.t-navy i{background:linear-gradient(140deg,var(--brand-deep),var(--bb-blue))}
.bb-mod span{font-size:calc(11.5px * var(--bb-s));font-weight:700;letter-spacing:calc(-.15px * var(--bb-s))}

/* tooltip — one per module, revealed on hover/focus */
.bb-tip{position:absolute;left:50%;top:calc(100% + 9px * var(--bb-s));transform:translateX(-50%);
  width:max-content;max-width:calc(168px * var(--bb-s));white-space:normal;text-align:center;
  font-size:calc(10.5px * var(--bb-s));line-height:1.48;color:var(--bb-muted);
  padding:calc(8px * var(--bb-s)) calc(11px * var(--bb-s));border-radius:calc(10px * var(--bb-s));
  background:var(--bb-white);border:1px solid var(--bb-line);
  box-shadow:0 calc(10px * var(--bb-s)) calc(24px * var(--bb-s)) rgba(0,59,23,.12);
  opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease;z-index:6}
.bb-tip.up{top:auto;bottom:calc(100% + 9px * var(--bb-s))}
.bb-node:hover .bb-tip,.bb-node:focus-within .bb-tip{opacity:1;transform:translateX(-50%) translateY(calc(-2px * var(--bb-s)))}
.bb-node{position:absolute;transform:translate(-50%,-50%);z-index:4}
.bb-node:hover,.bb-node:focus-within{z-index:7}

/* ---------- "AI ANALYZING" pill ---------- */
.bb-pill{display:inline-flex;align-items:center;gap:calc(7px * var(--bb-s));
  padding:calc(6px * var(--bb-s)) calc(12px * var(--bb-s));border-radius:999px;
  font-size:calc(9px * var(--bb-s));font-weight:800;letter-spacing:calc(1.1px * var(--bb-s));
  color:var(--bb-purple);background:rgba(84,128,0,.1);border:1px solid rgba(84,128,0,.26);
  white-space:nowrap}
.bb-pill i{width:calc(6px * var(--bb-s));height:calc(6px * var(--bb-s));border-radius:50%;
  background:var(--bb-purple)}

/* ---------- output cards (insight → action → outcome) ---------- */
.bb-card{width:calc(230px * var(--bb-s));background:var(--bb-white);border:1px solid var(--bb-line);
  border-radius:calc(15px * var(--bb-s));padding:calc(13px * var(--bb-s)) calc(15px * var(--bb-s));
  box-shadow:0 calc(18px * var(--bb-s)) calc(42px * var(--bb-s)) rgba(0,59,23,.14);text-align:left}
.bb-card>b{display:flex;align-items:center;gap:calc(6px * var(--bb-s));
  font-size:calc(8.5px * var(--bb-s));letter-spacing:calc(1.2px * var(--bb-s));color:var(--bb-purple);
  margin-bottom:calc(7px * var(--bb-s))}
.bb-card>b:before{content:"";width:calc(5px * var(--bb-s));height:calc(5px * var(--bb-s));
  border-radius:50%;background:var(--bb-purple)}
.bb-row{display:flex;align-items:center;justify-content:space-between;gap:calc(10px * var(--bb-s))}
.bb-card p{margin:0;font-size:calc(12px * var(--bb-s));line-height:1.45;font-weight:600;color:var(--bb-ink)}
.bb-card .bb-big{flex:none;font-size:calc(23px * var(--bb-s));font-weight:800;
  letter-spacing:calc(-.8px * var(--bb-s));color:var(--bb-navy)}
.bb-card em{display:block;font-style:normal;font-size:calc(10.5px * var(--bb-s));line-height:1.5;
  color:var(--bb-muted);margin-top:calc(5px * var(--bb-s))}
.bb-card.t-green>b{color:var(--bb-green)}
.bb-card.t-green>b:before{background:var(--bb-green)}
.bb-card.t-orange>b{color:var(--bb-orange)}
.bb-card.t-orange>b:before{background:var(--bb-orange)}

/* ---------- no-GSAP / reduced-motion composition ----------
   Elements render visible by default, so if the script cannot animate,
   the scene still reads as a finished picture. GSAP hides them itself. */
@media(prefers-reduced-motion:reduce){
  .bb-mod,.bb-core,.bb-card,.bb-pill{transition:none}
}

/* ==========================================================================
   DEMO SECTION LAYOUT — only used by the page that hosts the visual.
   Delete this block if you drop the Business Brain into an existing hero.
   ========================================================================== */
.bbs{position:relative;overflow:hidden;padding:66px 0 70px;
  background:linear-gradient(180deg,#ffffff,#f6faf7 48%,#ffffff)}
.bbs:before{content:"";position:absolute;width:640px;height:640px;left:-280px;top:-240px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,130,59,.10),transparent 66%);pointer-events:none}
.bbs-grid{position:relative;z-index:2;display:grid;gap:52px;align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.bbs-copy h2{font-size:40px;line-height:1.08;letter-spacing:-1.6px;font-weight:800;margin-bottom:16px;color:#0b2450}
.bbs-copy h2 span{background:linear-gradient(90deg,#548000,#00823b);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.bbs-copy>p{font-size:15.5px;line-height:1.72;color:#536957;max-width:470px;margin-bottom:26px}
.bbs-steps{list-style:none;counter-reset:bbs;margin:0 0 28px;padding:0;display:grid;gap:11px}
/* A real two-column row. The label used to be an inline-block with a min-width,
   which only fakes a column on the FIRST line — as soon as the description
   wrapped, the second line started back at the row's content edge and sat under
   the number instead of staying in its column. At 360px that hit four rows of
   five. `auto` for the label column means the min-width below still drives the
   width, so the narrow breakpoint keeps working without repeating itself. */
.bbs-steps li{counter-increment:bbs;position:relative;padding-left:40px;font-size:13px;line-height:1.55;
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline}
.bbs-steps li:before{content:counter(bbs);position:absolute;left:0;top:-1px;width:26px;height:26px;
  border-radius:9px;display:grid;place-items:center;font-size:11px;font-weight:800;color:#ffffff;
  background:linear-gradient(140deg,#00823b,#548000)}
.bbs-steps li:nth-child(4):before{background:linear-gradient(140deg,#8cc63f,#548000)}
.bbs-steps li:nth-child(5):before{background:linear-gradient(140deg,#13a878,#00823b)}
.bbs-steps li:after{content:"";position:absolute;left:12.5px;top:27px;bottom:-11px;width:1px;background:#dfeae1}
.bbs-steps li:last-child:after{display:none}
.bbs-steps b{display:inline-block;min-width:62px;font-size:13px;color:#0b2450}
.bbs-steps span{color:#607664}
.bbs-stage{min-width:0}
.bbs-ns{font-size:13px;line-height:1.7;color:#536957;border:1px solid #e2ede4;border-radius:16px;
  padding:18px 20px;background:#ffffff}
@media(max-width:980px){
  .bbs-grid{grid-template-columns:minmax(0,1fr);gap:34px}
  .bbs-copy h2{font-size:32px;letter-spacing:-1.1px}
  .bbs-copy>p{max-width:none}
}
@media(max-width:760px){
  .bbs{padding:46px 0 54px}
  .bbs-copy h2{font-size:27px;letter-spacing:-.9px}
  .bbs-copy>p{font-size:14.5px}
  .bbs-steps li{font-size:12.5px;padding-left:36px}
  .bbs-steps li:before{width:23px;height:23px;font-size:10px}
  .bbs-steps li:after{left:11px;top:24px}
  .bbs-steps b{min-width:56px;font-size:12.5px}
}


/* ── Green theme: readability repairs ────────────────────────────────────── */
.bb-card.t-orange>b{color:#548100}                                          /* lime as ink         2.05 -> 4.65 */
.bb-core{background:radial-gradient(circle at 34% 28%,#1c8f46,#00823b 42%,var(--brand-deep) 100%)}  /* white label 3.81 -> 4.93 */