/* ==========================================================================
   Design refresh: readability, home sections, About
   Loaded after style.css. The original theme file is untouched; remove the
   <link> to refresh.css in layouts/header.php to revert everything here.
   ========================================================================== */

/* Base text: 14px was small for body copy */
body {
    font-size: 16px;
    line-height: 1.7;
}

/* Card copy */
.service-item .service-content p {
    font-size: 16px;
    line-height: 1.7;
}

/* Press cards: show up to 3 lines instead of cutting titles mid-sentence */
.blog-card-custom .title {
    height: auto;
    min-height: 84px;
    line-clamp: 3;
    -webkit-line-clamp: 3;
}

/* "Our impact in numbers": the "+" after each number inherited the 14px body size */
.techwix-cta-section-04 .cta-right .counter-item {
    font-family: "Barlow", sans-serif;
    font-size: 48px;
    font-weight: 600;
    line-height: 26px;
    color: #ffffff;
}

.techwix-cta-section-04 .cta-right .counter-item p {
    font-family: "Jost", sans-serif;
    font-size: 13px;
    letter-spacing: .04em;
    line-height: 20px;
    padding-top: 22px;
}

@media only screen and (max-width: 767px) {
    .techwix-cta-section-04 .cta-right .counter-item {
        font-size: 42px;
    }
}

/* Press sidebar banner: the button was sized for the short "Get Started" label */
.sidebar-widget .widget-banner .banner-content .btn {
    padding: 0 22px;
    white-space: nowrap;
}


/* ==========================================================================
   Step 2: Home below the hero + About
   ========================================================================== */

/* ---- CTA band (replaces the small pale box) ---- */
.cta-band-refresh {
    padding: 56px 0 70px;
}

.cta-band-refresh__box {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 48px 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, #086ad8 0%, #2b8efe 55%, #42b9ff 100%);
    box-shadow: 0 24px 50px -24px rgba(8, 106, 216, .65);
}

.cta-band-refresh__box::before,
.cta-band-refresh__box::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .22);
    pointer-events: none;
}

.cta-band-refresh__box::before { width: 420px; height: 420px; right: -120px; top: -230px; }
.cta-band-refresh__box::after  { width: 260px; height: 260px; left: 38%; bottom: -170px; }

.cta-band-refresh__text,
.cta-band-refresh .btn { position: relative; z-index: 1; }

.cta-band-refresh__text h2 {
    color: #fff;
    font-size: 32px;
    line-height: 1.25;
    margin-bottom: 8px;
}

.cta-band-refresh__text p {
    color: rgba(255, 255, 255, .9);
    font-size: 18px;
}

.cta-band-refresh .btn { flex: none; padding: 0 40px; }

@media only screen and (max-width: 991px) {
    .cta-band-refresh__box { flex-direction: column; align-items: flex-start; padding: 36px 28px; }
    .cta-band-refresh__text h2 { font-size: 26px; }
}

/* ---- Technology partners strip ---- */
.techwix-brand-section .brand-title {
    font-family: "Barlow", sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #4c4d56;
}

.techwix-brand-section .single-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 76px;
}

.techwix-brand-section .single-brand img {
    width: 100%;
    max-width: 180px;
    height: auto;
    filter: grayscale(1);
    opacity: .8;
    transition: filter .25s ease, opacity .25s ease, transform .25s ease;
}

.techwix-brand-section .single-brand:hover img,
.techwix-brand-section .single-brand a:focus-visible img {
    filter: none;
    opacity: 1;
    transform: scale(1.05);
}

/* ---- Case study slider: readable titles, no overflow ---- */
.techwix-case-study-section-02 .single-case-study-02 {
    position: relative;
}

.techwix-case-study-section-02 .single-case-study-02::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 62%;
    background: linear-gradient(180deg, rgba(5, 10, 40, 0) 0%, rgba(5, 10, 40, .72) 100%);
    pointer-events: none;
    border-radius: 0 0 12px 12px;
}

.techwix-case-study-section-02 .single-case-study-02 .case-study-content {
    z-index: 2;
    bottom: 34px !important;
    left: 36px !important;
    right: 36px;
    max-width: 440px !important;
}

