/* ═══════════════════════════════════════════════════════════════════════
   JEMBA V2 DESIGN SYSTEM — v1.0.0
   Enqueued by the jemba-v2-design-system WordPress plugin.
   
   EDITING GUIDE:
   • Brand colours    → .jb-root CSS variables (search "DESIGN TOKENS")
   • Font family      → --font and --mono variables (swap when confirmed)
   • Spacing/shape    → --maxw, --radius, --shadow
   • Block styles     → Ctrl+F "BLOCK N" to jump to any block
   • Inner pages      → search "INNER PAGE" for page-hero, prose, timeline, FAQ
   • Gated content    → search "BLOCK 13" for lead-gen gate styles
   • Responsive       → bottom of file (@media queries)
   
   This file is loaded on every front-end page via wp_enqueue_style.
   Each page only needs structural HTML — no inline CSS needed.
   ═══════════════════════════════════════════════════════════════════════ */

/* ---- Web font (STAND-IN). Family is OPEN — see 06-open-questions.md.
   Swap both families here once the real jemba.ai Google Font is confirmed;
   it is referenced everywhere via the two CSS variables below. ---- */
/* ===== DESIGN TOKENS (declared once) ===== */
.jb-root{
  /* Brand */
  --violet:#4C00FF;          /* primary — verified meta-theme-color */
  --violet-700:#3D00CC;
  --violet-tint:#F1ECFF;
  --violet-tint-2:#E7DEFF;
  /* Neutrals (violet-tinted near-black for cohesion) */
  --ink:#13101F;
  --ink-soft:#2A2540;
  --grey:#6B6878;            /* secondary text */
  --line:#ECEAF2;
  --paper:#FAFAFB;
  --white:#FFFFFF;
  /* Dark sections */
  --dark:#0C0A18;
  --dark-2:#161228;
  /* Type */
  --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* Spacing / shape */
  --maxw:1180px;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(19,16,31,.04),0 12px 32px -12px rgba(19,16,31,.12);
  --shadow-lg:0 24px 60px -24px rgba(76,0,255,.30);

  all:initial;
  display:block;
  font-family:var(--font);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-size:16px;
}
.jb-root *,.jb-root *::before,.jb-root *::after{box-sizing:border-box;}
.jb-root img{max-width:100%;display:block;}
.jb-root a{color:inherit;text-decoration:none;}
.jb-root p{margin:0;}
.jb-root h1,.jb-root h2,.jb-root h3,.jb-root h4{margin:0;font-weight:700;line-height:1.12;letter-spacing:-.02em;}
.jb-root ul{margin:0;padding:0;list-style:none;}

/* ===== Shared layout helpers ===== */
.jb-root .jb-wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.jb-root .jb-section{padding:clamp(56px,8vw,108px) 0;}
.jb-root .jb-eyebrow{
  font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--violet);display:inline-flex;align-items:center;gap:.55em;
}
.jb-root .jb-eyebrow::before{content:"";width:22px;height:1.5px;background:var(--violet);display:inline-block;}
.jb-root .jb-h2{font-size:clamp(1.9rem,3.4vw,2.85rem);}
.jb-root .jb-lead{color:var(--grey);font-size:1.075rem;max-width:62ch;}
.jb-root .jb-center{text-align:center;}
.jb-root .jb-center .jb-eyebrow{justify-content:center;}
.jb-root .jb-center .jb-lead{margin-left:auto;margin-right:auto;}

