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

        :root {
            --bg: #f0f6ff;
            --white: #ffffff;
            --navy: #0a2240;
            --blue: #1a6bff;
            --sky: #5aaeff;
            --accent: #ff6b35;
            --text: #1e2e45;
            --muted: #5a7a99;
            --light: #e3eeff;
            --card: #ffffff;
            --shadow: 0 8px 40px rgba(26, 107, 255, 0.10);
        }

        html {
            scroll-behavior: smooth;
        }

        body {
        font-family: Arial, Helvetica, sans-serif;
            background: var(--bg);
            color: var(--text);
            overflow-x: hidden;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .logo-icon img {
            width: 172px;
            height: 61px;
            margin-top: -12px;
            object-fit: contain;
        }

        .logo-img {
            height: 50px;
            object-fit: contain;

            /* Glow effect for any background */
            filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.7)) drop-shadow(0 0 12px rgba(0, 150, 255, 0.5));
        }

        .logo-text {
            font-size: 22px;
            font-weight: 600;
            color: #111;
        }

        .logo-text span {
            color: #1a6bff;
        }

        /* ── TICKER ── */
        .ticker-bar {
            background: linear-gradient(90deg, var(--navy), #1a3a6b, var(--navy));
            padding: 10px 0;
            overflow: hidden;
            position: relative;
            z-index: 200;
        }

        .ticker-track {
            display: flex;
            gap: 4rem;
            white-space: nowrap;
            animation: tickerRun 22s linear infinite;
        }

        .ticker-item {
            font-size: .75rem;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .75);
            font-weight: 600;
        }

        .ticker-item::before {
            content: '✦  ';
        }

        @keyframes tickerRun {
            from {
                transform: translateX(0);
            }

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

        /* ── NAVBAR ── */
        nav {
            position: sticky;
            top: 0;
            z-index: 150;
            background: rgba(255, 255, 255, .97);
            backdrop-filter: blur(20px);
            border-bottom: 1.5px solid rgba(26, 107, 255, .10);
            padding: 0 5%;
            height: 68px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 2px 24px rgba(26, 107, 255, .08);
            animation: navIn .7s cubic-bezier(.16, 1, .3, 1) both;
        }

        @keyframes navIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }

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

        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
            z-index: 160;
        }

        .logo-icon {
            width: 36px;
            height: 36px;
            flex-shrink: 0;
        }

        .logo-icon svg {
            width: 100%;
            height: 100%;
        }

        .logo-text {
            font-family: 'Syne', sans-serif;
            font-weight: 800;
            font-size: 1.35rem;
            color: var(--navy);
            letter-spacing: -.02em;
        }

        .logo-text span {
            color: var(--blue);
        }

        .nav-links {
            display: flex;
            gap: 2rem;
            list-style: none;
        }

        .nav-links a {
            font-size: .88rem;
            font-weight: 600;
            letter-spacing: .04em;
            color: var(--muted);
            text-decoration: none;
            position: relative;
            padding: 4px 0;
            transition: color .25s;
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--blue);
            border-radius: 2px;
            transition: width .3s ease;
        }

        .nav-links a:hover {
            color: var(--blue);
        }

        .nav-links a:hover::after {
            width: 100%;
        }

        .nav-cta {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-weight: 700;
            font-size: .82rem;
            letter-spacing: .04em;
            color: #fff;
            background: var(--blue);
            border: none;
            padding: 10px 22px;
            border-radius: 8px;
            cursor: pointer;
            box-shadow: 0 4px 16px rgba(26, 107, 255, .3);
            transition: all .25s;
        }

        .nav-cta:hover {
            background: #0051d4;
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(26, 107, 255, .4);
        }

        /* ── HAMBURGER ── */
        .hamburger {
            display: none;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
            z-index: 160;
            padding: 6px;
            background: none;
            border: none;
        }

        .hamburger span {
            width: 24px;
            height: 2.5px;
            background: var(--navy);
            border-radius: 3px;
            transition: all .35s cubic-bezier(.4, 0, .2, 1);
            display: block;
        }

        .hamburger.open span:nth-child(1) {
            transform: translateY(7.5px) rotate(45deg);
        }

        .hamburger.open span:nth-child(2) {
            opacity: 0;
            transform: scaleX(0);
        }

        .hamburger.open span:nth-child(3) {
            transform: translateY(-7.5px) rotate(-45deg);
        }

        /* ── MOBILE MENU OVERLAY ── */
        .mobile-menu {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 140;
            background: rgba(10, 34, 64, .96);
            backdrop-filter: blur(16px);
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0;
            opacity: 0;
            transform: translateY(-100%);
            transition: opacity .4s ease, transform .4s cubic-bezier(.4, 0, .2, 1);
        }

        .mobile-menu.open {
            display: flex;
            opacity: 1;
            transform: translateY(0);
        }

        .mobile-menu ul {
            list-style: none;
            text-align: center;
            width: 100%;
            padding: 0 2rem;
        }

        .mobile-menu ul li {
            border-bottom: 1px solid rgba(255, 255, 255, .07);
        }

        .mobile-menu ul li a {
            display: block;
            padding: 18px 0;
            font-family: 'Syne', sans-serif;
            font-size: 1.4rem;
            font-weight: 700;
            color: rgba(255, 255, 255, .85);
            text-decoration: none;
            transition: color .2s;
            letter-spacing: -.01em;
        }

        .mobile-menu ul li a:hover {
            color: var(--sky);
        }

        .mobile-menu .mob-cta {
            margin-top: 2rem;
            background: var(--blue);
            color: #fff;
            border: none;
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-weight: 700;
            font-size: 1rem;
            padding: 14px 40px;
            border-radius: 10px;
            cursor: pointer;
            box-shadow: 0 4px 20px rgba(26, 107, 255, .4);
        }

        .mobile-menu .mob-contact {
            margin-top: 1.5rem;
            color: rgba(255, 255, 255, .45);
            font-size: .82rem;
            letter-spacing: .1em;
        }

        .mobile-menu .mob-contact a {
            color: var(--sky);
            text-decoration: none;
            font-weight: 600;
        }

        /* ── HERO SLIDER ── */
        .hero-slider {
            position: relative;
            height: 92vh;
            min-height: 560px;
            overflow: hidden;
        }

        .slide {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            padding: 0 8%;
            opacity: 0;
            transition: opacity .8s ease, transform .8s ease;
            transform: translateX(60px);
        }

        .slide.active {
            opacity: 1;
            transform: translateX(0);
        }

        .slide.exit {
            opacity: 0;
            transform: translateX(-60px);
        }

        .slide-bg {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
        }

        .slide-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(105deg, rgba(10, 34, 64, .92) 0%, rgba(26, 107, 255, .3) 100%);
        }

        .slide-content {
            position: relative;
            z-index: 2;
            max-width: 580px;
            color: #fff;
        }

        .slide-badge {
            display: inline-block;
            font-size: .72rem;
            font-weight: 700;
            letter-spacing: .2em;
            text-transform: uppercase;
            color: var(--sky);
            border: 1px solid rgba(90, 174, 255, .4);
            padding: 5px 14px;
            border-radius: 100px;
            margin-bottom: 1.5rem;
            background: rgba(90, 174, 255, .1);
        }

        .slide-content h1 {
            font-family: 'Syne', sans-serif;
            font-weight: 800;
            font-size: clamp(1.9rem, 5vw, 3.8rem);
            line-height: 1.1;
            margin-bottom: 1.2rem;
            animation: slideUp .7s .2s both;
        }

        .slide-content p {
            font-size: 1.05rem;
            color: rgba(255, 255, 255, .8);
            line-height: 1.8;
            margin-bottom: 2rem;
            animation: slideUp .7s .4s both;
        }

        .slide-btns {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            animation: slideUp .7s .6s both;
        }

        .btn-white {
            font-weight: 700;
            font-size: .85rem;
            color: var(--blue);
            background: #fff;
            border: none;
            padding: 13px 28px;
            border-radius: 8px;
            cursor: pointer;
            transition: all .25s;
            box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
        }

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

        .btn-ghost {
            font-weight: 700;
            font-size: .85rem;
            color: #fff;
            background: rgba(255, 255, 255, .12);
            border: 1.5px solid rgba(255, 255, 255, .4);
            padding: 13px 28px;
            border-radius: 8px;
            cursor: pointer;
            transition: all .25s;
            backdrop-filter: blur(4px);
        }

        .btn-ghost:hover {
            background: rgba(255, 255, 255, .22);
            border-color: #fff;
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

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

        /* ── CODING VISUAL ── */
        .slide-code-visual {
            position: absolute;
            right: 4%;
            top: 50%;
            transform: translateY(-50%);
            z-index: 2;
            width: clamp(280px, 40vw, 520px);
        }

        .code-window {
            background: #0d1117;
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 24px 80px rgba(0, 0, 0, .5), 0 0 0 1px rgba(90, 174, 255, .15);
            font-family: 'Courier New', monospace;
        }

        .code-titlebar {
            background: #161b22;
            padding: 10px 16px;
            display: flex;
            align-items: center;
            gap: 8px;
            border-bottom: 1px solid rgba(255, 255, 255, .06);
        }

        .code-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }

        .code-dot.red {
            background: #ff5f56;
        }

        .code-dot.yellow {
            background: #ffbd2e;
        }

        .code-dot.green {
            background: #27c93f;
        }

        .code-filename {
            font-size: .72rem;
            color: rgba(255, 255, 255, .4);
            margin-left: 8px;
            letter-spacing: .05em;
        }

        .code-body {
            padding: 20px 22px;
            font-size: clamp(.62rem, 1.1vw, .78rem);
            line-height: 1.9;
        }

        .code-line {
            display: flex;
            gap: 16px;
        }

        .ln {
            color: rgba(255, 255, 255, .2);
            min-width: 18px;
            text-align: right;
            user-select: none;
        }

        .kw {
            color: #ff79c6;
        }

        .fn {
            color: #50fa7b;
        }

        .str {
            color: #f1fa8c;
        }

        .cm {
            color: #6272a4;
        }

        .var {
            color: #8be9fd;
        }

        .op {
            color: #ff79c6;
        }

        .num {
            color: #bd93f9;
        }

        .tag {
            color: #ff79c6;
        }

        .attr {
            color: #50fa7b;
        }

        .val {
            color: #f1fa8c;
        }

        .plain {
            color: #f8f8f2;
        }

        .code-cursor {
            display: inline-block;
            width: 2px;
            height: 1em;
            background: #50fa7b;
            animation: blink 1s step-end infinite;
            vertical-align: middle;
            margin-left: 2px;
        }

        @keyframes blink {

            0%,
            100% {
                opacity: 1
            }

            50% {
                opacity: 0
            }
        }

        .code-footer {
            background: #161b22;
            padding: 8px 16px;
            display: flex;
            align-items: center;
            gap: 12px;
            border-bottom: 1px solid rgba(255, 255, 255, .06);
        }

        .code-status {
            font-size: .65rem;
            color: rgba(255, 255, 255, .35);
        }

        .code-badge-green {
            font-size: .6rem;
            font-weight: 700;
            background: rgba(39, 201, 63, .15);
            color: #27c93f;
            padding: 2px 8px;
            border-radius: 4px;
            border: 1px solid rgba(39, 201, 63, .3);
        }

        .slide-mobile-visual {
            position: absolute;
            right: 6%;
            bottom: 0;
            z-index: 2;
            width: clamp(200px, 28vw, 340px);
        }

        .slide-mobile-visual svg {
            width: 100%;
            height: auto;
        }

        .slide-cloud-visual {
            position: absolute;
            right: 6%;
            top: 50%;
            transform: translateY(-50%);
            z-index: 2;
            width: clamp(240px, 36vw, 460px);
        }

        .slide-cloud-visual svg {
            width: 100%;
            height: auto;
        }

        .slider-dots {
            position: absolute;
            bottom: 28px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            z-index: 10;
        }

        .dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .4);
            cursor: pointer;
            transition: all .3s;
            border: none;
        }

        .dot.active {
            background: #fff;
            transform: scale(1.3);
        }

        .slider-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .18);
            border: 1.5px solid rgba(255, 255, 255, .35);
            color: #fff;
            font-size: 1.1rem;
            cursor: pointer;
            backdrop-filter: blur(8px);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all .25s;
        }

        .slider-arrow:hover {
            background: rgba(255, 255, 255, .35);
        }

        .arrow-prev {
            left: 24px;
        }

        .arrow-next {
            right: 24px;
        }

        /* ── ABOUT ── */
        .about {
            padding: 80px 8%;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 5rem;
            align-items: center;
        }

        .about-label {
            font-size: .72rem;
            font-weight: 700;
            letter-spacing: .2em;
            text-transform: uppercase;
            color: var(--blue);
            margin-bottom: .8rem;
        }

        .about h2 {
            font-family: 'Syne', sans-serif;
            font-size: clamp(1.8rem, 3.5vw, 2.8rem);
            font-weight: 800;
            color: var(--navy);
            margin-bottom: 1.2rem;
            line-height: 1.2;
        }

        .about p {
            color: var(--muted);
            line-height: 1.8;
            font-size: 1rem;
            margin-bottom: 1rem;
        }

        .about-stats {
            display: flex;
            gap: 2.5rem;
            margin-top: 2rem;
            flex-wrap: wrap;
        }

        .astat-num {
            font-family: 'Syne', sans-serif;
            font-size: 2rem;
            font-weight: 800;
            color: var(--blue);
        }

        .astat-lbl {
            font-size: .78rem;
            color: var(--muted);
            font-weight: 500;
            margin-top: 2px;
        }

        .about-visual {
            position: relative;
        }

        .about-card {
            background: var(--white);
            border-radius: 20px;
            padding: 2.5rem;
            box-shadow: var(--shadow);
            position: relative;
            overflow: hidden;
        }

        .about-card::before {
            content: '';
            position: absolute;
            top: -40px;
            right: -40px;
            width: 160px;
            height: 160px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--light), var(--blue));
            opacity: .15;
        }

        .about-icon-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .about-icon-item {
            background: var(--light);
            border-radius: 12px;
            padding: 1.2rem;
            text-align: center;
            transition: transform .25s;
            cursor: default;
        }

        .about-icon-item:hover {
            transform: translateY(-4px);
        }

        .about-icon-item .icon {
            font-size: 1.8rem;
            margin-bottom: .4rem;
        }

        .about-icon-item span {
            font-size: .75rem;
            font-weight: 600;
            color: var(--navy);
        }

        /* ── SERVICES ── */
        .services {
            padding: 80px 8%;
            background: var(--white);
        }

        .section-header {
            text-align: center;
            margin-bottom: 3.5rem;
        }

        .section-label {
            font-size: .72rem;
            font-weight: 700;
            letter-spacing: .2em;
            text-transform: uppercase;
            color: var(--blue);
            margin-bottom: .6rem;
        }

        .section-title {
            font-family: 'Syne', sans-serif;
            font-size: clamp(1.8rem, 3vw, 2.6rem);
            font-weight: 800;
            color: var(--navy);
        }

        .section-sub {
            color: var(--muted);
            margin-top: .6rem;
            font-size: .95rem;
        }

        .services-scroll-container {
            overflow: hidden;
            position: relative;
        }

        .services-track {
            display: flex;
            gap: 1.5rem;
            animation: servScroll 32s linear infinite;
            width: max-content;
        }

        .services-track:hover {
            animation-play-state: paused;
        }

        .service-card {
            min-width: 280px;
            background: var(--bg);
            border-radius: 16px;
            padding: 2rem 1.8rem;
            border: 1.5px solid var(--light);
            transition: all .3s;
            cursor: default;
            display: flex;
            flex-direction: column;
            gap: .8rem;
        }

        .service-card:hover {
            background: #fff;
            border-color: var(--blue);
            box-shadow: 0 8px 32px rgba(26, 107, 255, .12);
            transform: translateY(-6px);
        }

        .service-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            background: linear-gradient(135deg, var(--light), #d0e4ff);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
        }

        .service-card h3 {
            font-family: 'Syne', sans-serif;
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--navy);
        }

        .service-card ul {
            list-style: none;
            padding: 0;
        }

        .service-card ul li {
            font-size: .83rem;
            color: var(--muted);
            padding: 4px 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .service-card ul li::before {
            content: '→';
            color: var(--blue);
            font-weight: 700;
        }

        @keyframes servScroll {
            from {
                transform: translateX(0);
            }

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

        /* ── STATS ── */
        .stats-section {
            padding: 80px 8%;
            background: linear-gradient(135deg, var(--navy) 0%, #1a3a6b 100%);
            text-align: center;
        }

        .stats-section .section-title {
            color: #fff;
        }

        .stats-section .section-label {
            color: var(--sky);
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2rem;
            margin-top: 3rem;
        }

        .stat-card {
            background: rgba(255, 255, 255, .06);
            border-radius: 16px;
            padding: 2rem 1rem;
            border: 1px solid rgba(255, 255, 255, .1);
            transition: all .3s;
        }

        .stat-card:hover {
            background: rgba(255, 255, 255, .12);
            transform: translateY(-4px);
        }

        .stat-num {
            font-family: 'Syne', sans-serif;
            font-size: 2.8rem;
            font-weight: 800;
            color: #fff;
            display: block;
            background: linear-gradient(90deg, var(--sky), #fff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .stat-lbl {
            font-size: .8rem;
            color: rgba(255, 255, 255, .65);
            margin-top: .4rem;
            font-weight: 500;
            letter-spacing: .05em;
        }

        .stat-icon {
            font-size: 2rem;
            margin-bottom: .8rem;
        }

        /* ── PROJECTS ── */
        .projects {
            padding: 80px 8%;
            background: var(--bg);
        }

        .proj-slider-wrap {
            position: relative;
            overflow: hidden;
            border-radius: 20px;
        }

        .proj-track {
            display: flex;
            transition: transform .6s cubic-bezier(.4, 0, .2, 1);
        }

        .proj-slide {
            min-width: 100%;
            display: grid;
            grid-template-columns: 1.1fr .9fr;
            background: var(--white);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--shadow);
        }

        .proj-image {
            height: 380px;
            background-size: cover;
            background-position: center;
            position: relative;
            overflow: hidden;
        }

        .proj-image::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to right, transparent 60%, var(--white));
        }

        .proj-tag {
            position: absolute;
            top: 1.2rem;
            left: 1.2rem;
            background: var(--blue);
            color: #fff;
            font-size: .7rem;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase;
            padding: 4px 12px;
            border-radius: 100px;
        }

        .proj-info {
            padding: 3rem 2.5rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .proj-info h3 {
            font-family: 'Syne', sans-serif;
            font-size: 1.6rem;
            font-weight: 800;
            color: var(--navy);
            margin-bottom: .8rem;
        }

        .proj-info p {
            color: var(--muted);
            line-height: 1.8;
            font-size: .92rem;
            margin-bottom: 1.5rem;
        }

        .proj-tech {
            display: flex;
            gap: .5rem;
            flex-wrap: wrap;
            margin-bottom: 1.8rem;
        }

        .tech-tag {
            font-size: .72rem;
            font-weight: 600;
            color: var(--blue);
            background: var(--light);
            padding: 4px 10px;
            border-radius: 6px;
        }

        .proj-link {
            font-weight: 700;
            font-size: .85rem;
            color: var(--blue);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: gap .2s;
        }

        .proj-link:hover {
            gap: 10px;
        }

        .proj-nav {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            margin-top: 2rem;
        }

        .proj-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--light);
            border: none;
            cursor: pointer;
            transition: .3s;
        }

        .proj-dot.active {
            background: var(--blue);
            transform: scale(1.3);
        }

        .proj-arrow {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--white);
            border: 1.5px solid var(--light);
            color: var(--navy);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all .25s;
            font-size: .9rem;
        }

        .proj-arrow:hover {
            background: var(--blue);
            color: #fff;
            border-color: var(--blue);
        }

        /* ── TECHNOLOGIES ── */
        .tech-section {
            padding: 80px 8%;
            background: var(--white);
        }

        .tech-logos {
            display: flex;
            flex-wrap: wrap;
            gap: 1.2rem;
            justify-content: center;
            margin-top: 2.5rem;
        }

        .tech-pill {
            background: var(--bg);
            border: 1.5px solid var(--light);
            border-radius: 100px;
            padding: .6rem 1.4rem;
            font-size: .82rem;
            font-weight: 600;
            color: var(--navy);
            display: flex;
            align-items: center;
            gap: .5rem;
            transition: all .25s;
            cursor: default;
        }

        .tech-pill:hover {
            background: var(--blue);
            color: #fff;
            border-color: var(--blue);
            transform: translateY(-2px);
        }

        /* ── TESTIMONIALS ── */
        .testimonials {
            padding: 80px 8%;
            background: var(--bg);
        }

        .testi-slider-wrap {
            position: relative;
            overflow: hidden;
        }

        .testi-track {
            display: flex;
            transition: transform .6s cubic-bezier(.4, 0, .2, 1);
        }

        /* Desktop: 3 cards per slide */
        .testi-slide {
            min-width: 100%;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
        }

        .testi-card {
            background: var(--white);
            border-radius: 16px;
            padding: 2rem;
            box-shadow: var(--shadow);
            border: 1px solid var(--light);
            transition: transform .3s;
        }

        .testi-card:hover {
            transform: translateY(-4px);
        }

        .testi-stars {
            color: #ffb800;
            font-size: .9rem;
            margin-bottom: 1rem;
        }

        .testi-text {
            font-size: .9rem;
            color: var(--text);
            line-height: 1.8;
            margin-bottom: 1.5rem;
            font-style: italic;
        }

        .testi-author {
            display: flex;
            align-items: center;
            gap: .8rem;
        }

        .testi-avatar {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--blue), var(--sky));
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            color: #fff;
            font-size: .95rem;
            flex-shrink: 0;
        }

        .testi-name {
            font-weight: 700;
            font-size: .88rem;
            color: var(--navy);
        }

        .testi-role {
            font-size: .75rem;
            color: var(--muted);
        }

        .testi-nav {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            margin-top: 2rem;
        }

        .testi-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--light);
            border: none;
            cursor: pointer;
            transition: .3s;
        }

        .testi-dot.active {
            background: var(--blue);
            transform: scale(1.3);
        }

        .testi-arrow {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--white);
            border: 1.5px solid var(--light);
            color: var(--navy);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all .25s;
            font-size: .9rem;
        }

        .testi-arrow:hover {
            background: var(--blue);
            color: #fff;
            border-color: var(--blue);
        }

        /* ── WHY US ── */
        .why-us {
            padding: 80px 8%;
            background: var(--white);
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 5rem;
            align-items: center;
        }

        .why-list {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            margin-top: 2rem;
        }

        .why-item {
            display: flex;
            gap: 1.2rem;
            align-items: flex-start;
        }

        .why-num {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            background: linear-gradient(135deg, var(--blue), var(--sky));
            color: #fff;
            font-weight: 800;
            font-size: .85rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .why-item h4 {
            font-family: 'Syne', sans-serif;
            font-size: 1rem;
            font-weight: 700;
            color: var(--navy);
            margin-bottom: .3rem;
        }

        .why-item p {
            font-size: .85rem;
            color: var(--muted);
            line-height: 1.7;
        }

        /* ── CONTACT ── */
        .contact {
            padding: 80px 8%;
            background: linear-gradient(135deg, var(--navy), #1a3a6b);
        }

        .contact-inner {
            max-width: 700px;
            margin: 0 auto;
            text-align: center;
        }

        .contact h2 {
            font-family: 'Syne', sans-serif;
            font-size: clamp(1.8rem, 3vw, 2.6rem);
            font-weight: 800;
            color: #fff;
            margin-bottom: .8rem;
        }

        .contact p {
            color: rgba(255, 255, 255, .7);
            line-height: 1.8;
            margin-bottom: 2.5rem;
        }

        .contact-cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
            margin-bottom: 2.5rem;
        }

        .contact-card {
            background: rgba(255, 255, 255, .07);
            border-radius: 14px;
            padding: 1.5rem 1rem;
            border: 1px solid rgba(255, 255, 255, .12);
            text-align: center;
            transition: .3s;
        }

        .contact-card:hover {
            background: rgba(255, 255, 255, .14);
            transform: translateY(-3px);
        }

        .contact-card .icon {
            font-size: 1.6rem;
            margin-bottom: .6rem;
        }

        .contact-card span {
            font-size: .78rem;
            color: rgba(255, 255, 255, .6);
            display: block;
            margin-bottom: .3rem;
            letter-spacing: .1em;
            text-transform: uppercase;
        }

        .contact-card a {
            color: #fff;
            font-weight: 600;
            font-size: .88rem;
            text-decoration: none;
        }

        .contact-card a:hover {
            color: var(--sky);
        }

        .contact-form {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }

        .contact-form input,
        .contact-form textarea {
            background: rgba(255, 255, 255, .08);
            border: 1px solid rgba(255, 255, 255, .2);
            border-radius: 10px;
            padding: 13px 16px;
            color: #fff;
            font-family: inherit;
            font-size: .9rem;
            outline: none;
            transition: .25s;
            width: 100%;
        }

        .contact-form input::placeholder,
        .contact-form textarea::placeholder {
            color: rgba(255, 255, 255, .45);
        }

        .contact-form input:focus,
        .contact-form textarea:focus {
            border-color: var(--sky);
            background: rgba(255, 255, 255, .12);
        }

        .contact-form textarea {
            grid-column: span 2;
            resize: vertical;
            min-height: 110px;
        }

        .contact-form button {
            grid-column: span 2;
            background: linear-gradient(90deg, var(--blue), var(--sky));
            color: #fff;
            border: none;
            border-radius: 10px;
            padding: 14px;
            font-family: inherit;
            font-weight: 700;
            font-size: .9rem;
            cursor: pointer;
            transition: all .25s;
            box-shadow: 0 4px 20px rgba(26, 107, 255, .4);
        }

        .contact-form button:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(26, 107, 255, .5);
        }

        /* ── FOOTER ── */
        footer {
            background: var(--navy);
            padding: 50px 8% 24px;
            color: rgba(255, 255, 255, .7);
        }

        .footer-top {
            display: grid;
            grid-template-columns: 1.5fr 1fr 1fr 1fr;
            gap: 3rem;
            margin-bottom: 3rem;
        }

        .footer-brand p {
            font-size: .85rem;
            line-height: 1.8;
            margin-top: .8rem;
            color: rgba(255, 255, 255, .5);
        }

        .footer-social {
            display: flex;
            gap: .7rem;
            margin-top: 1.2rem;
        }

        .social-btn {
            width: 34px;
            height: 34px;
            border-radius: 8px;
            background: rgba(255, 255, 255, .08);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .85rem;
            text-decoration: none;
            color: #fff;
            transition: .25s;
        }

        .social-btn:hover {
            background: var(--blue);
        }

        .footer-col h4 {
            font-family: 'Syne', sans-serif;
            font-size: .88rem;
            font-weight: 700;
            color: #fff;
            margin-bottom: 1rem;
            letter-spacing: .05em;
        }

        .footer-col ul {
            list-style: none;
        }

        .footer-col ul li {
            margin-bottom: .5rem;
        }

        .footer-col ul li a {
            font-size: .82rem;
            color: rgba(255, 255, 255, .5);
            text-decoration: none;
            transition: .2s;
        }

        .footer-col ul li a:hover {
            color: var(--sky);
        }

        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, .08);
            padding-top: 1.2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: .5rem;
        }

        .footer-bottom p {
            font-size: .78rem;
            color: rgba(255, 255, 255, .4);
        }

        /* ── SCROLL REVEAL ── */
        .reveal {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity .7s ease, transform .7s ease;
        }

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

        /* ══════════════════════════════════════
           RESPONSIVE — TABLET (≤ 900px)
        ══════════════════════════════════════ */
        @media (max-width: 900px) {

            /* Navbar */
            .nav-links,
            .nav-cta {
                display: none;
            }

            .hamburger {
                display: flex;
            }

            /* Hero */
            .slide {
                padding: 0 6%;
            }

            .slide-content {
                max-width: 100%;
            }

            .slide-content h1 {
                font-size: clamp(1.7rem, 6vw, 2.8rem);
            }

            .slide-content p {
                font-size: .95rem;
            }

            .slide-code-visual,
            .slide-mobile-visual,
            .slide-cloud-visual {
                display: none;
            }

            /* About */
            .about {
                grid-template-columns: 1fr;
                gap: 2.5rem;
                padding: 60px 6%;
            }

            /* Stats */
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 1.2rem;
            }

            /* Projects */
            .proj-slide {
                grid-template-columns: 1fr;
            }

            .proj-image {
                height: 220px;
            }

            .proj-image::after {
                background: linear-gradient(to bottom, transparent 60%, var(--white));
            }

            .proj-info {
                padding: 2rem 1.8rem;
            }

            /* Testimonials – 1 per slide on tablet */
            .testi-slide {
                grid-template-columns: 1fr;
            }

            /* Why us */
            .why-us {
                grid-template-columns: 1fr;
                gap: 2.5rem;
                padding: 60px 6%;
            }

            /* Contact */
            .contact-cards {
                grid-template-columns: 1fr;
                gap: .8rem;
            }

            /* Footer */
            .footer-top {
                grid-template-columns: 1fr 1fr;
                gap: 2rem;
            }
        }

        /* ══════════════════════════════════════
           RESPONSIVE — MOBILE (≤ 600px)
        ══════════════════════════════════════ */
        @media (max-width: 600px) {

            /* Ticker */
            .ticker-item {
                font-size: .65rem;
                letter-spacing: .12em;
            }

            /* Navbar */
            nav {
                padding: 0 4%;
                height: 62px;
            }

            .logo-text {
                font-size: 1.15rem;
            }

            /* Hero */
            .hero-slider {
                height: auto;
                min-height: 60vh;
            }

            .slide {
                padding: 80px 5% 60px;
                align-items: flex-end;
            }

            .slide-content h1 {
                font-size: clamp(1.6rem, 7vw, 2.2rem);
            }

            .slide-content p {
                font-size: .88rem;
                line-height: 1.7;
            }

            .slide-btns {
                gap: .7rem;
            }

            .btn-white,
            .btn-ghost {
                padding: 11px 20px;
                font-size: .8rem;
            }

            .slider-arrow {
                width: 36px;
                height: 36px;
                font-size: .9rem;
            }

            .arrow-prev {
                left: 12px;
            }

            .arrow-next {
                right: 12px;
            }

            /* About */
            .about {
                padding: 50px 5%;
            }

            .about-stats {
                gap: 1.5rem;
            }

            .about-icon-grid {
                grid-template-columns: 1fr 1fr;
                gap: .7rem;
            }

            .about-icon-item {
                padding: 1rem .8rem;
            }

            .about-card {
                padding: 1.8rem 1.4rem;
            }

            /* Section padding */
            .services,
            .tech-section,
            .testimonials,
            .projects {
                padding: 50px 5%;
            }

            .stats-section {
                padding: 50px 5%;
            }

            .stats-grid {
                grid-template-columns: 1fr 1fr;
                gap: 1rem;
            }

            .stat-num {
                font-size: 2.2rem;
            }

            /* Projects */
            .proj-info {
                padding: 1.5rem 1.2rem;
            }

            .proj-info h3 {
                font-size: 1.2rem;
            }

            /* Services card min-width */
            .service-card {
                min-width: 240px;
                padding: 1.5rem 1.3rem;
            }

            /* Testimonials */
            .testi-card {
                padding: 1.5rem 1.2rem;
            }

            .testi-text {
                font-size: .85rem;
            }

            /* Why us */
            .why-us {
                padding: 50px 5%;
            }

            .why-item {
                gap: 1rem;
            }

            .why-num {
                width: 36px;
                height: 36px;
                font-size: .78rem;
            }

            /* Contact */
            .contact {
                padding: 50px 5%;
            }

            .contact-form {
                grid-template-columns: 1fr;
            }

            .contact-form textarea {
                grid-column: span 1;
            }

            .contact-form button {
                grid-column: span 1;
            }

            /* Footer */
            .footer-top {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .footer-bottom {
                flex-direction: column;
                align-items: flex-start;
                gap: .4rem;
            }

            footer {
                padding: 40px 5% 20px;
            }

            /* Section headers */
            .section-header {
                margin-bottom: 2.5rem;
            }
        }

        /* Extra small phones */
        @media (max-width: 380px) {
            .slide-content h1 {
                font-size: 1.45rem;
            }

            .about-icon-grid {
                grid-template-columns: 1fr 1fr;
            }

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

        /* ============================================================
   ABOUT US PAGE — about.css
   Add this file: public/css/about.css
   Link in webheader layout OR in the blade via @push('styles')
   All new classes use ap- prefix to avoid conflicts with main CSS
   ============================================================ */

        /* ── PAGE HERO ── */
        .page-hero {
            background: linear-gradient(135deg, #0a2240 0%, #0d2d52 60%, #0a4080 100%);
            padding: 90px 8% 85px;
            position: relative;
            overflow: hidden;
        }

        .page-hero::before {
            content: '';
            position: absolute;
            top: -120px;
            right: -120px;
            width: 520px;
            height: 520px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(26, 107, 255, .28) 0%, transparent 70%);
            pointer-events: none;
        }

        .page-hero::after {
            content: '';
            position: absolute;
            bottom: -80px;
            left: -80px;
            width: 360px;
            height: 360px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(90, 174, 255, .13) 0%, transparent 70%);
            pointer-events: none;
        }

        .page-hero-inner {
            position: relative;
            z-index: 2;
            /* max-width: 720px; */
        }

        .breadcrumb {
            display: flex;
            align-items: center;
            gap: .5rem;
            font-size: .8rem;
            color: rgba(255, 255, 255, .5);
            margin-bottom: 1.4rem;
            animation: apSlideUp .6s .05s both;
        }

        .breadcrumb a {
            color: var(--sky);
            text-decoration: none;
            transition: color .2s;
        }

        .breadcrumb a:hover {
            color: #fff;
        }

        .breadcrumb span {
            color: rgba(255, 255, 255, .3);
        }

        .about-page-label {
            font-size: .72rem;
            font-weight: 700;
            letter-spacing: .2em;
            text-transform: uppercase;
            color: var(--sky);
            margin-bottom: .9rem;
            animation: apSlideUp .6s .1s both;
        }

        .page-hero h1 {
            font-family: 'Syne', sans-serif;
            font-size: clamp(2.2rem, 5vw, 3.8rem);
            font-weight: 800;
            color: #fff;
            line-height: 1.1;
            margin-bottom: 1.4rem;
            animation: apSlideUp .7s .2s both;
        }

        .page-hero p {
            font-size: 1.05rem;
            color: rgba(255, 255, 255, .75);
            line-height: 1.85;
            max-width: 580px;
            animation: apSlideUp .7s .35s both;
        }

        @keyframes apSlideUp {
            from {
                opacity: 0;
                transform: translateY(28px);
            }

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

        /* ── OUR STORY ── */
        .ap-story {
            padding: 90px 8%;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 5rem;
            align-items: center;
        }

        .ap-story h2 {
            font-family: 'Syne', sans-serif;
            font-size: clamp(1.8rem, 3.5vw, 2.8rem);
            font-weight: 800;
            color: var(--navy);
            margin-bottom: 1.2rem;
            line-height: 1.2;
        }

        .ap-story p {
            color: var(--muted);
            line-height: 1.85;
            font-size: .97rem;
            margin-bottom: 1rem;
        }

        /* Timeline */
        .ap-timeline {
            margin-top: 2rem;
            display: flex;
            flex-direction: column;
            gap: 1.2rem;
        }

        .ap-tl-item {
            display: flex;
            gap: 1.2rem;
            align-items: flex-start;
        }

        .ap-tl-year {
            background: linear-gradient(135deg, var(--blue), var(--sky));
            color: #fff;
            font-family: 'Syne', sans-serif;
            font-weight: 800;
            font-size: .76rem;
            padding: 5px 13px;
            border-radius: 100px;
            white-space: nowrap;
            flex-shrink: 0;
            margin-top: 3px;
            letter-spacing: .04em;
        }

        .ap-tl-desc {
            font-size: .88rem;
            color: var(--muted);
            line-height: 1.75;
        }

        .ap-tl-desc strong {
            color: var(--navy);
        }

        /* About card icon grid — extend to 6 items (3 cols already via grid) */
        .ap-story .about-icon-grid {
            grid-template-columns: 1fr 1fr;
        }

        /* ── MISSION / VISION / VALUES ── */
        .ap-mvv {
            padding: 90px 8%;
            background: var(--white);
        }

        .ap-mvv-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            margin-top: 3.5rem;
        }

        .ap-mvv-card {
            background: var(--bg);
            border-radius: 18px;
            padding: 2.2rem 2rem;
            border: 1.5px solid var(--light);
            transition: all .3s;
            cursor: default;
            position: relative;
            overflow: hidden;
        }

        .ap-mvv-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, var(--blue), var(--sky));
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .35s ease;
        }

        .ap-mvv-card:hover {
            background: #fff;
            box-shadow: var(--shadow);
            transform: translateY(-6px);
        }

        .ap-mvv-card:hover::after {
            transform: scaleX(1);
        }

        .ap-mvv-icon {
            width: 52px;
            height: 52px;
            border-radius: 14px;
            background: linear-gradient(135deg, var(--light), #d0e4ff);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            margin-bottom: 1.2rem;
        }

        .ap-mvv-card h3 {
            font-family: 'Syne', sans-serif;
            font-size: 1.15rem;
            font-weight: 800;
            color: var(--navy);
            margin-bottom: .8rem;
        }

        .ap-mvv-card p {
            font-size: .88rem;
            color: var(--muted);
            line-height: 1.8;
        }

        /* ── TEAM ── */
        .ap-team {
            padding: 90px 8%;
            background: var(--bg);
        }

        .ap-team-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            margin-top: 3.5rem;
        }

        .ap-team-card {
            background: var(--white);
            border-radius: 18px;
            padding: 2rem 1.8rem;
            text-align: center;
            box-shadow: var(--shadow);
            border: 1px solid var(--light);
            transition: all .3s;
            cursor: default;
        }

        .ap-team-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 16px 48px rgba(26, 107, 255, .15);
        }

        .ap-team-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin: 0 auto 1.2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Syne', sans-serif;
            font-weight: 800;
            font-size: 1.5rem;
            color: #fff;
            background: linear-gradient(135deg, var(--blue), var(--sky));
            box-shadow: 0 8px 24px rgba(26, 107, 255, .3);
        }

        .ap-team-name {
            font-family: 'Syne', sans-serif;
            font-size: 1.05rem;
            font-weight: 800;
            color: var(--navy);
            margin-bottom: .3rem;
        }

        .ap-team-role {
            font-size: .76rem;
            font-weight: 700;
            color: var(--blue);
            letter-spacing: .07em;
            text-transform: uppercase;
            margin-bottom: .9rem;
        }

        .ap-team-bio {
            font-size: .84rem;
            color: var(--muted);
            line-height: 1.75;
        }

        .ap-team-skills {
            display: flex;
            flex-wrap: wrap;
            gap: .4rem;
            justify-content: center;
            margin-top: 1rem;
        }

        /* ── PROCESS ── */
        .ap-process {
            padding: 90px 8%;
            background: var(--white);
        }

        .ap-process-steps {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.5rem;
            margin-top: 3.5rem;
            position: relative;
        }

        .ap-process-steps::before {
            content: '';
            position: absolute;
            top: 36px;
            left: 9%;
            right: 9%;
            height: 2px;
            background: linear-gradient(90deg, var(--blue), var(--sky));
            opacity: .25;
            z-index: 0;
        }

        .ap-process-step {
            text-align: center;
            position: relative;
            z-index: 1;
        }

        .ap-step-num {
            width: 72px;
            height: 72px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--blue), var(--sky));
            color: #fff;
            font-family: 'Syne', sans-serif;
            font-weight: 800;
            font-size: 1.3rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.2rem;
            box-shadow: 0 8px 24px rgba(26, 107, 255, .3);
            transition: transform .25s;
        }

        .ap-process-step:hover .ap-step-num {
            transform: scale(1.1);
        }

        .ap-process-step h4 {
            font-family: 'Syne', sans-serif;
            font-size: .95rem;
            font-weight: 800;
            color: var(--navy);
            margin-bottom: .5rem;
        }

        .ap-process-step p {
            font-size: .82rem;
            color: var(--muted);
            line-height: 1.75;
        }

        /* ── CTA BUTTONS (inside .contact section) ── */
        .ap-cta-btns {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
            margin-top: .5rem;
        }

        .ap-cta-btns .btn-white {
            font-weight: 700;
            font-size: .88rem;
            color: var(--blue);
            background: #fff;
            border: none;
            padding: 14px 32px;
            border-radius: 8px;
            cursor: pointer;
            transition: all .25s;
            box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
            text-decoration: none;
            display: inline-block;
        }

        .ap-cta-btns .btn-white:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, .2);
        }

        .ap-cta-btns .btn-ghost {
            font-weight: 700;
            font-size: .88rem;
            color: #fff;
            background: rgba(255, 255, 255, .12);
            border: 1.5px solid rgba(255, 255, 255, .4);
            padding: 14px 32px;
            border-radius: 8px;
            cursor: pointer;
            transition: all .25s;
            backdrop-filter: blur(4px);
            text-decoration: none;
            display: inline-block;
        }

        .ap-cta-btns .btn-ghost:hover {
            background: rgba(255, 255, 255, .22);
            border-color: #fff;
        }

        /* ============================================================
   RESPONSIVE — TABLET (≤ 900px)
   ============================================================ */
        @media (max-width: 900px) {
            .page-hero {
                padding: 70px 6% 65px;
            }

            .ap-story {
                grid-template-columns: 1fr;
                gap: 2.5rem;
                padding: 60px 6%;
            }

            .ap-mvv {
                padding: 60px 6%;
            }

            .ap-mvv-grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }

            .ap-team {
                padding: 60px 6%;
            }

            .ap-team-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 1.5rem;
            }

            .ap-process {
                padding: 60px 6%;
            }

            .ap-process-steps {
                grid-template-columns: repeat(2, 1fr);
                gap: 2rem;
            }

            .ap-process-steps::before {
                display: none;
            }
        }

        /* ============================================================
   RESPONSIVE — MOBILE (≤ 600px)
   ============================================================ */
        @media (max-width: 600px) {
            .page-hero {
                padding: 65px 5% 55px;
            }

            .page-hero h1 {
                font-size: clamp(1.8rem, 7.5vw, 2.4rem);
            }

            .page-hero p {
                font-size: .92rem;
            }

            .ap-story {
                padding: 50px 5%;
            }

            .ap-mvv {
                padding: 50px 5%;
            }

            .ap-team {
                padding: 50px 5%;
            }

            .ap-team-grid {
                grid-template-columns: 1fr;
            }

            .ap-process {
                padding: 50px 5%;
            }

            .ap-process-steps {
                grid-template-columns: 1fr;
            }

            .ap-cta-btns {
                flex-direction: column;
                align-items: center;
            }

            .ap-cta-btns .btn-white,
            .ap-cta-btns .btn-ghost {
                width: 100%;
                max-width: 320px;
                text-align: center;
            }
        }

        /* ── Extra small phones ── */
        @media (max-width: 380px) {
            .page-hero h1 {
                font-size: 1.6rem;
            }

            .ap-team-grid {
                grid-template-columns: 1fr;
            }
        }


        /* ── SERVICE CARDS ── */
        .ap-srv-card {
            background: var(--white);
            border-radius: 18px;
            padding: 2rem 1.8rem;
            border: 1.5px solid var(--light);
            transition: all .3s;
            cursor: default;
            position: relative;
            overflow: hidden;
        }

        .ap-srv-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, var(--blue), var(--sky));
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .35s ease;
        }

        .ap-srv-card:hover {
            background: #fff;
            box-shadow: var(--shadow);
            transform: translateY(-6px);
            border-color: var(--blue);
        }

        .ap-srv-card:hover::after {
            transform: scaleX(1);
        }

        .ap-srv-icon {
            width: 56px;
            height: 56px;
            border-radius: 14px;
            background: linear-gradient(135deg, var(--light), #d0e4ff);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.6rem;
            margin-bottom: 1.2rem;
        }

        .ap-srv-card h3 {
            font-family: 'Syne', sans-serif;
            font-size: 1.1rem;
            font-weight: 800;
            color: var(--navy);
            margin-bottom: .7rem;
        }

        .ap-srv-card p {
            font-size: .87rem;
            color: var(--muted);
            line-height: 1.8;
            margin-bottom: 1.2rem;
        }

        .ap-srv-card ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .ap-srv-card ul li {
            font-size: .82rem;
            color: var(--muted);
            padding: 5px 0;
            display: flex;
            align-items: center;
            gap: 8px;
            border-bottom: 1px solid var(--light);
        }

        .ap-srv-card ul li:last-child {
            border-bottom: none;
        }

        .ap-srv-card ul li::before {
            content: '→';
            color: var(--blue);
            font-weight: 700;
            flex-shrink: 0;
        }

        /* ── SERVICES GRID ── */
        .ap-srv-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            margin-top: 3.5rem;
        }

        /* Tablet */
        @media (max-width: 900px) {
            .ap-srv-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .ap-srv-card--center {
                grid-column: auto;
            }

            .ap-services-list {
                padding: 60px 6% !important;
            }
        }

        /* Mobile */
        @media (max-width: 600px) {
            .ap-srv-grid {
                grid-template-columns: 1fr;
            }

            .ap-services-list {
                padding: 50px 5% !important;
            }

            .ap-srv-card {
                padding: 1.6rem 1.4rem;
            }

            .ap-srv-icon {
                width: 48px;
                height: 48px;
                font-size: 1.4rem;
            }
        }

        /* ── PROJECTS PAGE ── */
        .ap-proj-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
        }

        .ap-proj-card {
            background: var(--white);
            border-radius: 18px;
            overflow: hidden;
            border: 1.5px solid var(--light);
            box-shadow: var(--shadow);
            display: flex;
            flex-direction: column;
            transition: all .3s;
            cursor: default;
        }

        .ap-proj-card:hover {
        
            box-shadow: 0 16px 48px rgba(26, 107, 255, .15);
            border-color: var(--blue);
        }

        .ap-proj-img {
            height: 200px;
            overflow: hidden;
            display: block;
            position: relative;
        }

        .ap-proj-card:hover .ap-proj-img img {
            transform: scale(1.05);
        }

        .ap-proj-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top center;
            display: block;
            transition: transform 0.4s ease;
        }

        .ap-proj-img-inner {
            font-size: 3.5rem;
            filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .2));
        }

        .ap-proj-body {
            padding: 1.6rem;
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        .ap-proj-tags {
            display: flex;
            flex-wrap: wrap;
            gap: .4rem;
            margin-bottom: .9rem;
        }

        .ap-proj-tag {
            font-size: .7rem;
            font-weight: 700;
            color: var(--blue);
            background: var(--light);
            padding: 3px 10px;
            border-radius: 6px;
            letter-spacing: .04em;
        }

        .ap-proj-card h3 {
            font-family: 'Syne', sans-serif;
            font-size: 1.05rem;
            font-weight: 800;
            color: var(--navy);
            margin-bottom: .6rem;
            line-height: 1.3;
        }

        .ap-proj-card p {
            font-size: .84rem;
            color: var(--muted);
            line-height: 1.75;
            margin-bottom: 1.2rem;
            flex: 1;
        }

        .ap-proj-stats {
            display: flex;
            gap: .5rem;
            flex-wrap: wrap;
            border-top: 1px solid var(--light);
            padding-top: 1rem;
            margin-top: auto;
        }

        .ap-proj-stat {
            flex: 1;
            min-width: 60px;
            text-align: center;
            font-size: .72rem;
            color: var(--muted);
            line-height: 1.4;
        }

        .ap-proj-stat span {
            display: block;
            font-family: 'Syne', sans-serif;
            font-size: .95rem;
            font-weight: 800;
            color: var(--blue);
            margin-bottom: 2px;
        }

        /* ── FILTER BUTTONS ── */
        .ap-filter-btn {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: .82rem;
            font-weight: 600;
            color: var(--muted);
            background: var(--white);
            border: 1.5px solid var(--light);
            padding: 9px 20px;
            border-radius: 100px;
            cursor: pointer;
            transition: all .25s;
        }

        .ap-filter-btn:hover {
            border-color: var(--blue);
            color: var(--blue);
        }

        .ap-filter-btn.active {
            background: var(--blue);
            color: #fff;
            border-color: var(--blue);
            box-shadow: 0 4px 14px rgba(26, 107, 255, .3);
        }

        /* ── RESPONSIVE ── */
        @media (max-width: 900px) {
            .ap-proj-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 600px) {
            .ap-proj-grid {
                grid-template-columns: 1fr;
            }

            .ap-proj-img {
                height: 130px;
            }

            .ap-proj-img-inner {
                font-size: 2.8rem;
            }

            .ap-proj-body {
                padding: 1.3rem;
            }

            .ap-filter-btn {
                font-size: .78rem;
                padding: 8px 16px;
            }
        }

        /* ── INDUSTRY CARDS ── */
        .ap-industry-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            margin-top: 3.5rem;
        }

        .ap-industry-card {
            background: var(--white);
            border-radius: 18px;
            padding: 2rem 1.8rem;
            border: 1.5px solid var(--light);
            transition: all .3s;
            cursor: default;
            position: relative;
            overflow: hidden;
        }

        .ap-industry-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, var(--blue), var(--sky));
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .35s ease;
        }

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

        .ap-industry-card:hover::after {
            transform: scaleX(1);
        }

        .ap-industry-icon {
            width: 60px;
            height: 60px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            margin-bottom: 1.2rem;
        }

        .ap-industry-card h3 {
            font-family: 'Syne', sans-serif;
            font-size: 1.05rem;
            font-weight: 800;
            color: var(--navy);
            margin-bottom: .6rem;
        }

        .ap-industry-card p {
            font-size: .85rem;
            color: var(--muted);
            line-height: 1.8;
            margin-bottom: 1.2rem;
        }

        .ap-industry-list {
            display: flex;
            flex-wrap: wrap;
            gap: .4rem;
        }

        .ap-industry-list span {
            font-size: .72rem;
            font-weight: 600;
            color: var(--blue);
            background: var(--light);
            padding: 4px 10px;
            border-radius: 6px;
        }

        /* ── TECH CATEGORIES ── */
        .ap-tech-categories {
            display: flex;
            flex-direction: column;
            gap: 2rem;
            margin-top: 3.5rem;
        }

        .ap-tech-cat {
            background: var(--bg);
            border-radius: 16px;
            padding: 1.6rem 2rem;
            border: 1.5px solid var(--light);
            display: flex;
            align-items: center;
            gap: 2rem;
            flex-wrap: wrap;
        }

        .ap-tech-cat-label {
            font-family: 'Syne', sans-serif;
            font-size: .88rem;
            font-weight: 800;
            color: var(--navy);
            min-width: 140px;
            flex-shrink: 0;
        }

        .ap-tech-pills {
            display: flex;
            flex-wrap: wrap;
            gap: .6rem;
        }

        /* ── RESPONSIVE ── */
        @media (max-width: 900px) {
            .ap-industry-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .ap-tech-cat {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }

            .ap-tech-cat-label {
                min-width: unset;
            }
        }

        @media (max-width: 600px) {
            .ap-industry-grid {
                grid-template-columns: 1fr;
            }

            .ap-industry-card {
                padding: 1.5rem 1.3rem;
            }

            .ap-tech-cat {
                padding: 1.3rem 1.4rem;
            }
        }

        /* ── CONTACT INFO GRID ── */
        .ap-contact-info-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.5rem;
            margin-bottom: 0;
        }

        .ap-contact-info-card {
            background: var(--white);
            border-radius: 16px;
            padding: 1.8rem 1.5rem;
            border: 1.5px solid var(--light);
            text-align: center;
            transition: all .3s;
        }

        .ap-contact-info-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow);
            border-color: var(--blue);
        }

        .ap-contact-info-icon {
            width: 56px;
            height: 56px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.6rem;
            margin: 0 auto 1rem;
        }

        .ap-contact-info-card h4 {
            font-family: 'Syne', sans-serif;
            font-size: .95rem;
            font-weight: 800;
            color: var(--navy);
            margin-bottom: .3rem;
        }

        .ap-contact-info-card p {
            font-size: .78rem;
            color: var(--muted);
            margin-bottom: .5rem;
        }

        .ap-contact-info-card a {
            font-size: .85rem;
            font-weight: 700;
            color: var(--blue);
            text-decoration: none;
            transition: .2s;
        }

        .ap-contact-info-card a:hover {
            color: #0051d4;
        }

        /* ── CONTACT LAYOUT ── */
        .ap-contact-layout {
            display: grid;
            grid-template-columns: 1fr 380px;
            gap: 3rem;
            align-items: flex-start;
        }

        /* ── FORM ── */
        .ap-contact-form-wrap {
            background: var(--white);
            border-radius: 20px;
            padding: 2.5rem;
            border: 1.5px solid var(--light);
            box-shadow: var(--shadow);
        }

        .ap-form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }

        .ap-form-group {
            display: flex;
            flex-direction: column;
            gap: .4rem;
            margin-bottom: 1.2rem;
        }

        .ap-form-group label {
            font-size: .8rem;
            font-weight: 700;
            color: var(--navy);
            letter-spacing: .03em;
        }

        .ap-form-group input,
        .ap-form-group select,
        .ap-form-group textarea {
            background: var(--bg);
            border: 1.5px solid var(--light);
            border-radius: 10px;
            padding: 12px 14px;
            font-family: inherit;
            font-size: .88rem;
            color: var(--text);
            outline: none;
            transition: .25s;
            width: 100%;
        }

        .ap-form-group input:focus,
        .ap-form-group select:focus,
        .ap-form-group textarea:focus {
            border-color: var(--blue);
            background: #fff;
            box-shadow: 0 0 0 3px rgba(26, 107, 255, .08);
        }

        .ap-form-group select {
            cursor: pointer;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235a7a99' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 14px center;
            padding-right: 36px;
        }

        .ap-form-group textarea {
            resize: vertical;
            min-height: 120px;
            line-height: 1.7;
        }

        .ap-submit-btn {
            width: 100%;
            background: linear-gradient(90deg, var(--blue), var(--sky));
            color: #fff;
            border: none;
            border-radius: 12px;
            padding: 15px;
            font-family: inherit;
            font-weight: 700;
            font-size: .95rem;
            cursor: pointer;
            transition: all .25s;
            box-shadow: 0 4px 20px rgba(26, 107, 255, .35);
            margin-top: .5rem;
        }

        .ap-submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(26, 107, 255, .45);
        }

        .ap-submit-btn:disabled {
            opacity: .7;
            cursor: not-allowed;
            transform: none;
        }

        /* ── SIDEBAR ── */
        .ap-contact-sidebar {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .ap-sidebar-card {
            background: var(--white);
            border-radius: 16px;
            padding: 1.8rem;
            border: 1.5px solid var(--light);
            box-shadow: var(--shadow);
        }

        .ap-sidebar-card h4 {
            font-family: 'Syne', sans-serif;
            font-size: 1rem;
            font-weight: 800;
            color: var(--navy);
            margin-bottom: 1rem;
        }

        .ap-sidebar-list {
            display: flex;
            flex-direction: column;
            gap: .7rem;
        }

        .ap-sidebar-item {
            display: flex;
            align-items: flex-start;
            gap: .8rem;
            font-size: .85rem;
            color: var(--muted);
            line-height: 1.6;
        }

        .ap-sidebar-dot {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--blue), var(--sky));
            color: #fff;
            font-size: .7rem;
            font-weight: 800;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-top: 1px;
        }

        /* ── FAQ ── */
        .ap-faq-list {
            max-width: 800px;
            margin: 3rem auto 0;
            display: flex;
            flex-direction: column;
            gap: .8rem;
        }

        .ap-faq-item {
            background: var(--bg);
            border-radius: 14px;
            border: 1.5px solid var(--light);
            overflow: hidden;
            transition: border-color .25s;
        }

        .ap-faq-item.open {
            border-color: var(--blue);
        }

        .ap-faq-q {
            width: 100%;
            background: none;
            border: none;
            padding: 1.2rem 1.5rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            font-family: 'Syne', sans-serif;
            font-size: .95rem;
            font-weight: 700;
            color: var(--navy);
            cursor: pointer;
            text-align: left;
            transition: color .25s;
        }

        .ap-faq-item.open .ap-faq-q {
            color: var(--blue);
        }

        .ap-faq-icon {
            font-size: 1.3rem;
            font-weight: 400;
            color: var(--blue);
            flex-shrink: 0;
            transition: transform .3s;
            line-height: 1;
        }

        .ap-faq-item.open .ap-faq-icon {
            transform: rotate(45deg);
        }

        .ap-faq-a {
            max-height: 0;
            overflow: hidden;
            transition: max-height .35s ease, padding .35s ease;
            padding: 0 1.5rem;
        }

        .ap-faq-item.open .ap-faq-a {
            max-height: 300px;
            padding: 0 1.5rem 1.2rem;
        }

        .ap-faq-a p {
            font-size: .88rem;
            color: var(--muted);
            line-height: 1.85;
        }

        /* ── RESPONSIVE ── */
        @media (max-width: 1024px) {
            .ap-contact-layout {
                grid-template-columns: 1fr 320px;
                gap: 2rem;
            }
        }

        @media (max-width: 900px) {
            .ap-contact-info-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .ap-contact-layout {
                grid-template-columns: 1fr;
            }

            .ap-contact-sidebar {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 1.5rem;
            }

            .ap-contact-sidebar>div:last-child {
                grid-column: span 2;
            }
        }

        @media (max-width: 600px) {
            .ap-contact-info-grid {
                grid-template-columns: 1fr 1fr;
                gap: 1rem;
            }

            .ap-contact-form-wrap {
                padding: 1.6rem 1.3rem;
            }

            .ap-form-row {
                grid-template-columns: 1fr;
            }

            .ap-contact-sidebar {
                grid-template-columns: 1fr;
            }

            .ap-contact-sidebar>div:last-child {
                grid-column: span 1;
            }

            .ap-faq-q {
                font-size: .88rem;
                padding: 1rem 1.2rem;
            }

            .ap-faq-a {
                padding: 0 1.2rem;
            }

            .ap-faq-item.open .ap-faq-a {
                padding: 0 1.2rem 1rem;
            }
        }

        @media (max-width: 380px) {
            .ap-contact-info-grid {
                grid-template-columns: 1fr;
            }
        }


        /* ── UIUX SERVICES GRID ── */
        .ap-uiux-services-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            margin-top: 3.5rem;
        }

        .ap-uiux-srv {
            background: var(--white);
            border-radius: 18px;
            padding: 2rem 1.8rem;
            border: 1.5px solid var(--light);
            transition: all .3s;
            position: relative;
            overflow: hidden;
        }

        .ap-uiux-srv::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, var(--blue), var(--sky));
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .35s ease;
        }

        .ap-uiux-srv:hover {
            box-shadow: var(--shadow);
            transform: translateY(-6px);
            border-color: var(--blue);
        }

        .ap-uiux-srv:hover::after {
            transform: scaleX(1);
        }

        .ap-uiux-srv-icon {
            width: 58px;
            height: 58px;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.7rem;
            margin-bottom: 1.2rem;
        }

        .ap-uiux-srv h3 {
            font-family: 'Syne', sans-serif;
            font-size: 1.05rem;
            font-weight: 800;
            color: var(--navy);
            margin-bottom: .6rem;
        }

        .ap-uiux-srv p {
            font-size: .85rem;
            color: var(--muted);
            line-height: 1.8;
            margin-bottom: 1.1rem;
        }

        .ap-uiux-srv ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: .4rem;
        }

        .ap-uiux-srv ul li {
            font-size: .8rem;
            color: var(--muted);
            padding: 4px 0;
            display: flex;
            align-items: center;
            gap: 8px;
            border-bottom: 1px solid var(--light);
        }

        .ap-uiux-srv ul li:last-child {
            border-bottom: none;
        }

        .ap-uiux-srv ul li::before {
            content: '→';
            color: var(--blue);
            font-weight: 700;
            flex-shrink: 0;
        }

        /* ── TOOLS GRID ── */
        .ap-uiux-tools-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.8rem;
            margin-top: 3.5rem;
        }

        .ap-uiux-tool-card {
            background: var(--bg);
            border-radius: 16px;
            padding: 1.8rem;
            border: 1.5px solid var(--light);
            display: flex;
            gap: 1.5rem;
            align-items: flex-start;
            transition: all .3s;
        }

        .ap-uiux-tool-card:hover {
            background: var(--white);
            box-shadow: var(--shadow);
            border-color: var(--blue);
            transform: translateY(-3px);
        }

        .ap-uiux-tool-logo {
            width: 56px;
            height: 56px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-weight: 800;
        }

        .ap-uiux-tool-card h4 {
            font-family: 'Syne', sans-serif;
            font-size: .98rem;
            font-weight: 800;
            color: var(--navy);
            margin-bottom: .5rem;
        }

        .ap-uiux-tool-card p {
            font-size: .83rem;
            color: var(--muted);
            line-height: 1.75;
            margin-bottom: .9rem;
        }

        .ap-uiux-tool-tags {
            display: flex;
            flex-wrap: wrap;
            gap: .4rem;
        }

        .ap-uiux-tool-tags span {
            font-size: .7rem;
            font-weight: 600;
            color: var(--blue);
            background: var(--light);
            padding: 3px 9px;
            border-radius: 6px;
        }

        /* ── DELIVERABLES ── */
        .ap-deliverables-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.8rem;
            margin-top: 3.5rem;
        }

        .ap-deliverable-item {
            background: var(--bg);
            border-radius: 16px;
            padding: 1.8rem;
            border: 1.5px solid var(--light);
            display: flex;
            gap: 1.2rem;
            align-items: flex-start;
            transition: all .3s;
        }

        .ap-deliverable-item:hover {
            background: var(--white);
            box-shadow: var(--shadow);
            border-color: var(--blue);
        }

        .ap-deliverable-num {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            background: linear-gradient(135deg, var(--blue), var(--sky));
            color: #fff;
            font-family: 'Syne', sans-serif;
            font-weight: 800;
            font-size: .85rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .ap-deliverable-item h4 {
            font-family: 'Syne', sans-serif;
            font-size: .95rem;
            font-weight: 800;
            color: var(--navy);
            margin-bottom: .4rem;
        }

        .ap-deliverable-item p {
            font-size: .82rem;
            color: var(--muted);
            line-height: 1.75;
        }

        /* ── RESPONSIVE ── */
        @media (max-width: 900px) {
            .ap-uiux-services-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .ap-uiux-tools-grid {
                grid-template-columns: 1fr;
            }

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

            .ap-process-steps {
                grid-template-columns: repeat(3, 1fr) !important;
            }
        }

        @media (max-width: 600px) {
            .ap-uiux-services-grid {
                grid-template-columns: 1fr;
            }

            .ap-deliverables-grid {
                grid-template-columns: 1fr;
            }

            .ap-process-steps {
                grid-template-columns: repeat(2, 1fr) !important;
            }

            .ap-uiux-tool-card {
                flex-direction: column;
                gap: 1rem;
            }

            .ap-uiux-tool-logo {
                width: 48px;
                height: 48px;
            }
        }

        @media (max-width: 380px) {
            .ap-process-steps {
                grid-template-columns: 1fr !important;
            }
        }

        /* ── E-COMMERCE FEATURES GRID ── */
        .ap-features-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
            margin-top: 3.5rem;
        }

        .ap-feature-item {
            background: var(--white);
            border-radius: 16px;
            padding: 1.8rem 1.6rem;
            border: 1.5px solid var(--light);
            transition: all .3s;
            display: flex;
            flex-direction: column;
            gap: .6rem;
        }

        .ap-feature-item:hover {
            box-shadow: var(--shadow);
            transform: translateY(-4px);
            border-color: var(--blue);
        }

        .ap-feature-icon {
            font-size: 1.8rem;
            margin-bottom: .2rem;
        }

        .ap-feature-item h4 {
            font-family: 'Syne', sans-serif;
            font-size: .95rem;
            font-weight: 800;
            color: var(--navy);
        }

        .ap-feature-item p {
            font-size: .82rem;
            color: var(--muted);
            line-height: 1.75;
        }

        /* ── RESPONSIVE ── */
        @media (max-width: 900px) {
            .ap-features-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 600px) {
            .ap-features-grid {
                grid-template-columns: 1fr;
            }
        }

        /* ── PRICING CARDS ── */
        .ap-pricing-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            margin-top: 3.5rem;
            align-items: start;
        }

        .ap-pricing-card {
            background: var(--white);
            border-radius: 20px;
            padding: 2.2rem 2rem;
            border: 1.5px solid var(--light);
            position: relative;
            transition: all .3s;
        }

        .ap-pricing-card:hover {
            box-shadow: var(--shadow);
            transform: translateY(-4px);
        }

        .ap-pricing-featured {
            border: 2px solid var(--blue);
            box-shadow: 0 8px 40px rgba(26, 107, 255, .15);
            transform: translateY(-8px);
        }

        .ap-pricing-featured:hover {
            transform: translateY(-12px);
        }

        .ap-pricing-popular {
            position: absolute;
            top: -14px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--blue);
            color: #fff;
            font-size: .72rem;
            font-weight: 700;
            letter-spacing: .1em;
            text-transform: uppercase;
            padding: 4px 16px;
            border-radius: 100px;
            white-space: nowrap;
        }

        .ap-pricing-badge {
            display: inline-block;
            font-size: .72rem;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase;
            padding: 4px 14px;
            border-radius: 8px;
            margin-bottom: 1rem;
        }

        .ap-pricing-price {
            font-family: 'Syne', sans-serif;
            font-size: 2.2rem;
            font-weight: 800;
            color: var(--navy);
            margin-bottom: .4rem;
            line-height: 1;
        }

        .ap-pricing-price span {
            font-size: 1rem;
            font-weight: 500;
            color: var(--muted);
        }

        .ap-pricing-desc {
            font-size: .84rem;
            color: var(--muted);
            line-height: 1.7;
            margin-bottom: 1.5rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid var(--light);
        }

        .ap-pricing-list {
            list-style: none;
            padding: 0;
            margin: 0 0 2rem;
            display: flex;
            flex-direction: column;
            gap: .7rem;
        }

        .ap-pricing-list li {
            font-size: .84rem;
            color: var(--text);
            line-height: 1.5;
        }

        .ap-pricing-btn {
            display: block;
            width: 100%;
            padding: 13px;
            border-radius: 10px;
            font-family: inherit;
            font-weight: 700;
            font-size: .88rem;
            text-align: center;
            text-decoration: none;
            cursor: pointer;
            transition: all .25s;
            border: none;
        }

        .ap-pricing-btn:hover {
            opacity: .9;
            transform: translateY(-2px);
        }

        /* ── RESPONSIVE PRICING ── */
        @media (max-width: 900px) {
            .ap-pricing-grid {
                grid-template-columns: 1fr;
                max-width: 480px;
                margin-left: auto;
                margin-right: auto;
            }

            .ap-pricing-featured {
                transform: translateY(0);
                order: -1;
            }

            .ap-pricing-featured:hover {
                transform: translateY(-4px);
            }
        }

        @media (max-width: 600px) {
            .ap-pricing-grid {
                max-width: 100%;
            }

            .ap-pricing-card {
                padding: 1.8rem 1.5rem;
            }
        }

        /* keep text ABOVE overlay */
        .tech-pill-ani>* {
            position: relative;
            z-index: 1;
        }


        .tech-pill-dark {
            background: var(--bg);
            border-color: rgba(26, 107, 255, .15);
        }

        @keyframes techScroll1 {
            from {
                transform: translateX(0);
            }

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

        @keyframes techScroll2 {
            from {
                transform: translateX(-50%);
            }

            to {
                transform: translateX(0);
            }
        }

        /* ══════════════════════════════════════
           EXTRA ANIMATION STYLES
        ══════════════════════════════════════ */

        /* Service cards enhanced */
        .service-card {
            transition: all .35s cubic-bezier(.34, 1.56, .64, 1) !important;
        }

        .service-card:hover {
            box-shadow: 0 12px 40px rgba(26, 107, 255, .18), 0 0 0 1px rgba(26, 107, 255, .15) !important;
        }

        .service-card:hover .service-icon {
            background: linear-gradient(135deg, var(--blue), var(--sky)) !important;
            transform: scale(1.15) rotate(-8deg) !important;
            filter: brightness(1.15) !important;
        }

        .service-icon {
            transition: all .4s cubic-bezier(.34, 1.56, .64, 1) !important;
        }

        /* Section title animated underline */
        .section-title {
            position: relative;
            display: inline-block;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--blue), var(--sky));
            border-radius: 3px;
            transition: width .8s cubic-bezier(.34, 1.56, .64, 1);
        }

        .reveal.visible .section-title::after {
            width: 60%;
        }

        .section-header {
            text-align: center;
        }

        /* Project shimmer */
        .proj-slide {
            position: relative;
            overflow: hidden;
        }

        .proj-slide::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 60%;
            height: 100%;
            background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .08) 50%, transparent 100%);
            transition: left .7s ease;
            pointer-events: none;
            z-index: 3;
        }

        .proj-slide:hover::after {
            left: 150%;
        }

        /* Floating particles keyframe */
        @keyframes floatUp {
            0% {
                transform: translateY(0) scale(1);
                opacity: .6;
            }

            50% {
                transform: translateY(-60px) scale(1.2);
                opacity: 1;
            }

            100% {
                transform: translateY(-120px) scale(.8);
                opacity: 0;
            }
        }


        .tech-row-label {
            font-size: .72rem;
            font-weight: 700;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: var(--blue);
            margin: 2rem 0 .8rem;
            text-align: center;
            opacity: .8;
        }

        .tech-marquee-wrap {
            overflow: hidden;
            position: relative;
            margin-bottom: .5rem;
        }

        .tech-marquee-wrap::before,
        .tech-marquee-wrap::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            width: 80px;
            z-index: 2;
            pointer-events: none;
        }

        .tech-marquee-wrap::before {
            left: 0;
            background: linear-gradient(to right, #ffffff, transparent);
        }

        .tech-marquee-wrap::after {
            right: 0;
            background: linear-gradient(to left, #ffffff, transparent);
        }

        .tech-marquee-track {
            display: flex;
            gap: 1rem;
            width: max-content;
            animation: techScroll1 28s linear infinite;
            padding: .5rem 0;
        }

        .tech-marquee-reverse {
            animation: techScroll2 32s linear infinite;
        }

        .tech-marquee-wrap:hover .tech-marquee-track {
            animation-play-state: paused;
        }

        /* ── PILL BASE ── */
        .tech-pill-ani {
            background: var(--white);
            border: 1.5px solid var(--light);
            border-radius: 100px;
            padding: .55rem 1.3rem;
            font-size: .82rem;
            font-weight: 600;
            color: var(--navy);
            /* ← default text dark */
            display: flex;
            align-items: center;
            gap: .45rem;
            white-space: nowrap;
            cursor: default;
            transition: all .35s cubic-bezier(.34, 1.56, .64, 1);
            position: relative;
            overflow: hidden;
        }

        /* gradient overlay — behind text */
        .tech-pill-ani::before {
            content: '';
            position: absolute;
            inset: 0;
            /* background: linear-gradient(135deg, var(--blue), var(--sky)); */
            opacity: 0;
            transition: opacity .3s ease;
            border-radius: inherit;
            z-index: 0;
        }

        /* keep text ABOVE overlay */
        .tech-pill-ani>* {
            position: relative;
            z-index: 1;
        }

        .tech-pill-ani {
            /* also need the text itself to be above */
            isolation: isolate;
        }

        /* hover: show gradient, flip text white */
        .tech-pill-ani:hover {
            border-color: var(--blue);

            /* ← white on hover */
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 8px 20px rgba(26, 107, 255, .28);
        }

        .tech-pill-ani:hover::before {
            opacity: 1;
        }

        .tech-pill-dark {
            background: var(--bg);
            border-color: rgba(26, 107, 255, .15);
        }

        @keyframes techScroll1 {
            from {
                transform: translateX(0);
            }

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

        @keyframes techScroll2 {
            from {
                transform: translateX(-50%);
            }

            to {
                transform: translateX(0);
            }
        }

        /* ══════════════════════════════════════
       SERVICE CARDS — ENHANCED
    ══════════════════════════════════════ */
        .service-card {
            transition: all .35s cubic-bezier(.34, 1.56, .64, 1) !important;
        }

        .service-card:hover {
            box-shadow: 0 12px 40px rgba(26, 107, 255, .18),
                0 0 0 1px rgba(26, 107, 255, .15) !important;
        }

        .service-card:hover .service-icon {
            background: linear-gradient(135deg, var(--blue), var(--sky)) !important;
            transform: scale(1.15) rotate(-8deg) !important;
            filter: brightness(1.15) !important;
        }

        .service-icon {
            transition: all .4s cubic-bezier(.34, 1.56, .64, 1) !important;
        }

        /* ══════════════════════════════════════
       SECTION TITLE ANIMATED UNDERLINE
    ══════════════════════════════════════ */
        .section-title {
            position: relative;
            display: inline-block;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--blue), var(--sky));
            border-radius: 3px;
            transition: width .8s cubic-bezier(.34, 1.56, .64, 1);
        }

        .reveal.visible .section-title::after {
            width: 60%;
        }

        .section-header {
            text-align: center;
        }

        /* ══════════════════════════════════════
       PROJECT SHIMMER
    ══════════════════════════════════════ */
        .proj-slide {
            position: relative;
            overflow: hidden;
        }

        .proj-slide::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 60%;
            height: 100%;
            background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .08) 50%, transparent 100%);
            transition: left .7s ease;
            pointer-events: none;
            z-index: 3;
        }

        .proj-slide:hover::after {
            left: 150%;
        }

        /* ══════════════════════════════════════
       FLOATING PARTICLES KEYFRAME
    ══════════════════════════════════════ */
        @keyframes floatUp {
            0% {
                transform: translateY(0) scale(1);
                opacity: .6;
            }

            50% {
                transform: translateY(-60px) scale(1.2);
                opacity: 1;
            }

            100% {
                transform: translateY(-120px) scale(.8);
                opacity: 0;
            }
        }

        /* ══════════════════════════════════════
       GSAP TEXT — SPLIT CHAR BASE STATE
       (GSAP will override opacity/transform)
    ══════════════════════════════════════ */
        .gsap-split-char {
            display: inline-block;
        }

        /* ══════════════════════════════════════
       GRADIENT SHIMMER — Hero H1 words
    ══════════════════════════════════════ */
        .hero-shimmer-word {
            display: inline-block;
            background: linear-gradient(90deg, #fff 0%, var(--sky) 40%, #fff 80%);
            background-size: 200% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: shimmerMove 4s linear infinite;
        }

        @keyframes shimmerMove {
            from {
                background-position: 0% center;
            }

            to {
                background-position: 200% center;
            }
        }

        /* ══════════════════════════════════════
       ABOUT H2 HIGHLIGHT WORD
    ══════════════════════════════════════ */
        .highlight-word {
            position: relative;
            display: inline-block;
            color: var(--blue);
        }

        .highlight-word::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--blue), var(--sky));
            border-radius: 2px;
            transition: width .8s ease .3s;
        }

        .highlight-word.animated::after {
            width: 100%;
        }

        /* ══════════════════════════════════════
       SECTION SUB — word reveal
    ══════════════════════════════════════ */
        .word-reveal-word {
            display: inline-block;
            overflow: hidden;
        }

        .word-reveal-inner {
            display: inline-block;
            transform: translateY(100%);
            opacity: 0;
        }

        /* ══════════════════════════════════════
       CONTACT H2 — TYPEWRITER
    ══════════════════════════════════════ */
        .typewriter-cursor {
            display: inline-block;
            width: 3px;
            height: 1em;
            background: var(--sky);
            margin-left: 3px;
            vertical-align: middle;
            animation: cursorBlink .7s step-end infinite;
        }

        @keyframes cursorBlink {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0;
            }
        }

        /* ══════════════════════════════════════
       WHY-ITEM H4 — LEFT BORDER SLIDE
    ══════════════════════════════════════ */
        .why-item h4 {
            position: relative;
            padding-left: 0;
            transition: padding-left .3s ease;
        }

        .why-item:hover h4 {
            padding-left: 10px;
        }

        .why-item h4::before {
            content: '';
            position: absolute;
            left: 0;
            top: 10%;
            bottom: 10%;
            width: 3px;
            background: linear-gradient(180deg, var(--blue), var(--sky));
            border-radius: 2px;
            transform: scaleY(0);
            transform-origin: top;
            transition: transform .3s ease;
        }

        .why-item:hover h4::before {
            transform: scaleY(1);
        }

        /* ASTAT hover pop */
        .astat-num {
            transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
        }

        .astat-num:hover {
            transform: scale(1.15);
        }