.techwix-case-study-section-02 .single-case-study-02 .case-study-content .sub-title {
    display: inline-block;
    margin-bottom: 10px;
    padding: 3px 12px;
    border-radius: 20px;
    background: rgba(8, 106, 216, .92);
    color: #fff;
    font-size: 13px !important;
    font-weight: 600;
    letter-spacing: .04em;
}

.techwix-case-study-section-02 .single-case-study-02 .case-study-content .title {
    font-size: 21px !important;
    line-height: 1.5 !important;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.techwix-case-study-section-02 .single-case-study-02 .case-study-content .title span {
    display: inline;
    padding: 2px 8px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

@media only screen and (max-width: 767px) {
    .techwix-case-study-section-02 .single-case-study-02 .case-study-content {
        bottom: 20px !important;
        left: 20px !important;
        right: 20px;
    }

    .techwix-case-study-section-02 .single-case-study-02 .case-study-content .title {
        font-size: 18px !important;
    }
}

/* ==========================================================================
   Step 3: components in the Company Profile 2026 style
   (blue band, white rounded cards, round icons, staggered cards, big figures)
   ========================================================================== */

/* ---- Six integrated service lines (Home) ---- */
.svc-lines {
    position: relative;
    overflow: hidden;
    padding: 100px 0 130px;
    color: #fff;
    background: linear-gradient(135deg, #2b8efe 0%, #0a63e6 100%);
}

.svc-lines::before,
.svc-lines::after,
.mission-band::before,
.mission-band::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .2);
    pointer-events: none;
}

.svc-lines::before { width: 760px; height: 760px; right: -240px; top: -300px; }
.svc-lines::after  { width: 520px; height: 520px; left: -200px; bottom: -280px; }

.svc-lines .container,
.mission-band .container { position: relative; z-index: 1; }

.svc-lines__eyebrow,
.mission-band__eyebrow,
.why-split__eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    font-family: "Barlow", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.svc-lines__eyebrow,
.mission-band__eyebrow { color: rgba(255, 255, 255, .85); }

.svc-lines__title {
    color: #fff;
    font-size: 46px;
    line-height: 1.15;
    margin-bottom: 14px;
}

.svc-lines__lead {
    max-width: 560px;
    font-size: 18px;
    color: rgba(255, 255, 255, .9);
}

.svc-lines__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 56px;
}

.svc-lines__card {
    display: flex;
    flex-direction: column;
    padding: 28px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 22px 44px -22px rgba(5, 25, 90, .55);
    transition: transform .25s ease, box-shadow .25s ease;
    text-decoration: none;
}

.svc-lines__card:nth-child(3n + 2) { margin-top: 32px; }
.svc-lines__card:nth-child(3n)     { margin-top: 12px; }

.svc-lines__card:hover,
.svc-lines__card:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 30px 56px -22px rgba(5, 25, 90, .7);
}

.svc-lines__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 22px;
    padding: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, #086ad8, #2daeff);
    color: #fff;
}

.svc-lines__icon svg { width: 100%; height: 100%; }

.svc-lines__name {
    margin-bottom: 8px;
    font-size: 22px;
    line-height: 1.3;
    color: #0e0e0e;
}

.svc-lines__text {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.65;
    color: #5b6472;
}

.svc-lines__more {
    margin-top: auto;
    font-family: "Barlow", sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #086ad8;
}

.svc-lines__more i { margin-left: 6px; font-size: 12px; transition: transform .2s ease; }
.svc-lines__card:hover .svc-lines__more i { transform: translateX(4px); }

/* ---- Cost of waiting: big figures (Home) ---- */
.cost-section { padding: 110px 0 40px; }

.cost-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 56px;
}

.cost-card {
    padding: 32px 34px;
    border: 1px solid #e6edf8;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 40px -26px rgba(8, 60, 140, .35);
}

.cost-card__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.cost-card__icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 11px;
    border-radius: 50%;
    background: linear-gradient(135deg, #086ad8, #2daeff);
    color: #fff;
}

.cost-card__icon svg { width: 100%; height: 100%; }

.cost-card__label {
    margin: 0;
    font-size: 20px;
    line-height: 1.3;
}