/* ===== Buttons ===== */
.jb-root .jb-btn{
  display:inline-flex;align-items:center;gap:.5em;font-family:var(--font);font-weight:600;
  font-size:.95rem;padding:.85em 1.4em;border-radius:999px;cursor:pointer;border:1.5px solid transparent;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
}
.jb-root .jb-btn--primary{background:var(--violet);color:#fff;box-shadow:0 8px 22px -8px rgba(76,0,255,.55);}
.jb-root .jb-btn--primary:hover{background:var(--violet-700);transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(76,0,255,.6);}
.jb-root .jb-btn--ghost{background:transparent;color:var(--ink);border-color:var(--line);}
.jb-root .jb-btn--ghost:hover{border-color:var(--violet);color:var(--violet);transform:translateY(-2px);}
.jb-root .jb-btn--on-dark{background:#fff;color:var(--ink);}
.jb-root .jb-btn--on-dark:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(0,0,0,.5);}
.jb-root .jb-btn--ghost-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.32);}
.jb-root .jb-btn--ghost-dark:hover{border-color:#fff;transform:translateY(-2px);}
.jb-root .jb-arrow{transition:transform .18s ease;}
.jb-root .jb-btn:hover .jb-arrow{transform:translateX(3px);}

/* =====================================================================
   BLOCK 1 — HEADER / NAV
   ===================================================================== */
.jb-root .jb-header{position:sticky;top:0;z-index:50;background:rgba(250,250,251,.82);backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--line);}
.jb-root .jb-nav{display:flex;align-items:center;gap:28px;height:72px;}
.jb-root .jb-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.18rem;letter-spacing:-.03em;}
.jb-root .jb-logo img{height:30px;width:auto;}
.jb-root .jb-logo .jb-logo-fallback{color:var(--ink);}
.jb-root .jb-logo .jb-logo-fallback b{color:var(--violet);}
.jb-root .jb-menu{display:flex;gap:26px;margin-left:18px;}
.jb-root .jb-menu a{font-size:.92rem;font-weight:500;color:var(--ink-soft);transition:color .15s;}
.jb-root .jb-menu a:hover{color:var(--violet);}
.jb-root .jb-nav-right{margin-left:auto;display:flex;align-items:center;gap:14px;}
/* Polylang language switcher (CSS-only dropdown) */
.jb-root .jb-lang{position:relative;font-family:var(--mono);font-size:.78rem;font-weight:600;}
.jb-root .jb-lang>button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border:1px solid var(--line);border-radius:999px;color:var(--ink-soft);}
.jb-root .jb-lang>button:hover{border-color:var(--violet);color:var(--violet);}
.jb-root .jb-lang-list{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;min-width:128px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .16s ease;}
.jb-root .jb-lang:hover .jb-lang-list,.jb-root .jb-lang:focus-within .jb-lang-list{opacity:1;visibility:visible;transform:translateY(0);}
.jb-root .jb-lang-list a{display:block;padding:7px 10px;border-radius:8px;color:var(--ink-soft);}
.jb-root .jb-lang-list a:hover{background:var(--violet-tint);color:var(--violet);}
.jb-root .jb-burger{display:none;}

/* =====================================================================
   BLOCK 2 — HERO
   ===================================================================== */
.jb-root .jb-hero{position:relative;overflow:hidden;}
.jb-root .jb-hero::before{content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(60% 60% at 82% 8%,rgba(76,0,255,.10),transparent 60%),
    radial-gradient(40% 50% at 6% 90%,rgba(76,0,255,.06),transparent 60%);
}
.jb-root .jb-hero::after{content:"";position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:46px 46px;-webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 80%);mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 80%);}
.jb-root .jb-hero .jb-wrap{position:relative;z-index:1;}
.jb-root .jb-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding:clamp(48px,7vw,86px) 0;}
.jb-root .jb-pill{display:inline-flex;align-items:center;gap:8px;background:var(--white);border:1px solid var(--line);border-radius:999px;padding:6px 13px 6px 8px;font-size:.78rem;font-weight:600;color:var(--ink-soft);box-shadow:var(--shadow);}
.jb-root .jb-pill .jb-dot{width:8px;height:8px;border-radius:50%;background:var(--violet);box-shadow:0 0 0 4px var(--violet-tint);}
.jb-root .jb-h1{font-size:clamp(2.4rem,5.2vw,4rem);line-height:1.04;margin:22px 0 0;font-weight:800;}
.jb-root .jb-h1 em{font-style:normal;color:var(--violet);position:relative;}
.jb-root .jb-h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.14em;background:var(--violet-tint-2);z-index:-1;border-radius:2px;}
.jb-root .jb-hero-sub{margin-top:22px;color:var(--grey);font-size:1.12rem;max-width:52ch;}
.jb-root .jb-hero-sub b{color:var(--ink-soft);font-weight:600;}
.jb-root .jb-hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;}
.jb-root .jb-hero-micro{margin-top:18px;font-family:var(--mono);font-size:.76rem;color:var(--grey);letter-spacing:.02em;}

