/* service_business_intelligence.html — extracted internal + inline styles */

:root { --bi-blue:#2563eb; --bi-cyan:#06b6d4; --bi-amber:#f59e0b; --bi-violet:#8b5cf6; --bi-ink:#0f2444; }

/* Live analytics report card */
.bi-report { background:#fff; border-radius:1.3rem; box-shadow:0 2.4rem 5rem rgba(15,23,42,.18); overflow:hidden; }
.bi-report__top { display:flex; align-items:center; justify-content:space-between; padding:.9rem 1.1rem;
    background:linear-gradient(120deg,#123a8f,#2563eb); color:#fff; }
.bi-report__top h6 { margin:0; font-size:.86rem; font-weight:700; }
.bi-live { display:inline-flex; align-items:center; gap:.4rem; font-size:.66rem; font-weight:700; color:#bbf7d0; }
.bi-live .dot { width:.45rem; height:.45rem; border-radius:50%; background:#4ade80;
    box-shadow:0 0 0 0 rgba(74,222,128,.7); animation:bipulse 1.6s infinite; }
@keyframes bipulse { 70%{box-shadow:0 0 0 .4rem rgba(74,222,128,0);} 100%{box-shadow:0 0 0 0 rgba(74,222,128,0);} }
.bi-report__body { padding:1.1rem 1.15rem; }
.bi-kpi { background:#f5f8fd; border-radius:.7rem; padding:.55rem .65rem; }
.bi-kpi small { color:#8494b0; font-size:.6rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; }
.bi-kpi h6 { margin:.1rem 0 0; font-size:1.02rem; font-weight:800; color:var(--bi-ink); }
.bi-kpi .up { color:#16a34a; font-size:.6rem; font-weight:700; }
.bi-donut { width:6rem; height:6rem; flex:0 0 auto; aspect-ratio:1; border-radius:50%; display:grid; place-items:center;
    background:conic-gradient(var(--bi-blue) 0 42%, var(--bi-cyan) 42% 68%, var(--bi-amber) 68% 86%, var(--bi-violet) 86% 100%); }
.bi-donut__hole { width:62%; height:62%; background:#fff; border-radius:50%; display:grid; place-items:center; text-align:center; }
.bi-legend span { display:flex; align-items:center; gap:.4rem; font-size:.7rem; color:#5b6b86; margin-bottom:.28rem; }
.bi-legend i { width:.6rem; height:.6rem; border-radius:2px; display:inline-block; }
.bi-bars { display:flex; align-items:flex-end; gap:.35rem; height:4.6rem; }
.bi-bars span { flex:1; border-radius:.25rem .25rem 0 0; background:linear-gradient(180deg,#60a5fa,#2563eb); }

/* Data flow diagram */
.bi-src, .bi-out { display:flex; align-items:center; gap:.5rem; background:#fff; border:1px solid #e6ebf4;
    border-radius:.7rem; padding:.5rem .7rem; font-weight:600; font-size:.82rem; box-shadow:0 .4rem 1rem rgba(15,23,42,.05);
    margin-bottom:.55rem; }
.bi-src i, .bi-out i { font-size:1rem; }
.bi-hub { border-radius:1.2rem; background:linear-gradient(150deg,#123a8f,#2563eb); color:#fff; text-align:center;
    padding:1.5rem 1rem; box-shadow:0 1.6rem 3.4rem rgba(37,99,235,.34); }
.bi-hub__ring { width:3.2rem; height:3.2rem; border-radius:50%; background:rgba(255,255,255,.16);
    display:grid; place-items:center; margin:0 auto .6rem; font-size:1.3rem; }

/* Feature cards */
.bi-card { background:#fff; border:1px solid #e9edf5; border-radius:1.15rem; height:100%;
    transition:transform .34s ease, box-shadow .34s ease, border-color .34s ease; }
.bi-card:hover { transform:translateY(-.55rem); box-shadow:0 1.7rem 3.3rem rgba(37,99,235,.16); border-color:transparent; }
.bi-card__ic { width:3.4rem; height:3.4rem; border-radius:1rem; display:flex; align-items:center; justify-content:center; }

/* sample dashboard mini cards */
.bi-mini { background:#fff; border:1px solid #e9edf5; border-radius:1rem; padding:1.1rem; height:100%; }
.bi-spark { display:flex; align-items:flex-end; gap:.28rem; height:3rem; }
.bi-spark span { flex:1; border-radius:.2rem .2rem 0 0; }

.bi-chip { display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .95rem; border-radius:2rem; background:#fff;
    box-shadow:0 .4rem 1.1rem rgba(15,23,42,.08); font-weight:600; font-size:.82rem; margin:.28rem; }

.bi-num { font-size:1.05rem; font-weight:800; color:#fff; width:2.9rem; height:2.9rem; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center; box-shadow:0 .7rem 1.5rem rgba(37,99,235,.28); }

/* ---- extracted inline styles ---- */
.gen-1 { top: 9%; left: 3%; }
.gen-2 { bottom: 5%; right: 2%; }
.gen-3 { z-index: 2; }
.gen-4 { bottom: -1.5rem; right: -1rem; width: 92%; height: 90%; z-index: 0 !important; }
.gen-5 { z-index: 1; }
.gen-6 { color:var(--bi-ink); }
.gen-7 { background:var(--bi-blue); }
.gen-8 { background:var(--bi-cyan); }
.gen-9 { background:var(--bi-amber); }
.gen-10 { background:var(--bi-violet); }
.gen-11 { height:40%; }
.gen-12 { height:55%; }
.gen-13 { height:48%; }
.gen-14 { height:66%; }
.gen-15 { height:60%; }
.gen-16 { height:74%; }
.gen-17 { height:82%; }
.gen-18 { height:70%; }
.gen-19 { height:92%; }
.gen-20 { height:100%; }
.gen-21 { top: 4%; left: -1.7rem; z-index: 2; max-width: 11.5rem; }
.gen-22 { bottom: 4%; right: -1.7rem; z-index: 2; max-width: 12rem; }
.gen-23 { z-index: 3; }
.gen-24 { color:#9fb0cc;font-size:1.4rem; }
.gen-25 { color:rgba(255,255,255,.82); }
.gen-26 { height:45%;background:#93c5fd; }
.gen-27 { height:60%;background:#60a5fa; }
.gen-28 { height:52%;background:#3b82f6; }
.gen-29 { height:75%;background:#2563eb; }
.gen-30 { height:68%;background:#1d4ed8; }
.gen-31 { height:92%;background:#1e40af; }
.gen-32 { width:4.4rem;height:4.4rem;background:conic-gradient(#06b6d4 0 64%,#e2e8f0 64% 100%); }
.gen-33 { height:70%;background:#c4b5fd; }
.gen-34 { height:50%;background:#a78bfa; }
.gen-35 { height:82%;background:#8b5cf6; }
.gen-36 { height:60%;background:#7c3aed; }
.gen-37 { height:90%;background:#6d28d9; }
.gen-38 { height:78%;background:#5b21b6; }
.gen-39 { background:linear-gradient(135deg,#60a5fa,#2563eb); }
.gen-40 { background:linear-gradient(135deg,#38bdf8,#0284c7); }
.gen-41 { background:linear-gradient(135deg,#22d3ee,#0891b2); }
.gen-42 { background:linear-gradient(135deg,#a78bfa,#7c3aed); }
.gen-43 { background:linear-gradient(135deg,#fbbf24,#f59e0b); }
.gen-44 { height: 130px; }