*{
    margin: 0;
    padding: 0;
  }
  
  
  
  :root {
        --white: #FFFFFF;
        --off: #F8F9FC;
        --off2: #F0F2F8;
        --navy: #0A1628;
        --navy2: #162240;
        --blue: #2563EB;
        --blue-lt: #EEF4FF;
        --blue-md: #DBEAFE;
        --teal: #0EA5E9;
        --teal-lt: #E0F6FF;
        --violet: #7C3AED;
        --muted: #64748B;
        --muted-lt: #94A3B8;
        --border: #E2E8F0;
        --border2: #CBD5E1;
        --shadow-sm: 0 1px 3px rgba(10, 22, 40, .06), 0 1px 2px rgba(10, 22, 40, .04);
        --shadow-md: 0 4px 16px rgba(10, 22, 40, .08), 0 2px 6px rgba(10, 22, 40, .04);
        --shadow-lg: 0 12px 40px rgba(10, 22, 40, .10), 0 4px 12px rgba(10, 22, 40, .06);
        --shadow-xl: 0 24px 64px rgba(10, 22, 40, .12), 0 8px 24px rgba(10, 22, 40, .08);
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        font-family: 'Outfit', sans-serif;
        background: var(--white);
        color: var(--navy);
        overflow-x: hidden;
    }

    /* ——— Navbar ——— */
    #navbar {
        transition: all .4s cubic-bezier(.23, 1, .32, 1);
    }

    #navbar.scrolled {
        background: rgba(255, 255, 255, .92);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-bottom: 2px solid var(--border);
        box-shadow: var(--shadow-sm);
    }

    /* ——— Buttons ——— */
    .btn-primary {
        background: var(--blue);
        color: var(--white);
        border: none;
        font-weight: 500;
        border-radius: 10px;
        transition: all .3s ease;
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        position: relative;
        overflow: hidden;
    }

    .btn-primary::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, var(--teal), var(--blue));
        opacity: 0;
        transition: opacity .3s ease;
    }

    .btn-primary:hover::after {
        opacity: 1;
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(37, 99, 235, .3);
    }

    .btn-primary>* {
        position: relative;
        z-index: 1;
    }

    .btn-primary span {
        position: relative;
        z-index: 1;
    }

    .btn-outline {
        background: transparent;
        color: var(--blue);
        border: 1.5px solid var(--blue);
        border-radius: 10px;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        transition: all .3s ease;
    }

    .btn-outline:hover {
        background: var(--blue);
        color: var(--white);
        transform: translateY(-2px);
    }

    .btn-white {
        background: var(--white);
        color: var(--navy);
        border-radius: 10px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        transition: all .3s ease;
    }

    .btn-white:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
    }

    /* ——— Section label ——— */
    .tag {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        font-size: .7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .14em;
        color: var(--blue);
        background: var(--blue-lt);
        padding: .35rem .8rem;
        border-radius: 999px;
        border: 1px solid var(--blue-md);
    }

    /* ——— Hero ——— */
    .hero-mesh {
        position: absolute;
        inset: 0;
        background:
            radial-gradient(ellipse 80% 60% at 70% 30%, rgba(37, 99, 235, .06) 0%, transparent 60%),
            radial-gradient(ellipse 50% 40% at 20% 80%, rgba(14, 165, 233, .05) 0%, transparent 55%),
            radial-gradient(ellipse 40% 50% at 90% 70%, rgba(124, 58, 237, .04) 0%, transparent 50%);
    }

    .hero-grid {
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(var(--border) 1px, transparent 1px),
            linear-gradient(90deg, var(--border) 1px, transparent 1px);
        background-size: 56px 56px;
        opacity: .35;
        mask-image: radial-gradient(ellipse at 50% 0%, black 20%, transparent 70%);
    }

    /* ——— Floating badge ——— */
    .hero-badge {
        animation: badgeFloat 3.5s ease-in-out infinite;
    }

    @keyframes badgeFloat {

        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-8px);
        }
    }

    /* ——— Marquee ——— */
    .marquee-wrap {
        overflow: hidden;
    }

    .marquee-inner {
        display: flex;
        gap: 3rem;
        width: max-content;
        animation: marquee 22s linear infinite;
        align-items: center;
    }

    @keyframes marquee {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-50%);
        }
    }

    /* ——— Service tabs ——— */
    .service-tab {
        padding: .6rem 1.2rem;
        border-radius: 8px;
        font-size: .85rem;
        font-weight: 500;
        cursor: pointer;
        transition: all .25s ease;
        white-space: nowrap;
        color: var(--muted);
        border: 1.5px solid transparent;
    }

    .service-tab:hover {
        color: var(--navy);
        background: var(--off2);
    }

    .service-tab.active {
        color: var(--blue);
        background: var(--blue-lt);
        border-color: var(--blue-md);
    }

    .service-panel {
        display: none;
    }

    .service-panel.active {
        display: grid;
    }

    /* ——— Service cards ——— */
    .svc-card {
        background: var(--white);
        border: 1.5px solid var(--border);
        border-radius: 16px;
        padding: 1.5rem;
        transition: all .35s cubic-bezier(.23, 1, .32, 1);
        cursor: default;
    }

    .svc-card:hover {
        border-color: var(--blue-md);
        box-shadow: var(--shadow-lg);
        transform: translateY(-4px);
    }

    .svc-card:hover .svc-icon {
        background: var(--blue);
        color: #fff;
        transform: scale(1.08) rotate(-4deg);
    }

    .svc-icon {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        background: var(--blue-lt);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1rem;
        transition: all .3s cubic-bezier(.34, 1.56, .64, 1);
        color: var(--blue);
    }

    /* ——— Portfolio cards ——— */
    .port-card {
        border-radius: 20px;
        overflow: hidden;
        background: var(--off);
        border: 1.5px solid var(--border);
        transition: all .4s cubic-bezier(.23, 1, .32, 1);
    }

    .port-card:hover {
        box-shadow: var(--shadow-xl);
        transform: translateY(-6px);
        border-color: var(--blue-md);
    }

    .port-thumb {
        height: 220px;
        overflow: hidden;
        position: relative;
    }

    .port-thumb-bg {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        transition: transform .6s cubic-bezier(.23, 1, .32, 1);
    }

    .port-card:hover .port-thumb-bg {
        transform: scale(1.06);
    }

    /* ——— Stat cards ——— */
    .stat-card {
        background: var(--white);
        border: 1.5px solid var(--border);
        border-radius: 20px;
        padding: 2rem 1.5rem;
        text-align: center;
        transition: all .35s ease;
    }

    .stat-card:hover {
        border-color: var(--blue-md);
        box-shadow: var(--shadow-md);
        transform: translateY(-3px);
    }

    /* ——— Testimonial cards ——— */
    .testi-card {
        background: var(--white);
        border: 1.5px solid var(--border);
        border-radius: 20px;
        padding: 2rem;
        transition: all .35s ease;
    }

    .testi-card:hover {
        border-color: var(--blue-md);
        box-shadow: var(--shadow-lg);
    }

    /* ——— Scroll reveal ——— */
    .reveal {
        opacity: 0;
        transform: translateY(28px);
        transition:
            opacity .7s cubic-bezier(.23, 1, .32, 1),
            transform .7s cubic-bezier(.23, 1, .32, 1);
    }

    .reveal.in {
        opacity: 1;
        transform: translateY(0);
    }

    /* ——— CTA gradient bg ——— */
    .cta-section {
        background: linear-gradient(135deg, var(--navy) 0%, var(--navy2) 60%, #1e3a5f 100%);
        position: relative;
        overflow: hidden;
    }

    .cta-glow {
        position: absolute;
        inset: 0;
        background:
            radial-gradient(ellipse at 20% 50%, rgba(37, 99, 235, .25) 0%, transparent 50%),
            radial-gradient(ellipse at 80% 30%, rgba(14, 165, 233, .15) 0%, transparent 45%);
    }

    .cta-dots {
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle, rgba(255, 255, 255, .06) 1px, transparent 1px);
        background-size: 28px 28px;
    }

    /* ——— Marquee logo image boxes ——— */
    .marquee-logo-box {
        flex-shrink: 0;
        padding: .9rem 1.6rem;
        background:var(--navy);
        /* border: 1px solid var(--border); */
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 1px 4px rgba(10, 22, 40, .06);
        transition: all .3s ease;
    }

    .marquee-logo-box:hover {
        border-color: var(--blue-md);
        box-shadow: 0 4px 16px rgba(37, 99, 235, .10);
        transform: translateY(-2px);
    }

    .marquee-logo-img {
        height: 69px;
        width: auto;
        max-width: 150px;
        object-fit: contain;
        display: block;
        /* filter: grayscale(.15) opacity(.8); */
        /* transition: filter .3s ease; */
    }

    .marquee-logo-box:hover .marquee-logo-img {
        filter: none;
    }

    /* ——— Cert logo image boxes ——— */
    .cert-logo-box {
        padding: 1.4rem 2.2rem;
        background: #fff;
        border: 1.5px solid var(--border);
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all .3s ease;
        box-shadow: var(--shadow-sm);
    }

    .cert-logo-box:hover {
        border-color: var(--blue-md);
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

    .cert-img {
        height: 84px;
        width: auto;
        max-width: 190px;
        object-fit: contain;
        display: block;
        filter: grayscale(.15) opacity(.85);
        transition: filter .3s ease;
    }

    .cert-logo-box:hover .cert-img {
        filter: none;
    }

    /* ——— Testimonial Slider ——— */
    .tslider-viewport {
        cursor: grab;
        user-select: none;
    }

    .tslider-viewport:active {
        cursor: grabbing;
    }

    .tslider-card {
        width: calc(100% - 0px);
    }

    @media (min-width: 768px) {
        .tslider-card {
            width: calc(50% - 10px);
        }
    }

    @media (min-width: 1024px) {
        .tslider-card {
            width: calc(33.333% - 14px);
        }
    }

    /* dot */
    .t-dot {
        width: 7px;
        height: 7px;
        border-radius: 999px;
        background: #CBD5E1;
        transition: all .35s cubic-bezier(.34, 1.56, .64, 1);
        cursor: pointer;
        border: none;
        padding: 0;
    }

    .t-dot.active {
        background: var(--blue);
        width: 26px;
    }

    /* slide-in animation classes */
    @keyframes slideInRight {
        from {
            opacity: 0;
            transform: translateX(40px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes slideInLeft {
        from {
            opacity: 0;
            transform: translateX(-40px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .slide-in-right .tslider-card {
        animation: slideInRight .45s cubic-bezier(.23, 1, .32, 1) both;
    }

    .slide-in-left .tslider-card {
        animation: slideInLeft .45s cubic-bezier(.23, 1, .32, 1) both;
    }

    .slide-in-right .tslider-card:nth-child(2) {
        animation-delay: .05s;
    }

    .slide-in-right .tslider-card:nth-child(3) {
        animation-delay: .10s;
    }

    .slide-in-left .tslider-card:nth-child(2) {
        animation-delay: .05s;
    }

    .slide-in-left .tslider-card:nth-child(3) {
        animation-delay: .10s;
    }

    /* ——— Hamburger ——— */
    #menu-btn.open .bar1 {
        transform: translateY(7px) rotate(45deg);
    }

    #menu-btn.open .bar2 {
        opacity: 0;
    }

    #menu-btn.open .bar3 {
        transform: translateY(-7px) rotate(-45deg);
    }

    .bar1,
    .bar2,
    .bar3 {
        display: block;
        width: 22px;
        height: 2px;
        background: var(--navy);
        border-radius: 2px;
        transition: all .3s ease;
    }

    .bar2 {
        width: 16px;
        align-self: flex-end;
    }

    /* ——— Mobile menu ——— */
    #mobile-menu {
        transition: transform .4s cubic-bezier(.23, 1, .32, 1), opacity .4s ease;
    }

    /* ——— Gradient text ——— */
    .grad-text {
        background: linear-gradient(135deg, var(--blue) 0%, var(--teal) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* ——— Process step connector ——— */
    .step-num {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: var(--blue-lt);
        border: 2px solid var(--blue-md);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Syne', sans-serif;
        font-weight: 700;
        color: var(--blue);
        font-size: 1rem;
        flex-shrink: 0;
        transition: all .3s ease;
    }

    /* ——— Scrollbar ——— */
    ::-webkit-scrollbar {
        width: 5px;
    }

    ::-webkit-scrollbar-track {
        background: var(--off);
    }

    ::-webkit-scrollbar-thumb {
        background: var(--border2);
        border-radius: 3px;
    }

    ::selection {
        background: rgba(37, 99, 235, .15);
        color: var(--navy);
    }

    :focus-visible {
        outline: 2px solid var(--blue);
        outline-offset: 3px;
        border-radius: 4px;
    }