/* =========================================================
   Smart services grid — index.html "Integrated digital services"
   Self-contained: every rule is scoped to .smart-services so it
   cannot affect the rest of the template.
   ========================================================= */

.smart-services {
    --ss-brand: #2e2a8f;
    --ss-brand-2: #5b4bdb;
    --ss-accent: #00b894;
    --ss-ink: #101132;
    --ss-body: #5a5f7d;
    --ss-line: #e7e8f4;
    --ss-surface: #ffffff;
    --ss-tint: #f5f6fd;
    --ss-radius: 22px;
    --ss-ease: cubic-bezier(.22, .61, .36, 1);

    position: relative;
    padding: 92px 0;
    overflow: hidden;
    background:
        radial-gradient(900px 420px at 12% -12%, rgba(91, 75, 219, .10), transparent 62%),
        radial-gradient(720px 380px at 94% 4%, rgba(0, 184, 148, .10), transparent 64%),
        #ffffff;
}

.smart-services .container {
    position: relative;
    z-index: 1;
}

/* ---------- section heading ---------- */
.ss-head {
    max-width: 820px;
    margin: 0 auto 48px;
    text-align: center;
}

.ss-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(46, 42, 143, .07);
    color: var(--ss-brand);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.ss-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ss-brand-2), var(--ss-accent));
}

.ss-head h2 {
    margin: 18px 0 14px;
    font-size: 40px;
    line-height: 1.22;
    font-weight: 700;
    color: var(--ss-ink);
    letter-spacing: -.015em;
}

.ss-head p {
    margin: 0 auto;
    max-width: 660px;
    font-size: 17px;
    line-height: 1.72;
    color: var(--ss-body);
}

/* ---------- grid ---------- */
.ss-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
}

.ss-card {
    position: relative;
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    padding: 28px 26px 24px;
    background: var(--ss-surface);
    border: 1px solid var(--ss-line);
    border-radius: var(--ss-radius);
    box-shadow: 0 1px 2px rgba(16, 17, 50, .04);
    transition: transform .38s var(--ss-ease), box-shadow .38s var(--ss-ease),
        border-color .38s var(--ss-ease);
}

.ss-card:hover,
.ss-card:focus-within {
    transform: translateY(-5px);
    border-color: rgba(91, 75, 219, .38);
    box-shadow: 0 20px 44px -20px rgba(16, 17, 50, .34);
}

/* feature card */
.ss-card--feature {
    grid-column: span 4;
    grid-row: span 2;
    justify-content: space-between;
    color: #fff;
    border: 0;
    background:
        radial-gradient(120% 90% at 90% 0%, rgba(0, 184, 148, .42), transparent 58%),
        linear-gradient(158deg, #252169 0%, #2e2a8f 46%, #4b3fd1 100%);
    box-shadow: 0 24px 60px -28px rgba(46, 42, 143, .70);
}

.ss-card--feature::after {
    content: "";
    position: absolute;
    inset: auto -40px -60px auto;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    pointer-events: none;
}

.ss-card--feature:hover,
.ss-card--feature:focus-within {
    border-color: transparent;
    box-shadow: 0 30px 70px -28px rgba(46, 42, 143, .80);
}

.ss-card--feature .ss-title {
    color: #fff;
}

.ss-card--feature .ss-copy {
    color: rgba(255, 255, 255, .84);
}

.ss-card--wide {
    grid-column: span 12;
    flex-direction: row;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
}

.ss-card--wide .ss-body {
    flex: 1 1 420px;
    min-width: 260px;
}

/* ---------- card internals ---------- */
.ss-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 18px;
    border-radius: 16px;
    background: linear-gradient(150deg, rgba(91, 75, 219, .10), rgba(0, 184, 148, .10));
    border: 1px solid rgba(91, 75, 219, .14);
    transition: transform .38s var(--ss-ease), background .38s var(--ss-ease);
}

.ss-icon img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.ss-card:hover .ss-icon,
.ss-card:focus-within .ss-icon {
    transform: scale(1.06) rotate(-3deg);
}

.ss-card--feature .ss-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .26);
}

.ss-card--feature .ss-icon img {
    filter: brightness(0) invert(1);
}

.ss-title {
    margin: 0 0 8px;
    font-size: 19px;
    line-height: 1.35;
    font-weight: 600;
    color: var(--ss-ink);
    letter-spacing: -.01em;
}

.ss-card--feature .ss-title {
    font-size: 26px;
    line-height: 1.28;
}

.ss-copy {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.68;
    color: var(--ss-body);
}

/* tech chips */
.ss-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.ss-chips li {
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--ss-tint);
    border: 1px solid rgba(16, 17, 50, .06);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
    color: #43476b;
    transition: background .25s var(--ss-ease), border-color .25s var(--ss-ease);
}

