:root {
            --bg: #f5f7fb;
            --surface: #fff;
            --ink: #111827;
            --muted: #667085;
            --line: #e6eaf0;
            --brand: #635bff;
            --brand2: #18c7b4;
            --dark: #12172b;
            --shadow: 0 24px 70px rgba(23, 30, 56, .10);
        }

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

        html {
            scroll-behavior: smooth
        }

        body {
            font-family: 'DM Sans', sans-serif;
            background: var(--bg);
            color: var(--ink);
            line-height: 1.6;
            overflow-x: hidden
        }

        h1, h2, h3, .logo {
            font-family: 'Space Grotesk', sans-serif
        }

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

        .container {
            width: min(1160px, 92%);
            margin: auto
        }

        .nav {
            height: 82px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            z-index: 10
        }

        .logo {
            font-size: 1.35rem;
            font-weight: 700;
            letter-spacing: -.06em
        }

        .logo span {
            color: var(--brand)
        }

        .links {
            display: flex;
            gap: 30px;
            align-items: center;
            color: #667085;
            font-size: .94rem
        }

        .links a:hover {
            color: var(--brand)
        }

        .nav-cta, .btn {
            border: 0;
            border-radius: 10px;
            background: var(--ink);
            color: #fff;
            padding: 12px 20px;
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 9px;
            transition: .25s
        }

        .nav-cta:hover, .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 24px #11182724
        }

        .menu {
            display: none;
            background: none;
            border: 0;
            font-size: 1.6rem;
            cursor: pointer
        }

        .hero {
            position: relative;
            padding: 42px 0 58px;
        }



        /* Homepage hero carousel */
        .hero-carousel {
            overflow: hidden;
        }

        .hero-slider {
            position: relative;
        }

        .hero-slides {
            position: relative;
        }

        .hero-slide {
            display: none;
            animation: heroSlideIn .55s ease both;
        }

        .hero-slide.is-active {
            display: block;
        }

        .hero-copy {
            min-width: 0;
        }

        .hero-banner-image {
            display: block;
            width: 100%;
            height: 100%;
            min-height: 0;
            border-radius: 20px;
            object-fit: cover;
        }

        .hero-visual {
            display: flex;
            align-items: stretch;
            justify-content: stretch;
        }

        .hero-stat-card {
            position: absolute;
            z-index: 4;
            right: 22px;
            bottom: 22px;
            min-width: 145px;
            padding: 15px 17px;
            border-radius: 14px;
            background: rgba(255,255,255,.96);
            box-shadow: 0 18px 45px rgba(14,20,40,.18);
        }

        .hero-stat-card small,
        .hero-stat-card strong,
        .hero-stat-card span {
            display: block;
        }

        .hero-stat-card small {
            color: #727b8c;
            font-size: .72rem;
        }

        .hero-stat-card strong {
            margin-top: 3px;
            color: var(--ink);
            font-family: 'Space Grotesk', sans-serif;
            font-size: 1.55rem;
            letter-spacing: -.04em;
        }

        .hero-stat-card span {
            margin-top: 4px;
            color: var(--brand2);
            font-size: .7rem;
        }

        .hero-carousel-arrow {
            position: absolute;
            top: 50%;
            z-index: 8;
            width: 44px;
            height: 44px;
            margin-top: -22px;
            border: 1px solid rgba(255,255,255,.55);
            border-radius: 50%;
            background: rgba(17,24,39,.84);
            color: #fff;
            font-size: 1rem;
            cursor: pointer;
            display: grid;
            place-items: center;
            transition: transform .2s ease, background .2s ease;
        }

        .hero-carousel-arrow:hover {
            transform: translateY(-2px);
            background: var(--brand);
        }

        .hero-carousel-prev {
            left: 18px;
        }

        .hero-carousel-next {
            right: 18px;
        }

        .hero-carousel-dots {
            position: absolute;
            z-index: 8;
            left: 50%;
            bottom: 8px;
            transform: translateX(-50%);

            display: flex;
            gap: 7px;
        }

        .hero-carousel-dot {
            width: 9px;
            height: 9px;
            padding: 0;
            border: 0;
            border-radius: 50%;
            background: #cdd1dc;
            cursor: pointer;
            transition: width .2s ease, border-radius .2s ease, background .2s ease;
        }

        .hero-carousel-dot.is-active {
            width: 28px;
            border-radius: 99px;
            background: var(--brand);
        }

        @keyframes heroSlideIn {
            from { opacity: 0; transform: translateX(14px); }
            to { opacity: 1; transform: translateX(0); }
        }

        .hero:before {
            content: '';
            position: absolute;
            width: 550px;
            height: 550px;
            right: -180px;
            top: -100px;
            background: radial-gradient(circle, #d7d2ff 0, transparent 68%);
            z-index: -1
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #ecebff;
            color: #4d46c8;
            padding: 7px 12px;
            border-radius: 99px;
            font-size: .78rem;
            font-weight: 700;
            letter-spacing: .04em;
            text-transform: uppercase
        }

        .eyebrow i {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--brand2);
            display: block
        }

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

        .hero h1 {
            font-size: clamp(3.2rem, 6vw, 5.5rem);
            line-height: .99;
            letter-spacing: -.08em;
            max-width: 680px;
            margin: 24px 0
        }

        .hero h1 em {
            font-style: normal;
            color: var(--brand)
        }

        .hero p {
            color: var(--muted);
            font-size: 1.13rem;
            max-width: 530px
        }

        .actions {
            display: flex;
            gap: 14px;
            margin-top: 32px;
            align-items: center
        }

        .btn.primary {
            background: var(--brand)
        }

        .btn.secondary {
            background: transparent;
            color: var(--ink);
            border: 1px solid var(--line)
        }

        .hero-note {
            font-size: .85rem;
            color: #8a93a4;
            margin-top: 17px
        }

        .hero-visual {
            min-height: 455px;
            height: 455px;
            border-radius: 30px;
            background: linear-gradient(145deg, #171c38, #34326c);
            position: relative;
            box-shadow: var(--shadow);
            overflow: hidden;
            padding: 25px
        }

        .hero-visual:after {
            content: '';
            position: absolute;
            width: 260px;
            height: 260px;
            background: #18c7b4;
            border-radius: 50%;
            filter: blur(80px);
            opacity: .28;
            right: -70px;
            bottom: -80px
        }

        .window {
            background: #ffffff13;
            border: 1px solid #ffffff20;
            border-radius: 17px;
            padding: 15px;
            position: relative;
            z-index: 1
        }

        .dots {
            display: flex;
            gap: 6px;
            margin-bottom: 25px
        }

        .dots i {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #fff5
        }

        .dash {
            display: grid;
            grid-template-columns:80px 1fr;
            gap: 12px
        }

        .side, .chart, .mini {
            background: #fff0f;
            border: 1px solid #fff2;
            border-radius: 12px
        }

        .side {
            height: 330px;
            padding: 13px
        }

        .side span {
            display: block;
            height: 8px;
            width: 45px;
            background: #fff5;
            border-radius: 4px;
            margin: 12px 0
        }

        .chart {
            height: 190px;
            padding: 18px;
            position: relative;
            background: linear-gradient(180deg, #ffffff12, #ffffff03)
        }

        .chart:before {
            content: '';
            position: absolute;
            inset: 35px 18px 25px;
            background: linear-gradient(160deg, transparent 40%, #18c7b4 41%, #18c7b4 43%, transparent 44%), linear-gradient(25deg, transparent 47%, #756dff 48%, #756dff 50%, transparent 51%);
            opacity: .8
        }

        .mini {
            height: 105px;
            margin-top: 12px;
            padding: 14px;
            display: flex;
            gap: 8px
        }

        .mini b {
            font-size: 1.4rem;
            color: #fff
        }

        .float-card {
            position: absolute;
            right: 18px;
            bottom: 28px;
            background: #fff;
            color: var(--ink);
            padding: 17px;
            border-radius: 15px;
            box-shadow: 0 20px 35px #07091755;
            width: 160px;
            z-index: 2
        }

        .float-card small {
            color: var(--muted)
        }

        .float-card strong {
            font-size: 1.45rem;
            display: block;
            margin-top: 3px
        }

section {
            padding: 105px 0
        }

        .trust-strip { padding: 18px 0; background: #fff; border-bottom: 1px solid var(--line); }
        .trust-strip-inner { display: flex; align-items: center; gap: 12px; font-size: .82rem; }
        .trust-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--brand2); box-shadow: 0 0 0 5px #dffaf4; }
        .trust-note { margin-left: auto; color: var(--muted); }
        .why-us { background: #f7f8fc; }
        .why-us .section-head h2 span { color: var(--brand); }
        .why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
        .why-card { padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: #fff; transition: .3s ease; }
        .why-card:hover { transform: translateY(-5px); border-color: #c9c5ff; box-shadow: var(--shadow); }
        .why-card span { color: var(--brand); font-size: .75rem; font-weight: 800; }
        .why-card h3 { margin: 25px 0 9px; font-size: 1.05rem; }
        .why-card p { color: var(--muted); font-size: .88rem; line-height: 1.6; }
        @media (max-width: 780px) { .trust-strip-inner { align-items: flex-start; flex-wrap: wrap; } .trust-note { width: 100%; margin-left: 20px; } .why-grid { grid-template-columns: 1fr 1fr; } }
        @media (max-width: 480px) { .why-grid { grid-template-columns: 1fr; } }

        .section-head {
            display: flex;
            justify-content: space-between;
            align-items: end;
            gap: 20px;
            margin-bottom: 40px
        }

        .section-head h2 {
            font-size: clamp(2rem, 4vw, 3.2rem);
            line-height: 1.05;
            letter-spacing: -.06em
        }

        .section-head p {
            max-width: 420px;
            color: var(--muted)
        }

        .services {
            background: var(--surface)
        }

        .cards {
            display: grid;
            grid-template-columns:repeat(3, 1fr);
            gap: 18px
        }

        .card {
            padding: 28px;
            border: 1px solid var(--line);
            border-radius: 18px;
            background: #fff;
            transition: .3s
        }

        .card:hover {
            transform: translateY(-7px);
            box-shadow: var(--shadow);
            border-color: #c9c5ff
        }

        .icon {
            width: 45px;
            height: 45px;
            border-radius: 13px;
            background: #eeedff;
            color: var(--brand);
            display: grid;
            place-items: center;
            font-size: 1.3rem;
            margin-bottom: 23px
        }

        .card h3 {
            font-size: 1.22rem;
            margin-bottom: 9px
        }

        .card p {
            color: var(--muted);
            font-size: .94rem
        }

        .arrow {
            display: inline-block;
            color: var(--brand);
            margin-top: 20px;
            font-weight: 700
        }

        .dark {
            background: var(--dark);
            color: #fff
        }

        .dark .section-head p {
            color: #a8aec2
        }

        .dark .eyebrow {
            background: #292d4c;
            color: #bcb7ff
        }

        .process {
            display: grid;
            grid-template-columns:repeat(4, 1fr);
            gap: 22px
        }

        .step {
            border-top: 1px solid #ffffff26;
            padding-top: 18px
        }

        .step-num {
            color: var(--brand2);
            font-weight: 700;
            font-size: .85rem
        }

        .step h3 {
            margin: 12px 0 7px
        }

        .step p {
            color: #a8aec2;
            font-size: .9rem
        }

        .work-grid {
            display: grid;
            grid-template-columns:1.3fr .7fr;
            gap: 18px
        }

.project {
            min-height: 265px;
            border-radius: 20px;
            padding: 25px;
            display: flex;
            flex-direction: column;
            justify-content: end;
            overflow: hidden;
            position: relative;
            background: linear-gradient(135deg, #d9e2ff, #6e64ff)
        }

        .project:nth-child(2) {
            background: linear-gradient(135deg, #ffe6c5, #ff886e)
        }

        .project:nth-child(3) {
            background: linear-gradient(135deg, #c9f7ed, #42ae9d)
        }

        .project h3, .project p {
            position: relative;
            z-index: 1
        }

        .project p {
            opacity: .75;
            font-size: .9rem
        }

        .project:before {
            content: '◒';
            position: absolute;
            right: 30px;
            top: 30px;
            font-size: 8rem;
            color: #fff5;
            transform: rotate(-20deg)
        }

        .testimonial {
            background: #ecebff
        }

        .quote {
            font-family: 'Space Grotesk';
            font-size: clamp(1.6rem, 3vw, 2.7rem);
            line-height: 1.2;
            letter-spacing: -.04em;
            max-width: 800px
        }

        .person {
            margin-top: 22px;
            color: var(--muted)
        }

        .contact {
            padding: 70px 0
        }

        .contact-box {
            background: linear-gradient(115deg, var(--brand), #8a7dff);
            color: #fff;
            border-radius: 25px;
            padding: 56px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 30px
        }

        .contact-box h2 {
            font-size: clamp(2rem, 4vw, 3.4rem);
            line-height: 1;
            letter-spacing: -.06em
        }

        .contact-box p {
            margin-top: 13px;
            color: #e7e5ff
        }

        .contact-box .btn {
            background: #fff;
            color: var(--ink);
            white-space: nowrap
        }

        .footer {
            padding: 26px 0;
            color: var(--muted);
            font-size: .86rem;
            display: flex;
            justify-content: space-between;
            border-top: 1px solid var(--line)
        }

        .reveal {
            opacity: 0;
            transform: translateY(22px);
            transition: .7s ease
        }

        .reveal.show {
            opacity: 1;
            transform: none
        }

        @media (max-width: 780px) {
            .links {
                display: none;
                position: absolute;
                top: 72px;
                left: 0;
                right: 0;
                background: #fff;
                padding: 22px;
                border: 1px solid var(--line);
                border-radius: 14px;
                box-shadow: var(--shadow);
                flex-direction: column;
                align-items: flex-start
            }

            .links.open {
                display: flex
            }

            .nav-cta {
                display: none
            }

            .menu {
                display: block
            }

            .hero {
                padding: 36px 0 55px;
            }

            .hero-carousel-dots {
                bottom: 4px;
            }

            .hero-carousel-arrow {
                width: 38px;
                height: 38px;
                margin-top: -19px;
            }


            .hero-grid {
                grid-template-columns:1fr;
                gap: 42px
            }

            .hero h1 {
                font-size: clamp(3rem, 14vw, 4.5rem)
            }

            .hero-visual {
                min-height: 340px;
                height: 340px;
            }

            .section-head {
                display: block
            }

            .section-head p {
                margin-top: 15px
            }

            .cards, .process {
                grid-template-columns:1fr 1fr
            }

            .work-grid {
                grid-template-columns:1fr
            }

            .contact-box {
                padding: 35px 25px;
                display: block
            }

            .contact-box .btn {
                margin-top: 25px
            }

            .footer {
                display: block
            }

            .footer span {
                display: block;
                margin-top: 8px
            }
        }

        @media (max-width: 480px) {
            .cards, .process {
                grid-template-columns:1fr
            }

            .hero-banner-image {
                min-height: 280px;
                border-radius: 16px;
            }

            .hero-stat-card {
                right: 12px;
                bottom: 12px;
                min-width: 125px;
                padding: 11px 12px;
            }

            .hero-stat-card strong {
                font-size: 1.25rem;
            }
            .hero-visual {
                padding: 15px
            }

            .dash {
                grid-template-columns:55px 1fr
            }

            .side {
                height: 280px
            }

            .chart {
                height: 160px
            }

            .float-card {
                right: 10px;
                bottom: 18px
            }

            .contact-box h2 {
                font-size: 2.2rem
            }
        }

/* CodeIgniter integration: replace inline styles with semantic classes. */
.mini-label { color: #a8aec2; }
.mini-trend { margin-left: auto; color: #18c7b4; font-size: 1.4rem; }
.float-change { color: #18a998; font-size: .8rem; }
.section-head h2 span { color: var(--brand); }
.dark .section-head h2 span { color: var(--brand2); }

.logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* Keep uploaded project images inside a consistent card crop. */
.project-image{position:absolute;inset:0;z-index:0;overflow:hidden;background:#efe8dc}
.project-image::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,20,42,.02) 35%,rgba(15,20,42,.76) 100%)}
.project-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .45s ease}
.project:hover .project-image img{transform:scale(1.045)}
.project .project-content{position:relative;z-index:2;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.25)}
.project .project-content p{color:rgba(255,255,255,.86)}

.header-logo {
    display: block;
    width: auto;
    height: 46px;
    max-width: 190px;
    object-fit: contain;
}

@media (max-width: 780px) {
    .header-logo {
        height: 38px;
        max-width: 155px;
    }
}

.back-to-top {
    position: fixed;
    right: 28px;
    bottom: 28px;
    width: 48px;
    height: 48px;

    border: none;
    border-radius: 50%;

    background: var(--brand);
    color: #fff;

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

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

    cursor: pointer;
    z-index: 999;

    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);

    box-shadow: 0 10px 30px rgba(99, 91, 255, .35);

    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .3s ease,
        background .3s ease;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--dark);
    transform: translateY(-3px);
}

@media (max-width: 780px) {
    .back-to-top {
        width: 44px;
        height: 44px;
        right: 18px;
        bottom: 18px;
    }
}


/* Dynamic frontend navigation - preserves the existing header look */
.nav-dropdown{position:relative;display:flex;align-items:center}.nav-dropdown-toggle{border:0;background:transparent;color:#667085;font:inherit;font-size:.94rem;display:inline-flex;align-items:center;gap:6px;cursor:pointer;padding:0}.nav-dropdown-toggle:hover{color:var(--brand)}.nav-chevron{font-size:.8rem;transition:transform .2s}.nav-dropdown:hover .nav-chevron{transform:rotate(180deg)}.nav-dropdown-panel{position:absolute;left:50%;top:calc(100% + 16px);transform:translate(-50%, -5px);min-width:210px;background:#fff;border:1px solid var(--line);border-radius:13px;padding:8px;box-shadow:var(--shadow);opacity:0;visibility:hidden;pointer-events:none;transition:.18s}.nav-dropdown:hover .nav-dropdown-panel,.nav-dropdown:focus-within .nav-dropdown-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%, 0)}.nav-dropdown-panel:before{content:'';position:absolute;left:0;right:0;top:-16px;height:16px}.nav-dropdown-panel a{display:block;padding:9px 11px;border-radius:8px;color:#667085;font-size:.86rem}.nav-dropdown-panel a:hover{background:#f5f4ff;color:var(--brand)}.nav-dropdown-panel .nav-dropdown-parent-link{font-weight:700;color:var(--ink);border-bottom:1px solid var(--line);border-radius:0;margin-bottom:4px}
@media(max-width:780px){.nav-dropdown{width:100%;display:block}.nav-dropdown-toggle{width:100%;justify-content:space-between;padding:4px 0}.nav-dropdown-panel{position:static;transform:none;box-shadow:none;border:0;border-left:1px solid var(--line);border-radius:0;padding:4px 0 4px 12px;min-width:0;opacity:1;visibility:visible;pointer-events:auto;display:none;margin-top:4px}.nav-dropdown.open .nav-dropdown-panel{display:block}.nav-dropdown:hover .nav-dropdown-panel,.nav-dropdown:focus-within .nav-dropdown-panel{transform:none}.nav-dropdown-panel:before{display:none}.nav-dropdown-panel .nav-dropdown-parent-link{border-bottom:0;margin-bottom:0;font-weight:500}.links{gap:16px}}

/* Modern responsive polish */
.menu-icon { display: block; line-height: 1; transition: opacity .2s, transform .2s; }
.menu-close-icon { display: none; font-size: 2rem; }
.hero-copy { animation: heroCopyIn .7s ease both; }
.hero-visual { animation: heroVisualIn .8s .1s ease both; }
@keyframes heroCopyIn { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes heroVisualIn { from { opacity: 0; transform: translateX(18px) scale(.97); } to { opacity: 1; transform: none; } }

@media (max-width: 780px) {
    body.mobile-menu-open { overflow: hidden; }
    .menu { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: #f1f2f8; color: var(--ink); z-index: 20; }
    .menu[aria-expanded="true"] { background: var(--ink); color: #fff; }
    .menu[aria-expanded="true"] .menu-open-icon { display: none; }
    .menu[aria-expanded="true"] .menu-close-icon { display: block; }
    .links { top: 76px; padding: 26px; gap: 20px; border-radius: 20px; transform: translateY(-10px); opacity: 0; visibility: hidden; display: flex; transition: opacity .25s ease, transform .25s ease, visibility .25s; }
    .links.open { opacity: 1; visibility: visible; transform: translateY(0); }
    .links a, .nav-dropdown-toggle { font-size: 1rem; font-weight: 600; }
    .links::after { content: 'Ready to build something useful?'; color: var(--muted); font-size: .78rem; padding-top: 12px; border-top: 1px solid var(--line); width: 100%; }
}

/* Contact page */
.contact-page{padding:95px 0 110px;min-height:calc(100vh - 100px)}
.contact-page-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);gap:60px;align-items:start}
.contact-copy h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(2.8rem,5.5vw,5.3rem);line-height:.98;letter-spacing:-.06em;margin:22px 0 22px}
.contact-copy h1 em{font-style:normal;color:#635bff}
.contact-copy>p{max-width:620px;color:#6f7787;font-size:1.05rem;line-height:1.8}
.contact-details{margin-top:28px;font-weight:700}.contact-details a{color:inherit}
.contact-form-card{background:#fff;border:1px solid #e8ebf1;border-radius:24px;padding:30px;box-shadow:0 20px 70px rgba(22,29,58,.08)}
.contact-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.contact-field{display:flex;flex-direction:column;gap:8px}.contact-field-wide{grid-column:1/-1}.contact-field span{font-size:.78rem;font-weight:700}.contact-field b{color:#d64d5b}.contact-field input,.contact-field textarea{width:100%;border:1px solid #e2e5eb;border-radius:12px;background:#fff;color:#111827;padding:12px 13px;font:inherit;outline:0}.contact-field input{height:46px}.contact-field textarea{resize:vertical;min-height:140px}.contact-field input:focus,.contact-field textarea:focus{border-color:#bdb8ff;box-shadow:0 0 0 4px #eeecff}.contact-submit{margin-top:22px;width:100%;justify-content:center;border:0}.form-success,.form-error{padding:12px 14px;border-radius:11px;margin-bottom:18px;font-size:.82rem;line-height:1.5}.form-success{background:#eaf8f1;color:#08784f}.form-error{background:#fff0f0;color:#b7313f}
@media(max-width:900px){.contact-page-grid{grid-template-columns:1fr;gap:35px}.contact-copy h1{font-size:clamp(2.7rem,10vw,4.5rem)}}
@media(max-width:560px){.contact-page{padding:60px 0 80px}.contact-form-card{padding:20px}.contact-form-grid{grid-template-columns:1fr}.contact-field-wide{grid-column:auto}}

/* =========================================================
   HOMEPAGE CMS - OUR WORK
   ========================================================= */

#work .section-head h2 span {
    color: inherit;
}

.work-grid .project {
    color: #141a2b;
    text-decoration: none;
    isolation: isolate;
}

.work-grid .project.theme-purple {
    background: linear-gradient(135deg, #d9e2ff, #6e64ff);
}

.work-grid .project.theme-orange {
    background: linear-gradient(135deg, #ffe6c5, #ff886e);
}

.work-grid .project.theme-teal {
    background: linear-gradient(135deg, #c9f7ed, #42ae9d);
}

.work-grid .project.theme-blue {
    background: linear-gradient(135deg, #d8e8ff, #4e83ff);
}

.work-grid .project.theme-dark {
    background: linear-gradient(135deg, #242a45, #111629);
    color: #fff;
}

.work-grid .project[style*="background-image"] {
    background-size: cover;
    background-position: center;
}

.work-grid .project-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, transparent 32%, rgba(8, 12, 28, .48) 100%);
    opacity: 0;
    transition: opacity .2s ease;
}

.work-grid .project[style*="background-image"] .project-overlay {
    opacity: 1;
}

.project-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.project-copy small {
    margin-bottom: 6px;
    font-size: .72rem;
    font-weight: 700;
    opacity: .78;
}

.project-copy strong {
    font-size: 1rem;
    line-height: 1.3;
}

.project-copy span {
    margin-top: 5px;
    font-size: .84rem;
    line-height: 1.5;
    opacity: .78;
}

.project-mark {
    position: absolute;
    right: 28px;
    top: 22px;
    z-index: 2;
    font-size: 5rem;
    line-height: 1;
    color: rgba(255, 255, 255, .32);
    transform: rotate(-20deg);
}

.work-grid .project:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 38px rgba(18, 24, 42, .10);
}

/* =========================================================
   HOMEPAGE CMS - TESTIMONIALS
   ========================================================= */

.testimonial-carousel {
    position: relative;
}

.testimonial-slides {
    position: relative;
}

.testimonial-slide {
    display: none;
}

.testimonial-slide.is-active {
    display: block;
}

.testimonial-controls {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
}

.testimonial-controls > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(87, 80, 210, .18);
    border-radius: 50%;
    background: rgba(255, 255, 255, .48);
    color: #4540a9;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease;
}

.testimonial-controls > button:hover {
    transform: translateY(-2px);
    background: #fff;
}

.testimonial-dots {
    display: flex;
    align-items: center;
    gap: 7px;
}

.testimonial-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(94, 87, 255, .24);
    cursor: pointer;
}

.testimonial-dot.is-active {
    width: 22px;
    border-radius: 999px;
    background: #5e57ff;
}

@media (max-width: 700px) {
    .project-copy span {
        font-size: .8rem;
    }

    .project-mark {
        right: 20px;
        top: 18px;
        font-size: 4rem;
    }
}
/* =========================================================
   NEXORA FOOTER - FINAL
   ========================================================= */

.site-footer {
    position: relative;
    width: 100%;
    margin-top: 0;
    background: #f7f8fc;
    color: #707b90;
    border-top: 1px solid #e5e8ef;
}

.site-footer .container {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto;
}


/* ---------------------------------------------------------
   FOOTER MAIN
   --------------------------------------------------------- */

.footer-main {
    display: grid;
    grid-template-columns:
        minmax(280px, 1.5fr)
        minmax(200px, 1fr)
        minmax(200px, 1fr);

    gap: 70px;

    padding: 70px 0 55px;
}


/* ---------------------------------------------------------
   BRAND
   --------------------------------------------------------- */

.footer-brand {
    min-width: 0;
    max-width: 360px;
}

.footer-brand-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.footer-brand-logo img {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 175px !important;
    max-height: 55px !important;
    object-fit: contain !important;
}

.footer-brand-text {
    color: #111827;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
}

.footer-tagline {
    max-width: 320px;
    margin: 18px 0 0;
    color: #788398;
    font-size: .84rem;
    line-height: 1.7;
}


/* ---------------------------------------------------------
   FOOTER COLUMNS
   --------------------------------------------------------- */

.footer-column {
    min-width: 0;
}

.footer-column h3 {
    margin: 0 0 18px;
    color: #171d2d;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.4;
}


/* ---------------------------------------------------------
   CONTACT
   --------------------------------------------------------- */

.footer-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.footer-info-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0;
    color: #727d91;
    font-size: .82rem;
    line-height: 1.55;
    text-decoration: none;
}

a.footer-info-item {
    transition: color .2s ease;
}

a.footer-info-item:hover {
    color: #5e57ff;
}

.footer-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;
    min-width: 30px;

    margin-top: -2px;

    border-radius: 8px;

    background: rgba(94, 87, 255, .08);
    color: #5e57ff;
}

.footer-info-icon svg {
    width: 15px;
    height: 15px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.footer-info-item address {
    margin: 0;
    max-width: 250px;

    color: inherit;

    font-style: normal;
    font-size: inherit;
    line-height: inherit;
}


/* ---------------------------------------------------------
   SOCIAL
   --------------------------------------------------------- */

.footer-social {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    padding: 0;

    border: 1px solid #e0e4ec;
    border-radius: 10px;

    background: #ffffff;
    color: #697386;

    text-decoration: none;

    transition:
            color .2s ease,
            background .2s ease,
            border-color .2s ease,
            transform .2s ease,
            box-shadow .2s ease;
}

.footer-social a svg {
    display: block;
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* Facebook */

.footer-social .social-facebook:hover {
    color: #fff;
    background: #1877f2;
    border-color: #1877f2;
    box-shadow: 0 8px 20px rgba(24, 119, 242, .20);
    transform: translateY(-2px);
}


/* Instagram */

.footer-social .social-instagram:hover {
    color: #fff;
    background:
            radial-gradient(
                    circle at 30% 107%,
                    #fdf497 0%,
                    #fdf497 5%,
                    #fd5949 45%,
                    #d6249f 60%,
                    #285aeb 90%
            );

    border-color: #d6249f;
    box-shadow: 0 8px 20px rgba(214, 36, 159, .20);
    transform: translateY(-2px);
}


/* LinkedIn */

.footer-social .social-linkedin:hover {
    color: #fff;
    background: #0a66c2;
    border-color: #0a66c2;
    box-shadow: 0 8px 20px rgba(10, 102, 194, .20);
    transform: translateY(-2px);
}


/* YouTube */

.footer-social .social-youtube:hover {
    color: #fff;
    background: #ff0000;
    border-color: #ff0000;
    box-shadow: 0 8px 20px rgba(255, 0, 0, .20);
    transform: translateY(-2px);
}

.footer-social .youtube-play {
    fill: currentColor;
    stroke: none;
}


/* ---------------------------------------------------------
   FOOTER BOTTOM
   --------------------------------------------------------- */

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 78px;

    padding: 18px 0;

    border-top: 1px solid #dde2eb;
}

.footer-bottom p {
    margin: 0;

    color: #788398;
    font-size: .77rem;
    line-height: 1.6;
}


/* ---------------------------------------------------------
   BACK TO TOP
   --------------------------------------------------------- */

.footer-back-top {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;
    min-width: 48px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #5e57ff;
    color: #fff;

    font-family: inherit;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;

    box-shadow: 0 12px 28px rgba(94, 87, 255, .25);

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

.footer-back-top:hover {
    background: #4c45e8;
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(94, 87, 255, .30);
}

.footer-back-top:focus-visible {
    outline: 3px solid rgba(94, 87, 255, .20);
    outline-offset: 3px;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 900px) {

    .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 42px;
        padding: 55px 0 45px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}


@media (max-width: 600px) {

    .site-footer .container {
        width: min(100% - 32px, 1120px);
    }

    .footer-main {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 42px 0 35px;
    }

    .footer-brand {
        grid-column: auto;
    }

    .footer-bottom {
        min-height: 70px;
        gap: 15px;
    }

    .footer-bottom p {
        max-width: calc(100% - 62px);
    }

    .footer-back-top {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }
}

/* Work carousel controls */
.work-carousel {
    position: relative;
}

.work-slider-window {
    position: relative;
    overflow: hidden;
    margin-top: 36px;
}

.work-slider-track {
    display: flex;
    gap: 22px;
    transition: transform .55s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
}

.work-slide {
    flex: 0 0 calc((100% - 44px) / 3);
    min-width: 0;
}

.work-slide .project {
    height: 100%;
}

.work-carousel-arrow {
    position: absolute;
    top: calc(50% + 18px);
    z-index: 3;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: rgba(255, 255, 255, .97);
    color: var(--ink);
    box-shadow: 0 10px 25px rgba(17, 24, 39, .10);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    transform: translateY(-50%);
}

.work-carousel-arrow:hover {
    transform: translateY(-50%) scale(1.04);
    border-color: #c9c5ff;
    box-shadow: 0 14px 30px rgba(17, 24, 39, .14);
}

.work-carousel-prev {
    left: -18px;
}

.work-carousel-next {
    right: -18px;
}

.work-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 28px;
}

.work-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #d2d5df;
    cursor: pointer;
    transition: width .25s ease, background-color .25s ease;
}

.work-dot:hover {
    background: #aaaebb;
}

.work-dot.active {
    width: 26px;
    background: var(--brand);
}

@media (max-width: 1180px) {
    .work-slide {
        flex-basis: calc((100% - 22px) / 2);
    }
}

@media (max-width: 760px) {
    .work-slider-window {
        margin-top: 28px;
    }

    .work-slide {
        flex-basis: 100%;
    }

    .work-carousel-arrow {
        top: calc(50% + 14px);
        width: 40px;
        height: 40px;
    }

    .work-carousel-prev {
        left: 8px;
    }

    .work-carousel-next {
        right: 8px;
    }

    .work-dots {
        margin-top: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .work-slider-track,
    .work-dot,
    .work-carousel-arrow {
        transition: none;
    }
}

/* =========================================================
   HERO SLIDER - PREVENT UP/DOWN JUMPING
   ========================================================= */

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

    /* Every slide gets the same minimum height */
    min-height: 670px;
}

.hero-carousel-track {
    position: relative;
    min-height: 670px;
}

.hero-slide {
    width: 100%;
    min-height: 670px;
}

/* Keep every hero grid identical */
.hero-slide .hero-grid {
    min-height: 670px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr);
    align-items: center;
    gap: 70px;
}


/* =========================================================
   LEFT CONTENT - FIX VARIABLE CONTENT HEIGHT
   ========================================================= */

.hero-slide-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-height: 500px;
}

/* Reserve consistent heading space */
.hero-slide h1 {
    min-height: 235px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    margin-top: 22px;
    margin-bottom: 20px;
}

/* Reserve consistent description space */
.hero-slide-content > p {
    min-height: 62px;
    margin-bottom: 0;
}

/* CTA area always stays in same position */
.hero-slide .actions {
    min-height: 52px;
    margin-top: 25px;
}

/* Bottom note stays aligned */
.hero-slide .hero-note {
    min-height: 25px;
    margin-top: 16px;
}


/* =========================================================
   RIGHT IMAGE - SAME SIZE ON EVERY SLIDE
   ========================================================= */

.hero-slide-image,
.hero-media,
.hero-visual {
    width: 100%;
    height: 465px;

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

    overflow: hidden;

    border-radius: 28px;
}

.hero-slide-image img,
.hero-media img,
.hero-visual img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    border-radius: inherit;
}


/* =========================================================
   CAROUSEL DOTS
   ========================================================= */

.hero-carousel-dots,
.hero-dots {
    min-height: 30px;
}


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

@media (max-width: 1000px) {

    .hero-carousel,
    .hero-carousel-track,
    .hero-slide {
        min-height: 620px;
    }

    .hero-slide .hero-grid {
        min-height: 620px;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .hero-slide-image,
    .hero-media,
    .hero-visual {
        height: 400px;
    }

    .hero-slide h1 {
        min-height: 210px;
    }
}


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

@media (max-width: 760px) {

    .hero-carousel,
    .hero-carousel-track,
    .hero-slide {
        min-height: auto;
    }

    .hero-slide .hero-grid {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 32px;

        padding-top: 55px;
        padding-bottom: 55px;
    }

    .hero-slide-content {
        min-height: 440px;
    }

    .hero-slide h1 {
        min-height: 190px;
    }

    .hero-slide-content > p {
        min-height: 70px;
    }

    .hero-slide-image,
    .hero-media,
    .hero-visual {
        height: 340px;
    }
}


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

@media (max-width: 480px) {

    .hero-slide-content {
        min-height: 400px;
    }

    .hero-slide h1 {
        min-height: 170px;
    }

    .hero-slide-image,
    .hero-media,
    .hero-visual {
        height: 280px;
        border-radius: 20px;
    }
}

/* About page */
.about-hero{background:#f3f5fb;padding:105px 0 90px}.about-hero-grid,.about-two-col{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.about-hero h1{font-size:clamp(2.8rem,5vw,5rem);line-height:.98;letter-spacing:-.07em;margin:20px 0}.about-hero h1 em,.about-intro h2 span,.about-dark h2 span,.about-values h2 span{color:#635bff;font-style:normal}.about-hero p{max-width:500px;color:#64708a;font-size:1rem;line-height:1.7}.about-orbit{height:330px;width:330px;border-radius:50%;margin:auto;background:radial-gradient(circle,#635bff 0 18%,#20274f 19% 21%,transparent 22%),linear-gradient(135deg,#171d3c,#7180ff);box-shadow:0 28px 55px #272b6850;display:grid;place-items:center;position:relative;color:white}.about-orbit:before{content:'';position:absolute;inset:30px;border:1px solid #ffffff55;border-radius:50%}.about-orbit strong{font-size:7rem;letter-spacing:-.12em}.about-orbit span{position:absolute;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase}.about-orbit span:nth-child(1){top:50px}.about-orbit span:nth-child(2){right:22px}.about-orbit span:nth-child(3){bottom:50px;left:28px}.about-intro,.about-values{padding:95px 0}.about-intro h2,.about-dark h2,.about-values h2{font-size:clamp(2.1rem,3.5vw,3.7rem);line-height:1;letter-spacing:-.06em;margin:16px 0}.about-intro p{font-size:1.05rem;line-height:1.75;color:#64708a}.about-dark{background:#11162d;color:white;padding:95px 0}.about-statements article{border-top:1px solid #ffffff35;padding:20px 0}.about-statements small{color:#9c94ff;letter-spacing:.14em}.about-statements p{font-size:1rem;line-height:1.65;color:#c6cbe0}.about-value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.about-value-grid article{background:#f3f5fb;padding:23px;min-height:125px}.about-value-grid b{color:#635bff}.about-value-grid p{font-size:.95rem}.about-cta{background:#e9e7ff;text-align:center;padding:75px 0}.about-cta h2{font-size:clamp(2rem,3.5vw,3.4rem);letter-spacing:-.06em;margin:0 0 24px}
.about-hero-actions{display:flex;align-items:center;gap:18px;margin-top:25px}.about-hero-actions span{font-size:.78rem;color:#69738c}.about-services{background:#fff}.about-services .section-head h2 span{color:#635bff}.about-service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.about-service-grid article{padding:26px;border:1px solid #e5e8f0;border-radius:18px;transition:.3s}.about-service-grid article:hover{transform:translateY(-7px);box-shadow:0 18px 38px #18203a12;border-color:#c9c5ff}.about-service-grid b{color:#635bff;font-size:.78rem}.about-service-grid h3{margin:24px 0 10px;font-size:1.05rem}.about-service-grid p{color:#69738c;font-size:.88rem;line-height:1.6}
.about-strength{display:block;max-width:100%;width:100%;color:#635bff;font-size:clamp(.58rem,.9vw,.75rem);font-weight:800;letter-spacing:.035em;line-height:1.5;white-space:nowrap;text-transform:uppercase;margin-bottom:8px;overflow:hidden;text-overflow:ellipsis}.about-strength span{color:#15cbb2;font-size:.9rem}.about-hero-grid>div:first-child{min-width:0}
@media(max-width:760px){.about-hero{padding:65px 0}.about-hero-grid,.about-two-col{grid-template-columns:1fr;gap:35px}.about-orbit{width:260px;height:260px}.about-orbit strong{font-size:5.5rem}.about-intro,.about-values,.about-dark{padding:65px 0}.about-value-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.about-hero-actions{align-items:flex-start;flex-direction:column}.about-service-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.about-service-grid{grid-template-columns:1fr}}

/* Keep all orbit labels within the circle. */
.about-orbit{overflow:hidden}
.about-orbit span{z-index:1;white-space:nowrap}
.about-orbit span:nth-child(1){top:50px;left:50%;transform:translateX(-50%)}
.about-orbit span:nth-child(2){right:24px;top:50%;transform:translateY(-50%)}
.about-orbit span:nth-child(3){bottom:50px;left:50%;transform:translateX(-50%)}
@media(max-width:760px){.about-orbit span:nth-child(1){top:40px}.about-orbit span:nth-child(2){right:18px}.about-orbit span:nth-child(3){bottom:40px}}
@media(max-width:480px){.about-strength{font-size:.58rem;letter-spacing:.02em}.about-strength span{font-size:.75rem}}

/* =========================================================
   HERO CAROUSEL - FINAL HEIGHT FIX
   Prevent extra space below sticky header
   ========================================================= */

.hero-carousel {
    position: relative;
    overflow: hidden;
    min-height: 670px;
}

/*
 * The hero itself controls the section height.
 * box-sizing prevents padding from being added on top
 * of the intended height.
 */
.hero-carousel > .hero {
    box-sizing: border-box;
    min-height: 650px;
    height: 650px;

    padding-top: 60px;
    padding-bottom: 55px;

    display: flex;
    align-items: center;
}

/* Keep the inner content vertically centered */
.hero-carousel > .hero .hero-grid {
    width: 100%;
    height: 100%;
    align-items: center;
}

/* Keep image/card area stable */
.hero-carousel .hero-visual {
    height: 440px;
    max-height: 440px;
}

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

@media (max-width: 1000px) {

    .hero-carousel > .hero {
        min-height: 600px;
        height: 600px;

        padding-top: 45px;
        padding-bottom: 45px;
    }

    .hero-carousel .hero-visual {
        height: 390px;
        max-height: 390px;
    }
}


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

@media (max-width: 760px) {

    .hero-carousel {
        min-height: 0 !important;
        height: auto;
    }

    .hero-carousel > .hero {
        height: auto;
        min-height: 0;

        padding-top: 42px;
        padding-bottom: 45px;

        display: block;
    }

    .hero-carousel > .hero .hero-grid {
        height: auto;
    }

    .hero-carousel .hero-visual {
        height: 330px;
        max-height: 330px;
        margin-top: 28px;
    }
}


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

@media (max-width: 480px) {

    .hero-carousel > .hero {
        padding-top: 30px;
        padding-bottom: 35px;
    }

    .hero-carousel .hero-visual {
        height: 280px;
        max-height: 280px;
    }
}


/* =========================================================
   SERVICES CAROUSEL
   ========================================================= */
.services-carousel {
    position: relative;
    padding: 0 2px 42px;
}

.services-slider-window {
    overflow: hidden;
    margin: 0;
}

.services-slider-track {
    display: flex;
    gap: 18px;
    transition: transform .55s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
}

.services-slide {
    flex: 0 0 calc((100% - 36px) / 3);
    min-width: 0;
}

.services-slide .card {
    height: 100%;
}

.services-carousel-arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: rgba(255,255,255,.96);
    color: var(--ink);
    box-shadow: 0 10px 25px rgba(17,24,39,.10);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.services-carousel-arrow:hover {
    transform: translateY(-50%) scale(1.04);
    border-color: #c9c5ff;
    box-shadow: 0 14px 30px rgba(17,24,39,.14);
}

.services-carousel-prev {
    left: -18px;
    transform: translateY(-50%);
}

.services-carousel-next {
    right: -18px;
    transform: translateY(-50%);
}

.services-carousel-prev:hover,
.services-carousel-next:hover {
    transform: translateY(-50%) scale(1.04);
}

.services-carousel-dots {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.services-carousel-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #dfe2ea;
    cursor: pointer;
    transition: width .2s ease, background-color .2s ease;
}

.services-carousel-dot.is-active {
    width: 24px;
    background: var(--brand);
}

@media (max-width: 1180px) {
    .services-slide {
        flex-basis: calc((100% - 18px) / 2);
    }
}

@media (max-width: 760px) {
    .services-carousel {
        padding-bottom: 38px;
    }

    .services-slide {
        flex-basis: 100%;
    }

    .services-carousel-arrow {
        width: 40px;
        height: 40px;
    }

    .services-carousel-prev {
        left: 8px;
    }

    .services-carousel-next {
        right: 8px;
    }
}


/* =========================================================
   GLOBAL HEADER + PAGE LOADER EFFECTS
   ========================================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    background: rgba(245, 247, 251, .88);
    border-bottom: 1px solid transparent;
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    transition: background .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.site-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, #635bff 0%, #2563eb 48%, #18c7b4 100%);
    transform: scaleX(0);
    transform-origin: left center;
    opacity: 0;
    transition: transform .18s ease, opacity .18s ease;
}

.site-header.is-scrolled {
    background: rgba(255, 255, 255, .94);
    border-bottom-color: rgba(230, 234, 240, .95);
    box-shadow: 0 10px 30px rgba(17, 24, 39, .08);
}

.site-header.is-scrolled::after {
    transform: scaleX(1);
    opacity: 1;
}

.site-header .nav {
    transition: height .28s ease;
}

.site-header.is-scrolled .nav {
    height: 70px;
}

.site-header.is-scrolled .header-logo {
    height: 42px;
}

@media (max-width: 780px) {
    .site-header.is-scrolled .nav {
        height: 64px;
    }

    .site-header.is-scrolled .header-logo {
        height: 36px;
    }
}

.site-loader {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 50% 42%, rgba(99, 91, 255, .12), transparent 34%),
        #f7f8fc;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .45s ease, visibility .45s ease;
}

.site-loading {
    overflow: hidden;
}

.site-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.site-loader-inner {
    position: relative;
    width: min(180px, 52vw);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}

.site-loader-logo {
    position: relative;
    z-index: 2;
    width: 84px;
    height: 84px;
    object-fit: contain;
    filter: drop-shadow(0 18px 34px rgba(68, 84, 190, .22));
    animation: siteLoaderFloat 1.8s ease-in-out infinite;
}

.site-loader-ring,
.site-loader-ring::before {
    position: absolute;
    content: '';
    border-radius: 50%;
}

.site-loader-ring {
    inset: 18px;
    border: 2px solid rgba(99, 91, 255, .12);
    border-top-color: #635bff;
    border-right-color: #18c7b4;
    animation: siteLoaderSpin 1.1s linear infinite;
}

.site-loader-ring::before {
    inset: 12px;
    border: 1px solid rgba(37, 99, 235, .10);
    border-bottom-color: #2563eb;
}

.site-loader-text {
    position: absolute;
    top: calc(100% + 18px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    color: #667085;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

@keyframes siteLoaderSpin {
    to { transform: rotate(360deg); }
}

@keyframes siteLoaderFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-6px) scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
    .site-loader-logo,
    .site-loader-ring {
        animation: none;
    }

    .site-header,
    .site-header .nav,
    .site-header::after,
    .site-loader,
    .services-slider-track,
    .services-carousel-dot {
        transition: none;
    }
}


/* =========================================================
   WHATSAPP FLOATING BUTTON
   IMPORTANT: isolated styles; does not modify existing loader,
   header, hero, slider, or page styles.
   ========================================================= */
.whatsapp-float {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 54px;
    min-height: 54px;
    padding: 0 18px;
    border-radius: 999px;
    background: #25D366;
    color: #fff;
    box-shadow: 0 12px 30px rgba(19,34,46,.24);
    font-size: .84rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none !important;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.whatsapp-float:hover {
    background: #20bd5a;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(19,34,46,.28);
}

.whatsapp-float:focus-visible {
    outline: 3px solid rgba(37,211,102,.28);
    outline-offset: 3px;
}

.whatsapp-float svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
    flex: 0 0 auto;
}

@media (max-width: 600px) {
    .whatsapp-float {
        right: 16px;
        bottom: 16px;
        width: 54px;
        height: 54px;
        min-width: 54px;
        min-height: 54px;
        padding: 0;
        border-radius: 50%;
    }

    .whatsapp-float span {
        display: none;
    }

    .whatsapp-float svg {
        width: 24px;
        height: 24px;
    }
}