/* Hero visual — animated live-monitoring dashboard mock */
.jb-root .jb-dash{background:var(--white);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lg);overflow:hidden;}
.jb-root .jb-dash-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);background:linear-gradient(var(--white),var(--paper));}
.jb-root .jb-dash-bar .jb-tl{width:9px;height:9px;border-radius:50%;background:var(--line);}
.jb-root .jb-dash-bar .jb-tl:nth-child(1){background:#FF5F57;}
.jb-root .jb-dash-bar .jb-tl:nth-child(2){background:#FEBC2E;}
.jb-root .jb-dash-bar .jb-tl:nth-child(3){background:#28C840;}
.jb-root .jb-dash-bar .jb-tl-label{margin-left:8px;font-family:var(--mono);font-size:.72rem;color:var(--grey);}
.jb-root .jb-dash-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.68rem;font-weight:600;color:var(--violet);}
.jb-root .jb-dash-live .jb-blink{width:7px;height:7px;border-radius:50%;background:var(--violet);animation:jbPulse 1.6s infinite;}
.jb-root .jb-dash-body{padding:18px;}
.jb-root .jb-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;}
.jb-root .jb-kpi{border:1px solid var(--line);border-radius:12px;padding:11px 12px;background:var(--paper);}
.jb-root .jb-kpi .jb-kpi-l{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);}
.jb-root .jb-kpi .jb-kpi-v{font-family:var(--mono);font-weight:600;font-size:1.18rem;margin-top:3px;color:var(--ink);}
.jb-root .jb-kpi .jb-kpi-v.up{color:var(--violet);}
.jb-root .jb-chart{position:relative;border:1px solid var(--line);border-radius:12px;padding:12px 12px 8px;background:
  linear-gradient(180deg,rgba(76,0,255,.03),transparent);}
.jb-root .jb-chart-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.jb-root .jb-chart-h span{font-family:var(--mono);font-size:.64rem;color:var(--grey);text-transform:uppercase;letter-spacing:.08em;}
.jb-root .jb-chart svg{width:100%;height:96px;display:block;}
.jb-root .jb-spark{stroke:var(--violet);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:620;stroke-dashoffset:620;animation:jbDraw 2.6s ease forwards .3s;}
.jb-root .jb-anom{fill:var(--violet);}
.jb-root .jb-anom-ring{fill:none;stroke:var(--violet);stroke-width:2;opacity:.6;transform-origin:center;animation:jbPing 1.8s ease-out infinite;}
.jb-root .jb-flag{font-family:var(--mono);font-size:.6rem;}

@keyframes jbDraw{to{stroke-dashoffset:0;}}
@keyframes jbPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(.8);}}
@keyframes jbPing{0%{r:5;opacity:.7;}70%,100%{r:16;opacity:0;}}
@keyframes jbRise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
.jb-root .jb-rise{opacity:0;animation:jbRise .7s cubic-bezier(.2,.7,.2,1) forwards;}
.jb-root .jb-rise.d1{animation-delay:.05s;}
.jb-root .jb-rise.d2{animation-delay:.15s;}
.jb-root .jb-rise.d3{animation-delay:.25s;}
.jb-root .jb-rise.d4{animation-delay:.35s;}
.jb-root .jb-rise.d5{animation-delay:.5s;}

/* =====================================================================
   BLOCK 3 — STAT BAR  (reused twice: scale + impact)
   ===================================================================== */
.jb-root .jb-statbar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--white);}
.jb-root .jb-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:34px 0;}
.jb-root .jb-stat{text-align:center;position:relative;}
.jb-root .jb-stat + .jb-stat::before{content:"";position:absolute;left:0;top:18%;height:64%;width:1px;background:var(--line);}
.jb-root .jb-stat .jb-num{font-family:var(--mono);font-weight:600;font-size:clamp(1.6rem,3vw,2.3rem);color:var(--ink);letter-spacing:-.02em;}
.jb-root .jb-stat .jb-num span{color:var(--violet);}
.jb-root .jb-stat .jb-lab{font-size:.82rem;color:var(--grey);margin-top:4px;}

/* =====================================================================
   BLOCK 4 — PILLARS (3-up)
   ===================================================================== */
.jb-root .jb-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px;}
.jb-root .jb-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:30px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.jb-root .jb-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--violet-tint-2);}
.jb-root .jb-ico{width:46px;height:46px;border-radius:12px;background:var(--violet-tint);color:var(--violet);display:grid;place-items:center;margin-bottom:18px;}
.jb-root .jb-ico svg{width:24px;height:24px;}
.jb-root .jb-card h3{font-size:1.28rem;}
.jb-root .jb-card p{margin-top:10px;color:var(--grey);font-size:.98rem;}

/* =====================================================================
   BLOCK 5 — TABBED SHOWCASE (CSS-only tabs via radio inputs)
   ===================================================================== */
