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

:root { --sa-indigo:#4f46e5; --sa-indigo2:#6366f1; --sa-ink:#1e2248; }

/* Elegant dashboard mock */
.sa-dash { border-radius:1.3rem; overflow:hidden; background:#fff; display:flex; min-height:20rem;
    box-shadow:0 2.4rem 5rem rgba(30,34,72,.18); }
.sa-dash__side { width:32%; background:linear-gradient(180deg,#5b52e6 0%,#4338ca 100%); padding:1.15rem .85rem; color:#fff; }
.sa-side__brand { display:flex; align-items:center; gap:.45rem; margin-bottom:1.3rem; }
.sa-side__logo { width:1.5rem; height:1.5rem; border-radius:.45rem; background:linear-gradient(135deg,#a5b4fc,#fff); }
.sa-side__item { display:flex; align-items:center; gap:.5rem; padding:.42rem .55rem; border-radius:.5rem; font-size:.72rem;
    color:rgba(255,255,255,.72); margin-bottom:.18rem; }
.sa-side__item.active { background:rgba(255,255,255,.16); color:#fff; font-weight:600; }
.sa-side__ic { width:.7rem; height:.7rem; border-radius:.2rem; background:currentColor; opacity:.85; }
.sa-dash__main { flex:1; background:#f6f7fb; padding:1.1rem 1.15rem; }
.sa-kpi { background:#fff; border-radius:.75rem; padding:.6rem .7rem; box-shadow:0 .5rem 1.2rem rgba(30,34,72,.06); }
.sa-kpi small { color:#98a0bd; font-size:.62rem; font-weight:600; letter-spacing:.02em; text-transform:uppercase; }
.sa-kpi h6 { font-size:1.05rem; margin:.1rem 0 0; font-weight:800; color:var(--sa-ink); }
.sa-up { color:#16a34a; font-size:.62rem; font-weight:700; } .sa-down { color:#16a34a; font-size:.62rem; font-weight:700; }
.sa-chart { display:flex; align-items:flex-end; gap:.34rem; height:4.4rem; margin-top:.2rem; }
.sa-chart span { flex:1; border-radius:.25rem .25rem 0 0; background:linear-gradient(180deg,#818cf8,#4f46e5); opacity:.9; }

/* Feature cards */
.sa-feat { background:#fff; border:1px solid #edeef5; border-radius:1.15rem; height:100%;
    transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.sa-feat:hover { transform:translateY(-.55rem); box-shadow:0 1.8rem 3.4rem rgba(79,70,229,.16); border-color:transparent; }
.sa-feat__ic { width:3.4rem; height:3.4rem; border-radius:1rem; display:flex; align-items:center; justify-content:center; }

/* Pricing tiers */
.sa-plan { background:#fff; border:1px solid #ecedf5; border-radius:1.4rem; padding:2.1rem 1.8rem; height:100%;
    text-align:center; transition:transform .35s ease, box-shadow .35s ease; position:relative; }
.sa-plan:hover { transform:translateY(-.4rem); box-shadow:0 1.6rem 3.2rem rgba(30,34,72,.12); }
.sa-plan--pop { border:0; color:#fff; background:linear-gradient(160deg,#5b52e6,#4338ca); box-shadow:0 2rem 4rem rgba(67,56,202,.34); }
.sa-plan--pop .sa-price, .sa-plan--pop h4, .sa-plan--pop p { color:#fff; }
.sa-plan--pop .sa-plan__li { color:rgba(255,255,255,.9); }
.sa-plan__tag { position:absolute; top:-.85rem; left:50%; transform:translateX(-50%); background:#facc15; color:#1e2248;
    font-size:.68rem; font-weight:800; padding:.28rem .9rem; border-radius:2rem; letter-spacing:.03em; }
.sa-price { font-size:2.7rem; font-weight:800; line-height:1; color:var(--sa-ink); }
.sa-plan__li { display:flex; align-items:center; gap:.55rem; justify-content:flex-start; font-size:.9rem;
    padding:.4rem 0; color:#5b617e; text-align:left; }
.sa-plan__li i { color:#4f46e5; } .sa-plan--pop .sa-plan__li i { color:#c7d2fe; }

/* Multi-tenant diagram */
.sa-tenant { border:1px solid #e7e9f3; border-radius:.85rem; padding:.6rem .8rem; background:#fff; font-weight:600; font-size:.85rem;
    box-shadow:0 .5rem 1.2rem rgba(30,34,72,.06); text-align:center; }
.sa-core { border-radius:1.1rem; background:linear-gradient(150deg,#5b52e6,#4338ca); color:#fff; padding:1.4rem; text-align:center;
    box-shadow:0 1.4rem 3rem rgba(67,56,202,.3); }
.sa-chip { display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .95rem; border-radius:2rem; background:#fff;
    box-shadow:0 .4rem 1.1rem rgba(30,34,72,.08); font-weight:600; font-size:.82rem; margin:.28rem; }

.sa-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(79,70,229,.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(--sa-ink);font-size:.82rem; }
.gen-7 { height:38%; }
.gen-8 { height:52%; }
.gen-9 { height:46%; }
.gen-10 { height:64%; }
.gen-11 { height:58%; }
.gen-12 { height:78%; }
.gen-13 { height:88%; }
.gen-14 { height:100%; }
.gen-15 { top: 5%; left: -1.7rem; z-index: 2; max-width: 11.5rem; }
.gen-16 { bottom: 4%; right: -1.7rem; z-index: 2; max-width: 12rem; }
.gen-17 { z-index: 3; }
.gen-18 { color:rgba(255,255,255,.75); }
.gen-19 { background:#fff;color:#4338ca;font-weight:700; }
.gen-20 { color:#b6bcd6;font-size:1.4rem;line-height:1; }
.gen-21 { color:rgba(255,255,255,.82); }
.gen-22 { background:linear-gradient(135deg,#818cf8,#4f46e5); }
.gen-23 { background:linear-gradient(135deg,#6366f1,#4338ca); }
.gen-24 { background:linear-gradient(135deg,#4f46e5,#4338ca); }
.gen-25 { background:linear-gradient(135deg,#4338ca,#3730a3); }
.gen-26 { background:linear-gradient(135deg,#3730a3,#312e81); }
.gen-27 { height: 130px; }