.cost-card__pain {
    margin-bottom: 22px;
    font-size: 16px;
    color: #5b6472;
}

.cost-card__result {
    padding-top: 20px;
    border-top: 1px solid #edf2fa;
}

.cost-card__value {
    display: block;
    font-family: "Barlow", sans-serif;
    font-size: 52px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.01em;
    color: #086ad8;
}

.cost-card__caption {
    margin-top: 8px;
    font-size: 16px;
    line-height: 1.6;
    color: #4c4d56;
}

.cost-note {
    margin-top: 28px;
    font-size: 14px;
    color: #8a93a3;
}

.cost-cta { margin-top: 22px; }

/* ---- About: mission band ---- */
.mission-band {
    position: relative;
    overflow: hidden;
    padding: 100px 0 110px;
    color: #fff;
    background: linear-gradient(135deg, #2b8efe 0%, #0a63e6 100%);
}

.mission-band::before { width: 700px; height: 700px; right: -220px; top: -280px; }
.mission-band::after  { width: 460px; height: 460px; left: -180px; bottom: -250px; }

.mission-band__statement {
    max-width: 900px;
    margin-bottom: 0;
    font-family: "Barlow", sans-serif;
    font-size: 42px;
    font-weight: 400;
    line-height: 1.32;
    color: #fff;
}

.mission-band__statement strong {
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 8px;
}

.mission-band__values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
    margin-top: 64px;
}

.mission-band__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 18px;
    padding: 14px;
    border-radius: 50%;
    background: #fff;
    color: #086ad8;
}

.mission-band__icon svg { width: 100%; height: 100%; }

.mission-band__value h3 {
    margin-bottom: 6px;
    font-size: 22px;
    color: #fff;
}

.mission-band__value p {
    max-width: 30ch;
    font-size: 16px;
    color: rgba(255, 255, 255, .9);
}

/* ---- About: Consult / Implement / Manage staircase + reasons ---- */
.why-section { padding: 110px 0; }

.why-split {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 80px;
    align-items: center;
}