.jb-root .jb-tabs{margin-top:44px;}
.jb-root .jb-tabs input{position:absolute;opacity:0;pointer-events:none;}
.jb-root .jb-tablist{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.jb-root .jb-tablabel{cursor:pointer;border:1px solid var(--line);background:var(--white);border-radius:999px;
  padding:.7em 1.25em;font-weight:600;font-size:.92rem;color:var(--ink-soft);transition:all .16s ease;display:inline-flex;align-items:center;gap:.5em;}
.jb-root .jb-tablabel .jb-tk{font-family:var(--mono);font-size:.7rem;color:var(--grey);}
.jb-root .jb-tablabel:hover{border-color:var(--violet-tint-2);color:var(--violet);}
.jb-root .jb-tabpanel{display:none;margin-top:26px;}
.jb-root .jb-tabpanel-inner{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:20px;padding:34px;}
.jb-root #jb-uc1:checked ~ .jb-tablist label[for=jb-uc1],
.jb-root #jb-uc2:checked ~ .jb-tablist label[for=jb-uc2],
.jb-root #jb-uc3:checked ~ .jb-tablist label[for=jb-uc3],
.jb-root #jb-uc4:checked ~ .jb-tablist label[for=jb-uc4]{background:var(--violet);border-color:var(--violet);color:#fff;}
.jb-root #jb-uc1:checked ~ .jb-tablist label[for=jb-uc1] .jb-tk,
.jb-root #jb-uc2:checked ~ .jb-tablist label[for=jb-uc2] .jb-tk,
.jb-root #jb-uc3:checked ~ .jb-tablist label[for=jb-uc3] .jb-tk,
.jb-root #jb-uc4:checked ~ .jb-tablist label[for=jb-uc4] .jb-tk{color:rgba(255,255,255,.7);}
.jb-root #jb-uc1:checked ~ #jb-panel1,
.jb-root #jb-uc2:checked ~ #jb-panel2,
.jb-root #jb-uc3:checked ~ #jb-panel3,
.jb-root #jb-uc4:checked ~ #jb-panel4{display:block;}
.jb-root .jb-uc-h{font-size:1.55rem;}
.jb-root .jb-uc-p{color:var(--grey);margin-top:12px;}
.jb-root .jb-uc-list{margin-top:18px;display:flex;flex-direction:column;gap:11px;}
.jb-root .jb-uc-list li{display:flex;gap:10px;align-items:flex-start;font-size:.96rem;color:var(--ink-soft);}
.jb-root .jb-tick{flex:none;width:20px;height:20px;border-radius:50%;background:var(--violet-tint);color:var(--violet);display:grid;place-items:center;margin-top:1px;}
.jb-root .jb-tick svg{width:12px;height:12px;}
.jb-root .jb-uc-link{margin-top:22px;display:inline-flex;align-items:center;gap:6px;color:var(--violet);font-weight:600;font-size:.92rem;}
.jb-root .jb-uc-visual{border-radius:14px;border:1px solid var(--line);background:var(--paper);padding:22px;min-height:230px;display:flex;flex-direction:column;justify-content:center;gap:14px;}
.jb-root .jb-vrow{display:flex;align-items:center;gap:12px;}
.jb-root .jb-vrow .jb-vlab{font-family:var(--mono);font-size:.7rem;color:var(--grey);width:74px;flex:none;text-transform:uppercase;letter-spacing:.06em;}
.jb-root .jb-vbar{height:12px;border-radius:6px;background:var(--violet-tint);overflow:hidden;flex:1;}
.jb-root .jb-vbar i{display:block;height:100%;border-radius:6px;background:var(--violet);}
.jb-root .jb-vbig{font-family:var(--mono);font-size:2rem;font-weight:600;color:var(--violet);}
.jb-root .jb-vbig small{display:block;font-family:var(--font);font-size:.8rem;color:var(--grey);font-weight:500;margin-top:2px;}

/* =====================================================================
   BLOCK 6 — PROCESS STEPS (A→D)
   ===================================================================== */
.jb-root .jb-proc{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:48px;position:relative;}
.jb-root .jb-step{padding:0 22px;position:relative;}
.jb-root .jb-step + .jb-step::before{content:"";position:absolute;left:0;top:23px;width:1px;height:calc(100% - 23px);background:var(--line);}
.jb-root .jb-badge{width:46px;height:46px;border-radius:12px;background:var(--ink);color:#fff;font-family:var(--mono);font-weight:600;font-size:1.1rem;display:grid;place-items:center;}
.jb-root .jb-step:hover .jb-badge{background:var(--violet);}
.jb-root .jb-step h3{margin-top:18px;font-size:1.12rem;}
.jb-root .jb-step p{margin-top:8px;color:var(--grey);font-size:.93rem;}
.jb-root .jb-step .jb-stepk{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--violet);text-transform:uppercase;margin-top:14px;display:block;}

/* =====================================================================
   BLOCK 7 — SPLIT FEATURE  (alternating image/text)
   ===================================================================== */
.jb-root .jb-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.jb-root .jb-split-figure{background:linear-gradient(160deg,var(--dark),var(--dark-2));border-radius:20px;padding:38px;color:#fff;position:relative;overflow:hidden;}
.jb-root .jb-split-figure::after{content:"";position:absolute;inset:0;background:radial-gradient(50% 50% at 80% 10%,rgba(76,0,255,.4),transparent 60%);}
.jb-root .jb-reduce{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:14px;}
.jb-root .jb-rcol{text-align:center;flex:1;}
.jb-root .jb-rcol .jb-rnum{font-family:var(--mono);font-size:clamp(1.8rem,4vw,2.6rem);font-weight:600;color:#fff;}
.jb-root .jb-rcol .jb-rnum.accent{color:#B79BFF;}
.jb-root .jb-rcol .jb-rlab{font-size:.74rem;color:rgba(255,255,255,.6);margin-top:6px;letter-spacing:.04em;}
.jb-root .jb-rarrow{color:#B79BFF;flex:none;}
.jb-root .jb-reduce-cap{position:relative;z-index:1;margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-family:var(--mono);font-size:.72rem;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.1em;}
.jb-root .jb-split-text .jb-feat-list{margin-top:22px;display:flex;flex-direction:column;gap:14px;}
.jb-root .jb-feat-list li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-soft);}

/* =====================================================================
   BLOCK 8 — CASE STUDY
   ===================================================================== */
.jb-root .jb-case{background:linear-gradient(160deg,var(--dark),#120D24);border-radius:24px;padding:clamp(30px,4vw,52px);color:#fff;position:relative;overflow:hidden;}
.jb-root .jb-case::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:40px 40px;-webkit-mask-image:radial-gradient(70% 100% at 90% 0,#000,transparent 70%);mask-image:radial-gradient(70% 100% at 90% 0,#000,transparent 70%);}
.jb-root .jb-case-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:center;}
.jb-root .jb-case .jb-eyebrow{color:#B79BFF;}
.jb-root .jb-case .jb-eyebrow::before{background:#B79BFF;}
.jb-root .jb-case h3{color:#fff;font-size:clamp(1.5rem,2.6vw,2rem);margin-top:18px;}
.jb-root .jb-case .jb-case-sub{color:rgba(255,255,255,.62);margin-top:14px;}
.jb-root .jb-case-tag{display:inline-block;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:5px 12px;margin-top:22px;}
.jb-root .jb-case-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.jb-root .jb-metric{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:18px;}
.jb-root .jb-metric .jb-mv{font-family:var(--mono);font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:600;color:#fff;}
.jb-root .jb-metric .jb-mv b{color:#B79BFF;font-weight:600;}
.jb-root .jb-metric .jb-ml{font-size:.78rem;color:rgba(255,255,255,.6);margin-top:5px;}
.jb-root .jb-case-link{margin-top:26px;display:inline-flex;align-items:center;gap:7px;color:#fff;font-weight:600;font-size:.94rem;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:3px;}

/* =====================================================================
   BLOCK 9 — TESTIMONIAL  (quote text is a PLACEHOLDER — see note)
   ===================================================================== */
.jb-root .jb-quote-wrap{max-width:880px;margin:0 auto;text-align:center;}
.jb-root .jb-qmark{font-family:var(--mono);font-size:3rem;color:var(--violet-tint-2);line-height:.6;}
.jb-root .jb-quote{font-size:clamp(1.3rem,2.6vw,1.8rem);font-weight:600;line-height:1.4;letter-spacing:-.01em;margin-top:14px;color:var(--ink);}
/* visual marker so a placeholder can never be mistaken for verified copy */
.jb-root .jb-placeholder{outline:2px dashed var(--violet);outline-offset:6px;border-radius:6px;background:var(--violet-tint);color:var(--violet-700);padding:.15em .35em;font-style:italic;}
.jb-root .jb-attrib{margin-top:26px;font-weight:600;color:var(--ink);}
.jb-root .jb-attrib span{display:block;font-weight:500;color:var(--grey);font-size:.9rem;margin-top:2px;}

/* =====================================================================
   BLOCK 10 — RESOURCE CARDS
   ===================================================================== */
.jb-root .jb-res{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:46px;}
.jb-root .jb-rescard{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.jb-root .jb-rescard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--violet-tint-2);}
.jb-root .jb-resimg{height:128px;background:linear-gradient(135deg,var(--violet) 0%,#7B3CFF 100%);position:relative;display:grid;place-items:center;}
.jb-root .jb-rescard:nth-child(2) .jb-resimg{background:linear-gradient(135deg,#1A1330,#352766);}
.jb-root .jb-rescard:nth-child(3) .jb-resimg{background:linear-gradient(135deg,#3D00CC,#9A6BFF);}
.jb-root .jb-resimg svg{width:42px;height:42px;color:rgba(255,255,255,.92);}
.jb-root .jb-resbody{padding:22px;display:flex;flex-direction:column;flex:1;}
.jb-root .jb-restag{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--violet);}
.jb-root .jb-rescard h3{font-size:1.18rem;margin-top:10px;}
.jb-root .jb-rescard p{color:var(--grey);font-size:.92rem;margin-top:9px;flex:1;}
.jb-root .jb-reslink{margin-top:16px;font-weight:600;color:var(--violet);font-size:.9rem;display:inline-flex;gap:6px;align-items:center;}

/* =====================================================================
   BLOCK 11 — CTA BAND
   ===================================================================== */
.jb-root .jb-ctaband{background:var(--violet);border-radius:24px;padding:clamp(40px,6vw,72px);text-align:center;color:#fff;position:relative;overflow:hidden;}
.jb-root .jb-ctaband::before{content:"";position:absolute;inset:0;background:radial-gradient(40% 80% at 15% 20%,rgba(255,255,255,.16),transparent 60%),radial-gradient(40% 80% at 85% 90%,rgba(0,0,0,.18),transparent 60%);}
.jb-root .jb-ctaband>*{position:relative;z-index:1;}
.jb-root .jb-ctaband h2{font-size:clamp(1.8rem,3.6vw,2.7rem);color:#fff;}
.jb-root .jb-ctaband p{color:rgba(255,255,255,.85);margin-top:16px;font-size:1.08rem;max-width:54ch;margin-left:auto;margin-right:auto;}
.jb-root .jb-ctaband .jb-cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px;}
.jb-root .jb-ctaband .jb-cta-micro{margin-top:18px;font-family:var(--mono);font-size:.76rem;color:rgba(255,255,255,.75);letter-spacing:.02em;}

/* =====================================================================
   BLOCK 12 — FOOTER
   ===================================================================== */
.jb-root .jb-footer{background:var(--dark);color:rgba(255,255,255,.66);margin-top:0;}
.jb-root .jb-footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding:64px 0 44px;}
.jb-root .jb-footer .jb-logo{color:#fff;margin-bottom:16px;}
.jb-root .jb-footer .jb-logo .jb-logo-fallback{color:#fff;}
.jb-root .jb-footer-about{font-size:.92rem;max-width:34ch;}
.jb-root .jb-footer-contact{margin-top:16px;font-size:.9rem;}
.jb-root .jb-footer-contact a{color:#B79BFF;font-weight:600;}
.jb-root .jb-fcol h4{color:#fff;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;font-family:var(--mono);font-weight:600;margin-bottom:16px;}
.jb-root .jb-fcol a{display:block;padding:6px 0;font-size:.92rem;color:rgba(255,255,255,.66);transition:color .15s;}
.jb-root .jb-fcol a:hover{color:#fff;}
.jb-root .jb-footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:.84rem;}
.jb-root .jb-footer-langs{display:flex;gap:14px;font-family:var(--mono);font-size:.78rem;}
.jb-root .jb-footer-langs a:hover{color:#fff;}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media(max-width:980px){
  .jb-root .jb-hero-grid,.jb-root .jb-split,.jb-root .jb-case-grid,.jb-root .jb-tabpanel-inner{grid-template-columns:1fr;gap:36px;}
  .jb-root .jb-pillars,.jb-root .jb-res{grid-template-columns:1fr;}
  .jb-root .jb-stats{grid-template-columns:repeat(3,1fr);gap:24px 8px;}
  .jb-root .jb-stat:nth-child(4)::before,.jb-root .jb-stat:nth-child(5)::before{display:none;}
  .jb-root .jb-proc{grid-template-columns:repeat(2,1fr);gap:30px 0;}
  .jb-root .jb-menu,.jb-root .jb-lang{display:none;}
}
@media(max-width:560px){
  .jb-root .jb-kpis{grid-template-columns:1fr 1fr;}
  .jb-root .jb-case-metrics{grid-template-columns:1fr 1fr;}
  .jb-root .jb-stats{grid-template-columns:1fr 1fr;}
  .jb-root .jb-footer-top{grid-template-columns:1fr 1fr;}
  .jb-root .jb-proc{grid-template-columns:1fr;}
  .jb-root .jb-step + .jb-step::before{display:none;}
}
@media(prefers-reduced-motion:reduce){
  .jb-root *{animation:none!important;}
  .jb-root .jb-spark{stroke-dashoffset:0;}
  .jb-root .jb-rise{opacity:1;}
}

/* =====================================================================
   INNER PAGE BLOCKS
   ===================================================================== */
/* Inner-page hero (simpler than Home hero) */
.jb-root .jb-page-hero{position:relative;overflow:hidden;padding:clamp(60px,10vw,120px) 0 clamp(48px,7vw,80px);text-align:center;}
.jb-root .jb-page-hero::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(60% 60% at 50% 0%,rgba(76,0,255,.08),transparent 60%);}
.jb-root .jb-page-hero .jb-wrap{position:relative;z-index:1;}
.jb-root .jb-page-hero h1{font-size:clamp(2rem,4.5vw,3.4rem);font-weight:800;line-height:1.08;letter-spacing:-.02em;}
.jb-root .jb-page-hero h1 em{font-style:normal;color:var(--violet);position:relative;}
.jb-root .jb-page-hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.14em;background:var(--violet-tint-2);z-index:-1;border-radius:2px;}
.jb-root .jb-page-hero .jb-lead{margin-top:20px;font-size:1.12rem;margin-left:auto;margin-right:auto;}
.jb-root .jb-page-hero .jb-hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:28px;}
/* Content sections */
.jb-root .jb-prose{max-width:72ch;color:var(--ink-soft);font-size:1rem;line-height:1.7;}
.jb-root .jb-prose p + p{margin-top:1em;}
/* Alternating split (even = reversed) */
.jb-root .jb-split--rev{direction:rtl;}.jb-root .jb-split--rev>*{direction:ltr;}
/* Metric highlight row */
.jb-root .jb-highlights{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;margin-top:36px;}
.jb-root .jb-highlight{background:var(--violet-tint);border:1px solid var(--violet-tint-2);border-radius:14px;padding:24px;text-align:center;}
.jb-root .jb-highlight .jb-num{font-family:var(--mono);font-size:clamp(1.8rem,3vw,2.4rem);font-weight:600;color:var(--violet);}
.jb-root .jb-highlight .jb-lab{font-size:.88rem;color:var(--grey);margin-top:6px;}
/* Timeline */
.jb-root .jb-timeline{display:flex;flex-direction:column;gap:0;margin-top:36px;position:relative;padding-left:36px;}
.jb-root .jb-timeline::before{content:"";position:absolute;left:14px;top:8px;bottom:8px;width:2px;background:var(--line);}
.jb-root .jb-tl-item{position:relative;padding:18px 0 18px 0;}
.jb-root .jb-tl-dot{position:absolute;left:-36px;top:22px;width:14px;height:14px;border-radius:50%;background:var(--violet);border:3px solid var(--paper);}
.jb-root .jb-tl-item h3{font-size:1.1rem;}
.jb-root .jb-tl-item p{color:var(--grey);font-size:.94rem;margin-top:6px;}
/* FAQ accordion (CSS-only via <details>) */
.jb-root .jb-faq{margin-top:36px;}
.jb-root .jb-faq details{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;background:var(--white);overflow:hidden;}
.jb-root .jb-faq summary{padding:18px 22px;font-weight:600;font-size:1rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;}
.jb-root .jb-faq summary::-webkit-details-marker{display:none;}
.jb-root .jb-faq summary::after{content:"+";font-family:var(--mono);font-size:1.2rem;color:var(--violet);transition:transform .2s;}
.jb-root .jb-faq details[open] summary::after{content:"−";}
.jb-root .jb-faq details[open] summary{border-bottom:1px solid var(--line);}
.jb-root .jb-faq .jb-faq-body{padding:18px 22px;color:var(--grey);font-size:.96rem;line-height:1.6;}
/* Pill tags (use-case/industry) */
.jb-root .jb-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.jb-root .jb-tag{font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--violet);background:var(--violet-tint);border:1px solid var(--violet-tint-2);border-radius:999px;padding:5px 14px;}
/* Contact form (HTML form, no JS) */
.jb-root .jb-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px;}
.jb-root .jb-form-group{display:flex;flex-direction:column;gap:6px;}
.jb-root .jb-form-group.full{grid-column:1/-1;}
.jb-root .jb-form-label{font-size:.86rem;font-weight:600;color:var(--ink-soft);}
.jb-root .jb-form-input,.jb-root .jb-form-select,.jb-root .jb-form-textarea{padding:.8em 1em;border:1.5px solid var(--line);border-radius:12px;font-family:var(--font);font-size:.94rem;color:var(--ink);outline:none;transition:border-color .15s;background:var(--white);}
.jb-root .jb-form-input:focus,.jb-root .jb-form-select:focus,.jb-root .jb-form-textarea:focus{border-color:var(--violet);}
.jb-root .jb-form-textarea{min-height:120px;resize:vertical;}

/* ===== BLOCK 13 — GATED CONTENT (lead gen) ===== */
.jb-root .jb-gate{background:var(--white);border:1px solid var(--line);border-radius:20px;overflow:hidden;position:relative;}
.jb-root .jb-gate-preview{padding:34px;position:relative;}
.jb-root .jb-gate-preview::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70%;background:linear-gradient(transparent,var(--white));pointer-events:none;}
.jb-root .jb-gate-blur{filter:blur(3px);opacity:.6;pointer-events:none;user-select:none;}
.jb-root .jb-gate-lock{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;text-align:center;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:36px 40px;box-shadow:var(--shadow-lg);max-width:440px;width:90%;}
.jb-root .jb-gate-lock .jb-ico{margin:0 auto 18px;}
.jb-root .jb-gate-lock h3{font-size:1.3rem;}
.jb-root .jb-gate-lock p{color:var(--grey);font-size:.94rem;margin-top:10px;}
.jb-root .jb-gate-form{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap;}
.jb-root .jb-gate-input{flex:1;min-width:200px;padding:.8em 1em;border:1.5px solid var(--line);border-radius:999px;font-family:var(--font);font-size:.92rem;color:var(--ink);outline:none;transition:border-color .15s;}
.jb-root .jb-gate-input:focus{border-color:var(--violet);}
.jb-root .jb-gate-input::placeholder{color:var(--grey);}
.jb-root .jb-gate-micro{margin-top:12px;font-size:.78rem;color:var(--grey);}
/* Gated resource cards with lock badge */
.jb-root .jb-gated-badge{position:absolute;top:14px;right:14px;background:var(--white);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-family:var(--mono);font-size:.66rem;font-weight:600;color:var(--violet);display:inline-flex;align-items:center;gap:5px;z-index:2;}
.jb-root .jb-gated-badge svg{width:12px;height:12px;}

/* =====================================================================
   RESPONSIVE — INNER PAGES (supplements Home responsive rules above)
   ===================================================================== */
@media(max-width:980px){
  .jb-root .jb-split,.jb-root .jb-split--rev,.jb-root .jb-case-grid{grid-template-columns:1fr;gap:36px;}
  .jb-root .jb-split--rev{direction:ltr;}
  .jb-root .jb-res,.jb-root .jb-highlights{grid-template-columns:1fr;}
  .jb-root .jb-stats{grid-template-columns:repeat(3,1fr);gap:24px 8px;}
  .jb-root .jb-proc{grid-template-columns:repeat(2,1fr);gap:30px 0;}
  .jb-root .jb-menu,.jb-root .jb-lang{display:none;}
  .jb-root .jb-form-grid{grid-template-columns:1fr;}
  .jb-root .jb-footer-top{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
  .jb-root .jb-case-metrics{grid-template-columns:1fr 1fr;}
  .jb-root .jb-stats{grid-template-columns:1fr 1fr;}
  .jb-root .jb-footer-top{grid-template-columns:1fr;}
  .jb-root .jb-proc{grid-template-columns:1fr;}
  .jb-root .jb-step + .jb-step::before{display:none;}
}
@media(prefers-reduced-motion:reduce){
  .jb-root *{animation:none!important;}
}