/* ===========================================================
   IV Consulting · "BA" theme skin   (faithful clone)
   Matched 1:1 to growwithba.com's real design system:
     · Fonts: Plus Jakarta Sans (display+body), JetBrains Mono (labels)
     · Palette: ink #0D1421 on warm-white #FFFDF7, with brand
       purple/pink/coral/yellow/sky/mint accents
     · Neo-brutalist chrome: 2px solid ink borders + hard offset
       shadows (Npx Npx 0 #0D1421), press-on-hover, slight rotations
   Scoped to body.theme-ba; layered over landing.css + landing-v2.css.
   =========================================================== */

/* ---------- palette / tokens ---------- */
.theme-ba {
  /* base tokens consumed by landing.css (note: base --ink = PAGE BG) */
  --ink: #fffdf7;        /* page background (warm white) */
  --surface: #ffffff;    /* card surfaces */
  --surface-2: #fff5e6;  /* bg2 */
  --line: rgba(13, 20, 33, 0.12);
  --fg: #0d1421;         /* primary text (their "ink") */
  --muted: #5b6473;
  --accent: #ffd93d;     /* primary highlight = brand yellow */
  --accent-2: #0d1421;
  --on-accent: #0d1421;
  --grid-line: rgba(13, 20, 33, 0.05);
  --glow: rgba(108, 92, 231, 0.16);
  color-scheme: light;

  /* exact brand palette */
  --c-ink: #0d1421;
  --c-purple: #6c5ce7;
  --c-pink: #ff6b9d;
  --c-coral: #ff7b54;
  --c-yellow: #ffd93d;
  --c-sky: #4fc3f7;
  --c-mint: #00d9a3;

  /* neo-brutalist primitives */
  --b: 2px solid var(--c-ink);
  --sh: 6px 6px 0 var(--c-ink);
  --sh-sm: 4px 4px 0 var(--c-ink);
  --sh-press: 3px 3px 0 var(--c-ink);
  --radius: 1.25rem;
}

/* BA dark mode (toggle) */
[data-theme="dark"] .theme-ba {
  --ink: #0a0f18;
  --surface: #131a26;
  --surface-2: #1b2330;
  --line: rgba(255, 253, 247, 0.12);
  --fg: #fffdf7;
  --muted: #98a1b0;
  --accent: #ffd93d;
  --accent-2: #ffd93d;
  --on-accent: #0d1421;
  --grid-line: rgba(255, 253, 247, 0.05);
  --glow: rgba(108, 92, 231, 0.24);
  --c-ink: #fffdf7;
  color-scheme: dark;
}

/* ---------- typography ---------- */
body.theme-ba {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  letter-spacing: -0.01em;
}
.theme-ba h1,
.theme-ba h2,
.theme-ba h3,
.theme-ba .display,
.theme-ba .section-title {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
.theme-ba h1 { font-size: clamp(2.5rem, 5.6vw, 4.3rem); }
.theme-ba .nb { white-space: nowrap; }
/* hero sizing; .hb-fixed breaks only at the explicit <br class="hb"> */
.theme-ba .v2-hero h1 { font-size: clamp(2rem, 4.2vw, 3.5rem); }
.theme-ba .v2-hero h1.hb-fixed { white-space: nowrap; }
@media (max-width: 640px) {
  .theme-ba .v2-hero h1.hb-fixed { white-space: normal; }
  .theme-ba h1 .hb { display: none; }
}
.theme-ba ::selection { background: var(--c-yellow); color: #0d1421; }

/* mono labels — the JetBrains Mono uppercase chips */
.theme-ba .eyebrow,
.theme-ba .section-label,
.theme-ba .badge,
.theme-ba .fprog-tag,
.theme-ba .gstat,
.theme-ba .ba-col .tag,
.theme-ba .v2-st .badge,
.theme-ba .final .oc .n {
  font-family: "JetBrains Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ---------- decorative ---------- */
.theme-ba .grid-bg {
  background-image: radial-gradient(var(--grid-line) 1.4px, transparent 1.4px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000 35%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000 35%, transparent 100%);
}
.theme-ba .glow {
  background: radial-gradient(circle, rgba(108, 92, 231, 0.18), transparent 70%);
  filter: blur(120px);
}
.theme-ba .v2-progress {
  background: linear-gradient(90deg, var(--c-purple), var(--c-pink) 50%, var(--c-yellow));
  height: 4px;
}

/* ---------- header ---------- */
.theme-ba header.bar { max-width: 1120px; }
.theme-ba .toggle {
  border-radius: 999px;
  border: var(--b);
  background: var(--surface);
  box-shadow: var(--sh-sm);
  color: var(--c-ink);
}

/* ---------- buttons (ink pill, hard shadow, press on hover) ---------- */
.theme-ba .btn {
  background: var(--c-ink);
  color: #fffdf7;
  border: var(--b);
  border-radius: 999px;
  padding: 0.95rem 1.6rem;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  box-shadow: var(--sh-sm);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}
.theme-ba .btn:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--c-ink);
  background: var(--c-yellow);
  color: #0d1421;
}
.theme-ba .btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--c-ink); }