.ss-chips a {
    color: inherit;
    text-decoration: none;
    transition: color .25s var(--ss-ease);
}

.ss-chips li:hover {
    background: #fff;
    border-color: rgba(91, 75, 219, .30);
}

.ss-chips a:hover,
.ss-chips a:focus-visible {
    color: var(--ss-brand-2);
    text-decoration: none;
}

/* light chips inside the gradient feature card */
.ss-chips--light {
    margin-top: 20px;
}

.ss-chips--light li {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .24);
    color: #fff;
}

.ss-chips--light li:hover {
    background: rgba(255, 255, 255, .22);
    border-color: rgba(255, 255, 255, .42);
}

.ss-chips--light a,
.ss-chips--light a:hover,
.ss-chips--light a:focus-visible {
    color: #fff;
}

/* link / CTA */
.ss-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 20px;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--ss-brand);
    text-decoration: none;
    transition: color .3s var(--ss-ease), gap .3s var(--ss-ease);
}

.ss-link i {
    font-size: 11px;
    transition: transform .3s var(--ss-ease);
}

.ss-link:hover,
.ss-link:focus-visible {
    color: var(--ss-brand-2);
    text-decoration: none;
}

.ss-link:hover i,
.ss-link:focus-visible i {
    transform: translateX(4px);
}

.ss-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    padding: 13px 24px;
    border-radius: 999px;
    background: #fff;
    color: var(--ss-brand);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .3s var(--ss-ease), box-shadow .3s var(--ss-ease);
}

.ss-cta i {
    font-size: 11px;
}

.ss-cta:hover,
.ss-cta:focus-visible {
    transform: translateY(-2px);
    color: var(--ss-brand);
    text-decoration: none;
    box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .45);
}

.ss-card--wide .ss-link {
    margin-top: 0;
    padding-top: 0;
}

/* focus ring */
.ss-card a:focus-visible,
.ss-cta:focus-visible {
    outline: 2px solid var(--ss-brand-2);
    outline-offset: 3px;
    border-radius: 8px;
}

/* ---------- responsive ---------- */
@media only screen and (max-width: 1199px) {
    .smart-services {
        padding: 72px 0;
    }

    .ss-head h2 {
        font-size: 34px;
    }

    .ss-card,
    .ss-card--feature {
        grid-column: span 6;
        grid-row: auto;
    }

    .ss-card--wide {
        grid-column: span 12;
    }
}

@media only screen and (max-width: 767px) {
    .smart-services {
        padding: 56px 0;
    }

    .ss-head {
        margin-bottom: 32px;
    }

    .ss-head h2 {
        font-size: 27px;
    }

    .ss-head p {
        font-size: 15.5px;
    }

    .ss-card,
    .ss-card--feature,
    .ss-card--wide {
        grid-column: span 12;
        padding: 24px 22px;
    }

    .ss-card--feature .ss-title {
        font-size: 22px;
    }

    .ss-card--wide {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ---------- dark mode ---------- */
.active-dark .smart-services {
    background:
        radial-gradient(900px 420px at 12% -12%, rgba(91, 75, 219, .22), transparent 62%),
        radial-gradient(720px 380px at 94% 4%, rgba(0, 184, 148, .16), transparent 64%),
        #101010;

    --ss-ink: #f2f3fa;
    --ss-body: #a7abc4;
    --ss-line: #26263a;
    --ss-surface: #17182a;
    --ss-tint: #202136;
}

.active-dark .ss-head p,
.active-dark .ss-copy {
    color: var(--ss-body);
}

.active-dark .ss-eyebrow {
    background: rgba(255, 255, 255, .06);
    color: #b9b2ff;
}

.active-dark .ss-card:not(.ss-card--feature) {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

.active-dark .ss-card:not(.ss-card--feature):hover,
.active-dark .ss-card:not(.ss-card--feature):focus-within {
    box-shadow: 0 22px 48px -22px rgba(0, 0, 0, .85);
}

.active-dark .ss-chips li {
    color: #c9cce0;
    border-color: rgba(255, 255, 255, .08);
}

.active-dark .ss-link {
    color: #b9b2ff;
}

.active-dark .ss-link:hover {
    color: #d7d2ff;
}

.active-dark .ss-icon {
    background: linear-gradient(150deg, rgba(91, 75, 219, .22), rgba(0, 184, 148, .18));
    border-color: rgba(255, 255, 255, .10);
}

.active-dark .ss-icon img {
    filter: brightness(0) invert(1) opacity(.92);
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .ss-card,
    .ss-icon,
    .ss-link,
    .ss-link i,
    .ss-cta {
        transition: none;
    }

    .ss-card:hover,
    .ss-card:focus-within {
        transform: none;
    }

    .ss-card:hover .ss-icon,
    .ss-card:focus-within .ss-icon {
        transform: none;
    }
}