/* =========================================================================
   solutions.css — page-scoped styles for the 8 NEW solutions mega-menu pages:
   /microsoft-365, /google-workspace, /zoho-workplace, /iot-services,
   /data-analytics-services, /software-app-development,
   /business-collaboration, /erp-solutions
   Loaded ONLY by the matching solutions/*.blade.php file. No global side-effects.
   Each page uses its own unique prefix so it cannot bleed into the others:
     .m365-* → Microsoft 365         (blue/cyan)
     .gws-*  → Google Workspace      (multi-color Google)
     .zoh-*  → Zoho Workplace        (red/orange)
     .iotp-* → IoT Services          (teal/cyan)
     .anl-*  → Data Analytics        (violet/pink)
     .sdv-*  → Software & App Dev    (indigo/violet)
     .clb-*  → Business Collaboration (sky/emerald)
     .erpb-* → ERP Solutions         (indigo/purple)
   ========================================================================= */

/* ----------------------------------------------------------------
   COMMON PRIMITIVES — shared by all 8 pages
   ---------------------------------------------------------------- */
.sol-page { position: relative; }

.sol-counter-grid {
    display: grid; gap: 18px;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 32px;
}
.sol-counter {
    border-radius: 18px; padding: 26px 22px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(11,16,32,0.05);
    border: 1px solid rgba(11,16,32,0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sol-counter:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -10px rgba(11,16,32,0.12); }
.sol-counter__num {
    font-size: 40px; font-weight: 800; line-height: 1;
    background-clip: text; -webkit-background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
}
.sol-counter__label {
    font-size: 14px; font-weight: 600; color: #4b5568; margin-top: 8px;
}

.sol-bottom-cta {
    border-radius: 20px; padding: 24px 32px;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    margin: 30px 0 60px;
    box-shadow: 0 18px 40px -16px rgba(11,16,32,0.18);
    flex-wrap: wrap;
}
.sol-bottom-cta__text { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 280px; }
.sol-bottom-cta__icon {
    width: 52px; height: 52px; border-radius: 14px;
    display: grid; place-items: center; color: #fff; font-size: 22px;
    flex: 0 0 auto;
}
.sol-bottom-cta__title { font-size: 20px; font-weight: 800; color: #0b1020; margin: 0; }
.sol-bottom-cta__sub { font-size: 14px; color: #4b5568; margin: 4px 0 0; }
.sol-bottom-cta__actions { display: flex; gap: 10px; flex-wrap: wrap; }

.sol-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 24px; border-radius: 10px;
    font-weight: 700; font-size: 15px; text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    border: 0; cursor: pointer;
}
.sol-btn-primary { color: #fff; }
.sol-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(0,0,0,0.25); }
.sol-btn-ghost { background: #fff; border: 1.5px solid #e5e7eb; color: #0b1020; }
.sol-btn-ghost:hover { border-color: #0b1020; }

.sol-feature-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px;
}
.sol-feature-card {
    background: #fff; border: 1px solid #e7eaf0; border-radius: 16px;
    padding: 26px 22px; transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sol-feature-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -10px rgba(11,16,32,0.15); }
.sol-feature-card__icon {
    width: 48px; height: 48px; border-radius: 12px;
    display: grid; place-items: center; color: #fff; font-size: 20px; margin-bottom: 14px;
}
.sol-feature-card__title { font-size: 17px; font-weight: 700; color: #0b1020; margin: 0 0 6px; }
.sol-feature-card__desc { font-size: 14px; color: #4b5568; line-height: 1.6; margin: 0; }

.sol-two-col {
    display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center;
}
.sol-two-col__visual {
    border-radius: 22px; overflow: hidden;
    box-shadow: 0 22px 50px -18px rgba(11,16,32,0.28);
}
.sol-two-col__visual img { width: 100%; display: block; }
.sol-checklist { list-style: none; padding: 0; margin: 18px 0 0; }
.sol-checklist li {
    position: relative; padding: 6px 0 6px 32px; color: #374151; font-size: 15px;
}
.sol-checklist li::before {
    content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900;
    position: absolute; left: 0; top: 8px;
    font-size: 14px;
}

@media (max-width: 900px) {
    .sol-counter-grid { grid-template-columns: repeat(2, 1fr); }
    .sol-feature-grid { grid-template-columns: 1fr; }
    .sol-two-col { grid-template-columns: 1fr; gap: 28px; }
    .sol-bottom-cta { flex-direction: column; align-items: flex-start; }
    .sol-bottom-cta__actions { width: 100%; }
    .sol-bottom-cta__actions .sol-btn { flex: 1; justify-content: center; }
}
@media (max-width: 480px) {
    .sol-counter-grid { grid-template-columns: 1fr; }
}

/* ========================================================================
   1) MICROSOFT 365 — .m365-*   (blue #0078D4 → cyan #00BCF2)
   ======================================================================== */
.m365-counter .sol-counter__num { background-image: linear-gradient(90deg, #0078D4, #00BCF2); }
.m365-feature-card__icon { background: linear-gradient(135deg, #0078D4, #00BCF2); }
.m365-checklist li::before { color: #0078D4; }
.m365-cta {
    background: linear-gradient(135deg, #0078D4, #00BCF2);
    color: #fff; border-radius: 20px; padding: 28px 32px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap; box-shadow: 0 18px 40px -16px rgba(0,120,212,0.45);
}
.m365-cta__btn {
    background: linear-gradient(135deg, #00BCF2, #0078D4);
    color: #fff;
    box-shadow: 0 8px 18px -6px rgba(0,120,212,0.55);
}
.m365-cta__btn:hover {
    background: linear-gradient(135deg, #0078D4, #005A9E);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -8px rgba(0,120,212,0.65);
}
.m365-cta__btn--ghost {
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.55);
    color: #fff;
}
.m365-cta__btn--ghost:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}
.m365-cta__btn--ghost:hover { background: rgba(255,255,255,0.12); }

/* App grid (Microsoft 365 apps) */
.m365-apps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 32px; }
.m365-app {
    background: #fff; border: 1px solid #e7eaf0; border-radius: 14px;
    padding: 22px 10px; text-align: center; transition: all 0.25s ease;
}
.m365-app:hover { background: linear-gradient(135deg, #0078D4, #00BCF2); transform: translateY(-3px); border-color: transparent; }
.m365-app__icon { font-size: 28px; color: #0078D4; margin-bottom: 8px; }
.m365-app:hover .m365-app__icon { color: #fff; }
.m365-app__name { font-size: 12px; font-weight: 700; color: #0b1020; }
.m365-app:hover .m365-app__name { color: #fff; }

@media (max-width: 900px) {
    .m365-apps { grid-template-columns: repeat(3, 1fr); }
}

/* ========================================================================
   2) GOOGLE WORKSPACE — .gws-*   (blue #1A73E8 → green #34A853)
   ======================================================================== */
.gws-counter .sol-counter__num { background-image: linear-gradient(90deg, #1A73E8, #34A853); }
.gws-feature-card__icon { background: linear-gradient(135deg, #1A73E8, #34A853); }
.gws-checklist li::before { color: #1A73E8; }
.gws-cta {
    background: linear-gradient(135deg, #1A73E8, #34A853);
    color: #fff; border-radius: 20px; padding: 28px 32px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap; box-shadow: 0 18px 40px -16px rgba(26,115,232,0.45);
}
.gws-cta__btn {
    background: linear-gradient(135deg, #34A853, #1A73E8);
    color: #fff;
    box-shadow: 0 8px 18px -6px rgba(26,115,232,0.55);
}
.gws-cta__btn:hover {
    background: linear-gradient(135deg, #1A73E8, #1557B0);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -8px rgba(26,115,232,0.65);
}
.gws-cta__btn--ghost {
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.55);
    color: #fff;
}
.gws-cta__btn--ghost:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}
.gws-cta__btn--ghost:hover { background: rgba(255,255,255,0.12); }

/* Plan comparison table */
.gws-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 32px; }
.gws-plan {
    background: #fff; border: 1px solid #e7eaf0; border-radius: 18px;
    padding: 28px 26px; position: relative; transition: all 0.25s ease;
}
.gws-plan:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -10px rgba(26,115,232,0.25); }
.gws-plan--featured { background: linear-gradient(180deg, #1A73E8, #34A853); color: #fff; border-color: transparent; }
.gws-plan__name { font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #1A73E8; }
.gws-plan--featured .gws-plan__name { color: #fff; }
.gws-plan__price { font-size: 32px; font-weight: 800; color: #0b1020; margin: 8px 0; }
.gws-plan--featured .gws-plan__price { color: #fff; }
.gws-plan__price small { font-size: 14px; color: #6b7280; font-weight: 600; }
.gws-plan--featured .gws-plan__price small { color: rgba(255,255,255,0.8); }
.gws-plan__list { list-style: none; padding: 0; margin: 16px 0 22px; border-top: 1px solid #eef2f0; padding-top: 14px; font-size: 14px; color: #4b5568; }
.gws-plan--featured .gws-plan__list { border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.95); }
.gws-plan__list li { padding: 5px 0 5px 22px; position: relative; }
.gws-plan__list li::before { content: "✓"; color: #1A73E8; position: absolute; left: 0; font-weight: 800; }
.gws-plan--featured .gws-plan__list li::before { color: #fff; }
.gws-plan__cta { display: block; text-align: center; padding: 12px 20px; border-radius: 10px; background: #1A73E8; color: #fff; font-weight: 700; text-decoration: none; }
.gws-plan__cta:hover { background: #1557B0; }
.gws-plan--featured .gws-plan__cta { background: #fff; color: #1A73E8; }
.gws-plan--featured .gws-plan__cta:hover { background: #f3f4f6; }

@media (max-width: 900px) {
    .gws-plans { grid-template-columns: 1fr; }
}

/* ========================================================================
   3) ZOHO WORKPLACE — .zoh-*   (red #E42527 → orange #FF8A00)
   ======================================================================== */
.zoh-counter .sol-counter__num { background-image: linear-gradient(90deg, #E42527, #FF8A00); }
.zoh-feature-card__icon { background: linear-gradient(135deg, #E42527, #FF8A00); }
.zoh-checklist li::before { color: #E42527; }
.zoh-cta {
    background: linear-gradient(135deg, #E42527, #FF8A00);
    color: #fff; border-radius: 20px; padding: 28px 32px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap; box-shadow: 0 18px 40px -16px rgba(228,37,39,0.45);
}
.zoh-cta__btn {
    background: linear-gradient(135deg, #FF8A00, #E42527);
    color: #fff;
    box-shadow: 0 8px 18px -6px rgba(228,37,39,0.55);
}
.zoh-cta__btn:hover {
    background: linear-gradient(135deg, #E42527, #B81B1D);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -8px rgba(228,37,39,0.65);
}
.zoh-cta__btn--ghost {
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.55);
    color: #fff;
}
.zoh-cta__btn--ghost:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}
.zoh-cta__btn--ghost:hover { background: rgba(255,255,255,0.12); }

/* Zoho stack tabs */
.zoh-stack { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 32px; }
.zoh-tab {
    background: #fff; border: 1px solid #e7eaf0; border-radius: 14px;
    padding: 20px 22px; display: flex; align-items: center; gap: 14px;
    transition: all 0.25s ease;
}
.zoh-tab:hover { border-color: #E42527; transform: translateX(4px); box-shadow: 0 12px 24px -10px rgba(228,37,39,0.20); }
.zoh-tab__icon { width: 44px; height: 44px; border-radius: 10px; background: rgba(228,37,39,0.10); color: #E42527; display: grid; place-items: center; font-size: 18px; flex: 0 0 auto; }
.zoh-tab__title { font-size: 16px; font-weight: 700; color: #0b1020; margin: 0; }
.zoh-tab__desc { font-size: 13px; color: #4b5568; margin: 2px 0 0; }

@media (max-width: 900px) {
    .zoh-stack { grid-template-columns: 1fr; }
}

/* ========================================================================
   4) IOT SERVICES — .iotp-*   (teal #0F766E → cyan #06B6D4)
   ======================================================================== */
.iotp-counter .sol-counter__num { background-image: linear-gradient(90deg, #0F766E, #06B6D4); }
.iotp-feature-card__icon { background: linear-gradient(135deg, #0F766E, #06B6D4); }
.iotp-checklist li::before { color: #0F766E; }
.iotp-cta {
    background: linear-gradient(135deg, #0F766E, #06B6D4);
    color: #fff; border-radius: 20px; padding: 28px 32px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap; box-shadow: 0 18px 40px -16px rgba(15,118,110,0.45);
}
.iotp-cta__btn {
    background: linear-gradient(135deg, #06B6D4, #0F766E);
    color: #fff;
    box-shadow: 0 8px 18px -6px rgba(15,118,110,0.55);
}
.iotp-cta__btn:hover {
    background: linear-gradient(135deg, #0F766E, #0B5A55);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -8px rgba(15,118,110,0.65);
}
.iotp-cta__btn--ghost {
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.55);
    color: #fff;
}
.iotp-cta__btn--ghost:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}
.iotp-cta__btn--ghost:hover { background: rgba(255,255,255,0.12); }

/* IoT layers (4-tier architecture) */
.iotp-layers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 32px; }
.iotp-layer {
    background: #fff; border: 1px solid #e7eaf0; border-radius: 14px;
    padding: 22px 18px; text-align: center; position: relative;
    transition: all 0.25s ease;
}
.iotp-layer::after { content: "\f061"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; right: -10px; top: 50%; transform: translateY(-50%); color: #06B6D4; font-size: 14px; z-index: 1; }
.iotp-layer:last-child::after { display: none; }
.iotp-layer:hover { transform: translateY(-4px); box-shadow: 0 14px 28px -10px rgba(15,118,110,0.30); border-color: #06B6D4; }
.iotp-layer__icon { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, #0F766E, #06B6D4); color: #fff; display: grid; place-items: center; font-size: 20px; margin: 0 auto 10px; }
.iotp-layer__name { font-size: 14px; font-weight: 800; color: #0b1020; margin: 0; }
.iotp-layer__desc { font-size: 12px; color: #4b5568; margin: 4px 0 0; }

@media (max-width: 900px) {
    .iotp-layers { grid-template-columns: 1fr; gap: 20px; }
    .iotp-layer::after { display: none; }
}

/* ========================================================================
   5) DATA ANALYTICS — .anl-*   (violet #7C3AED → pink #EC4899)
   ======================================================================== */
.anl-counter .sol-counter__num { background-image: linear-gradient(90deg, #7C3AED, #EC4899); }
.anl-feature-card__icon { background: linear-gradient(135deg, #7C3AED, #EC4899); }
.anl-checklist li::before { color: #7C3AED; }
.anl-cta {
    background: linear-gradient(135deg, #7C3AED, #EC4899);
    color: #fff; border-radius: 20px; padding: 28px 32px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap; box-shadow: 0 18px 40px -16px rgba(124,58,237,0.45);
}
.anl-cta__btn {
    background: linear-gradient(135deg, #EC4899, #7C3AED);
    color: #fff;
    box-shadow: 0 8px 18px -6px rgba(124,58,237,0.55);
}
.anl-cta__btn:hover {
    background: linear-gradient(135deg, #7C3AED, #5B21B6);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -8px rgba(124,58,237,0.65);
}
.anl-cta__btn--ghost {
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.55);
    color: #fff;
}
.anl-cta__btn--ghost:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}
.anl-cta__btn--ghost:hover { background: rgba(255,255,255,0.12); }

/* Analytics chart mockup */
.anl-dash {
    background: #0b1020; border-radius: 18px; padding: 22px;
    box-shadow: 0 22px 50px -18px rgba(124,58,237,0.35);
    color: #d1d5db; font-family: 'Consolas', 'Monaco', monospace; font-size: 13px;
}
.anl-dash__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid #1f2937; margin-bottom: 14px; }
.anl-dash__title { color: #fff; font-size: 15px; font-weight: 700; margin: 0; }
.anl-dash__pill { background: linear-gradient(90deg, #7C3AED, #EC4899); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.anl-dash__row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px dashed #1f2937; align-items: center; }
.anl-dash__row:last-child { border-bottom: 0; }
.anl-dash__row strong { color: #fff; font-weight: 700; }
.anl-dash__row .up { color: #10b981; font-weight: 700; }
.anl-dash__row .down { color: #ef4444; font-weight: 700; }
.anl-dash__chart { background: linear-gradient(180deg, rgba(124,58,237,0.10), transparent); border-radius: 10px; height: 90px; display: flex; align-items: flex-end; gap: 6px; padding: 8px; margin-top: 8px; }
.anl-dash__bar { flex: 1; background: linear-gradient(180deg, #C084FC, #7C3AED); border-radius: 4px 4px 0 0; min-height: 12px; }

/* ========================================================================
   6) SOFTWARE & APP DEV — .sdv-*   (indigo #1E40AF → violet #7C3AED)
   ======================================================================== */
.sdv-counter .sol-counter__num { background-image: linear-gradient(90deg, #1E40AF, #7C3AED); }
.sdv-feature-card__icon { background: linear-gradient(135deg, #1E40AF, #7C3AED); }
.sdv-checklist li::before { color: #1E40AF; }
.sdv-cta {
    background: linear-gradient(135deg, #1E40AF, #7C3AED);
    color: #fff; border-radius: 20px; padding: 28px 32px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap; box-shadow: 0 18px 40px -16px rgba(30,64,175,0.45);
}
.sdv-cta__btn {
    background: linear-gradient(135deg, #7C3AED, #1E40AF);
    color: #fff;
    box-shadow: 0 8px 18px -6px rgba(30,64,175,0.55);
}
.sdv-cta__btn:hover {
    background: linear-gradient(135deg, #1E40AF, #1E3A8A);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -8px rgba(30,64,175,0.65);
}
.sdv-cta__btn--ghost {
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.55);
    color: #fff;
}
.sdv-cta__btn--ghost:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}
.sdv-cta__btn--ghost:hover { background: rgba(255,255,255,0.12); }

/* Code block terminal */
.sdv-code {
    background: #0b1020; border-radius: 14px; padding: 18px 22px;
    box-shadow: 0 22px 50px -18px rgba(30,64,175,0.35);
    font-family: 'Consolas', 'Monaco', monospace;
    color: #d1d5db; font-size: 13px; line-height: 1.7;
    border: 1px solid #1f2937;
}
.sdv-code__bar { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #1f2937; }
.sdv-code__dot { width: 12px; height: 12px; border-radius: 50%; }
.sdv-code__dot--r { background: #ef4444; } .sdv-code__dot--y { background: #f59e0b; } .sdv-code__dot--g { background: #10b981; }
.sdv-code__line { white-space: pre-wrap; }
.sdv-code__line--key { color: #c084fc; }
.sdv-code__line--val { color: #93c5fd; }
.sdv-code__line--com { color: #6b7280; font-style: italic; }
.sdv-code__line--str { color: #86efac; }

/* ========================================================================
   7) BUSINESS COLLABORATION — .clb-*   (sky #0EA5E9 → emerald #10B981)
   ======================================================================== */
.clb-counter .sol-counter__num { background-image: linear-gradient(90deg, #0EA5E9, #10B981); }
.clb-feature-card__icon { background: linear-gradient(135deg, #0EA5E9, #10B981); }
.clb-checklist li::before { color: #0EA5E9; }
.clb-cta {
    background: linear-gradient(135deg, #0EA5E9, #10B981);
    color: #fff; border-radius: 20px; padding: 28px 32px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap; box-shadow: 0 18px 40px -16px rgba(14,165,233,0.45);
}
.clb-cta__btn {
    background: linear-gradient(135deg, #10B981, #0EA5E9);
    color: #fff;
    box-shadow: 0 8px 18px -6px rgba(14,165,233,0.55);
}
.clb-cta__btn:hover {
    background: linear-gradient(135deg, #0EA5E9, #0284C7);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -8px rgba(14,165,233,0.65);
}
.clb-cta__btn--ghost {
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.55);
    color: #fff;
}
.clb-cta__btn--ghost:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}
.clb-cta__btn--ghost:hover { background: rgba(255,255,255,0.12); }

/* Tools grid */
.clb-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 32px; }
.clb-tool {
    background: #fff; border: 1px solid #e7eaf0; border-radius: 14px;
    padding: 22px 18px; text-align: center; transition: all 0.25s ease;
}
.clb-tool:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(14,165,233,0.25); border-color: #0EA5E9; }
.clb-tool__icon { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, #0EA5E9, #10B981); color: #fff; display: grid; place-items: center; font-size: 20px; margin: 0 auto 10px; }
.clb-tool__name { font-size: 15px; font-weight: 700; color: #0b1020; margin: 0; }
.clb-tool__desc { font-size: 12px; color: #4b5568; margin: 4px 0 0; }

@media (max-width: 900px) {
    .clb-tools { grid-template-columns: repeat(2, 1fr); }
}

/* ========================================================================
   8) ERP SOLUTIONS — .erpb-*   (indigo #312E81 → purple #9333EA)
   ======================================================================== */
.erpb-counter .sol-counter__num { background-image: linear-gradient(90deg, #312E81, #9333EA); }
.erpb-feature-card__icon { background: linear-gradient(135deg, #312E81, #9333EA); }
.erpb-checklist li::before { color: #312E81; }
.erpb-cta {
    background: linear-gradient(135deg, #312E81, #9333EA);
    color: #fff; border-radius: 20px; padding: 28px 32px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap; box-shadow: 0 18px 40px -16px rgba(49,46,129,0.45);
}
.erpb-cta__btn {
    background: linear-gradient(135deg, #9333EA, #312E81);
    color: #fff;
    box-shadow: 0 8px 18px -6px rgba(147,51,234,0.55);
}
.erpb-cta__btn:hover {
    background: linear-gradient(135deg, #312E81, #1E1B4B);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -8px rgba(147,51,234,0.65);
}
.erpb-cta__btn--ghost {
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.55);
    color: #fff;
}
.erpb-cta__btn--ghost:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}
.erpb-cta__btn--ghost:hover { background: rgba(255,255,255,0.12); }

/* ERP modules accordion */
.erpb-modules { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 32px; }
.erpb-module {
    background: #fff; border: 1px solid #e7eaf0; border-radius: 14px;
    padding: 18px 22px; display: flex; align-items: center; gap: 14px;
    transition: all 0.25s ease;
}
.erpb-module:hover { border-color: #9333EA; transform: translateX(4px); box-shadow: 0 10px 22px -8px rgba(147,51,234,0.20); }
.erpb-module__icon { width: 44px; height: 44px; border-radius: 10px; background: linear-gradient(135deg, #312E81, #9333EA); color: #fff; display: grid; place-items: center; font-size: 18px; flex: 0 0 auto; }
.erpb-module__name { font-size: 15px; font-weight: 700; color: #0b1020; margin: 0; }
.erpb-module__desc { font-size: 13px; color: #4b5568; margin: 2px 0 0; }

@media (max-width: 900px) {
    .erpb-modules { grid-template-columns: 1fr; }
}