.why-split__eyebrow { color: #086ad8; }

.why-split__title {
    margin-bottom: 14px;
    font-size: 44px;
    line-height: 1.15;
}

.why-split__lead { font-size: 18px; color: #5b6472; }

.stair {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    align-items: end;
    min-height: 340px;
    margin-top: 48px;
}

.stair__step {
    padding: 22px 20px 24px;
    border-radius: 12px;
    background: linear-gradient(135deg, #2b8efe 0%, #0a63e6 100%);
    color: #fff;
    box-shadow: 0 22px 44px -24px rgba(8, 80, 200, .7);
}

.stair__step:nth-child(1) { min-height: 190px; }
.stair__step:nth-child(2) { min-height: 260px; }
.stair__step:nth-child(3) { min-height: 330px; }

.stair__no {
    display: block;
    margin-bottom: 4px;
    font-family: "Barlow", sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .8);
}

.stair__step h3 { margin-bottom: 8px; font-size: 26px; color: #fff; }
.stair__step p  { font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .92); }

.why-split__right { display: grid; gap: 30px; }

.why-point {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 18px;
    align-items: start;
}

.why-point__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 13px;
    border-radius: 50%;
    background: #e3ecff;
    color: #086ad8;
}

.why-point__icon svg { width: 100%; height: 100%; }
.why-point h3 { margin-bottom: 4px; font-size: 20px; }
.why-point p  { font-size: 16px; line-height: 1.6; color: #5b6472; }

/* ---- Responsive ---- */
@media only screen and (max-width: 991px) {
    .svc-lines { padding: 80px 0 90px; }
    .svc-lines__title { font-size: 36px; }
    .svc-lines__grid { grid-template-columns: repeat(2, 1fr); }
    .svc-lines__card:nth-child(n) { margin-top: 0; }
    .svc-lines__card:nth-child(even) { margin-top: 24px; }

    .cost-section { padding-top: 80px; }
    .mission-band { padding: 80px 0; }
    .mission-band__statement { font-size: 32px; }
    .mission-band__values { grid-template-columns: 1fr; gap: 28px; margin-top: 48px; }

    .why-section { padding: 80px 0; }
    .why-split { grid-template-columns: 1fr; gap: 56px; }
    .why-split__title { font-size: 36px; }
    .stair { min-height: 0; }
}

@media only screen and (max-width: 767px) {
    .svc-lines__grid,
    .cost-grid { grid-template-columns: 1fr; }
    .svc-lines__card:nth-child(n) { margin-top: 0; }
    .svc-lines__title { font-size: 30px; }

    .cost-card { padding: 26px 24px; }
    .cost-card__value { font-size: 42px; }

    .mission-band__statement { font-size: 26px; }

    .stair { grid-template-columns: 1fr; }
    .stair__step:nth-child(n) { min-height: 0; }
    .why-split__title { font-size: 30px; }
}


/* ==========================================================================
   Services page: Our Total Solution (Company Profile 2026, slides 7 to 12)
   ========================================================================== */

.sl-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    font-family: "Barlow", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #086ad8;
}

/* ---- overview + quick navigation ---- */
.sl-overview { padding: 96px 0 60px; background: #fff; }
.sl-overview__head { max-width: 820px; margin: 0 auto; text-align: center; }
.sl-overview .sl-eyebrow { margin-top: 0; }
.sl-overview__title { margin-bottom: 14px; font-size: 46px; line-height: 1.15; }
.sl-overview__lead { font-size: 18px; line-height: 1.7; color: #5b6472; }

.sl-nav {
    position: sticky;
    top: 0;
    z-index: 90;
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid #edf2fa;
    border-bottom: 1px solid #e3ebf7;
}

.sl-nav__list {
    display: flex;
    gap: 10px;
    padding: 14px 0;
    margin: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

.sl-nav__list::-webkit-scrollbar { display: none; }

.sl-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px 9px 10px;
    border-radius: 999px;
    background: #f1f6fd;
    color: #0e0e0e;
    font-family: "Barlow", sans-serif;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

.sl-nav__no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    color: #086ad8;
    font-size: 12px;
    font-weight: 700;
}

.sl-nav a:hover { background: #dce9fc; }
.sl-nav a.is-active { background: linear-gradient(135deg, #2b8efe, #0a63e6); color: #fff; }
.sl-nav a.is-active .sl-nav__no { background: rgba(255, 255, 255, .22); color: #fff; }

/* ---- section frame ---- */
.sl-section { padding: 96px 0; scroll-margin-top: 70px; }
.sl-section:nth-of-type(even) { background: #f5f9ff; }

.sl-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px 64px;
    align-items: end;
    margin-bottom: 44px;
}

.sl-head__title { margin: 0; font-size: 42px; line-height: 1.15; }
.sl-head__text { margin: 0; max-width: 520px; font-size: 17px; line-height: 1.7; color: #5b6472; }

.sl-more { margin: 34px 0 0; }

.sl-more a {
    font-family: "Barlow", sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #086ad8;
}

.sl-more i { margin-left: 6px; font-size: 12px; transition: transform .2s ease; }
.sl-more a:hover i { transform: translateX(4px); }

/* ---- shared parts ---- */
.sl-panel {
    position: relative;
    overflow: hidden;
    padding: 44px;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, #2b8efe 0%, #0a63e6 100%);
    box-shadow: 0 30px 60px -32px rgba(8, 80, 200, .75);
}

.sl-panel::after {
    content: "";
    position: absolute;
    right: -140px;
    bottom: -190px;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    pointer-events: none;
}

.sl-panel h3 { margin-bottom: 8px; font-size: 21px; color: #fff; }
.sl-panel p { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .92); }
.sl-panel__partners { margin: 10px 0 0; font-weight: 700; font-size: 14px !important; color: #fff !important; }

.sl-round {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, #086ad8, #2daeff);
    color: #fff;
}

.sl-panel .sl-round,
.sl-tile--blue .sl-round,
.sl-tile--ink .sl-round { background: #fff; color: #086ad8; }

.sl-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    background: #fff;
    box-shadow: inset 0 0 0 1px #e6edf8;
}

.sl-pill img { max-height: 22px; max-width: 100px; width: auto; }
.sl-pill--lg { height: 56px; padding: 0 26px; }
.sl-pill--lg img { max-height: 34px; max-width: 150px; }

.sl-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 34px; padding: 0; list-style: none; }

.sl-chips li {
    padding: 8px 16px;
    border-radius: 999px;
    background: #dce9fc;
    color: #086ad8;
    font-family: "Barlow", sans-serif;
    font-size: 15px;
    font-weight: 700;
}

.sl-bullets { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }

.sl-bullets li {
    position: relative;
    padding-left: 20px;
    font-size: 16px;
    line-height: 1.5;
    color: #4c4d56;
}

.sl-bullets li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .6em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2b8efe;
}

.sl-bullets--light li { color: rgba(255, 255, 255, .95); }
.sl-bullets--light li::before { background: #fff; }

/* ---- 01 infrastructure ---- */
.sl-infra { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.sl-infra__groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px 40px; }

.sl-infra__consulting {
    margin: 34px 0 0;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .3);
    font-size: 15px;
    color: rgba(255, 255, 255, .92);
}

.sl-infra__consulting strong { margin-right: 10px; color: #fff; }

.sl-logo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

.sl-logo-grid__title {
    grid-column: 1 / -1;
    margin: 0 0 2px;
    font-family: "Barlow", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #0e0e0e;
}

.sl-logo-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 62px;
    padding: 10px 14px;
    border-radius: 12px;
    background: #fff;
    box-shadow: inset 0 0 0 1px #e6edf8;
}

.sl-logo-tile img { max-width: 100%; max-height: 30px; width: auto; height: auto; }

/* ---- 02 business application (bento) ---- */
.sl-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.sl-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 260px;
    padding: 28px;
    border-radius: 16px;
}

.sl-tile--blue { background: linear-gradient(135deg, #2b8efe 0%, #0a63e6 100%); color: #fff; }
.sl-tile--soft { background: #fff; box-shadow: inset 0 0 0 1px #e6edf8; }
.sl-tile--ink { background: #0b1230; color: #aeb7cc; }

.sl-tile__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.sl-tile__top .sl-round { margin-bottom: 0; }
.sl-tile h3 { margin-bottom: 8px; font-size: 21px; }
.sl-tile--blue h3, .sl-tile--ink h3 { color: #fff; }
.sl-tile p { margin-bottom: 14px; font-size: 16px; line-height: 1.6; }
.sl-tile--blue p { color: rgba(255, 255, 255, .92); }
.sl-tile__partners { margin-top: auto; font-family: "Barlow", sans-serif; font-size: 15px; font-weight: 700; color: #086ad8; }
.sl-tile--blue .sl-tile__partners { color: #fff; }

/* ---- 03 application development ---- */
.sl-appdev { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 32px; align-items: start; }

.sl-appdev__side h3 {
    margin-bottom: 14px;
    font-family: "Barlow", sans-serif;
    font-size: 14px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.sl-appdev__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }

/* ---- 04 digital manufacturing ---- */
.sl-photo {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    background-color: #0a63e6;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: auto 115%;
    box-shadow: 0 30px 60px -32px rgba(8, 80, 200, .75);
}

.sl-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #1d78f2 0%, #2b8efe 46%, rgba(43, 142, 254, .55) 70%, rgba(43, 142, 254, 0) 100%);
}

.sl-photo__content { position: relative; z-index: 1; max-width: 640px; padding: 48px; color: #fff; }

.sl-point { display: grid; grid-template-columns: 52px 1fr; gap: 16px; margin-bottom: 26px; }
.sl-point .sl-round { margin-bottom: 0; background: #fff; color: #086ad8; }
.sl-point h3 { margin-bottom: 4px; font-size: 20px; color: #fff; }
.sl-point p { margin: 0; font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, .94); }

.sl-photo__partner { display: flex; align-items: center; gap: 18px; margin-top: 8px; }
.sl-photo__partner > span:first-child { font-family: "Barlow", sans-serif; font-size: 15px; font-weight: 700; color: #fff; }

/* ---- 05 digital agency: creative studio board + service flow ---- */
.ag { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 36px; align-items: stretch; }

.ag-board {
    position: relative;
    min-height: 520px;
    padding: 30px;
    overflow: hidden;
    border-radius: 22px;
    color: #fff;
    background:
        radial-gradient(circle at 18% 12%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 38%),
        linear-gradient(135deg, #2b8efe 0%, #0a63e6 100%);
    box-shadow: 0 30px 60px -32px rgba(8, 80, 200, .75);
}

.ag-board::before,
.ag-board::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    pointer-events: none;
}

.ag-board::before { width: 460px; height: 460px; right: -150px; top: -170px; }
.ag-board::after  { width: 300px; height: 300px; left: -110px; bottom: -130px; }

.ag-board__tag {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    font-family: "Barlow", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ag-card {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: 16px;
    background: #fff;
    color: #0e0e0e;
    box-shadow: 0 22px 40px -20px rgba(5, 25, 90, .6);
}

.ag-card__cap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: "Barlow", sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    color: #086ad8;
}

/* brand identity card */
.ag-brand { left: 30px; top: 92px; width: 190px; transform: rotate(-3deg); }
.ag-brand__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 84px;
    border-radius: 12px;
    background: #f1f6fd;
    font-family: "Barlow", sans-serif;
    font-size: 54px;
    font-weight: 700;
    line-height: 1;
    color: #0e0e0e;
}

.ag-brand__swatches { display: flex; gap: 6px; }
.ag-brand__swatches i { flex: 1; height: 22px; border-radius: 6px; }
.ag-brand__swatches i:nth-child(1) { background: #086ad8; }
.ag-brand__swatches i:nth-child(2) { background: #42b9ff; }
.ag-brand__swatches i:nth-child(3) { background: #0b1230; }
.ag-brand__swatches i:nth-child(4) { background: #e3ecff; }

/* vertical video / live */
.ag-phone { right: 38px; top: 70px; width: 150px; padding: 12px; transform: rotate(3deg); }
.ag-phone__screen {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 236px;
    border-radius: 12px;
    background: linear-gradient(170deg, #0b1230 0%, #134a9e 60%, #2b8efe 100%);
    color: #fff;
}

.ag-phone__live {
    position: absolute;
    left: 10px;
    top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 6px;
    background: #e5484d;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
}

.ag-phone__live i { width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.ag-phone__play { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.ag-phone__bar { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .3); }
.ag-phone__bar b { display: block; width: 42%; height: 100%; border-radius: 2px; background: #fff; }

/* social post */
.ag-post { left: 70px; bottom: 36px; width: 210px; gap: 8px; transform: rotate(2deg); }
.ag-post__head { display: flex; align-items: center; gap: 10px; }
.ag-post__head i { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #086ad8, #42b9ff); }
.ag-post__head span { display: grid; gap: 5px; flex: 1; }
.ag-post__head b { display: block; height: 7px; border-radius: 4px; background: #dfe8f6; }
.ag-post__head b:first-child { width: 70%; background: #c3d4ee; }
.ag-post__media { display: flex; align-items: center; justify-content: center; height: 92px; border-radius: 10px; background: linear-gradient(135deg, #dce9fc, #b9d4fb); color: #086ad8; }
.ag-post__actions { display: flex; gap: 12px; color: #4c4d56; }

/* performance */
.ag-stats { right: 34px; bottom: 44px; width: 170px; }
.ag-stats__bars { display: flex; align-items: flex-end; gap: 7px; height: 70px; }
.ag-stats__bars i { flex: 1; height: var(--h); border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #2b8efe, #086ad8); }
.ag-stats__bars i:last-child { background: linear-gradient(180deg, #42d392, #1ea672); }
.ag-stats__trend { position: absolute; right: 12px; top: 12px; display: inline-flex; color: #1ea672; }

.ag-board__hex {
    position: absolute;
    left: 50%;
    top: 52%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 78px;
    transform: translate(-50%, -50%);
    background: #fff;
    color: #086ad8;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    filter: drop-shadow(0 10px 18px rgba(5, 25, 90, .45));
}

/* service flow */
.ag-flow { position: relative; display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ag-flow::before { content: ""; position: absolute; left: 25px; top: 28px; bottom: 28px; width: 2px; background: repeating-linear-gradient(180deg, #9cc4f7 0 6px, transparent 6px 12px); }

.ag-step { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; align-items: start; }

.ag-step__no {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #086ad8, #2daeff);
    color: #fff;
    font-family: "Barlow", sans-serif;
    font-size: 17px;
    font-weight: 700;
    box-shadow: 0 0 0 6px #f5f9ff;
}

.ag-step__body {
    padding: 18px 22px 20px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 40px -26px rgba(8, 60, 140, .45);
}

.ag-step__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ag-step__head h3 { margin: 0; font-size: 21px; color: #0e0e0e; }
.ag-step__icon { display: inline-flex; color: #086ad8; }

.ag-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

.ag-tags li {
    padding: 6px 13px;
    border-radius: 999px;
    background: #e8f1fe;
    color: #0a56c2;
    font-family: "Barlow", sans-serif;
    font-size: 14.5px;
    font-weight: 600;
}

@media only screen and (max-width: 1199px) {
    .ag { grid-template-columns: 1fr; }
    .ag-board { min-height: 590px; }
}

@media only screen and (max-width: 575px) {
    .ag-board { min-height: 660px; padding: 22px; }
    .ag-brand { left: 18px; top: 84px; width: 168px; }
    .ag-phone { right: 14px; top: 140px; width: 132px; }
    .ag-phone__screen { height: 190px; }
    .ag-post { left: 18px; bottom: 28px; width: 186px; }
    .ag-stats { right: 14px; bottom: 36px; width: 138px; }
    .ag-board__hex { top: 38%; left: 52%; }
}

/* ---- 06 talent & managed services ---- */
.sl-engage { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; padding-bottom: 60px; }

.sl-engage__band {
    position: absolute;
    left: -20px;
    right: -20px;
    bottom: 0;
    height: 60%;
    border-radius: 28px;
    background: linear-gradient(135deg, #2b8efe, #0a63e6);
    opacity: .1;
}

.sl-engage__card {
    position: relative;
    padding: 30px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 22px 44px -26px rgba(8, 60, 140, .45);
}

.sl-engage__card:nth-of-type(2) { margin-top: 24px; }
.sl-engage__card:nth-of-type(3) { margin-top: 48px; }
.sl-engage__card h3 { font-size: 22px; }
.sl-engage__card p { font-size: 16px; line-height: 1.6; }

.sl-proven { margin-top: 20px; padding-top: 16px; border-top: 1px solid #e6edf8; font-size: 15px; line-height: 1.5; color: #0e0e0e; }

.sl-proven__label {
    display: block;
    margin-bottom: 4px;
    font-family: "Barlow", sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    color: #086ad8;
}

/* ---- responsive ---- */
@media only screen and (max-width: 1199px) {
    .sl-infra { grid-template-columns: 1fr; }
    .sl-logo-grid { grid-template-columns: repeat(4, 1fr); }
    .sl-bento { grid-template-columns: repeat(2, 1fr); }
    .sl-appdev { grid-template-columns: 1fr; }
}

@media only screen and (max-width: 991px) {
    .sl-overview { padding: 70px 0 44px; }
    .sl-overview__title { font-size: 36px; }
    .sl-section { padding: 70px 0; }
    .sl-head { grid-template-columns: 1fr; gap: 14px; margin-bottom: 32px; }
    .sl-head__title { font-size: 34px; }
    .sl-panel { padding: 32px 28px; }
    .sl-engage { grid-template-columns: 1fr; }
    .sl-engage__card:nth-of-type(n) { margin-top: 0; }
    .sl-photo { background-size: cover; }
    .sl-photo::before { background: linear-gradient(180deg, rgba(29, 120, 242, .94) 0%, rgba(43, 142, 254, .88) 100%); }
    .sl-photo__content { max-width: none; padding: 34px 28px; }
}

@media only screen and (max-width: 767px) {
    .sl-overview__title { font-size: 30px; }
    .sl-head__title { font-size: 28px; }
    .sl-infra__groups,
    .sl-bento,
    .sl-appdev__cols { grid-template-columns: 1fr; }
    .sl-logo-grid { grid-template-columns: repeat(2, 1fr); }
    .sl-photo__partner { flex-direction: column; align-items: flex-start; gap: 10px; }
}