/* =====================================================
   ROOT VARIABLES
===================================================== */

:root {

    --navy: #050816;
    --navy-light: #0b1b3d;

    --white: #ffffff;

    --background: #ffffff;
    --light: #f7f9fc;
    --soft: #f1f5f9;

    --heading: #07152f;
    --text: #344054;
    --muted: #667085;

    --blue: #1264d8;
    --blue2: #075bd9;
    --cyan: #12bce8;

    --green: #58b52b;

    --border: #e4e9f0;

    --max-width: 1240px;

    --shadow:
        0 12px 35px
        rgba(15, 23, 42, .07);

}


/* =====================================================
   RESET
===================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    font-family:
        "DM Sans",
        sans-serif;

    background:
        #ffffff;

    color:
        var(--text);

    line-height:
        1.6;

    overflow-x:
        hidden;
}


img {
    display: block;
    max-width: 100%;
}


a {
    color: inherit;
    text-decoration: none;
}


button {
    font-family: inherit;
}


.container {

    width:
        min(
            var(--max-width),
            calc(100% - 40px)
        );

    margin:
        auto;

}


/* =====================================================
   HEADER
===================================================== */

header {

    position:
        fixed;

    top:
        0;

    left:
        0;

    width:
        100%;

    z-index:
        9999;

    padding:
        14px 0;

    background:
        linear-gradient(
            135deg,
            #050816,
            #0b1938
        );

    border-bottom:
        1px solid
        rgba(255,255,255,.08);

    transition:
        .3s ease;
    height: 102px;
}


header.scrolled {

    background:
        rgba(5,8,22,.96);

    backdrop-filter:
        blur(20px);

    box-shadow:
        0 8px 30px
        rgba(0,0,0,.2);
}


.nav {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;
}


/* =====================================================
   LOGO
===================================================== */

.logo {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    font-family:
        "Manrope",
        sans-serif;

    font-weight:
        800;

    color:
        #ffffff;
}


.logo-image {

    width:
        47px;

    height:
        47px;

    padding:
        3px;

    object-fit:
        contain;

    background:
        #ffffff;

    border-radius:
        12px;

    box-shadow:
        0 6px 20px
        rgba(0,0,0,.18);
}


.logo-name {

    font-size:
        20px;

    line-height:
        1;
}


.logo-name span {

    color:
        #aeb9d3;
}


/* =====================================================
   NAVIGATION
===================================================== */

.nav-links {

    display:
        flex;

    align-items:
        center;

    gap:
        28px;
}


.nav-links a {

    color:
        #b9c3d8;

    font-size:
        14px;

    font-weight:
        500;

    transition:
        .25s;
}


.nav-links a:hover {

    color:
        #ffffff;
}


.nav-button {

    padding:
        10px 20px;

    border-radius:
        10px;

    background:
        linear-gradient(
            135deg,
            #1264d8,
            #12a9e8
        );

    color:
        #ffffff !important;

    font-weight:
        700 !important;
}


.nav-button:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 25px
        rgba(18,100,216,.35);
}


.menu-button {

    display:
        none;

    border:
        none;

    background:
        transparent;

    color:
        #ffffff;

    font-size:
        27px;

    cursor:
        pointer;
}


/* =====================================================
   HERO
===================================================== */

.hero {

    min-height:
        100vh;

    padding:
        45px 0 100px;

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    background:
        linear-gradient(
            180deg,
            #f7fbff,
            #ffffff
        );
}


.hero-glow {

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    right:
        -200px;

    top:
        -200px;

    border-radius:
        50%;

    background:
        rgba(18,100,216,.08);

    filter:
        blur(80px);
}


.hero-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        70px;

    align-items:
        center;

    position:
        relative;

    z-index:
        2;
}


.eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        7px 14px;

    border:
        1px solid
        #dce6f4;

    border-radius:
        50px;

    background:
        #ffffff;

    color:
        #52617a;

    font-size:
        12px;

    font-weight:
        600;

    margin-bottom:
        25px;
}


.status-dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--green);

    box-shadow:
        0 0 10px
        rgba(88,181,43,.7);
}


.hero h1 {

    font-family:
        "Manrope",
        sans-serif;

    color:
        var(--heading);

    font-size:
        clamp(
            45px,
            6vw,
            76px
        );

    line-height:
        1.04;

    letter-spacing:
        -3px;

    margin-bottom:
        25px;
}


.gradient-text {

    background:
        linear-gradient(
            90deg,
            #1264d8,
            #12a9e8,
            #58b52b
        );

    -webkit-background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    background-clip:
        text;
}


.hero-description {

    max-width:
        630px;

    color:
        var(--muted);

    font-size:
        18px;

    line-height:
        1.8;

    margin-bottom:
        32px;
}


/* =====================================================
   BUTTONS
===================================================== */

.hero-buttons {

    display:
        flex;

    gap:
        13px;

    flex-wrap:
        wrap;

    align-items:
        center;
}


.btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        14px 22px;

    border-radius:
        11px;

    font-size:
        14px;

    font-weight:
        700;

    transition:
        .3s;
}


.btn-primary {

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #1264d8,
            #1598ed
        );

    box-shadow:
        0 12px 30px
        rgba(18,100,216,.20);
}


.btn-primary:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 35px
        rgba(18,100,216,.30);
}


.btn-secondary {

    background:
        #ffffff;

    border:
        1px solid
        #dce3ec;

    color:
        #344054;
}


.btn-secondary:hover {

    color:
        var(--blue);

    border-color:
        var(--blue);

    transform:
        translateY(-2px);
}


.btn-outline-white {

    color:
        #ffffff;

    border:
        1px solid
        rgba(255,255,255,.25);

    background:
        rgba(255,255,255,.05);
}


.btn-outline-white:hover {

    background:
        rgba(255,255,255,.12);
}


/* =====================================================
   HERO STATS
===================================================== */

.hero-stats {

    display:
        flex;

    gap:
        35px;

    margin-top:
        40px;
}


.hero-stats div {

    display:
        flex;

    flex-direction:
        column;
}


.hero-stats strong {

    color:
        var(--heading);

    font-family:
        "Manrope";

    font-size:
        22px;
}


.hero-stats span {

    color:
        #8994a7;

    font-size:
        11px;
}


/* =====================================================
   DASHBOARD
===================================================== */

.hero-visual {
    position: relative;
}


.dashboard {

    padding:
        22px;

    background:
        #ffffff;

    border:
        1px solid
        #e1e7ef;

    border-radius:
        28px;

    box-shadow:
        0 30px 80px
        rgba(15,23,42,.13);

    transform:
        perspective(1000px)
        rotateY(-5deg)
        rotateX(2deg);
}


.dashboard-header {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    margin-bottom:
        20px;
}


.dashboard-label {

    display:
        block;

    color:
        #98a2b3;

    font-size:
        9px;

    letter-spacing:
        1.4px;

    font-weight:
        700;
}


.dashboard-header h3 {

    color:
        var(--heading);

    font-family:
        "Manrope";

    font-size:
        18px;

    margin-top:
        3px;
}


.live-badge {

    padding:
        5px 9px;

    border-radius:
        50px;

    background:
        #eaf8ed;

    color:
        #218739;

    font-size:
        9px;

    font-weight:
        800;
}


.chart {

    height:
        220px;

    position:
        relative;

    overflow:
        hidden;

    border-radius:
        17px;

    background:
        #f9fbfd;
}


.chart-grid {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            #e8edf3 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            #e8edf3 1px,
            transparent 1px
        );

    background-size:
        40px 40px;
}


.chart svg {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;
}


.metrics {

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        12px;

    margin-top:
        14px;
}


.metric {

    padding:
        15px;

    background:
        #f7f9fc;

    border:
        1px solid
        #e8edf3;

    border-radius:
        14px;
}


.metric span {

    display:
        block;

    color:
        #7a869d;

    font-size:
        10px;
}


.metric strong {

    color:
        var(--heading);

    font-size:
        21px;
}


/* =====================================================
   FLOATING CARDS
===================================================== */

.floating-card {

    position:
        absolute;

    padding:
        14px 17px;

    background:
        #ffffff;

    border:
        1px solid
        #e0e6ef;

    border-radius:
        15px;

    box-shadow:
        0 18px 45px
        rgba(15,23,42,.13);
}


.floating-card strong {

    display:
        block;

    color:
        var(--blue);

    font-family:
        "Manrope";

    font-size:
        22px;
}


.floating-card span {

    color:
        #7a869d;

    font-size:
        9px;
}


.floating-one {

    left:
        -35px;

    bottom:
        35px;
}


.floating-two {

    right:
        -30px;

    top:
        35px;
}


/* =====================================================
   TRUST
===================================================== */

.trust {

    padding:
        20px 0 80px;
}


.trust-inner {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        20px;

    padding:
        25px 0;

    border-top:
        1px solid
        #e7ebf1;

    border-bottom:
        1px solid
        #e7ebf1;
}


.trust-title {

    color:
        #98a2b3;

    font-size:
        10px;

    letter-spacing:
        1.5px;

    font-weight:
        800;
}


.trust-items {

    display:
        flex;

    gap:
        35px;

    flex-wrap:
        wrap;
}


.trust-items span {

    color:
        #667085;

    font-size:
        13px;

    font-weight:
        700;
}


/* =====================================================
   SECTIONS
===================================================== */

section {
    padding:
        25px 0;
}


.section-heading {

    max-width:
        750px;

    margin-bottom:
        55px;
}


.section-heading.center {

    text-align:
        center;

    margin-left:
        auto;

    margin-right:
        auto;
}


.section-label {

    color:
        var(--blue);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

    margin-bottom:
        14px;
}


.section-heading h2 {

    font-family:
        "Manrope",
        sans-serif;

    color:
        var(--heading);

    font-size:
        clamp(
            33px,
            4vw,
            52px
        );

    line-height:
        1.1;

    letter-spacing:
        -2px;

    margin-bottom:
        17px;
}


.section-heading p {

    color:
        var(--muted);

    font-size:
        17px;

    line-height:
        1.7;
}


/* =====================================================
   SERVICES
===================================================== */

.services-section {

    background:
        #ffffff;
}


.services-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        26px;
}


/* =====================================================
   BLUE GRADIENT SERVICE CARD
===================================================== */

.service-card {

    position:
        relative;

    min-height:
        375px;

    padding:
        42px;

    overflow:
        hidden;

    border-radius:
        25px;

    background:
        linear-gradient(
            135deg,
            #063aa8 0%,
            #8aaaec 45%,
            #12bce8 100%
        );

    border:
        1px solid
        rgba(255,255,255,.18);

    box-shadow:
        0 18px 45px
        rgba(7,78,190,.15);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


/* BIG CIRCULAR DESIGN */

.service-card::before {

    content:
        "";

    position:
        absolute;

    width:
        280px;

    height:
        280px;

    right:
        -145px;

    bottom:
        -145px;

    border-radius:
        50%;

    border:
        1px solid
        rgba(255,255,255,.18);

    box-shadow:
        0 0 0 45px
        rgba(255,255,255,.025),
        0 0 0 90px
        rgba(255,255,255,.018);

    pointer-events:
        none;
}


/* SECOND GLOW */

.service-card::after {

    content:
        "";

    position:
        absolute;

    width:
        190px;

    height:
        190px;

    right:
        -110px;

    bottom:
        -90px;

    border-radius:
        50%;

    background:
        rgba(255,255,255,.09);

    filter:
        blur(25px);

    pointer-events:
        none;
}


/* HOVER */

.service-card:hover {

    transform:
        translateY(-9px);

    box-shadow:
        0 28px 65px
        rgba(7,78,190,.28);
}


/* =====================================================
   SERVICE ICON
===================================================== */

.service-icon {

    position:
        relative;

    z-index:
        2;

    width:
        75px;

    height:
        75px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        38px;

    border-radius:
        20px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.19),
            rgba(255,255,255,.06)
        );

    border:
        1px solid
        rgba(255,255,255,.23);

    box-shadow:
        inset 0 1px 1px
        rgba(255,255,255,.20),

        0 8px 25px
        rgba(0,0,0,.10);

    backdrop-filter:
        blur(10px);
}


.service-icon span {

    color:
        #ffffff;

    font-size:
        31px;

    line-height:
        1;

    text-shadow:
        0 2px 8px
        rgba(0,0,0,.15);
}


/* =====================================================
   SERVICE TEXT
===================================================== */

.service-card h3 {

    position:
        relative;

    z-index:
        2;

    color:
        #ffffff;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        22px;

    line-height:
        1.3;

    letter-spacing:
        -.5px;

    margin-bottom:
        13px;
}


.service-card p {

    position:
        relative;

    z-index:
        2;

    color:
        rgba(255,255,255,.91);

    font-size:
        15px;

    line-height:
        1.7;

    margin-bottom:
        18px;
}


.card-link {

    position:
        relative;

    z-index:
        3;

    display:
        inline-block;

    color:
        #ffffff;

    font-size:
        13px;

    font-weight:
        700;

    opacity:
        .9;

    transition:
        .25s;
}


.card-link:hover {

    opacity:
        1;

    transform:
        translateX(4px);
}


/* =====================================================
   ABOUT
===================================================== */

.about-section {

    background:
        #f7f9fc;
}


.about-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        70px;

    align-items:
        center;
}


.about-content h2 {

    font-family:
        "Manrope";

    color:
        var(--heading);

    font-size:
        clamp(34px,4vw,50px);

    line-height:
        1.1;

    letter-spacing:
        -2px;

    margin-bottom:
        22px;
}


.about-content p {

    color:
        var(--muted);

    font-size:
        15px;

    margin-bottom:
        17px;
}


.stats-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:
        15px;
}


.stat-card {

    padding:
        30px;

    background:
        #ffffff;

    border:
        1px solid
        var(--border);

    border-radius:
        20px;

    box-shadow:
        0 7px 25px
        rgba(15,23,42,.04);

    transition:
        .3s;
}


.stat-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 15px 35px
        rgba(15,23,42,.08);
}


.stat-card strong {

    display:
        block;

    color:
        var(--blue);

    font-family:
        "Manrope";

    font-size:
        40px;

    line-height:
        1;

    margin-bottom:
        9px;
}


.stat-card span {

    color:
        var(--muted);

    font-size:
        13px;
}


/* =====================================================
   SOLUTIONS
===================================================== */

.solutions-section {

    background:
        #ffffff;
}


.solution-grid {

    display:
        grid;

    grid-template-columns:
        1.3fr .7fr;

    gap:
        18px;
}


.solution-main,
.solution-small {

    background:
        #ffffff;

    border:
        1px solid
        var(--border);

    border-radius:
        23px;

    padding:
        35px;

    box-shadow:
        var(--shadow);

    position:
        relative;

    overflow:
        hidden;
}


.solution-main {

    min-height:
        390px;
}


.solution-icon {

    width:
        55px;

    height:
        55px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        15px;

    background:
        linear-gradient(
            135deg,
            #edf5ff,
            #eefbf0
        );

    color:
        var(--blue);

    font-size:
        23px;

    margin-bottom:
        20px;
}


.solution-main h3 {

    color:
        var(--heading);

    font-family:
        "Manrope";

    font-size:
        30px;

    margin-bottom:
        12px;
}


.solution-small h3 {

    color:
        var(--heading);

    font-family:
        "Manrope";

    font-size:
        20px;

    margin-bottom:
        8px;
}


.solution-main p,
.solution-small p {

    color:
        var(--muted);

    font-size:
        14px;
}


.solution-list {

    display:
        grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:
        12px;

    margin-top:
        30px;
}


.solution-list div {

    padding:
        13px;

    border:
        1px solid
        #e7ebf1;

    border-radius:
        11px;

    background:
        #f7f9fc;

    color:
        #344054;

    font-size:
        13px;
}


.solution-side {

    display:
        grid;

    gap:
        18px;
}


.solution-small {

    min-height:
        186px;
}


/* =====================================================
   TECHNOLOGY
===================================================== */

.technology-section {

    background:
        #f7f9fc;
}


.tech-grid {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;
}


.tech {

    padding:
        14px 19px;

    background:
        #ffffff;

    border:
        1px solid
        #e0e6ee;

    border-radius:
        12px;

    color:
        #344054;

    font-size:
        13px;

    font-weight:
        600;

    transition:
        .25s;
}


.tech:hover {

    color:
        var(--blue);

    border-color:
        var(--blue);

    transform:
        translateY(-3px);

    box-shadow:
        0 8px 20px
        rgba(18,100,216,.08);
}


/* =====================================================
   PROCESS
===================================================== */

.process-section {

    background:
        #ffffff;
}


.process-grid {

    display:
        grid;

    grid-template-columns:
        repeat(6,1fr);

    gap:
        12px;
}


.process-card {

    padding:
        25px 18px;

    background:
        #ffffff;

    border:
        1px solid
        var(--border);

    border-radius:
        18px;

    box-shadow:
        0 5px 20px
        rgba(15,23,42,.04);

    transition:
        .3s;
}


.process-card:hover {

    transform:
        translateY(-5px);

    border-color:
        #c9daf4;
}


.process-card > span {

    display:
        block;

    color:
        var(--blue);

    font-size:
        12px;

    font-weight:
        800;

    margin-bottom:
        24px;
}


.process-card h3 {

    color:
        var(--heading);

    font-size:
        16px;

    margin-bottom:
        7px;
}


.process-card p {

    color:
        var(--muted);

    font-size:
        12px;
}


/* =====================================================
   INDUSTRIES
===================================================== */

.industries-section {

    background:
        #f7f9fc;
}


.industry-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:
        15px;
}


.industry-card {

    padding:
        27px;

    background:
        #ffffff;

    border:
        1px solid
        var(--border);

    border-radius:
        18px;

    text-align:
        center;

    box-shadow:
        0 5px 20px
        rgba(15,23,42,.04);

    transition:
        .3s;
}


.industry-card:hover {

    transform:
        translateY(-5px);

    border-color:
        var(--blue);

    color:
        var(--blue);

    box-shadow:
        0 12px 30px
        rgba(18,100,216,.09);
}


.industry-icon {

    display:
        block;

    font-size:
        28px;

    margin-bottom:
        8px;
}


.industry-card span {

    font-weight:
        600;

    color:
        #344054;
}


/* =====================================================
   CTA
===================================================== */

.contact-section {

    padding:
        55px 0 110px;

    background:
        #ffffff;
}


.cta-box {
    background: linear-gradient(
        135deg,
        #061b49 0%,
        #0a3d91 50%,
        #087bb5 100%
    );

    border-radius: 24px;
    padding: 60px;
    box-shadow: 0 20px 50px rgba(6, 58, 168, 0.18);
}


.cta-box::before {

    content:
        "";

    position:
        absolute;

    width:
        400px;

    height:
        400px;

    top:
        -250px;

    left:
        50%;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        rgba(18,100,216,.22);

    filter:
        blur(70px);
}


.cta-box > * {

    position:
        relative;

    z-index:
        2;
}


.cta-box .section-label {

    color:
        #55b5ff;
}


.cta-box h2 {

    color:
        #ffffff;

    font-family:
        "Manrope";

    font-size:
        clamp(
            35px,
            5vw,
            58px
        );

    line-height:
        1.08;

    letter-spacing:
        -2px;

    margin-bottom:
        16px;
}


.cta-box p {

    max-width:
        650px;

    margin:
        0 auto 30px;

    color:
        #aeb9d3;
}


/* =====================================================
   FOOTER
===================================================== */

footer {

    padding:
        70px 0 25px;

    background:
        #050816;

    color:
        #ffffff;
}


.footer-grid {

    display:
        grid;

    grid-template-columns:
        1.5fr repeat(3,1fr);

    gap:
        50px;
}


.footer-brand p {

    max-width:
        370px;

    margin-top:
        18px;

    color:
        #8994ad;

    font-size:
        13px;
}


.footer-column h4 {

    color:
        #ffffff;

    font-size:
        14px;

    margin-bottom:
        18px;
}


.footer-column a {

    display:
        block;

    color:
        #8994ad;

    font-size:
        13px;

    margin-bottom:
        10px;

    transition:
        .2s;
}


.footer-column a:hover {

    color:
        #ffffff;
}


.footer-bottom {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    margin-top:
        55px;

    padding-top:
        22px;

    border-top:
        1px solid
        rgba(255,255,255,.08);

    color:
        #68728b;

    font-size:
        12px;
}


.footer-bottom a:hover {

    color:
        #ffffff;
}


/* =====================================================
   SCROLL REVEAL
===================================================== */

.reveal {

    opacity:
        0;

    transform:
        translateY(25px);

    transition:
        opacity .8s ease,
        transform .8s ease;
}


.reveal.active {

    opacity:
        1;

    transform:
        translateY(0);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1100px) {


    .hero-grid {

        grid-template-columns:
            1fr;

    }


    .hero-visual {

        width:
            100%;

        max-width:
            700px;

        margin:
            auto;
    }


    .services-grid {

        grid-template-columns:
            repeat(2,1fr);
    }


    .process-grid {

        grid-template-columns:
            repeat(3,1fr);
    }


    .industry-grid {

        grid-template-columns:
            repeat(2,1fr);
    }


    .footer-grid {

        grid-template-columns:
            repeat(2,1fr);
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {


    .container {

        width:
            calc(100% - 28px);
    }


    /* NAV */

    .menu-button {

        display:
            block;
    }


    .nav-links {

        display:
            none;

        position:
            absolute;

        top:
            75px;

        left:
            14px;

        right:
            14px;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            3px;

        padding:
            15px;

        background:
            rgba(5,8,22,.98);

        border:
            1px solid
            rgba(255,255,255,.10);

        border-radius:
            17px;

        box-shadow:
            0 20px 50px
            rgba(0,0,0,.3);
    }


    .nav-links.active {

        display:
            flex;
    }


    .nav-links a {

        padding:
            10px;
    }


    .nav-button {

        text-align:
            center;
    }


    /* HERO */

    .hero {

        padding:
            130px 0 70px;
    }


    .hero h1 {

        font-size:
            45px;

        letter-spacing:
            -2px;
    }


    .hero-description {

        font-size:
            16px;
    }


    .dashboard {

        transform:
            none;

        padding:
            16px;
    }


    .floating-one {

        left:
            0;

        bottom:
            -25px;
    }


    .floating-two {

        right:
            0;

        top:
            -25px;
    }


    .hero-stats {

        gap:
            25px;
    }


    /* SECTIONS */

    section {

        padding:
            75px 0;
    }


    .section-heading h2 {

        font-size:
            35px;

        letter-spacing:
            -1.5px;
    }


    /* TRUST */

    .trust-inner {

        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .trust-items {

        gap:
            18px;
    }


    /* SERVICES */

    .services-grid {

        grid-template-columns:
            1fr;

        gap:
            18px;
    }


    .service-card {

        min-height:
            340px;

        padding:
            30px;
    }


    .service-icon {

        width:
            65px;

        height:
            65px;

        margin-bottom:
            30px;
    }


    .service-card h3 {

        font-size:
            20px;
    }


    .service-card p {

        font-size:
            14px;
    }


    /* ABOUT */

    .about-grid {

        grid-template-columns:
            1fr;

        gap:
            40px;
    }


    .stats-grid {

        grid-template-columns:
            1fr 1fr;
    }


    /* SOLUTIONS */

    .solution-grid {

        grid-template-columns:
            1fr;
    }


    .solution-list {

        grid-template-columns:
            1fr;
    }


    /* PROCESS */

    .process-grid {

        grid-template-columns:
            1fr;
    }


    /* INDUSTRIES */

    .industry-grid {

        grid-template-columns:
            1fr 1fr;
    }


    /* TECHNOLOGY */

    .tech-grid {

        gap:
            8px;
    }


    .tech {

        padding:
            10px 13px;
    }


    /* CTA */

    .cta-box {

        padding:
            55px 20px;
    }


    /* FOOTER */

    .footer-grid {

        grid-template-columns:
            1fr;

        gap:
            35px;
    }


    .footer-bottom {

        flex-direction:
            column;

        gap:
            10px;
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 420px) {


    .logo-name {

        font-size:
            17px;
    }


    .logo-image {

        width:
            42px;

        height:
            42px;
    }


    .hero h1 {

        font-size:
            39px;
    }


    .metrics {

        grid-template-columns:
            1fr;
    }


    .stats-grid {

        grid-template-columns:
            1fr;
    }


    .industry-grid {

        grid-template-columns:
            1fr;
    }
    

}
/* =====================================================
   SERVICES MEGA MENU
===================================================== */

.services-menu {
    position: relative;
}


/* SERVICES LINK */

.services-link {
    display: flex;
    align-items: center;
    gap: 6px;
}


.dropdown-arrow {
    display: inline-block;
    font-size: 14px;
    line-height: 1;
    transition: transform .3s ease;
}


/* Rotate arrow */

.services-menu:hover .dropdown-arrow {
    transform: rotate(180deg);
}


/* =====================================================
   DROPDOWN CONTAINER
===================================================== */

.services-dropdown {

    position: absolute;

    top: 100%;
    padding-top: 18px;
    background: transparent;
    border: none;
    box-shadow: none;

    left: 50%;

    width: 900px;

    transform:
        translateX(-50%)
        translateY(10px);

    background: #ffffff;

    border: 1px solid #e5ebf5;

    border-radius: 18px;

    box-shadow:
        0 25px 70px rgba(8, 45, 105, .16);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s ease;

    z-index: 9999;

}


/* Small top arrow */

.services-dropdown::before {

    content: "";

    position: absolute;

    top: -7px;

    left: 50%;

    width: 14px;

    height: 14px;

    background: #ffffff;

    border-left: 1px solid #e5ebf5;

    border-top: 1px solid #e5ebf5;

    transform: translateX(-50%) rotate(45deg);

}


/* SHOW MENU */

.services-menu:hover .services-dropdown {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateX(-50%)
        translateY(0);

}


/* =====================================================
   THREE COLUMNS
===================================================== */

.services-dropdown-inner {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    padding: 28px 25px 24px;

    gap: 10px;

}


/* Vertical separators */

.services-column {

    padding:
        0 20px;

    border-right:
        1px solid #edf1f7;
}


.services-column:first-child {
    padding-left: 5px;
}


.services-column:last-child {

    border-right: none;

    padding-right: 5px;
}


/* =====================================================
   COLUMN TITLE
===================================================== */

.services-column-title {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 15px;

    color: #123f86;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.3px;

}


.service-title-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 24px;

    height: 24px;

    border-radius: 7px;

    background:
        linear-gradient(
            135deg,
            #e9f4ff,
            #edfaef
        );

    color: #1264d8;

    font-size: 10px;

}


/* =====================================================
   SERVICE ITEMS
===================================================== */

.service-menu-item {

    display: flex;

    align-items: flex-start;

    gap: 11px;

    padding: 10px 8px;

    margin-bottom: 2px;

    border-radius: 10px;

    text-decoration: none;

    transition:
        background .25s ease,
        transform .25s ease;

}


.service-menu-item:hover {

    background:
        linear-gradient(
            90deg,
            #f2f7ff,
            #f5fbf6
        );

    transform:
        translateX(3px);

}


/* =====================================================
   SERVICE ICON
===================================================== */

.service-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: 34px;

    height: 34px;

    border-radius: 9px;

    background:
        #eef5ff;

    color: #1264d8;

    font-size: 15px;

    transition:
        .25s ease;

}


.service-menu-item:hover .service-icon {

    background:
        linear-gradient(
            135deg,
            #1264d8,
            #58b52b
        );

    color: #ffffff;

}


/* =====================================================
   SERVICE TEXT
===================================================== */

.service-menu-item strong {

    display: block;

    margin-top: 2px;

    margin-bottom: 3px;

    color: #102342;

    font-size: 11.5px;

    font-weight: 700;

    line-height: 1.3;

}


.service-menu-item small {

    display: block;

    color: #78869c;

    font-size: 9.5px;

    line-height: 1.4;

}


/* =====================================================
   BOTTOM CTA
===================================================== */

.services-dropdown-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        16px 25px;

    border-top:
        1px solid #edf1f7;

    background:
        linear-gradient(
            90deg,
            #f7faff,
            #f8fcf8
        );

    border-radius:
        0 0 18px 18px;

}


/* Footer text */

.services-footer-text {

    display: flex;

    align-items: center;

    gap: 10px;

}


.footer-dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #58b52b;

    box-shadow:
        0 0 0 5px rgba(88,181,43,.10);

}


.services-footer-text strong {

    display: block;

    color: #102342;

    font-size: 11px;

    margin-bottom: 2px;

}


.services-footer-text small {

    display: block;

    color: #77849a;

    font-size: 9.5px;

}


/* =====================================================
   LET'S TALK BUTTON
===================================================== */

.services-footer-btn {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding:
        9px 13px 9px 16px;

    border-radius: 8px;

    background:
        #1264d8;

    color: #ffffff;

    font-size: 10px;

    font-weight: 700;

    text-decoration: none;

    transition:
        .25s ease;

}


.services-footer-btn span {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 23px;

    height: 23px;

    border-radius: 6px;

    background:
        rgba(255,255,255,.15);

    font-size: 14px;

}


.services-footer-btn:hover {

    background: #0b4fac;

    transform:
        translateY(-2px);

}


/* =====================================================
   DESKTOP LARGE
===================================================== */

@media (min-width: 1200px) {

    .services-dropdown {
        width: 980px;
    }

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1100px) {

    .services-dropdown {

        width: 760px;

    }

    .services-dropdown-inner {

        padding: 22px 15px;

    }

    .services-column {

        padding:
            0 12px;

    }

    .service-menu-item strong {

        font-size: 10.5px;

    }

    .service-menu-item small {

        font-size: 8.5px;

    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 768px) {

    .services-dropdown {

        position: static;

        width: 100%;

        transform: none;

        margin-top: 10px;

        box-shadow: none;

        border-radius: 12px;

    }


    .services-menu:hover .services-dropdown {

        transform: none;

    }


    .services-dropdown::before {

        display: none;

    }


    .services-dropdown-inner {

        grid-template-columns: 1fr;

        gap: 10px;

    }


    .services-column {

        padding: 12px 0;

        border-right: none;

        border-bottom:
            1px solid #edf1f7;

    }


    .services-column:last-child {

        border-bottom: none;

    }


    .services-dropdown-footer {

        flex-direction: column;

        align-items: flex-start;

    }


    .services-footer-btn {

        width: 100%;

        justify-content: center;

    }

}

/* =====================================================
   SOLUTIONS MEGA MENU
===================================================== */

.solutions-menu {
    position: relative;
}


/* =====================================================
   SOLUTIONS LINK
===================================================== */

.solutions-link {
    display: flex;
    align-items: center;
    gap: 6px;
}


.solutions-menu .dropdown-arrow {
    display: inline-block;

    font-size: 14px;

    line-height: 1;

    transition:
        transform .25s ease;
}


.solutions-menu:hover .dropdown-arrow {
    transform: rotate(180deg);
}


/* =====================================================
   INVISIBLE HOVER BRIDGE
===================================================== */

.solutions-menu::after {

    content: "";

    position: absolute;

    left: -15px;
    right: -15px;

    top: 100%;

    height: 15px;

    background: transparent;

    z-index: 9998;
}


/* =====================================================
   DROPDOWN
===================================================== */

.solutions-dropdown {

    position: absolute;

    top: calc(100% + 5px);

    left: 50%;

    width: 980px;

    transform:
        translateX(-50%)
        translateY(8px);

    background: #ffffff;

    border:
        1px solid #e4eaf3;

    border-radius: 18px;

    box-shadow:
        0 25px 70px
        rgba(7, 43, 100, .16);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    z-index: 9999;

    transition:
        opacity .18s ease,
        transform .18s ease,
        visibility .18s ease;

}


/* =====================================================
   SHOW DROPDOWN
===================================================== */

.solutions-menu:hover .solutions-dropdown {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateX(-50%)
        translateY(0);

}


/* =====================================================
   TOP ARROW
===================================================== */

.solutions-dropdown::before {

    content: "";

    position: absolute;

    top: -7px;

    left: 50%;

    width: 14px;

    height: 14px;

    background: #ffffff;

    border-left:
        1px solid #e4eaf3;

    border-top:
        1px solid #e4eaf3;

    transform:
        translateX(-50%)
        rotate(45deg);

}


/* =====================================================
   THREE COLUMNS
===================================================== */

.solutions-dropdown-inner {

    display: grid;

    grid-template-columns:
        1.25fr .85fr 1fr;

    gap: 0;

    padding:
        27px 25px 25px;

}


/* =====================================================
   COLUMN
===================================================== */

.solutions-column {

    padding:
        0 20px;

    border-right:
        1px solid #edf1f6;
}


.solutions-column:first-child {

    padding-left: 5px;

}


.solutions-column:last-child {

    padding-right: 5px;

    border-right: none;

}


/* =====================================================
   COLUMN TITLE
===================================================== */

.solutions-column-title {

    display: flex;

    align-items: center;

    gap: 9px;

    min-height: 30px;

    margin-bottom: 15px;

    color: #1264d8;

    font-size: 9.5px;

    font-weight: 800;

    letter-spacing: 1.1px;

}


.solutions-title-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 27px;

    height: 27px;

    flex-shrink: 0;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #eaf3ff,
            #eef9ed
        );

    color: #1264d8;

    font-size: 12px;

}


/* =====================================================
   SOLUTION ITEM
===================================================== */

.solution-menu-item {

    display: flex;

    align-items: center;

    gap: 11px;

    padding:
        9px 7px;

    margin-bottom: 2px;

    border-radius: 10px;

    text-decoration: none;

    transition:
        background .22s ease,
        transform .22s ease;

}


.solution-menu-item:hover {

    background:
        linear-gradient(
            90deg,
            #f1f6ff,
            #f4faf3
        );

    transform:
        translateX(3px);

}


/* =====================================================
   ICON BOX
===================================================== */

.solution-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 38px;

    height: 38px;

    flex-shrink: 0;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #eef5ff,
            #f0faf0
        );

    border:
        1px solid #e4edf8;

    transition:
        .25s ease;

}


.solution-icon img {

    width: 23px;

    height: 23px;

    object-fit: contain;

}


/* Hover icon */

.solution-menu-item:hover .solution-icon {

    background:
        linear-gradient(
            135deg,
            #1264d8,
            #58b52b
        );

    border-color:
        transparent;

}


/* =====================================================
   TEXT
===================================================== */

.solution-text {

    min-width: 0;

}


.solution-text strong {

    display: block;

    color: #102342;

    font-size: 10.5px;

    font-weight: 700;

    line-height: 1.35;

    margin-bottom: 3px;

}


.solution-text small {

    display: block;

    color: #7b879b;

    font-size: 8.5px;

    line-height: 1.35;

}


.solution-menu-item:hover .solution-text strong {

    color: #1264d8;

}


/* =====================================================
   FEATURE BOX
===================================================== */

.solutions-feature {

    display: flex;

    align-items: flex-start;

    gap: 11px;

    margin-top: 18px;

    padding:
        15px;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #f2f7ff,
            #f4faf2
        );

    border:
        1px solid #e5edf7;

}


.feature-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 30px;

    height: 30px;

    flex-shrink: 0;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #1264d8,
            #58b52b
        );

    color: #ffffff;

    font-size: 12px;

}


.solutions-feature strong {

    display: block;

    margin-bottom: 5px;

    color: #102342;

    font-size: 9.5px;

}


.solutions-feature p {

    margin: 0;

    color: #748197;

    font-size: 8px;

    line-height: 1.5;

}


/* =====================================================
   VIEW ALL SOLUTIONS
===================================================== */

.view-all-solutions {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 14px;

    padding:
        10px 12px;

    border-radius: 8px;

    background: #f4f8ff;

    color: #1264d8;

    text-decoration: none;

    font-size: 9.5px;

    font-weight: 700;

    transition:
        .25s ease;

}


.view-all-solutions span {

    font-size: 15px;

    transition:
        transform .25s ease;

}


.view-all-solutions:hover {

    background: #1264d8;

    color: #ffffff;

}


.view-all-solutions:hover span {

    transform:
        translateX(3px);

}


/* =====================================================
   FOOTER
===================================================== */

.solutions-dropdown-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        15px 25px;

    border-top:
        1px solid #edf1f6;

    background:
        linear-gradient(
            90deg,
            #f7faff,
            #f8fcf7
        );

    border-radius:
        0 0 18px 18px;

}


/* Footer left */

.solutions-footer-left {

    display: flex;

    align-items: center;

    gap: 10px;

}


.footer-status {

    width: 8px;

    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #58b52b;

    box-shadow:
        0 0 0 5px
        rgba(88,181,43,.10);
}


.solutions-footer-left strong {

    display: block;

    color: #102342;

    font-size: 10px;

    margin-bottom: 2px;

}


.solutions-footer-left small {

    display: block;

    color: #7a879a;

    font-size: 8.5px;

}


/* =====================================================
   CONTACT BUTTON
===================================================== */

.solutions-contact-btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding:
        9px 11px 9px 14px;

    border-radius: 8px;

    background:
        #1264d8;

    color: #ffffff;

    text-decoration: none;

    font-size: 9px;

    font-weight: 700;

    transition:
        .25s ease;

}


.solutions-contact-btn span {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 23px;

    height: 23px;

    border-radius: 6px;

    background:
        rgba(255,255,255,.15);

    font-size: 13px;

}


.solutions-contact-btn:hover {

    background: #0d4fae;

    transform:
        translateY(-2px);

}


/* =====================================================
   LARGE DESKTOP
===================================================== */

@media (min-width: 1200px) {

    .solutions-dropdown {
        width: 1020px;
    }

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1100px) {

    .solutions-dropdown {

        width: 850px;

    }


    .solutions-dropdown-inner {

        padding:
            22px 15px;

    }


    .solutions-column {

        padding:
            0 12px;

    }


    .solution-text strong {

        font-size: 9.5px;

    }


    .solution-text small {

        font-size: 8px;

    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 768px) {

    .solutions-dropdown {

        position: static;

        width: 100%;

        transform: none;

        margin-top: 10px;

        box-shadow: none;

        border-radius: 12px;

    }


    .solutions-menu:hover .solutions-dropdown {

        transform: none;

    }


    .solutions-dropdown::before {

        display: none;

    }


    .solutions-dropdown-inner {

        grid-template-columns: 1fr;

        gap: 5px;

    }


    .solutions-column {

        padding:
            15px 0;

        border-right: none;

        border-bottom:
            1px solid #edf1f6;

    }


    .solutions-column:first-child {

        padding-left: 0;

    }


    .solutions-column:last-child {

        padding-right: 0;

        border-bottom: none;

    }


    .solutions-dropdown-footer {

        flex-direction: column;

        align-items: flex-start;

    }


    .solutions-contact-btn {

        width: 100%;

        justify-content: center;

    }
}

 * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }


        html {
            scroll-behavior: smooth;
        }


        body {

            font-family: "Inter", sans-serif;

            color: #17233b;

            background: #ffffff;

            line-height: 1.7;
        }


        a {
            color: inherit;
            text-decoration: none;
        }


        .container {

            width: min(1180px, calc(100% - 40px));

            margin: auto;
        }


        /* =====================================================
           HEADER
        ===================================================== */

        .site-header {

            position: sticky;

            top: 0;

            z-index: 1000;

            background: #ffffff;

            border-bottom:
                1px solid #edf1f6;

            box-shadow:
                0 5px 25px rgba(16, 35, 66, .05);
        }


        .header-inner {

            height: 78px;

            display: flex;

            align-items: center;

            justify-content: space-between;
        }


        /* LOGO */

        .logo {

            display: flex;

            align-items: center;

            gap: 10px;
        }


        .logo-mark {

            width: 42px;

            height: 42px;

            display: flex;

            align-items: center;

            justify-content: center;

            border-radius: 11px;

            background:
                linear-gradient(
                    135deg,
                    #1264d8,
                    #58b52b
                );

            color: #ffffff;

            font-size: 18px;

            font-weight: 800;
        }


        .logo-text {

            font-family: "Manrope", sans-serif;

            font-size: 20px;

            font-weight: 800;

            letter-spacing: -.5px;
        }


        .logo-text .blue {
            color: #1264d8;
        }


        .logo-text .green {
            color: #58b52b;
        }


        /* NAVIGATION */

        .main-nav {

            display: flex;

            align-items: center;

            gap: 30px;
        }


        .main-nav a {

            color: #263653;

            font-size: 13px;

            font-weight: 600;

            transition: .25s ease;
        }


        .main-nav a:hover {

            color: #1264d8;
        }


        .header-button {

            padding:
                10px 18px;

            border-radius: 9px;

            background: #1264d8;

            color: #ffffff !important;

            box-shadow:
                0 8px 20px
                rgba(18,100,216,.18);
        }


        .header-button:hover {

            background: #0d50ae;
        }


        /* =====================================================
           HERO
        ===================================================== */

        .policy-hero {

            position: relative;
            padding-top: 45px;
            padding-bottom: 80px;
            
            overflow: hidden;

            

            background:
                linear-gradient(
                    135deg,
                    #f4f8ff 0%,
                    #ffffff 55%,
                    #f5fbf4 100%
                );

            border-bottom:
                1px solid #edf1f6;
        }


        .policy-hero::before {

            content: "";

            position: absolute;

            width: 400px;

            height: 400px;

            border-radius: 50%;

            right: -180px;

            top: -200px;

            background:
                rgba(18,100,216,.07);
        }


        .policy-hero::after {

            content: "";

            position: absolute;

            width: 280px;

            height: 280px;

            border-radius: 50%;

            left: -140px;

            bottom: -180px;

            background:
                rgba(88,181,43,.07);
        }


        .policy-hero-content {

            position: relative;

            z-index: 2;

            max-width: 800px;
        }


        .eyebrow {

            display: inline-flex;

            align-items: center;

            gap: 8px;

            margin-bottom: 16px;

            color: #1264d8;

            font-size: 11px;

            font-weight: 800;

            letter-spacing: 1.8px;
        }


        .eyebrow span {

            width: 8px;

            height: 8px;

            border-radius: 50%;

            background: #58b52b;

            box-shadow:
                0 0 0 5px
                rgba(88,181,43,.10);
        }


        .policy-hero h1 {

            margin-bottom: 18px;

            font-family: "Manrope", sans-serif;

            color: #102342;

            font-size:
                clamp(38px, 5vw, 60px);

            line-height: 1.08;

            letter-spacing: -2.5px;
        }


        .policy-hero h1 span {

            background:
                linear-gradient(
                    90deg,
                    #1264d8,
                    #58b52b
                );

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;
        }


        .policy-hero p {

            max-width: 720px;

            color: #65738a;

            font-size: 16px;

            line-height: 1.8;
        }


        .last-updated {

            display: inline-flex;

            margin-top: 25px;

            padding:
                8px 13px;

            border-radius: 8px;

            background: #ffffff;

            border:
                1px solid #e4eaf3;

            color: #718096;

            font-size: 11px;

            font-weight: 600;
        }


        /* =====================================================
           POLICY LAYOUT
        ===================================================== */

        .policy-section {

            padding:
                10px 0 100px;
        }


        .policy-layout {

            display: grid;

            grid-template-columns:
                240px 1fr;

            gap: 65px;

            align-items: start;
        }


        /* =====================================================
           SIDEBAR
        ===================================================== */

        .policy-sidebar {

            position: sticky;

            top: 105px;

            padding:
                20px;

            border:
                1px solid #e6ebf3;

            border-radius: 14px;

            background: #f9fbfe;
        }


        .policy-sidebar-title {

            margin-bottom: 13px;

            color: #1264d8;

            font-size: 10px;

            font-weight: 800;

            letter-spacing: 1.2px;
        }


        .policy-sidebar a {

            display: block;

            padding:
                7px 0;

            color: #6d7a90;

            font-size: 11px;

            line-height: 1.4;

            transition: .2s ease;
        }


        .policy-sidebar a:hover {

            color: #1264d8;

            transform:
                translateX(3px);
        }


        /* =====================================================
           POLICY CONTENT
        ===================================================== */

        .policy-content {

            max-width: 820px;
        }


        .policy-content section {

            scroll-margin-top: 110px;

            margin-bottom: -25px;
        }


        .policy-content h2 {

            margin-bottom: 15px;

            color: #102342;

            font-family: "Manrope", sans-serif;

            font-size: 25px;

            line-height: 1.3;

            letter-spacing: -.5px;
        }


        .policy-content h3 {

            margin:
                25px 0 9px;

            color: #263653;

            font-size: 16px;

            font-weight: 700;
        }


        .policy-content p {

            margin-bottom: 14px;

            color: #647187;

            font-size: 14px;

            line-height: 1.85;
        }


        .policy-content ul {

            margin:
                12px 0 18px;

            padding-left: 20px;
        }


        .policy-content li {

            margin-bottom: 8px;

            color: #647187;

            font-size: 14px;

            line-height: 1.75;
        }


        .policy-content strong {

            color: #263653;
        }


        /* =====================================================
           INFO BOX
        ===================================================== */

        .policy-info {

            margin:
                20px 0 30px;

            padding:
                20px 22px;

            border-left:
                4px solid #1264d8;

            border-radius:
                0 10px 10px 0;

            background:
                linear-gradient(
                    90deg,
                    #f1f6ff,
                    #f8fbff
                );
        }


        .policy-info p {

            margin: 0;

            font-size: 13px;
        }


        /* =====================================================
           CONTACT BOX
        ===================================================== */

        .privacy-contact {

            margin-top: 25px;

            padding:
                28px;

            border-radius: 16px;

            background:
                linear-gradient(
                    135deg,
                    #061f54,
                    #1264d8
                );

            box-shadow:
                0 18px 45px
                rgba(18,100,216,.18);
        }


        .privacy-contact h3 {

            margin: 0 0 8px;

            color: #ffffff;

            font-family: "Manrope", sans-serif;

            font-size: 19px;
        }


        .privacy-contact p {

            margin-bottom: 15px;

            color:
                rgba(255,255,255,.72);

            font-size: 13px;
        }


        .privacy-contact a {

            display: inline-block;

            color: #ffffff;

            font-size: 13px;

            font-weight: 700;

            text-decoration: underline;
        }


        /* =====================================================
           FOOTER
        ===================================================== */

        .site-footer {

            padding:
                45px 0 25px;

            background: #071a3b;

            color: #ffffff;
        }


        .footer-top {

            display: flex;

            justify-content: space-between;

            gap: 40px;

            padding-bottom: 30px;

            border-bottom:
                1px solid
                rgba(255,255,255,.10);
        }


        .footer-brand {

            max-width: 400px;
        }


        .footer-brand h3 {

            margin-bottom: 10px;

            font-family: "Manrope", sans-serif;

            font-size: 20px;
        }


        .footer-brand .blue {
            color: #5ba2ff;
        }


        .footer-brand .green {
            color: #58b52b;
        }


        .footer-brand p {

            color:
                rgba(255,255,255,.55);

            font-size: 12px;

            line-height: 1.7;
        }


        .footer-links {

            display: flex;

            gap: 25px;

            align-items: flex-start;
        }


        .footer-links a {

            color:
                rgba(255,255,255,.65);

            font-size: 11px;

            transition: .2s ease;
        }


        .footer-links a:hover {

            color: #ffffff;
        }


        .footer-bottom {

            display: flex;

            justify-content: space-between;

            padding-top: 20px;

            color:
                rgba(255,255,255,.4);

            font-size: 10px;
        }


        /* =====================================================
           MOBILE
        ===================================================== */

        @media (max-width: 800px) {

            .main-nav {
                display: none;
            }


            .header-inner {
                height: 68px;
            }


            .policy-hero {
                padding:
                    60px 0 55px;
            }


            .policy-hero h1 {
                font-size: 40px;
            }


            .policy-layout {

                grid-template-columns: 1fr;

                gap: 30px;
            }


            .policy-sidebar {

                position: static;

            }


            .policy-sidebar a {

                display: inline-block;

                margin-right: 14px;
            }


            .footer-top {

                flex-direction: column;
            }


            .footer-links {

                flex-wrap: wrap;
            }


            .footer-bottom {

                flex-direction: column;

                gap: 8px;
            }

        }


        @media (max-width: 500px) {

            .container {

                width:
                    min(100% - 28px, 1180px);
            }


            .policy-hero h1 {

                font-size: 35px;

                letter-spacing: -1.5px;
            }


            .policy-content h2 {

                font-size: 22px;
            }


            .policy-content p,
            .policy-content li {

                font-size: 13px;
            }

        }

        /* ================================
   TERMS OF SERVICE
================================ */

.terms-page {
    background: #fff;
}

/* Hero */

.terms-hero {
    position: relative;
    overflow: hidden;
    padding: 45px 0 75px;
    background:
        radial-gradient(circle at 90% 10%,
        rgba(18,100,216,.10),
        transparent 32%),
        linear-gradient(135deg,
        #f5f9ff 0%,
        #ffffff 58%,
        #f4fff0 100%);
}

.terms-hero::before {
    content: "";
    position: absolute;
    width: 330px;
    height: 330px;
    border-radius: 50%;
    background: rgba(18,100,216,.08);
    top: -180px;
    right: -80px;
}

.terms-hero::after {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: rgba(88,181,43,.07);
    bottom: -160px;
    left: -80px;
}

.policy-hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border: 1px solid #dce7f7;
    border-radius: 30px;
    background: rgba(255,255,255,.75);
    color: #1264d8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

.eyebrow span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #58b52b;
}

.terms-hero h1 {
    margin: 24px 0 18px;
    font-size: clamp(42px, 5vw, 68px);
    line-height: 1.05;
    color: #102a52;
    font-weight: 800;
}

.gradient-text {
    background: linear-gradient(
        90deg,
        #1264d8,
        #58b52b
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.terms-hero p {
    max-width: 720px;
    margin: 0;
    font-size: 18px;
    line-height: 1.75;
    color: #60718c;
}

.last-updated {
    display: inline-block;
    margin-top: 25px;
    padding: 10px 16px;
    border: 1px solid #dce7f7;
    border-radius: 10px;
    background: rgba(255,255,255,.8);
    color: #60718c;
    font-size: 13px;
    font-weight: 600;
}


/* ================================
   CONTENT AREA
================================ */

.policy-content-section {
    padding: 10px 0 100px;
    background: #fff;
}

.policy-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 70px;
    align-items: start;
}


/* Sidebar */

.policy-sidebar {
    position: sticky;
    top: 110px;
    padding: 25px 22px;
    border: 1px solid #e4eaf3;
    border-radius: 18px;
    background: #fbfdff;
}

.sidebar-title {
    margin-bottom: 18px;
    color: #1264d8;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.policy-sidebar a {
    display: block;
    padding: 8px 0;
    color: #667792;
    font-size: 13px;
    line-height: 1.45;
    text-decoration: none;
    transition: .2s ease;
}

.policy-sidebar a:hover {
    color: #1264d8;
    padding-left: 5px;
}


/* Article */

.policy-article {
    max-width: 850px;
}

.policy-article section {
    scroll-margin-top: 120px;
    margin-bottom: 58px;
}

.policy-article h2 {
    margin: 0 0 18px;
    color: #102a52;
    font-size: 28px;
    line-height: 1.25;
    font-weight: 750;
}

.policy-article p {
    margin: 0 0 18px;
    color: #5e6f89;
    font-size: 16px;
    line-height: 1.85;
}

.policy-article ul {
    margin: 10px 0 22px;
    padding-left: 22px;
}

.policy-article li {
    margin-bottom: 10px;
    padding-left: 5px;
    color: #5e6f89;
    font-size: 16px;
    line-height: 1.7;
}

.policy-article li::marker {
    color: #1264d8;
}


/* Contact Card */

.contact-card {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 25px;
    padding: 25px;
    border: 1px solid #dce7f7;
    border-radius: 18px;
    background: linear-gradient(
        135deg,
        #f5f9ff,
        #f7fff3
    );
}

.contact-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(
        135deg,
        #1264d8,
        #58b52b
    );
    color: #fff;
    font-size: 20px;
}

.contact-card h3 {
    margin: 0 0 8px;
    color: #102a52;
    font-size: 18px;
}

.contact-card p {
    margin: 3px 0;
    font-size: 14px;
}

.contact-card a {
    color: #1264d8;
    font-weight: 600;
    text-decoration: none;
}

.contact-card a:hover {
    text-decoration: underline;
}


/* ================================
   RESPONSIVE
================================ */

@media (max-width: 900px) {

    .policy-layout {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .policy-sidebar {
        position: relative;
        top: auto;
    }

    .terms-hero {
        padding: 120px 0 65px;
    }

    .policy-article {
        max-width: 100%;
    }
}


@media (max-width: 600px) {

    .terms-hero {
        padding: 105px 0 55px;
    }

    .terms-hero h1 {
        font-size: 42px;
    }

    .terms-hero p {
        font-size: 16px;
    }

    .policy-content-section {
        padding: 55px 0 70px;
    }

    .policy-article h2 {
        font-size: 24px;
    }

    .policy-article p,
    .policy-article li {
        font-size: 15px;
    }

    .contact-card {
        align-items: flex-start;
    }

}

/* =========================================
   CUSTOM SOFTWARE DEVELOPMENT PAGE
========================================= */

.custom-software-page {
    background: #fff;
    color: #102a52;
}


/* =========================================
   HERO
========================================= */

.csd-hero {
    position: relative;
    overflow: hidden;
    padding: 45px 0 90px;
    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(18,100,216,.12),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #f5f9ff 0%,
            #ffffff 55%,
            #f4fff0 100%
        );
}

.csd-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 70px;
    align-items: center;
}

.csd-hero-content {
    position: relative;
    z-index: 2;
}

.csd-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #1264d8;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.csd-eyebrow span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #58b52b;
}

.csd-hero h1 {
    max-width: 720px;
    margin: 22px 0;
    font-size: clamp(45px, 5.2vw, 72px);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -2px;
    color: #102a52;
}

.gradient-text {
    background: linear-gradient(
        90deg,
        #1264d8,
        #58b52b
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.csd-hero-text {
    max-width: 680px;
    color: #60718c;
    font-size: 18px;
    line-height: 1.8;
}

.csd-hero-buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 32px;
}

.csd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 50px;
    padding: 0 22px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: .25s ease;
}

.csd-btn-primary {
    color: #fff;
    background: linear-gradient(
        135deg,
        #1264d8,
        #087ce2
    );
    box-shadow: 0 12px 25px rgba(18,100,216,.20);
}

.csd-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 32px rgba(18,100,216,.28);
}

.csd-btn-outline {
    color: #1264d8;
    border: 1px solid #cdddf2;
    background: #fff;
}

.csd-btn-outline:hover {
    border-color: #1264d8;
    transform: translateY(-3px);
}

.csd-trust-points {
    display: flex;
    gap: 30px;
    margin-top: 45px;
}

.csd-trust-points div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.csd-trust-points strong {
    color: #1264d8;
    font-size: 13px;
}

.csd-trust-points span {
    color: #70809a;
    font-size: 12px;
}


/* =========================================
   HERO VISUAL
========================================= */

.csd-hero-visual {
    position: relative;
    min-height: 470px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.csd-main-card {
    position: relative;
    z-index: 3;
    width: 390px;
    padding: 27px;
    border: 1px solid rgba(18,100,216,.12);
    border-radius: 24px;
    background: rgba(255,255,255,.92);
    box-shadow:
        0 30px 80px rgba(16,42,82,.15);
}

.csd-card-top {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #657590;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
}

.csd-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #58b52b;
}

.csd-code-lines {
    margin: 30px 0;
}

.code-line {
    height: 10px;
    margin-bottom: 13px;
    border-radius: 10px;
    background: linear-gradient(
        90deg,
        #1264d8,
        #dce8f8
    );
}

.width-90 { width: 90%; }
.width-65 { width: 65%; }
.width-80 { width: 80%; }
.width-50 { width: 50%; }

.csd-dashboard {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.dashboard-box {
    padding: 17px 12px;
    border-radius: 12px;
    background: #f5f9ff;
}

.dashboard-box span {
    display: block;
    margin-bottom: 7px;
    color: #71809a;
    font-size: 10px;
}

.dashboard-box strong {
    color: #1264d8;
    font-size: 20px;
}

.csd-orbit {
    position: absolute;
    border: 1px solid rgba(18,100,216,.12);
    border-radius: 50%;
}

.orbit-one {
    width: 470px;
    height: 470px;
}

.orbit-two {
    width: 350px;
    height: 350px;
    border-color: rgba(88,181,43,.16);
}

.floating-card {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 17px;
    border: 1px solid #e3ebf6;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 15px 40px rgba(16,42,82,.12);
    color: #304b70;
    font-size: 12px;
    font-weight: 700;
}

.floating-card span {
    color: #1264d8;
    font-size: 17px;
}

.floating-card-one {
    top: 55px;
    right: 0;
}

.floating-card-two {
    bottom: 55px;
    left: 0;
}

.floating-card-two span {
    color: #58b52b;
}


/* =========================================
   SECTION COMMON
========================================= */

.csd-intro,
.csd-capabilities,
.csd-process,
.csd-why {
    padding: 100px 0;
}

.csd-section-heading {
    max-width: 800px;
    margin-bottom: 55px;
}

.csd-section-heading.centered {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.csd-section-heading h2 {
    margin: 18px 0;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.12;
    letter-spacing: -1px;
}

.csd-section-heading p {
    color: #657590;
    font-size: 16px;
    line-height: 1.8;
}


/* =========================================
   FEATURES
========================================= */

.csd-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.csd-feature-card {
    position: relative;
    padding: 30px 25px;
    border: 1px solid #e3eaf4;
    border-radius: 18px;
    background: #fff;
    transition: .25s ease;
}

.csd-feature-card:hover {
    transform: translateY(-7px);
    border-color: #cbdcf3;
    box-shadow: 0 18px 45px rgba(16,42,82,.10);
}

.csd-feature-number {
    margin-bottom: 35px;
    color: #1264d8;
    font-size: 12px;
    font-weight: 800;
}

.csd-feature-card h3 {
    margin: 0 0 12px;
    font-size: 18px;
}

.csd-feature-card p {
    margin: 0;
    color: #6a7991;
    font-size: 14px;
    line-height: 1.7;
}


/* =========================================
   CAPABILITIES
========================================= */

.csd-capabilities {
    background: #f7faff;
}

.csd-capability-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.csd-capability-card {
    padding: 32px;
    border: 1px solid #e2eaf4;
    border-radius: 20px;
    background: #fff;
    transition: .25s ease;
}

.csd-capability-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(16,42,82,.10);
}

.capability-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 24px;
    border-radius: 14px;
    background: linear-gradient(
        135deg,
        #1264d8,
        #58b52b
    );
    color: #fff;
    font-size: 20px;
}

.csd-capability-card h3 {
    margin: 0 0 12px;
    color: #102a52;
    font-size: 19px;
}

.csd-capability-card p {
    min-height: 70px;
    margin: 0 0 20px;
    color: #687991;
    font-size: 14px;
    line-height: 1.7;
}

.csd-capability-card span {
    color: #1264d8;
    font-size: 13px;
    font-weight: 800;
}


/* =========================================
   PROCESS
========================================= */

.csd-process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 45px 30px;
}

.csd-process-item {
    position: relative;
    padding-left: 65px;
}

.process-number {
    position: absolute;
    top: 0;
    left: 0;
    color: #1264d8;
    font-size: 14px;
    font-weight: 800;
}

.csd-process-item h3 {
    margin: 0 0 10px;
    color: #102a52;
    font-size: 19px;
}

.csd-process-item p {
    margin: 0;
    color: #6a7991;
    font-size: 14px;
    line-height: 1.7;
}


/* =========================================
   TECHNOLOGY
========================================= */

.csd-technology {
    padding: 20px 0 100px;
}

.csd-tech-box {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 60px;
    padding: 60px;
    border-radius: 28px;
    background:
        linear-gradient(
            135deg,
            #071f49,
            #0d4e9f
        );
    overflow: hidden;
}

.csd-tech-content h2 {
    margin: 18px 0;
    color: #fff;
    font-size: 42px;
}

.csd-tech-content p {
    max-width: 650px;
    color: #c9d8ec;
    line-height: 1.8;
}

.csd-tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.csd-tech-tags span {
    padding: 9px 13px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 30px;
    color: #fff;
    font-size: 12px;
}

.csd-tech-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.csd-tech-stats div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 25px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    background: rgba(255,255,255,.07);
}

.csd-tech-stats strong {
    color: #fff;
    font-size: 18px;
}

.csd-tech-stats span {
    margin-top: 5px;
    color: #b8cbe4;
    font-size: 12px;
}


/* =========================================
   WHY SYNERGIA
========================================= */

.csd-why {
    background: #f8fbff;
}

.csd-why-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 90px;
    align-items: center;
}

.csd-why-grid h2 {
    margin: 18px 0;
    font-size: 45px;
}

.csd-why-grid > div > p {
    color: #657590;
    line-height: 1.8;
}

.csd-why-list {
    display: grid;
    gap: 20px;
}

.csd-why-item {
    display: flex;
    gap: 17px;
    padding: 20px;
    border-radius: 15px;
    background: #fff;
    border: 1px solid #e4ebf4;
}

.csd-why-item > span {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #eef8e9;
    color: #58b52b;
    font-weight: 800;
}

.csd-why-item strong {
    color: #102a52;
    font-size: 15px;
}

.csd-why-item p {
    margin: 5px 0 0;
    color: #71809a;
    font-size: 13px;
    line-height: 1.6;
}


/* =========================================
   CTA
========================================= */

.csd-cta {
    padding: 0 0 100px;
}

.csd-cta-box {
    position: relative;
    overflow: hidden;
    padding: 75px;
    border-radius: 28px;
    background:
        linear-gradient(
            135deg,
            #1264d8 0%,
            #0751b8 60%,
            #58b52b 150%
        );
}

.csd-cta-content {
    position: relative;
    z-index: 2;
    max-width: 760px;
}

.csd-cta .csd-eyebrow {
    color: #dceaff;
}

.csd-cta h2 {
    margin: 18px 0;
    color: #fff;
    font-size: clamp(38px, 4vw, 55px);
}

.csd-cta p {
    max-width: 680px;
    color: #dce9fa;
    font-size: 17px;
    line-height: 1.8;
}

.csd-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 30px;
}

.csd-btn-outline-white {
    color: #fff;
    border: 1px solid rgba(255,255,255,.45);
    background: rgba(255,255,255,.08);
}

.csd-btn-outline-white:hover {
    background: rgba(255,255,255,.15);
    transform: translateY(-3px);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1000px) {

    .csd-hero-grid,
    .csd-tech-box,
    .csd-why-grid {
        grid-template-columns: 1fr;
    }

    .csd-hero-visual {
        min-height: 420px;
    }

    .csd-feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .csd-capability-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .csd-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .csd-tech-box {
        padding: 45px;
    }

}


@media (max-width: 650px) {

    .csd-hero {
        padding: 115px 0 65px;
    }

    .csd-hero h1 {
        font-size: 43px;
        letter-spacing: -1px;
    }

    .csd-hero-text {
        font-size: 16px;
    }

    .csd-hero-visual {
        min-height: 350px;
    }

    .csd-main-card {
        width: 90%;
    }

    .orbit-one {
        width: 350px;
        height: 350px;
    }

    .orbit-two {
        width: 270px;
        height: 270px;
    }

    .floating-card {
        display: none;
    }

    .csd-trust-points {
        gap: 15px;
        flex-wrap: wrap;
    }

    .csd-intro,
    .csd-capabilities,
    .csd-process,
    .csd-why {
        padding: 70px 0;
    }

    .csd-feature-grid,
    .csd-capability-grid,
    .csd-process-grid {
        grid-template-columns: 1fr;
    }

    .csd-tech-box {
        padding: 35px 25px;
    }

    .csd-tech-content h2,
    .csd-why-grid h2 {
        font-size: 34px;
    }

    .csd-tech-stats {
        grid-template-columns: 1fr 1fr;
    }

    .csd-cta-box {
        padding: 45px 25px;
    }

}
/* =========================================
   ERP SOLUTIONS PAGE
========================================= */

.erp-page {
    background: #fff;
    color: #102a52;
}


/* =========================================
   HERO
========================================= */

.erp-hero {
    position: relative;
    overflow: hidden;
    padding: 45px 0 90px;

    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(18,100,216,.12),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #f5f9ff 0%,
            #ffffff 55%,
            #f4fff0 100%
        );
}

.erp-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.erp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: #1264d8;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.erp-eyebrow span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #58b52b;
}

.erp-hero h1 {
    max-width: 700px;
    margin: 22px 0;

    font-size: clamp(44px, 5vw, 70px);
    line-height: 1.06;
    letter-spacing: -2px;
    font-weight: 800;
}

.gradient-text {
    background: linear-gradient(
        90deg,
        #1264d8,
        #58b52b
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.erp-hero-content > p {
    max-width: 670px;

    color: #60718c;
    font-size: 18px;
    line-height: 1.8;
}

.erp-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}

.erp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    min-height: 50px;
    padding: 0 22px;

    border-radius: 10px;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;

    transition: .25s ease;
}

.erp-btn-primary {
    color: #fff;

    background: linear-gradient(
        135deg,
        #1264d8,
        #087ce2
    );

    box-shadow:
        0 12px 28px rgba(18,100,216,.22);
}

.erp-btn-primary:hover {
    transform: translateY(-3px);
}

.erp-btn-outline {
    color: #1264d8;

    border: 1px solid #cbdcf2;
    background: #fff;
}

.erp-btn-outline:hover {
    border-color: #1264d8;
    transform: translateY(-3px);
}

.erp-highlights {
    display: flex;
    gap: 32px;
    margin-top: 45px;
}

.erp-highlights div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.erp-highlights strong {
    color: #1264d8;
    font-size: 13px;
}

.erp-highlights span {
    color: #71809a;
    font-size: 12px;
}


/* =========================================
   HERO DASHBOARD
========================================= */

.erp-hero-visual {
    position: relative;

    min-height: 470px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.erp-circle {
    position: absolute;
    border: 1px solid rgba(18,100,216,.12);
    border-radius: 50%;
}

.circle-one {
    width: 470px;
    height: 470px;
}

.circle-two {
    width: 350px;
    height: 350px;

    border-color: rgba(88,181,43,.16);
}

.erp-dashboard {
    position: relative;
    z-index: 3;

    width: 430px;

    padding: 25px;

    border: 1px solid #e0e9f5;
    border-radius: 24px;

    background: rgba(255,255,255,.95);

    box-shadow:
        0 30px 80px rgba(16,42,82,.16);
}

.erp-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.erp-dashboard-header small {
    display: block;

    margin-bottom: 5px;

    color: #8391a7;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

.erp-dashboard-header strong {
    color: #102a52;
    font-size: 17px;
}

.erp-live {
    display: flex;
    align-items: center;
    gap: 6px;

    color: #58b52b;

    font-size: 9px;
    font-weight: 800;
}

.erp-live span {
    width: 7px;
    height: 7px;

    border-radius: 50%;
    background: #58b52b;
}

.erp-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;

    margin-top: 25px;
}

.erp-stat {
    padding: 15px 12px;

    border-radius: 12px;
    background: #f5f9ff;
}

.erp-stat span {
    display: block;

    color: #71809a;
    font-size: 10px;
}

.erp-stat strong {
    display: block;

    margin: 7px 0;

    color: #1264d8;
    font-size: 17px;
}

.erp-stat small {
    color: #58b52b;
    font-size: 9px;
    font-weight: 700;
}

.erp-chart {
    margin-top: 20px;
    padding: 18px;

    border-radius: 14px;

    background: #f8fbff;
}

.erp-chart-title {
    color: #60718c;
    font-size: 11px;
    font-weight: 700;
}

.erp-bars {
    height: 110px;

    display: flex;
    align-items: flex-end;
    gap: 12px;

    margin-top: 15px;
}

.erp-bars span {
    flex: 1;

    min-height: 10px;

    border-radius: 5px 5px 2px 2px;

    background: linear-gradient(
        180deg,
        #1264d8,
        #7db0ed
    );
}

.erp-module-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;

    margin-top: 15px;
}

.erp-module-row div {
    padding: 9px 5px;

    border-radius: 8px;

    background: #f2f7fd;

    color: #61738f;

    text-align: center;

    font-size: 9px;
    font-weight: 700;
}

.erp-floating-card {
    position: absolute;
    z-index: 5;

    display: flex;
    align-items: center;
    gap: 9px;

    padding: 13px 17px;

    border: 1px solid #e1e9f3;
    border-radius: 12px;

    background: #fff;

    box-shadow:
        0 15px 40px rgba(16,42,82,.12);

    color: #304b70;

    font-size: 12px;
    font-weight: 700;
}

.erp-floating-card span {
    color: #1264d8;
    font-size: 16px;
}

.erp-float-one {
    top: 55px;
    right: 0;
}

.erp-float-two {
    bottom: 55px;
    left: 0;
}

.erp-float-two span {
    color: #58b52b;
}


/* =========================================
   COMMON SECTIONS
========================================= */

.erp-intro,
.erp-modules,
.erp-features,
.erp-industries,
.erp-process {
    padding: 100px 0;
}

.erp-section-heading {
    max-width: 800px;
    margin-bottom: 55px;
}

.erp-section-heading.centered {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.erp-section-heading h2 {
    margin: 18px 0;

    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.12;
    letter-spacing: -1px;
}

.erp-section-heading p {
    color: #657590;
    font-size: 16px;
    line-height: 1.8;
}


/* =========================================
   BENEFITS
========================================= */

.erp-benefit-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.erp-benefit-card {
    padding: 30px 25px;

    border: 1px solid #e2eaf4;
    border-radius: 18px;

    background: #fff;

    transition: .25s ease;
}

.erp-benefit-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 18px 45px rgba(16,42,82,.10);
}

.erp-benefit-number {
    margin-bottom: 35px;

    color: #1264d8;

    font-size: 12px;
    font-weight: 800;
}

.erp-benefit-card h3 {
    margin: 0 0 12px;

    color: #102a52;
    font-size: 18px;
}

.erp-benefit-card p {
    margin: 0;

    color: #6a7991;

    font-size: 14px;
    line-height: 1.7;
}


/* =========================================
   MODULES
========================================= */

.erp-modules {
    background: #f7faff;
}

.erp-module-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.erp-module-card {
    padding: 28px;

    border: 1px solid #e1e9f3;
    border-radius: 19px;

    background: #fff;

    transition: .25s ease;
}

.erp-module-card:hover {
    transform: translateY(-6px);

    border-color: #cbdcf3;

    box-shadow:
        0 18px 45px rgba(16,42,82,.10);
}

.erp-module-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 47px;
    height: 47px;

    margin-bottom: 22px;

    border-radius: 13px;

    background: linear-gradient(
        135deg,
        #1264d8,
        #58b52b
    );

    color: #fff;

    font-size: 19px;
    font-weight: 700;
}

.erp-module-card h3 {
    margin: 0 0 12px;

    color: #102a52;
    font-size: 17px;
}

.erp-module-card p {
    min-height: 90px;

    margin: 0 0 20px;

    color: #687991;

    font-size: 13px;
    line-height: 1.7;
}

.erp-module-card > span {
    color: #1264d8;

    font-size: 12px;
    font-weight: 800;
}


/* =========================================
   FEATURES
========================================= */

.erp-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: center;
}

.erp-feature-content h2 {
    margin: 18px 0;

    font-size: 46px;
}

.erp-feature-content > p {
    max-width: 650px;

    color: #657590;

    line-height: 1.8;
}

.erp-feature-list {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 15px;

    margin-top: 30px;
}

.erp-feature-list div {
    display: flex;
    align-items: center;
    gap: 10px;

    color: #304b70;

    font-size: 13px;
}

.erp-feature-list span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 25px;
    height: 25px;

    border-radius: 50%;

    background: #edf8e8;

    color: #58b52b;

    font-size: 12px;
}

.erp-feature-visual {
    display: flex;
    justify-content: center;
}

.erp-feature-card {
    width: 390px;

    padding: 30px;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            #071f49,
            #0d4e9f
        );

    box-shadow:
        0 25px 60px rgba(7,43,100,.22);
}

.erp-feature-card-top {
    display: flex;
    justify-content: space-between;

    color: #bcd0e9;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.erp-feature-card-top b {
    color: #58b52b;
}

.workflow {
    margin-top: 35px;
}

.workflow-step {
    display: flex;
    align-items: center;
    gap: 15px;

    padding: 14px;

    border-radius: 11px;

    color: #b9cce5;

    font-size: 13px;
}

.workflow-step span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    border-radius: 8px;

    background: rgba(255,255,255,.08);

    color: #fff;

    font-size: 10px;
}

.workflow-step.active,
.workflow-step.completed {
    background: rgba(255,255,255,.10);

    color: #fff;
}

.workflow-step.active span {
    background: #1264d8;
}

.workflow-step.completed span {
    background: #58b52b;
}

.workflow-line {
    width: 1px;
    height: 18px;

    margin-left: 29px;

    background: rgba(255,255,255,.18);
}


/* =========================================
   INDUSTRIES
========================================= */

.erp-industries {
    background: #f8fbff;
}

.erp-industry-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.erp-industry-grid div {
    padding: 25px;

    border: 1px solid #e2eaf4;
    border-radius: 15px;

    background: #fff;

    transition: .2s ease;
}

.erp-industry-grid div:hover {
    transform: translateY(-4px);

    border-color: #cbdcf3;
}

.erp-industry-grid strong {
    display: block;

    margin-bottom: 6px;

    color: #102a52;

    font-size: 16px;
}

.erp-industry-grid span {
    color: #71809a;

    font-size: 12px;
}


/* =========================================
   PROCESS
========================================= */

.erp-process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 45px 30px;
}

.erp-process-item {
    position: relative;

    padding-left: 58px;
}

.erp-process-item > strong {
    position: absolute;
    top: 0;
    left: 0;

    color: #1264d8;

    font-size: 14px;
}

.erp-process-item h3 {
    margin: 0 0 10px;

    color: #102a52;

    font-size: 18px;
}

.erp-process-item p {
    margin: 0;

    color: #6a7991;

    font-size: 14px;
    line-height: 1.7;
}


/* =========================================
   CTA
========================================= */

.erp-cta {
    padding: 0 0 100px;
}

.erp-cta-box {
    position: relative;
    overflow: hidden;

    padding: 75px;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            #1264d8 0%,
            #0751b8 60%,
            #58b52b 150%
        );
}

.erp-cta-content {
    max-width: 780px;
}

.erp-cta .erp-eyebrow {
    color: #dceaff;
}

.erp-cta h2 {
    margin: 18px 0;

    color: #fff;

    font-size: clamp(38px, 4vw, 55px);
}

.erp-cta h2 span {
    color: #aee87f;
}

.erp-cta p {
    max-width: 700px;

    color: #dce9fa;

    font-size: 17px;
    line-height: 1.8;
}

.erp-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;

    margin-top: 30px;
}

.erp-btn-white {
    color: #1264d8;
    background: #fff;
}

.erp-btn-white:hover {
    transform: translateY(-3px);
}

.erp-btn-outline-white {
    color: #fff;

    border: 1px solid rgba(255,255,255,.45);

    background: rgba(255,255,255,.08);
}

.erp-btn-outline-white:hover {
    background: rgba(255,255,255,.15);
    transform: translateY(-3px);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1100px) {

    .erp-module-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .erp-benefit-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 900px) {

    .erp-hero-grid,
    .erp-feature-grid {
        grid-template-columns: 1fr;
    }

    .erp-hero-visual {
        min-height: 420px;
    }

    .erp-industry-grid,
    .erp-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 650px) {

    .erp-hero {
        padding: 115px 0 65px;
    }

    .erp-hero h1 {
        font-size: 43px;
        letter-spacing: -1px;
    }

    .erp-hero-content > p {
        font-size: 16px;
    }

    .erp-dashboard {
        width: 90%;
        padding: 18px;
    }

    .erp-circle {
        display: none;
    }

    .erp-floating-card {
        display: none;
    }

    .erp-highlights {
        gap: 16px;
        flex-wrap: wrap;
    }

    .erp-intro,
    .erp-modules,
    .erp-features,
    .erp-industries,
    .erp-process {
        padding: 70px 0;
    }

    .erp-benefit-grid,
    .erp-module-grid,
    .erp-industry-grid,
    .erp-process-grid {
        grid-template-columns: 1fr;
    }

    .erp-feature-list {
        grid-template-columns: 1fr;
    }

    .erp-feature-content h2 {
        font-size: 35px;
    }

    .erp-feature-card {
        width: 100%;
    }

    .erp-cta-box {
        padding: 45px 25px;
    }

}
/* =========================================
   CRM DEVELOPMENT PAGE
========================================= */

.crm-page {
    background: #fff;
    color: #102a52;
}


/* =========================================
   HERO
========================================= */

.crm-hero {
    position: relative;
    overflow: hidden;
    padding: 45px 0 90px;

    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(18,100,216,.12),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #f5f9ff 0%,
            #ffffff 55%,
            #f4fff0 100%
        );
}

.crm-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.crm-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: #1264d8;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.crm-eyebrow span {
    width: 8px;
    height: 8px;

    border-radius: 50%;
    background: #58b52b;
}

.crm-hero h1 {
    max-width: 700px;
    margin: 22px 0;

    color: #102a52;

    font-size: clamp(44px, 5vw, 70px);
    line-height: 1.06;
    letter-spacing: -2px;
    font-weight: 800;
}

.gradient-text {
    background: linear-gradient(
        90deg,
        #1264d8,
        #58b52b
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.crm-hero-content > p {
    max-width: 670px;

    color: #60718c;

    font-size: 18px;
    line-height: 1.8;
}

.crm-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 32px;
}

.crm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    min-height: 50px;
    padding: 0 22px;

    border-radius: 10px;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;

    transition: .25s ease;
}

.crm-btn-primary {
    color: #fff;

    background: linear-gradient(
        135deg,
        #1264d8,
        #087ce2
    );

    box-shadow:
        0 12px 28px rgba(18,100,216,.22);
}

.crm-btn-primary:hover {
    transform: translateY(-3px);

    box-shadow:
        0 18px 35px rgba(18,100,216,.28);
}

.crm-btn-outline {
    color: #1264d8;

    border: 1px solid #cbdcf2;
    background: #fff;
}

.crm-btn-outline:hover {
    border-color: #1264d8;
    transform: translateY(-3px);
}

.crm-highlights {
    display: flex;
    gap: 32px;

    margin-top: 45px;
}

.crm-highlights div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.crm-highlights strong {
    color: #1264d8;
    font-size: 13px;
}

.crm-highlights span {
    color: #71809a;
    font-size: 12px;
}


/* =========================================
   CRM DASHBOARD
========================================= */

.crm-hero-visual {
    position: relative;

    min-height: 470px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.crm-circle {
    position: absolute;

    border: 1px solid rgba(18,100,216,.12);
    border-radius: 50%;
}

.crm-circle-one {
    width: 470px;
    height: 470px;
}

.crm-circle-two {
    width: 350px;
    height: 350px;

    border-color: rgba(88,181,43,.16);
}

.crm-dashboard {
    position: relative;
    z-index: 3;

    width: 430px;

    padding: 25px;

    border: 1px solid #e0e9f5;
    border-radius: 24px;

    background: rgba(255,255,255,.96);

    box-shadow:
        0 30px 80px rgba(16,42,82,.16);
}

.crm-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.crm-dashboard-header small {
    display: block;

    margin-bottom: 5px;

    color: #8391a7;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

.crm-dashboard-header strong {
    color: #102a52;
    font-size: 17px;
}

.crm-live {
    display: flex;
    align-items: center;
    gap: 6px;

    color: #58b52b;

    font-size: 9px;
    font-weight: 800;
}

.crm-live span {
    width: 7px;
    height: 7px;

    border-radius: 50%;
    background: #58b52b;
}

.crm-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;

    margin-top: 25px;
}

.crm-stat {
    padding: 15px 12px;

    border-radius: 12px;
    background: #f5f9ff;
}

.crm-stat span {
    display: block;

    color: #71809a;
    font-size: 10px;
}

.crm-stat strong {
    display: block;

    margin: 7px 0;

    color: #1264d8;
    font-size: 17px;
}

.crm-stat small {
    color: #58b52b;

    font-size: 9px;
    font-weight: 700;
}

.crm-pipeline {
    margin-top: 20px;
    padding: 18px;

    border-radius: 14px;

    background: #f8fbff;
}

.crm-pipeline-title {
    margin-bottom: 14px;

    color: #60718c;

    font-size: 11px;
    font-weight: 700;
}

.crm-pipeline-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
}

.crm-pipeline-stage {
    padding: 11px 7px;

    border-radius: 9px;

    background: #fff;
    border: 1px solid #e5edf6;

    text-align: center;
}

.crm-pipeline-stage span {
    display: block;

    color: #71809a;

    font-size: 8px;
}

.crm-pipeline-stage strong {
    display: block;

    margin-top: 5px;

    color: #1264d8;

    font-size: 15px;
}

.crm-progress {
    margin-top: 20px;
}

.crm-progress-heading {
    display: flex;
    justify-content: space-between;

    margin-bottom: 8px;

    color: #647590;

    font-size: 10px;
}

.crm-progress-heading strong {
    color: #58b52b;
}

.crm-progress-bar {
    height: 7px;

    overflow: hidden;

    border-radius: 10px;

    background: #e9eff7;
}

.crm-progress-bar span {
    display: block;

    width: 86%;
    height: 100%;

    border-radius: 10px;

    background: linear-gradient(
        90deg,
        #1264d8,
        #58b52b
    );
}

.crm-dashboard-footer {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-top: 20px;
}

.crm-dashboard-footer > div {
    display: flex;
}

.crm-avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 25px;
    height: 25px;

    margin-right: -5px;

    border: 2px solid #fff;
    border-radius: 50%;

    background: #1264d8;

    color: #fff;

    font-size: 8px;
    font-weight: 700;
}

.crm-avatar:nth-child(2) {
    background: #58b52b;
}

.crm-avatar:nth-child(3) {
    background: #6c88aa;
}

.crm-avatar:nth-child(4) {
    background: #dce7f4;
    color: #1264d8;
}

.crm-dashboard-footer small {
    color: #71809a;
    font-size: 10px;
}

.crm-floating-card {
    position: absolute;
    z-index: 5;

    display: flex;
    align-items: center;
    gap: 9px;

    padding: 13px 17px;

    border: 1px solid #e1e9f3;
    border-radius: 12px;

    background: #fff;

    box-shadow:
        0 15px 40px rgba(16,42,82,.12);

    color: #304b70;

    font-size: 12px;
    font-weight: 700;
}

.crm-floating-card span {
    color: #1264d8;
    font-size: 16px;
}

.crm-float-one {
    top: 55px;
    right: 0;
}

.crm-float-two {
    bottom: 55px;
    left: 0;
}

.crm-float-two span {
    color: #58b52b;
}


/* =========================================
   COMMON SECTIONS
========================================= */

.crm-intro,
.crm-features,
.crm-journey,
.crm-advanced,
.crm-process {
    padding: 100px 0;
}

.crm-section-heading {
    max-width: 800px;
    margin-bottom: 55px;
}

.crm-section-heading.centered {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.crm-section-heading h2 {
    margin: 18px 0;

    color: #102a52;

    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.12;
    letter-spacing: -1px;
}

.crm-section-heading p {
    color: #657590;

    font-size: 16px;
    line-height: 1.8;
}


/* =========================================
   BENEFITS
========================================= */

.crm-benefit-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.crm-benefit-card {
    padding: 30px 25px;

    border: 1px solid #e2eaf4;
    border-radius: 18px;

    background: #fff;

    transition: .25s ease;
}

.crm-benefit-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 18px 45px rgba(16,42,82,.10);
}

.crm-benefit-number {
    margin-bottom: 35px;

    color: #1264d8;

    font-size: 12px;
    font-weight: 800;
}

.crm-benefit-card h3 {
    margin: 0 0 12px;

    color: #102a52;
    font-size: 18px;
}

.crm-benefit-card p {
    margin: 0;

    color: #6a7991;

    font-size: 14px;
    line-height: 1.7;
}


/* =========================================
   FEATURES
========================================= */

.crm-features {
    background: #f7faff;
}

.crm-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.crm-feature-card {
    padding: 30px;

    border: 1px solid #e1e9f3;
    border-radius: 20px;

    background: #fff;

    transition: .25s ease;
}

.crm-feature-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 20px 50px rgba(16,42,82,.10);
}

.crm-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    margin-bottom: 23px;

    border-radius: 14px;

    background: linear-gradient(
        135deg,
        #1264d8,
        #58b52b
    );

    color: #fff;

    font-size: 19px;
}

.crm-feature-card h3 {
    margin: 0 0 12px;

    color: #102a52;
    font-size: 18px;
}

.crm-feature-card p {
    min-height: 70px;

    margin: 0 0 20px;

    color: #687991;

    font-size: 14px;
    line-height: 1.7;
}

.crm-feature-card > span {
    color: #1264d8;

    font-size: 12px;
    font-weight: 800;
}


/* =========================================
   CUSTOMER JOURNEY
========================================= */

.crm-journey {
    background: #fff;
}

.crm-journey-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 70px;
    align-items: center;
}

.crm-journey-content h2 {
    margin: 18px 0;

    color: #102a52;

    font-size: 43px;
    line-height: 1.15;
}

.crm-journey-content p {
    color: #657590;

    line-height: 1.8;
}

.crm-journey-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.crm-journey-step {
    display: flex;
    flex-direction: column;
    align-items: center;

    min-width: 90px;
    padding: 18px 10px;

    border: 1px solid #e2eaf4;
    border-radius: 15px;

    background: #f9fbfe;
}

.crm-journey-step span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    margin-bottom: 8px;

    border-radius: 9px;

    background: #eaf2fc;

    color: #1264d8;

    font-size: 10px;
    font-weight: 800;
}

.crm-journey-step strong {
    color: #304b70;
    font-size: 13px;
}

.crm-journey-step small {
    margin-top: 3px;

    color: #8390a5;
    font-size: 9px;
}

.crm-journey-step.active {
    border-color: #cbdcf2;

    background: #f3f8ff;
}

.crm-journey-step.completed span {
    background: #edf8e8;
    color: #58b52b;
}

.crm-journey-arrow {
    color: #1264d8;
    font-size: 18px;
}


/* =========================================
   ADVANCED CRM
========================================= */

.crm-advanced {
    background: #f7faff;
}

.crm-advanced-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.crm-analytics-card {
    padding: 35px;

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            #071f49,
            #0d4e9f
        );

    box-shadow:
        0 25px 60px rgba(7,43,100,.22);
}

.crm-analytics-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.crm-analytics-header span {
    color: #b9cce5;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

.crm-analytics-header strong {
    color: #fff;
    font-size: 18px;
}

.crm-analytics-number {
    margin-top: 35px;

    color: #fff;

    font-size: 48px;
    font-weight: 800;
}

.crm-analytics-number small {
    display: block;

    margin-top: 3px;

    color: #aebfd5;

    font-size: 11px;
    font-weight: 400;
}

.crm-analytics-line {
    height: 160px;

    display: flex;
    align-items: flex-end;
    gap: 14px;

    margin-top: 25px;
}

.crm-analytics-line span {
    flex: 1;

    min-height: 10px;

    border-radius: 6px 6px 2px 2px;

    background: linear-gradient(
        180deg,
        #58b52b,
        #1264d8
    );
}

.crm-advanced-content h2 {
    margin: 18px 0;

    font-size: 44px;
    line-height: 1.15;
}

.crm-advanced-content > p {
    color: #657590;
    line-height: 1.8;
}

.crm-advanced-list {
    display: grid;
    gap: 17px;

    margin-top: 30px;
}

.crm-advanced-list > div {
    display: flex;
    gap: 14px;
}

.crm-advanced-list > div > span {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 30px;

    width: 30px;
    height: 30px;

    border-radius: 50%;

    background: #edf8e8;

    color: #58b52b;

    font-size: 12px;
    font-weight: 800;
}

.crm-advanced-list strong {
    display: block;

    color: #102a52;

    font-size: 14px;
}

.crm-advanced-list small {
    display: block;

    margin-top: 4px;

    color: #71809a;

    font-size: 12px;
    line-height: 1.5;
}


/* =========================================
   PROCESS
========================================= */

.crm-process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 45px 30px;
}

.crm-process-item {
    position: relative;

    padding-left: 58px;
}

.crm-process-item > strong {
    position: absolute;
    top: 0;
    left: 0;

    color: #1264d8;

    font-size: 14px;
}

.crm-process-item h3 {
    margin: 0 0 10px;

    color: #102a52;

    font-size: 18px;
}

.crm-process-item p {
    margin: 0;

    color: #6a7991;

    font-size: 14px;
    line-height: 1.7;
}


/* =========================================
   CTA
========================================= */

.crm-cta {
    padding: 0 0 100px;
}

.crm-cta-box {
    position: relative;
    overflow: hidden;

    padding: 75px;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            #1264d8 0%,
            #0751b8 60%,
            #58b52b 150%
        );
}

.crm-cta-content {
    max-width: 780px;
}

.crm-cta .crm-eyebrow {
    color: #dceaff;
}

.crm-cta h2 {
    margin: 18px 0;

    color: #fff;

    font-size: clamp(38px, 4vw, 55px);
}

.crm-cta h2 span {
    color: #aee87f;
}

.crm-cta p {
    max-width: 700px;

    color: #dce9fa;

    font-size: 17px;
    line-height: 1.8;
}

.crm-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;

    margin-top: 30px;
}

.crm-btn-white {
    color: #1264d8;
    background: #fff;
}

.crm-btn-white:hover {
    transform: translateY(-3px);
}

.crm-btn-outline-white {
    color: #fff;

    border: 1px solid rgba(255,255,255,.45);

    background: rgba(255,255,255,.08);
}

.crm-btn-outline-white:hover {
    background: rgba(255,255,255,.15);
    transform: translateY(-3px);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1100px) {

    .crm-benefit-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 950px) {

    .crm-hero-grid,
    .crm-journey-grid,
    .crm-advanced-grid {
        grid-template-columns: 1fr;
    }

    .crm-feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .crm-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .crm-hero-visual {
        min-height: 420px;
    }

}


@media (max-width: 650px) {

    .crm-hero {
        padding: 115px 0 65px;
    }

    .crm-hero h1 {
        font-size: 43px;
        letter-spacing: -1px;
    }

    .crm-hero-content > p {
        font-size: 16px;
    }

    .crm-dashboard {
        width: 90%;
        padding: 18px;
    }

    .crm-circle {
        display: none;
    }

    .crm-floating-card {
        display: none;
    }

    .crm-highlights {
        gap: 16px;
        flex-wrap: wrap;
    }

    .crm-intro,
    .crm-features,
    .crm-journey,
    .crm-advanced,
    .crm-process {
        padding: 70px 0;
    }

    .crm-benefit-grid,
    .crm-feature-grid,
    .crm-process-grid {
        grid-template-columns: 1fr;
    }

    .crm-journey-flow {
        flex-wrap: wrap;
        gap: 10px;
    }

    .crm-journey-arrow {
        display: none;
    }

    .crm-advanced-content h2,
    .crm-journey-content h2 {
        font-size: 34px;
    }

    .crm-analytics-card {
        padding: 25px;
    }

    .crm-cta-box {
        padding: 45px 25px;
    }

}

/* =========================================
   SOFTWARE MAINTENANCE PAGE
========================================= */

.maintenance-page {
    background: #fff;
    color: #102a52;
}


/* =========================================
   HERO
========================================= */

.maintenance-hero {
    position: relative;
    overflow: hidden;

    padding: 45px 0 90px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(18,100,216,.12),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #f5f9ff 0%,
            #ffffff 55%,
            #f4fff0 100%
        );
}

.maintenance-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;

    align-items: center;
}

.maintenance-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: #1264d8;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.maintenance-eyebrow span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #58b52b;
}

.maintenance-hero h1 {
    max-width: 700px;

    margin: 22px 0;

    color: #102a52;

    font-size: clamp(44px, 5vw, 68px);
    line-height: 1.06;

    letter-spacing: -2px;
    font-weight: 800;
}

.gradient-text {
    background: linear-gradient(
        90deg,
        #1264d8,
        #58b52b
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.maintenance-hero-content > p {
    max-width: 670px;

    color: #60718c;

    font-size: 18px;
    line-height: 1.8;
}

.maintenance-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 32px;
}

.maintenance-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    min-height: 50px;

    padding: 0 22px;

    border-radius: 10px;

    text-decoration: none;

    font-size: 14px;
    font-weight: 700;

    transition: .25s ease;
}

.maintenance-btn-primary {
    color: #fff;

    background: linear-gradient(
        135deg,
        #1264d8,
        #087ce2
    );

    box-shadow:
        0 12px 28px rgba(18,100,216,.22);
}

.maintenance-btn-primary:hover {
    transform: translateY(-3px);
}

.maintenance-btn-outline {
    color: #1264d8;

    border: 1px solid #cbdcf2;

    background: #fff;
}

.maintenance-btn-outline:hover {
    border-color: #1264d8;
    transform: translateY(-3px);
}

.maintenance-highlights {
    display: flex;
    gap: 32px;

    margin-top: 45px;
}

.maintenance-highlights div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.maintenance-highlights strong {
    color: #1264d8;
    font-size: 13px;
}

.maintenance-highlights span {
    color: #71809a;
    font-size: 12px;
}


/* =========================================
   HERO DASHBOARD
========================================= */

.maintenance-hero-visual {
    position: relative;

    min-height: 470px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.maintenance-orbit {
    position: absolute;

    border: 1px solid rgba(18,100,216,.12);

    border-radius: 50%;
}

.maintenance-orbit-one {
    width: 470px;
    height: 470px;
}

.maintenance-orbit-two {
    width: 340px;
    height: 340px;

    border-color: rgba(88,181,43,.15);
}

.maintenance-dashboard {
    position: relative;
    z-index: 3;

    width: 430px;

    padding: 25px;

    border: 1px solid #dfe8f3;

    border-radius: 24px;

    background: rgba(255,255,255,.97);

    box-shadow:
        0 30px 80px rgba(16,42,82,.16);
}

.maintenance-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.maintenance-dashboard-header small {
    display: block;

    margin-bottom: 5px;

    color: #8391a7;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

.maintenance-dashboard-header strong {
    color: #102a52;

    font-size: 17px;
}

.maintenance-status {
    display: flex;
    align-items: center;
    gap: 6px;

    color: #58b52b;

    font-size: 9px;
    font-weight: 800;
}

.maintenance-status span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #58b52b;
}

.maintenance-health {
    display: flex;
    justify-content: center;

    padding: 30px 0 25px;
}

.health-circle {
    width: 135px;
    height: 135px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #fff 58%,
            transparent 59%
        ),
        conic-gradient(
            #1264d8 0 70%,
            #58b52b 70% 98%,
            #e8eef6 98% 100%
        );

    box-shadow:
        0 12px 35px rgba(18,100,216,.13);
}

.health-circle strong {
    color: #1264d8;

    font-size: 30px;
}

.health-circle span {
    margin-top: 3px;

    color: #78869a;

    font-size: 9px;
}

.maintenance-metrics {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
}

.maintenance-metrics div {
    padding: 13px 10px;

    border-radius: 11px;

    background: #f6f9fd;

    text-align: center;
}

.maintenance-metrics span {
    display: block;

    color: #7a889d;

    font-size: 9px;
}

.maintenance-metrics strong {
    display: block;

    margin-top: 6px;

    color: #1264d8;

    font-size: 11px;
}

.maintenance-check-list {
    display: grid;
    gap: 9px;

    margin-top: 18px;
}

.maintenance-check-list div {
    display: flex;
    align-items: center;
    gap: 9px;

    padding: 9px 11px;

    border-radius: 9px;

    background: #f9fbfd;

    color: #536783;

    font-size: 10px;
}

.maintenance-check-list span {
    color: #58b52b;

    font-weight: 800;
}

.maintenance-check-list strong {
    margin-left: auto;

    color: #58b52b;

    font-size: 9px;
}

.maintenance-floating-card {
    position: absolute;
    z-index: 5;

    display: flex;
    align-items: center;
    gap: 9px;

    padding: 13px 17px;

    border: 1px solid #e1e9f3;

    border-radius: 12px;

    background: #fff;

    box-shadow:
        0 15px 40px rgba(16,42,82,.12);

    color: #304b70;

    font-size: 12px;
    font-weight: 700;
}

.maintenance-floating-card span {
    color: #1264d8;
}

.maintenance-float-one {
    top: 50px;
    right: 0;
}

.maintenance-float-two {
    bottom: 55px;
    left: 0;
}

.maintenance-float-two span {
    color: #58b52b;
}


/* =========================================
   COMMON
========================================= */

.maintenance-intro,
.maintenance-services,
.maintenance-why,
.maintenance-types,
.maintenance-process {
    padding: 100px 0;
}

.maintenance-section-heading {
    max-width: 820px;

    margin-bottom: 55px;
}

.maintenance-section-heading.centered {
    margin-left: auto;
    margin-right: auto;

    text-align: center;
}

.maintenance-section-heading h2 {
    margin: 18px 0;

    color: #102a52;

    font-size: clamp(34px,4vw,52px);
    line-height: 1.12;

    letter-spacing: -1px;
}

.maintenance-section-heading p {
    color: #657590;

    font-size: 16px;
    line-height: 1.8;
}


/* =========================================
   BENEFITS
========================================= */

.maintenance-benefit-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 18px;
}

.maintenance-benefit-card {
    padding: 30px 25px;

    border: 1px solid #e2eaf4;

    border-radius: 18px;

    background: #fff;

    transition: .25s ease;
}

.maintenance-benefit-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 18px 45px rgba(16,42,82,.10);
}

.maintenance-number {
    margin-bottom: 35px;

    color: #1264d8;

    font-size: 12px;
    font-weight: 800;
}

.maintenance-benefit-card h3 {
    margin: 0 0 12px;

    color: #102a52;

    font-size: 18px;
}

.maintenance-benefit-card p {
    margin: 0;

    color: #6a7991;

    font-size: 14px;
    line-height: 1.7;
}


/* =========================================
   SERVICES
========================================= */

.maintenance-services {
    background: #f7faff;
}

.maintenance-service-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
}

.maintenance-service-card {
    padding: 30px;

    border: 1px solid #e1e9f3;

    border-radius: 20px;

    background: #fff;

    transition: .25s ease;
}

.maintenance-service-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 20px 50px rgba(16,42,82,.10);
}

.maintenance-service-icon {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 22px;

    border-radius: 14px;

    background: linear-gradient(
        135deg,
        #1264d8,
        #58b52b
    );

    color: #fff;

    font-size: 19px;
}

.maintenance-service-card h3 {
    margin: 0 0 12px;

    color: #102a52;

    font-size: 18px;
}

.maintenance-service-card p {
    min-height: 70px;

    margin: 0 0 20px;

    color: #687991;

    font-size: 14px;
    line-height: 1.7;
}

.maintenance-service-card > span {
    color: #1264d8;

    font-size: 12px;
    font-weight: 800;
}


/* =========================================
   WHY MAINTENANCE
========================================= */

.maintenance-why {
    background: #fff;
}

.maintenance-why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;

    align-items: center;
}

.maintenance-why-content h2 {
    margin: 18px 0;

    color: #102a52;

    font-size: 44px;
    line-height: 1.15;
}

.maintenance-why-content > p {
    color: #657590;

    line-height: 1.8;
}

.maintenance-checks {
    display: grid;
    gap: 15px;

    margin-top: 30px;
}

.maintenance-checks div {
    display: flex;
    align-items: center;
    gap: 13px;
}

.maintenance-checks span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    border-radius: 50%;

    background: #edf8e8;

    color: #58b52b;

    font-size: 11px;
    font-weight: 800;
}

.maintenance-checks strong {
    color: #304b70;

    font-size: 14px;
}

.maintenance-stat-panel {
    padding: 35px;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            #071f49,
            #0d4e9f
        );

    box-shadow:
        0 25px 60px rgba(7,43,100,.20);
}

.maintenance-stat-main > span {
    color: #aebfd5;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

.maintenance-stat-main > strong {
    display: block;

    color: #fff;

    font-size: 19px;
}

.maintenance-big-number {
    margin-top: 25px;

    color: #fff;

    font-size: 76px;
    font-weight: 800;
}

.maintenance-big-number small {
    color: #58b52b;

    font-size: 35px;
}

.maintenance-stat-main p {
    color: #b7c8dd;

    font-size: 12px;
}

.maintenance-mini-stats {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 12px;

    margin-top: 30px;
}

.maintenance-mini-stats div {
    padding: 17px;

    border: 1px solid rgba(255,255,255,.10);

    border-radius: 13px;

    background: rgba(255,255,255,.06);
}

.maintenance-mini-stats strong {
    display: block;

    color: #fff;

    font-size: 18px;
}

.maintenance-mini-stats span {
    display: block;

    margin-top: 5px;

    color: #aebfd5;

    font-size: 10px;
}


/* =========================================
   MAINTENANCE TYPES
========================================= */

.maintenance-types {
    background: #f7faff;
}

.maintenance-types-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 18px;
}

.maintenance-type-card {
    padding: 30px;

    border: 1px solid #e0e8f2;

    border-radius: 18px;

    background: #fff;

    transition: .25s ease;
}

.maintenance-type-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 18px 45px rgba(16,42,82,.09);
}

.maintenance-type-number {
    color: #1264d8;

    font-size: 12px;
    font-weight: 800;
}

.maintenance-type-card h3 {
    margin: 30px 0 12px;

    color: #102a52;

    font-size: 20px;
}

.maintenance-type-card p {
    margin: 0;

    color: #6a7991;

    font-size: 14px;
    line-height: 1.7;
}


/* =========================================
   PROCESS
========================================= */

.maintenance-process {
    background: #fff;
}

.maintenance-process-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);

    gap: 45px 30px;
}

.maintenance-process-item {
    position: relative;

    padding-left: 58px;
}

.maintenance-process-item > strong {
    position: absolute;

    top: 0;
    left: 0;

    color: #1264d8;

    font-size: 14px;
}

.maintenance-process-item h3 {
    margin: 0 0 10px;

    color: #102a52;

    font-size: 18px;
}

.maintenance-process-item p {
    margin: 0;

    color: #6a7991;

    font-size: 14px;
    line-height: 1.7;
}


/* =========================================
   CTA
========================================= */

.maintenance-cta {
    padding: 0 0 100px;
}

.maintenance-cta-box {
    padding: 75px;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            #1264d8 0%,
            #0751b8 60%,
            #58b52b 150%
        );
}

.maintenance-cta-content {
    max-width: 780px;
}

.maintenance-cta .maintenance-eyebrow {
    color: #dceaff;
}

.maintenance-cta h2 {
    margin: 18px 0;

    color: #fff;

    font-size: clamp(38px,4vw,55px);
}

.maintenance-cta h2 span {
    color: #aee87f;
}

.maintenance-cta p {
    max-width: 700px;

    color: #dce9fa;

    font-size: 17px;
    line-height: 1.8;
}

.maintenance-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;

    margin-top: 30px;
}

.maintenance-btn-white {
    color: #1264d8;

    background: #fff;
}

.maintenance-btn-outline-white {
    color: #fff;

    border: 1px solid rgba(255,255,255,.45);

    background: rgba(255,255,255,.08);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1100px) {

    .maintenance-benefit-grid,
    .maintenance-types-grid {
        grid-template-columns: repeat(2,1fr);
    }

}


@media (max-width: 950px) {

    .maintenance-hero-grid,
    .maintenance-why-grid {
        grid-template-columns: 1fr;
    }

    .maintenance-service-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .maintenance-process-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .maintenance-hero-visual {
        min-height: 420px;
    }

}


@media (max-width: 650px) {

    .maintenance-hero {
        padding: 115px 0 65px;
    }

    .maintenance-hero h1 {
        font-size: 43px;
        letter-spacing: -1px;
    }

    .maintenance-hero-content > p {
        font-size: 16px;
    }

    .maintenance-dashboard {
        width: 90%;
        padding: 18px;
    }

    .maintenance-orbit,
    .maintenance-floating-card {
        display: none;
    }

    .maintenance-highlights {
        gap: 16px;
        flex-wrap: wrap;
    }

    .maintenance-intro,
    .maintenance-services,
    .maintenance-why,
    .maintenance-types,
    .maintenance-process {
        padding: 70px 0;
    }

    .maintenance-benefit-grid,
    .maintenance-service-grid,
    .maintenance-types-grid,
    .maintenance-process-grid {
        grid-template-columns: 1fr;
    }

    .maintenance-why-content h2 {
        font-size: 34px;
    }

    .maintenance-stat-panel {
        padding: 25px;
    }

    .maintenance-cta-box {
        padding: 45px 25px;
    }

}

/* =========================================
   WEB DEVELOPMENT PAGE
========================================= */

.webdev-page {
    background: #fff;
    color: #14213d;
}

.webdev-page .container {
    width: min(1180px, 92%);
    margin: 0 auto;
}


/* HERO */

.webdev-hero {
    padding: 45px 0 90px;
    background:
        radial-gradient(circle at 85% 20%, rgba(18,100,216,.12), transparent 35%),
        linear-gradient(180deg, #f7faff 0%, #ffffff 100%);
    overflow: hidden;
}

.webdev-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 70px;
    align-items: center;
}

.webdev-label,
.webdev-section-heading > span {
    display: inline-block;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.8px;
    color: #1264d8;
    margin-bottom: 18px;
}

.webdev-hero-content h1 {
    font-size: clamp(42px, 5vw, 68px);
    line-height: 1.08;
    margin: 0 0 25px;
    font-weight: 800;
    letter-spacing: -2px;
}

.webdev-hero-content h1 span,
.webdev-section-heading h2 span,
.technology-content h2 span {
    background: linear-gradient(90deg, #1264d8, #58b52b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.webdev-hero-content p {
    max-width: 650px;
    font-size: 18px;
    line-height: 1.8;
    color: #667085;
    margin-bottom: 32px;
}

.webdev-buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.webdev-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 23px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    transition: .25s ease;
}

.webdev-page .btn-primary {
    background: #1264d8;
    color: #fff;
    box-shadow: 0 12px 30px rgba(18,100,216,.22);
}

.webdev-page .btn-primary:hover {
    transform: translateY(-3px);
    background: #0d55bb;
}

.webdev-page .btn-outline {
    border: 1px solid #d7e0ee;
    color: #1264d8;
    background: #fff;
}

.webdev-page .btn-outline:hover {
    border-color: #1264d8;
    transform: translateY(-3px);
}


/* BROWSER VISUAL */

.webdev-visual {
    position: relative;
}

.browser-window {
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(18,70,130,.15);
    transform: perspective(1000px) rotateY(-4deg);
}

.browser-header {
    height: 55px;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 0 18px;
    background: #f5f8fc;
    border-bottom: 1px solid #e4eaf2;
}

.browser-dots {
    display: flex;
    gap: 6px;
}

.browser-dots i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
}

.browser-url {
    flex: 1;
    padding: 8px 15px;
    background: #fff;
    border: 1px solid #e0e7ef;
    border-radius: 7px;
    font-size: 11px;
    color: #8a94a6;
}

.browser-body {
    padding: 38px 32px;
    min-height: 330px;
    background:
        linear-gradient(145deg, rgba(18,100,216,.06), rgba(88,181,43,.05));
}

.code-line {
    height: 9px;
    border-radius: 20px;
    background: #d9e4f3;
    margin-bottom: 13px;
}

.code-line.long { width: 78%; }
.code-line.medium { width: 55%; }
.code-line.short { width: 35%; }

.web-card-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 35px;
}

.mini-card {
    padding: 20px 12px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(20,50,90,.08);
}

.mini-card span {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, #1264d8, #58b52b);
    margin-bottom: 12px;
}

.mini-card strong {
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
}

.mini-card small {
    color: #8a94a6;
    font-size: 10px;
}

.web-progress {
    margin-top: 28px;
    height: 8px;
    border-radius: 20px;
    background: #e8eef6;
    overflow: hidden;
}

.web-progress div {
    width: 76%;
    height: 100%;
    background: linear-gradient(90deg, #1264d8, #58b52b);
}


/* INTRO */

.webdev-intro {
    padding: 105px 0;
}

.webdev-section-heading {
    max-width: 760px;
}

.webdev-section-heading.center {
    text-align: center;
    margin: 0 auto 55px;
}

.webdev-section-heading h2,
.technology-content h2 {
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.15;
    margin: 0 0 20px;
    letter-spacing: -1.2px;
}

.webdev-section-heading p {
    font-size: 17px;
    line-height: 1.8;
    color: #687386;
}

.webdev-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 55px;
}

.webdev-benefit {
    display: flex;
    gap: 18px;
    padding: 25px;
    border: 1px solid #e6ebf2;
    border-radius: 16px;
    background: #fff;
    transition: .25s ease;
}

.webdev-benefit:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(20,60,110,.09);
}

.benefit-icon,
.service-number {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 800;
    color: #1264d8;
}

.webdev-benefit h3 {
    margin: 0 0 8px;
    font-size: 18px;
}

.webdev-benefit p {
    margin: 0;
    color: #758096;
    line-height: 1.6;
    font-size: 14px;
}


/* SERVICES */

.webdev-services {
    padding: 105px 0;
    background: #f7faff;
}

.webdev-service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.webdev-service-card {
    padding: 32px;
    min-height: 260px;
    background: #fff;
    border: 1px solid #e4eaf2;
    border-radius: 18px;
    transition: .3s ease;
    position: relative;
    overflow: hidden;
}

.webdev-service-card::after {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(18,100,216,.06);
    right: -35px;
    bottom: -35px;
}

.webdev-service-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 22px 50px rgba(18,65,120,.11);
    border-color: rgba(18,100,216,.25);
}

.webdev-service-card h3 {
    font-size: 21px;
    margin: 25px 0 12px;
}

.webdev-service-card p {
    color: #707b8f;
    line-height: 1.7;
    font-size: 14px;
    margin-bottom: 22px;
}

.webdev-service-card a {
    color: #1264d8;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}


/* TECHNOLOGY */

.webdev-technology {
    padding: 110px 0;
}

.technology-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.technology-content p {
    color: #6d788b;
    line-height: 1.8;
    font-size: 16px;
}

.technology-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.technology-list span {
    padding: 9px 14px;
    border-radius: 30px;
    background: #f2f6fb;
    color: #1264d8;
    font-size: 13px;
    font-weight: 700;
}

.technology-highlight {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.tech-highlight-box {
    padding: 25px;
    border-radius: 16px;
    background: linear-gradient(145deg, #1264d8, #0b4ba8);
    color: #fff;
}

.tech-highlight-box:nth-child(2) {
    background: linear-gradient(145deg, #58b52b, #42951d);
}

.tech-highlight-box:nth-child(3) {
    grid-column: span 2;
    background: linear-gradient(145deg, #1264d8, #58b52b);
}

.tech-highlight-box strong {
    font-size: 13px;
    opacity: .8;
}

.tech-highlight-box h3 {
    margin: 18px 0 7px;
}

.tech-highlight-box p {
    color: rgba(255,255,255,.82);
    font-size: 13px;
    margin: 0;
}


/* PROCESS */

.webdev-process {
    padding: 105px 0;
    background: #f7faff;
}

.webdev-process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.process-step {
    padding: 30px;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e5ebf3;
}

.process-step > span {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #eaf2ff;
    color: #1264d8;
    font-size: 12px;
    font-weight: 800;
}

.process-step h3 {
    margin: 20px 0 8px;
}

.process-step p {
    margin: 0;
    color: #738096;
    font-size: 14px;
    line-height: 1.7;
}


/* CTA */

.webdev-cta {
    padding: 90px 0;
}

.webdev-cta-box {
    padding: 60px;
    border-radius: 25px;
    background: linear-gradient(135deg, #063aa8 0%, #1264d8 50%, #58b52b 140%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    overflow: hidden;
    position: relative;
}

.webdev-cta-box > div:first-child {
    max-width: 680px;
}

.webdev-cta-box > div:first-child > span {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.6px;
    opacity: .8;
}

.webdev-cta-box h2 {
    font-size: clamp(32px, 4vw, 48px);
    margin: 15px 0;
    line-height: 1.15;
}

.webdev-cta-box h2 strong {
    color: #a7ed7c;
}

.webdev-cta-box p {
    margin: 0;
    line-height: 1.7;
    color: rgba(255,255,255,.84);
}

.webdev-cta-buttons {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.btn-white {
    background: #fff;
    color: #1264d8;
}

.btn-outline-white {
    border: 1px solid rgba(255,255,255,.6);
    color: #fff;
}

.btn-white:hover,
.btn-outline-white:hover {
    transform: translateY(-3px);
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .webdev-hero-grid,
    .technology-content {
        grid-template-columns: 1fr;
    }

    .webdev-visual {
        max-width: 650px;
        margin: 0 auto;
    }

    .webdev-benefits,
    .webdev-service-grid,
    .webdev-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .webdev-cta-box {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 600px) {

    .webdev-hero {
        padding: 80px 0 60px;
    }

    .webdev-hero-content h1 {
        font-size: 40px;
        letter-spacing: -1px;
    }

    .webdev-benefits,
    .webdev-service-grid,
    .webdev-process-grid,
    .technology-highlight {
        grid-template-columns: 1fr;
    }

    .tech-highlight-box:nth-child(3) {
        grid-column: auto;
    }

    .webdev-cta-box {
        padding: 35px 25px;
    }

    .webdev-cta-buttons {
        width: 100%;
        flex-direction: column;
    }

    .webdev-cta-buttons .btn {
        width: 100%;
    }

    .browser-window {
        transform: none;
    }

    .web-card-row {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   MOBILE APP DEVELOPMENT PAGE
========================================= */

.mobileapp-page {
    background: #fff;
    color: #14213d;
}

.mobileapp-page .container {
    width: min(1180px, 92%);
    margin: 0 auto;
}


/* =========================================
   HERO
========================================= */

.mobileapp-hero {
    padding: 45px 0 100px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(18,100,216,.12),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #f7faff 0%,
            #ffffff 100%
        );

    overflow: hidden;
}

.mobileapp-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.mobileapp-label,
.mobileapp-section-heading > span {
    display: inline-block;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.8px;
    color: #1264d8;
    margin-bottom: 18px;
}

.mobileapp-hero-content h1 {
    font-size: clamp(42px, 5vw, 66px);
    line-height: 1.08;
    letter-spacing: -2px;
    margin: 0 0 25px;
    font-weight: 800;
}

.mobileapp-hero-content h1 span,
.mobileapp-section-heading h2 span,
.mobileapp-tech-content h2 span {
    background: linear-gradient(
        90deg,
        #1264d8,
        #58b52b
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mobileapp-hero-content p {
    max-width: 650px;
    color: #69758a;
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 32px;
}

.mobileapp-buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.mobileapp-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 23px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    transition: .25s ease;
}

.mobileapp-page .btn-primary {
    background: #1264d8;
    color: #fff;
    box-shadow: 0 12px 30px rgba(18,100,216,.22);
}

.mobileapp-page .btn-primary:hover {
    transform: translateY(-3px);
    background: #0d55bb;
}

.mobileapp-page .btn-outline {
    border: 1px solid #d7e0ee;
    color: #1264d8;
    background: #fff;
}

.mobileapp-page .btn-outline:hover {
    border-color: #1264d8;
    transform: translateY(-3px);
}


/* =========================================
   PHONE VISUAL
========================================= */

.mobileapp-visual {
    min-height: 500px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.phone {
    width: 230px;
    height: 455px;
    border-radius: 35px;
    padding: 8px;
    position: absolute;
    border: 5px solid #17233c;
    background: #101a2d;
    box-shadow: 0 30px 70px rgba(12,45,90,.22);
}

.phone-back {
    transform: translate(-80px, 25px) rotate(-10deg);
    opacity: .92;
}

.phone-front {
    transform: translate(65px, -15px) rotate(6deg);
    z-index: 2;
}

.phone-speaker {
    width: 65px;
    height: 5px;
    background: #27344d;
    border-radius: 20px;
    position: absolute;
    top: 13px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}

.phone-screen {
    height: 100%;
    border-radius: 28px;
    overflow: hidden;
    background: #f6f9fd;
    padding: 35px 16px 15px;
}

.app-topbar {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 700;
}

.app-banner {
    margin-top: 25px;
    padding: 22px 15px;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(
        135deg,
        #1264d8,
        #58b52b
    );
}

.app-banner small {
    display: block;
    font-size: 8px;
    opacity: .8;
    margin-bottom: 8px;
}

.app-banner strong {
    font-size: 17px;
}

.app-stat-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 15px;
}

.app-stat-row div {
    height: 65px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(20,50,90,.07);
}

.app-header {
    display: flex;
    align-items: center;
    gap: 9px;
}

.app-header > span {
    margin-left: auto;
    font-weight: bold;
}

.app-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg,#1264d8,#58b52b);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.app-header small,
.app-header strong {
    display: block;
}

.app-header small {
    color: #8792a5;
    font-size: 8px;
}

.app-header strong {
    font-size: 11px;
}

.app-main-card {
    margin-top: 25px;
    padding: 18px;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(
        145deg,
        #1264d8,
        #0b4ba8
    );
}

.app-main-card small {
    font-size: 8px;
    opacity: .7;
}

.app-main-card strong {
    display: block;
    margin-top: 8px;
    font-size: 13px;
}

.app-chart {
    height: 60px;
    margin-top: 15px;
    display: flex;
    align-items: flex-end;
    gap: 6px;
}

.app-chart i {
    flex: 1;
    background: #fff;
    opacity: .8;
    border-radius: 4px 4px 0 0;
}

.app-chart i:nth-child(1) { height: 25%; }
.app-chart i:nth-child(2) { height: 42%; }
.app-chart i:nth-child(3) { height: 35%; }
.app-chart i:nth-child(4) { height: 65%; }
.app-chart i:nth-child(5) { height: 50%; }
.app-chart i:nth-child(6) { height: 85%; }

.app-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 15px;
}

.app-feature-grid div {
    padding: 13px 10px;
    background: #fff;
    border-radius: 11px;
    text-align: center;
    box-shadow: 0 7px 20px rgba(20,50,90,.06);
}

.app-feature-grid span {
    display: block;
    color: #1264d8;
    font-weight: 800;
    margin-bottom: 4px;
}

.app-feature-grid small {
    font-size: 8px;
    color: #69758a;
}

.app-bottom-nav {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    color: #1264d8;
}


/* =========================================
   INTRO
========================================= */

.mobileapp-intro {
    padding: 105px 0;
}

.mobileapp-section-heading {
    max-width: 760px;
}

.mobileapp-section-heading.center {
    text-align: center;
    margin: 0 auto 55px;
}

.mobileapp-section-heading h2,
.mobileapp-tech-content h2 {
    font-size: clamp(32px,4vw,48px);
    line-height: 1.15;
    letter-spacing: -1.2px;
    margin: 0 0 20px;
}

.mobileapp-section-heading p {
    font-size: 17px;
    line-height: 1.8;
    color: #687386;
}

.mobileapp-benefits {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 25px;
    margin-top: 55px;
}

.mobileapp-benefit {
    display: flex;
    gap: 18px;
    padding: 25px;
    border: 1px solid #e6ebf2;
    border-radius: 16px;
    background: #fff;
    transition: .25s ease;
}

.mobileapp-benefit:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(20,60,110,.09);
}

.benefit-icon,
.service-number {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 800;
    color: #1264d8;
}

.mobileapp-benefit h3 {
    margin: 0 0 8px;
    font-size: 18px;
}

.mobileapp-benefit p {
    margin: 0;
    color: #758096;
    line-height: 1.6;
    font-size: 14px;
}


/* =========================================
   SERVICES
========================================= */

.mobileapp-services {
    padding: 105px 0;
    background: #f7faff;
}

.mobileapp-service-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 22px;
}

.mobileapp-service-card {
    position: relative;
    overflow: hidden;
    min-height: 260px;
    padding: 32px;
    border: 1px solid #e4eaf2;
    border-radius: 18px;
    background: #fff;
    transition: .3s ease;
}

.mobileapp-service-card::after {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    right: -35px;
    bottom: -35px;
    background: rgba(18,100,216,.06);
}

.mobileapp-service-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 22px 50px rgba(18,65,120,.11);
    border-color: rgba(18,100,216,.25);
}

.mobileapp-service-card h3 {
    font-size: 21px;
    margin: 25px 0 12px;
}

.mobileapp-service-card p {
    color: #707b8f;
    line-height: 1.7;
    font-size: 14px;
    margin-bottom: 22px;
}

.mobileapp-service-card a {
    color: #1264d8;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}


/* =========================================
   APPLICATION TYPES
========================================= */

.mobileapp-types {
    padding: 105px 0;
}

.mobileapp-type-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
}

.mobileapp-type-card {
    padding: 30px;
    border-radius: 17px;
    border: 1px solid #e5ebf3;
    background: #fff;
    transition: .25s ease;
}

.mobileapp-type-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(20,60,110,.08);
}

.mobileapp-type-card > span {
    font-size: 12px;
    color: #58b52b;
    font-weight: 800;
}

.mobileapp-type-card h3 {
    margin: 18px 0 8px;
    font-size: 19px;
}

.mobileapp-type-card p {
    color: #758096;
    line-height: 1.7;
    font-size: 14px;
    margin: 0;
}


/* =========================================
   TECHNOLOGY
========================================= */

.mobileapp-technology {
    padding: 110px 0;
    background: #f7faff;
}

.mobileapp-tech-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.mobileapp-tech-content p {
    color: #6d788b;
    line-height: 1.8;
    font-size: 16px;
}

.mobileapp-tech-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.mobileapp-tech-list span {
    padding: 9px 14px;
    border-radius: 30px;
    background: #fff;
    color: #1264d8;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid #e2eaf4;
}

.mobileapp-tech-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.tech-box {
    padding: 27px;
    border-radius: 17px;
    background: linear-gradient(
        145deg,
        #1264d8,
        #0b4ba8
    );
    color: #fff;
}

.tech-box:nth-child(2) {
    background: linear-gradient(
        145deg,
        #58b52b,
        #42951d
    );
}

.tech-box:nth-child(3) {
    grid-column: span 2;
    background: linear-gradient(
        145deg,
        #1264d8,
        #58b52b
    );
}

.tech-box strong {
    font-size: 12px;
    opacity: .8;
}

.tech-box h3 {
    margin: 17px 0 7px;
}

.tech-box p {
    color: rgba(255,255,255,.82);
    font-size: 13px;
    margin: 0;
}


/* =========================================
   PROCESS
========================================= */

.mobileapp-process {
    padding: 105px 0;
}

.mobileapp-process-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
}

.process-step {
    padding: 30px;
    border-radius: 16px;
    border: 1px solid #e5ebf3;
    background: #fff;
}

.process-step > span {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #eaf2ff;
    color: #1264d8;
    font-size: 12px;
    font-weight: 800;
}

.process-step h3 {
    margin: 20px 0 8px;
}

.process-step p {
    margin: 0;
    color: #738096;
    font-size: 14px;
    line-height: 1.7;
}


/* =========================================
   CTA
========================================= */

.mobileapp-cta {
    padding: 90px 0;
}

.mobileapp-cta-box {
    padding: 60px;
    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            #063aa8 0%,
            #1264d8 50%,
            #58b52b 140%
        );

    color: #fff;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;
}

.mobileapp-cta-content {
    max-width: 680px;
}

.mobileapp-cta-content > span {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.6px;
    opacity: .8;
}

.mobileapp-cta-box h2 {
    font-size: clamp(32px,4vw,48px);
    line-height: 1.15;
    margin: 15px 0;
}

.mobileapp-cta-box h2 strong {
    color: #a7ed7c;
}

.mobileapp-cta-box p {
    margin: 0;
    color: rgba(255,255,255,.84);
    line-height: 1.7;
}

.mobileapp-cta-buttons {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.btn-white {
    background: #fff;
    color: #1264d8;
}

.btn-outline-white {
    border: 1px solid rgba(255,255,255,.6);
    color: #fff;
}

.btn-white:hover,
.btn-outline-white:hover {
    transform: translateY(-3px);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 950px) {

    .mobileapp-hero-grid,
    .mobileapp-tech-content {
        grid-template-columns: 1fr;
    }

    .mobileapp-visual {
        max-width: 600px;
        margin: 0 auto;
    }

    .mobileapp-benefits,
    .mobileapp-service-grid,
    .mobileapp-type-grid,
    .mobileapp-process-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .mobileapp-cta-box {
        flex-direction: column;
        align-items: flex-start;
    }
}


@media (max-width: 600px) {

    .mobileapp-hero {
        padding: 80px 0 60px;
    }

    .mobileapp-hero-content h1 {
        font-size: 40px;
        letter-spacing: -1px;
    }

    .mobileapp-benefits,
    .mobileapp-service-grid,
    .mobileapp-type-grid,
    .mobileapp-process-grid,
    .mobileapp-tech-panel {
        grid-template-columns: 1fr;
    }

    .tech-box:nth-child(3) {
        grid-column: auto;
    }

    .mobileapp-visual {
        min-height: 430px;
        transform: scale(.82);
    }

    .phone-back {
        transform: translate(-55px,25px) rotate(-8deg);
    }

    .phone-front {
        transform: translate(45px,-15px) rotate(5deg);
    }

    .mobileapp-cta-box {
        padding: 35px 25px;
    }

    .mobileapp-cta-buttons {
        width: 100%;
        flex-direction: column;
    }

    .mobileapp-cta-buttons .btn {
        width: 100%;
    }
}

/* =========================================
   AI & AUTOMATION PAGE
========================================= */

.ai-page {
    background: #fff;
    color: #14213d;
}

.ai-page .container {
    width: min(1180px, 92%);
    margin: 0 auto;
}


/* =========================================
   HERO
========================================= */

.ai-hero {
    padding: 45px 0 100px;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 85% 25%,
            rgba(88,181,43,.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 70% 70%,
            rgba(18,100,216,.10),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #f7faff 0%,
            #ffffff 100%
        );
}

.ai-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.ai-label,
.ai-section-heading > span {
    display: inline-block;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.8px;
    color: #1264d8;
    margin-bottom: 18px;
}

.ai-hero-content h1 {
    font-size: clamp(42px, 5vw, 66px);
    line-height: 1.08;
    letter-spacing: -2px;
    margin: 0 0 25px;
    font-weight: 800;
}

.ai-hero-content h1 span,
.ai-section-heading h2 span,
.ai-capability-content h2 span {
    background: linear-gradient(
        90deg,
        #1264d8,
        #58b52b
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ai-hero-content p {
    max-width: 650px;
    color: #69758a;
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 32px;
}

.ai-buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.ai-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 23px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    transition: .25s ease;
}

.ai-page .btn-primary {
    background: #1264d8;
    color: #fff;
    box-shadow: 0 12px 30px rgba(18,100,216,.22);
}

.ai-page .btn-primary:hover {
    transform: translateY(-3px);
    background: #0d55bb;
}

.ai-page .btn-outline {
    border: 1px solid #d7e0ee;
    color: #1264d8;
    background: #fff;
}

.ai-page .btn-outline:hover {
    border-color: #1264d8;
    transform: translateY(-3px);
}


/* =========================================
   AI VISUAL
========================================= */

.ai-visual {
    height: 500px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ai-orbit {
    position: absolute;
    border: 1px solid rgba(18,100,216,.18);
    border-radius: 50%;
}

.ai-orbit-one {
    width: 360px;
    height: 360px;
}

.ai-orbit-two {
    width: 470px;
    height: 470px;
    border-color: rgba(88,181,43,.14);
}

.ai-core {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    padding: 8px;

    background: linear-gradient(
        135deg,
        #1264d8,
        #58b52b
    );

    box-shadow:
        0 25px 60px rgba(18,100,216,.28),
        0 0 80px rgba(88,181,43,.15);

    position: relative;
    z-index: 3;
}

.ai-core-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #fff;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.ai-core-inner span {
    font-size: 50px;
    font-weight: 900;

    background: linear-gradient(
        135deg,
        #1264d8,
        #58b52b
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ai-core-inner small {
    font-size: 9px;
    letter-spacing: 2px;
    color: #7b8799;
}

.ai-node {
    position: absolute;
    z-index: 5;

    min-width: 90px;
    padding: 13px 15px;

    border-radius: 13px;
    background: #fff;

    box-shadow: 0 15px 35px rgba(20,60,110,.12);

    text-align: center;
}

.ai-node strong {
    display: block;
    color: #1264d8;
    font-size: 17px;
}

.ai-node small {
    display: block;
    margin-top: 4px;
    color: #7c8798;
    font-size: 10px;
}

.node-one {
    top: 75px;
    left: 35px;
}

.node-two {
    top: 65px;
    right: 35px;
}

.node-three {
    bottom: 75px;
    left: 55px;
}

.node-four {
    bottom: 60px;
    right: 45px;
}


/* =========================================
   INTRO
========================================= */

.ai-intro {
    padding: 105px 0;
}

.ai-section-heading {
    max-width: 760px;
}

.ai-section-heading.center {
    text-align: center;
    margin: 0 auto 55px;
}

.ai-section-heading h2,
.ai-capability-content h2 {
    font-size: clamp(32px,4vw,48px);
    line-height: 1.15;
    letter-spacing: -1.2px;
    margin: 0 0 20px;
}

.ai-section-heading p {
    color: #687386;
    font-size: 17px;
    line-height: 1.8;
}

.ai-benefits {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 25px;
    margin-top: 55px;
}

.ai-benefit {
    display: flex;
    gap: 18px;
    padding: 25px;

    border: 1px solid #e6ebf2;
    border-radius: 16px;
    background: #fff;

    transition: .25s ease;
}

.ai-benefit:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(20,60,110,.09);
}

.benefit-icon,
.service-number {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 800;
    color: #1264d8;
}

.ai-benefit h3 {
    margin: 0 0 8px;
    font-size: 18px;
}

.ai-benefit p {
    margin: 0;
    color: #758096;
    line-height: 1.6;
    font-size: 14px;
}


/* =========================================
   SERVICES
========================================= */

.ai-services {
    padding: 105px 0;
    background: #f7faff;
}

.ai-service-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 22px;
}

.ai-service-card {
    position: relative;
    overflow: hidden;

    min-height: 265px;
    padding: 32px;

    border: 1px solid #e4eaf2;
    border-radius: 18px;
    background: #fff;

    transition: .3s ease;
}

.ai-service-card::after {
    content: "";

    position: absolute;

    width: 105px;
    height: 105px;

    right: -35px;
    bottom: -35px;

    border-radius: 50%;

    background: rgba(18,100,216,.06);
}

.ai-service-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 22px 50px rgba(18,65,120,.11);
    border-color: rgba(18,100,216,.25);
}

.ai-service-card h3 {
    font-size: 21px;
    margin: 25px 0 12px;
}

.ai-service-card p {
    color: #707b8f;
    line-height: 1.7;
    font-size: 14px;
    margin-bottom: 22px;
}

.ai-service-card a {
    color: #1264d8;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}


/* =========================================
   USE CASES
========================================= */

.ai-usecases {
    padding: 105px 0;
}

.ai-usecase-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
}

.ai-usecase-card {
    padding: 30px;
    border-radius: 17px;
    border: 1px solid #e5ebf3;
    background: #fff;

    transition: .25s ease;
}

.ai-usecase-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(20,60,110,.08);
}

.ai-usecase-card > span {
    color: #58b52b;
    font-size: 12px;
    font-weight: 800;
}

.ai-usecase-card h3 {
    margin: 18px 0 8px;
    font-size: 19px;
}

.ai-usecase-card p {
    color: #758096;
    line-height: 1.7;
    font-size: 14px;
    margin: 0;
}


/* =========================================
   CAPABILITIES
========================================= */

.ai-capabilities {
    padding: 110px 0;
    background: #f7faff;
}

.ai-capability-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.ai-capability-content > div:first-child > p {
    color: #6d788b;
    line-height: 1.8;
    font-size: 16px;
}

.ai-capability-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
    margin-top: 30px;
}

.ai-capability-list div {
    padding: 13px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e4eaf2;
    color: #526075;
    font-size: 13px;
    font-weight: 600;
}

.ai-capability-list span {
    color: #58b52b;
    font-weight: 900;
    margin-right: 7px;
}

.ai-capability-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.ai-stat-box {
    padding: 27px;
    border-radius: 17px;

    background: linear-gradient(
        145deg,
        #1264d8,
        #0b4ba8
    );

    color: #fff;
}

.ai-stat-box:nth-child(2) {
    background: linear-gradient(
        145deg,
        #58b52b,
        #42951d
    );
}

.ai-stat-box:nth-child(3) {
    grid-column: span 2;

    background: linear-gradient(
        145deg,
        #1264d8,
        #58b52b
    );
}

.ai-stat-box strong {
    font-size: 12px;
    opacity: .8;
}

.ai-stat-box h3 {
    margin: 17px 0 7px;
}

.ai-stat-box p {
    margin: 0;
    color: rgba(255,255,255,.82);
    font-size: 13px;
    line-height: 1.6;
}


/* =========================================
   PROCESS
========================================= */

.ai-process {
    padding: 105px 0;
}

.ai-process-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
}

.ai-process-step {
    padding: 30px;
    border-radius: 16px;
    border: 1px solid #e5ebf3;
    background: #fff;
}

.ai-process-step > span {
    width: 38px;
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: #eaf2ff;
    color: #1264d8;

    font-size: 12px;
    font-weight: 800;
}

.ai-process-step h3 {
    margin: 20px 0 8px;
}

.ai-process-step p {
    margin: 0;
    color: #738096;
    font-size: 14px;
    line-height: 1.7;
}


/* =========================================
   CTA
========================================= */

.ai-cta {
    padding: 90px 0;
}

.ai-cta-box {
    padding: 60px;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            #063aa8 0%,
            #1264d8 50%,
            #58b52b 140%
        );

    color: #fff;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;
}

.ai-cta-content {
    max-width: 680px;
}

.ai-cta-content > span {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.6px;
    opacity: .8;
}

.ai-cta-box h2 {
    font-size: clamp(32px,4vw,48px);
    line-height: 1.15;
    margin: 15px 0;
}

.ai-cta-box h2 strong {
    color: #a7ed7c;
}

.ai-cta-box p {
    margin: 0;
    color: rgba(255,255,255,.84);
    line-height: 1.7;
}

.ai-cta-buttons {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.btn-white {
    background: #fff;
    color: #1264d8;
}

.btn-outline-white {
    border: 1px solid rgba(255,255,255,.6);
    color: #fff;
}

.btn-white:hover,
.btn-outline-white:hover {
    transform: translateY(-3px);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 950px) {

    .ai-hero-grid,
    .ai-capability-content {
        grid-template-columns: 1fr;
    }

    .ai-visual {
        max-width: 600px;
        margin: 0 auto;
    }

    .ai-benefits,
    .ai-service-grid,
    .ai-usecase-grid,
    .ai-process-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .ai-cta-box {
        flex-direction: column;
        align-items: flex-start;
    }
}


@media (max-width: 600px) {

    .ai-hero {
        padding: 80px 0 60px;
    }

    .ai-hero-content h1 {
        font-size: 40px;
        letter-spacing: -1px;
    }

    .ai-benefits,
    .ai-service-grid,
    .ai-usecase-grid,
    .ai-process-grid,
    .ai-capability-list,
    .ai-capability-panel {
        grid-template-columns: 1fr;
    }

    .ai-stat-box:nth-child(3) {
        grid-column: auto;
    }

    .ai-visual {
        height: 400px;
        transform: scale(.78);
    }

    .node-one {
        left: 5px;
    }

    .node-two {
        right: 5px;
    }

    .node-three {
        left: 20px;
    }

    .node-four {
        right: 15px;
    }

    .ai-cta-box {
        padding: 35px 25px;
    }

    .ai-cta-buttons {
        width: 100%;
        flex-direction: column;
    }

    .ai-cta-buttons .btn {
        width: 100%;
    }
}

/* =========================================
   DATA & ANALYTICS PAGE
========================================= */

.data-page {
    background: #fff;
    color: #14213d;
}

.data-page .container {
    width: min(1180px, 92%);
    margin: 0 auto;
}


/* =========================================
   HERO
========================================= */

.data-hero {
    padding: 45px 0 100px;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(18,100,216,.12),
            transparent 35%
        ),
        radial-gradient(
            circle at 70% 80%,
            rgba(88,181,43,.09),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #f7faff 0%,
            #ffffff 100%
        );
}

.data-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.data-label,
.data-section-heading > span {
    display: inline-block;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.8px;
    color: #1264d8;
    margin-bottom: 18px;
}

.data-hero-content h1 {
    font-size: clamp(42px,5vw,66px);
    line-height: 1.08;
    letter-spacing: -2px;
    margin: 0 0 25px;
    font-weight: 800;
}

.data-hero-content h1 span,
.data-section-heading h2 span,
.data-capability-content h2 span {
    background: linear-gradient(
        90deg,
        #1264d8,
        #58b52b
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.data-hero-content p {
    max-width: 650px;
    color: #69758a;
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 32px;
}

.data-buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.data-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    padding: 14px 23px;
    border-radius: 10px;

    text-decoration: none;
    font-weight: 700;

    transition: .25s ease;
}

.data-page .btn-primary {
    background: #1264d8;
    color: #fff;
    box-shadow: 0 12px 30px rgba(18,100,216,.22);
}

.data-page .btn-primary:hover {
    transform: translateY(-3px);
    background: #0d55bb;
}

.data-page .btn-outline {
    border: 1px solid #d7e0ee;
    color: #1264d8;
    background: #fff;
}

.data-page .btn-outline:hover {
    border-color: #1264d8;
    transform: translateY(-3px);
}


/* =========================================
   ANALYTICS VISUAL
========================================= */

.data-visual {
    position: relative;
}

.analytics-window {
    overflow: hidden;

    border: 1px solid #e1e8f2;
    border-radius: 22px;

    background: #fff;

    box-shadow: 0 30px 80px rgba(18,70,130,.15);

    transform: perspective(1000px) rotateY(-4deg);
}

.analytics-header {
    height: 55px;

    display: flex;
    align-items: center;

    gap: 15px;
    padding: 0 18px;

    background: #f5f8fc;
    border-bottom: 1px solid #e4eaf2;

    font-size: 12px;
    font-weight: 700;
}

.analytics-header > span {
    flex: 1;
}

.analytics-header b {
    color: #8b96a7;
}

.analytics-dots {
    display: flex;
    gap: 6px;
}

.analytics-dots i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
}

.analytics-body {
    padding: 25px;
    background: #f8faff;
}

.analytics-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
}

.analytics-card {
    padding: 18px;
    border-radius: 13px;
    background: #fff;
    border: 1px solid #e8edf4;
}

.analytics-card small {
    display: block;
    color: #8a94a6;
    font-size: 9px;
    margin-bottom: 8px;
}

.analytics-card strong {
    display: block;
    font-size: 20px;
}

.analytics-card span {
    color: #58b52b;
    font-size: 10px;
    font-weight: 700;
}

.analytics-chart-card {
    margin-top: 13px;
    padding: 20px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e8edf4;
}

.chart-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chart-title strong {
    font-size: 12px;
}

.chart-title small {
    color: #8a94a6;
    font-size: 9px;
}

.analytics-chart {
    display: flex;
    height: 160px;
    margin-top: 20px;
}

.chart-y {
    width: 35px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.chart-y span {
    font-size: 8px;
    color: #9aa4b4;
}

.chart-area {
    flex: 1;
    position: relative;
}

.chart-grid {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.chart-grid i {
    height: 1px;
    width: 100%;
    background: #edf1f6;
}

.chart-bars {
    position: absolute;
    inset: 8px 8px 0;

    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.chart-bars b {
    flex: 1;
    min-width: 10px;

    border-radius: 5px 5px 0 0;

    background: linear-gradient(
        180deg,
        #1264d8,
        #58b52b
    );
}

.analytics-bottom {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 20px;
    margin-top: 13px;
}

.analytics-donut {
    width: 105px;
    height: 105px;

    border-radius: 50%;

    background:
        conic-gradient(
            #1264d8 0 78%,
            #e5edf7 78% 100%
        );

    display: flex;
    align-items: center;
    justify-content: center;
}

.analytics-donut > div {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: #fff;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.analytics-donut strong {
    font-size: 18px;
    color: #1264d8;
}

.analytics-donut small {
    font-size: 8px;
    color: #8b96a7;
}

.analytics-insights {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 11px;
}

.analytics-insights > div {
    display: flex;
    align-items: center;
    gap: 9px;
}

.analytics-insights > div > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #58b52b;
}

.analytics-insights p {
    margin: 0;
}

.analytics-insights strong,
.analytics-insights small {
    display: block;
}

.analytics-insights strong {
    font-size: 10px;
}

.analytics-insights small {
    color: #8a94a6;
    font-size: 8px;
}


/* =========================================
   INTRO
========================================= */

.data-intro {
    padding: 105px 0;
}

.data-section-heading {
    max-width: 760px;
}

.data-section-heading.center {
    text-align: center;
    margin: 0 auto 55px;
}

.data-section-heading h2,
.data-capability-content h2 {
    font-size: clamp(32px,4vw,48px);
    line-height: 1.15;
    letter-spacing: -1.2px;
    margin: 0 0 20px;
}

.data-section-heading p {
    color: #687386;
    font-size: 17px;
    line-height: 1.8;
}

.data-benefits {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 25px;
    margin-top: 55px;
}

.data-benefit {
    display: flex;
    gap: 18px;

    padding: 25px;

    border: 1px solid #e6ebf2;
    border-radius: 16px;

    background: #fff;

    transition: .25s ease;
}

.data-benefit:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(20,60,110,.09);
}

.benefit-icon,
.service-number {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 800;
    color: #1264d8;
}

.data-benefit h3 {
    margin: 0 0 8px;
    font-size: 18px;
}

.data-benefit p {
    margin: 0;
    color: #758096;
    line-height: 1.6;
    font-size: 14px;
}


/* =========================================
   SERVICES
========================================= */

.data-services {
    padding: 105px 0;
    background: #f7faff;
}

.data-service-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 22px;
}

.data-service-card {
    position: relative;
    overflow: hidden;

    min-height: 260px;

    padding: 32px;

    border: 1px solid #e4eaf2;
    border-radius: 18px;

    background: #fff;

    transition: .3s ease;
}

.data-service-card::after {
    content: "";

    position: absolute;

    width: 105px;
    height: 105px;

    right: -35px;
    bottom: -35px;

    border-radius: 50%;

    background: rgba(18,100,216,.06);
}

.data-service-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 22px 50px rgba(18,65,120,.11);
    border-color: rgba(18,100,216,.25);
}

.data-service-card h3 {
    font-size: 21px;
    margin: 25px 0 12px;
}

.data-service-card p {
    color: #707b8f;
    line-height: 1.7;
    font-size: 14px;
    margin-bottom: 22px;
}

.data-service-card a {
    color: #1264d8;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}


/* =========================================
   USE CASES
========================================= */

.data-usecases {
    padding: 105px 0;
}

.data-usecase-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
}

.data-usecase-card {
    padding: 30px;

    border-radius: 17px;
    border: 1px solid #e5ebf3;

    background: #fff;

    transition: .25s ease;
}

.data-usecase-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(20,60,110,.08);
}

.data-usecase-card > span {
    color: #58b52b;
    font-size: 12px;
    font-weight: 800;
}

.data-usecase-card h3 {
    margin: 18px 0 8px;
    font-size: 19px;
}

.data-usecase-card p {
    color: #758096;
    line-height: 1.7;
    font-size: 14px;
    margin: 0;
}


/* =========================================
   DATA CAPABILITIES
========================================= */

.data-capabilities {
    padding: 110px 0;
    background: #f7faff;
}

.data-capability-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.data-capability-content > div:first-child > p {
    color: #6d788b;
    line-height: 1.8;
    font-size: 16px;
}

.data-capability-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
    margin-top: 30px;
}

.data-capability-list div {
    padding: 13px;

    border-radius: 10px;
    background: #fff;
    border: 1px solid #e4eaf2;

    color: #526075;
    font-size: 13px;
    font-weight: 600;
}

.data-capability-list span {
    color: #58b52b;
    font-weight: 900;
    margin-right: 7px;
}

.data-capability-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.data-stat-box {
    padding: 27px;

    border-radius: 17px;

    background: linear-gradient(
        145deg,
        #1264d8,
        #0b4ba8
    );

    color: #fff;
}

.data-stat-box:nth-child(2) {
    background: linear-gradient(
        145deg,
        #58b52b,
        #42951d
    );
}

.data-stat-box:nth-child(3) {
    grid-column: span 2;

    background: linear-gradient(
        145deg,
        #1264d8,
        #58b52b
    );
}

.data-stat-box strong {
    font-size: 12px;
    opacity: .8;
}

.data-stat-box h3 {
    margin: 17px 0 7px;
}

.data-stat-box p {
    margin: 0;
    color: rgba(255,255,255,.82);
    font-size: 13px;
    line-height: 1.6;
}


/* =========================================
   PROCESS
========================================= */

.data-process {
    padding: 105px 0;
}

.data-process-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
}

.data-process-step {
    padding: 30px;

    border-radius: 16px;
    border: 1px solid #e5ebf3;

    background: #fff;
}

.data-process-step > span {
    width: 38px;
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: #eaf2ff;
    color: #1264d8;

    font-size: 12px;
    font-weight: 800;
}

.data-process-step h3 {
    margin: 20px 0 8px;
}

.data-process-step p {
    margin: 0;
    color: #738096;
    font-size: 14px;
    line-height: 1.7;
}


/* =========================================
   CTA
========================================= */

.data-cta {
    padding: 90px 0;
}

.data-cta-box {
    padding: 60px;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            #063aa8 0%,
            #1264d8 50%,
            #58b52b 140%
        );

    color: #fff;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;
}

.data-cta-content {
    max-width: 680px;
}

.data-cta-content > span {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.6px;
    opacity: .8;
}

.data-cta-box h2 {
    font-size: clamp(32px,4vw,48px);
    line-height: 1.15;
    margin: 15px 0;
}

.data-cta-box h2 strong {
    color: #a7ed7c;
}

.data-cta-box p {
    margin: 0;
    color: rgba(255,255,255,.84);
    line-height: 1.7;
}

.data-cta-buttons {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.btn-white {
    background: #fff;
    color: #1264d8;
}

.btn-outline-white {
    border: 1px solid rgba(255,255,255,.6);
    color: #fff;
}

.btn-white:hover,
.btn-outline-white:hover {
    transform: translateY(-3px);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 950px) {

    .data-hero-grid,
    .data-capability-content {
        grid-template-columns: 1fr;
    }

    .data-visual {
        max-width: 650px;
        margin: 0 auto;
    }

    .data-benefits,
    .data-service-grid,
    .data-usecase-grid,
    .data-process-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .data-cta-box {
        flex-direction: column;
        align-items: flex-start;
    }
}


@media (max-width: 600px) {

    .data-hero {
        padding: 80px 0 60px;
    }

    .data-hero-content h1 {
        font-size: 40px;
        letter-spacing: -1px;
    }

    .data-benefits,
    .data-service-grid,
    .data-usecase-grid,
    .data-process-grid,
    .data-capability-list,
    .data-capability-panel {
        grid-template-columns: 1fr;
    }

    .data-stat-box:nth-child(3) {
        grid-column: auto;
    }

    .analytics-window {
        transform: none;
    }

    .analytics-body {
        padding: 15px;
    }

    .analytics-bottom {
        grid-template-columns: 1fr;
    }

    .analytics-donut {
        margin: 0 auto;
    }

    .data-cta-box {
        padding: 35px 25px;
    }

    .data-cta-buttons {
        width: 100%;
        flex-direction: column;
    }

    .data-cta-buttons .btn {
        width: 100%;
    }
}

/* ================= CLOUD SOLUTIONS ================= */

.cloud-page {
    background: #fff;
    color: #17233d;
    overflow: hidden;
}

.cloud-page * {
    box-sizing: border-box;
}

.cloud-page .container {
    width: min(1180px, 92%);
    margin: auto;
}


/* ---------- HERO ---------- */

.cloud-hero {
    padding: 45px 0 90px;
    background:
        radial-gradient(circle at 85% 20%, rgba(18,100,216,.12), transparent 32%),
        linear-gradient(135deg, #f8fbff 0%, #ffffff 55%, #f5fff1 100%);
}

.cloud-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 70px;
}

.cloud-label,
.cloud-section-heading > span,
.cloud-cta > div > span {
    display: inline-block;
    color: #1264d8;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.cloud-hero h1 {
    font-size: clamp(42px, 5vw, 68px);
    line-height: 1.06;
    margin: 0 0 25px;
    letter-spacing: -2px;
}

.cloud-hero h1 span,
.cloud-section-heading h2 span,
.cloud-capabilities-content h2 span,
.cloud-cta h2 strong {
    display: block;
    background: linear-gradient(90deg, #1264d8, #58b52b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cloud-hero p {
    max-width: 650px;
    color: #66738a;
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 32px;
}


/* ---------- BUTTONS ---------- */

.cloud-buttons,
.cloud-cta-buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.cloud-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 23px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: .3s ease;
}

.cloud-btn-primary {
    color: #fff;
    background: #1264d8;
    box-shadow: 0 12px 30px rgba(18,100,216,.25);
}

.cloud-btn-primary:hover {
    transform: translateY(-3px);
    background: #0d54ba;
}

.cloud-btn-outline {
    color: #1264d8;
    border: 1px solid #cbd9ee;
    background: #fff;
}

.cloud-btn-outline:hover {
    border-color: #1264d8;
    transform: translateY(-3px);
}


/* ---------- HERO CLOUD VISUAL ---------- */

.cloud-hero-visual {
    height: 470px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cloud-core {
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: linear-gradient(145deg, #1264d8, #58b52b);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-shadow: 0 25px 70px rgba(18,100,216,.3);
    position: relative;
    z-index: 3;
}

.cloud-icon {
    font-size: 58px;
    line-height: 1;
    margin-bottom: 10px;
}

.cloud-core strong {
    font-size: 24px;
}

.cloud-core small {
    opacity: .85;
    margin-top: 7px;
}

.cloud-orbit {
    position: absolute;
    border: 1px dashed rgba(18,100,216,.3);
    border-radius: 50%;
}

.orbit-one {
    width: 330px;
    height: 330px;
}

.orbit-two {
    width: 450px;
    height: 450px;
    border-color: rgba(88,181,43,.25);
}

.cloud-node {
    position: absolute;
    width: 65px;
    height: 65px;
    background: #fff;
    border: 1px solid #e4ebf5;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    box-shadow: 0 15px 35px rgba(20,60,110,.12);
    z-index: 4;
}

.node-one { top: 55px; right: 55px; }
.node-two { bottom: 50px; right: 35px; }
.node-three { bottom: 35px; left: 55px; }
.node-four { top: 60px; left: 45px; }


/* ---------- INTRO ---------- */

.cloud-intro {
    padding: 100px 0;
}

.cloud-section-heading {
    max-width: 760px;
}

.cloud-section-heading.center {
    text-align: center;
    margin: 0 auto 55px;
}

.cloud-section-heading h2,
.cloud-capabilities-content h2 {
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.15;
    margin: 0 0 18px;
    letter-spacing: -1px;
}

.cloud-section-heading p {
    color: #6c788d;
    line-height: 1.8;
    font-size: 16px;
}

.cloud-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 50px;
}

.cloud-benefit-card {
    padding: 35px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #e7edf5;
    box-shadow: 0 15px 45px rgba(16,58,105,.07);
    transition: .3s ease;
}

.cloud-benefit-card:hover {
    transform: translateY(-7px);
    border-color: #bcd4f4;
}

.cloud-benefit-icon {
    width: 58px;
    height: 58px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eaf3ff, #f0fae9);
    font-size: 25px;
    margin-bottom: 22px;
}

.cloud-benefit-card h3 {
    margin: 0 0 12px;
    font-size: 20px;
}

.cloud-benefit-card p {
    color: #6c788d;
    line-height: 1.7;
    margin: 0;
}


/* ---------- SERVICES ---------- */

.cloud-services {
    padding: 100px 0;
    background: #f7faff;
}

.cloud-service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.cloud-service-card {
    background: #fff;
    border: 1px solid #e3eaf4;
    border-radius: 20px;
    padding: 32px;
    min-height: 260px;
    transition: .3s ease;
}

.cloud-service-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 45px rgba(18,100,216,.1);
    border-color: #bdd3ef;
}

.cloud-service-number {
    font-size: 13px;
    color: #58b52b;
    font-weight: 800;
    margin-bottom: 30px;
}

.cloud-service-card h3 {
    font-size: 20px;
    margin: 0 0 14px;
}

.cloud-service-card p {
    color: #6d788a;
    line-height: 1.7;
    margin-bottom: 22px;
}

.cloud-service-link {
    color: #1264d8;
    font-weight: 700;
    font-size: 13px;
}


/* ---------- CAPABILITIES ---------- */

.cloud-capabilities {
    padding: 110px 0;
}

.cloud-capabilities-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.cloud-capabilities-content p {
    color: #69768b;
    line-height: 1.8;
    font-size: 16px;
}

.cloud-check-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 30px;
}

.cloud-check-list div {
    font-size: 14px;
    font-weight: 700;
    color: #37455d;
}

.cloud-check-list div::first-letter {
    color: #58b52b;
}

.cloud-capability-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.cloud-capability-card {
    padding: 28px;
    border-radius: 18px;
    background: linear-gradient(145deg, #1264d8, #0b4ca8);
    color: #fff;
    min-height: 180px;
    box-shadow: 0 18px 40px rgba(18,100,216,.14);
}

.cloud-capability-card:nth-child(even) {
    background: linear-gradient(145deg, #58b52b, #3f941b);
}

.cloud-capability-card strong {
    font-size: 20px;
}

.cloud-capability-card p {
    color: rgba(255,255,255,.82);
    line-height: 1.6;
    font-size: 14px;
}


/* ---------- USE CASES ---------- */

.cloud-usecases {
    padding: 100px 0;
    background: #f7faff;
}

.cloud-usecase-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.cloud-usecase {
    background: #fff;
    padding: 25px;
    border-radius: 16px;
    border: 1px solid #e4ebf5;
    transition: .3s ease;
}

.cloud-usecase:hover {
    transform: translateY(-5px);
    border-color: #bcd3ef;
}

.cloud-usecase strong {
    display: block;
    margin-bottom: 8px;
    font-size: 16px;
}

.cloud-usecase small {
    color: #718096;
    line-height: 1.6;
    display: block;
}


/* ---------- PROCESS ---------- */

.cloud-process {
    padding: 105px 0;
}

.cloud-process-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
}

.cloud-process-step {
    position: relative;
    padding: 25px 18px;
    text-align: center;
}

.cloud-process-step span {
    width: 48px;
    height: 48px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eaf3ff;
    color: #1264d8;
    font-size: 13px;
    font-weight: 800;
}

.cloud-process-step:nth-child(even) span {
    background: #edf9e7;
    color: #58b52b;
}

.cloud-process-step h3 {
    font-size: 17px;
    margin-bottom: 10px;
}

.cloud-process-step p {
    color: #748095;
    font-size: 13px;
    line-height: 1.6;
}


/* ---------- CTA ---------- */

.cloud-contact {
    padding: 80px 0 100px;
}

.cloud-cta {
    padding: 55px 65px;
    border-radius: 25px;
    background: linear-gradient(135deg, #1264d8, #0b4da8 55%, #58b52b);
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 35px;
    box-shadow: 0 25px 65px rgba(18,100,216,.2);
}

.cloud-cta > div > span {
    color: rgba(255,255,255,.8);
}

.cloud-cta h2 {
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.15;
    margin: 0 0 15px;
}

.cloud-cta h2 strong {
    background: linear-gradient(90deg, #fff, #dfffcf);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cloud-cta p {
    color: rgba(255,255,255,.82);
    margin: 0;
    line-height: 1.7;
}

.cloud-btn-white {
    background: #fff;
    color: #1264d8;
}

.cloud-btn-outline-white {
    border: 1px solid rgba(255,255,255,.5);
    color: #fff;
}

.cloud-btn-white:hover,
.cloud-btn-outline-white:hover {
    transform: translateY(-3px);
}


/* ---------- RESPONSIVE ---------- */

@media (max-width: 1000px) {

    .cloud-hero-grid,
    .cloud-capabilities-grid {
        grid-template-columns: 1fr;
    }

    .cloud-hero-visual {
        height: 400px;
    }

    .cloud-service-grid,
    .cloud-usecase-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cloud-process-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .cloud-cta {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 700px) {

    .cloud-hero {
        padding: 80px 0 60px;
    }

    .cloud-benefits,
    .cloud-service-grid,
    .cloud-usecase-grid,
    .cloud-capability-cards {
        grid-template-columns: 1fr;
    }

    .cloud-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cloud-hero-visual {
        transform: scale(.82);
        margin: -30px 0;
    }

    .cloud-check-list {
        grid-template-columns: 1fr;
    }

    .cloud-cta {
        padding: 40px 28px;
    }
}

@media (max-width: 450px) {

    .cloud-process-grid {
        grid-template-columns: 1fr;
    }

    .cloud-hero h1 {
        font-size: 40px;
    }

    .cloud-buttons,
    .cloud-cta-buttons {
        flex-direction: column;
    }

    .cloud-btn {
        justify-content: center;
    }
}

/* =========================================================
   API & INTEGRATION
   ========================================================= */

.api-page {
    background: #fff;
    color: #17233d;
    overflow: hidden;
}

.api-page * {
    box-sizing: border-box;
}

.api-page .container {
    width: min(1180px, 92%);
    margin: auto;
}


/* ================= HERO ================= */

.api-hero {
    padding: 45px 0 90px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(18,100,216,.12),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #f8fbff 0%,
            #ffffff 55%,
            #f5fff1 100%
        );
}

.api-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 70px;
}

.api-label,
.api-section-heading > span,
.api-cta > div > span {
    display: inline-block;
    color: #1264d8;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.api-hero h1 {
    font-size: clamp(42px, 5vw, 68px);
    line-height: 1.06;
    margin: 0 0 25px;
    letter-spacing: -2px;
}

.api-hero h1 span,
.api-section-heading h2 span,
.api-capabilities-content h2 span,
.api-cta h2 strong {
    display: block;

    background:
        linear-gradient(
            90deg,
            #1264d8,
            #58b52b
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.api-hero p {
    max-width: 650px;
    color: #66738a;
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 32px;
}


/* ================= BUTTONS ================= */

.api-buttons,
.api-cta-buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.api-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 23px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: .3s ease;
}

.api-btn-primary {
    color: #fff;
    background: #1264d8;
    box-shadow: 0 12px 30px rgba(18,100,216,.25);
}

.api-btn-primary:hover {
    transform: translateY(-3px);
    background: #0d54ba;
}

.api-btn-outline {
    color: #1264d8;
    border: 1px solid #cbd9ee;
    background: #fff;
}

.api-btn-outline:hover {
    border-color: #1264d8;
    transform: translateY(-3px);
}


/* ================= API VISUAL ================= */

.api-hero-visual {
    height: 470px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.api-core {
    width: 205px;
    height: 205px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #1264d8,
            #58b52b
        );

    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    box-shadow:
        0 25px 70px rgba(18,100,216,.3);

    position: relative;
    z-index: 3;
}

.api-symbol {
    font-size: 45px;
    font-weight: 800;
    margin-bottom: 7px;
}

.api-core strong {
    font-size: 25px;
}

.api-core small {
    opacity: .85;
    margin-top: 7px;
    text-align: center;
}


/* Connection Lines */

.api-line {
    position: absolute;
    height: 1px;
    width: 170px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(18,100,216,.45),
            transparent
        );

    transform-origin: center;
}

.line-one {
    transform: rotate(35deg);
}

.line-two {
    transform: rotate(-35deg);
}

.line-three {
    transform: rotate(145deg);
}

.line-four {
    transform: rotate(-145deg);
}


/* Nodes */

.api-node {
    position: absolute;

    width: 72px;
    height: 72px;

    border-radius: 18px;

    background: #fff;

    border: 1px solid #e1e9f4;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow:
        0 15px 35px rgba(20,60,110,.12);

    z-index: 4;

    transition: .3s ease;
}

.api-node:hover {
    transform: translateY(-6px) scale(1.05);
    border-color: #1264d8;
}

.api-node span {
    font-size: 12px;
    font-weight: 800;
    color: #1264d8;
}

.api-node-two span,
.api-node-four span {
    color: #58b52b;
}

.api-node-one {
    top: 45px;
    right: 70px;
}

.api-node-two {
    bottom: 45px;
    right: 55px;
}

.api-node-three {
    bottom: 40px;
    left: 55px;
}

.api-node-four {
    top: 50px;
    left: 55px;
}


/* ================= INTRO ================= */

.api-intro {
    padding: 100px 0;
}

.api-section-heading {
    max-width: 780px;
}

.api-section-heading.center {
    text-align: center;
    margin: 0 auto 55px;
}

.api-section-heading h2,
.api-capabilities-content h2 {
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.15;
    margin: 0 0 18px;
    letter-spacing: -1px;
}

.api-section-heading p {
    color: #6c788d;
    line-height: 1.8;
    font-size: 16px;
}


/* ================= BENEFITS ================= */

.api-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 50px;
}

.api-benefit-card {
    padding: 35px;

    border-radius: 20px;

    background: #fff;

    border: 1px solid #e7edf5;

    box-shadow:
        0 15px 45px rgba(16,58,105,.07);

    transition: .3s ease;
}

.api-benefit-card:hover {
    transform: translateY(-7px);
    border-color: #bcd4f4;
}

.api-benefit-icon {
    width: 58px;
    height: 58px;

    border-radius: 15px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #eaf3ff,
            #f0fae9
        );

    font-size: 25px;
    margin-bottom: 22px;
}

.api-benefit-card h3 {
    margin: 0 0 12px;
    font-size: 20px;
}

.api-benefit-card p {
    color: #6c788d;
    line-height: 1.7;
    margin: 0;
}


/* ================= SERVICES ================= */

.api-services {
    padding: 100px 0;
    background: #f7faff;
}

.api-service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.api-service-card {
    background: #fff;

    border: 1px solid #e3eaf4;

    border-radius: 20px;

    padding: 32px;

    min-height: 270px;

    transition: .3s ease;
}

.api-service-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 20px 45px rgba(18,100,216,.1);

    border-color: #bdd3ef;
}

.api-service-number {
    font-size: 13px;
    color: #58b52b;
    font-weight: 800;
    margin-bottom: 30px;
}

.api-service-card h3 {
    font-size: 20px;
    margin: 0 0 14px;
}

.api-service-card p {
    color: #6d788a;
    line-height: 1.7;
    margin-bottom: 22px;
}

.api-service-link {
    color: #1264d8;
    font-weight: 700;
    font-size: 13px;
}


/* ================= CAPABILITIES ================= */

.api-capabilities {
    padding: 110px 0;
}

.api-capabilities-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.api-capabilities-content p {
    color: #69768b;
    line-height: 1.8;
    font-size: 16px;
}

.api-check-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 30px;
}

.api-check-list div {
    font-size: 14px;
    font-weight: 700;
    color: #37455d;
}

.api-check-list div::first-letter {
    color: #58b52b;
}

.api-capability-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.api-capability-card {
    padding: 28px;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #1264d8,
            #0b4ca8
        );

    color: #fff;

    min-height: 180px;

    box-shadow:
        0 18px 40px rgba(18,100,216,.14);
}

.api-capability-card:nth-child(even) {
    background:
        linear-gradient(
            145deg,
            #58b52b,
            #3f941b
        );
}

.api-capability-card strong {
    font-size: 20px;
}

.api-capability-card p {
    color: rgba(255,255,255,.82);
    line-height: 1.6;
    font-size: 14px;
}


/* ================= USE CASES ================= */

.api-usecases {
    padding: 100px 0;
    background: #f7faff;
}

.api-usecase-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.api-usecase {
    background: #fff;

    padding: 25px;

    border-radius: 16px;

    border: 1px solid #e4ebf5;

    transition: .3s ease;
}

.api-usecase:hover {
    transform: translateY(-5px);
    border-color: #bcd3ef;
}

.api-usecase strong {
    display: block;
    margin-bottom: 8px;
    font-size: 16px;
}

.api-usecase small {
    color: #718096;
    line-height: 1.6;
    display: block;
}


/* ================= PROCESS ================= */

.api-process {
    padding: 105px 0;
}

.api-process-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
}

.api-process-step {
    padding: 25px 18px;
    text-align: center;
}

.api-process-step span {
    width: 48px;
    height: 48px;

    margin: 0 auto 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #eaf3ff;

    color: #1264d8;

    font-size: 13px;
    font-weight: 800;
}

.api-process-step:nth-child(even) span {
    background: #edf9e7;
    color: #58b52b;
}

.api-process-step h3 {
    font-size: 17px;
    margin-bottom: 10px;
}

.api-process-step p {
    color: #748095;
    font-size: 13px;
    line-height: 1.6;
}


/* ================= CTA ================= */

.api-contact {
    padding: 80px 0 100px;
}

.api-cta {
    padding: 55px 65px;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            #1264d8,
            #0b4da8 55%,
            #58b52b
        );

    color: #fff;

    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 35px;

    box-shadow:
        0 25px 65px rgba(18,100,216,.2);
}

.api-cta > div > span {
    color: rgba(255,255,255,.8);
}

.api-cta h2 {
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.15;
    margin: 0 0 15px;
}

.api-cta h2 strong {
    background:
        linear-gradient(
            90deg,
            #fff,
            #dfffcf
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.api-cta p {
    color: rgba(255,255,255,.82);
    margin: 0;
    line-height: 1.7;
}

.api-btn-white {
    background: #fff;
    color: #1264d8;
}

.api-btn-outline-white {
    border: 1px solid rgba(255,255,255,.5);
    color: #fff;
}

.api-btn-white:hover,
.api-btn-outline-white:hover {
    transform: translateY(-3px);
}


/* ================= RESPONSIVE ================= */

@media (max-width: 1000px) {

    .api-hero-grid,
    .api-capabilities-grid {
        grid-template-columns: 1fr;
    }

    .api-hero-visual {
        height: 400px;
    }

    .api-service-grid,
    .api-usecase-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .api-process-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .api-cta {
        flex-direction: column;
        align-items: flex-start;
    }
}


@media (max-width: 700px) {

    .api-hero {
        padding: 80px 0 60px;
    }

    .api-benefits,
    .api-service-grid,
    .api-usecase-grid,
    .api-capability-cards {
        grid-template-columns: 1fr;
    }

    .api-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .api-hero-visual {
        transform: scale(.82);
        margin: -30px 0;
    }

    .api-check-list {
        grid-template-columns: 1fr;
    }

    .api-cta {
        padding: 40px 28px;
    }
}


@media (max-width: 450px) {

    .api-process-grid {
        grid-template-columns: 1fr;
    }

    .api-hero h1 {
        font-size: 40px;
    }

    .api-buttons,
    .api-cta-buttons {
        flex-direction: column;
    }

    .api-btn {
        justify-content: center;
    }

}

/* =========================================================
   UI / UX DESIGN
   Synergia Solutions
   ========================================================= */

.uiux-page {
    background: #fff;
    color: #17233d;
    overflow: hidden;
}

.uiux-page * {
    box-sizing: border-box;
}

.uiux-page .container {
    width: min(1180px, 92%);
    margin: auto;
}


/* ================= HERO ================= */

.uiux-hero {
    padding: 45px 0 90px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(18,100,216,.12),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #f8fbff 0%,
            #ffffff 55%,
            #f5fff1 100%
        );
}

.uiux-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 70px;
}

.uiux-label,
.uiux-section-heading > span,
.uiux-cta > div > span {
    display: inline-block;
    color: #1264d8;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.uiux-hero h1 {
    font-size: clamp(42px, 5vw, 68px);
    line-height: 1.06;
    margin: 0 0 25px;
    letter-spacing: -2px;
}

.uiux-hero h1 span,
.uiux-section-heading h2 span,
.uiux-capabilities-content h2 span,
.uiux-cta h2 strong {
    display: block;

    background:
        linear-gradient(
            90deg,
            #1264d8,
            #58b52b
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.uiux-hero p {
    max-width: 650px;
    color: #66738a;
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 32px;
}


/* ================= BUTTONS ================= */

.uiux-buttons,
.uiux-cta-buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.uiux-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 14px 23px;

    border-radius: 10px;

    text-decoration: none;

    font-size: 14px;
    font-weight: 700;

    transition: .3s ease;
}

.uiux-btn-primary {
    color: #fff;
    background: #1264d8;

    box-shadow:
        0 12px 30px rgba(18,100,216,.25);
}

.uiux-btn-primary:hover {
    transform: translateY(-3px);
    background: #0d54ba;
}

.uiux-btn-outline {
    color: #1264d8;

    border: 1px solid #cbd9ee;

    background: #fff;
}

.uiux-btn-outline:hover {
    border-color: #1264d8;
    transform: translateY(-3px);
}


/* ================= DESIGN VISUAL ================= */

.uiux-hero-visual {
    height: 470px;
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
}

.uiux-design-card {
    position: absolute;

    width: 230px;
    height: 270px;

    padding: 20px;

    background: #fff;

    border: 1px solid #e1e9f4;

    border-radius: 20px;

    box-shadow:
        0 25px 55px rgba(20,60,110,.12);
}

.design-card-one {
    left: 10px;
    top: 55px;
    transform: rotate(-8deg);
}

.design-card-two {
    right: 15px;
    bottom: 35px;
    transform: rotate(8deg);
}

.uiux-card-top {
    display: flex;
    gap: 6px;
    margin-bottom: 30px;
}

.uiux-card-top span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #dce5f2;
}

.uiux-card-line {
    width: 75%;
    height: 8px;

    background: #edf2f8;

    border-radius: 20px;

    margin-bottom: 12px;
}

.uiux-card-line.large {
    width: 90%;
}

.uiux-card-line.short {
    width: 50%;
}

.uiux-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 25px;
}

.uiux-mini-grid div {
    height: 70px;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #eaf3ff,
            #edf9e7
        );
}

.uiux-profile {
    width: 75px;
    height: 75px;

    border-radius: 50%;

    margin: 15px auto 25px;

    background:
        linear-gradient(
            135deg,
            #1264d8,
            #58b52b
        );
}

.uiux-action {
    margin-top: 25px;

    padding: 12px;

    text-align: center;

    color: #fff;

    border-radius: 9px;

    font-size: 12px;
    font-weight: 700;

    background: #1264d8;
}

.uiux-center {
    width: 190px;
    height: 190px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #1264d8,
            #58b52b
        );

    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    position: relative;
    z-index: 5;

    box-shadow:
        0 25px 70px rgba(18,100,216,.28);
}

.uiux-center-icon {
    font-size: 42px;
    margin-bottom: 5px;
}

.uiux-center strong {
    font-size: 23px;
}

.uiux-center small {
    margin-top: 7px;
    opacity: .85;
}


/* ================= INTRO ================= */

.uiux-intro {
    padding: 100px 0;
}

.uiux-section-heading {
    max-width: 780px;
}

.uiux-section-heading.center {
    text-align: center;
    margin: 0 auto 55px;
}

.uiux-section-heading h2,
.uiux-capabilities-content h2 {
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.15;

    margin: 0 0 18px;

    letter-spacing: -1px;
}

.uiux-section-heading p {
    color: #6c788d;
    line-height: 1.8;
    font-size: 16px;
}


/* ================= BENEFITS ================= */

.uiux-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 24px;

    margin-top: 50px;
}

.uiux-benefit-card {
    padding: 35px;

    border-radius: 20px;

    background: #fff;

    border: 1px solid #e7edf5;

    box-shadow:
        0 15px 45px rgba(16,58,105,.07);

    transition: .3s ease;
}

.uiux-benefit-card:hover {
    transform: translateY(-7px);
    border-color: #bcd4f4;
}

.uiux-benefit-icon {
    width: 58px;
    height: 58px;

    border-radius: 15px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #eaf3ff,
            #f0fae9
        );

    font-size: 25px;

    margin-bottom: 22px;
}

.uiux-benefit-card h3 {
    margin: 0 0 12px;
    font-size: 20px;
}

.uiux-benefit-card p {
    color: #6c788d;
    line-height: 1.7;
    margin: 0;
}


/* ================= SERVICES ================= */

.uiux-services {
    padding: 100px 0;
    background: #f7faff;
}

.uiux-service-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 22px;
}

.uiux-service-card {
    background: #fff;

    border: 1px solid #e3eaf4;

    border-radius: 20px;

    padding: 32px;

    min-height: 270px;

    transition: .3s ease;
}

.uiux-service-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 20px 45px rgba(18,100,216,.1);

    border-color: #bdd3ef;
}

.uiux-service-number {
    font-size: 13px;

    color: #58b52b;

    font-weight: 800;

    margin-bottom: 30px;
}

.uiux-service-card h3 {
    font-size: 20px;

    margin: 0 0 14px;
}

.uiux-service-card p {
    color: #6d788a;

    line-height: 1.7;

    margin-bottom: 22px;
}

.uiux-service-link {
    color: #1264d8;

    font-weight: 700;

    font-size: 13px;
}


/* ================= CAPABILITIES ================= */

.uiux-capabilities {
    padding: 110px 0;
}

.uiux-capabilities-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: center;
}

.uiux-capabilities-content p {
    color: #69768b;

    line-height: 1.8;

    font-size: 16px;
}

.uiux-check-list {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 14px;

    margin-top: 30px;
}

.uiux-check-list div {
    font-size: 14px;

    font-weight: 700;

    color: #37455d;
}

.uiux-check-list div::first-letter {
    color: #58b52b;
}

.uiux-capability-cards {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;
}

.uiux-capability-card {
    padding: 28px;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #1264d8,
            #0b4ca8
        );

    color: #fff;

    min-height: 180px;

    box-shadow:
        0 18px 40px rgba(18,100,216,.14);
}

.uiux-capability-card:nth-child(even) {
    background:
        linear-gradient(
            145deg,
            #58b52b,
            #3f941b
        );
}

.uiux-capability-card strong {
    font-size: 20px;
}

.uiux-capability-card p {
    color: rgba(255,255,255,.82);

    line-height: 1.6;

    font-size: 14px;
}


/* ================= PRODUCTS ================= */

.uiux-products {
    padding: 100px 0;

    background: #f7faff;
}

.uiux-product-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 18px;
}

.uiux-product {
    background: #fff;

    padding: 25px;

    border-radius: 16px;

    border: 1px solid #e4ebf5;

    transition: .3s ease;
}

.uiux-product:hover {
    transform: translateY(-5px);

    border-color: #bcd3ef;
}

.uiux-product strong {
    display: block;

    margin-bottom: 8px;

    font-size: 16px;
}

.uiux-product small {
    color: #718096;

    line-height: 1.6;

    display: block;
}


/* ================= PROCESS ================= */

.uiux-process {
    padding: 105px 0;
}

.uiux-process-grid {
    display: grid;

    grid-template-columns: repeat(6, 1fr);

    gap: 15px;
}

.uiux-process-step {
    padding: 25px 18px;

    text-align: center;
}

.uiux-process-step span {
    width: 48px;
    height: 48px;

    margin: 0 auto 20px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #eaf3ff;

    color: #1264d8;

    font-size: 13px;

    font-weight: 800;
}

.uiux-process-step:nth-child(even) span {
    background: #edf9e7;
    color: #58b52b;
}

.uiux-process-step h3 {
    font-size: 17px;

    margin-bottom: 10px;
}

.uiux-process-step p {
    color: #748095;

    font-size: 13px;

    line-height: 1.6;
}


/* ================= CTA ================= */

.uiux-contact {
    padding: 80px 0 100px;
}

.uiux-cta {
    padding: 55px 65px;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            #1264d8,
            #0b4da8 55%,
            #58b52b
        );

    color: #fff;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 35px;

    box-shadow:
        0 25px 65px rgba(18,100,216,.2);
}

.uiux-cta > div > span {
    color: rgba(255,255,255,.8);
}

.uiux-cta h2 {
    font-size: clamp(30px, 4vw, 46px);

    line-height: 1.15;

    margin: 0 0 15px;
}

.uiux-cta h2 strong {
    background:
        linear-gradient(
            90deg,
            #fff,
            #dfffcf
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.uiux-cta p {
    color: rgba(255,255,255,.82);

    margin: 0;

    line-height: 1.7;
}

.uiux-btn-white {
    background: #fff;
    color: #1264d8;
}

.uiux-btn-outline-white {
    border: 1px solid rgba(255,255,255,.5);
    color: #fff;
}

.uiux-btn-white:hover,
.uiux-btn-outline-white:hover {
    transform: translateY(-3px);
}


/* ================= RESPONSIVE ================= */

@media (max-width: 1000px) {

    .uiux-hero-grid,
    .uiux-capabilities-grid {
        grid-template-columns: 1fr;
    }

    .uiux-hero-visual {
        height: 400px;
    }

    .uiux-service-grid,
    .uiux-product-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .uiux-process-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .uiux-cta {
        flex-direction: column;
        align-items: flex-start;
    }
}


@media (max-width: 700px) {

    .uiux-hero {
        padding: 80px 0 60px;
    }

    .uiux-benefits,
    .uiux-service-grid,
    .uiux-product-grid,
    .uiux-capability-cards {
        grid-template-columns: 1fr;
    }

    .uiux-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .uiux-hero-visual {
        transform: scale(.82);
        margin: -30px 0;
    }

    .uiux-check-list {
        grid-template-columns: 1fr;
    }

    .uiux-cta {
        padding: 40px 28px;
    }
}


@media (max-width: 450px) {

    .uiux-process-grid {
        grid-template-columns: 1fr;
    }

    .uiux-hero h1 {
        font-size: 40px;
    }

    .uiux-buttons,
    .uiux-cta-buttons {
        flex-direction: column;
    }

    .uiux-btn {
        justify-content: center;
    }

}
/* =========================================================
   IT CONSULTING
   Synergia Solutions
   ========================================================= */

.consulting-page {
    background: #fff;
    color: #17233d;
    overflow: hidden;
}

.consulting-page * {
    box-sizing: border-box;
}

.consulting-page .container {
    width: min(1180px, 92%);
    margin: auto;
}


/* ================= HERO ================= */

.consulting-hero {
    padding: 45px 0 90px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(18,100,216,.12),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #f8fbff 0%,
            #ffffff 55%,
            #f5fff1 100%
        );
}

.consulting-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 70px;
}

.consulting-label,
.consulting-section-heading > span,
.consulting-cta > div > span {
    display: inline-block;
    color: #1264d8;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.consulting-hero h1 {
    font-size: clamp(42px, 5vw, 68px);
    line-height: 1.06;
    margin: 0 0 25px;
    letter-spacing: -2px;
}

.consulting-hero h1 span,
.consulting-section-heading h2 span,
.consulting-capabilities-content h2 span,
.consulting-cta h2 strong {
    display: block;

    background:
        linear-gradient(
            90deg,
            #1264d8,
            #58b52b
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.consulting-hero p {
    max-width: 650px;
    color: #66738a;
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 32px;
}


/* ================= BUTTONS ================= */

.consulting-buttons,
.consulting-cta-buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.consulting-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 14px 23px;

    border-radius: 10px;

    text-decoration: none;

    font-size: 14px;
    font-weight: 700;

    transition: .3s ease;
}

.consulting-btn-primary {
    color: #fff;
    background: #1264d8;

    box-shadow:
        0 12px 30px rgba(18,100,216,.25);
}

.consulting-btn-primary:hover {
    transform: translateY(-3px);
    background: #0d54ba;
}

.consulting-btn-outline {
    color: #1264d8;

    border: 1px solid #cbd9ee;

    background: #fff;
}

.consulting-btn-outline:hover {
    border-color: #1264d8;
    transform: translateY(-3px);
}


/* ================= HERO VISUAL ================= */

.consulting-hero-visual {
    height: 470px;
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
}

.consulting-core {
    width: 210px;
    height: 210px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #1264d8,
            #58b52b
        );

    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    position: relative;
    z-index: 4;

    box-shadow:
        0 25px 70px rgba(18,100,216,.3);
}

.consulting-core-icon {
    font-size: 48px;
    margin-bottom: 8px;
}

.consulting-core strong {
    font-size: 22px;
}

.consulting-core small {
    opacity: .85;
    margin-top: 7px;
}

.consulting-orbit {
    position: absolute;

    border-radius: 50%;

    border: 1px dashed rgba(18,100,216,.3);
}

.consulting-orbit-one {
    width: 330px;
    height: 330px;
}

.consulting-orbit-two {
    width: 450px;
    height: 450px;

    border-color: rgba(88,181,43,.25);
}

.consulting-node {
    position: absolute;

    width: 75px;
    height: 75px;

    border-radius: 18px;

    background: #fff;

    border: 1px solid #e1e9f4;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;

    box-shadow:
        0 15px 35px rgba(20,60,110,.12);

    z-index: 5;
}

.consulting-node span {
    color: #1264d8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .5px;
}

.consulting-node-two span,
.consulting-node-four span {
    color: #58b52b;
}

.consulting-node-one {
    top: 42px;
    right: 55px;
}

.consulting-node-two {
    bottom: 48px;
    right: 35px;
}

.consulting-node-three {
    bottom: 38px;
    left: 45px;
}

.consulting-node-four {
    top: 50px;
    left: 45px;
}


/* ================= INTRO ================= */

.consulting-intro {
    padding: 100px 0;
}

.consulting-section-heading {
    max-width: 780px;
}

.consulting-section-heading.center {
    text-align: center;
    margin: 0 auto 55px;
}

.consulting-section-heading h2,
.consulting-capabilities-content h2 {
    font-size: clamp(32px, 4vw, 48px);

    line-height: 1.15;

    margin: 0 0 18px;

    letter-spacing: -1px;
}

.consulting-section-heading p {
    color: #6c788d;
    line-height: 1.8;
    font-size: 16px;
}


/* ================= BENEFITS ================= */

.consulting-benefits {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 24px;

    margin-top: 50px;
}

.consulting-benefit-card {
    padding: 35px;

    border-radius: 20px;

    background: #fff;

    border: 1px solid #e7edf5;

    box-shadow:
        0 15px 45px rgba(16,58,105,.07);

    transition: .3s ease;
}

.consulting-benefit-card:hover {
    transform: translateY(-7px);
    border-color: #bcd4f4;
}

.consulting-benefit-icon {
    width: 58px;
    height: 58px;

    border-radius: 15px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #eaf3ff,
            #f0fae9
        );

    font-size: 25px;

    margin-bottom: 22px;
}

.consulting-benefit-card h3 {
    margin: 0 0 12px;
    font-size: 20px;
}

.consulting-benefit-card p {
    color: #6c788d;
    line-height: 1.7;
    margin: 0;
}


/* ================= SERVICES ================= */

.consulting-services {
    padding: 100px 0;
    background: #f7faff;
}

.consulting-service-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 22px;
}

.consulting-service-card {
    background: #fff;

    border: 1px solid #e3eaf4;

    border-radius: 20px;

    padding: 32px;

    min-height: 270px;

    transition: .3s ease;
}

.consulting-service-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 20px 45px rgba(18,100,216,.1);

    border-color: #bdd3ef;
}

.consulting-service-number {
    font-size: 13px;

    color: #58b52b;

    font-weight: 800;

    margin-bottom: 30px;
}

.consulting-service-card h3 {
    font-size: 20px;

    margin: 0 0 14px;
}

.consulting-service-card p {
    color: #6d788a;

    line-height: 1.7;

    margin-bottom: 22px;
}

.consulting-service-link {
    color: #1264d8;

    font-weight: 700;

    font-size: 13px;
}


/* ================= CAPABILITIES ================= */

.consulting-capabilities {
    padding: 110px 0;
}

.consulting-capabilities-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: center;
}

.consulting-capabilities-content p {
    color: #69768b;

    line-height: 1.8;

    font-size: 16px;
}

.consulting-check-list {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 14px;

    margin-top: 30px;
}

.consulting-check-list div {
    font-size: 14px;

    font-weight: 700;

    color: #37455d;
}

.consulting-check-list div::first-letter {
    color: #58b52b;
}

.consulting-capability-cards {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;
}

.consulting-capability-card {
    padding: 28px;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #1264d8,
            #0b4ca8
        );

    color: #fff;

    min-height: 180px;

    box-shadow:
        0 18px 40px rgba(18,100,216,.14);
}

.consulting-capability-card:nth-child(even) {
    background:
        linear-gradient(
            145deg,
            #58b52b,
            #3f941b
        );
}

.consulting-capability-card strong {
    font-size: 20px;
}

.consulting-capability-card p {
    color: rgba(255,255,255,.82);

    line-height: 1.6;

    font-size: 14px;
}


/* ================= AREAS ================= */

.consulting-areas {
    padding: 100px 0;

    background: #f7faff;
}

.consulting-area-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 18px;
}

.consulting-area {
    background: #fff;

    padding: 25px;

    border-radius: 16px;

    border: 1px solid #e4ebf5;

    transition: .3s ease;
}

.consulting-area:hover {
    transform: translateY(-5px);

    border-color: #bcd3ef;
}

.consulting-area strong {
    display: block;

    margin-bottom: 8px;

    font-size: 16px;
}

.consulting-area small {
    color: #718096;

    line-height: 1.6;

    display: block;
}


/* ================= PROCESS ================= */

.consulting-process {
    padding: 105px 0;
}

.consulting-process-grid {
    display: grid;

    grid-template-columns: repeat(6, 1fr);

    gap: 15px;
}

.consulting-process-step {
    padding: 25px 18px;

    text-align: center;
}

.consulting-process-step span {
    width: 48px;
    height: 48px;

    margin: 0 auto 20px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #eaf3ff;

    color: #1264d8;

    font-size: 13px;

    font-weight: 800;
}

.consulting-process-step:nth-child(even) span {
    background: #edf9e7;

    color: #58b52b;
}

.consulting-process-step h3 {
    font-size: 17px;

    margin-bottom: 10px;
}

.consulting-process-step p {
    color: #748095;

    font-size: 13px;

    line-height: 1.6;
}


/* ================= CTA ================= */

.consulting-contact {
    padding: 80px 0 100px;
}

.consulting-cta {
    padding: 55px 65px;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            #1264d8,
            #0b4da8 55%,
            #58b52b
        );

    color: #fff;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 35px;

    box-shadow:
        0 25px 65px rgba(18,100,216,.2);
}

.consulting-cta > div > span {
    color: rgba(255,255,255,.8);
}

.consulting-cta h2 {
    font-size: clamp(30px, 4vw, 46px);

    line-height: 1.15;

    margin: 0 0 15px;
}

.consulting-cta h2 strong {
    background:
        linear-gradient(
            90deg,
            #fff,
            #dfffcf
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.consulting-cta p {
    color: rgba(255,255,255,.82);

    margin: 0;

    line-height: 1.7;
}

.consulting-btn-white {
    background: #fff;

    color: #1264d8;
}

.consulting-btn-outline-white {
    border: 1px solid rgba(255,255,255,.5);

    color: #fff;
}

.consulting-btn-white:hover,
.consulting-btn-outline-white:hover {
    transform: translateY(-3px);
}


/* ================= RESPONSIVE ================= */

@media (max-width: 1000px) {

    .consulting-hero-grid,
    .consulting-capabilities-grid {
        grid-template-columns: 1fr;
    }

    .consulting-hero-visual {
        height: 400px;
    }

    .consulting-service-grid,
    .consulting-area-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .consulting-process-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .consulting-cta {
        flex-direction: column;
        align-items: flex-start;
    }
}


@media (max-width: 700px) {

    .consulting-hero {
        padding: 80px 0 60px;
    }

    .consulting-benefits,
    .consulting-service-grid,
    .consulting-area-grid,
    .consulting-capability-cards {
        grid-template-columns: 1fr;
    }

    .consulting-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .consulting-hero-visual {
        transform: scale(.82);
        margin: -30px 0;
    }

    .consulting-check-list {
        grid-template-columns: 1fr;
    }

    .consulting-cta {
        padding: 40px 28px;
    }
}


@media (max-width: 450px) {

    .consulting-process-grid {
        grid-template-columns: 1fr;
    }

    .consulting-hero h1 {
        font-size: 40px;
    }

    .consulting-buttons,
    .consulting-cta-buttons {
        flex-direction: column;
    }

    .consulting-btn {
        justify-content: center;
    }

}
/* =========================
   ABOUT SECTION
========================= */

.about-section {
    padding: 100px 20px;
    background: #ffffff;
    color: #172033;
}

.about-container {
    max-width: 1180px;
    margin: auto;
}


/* INTRO */

.about-intro {
    max-width: 900px;
    margin: 0 auto 55px;
    text-align: center;
}

.about-label {
    display: inline-block;
    margin-bottom: 16px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #1264d8;
}

.about-intro h1 {
    margin: 0 0 22px;
    font-size: clamp(38px, 5vw, 62px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -2px;
    color: #111827;
}

.about-intro h1 span,
.founders-heading h2 span,
.about-statement h2 span {
    background: linear-gradient(
        90deg,
        #1264d8,
        #58b52b
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.about-lead {
    font-size: 19px;
    line-height: 1.8;
    color: #4b5563;
    margin-bottom: 18px;
}

.about-intro p:not(.about-lead) {
    max-width: 820px;
    margin: auto;
    font-size: 16px;
    line-height: 1.8;
    color: #6b7280;
}


/* EXPERIENCE HIGHLIGHT */

.about-highlight {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 45px;
    padding: 30px 35px;
    margin: 0 auto 100px;
    max-width: 900px;
    border-radius: 22px;
    background: linear-gradient(
        135deg,
        #1264d8,
        #0d58c4 55%,
        #58b52b
    );
    box-shadow: 0 20px 50px rgba(18, 100, 216, .18);
    color: #fff;
}

.highlight-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.highlight-number {
    font-size: 38px;
    font-weight: 800;
    line-height: 1;
}

.highlight-text {
    font-size: 13px;
    line-height: 1.4;
    opacity: .92;
}

.highlight-divider {
    width: 1px;
    height: 45px;
    background: rgba(255,255,255,.35);
}


/* FOUNDERS */

.founders-section {
    margin-bottom: 100px;
}

.founders-heading {
    max-width: 760px;
    margin-bottom: 45px;
}

.founders-heading h2 {
    margin: 0 0 15px;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.15;
    letter-spacing: -1.5px;
    color: #111827;
}

.founders-heading p {
    margin: 0;
    color: #6b7280;
    font-size: 16px;
    line-height: 1.8;
}


/* FOUNDERS GRID */

.founders-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.founder-card {
    position: relative;
    display: flex;
    gap: 25px;
    padding: 35px;
    border: 1px solid #e7edf5;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 15px 45px rgba(16, 46, 89, .08);
    transition: .3s ease;
    overflow: hidden;
}

.founder-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(
        90deg,
        #1264d8,
        #58b52b
    );
}

.founder-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 25px 55px rgba(16, 46, 89, .13);
}


/* AVATAR */

.founder-avatar {
    flex: 0 0 78px;
    width: 78px;
    height: 78px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(
        135deg,
        #1264d8,
        #3e8bf0
    );
    box-shadow: 0 12px 25px rgba(18,100,216,.22);
}

.founder-green {
    background: linear-gradient(
        135deg,
        #58b52b,
        #8bcf55
    );
    box-shadow: 0 12px 25px rgba(88,181,43,.22);
}


/* FOUNDER CONTENT */

.founder-role {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #1264d8;
    margin-bottom: 6px;
}

.founder-content h3 {
    margin: 0 0 8px;
    font-size: 28px;
    color: #111827;
}

.founder-experience {
    margin-bottom: 17px;
    font-size: 13px;
    color: #6b7280;
}

.founder-experience span {
    color: #58b52b;
    font-weight: 800;
}

.founder-content p {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.75;
    color: #667085;
}


/* VALUES */

.about-values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-bottom: 85px;
}

.value-card {
    padding: 32px;
    border-radius: 20px;
    border: 1px solid #e6ebf2;
    background: #f8fafc;
}

.value-card h3 {
    margin: 15px 0 10px;
    font-size: 21px;
    color: #111827;
}

.value-card p {
    margin: 0;
    color: #687386;
    font-size: 14px;
    line-height: 1.75;
}

.value-icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: rgba(18,100,216,.1);
    color: #1264d8;
    font-size: 21px;
    font-weight: 700;
}

.featured-value {
    background: linear-gradient(
        135deg,
        #1264d8,
        #0d59c7
    );
    border: none;
    color: #fff;
    box-shadow: 0 20px 45px rgba(18,100,216,.18);
}

.featured-value h3,
.featured-value p {
    color: #fff;
}

.featured-value p {
    opacity: .88;
}

.featured-value .value-icon {
    background: rgba(255,255,255,.15);
    color: #fff;
}


/* STATEMENT */

.about-statement {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: 65px;
    background: linear-gradient(
        135deg,
        #063da8 0%,
        #1264d8 55%,
        #58b52b 150%
    );
    color: #fff;
    box-shadow: 0 25px 65px rgba(18,100,216,.2);
}

.about-statement::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    right: -100px;
    top: -100px;
}

.statement-content {
    position: relative;
    z-index: 2;
    max-width: 720px;
}

.about-statement .about-label {
    color: rgba(255,255,255,.8);
}

.about-statement h2 {
    margin: 0 0 18px;
    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.15;
    color: #fff;
}

.about-statement h2 span {
    background: linear-gradient(
        90deg,
        #ffffff,
        #d9f4c8
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.about-statement p {
    max-width: 650px;
    margin: 0 0 28px;
    color: rgba(255,255,255,.86);
    font-size: 16px;
    line-height: 1.8;
}

.about-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 23px;
    border-radius: 12px;
    background: #fff;
    color: #1264d8;
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    transition: .25s ease;
}

.about-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(0,0,0,.15);
}

.about-button span {
    font-size: 18px;
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 900px) {

    .founders-grid {
        grid-template-columns: 1fr;
    }

    .about-values {
        grid-template-columns: 1fr;
    }

    .about-highlight {
        gap: 25px;
    }

}

@media (max-width: 650px) {

    .about-section {
        padding: 70px 18px;
    }

    .about-highlight {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 28px;
    }

    .highlight-divider {
        width: 100%;
        height: 1px;
    }

    .founder-card {
        flex-direction: column;
        padding: 28px;
    }

    .about-statement {
        padding: 38px 28px;
    }

}

.solution-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(18, 100, 216, 0.08);
    color: #1264d8;
    transition: all .25s ease;
}

.solution-icon i {
    font-size: 17px;
}

.solution-menu-item:hover .solution-icon {
    background: linear-gradient(135deg, #1264d8, #58b52b);
    color: #fff;
    transform: translateY(-2px);
}

.ium-body {
    padding: 90px 0;
    background: #fff;
    color: #12213a;
}

.ium-body .container {
    max-width: 1200px;
    margin: auto;
    padding: 0 25px;
}


/* INTRO */

.ium-intro {
    max-width: 900px;
    margin: 25px auto 65px;
    text-align: center;
}

.section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.6px;
    color: #1264d8;
}

.ium-intro h2,
.ium-section-heading h2,
.ium-workflow h2,
.ium-cta h2 {
    margin: 0 0 20px;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.15;
    color: #12213a;
}

.gradient-text {
    background: linear-gradient(135deg, #1264d8, #58b52b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ium-intro p {
    margin: 12px auto;
    max-width: 850px;
    font-size: 17px;
    line-height: 1.8;
    color: #66758d;
}


/* HIGHLIGHTS */

.ium-highlights {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 100px;
}

.ium-highlight-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 22px;

    background: #f7faff;
    border: 1px solid #e5edf8;
    border-radius: 16px;

    transition: .3s ease;
}

.ium-highlight-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(18, 100, 216, .10);
}

.ium-highlight-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;
    background: linear-gradient(
        135deg,
        rgba(18,100,216,.12),
        rgba(88,181,43,.12)
    );

    color: #1264d8;
    font-size: 18px;
}

.ium-highlight-card strong {
    display: block;
    font-size: 15px;
    margin-bottom: 5px;
}

.ium-highlight-card span {
    display: block;
    font-size: 12px;
    line-height: 1.5;
    color: #7a879b;
}


/* SECTION HEADING */

.ium-section-heading {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 45px;
}

.ium-section-heading p {
    color: #718097;
    font-size: 16px;
    line-height: 1.7;
}


/* MODULES */

.ium-modules {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-bottom: 110px;
}

.ium-module-card {
    padding: 30px;
    background: #fff;

    border: 1px solid #e5ebf4;
    border-radius: 18px;

    box-shadow: 0 8px 30px rgba(18, 42, 80, .05);

    transition: .3s ease;
}

.ium-module-card:hover {
    transform: translateY(-7px);
    border-color: rgba(18,100,216,.25);
    box-shadow: 0 18px 45px rgba(18,100,216,.11);
}

.ium-module-icon {
    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    border-radius: 14px;
    background: linear-gradient(135deg, #1264d8, #58b52b);
    color: #fff;

    font-size: 19px;
}

.ium-module-card h3 {
    margin: 0 0 10px;
    font-size: 18px;
    color: #142541;
}

.ium-module-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #718097;
}


/* WORKFLOW */

.ium-workflow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;

    align-items: center;

    padding: 70px;
    margin-bottom: 100px;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            #f5f9ff 0%,
            #ffffff 55%,
            #f5fbf1 100%
        );

    border: 1px solid #e5edf5;
}

.ium-workflow-content p {
    max-width: 600px;
    color: #718097;
    line-height: 1.8;
}

.ium-process-list {
    margin-top: 35px;
    display: grid;
    gap: 18px;
}

.ium-process-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ium-process-item > span {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #1264d8;
    color: #fff;

    font-size: 12px;
    font-weight: 800;
}

.ium-process-item strong {
    display: block;
    margin-bottom: 3px;
    font-size: 15px;
}

.ium-process-item small {
    color: #7b879b;
}


/* VISUAL */

.ium-workflow-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.ium-visual-circle {
    position: relative;

    width: 330px;
    height: 330px;

    border-radius: 50%;

    border: 1px dashed #b9cae3;
}

.ium-center-icon {
    position: absolute;

    width: 100px;
    height: 100px;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: linear-gradient(135deg, #1264d8, #58b52b);
    color: #fff;

    font-size: 32px;

    box-shadow: 0 15px 35px rgba(18,100,216,.25);
}

.ium-orbit {
    position: absolute;

    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #fff;
    border: 1px solid #dfe8f3;

    color: #1264d8;

    box-shadow: 0 10px 30px rgba(18,42,80,.10);

    font-size: 17px;
}

.orbit-1 {
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
}

.orbit-2 {
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
}

.orbit-3 {
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
}

.orbit-4 {
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
}


/* BENEFITS */

.ium-benefits {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 100px;
}

.ium-benefit {
    display: flex;
    gap: 18px;

    padding: 27px;

    border: 1px solid #e5ebf4;
    border-radius: 17px;

    background: #fff;
}

.ium-benefit > i {
    width: 45px;
    height: 45px;
    min-width: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: rgba(18,100,216,.09);
    color: #1264d8;
}

.ium-benefit h3 {
    margin: 0 0 7px;
    font-size: 17px;
}

.ium-benefit p {
    margin: 0;
    color: #718097;
    line-height: 1.6;
    font-size: 14px;
}


/* CTA */

.ium-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;

    padding: 45px 50px;

    border-radius: 22px;

    background: linear-gradient(
        135deg,
        #1264d8,
        #1557b7 55%,
        #58b52b
    );

    color: #fff;
}

.ium-cta .section-label {
    color: #fff;
}

.ium-cta h2 {
    color: #fff;
    margin-bottom: 12px;
}

.ium-cta .gradient-text {
    background: none;
    -webkit-text-fill-color: #fff;
}

.ium-cta p {
    max-width: 700px;
    margin: 0;
    line-height: 1.7;
    color: rgba(255,255,255,.82);
}

.ium-cta-button {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 15px 22px;

    border-radius: 12px;

    background: #fff;
    color: #1264d8;

    font-weight: 700;
    text-decoration: none;

    transition: .3s ease;
}

.ium-cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0,0,0,.15);
}


/* RESPONSIVE */

@media (max-width: 1000px) {

    .ium-highlights {
        grid-template-columns: repeat(2, 1fr);
    }

    .ium-modules {
        grid-template-columns: repeat(2, 1fr);
    }

    .ium-workflow {
        grid-template-columns: 1fr;
        padding: 45px;
    }

    .ium-workflow-visual {
        margin-top: 20px;
    }

}


@media (max-width: 700px) {

    .ium-body {
        padding: 65px 0;
    }

    .ium-highlights,
    .ium-modules,
    .ium-benefits {
        grid-template-columns: 1fr;
    }

    .ium-workflow {
        padding: 30px 22px;
    }

    .ium-visual-circle {
        width: 270px;
        height: 270px;
    }

    .ium-cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 35px 25px;
    }

    .ium-cta-button {
        width: 100%;
        justify-content: center;
    }

}

.sms-body {
    padding: 90px 0;
    background: #fff;
    color: #12213a;
}

.sms-body .container {
    max-width: 1200px;
    margin: auto;
    padding: 0 25px;
}


/* INTRO */

.sms-intro {
    max-width: 900px;
    margin: 25px auto 65px;
    text-align: center;
}

.sms-intro h2,
.sms-section-heading h2,
.sms-ecosystem h2,
.sms-cta h2 {
    margin: 0 0 20px;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.15;
    color: #12213a;
}

.sms-intro p {
    max-width: 850px;
    margin: 12px auto;
    color: #68778d;
    font-size: 17px;
    line-height: 1.8;
}


/* HIGHLIGHTS */

.sms-highlights {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 100px;
}

.sms-highlight-card {
    display: flex;
    align-items: center;
    gap: 15px;

    padding: 22px;

    background: #f7faff;
    border: 1px solid #e4ebf5;
    border-radius: 16px;

    transition: .3s ease;
}

.sms-highlight-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(18, 100, 216, .10);
}

.sms-highlight-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background: linear-gradient(
        135deg,
        rgba(18,100,216,.12),
        rgba(88,181,43,.12)
    );

    color: #1264d8;
    font-size: 18px;
}

.sms-highlight-card strong {
    display: block;
    margin-bottom: 5px;
    font-size: 15px;
}

.sms-highlight-card span {
    display: block;
    color: #7a879b;
    font-size: 12px;
    line-height: 1.5;
}


/* SECTION HEADING */

.sms-section-heading {
    max-width: 800px;
    margin: 0 auto 45px;
    text-align: center;
}

.sms-section-heading p {
    color: #718097;
    font-size: 16px;
    line-height: 1.7;
}


/* MODULES */

.sms-modules {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-bottom: 110px;
}

.sms-module-card {
    padding: 30px;

    background: #fff;

    border: 1px solid #e4ebf4;
    border-radius: 18px;

    box-shadow: 0 8px 30px rgba(18,42,80,.05);

    transition: .3s ease;
}

.sms-module-card:hover {
    transform: translateY(-7px);
    border-color: rgba(18,100,216,.25);
    box-shadow: 0 18px 45px rgba(18,100,216,.11);
}

.sms-module-icon {
    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    border-radius: 14px;

    background: linear-gradient(
        135deg,
        #1264d8,
        #58b52b
    );

    color: #fff;
    font-size: 19px;
}

.sms-module-card h3 {
    margin: 0 0 10px;
    font-size: 18px;
    color: #142541;
}

.sms-module-card p {
    margin: 0;
    color: #718097;
    font-size: 14px;
    line-height: 1.7;
}


/* ECOSYSTEM */

.sms-ecosystem {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;

    padding: 70px;
    margin-bottom: 100px;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            #f5f9ff,
            #ffffff 55%,
            #f5fbf1
        );

    border: 1px solid #e4ebf4;
}

.sms-ecosystem-content > p {
    max-width: 580px;
    color: #718097;
    line-height: 1.8;
}

.sms-stakeholders {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 32px;
}

.sms-stakeholder {
    display: flex;
    align-items: center;
    gap: 13px;

    padding: 16px;

    background: #fff;
    border: 1px solid #e5ebf4;
    border-radius: 13px;
}

.sms-stakeholder > i {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: rgba(18,100,216,.08);
    color: #1264d8;
}

.sms-stakeholder strong {
    display: block;
    font-size: 14px;
}

.sms-stakeholder small {
    color: #7b879b;
}


/* ECOSYSTEM VISUAL */

.sms-ecosystem-visual {
    display: flex;
    justify-content: center;
}

.sms-ecosystem-circle {
    position: relative;

    width: 320px;
    height: 320px;

    border: 1px dashed #b9cae3;
    border-radius: 50%;
}

.sms-school-center {
    position: absolute;

    width: 95px;
    height: 95px;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #1264d8,
        #58b52b
    );

    color: #fff;
    font-size: 30px;

    box-shadow: 0 15px 35px rgba(18,100,216,.25);
}

.sms-orbit {
    position: absolute;

    width: 55px;
    height: 55px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;

    border: 1px solid #dfe8f3;
    border-radius: 50%;

    color: #1264d8;

    box-shadow: 0 10px 28px rgba(18,42,80,.10);
}

.sms-orbit-1 {
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
}

.sms-orbit-2 {
    right: -18px;
    top: 50%;
    transform: translateY(-50%);
}

.sms-orbit-3 {
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
}

.sms-orbit-4 {
    left: -18px;
    top: 50%;
    transform: translateY(-50%);
}


/* BENEFITS */

.sms-benefits {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;

    margin-bottom: 100px;
}

.sms-benefit {
    display: flex;
    gap: 18px;

    padding: 27px;

    background: #fff;
    border: 1px solid #e5ebf4;
    border-radius: 17px;
}

.sms-benefit > i {
    width: 45px;
    height: 45px;
    min-width: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: rgba(18,100,216,.09);
    color: #1264d8;
}

.sms-benefit h3 {
    margin: 0 0 7px;
    font-size: 17px;
}

.sms-benefit p {
    margin: 0;
    color: #718097;
    line-height: 1.6;
    font-size: 14px;
}


/* CTA */

.sms-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;

    padding: 45px 50px;

    border-radius: 22px;

    background: linear-gradient(
        135deg,
        #1264d8,
        #1557b7 55%,
        #58b52b
    );

    color: #fff;
}

.sms-cta .section-label {
    color: #fff;
}

.sms-cta h2 {
    color: #fff;
    margin-bottom: 12px;
}

.sms-cta h2 span {
    color: #fff;
}

.sms-cta p {
    max-width: 650px;
    margin: 0;

    color: rgba(255,255,255,.82);
    line-height: 1.7;
}

.sms-cta-button {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 15px 22px;

    background: #fff;
    color: #1264d8;

    border-radius: 12px;

    text-decoration: none;
    font-weight: 700;

    transition: .3s ease;
}

.sms-cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0,0,0,.15);
}


/* RESPONSIVE */

@media (max-width: 1000px) {

    .sms-highlights {
        grid-template-columns: repeat(2, 1fr);
    }

    .sms-modules {
        grid-template-columns: repeat(2, 1fr);
    }

    .sms-ecosystem {
        grid-template-columns: 1fr;
        padding: 45px;
    }

}


@media (max-width: 700px) {

    .sms-body {
        padding: 65px 0;
    }

    .sms-highlights,
    .sms-modules,
    .sms-benefits,
    .sms-stakeholders {
        grid-template-columns: 1fr;
    }

    .sms-ecosystem {
        padding: 30px 22px;
    }

    .sms-ecosystem-circle {
        width: 270px;
        height: 270px;
    }

    .sms-cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 35px 25px;
    }

    .sms-cta-button {
        width: 100%;
        justify-content: center;
    }

}

.cms-body {
    padding: 90px 0;
    background: #fff;
    color: #12213a;
}

.cms-body .container {
    max-width: 1200px;
    margin: auto;
    padding: 0 25px;
}

/* INTRO */

.cms-intro {
    max-width: 900px;
    margin: 50px auto 65px;
    text-align: center;
}

.cms-intro h2,
.cms-section-heading h2,
.cms-ecosystem h2,
.cms-cta h2 {
    margin: 0 0 20px;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.15;
    color: #12213a;
}

.cms-intro p {
    max-width: 850px;
    margin: 12px auto;
    color: #68778d;
    font-size: 17px;
    line-height: 1.8;
}


/* HIGHLIGHTS */

.cms-highlights {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 100px;
}

.cms-highlight-card {
    display: flex;
    align-items: center;
    gap: 15px;

    padding: 22px;

    background: #f7faff;
    border: 1px solid #e4ebf5;
    border-radius: 16px;

    transition: .3s ease;
}

.cms-highlight-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(18,100,216,.10);
}

.cms-highlight-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background: linear-gradient(
        135deg,
        rgba(18,100,216,.12),
        rgba(88,181,43,.12)
    );

    color: #1264d8;
    font-size: 18px;
}

.cms-highlight-card strong {
    display: block;
    margin-bottom: 5px;
    font-size: 15px;
}

.cms-highlight-card span {
    display: block;
    color: #7a879b;
    font-size: 12px;
    line-height: 1.5;
}


/* SECTION HEADING */

.cms-section-heading {
    max-width: 800px;
    margin: 0 auto 45px;
    text-align: center;
}

.cms-section-heading p {
    color: #718097;
    font-size: 16px;
    line-height: 1.7;
}


/* MODULES */

.cms-modules {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-bottom: 110px;
}

.cms-module-card {
    padding: 30px;

    background: #fff;

    border: 1px solid #e4ebf4;
    border-radius: 18px;

    box-shadow: 0 8px 30px rgba(18,42,80,.05);

    transition: .3s ease;
}

.cms-module-card:hover {
    transform: translateY(-7px);
    border-color: rgba(18,100,216,.25);
    box-shadow: 0 18px 45px rgba(18,100,216,.11);
}

.cms-module-icon {
    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    border-radius: 14px;

    background: linear-gradient(
        135deg,
        #1264d8,
        #58b52b
    );

    color: #fff;
    font-size: 19px;
}

.cms-module-card h3 {
    margin: 0 0 10px;
    font-size: 18px;
    color: #142541;
}

.cms-module-card p {
    margin: 0;
    color: #718097;
    font-size: 14px;
    line-height: 1.7;
}


/* ECOSYSTEM */

.cms-ecosystem {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;

    padding: 70px;
    margin-bottom: 100px;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            #f5f9ff,
            #ffffff 55%,
            #f5fbf1
        );

    border: 1px solid #e4ebf4;
}

.cms-ecosystem-content > p {
    max-width: 580px;
    color: #718097;
    line-height: 1.8;
}

.cms-stakeholders {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 32px;
}

.cms-stakeholder {
    display: flex;
    align-items: center;
    gap: 13px;

    padding: 16px;

    background: #fff;
    border: 1px solid #e5ebf4;
    border-radius: 13px;
}

.cms-stakeholder > i {
    width: 40px;
    height: 40px;
    min-width: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: rgba(18,100,216,.08);
    color: #1264d8;
}

.cms-stakeholder strong {
    display: block;
    font-size: 14px;
}

.cms-stakeholder small {
    color: #7b879b;
}


/* ECOSYSTEM VISUAL */

.cms-ecosystem-visual {
    display: flex;
    justify-content: center;
}

.cms-ecosystem-circle {
    position: relative;

    width: 320px;
    height: 320px;

    border: 1px dashed #b9cae3;
    border-radius: 50%;
}

.cms-college-center {
    position: absolute;

    width: 95px;
    height: 95px;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #1264d8,
        #58b52b
    );

    color: #fff;
    font-size: 30px;

    box-shadow: 0 15px 35px rgba(18,100,216,.25);
}

.cms-orbit {
    position: absolute;

    width: 55px;
    height: 55px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;

    border: 1px solid #dfe8f3;
    border-radius: 50%;

    color: #1264d8;

    box-shadow: 0 10px 28px rgba(18,42,80,.10);
}

.cms-orbit-1 {
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
}

.cms-orbit-2 {
    right: -18px;
    top: 50%;
    transform: translateY(-50%);
}

.cms-orbit-3 {
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
}

.cms-orbit-4 {
    left: -18px;
    top: 50%;
    transform: translateY(-50%);
}


/* BENEFITS */

.cms-benefits {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 100px;
}

.cms-benefit {
    display: flex;
    gap: 18px;

    padding: 27px;

    background: #fff;
    border: 1px solid #e5ebf4;
    border-radius: 17px;
}

.cms-benefit > i {
    width: 45px;
    height: 45px;
    min-width: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: rgba(18,100,216,.09);
    color: #1264d8;
}

.cms-benefit h3 {
    margin: 0 0 7px;
    font-size: 17px;
}

.cms-benefit p {
    margin: 0;
    color: #718097;
    line-height: 1.6;
    font-size: 14px;
}


/* CTA */

.cms-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;

    padding: 45px 50px;

    border-radius: 22px;

    background: linear-gradient(
        135deg,
        #1264d8,
        #1557b7 55%,
        #58b52b
    );

    color: #fff;
}

.cms-cta .section-label {
    color: #fff;
}

.cms-cta h2 {
    color: #fff;
    margin-bottom: 12px;
}

.cms-cta h2 span {
    color: #fff;
}

.cms-cta p {
    max-width: 650px;
    margin: 0;
    color: rgba(255,255,255,.82);
    line-height: 1.7;
}

.cms-cta-button {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 15px 22px;

    background: #fff;
    color: #1264d8;

    border-radius: 12px;

    text-decoration: none;
    font-weight: 700;

    transition: .3s ease;
}

.cms-cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0,0,0,.15);
}


/* RESPONSIVE */

@media (max-width: 1000px) {

    .cms-highlights {
        grid-template-columns: repeat(2, 1fr);
    }

    .cms-modules {
        grid-template-columns: repeat(2, 1fr);
    }

    .cms-ecosystem {
        grid-template-columns: 1fr;
        padding: 45px;
    }

}


@media (max-width: 700px) {

    .cms-body {
        padding: 65px 0;
    }

    .cms-highlights,
    .cms-modules,
    .cms-benefits,
    .cms-stakeholders {
        grid-template-columns: 1fr;
    }

    .cms-ecosystem {
        padding: 30px 22px;
    }

    .cms-ecosystem-circle {
        width: 270px;
        height: 270px;
    }

    .cms-cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 35px 25px;
    }

    .cms-cta-button {
        width: 100%;
        justify-content: center;
    }

}

.oes-body {
    padding: 90px 0;
    background: #fff;
    color: #12213a;
}

.oes-body .container {
    max-width: 1200px;
    margin: auto;
    padding: 0 25px;
}


/* INTRO */

.oes-intro {
    max-width: 900px;
    margin: 25px auto 65px;
    text-align: center;
}

.oes-intro h2,
.oes-section-heading h2,
.oes-workflow h2,
.oes-cta h2 {
    margin: 0 0 20px;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.15;
    color: #12213a;
}

.oes-intro p {
    max-width: 850px;
    margin: 12px auto;
    color: #68778d;
    font-size: 17px;
    line-height: 1.8;
}


/* HIGHLIGHTS */

.oes-highlights {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 100px;
}

.oes-highlight-card {
    display: flex;
    align-items: center;
    gap: 15px;

    padding: 22px;

    background: #f7faff;
    border: 1px solid #e4ebf5;
    border-radius: 16px;

    transition: .3s ease;
}

.oes-highlight-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(18,100,216,.10);
}

.oes-highlight-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background: linear-gradient(
        135deg,
        rgba(18,100,216,.12),
        rgba(88,181,43,.12)
    );

    color: #1264d8;
    font-size: 18px;
}

.oes-highlight-card strong {
    display: block;
    margin-bottom: 5px;
    font-size: 15px;
}

.oes-highlight-card span {
    display: block;
    color: #7a879b;
    font-size: 12px;
    line-height: 1.5;
}


/* SECTION HEADING */

.oes-section-heading {
    max-width: 800px;
    margin: 0 auto 45px;
    text-align: center;
}

.oes-section-heading p {
    color: #718097;
    font-size: 16px;
    line-height: 1.7;
}


/* FEATURES */

.oes-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-bottom: 110px;
}

.oes-feature-card {
    padding: 30px;

    background: #fff;
    border: 1px solid #e4ebf4;
    border-radius: 18px;

    box-shadow: 0 8px 30px rgba(18,42,80,.05);

    transition: .3s ease;
}

.oes-feature-card:hover {
    transform: translateY(-7px);
    border-color: rgba(18,100,216,.25);
    box-shadow: 0 18px 45px rgba(18,100,216,.11);
}

.oes-feature-icon {
    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    border-radius: 14px;

    background: linear-gradient(
        135deg,
        #1264d8,
        #58b52b
    );

    color: #fff;
    font-size: 19px;
}

.oes-feature-card h3 {
    margin: 0 0 10px;
    font-size: 18px;
    color: #142541;
}

.oes-feature-card p {
    margin: 0;
    color: #718097;
    font-size: 14px;
    line-height: 1.7;
}


/* WORKFLOW */

.oes-workflow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;

    padding: 70px;
    margin-bottom: 100px;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            #f5f9ff,
            #ffffff 55%,
            #f5fbf1
        );

    border: 1px solid #e4ebf4;
}

.oes-workflow-content p {
    max-width: 600px;
    color: #718097;
    line-height: 1.8;
}

.oes-process {
    display: grid;
    gap: 18px;
    margin-top: 32px;
}

.oes-process-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.oes-process-item > span {
    width: 38px;
    height: 38px;
    min-width: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #1264d8;
    color: #fff;

    font-size: 12px;
    font-weight: 800;
}

.oes-process-item strong {
    display: block;
    margin-bottom: 3px;
    font-size: 15px;
}

.oes-process-item small {
    color: #7b879b;
}


/* SCREEN VISUAL */

.oes-workflow-visual {
    display: flex;
    justify-content: center;
}

.oes-screen {
    width: 100%;
    max-width: 450px;

    overflow: hidden;

    border-radius: 16px;

    background: #fff;

    border: 1px solid #dfe8f3;

    box-shadow:
        0 25px 60px rgba(18,42,80,.14);
}

.oes-screen-top {
    display: flex;
    gap: 6px;

    padding: 12px 15px;

    background: #f3f7fc;

    border-bottom: 1px solid #e3eaf3;
}

.oes-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #b7c4d6;
}

.oes-screen-content {
    display: grid;
    grid-template-columns: 1.4fr .8fr;
    gap: 15px;

    padding: 25px;
}

.oes-paper {
    min-height: 230px;

    padding: 20px;

    border: 1px solid #e1e8f1;
    border-radius: 10px;

    background: #fff;
}

.oes-paper-line {
    width: 90%;
    height: 6px;

    margin-bottom: 13px;

    border-radius: 5px;

    background: #e6edf5;
}

.oes-paper-line.large {
    width: 65%;
    height: 9px;
}

.oes-paper-line.short {
    width: 55%;
}

.oes-answer-box {
    display: flex;
    align-items: center;

    height: 65px;

    margin: 18px 0;

    padding: 10px;

    border: 1px dashed #a9bdd8;
    border-radius: 8px;

    color: #1264d8;

    font-size: 12px;
}

.oes-mark-panel {
    padding: 18px;

    border-radius: 10px;

    background: #f7faff;
}

.oes-mark-panel strong {
    display: block;
    margin-bottom: 20px;
    font-size: 14px;
}

.oes-mark-row {
    display: flex;
    justify-content: space-between;

    padding: 10px 0;

    border-bottom: 1px solid #e3eaf3;

    font-size: 12px;

    color: #718097;
}

.oes-mark-row b {
    color: #1264d8;
}

.oes-progress {
    height: 7px;

    margin-top: 25px;

    overflow: hidden;

    border-radius: 10px;

    background: #dfe8f3;
}

.oes-progress span {
    display: block;

    width: 68%;
    height: 100%;

    border-radius: inherit;

    background: linear-gradient(
        90deg,
        #1264d8,
        #58b52b
    );
}

.oes-mark-panel small {
    display: block;
    margin-top: 8px;

    color: #7b879b;
    font-size: 10px;
}


/* BENEFITS */

.oes-benefits {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;

    margin-bottom: 100px;
}

.oes-benefit {
    display: flex;
    gap: 18px;

    padding: 27px;

    background: #fff;

    border: 1px solid #e5ebf4;
    border-radius: 17px;
}

.oes-benefit > i {
    width: 45px;
    height: 45px;
    min-width: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: rgba(18,100,216,.09);
    color: #1264d8;
}

.oes-benefit h3 {
    margin: 0 0 7px;
    font-size: 17px;
}

.oes-benefit p {
    margin: 0;

    color: #718097;

    line-height: 1.6;
    font-size: 14px;
}


/* CTA */

.oes-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;

    padding: 45px 50px;

    border-radius: 22px;

    background: linear-gradient(
        135deg,
        #1264d8,
        #1557b7 55%,
        #58b52b
    );

    color: #fff;
}

.oes-cta .section-label {
    color: #fff;
}

.oes-cta h2 {
    color: #fff;
    margin-bottom: 12px;
}

.oes-cta h2 span {
    color: #fff;
}

.oes-cta p {
    max-width: 650px;
    margin: 0;

    color: rgba(255,255,255,.82);

    line-height: 1.7;
}

.oes-cta-button {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 15px 22px;

    background: #fff;
    color: #1264d8;

    border-radius: 12px;

    text-decoration: none;
    font-weight: 700;

    transition: .3s ease;
}

.oes-cta-button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 12px 30px rgba(0,0,0,.15);
}


/* RESPONSIVE */

@media (max-width: 1000px) {

    .oes-highlights {
        grid-template-columns: repeat(2, 1fr);
    }

    .oes-features {
        grid-template-columns: repeat(2, 1fr);
    }

    .oes-workflow {
        grid-template-columns: 1fr;
        padding: 45px;
    }

}


@media (max-width: 700px) {

    .oes-body {
        padding: 65px 0;
    }

    .oes-highlights,
    .oes-features,
    .oes-benefits {
        grid-template-columns: 1fr;
    }

    .oes-workflow {
        padding: 30px 22px;
    }

    .oes-screen-content {
        grid-template-columns: 1fr;
    }

    .oes-cta {
        flex-direction: column;
        align-items: flex-start;

        padding: 35px 25px;
    }

    .oes-cta-button {
        width: 100%;
        justify-content: center;
    }

}

/* =========================================================
   e-LEARNING SUITE (eLMS)
========================================================= */

.elms-body {
    background: #ffffff;
    padding: 90px 0 100px;
    color: #172033;
}

.elms-body .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 25px;
}


/* =========================================================
   INTRO
========================================================= */

.elms-intro {
    max-width: 900px;
    margin: 25px auto 55px;
    text-align: center;
}

.elms-intro .section-label,
.elms-section-heading .section-label {
    color: #1264d8;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.elms-intro h2 {
    font-size: 42px;
    line-height: 1.2;
    margin: 0 0 20px;
    font-weight: 800;
    color: #111827;
}

.elms-intro p {
    color: #667085;
    font-size: 17px;
    line-height: 1.8;
    margin: 0 auto 10px;
    max-width: 850px;
}

.elms-body .gradient-text {
    background: linear-gradient(
        135deg,
        #1264d8,
        #58b52b
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* =========================================================
   HIGHLIGHTS
========================================================= */

.elms-highlights {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 90px;
}

.elms-highlight-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    border: 1px solid #e7edf5;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(20, 65, 120, 0.07);
    transition: all .25s ease;
}

.elms-highlight-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(18, 100, 216, 0.13);
    border-color: rgba(18, 100, 216, .18);
}

.elms-highlight-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(18, 100, 216, .09);
    color: #1264d8;
    font-size: 19px;
}

.elms-highlight-card strong {
    display: block;
    color: #172033;
    font-size: 14px;
    margin-bottom: 4px;
}

.elms-highlight-card span {
    display: block;
    color: #7b8798;
    font-size: 12px;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.elms-section-heading {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 42px;
}

.elms-section-heading h3 {
    margin: 0 0 12px;
    color: #111827;
    font-size: 32px;
    line-height: 1.3;
}

.elms-section-heading p {
    color: #667085;
    line-height: 1.7;
    margin: 0;
}


/* =========================================================
   FEATURE GRID
========================================================= */

.elms-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-bottom: 95px;
}

.elms-feature-card {
    position: relative;
    padding: 28px;
    border: 1px solid #e5ebf3;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(24, 65, 110, 0.06);
    overflow: hidden;
    transition: all .3s ease;
}

.elms-feature-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(
        90deg,
        #1264d8,
        #58b52b
    );
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}

.elms-feature-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 18px 45px rgba(18, 100, 216, 0.12);
    border-color: rgba(18, 100, 216, .16);
}

.elms-feature-card:hover::before {
    transform: scaleX(1);
}

.elms-feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    background: linear-gradient(
        135deg,
        rgba(18, 100, 216, .10),
        rgba(88, 181, 43, .10)
    );
    color: #1264d8;
    font-size: 19px;
    transition: all .25s ease;
}

.elms-feature-card:hover .elms-feature-icon {
    background: linear-gradient(
        135deg,
        #1264d8,
        #58b52b
    );
    color: #ffffff;
    transform: translateY(-2px);
}

.elms-feature-card h4 {
    margin: 0 0 10px;
    font-size: 17px;
    color: #172033;
}

.elms-feature-card p {
    margin: 0;
    color: #6d7889;
    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   ECOSYSTEM
========================================================= */

.elms-ecosystem {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 55px;
    align-items: center;
    padding: 65px;
    margin-bottom: 95px;
    border-radius: 28px;
    background: linear-gradient(
        135deg,
        #f5f9ff 0%,
        #f8fbf7 100%
    );
    border: 1px solid #e5edf6;
}

.elms-ecosystem-content h3 {
    font-size: 32px;
    line-height: 1.3;
    margin: 0 0 16px;
    color: #111827;
}

.elms-ecosystem-content > p {
    color: #667085;
    line-height: 1.75;
    margin: 0 0 28px;
}

.elms-ecosystem-list {
    display: grid;
    gap: 14px;
}

.elms-ecosystem-item {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.elms-ecosystem-item > span {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #1264d8;
    box-shadow: 0 5px 18px rgba(18, 100, 216, .08);
}

.elms-ecosystem-item strong {
    display: block;
    color: #172033;
    font-size: 14px;
    margin-bottom: 3px;
}

.elms-ecosystem-item small {
    color: #758094;
    line-height: 1.5;
    font-size: 12px;
}


/* =========================================================
   LEARNING FLOW
========================================================= */

.elms-learning-flow {
    padding: 32px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid #e1e8f1;
    box-shadow: 0 15px 45px rgba(24, 65, 110, .08);
}

.elms-flow-title {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #172033;
    font-weight: 800;
    font-size: 15px;
    margin-bottom: 28px;
}

.elms-flow-title i {
    color: #1264d8;
}

.elms-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.elms-flow-step {
    text-align: center;
    position: relative;
    min-width: 110px;
}

.elms-flow-step > span {
    position: absolute;
    top: -11px;
    right: 5px;
    font-size: 10px;
    font-weight: 800;
    color: #58b52b;
}

.elms-flow-step > i {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        rgba(18, 100, 216, .10),
        rgba(88, 181, 43, .10)
    );
    color: #1264d8;
}

.elms-flow-step strong {
    display: block;
    color: #172033;
    font-size: 13px;
    margin-bottom: 3px;
}

.elms-flow-step small {
    display: block;
    color: #7a8494;
    font-size: 10px;
}

.elms-flow-line {
    flex: 1;
    height: 2px;
    margin: 0 8px;
    background: linear-gradient(
        90deg,
        #1264d8,
        #58b52b
    );
    opacity: .35;
}


/* =========================================================
   BENEFITS
========================================================= */

.elms-benefits {
    margin-bottom: 80px;
}

.elms-benefit-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.elms-benefit {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 25px;
    border-radius: 17px;
    border: 1px solid #e5ebf3;
    background: #ffffff;
    transition: all .25s ease;
}

.elms-benefit:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 35px rgba(18, 100, 216, .09);
}

.elms-benefit > i {
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(88, 181, 43, .10);
    color: #58b52b;
}

.elms-benefit strong {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
    color: #172033;
}

.elms-benefit p {
    margin: 0;
    color: #6d7889;
    font-size: 13px;
    line-height: 1.65;
}


/* =========================================================
   CTA
========================================================= */

.elms-cta {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    padding: 65px 45px;
    text-align: center;
    background: linear-gradient(
        135deg,
        #1264d8,
        #0e55b8 55%,
        #58b52b
    );
    box-shadow: 0 20px 55px rgba(18, 100, 216, .20);
}

.elms-cta::before {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.13);
    right: -100px;
    top: -120px;
}

.elms-cta::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.10);
    left: -90px;
    bottom: -110px;
}

.elms-cta-content {
    position: relative;
    z-index: 2;
    max-width: 750px;
    margin: 0 auto;
}

.elms-cta .section-label {
    color: rgba(255,255,255,.85);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.elms-cta h3 {
    color: #ffffff;
    font-size: 34px;
    line-height: 1.3;
    margin: 0 0 15px;
}

.elms-cta h3 span {
    color: #dff7c9;
}

.elms-cta p {
    color: rgba(255,255,255,.86);
    line-height: 1.75;
    font-size: 15px;
    margin: 0 auto 28px;
    max-width: 650px;
}

.elms-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 12px;
    background: #ffffff;
    color: #1264d8;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    transition: all .25s ease;
}

.elms-cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

.elms-cta-button i {
    transition: transform .25s ease;
}

.elms-cta-button:hover i {
    transform: translateX(4px);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .elms-highlights {
        grid-template-columns: repeat(2, 1fr);
    }

    .elms-feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .elms-ecosystem {
        grid-template-columns: 1fr;
        padding: 45px;
    }

}

@media (max-width: 700px) {

    .elms-body {
        padding: 65px 0 75px;
    }

    .elms-intro h2 {
        font-size: 32px;
    }

    .elms-intro p {
        font-size: 15px;
    }

    .elms-highlights {
        grid-template-columns: 1fr;
        margin-bottom: 65px;
    }

    .elms-feature-grid {
        grid-template-columns: 1fr;
        margin-bottom: 65px;
    }

    .elms-section-heading h3,
    .elms-ecosystem-content h3 {
        font-size: 27px;
    }

    .elms-ecosystem {
        padding: 30px 22px;
        gap: 35px;
        margin-bottom: 65px;
    }

    .elms-learning-flow {
        padding: 22px 15px;
        overflow-x: auto;
    }

    .elms-flow {
        min-width: 650px;
    }

    .elms-benefit-grid {
        grid-template-columns: 1fr;
    }

    .elms-cta {
        padding: 45px 22px;
    }

    .elms-cta h3 {
        font-size: 28px;
    }

}

/* =========================================================
   DIGITAL DOCUMENT CIRCULATION
========================================================= */

.ddc-body {
    background: #ffffff;
    padding: 90px 0 100px;
    color: #172033;
}

.ddc-body .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 25px;
}


/* =========================================================
   INTRO
========================================================= */

.ddc-intro {
    max-width: 900px;
    margin: 25px auto 55px;
    text-align: center;
}

.ddc-intro .section-label,
.ddc-section-heading .section-label {
    color: #1264d8;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.ddc-intro h2 {
    font-size: 42px;
    line-height: 1.2;
    margin: 0 0 20px;
    font-weight: 800;
    color: #111827;
}

.ddc-intro p {
    color: #667085;
    font-size: 17px;
    line-height: 1.8;
    margin: 0 auto 10px;
    max-width: 850px;
}

.ddc-body .gradient-text {
    background: linear-gradient(
        135deg,
        #1264d8,
        #58b52b
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* =========================================================
   HIGHLIGHTS
========================================================= */

.ddc-highlights {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 90px;
}

.ddc-highlight-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    border: 1px solid #e7edf5;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(20, 65, 120, 0.07);
    transition: all .25s ease;
}

.ddc-highlight-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(18, 100, 216, 0.13);
    border-color: rgba(18, 100, 216, .18);
}

.ddc-highlight-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(18, 100, 216, .09);
    color: #1264d8;
    font-size: 19px;
}

.ddc-highlight-card strong {
    display: block;
    color: #172033;
    font-size: 14px;
    margin-bottom: 4px;
}

.ddc-highlight-card span {
    display: block;
    color: #7b8798;
    font-size: 12px;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.ddc-section-heading {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 42px;
}

.ddc-section-heading h3 {
    margin: 0 0 12px;
    color: #111827;
    font-size: 32px;
    line-height: 1.3;
}

.ddc-section-heading p {
    color: #667085;
    line-height: 1.7;
    margin: 0;
}


/* =========================================================
   FEATURE GRID
========================================================= */

.ddc-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-bottom: 95px;
}

.ddc-feature-card {
    position: relative;
    padding: 28px;
    border: 1px solid #e5ebf3;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(24, 65, 110, 0.06);
    overflow: hidden;
    transition: all .3s ease;
}

.ddc-feature-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(
        90deg,
        #1264d8,
        #58b52b
    );
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}

.ddc-feature-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 18px 45px rgba(18, 100, 216, 0.12);
    border-color: rgba(18, 100, 216, .16);
}

.ddc-feature-card:hover::before {
    transform: scaleX(1);
}

.ddc-feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    background: linear-gradient(
        135deg,
        rgba(18, 100, 216, .10),
        rgba(88, 181, 43, .10)
    );
    color: #1264d8;
    font-size: 19px;
    transition: all .25s ease;
}

.ddc-feature-card:hover .ddc-feature-icon {
    background: linear-gradient(
        135deg,
        #1264d8,
        #58b52b
    );
    color: #ffffff;
    transform: translateY(-2px);
}

.ddc-feature-card h4 {
    margin: 0 0 10px;
    font-size: 17px;
    color: #172033;
}

.ddc-feature-card p {
    margin: 0;
    color: #6d7889;
    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   WORKFLOW
========================================================= */

.ddc-workflow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 55px;
    align-items: center;
    padding: 65px;
    margin-bottom: 95px;
    border-radius: 28px;
    background: linear-gradient(
        135deg,
        #f5f9ff 0%,
        #f8fbf7 100%
    );
    border: 1px solid #e5edf6;
}

.ddc-workflow-content h3 {
    font-size: 32px;
    line-height: 1.3;
    margin: 0 0 16px;
    color: #111827;
}

.ddc-workflow-content > p {
    color: #667085;
    line-height: 1.75;
    margin: 0 0 28px;
}

.ddc-workflow-list {
    display: grid;
    gap: 14px;
}

.ddc-workflow-item {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.ddc-workflow-item > span {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #1264d8;
    box-shadow: 0 5px 18px rgba(18, 100, 216, .08);
}

.ddc-workflow-item strong {
    display: block;
    color: #172033;
    font-size: 14px;
    margin-bottom: 3px;
}

.ddc-workflow-item small {
    color: #758094;
    line-height: 1.5;
    font-size: 12px;
}


/* =========================================================
   WORKFLOW VISUAL
========================================================= */

.ddc-workflow-visual {
    padding: 25px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid #e2e9f2;
    box-shadow: 0 18px 50px rgba(24, 65, 110, .10);
}

.ddc-visual-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    font-size: 13px;
    font-weight: 800;
    color: #172033;
}

.ddc-visual-header > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ddc-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #58b52b;
    box-shadow: 0 0 0 4px rgba(88,181,43,.12);
}

.ddc-live {
    padding: 5px 9px;
    border-radius: 7px;
    background: rgba(88,181,43,.10);
    color: #58b52b;
    font-size: 9px;
    font-weight: 800;
}


/* Document Card */

.ddc-document-card {
    padding: 20px;
    border-radius: 15px;
    background: #f8fafc;
    border: 1px solid #e5ebf3;
}

.ddc-document-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ddc-document-icon {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(18,100,216,.10);
    color: #1264d8;
}

.ddc-document-top strong {
    display: block;
    color: #172033;
    font-size: 13px;
    margin-bottom: 3px;
}

.ddc-document-top small {
    color: #7c8796;
    font-size: 10px;
}


/* Progress */

.ddc-progress {
    margin: 28px 0 20px;
    position: relative;
}

.ddc-progress-line {
    position: absolute;
    top: 19px;
    left: 25px;
    right: 25px;
    height: 3px;
    background: #dce5ef;
    overflow: hidden;
}

.ddc-progress-line span {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        #1264d8,
        #58b52b
    );
}

.ddc-progress-points {
    position: relative;
    display: flex;
    justify-content: space-between;
}

.ddc-progress-points > div {
    text-align: center;
    z-index: 2;
}

.ddc-progress-points i {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 7px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid #dce5ef;
    color: #98a3b2;
    font-size: 12px;
}

.ddc-progress-points .active i {
    border-color: #1264d8;
    color: #1264d8;
}

.ddc-progress-points small {
    color: #7b8796;
    font-size: 9px;
}


/* Document Info */

.ddc-document-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 15px;
}

.ddc-document-info div {
    padding: 12px;
    border-radius: 10px;
    background: #ffffff;
}

.ddc-document-info span {
    display: block;
    color: #8a94a3;
    font-size: 9px;
    margin-bottom: 4px;
}

.ddc-document-info strong {
    color: #172033;
    font-size: 12px;
}


/* Mini Cards */

.ddc-mini-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 15px;
}

.ddc-mini-cards > div {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-radius: 11px;
    background: #f8fafc;
    border: 1px solid #e6ecf3;
}

.ddc-mini-cards i {
    color: #1264d8;
    font-size: 14px;
}

.ddc-mini-cards strong {
    display: block;
    color: #172033;
    font-size: 13px;
}

.ddc-mini-cards small {
    display: block;
    color: #8791a0;
    font-size: 8px;
    margin-top: 2px;
}


/* =========================================================
   BENEFITS
========================================================= */

.ddc-benefits {
    margin-bottom: 80px;
}

.ddc-benefit-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.ddc-benefit {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 25px;
    border-radius: 17px;
    border: 1px solid #e5ebf3;
    background: #ffffff;
    transition: all .25s ease;
}

.ddc-benefit:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 35px rgba(18, 100, 216, .09);
}

.ddc-benefit > i {
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(88, 181, 43, .10);
    color: #58b52b;
}

.ddc-benefit strong {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
    color: #172033;
}

.ddc-benefit p {
    margin: 0;
    color: #6d7889;
    font-size: 13px;
    line-height: 1.65;
}


/* =========================================================
   CTA
========================================================= */

.ddc-cta {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    padding: 65px 45px;
    text-align: center;
    background: linear-gradient(
        135deg,
        #1264d8,
        #0e55b8 55%,
        #58b52b
    );
    box-shadow: 0 20px 55px rgba(18, 100, 216, .20);
}

.ddc-cta::before {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.13);
    right: -100px;
    top: -120px;
}

.ddc-cta::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.10);
    left: -90px;
    bottom: -110px;
}

.ddc-cta-content {
    position: relative;
    z-index: 2;
    max-width: 750px;
    margin: 0 auto;
}

.ddc-cta .section-label {
    color: rgba(255,255,255,.85);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.ddc-cta h3 {
    color: #ffffff;
    font-size: 34px;
    line-height: 1.3;
    margin: 0 0 15px;
}

.ddc-cta h3 span {
    color: #dff7c9;
}

.ddc-cta p {
    color: rgba(255,255,255,.86);
    line-height: 1.75;
    font-size: 15px;
    margin: 0 auto 28px;
    max-width: 650px;
}

.ddc-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 12px;
    background: #ffffff;
    color: #1264d8;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    transition: all .25s ease;
}

.ddc-cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

.ddc-cta-button i {
    transition: transform .25s ease;
}

.ddc-cta-button:hover i {
    transform: translateX(4px);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .ddc-highlights {
        grid-template-columns: repeat(2, 1fr);
    }

    .ddc-feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ddc-workflow {
        grid-template-columns: 1fr;
        padding: 45px;
    }

}


@media (max-width: 700px) {

    .ddc-body {
        padding: 65px 0 75px;
    }

    .ddc-intro h2 {
        font-size: 32px;
    }

    .ddc-intro p {
        font-size: 15px;
    }

    .ddc-highlights {
        grid-template-columns: 1fr;
        margin-bottom: 65px;
    }

    .ddc-feature-grid {
        grid-template-columns: 1fr;
        margin-bottom: 65px;
    }

    .ddc-section-heading h3,
    .ddc-workflow-content h3 {
        font-size: 27px;
    }

    .ddc-workflow {
        padding: 30px 22px;
        gap: 35px;
        margin-bottom: 65px;
    }

    .ddc-workflow-visual {
        padding: 18px;
    }

    .ddc-mini-cards {
        grid-template-columns: 1fr;
    }

    .ddc-benefit-grid {
        grid-template-columns: 1fr;
    }

    .ddc-cta {
        padding: 45px 22px;
    }

    .ddc-cta h3 {
        font-size: 28px;
    }

}

/* =========================================================
   TRANSPORT MANAGEMENT SYSTEM
========================================================= */

.tms-body {
    background: #ffffff;
    padding: 90px 0 100px;
    color: #172033;
}

.tms-body .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 25px;
}


/* =========================================================
   INTRO
========================================================= */

.tms-intro {
    max-width: 900px;
    margin: 25px auto 55px;
    text-align: center;
}

.tms-intro .section-label,
.tms-section-heading .section-label {
    color: #1264d8;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.tms-intro h2 {
    font-size: 42px;
    line-height: 1.2;
    margin: 0 0 20px;
    font-weight: 800;
    color: #111827;
}

.tms-intro p {
    color: #667085;
    font-size: 17px;
    line-height: 1.8;
    margin: 0 auto 10px;
    max-width: 850px;
}

.tms-body .gradient-text {
    background: linear-gradient(
        135deg,
        #1264d8,
        #58b52b
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* =========================================================
   HIGHLIGHTS
========================================================= */

.tms-highlights {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 90px;
}

.tms-highlight-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    border: 1px solid #e7edf5;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(20, 65, 120, 0.07);
    transition: all .25s ease;
}

.tms-highlight-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(18, 100, 216, 0.13);
    border-color: rgba(18, 100, 216, .18);
}

.tms-highlight-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(18, 100, 216, .09);
    color: #1264d8;
    font-size: 19px;
}

.tms-highlight-card strong {
    display: block;
    color: #172033;
    font-size: 14px;
    margin-bottom: 4px;
}

.tms-highlight-card span {
    display: block;
    color: #7b8798;
    font-size: 12px;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.tms-section-heading {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 42px;
}

.tms-section-heading h3 {
    margin: 0 0 12px;
    color: #111827;
    font-size: 32px;
    line-height: 1.3;
}

.tms-section-heading p {
    color: #667085;
    line-height: 1.7;
    margin: 0;
}


/* =========================================================
   FEATURE GRID
========================================================= */

.tms-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-bottom: 95px;
}

.tms-feature-card {
    position: relative;
    padding: 28px;
    border: 1px solid #e5ebf3;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(24, 65, 110, 0.06);
    overflow: hidden;
    transition: all .3s ease;
}

.tms-feature-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(
        90deg,
        #1264d8,
        #58b52b
    );
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}

.tms-feature-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 18px 45px rgba(18, 100, 216, 0.12);
    border-color: rgba(18, 100, 216, .16);
}

.tms-feature-card:hover::before {
    transform: scaleX(1);
}

.tms-feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    background: linear-gradient(
        135deg,
        rgba(18, 100, 216, .10),
        rgba(88, 181, 43, .10)
    );
    color: #1264d8;
    font-size: 19px;
    transition: all .25s ease;
}

.tms-feature-card:hover .tms-feature-icon {
    background: linear-gradient(
        135deg,
        #1264d8,
        #58b52b
    );
    color: #ffffff;
    transform: translateY(-2px);
}

.tms-feature-card h4 {
    margin: 0 0 10px;
    font-size: 17px;
    color: #172033;
}

.tms-feature-card p {
    margin: 0;
    color: #6d7889;
    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   ECOSYSTEM
========================================================= */

.tms-ecosystem {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 55px;
    align-items: center;
    padding: 65px;
    margin-bottom: 95px;
    border-radius: 28px;
    background: linear-gradient(
        135deg,
        #f5f9ff 0%,
        #f8fbf7 100%
    );
    border: 1px solid #e5edf6;
}

.tms-ecosystem-content h3 {
    font-size: 32px;
    line-height: 1.3;
    margin: 0 0 16px;
    color: #111827;
}

.tms-ecosystem-content > p {
    color: #667085;
    line-height: 1.75;
    margin: 0 0 28px;
}

.tms-ecosystem-list {
    display: grid;
    gap: 14px;
}

.tms-ecosystem-item {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.tms-ecosystem-item > span {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #1264d8;
    box-shadow: 0 5px 18px rgba(18, 100, 216, .08);
}

.tms-ecosystem-item strong {
    display: block;
    color: #172033;
    font-size: 14px;
    margin-bottom: 3px;
}

.tms-ecosystem-item small {
    color: #758094;
    line-height: 1.5;
    font-size: 12px;
}


/* =========================================================
   DASHBOARD
========================================================= */

.tms-dashboard {
    padding: 25px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid #e2e9f2;
    box-shadow: 0 18px 50px rgba(24, 65, 110, .10);
}

.tms-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    font-size: 13px;
    font-weight: 800;
    color: #172033;
}

.tms-dashboard-header > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tms-online-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #58b52b;
    box-shadow: 0 0 0 4px rgba(88,181,43,.12);
}

.tms-live {
    padding: 5px 9px;
    border-radius: 7px;
    background: rgba(88,181,43,.10);
    color: #58b52b;
    font-size: 9px;
    font-weight: 800;
}


/* =========================================================
   MAP VISUAL
========================================================= */

.tms-map {
    position: relative;
    height: 275px;
    overflow: hidden;
    border-radius: 16px;
    background:
        linear-gradient(
            135deg,
            #f5f9ff,
            #f5faf3
        );
    border: 1px solid #e5ebf2;
}

.tms-map::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .35;
    background-image:
        linear-gradient(#dbe5ef 1px, transparent 1px),
        linear-gradient(90deg, #dbe5ef 1px, transparent 1px);
    background-size: 35px 35px;
}

.tms-map-line {
    position: absolute;
    height: 4px;
    border-radius: 10px;
    background: linear-gradient(
        90deg,
        #1264d8,
        #58b52b
    );
    opacity: .75;
}

.line-one {
    width: 55%;
    top: 75px;
    left: 15%;
    transform: rotate(18deg);
}

.line-two {
    width: 62%;
    top: 155px;
    left: 20%;
    transform: rotate(-13deg);
}

.line-three {
    width: 42%;
    top: 205px;
    left: 35%;
    transform: rotate(8deg);
}

.tms-map-point {
    position: absolute;
    z-index: 3;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #1264d8;
    border: 3px solid #1264d8;
    box-shadow: 0 8px 22px rgba(18,100,216,.18);
    font-size: 14px;
}

.point-one {
    top: 58px;
    left: 19%;
}

.point-two {
    top: 139px;
    right: 22%;
}

.point-three {
    bottom: 25px;
    left: 45%;
    color: #58b52b;
    border-color: #58b52b;
}

.tms-map-label {
    position: absolute;
    z-index: 4;
    padding: 5px 9px;
    border-radius: 7px;
    background: #ffffff;
    color: #172033;
    font-size: 9px;
    font-weight: 800;
    box-shadow: 0 5px 15px rgba(20,60,100,.10);
}

.label-one {
    top: 35px;
    left: 28%;
}

.label-two {
    top: 119px;
    right: 12%;
}


/* =========================================================
   DASHBOARD STATS
========================================================= */

.tms-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 15px;
}

.tms-dashboard-stats > div {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px;
    border-radius: 11px;
    background: #f8fafc;
    border: 1px solid #e6ecf3;
}

.tms-dashboard-stats i {
    color: #1264d8;
    font-size: 15px;
}

.tms-dashboard-stats strong {
    display: block;
    color: #172033;
    font-size: 14px;
}

.tms-dashboard-stats small {
    display: block;
    color: #8791a0;
    font-size: 8px;
    margin-top: 2px;
}


/* =========================================================
   JOURNEY FLOW
========================================================= */

.tms-journey {
    margin-bottom: 95px;
}

.tms-journey-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 35px 25px;
    border: 1px solid #e3eaf2;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 12px 35px rgba(24, 65, 110, .06);
}

.tms-journey-step {
    position: relative;
    min-width: 110px;
    text-align: center;
}

.tms-journey-step > span {
    position: absolute;
    top: -14px;
    right: 0;
    color: #58b52b;
    font-size: 10px;
    font-weight: 800;
}

.tms-journey-step > i {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        rgba(18,100,216,.10),
        rgba(88,181,43,.10)
    );
    color: #1264d8;
}

.tms-journey-step strong {
    display: block;
    color: #172033;
    font-size: 13px;
    margin-bottom: 3px;
}

.tms-journey-step small {
    color: #7a8494;
    font-size: 10px;
}

.tms-journey-line {
    flex: 1;
    height: 2px;
    margin: 0 8px;
    background: linear-gradient(
        90deg,
        #1264d8,
        #58b52b
    );
    opacity: .35;
}


/* =========================================================
   BENEFITS
========================================================= */

.tms-benefits {
    margin-bottom: 80px;
}

.tms-benefit-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.tms-benefit {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 25px;
    border-radius: 17px;
    border: 1px solid #e5ebf3;
    background: #ffffff;
    transition: all .25s ease;
}

.tms-benefit:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 35px rgba(18, 100, 216, .09);
}

.tms-benefit > i {
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(88, 181, 43, .10);
    color: #58b52b;
}

.tms-benefit strong {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
    color: #172033;
}

.tms-benefit p {
    margin: 0;
    color: #6d7889;
    font-size: 13px;
    line-height: 1.65;
}


/* =========================================================
   CTA
========================================================= */

.tms-cta {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    padding: 65px 45px;
    text-align: center;
    background: linear-gradient(
        135deg,
        #1264d8,
        #0e55b8 55%,
        #58b52b
    );
    box-shadow: 0 20px 55px rgba(18, 100, 216, .20);
}

.tms-cta::before {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.13);
    right: -100px;
    top: -120px;
}

.tms-cta::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.10);
    left: -90px;
    bottom: -110px;
}

.tms-cta-content {
    position: relative;
    z-index: 2;
    max-width: 750px;
    margin: 0 auto;
}

.tms-cta .section-label {
    color: rgba(255,255,255,.85);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.tms-cta h3 {
    color: #ffffff;
    font-size: 34px;
    line-height: 1.3;
    margin: 0 0 15px;
}

.tms-cta h3 span {
    color: #dff7c9;
}

.tms-cta p {
    color: rgba(255,255,255,.86);
    line-height: 1.75;
    font-size: 15px;
    margin: 0 auto 28px;
    max-width: 650px;
}

.tms-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 12px;
    background: #ffffff;
    color: #1264d8;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    transition: all .25s ease;
}

.tms-cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

.tms-cta-button i {
    transition: transform .25s ease;
}

.tms-cta-button:hover i {
    transform: translateX(4px);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .tms-highlights {
        grid-template-columns: repeat(2, 1fr);
    }

    .tms-feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tms-ecosystem {
        grid-template-columns: 1fr;
        padding: 45px;
    }

}


@media (max-width: 700px) {

    .tms-body {
        padding: 65px 0 75px;
    }

    .tms-intro h2 {
        font-size: 32px;
    }

    .tms-intro p {
        font-size: 15px;
    }

    .tms-highlights {
        grid-template-columns: 1fr;
        margin-bottom: 65px;
    }

    .tms-feature-grid {
        grid-template-columns: 1fr;
        margin-bottom: 65px;
    }

    .tms-section-heading h3,
    .tms-ecosystem-content h3 {
        font-size: 27px;
    }

    .tms-ecosystem {
        padding: 30px 22px;
        gap: 35px;
        margin-bottom: 65px;
    }

    .tms-dashboard {
        padding: 18px;
    }

    .tms-map {
        height: 230px;
    }

    .tms-dashboard-stats {
        grid-template-columns: 1fr;
    }

    .tms-journey-flow {
        overflow-x: auto;
        justify-content: flex-start;
        min-width: 0;
    }

    .tms-journey-flow {
        min-width: 680px;
    }

    .tms-benefit-grid {
        grid-template-columns: 1fr;
    }

    .tms-cta {
        padding: 45px 22px;
    }

    .tms-cta h3 {
        font-size: 28px;
    }

}

/* =========================================================
   BIOMETRIC SMART CARD
   ========================================================= */

.bsc-body {
    background: #ffffff;
    color: #172033;
    padding: 80px 0 0;
    overflow: hidden;
}

.bsc-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* =========================================================
   INTRO
   ========================================================= */

.bsc-intro {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 70px;
    padding: 20px 0 80px;
}

.bsc-label {
    display: inline-block;
    color: #1264d8;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 14px;
}

.bsc-intro h2,
.bsc-section-heading h2 {
    margin: 0;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.1;
    letter-spacing: -1.5px;
    color: #172033;
}

.bsc-intro h2 span,
.bsc-section-heading h2 span,
.bsc-cta h2 span {
    display: block;
    background: linear-gradient(90deg, #1264d8, #58b52b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bsc-intro-content > p {
    max-width: 700px;
    margin: 22px 0 0;
    color: #68758a;
    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   SMART CARD VISUAL
   ========================================================= */

.bsc-intro-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.bsc-card {
    position: relative;
    width: 390px;
    min-height: 245px;
    padding: 28px;
    border-radius: 24px;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(135deg, #1264d8 0%, #174fa9 55%, #58b52b 150%);
    box-shadow: 0 30px 70px rgba(18, 100, 216, .25);
}

.bsc-card::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -100px;
    top: -100px;
    border-radius: 50%;
    background: rgba(255,255,255,.10);
}

.bsc-card::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    left: -100px;
    bottom: -110px;
    border-radius: 50%;
    background: rgba(88,181,43,.18);
}

.bsc-card-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bsc-card-logo {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255,255,255,.18);
    font-size: 20px;
}

.bsc-card-title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.bsc-chip {
    position: relative;
    z-index: 2;
    width: 52px;
    height: 40px;
    margin-top: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: linear-gradient(135deg, #e9edf2, #adb7c4);
    color: #475467;
}

.bsc-card-user {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 25px;
}

.bsc-user-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
}

.bsc-card-user strong,
.bsc-card-user small {
    display: block;
}

.bsc-card-user strong {
    font-size: 11px;
    letter-spacing: 1px;
}

.bsc-card-user small {
    margin-top: 4px;
    font-size: 10px;
    opacity: .75;
}

.bsc-card-bottom {
    position: absolute;
    z-index: 2;
    left: 28px;
    right: 28px;
    bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.bsc-card-bottom i {
    font-size: 22px;
}


/* =========================================================
   HIGHLIGHTS
   ========================================================= */

.bsc-highlights {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    padding-bottom: 90px;
}

.bsc-highlight {
    padding: 28px 24px;
    border: 1px solid #e8edf5;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(20, 50, 90, .06);
    transition: .3s ease;
}

.bsc-highlight:hover {
    transform: translateY(-6px);
    border-color: rgba(18,100,216,.2);
    box-shadow: 0 18px 40px rgba(20, 50, 90, .10);
}

.bsc-highlight-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 13px;
    background: rgba(18,100,216,.08);
    color: #1264d8;
    font-size: 19px;
}

.bsc-highlight strong {
    display: block;
    font-size: 16px;
    color: #172033;
}

.bsc-highlight p {
    margin: 9px 0 0;
    color: #718096;
    font-size: 13px;
    line-height: 1.6;
}


/* =========================================================
   SECTION HEADING
   ========================================================= */

.bsc-section-heading {
    max-width: 720px;
    margin: 0 auto 50px;
    text-align: center;
}

.bsc-section-heading p {
    margin: 18px auto 0;
    color: #718096;
    font-size: 15px;
    line-height: 1.8;
}


/* =========================================================
   FEATURES
   ========================================================= */

.bsc-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding-bottom: 100px;
}

.bsc-feature {
    padding: 30px 26px;
    border-radius: 18px;
    border: 1px solid #e7edf5;
    background: #fff;
    transition: all .3s ease;
}

.bsc-feature:hover {
    transform: translateY(-6px);
    border-color: rgba(18,100,216,.25);
    box-shadow: 0 20px 45px rgba(18,100,216,.10);
}

.bsc-feature-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 14px;
    background: linear-gradient(
        135deg,
        rgba(18,100,216,.10),
        rgba(88,181,43,.10)
    );
    color: #1264d8;
    font-size: 20px;
}

.bsc-feature h3 {
    margin: 0 0 10px;
    color: #172033;
    font-size: 17px;
}

.bsc-feature p {
    margin: 0;
    color: #718096;
    font-size: 13px;
    line-height: 1.7;
}


/* =========================================================
   ECOSYSTEM
   ========================================================= */

.bsc-ecosystem {
    padding: 90px 0;
    border-radius: 30px;
    background: #f7faff;
}

.bsc-ecosystem .bsc-section-heading {
    padding: 0 30px;
}

.bsc-ecosystem-grid {
    width: min(1050px, calc(100% - 60px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.bsc-ecosystem-item {
    padding: 30px 22px;
    text-align: center;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #e6edf7;
    transition: .3s ease;
}

.bsc-ecosystem-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(18,100,216,.09);
}

.bsc-eco-icon {
    width: 55px;
    height: 55px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(135deg, #1264d8, #58b52b);
    color: #fff;
    font-size: 20px;
}

.bsc-ecosystem-item h3 {
    margin: 0 0 9px;
    font-size: 16px;
}

.bsc-ecosystem-item p {
    margin: 0;
    color: #718096;
    font-size: 13px;
    line-height: 1.6;
}


/* =========================================================
   AUTHENTICATION FLOW
   ========================================================= */

.bsc-flow-section {
    padding: 100px 0;
}

.bsc-flow {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
}

.bsc-flow-step {
    width: 220px;
    text-align: center;
}

.bsc-flow-number {
    color: #1264d8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.bsc-flow-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(135deg, #1264d8, #58b52b);
    color: #fff;
    font-size: 23px;
    box-shadow: 0 12px 25px rgba(18,100,216,.18);
}

.bsc-flow-step h3 {
    margin: 0 0 9px;
    font-size: 17px;
}

.bsc-flow-step p {
    margin: 0;
    color: #718096;
    font-size: 13px;
    line-height: 1.6;
}

.bsc-flow-line {
    width: 60px;
    height: 2px;
    margin-top: 105px;
    background: linear-gradient(90deg, #1264d8, #58b52b);
    opacity: .4;
}


/* =========================================================
   BENEFITS
   ========================================================= */

.bsc-benefits {
    padding: 90px 0;
}

.bsc-benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.bsc-benefit {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 25px;
    border-radius: 17px;
    border: 1px solid #e7edf5;
    background: #fff;
}

.bsc-benefit > i {
    width: 45px;
    height: 45px;
    min-width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(18,100,216,.08);
    color: #1264d8;
}

.bsc-benefit h3 {
    margin: 0 0 7px;
    font-size: 16px;
}

.bsc-benefit p {
    margin: 0;
    color: #718096;
    font-size: 13px;
    line-height: 1.6;
}


/* =========================================================
   CTA
   ========================================================= */

.bsc-cta {
    margin-top: 40px;
    padding: 70px 50px;
    border-radius: 28px;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, #1264d8, #174fa9);
    color: #fff;
}

.bsc-cta::before {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    right: -130px;
    top: -180px;
    border-radius: 50%;
    background: rgba(88,181,43,.25);
}

.bsc-cta::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    left: -120px;
    bottom: -150px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
}

.bsc-cta-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.bsc-cta .bsc-label {
    color: rgba(255,255,255,.75);
}

.bsc-cta h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.1;
}

.bsc-cta h2 span {
    display: inline;
    background: linear-gradient(90deg, #fff, #b9ef9f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bsc-cta p {
    max-width: 600px;
    margin: 18px auto 28px;
    color: rgba(255,255,255,.78);
    line-height: 1.7;
}

.bsc-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.bsc-btn-primary,
.bsc-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 22px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: .25s ease;
}

.bsc-btn-primary {
    background: #58b52b;
    color: #fff;
}

.bsc-btn-primary:hover {
    transform: translateY(-2px);
    background: #4da323;
}

.bsc-btn-outline {
    color: #fff;
    border: 1px solid rgba(255,255,255,.35);
}

.bsc-btn-outline:hover {
    background: rgba(255,255,255,.10);
    transform: translateY(-2px);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    .bsc-intro {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .bsc-intro-content {
        text-align: center;
    }

    .bsc-intro-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .bsc-highlights {
        grid-template-columns: repeat(2, 1fr);
    }

    .bsc-feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bsc-ecosystem-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bsc-benefit-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bsc-flow {
        flex-wrap: wrap;
    }

    .bsc-flow-line {
        display: none;
    }

    .bsc-flow-step {
        width: calc(50% - 15px);
    }
}


@media (max-width: 700px) {

    .bsc-body {
        padding-top: 50px;
    }

    .bsc-container {
        width: min(100% - 28px, 1180px);
    }

    .bsc-intro {
        padding-bottom: 55px;
    }

    .bsc-card {
        width: 100%;
        max-width: 390px;
    }

    .bsc-highlights,
    .bsc-feature-grid,
    .bsc-ecosystem-grid,
    .bsc-benefit-grid {
        grid-template-columns: 1fr;
    }

    .bsc-highlights {
        padding-bottom: 65px;
    }

    .bsc-section-heading h2,
    .bsc-intro h2 {
        font-size: 32px;
    }

    .bsc-ecosystem {
        padding: 65px 0;
    }

    .bsc-ecosystem-grid {
        width: calc(100% - 30px);
    }

    .bsc-flow-section,
    .bsc-benefits {
        padding: 65px 0;
    }

    .bsc-flow-step {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }

    .bsc-cta {
        padding: 55px 25px;
        border-radius: 22px;
    }
}

/* =========================================================
   RFID LIBRARY AUTOMATION
   ========================================================= */

.rfid-body {
    background: #ffffff;
    color: #172033;
    padding: 80px 0 0;
    overflow: hidden;
}

.rfid-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* =========================================================
   INTRO
   ========================================================= */

.rfid-intro {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 70px;
    padding: 20px 0 80px;
}

.rfid-label {
    display: inline-block;
    color: #1264d8;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 14px;
}

.rfid-intro h2,
.rfid-section-heading h2 {
    margin: 0;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.1;
    letter-spacing: -1.5px;
    color: #172033;
}

.rfid-intro h2 span,
.rfid-section-heading h2 span,
.rfid-cta h2 span {
    display: block;
    background: linear-gradient(90deg, #1264d8, #58b52b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.rfid-intro-content > p {
    max-width: 700px;
    margin: 22px 0 0;
    color: #68758a;
    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   RFID VISUAL
   ========================================================= */

.rfid-intro-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.rfid-library-card {
    position: relative;
    width: 390px;
    min-height: 270px;
    padding: 28px;
    border-radius: 24px;
    overflow: hidden;
    color: #ffffff;
    background:
        linear-gradient(135deg, #1264d8 0%, #174fa9 55%, #58b52b 150%);
    box-shadow: 0 30px 70px rgba(18, 100, 216, .25);
}

.rfid-library-card::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -120px;
    top: -130px;
    border-radius: 50%;
    background: rgba(255,255,255,.10);
}

.rfid-library-card::after {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    left: -120px;
    bottom: -120px;
    border-radius: 50%;
    background: rgba(88,181,43,.20);
}

.rfid-card-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rfid-card-header > span {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.rfid-card-logo {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: rgba(255,255,255,.18);
    font-size: 20px;
}


/* BOOK STACK */

.rfid-book-stack {
    position: relative;
    z-index: 2;
    height: 110px;
    margin-top: 35px;
}

.rfid-book {
    position: absolute;
    width: 145px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255,255,255,.17);
    border: 1px solid rgba(255,255,255,.25);
    font-size: 23px;
}

.book-one {
    left: 0;
    top: 25px;
    transform: rotate(-7deg);
}

.book-two {
    left: 55px;
    top: 5px;
    transform: rotate(2deg);
}

.book-three {
    left: 110px;
    top: 28px;
    transform: rotate(7deg);
}


/* RFID SIGNAL */

.rfid-signal {
    position: absolute;
    z-index: 3;
    right: 38px;
    top: 115px;
    width: 85px;
    height: 85px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rfid-signal span {
    position: absolute;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 50%;
}

.rfid-signal span:nth-child(1) {
    width: 30px;
    height: 30px;
}

.rfid-signal span:nth-child(2) {
    width: 55px;
    height: 55px;
}

.rfid-signal span:nth-child(3) {
    width: 80px;
    height: 80px;
}

.rfid-signal i {
    position: relative;
    z-index: 3;
    font-size: 20px;
}

.rfid-card-footer {
    position: absolute;
    z-index: 3;
    left: 28px;
    right: 28px;
    bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.rfid-card-footer i {
    font-size: 20px;
}


/* =========================================================
   HIGHLIGHTS
   ========================================================= */

.rfid-highlights {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    padding-bottom: 90px;
}

.rfid-highlight {
    padding: 28px 24px;
    border: 1px solid #e8edf5;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(20, 50, 90, .06);
    transition: .3s ease;
}

.rfid-highlight:hover {
    transform: translateY(-6px);
    border-color: rgba(18,100,216,.2);
    box-shadow: 0 18px 40px rgba(20, 50, 90, .10);
}

.rfid-highlight-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 13px;
    background: rgba(18,100,216,.08);
    color: #1264d8;
    font-size: 19px;
}

.rfid-highlight strong {
    display: block;
    font-size: 16px;
    color: #172033;
}

.rfid-highlight p {
    margin: 9px 0 0;
    color: #718096;
    font-size: 13px;
    line-height: 1.6;
}


/* =========================================================
   SECTION HEADING
   ========================================================= */

.rfid-section-heading {
    max-width: 760px;
    margin: 0 auto 50px;
    text-align: center;
}

.rfid-section-heading p {
    margin: 18px auto 0;
    color: #718096;
    font-size: 15px;
    line-height: 1.8;
}


/* =========================================================
   FEATURES
   ========================================================= */

.rfid-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding-bottom: 100px;
}

.rfid-feature {
    padding: 30px 26px;
    border-radius: 18px;
    border: 1px solid #e7edf5;
    background: #ffffff;
    transition: all .3s ease;
}

.rfid-feature:hover {
    transform: translateY(-6px);
    border-color: rgba(18,100,216,.25);
    box-shadow: 0 20px 45px rgba(18,100,216,.10);
}

.rfid-feature-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 14px;
    background: linear-gradient(
        135deg,
        rgba(18,100,216,.10),
        rgba(88,181,43,.10)
    );
    color: #1264d8;
    font-size: 20px;
}

.rfid-feature h3 {
    margin: 0 0 10px;
    color: #172033;
    font-size: 17px;
}

.rfid-feature p {
    margin: 0;
    color: #718096;
    font-size: 13px;
    line-height: 1.7;
}


/* =========================================================
   ECOSYSTEM
   ========================================================= */

.rfid-ecosystem {
    padding: 90px 0;
    border-radius: 30px;
    background: #f7faff;
}

.rfid-ecosystem .rfid-section-heading {
    padding: 0 30px;
}

.rfid-ecosystem-grid {
    width: min(1050px, calc(100% - 60px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.rfid-ecosystem-item {
    padding: 30px 22px;
    text-align: center;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #e6edf7;
    transition: .3s ease;
}

.rfid-ecosystem-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(18,100,216,.09);
}

.rfid-eco-icon {
    width: 55px;
    height: 55px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(135deg, #1264d8, #58b52b);
    color: #ffffff;
    font-size: 20px;
}

.rfid-ecosystem-item h3 {
    margin: 0 0 9px;
    font-size: 16px;
}

.rfid-ecosystem-item p {
    margin: 0;
    color: #718096;
    font-size: 13px;
    line-height: 1.6;
}


/* =========================================================
   WORKFLOW
   ========================================================= */

.rfid-flow-section {
    padding: 100px 0;
}

.rfid-flow {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
}

.rfid-flow-step {
    width: 220px;
    text-align: center;
}

.rfid-flow-number {
    color: #1264d8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.rfid-flow-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(135deg, #1264d8, #58b52b);
    color: #ffffff;
    font-size: 23px;
    box-shadow: 0 12px 25px rgba(18,100,216,.18);
}

.rfid-flow-step h3 {
    margin: 0 0 9px;
    font-size: 17px;
}

.rfid-flow-step p {
    margin: 0;
    color: #718096;
    font-size: 13px;
    line-height: 1.6;
}

.rfid-flow-line {
    width: 60px;
    height: 2px;
    margin-top: 105px;
    background: linear-gradient(90deg, #1264d8, #58b52b);
    opacity: .4;
}


/* =========================================================
   BENEFITS
   ========================================================= */

.rfid-benefits {
    padding: 90px 0;
}

.rfid-benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.rfid-benefit {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 25px;
    border-radius: 17px;
    border: 1px solid #e7edf5;
    background: #ffffff;
}

.rfid-benefit > i {
    width: 45px;
    height: 45px;
    min-width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(18,100,216,.08);
    color: #1264d8;
}

.rfid-benefit h3 {
    margin: 0 0 7px;
    font-size: 16px;
}

.rfid-benefit p {
    margin: 0;
    color: #718096;
    font-size: 13px;
    line-height: 1.6;
}


/* =========================================================
   CTA
   ========================================================= */

.rfid-cta {
    margin-top: 40px;
    padding: 70px 50px;
    border-radius: 28px;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, #1264d8, #174fa9);
    color: #ffffff;
}

.rfid-cta::before {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    right: -130px;
    top: -180px;
    border-radius: 50%;
    background: rgba(88,181,43,.25);
}

.rfid-cta::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    left: -120px;
    bottom: -150px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
}

.rfid-cta-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.rfid-cta .rfid-label {
    color: rgba(255,255,255,.75);
}

.rfid-cta h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.1;
}

.rfid-cta h2 span {
    display: inline;
    background: linear-gradient(90deg, #ffffff, #b9ef9f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.rfid-cta p {
    max-width: 600px;
    margin: 18px auto 28px;
    color: rgba(255,255,255,.78);
    line-height: 1.7;
}

.rfid-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.rfid-btn-primary,
.rfid-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 22px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: .25s ease;
}

.rfid-btn-primary {
    background: #58b52b;
    color: #ffffff;
}

.rfid-btn-primary:hover {
    transform: translateY(-2px);
    background: #4da323;
}

.rfid-btn-outline {
    color: #ffffff;
    border: 1px solid rgba(255,255,255,.35);
}

.rfid-btn-outline:hover {
    background: rgba(255,255,255,.10);
    transform: translateY(-2px);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    .rfid-intro {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .rfid-intro-content {
        text-align: center;
    }

    .rfid-intro-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .rfid-highlights {
        grid-template-columns: repeat(2, 1fr);
    }

    .rfid-feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .rfid-ecosystem-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .rfid-benefit-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .rfid-flow {
        flex-wrap: wrap;
    }

    .rfid-flow-line {
        display: none;
    }

    .rfid-flow-step {
        width: calc(50% - 15px);
    }
}


@media (max-width: 700px) {

    .rfid-body {
        padding-top: 50px;
    }

    .rfid-container {
        width: min(100% - 28px, 1180px);
    }

    .rfid-intro {
        padding-bottom: 55px;
    }

    .rfid-library-card {
        width: 100%;
        max-width: 390px;
    }

    .rfid-highlights,
    .rfid-feature-grid,
    .rfid-ecosystem-grid,
    .rfid-benefit-grid {
        grid-template-columns: 1fr;
    }

    .rfid-highlights {
        padding-bottom: 65px;
    }

    .rfid-section-heading h2,
    .rfid-intro h2 {
        font-size: 32px;
    }

    .rfid-ecosystem {
        padding: 65px 0;
    }

    .rfid-ecosystem-grid {
        width: calc(100% - 30px);
    }

    .rfid-flow-section,
    .rfid-benefits {
        padding: 65px 0;
    }

    .rfid-flow-step {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }

    .rfid-cta {
        padding: 55px 25px;
        border-radius: 22px;
    }

}

/* =========================================================
   SMART ATTENDANCE
   ========================================================= */

.sa-body {
    background: #ffffff;
    color: #172033;
    padding: 80px 0 0;
    overflow: hidden;
}

.sa-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* =========================================================
   INTRO
   ========================================================= */

.sa-intro {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 70px;
    padding: 20px 0 80px;
}

.sa-label {
    display: inline-block;
    color: #1264d8;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 14px;
}

.sa-intro h2,
.sa-section-heading h2 {
    margin: 0;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.1;
    letter-spacing: -1.5px;
    color: #172033;
}

.sa-intro h2 span,
.sa-section-heading h2 span,
.sa-cta h2 span {
    display: block;
    background: linear-gradient(90deg, #1264d8, #58b52b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sa-intro-content > p {
    max-width: 700px;
    margin: 22px 0 0;
    color: #68758a;
    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   ATTENDANCE DASHBOARD VISUAL
   ========================================================= */

.sa-intro-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.sa-dashboard {
    position: relative;
    width: 390px;
    min-height: 330px;
    padding: 28px;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(
        145deg,
        #1264d8,
        #174fa9 65%,
        #58b52b
    );
    color: #ffffff;
    box-shadow: 0 30px 70px rgba(18, 100, 216, .25);
}

.sa-dashboard::before {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    right: -110px;
    top: -120px;
    border-radius: 50%;
    background: rgba(255,255,255,.09);
}

.sa-dashboard::after {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    left: -110px;
    bottom: -130px;
    border-radius: 50%;
    background: rgba(88,181,43,.20);
}

.sa-dashboard-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sa-dashboard-header span,
.sa-dashboard-header strong {
    display: block;
}

.sa-dashboard-header span {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
    opacity: .75;
}

.sa-dashboard-header strong {
    margin-top: 5px;
    font-size: 17px;
}

.sa-dashboard-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: rgba(255,255,255,.16);
    font-size: 19px;
}


/* ATTENDANCE CIRCLE */

.sa-attendance-circle {
    position: relative;
    z-index: 2;
    width: 125px;
    height: 125px;
    margin: 25px auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background:
        conic-gradient(
            #58b52b 0deg 331deg,
            rgba(255,255,255,.16) 331deg 360deg
        );
}

.sa-attendance-circle::before {
    content: "";
    position: absolute;
    width: 94px;
    height: 94px;
    border-radius: 50%;
    background: #1853ad;
}

.sa-circle-inner {
    position: relative;
    z-index: 2;
    text-align: center;
}

.sa-circle-inner strong,
.sa-circle-inner span {
    display: block;
}

.sa-circle-inner strong {
    font-size: 25px;
}

.sa-circle-inner span {
    margin-top: 2px;
    font-size: 9px;
    opacity: .75;
}


/* STATS */

.sa-stat-row {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.sa-stat {
    padding: 12px 8px;
    text-align: center;
    border-radius: 10px;
    background: rgba(255,255,255,.10);
}

.sa-stat strong,
.sa-stat span {
    display: block;
}

.sa-stat strong {
    font-size: 17px;
}

.sa-stat span {
    margin-top: 3px;
    font-size: 9px;
    opacity: .7;
}

.sa-live-status {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 17px;
    font-size: 10px;
    opacity: .85;
}

.sa-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #58b52b;
    box-shadow: 0 0 0 4px rgba(88,181,43,.15);
}


/* =========================================================
   HIGHLIGHTS
   ========================================================= */

.sa-highlights {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    padding-bottom: 90px;
}

.sa-highlight {
    padding: 28px 24px;
    border: 1px solid #e8edf5;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(20, 50, 90, .06);
    transition: .3s ease;
}

.sa-highlight:hover {
    transform: translateY(-6px);
    border-color: rgba(18,100,216,.2);
    box-shadow: 0 18px 40px rgba(20,50,90,.10);
}

.sa-highlight-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 13px;
    background: rgba(18,100,216,.08);
    color: #1264d8;
    font-size: 19px;
}

.sa-highlight strong {
    display: block;
    font-size: 16px;
    color: #172033;
}

.sa-highlight p {
    margin: 9px 0 0;
    color: #718096;
    font-size: 13px;
    line-height: 1.6;
}


/* =========================================================
   SECTION HEADING
   ========================================================= */

.sa-section-heading {
    max-width: 760px;
    margin: 0 auto 50px;
    text-align: center;
}

.sa-section-heading p {
    margin: 18px auto 0;
    color: #718096;
    font-size: 15px;
    line-height: 1.8;
}


/* =========================================================
   FEATURES
   ========================================================= */

.sa-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding-bottom: 100px;
}

.sa-feature {
    padding: 30px 26px;
    border-radius: 18px;
    border: 1px solid #e7edf5;
    background: #ffffff;
    transition: all .3s ease;
}

.sa-feature:hover {
    transform: translateY(-6px);
    border-color: rgba(18,100,216,.25);
    box-shadow: 0 20px 45px rgba(18,100,216,.10);
}

.sa-feature-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 14px;
    background: linear-gradient(
        135deg,
        rgba(18,100,216,.10),
        rgba(88,181,43,.10)
    );
    color: #1264d8;
    font-size: 20px;
}

.sa-feature h3 {
    margin: 0 0 10px;
    color: #172033;
    font-size: 17px;
}

.sa-feature p {
    margin: 0;
    color: #718096;
    font-size: 13px;
    line-height: 1.7;
}


/* =========================================================
   ECOSYSTEM
   ========================================================= */

.sa-ecosystem {
    padding: 90px 0;
    border-radius: 30px;
    background: #f7faff;
}

.sa-ecosystem .sa-section-heading {
    padding: 0 30px;
}

.sa-ecosystem-grid {
    width: min(1050px, calc(100% - 60px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.sa-ecosystem-item {
    padding: 30px 22px;
    text-align: center;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #e6edf7;
    transition: .3s ease;
}

.sa-ecosystem-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(18,100,216,.09);
}

.sa-eco-icon {
    width: 55px;
    height: 55px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(135deg, #1264d8, #58b52b);
    color: #ffffff;
    font-size: 20px;
}

.sa-ecosystem-item h3 {
    margin: 0 0 9px;
    font-size: 16px;
}

.sa-ecosystem-item p {
    margin: 0;
    color: #718096;
    font-size: 13px;
    line-height: 1.6;
}


/* =========================================================
   WORKFLOW
   ========================================================= */

.sa-flow-section {
    padding: 100px 0;
}

.sa-flow {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
}

.sa-flow-step {
    width: 220px;
    text-align: center;
}

.sa-flow-number {
    color: #1264d8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.sa-flow-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(135deg, #1264d8, #58b52b);
    color: #ffffff;
    font-size: 23px;
    box-shadow: 0 12px 25px rgba(18,100,216,.18);
}

.sa-flow-step h3 {
    margin: 0 0 9px;
    font-size: 17px;
}

.sa-flow-step p {
    margin: 0;
    color: #718096;
    font-size: 13px;
    line-height: 1.6;
}

.sa-flow-line {
    width: 60px;
    height: 2px;
    margin-top: 105px;
    background: linear-gradient(90deg, #1264d8, #58b52b);
    opacity: .4;
}


/* =========================================================
   BENEFITS
   ========================================================= */

.sa-benefits {
    padding: 90px 0;
}

.sa-benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.sa-benefit {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 25px;
    border-radius: 17px;
    border: 1px solid #e7edf5;
    background: #ffffff;
}

.sa-benefit > i {
    width: 45px;
    height: 45px;
    min-width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(18,100,216,.08);
    color: #1264d8;
}

.sa-benefit h3 {
    margin: 0 0 7px;
    font-size: 16px;
}

.sa-benefit p {
    margin: 0;
    color: #718096;
    font-size: 13px;
    line-height: 1.6;
}


/* =========================================================
   CTA
   ========================================================= */

.sa-cta {
    margin-top: 40px;
    padding: 70px 50px;
    border-radius: 28px;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, #1264d8, #174fa9);
    color: #ffffff;
}

.sa-cta::before {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    right: -130px;
    top: -180px;
    border-radius: 50%;
    background: rgba(88,181,43,.25);
}

.sa-cta::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    left: -120px;
    bottom: -150px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
}

.sa-cta-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.sa-cta .sa-label {
    color: rgba(255,255,255,.75);
}

.sa-cta h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.1;
}

.sa-cta h2 span {
    display: inline;
    background: linear-gradient(90deg, #ffffff, #b9ef9f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sa-cta p {
    max-width: 600px;
    margin: 18px auto 28px;
    color: rgba(255,255,255,.78);
    line-height: 1.7;
}

.sa-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.sa-btn-primary,
.sa-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 22px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: .25s ease;
}

.sa-btn-primary {
    background: #58b52b;
    color: #ffffff;
}

.sa-btn-primary:hover {
    transform: translateY(-2px);
    background: #4da323;
}

.sa-btn-outline {
    color: #ffffff;
    border: 1px solid rgba(255,255,255,.35);
}

.sa-btn-outline:hover {
    background: rgba(255,255,255,.10);
    transform: translateY(-2px);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    .sa-intro {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .sa-intro-content {
        text-align: center;
    }

    .sa-intro-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .sa-highlights {
        grid-template-columns: repeat(2, 1fr);
    }

    .sa-feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sa-ecosystem-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sa-benefit-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sa-flow {
        flex-wrap: wrap;
    }

    .sa-flow-line {
        display: none;
    }

    .sa-flow-step {
        width: calc(50% - 15px);
    }
}


@media (max-width: 700px) {

    .sa-body {
        padding-top: 50px;
    }

    .sa-container {
        width: min(100% - 28px, 1180px);
    }

    .sa-intro {
        padding-bottom: 55px;
    }

    .sa-dashboard {
        width: 100%;
        max-width: 390px;
    }

    .sa-highlights,
    .sa-feature-grid,
    .sa-ecosystem-grid,
    .sa-benefit-grid {
        grid-template-columns: 1fr;
    }

    .sa-highlights {
        padding-bottom: 65px;
    }

    .sa-section-heading h2,
    .sa-intro h2 {
        font-size: 32px;
    }

    .sa-ecosystem {
        padding: 65px 0;
    }

    .sa-ecosystem-grid {
        width: calc(100% - 30px);
    }

    .sa-flow-section,
    .sa-benefits {
        padding: 65px 0;
    }

    .sa-flow-step {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }

    .sa-cta {
        padding: 55px 25px;
        border-radius: 22px;
    }

}

/* =========================================================
   COUNTERFEIT PROTECTION
   ========================================================= */

.cp-body {
    background: #ffffff;
    color: #172033;
    padding: 90px 0;
    font-family: inherit;
}

.cp-container {
    width: min(1180px, 92%);
    margin: 0 auto;
}


/* INTRO
--------------------------------------------------------- */

.cp-intro {
    max-width: 850px;
    margin: 25px auto 65px;
    text-align: center;
}

.cp-label {
    display: inline-flex;
    align-items: center;
    padding: 8px 15px;
    border-radius: 50px;
    background: rgba(18, 100, 216, 0.08);
    color: #1264d8;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.2px;
    margin-bottom: 18px;
}

.cp-intro h2,
.cp-section-heading h2,
.cp-content h2 {
    margin: 0 0 20px;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -1.2px;
}

.cp-intro h2 span,
.cp-section-heading h2 span,
.cp-content h2 span,
.cp-cta h2 span {
    color: #1264d8;
}

.cp-intro > p,
.cp-section-heading > p,
.cp-content > p {
    color: #68758a;
    font-size: 17px;
    line-height: 1.8;
    margin: 0;
}


/* HIGHLIGHTS
--------------------------------------------------------- */

.cp-highlights {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 90px;
}

.cp-highlight-card {
    padding: 28px 24px;
    border: 1px solid #e5ebf4;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(17, 53, 99, 0.07);
    transition: all .3s ease;
}

.cp-highlight-card:hover {
    transform: translateY(-6px);
    border-color: rgba(18, 100, 216, .25);
    box-shadow: 0 18px 45px rgba(18, 100, 216, .12);
}

.cp-highlight-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(
        135deg,
        rgba(18, 100, 216, .12),
        rgba(88, 181, 43, .12)
    );
    color: #1264d8;
    margin-bottom: 20px;
}

.cp-highlight-icon i {
    font-size: 21px;
}

.cp-highlight-card h3 {
    margin: 0 0 10px;
    font-size: 19px;
}

.cp-highlight-card p {
    margin: 0;
    color: #718096;
    line-height: 1.65;
    font-size: 14px;
}


/* COMMON SECTION
--------------------------------------------------------- */

.cp-section {
    padding: 90px 0;
}

.cp-light-section {
    padding: 90px 50px;
    background: #f7faff;
    border-radius: 28px;
    margin: 20px 0;
}

.cp-section-heading {
    max-width: 850px;
    margin: 0 auto 55px;
    text-align: center;
}

.cp-section-heading h2 {
    margin-bottom: 18px;
}


/* TWO COLUMN
--------------------------------------------------------- */

.cp-two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 75px;
}

.cp-content .cp-label {
    margin-bottom: 18px;
}


/* QR VISUAL
--------------------------------------------------------- */

.cp-visual {
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 28px;
    background:
        radial-gradient(circle at 20% 20%,
        rgba(18, 100, 216, .18),
        transparent 35%),
        radial-gradient(circle at 80% 80%,
        rgba(88, 181, 43, .18),
        transparent 35%),
        #f4f8ff;
}

.cp-qr-card {
    width: 285px;
    padding: 25px;
    background: #fff;
    border: 1px solid #e3eaf4;
    border-radius: 22px;
    box-shadow: 0 25px 60px rgba(15, 50, 100, .16);
}

.cp-qr-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #1264d8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.cp-qr-top i {
    font-size: 20px;
}

.cp-qr-code {
    height: 170px;
    margin: 25px 0 18px;
    border: 1px dashed #cbd7e8;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9fbff;
}

.cp-qr-code i {
    font-size: 125px;
    color: #172033;
}

.cp-verified {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    padding: 10px;
    border-radius: 10px;
    background: rgba(88, 181, 43, .10);
    color: #4b9d27;
    font-size: 13px;
    font-weight: 700;
}

.cp-product-info {
    display: flex;
    justify-content: space-between;
    margin-top: 18px;
    font-size: 11px;
}

.cp-product-info span {
    color: #8a96a8;
}

.cp-product-info strong {
    color: #26354a;
}


/* FEATURE LIST
--------------------------------------------------------- */

.cp-feature-list {
    margin-top: 30px;
}

.cp-feature-item {
    display: flex;
    gap: 15px;
    margin-bottom: 22px;
}

.cp-feature-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1264d8;
    color: #fff;
}

.cp-feature-icon i {
    font-size: 14px;
}

.cp-feature-item strong {
    display: block;
    margin-bottom: 5px;
    font-size: 17px;
}

.cp-feature-item p {
    margin: 0;
    color: #718096;
    line-height: 1.6;
    font-size: 14px;
}


/* PRODUCT FLOW
--------------------------------------------------------- */

.cp-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.cp-flow-item {
    width: 150px;
    text-align: center;
}

.cp-flow-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: #fff;
    color: #1264d8;
    border: 1px solid #dfe8f5;
    box-shadow: 0 10px 25px rgba(18, 100, 216, .08);
}

.cp-flow-icon i {
    font-size: 23px;
}

.cp-flow-item strong {
    display: block;
    font-size: 15px;
    margin-bottom: 5px;
}

.cp-flow-item small {
    color: #7b8798;
    font-size: 11px;
    line-height: 1.4;
}

.cp-flow-line {
    width: 45px;
    height: 2px;
    background: linear-gradient(
        90deg,
        #1264d8,
        #58b52b
    );
}


/* MANUFACTURING WORKFLOW
--------------------------------------------------------- */

.cp-workflow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.cp-workflow-step {
    position: relative;
    padding: 30px 25px;
    border: 1px solid #e2e9f3;
    border-radius: 20px;
    background: #fff;
    text-align: center;
    transition: all .3s ease;
}

.cp-workflow-step:hover,
.cp-workflow-step.active {
    transform: translateY(-5px);
    border-color: rgba(18, 100, 216, .3);
    box-shadow: 0 18px 45px rgba(18, 100, 216, .10);
}

.cp-workflow-number {
    position: absolute;
    top: 15px;
    right: 18px;
    color: #c8d2e0;
    font-size: 12px;
    font-weight: 800;
}

.cp-workflow-icon {
    width: 65px;
    height: 65px;
    margin: 10px auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1264d8, #58b52b);
    color: #fff;
}

.cp-workflow-icon i {
    font-size: 23px;
}

.cp-workflow-step h3 {
    margin: 0 0 10px;
    font-size: 18px;
}

.cp-workflow-step p {
    margin: 0;
    color: #758195;
    font-size: 13px;
    line-height: 1.6;
}


/* DASHBOARD
--------------------------------------------------------- */

.cp-dashboard-section {
    background: #f7faff;
    border-radius: 28px;
    padding: 90px 50px;
}

.cp-dashboard {
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(18, 52, 90, .08);
}

.cp-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 28px;
    border-bottom: 1px solid #e7edf5;
}

.cp-dashboard-header span {
    display: block;
    color: #8a96a8;
    font-size: 11px;
    margin-bottom: 4px;
}

.cp-dashboard-header strong {
    font-size: 17px;
}

.cp-live {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #4d9f2b;
    font-size: 11px;
    font-weight: 800;
}

.cp-live span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #58b52b;
}

.cp-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.cp-dashboard-card {
    padding: 28px;
    border-right: 1px solid #e7edf5;
}

.cp-dashboard-card:last-child {
    border-right: 0;
}

.cp-dashboard-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(18, 100, 216, .08);
    color: #1264d8;
    margin-bottom: 20px;
}

.cp-dashboard-card > span {
    display: block;
    color: #657287;
    font-size: 13px;
    margin-bottom: 8px;
}

.cp-dashboard-card > strong {
    display: block;
    font-size: 28px;
    margin-bottom: 5px;
}

.cp-dashboard-card > small {
    color: #8b96a7;
    font-size: 11px;
}


/* LOCATION MISMATCH
--------------------------------------------------------- */

.cp-alert-box {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px;
    margin-top: 28px;
    border-radius: 14px;
    background: rgba(18, 100, 216, .07);
    color: #1264d8;
}

.cp-alert-box > i {
    font-size: 23px;
}

.cp-alert-box strong,
.cp-alert-box span {
    display: block;
}

.cp-alert-box strong {
    margin-bottom: 4px;
}

.cp-alert-box span {
    color: #69778b;
    font-size: 13px;
}

.cp-location-visual {
    padding: 35px;
    border-radius: 25px;
    background: #f7faff;
}

.cp-location-card {
    padding: 28px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(18, 52, 90, .10);
}

.cp-location-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 1px solid #edf1f6;
}

.cp-location-top span {
    color: #1264d8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
}

.cp-location-top i {
    font-size: 22px;
    color: #1264d8;
}

.cp-location-route {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 15px;
    padding: 35px 0;
}

.cp-location-point {
    padding: 18px;
    border-radius: 13px;
    background: #f5f9ff;
}

.cp-location-point.mismatch {
    background: rgba(88, 181, 43, .08);
}

.cp-dot {
    width: 10px;
    height: 10px;
    display: block;
    margin-bottom: 10px;
    border-radius: 50%;
    background: #1264d8;
}

.cp-location-point.mismatch .cp-dot {
    background: #58b52b;
}

.cp-location-point strong,
.cp-location-point small {
    display: block;
}

.cp-location-point strong {
    font-size: 14px;
}

.cp-location-point small {
    color: #7b8798;
    margin-top: 4px;
    font-size: 11px;
}

.cp-route-line {
    color: #1264d8;
}

.cp-location-warning {
    padding: 13px;
    text-align: center;
    border-radius: 10px;
    background: rgba(18, 100, 216, .07);
    color: #1264d8;
    font-size: 12px;
    font-weight: 700;
}


/* STAKEHOLDER
--------------------------------------------------------- */

.cp-stakeholder-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.cp-stakeholder-card {
    padding: 32px;
    background: #fff;
    border: 1px solid #e3eaf3;
    border-radius: 20px;
    transition: all .3s ease;
}

.cp-stakeholder-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 45px rgba(18, 100, 216, .10);
}

.cp-stakeholder-icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 15px;
    background: linear-gradient(135deg, #1264d8, #58b52b);
    color: #fff;
}

.cp-stakeholder-icon i {
    font-size: 21px;
}

.cp-stakeholder-card h3 {
    margin: 0 0 10px;
    font-size: 19px;
}

.cp-stakeholder-card p {
    margin: 0;
    color: #718096;
    line-height: 1.7;
    font-size: 14px;
}


/* IMPACT
--------------------------------------------------------- */

.cp-impact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.cp-impact-card {
    padding: 25px;
    display: grid;
    grid-template-columns: 50px 1fr;
    column-gap: 18px;
    align-items: center;
    border: 1px solid #e2e9f3;
    border-radius: 17px;
    transition: all .3s ease;
}

.cp-impact-card:hover {
    transform: translateY(-3px);
    border-color: rgba(18, 100, 216, .25);
    box-shadow: 0 15px 35px rgba(18, 100, 216, .08);
}

.cp-impact-card > i {
    grid-row: span 2;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, #1264d8, #58b52b);
    color: #fff;
}

.cp-impact-card h3 {
    margin: 0 0 5px;
    font-size: 17px;
}

.cp-impact-card p {
    margin: 0;
    color: #778397;
    font-size: 13px;
    line-height: 1.5;
}


/* CTA
--------------------------------------------------------- */

.cp-cta {
    position: relative;
    overflow: hidden;
    margin-top: 30px;
    padding: 75px 50px;
    text-align: center;
    border-radius: 28px;
    background: linear-gradient(
        135deg,
        #1264d8,
        #0d57bd 55%,
        #58b52b
    );
}

.cp-cta::before,
.cp-cta::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.15);
}

.cp-cta::before {
    width: 300px;
    height: 300px;
    top: -170px;
    left: -100px;
}

.cp-cta::after {
    width: 400px;
    height: 400px;
    right: -180px;
    bottom: -250px;
}

.cp-cta-content {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: auto;
}

.cp-cta .cp-label {
    background: rgba(255,255,255,.14);
    color: #fff;
}

.cp-cta h2 {
    margin: 0 0 18px;
    color: #fff;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.15;
}

.cp-cta h2 span {
    color: #fff;
}

.cp-cta p {
    margin: 0 auto 30px;
    max-width: 650px;
    color: rgba(255,255,255,.86);
    line-height: 1.8;
    font-size: 16px;
}

.cp-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.cp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 24px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: all .25s ease;
}

.cp-btn-primary {
    background: #fff;
    color: #1264d8;
}

.cp-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,0,0,.15);
}

.cp-btn-outline {
    border: 1px solid rgba(255,255,255,.55);
    color: #fff;
}

.cp-btn-outline:hover {
    background: rgba(255,255,255,.12);
}


/* RESPONSIVE
--------------------------------------------------------- */

@media (max-width: 1000px) {

    .cp-highlights {
        grid-template-columns: repeat(2, 1fr);
    }

    .cp-two-column {
        gap: 45px;
    }

    .cp-workflow {
        grid-template-columns: repeat(2, 1fr);
    }

    .cp-dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cp-dashboard-card:nth-child(2) {
        border-right: 0;
    }

    .cp-dashboard-card:nth-child(-n+2) {
        border-bottom: 1px solid #e7edf5;
    }

}


@media (max-width: 760px) {

    .cp-body {
        padding: 60px 0;
    }

    .cp-section,
    .cp-light-section,
    .cp-dashboard-section {
        padding: 60px 20px;
    }

    .cp-intro {
        margin-bottom: 45px;
    }

    .cp-highlights {
        grid-template-columns: 1fr;
        margin-bottom: 50px;
    }

    .cp-two-column {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .cp-visual {
        min-height: 350px;
    }

    .cp-flow {
        flex-direction: column;
    }

    .cp-flow-line {
        width: 2px;
        height: 30px;
    }

    .cp-flow-item {
        width: 100%;
    }

    .cp-workflow {
        grid-template-columns: 1fr;
    }

    .cp-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .cp-dashboard-card {
        border-right: 0;
        border-bottom: 1px solid #e7edf5;
    }

    .cp-dashboard-card:last-child {
        border-bottom: 0;
    }

    .cp-stakeholder-grid {
        grid-template-columns: 1fr;
    }

    .cp-impact-grid {
        grid-template-columns: 1fr;
    }

    .cp-location-route {
        grid-template-columns: 1fr;
    }

    .cp-route-line {
        text-align: center;
        transform: rotate(90deg);
    }

    .cp-cta {
        padding: 55px 25px;
    }

}


@media (max-width: 480px) {

    .cp-intro h2,
    .cp-section-heading h2,
    .cp-content h2 {
        font-size: 31px;
    }

    .cp-qr-card {
        width: 245px;
    }

    .cp-qr-code {
        height: 145px;
    }

    .cp-qr-code i {
        font-size: 105px;
    }

    .cp-dashboard-header {
        padding: 18px;
    }

    .cp-dashboard-card {
        padding: 22px;
    }

    .cp-cta-buttons {
        flex-direction: column;
    }

    .cp-btn {
        width: 100%;
    }

}

/* =========================================================
   LIVE MANUFACTURING TRACKING
   ========================================================= */

.lmt-body {
    background: #ffffff;
    color: #172033;
    padding: 90px 0;
    font-family: inherit;
}

.lmt-container {
    width: min(1180px, 92%);
    margin: 0 auto;
}


/* INTRO
--------------------------------------------------------- */

.lmt-intro {
    max-width: 850px;
    margin: 25px auto 65px;
    text-align: center;
}

.lmt-label {
    display: inline-flex;
    align-items: center;
    padding: 8px 15px;
    border-radius: 50px;
    background: rgba(18, 100, 216, .08);
    color: #1264d8;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.2px;
    margin-bottom: 18px;
}

.lmt-intro h2,
.lmt-section-heading h2,
.lmt-content h2 {
    margin: 0 0 20px;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -1.2px;
}

.lmt-intro h2 span,
.lmt-section-heading h2 span,
.lmt-content h2 span,
.lmt-cta h2 span {
    color: #1264d8;
}

.lmt-intro > p,
.lmt-section-heading > p,
.lmt-content > p {
    color: #68758a;
    font-size: 17px;
    line-height: 1.8;
    margin: 0;
}


/* HIGHLIGHTS
--------------------------------------------------------- */

.lmt-highlights {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 80px;
}

.lmt-highlight-card {
    padding: 28px 24px;
    border: 1px solid #e4eaf3;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(17, 53, 99, .07);
    transition: all .3s ease;
}

.lmt-highlight-card:hover {
    transform: translateY(-6px);
    border-color: rgba(18, 100, 216, .25);
    box-shadow: 0 18px 45px rgba(18, 100, 216, .12);
}

.lmt-highlight-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 14px;
    background: linear-gradient(
        135deg,
        rgba(18, 100, 216, .12),
        rgba(88, 181, 43, .12)
    );
    color: #1264d8;
}

.lmt-highlight-icon i {
    font-size: 21px;
}

.lmt-highlight-card h3 {
    margin: 0 0 10px;
    font-size: 19px;
}

.lmt-highlight-card p {
    margin: 0;
    color: #718096;
    font-size: 14px;
    line-height: 1.65;
}


/* COMMON SECTION
--------------------------------------------------------- */

.lmt-section {
    padding: 90px 0;
}

.lmt-light-section,
.lmt-dashboard-section {
    padding: 90px 50px;
    background: #f7faff;
    border-radius: 28px;
    margin: 20px 0;
}

.lmt-section-heading {
    max-width: 850px;
    margin: 0 auto 55px;
    text-align: center;
}


/* TWO COLUMN
--------------------------------------------------------- */

.lmt-two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 75px;
}


/* PRODUCTION VISUAL
--------------------------------------------------------- */

.lmt-visual {
    padding: 35px;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 28px;
    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(18, 100, 216, .16),
            transparent 35%
        ),
        radial-gradient(
            circle at 80% 80%,
            rgba(88, 181, 43, .16),
            transparent 35%
        ),
        #f5f9ff;
}

.lmt-production-card {
    width: 100%;
    max-width: 450px;
    padding: 25px;
    border: 1px solid #e1e8f2;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 25px 60px rgba(15, 50, 100, .14);
}

.lmt-production-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 1px solid #edf1f6;
}

.lmt-production-header span {
    display: block;
    margin-bottom: 5px;
    color: #8a96a8;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

.lmt-production-header strong {
    font-size: 16px;
}

.lmt-live-status {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #58b52b;
    font-size: 10px;
    font-weight: 800;
}

.lmt-live-status span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #58b52b;
}

.lmt-production-product {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 25px 0;
}

.lmt-product-qr {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #ccd8e8;
    border-radius: 12px;
    background: #f8faff;
}

.lmt-product-qr i {
    font-size: 45px;
}

.lmt-product-details span,
.lmt-product-details small {
    display: block;
    color: #8792a4;
    font-size: 11px;
}

.lmt-product-details strong {
    display: block;
    margin: 5px 0;
    color: #172033;
    font-size: 16px;
}

.lmt-progress-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 9px;
    color: #66748a;
    font-size: 11px;
}

.lmt-progress-top strong {
    color: #1264d8;
}

.lmt-progress-bar {
    height: 7px;
    overflow: hidden;
    border-radius: 20px;
    background: #e8eef6;
}

.lmt-progress-bar span {
    display: block;
    width: 76%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1264d8, #58b52b);
}

.lmt-status-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    margin-top: 25px;
}

.lmt-status-row > div {
    color: #a0a9b7;
    font-size: 9px;
    text-align: center;
}

.lmt-status-row i {
    display: block;
    margin-bottom: 5px;
    font-size: 16px;
}

.lmt-status-row .completed {
    color: #58b52b;
}

.lmt-status-row .active {
    color: #1264d8;
}


/* FEATURE LIST
--------------------------------------------------------- */

.lmt-feature-list {
    margin-top: 30px;
}

.lmt-feature-item {
    display: flex;
    gap: 15px;
    margin-bottom: 22px;
}

.lmt-feature-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #1264d8;
    color: #fff;
}

.lmt-feature-item strong {
    display: block;
    margin-bottom: 5px;
    font-size: 17px;
}

.lmt-feature-item p {
    margin: 0;
    color: #718096;
    font-size: 14px;
    line-height: 1.6;
}


/* CORE FEATURES
--------------------------------------------------------- */

.lmt-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.lmt-feature-card {
    padding: 25px;
    border: 1px solid #e3eaf3;
    border-radius: 18px;
    background: #fff;
    transition: all .3s ease;
}

.lmt-feature-card:hover {
    transform: translateY(-5px);
    border-color: rgba(18, 100, 216, .25);
    box-shadow: 0 15px 35px rgba(18, 100, 216, .09);
}

.lmt-card-icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 12px;
    background: rgba(18, 100, 216, .08);
    color: #1264d8;
}

.lmt-feature-card h3 {
    margin: 0 0 8px;
    font-size: 17px;
}

.lmt-feature-card p {
    margin: 0;
    color: #748196;
    font-size: 13px;
    line-height: 1.65;
}


/* WORKFLOW
--------------------------------------------------------- */

.lmt-workflow {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}

.lmt-workflow-step {
    position: relative;
    min-height: 245px;
    padding: 28px 20px;
    text-align: center;
    border: 1px solid #e1e8f2;
    border-radius: 20px;
    background: #fff;
    transition: all .3s ease;
}

.lmt-workflow-step:hover,
.lmt-workflow-step.active {
    transform: translateY(-5px);
    border-color: rgba(18, 100, 216, .3);
    box-shadow: 0 18px 40px rgba(18, 100, 216, .10);
}

.lmt-step-number {
    position: absolute;
    top: 15px;
    right: 17px;
    color: #c8d2e0;
    font-size: 11px;
    font-weight: 800;
}

.lmt-step-icon {
    width: 65px;
    height: 65px;
    margin: 15px auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #1264d8, #58b52b);
    color: #fff;
}

.lmt-step-icon i {
    font-size: 22px;
}

.lmt-workflow-step h3 {
    margin: 0 0 8px;
    font-size: 17px;
}

.lmt-workflow-step p {
    margin: 0;
    color: #758195;
    font-size: 12px;
    line-height: 1.6;
}

.lmt-workflow-connector {
    color: #1264d8;
}


/* DASHBOARD
--------------------------------------------------------- */

.lmt-dashboard {
    overflow: hidden;
    border: 1px solid #dfe7f2;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 20px 50px rgba(18, 52, 90, .08);
}

.lmt-dashboard-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 28px;
    border-bottom: 1px solid #e6ecf4;
}

.lmt-dashboard-title {
    display: flex;
    align-items: center;
    gap: 13px;
}

.lmt-dashboard-logo {
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(18, 100, 216, .09);
    color: #1264d8;
}

.lmt-dashboard-title span {
    display: block;
    margin-bottom: 4px;
    color: #8b96a8;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

.lmt-dashboard-title strong {
    font-size: 16px;
}

.lmt-dashboard-live {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #58b52b;
    font-size: 10px;
    font-weight: 800;
}

.lmt-dashboard-live span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #58b52b;
}

.lmt-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.lmt-stat {
    padding: 28px;
    border-right: 1px solid #e6ecf4;
}

.lmt-stat:last-child {
    border-right: 0;
}

.lmt-stat-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 17px;
    border-radius: 11px;
    background: rgba(18, 100, 216, .08);
    color: #1264d8;
}

.lmt-stat > span {
    display: block;
    margin-bottom: 7px;
    color: #68758a;
    font-size: 12px;
}

.lmt-stat > strong {
    display: block;
    margin-bottom: 5px;
    font-size: 27px;
}

.lmt-stat > small {
    color: #8b96a7;
    font-size: 10px;
}

.lmt-dashboard-bars {
    padding: 25px 28px;
    border-top: 1px solid #e6ecf4;
}

.lmt-bar-row {
    margin-bottom: 18px;
}

.lmt-bar-row:last-child {
    margin-bottom: 0;
}

.lmt-bar-row > div:first-child {
    display: flex;
    justify-content: space-between;
    margin-bottom: 7px;
    color: #657287;
    font-size: 11px;
}

.lmt-bar-row strong {
    color: #1264d8;
}

.lmt-bar {
    height: 7px;
    overflow: hidden;
    border-radius: 20px;
    background: #e9eef6;
}

.lmt-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1264d8, #58b52b);
}


/* CHECK LIST
--------------------------------------------------------- */

.lmt-check-list {
    margin-top: 30px;
}

.lmt-check-list > div {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 15px;
    color: #46536a;
    font-size: 14px;
}

.lmt-check-list i {
    color: #58b52b;
}


/* TIMELINE
--------------------------------------------------------- */

.lmt-timeline {
    padding: 30px;
    border-radius: 22px;
    background: #f7faff;
    border: 1px solid #e2e9f3;
}

.lmt-timeline-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.lmt-timeline-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #e7edf5;
    color: #8b96a7;
}

.lmt-timeline-item.completed .lmt-timeline-icon {
    background: rgba(88, 181, 43, .12);
    color: #58b52b;
}

.lmt-timeline-item.current .lmt-timeline-icon {
    background: rgba(18, 100, 216, .10);
    color: #1264d8;
}

.lmt-timeline-item strong,
.lmt-timeline-item span {
    display: block;
}

.lmt-timeline-item strong {
    margin-bottom: 4px;
    font-size: 14px;
}

.lmt-timeline-item span {
    color: #8290a2;
    font-size: 11px;
}

.lmt-timeline-line {
    width: 2px;
    height: 35px;
    margin-left: 23px;
    background: #dce4ef;
}


/* BENEFITS
--------------------------------------------------------- */

.lmt-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.lmt-benefit {
    padding: 28px;
    border: 1px solid #e2e9f3;
    border-radius: 18px;
    background: #fff;
    transition: all .3s ease;
}

.lmt-benefit:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(18, 100, 216, .09);
}

.lmt-benefit > i {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 17px;
    border-radius: 13px;
    background: linear-gradient(135deg, #1264d8, #58b52b);
    color: #fff;
}

.lmt-benefit h3 {
    margin: 0 0 8px;
    font-size: 17px;
}

.lmt-benefit p {
    margin: 0;
    color: #748196;
    font-size: 13px;
    line-height: 1.65;
}


/* CTA
--------------------------------------------------------- */

.lmt-cta {
    position: relative;
    overflow: hidden;
    margin-top: 30px;
    padding: 75px 50px;
    text-align: center;
    border-radius: 28px;
    background: linear-gradient(
        135deg,
        #1264d8,
        #0d57bd 55%,
        #58b52b
    );
}

.lmt-cta::before,
.lmt-cta::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 50%;
}

.lmt-cta::before {
    width: 300px;
    height: 300px;
    top: -170px;
    left: -100px;
}

.lmt-cta::after {
    width: 400px;
    height: 400px;
    right: -180px;
    bottom: -250px;
}

.lmt-cta-content {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: auto;
}

.lmt-cta .lmt-label {
    background: rgba(255,255,255,.14);
    color: #fff;
}

.lmt-cta h2 {
    margin: 0 0 18px;
    color: #fff;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.15;
}

.lmt-cta h2 span {
    color: #fff;
}

.lmt-cta p {
    max-width: 650px;
    margin: 0 auto 30px;
    color: rgba(255,255,255,.86);
    font-size: 16px;
    line-height: 1.8;
}

.lmt-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.lmt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 24px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: all .25s ease;
}

.lmt-btn-primary {
    background: #fff;
    color: #1264d8;
}

.lmt-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,0,0,.15);
}

.lmt-btn-outline {
    border: 1px solid rgba(255,255,255,.55);
    color: #fff;
}

.lmt-btn-outline:hover {
    background: rgba(255,255,255,.12);
}


/* RESPONSIVE
--------------------------------------------------------- */

@media (max-width: 1050px) {

    .lmt-highlights {
        grid-template-columns: repeat(2, 1fr);
    }

    .lmt-feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .lmt-workflow {
        grid-template-columns: repeat(2, 1fr);
    }

    .lmt-workflow-connector {
        display: none;
    }

    .lmt-dashboard-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .lmt-stat:nth-child(2) {
        border-right: 0;
    }

    .lmt-stat:nth-child(-n+2) {
        border-bottom: 1px solid #e6ecf4;
    }

}


@media (max-width: 800px) {

    .lmt-two-column {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .lmt-benefits {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 650px) {

    .lmt-body {
        padding: 60px 0;
    }

    .lmt-section,
    .lmt-light-section,
    .lmt-dashboard-section {
        padding: 60px 20px;
    }

    .lmt-intro {
        margin-bottom: 45px;
    }

    .lmt-highlights {
        grid-template-columns: 1fr;
    }

    .lmt-feature-grid {
        grid-template-columns: 1fr;
    }

    .lmt-workflow {
        grid-template-columns: 1fr;
    }

    .lmt-dashboard-stats {
        grid-template-columns: 1fr;
    }

    .lmt-stat {
        border-right: 0;
        border-bottom: 1px solid #e6ecf4;
    }

    .lmt-stat:last-child {
        border-bottom: 0;
    }

    .lmt-benefits {
        grid-template-columns: 1fr;
    }

    .lmt-dashboard-top {
        align-items: flex-start;
        gap: 15px;
        flex-direction: column;
    }

    .lmt-visual {
        min-height: 350px;
        padding: 20px;
    }

    .lmt-production-card {
        padding: 20px;
    }

    .lmt-cta {
        padding: 55px 25px;
    }

}


@media (max-width: 480px) {

    .lmt-intro h2,
    .lmt-section-heading h2,
    .lmt-content h2 {
        font-size: 31px;
    }

    .lmt-status-row {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 15px;
    }

    .lmt-production-product {
        gap: 12px;
    }

    .lmt-product-qr {
        width: 60px;
        height: 60px;
    }

    .lmt-product-qr i {
        font-size: 36px;
    }

    .lmt-dashboard-bars {
        padding: 22px 18px;
    }

    .lmt-cta-buttons {
        flex-direction: column;
    }

    .lmt-btn {
        width: 100%;
    }

}

/* =========================================================
   INDUSTRIES PAGE
   ========================================================= */

.industries-body {
    background: #ffffff;
    color: #172033;
    padding: 90px 0;
}

.industries-container {
    width: min(1180px, 92%);
    margin: 0 auto;
}


/* INTRO
--------------------------------------------------------- */

.industries-intro {
    max-width: 850px;
    margin: 25px auto 65px;
    text-align: center;
}

.industries-label {
    display: inline-flex;
    align-items: center;
    padding: 8px 15px;
    margin-bottom: 18px;
    border-radius: 50px;
    background: rgba(18, 100, 216, .08);
    color: #1264d8;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.industries-intro h2 {
    margin: 0 0 20px;
    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.12;
    letter-spacing: -1.4px;
    font-weight: 800;
}

.industries-intro h2 span,
.industries-approach h2 span {
    color: #1264d8;
}

.industries-intro > p {
    margin: 0;
    color: #6c788b;
    font-size: 17px;
    line-height: 1.8;
}


/* INDUSTRY GRID
--------------------------------------------------------- */

.industries-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}


/* INDUSTRY CARD
--------------------------------------------------------- */

.industry-card {
    position: relative;
    overflow: hidden;
    padding: 28px 24px;
    min-height: 330px;
    border: 1px solid #e2e9f3;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 10px 35px rgba(15, 52, 100, .06);
    transition: all .3s ease;
}

.industry-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(
        90deg,
        #1264d8,
        #58b52b
    );
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}

.industry-card:hover {
    transform: translateY(-7px);
    border-color: rgba(18, 100, 216, .25);
    box-shadow: 0 20px 45px rgba(18, 100, 216, .12);
}

.industry-card:hover::before {
    transform: scaleX(1);
}


/* ICON
--------------------------------------------------------- */

.industry-icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    border-radius: 15px;
    background: linear-gradient(
        135deg,
        rgba(18, 100, 216, .10),
        rgba(88, 181, 43, .12)
    );
    color: #1264d8;
    transition: all .3s ease;
}

.industry-icon i {
    font-size: 22px;
}

.industry-card:hover .industry-icon {
    background: linear-gradient(
        135deg,
        #1264d8,
        #58b52b
    );
    color: #ffffff;
    transform: translateY(-2px);
}


/* NUMBER
--------------------------------------------------------- */

.industry-number {
    position: absolute;
    top: 23px;
    right: 22px;
    color: #dce4ef;
    font-size: 25px;
    font-weight: 800;
}


/* CONTENT
--------------------------------------------------------- */

.industry-card h3 {
    margin: 0 0 11px;
    padding-right: 25px;
    font-size: 19px;
    line-height: 1.3;
}

.industry-card > p {
    margin: 0 0 18px;
    color: #718096;
    font-size: 13px;
    line-height: 1.7;
}


/* TAGS
--------------------------------------------------------- */

.industry-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 22px;
}

.industry-tags span {
    padding: 5px 8px;
    border-radius: 5px;
    background: #f3f7fc;
    color: #68768a;
    font-size: 9px;
    font-weight: 700;
}


/* LINK
--------------------------------------------------------- */

.industry-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1264d8;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    transition: all .25s ease;
}

.industry-link i {
    font-size: 10px;
    transition: transform .25s ease;
}

.industry-link:hover {
    color: #58b52b;
}

.industry-link:hover i {
    transform: translateX(4px);
}


/* INDUSTRY APPROACH
--------------------------------------------------------- */

.industries-approach {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;
    margin: 100px 0;
    padding: 70px 65px;
    border-radius: 30px;
    background: #f7faff;
}

.industries-approach-content h2 {
    margin: 0 0 20px;
    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.15;
    letter-spacing: -1px;
}

.industries-approach-content > p {
    margin: 0;
    color: #6e7b8e;
    font-size: 16px;
    line-height: 1.8;
}


/* POINTS
--------------------------------------------------------- */

.industries-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 30px;
}

.industries-points > div {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #425067;
    font-size: 13px;
    font-weight: 600;
}

.industries-points i {
    color: #58b52b;
}


/* VISUAL
--------------------------------------------------------- */

.industries-approach-visual {
    position: relative;
    width: 400px;
    height: 400px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ORBITS */

.industry-orbit {
    position: absolute;
    border: 1px dashed rgba(18, 100, 216, .22);
    border-radius: 50%;
}

.orbit-one {
    width: 270px;
    height: 270px;
}

.orbit-two {
    width: 390px;
    height: 390px;
    border-color: rgba(88, 181, 43, .18);
}


/* CENTER */

.industry-center {
    position: relative;
    z-index: 3;
    width: 145px;
    height: 145px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        #1264d8,
        #58b52b
    );
    color: #ffffff;
    box-shadow: 0 20px 45px rgba(18, 100, 216, .25);
    text-align: center;
}

.industry-center i {
    margin-bottom: 10px;
    font-size: 27px;
}

.industry-center strong {
    font-size: 15px;
    line-height: 1.3;
}

.industry-center span {
    display: block;
}


/* NODES */

.industry-node {
    position: absolute;
    z-index: 4;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 5px solid #f7faff;
    border-radius: 50%;
    background: #ffffff;
    color: #1264d8;
    box-shadow: 0 10px 25px rgba(18, 100, 216, .15);
}

.industry-node i {
    font-size: 18px;
}

.node-one {
    top: 15px;
    left: 173px;
}

.node-two {
    right: 15px;
    top: 173px;
}

.node-three {
    bottom: 15px;
    left: 173px;
}

.node-four {
    left: 15px;
    top: 173px;
}


/* CTA
--------------------------------------------------------- */

.industries-cta {
    position: relative;
    overflow: hidden;
    padding: 75px 50px;
    border-radius: 30px;
    text-align: center;
    background: linear-gradient(
        135deg,
        #1264d8,
        #0d58be 55%,
        #58b52b
    );
}

.industries-cta::before,
.industries-cta::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 50%;
}

.industries-cta::before {
    width: 320px;
    height: 320px;
    top: -190px;
    left: -100px;
}

.industries-cta::after {
    width: 420px;
    height: 420px;
    right: -190px;
    bottom: -270px;
}

.industries-cta-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: auto;
}

.industries-cta .industries-label {
    background: rgba(255,255,255,.14);
    color: #ffffff;
}

.industries-cta h2 {
    margin: 0 0 18px;
    color: #ffffff;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.15;
}

.industries-cta h2 span {
    color: #ffffff;
}

.industries-cta p {
    max-width: 680px;
    margin: 0 auto 30px;
    color: rgba(255,255,255,.86);
    font-size: 16px;
    line-height: 1.8;
}


/* CTA BUTTONS
--------------------------------------------------------- */

.industries-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.industries-btn {
    min-height: 48px;
    padding: 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    transition: all .25s ease;
}

.industries-btn-primary {
    background: #ffffff;
    color: #1264d8;
}

.industries-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0,0,0,.15);
}

.industries-btn-outline {
    border: 1px solid rgba(255,255,255,.55);
    color: #ffffff;
}

.industries-btn-outline:hover {
    background: rgba(255,255,255,.12);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .industries-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .industries-approach {
        gap: 45px;
        padding: 55px 40px;
    }

}


@media (max-width: 850px) {

    .industries-approach {
        grid-template-columns: 1fr;
    }

    .industries-approach-visual {
        width: 350px;
        height: 350px;
    }

    .orbit-two {
        width: 340px;
        height: 340px;
    }

    .orbit-one {
        width: 240px;
        height: 240px;
    }

    .node-one {
        top: 5px;
        left: 148px;
    }

    .node-two {
        right: 5px;
        top: 148px;
    }

    .node-three {
        bottom: 5px;
        left: 148px;
    }

    .node-four {
        left: 5px;
        top: 148px;
    }

}


@media (max-width: 650px) {

    .industries-body {
        padding: 60px 0;
    }

    .industries-grid {
        grid-template-columns: 1fr;
    }

    .industry-card {
        min-height: auto;
    }

    .industries-approach {
        margin: 70px 0;
        padding: 45px 25px;
        border-radius: 24px;
    }

    .industries-points {
        grid-template-columns: 1fr;
    }

    .industries-approach-visual {
        width: 300px;
        height: 300px;
    }

    .orbit-two {
        width: 290px;
        height: 290px;
    }

    .orbit-one {
        width: 205px;
        height: 205px;
    }

    .industry-center {
        width: 115px;
        height: 115px;
    }

    .industry-center i {
        font-size: 22px;
    }

    .industry-center strong {
        font-size: 12px;
    }

    .industry-node {
        width: 47px;
        height: 47px;
    }

    .node-one {
        left: 126px;
    }

    .node-two {
        right: 3px;
        top: 126px;
    }

    .node-three {
        left: 126px;
    }

    .node-four {
        left: 3px;
        top: 126px;
    }

    .industries-cta {
        padding: 55px 25px;
        border-radius: 24px;
    }

    .industries-cta-buttons {
        flex-direction: column;
    }

    .industries-btn {
        width: 100%;
    }

}


@media (max-width: 400px) {

    .industries-approach-visual {
        transform: scale(.88);
        margin: -15px auto;
    }

}

/* =========================================================
   CONTACT US PAGE
   Synergia Solutions
========================================================= */

.contact-body {
    background: #ffffff;
    color: #172033;
}


/* Container */

.contact-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* =========================================================
   HERO
========================================================= */

.contact-hero {
    padding: 45px 0 70px;
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(88, 181, 43, 0.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 10% 80%,
            rgba(18, 100, 216, 0.08),
            transparent 35%
        ),
        #ffffff;
    border-bottom: 1px solid #edf1f6;
}

.contact-label,
.contact-section-label {
    color: #1264d8;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.8px;
    margin-bottom: 14px;
}

.contact-hero h1 {
    margin: 0;
    font-size: clamp(42px, 6vw, 68px);
    line-height: 1.05;
    letter-spacing: -2px;
    color: #101828;
}

.contact-hero h1 span {
    display: block;
    background: linear-gradient(
        135deg,
        #1264d8,
        #58b52b
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.contact-hero p {
    max-width: 720px;
    margin: 25px 0 0;
    font-size: 17px;
    line-height: 1.8;
    color: #667085;
}


/* =========================================================
   MAIN CONTACT AREA
========================================================= */

.contact-main {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 70px;
    padding-top: 80px;
    padding-bottom: 90px;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.contact-info h2 {
    margin: 0;
    font-size: 42px;
    line-height: 1.15;
    letter-spacing: -1.3px;
    color: #101828;
}

.contact-info h2 span {
    color: #1264d8;
}

.contact-intro {
    margin: 20px 0 35px;
    color: #667085;
    font-size: 16px;
    line-height: 1.8;
    max-width: 500px;
}


/* Contact Info Cards */

.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.contact-info-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 17px 18px;
    background: #ffffff;
    border: 1px solid #e8edf4;
    border-radius: 15px;
    transition: all 0.25s ease;
}

.contact-info-card:hover {
    transform: translateY(-3px);
    border-color: rgba(18, 100, 216, 0.25);
    box-shadow: 0 15px 35px rgba(18, 100, 216, 0.08);
}

.contact-info-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: rgba(18, 100, 216, 0.08);
    color: #1264d8;
    font-size: 17px;
}

.contact-info-card small {
    display: block;
    color: #98a2b3;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
}

.contact-info-card a {
    color: #172033;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
}

.contact-info-card a:hover {
    color: #1264d8;
}


/* =========================================================
   CONTACT REASONS
========================================================= */

.contact-reasons {
    margin-top: 42px;
}

.contact-reasons h3 {
    margin: 0 0 18px;
    font-size: 18px;
    color: #172033;
}

.reason-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.reason-tags span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: #f7f9fc;
    border: 1px solid #e8edf4;
    border-radius: 9px;
    color: #475467;
    font-size: 12px;
    font-weight: 600;
}

.reason-tags i {
    color: #1264d8;
}


/* =========================================================
   FORM CARD
========================================================= */

.contact-form-card {
    padding: 34px;
    background: #ffffff;
    border: 1px solid #e4eaf2;
    border-radius: 22px;
    box-shadow: 0 25px 70px rgba(16, 24, 40, 0.09);
}

.form-heading {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 25px;
    margin-bottom: 25px;
    border-bottom: 1px solid #edf0f4;
}

.form-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: linear-gradient(
        135deg,
        rgba(18, 100, 216, 0.12),
        rgba(88, 181, 43, 0.12)
    );
    color: #1264d8;
    font-size: 18px;
}

.form-heading h3 {
    margin: 0 0 4px;
    color: #101828;
    font-size: 22px;
}

.form-heading p {
    margin: 0;
    color: #98a2b3;
    font-size: 13px;
}


/* =========================================================
   FORM
========================================================= */

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 17px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #344054;
    font-size: 13px;
    font-weight: 700;
}

.form-group label span {
    color: #e12d39;
}


/* Input */

.input-box {
    position: relative;
}

.input-box > i:first-child {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #98a2b3;
    font-size: 14px;
    pointer-events: none;
}

.input-box input,
.input-box select,
.input-box textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d9e0e8;
    border-radius: 11px;
    background: #ffffff;
    color: #172033;
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: all 0.2s ease;
}

.input-box input,
.input-box select {
    height: 48px;
    padding: 0 15px 0 43px;
}

.input-box textarea {
    min-height: 130px;
    padding: 14px 15px 14px 43px;
    resize: vertical;
    line-height: 1.6;
}

.input-box input::placeholder,
.input-box textarea::placeholder {
    color: #a6afbb;
}

.input-box input:focus,
.input-box select:focus,
.input-box textarea:focus {
    border-color: #1264d8;
    box-shadow: 0 0 0 4px rgba(18, 100, 216, 0.08);
}


/* Select */

.select-box select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 45px;
}

.select-arrow {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #667085;
    font-size: 12px;
    pointer-events: none;
}


/* Textarea Icon */

.textarea-box > i:first-child {
    top: 18px;
    transform: none;
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.contact-submit {
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(
        135deg,
        #1264d8,
        #58b52b
    );
    color: #ffffff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.25s ease;
}

.contact-submit span {
    width: 27px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
}

.contact-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(18, 100, 216, 0.25);
}


/* Security Note */

.form-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 16px;
    color: #98a2b3;
    font-size: 11px;
    line-height: 1.5;
    text-align: center;
}

.form-note i {
    color: #58b52b;
}


/* =========================================================
   BOTTOM CTA
========================================================= */

.contact-bottom {
    padding: 0 0 90px;
}

.contact-bottom-box {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 45px 50px;
    border-radius: 22px;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(88, 181, 43, 0.22),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #1264d8,
            #174f9d
        );
}

.contact-bottom-box::after {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    right: -100px;
    bottom: -150px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
}

.contact-bottom-box .contact-section-label {
    color: rgba(255, 255, 255, 0.7);
}

.contact-bottom-box h2 {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #ffffff;
    font-size: 34px;
    line-height: 1.2;
    letter-spacing: -0.8px;
}

.contact-bottom-box h2 span {
    color: #a8df83;
}

.contact-bottom-box p {
    position: relative;
    z-index: 1;
    max-width: 620px;
    margin: 12px 0 0;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.7;
    font-size: 14px;
}

.contact-email-btn {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 21px;
    border-radius: 10px;
    background: #ffffff;
    color: #1264d8;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    transition: all 0.25s ease;
}

.contact-email-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.contact-email-btn i {
    font-size: 12px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 950px) {

    .contact-main {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .contact-info {
        max-width: 760px;
    }

    .contact-bottom-box {
        align-items: flex-start;
        flex-direction: column;
    }

}


@media (max-width: 650px) {

    .contact-container {
        width: min(100% - 28px, 1180px);
    }

    .contact-hero {
        padding: 45px 0 50px;
    }

    .contact-hero h1 {
        font-size: 43px;
        letter-spacing: -1.5px;
    }

    .contact-main {
        padding-top: 55px;
        padding-bottom: 65px;
    }

    .contact-info h2 {
        font-size: 34px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .contact-form-card {
        padding: 23px 18px;
        border-radius: 17px;
    }

    .form-heading h3 {
        font-size: 19px;
    }

    .contact-bottom {
        padding-bottom: 60px;
    }

    .contact-bottom-box {
        padding: 32px 25px;
        border-radius: 18px;
    }

    .contact-bottom-box h2 {
        font-size: 28px;
    }

    .contact-email-btn {
        width: 100%;
        justify-content: center;
    }

}

/* =========================================================
   CONTACT AJAX FORM
========================================================= */

.contact-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}


/* Response Message */

.contact-response {
    display: none;
    margin-top: 18px;
    padding: 13px 15px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
}

.contact-response.success {
    display: block;
    background: rgba(88, 181, 43, 0.10);
    border: 1px solid rgba(88, 181, 43, 0.25);
    color: #3d7f1f;
}

.contact-response.error {
    display: block;
    background: rgba(220, 53, 69, 0.08);
    border: 1px solid rgba(220, 53, 69, 0.20);
    color: #b42318;
}


/* Submit Button */

.contact-submit:disabled {
    opacity: 0.75;
    cursor: not-allowed;
    transform: none;
}

.submit-loader {
    align-items: center;
    gap: 8px;
}

.contact-submit.loading .submit-text,
.contact-submit.loading .submit-arrow {
    display: none;
}

.contact-submit.loading .submit-loader {
    display: inline-flex !important;
}

/* =========================================================
   SYNERGIA SOLUTIONS
   PORTFOLIO PAGE
========================================================= */

.portfolio-body {
    background: #ffffff;
    color: #25324a;
    overflow: hidden;
}

.portfolio-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* =========================================================
   HERO
========================================================= */

.portfolio-hero {
    position: relative;
    padding: 45px 0 85px;
    text-align: center;

    background:
        radial-gradient(
            circle at 15% 30%,
            rgba(88, 181, 43, .07),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 20%,
            rgba(18, 100, 216, .09),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #f7faff 0%,
            #ffffff 100%
        );
}

.portfolio-hero::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: 100px;
    height: 3px;
    transform: translateX(-50%);
    border-radius: 10px;

    background: linear-gradient(
        90deg,
        #1264d8,
        #58b52b
    );
}

.portfolio-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 17px;

    color: #1264d8;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.portfolio-eyebrow::before {
    content: "";
    width: 25px;
    height: 2px;

    border-radius: 10px;

    background: linear-gradient(
        90deg,
        #1264d8,
        #58b52b
    );
}

.portfolio-hero .portfolio-eyebrow {
    justify-content: center;
}

.portfolio-hero h1 {
    max-width: 900px;
    margin: 0 auto 20px;

    color: #25324a;
    font-size: clamp(38px, 5vw, 62px);
    line-height: 1.08;
    letter-spacing: -2.2px;
}

.portfolio-hero h1 span,
.portfolio-heading h2 span,
.portfolio-cta h2 span {
    background: linear-gradient(
        90deg,
        #1264d8,
        #58b52b
    );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.portfolio-hero p {
    max-width: 760px;
    margin: 0 auto;

    color: #68758c;
    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   PORTFOLIO LIST
========================================================= */

.portfolio-list {
    padding: 95px 0 100px;
    background: #f7faff;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.portfolio-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;

    margin-bottom: 48px;
}

.portfolio-heading h2 {
    margin: 0;

    color: #25324a;
    font-size: clamp(30px, 4vw, 45px);
    line-height: 1.12;
    letter-spacing: -1.4px;
}

.portfolio-heading > p {
    max-width: 440px;
    margin: 0;

    color: #69768d;
    font-size: 14px;
    line-height: 1.8;
}


/* =========================================================
   CLIENT GRID
========================================================= */

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}


/* =========================================================
   CLIENT CARD
========================================================= */

.portfolio-card {
    position: relative;
    overflow: hidden;

    border: 1px solid #e2e8f1;
    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 10px 30px rgba(28, 61, 105, .055);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.portfolio-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    opacity: 0;

    background: linear-gradient(
        90deg,
        #1264d8,
        #58b52b
    );

    transition: opacity .25s ease;
}

.portfolio-card:hover {
    transform: translateY(-8px);

    border-color: rgba(18, 100, 216, .18);

    box-shadow:
        0 25px 55px rgba(25, 58, 105, .12);
}

.portfolio-card:hover::before {
    opacity: 1;
}


/* =========================================================
   LOGO AREA
========================================================= */

.portfolio-logo-box {
    height: 225px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 28px;

    background:
        radial-gradient(
            circle at center,
            #ffffff 0%,
            #fbfcfe 70%,
            #f7f9fc 100%
        );

    border-bottom: 1px solid #edf0f5;
}

.portfolio-logo-box img {
    display: block;

    max-width: 175px;
    max-height: 135px;

    width: auto;
    height: auto;

    object-fit: contain;

    transition:
        transform .3s ease,
        filter .3s ease;
}

.portfolio-card:hover .portfolio-logo-box img {
    transform: scale(1.06);
}


/* =========================================================
   CARD CONTENT
========================================================= */

.portfolio-card-content {
    position: relative;

    padding: 25px 26px 28px;
}

.portfolio-number {
    position: absolute;

    top: 21px;
    right: 23px;

    color: #dce4ef;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
}

.portfolio-card h3 {
    max-width: 88%;

    min-height: 48px;

    margin: 0 0 11px;

    color: #173b6b;

    font-size: 19px;
    line-height: 1.35;
}

.portfolio-location {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 17px;

    color: #788397;

    font-size: 13px;
}

.portfolio-location i {
    color: #1264d8;
    font-size: 12px;
}

.portfolio-solution {
    display: inline-flex;
    align-items: center;

    min-height: 34px;

    padding: 0 13px;

    border-radius: 8px;

    color: #1264d8;

    background: rgba(18, 100, 216, .07);

    font-size: 12px;
    font-weight: 800;

    transition: all .25s ease;
}

.portfolio-card:hover .portfolio-solution {
    color: #ffffff;

    background: linear-gradient(
        135deg,
        #1264d8,
        #58b52b
    );
}


/* =========================================================
   STATS
========================================================= */

.portfolio-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    margin-top: 60px;

    overflow: hidden;

    border: 1px solid #e1e8f1;
    border-radius: 18px;

    background: #ffffff;
}

.portfolio-stat {
    position: relative;

    padding: 28px 20px;

    text-align: center;
}

.portfolio-stat:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 25%;
    right: 0;

    width: 1px;
    height: 50%;

    background: #e5eaf1;
}

.portfolio-stat strong {
    display: block;

    margin-bottom: 6px;

    color: #1264d8;

    font-size: 30px;
    line-height: 1;
}

.portfolio-stat span {
    color: #758197;

    font-size: 12px;
    font-weight: 600;
}


/* =========================================================
   CTA
========================================================= */

.portfolio-cta {
    padding: 0 0 100px;

    background: #f7faff;
}

.portfolio-cta-box {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 45px;

    padding: 55px 60px;

    border-radius: 25px;

    background:
        linear-gradient(
            120deg,
            #0d59c7,
            #1264d8 48%,
            #58b52b
        );

    box-shadow:
        0 25px 60px rgba(18, 100, 216, .20);
}

.portfolio-cta-content {
    max-width: 700px;
}

.portfolio-cta-content .portfolio-eyebrow {
    color: rgba(255,255,255,.85);
}

.portfolio-cta-content .portfolio-eyebrow::before {
    background: rgba(255,255,255,.8);
}

.portfolio-cta h2 {
    margin: 0 0 15px;

    color: #ffffff;

    font-size: clamp(30px, 4vw, 45px);
    line-height: 1.1;
}

.portfolio-cta h2 span {
    color: #ffffff;

    background: none;

    -webkit-text-fill-color: #ffffff;
}

.portfolio-cta-content p {
    max-width: 650px;

    margin: 0;

    color: rgba(255,255,255,.84);

    font-size: 14px;
    line-height: 1.8;
}

.portfolio-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    flex-shrink: 0;
}

.portfolio-btn {
    min-height: 50px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 0 21px;

    border-radius: 11px;

    text-decoration: none;

    font-size: 13px;
    font-weight: 800;

    transition: all .25s ease;
}

.portfolio-btn-white {
    color: #1264d8;
    background: #ffffff;
}

.portfolio-btn-white:hover {
    transform: translateY(-3px);

    box-shadow:
        0 12px 30px rgba(0,0,0,.16);
}

.portfolio-btn-outline {
    color: #ffffff;

    border: 1px solid rgba(255,255,255,.4);

    background: rgba(255,255,255,.08);
}

.portfolio-btn-outline:hover {
    background: rgba(255,255,255,.18);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .portfolio-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .portfolio-heading > p {
        max-width: 700px;
    }

    .portfolio-cta-box {
        flex-direction: column;
        text-align: center;
    }

    .portfolio-cta-content {
        max-width: 800px;
    }

    .portfolio-cta-buttons {
        justify-content: center;
    }

}


@media (max-width: 650px) {

    .portfolio-container {
        width: min(100% - 28px, 1180px);
    }

    .portfolio-hero {
        padding: 45px 0;
    }

    .portfolio-list {
        padding: 70px 0;
    }

    .portfolio-grid {
        grid-template-columns: 1fr;
    }

    .portfolio-logo-box {
        height: 210px;
    }

    .portfolio-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .portfolio-stat:nth-child(2)::after {
        display: none;
    }

    .portfolio-stat:nth-child(1),
    .portfolio-stat:nth-child(2) {
        border-bottom: 1px solid #e5eaf1;
    }

    .portfolio-cta {
        padding-bottom: 70px;
    }

    .portfolio-cta-box {
        padding: 40px 25px;
    }

    .portfolio-cta-buttons {
        width: 100%;
        flex-direction: column;
    }

    .portfolio-btn {
        width: 100%;
    }

}

/* =====================================================
   FOUNDERS
===================================================== */

.founders-section {
    margin-top: 90px;
}


/* Heading */

.founders-heading {
    max-width: 800px;
    margin-bottom: 45px;
}

.founders-heading h2 {
    margin: 10px 0 18px;
    font-size: 42px;
    line-height: 1.15;
    font-weight: 800;
    color: #0b1733;
}

.founders-heading h2 span {
    background: linear-gradient(
        90deg,
        #1264d8,
        #58b52b
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.founders-heading p {
    margin: 0;
    font-size: 17px;
    line-height: 1.8;
    color: #68758a;
}


/* Grid */

.founders-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}


/* Founder Card */

.founder-card {
    position: relative;

    display: grid;
    grid-template-columns: 230px 1fr;

    background: #ffffff;

    border: 1px solid #e2e9f3;

    border-radius: 22px;

    overflow: hidden;

    box-shadow:
        0 15px 45px rgba(15, 48, 90, 0.08);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


.founder-card:hover {
    transform: translateY(-7px);

    border-color: rgba(18, 100, 216, .25);

    box-shadow:
        0 25px 60px rgba(15, 48, 90, 0.14);
}


/* Founder Photo */

.founder-photo {
    position: relative;

    min-height: 100%;

    overflow: hidden;

    background: #eef4fb;
}


.founder-photo img {
    width: 100%;
    height: 100%;

    min-height: 430px;

    object-fit: cover;

    object-position: center top;

    display: block;

    transition:
        transform .5s ease;
}


.founder-card:hover .founder-photo img {
    transform: scale(1.04);
}


/* Image Overlay */

.founder-photo-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(8, 25, 55, 0) 55%,
            rgba(8, 25, 55, .25) 100%
        );

    pointer-events: none;
}


/* Founder Content */

.founder-content {
    padding: 32px 30px;

    display: flex;

    flex-direction: column;

    justify-content: center;
}


/* Role */

.founder-role {
    display: inline-flex;

    align-items: center;

    width: fit-content;

    padding: 6px 12px;

    border-radius: 50px;

    background: rgba(18, 100, 216, .08);

    color: #1264d8;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.2px;

    margin-bottom: 12px;
}


/* Name */

.founder-content h3 {
    margin: 0 0 10px;

    font-size: 28px;

    font-weight: 800;

    color: #0b1733;
}


/* Experience */

.founder-experience {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 6px;

    margin-bottom: 20px;

    color: #69778c;

    font-size: 13px;

    line-height: 1.5;
}


.founder-experience span {
    color: #58b52b;

    font-weight: 800;
}


/* Description */

.founder-content p {
    margin: 0 0 14px;

    color: #657287;

    font-size: 14px;

    line-height: 1.75;
}


/* Divider */

.founder-line {
    width: 100%;

    height: 1px;

    background: #e7edf5;

    margin: 8px 0 17px;
}


/* Focus */

.founder-focus {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


.founder-focus span {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 8px 11px;

    border-radius: 9px;

    background: #f5f8fc;

    color: #46546a;

    font-size: 11px;

    font-weight: 700;
}


.founder-focus i {
    color: #1264d8;

    font-size: 11px;
}


.founder-focus span:hover {
    background: rgba(18, 100, 216, .08);

    color: #1264d8;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1100px) {

    .founder-card {
        grid-template-columns: 190px 1fr;
    }

    .founder-photo img {
        min-height: 450px;
    }

}


@media (max-width: 850px) {

    .founders-grid {
        grid-template-columns: 1fr;
    }

    .founder-card {
        grid-template-columns: 230px 1fr;
    }

}


@media (max-width: 600px) {

    .founders-heading h2 {
        font-size: 32px;
    }

    .founder-card {
        display: block;
    }

    .founder-photo {
        height: 360px;
    }

    .founder-photo img {
        min-height: 360px;
    }

    .founder-content {
        padding: 28px 24px;
    }

    .founder-content h3 {
        font-size: 25px;
    }

}

/* =========================================================
   FINAL FIX
   TOP BAR ABOVE EXISTING HEADER
========================================================= */

/* TOP GREEN BAR */
body > .top-bar {
    position: fixed !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 42px !important;

    background: #007a36 !important;

    z-index: 999999 !important;

    display: block !important;

    visibility: visible !important;
    opacity: 1 !important;
}


/* TOP BAR INNER */
body > .top-bar .top-bar-container {

    width: min(
        1180px,
        calc(100% - 40px)
    ) !important;

    height: 44px !important;

    margin: 0 auto !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;
}


/* =========================================================
   EXISTING HEADER
========================================================= */

body > header#header {

    position: fixed !important;

    top: 42px !important;
    left: 0 !important;

    width: 100% !important;

    height: 102px !important;

    z-index: 999998 !important;

    margin: 0 !important;

    padding: 14px 0 !important;

    box-sizing: border-box !important;
}


/* HEADER NAV */
body > header#header .container.nav {

    height: 74px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;
}


/* LOGO */
body > header#header .container.nav > a:first-child {

    display: flex !important;

    align-items: center !important;

    flex-shrink: 0 !important;
}


body > header#header .container.nav > a:first-child img {

    height: 88px !important;

    width: auto !important;

    max-width: 350px !important;

    object-fit: contain !important;

    display: block !important;
}


/* =========================================================
   PAGE SPACE
========================================================= */

body {

    padding-top: 160px !important;
}


/* =========================================================
   NAVIGATION
========================================================= */

body > header#header .nav-links {

    display: flex !important;

    align-items: center !important;

    margin-left: auto !important;

    gap: 28px !important;
}


body > header#header .nav-links > a,
body > header#header .nav-links > li > a {

    height: 74px !important;

    display: inline-flex !important;

    align-items: center !important;

    color: #b9c3d8;

    text-decoration: none;
}


/* =========================================================
   DESKTOP TOP BAR
========================================================= */

body > .top-bar .top-contact-info {

    display: flex !important;

    align-items: center !important;

    gap: 21px !important;
}


body > .top-bar .top-contact-item {

    display: inline-flex !important;

    align-items: center !important;

    gap: 10px !important;

    color: #ffffff !important;

    font-size: 16px !important;

    font-weight: 500 !important;

    white-space: nowrap !important;

    text-decoration: none !important;
}


body > .top-bar .top-contact-item i {

    color: #ffffff !important;

    font-size: 17px !important;
}


/* SOCIAL */
body > .top-bar .top-social-icons {

    display: flex !important;

    align-items: center !important;

    gap: 8px !important;
}


body > .top-bar .top-social-icons a {

    width: 25px !important;

    height: 25px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    color: #ffffff !important;

    background: transparent !important;

    border: 1px solid rgba(255,255,255,.45) !important;

    border-radius: 50% !important;

    font-size: 15px !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    body > .top-bar {

        height: 55px !important;
    }


    body > .top-bar .top-bar-container {

        height: 55px !important;

        width: calc(100% - 30px) !important;
    }


    body > header#header {

        top: 55px !important;

        height: 80px !important;
    }


    body > header#header .container.nav {

        height: 80px !important;
    }


    body > header#header .container.nav > a:first-child img {

        height: 65px !important;

        max-width: 250px !important;
    }


    body {

        padding-top: 135px !important;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    body > .top-bar {

        height: 42px !important;
    }


    body > .top-bar .top-bar-container {

        width: calc(100% - 20px) !important;

        height: 48px !important;
    }


    body > .top-bar .top-contact-item {

        font-size: 11px !important;
    }


    body > .top-bar .top-contact-item:first-child {

        display: none !important;
    }


    body > .top-bar .top-contact-item span {

        display: none !important;
    }


    body > .top-bar .top-social-icons a {

        width: 28px !important;

        height: 28px !important;

        font-size: 12px !important;
    }


    body > header#header {

        top: 42px !important;

        height: 70px !important;
    }


    body > header#header .container.nav {

        height: 70px !important;
    }


    body > header#header .container.nav > a:first-child img {

        height: 48px !important;

        max-width: 190px !important;
    }


    body {

        padding-top: 118px !important;
    }
}