/* ---------- chip: eyebrow ---------- */
.theme-ba .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface);
  border: var(--b);
  color: var(--c-ink);
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  font-size: 0.7rem;
  font-weight: 500;
  box-shadow: var(--sh-sm);
}
.theme-ba .eyebrow .dot {
  width: 9px; height: 9px; border-radius: 999px;
  background: var(--c-mint); border: 1.5px solid var(--c-ink);
}

/* ---------- chip: section-label (pill with ink border) ---------- */
.theme-ba .section-label {
  display: inline-block;
  background: var(--c-yellow);
  color: #0d1421;
  border: var(--b);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: 0.7rem;
  font-weight: 700;
  box-shadow: var(--sh-sm);
}
.theme-ba .v2-cool-label { background: var(--c-sky); }

/* ---------- chip: badge (solid ink) ---------- */
.theme-ba .badge {
  display: inline-flex;
  align-items: center;
  background: var(--c-ink);
  color: #fffdf7;
  border-radius: 999px;
  padding: 0.34rem 0.8rem;
  font-size: 0.68rem;
  font-weight: 700;
}
.theme-ba .ftab-copy .badge { background: var(--c-purple); color: #fff; }

/* ---------- marker highlights ---------- */
.theme-ba h1 .hl,
.theme-ba .mk-hl {
  font-style: normal;
  font-weight: 800;
  color: #0d1421;
  background: var(--c-yellow);
  padding: 0.02em 0.22em;
  margin: 0 0.03em;
  border-radius: 0.32em;
  display: inline-block;
  transform: rotate(-2deg);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.theme-ba .hl.pink,
.theme-ba .mk-hl.pink { background: var(--c-pink); color: #fff; transform: rotate(1.5deg); }
.theme-ba .hl.cyan,
.theme-ba .mk-hl.cyan { background: var(--c-sky); color: #0d1421; transform: rotate(-1deg); }
.theme-ba .hl.purple,
.theme-ba .mk-hl.purple { background: var(--c-purple); color: #fff; transform: rotate(1deg); }

/* ===========================================================
   NEO-BRUTALIST CARD CHROME — 2px ink border + hard shadow
   =========================================================== */
.theme-ba .v2-st,
.theme-ba .v2-dc,
.theme-ba .tcard,
.theme-ba .gcard,
.theme-ba .oc,
.theme-ba .faq,
.theme-ba .ba-col,
.theme-ba .meme .frame,
.theme-ba .v2-frame,
.theme-ba .v2-chip,
.theme-ba .ftab-media .mx,
.theme-ba .fprog-media .mx {
  background: var(--surface);
  border: var(--b);
  border-radius: var(--radius);
  box-shadow: var(--sh);
}
.theme-ba .v2-st,
.theme-ba .v2-dc,
.theme-ba .tcard,
.theme-ba .gcard {
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.theme-ba .v2-st:hover,
.theme-ba .v2-dc:hover,
.theme-ba .gcard:hover {
  transform: translate(3px, 3px);
  box-shadow: var(--sh-press);
}

/* colourful icon squares — ink border + hard shadow + slight tilt */
.theme-ba .v2-dc .ic,
.theme-ba .v2-chip .ci,
.theme-ba .reassure .ic {
  border-radius: 0.7rem;
  display: grid;
  place-items: center;
  color: #0d1421;
  border: var(--b);
  box-shadow: 2px 2px 0 var(--c-ink);
}
.theme-ba .v2-dc:nth-child(5n + 1) .ic { background: var(--c-yellow); }
.theme-ba .v2-dc:nth-child(5n + 2) .ic { background: var(--c-pink); }
.theme-ba .v2-dc:nth-child(5n + 3) .ic { background: var(--c-sky); }
.theme-ba .v2-dc:nth-child(5n + 4) .ic { background: var(--c-purple); color: #fff; }
.theme-ba .v2-dc:nth-child(5n + 5) .ic { background: var(--c-mint); }
/* .fprog-ic stays hidden (base sets display:none) */

/* ---------- hero ---------- */
.theme-ba .v2-chip { border-radius: 0.9rem; box-shadow: var(--sh-sm); }
.theme-ba .v2-chip.owned .ci { background: var(--c-mint); }
.theme-ba .v2-chip.metric .ci { background: var(--c-sky); }
.theme-ba .cta-note { color: var(--muted); }

/* ---------- stats bento ---------- */
.theme-ba .v2-st .big { font-weight: 800; letter-spacing: -0.04em; }
.theme-ba .v2-st.cool .big { color: var(--c-purple); }
.theme-ba .v2-st.hero-tile { background: var(--c-ink); color: #fffdf7; }
.theme-ba .v2-st.hero-tile .big { color: var(--c-yellow); }
.theme-ba .v2-st.hero-tile .cap { color: rgba(255, 253, 247, 0.74); }
.theme-ba .v2-st.hero-tile .badge { background: var(--c-yellow); color: #0d1421; }

/* ---------- trust strip ---------- */
.theme-ba .trust .cap { color: var(--muted); }

/* ---------- problem / pain ---------- */
.theme-ba .pain li .x {
  background: var(--c-pink);
  color: #fff;
  border: 1.5px solid var(--c-ink);
  border-radius: 0.5rem;
}

/* ---------- before / after ---------- */
.theme-ba .ba-col.before { background: #fff0f5; }
.theme-ba .ba-col.after { background: #e9fbf5; }
.theme-ba .ba-col .tag {
  border: var(--b);
  border-radius: 999px;
  padding: 0.32rem 0.85rem;
  font-weight: 700;
  font-size: 0.68rem;
  box-shadow: var(--sh-sm);
}
.theme-ba .ba-col.before .tag { background: var(--c-pink); color: #fff; }
.theme-ba .ba-col.after .tag { background: var(--c-mint); color: #0d1421; }
.theme-ba .ba-col.before .mk { background: var(--c-pink); color: #fff; border: 1.5px solid var(--c-ink); border-radius: 0.45rem; }
.theme-ba .ba-col.after .mk { background: var(--c-mint); color: #0d1421; border: 1.5px solid var(--c-ink); border-radius: 0.45rem; }

/* ---------- services tabs ---------- */
.theme-ba .ftab {
  border-radius: 999px;
  border: var(--b);
  background: var(--surface);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  color: var(--c-ink);
  box-shadow: var(--sh-sm);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}
.theme-ba .ftab:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--c-ink); }
.theme-ba .ftab.active { background: var(--c-ink); color: #fffdf7; }
.theme-ba .ftab.active svg { color: var(--c-yellow); }
.theme-ba .ftab-points li::marker { color: var(--c-mint); }

/* ---------- steps progress ---------- */
.theme-ba .fprog-item.active {
  background: var(--surface);
  border: var(--b);
  border-radius: var(--radius);
  box-shadow: var(--sh);
}
.theme-ba .fprog-bar { background: rgba(13, 20, 33, 0.1); }
.theme-ba .fprog-bar span { background: var(--c-purple); }
.theme-ba .fprog-tag {
  background: var(--c-mint);
  color: #0d1421;
  border: var(--b);
  border-radius: 999px;
  box-shadow: var(--sh-sm);
}

/* ---------- deliverables ---------- */
.theme-ba .v2-dc.feat { background: var(--c-ink); color: #fffdf7; }
body.theme-ba .v2-dc.feat p { color: rgba(255, 253, 247, 0.88); }
.theme-ba .v2-dc.feat .ic { background: var(--c-yellow); color: #0d1421; }
.theme-ba .v2-dc.feat b { color: var(--c-yellow); }

/* ---------- testimonials ---------- */
body.theme-ba .tcard.feat { background: var(--c-ink); color: #fffdf7; }
body.theme-ba .tcard.feat .nm { color: #fff; }
body.theme-ba .tcard.feat .rl { color: rgba(255, 253, 247, 0.6); }
body.theme-ba .tcard.feat .v2-tstat { color: var(--c-yellow); }
body.theme-ba .tcard.feat .v2-tstat span { color: rgba(255, 253, 247, 0.7); }
body.theme-ba .v2-tstat { color: #0d1421; font-weight: 800; }
body.theme-ba .tcard:not(.feat) .v2-tstat span { color: var(--muted); }
.theme-ba .tcard .av { background: var(--c-purple); color: #fff; border: 1.5px solid var(--c-ink); }
.theme-ba .tcard.feat .av { background: var(--c-yellow); color: #0d1421; }

/* ---------- gallery ---------- */
.theme-ba .gnav {
  border-radius: 999px;
  border: var(--b);
  background: var(--surface);
  box-shadow: var(--sh-sm);
  color: var(--c-ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}
.theme-ba .gnav:hover:not(:disabled) { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--c-ink); background: var(--c-yellow); }
.theme-ba .gcard { overflow: hidden; }
.theme-ba .gstat {
  background: var(--c-sky);
  color: #0d1421;
  border: var(--b);
  border-radius: 999px;
  font-weight: 700;
}
.theme-ba .gdot { background: rgba(13, 20, 33, 0.2); }
.theme-ba .gdot.active { background: var(--c-pink); }
.theme-ba .gtag { background: var(--surface-2); border: 1.5px solid var(--c-ink); border-radius: 0.5rem; }
.theme-ba .more { color: var(--c-purple); font-weight: 700; }

/* ---------- FAQ ---------- */
.theme-ba .faq { margin-bottom: 0.9rem; padding: 0.4rem 1.25rem; }
.theme-ba .faq summary { font-weight: 700; }
.theme-ba .faq .pm {
  background: var(--c-yellow);
  color: #0d1421;
  border: 1.5px solid var(--c-ink);
  border-radius: 999px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
}
.theme-ba .faq[open] .pm { background: var(--c-pink); color: #fff; }

/* ---------- final CTA (dark band) ---------- */
.theme-ba .final {
  background: var(--c-ink);
  color: #fffdf7;
  border: var(--b);
  border-radius: 1.75rem;
  margin: 2rem auto 3rem;
  max-width: 1120px;
  box-shadow: 9px 9px 0 var(--c-purple);
  overflow: hidden;
}
.theme-ba .final h2 { color: #fffdf7; }
.theme-ba .final > .wrap > p { color: rgba(255, 253, 247, 0.74); }
.theme-ba .final .oc {
  background: rgba(255, 253, 247, 0.05);
  border: 1px solid rgba(255, 253, 247, 0.14);
  border-radius: 0.9rem;
}
.theme-ba .final .oc .n { color: var(--c-yellow); }
.theme-ba .final .oc p { color: rgba(255, 253, 247, 0.68); }
body.theme-ba .final .reassure {
  color: rgba(255, 253, 247, 0.82);
  background: rgba(255, 253, 247, 0.05);
  border: 1px solid rgba(255, 253, 247, 0.14);
}
.theme-ba .final .reassure .ic { background: rgba(255, 217, 61, 0.16); color: var(--c-yellow); }
.theme-ba .final .btn { background: var(--c-yellow); color: #0d1421; border-color: var(--c-yellow); box-shadow: 4px 4px 0 rgba(255, 253, 247, 0.25); }
.theme-ba .final .btn:hover { background: #fff; border-color: #fff; box-shadow: 2px 2px 0 rgba(255, 253, 247, 0.25); }
.theme-ba .final .glow { background: radial-gradient(circle, rgba(108, 92, 231, 0.45), transparent 70%); }

/* ---------- sticky CTA ---------- */
.theme-ba .sticky-cta .inner {
  background: var(--surface);
  border: var(--b);
  border-radius: 999px;
  box-shadow: var(--sh);
}
.theme-ba .sticky-cta .msg span { color: var(--muted); }

/* ---------- footer ---------- */
.theme-ba .foot { color: var(--muted); }

/* dark-mode button fix */
[data-theme="dark"] body.theme-ba .btn { background: var(--c-yellow); color: #0d1421; border-color: var(--c-ink); }
[data-theme="dark"] body.theme-ba .btn:hover { background: #fffdf7; color: #0d1421; }

/* dark mode removed — hide the theme toggle */
#themeToggle { display: none !important; }
