:root {
            --dark-blue: #071a38;
            --navy-blue: #0b2550;
            --primary-blue: #2563eb;
            --light-blue: #3b82f6;
            --cyan: #22d3ee;
            --violet: #7c3aed;
            --heading: #10213d;
            --text: #53647f;
            --muted: #7f8da4;
            --border: #e8edf5;
            --white: #ffffff;
            --soft-blue: #f3f7ff;
            --soft-cyan: #eefcff;
            --soft-violet: #f6f1ff;
            --shadow: 0 24px 65px rgba(8, 32, 72, 0.16);
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: "Manrope", sans-serif;
            background: #ffffff;
            color: var(--heading);
        }

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

        ul {
            list-style: none;
        }

        button {
            font: inherit;
        }

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

        .site-header {
            position: sticky;
            top: 0;
            z-index: 9999;
            background: rgba(255, 255, 255, 0.97);
            backdrop-filter: blur(14px);
            border-bottom: 1px solid var(--border);
            box-shadow: 0 8px 28px rgba(15, 39, 79, 0.07);
        }

        /* =============================
           TOP HEADER BAR
        ============================== */

        .top-header {
            position: relative;
            overflow: hidden;
            color: #ffffff;
            background:
                radial-gradient(
                    circle at 10% 50%,
                    rgba(34, 211, 238, 0.2),
                    transparent 24%
                ),
                radial-gradient(
                    circle at 90% 20%,
                    rgba(124, 58, 237, 0.22),
                    transparent 26%
                ),
                linear-gradient(
                    90deg,
                    var(--dark-blue) 0%,
                    var(--navy-blue) 55%,
                    #132b5e 100%
                );
        }

        .top-header::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background-image:
                linear-gradient(
                    rgba(255, 255, 255, 0.025) 1px,
                    transparent 1px
                ),
                linear-gradient(
                    90deg,
                    rgba(255, 255, 255, 0.025) 1px,
                    transparent 1px
                );
            background-size: 22px 22px;
        }

        .top-header-container {
            max-width: 1280px;
            min-height: 42px;
            margin: 0 auto;
            padding: 7px 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            position: relative;
            z-index: 1;
        }

        .top-header-left,
        .top-header-right {
            display: flex;
            align-items: center;
            gap: 18px;
            flex-wrap: wrap;
        }

        .top-header-item {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: rgba(255, 255, 255, 0.9);
            font-size: 12px;
            font-weight: 600;
            transition: 0.2s ease;
        }

        .top-header-item:hover {
            color: #ffffff;
        }

        .top-header-item svg {
            width: 15px;
            height: 15px;
            stroke: var(--cyan);
            stroke-width: 1.9;
            flex-shrink: 0;
        }

        .availability-badge {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding: 6px 11px;
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.07);
            color: #ffffff;
            font-size: 11px;
            font-weight: 700;
        }

        .availability-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #50e3a4;
            box-shadow: 0 0 0 4px rgba(80, 227, 164, 0.14);
        }

        /* =============================
           NAVBAR
        ============================== */

        .navbar {
            max-width: 1280px;
            min-height: 84px;
            margin: 0 auto;
            padding: 0 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 28px;
            position: relative;
        }

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

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            flex-shrink: 0;
        }

        .brand-logo {
            width: 50px;
            height: 50px;
            display: grid;
            place-items: center;
            position: relative;
            overflow: hidden;
            border-radius: 16px;
            color: #ffffff;
            background: linear-gradient(
                145deg,
                var(--primary-blue),
                var(--violet)
            );
            box-shadow:
                0 14px 30px rgba(37, 99, 235, 0.28),
                inset 0 1px 0 rgba(255, 255, 255, 0.22);
        }

        .brand-logo::before {
            content: "";
            position: absolute;
            width: 42px;
            height: 42px;
            top: -19px;
            right: -16px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.17);
        }

        .brand-logo::after {
            content: "";
            position: absolute;
            width: 28px;
            height: 28px;
            left: -14px;
            bottom: -14px;
            border-radius: 50%;
            background: rgba(34, 211, 238, 0.22);
        }

        .brand-logo svg {
            width: 26px;
            height: 26px;
            position: relative;
            z-index: 1;
            stroke-width: 2;
        }

        .brand-content {
            display: flex;
            flex-direction: column;
            line-height: 1;
        }

        .brand-name {
            color: var(--heading);
            font-size: 20px;
            font-weight: 800;
            letter-spacing: -0.5px;
        }

        .brand-tagline {
            margin-top: 7px;
            color: var(--primary-blue);
            font-size: 9px;
            font-weight: 800;
            letter-spacing: 1.55px;
            text-transform: uppercase;
        }

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

        .navigation-wrapper {
            display: flex;
            align-items: center;
            gap: 24px;
        }

        .navigation-menu {
            display: flex;
            align-items: center;
            gap: 3px;
        }

        .navigation-item {
            position: relative;
        }

        .navigation-link {
            min-height: 84px;
            padding: 0 13px;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            position: relative;
            color: #2f405e;
            font-size: 13px;
            font-weight: 700;
            transition: color 0.22s ease;
        }

        .navigation-link::after {
            content: "";
            position: absolute;
            left: 13px;
            right: 13px;
            bottom: 16px;
            height: 2px;
            border-radius: 10px;
            background: linear-gradient(
                90deg,
                var(--primary-blue),
                var(--cyan),
                var(--violet)
            );
            transform: scaleX(0);
            transform-origin: center;
            transition: transform 0.22s ease;
        }

        .navigation-link:hover,
        .navigation-link.active {
            color: var(--primary-blue);
        }

        .navigation-link:hover::after,
        .navigation-link.active::after {
            transform: scaleX(1);
        }

        .dropdown-arrow {
            width: 7px;
            height: 7px;
            border-right: 1.8px solid currentColor;
            border-bottom: 1.8px solid currentColor;
            transform: rotate(45deg) translateY(-2px);
            transition: transform 0.2s ease;
        }

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

        .services-dropdown {
            width: 370px;
            position: absolute;
            top: calc(100% - 8px);
            left: 50%;
            padding: 14px;
            border: 1px solid #e5ebf4;
            border-radius: 22px;
            background:
                radial-gradient(
                    circle at 100% 0%,
                    rgba(34, 211, 238, 0.08),
                    transparent 25%
                ),
                radial-gradient(
                    circle at 0% 100%,
                    rgba(124, 58, 237, 0.07),
                    transparent 28%
                ),
                #ffffff;
            box-shadow: var(--shadow);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform: translate(-50%, 14px);
            transition: 0.23s ease;
        }

        .services-dropdown::before {
            content: "";
            position: absolute;
            top: -7px;
            left: 50%;
            width: 14px;
            height: 14px;
            background: #ffffff;
            border-left: 1px solid #e5ebf4;
            border-top: 1px solid #e5ebf4;
            transform: translateX(-50%) rotate(45deg);
        }

        .navigation-item:hover .services-dropdown,
        .navigation-item:focus-within .services-dropdown {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translate(-50%, 0);
        }

        .navigation-item:hover .dropdown-arrow {
            transform: rotate(225deg) translate(-2px, -2px);
        }

        .dropdown-header {
            padding: 8px 10px 13px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }

        .dropdown-title {
            color: #8b97aa;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 1.25px;
            text-transform: uppercase;
        }

        .dropdown-badge {
            padding: 5px 9px;
            border: 1px solid #dde7ff;
            border-radius: 999px;
            background: var(--soft-blue);
            color: var(--primary-blue);
            font-size: 9px;
            font-weight: 800;
        }

        .service-link {
            display: flex;
            align-items: center;
            gap: 13px;
            padding: 11px;
            position: relative;
            overflow: hidden;
            border-radius: 15px;
            transition: 0.2s ease;
        }

        .service-link + .service-link {
            margin-top: 4px;
        }

        .service-link::after {
            content: "";
            position: absolute;
            inset: 0;
            opacity: 0;
            background: linear-gradient(
                90deg,
                rgba(37, 99, 235, 0.07),
                rgba(34, 211, 238, 0.05),
                rgba(124, 58, 237, 0.06)
            );
            transition: opacity 0.2s ease;
        }

        .service-link:hover {
            transform: translateX(4px);
        }

        .service-link:hover::after {
            opacity: 1;
        }

        .service-icon {
            width: 44px;
            height: 44px;
            display: grid;
            place-items: center;
            flex-shrink: 0;
            position: relative;
            z-index: 1;
            border: 1px solid #dfe8ff;
            border-radius: 14px;
            background: var(--soft-blue);
            color: var(--primary-blue);
            box-shadow: 0 8px 18px rgba(37, 99, 235, 0.08);
            transition: 0.2s ease;
        }

        .service-link:nth-of-type(2) .service-icon {
            color: #0284c7;
            background: var(--soft-cyan);
            border-color: #d7f5fb;
        }

        .service-link:nth-of-type(3) .service-icon {
            color: var(--violet);
            background: var(--soft-violet);
            border-color: #eadfff;
        }

        .service-link:nth-of-type(4) .service-icon {
            color: #0f766e;
            background: #effbf8;
            border-color: #d9f2ec;
        }

        .service-link:nth-of-type(5) .service-icon {
            color: #4f46e5;
            background: #f1f2ff;
            border-color: #e0e2ff;
        }

        .service-link:hover .service-icon {
            color: #ffffff;
            border-color: transparent;
            background: linear-gradient(
                145deg,
                var(--primary-blue),
                var(--violet)
            );
            box-shadow: 0 11px 24px rgba(37, 99, 235, 0.22);
        }

        .service-icon svg {
            width: 21px;
            height: 21px;
            stroke-width: 1.9;
        }

        .service-content {
            min-width: 0;
            position: relative;
            z-index: 1;
        }

        .service-name {
            display: block;
            color: #172945;
            font-size: 13px;
            font-weight: 800;
        }

        .service-description {
            display: block;
            margin-top: 3px;
            color: #7c899d;
            font-size: 10px;
            line-height: 1.4;
        }

        .service-arrow {
            width: 30px;
            height: 30px;
            margin-left: auto;
            display: grid;
            place-items: center;
            position: relative;
            z-index: 1;
            border-radius: 10px;
            color: #8a97ab;
            transition: 0.2s ease;
        }

        .service-link:hover .service-arrow {
            color: var(--primary-blue);
            background: #ffffff;
            box-shadow: 0 6px 14px rgba(24, 54, 102, 0.08);
        }

        .service-arrow svg {
            width: 15px;
            height: 15px;
            stroke-width: 2;
        }

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

        .header-buttons {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-shrink: 0;
        }

        .support-button {
            min-height: 44px;
            padding: 0 14px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border: 1px solid #e8edf4;
            border-radius: 12px;
            background: #f7f9fc;
            color: #33445f;
            font-size: 12px;
            font-weight: 800;
            transition: 0.2s ease;
        }

        .support-button:hover {
            color: var(--primary-blue);
            background: var(--soft-blue);
            border-color: #dbe5ff;
            transform: translateY(-1px);
        }

        .support-button svg {
            width: 17px;
            height: 17px;
        }

        .consultation-button {
            min-height: 46px;
            padding: 0 19px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            border-radius: 13px;
            color: #ffffff;
            background: linear-gradient(
                135deg,
                var(--primary-blue) 0%,
                #4f46e5 52%,
                var(--violet) 100%
            );
            box-shadow:
                0 13px 28px rgba(37, 99, 235, 0.24),
                inset 0 1px 0 rgba(255, 255, 255, 0.22);
            font-size: 12px;
            font-weight: 800;
            transition: 0.22s ease;
        }

        .consultation-button:hover {
            transform: translateY(-2px);
            box-shadow:
                0 17px 34px rgba(37, 99, 235, 0.32),
                inset 0 1px 0 rgba(255, 255, 255, 0.22);
        }

        .consultation-button svg {
            width: 17px;
            height: 17px;
        }

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

        .mobile-menu-button {
            width: 44px;
            height: 44px;
            display: none;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 5px;
            border: 1px solid #e1e7f0;
            border-radius: 12px;
            background: #ffffff;
            box-shadow: 0 7px 18px rgba(14, 37, 78, 0.07);
            cursor: pointer;
        }

        .mobile-menu-button span {
            width: 20px;
            height: 2px;
            border-radius: 5px;
            background: var(--dark-blue);
            transition: 0.22s ease;
        }

        .mobile-menu-button.active span:nth-child(1) {
            transform: translateY(7px) rotate(45deg);
        }

        .mobile-menu-button.active span:nth-child(2) {
            opacity: 0;
        }

        .mobile-menu-button.active span:nth-child(3) {
            transform: translateY(-7px) rotate(-45deg);
        }

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

        .hero-section {
            min-height: 65vh;
            padding: 100px 24px;
            display: grid;
            place-items: center;
            text-align: center;
            background:
                radial-gradient(
                    circle at 10% 18%,
                    rgba(37, 99, 235, 0.1),
                    transparent 24%
                ),
                radial-gradient(
                    circle at 90% 14%,
                    rgba(124, 58, 237, 0.1),
                    transparent 26%
                ),
                linear-gradient(
                    180deg,
                    #ffffff 0%,
                    #f7faff 100%
                );
        }

        .hero-content {
            max-width: 850px;
        }

        .hero-title {
            font-size: clamp(38px, 6vw, 68px);
            line-height: 1.04;
            letter-spacing: -2.2px;
            background: linear-gradient(
                90deg,
                var(--dark-blue),
                var(--primary-blue),
                var(--violet)
            );
            -webkit-background-clip: text;
            color: transparent;
        }

        .hero-description {
            max-width: 670px;
            margin: 22px auto 0;
            color: var(--text);
            font-size: 16px;
            line-height: 1.8;
        }

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

        @media (max-width: 1120px) {
            .mobile-menu-button {
                display: flex;
            }

            .navigation-wrapper {
                width: 100%;
                position: absolute;
                top: 100%;
                left: 0;
                display: none;
                padding: 18px 24px 24px;
                flex-direction: column;
                align-items: stretch;
                gap: 18px;
                background: #ffffff;
                border-top: 1px solid var(--border);
                box-shadow: 0 25px 55px rgba(11, 33, 69, 0.15);
            }

            .navigation-wrapper.active {
                display: flex;
            }

            .navigation-menu {
                width: 100%;
                flex-direction: column;
                align-items: stretch;
            }

            .navigation-link {
                width: 100%;
                min-height: 52px;
                padding: 0 4px;
                justify-content: space-between;
                border-bottom: 1px solid #edf1f6;
            }

            .navigation-link::after {
                display: none;
            }

            .services-dropdown {
                width: 100%;
                position: static;
                display: none;
                margin-top: 6px;
                padding: 10px 0 4px;
                border: 0;
                border-radius: 0;
                box-shadow: none;
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
                transform: none;
                background: transparent;
            }

            .services-dropdown::before {
                display: none;
            }

            .navigation-item.open .services-dropdown {
                display: block;
            }

            .navigation-item:hover .services-dropdown {
                transform: none;
            }

            .dropdown-header {
                padding-left: 4px;
                padding-right: 4px;
            }

            .header-buttons {
                width: 100%;
            }

            .support-button,
            .consultation-button {
                flex: 1;
            }
        }


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

        @media (max-width: 720px) {
            .top-header-container {
                justify-content: center;
                padding-left: 16px;
                padding-right: 16px;
            }

            .top-header-right {
                display: none;
            }

            .top-header-left {
                justify-content: center;
                gap: 12px;
            }

            .top-header-item:nth-child(2) {
                display: none;
            }

            .navbar {
                min-height: 72px;
                padding: 0 16px;
            }

            .brand-logo {
                width: 43px;
                height: 43px;
            }

            .brand-name {
                font-size: 17px;
            }

            .brand-tagline {
                font-size: 8px;
            }

            .navigation-wrapper {
                padding: 14px 16px 20px;
            }

            .header-buttons {
                flex-direction: column;
            }

            .support-button,
            .consultation-button {
                width: 100%;
            }

            .service-link {
                padding-left: 7px;
                padding-right: 7px;
            }
        }
/*--------------------------------------------------------banner------------------------------------------------*/
       :root {
            --hero-blue: #3773ff;
            --hero-cyan: #45d6ff;
            --hero-purple: #8748ff;
            --hero-pink: #dc62ff;
            --hero-navy: #031126;
            --hero-white: #ffffff;
        }

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            font-family: "Inter", sans-serif;
            background: #031126;
        }

        button,
        input,
        select {
            font-family: inherit;
        }

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

        .tech-hero {
            position: relative;
            width: 100%;
            min-height: 790px;
            padding: 90px 24px 76px;
            display: flex;
            align-items: center;
            overflow: hidden;
            isolation: isolate;
            background:
                linear-gradient(
                    125deg,
                    #020a18 0%,
                    #04152f 38%,
                    #101545 68%,
                    #180d39 100%
                );
        }

        /* Canvas particle background */

        #techParticleCanvas {
            position: absolute;
            z-index: -20;
            inset: 0;
            width: 100%;
            height: 100%;
            opacity: 0.8;
            pointer-events: none;
        }

        /* Smooth animated aurora background */

        .tech-aurora {
            position: absolute;
            z-index: -19;
            inset: -30%;
            opacity: 0.62;
            filter: blur(65px);
            pointer-events: none;
            background:
                radial-gradient(
                    circle at 18% 28%,
                    rgba(46, 106, 255, 0.65),
                    transparent 22%
                ),
                radial-gradient(
                    circle at 77% 22%,
                    rgba(134, 63, 255, 0.58),
                    transparent 24%
                ),
                radial-gradient(
                    circle at 60% 76%,
                    rgba(50, 207, 255, 0.35),
                    transparent 22%
                ),
                radial-gradient(
                    circle at 90% 72%,
                    rgba(220, 77, 255, 0.3),
                    transparent 20%
                );
            animation:
                techAuroraMove 18s
                cubic-bezier(0.45, 0, 0.55, 1)
                infinite alternate;
            will-change: transform;
        }

        /* Moving spotlight */

        .tech-spotlight {
            position: absolute;
            z-index: -18;
            top: -250px;
            left: -330px;
            width: 850px;
            height: 1000px;
            opacity: 0.28;
            filter: blur(20px);
            pointer-events: none;
            transform: rotate(-25deg);
            background:
                linear-gradient(
                    90deg,
                    transparent,
                    rgba(76, 132, 255, 0.23),
                    rgba(135, 87, 255, 0.12),
                    transparent
                );
            animation:
                techSpotlight 15s ease-in-out infinite alternate;
        }

        /* Perspective grid */

        .tech-floor-grid {
            position: absolute;
            z-index: -17;
            right: -15%;
            bottom: -32%;
            width: 105%;
            height: 75%;
            opacity: 0.18;
            transform:
                perspective(650px)
                rotateX(62deg);
            transform-origin: center bottom;
            pointer-events: none;
            background-image:
                linear-gradient(
                    rgba(116, 163, 255, 0.28) 1px,
                    transparent 1px
                ),
                linear-gradient(
                    90deg,
                    rgba(116, 163, 255, 0.28) 1px,
                    transparent 1px
                );
            background-size: 65px 65px;
            mask-image:
                linear-gradient(
                    to top,
                    black,
                    transparent 88%
                );
            animation: techGridTravel 10s linear infinite;
        }

        /* Background rotating rings */

        .tech-ring {
            position: absolute;
            z-index: -16;
            border-radius: 50%;
            pointer-events: none;
            border: 1px solid rgba(116, 159, 255, 0.16);
            box-shadow:
                inset 0 0 65px rgba(79, 123, 255, 0.035),
                0 0 70px rgba(73, 109, 255, 0.035);
        }

        .tech-ring::before,
        .tech-ring::after {
            content: "";
            position: absolute;
            border-radius: inherit;
            border: inherit;
        }

        .tech-ring::before {
            inset: 13%;
        }

        .tech-ring::after {
            inset: 29%;
        }

        .tech-ring-one {
            width: 570px;
            height: 570px;
            top: -250px;
            right: -130px;
            animation: techRingRotate 28s linear infinite;
        }

        .tech-ring-two {
            width: 380px;
            height: 380px;
            bottom: -210px;
            left: -120px;
            animation:
                techRingRotateReverse 23s
                linear infinite;
        }

        /* Energy waves */

        .tech-energy-wave {
            position: absolute;
            z-index: -15;
            width: 880px;
            height: 300px;
            opacity: 0.32;
            border-radius: 50%;
            pointer-events: none;
            border: 1px solid rgba(104, 154, 255, 0.27);
            box-shadow:
                0 0 100px rgba(50, 104, 255, 0.12),
                inset 0 0 70px rgba(55, 113, 255, 0.06);
        }

        .tech-wave-one {
            top: -190px;
            left: -250px;
            transform: rotate(-13deg);
            animation: techWaveOne 15s ease-in-out infinite;
        }

        .tech-wave-two {
            right: -310px;
            bottom: -180px;
            border-color: rgba(179, 91, 255, 0.25);
            transform: rotate(13deg);
            animation: techWaveTwo 18s ease-in-out infinite;
        }

        /* Soft dark overlay for readability */

        .tech-readable-overlay {
            position: absolute;
            z-index: -14;
            inset: 0;
            pointer-events: none;
            background:
                linear-gradient(
                    90deg,
                    rgba(1, 8, 23, 0.84) 0%,
                    rgba(3, 13, 34, 0.62) 40%,
                    rgba(9, 14, 50, 0.28) 70%,
                    rgba(11, 7, 39, 0.44) 100%
                ),
                linear-gradient(
                    180deg,
                    rgba(1, 7, 20, 0.06),
                    rgba(1, 7, 20, 0.48)
                );
        }

        /* Moving shine lines */

        .tech-light-line {
            position: absolute;
            z-index: -13;
            left: -850px;
            width: 700px;
            height: 1px;
            opacity: 0;
            pointer-events: none;
            transform: rotate(-24deg);
            background:
                linear-gradient(
                    90deg,
                    transparent,
                    rgba(97, 157, 255, 0.75),
                    rgba(213, 105, 255, 0.45),
                    transparent
                );
        }

        .tech-line-one {
            top: 21%;
            animation: techLightTravel 11s linear infinite;
        }

        .tech-line-two {
            top: 69%;
            animation:
                techLightTravel 15s linear 3.5s infinite;
        }

        /* ======================================
           MAIN LAYOUT
        ====================================== */

        .tech-hero-container {
            position: relative;
            z-index: 5;
            width: min(1200px, 100%);
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1.05fr 0.95fr;
            align-items: center;
            gap: 82px;
        }

        /* ======================================
           LEFT CONTENT
        ====================================== */

        .tech-hero-content {
            max-width: 680px;
        }

        .tech-hero-badge {
            width: fit-content;
            margin-bottom: 25px;
            padding: 10px 17px;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: rgba(237, 243, 255, 0.92);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.35px;
            border: 1px solid rgba(172, 199, 255, 0.22);
            border-radius: 100px;
            background: rgba(255, 255, 255, 0.07);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.12),
                0 15px 35px rgba(0, 0, 0, 0.14);
            backdrop-filter: blur(16px);
        }

        .tech-badge-dot {
            position: relative;
            width: 8px;
            height: 8px;
            flex-shrink: 0;
            border-radius: 50%;
            background: #6ba4ff;
            box-shadow:
                0 0 0 5px rgba(82, 139, 255, 0.14),
                0 0 18px rgba(92, 154, 255, 0.62);
            animation: techBadgePulse 2s ease-in-out infinite;
        }

        .tech-main-heading {
            min-height: 165px;
            margin: 0;
            color: #ffffff;
            font-family: "Manrope", sans-serif;
            font-size: clamp(47px, 5.1vw, 72px);
            font-weight: 800;
            line-height: 1.06;
            letter-spacing: -3.8px;
            perspective: 1000px;
            text-shadow:
                0 20px 55px rgba(0, 0, 0, 0.28);
        }

        .tech-heading-line {
            display: block;
        }

        /* Every heading letter */

        .tech-letter {
            position: relative;
            display: inline-block;
            opacity: 0;
            transform:
                translateY(42px)
                rotateX(78deg)
                scale(0.8);
            transform-origin: center bottom;
            filter: blur(9px);
            animation:
                techLetterReveal 0.78s
                cubic-bezier(0.16, 0.85, 0.22, 1)
                forwards;
            will-change: transform, opacity, filter;
        }

        .tech-letter-space {
            width: 0.27em;
        }

        /* Main animated gradient heading */

        .tech-color-heading .tech-letter {
            color: transparent;
            background:
                linear-gradient(
                    110deg,
                    #5e9fff 0%,
                    #43e2ff 18%,
                    #837dff 38%,
                    #be66ff 58%,
                    #f06aff 76%,
                    #5fc9ff 100%
                );
            background-size: 450% 100%;
            background-position: 0% center;
            background-clip: text;
            -webkit-background-clip: text;
            animation:
                techLetterReveal 0.78s
                cubic-bezier(0.16, 0.85, 0.22, 1)
                forwards,
                techHeadingColorWave 6s
                ease-in-out infinite;
        }

        /* Different movement for every few letters */

        .tech-color-heading .tech-letter:nth-child(4n + 1) {
            animation-duration: 0.78s, 5.2s;
        }

        .tech-color-heading .tech-letter:nth-child(4n + 2) {
            animation-duration: 0.78s, 6.1s;
        }

        .tech-color-heading .tech-letter:nth-child(4n + 3) {
            animation-duration: 0.78s, 7s;
        }

        .tech-color-heading .tech-letter:nth-child(4n + 4) {
            animation-duration: 0.78s, 5.7s;
        }

        .tech-description {
            max-width: 605px;
            margin: 27px 0 31px;
            color: rgba(220, 231, 250, 0.76);
            font-size: 17px;
            line-height: 1.8;
        }

        .tech-actions {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
        }

        .tech-primary-button,
        .tech-secondary-button {
            min-height: 57px;
            padding: 0 25px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 13px;
            color: #ffffff;
            text-decoration: none;
            font-size: 14px;
            font-weight: 700;
            border-radius: 13px;
            transition:
                transform 0.35s ease,
                background 0.35s ease,
                border-color 0.35s ease,
                box-shadow 0.35s ease;
        }

        .tech-primary-button {
            position: relative;
            overflow: hidden;
            background:
                linear-gradient(
                    105deg,
                    #3374ff,
                    #6649f3,
                    #9639eb
                );
            background-size: 220% 100%;
            box-shadow:
                0 18px 42px rgba(52, 72, 225, 0.42),
                inset 0 1px 0 rgba(255, 255, 255, 0.23);
            animation:
                techButtonGradient 5s ease-in-out infinite;
        }

        .tech-primary-button::before {
            content: "";
            position: absolute;
            top: 0;
            left: -135%;
            width: 75%;
            height: 100%;
            transform: skewX(-22deg);
            background:
                linear-gradient(
                    90deg,
                    transparent,
                    rgba(255, 255, 255, 0.35),
                    transparent
                );
            animation:
                techButtonShine 4.2s ease-in-out infinite;
        }

        .tech-primary-button > * {
            position: relative;
            z-index: 2;
        }

        .tech-primary-button svg {
            width: 19px;
            height: 19px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.9;
            stroke-linecap: round;
            stroke-linejoin: round;
            transition: transform 0.3s ease;
        }

        .tech-primary-button:hover {
            color: #ffffff;
            transform: translateY(-4px);
            box-shadow:
                0 25px 50px rgba(56, 67, 222, 0.54);
        }

        .tech-primary-button:hover svg {
            transform: translateX(5px);
        }

        .tech-secondary-button {
            border: 1px solid rgba(205, 220, 255, 0.25);
            background: rgba(255, 255, 255, 0.07);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(15px);
        }

        .tech-secondary-button:hover {
            color: #ffffff;
            transform: translateY(-4px);
            border-color: rgba(205, 220, 255, 0.5);
            background: rgba(255, 255, 255, 0.13);
        }

        .tech-statistics {
            margin-top: 44px;
            display: flex;
            align-items: center;
            gap: 23px;
        }

        .tech-stat-item {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .tech-stat-item strong {
            color: #ffffff;
            font-size: 23px;
            font-weight: 800;
        }

        .tech-stat-item span {
            color: rgba(208, 221, 245, 0.58);
            font-size: 10px;
            font-weight: 600;
        }

        .tech-stat-divider {
            width: 1px;
            height: 38px;
            background: rgba(200, 216, 247, 0.18);
        }

        /* ======================================
           FORM
        ====================================== */

        .tech-form-shell {
            position: relative;
            width: 100%;
            max-width: 550px;
            margin-left: auto;
            opacity: 0;
            transform:
                translate3d(65px, 38px, 0)
                scale(0.93)
                rotateY(-5deg);
            filter: blur(13px);
            perspective: 1000px;
        }

        .tech-hero.tech-loaded .tech-form-shell {
            animation:
                techFormShellReveal 1.2s
                cubic-bezier(0.2, 0.78, 0.2, 1)
                0.62s forwards;
        }

        .tech-form-border {
            position: absolute;
            z-index: -1;
            inset: -1px;
            border-radius: 28px;
            background:
                linear-gradient(
                    135deg,
                    rgba(92, 149, 255, 0.9),
                    rgba(255, 255, 255, 0.07) 30%,
                    rgba(175, 95, 255, 0.72) 70%,
                    rgba(71, 221, 255, 0.55)
                );
            background-size: 300% 300%;
            animation:
                techFormBorderFlow 7s ease-in-out infinite;
        }

        .tech-form-card {
            position: relative;
            width: 100%;
            padding: 35px;
            overflow: hidden;
            border-radius: 27px;
            background:
                linear-gradient(
                    145deg,
                    rgba(9, 28, 68, 0.9),
                    rgba(14, 20, 58, 0.84)
                );
            box-shadow:
                0 45px 95px rgba(0, 4, 22, 0.58),
                inset 0 1px 0 rgba(255, 255, 255, 0.14);
            backdrop-filter: blur(28px);
        }

        .tech-form-card::before {
            content: "";
            position: absolute;
            top: -180px;
            right: -130px;
            width: 320px;
            height: 320px;
            border-radius: 50%;
            filter: blur(30px);
            pointer-events: none;
            background: rgba(127, 63, 249, 0.22);
            animation:
                techFormGlow 8s ease-in-out infinite alternate;
        }

        .tech-form-card::after {
            content: "";
            position: absolute;
            right: -160px;
            bottom: -200px;
            width: 330px;
            height: 330px;
            border-radius: 50%;
            filter: blur(42px);
            pointer-events: none;
            background: rgba(41, 179, 255, 0.1);
            animation:
                techFormGlowTwo 10s ease-in-out infinite alternate;
        }

        .tech-form-header {
            position: relative;
            z-index: 2;
            margin-bottom: 27px;
            display: flex;
            justify-content: space-between;
            gap: 18px;
        }

        .tech-form-label {
            color: #83b2ff;
            font-size: 9px;
            font-weight: 800;
            letter-spacing: 1.7px;
        }

        .tech-form-header h2 {
            margin: 8px 0 7px;
            color: #ffffff;
            font-family: "Manrope", sans-serif;
            font-size: 27px;
            line-height: 1.25;
            letter-spacing: -0.7px;
        }

        .tech-form-header p {
            max-width: 385px;
            margin: 0;
            color: rgba(208, 221, 245, 0.63);
            font-size: 12px;
            line-height: 1.65;
        }

        .tech-form-icon {
            width: 50px;
            height: 50px;
            flex-shrink: 0;
            display: grid;
            place-items: center;
            color: #ffffff;
            border-radius: 15px;
            background:
                linear-gradient(
                    135deg,
                    #3978ff,
                    #873beb
                );
            box-shadow:
                0 15px 32px rgba(56, 73, 221, 0.38);
            animation:
                techFormIconFloat 4s ease-in-out infinite;
        }

        .tech-form-icon svg {
            width: 23px;
            height: 23px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.7;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .tech-form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px;
        }

        .tech-field {
            position: relative;
            z-index: 2;
            margin-bottom: 17px;
        }

        .tech-field label {
            display: block;
            margin: 0 0 8px 2px;
            color: rgba(230, 238, 252, 0.81);
            font-size: 11px;
            font-weight: 600;
        }

        .tech-input-wrapper {
            position: relative;
        }

        .tech-input-wrapper > svg {
            position: absolute;
            top: 50%;
            left: 14px;
            width: 18px;
            height: 18px;
            transform: translateY(-50%);
            fill: none;
            stroke: rgba(185, 204, 240, 0.63);
            stroke-width: 1.7;
            stroke-linecap: round;
            stroke-linejoin: round;
            pointer-events: none;
            transition:
                stroke 0.3s ease,
                transform 0.3s ease;
        }

        .tech-input-wrapper input,
        .tech-input-wrapper select {
            width: 100%;
            height: 51px;
            padding: 0 15px 0 44px;
            color: #ffffff;
            font-size: 12px;
            outline: none;
            border: 1px solid rgba(198, 215, 249, 0.15);
            border-radius: 11px;
            background: rgba(255, 255, 255, 0.065);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.035);
            transition:
                border-color 0.3s ease,
                background 0.3s ease,
                box-shadow 0.3s ease,
                transform 0.3s ease;
        }

        .tech-input-wrapper input::placeholder {
            color: rgba(201, 214, 240, 0.41);
        }

        .tech-input-wrapper select {
            cursor: pointer;
            color-scheme: dark;
        }

        .tech-input-wrapper select option {
            color: #ffffff;
            background: #102451;
        }

        .tech-input-wrapper input:focus,
        .tech-input-wrapper select:focus {
            transform: translateY(-1px);
            border-color: rgba(108, 155, 255, 0.62);
            background: rgba(255, 255, 255, 0.11);
            box-shadow:
                0 0 0 4px rgba(62, 104, 245, 0.11),
                0 12px 30px rgba(0, 0, 0, 0.12);
        }

        .tech-input-wrapper:focus-within > svg {
            stroke: #80b2ff;
            transform:
                translateY(-50%)
                scale(1.1);
        }

        .tech-form-button {
            position: relative;
            z-index: 2;
            width: 100%;
            height: 57px;
            margin-top: 3px;
            padding: 0 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 13px;
            overflow: hidden;
            color: #ffffff;
            font-size: 13px;
            font-weight: 700;
            border: 0;
            border-radius: 12px;
            cursor: pointer;
            background:
                linear-gradient(
                    100deg,
                    #3474ff,
                    #664bf2,
                    #9139eb
                );
            background-size: 210% 100%;
            box-shadow:
                0 18px 38px rgba(47, 62, 206, 0.39),
                inset 0 1px 0 rgba(255, 255, 255, 0.22);
            animation:
                techButtonGradient 5s ease-in-out infinite;
            transition:
                transform 0.35s ease,
                box-shadow 0.35s ease;
        }

        .tech-form-button::before {
            content: "";
            position: absolute;
            inset: 0;
            transform: translateX(-115%);
            background:
                linear-gradient(
                    110deg,
                    transparent 20%,
                    rgba(255, 255, 255, 0.27) 48%,
                    transparent 76%
                );
            animation:
                techFormButtonShine 4.1s ease-in-out infinite;
        }

        .tech-form-button > * {
            position: relative;
            z-index: 2;
        }

        .tech-form-button svg {
            width: 19px;
            height: 19px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.9;
            stroke-linecap: round;
            stroke-linejoin: round;
            transition: transform 0.3s ease;
        }

        .tech-form-button:hover {
            transform: translateY(-3px);
            box-shadow:
                0 24px 46px rgba(54, 63, 210, 0.52);
        }

        .tech-form-button:hover svg {
            transform: translateX(5px);
        }

        .tech-form-security {
            position: relative;
            z-index: 2;
            margin-top: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 7px;
            color: rgba(202, 215, 241, 0.51);
            font-size: 9px;
        }

        .tech-form-security svg {
            width: 13px;
            height: 13px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        /* ======================================
           PAGE LOAD ANIMATIONS
        ====================================== */

        .tech-content-reveal {
            opacity: 0;
            transform: translateY(28px);
            filter: blur(7px);
        }

        .tech-hero.tech-loaded .tech-content-reveal {
            animation:
                techContentReveal 0.9s
                cubic-bezier(0.2, 0.78, 0.2, 1)
                forwards;
        }

        .tech-hero.tech-loaded .tech-hero-badge {
            animation-delay: 0.08s;
        }

        .tech-hero.tech-loaded .tech-description {
            animation-delay: 1.55s;
        }

        .tech-hero.tech-loaded .tech-actions {
            animation-delay: 1.76s;
        }

        .tech-hero.tech-loaded .tech-statistics {
            animation-delay: 1.98s;
        }

        .tech-form-reveal {
            opacity: 0;
            transform: translateY(22px);
            filter: blur(6px);
        }

        .tech-hero.tech-loaded .tech-form-reveal {
            animation:
                techFormItemReveal 0.7s
                cubic-bezier(0.2, 0.78, 0.2, 1)
                forwards;
        }

        .tech-hero.tech-loaded .tech-form-header {
            animation-delay: 1.03s;
        }

        .tech-hero.tech-loaded
        .tech-form-row:nth-of-type(1)
        .tech-field:nth-child(1) {
            animation-delay: 1.16s;
        }

        .tech-hero.tech-loaded
        .tech-form-row:nth-of-type(1)
        .tech-field:nth-child(2) {
            animation-delay: 1.29s;
        }

        .tech-hero.tech-loaded
        .tech-form-card > .tech-field {
            animation-delay: 1.42s;
        }

        .tech-hero.tech-loaded
        .tech-form-row:nth-of-type(2)
        .tech-field:nth-child(1) {
            animation-delay: 1.55s;
        }

        .tech-hero.tech-loaded
        .tech-form-row:nth-of-type(2)
        .tech-field:nth-child(2) {
            animation-delay: 1.68s;
        }

        .tech-hero.tech-loaded .tech-form-button {
            animation-delay: 1.81s;
        }

        .tech-hero.tech-loaded .tech-form-security {
            animation-delay: 1.95s;
        }

        /* ======================================
           KEYFRAMES
        ====================================== */

        @keyframes techAuroraMove {
            0% {
                transform:
                    translate3d(-3%, -2%, 0)
                    scale(1);
            }

            30% {
                transform:
                    translate3d(4%, 2%, 0)
                    scale(1.08);
            }

            65% {
                transform:
                    translate3d(-1%, 5%, 0)
                    scale(1.04);
            }

            100% {
                transform:
                    translate3d(5%, -3%, 0)
                    scale(1.13);
            }
        }

        @keyframes techSpotlight {
            from {
                transform:
                    translate3d(-4%, -2%, 0)
                    rotate(-25deg)
                    scale(1);
            }

            to {
                transform:
                    translate3d(115%, 16%, 0)
                    rotate(-18deg)
                    scale(1.15);
            }
        }

        @keyframes techGridTravel {
            from {
                background-position: 0 0;
            }

            to {
                background-position: 0 130px;
            }
        }

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

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

        @keyframes techWaveOne {
            0%,
            100% {
                transform:
                    translate3d(0, 0, 0)
                    rotate(-13deg)
                    scale(1);
            }

            50% {
                transform:
                    translate3d(100px, 55px, 0)
                    rotate(5deg)
                    scale(1.12);
            }
        }

        @keyframes techWaveTwo {
            0%,
            100% {
                transform:
                    translate3d(0, 0, 0)
                    rotate(13deg)
                    scale(1);
            }

            50% {
                transform:
                    translate3d(-100px, -60px, 0)
                    rotate(-7deg)
                    scale(1.12);
            }
        }

        @keyframes techLightTravel {
            0% {
                opacity: 0;
                transform:
                    translateX(0)
                    rotate(-24deg);
            }

            15% {
                opacity: 0.58;
            }

            78% {
                opacity: 0.28;
            }

            100% {
                opacity: 0;
                transform:
                    translateX(calc(100vw + 1650px))
                    rotate(-24deg);
            }
        }

        @keyframes techBadgePulse {
            0%,
            100% {
                transform: scale(1);
                box-shadow:
                    0 0 0 5px rgba(82, 139, 255, 0.14),
                    0 0 18px rgba(92, 154, 255, 0.62);
            }

            50% {
                transform: scale(1.18);
                box-shadow:
                    0 0 0 11px rgba(82, 139, 255, 0.02),
                    0 0 24px rgba(92, 154, 255, 0.8);
            }
        }

        @keyframes techLetterReveal {
            from {
                opacity: 0;
                transform:
                    translateY(42px)
                    rotateX(78deg)
                    scale(0.8);
                filter: blur(9px);
            }

            to {
                opacity: 1;
                transform:
                    translateY(0)
                    rotateX(0deg)
                    scale(1);
                filter: blur(0);
            }
        }

        @keyframes techHeadingColorWave {
            0% {
                background-position: 0% center;
                filter:
                    drop-shadow(
                        0 0 0 rgba(74, 174, 255, 0)
                    );
            }

            25% {
                background-position: 35% center;
                filter:
                    drop-shadow(
                        0 0 9px rgba(67, 214, 255, 0.15)
                    );
            }

            50% {
                background-position: 72% center;
                filter:
                    drop-shadow(
                        0 0 13px rgba(140, 103, 255, 0.21)
                    );
            }

            75% {
                background-position: 100% center;
                filter:
                    drop-shadow(
                        0 0 10px rgba(222, 92, 255, 0.18)
                    );
            }

            100% {
                background-position: 0% center;
                filter:
                    drop-shadow(
                        0 0 0 rgba(74, 174, 255, 0)
                    );
            }
        }

        @keyframes techContentReveal {
            from {
                opacity: 0;
                transform: translateY(28px);
                filter: blur(7px);
            }

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

        @keyframes techFormShellReveal {
            from {
                opacity: 0;
                transform:
                    translate3d(65px, 38px, 0)
                    scale(0.93)
                    rotateY(-5deg);
                filter: blur(13px);
            }

            to {
                opacity: 1;
                transform:
                    translate3d(0, 0, 0)
                    scale(1)
                    rotateY(0deg);
                filter: blur(0);
            }
        }

        @keyframes techFormItemReveal {
            from {
                opacity: 0;
                transform: translateY(22px);
                filter: blur(6px);
            }

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

        @keyframes techFormBorderFlow {
            0%,
            100% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }
        }

        @keyframes techFormGlow {
            from {
                transform:
                    translate3d(0, 0, 0)
                    scale(1);
            }

            to {
                transform:
                    translate3d(-60px, 58px, 0)
                    scale(1.24);
            }
        }

        @keyframes techFormGlowTwo {
            from {
                transform:
                    translate3d(0, 0, 0)
                    scale(0.9);
            }

            to {
                transform:
                    translate3d(-60px, -50px, 0)
                    scale(1.2);
            }
        }

        @keyframes techFormIconFloat {
            0%,
            100% {
                transform: translateY(0) rotate(0deg);
            }

            50% {
                transform: translateY(-6px) rotate(2deg);
            }
        }

        @keyframes techButtonGradient {
            0%,
            100% {
                background-position: 0% center;
            }

            50% {
                background-position: 100% center;
            }
        }

        @keyframes techButtonShine {
            0%,
            55% {
                left: -135%;
            }

            82%,
            100% {
                left: 155%;
            }
        }

        @keyframes techFormButtonShine {
            0%,
            55% {
                transform: translateX(-115%);
            }

            82%,
            100% {
                transform: translateX(115%);
            }
        }

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

        @media (max-width: 1050px) {
            .tech-hero {
                padding-top: 72px;
            }

            .tech-hero-container {
                grid-template-columns: 1fr;
                max-width: 770px;
                gap: 65px;
            }

            .tech-hero-content {
                max-width: 730px;
                margin: 0 auto;
                text-align: center;
            }

            .tech-hero-badge {
                margin-right: auto;
                margin-left: auto;
            }

            .tech-description {
                margin-right: auto;
                margin-left: auto;
            }

            .tech-actions,
            .tech-statistics {
                justify-content: center;
            }

            .tech-form-shell {
                max-width: 595px;
                margin: 0 auto;
            }

            .tech-floor-grid {
                width: 130%;
            }
        }

        @media (max-width: 700px) {
            .tech-hero {
                min-height: auto;
                padding: 62px 16px 55px;
            }

            .tech-hero-container {
                gap: 54px;
            }

            .tech-main-heading {
                min-height: 126px;
                font-size: 41px;
                line-height: 1.1;
                letter-spacing: -2px;
            }

            .tech-description {
                font-size: 15px;
            }

            .tech-form-card {
                padding: 27px 21px;
                border-radius: 22px;
            }

            .tech-form-border {
                border-radius: 23px;
            }

            .tech-form-row {
                grid-template-columns: 1fr;
                gap: 0;
            }

            .tech-form-icon {
                display: none;
            }

            .tech-ring-one {
                right: -380px;
            }

            .tech-floor-grid {
                right: -60%;
                width: 190%;
                opacity: 0.12;
            }
        }

        @media (max-width: 480px) {
            .tech-main-heading {
                min-height: 112px;
                font-size: 35px;
            }

            .tech-actions {
                flex-direction: column;
            }

            .tech-primary-button,
            .tech-secondary-button {
                width: 100%;
            }

            .tech-statistics {
                gap: 13px;
            }

            .tech-stat-item strong {
                font-size: 19px;
            }

            .tech-stat-item span {
                max-width: 76px;
                font-size: 8px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .tech-aurora,
            .tech-spotlight,
            .tech-floor-grid,
            .tech-ring,
            .tech-energy-wave,
            .tech-light-line,
            .tech-primary-button::before,
            .tech-form-button::before {
                animation: none !important;
            }
        }
/*---------------------------------------------------------------------------------------*/
.ns-services-section,
.ns-services-section * {
    box-sizing: border-box;
}

.ns-services-section {
    position: relative;
    width: 100%;
    padding: 95px 24px 75px;
    overflow: hidden;
    isolation: isolate;
    font-family: "Inter", Arial, sans-serif;
    background:
        radial-gradient(
            circle at 5% 10%,
            rgba(63, 111, 255, 0.1),
            transparent 30%
        ),
        radial-gradient(
            circle at 95% 75%,
            rgba(133, 64, 244, 0.1),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #f7f9ff 0%,
            #ffffff 46%,
            #f8f6ff 100%
        );
}

.ns-bg-grid {
    position: absolute;
    z-index: -5;
    inset: 0;
    opacity: 0.45;
    background-image:
        linear-gradient(
            rgba(48, 89, 190, 0.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(48, 89, 190, 0.045) 1px,
            transparent 1px
        );
    background-size: 55px 55px;
    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 15%,
            black 85%,
            transparent
        );
    animation: nsGridMove 25s linear infinite;
}

.ns-glow {
    position: absolute;
    z-index: -4;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
}

.ns-glow-one {
    width: 420px;
    height: 420px;
    top: -200px;
    left: -150px;
    background: rgba(54, 105, 255, 0.13);
    animation: nsGlowOne 12s ease-in-out infinite alternate;
}

.ns-glow-two {
    width: 430px;
    height: 430px;
    right: -180px;
    bottom: -220px;
    background: rgba(132, 59, 244, 0.13);
    animation: nsGlowTwo 15s ease-in-out infinite alternate;
}

.ns-services-container {
    position: relative;
    z-index: 2;
    width: min(1200px, 100%);
    margin: 0 auto;
}

.ns-section-header {
    max-width: 760px;
    margin: 0 auto 42px;
    text-align: center;
}

.ns-section-tag {
    width: fit-content;
    margin: 0 auto 16px;
    padding: 9px 15px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #3159d8;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid #dce5fb;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 10px 30px rgba(37, 68, 145, 0.08);
    backdrop-filter: blur(12px);
}

.ns-section-tag span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3870ff, #8a3cf0);
    box-shadow: 0 0 0 5px rgba(68, 101, 239, 0.1);
    animation: nsTagPulse 2s ease-in-out infinite;
}

.ns-section-header h2 {
    margin: 0;
    color: #0c1d47;
    font-family: "Manrope", sans-serif;
    font-size: clamp(38px, 4vw, 56px);
    line-height: 1.1;
    letter-spacing: -2.5px;
    font-weight: 800;
}

.ns-section-header h2 span {
    display: block;
    color: transparent;
    background:
        linear-gradient(
            90deg,
            #3869f4,
            #7049ee,
            #9038e9,
            #3aaedc
        );
    background-size: 240% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: nsTitleGradient 6s ease-in-out infinite;
}

.ns-section-header p {
    max-width: 690px;
    margin: 18px auto 0;
    color: #6c7891;
    font-size: 16px;
    line-height: 1.7;
}

.ns-services-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.ns-service-card {
    position: relative;
    min-height: 360px;
    padding: 25px 24px 23px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #e1e7f2;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow:
        0 20px 55px rgba(31, 53, 112, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(14px);
    transition:
        transform 0.4s cubic-bezier(0.2, 0.75, 0.2, 1),
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}

.ns-service-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 3px;
    transform: translateX(-50%);
    border-radius: 0 0 8px 8px;
    background: linear-gradient(90deg, #3970f6, #8540ef);
    transition: width 0.45s ease;
}

.ns-service-card:hover::before {
    width: 45%;
}

.ns-service-card:hover {
    transform: translateY(-10px);
    border-color: rgba(79, 101, 230, 0.24);
    box-shadow:
        0 32px 68px rgba(34, 54, 119, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.ns-featured-card {
    border-color: rgba(97, 99, 230, 0.22);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.97),
            rgba(246, 244, 255, 0.96)
        );
    box-shadow:
        0 24px 62px rgba(67, 61, 189, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.ns-popular-label {
    position: absolute;
    top: 17px;
    right: 17px;
    padding: 6px 10px;
    color: #ffffff;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.6px;
    border-radius: 100px;
    background: linear-gradient(100deg, #3a6ff5, #843bee);
    box-shadow: 0 8px 20px rgba(70, 65, 212, 0.24);
}

.ns-card-number {
    position: absolute;
    top: 20px;
    right: 22px;
    color: rgba(46, 69, 126, 0.08);
    font-family: "Manrope", sans-serif;
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
}

.ns-featured-card .ns-card-number {
    top: 52px;
}

.ns-icon-box {
    width: 54px;
    height: 54px;
    margin-bottom: 20px;
    display: grid;
    place-items: center;
    color: #ffffff;
    border-radius: 16px;
    background:
        linear-gradient(
            135deg,
            #3b73f8,
            #684cee,
            #8b39eb
        );
    background-size: 180% 180%;
    box-shadow:
        0 14px 28px rgba(61, 73, 214, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    animation: nsIconGradient 6s ease-in-out infinite;
    transition: transform 0.4s ease;
}

.ns-service-card:hover .ns-icon-box {
    transform: translateY(-4px) rotate(-3deg) scale(1.04);
}

.ns-icon-box svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ns-service-card h3 {
    margin: 0 0 11px;
    color: #10244d;
    font-family: "Manrope", sans-serif;
    font-size: 20px;
    line-height: 1.28;
    letter-spacing: -0.5px;
}

.ns-service-card > p {
    margin: 0 0 16px;
    color: #748097;
    font-size: 13px;
    line-height: 1.65;
}

.ns-service-card ul {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.ns-service-card li {
    position: relative;
    margin-bottom: 8px;
    padding-left: 22px;
    color: #526077;
    font-size: 11px;
    font-weight: 600;
}

.ns-service-card li:last-child {
    margin-bottom: 0;
}

.ns-service-card li::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            #ffffff 0 25%,
            transparent 28%
        ),
        linear-gradient(135deg, #3d70f5, #8740ef);
    box-shadow: 0 4px 10px rgba(69, 87, 218, 0.18);
}

/* Equal bottom position for all Explore Solution links */

.ns-card-link {
    margin-top: auto;
    padding-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: fit-content;
    color: #345fd9;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
}

.ns-card-link span {
    font-size: 18px;
    line-height: 1;
    transition: transform 0.3s ease;
}

.ns-card-link:hover {
    color: #6b43eb;
}

.ns-card-link:hover span {
    transform: translateX(6px);
}

.ns-card-light {
    position: absolute;
    width: 170px;
    height: 170px;
    right: -105px;
    bottom: -105px;
    border-radius: 50%;
    background: rgba(99, 79, 231, 0.08);
    filter: blur(10px);
    pointer-events: none;
    transition:
        transform 0.6s ease,
        opacity 0.6s ease;
}

.ns-service-card:hover .ns-card-light {
    transform: translate(-30px, -30px) scale(1.3);
    opacity: 1;
}

/* Scroll reveal */

.ns-reveal {
    opacity: 0;
    transform: translateY(42px) scale(0.97);
    filter: blur(8px);
    transition:
        opacity 0.9s cubic-bezier(0.2, 0.75, 0.2, 1),
        transform 0.9s cubic-bezier(0.2, 0.75, 0.2, 1),
        filter 0.9s ease;
}

.ns-reveal.ns-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

.ns-services-grid .ns-service-card:nth-child(1) {
    transition-delay: 0.05s;
}

.ns-services-grid .ns-service-card:nth-child(2) {
    transition-delay: 0.14s;
}

.ns-services-grid .ns-service-card:nth-child(3) {
    transition-delay: 0.23s;
}

.ns-services-grid .ns-service-card:nth-child(4) {
    transition-delay: 0.32s;
}

/* Animations */

@keyframes nsGridMove {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 110px 55px;
    }
}

@keyframes nsGlowOne {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(120px, 90px) scale(1.2);
    }
}

@keyframes nsGlowTwo {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(-100px, -80px) scale(1.2);
    }
}

@keyframes nsTagPulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 5px rgba(68, 101, 239, 0.1);
    }

    50% {
        transform: scale(1.16);
        box-shadow: 0 0 0 10px rgba(68, 101, 239, 0.02);
    }
}

@keyframes nsTitleGradient {
    0%,
    100% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }
}

@keyframes nsIconGradient {
    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* Tablet */

@media (max-width: 1100px) {
    .ns-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .ns-service-card {
        min-height: 380px;
    }
}

/* Mobile */

@media (max-width: 700px) {
    .ns-services-section {
        padding: 75px 16px 65px;
    }

    .ns-section-header {
        margin-bottom: 34px;
    }

    .ns-section-header h2 {
        font-size: 39px;
        letter-spacing: -1.7px;
    }

    .ns-section-header p {
        font-size: 14px;
    }

    .ns-services-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .ns-service-card {
        min-height: auto;
        padding: 23px 21px;
    }

    .ns-icon-box {
        margin-bottom: 18px;
    }

    .ns-service-card h3 {
        font-size: 19px;
    }

    .ns-card-link {
        margin-top: 14px;
    }
}

@media (max-width: 480px) {
    .ns-services-section {
        padding: 68px 14px 58px;
    }

    .ns-section-header h2 {
        font-size: 34px;
    }

    .ns-section-header p {
        font-size: 13px;
    }

    .ns-service-card {
        padding: 22px 19px;
        border-radius: 19px;
    }

    .ns-card-number {
        font-size: 37px;
    }

    .ns-popular-label {
        top: 15px;
        right: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ns-bg-grid,
    .ns-glow,
    .ns-section-tag span,
    .ns-section-header h2 span,
    .ns-icon-box {
        animation: none;
    }

    .ns-reveal {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

/*---------------------------------------------------------------------------------*/
.wc-section,
.wc-section * {
    box-sizing: border-box;
}

.wc-section {
    position: relative;
    width: 100%;
    padding: 110px 24px;
    overflow: hidden;
    isolation: isolate;
    font-family: "Inter", Arial, sans-serif;
    background:
        radial-gradient(
            circle at 7% 35%,
            rgba(56, 104, 245, 0.1),
            transparent 29%
        ),
        radial-gradient(
            circle at 92% 65%,
            rgba(134, 59, 240, 0.09),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7f9ff 50%,
            #ffffff 100%
        );
}

.wc-background-grid {
    position: absolute;
    z-index: -5;
    inset: 0;
    opacity: 0.38;
    pointer-events: none;
    background-image:
        linear-gradient(
            rgba(41, 80, 175, 0.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(41, 80, 175, 0.045) 1px,
            transparent 1px
        );
    background-size: 60px 60px;
    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 15%,
            black 85%,
            transparent
        );
    animation: wcGridMovement 28s linear infinite;
}

.wc-background-glow {
    position: absolute;
    z-index: -4;
    border-radius: 50%;
    filter: blur(75px);
    pointer-events: none;
}

.wc-glow-one {
    width: 430px;
    height: 430px;
    top: -170px;
    left: -190px;
    background: rgba(55, 111, 255, 0.12);
    animation: wcGlowOne 14s ease-in-out infinite alternate;
}

.wc-glow-two {
    width: 460px;
    height: 460px;
    right: -210px;
    bottom: -210px;
    background: rgba(132, 59, 241, 0.11);
    animation: wcGlowTwo 17s ease-in-out infinite alternate;
}

.wc-container {
    position: relative;
    z-index: 2;
    width: min(1200px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.96fr 1.04fr;
    align-items: center;
    gap: 85px;
}

/* ===================================
   LEFT VISUAL
=================================== */

.wc-visual {
    position: relative;
    width: 100%;
    min-height: 570px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1200px;
}

.wc-visual::before {
    content: "";
    position: absolute;
    z-index: -2;
    width: 470px;
    height: 470px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(88, 112, 244, 0.13),
            rgba(88, 112, 244, 0.03) 48%,
            transparent 70%
        );
    animation: wcVisualGlow 7s ease-in-out infinite alternate;
}

.wc-visual-orbit {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    border: 1px solid rgba(83, 112, 222, 0.13);
    pointer-events: none;
}

.wc-orbit-one {
    width: 520px;
    height: 520px;
    animation: wcOrbitRotate 24s linear infinite;
}

.wc-orbit-two {
    width: 390px;
    height: 390px;
    border-style: dashed;
    border-color: rgba(127, 78, 229, 0.16);
    animation: wcOrbitRotateReverse 19s linear infinite;
}

.wc-dashboard {
    position: relative;
    z-index: 3;
    width: min(510px, 100%);
    overflow: hidden;
    border: 1px solid rgba(196, 207, 233, 0.8);
    border-radius: 26px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.97),
            rgba(247, 248, 255, 0.91)
        );
    box-shadow:
        0 45px 95px rgba(33, 53, 112, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(22px);
    transform: rotateY(3deg) rotateX(1deg);
    animation: wcDashboardFloat 7s ease-in-out infinite;
}

.wc-dashboard::before {
    content: "";
    position: absolute;
    top: -100px;
    right: -100px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(124, 70, 241, 0.08);
    filter: blur(15px);
}

.wc-dashboard-top {
    position: relative;
    z-index: 2;
    height: 55px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e9edf5;
    background: rgba(255, 255, 255, 0.65);
}

.wc-window-dots {
    display: flex;
    gap: 6px;
}

.wc-window-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d9dfeb;
}

.wc-window-dots span:first-child {
    background: #6d77f5;
}

.wc-window-dots span:nth-child(2) {
    background: #9e72f4;
}

.wc-dashboard-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #54647d;
    font-size: 9px;
    font-weight: 700;
}

.wc-dashboard-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #35c98b;
    box-shadow: 0 0 0 5px rgba(53, 201, 139, 0.1);
    animation: wcStatusPulse 2s ease-in-out infinite;
}

.wc-dashboard-body {
    position: relative;
    z-index: 2;
    padding: 25px;
}

.wc-dashboard-heading {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wc-dashboard-heading > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.wc-dashboard-heading span {
    color: #8a96aa;
    font-size: 9px;
    font-weight: 600;
}

.wc-dashboard-heading strong {
    color: #14264c;
    font-size: 17px;
    font-weight: 800;
}

.wc-growth-badge {
    padding: 7px 10px;
    color: #286f52;
    font-size: 9px;
    font-weight: 800;
    border-radius: 100px;
    background: #e9faf2;
    border: 1px solid #d5f2e4;
}

.wc-chart {
    position: relative;
    height: 205px;
    overflow: hidden;
    border: 1px solid #e7ebf4;
    border-radius: 17px;
    background:
        linear-gradient(
            180deg,
            rgba(247, 249, 255, 0.9),
            rgba(255, 255, 255, 0.75)
        );
}

.wc-chart-lines {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.wc-chart-lines span {
    width: 100%;
    height: 1px;
    background: #edf0f6;
}

.wc-chart-svg {
    position: absolute;
    inset: 15px 13px 10px;
    width: calc(100% - 26px);
    height: calc(100% - 25px);
    overflow: visible;
}

.wc-chart-area {
    fill: url(#wcChartArea);
    opacity: 0;
    animation: wcChartAreaReveal 1.4s ease 0.6s forwards;
}

.wc-chart-path {
    fill: none;
    stroke: url(#wcChartStroke);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
}

.is-visible .wc-chart-path {
    animation: wcDrawChart 2s ease 0.5s forwards;
}

.wc-chart-point {
    position: absolute;
    width: 11px;
    height: 11px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: #6964f5;
    box-shadow:
        0 4px 12px rgba(84, 86, 222, 0.28),
        0 0 0 5px rgba(92, 95, 234, 0.09);
    opacity: 0;
}

.is-visible .wc-chart-point {
    animation: wcPointReveal 0.5s ease forwards;
}

.wc-point-one {
    left: 41%;
    top: 53%;
    animation-delay: 1.2s !important;
}

.wc-point-two {
    left: 67%;
    top: 36%;
    animation-delay: 1.5s !important;
}

.wc-point-three {
    right: 3%;
    top: 13%;
    animation-delay: 1.8s !important;
}

.wc-dashboard-cards {
    margin-top: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
}

.wc-mini-card {
    position: relative;
    padding: 14px;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    border: 1px solid #e5eaf3;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.8);
}

.wc-mini-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: #ffffff;
    border-radius: 10px;
    background: linear-gradient(135deg, #4279f8, #794bea);
    box-shadow: 0 9px 20px rgba(67, 78, 211, 0.2);
}

.wc-mini-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wc-mini-card > div:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.wc-mini-card span {
    color: #8994a7;
    font-size: 8px;
    font-weight: 600;
}

.wc-mini-card strong {
    color: #172a50;
    font-size: 14px;
}

.wc-mini-progress {
    grid-column: 1 / -1;
    width: 100%;
    height: 5px;
    overflow: hidden;
    border-radius: 20px;
    background: #edf0f7;
}

.wc-mini-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #4279f8, #8242ec);
}

.is-visible .wc-mini-progress span {
    animation: wcProgressReveal 1.6s ease 1s forwards;
}

.wc-floating-card {
    position: absolute;
    z-index: 5;
    min-width: 190px;
    padding: 13px 15px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid rgba(211, 219, 238, 0.9);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 20px 45px rgba(36, 54, 108, 0.14);
    backdrop-filter: blur(15px);
}

.wc-floating-card-one {
    top: 12%;
    left: -25px;
    animation: wcFloatingOne 5s ease-in-out infinite;
}

.wc-floating-card-two {
    right: -15px;
    bottom: 12%;
    animation: wcFloatingTwo 5.8s ease-in-out infinite;
}

.wc-floating-icon {
    width: 39px;
    height: 39px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: #ffffff;
    border-radius: 11px;
    background: linear-gradient(135deg, #3d75f7, #8240ec);
    box-shadow: 0 10px 22px rgba(62, 74, 208, 0.23);
}

.wc-floating-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wc-floating-card > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wc-floating-card span {
    color: #8792a6;
    font-size: 8px;
    font-weight: 600;
}

.wc-floating-card strong {
    color: #162a50;
    font-size: 10px;
}

/* ===================================
   RIGHT CONTENT
=================================== */

.wc-content {
    max-width: 620px;
}

.wc-section-tag {
    width: fit-content;
    margin-bottom: 18px;
    padding: 9px 15px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #315bdc;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid #dce5fb;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 10px 30px rgba(37, 68, 145, 0.07);
}

.wc-section-tag span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3772f5, #8a3cec);
    box-shadow: 0 0 0 5px rgba(68, 101, 239, 0.1);
    animation: wcTagPulse 2s ease-in-out infinite;
}

.wc-content h2 {
    margin: 0;
    color: #0c1e48;
    font-family: "Manrope", sans-serif;
    font-size: clamp(39px, 4.1vw, 47px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -2.7px;
}

.wc-content h2 span {
    display: block;
    color: transparent;
    background:
        linear-gradient(
            90deg,
            #376df2,
            #704bed,
            #9136e9,
            #38a9dc
        );
    background-size: 250% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: wcTitleGradient 6s ease-in-out infinite;
}

.wc-intro {
    max-width: 590px;
    margin: 21px 0 30px;
    color: #6f7b92;
    font-size: 15px;
    line-height: 1.75;
}

.wc-benefits {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.wc-benefit {
    position: relative;
    padding: 17px 18px;
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 15px;
    overflow: hidden;
    border: 1px solid #e3e8f2;
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 13px 35px rgba(33, 54, 111, 0.055);
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.wc-benefit::after {
    content: "";
    position: absolute;
    right: -80px;
    bottom: -80px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(103, 75, 231, 0.07);
    transition: transform 0.5s ease;
}

.wc-benefit:hover {
    transform: translateX(8px);
    border-color: rgba(82, 99, 226, 0.22);
    box-shadow: 0 20px 42px rgba(36, 53, 116, 0.1);
}

.wc-benefit:hover::after {
    transform: translate(-25px, -25px) scale(1.3);
}

.wc-benefit-number {
    position: relative;
    z-index: 2;
    color: rgba(44, 73, 139, 0.16);
    font-family: "Manrope", sans-serif;
    font-size: 24px;
    font-weight: 800;
}

.wc-benefit-icon {
    position: relative;
    z-index: 2;
    width: 47px;
    height: 47px;
    display: grid;
    place-items: center;
    color: #ffffff;
    border-radius: 14px;
    background: linear-gradient(135deg, #3e76f7, #8042ec);
    box-shadow: 0 12px 24px rgba(60, 74, 211, 0.23);
    transition: transform 0.35s ease;
}

.wc-benefit:hover .wc-benefit-icon {
    transform: rotate(-5deg) scale(1.05);
}

.wc-benefit-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wc-benefit > div:last-child {
    position: relative;
    z-index: 2;
}

.wc-benefit h3 {
    margin: 0 0 5px;
    color: #14284f;
    font-family: "Manrope", sans-serif;
    font-size: 16px;
    line-height: 1.35;
}

.wc-benefit p {
    margin: 0;
    color: #7a869b;
    font-size: 11px;
    line-height: 1.6;
}

.wc-achievements {
    margin-top: 27px;
    padding: 19px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid #dfe6f2;
    border-radius: 17px;
    background:
        linear-gradient(
            100deg,
            rgba(255, 255, 255, 0.92),
            rgba(248, 247, 255, 0.91)
        );
    box-shadow: 0 15px 40px rgba(32, 52, 108, 0.07);
}

.wc-achievement {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wc-achievement strong {
    color: #182c55;
    font-family: "Manrope", sans-serif;
    font-size: 21px;
    font-weight: 800;
}

.wc-achievement span {
    color: #8792a6;
    font-size: 9px;
    font-weight: 600;
}

.wc-achievement-divider {
    width: 1px;
    height: 35px;
    background: #e1e6f0;
}

/* ===================================
   GENERIC REVEAL STATES
=================================== */

[data-reveal] {
    opacity: 0;
    filter: blur(7px);
    transition:
        opacity 0.9s cubic-bezier(0.2, 0.75, 0.2, 1),
        transform 0.9s cubic-bezier(0.2, 0.75, 0.2, 1),
        filter 0.9s ease;
}

[data-reveal="up"] {
    transform: translateY(42px);
}

[data-reveal="down"] {
    transform: translateY(-42px);
}

[data-reveal="left"] {
    transform: translateX(-55px);
}

[data-reveal="right"] {
    transform: translateX(55px);
}

[data-reveal="zoom"] {
    transform: scale(0.9);
}

[data-reveal].is-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    filter: blur(0);
}

/* ===================================
   ANIMATIONS
=================================== */

@keyframes wcGridMovement {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 120px 60px;
    }
}

@keyframes wcGlowOne {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(120px, 80px) scale(1.2);
    }
}

@keyframes wcGlowTwo {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(-110px, -75px) scale(1.18);
    }
}

@keyframes wcVisualGlow {
    from {
        transform: scale(0.94);
        opacity: 0.7;
    }

    to {
        transform: scale(1.08);
        opacity: 1;
    }
}

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

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

@keyframes wcDashboardFloat {
    0%,
    100% {
        transform:
            translateY(0)
            rotateY(3deg)
            rotateX(1deg);
    }

    50% {
        transform:
            translateY(-12px)
            rotateY(-1deg)
            rotateX(0);
    }
}

@keyframes wcStatusPulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 5px rgba(53, 201, 139, 0.1);
    }

    50% {
        transform: scale(1.15);
        box-shadow: 0 0 0 9px rgba(53, 201, 139, 0.02);
    }
}

@keyframes wcDrawChart {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes wcChartAreaReveal {
    to {
        opacity: 1;
    }
}

@keyframes wcPointReveal {
    from {
        opacity: 0;
        transform: scale(0);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes wcProgressReveal {
    from {
        width: 0;
    }

    to {
        width: var(--progress);
    }
}

@keyframes wcFloatingOne {
    0%,
    100% {
        transform: translateY(0) rotate(-1deg);
    }

    50% {
        transform: translateY(-12px) rotate(1deg);
    }
}

@keyframes wcFloatingTwo {
    0%,
    100% {
        transform: translateY(0) rotate(1deg);
    }

    50% {
        transform: translateY(12px) rotate(-1deg);
    }
}

@keyframes wcTagPulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 5px rgba(68, 101, 239, 0.1);
    }

    50% {
        transform: scale(1.15);
        box-shadow: 0 0 0 10px rgba(68, 101, 239, 0.02);
    }
}

@keyframes wcTitleGradient {
    0%,
    100% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }
}

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

@media (max-width: 1080px) {
    .wc-container {
        grid-template-columns: 1fr;
        max-width: 770px;
        gap: 65px;
    }

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

    .wc-section-tag {
        margin-right: auto;
        margin-left: auto;
    }

    .wc-intro {
        margin-right: auto;
        margin-left: auto;
    }

    .wc-benefit {
        text-align: left;
    }

    .wc-visual {
        order: 2;
        min-height: 530px;
    }
}

@media (max-width: 700px) {
    .wc-section {
        padding: 80px 16px 75px;
    }

    .wc-container {
        gap: 50px;
    }

    .wc-content h2 {
        font-size: 39px;
        letter-spacing: -1.8px;
    }

    .wc-intro {
        font-size: 14px;
    }

    .wc-benefit {
        grid-template-columns: auto 1fr;
        padding: 16px;
    }

    .wc-benefit-number {
        display: none;
    }

    .wc-visual {
        min-height: 470px;
    }

    .wc-dashboard {
        transform: none;
    }

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

    .wc-orbit-one {
        width: 430px;
        height: 430px;
    }

    .wc-orbit-two {
        width: 330px;
        height: 330px;
    }
}

@media (max-width: 520px) {
    .wc-section {
        padding: 70px 14px 65px;
    }

    .wc-content h2 {
        font-size: 34px;
    }

    .wc-achievements {
        padding: 17px 13px;
        gap: 10px;
    }

    .wc-achievement strong {
        font-size: 17px;
    }

    .wc-achievement span {
        max-width: 70px;
        font-size: 8px;
    }

    .wc-dashboard-body {
        padding: 17px;
    }

    .wc-chart {
        height: 175px;
    }

    .wc-dashboard-cards {
        grid-template-columns: 1fr;
    }

    .wc-visual {
        min-height: 550px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wc-background-grid,
    .wc-background-glow,
    .wc-visual-orbit,
    .wc-dashboard,
    .wc-dashboard-status i,
    .wc-floating-card,
    .wc-section-tag span,
    .wc-content h2 span {
        animation: none !important;
    }

    [data-reveal] {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

/*---------------------------------------------------------------------------------*/
.fw-section,
.fw-section * {
    box-sizing: border-box;
}

.fw-section {
    position: relative;
    width: 100%;
    padding: 0 0 105px;
    overflow: hidden;
    isolation: isolate;
    font-family: "Inter", Arial, sans-serif;
    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(54, 99, 255, 0.15),
            transparent 30%
        ),
        radial-gradient(
            circle at 92% 74%,
            rgba(134, 55, 241, 0.13),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #030a18 0%,
            #07142c 44%,
            #100f31 100%
        );
}

/* Noise */

.fw-noise {
    position: absolute;
    z-index: -4;
    inset: 0;
    opacity: 0.05;
    pointer-events: none;
    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.8'/%3E%3C/svg%3E");
}

/* Glows */

.fw-glow {
    position: absolute;
    z-index: -3;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}

.fw-glow-one {
    width: 430px;
    height: 430px;
    top: 12%;
    left: -230px;
    background: rgba(48, 103, 255, 0.16);
    animation: fwGlowOne 14s ease-in-out infinite alternate;
}

.fw-glow-two {
    width: 460px;
    height: 460px;
    right: -240px;
    bottom: 8%;
    background: rgba(137, 57, 241, 0.15);
    animation: fwGlowTwo 17s ease-in-out infinite alternate;
}

/* Top Marquee */

.fw-marquee {
    position: relative;
    width: 100%;
    padding: 18px 0;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.025);
}

.fw-marquee-track {
    width: max-content;
    display: flex;
    align-items: center;
    gap: 34px;
    animation: fwMarquee 25s linear infinite;
}

.fw-marquee-track span {
    color: rgba(255, 255, 255, 0.72);
    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 4px;
}

.fw-marquee-track i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4b8cff, #b34bff);
    box-shadow: 0 0 16px rgba(104, 102, 255, 0.6);
}

/* Container */

.fw-container {
    position: relative;
    z-index: 2;
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto;
    padding-top: 105px;
}

/* Heading */

.fw-heading-row {
    margin-bottom: 80px;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    align-items: end;
    gap: 80px;
}

.fw-label {
    display: block;
    margin-bottom: 17px;
    color: #72a4ff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.2px;
}

.fw-heading-left h2 {
    max-width: 680px;
    margin: 0;
    color: #ffffff;
    font-family: "Manrope", sans-serif;
    font-size: clamp(42px, 5vw, 67px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -3.4px;
}

.fw-heading-left h2 span {
    display: block;
    color: transparent;
    background:
        linear-gradient(
            90deg,
            #5b96ff,
            #4bd6ff,
            #8e6fff,
            #cb5cff
        );
    background-size: 250% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: fwHeadingGradient 6s ease-in-out infinite;
}

.fw-heading-right {
    padding-bottom: 5px;
}

.fw-heading-right p {
    margin: 0 0 25px;
    color: rgba(216, 225, 244, 0.62);
    font-size: 14px;
    line-height: 1.8;
}

.fw-view-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
}

.fw-view-link::after {
    content: "";
    position: absolute;
}

.fw-view-link span {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.fw-view-link:hover span {
    transform: translate(4px, -4px);
}

/* Project Layout */

.fw-project {
    position: relative;
    margin-bottom: 105px;
    display: grid;
    grid-template-columns: 1.22fr 0.78fr;
    align-items: center;
    gap: 70px;
}

.fw-project:last-child {
    margin-bottom: 0;
}

.fw-project-right {
    grid-template-columns: 0.78fr 1.22fr;
}

/* Image */

.fw-project-image {
    position: relative;
    height: 455px;
    overflow: hidden;
    border-radius: 30px;
    background: #101a31;
    box-shadow: 0 40px 85px rgba(0, 0, 0, 0.38);
}

.fw-project-image::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: inherit;
    pointer-events: none;
}

.fw-project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.03);
    filter: saturate(0.88) contrast(1.05);
    transition:
        transform 1.1s cubic-bezier(0.2, 0.75, 0.2, 1),
        filter 0.7s ease;
}

.fw-project-image:hover img {
    transform: scale(1.11);
    filter: saturate(1.1) contrast(1.07);
}

.fw-image-overlay {
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(4, 10, 25, 0.05),
            rgba(4, 10, 25, 0.68)
        ),
        linear-gradient(
            90deg,
            rgba(20, 57, 133, 0.16),
            rgba(106, 35, 150, 0.12)
        );
}

.fw-project-number {
    position: absolute;
    z-index: 4;
    top: 25px;
    left: 28px;
    color: rgba(255, 255, 255, 0.92);
    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.fw-image-tags {
    position: absolute;
    z-index: 4;
    bottom: 24px;
    left: 25px;
    display: flex;
    gap: 8px;
}

.fw-image-tags span {
    padding: 8px 12px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 9px;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.19);
    border-radius: 100px;
    background: rgba(10, 19, 43, 0.48);
    backdrop-filter: blur(12px);
}

.fw-project-arrow {
    position: absolute;
    z-index: 4;
    right: 25px;
    bottom: 23px;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    color: #ffffff;
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            #3d78ff,
            #794bea,
            #a33be6
        );
    box-shadow: 0 16px 35px rgba(44, 55, 190, 0.42);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.fw-project-arrow:hover {
    color: #ffffff;
    transform: rotate(8deg) scale(1.08);
    box-shadow: 0 20px 42px rgba(57, 55, 205, 0.55);
}

.fw-project-arrow svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Content */

.fw-project-content {
    position: relative;
}

.fw-project-category {
    display: block;
    margin-bottom: 15px;
    color: #79a7ff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.fw-project-content h3 {
    margin: 0 0 19px;
    color: #ffffff;
    font-family: "Manrope", sans-serif;
    font-size: clamp(30px, 3vw, 43px);
    line-height: 1.16;
    letter-spacing: -1.7px;
}

.fw-project-content > p {
    margin: 0 0 30px;
    color: rgba(211, 221, 241, 0.62);
    font-size: 14px;
    line-height: 1.8;
}

.fw-project-results {
    display: flex;
    align-items: center;
    gap: 38px;
}

.fw-project-results div {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.fw-project-results div:first-child::after {
    content: "";
    position: absolute;
    top: 3px;
    right: -20px;
    width: 1px;
    height: 38px;
    background: rgba(255, 255, 255, 0.12);
}

.fw-project-results strong {
    color: #ffffff;
    font-family: "Manrope", sans-serif;
    font-size: 25px;
    font-weight: 800;
}

.fw-project-results span {
    color: rgba(208, 219, 240, 0.48);
    font-size: 9px;
    font-weight: 600;
}

/* Bottom Strip */

.fw-bottom-strip {
    margin-top: 110px;
    padding: 20px 0;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transform: rotate(-1.2deg) scale(1.02);
    background:
        linear-gradient(
            90deg,
            rgba(50, 105, 255, 0.14),
            rgba(133, 59, 243, 0.14)
        );
}

.fw-bottom-track {
    width: max-content;
    display: flex;
    align-items: center;
    gap: 30px;
    animation: fwBottomMarquee 20s linear infinite;
}

.fw-bottom-track span {
    color: rgba(255, 255, 255, 0.8);
    font-family: "Manrope", sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 3px;
}

/* Animations */

@keyframes fwGlowOne {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(150px, 100px) scale(1.25);
    }
}

@keyframes fwGlowTwo {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(-130px, -90px) scale(1.22);
    }
}

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

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

@keyframes fwBottomMarquee {
    from {
        transform: translateX(-20%);
    }

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

@keyframes fwHeadingGradient {
    0%,
    100% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }
}

/* Tablet */

@media (max-width: 1000px) {
    .fw-heading-row {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .fw-heading-right {
        max-width: 620px;
    }

    .fw-project,
    .fw-project-right {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .fw-project-right .fw-project-content {
        order: 2;
    }

    .fw-project-right .fw-project-image {
        order: 1;
    }

    .fw-project-content {
        max-width: 680px;
    }
}

/* Mobile */

@media (max-width: 700px) {
    .fw-section {
        padding-bottom: 80px;
    }

    .fw-container {
        width: min(100% - 32px, 1200px);
        padding-top: 75px;
    }

    .fw-heading-row {
        margin-bottom: 55px;
    }

    .fw-heading-left h2 {
        font-size: 40px;
        letter-spacing: -2px;
    }

    .fw-project {
        margin-bottom: 70px;
    }

    .fw-project-image {
        height: 340px;
        border-radius: 22px;
    }

    .fw-project-content h3 {
        font-size: 31px;
    }

    .fw-project-results {
        gap: 32px;
    }

    .fw-bottom-strip {
        margin-top: 75px;
    }
}

@media (max-width: 480px) {
    .fw-container {
        width: min(100% - 28px, 1200px);
    }

    .fw-heading-left h2 {
        font-size: 35px;
    }

    .fw-project-image {
        height: 285px;
    }

    .fw-project-arrow {
        width: 46px;
        height: 46px;
    }

    .fw-image-tags {
        right: 78px;
        flex-wrap: wrap;
    }

    .fw-project-content h3 {
        font-size: 27px;
    }

    .fw-project-results strong {
        font-size: 21px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fw-glow,
    .fw-marquee-track,
    .fw-bottom-track,
    .fw-heading-left h2 span {
        animation: none !important;
    }
}

/*---------------------------------------------------------------------------*/
/* =========================================================
   OUR PROCESS / JOURNEY SECTION
========================================================= */

.journey-process,
.journey-process * {
    box-sizing: border-box;
}

.journey-process {
    position: relative;
    width: 100%;
    padding: 110px 24px 105px;
    overflow: hidden;
    isolation: isolate;
    font-family: "Inter", Arial, sans-serif;
    background:
        radial-gradient(
            circle at 10% 18%,
            rgba(56, 108, 247, 0.11),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 78%,
            rgba(133, 62, 239, 0.1),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #f7f9ff 0%,
            #ffffff 48%,
            #f8f6ff 100%
        );
}

/* =========================================================
   BACKGROUND
========================================================= */

.journey-process__mesh {
    position: absolute;
    z-index: -8;
    inset: 0;
    opacity: 0.35;
    pointer-events: none;
    background-image:
        linear-gradient(
            rgba(48, 84, 172, 0.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(48, 84, 172, 0.045) 1px,
            transparent 1px
        );
    background-size: 64px 64px;
    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 13%,
            #000 87%,
            transparent
        );
    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 13%,
            #000 87%,
            transparent
        );
    animation: journeyMeshMove 28s linear infinite;
}

.journey-process__orb {
    position: absolute;
    z-index: -7;
    border-radius: 50%;
    filter: blur(85px);
    pointer-events: none;
}

.journey-process__orb--one {
    width: 410px;
    height: 410px;
    top: -230px;
    left: -190px;
    background: rgba(55, 107, 247, 0.14);
    animation: journeyOrbOne 15s ease-in-out infinite alternate;
}

.journey-process__orb--two {
    width: 450px;
    height: 450px;
    right: -220px;
    bottom: -240px;
    background: rgba(134, 57, 241, 0.13);
    animation: journeyOrbTwo 18s ease-in-out infinite alternate;
}

.journey-process__container {
    position: relative;
    z-index: 2;
    width: min(1180px, 100%);
    margin: 0 auto;
}

/* =========================================================
   HEADING
========================================================= */

.journey-process__heading {
    max-width: 790px;
    margin: 0 auto 82px;
    text-align: center;
}

.journey-process__tag {
    width: fit-content;
    margin: 0 auto 18px;
    padding: 9px 15px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #315bd9;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid #dce5fa;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 30px rgba(37, 68, 145, 0.07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.journey-process__tag span {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #3772f6, #8a3fed);
    box-shadow: 0 0 0 5px rgba(68, 101, 239, 0.1);
    animation: journeyTagPulse 2s ease-in-out infinite;
}

.journey-process__heading h2 {
    margin: 0;
    color: #0c1e48;
    font-family: "Manrope", sans-serif;
    font-size: clamp(40px, 4.5vw, 61px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -3px;
}

.journey-process__heading h2 span {
    display: block;
    color: transparent;
    background:
        linear-gradient(
            90deg,
            #376df3,
            #704bed,
            #9137e9,
            #36aadd
        );
    background-size: 260% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: journeyTitleGradient 6s ease-in-out infinite;
}

.journey-process__heading p {
    max-width: 690px;
    margin: 20px auto 0;
    color: #707c93;
    font-size: 15px;
    line-height: 1.75;
}

/* =========================================================
   TIMELINE
========================================================= */

.journey-process__timeline {
    position: relative;
    padding: 15px 0 10px;
}

.journey-process__rail {
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    overflow: visible;
    border-radius: 30px;
    background: #dfe5f2;
    transform: translateX(-50%);
}

.journey-process__rail::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 18px;
    height: 100%;
    opacity: 0.12;
    border-radius: 40px;
    background: linear-gradient(
        180deg,
        #3d78f7,
        #7551ed,
        #9b3ce8
    );
    filter: blur(8px);
    transform: translateX(-50%);
}

.journey-process__rail-fill {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
}

.journey-process__rail-fill::before {
    content: "";
    position: absolute;
    top: -45%;
    right: 0;
    left: 0;
    height: 190%;
    border-radius: inherit;
    background:
        linear-gradient(
            180deg,
            transparent 0%,
            #3d78f7 20%,
            #7551ed 48%,
            #9b3ce8 75%,
            transparent 100%
        );
    animation: journeyRailFlow 5s linear infinite;
}

.journey-process__beam {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 50%;
    width: 18px;
    height: 85px;
    border-radius: 30px;
    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(111, 82, 239, 0.98),
            transparent
        );
    box-shadow:
        0 0 20px rgba(103, 90, 240, 0.8),
        0 0 42px rgba(103, 90, 240, 0.42);
    transform: translateX(-50%);
    animation: journeyBeamMove 6s ease-in-out infinite;
}

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

.journey-step {
    position: relative;
    z-index: 2;
    min-height: 270px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr);
    align-items: center;
}

.journey-step + .journey-step {
    margin-top: 34px;
}

.journey-step__empty {
    width: 100%;
}

/* =========================================================
   STEP CONTENT
========================================================= */

.journey-step__content {
    position: relative;
    width: 100%;
    max-width: 460px;
    padding: 28px 30px 27px;
    overflow: hidden;
    border: 1px solid rgba(216, 224, 240, 0.95);
    border-radius: 24px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.97),
            rgba(247, 248, 255, 0.92)
        );
    box-shadow:
        0 22px 55px rgba(34, 54, 112, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.45s ease,
        border-color 0.4s ease;
}

.journey-step--left .journey-step__content {
    justify-self: end;
    text-align: right;
}

.journey-step--right .journey-step__content {
    justify-self: start;
    text-align: left;
}

.journey-step__content::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    width: 5px;
    height: 100%;
    background:
        linear-gradient(
            180deg,
            #3d76f7,
            #7b4cec,
            #9b3de8
        );
    transform: scaleY(0);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.journey-step--left .journey-step__content::before {
    right: 0;
    transform-origin: bottom;
}

.journey-step--right .journey-step__content::before {
    left: 0;
    transform-origin: top;
}

.journey-step__content::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: rgba(102, 78, 231, 0.075);
    filter: blur(10px);
    transition: transform 0.65s ease;
}

.journey-step--left .journey-step__content::after {
    right: -125px;
    bottom: -125px;
}

.journey-step--right .journey-step__content::after {
    left: -125px;
    bottom: -125px;
}

.journey-step__content:hover {
    border-color: rgba(83, 101, 224, 0.26);
    box-shadow:
        0 35px 75px rgba(35, 53, 115, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.journey-step--left .journey-step__content:hover {
    transform: translateX(-10px);
}

.journey-step--right .journey-step__content:hover {
    transform: translateX(10px);
}

.journey-step__content:hover::before,
.journey-step.journey-step--active
.journey-step__content::before {
    transform: scaleY(1);
}

.journey-step__content:hover::after {
    transform: translateY(-35px) scale(1.32);
}

.journey-step.journey-step--active
.journey-step__content {
    border-color: rgba(83, 101, 224, 0.22);
}

.journey-step__eyebrow {
    position: relative;
    z-index: 2;
    display: block;
    margin-bottom: 8px;
    color: #5272c8;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.journey-step__content h3 {
    position: relative;
    z-index: 2;
    margin: 0 0 13px;
    color: #12264d;
    font-family: "Manrope", sans-serif;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.8px;
}

.journey-step__content p {
    position: relative;
    z-index: 2;
    margin: 0 0 19px;
    color: #768299;
    font-size: 12px;
    line-height: 1.72;
}

.journey-step__meta {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.journey-step--left .journey-step__meta {
    justify-content: flex-end;
}

.journey-step__meta span {
    padding: 7px 10px;
    color: #536782;
    font-size: 8px;
    font-weight: 700;
    border: 1px solid #dfe6f2;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.84);
    transition:
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.journey-step__meta span:hover {
    color: #4866d4;
    border-color: rgba(78, 101, 220, 0.25);
    transform: translateY(-2px);
}

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

.journey-step__node {
    position: relative;
    width: 100px;
    height: 100px;
    display: grid;
    place-items: center;
    justify-self: center;
    transition:
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.6s ease;
}

.journey-step__node-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        conic-gradient(
            from 0deg,
            rgba(60, 118, 247, 0.15),
            #4f7af2,
            rgba(134, 63, 237, 0.2),
            #8d43ea,
            rgba(60, 118, 247, 0.15)
        );
    animation: journeyNodeRotate 7s linear infinite;
}

.journey-step__node-ring::before {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: inherit;
    background: #f8f9ff;
}

.journey-step__node-ring::after {
    content: "";
    position: absolute;
    inset: 14px;
    border: 1px dashed rgba(83, 103, 226, 0.15);
    border-radius: inherit;
}

.journey-step__node-core {
    position: relative;
    z-index: 3;
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    color: #ffffff;
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            #3d78f8,
            #6e50ed,
            #8e3fea
        );
    background-size: 180% 180%;
    box-shadow:
        0 16px 35px rgba(61, 74, 210, 0.28),
        0 0 0 8px rgba(91, 94, 229, 0.07);
    animation:
        journeyNodeGradient 5s ease-in-out infinite,
        journeyNodePulse 3s ease-in-out infinite;
    transition: transform 0.4s ease;
}

.journey-step:hover .journey-step__node-core {
    transform: rotate(-8deg) scale(1.08);
}

.journey-step.journey-step--active
.journey-step__node-core {
    animation:
        journeyNodeEntrance 0.8s
        cubic-bezier(0.22, 1, 0.36, 1)
        forwards,
        journeyNodeGradient 5s ease-in-out infinite,
        journeyNodePulse 3s ease-in-out infinite;
}

.journey-step__node-core svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.journey-step__number {
    position: absolute;
    z-index: 5;
    top: -3px;
    right: -2px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    color: #4169d6;
    font-family: "Manrope", sans-serif;
    font-size: 9px;
    font-weight: 800;
    border: 1px solid #dce4f4;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 9px 20px rgba(41, 65, 129, 0.13);
}

/* =========================================================
   COMPLETION BLOCK
========================================================= */

.journey-process__completion {
    position: relative;
    margin-top: 78px;
    padding: 24px 27px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    overflow: hidden;
    border: 1px solid rgba(210, 219, 238, 0.9);
    border-radius: 22px;
    background:
        linear-gradient(
            110deg,
            rgba(255, 255, 255, 0.97),
            rgba(244, 244, 255, 0.94)
        );
    box-shadow:
        0 23px 58px rgba(34, 53, 112, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.journey-process__completion::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.55;
    background:
        linear-gradient(
            110deg,
            transparent 30%,
            rgba(112, 75, 237, 0.09),
            transparent 70%
        );
    transform: translateX(-100%);
    animation: journeyCompletionShine 5s ease-in-out infinite;
}

.journey-process__completion-mark {
    position: relative;
    z-index: 2;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    color: #ffffff;
    border-radius: 16px;
    background: linear-gradient(135deg, #3d78f7, #8541ec);
    box-shadow: 0 14px 29px rgba(61, 74, 210, 0.25);
    animation: journeyCompletionPulse 3s ease-in-out infinite;
}

.journey-process__completion-mark svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.journey-process__completion-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.journey-process__completion-content span {
    color: #78859a;
    font-size: 10px;
    font-weight: 700;
}

.journey-process__completion-content strong {
    color: #13274d;
    font-family: "Manrope", sans-serif;
    font-size: 18px;
    line-height: 1.4;
}

.journey-process__completion > a {
    position: relative;
    z-index: 2;
    min-height: 51px;
    padding: 0 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-shrink: 0;
    color: #ffffff;
    text-decoration: none;
    font-size: 11px;
    font-weight: 800;
    border-radius: 12px;
    background:
        linear-gradient(
            100deg,
            #3a73f6,
            #694bed,
            #883aea
        );
    background-size: 190% 100%;
    box-shadow: 0 14px 30px rgba(62, 70, 210, 0.25);
    animation: journeyButtonGradient 5s ease-in-out infinite;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.journey-process__completion > a:hover {
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(62, 70, 210, 0.35);
}

.journey-process__completion > a span {
    font-size: 17px;
    transition: transform 0.3s ease;
}

.journey-process__completion > a:hover span {
    transform: translate(3px, -3px);
}

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

[data-site-reveal],
[data-reveal] {
    opacity: 0;
    visibility: hidden;
    filter: blur(7px);
    will-change: transform, opacity, filter;
    transition:
        opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.9s ease,
        visibility 0.9s ease;
}

[data-site-reveal="up"],
[data-reveal="up"] {
    transform: translate3d(0, 55px, 0);
}

[data-site-reveal="down"],
[data-reveal="down"] {
    transform: translate3d(0, -55px, 0);
}

[data-site-reveal="left"],
[data-reveal="left"] {
    transform: translate3d(-70px, 0, 0);
}

[data-site-reveal="right"],
[data-reveal="right"] {
    transform: translate3d(70px, 0, 0);
}

[data-site-reveal="zoom"],
[data-reveal="zoom"] {
    transform: scale(0.82);
}

[data-site-reveal].is-site-visible,
[data-reveal].is-visible {
    opacity: 1;
    visibility: visible;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
}

/* Old service reveal compatibility */

.ns-reveal {
    opacity: 0;
    visibility: hidden;
    filter: blur(7px);
    transform: translateY(45px);
    transition:
        opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.9s ease,
        visibility 0.9s ease;
}

.ns-reveal.ns-visible {
    opacity: 1;
    visibility: visible;
    filter: blur(0);
    transform: translateY(0);
}

/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes journeyMeshMove {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 128px 64px;
    }
}

@keyframes journeyOrbOne {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(130px, 95px) scale(1.2);
    }
}

@keyframes journeyOrbTwo {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(-120px, -90px) scale(1.2);
    }
}

@keyframes journeyTagPulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 5px rgba(68, 101, 239, 0.1);
    }

    50% {
        transform: scale(1.16);
        box-shadow: 0 0 0 10px rgba(68, 101, 239, 0.02);
    }
}

@keyframes journeyTitleGradient {
    0%,
    100% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }
}

@keyframes journeyRailFlow {
    from {
        transform: translateY(-35%);
    }

    to {
        transform: translateY(35%);
    }
}

@keyframes journeyBeamMove {
    0% {
        top: 0;
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    45% {
        opacity: 1;
    }

    55% {
        top: calc(100% - 85px);
        opacity: 1;
    }

    65% {
        opacity: 0;
    }

    100% {
        top: 0;
        opacity: 0;
    }
}

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

@keyframes journeyNodeGradient {
    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

@keyframes journeyNodePulse {
    0%,
    100% {
        box-shadow:
            0 16px 35px rgba(61, 74, 210, 0.28),
            0 0 0 8px rgba(91, 94, 229, 0.07);
    }

    50% {
        box-shadow:
            0 19px 40px rgba(61, 74, 210, 0.35),
            0 0 0 13px rgba(91, 94, 229, 0.025);
    }
}

@keyframes journeyNodeEntrance {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(-35deg);
    }

    60% {
        opacity: 1;
        transform: scale(1.12) rotate(8deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

@keyframes journeyCompletionShine {
    0%,
    20% {
        transform: translateX(-100%);
    }

    55%,
    100% {
        transform: translateX(100%);
    }
}

@keyframes journeyCompletionPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }
}

@keyframes journeyButtonGradient {
    0%,
    100% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }
}

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

@media (max-width: 980px) {
    .journey-process {
        padding: 95px 22px 90px;
    }

    .journey-step {
        grid-template-columns: minmax(0, 1fr) 100px minmax(0, 1fr);
    }

    .journey-step__content {
        padding: 25px;
    }

    .journey-step__content h3 {
        font-size: 21px;
    }

    .journey-step__node {
        width: 88px;
        height: 88px;
    }

    .journey-step__node-core {
        width: 60px;
        height: 60px;
    }
}

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

@media (max-width: 760px) {
    .journey-process {
        padding: 80px 16px 75px;
    }

    .journey-process__heading {
        margin-bottom: 58px;
    }

    .journey-process__heading h2 {
        font-size: 39px;
        letter-spacing: -1.8px;
    }

    .journey-process__heading p {
        font-size: 14px;
    }

    .journey-process__rail {
        left: 38px;
        transform: none;
    }

    .journey-step,
    .journey-step--left,
    .journey-step--right {
        min-height: auto;
        margin-bottom: 42px;
        display: grid;
        grid-template-columns: 76px minmax(0, 1fr);
        align-items: start;
    }

    .journey-step + .journey-step {
        margin-top: 0;
    }

    .journey-step__empty {
        display: none;
    }

    .journey-step__node {
        grid-column: 1;
        grid-row: 1;
        width: 76px;
        height: 76px;
    }

    .journey-step__node-core {
        width: 54px;
        height: 54px;
    }

    .journey-step__node-core svg {
        width: 23px;
        height: 23px;
    }

    .journey-step__number {
        width: 26px;
        height: 26px;
        font-size: 8px;
    }

    .journey-step__content,
    .journey-step--left .journey-step__content,
    .journey-step--right .journey-step__content {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        max-width: none;
        justify-self: stretch;
        text-align: left;
        padding: 23px 21px;
    }

    .journey-step--left .journey-step__content::before,
    .journey-step--right .journey-step__content::before {
        right: auto;
        left: 0;
        transform-origin: top;
    }

    .journey-step--left .journey-step__meta,
    .journey-step--right .journey-step__meta {
        justify-content: flex-start;
    }

    .journey-step--left .journey-step__content:hover,
    .journey-step--right .journey-step__content:hover {
        transform: translateX(5px);
    }

    .journey-process__completion {
        margin-top: 52px;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .journey-process__completion > a {
        grid-column: 1 / -1;
        width: 100%;
    }
}

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

@media (max-width: 480px) {
    .journey-process {
        padding: 70px 14px 65px;
    }

    .journey-process__heading {
        margin-bottom: 48px;
    }

    .journey-process__heading h2 {
        font-size: 34px;
        letter-spacing: -1.5px;
    }

    .journey-process__heading p {
        font-size: 13px;
    }

    .journey-process__rail {
        left: 29px;
        width: 3px;
    }

    .journey-step {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 8px;
        margin-bottom: 34px;
    }

    .journey-step__node {
        width: 58px;
        height: 58px;
    }

    .journey-step__node-core {
        width: 45px;
        height: 45px;
    }

    .journey-step__node-core svg {
        width: 19px;
        height: 19px;
    }

    .journey-step__node-ring::after {
        display: none;
    }

    .journey-step__number {
        top: -6px;
        right: -3px;
        width: 23px;
        height: 23px;
    }

    .journey-step__content,
    .journey-step--left .journey-step__content,
    .journey-step--right .journey-step__content {
        padding: 20px 17px;
        border-radius: 18px;
    }

    .journey-step__content h3 {
        font-size: 18px;
        line-height: 1.3;
    }

    .journey-step__content p {
        font-size: 11px;
    }

    .journey-step__meta {
        gap: 5px;
    }

    .journey-step__meta span {
        padding: 6px 8px;
        font-size: 7px;
    }

    .journey-process__completion {
        padding: 20px 17px;
        border-radius: 18px;
    }

    .journey-process__completion-mark {
        width: 46px;
        height: 46px;
    }

    .journey-process__completion-content strong {
        font-size: 14px;
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .journey-process__mesh,
    .journey-process__orb,
    .journey-process__tag span,
    .journey-process__heading h2 span,
    .journey-process__rail-fill::before,
    .journey-process__beam,
    .journey-step__node-ring,
    .journey-step__node-core,
    .journey-process__completion::before,
    .journey-process__completion-mark,
    .journey-process__completion > a {
        animation: none !important;
    }

    [data-site-reveal],
    [data-reveal],
    .ns-reveal {
        opacity: 1;
        visibility: visible;
        filter: none;
        transform: none;
    }
}
/*---------------------------------------------------------------------------------------*/
/* =========================================================
   TECHNOLOGY STACK SECTION - DARK VERSION
========================================================= */

.tech-stack-section,
.tech-stack-section * {
    box-sizing: border-box;
}

.tech-stack-section {
    position: relative;
    width: 100%;
    padding: 115px 24px;
    overflow: hidden;
    isolation: isolate;
    font-family: "Inter", Arial, sans-serif;
    background:
        radial-gradient(
            circle at 12% 20%,
            rgba(61, 120, 248, 0.14),
            transparent 26%
        ),
        radial-gradient(
            circle at 88% 75%,
            rgba(134, 58, 241, 0.14),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #050816 0%,
            #091124 46%,
            #0d1022 100%
        );
}

/* Background */

.tech-stack-bg {
    position: absolute;
    z-index: -8;
    inset: 0;
    opacity: 0.22;
    pointer-events: none;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px
        );
    background-size: 66px 66px;
    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 14%,
            #000 86%,
            transparent
        );
    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 14%,
            #000 86%,
            transparent
        );
    animation: techStackGridMove 28s linear infinite;
}

.tech-stack-orb {
    position: absolute;
    z-index: -7;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}

.tech-stack-orb-one {
    width: 420px;
    height: 420px;
    top: -220px;
    left: -200px;
    background: rgba(55, 108, 247, 0.17);
    animation: techStackOrbOne 15s ease-in-out infinite alternate;
}

.tech-stack-orb-two {
    width: 470px;
    height: 470px;
    right: -230px;
    bottom: -250px;
    background: rgba(134, 58, 241, 0.16);
    animation: techStackOrbTwo 18s ease-in-out infinite alternate;
}

/* Main Layout */

.tech-stack-container {
    position: relative;
    z-index: 2;
    width: min(1200px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.88fr 1.12fr;
    align-items: center;
    gap: 90px;
}

/* =========================================================
   LEFT CONTENT
========================================================= */

.tech-stack-content {
    max-width: 535px;
}

.tech-stack-tag {
    width: fit-content;
    margin-bottom: 18px;
    padding: 9px 15px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #9cb8ff;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.tech-stack-tag span {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #4e8cff, #a14eff);
    box-shadow: 0 0 0 5px rgba(92, 118, 255, 0.12);
    animation: techStackTagPulse 2s ease-in-out infinite;
}

.tech-stack-content h2 {
    margin: 0;
    color: #ffffff;
    font-family: "Manrope", sans-serif;
    font-size: clamp(40px, 4.3vw, 41px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -2.9px;
}

.tech-stack-content h2 span {
    display: block;
    color: transparent;
    background:
        linear-gradient(
            90deg,
            #63a3ff,
            #7f7cff,
            #c86bff,
            #45d0ff
        );
    background-size: 260% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: techStackTitleGradient 6s ease-in-out infinite;
}

.tech-stack-description {
    margin: 21px 0 30px;
    color: rgba(225, 233, 255, 0.72);
    font-size: 15px;
    line-height: 1.75;
}

/* Category List */

.tech-category-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.tech-category-button {
    position: relative;
    width: 100%;
    min-height: 88px;
    padding: 17px 14px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 35px;
    align-items: center;
    gap: 14px;
    overflow: hidden;
    cursor: pointer;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    background: transparent;
    text-align: left;
    transition:
        padding 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.4s ease;
}

.tech-category-button::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 5px 0;
    opacity: 0;
    border-radius: 16px;
    background:
        linear-gradient(
            100deg,
            rgba(255, 255, 255, 0.07),
            rgba(136, 85, 255, 0.08)
        );
    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transform: scaleX(0.96);
    transition:
        opacity 0.4s ease,
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.tech-category-button:hover,
.tech-category-button.is-active {
    padding-right: 20px;
    padding-left: 20px;
    border-color: transparent;
}

.tech-category-button:hover::before,
.tech-category-button.is-active::before {
    opacity: 1;
    transform: scaleX(1);
}

.tech-category-number {
    position: relative;
    z-index: 2;
    color: rgba(255, 255, 255, 0.2);
    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 800;
    transition:
        color 0.35s ease,
        transform 0.35s ease;
}

.tech-category-button:hover .tech-category-number,
.tech-category-button.is-active .tech-category-number {
    color: #82a7ff;
    transform: translateX(3px);
}

.tech-category-text {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.tech-category-text strong {
    color: #ffffff;
    font-family: "Manrope", sans-serif;
    font-size: 17px;
    line-height: 1.3;
    transition: color 0.35s ease;
}

.tech-category-text small {
    color: rgba(225, 233, 255, 0.55);
    font-size: 10px;
    font-weight: 600;
}

.tech-category-button:hover .tech-category-text strong,
.tech-category-button.is-active .tech-category-text strong {
    color: #9f8cff;
}

.tech-category-arrow {
    position: relative;
    z-index: 2;
    color: rgba(255, 255, 255, 0.45);
    font-size: 17px;
    text-align: center;
    transition:
        color 0.35s ease,
        transform 0.35s ease;
}

.tech-category-button:hover .tech-category-arrow,
.tech-category-button.is-active .tech-category-arrow {
    color: #b06fff;
    transform: translate(3px, -3px);
}

/* Footer Information */

.tech-stack-footer {
    margin-top: 28px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 13px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    background:
        linear-gradient(
            100deg,
            rgba(255, 255, 255, 0.05),
            rgba(255, 255, 255, 0.03)
        );
    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.tech-stack-footer-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: #ffffff;
    border-radius: 13px;
    background: linear-gradient(135deg, #3e77f8, #8141ec);
    box-shadow: 0 11px 23px rgba(61, 74, 210, 0.22);
}

.tech-stack-footer-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tech-stack-footer > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tech-stack-footer span {
    color: rgba(225, 233, 255, 0.56);
    font-size: 9px;
    font-weight: 600;
}

.tech-stack-footer strong {
    color: #ffffff;
    font-size: 12px;
}

/* =========================================================
   ORBIT VISUAL
========================================================= */

.tech-orbit-visual {
    position: relative;
    width: 100%;
    min-height: 650px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tech-orbit-glow {
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(86, 101, 239, 0.2),
            rgba(86, 101, 239, 0.06) 50%,
            transparent 72%
        );
    animation: techOrbitGlow 7s ease-in-out infinite alternate;
}

/* Rings */

.tech-orbit-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.tech-orbit-ring-one {
    width: 540px;
    height: 540px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: techOrbitRotate 30s linear infinite;
}

.tech-orbit-ring-two {
    width: 420px;
    height: 420px;
    border: 1px dashed rgba(161, 126, 255, 0.22);
    animation: techOrbitRotateReverse 22s linear infinite;
}

.tech-orbit-ring-three {
    width: 290px;
    height: 290px;
    border: 1px solid rgba(94, 132, 255, 0.14);
    animation: techOrbitRotate 17s linear infinite;
}

.tech-orbit-ring-one::before,
.tech-orbit-ring-one::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f8eff, #a14eff);
    box-shadow:
        0 0 0 6px rgba(79, 97, 225, 0.08),
        0 0 20px rgba(84, 91, 225, 0.45);
}

.tech-orbit-ring-one::before {
    top: 20%;
    left: 3%;
}

.tech-orbit-ring-one::after {
    right: 8%;
    bottom: 14%;
}

/* Center Core */

.tech-orbit-center {
    position: relative;
    z-index: 5;
    width: 180px;
    height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.04)
        );
    box-shadow:
        0 35px 75px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    animation: techCenterFloat 6s ease-in-out infinite;
}

.tech-center-glow {
    position: absolute;
    inset: -20px;
    z-index: -1;
    opacity: 0.52;
    border-radius: inherit;
    background:
        conic-gradient(
            from 0deg,
            rgba(61, 120, 248, 0.1),
            rgba(126, 67, 236, 0.44),
            rgba(61, 120, 248, 0.1)
        );
    filter: blur(15px);
    animation: techCenterGlowRotate 8s linear infinite;
}

.tech-center-icon {
    width: 59px;
    height: 59px;
    margin-bottom: 12px;
    display: grid;
    place-items: center;
    color: #ffffff;
    border-radius: 18px;
    background:
        linear-gradient(
            135deg,
            #3d78f8,
            #6d50ed,
            #8e3fea
        );
    background-size: 180% 180%;
    box-shadow:
        0 15px 31px rgba(61, 74, 210, 0.27),
        0 0 0 8px rgba(91, 94, 229, 0.06);
    animation: techCenterGradient 5s ease-in-out infinite;
}

.tech-center-icon svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tech-orbit-center > span {
    color: rgba(225, 233, 255, 0.62);
    font-size: 9px;
    font-weight: 600;
}

.tech-orbit-center > strong {
    margin-top: 4px;
    color: #ffffff;
    font-family: "Manrope", sans-serif;
    font-size: 16px;
}

/* Technology Items */

.tech-logo-item {
    position: absolute;
    z-index: 6;
    min-width: 104px;
    padding: 11px 13px;
    display: flex;
    align-items: center;
    gap: 9px;
    opacity: 0.22;
    filter: grayscale(0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    box-shadow:
        0 17px 37px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
    transform: scale(0.9);
    transition:
        opacity 0.5s ease,
        filter 0.5s ease,
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.4s ease,
        box-shadow 0.4s ease,
        background 0.4s ease;
}

.tech-logo-item.is-active {
    opacity: 1;
    filter: grayscale(0);
    transform: scale(1);
    border-color: rgba(100, 118, 255, 0.28);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.1),
            rgba(122, 76, 237, 0.09)
        );
    box-shadow:
        0 22px 48px rgba(0, 0, 0, 0.28),
        0 0 0 6px rgba(85, 96, 228, 0.04);
}

.tech-logo-item:hover {
    transform: translateY(-5px) scale(1.04);
}

.tech-logo-symbol {
    width: 37px;
    height: 37px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: #ffffff;
    border-radius: 11px;
    background: linear-gradient(135deg, #3e77f8, #8141ec);
    box-shadow: 0 9px 18px rgba(62, 74, 208, 0.21);
    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 800;
}

.tech-logo-item > span {
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

/* Positions */

.tech-logo-one {
    top: 8%;
    left: 40%;
    animation: techLogoFloatOne 5.2s ease-in-out infinite;
}

.tech-logo-two {
    top: 19%;
    right: 4%;
    animation: techLogoFloatTwo 6s ease-in-out infinite;
}

.tech-logo-three {
    right: 2%;
    bottom: 26%;
    animation: techLogoFloatThree 5.7s ease-in-out infinite;
}

.tech-logo-four {
    right: 22%;
    bottom: 6%;
    animation: techLogoFloatOne 6.1s ease-in-out infinite;
}

.tech-logo-five {
    bottom: 10%;
    left: 17%;
    animation: techLogoFloatTwo 5.4s ease-in-out infinite;
}

.tech-logo-six {
    top: 54%;
    left: 0;
    animation: techLogoFloatThree 6.2s ease-in-out infinite;
}

.tech-logo-seven {
    top: 25%;
    left: 2%;
    animation: techLogoFloatOne 5.8s ease-in-out infinite;
}

.tech-logo-eight {
    top: 2%;
    left: 16%;
    animation: techLogoFloatTwo 6.3s ease-in-out infinite;
}

.tech-logo-nine {
    top: 2%;
    right: 13%;
    animation: techLogoFloatThree 5.5s ease-in-out infinite;
}

.tech-logo-ten {
    right: 5%;
    bottom: 7%;
    animation: techLogoFloatOne 6.4s ease-in-out infinite;
}

/* Status */

.tech-orbit-status {
    position: absolute;
    z-index: 7;
    bottom: 1%;
    left: 50%;
    padding: 8px 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(225, 233, 255, 0.72);
    font-size: 9px;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
    transform: translateX(-50%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.tech-orbit-status span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #37ca8e;
    box-shadow: 0 0 0 5px rgba(55, 202, 142, 0.1);
    animation: techStatusPulse 2s ease-in-out infinite;
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes techStackGridMove {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 132px 66px;
    }
}

@keyframes techStackOrbOne {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(130px, 90px) scale(1.2);
    }
}

@keyframes techStackOrbTwo {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(-120px, -85px) scale(1.2);
    }
}

@keyframes techStackTagPulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 5px rgba(68, 101, 239, 0.1);
    }

    50% {
        transform: scale(1.16);
        box-shadow: 0 0 0 10px rgba(68, 101, 239, 0.02);
    }
}

@keyframes techStackTitleGradient {
    0%,
    100% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }
}

@keyframes techOrbitGlow {
    from {
        transform: scale(0.94);
        opacity: 0.7;
    }

    to {
        transform: scale(1.08);
        opacity: 1;
    }
}

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

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

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

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

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

@keyframes techCenterGradient {
    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

@keyframes techLogoFloatOne {
    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -10px;
    }
}

@keyframes techLogoFloatTwo {
    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 8px -7px;
    }
}

@keyframes techLogoFloatThree {
    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: -7px 9px;
    }
}

@keyframes techStatusPulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 5px rgba(55, 202, 142, 0.1);
    }

    50% {
        transform: scale(1.16);
        box-shadow: 0 0 0 9px rgba(55, 202, 142, 0.02);
    }
}

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

@media (max-width: 1080px) {
    .tech-stack-container {
        grid-template-columns: 1fr;
        max-width: 760px;
        gap: 65px;
    }

    .tech-stack-content {
        max-width: 700px;
        margin: 0 auto;
        text-align: center;
    }

    .tech-stack-tag {
        margin-right: auto;
        margin-left: auto;
    }

    .tech-category-button {
        text-align: left;
    }

    .tech-stack-footer {
        max-width: 500px;
        margin-right: auto;
        margin-left: auto;
        text-align: left;
    }

    .tech-orbit-visual {
        min-height: 620px;
    }
}

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

@media (max-width: 700px) {
    .tech-stack-section {
        padding: 80px 16px 75px;
    }

    .tech-stack-container {
        gap: 50px;
    }

    .tech-stack-content h2 {
        font-size: 39px;
        letter-spacing: -1.8px;
    }

    .tech-stack-description {
        font-size: 14px;
    }

    .tech-category-button {
        min-height: 82px;
    }

    .tech-orbit-visual {
        min-height: 520px;
        transform: scale(0.88);
        transform-origin: center;
    }

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

    .tech-orbit-ring-two {
        width: 365px;
        height: 365px;
    }

    .tech-orbit-ring-three {
        width: 255px;
        height: 255px;
    }

    .tech-orbit-center {
        width: 155px;
        height: 155px;
    }

    .tech-logo-item {
        min-width: 94px;
        padding: 9px 10px;
    }
}

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

@media (max-width: 480px) {
    .tech-stack-section {
        padding: 70px 14px 60px;
    }

    .tech-stack-content h2 {
        font-size: 34px;
        letter-spacing: -1.5px;
    }

    .tech-stack-description {
        font-size: 13px;
    }

    .tech-category-button {
        grid-template-columns: 32px minmax(0, 1fr) 25px;
        gap: 10px;
        padding: 15px 10px;
    }

    .tech-category-button:hover,
    .tech-category-button.is-active {
        padding-right: 14px;
        padding-left: 14px;
    }

    .tech-category-text strong {
        font-size: 15px;
    }

    .tech-category-text small {
        font-size: 9px;
    }

    .tech-stack-footer {
        padding: 14px;
    }

    .tech-orbit-visual {
        min-height: 450px;
        margin: -30px 0;
        transform: scale(0.7);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tech-stack-bg,
    .tech-stack-orb,
    .tech-stack-tag span,
    .tech-stack-content h2 span,
    .tech-orbit-glow,
    .tech-orbit-ring,
    .tech-orbit-center,
    .tech-center-glow,
    .tech-center-icon,
    .tech-logo-item,
    .tech-orbit-status span {
        animation: none !important;
    }
}

/*----------------------------------------------------------------------*/
/* =========================================================
   AUTOPLAY TESTIMONIAL SLIDER
========================================================= */

.review-slider-section,
.review-slider-section * {
    box-sizing: border-box;
}

.review-slider-section {
    position: relative;
    width: 100%;
    padding: 110px 24px 100px;
    overflow: hidden;
    isolation: isolate;
    font-family: "Inter", Arial, sans-serif;
    background:
        radial-gradient(
            circle at 7% 20%,
            rgba(55, 108, 247, 0.11),
            transparent 28%
        ),
        radial-gradient(
            circle at 93% 75%,
            rgba(134, 58, 241, 0.1),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #f8faff 0%,
            #ffffff 48%,
            #f8f6ff 100%
        );
}

/* Background */

.review-slider-bg {
    position: absolute;
    z-index: -8;
    inset: 0;
    opacity: 0.35;
    pointer-events: none;
    background-image:
        linear-gradient(
            rgba(45, 82, 173, 0.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(45, 82, 173, 0.045) 1px,
            transparent 1px
        );
    background-size: 68px 68px;
    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 12%,
            #000 88%,
            transparent
        );
    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 12%,
            #000 88%,
            transparent
        );
    animation: reviewGridMove 28s linear infinite;
}

.review-slider-glow {
    position: absolute;
    z-index: -7;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}

.review-glow-one {
    width: 430px;
    height: 430px;
    top: -230px;
    left: -210px;
    background: rgba(55, 108, 247, 0.14);
    animation: reviewGlowOne 15s ease-in-out infinite alternate;
}

.review-glow-two {
    width: 470px;
    height: 470px;
    right: -240px;
    bottom: -230px;
    background: rgba(134, 58, 241, 0.13);
    animation: reviewGlowTwo 18s ease-in-out infinite alternate;
}

.review-slider-container {
    position: relative;
    z-index: 2;
    width: min(1220px, 100%);
    margin: 0 auto;
}

/* Heading */

.review-slider-heading {
    max-width: 800px;
    margin: 0 auto 65px;
    text-align: center;
}

.review-slider-tag {
    width: fit-content;
    margin: 0 auto 18px;
    padding: 9px 15px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #315bd9;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid #dce5fa;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 30px rgba(37, 68, 145, 0.07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.review-slider-tag span {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #3772f6, #8a3fed);
    box-shadow: 0 0 0 5px rgba(68, 101, 239, 0.1);
    animation: reviewTagPulse 2s ease-in-out infinite;
}

.review-slider-heading h2 {
    margin: 0;
    color: #0c1e48;
    font-family: "Manrope", sans-serif;
    font-size: clamp(40px, 4.5vw, 61px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -3px;
}

.review-slider-heading h2 span {
    display: block;
    color: transparent;
    background:
        linear-gradient(
            90deg,
            #376df3,
            #704bed,
            #9137e9,
            #36aadd
        );
    background-size: 260% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: reviewHeadingGradient 6s ease-in-out infinite;
}

.review-slider-heading p {
    max-width: 690px;
    margin: 20px auto 0;
    color: #707c93;
    font-size: 15px;
    line-height: 1.75;
}

/* Slider Shell */

.review-slider-shell {
    position: relative;
}

.review-slider-viewport {
    width: 100%;
    overflow: hidden;
    padding: 20px 0 34px;
    touch-action: pan-y;
}

.review-slider-track {
    display: flex;
    align-items: stretch;
    will-change: transform;
    transition:
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.review-slider-track.is-resetting {
    transition: none;
}

.review-slide {
    flex: 0 0 calc(33.333333% - 18px);
    min-width: 0;
    margin-right: 27px;
}

/* Testimonial Card */

.review-card {
    position: relative;
    height: 100%;
    min-height: 375px;
    padding: 29px 27px 25px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(209, 218, 237, 0.94);
    border-radius: 25px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.98),
            rgba(247, 247, 255, 0.94)
        );
    box-shadow:
        0 23px 58px rgba(34, 52, 109, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.45s ease,
        border-color 0.4s ease;
}

.review-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 3px;
    border-radius: 0 0 20px 20px;
    background: linear-gradient(90deg, #3d78f7, #8940ec);
    transform: translateX(-50%);
    transition: width 0.45s ease;
}

.review-card:hover {
    transform: translateY(-10px);
    border-color: rgba(82, 99, 225, 0.25);
    box-shadow:
        0 36px 78px rgba(34, 52, 109, 0.17),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.review-card:hover::before {
    width: 45%;
}

.review-card-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}

.review-person {
    display: flex;
    align-items: center;
    gap: 12px;
}

.review-avatar {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: #ffffff;
    border: 3px solid #ffffff;
    border-radius: 50%;
    box-shadow:
        0 10px 25px rgba(44, 63, 132, 0.19),
        0 0 0 2px rgba(79, 101, 225, 0.12);
    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 800;
}

.review-avatar-blue {
    background: linear-gradient(135deg, #3478ef, #4aa5ef);
}

.review-avatar-purple {
    background: linear-gradient(135deg, #684fe9, #9a46ed);
}

.review-avatar-cyan {
    background: linear-gradient(135deg, #288ddf, #47c4d9);
}

.review-avatar-orange {
    background: linear-gradient(135deg, #ee7d38, #f0a13c);
}

.review-avatar-green {
    background: linear-gradient(135deg, #2ca87f, #4cc998);
}

.review-avatar-pink {
    background: linear-gradient(135deg, #d94c8d, #a84ce4);
}

.review-person > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.review-person strong {
    color: #162a51;
    font-size: 12px;
}

.review-person span {
    color: #8792a6;
    font-size: 8px;
    font-weight: 600;
}

.review-quote-mark {
    color: rgba(88, 82, 224, 0.12);
    font-family: Georgia, serif;
    font-size: 62px;
    font-weight: 800;
    line-height: 0.7;
}

.review-rating {
    position: relative;
    z-index: 2;
    margin: 24px 0 17px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.review-rating span {
    color: #ffb628;
    font-size: 11px;
    letter-spacing: 2px;
}

.review-rating small {
    color: #7e899d;
    font-size: 8px;
    font-weight: 800;
}

.review-card blockquote {
    position: relative;
    z-index: 2;
    margin: 0 0 25px;
    color: #536078;
    font-size: 12px;
    line-height: 1.75;
}

.review-card-footer {
    position: relative;
    z-index: 2;
    margin-top: auto;
    padding-top: 20px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 15px;
    border-top: 1px solid #e5eaf2;
}

.review-result {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.review-result strong {
    color: #315fd7;
    font-family: "Manrope", sans-serif;
    font-size: 22px;
    font-weight: 800;
}

.review-result span {
    color: #8994a7;
    font-size: 8px;
    font-weight: 600;
}

.review-verified {
    padding: 7px 10px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #347055;
    font-size: 7px;
    font-weight: 800;
    border: 1px solid #d5efe2;
    border-radius: 100px;
    background: #eaf9f1;
}

.review-verified i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #35c98b;
    box-shadow: 0 0 0 4px rgba(53, 201, 139, 0.1);
    animation: reviewVerifiedPulse 2s ease-in-out infinite;
}

.review-card-shine {
    position: absolute;
    right: -125px;
    bottom: -125px;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: rgba(104, 76, 232, 0.075);
    filter: blur(10px);
    transition: transform 0.65s ease;
}

.review-card:hover .review-card-shine {
    transform: translate(-35px, -35px) scale(1.35);
}

/* Controls */

.review-slider-controls {
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.review-slider-status {
    display: flex;
    align-items: center;
    gap: 13px;
}

.review-slider-status > span {
    min-width: 22px;
    color: #65738a;
    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 800;
}

.review-status-line {
    position: relative;
    width: 170px;
    height: 3px;
    overflow: hidden;
    border-radius: 20px;
    background: #dfe5ef;
}

.review-status-progress {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #3d77f7, #8740ec);
}

.review-status-progress.is-running {
    animation: reviewAutoplayProgress 4.5s linear forwards;
}

.review-next-button {
    min-height: 49px;
    padding: 0 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    color: #ffffff;
    border: 0;
    border-radius: 11px;
    background:
        linear-gradient(
            100deg,
            #3a73f6,
            #694bed,
            #883aea
        );
    background-size: 190% 100%;
    box-shadow: 0 14px 30px rgba(62, 70, 210, 0.25);
    font-size: 10px;
    font-weight: 800;
    animation: reviewButtonGradient 5s ease-in-out infinite;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.review-next-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(62, 70, 210, 0.35);
}

.review-next-button span {
    font-size: 17px;
    transition: transform 0.3s ease;
}

.review-next-button:hover span {
    transform: translateX(5px);
}

/* Trust Summary */

.review-trust-summary {
    margin-top: 58px;
    padding: 24px 27px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border: 1px solid rgba(210, 219, 238, 0.92);
    border-radius: 21px;
    background:
        linear-gradient(
            100deg,
            rgba(255, 255, 255, 0.95),
            rgba(247, 246, 255, 0.93)
        );
    box-shadow:
        0 19px 48px rgba(34, 53, 111, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.review-trust-summary > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.review-trust-summary strong {
    color: #182c54;
    font-family: "Manrope", sans-serif;
    font-size: 23px;
    font-weight: 800;
}

.review-trust-summary span {
    color: #8792a6;
    font-size: 9px;
    font-weight: 600;
}

.review-trust-summary > i {
    width: 1px;
    height: 40px;
    background: #e1e7f0;
}

/* Animations */

@keyframes reviewGridMove {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 136px 68px;
    }
}

@keyframes reviewGlowOne {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(130px, 90px) scale(1.2);
    }
}

@keyframes reviewGlowTwo {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(-120px, -85px) scale(1.2);
    }
}

@keyframes reviewTagPulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 5px rgba(68, 101, 239, 0.1);
    }

    50% {
        transform: scale(1.16);
        box-shadow: 0 0 0 10px rgba(68, 101, 239, 0.02);
    }
}

@keyframes reviewHeadingGradient {
    0%,
    100% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }
}

@keyframes reviewVerifiedPulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 4px rgba(53, 201, 139, 0.1);
    }

    50% {
        transform: scale(1.15);
        box-shadow: 0 0 0 8px rgba(53, 201, 139, 0.02);
    }
}

@keyframes reviewAutoplayProgress {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes reviewButtonGradient {
    0%,
    100% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }
}

/* Tablet */

@media (max-width: 1000px) {
    .review-slide {
        flex-basis: calc(50% - 14px);
        margin-right: 28px;
    }
}

/* Mobile */

@media (max-width: 700px) {
    .review-slider-section {
        padding: 80px 16px 75px;
    }

    .review-slider-heading {
        margin-bottom: 45px;
    }

    .review-slider-heading h2 {
        font-size: 39px;
        letter-spacing: -1.8px;
    }

    .review-slider-heading p {
        font-size: 14px;
    }

    .review-slider-viewport {
        overflow: visible;
    }

    .review-slider-shell {
        overflow: hidden;
    }

    .review-slide {
        flex-basis: 100%;
        margin-right: 16px;
    }

    .review-card {
        min-height: 350px;
        padding: 25px 22px 22px;
    }

    .review-slider-controls {
        align-items: flex-end;
    }

    .review-status-line {
        width: 115px;
    }

    .review-next-button {
        padding: 0 15px;
    }

    .review-trust-summary {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 22px;
    }

    .review-trust-summary > i {
        display: none;
    }
}

@media (max-width: 480px) {
    .review-slider-section {
        padding: 70px 14px 65px;
    }

    .review-slider-heading h2 {
        font-size: 34px;
        letter-spacing: -1.5px;
    }

    .review-slider-heading p {
        font-size: 13px;
    }

    .review-card {
        min-height: 365px;
        padding: 23px 19px 21px;
        border-radius: 20px;
    }

    .review-card-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .review-slider-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .review-slider-status {
        justify-content: center;
    }

    .review-status-line {
        flex: 1;
        max-width: 210px;
    }

    .review-next-button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .review-slider-bg,
    .review-slider-glow,
    .review-slider-tag span,
    .review-slider-heading h2 span,
    .review-verified i,
    .review-next-button {
        animation: none !important;
    }
}

/*--------------------------------------------------------------------------------*/
/* =========================================================
   PREMIUM FAQ SECTION
========================================================= */

.faq-premium-section,
.faq-premium-section * {
    box-sizing: border-box;
}

.faq-premium-section {
    position: relative;
    width: 100%;
    padding: 115px 24px 105px;
    overflow: hidden;
    isolation: isolate;
    font-family: "Inter", Arial, sans-serif;
    background:
        radial-gradient(
            circle at 8% 18%,
            rgba(57, 108, 246, 0.11),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 78%,
            rgba(134, 59, 241, 0.1),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #f8faff 0%,
            #ffffff 50%,
            #f8f6ff 100%
        );
}

/* Background */

.faq-premium-bg {
    position: absolute;
    z-index: -8;
    inset: 0;
    opacity: 0.33;
    pointer-events: none;
    background-image:
        linear-gradient(
            rgba(45, 82, 173, 0.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(45, 82, 173, 0.045) 1px,
            transparent 1px
        );
    background-size: 70px 70px;
    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 13%,
            #000 87%,
            transparent
        );
    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 13%,
            #000 87%,
            transparent
        );
    animation: faqGridMove 30s linear infinite;
}

.faq-premium-orb {
    position: absolute;
    z-index: -7;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}

.faq-premium-orb-one {
    width: 430px;
    height: 430px;
    top: -240px;
    left: -210px;
    background: rgba(55, 108, 247, 0.14);
    animation: faqOrbOne 15s ease-in-out infinite alternate;
}

.faq-premium-orb-two {
    width: 470px;
    height: 470px;
    right: -240px;
    bottom: -250px;
    background: rgba(134, 58, 241, 0.13);
    animation: faqOrbTwo 18s ease-in-out infinite alternate;
}

/* Layout */

.faq-premium-container {
    position: relative;
    z-index: 2;
    width: min(1200px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.72fr 1.28fr;
    align-items: start;
    gap: 90px;
}

/* =========================================================
   LEFT CONTENT
========================================================= */

.faq-premium-intro {
    position: relative;
}

.faq-premium-sticky {
    position: sticky;
    top: 110px;
    max-width: 465px;
}

.faq-premium-tag {
    width: fit-content;
    margin-bottom: 18px;
    padding: 9px 15px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #315bd9;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid #dce5fa;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 30px rgba(37, 68, 145, 0.07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.faq-premium-tag span {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #3772f6, #8a3fed);
    box-shadow: 0 0 0 5px rgba(68, 101, 239, 0.1);
    animation: faqTagPulse 2s ease-in-out infinite;
}

.faq-premium-sticky h2 {
    margin: 0;
    color: #0c1e48;
    font-family: "Manrope", sans-serif;
    font-size: clamp(40px, 4.2vw, 40px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -2.8px;
}

.faq-premium-sticky h2 span {
    display: block;
    color: transparent;
    background:
        linear-gradient(
            90deg,
            #376df3,
            #704bed,
            #9137e9,
            #36aadd
        );
    background-size: 260% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: faqHeadingGradient 6s ease-in-out infinite;
}

.faq-premium-sticky > p {
    margin: 21px 0 29px;
    color: #707c93;
    font-size: 15px;
    line-height: 1.75;
}

/* Support Box */

.faq-support-box {
    margin-bottom: 21px;
    padding: 16px 17px;
    display: flex;
    align-items: center;
    gap: 13px;
    border: 1px solid #dfe6f2;
    border-radius: 17px;
    background:
        linear-gradient(
            100deg,
            rgba(255, 255, 255, 0.95),
            rgba(247, 246, 255, 0.93)
        );
    box-shadow:
        0 15px 40px rgba(33, 52, 109, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.faq-support-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: #ffffff;
    border-radius: 14px;
    background:
        linear-gradient(
            135deg,
            #3d78f8,
            #6d50ed,
            #8e3fea
        );
    box-shadow: 0 12px 25px rgba(61, 74, 210, 0.23);
    animation: faqSupportFloat 4s ease-in-out infinite;
}

.faq-support-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.faq-support-box > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.faq-support-box span {
    color: #8792a6;
    font-size: 9px;
    font-weight: 600;
}

.faq-support-box strong {
    color: #172b50;
    font-size: 12px;
    line-height: 1.4;
}

/* Contact Button */

.faq-contact-button {
    min-height: 52px;
    padding: 0 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #ffffff;
    text-decoration: none;
    font-size: 11px;
    font-weight: 800;
    border-radius: 12px;
    background:
        linear-gradient(
            100deg,
            #3a73f6,
            #694bed,
            #883aea
        );
    background-size: 190% 100%;
    box-shadow: 0 14px 30px rgba(62, 70, 210, 0.25);
    animation: faqButtonGradient 5s ease-in-out infinite;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.faq-contact-button:hover {
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(62, 70, 210, 0.35);
}

.faq-contact-button span {
    font-size: 17px;
    transition: transform 0.3s ease;
}

.faq-contact-button:hover span {
    transform: translate(3px, -3px);
}

/* =========================================================
   FAQ LIST
========================================================= */

.faq-premium-list {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.faq-premium-item {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(213, 222, 240, 0.95);
    border-radius: 19px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.97),
            rgba(248, 248, 255, 0.92)
        );
    box-shadow:
        0 15px 38px rgba(35, 53, 110, 0.065),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    transition:
        border-color 0.4s ease,
        box-shadow 0.4s ease,
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-premium-item::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    opacity: 0;
    background:
        linear-gradient(
            110deg,
            rgba(238, 244, 255, 0.95),
            rgba(249, 243, 255, 0.94)
        );
    transition: opacity 0.4s ease;
}

.faq-premium-item::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 3px;
    border-radius: 0 0 12px 12px;
    background: linear-gradient(90deg, #3d78f7, #8940ec);
    transform: translateX(-50%);
    transition: width 0.45s ease;
}

.faq-premium-item:hover,
.faq-premium-item.is-open {
    border-color: rgba(82, 99, 225, 0.24);
    box-shadow:
        0 25px 58px rgba(34, 52, 109, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    transform: translateY(-3px);
}

.faq-premium-item.is-open::before {
    opacity: 1;
}

.faq-premium-item.is-open::after {
    width: 28%;
}

/* Question */

.faq-premium-question {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 92px;
    padding: 20px 22px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 45px;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    border: 0;
    background: transparent;
    text-align: left;
}

.faq-question-number {
    color: rgba(41, 66, 126, 0.2);
    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 800;
    transition:
        color 0.35s ease,
        transform 0.35s ease;
}

.faq-premium-item.is-open .faq-question-number {
    color: #416fe2;
    transform: translateX(3px);
}

.faq-question-text {
    color: #14284f;
    font-family: "Manrope", sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    transition: color 0.35s ease;
}

.faq-premium-item.is-open .faq-question-text {
    color: #315fd7;
}

/* Plus Icon */

.faq-question-icon {
    position: relative;
    width: 43px;
    height: 43px;
    display: block;
    border: 1px solid #dce4f0;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 9px 21px rgba(39, 59, 122, 0.09);
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;
}

.faq-question-icon i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 2px;
    border-radius: 10px;
    background: #53637e;
    transform: translate(-50%, -50%);
    transition:
        transform 0.4s ease,
        background 0.35s ease;
}

.faq-question-icon i:last-child {
    transform: translate(-50%, -50%) rotate(90deg);
}

.faq-premium-item.is-open .faq-question-icon {
    border-color: transparent;
    background: linear-gradient(135deg, #3e77f8, #8141ec);
    box-shadow: 0 13px 27px rgba(60, 73, 210, 0.24);
    transform: rotate(180deg);
}

.faq-premium-item.is-open .faq-question-icon i {
    background: #ffffff;
}

.faq-premium-item.is-open .faq-question-icon i:last-child {
    transform: translate(-50%, -50%) rotate(0);
}

/* Answer */

.faq-premium-answer {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition:
        grid-template-rows 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.4s ease;
}

.faq-premium-item.is-open .faq-premium-answer {
    grid-template-rows: 1fr;
    opacity: 1;
}

.faq-premium-answer-inner {
    min-height: 0;
    overflow: hidden;
}

.faq-premium-answer-inner p {
    margin: 0;
    padding: 0 83px 25px 78px;
    color: #727e94;
    font-size: 12px;
    line-height: 1.75;
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes faqGridMove {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 140px 70px;
    }
}

@keyframes faqOrbOne {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(130px, 90px) scale(1.2);
    }
}

@keyframes faqOrbTwo {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(-120px, -90px) scale(1.2);
    }
}

@keyframes faqTagPulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 5px rgba(68, 101, 239, 0.1);
    }

    50% {
        transform: scale(1.16);
        box-shadow: 0 0 0 10px rgba(68, 101, 239, 0.02);
    }
}

@keyframes faqHeadingGradient {
    0%,
    100% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }
}

@keyframes faqSupportFloat {
    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-4px) rotate(-3deg);
    }
}

@keyframes faqButtonGradient {
    0%,
    100% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }
}

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

@media (max-width: 1050px) {
    .faq-premium-container {
        grid-template-columns: 1fr;
        max-width: 790px;
        gap: 58px;
    }

    .faq-premium-sticky {
        position: relative;
        top: auto;
        max-width: 720px;
        margin: 0 auto;
        text-align: center;
    }

    .faq-premium-tag {
        margin-right: auto;
        margin-left: auto;
    }

    .faq-support-box {
        max-width: 440px;
        margin-right: auto;
        margin-left: auto;
        text-align: left;
    }
}

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

@media (max-width: 700px) {
    .faq-premium-section {
        padding: 80px 16px 75px;
    }

    .faq-premium-container {
        gap: 45px;
    }

    .faq-premium-sticky h2 {
        font-size: 39px;
        letter-spacing: -1.8px;
    }

    .faq-premium-sticky > p {
        font-size: 14px;
    }

    .faq-premium-question {
        min-height: 82px;
        padding: 17px;
        grid-template-columns: 30px minmax(0, 1fr) 40px;
        gap: 12px;
    }

    .faq-question-text {
        font-size: 15px;
    }

    .faq-question-icon {
        width: 39px;
        height: 39px;
    }

    .faq-premium-answer-inner p {
        padding: 0 57px 22px 59px;
        font-size: 11px;
    }
}

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

@media (max-width: 480px) {
    .faq-premium-section {
        padding: 70px 14px 65px;
    }

    .faq-premium-sticky h2 {
        font-size: 34px;
        letter-spacing: -1.5px;
    }

    .faq-premium-sticky > p {
        font-size: 13px;
    }

    .faq-premium-item {
        border-radius: 17px;
    }

    .faq-premium-question {
        grid-template-columns: minmax(0, 1fr) 38px;
        padding: 17px 15px;
    }

    .faq-question-number {
        display: none;
    }

    .faq-question-text {
        font-size: 14px;
    }

    .faq-question-icon {
        width: 37px;
        height: 37px;
    }

    .faq-premium-answer-inner p {
        padding: 0 54px 20px 15px;
        font-size: 10px;
    }

    .faq-support-box {
        padding: 14px;
    }

    .faq-contact-button {
        width: 100%;
    }
}

/* Reduced Motion */

@media (prefers-reduced-motion: reduce) {
    .faq-premium-bg,
    .faq-premium-orb,
    .faq-premium-tag span,
    .faq-premium-sticky h2 span,
    .faq-support-icon,
    .faq-contact-button {
        animation: none !important;
    }
}

/*------------------------------------------------------------------------*/
/* =========================================================
   PREMIUM ATTRACTIVE DARK FOOTER
========================================================= */

.site-premium-footer,
.site-premium-footer * {
    box-sizing: border-box;
}

.site-premium-footer {
    position: relative;
    width: 100%;
    padding: 100px 24px 0;
    overflow: hidden;
    isolation: isolate;
    color: #ffffff;
    font-family: "Inter", Arial, sans-serif;
    background:
        radial-gradient(
            circle at 8% 8%,
            rgba(65, 122, 255, 0.22),
            transparent 27%
        ),
        radial-gradient(
            circle at 92% 68%,
            rgba(155, 69, 255, 0.2),
            transparent 29%
        ),
        radial-gradient(
            circle at 50% 105%,
            rgba(59, 195, 255, 0.08),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #040713 0%,
            #081126 45%,
            #0d0d20 100%
        );
}

/* =========================================================
   BACKGROUND GRID
========================================================= */

.site-footer-grid {
    position: absolute;
    z-index: -8;
    inset: 0;
    opacity: 0.22;
    pointer-events: none;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px
        );
    background-size: 68px 68px;
    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 12%,
            #000 88%,
            transparent
        );
    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 12%,
            #000 88%,
            transparent
        );
    animation: footerGridMove 28s linear infinite;
}

/* =========================================================
   BACKGROUND GLOWS
========================================================= */

.site-footer-glow {
    position: absolute;
    z-index: -7;
    border-radius: 50%;
    filter: blur(95px);
    pointer-events: none;
}

.site-footer-glow-one {
    width: 430px;
    height: 430px;
    top: -240px;
    left: -220px;
    background: rgba(55, 108, 247, 0.18);
    animation: footerGlowOne 15s ease-in-out infinite alternate;
}

.site-footer-glow-two {
    width: 470px;
    height: 470px;
    right: -240px;
    bottom: -230px;
    background: rgba(134, 58, 241, 0.17);
    animation: footerGlowTwo 18s ease-in-out infinite alternate;
}

.site-footer-container {
    position: relative;
    z-index: 2;
    width: min(1200px, 100%);
    margin: 0 auto;
}

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

.site-footer-cta {
    position: relative;
    margin-bottom: 90px;
    padding: 52px 50px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 45px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 32px;
    background:
        linear-gradient(
            120deg,
            rgba(255, 255, 255, 0.1),
            rgba(102, 75, 238, 0.1)
        );
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.11),
        0 0 0 1px rgba(100, 112, 255, 0.03);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.site-footer-cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 240px;
    height: 4px;
    border-radius: 0 0 20px 20px;
    background:
        linear-gradient(
            90deg,
            #4e92ff,
            #9c5cff,
            #54ddff
        );
    box-shadow: 0 0 22px rgba(111, 104, 255, 0.65);
    transform: translateX(-50%);
}

.site-footer-cta::after {
    content: "";
    position: absolute;
    width: 330px;
    height: 330px;
    top: -220px;
    right: -100px;
    border-radius: 50%;
    background: rgba(123, 78, 237, 0.16);
    filter: blur(20px);
    animation: footerCtaGlow 8s ease-in-out infinite alternate;
}

.site-footer-cta-content,
.site-footer-cta-action {
    position: relative;
    z-index: 2;
}

.site-footer-label {
    width: fit-content;
    margin-bottom: 18px;
    padding: 10px 16px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #b0c3ff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.055);
}

.site-footer-label span {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #53d99f;
    box-shadow: 0 0 0 5px rgba(83, 217, 159, 0.1);
    animation: footerStatusPulse 2s ease-in-out infinite;
}

.site-footer-cta h2 {
    margin: 0;
    color: #ffffff;
    font-family: "Manrope", sans-serif;
    font-size: clamp(38px, 4.1vw, 58px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -2.4px;
}

.site-footer-cta h2 span {
    display: block;
    color: transparent;
    background:
        linear-gradient(
            90deg,
            #6ba7ff,
            #9880ff,
            #d476ff
        );
    background-size: 220% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: footerTitleGradient 6s ease-in-out infinite;
}

.site-footer-cta-content > p {
    max-width: 680px;
    margin: 19px 0 0;
    color: rgba(230, 236, 255, 0.72);
    font-size: 16px;
    line-height: 1.75;
}

/* CTA Button */

.site-footer-cta-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.site-footer-main-button {
    min-height: 62px;
    padding: 0 29px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.1px;
    white-space: nowrap;
    border-radius: 15px;
    background:
        linear-gradient(
            100deg,
            #3b77f7,
            #704bee,
            #9140ec
        );
    background-size: 190% 100%;
    box-shadow:
        0 18px 38px rgba(65, 73, 213, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    animation: footerButtonGradient 5s ease-in-out infinite;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.site-footer-main-button:hover {
    color: #ffffff;
    transform: translateY(-5px) scale(1.02);
    box-shadow:
        0 25px 48px rgba(65, 73, 213, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.site-footer-main-button span {
    font-size: 20px;
    transition: transform 0.3s ease;
}

.site-footer-main-button:hover span {
    transform: translate(4px, -4px);
}

.site-footer-cta-action small {
    color: rgba(230, 236, 255, 0.55);
    font-size: 11px;
}

/* =========================================================
   MAIN FOOTER LAYOUT
========================================================= */

.site-footer-main {
    display: grid;
    grid-template-columns:
        1.35fr
        0.75fr
        1fr
        1.3fr;
    gap: 65px;
    padding-bottom: 72px;
}

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

.site-footer-brand {
    max-width: 380px;
}

.site-footer-logo {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: #ffffff;
    text-decoration: none;
}

.site-footer-logo-symbol {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    color: #ffffff;
    border-radius: 18px;
    background:
        linear-gradient(
            135deg,
            #3e79f8,
            #714eed,
            #9141ec
        );
    box-shadow:
        0 17px 35px rgba(62, 74, 210, 0.36),
        0 0 0 8px rgba(91, 94, 229, 0.06);
    font-family: "Manrope", sans-serif;
    font-size: 25px;
    font-weight: 800;
    animation: footerLogoFloat 4s ease-in-out infinite;
}

.site-footer-logo-text {
    color: #ffffff;
    font-family: "Manrope", sans-serif;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -1px;
}

.site-footer-logo-text span {
    color: #9389ff;
}

.site-footer-brand > p {
    margin: 25px 0 29px;
    color: rgba(230, 236, 255, 0.67);
    font-size: 14px;
    line-height: 1.85;
}

/* =========================================================
   SOCIAL ICONS
========================================================= */

.site-footer-socials {
    display: flex;
    align-items: center;
    gap: 11px;
}

.site-footer-socials a {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.07),
            rgba(255, 255, 255, 0.035)
        );
    box-shadow:
        0 12px 25px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition:
        color 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.site-footer-socials a:hover {
    color: #ffffff;
    border-color: rgba(130, 122, 255, 0.32);
    background:
        linear-gradient(
            135deg,
            #3e77f8,
            #8141ec
        );
    transform: translateY(-6px) rotate(-4deg) scale(1.06);
    box-shadow:
        0 17px 35px rgba(67, 70, 210, 0.3);
}

.site-footer-socials svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

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

.site-footer-column h3,
.site-footer-contact h3 {
    position: relative;
    margin: 4px 0 29px;
    padding-bottom: 15px;
    color: #ffffff;
    font-family: "Manrope", sans-serif;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.2px;
}

.site-footer-column h3::after,
.site-footer-contact h3::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 46px;
    height: 3px;
    border-radius: 10px;
    background:
        linear-gradient(
            90deg,
            #4b87ff,
            #994cee
        );
    box-shadow: 0 0 15px rgba(111, 99, 240, 0.55);
}

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

.site-footer-column ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 17px;
    list-style: none;
}

.site-footer-column a {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: rgba(230, 236, 255, 0.66);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.site-footer-column a i {
    opacity: 0;
    color: #a98aff;
    font-size: 15px;
    font-style: normal;
    transform: translate(-5px, 4px);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.site-footer-column a:hover {
    color: #ffffff;
    transform: translateX(7px);
}

.site-footer-column a:hover i {
    opacity: 1;
    transform: translate(0, 0);
}

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

.site-footer-contact {
    display: flex;
    flex-direction: column;
}

.site-footer-contact-item {
    margin-bottom: 12px;
    padding: 15px 14px;
    display: flex;
    align-items: center;
    gap: 13px;
    color: inherit;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.018);
    transition:
        border-color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

a.site-footer-contact-item:hover {
    border-color: rgba(132, 117, 255, 0.22);
    background:
        linear-gradient(
            100deg,
            rgba(255, 255, 255, 0.07),
            rgba(126, 76, 238, 0.07)
        );
    transform: translateX(7px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
}

.site-footer-contact-icon {
    width: 47px;
    height: 47px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: #b3c2ff;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.08),
            rgba(113, 79, 236, 0.08)
        );
}

.site-footer-contact-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.site-footer-contact-item > span:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.site-footer-contact-item small {
    color: rgba(230, 236, 255, 0.48);
    font-size: 10px;
    font-weight: 600;
}

.site-footer-contact-item strong {
    overflow-wrap: anywhere;
    color: rgba(255, 255, 255, 0.92);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}

/* =========================================================
   AVAILABILITY BAR
========================================================= */

.site-footer-availability {
    margin-bottom: 35px;
    padding: 22px 25px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 25px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 20px;
    background:
        linear-gradient(
            100deg,
            rgba(255, 255, 255, 0.075),
            rgba(106, 73, 236, 0.055)
        );
    box-shadow:
        0 20px 48px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.site-footer-availability-status {
    display: flex;
    align-items: center;
    gap: 13px;
}

.site-footer-availability-status > span {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #49d59a;
    box-shadow:
        0 0 0 7px rgba(73, 213, 154, 0.08),
        0 0 18px rgba(73, 213, 154, 0.45);
    animation: footerAvailabilityPulse 2s ease-in-out infinite;
}

.site-footer-availability-status div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.site-footer-availability-status small {
    color: rgba(230, 236, 255, 0.46);
    font-size: 10px;
}

.site-footer-availability-status strong {
    color: #ffffff;
    font-size: 14px;
}

.site-footer-availability > p {
    margin: 0;
    color: rgba(230, 236, 255, 0.63);
    font-size: 13px;
    text-align: center;
}

.site-footer-availability > a {
    padding: 10px 15px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #b5c5ff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    transition:
        color 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease;
}

.site-footer-availability > a:hover {
    color: #ffffff;
    border-color: rgba(125, 111, 255, 0.28);
    background: rgba(122, 87, 238, 0.12);
    transform: translateX(4px);
}

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

.site-footer-bottom {
    padding: 30px 0 34px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.site-footer-bottom > p {
    margin: 0;
    color: rgba(230, 236, 255, 0.5);
    font-size: 11px;
}

.site-footer-legal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
}

.site-footer-legal a,
.site-footer-back-top {
    color: rgba(230, 236, 255, 0.54);
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    transition: color 0.3s ease;
}

.site-footer-legal a:hover,
.site-footer-back-top:hover {
    color: #ffffff;
}

.site-footer-back-top {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.site-footer-back-top span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: #ffffff;
    font-size: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.site-footer-back-top:hover span {
    background:
        linear-gradient(
            135deg,
            #3e77f8,
            #8141ec
        );
    transform: translateY(-5px);
    box-shadow:
        0 12px 25px rgba(65, 73, 213, 0.3);
}

/* =========================================================
   MARQUEE REMOVED
========================================================= */

.site-footer-marquee {
    display: none !important;
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes footerGridMove {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 136px 68px;
    }
}

@keyframes footerGlowOne {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(130px, 90px) scale(1.2);
    }
}

@keyframes footerGlowTwo {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(-120px, -90px) scale(1.2);
    }
}

@keyframes footerCtaGlow {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(-65px, 70px) scale(1.2);
    }
}

@keyframes footerStatusPulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow:
            0 0 0 5px rgba(83, 217, 159, 0.1);
    }

    50% {
        transform: scale(1.15);
        box-shadow:
            0 0 0 10px rgba(83, 217, 159, 0.02);
    }
}

@keyframes footerTitleGradient {
    0%,
    100% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }
}

@keyframes footerButtonGradient {
    0%,
    100% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }
}

@keyframes footerLogoFloat {
    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-5px) rotate(-3deg);
    }
}

@keyframes footerAvailabilityPulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow:
            0 0 0 7px rgba(73, 213, 154, 0.08),
            0 0 18px rgba(73, 213, 154, 0.45);
    }

    50% {
        transform: scale(1.14);
        box-shadow:
            0 0 0 12px rgba(73, 213, 154, 0.02),
            0 0 25px rgba(73, 213, 154, 0.6);
    }
}

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

@media (max-width: 1050px) {
    .site-premium-footer {
        padding-top: 90px;
    }

    .site-footer-cta {
        padding: 44px 40px;
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .site-footer-cta-action {
        align-items: flex-start;
    }

    .site-footer-main {
        grid-template-columns:
            1.2fr
            0.8fr
            1fr;
        gap: 55px 40px;
    }

    .site-footer-contact {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .site-footer-contact h3 {
        grid-column: 1 / -1;
    }
}

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

@media (max-width: 760px) {
    .site-premium-footer {
        padding: 75px 16px 0;
    }

    .site-footer-cta {
        margin-bottom: 65px;
        padding: 36px 28px;
        border-radius: 25px;
    }

    .site-footer-cta h2 {
        font-size: 40px;
        letter-spacing: -1.7px;
    }

    .site-footer-cta-content > p {
        font-size: 14px;
    }

    .site-footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 50px 30px;
    }

    .site-footer-brand {
        grid-column: 1 / -1;
        max-width: 520px;
    }

    .site-footer-brand > p {
        font-size: 13px;
    }

    .site-footer-column h3,
    .site-footer-contact h3 {
        font-size: 16px;
    }

    .site-footer-column a {
        font-size: 13px;
    }

    .site-footer-contact {
        grid-column: 1 / -1;
        grid-template-columns: 1fr;
    }

    .site-footer-contact-item strong {
        font-size: 13px;
    }

    .site-footer-availability {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .site-footer-availability > p {
        text-align: left;
    }

    .site-footer-bottom {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .site-footer-legal {
        flex-wrap: wrap;
    }

    .site-footer-back-top {
        justify-self: center;
    }
}

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

@media (max-width: 480px) {
    .site-premium-footer {
        padding: 65px 14px 0;
    }

    .site-footer-cta {
        margin-bottom: 60px;
        padding: 30px 21px;
        border-radius: 22px;
    }

    .site-footer-label {
        font-size: 11px;
    }

    .site-footer-cta h2 {
        font-size: 33px;
        letter-spacing: -1.3px;
    }

    .site-footer-cta-content > p {
        font-size: 13px;
    }

    .site-footer-cta-action {
        width: 100%;
    }

    .site-footer-main-button {
        width: 100%;
        min-height: 57px;
        font-size: 13px;
    }

    .site-footer-main {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .site-footer-brand,
    .site-footer-contact {
        grid-column: 1;
    }

    .site-footer-logo-symbol {
        width: 53px;
        height: 53px;
    }

    .site-footer-logo-text {
        font-size: 25px;
    }

    .site-footer-brand > p {
        font-size: 13px;
    }

    .site-footer-column h3,
    .site-footer-contact h3 {
        font-size: 17px;
    }

    .site-footer-column a {
        font-size: 14px;
    }

    .site-footer-contact-item small {
        font-size: 10px;
    }

    .site-footer-contact-item strong {
        font-size: 13px;
    }

    .site-footer-availability {
        padding: 20px;
    }

    .site-footer-availability > p {
        font-size: 12px;
    }

    .site-footer-availability > a {
        width: fit-content;
        font-size: 12px;
    }

    .site-footer-bottom {
        gap: 20px;
        padding-bottom: 25px;
    }

    .site-footer-bottom > p,
    .site-footer-legal a,
    .site-footer-back-top {
        font-size: 10px;
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .site-footer-grid,
    .site-footer-glow,
    .site-footer-cta::after,
    .site-footer-label span,
    .site-footer-cta h2 span,
    .site-footer-main-button,
    .site-footer-logo-symbol,
    .site-footer-availability-status > span {
        animation: none !important;
    }
}

/*-------------------about us page -----------------------------------------------*/
/* =========================================================
   DARK PREMIUM ABOUT PAGE HERO
========================================================= */

.about-hero-section,
.about-hero-section * {
    box-sizing: border-box;
}

.about-hero-section {
    position: relative;
    width: 100%;
    min-height: 760px;
    padding: 90px 24px 105px;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    color: #ffffff;
    font-family: "Inter", Arial, sans-serif;
    background:
        radial-gradient(
            circle at 7% 18%,
            rgba(45, 111, 255, 0.23),
            transparent 29%
        ),
        radial-gradient(
            circle at 92% 72%,
            rgba(142, 64, 244, 0.22),
            transparent 30%
        ),
        radial-gradient(
            circle at 48% 110%,
            rgba(42, 192, 255, 0.08),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #030611 0%,
            #071025 45%,
            #0b0b1c 100%
        );
}

/* =========================================================
   BACKGROUND GRID
========================================================= */

.about-hero-grid {
    position: absolute;
    z-index: -8;
    inset: 0;
    opacity: 0.25;
    pointer-events: none;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.055) 1px,
            transparent 1px
        );
    background-size: 68px 68px;
    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 8%,
            #000 92%,
            transparent
        );
    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 8%,
            #000 92%,
            transparent
        );
    animation: aboutHeroGridMove 28s linear infinite;
}

/* =========================================================
   BACKGROUND GLOWS
========================================================= */

.about-hero-glow {
    position: absolute;
    z-index: -7;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
}

.about-hero-glow-one {
    width: 470px;
    height: 470px;
    top: -260px;
    left: -230px;
    background: rgba(55, 111, 255, 0.23);
    animation: aboutHeroGlowOne 15s ease-in-out infinite alternate;
}

.about-hero-glow-two {
    width: 520px;
    height: 520px;
    right: -260px;
    bottom: -280px;
    background: rgba(144, 62, 241, 0.2);
    animation: aboutHeroGlowTwo 18s ease-in-out infinite alternate;
}

/* =========================================================
   MAIN LAYOUT
========================================================= */

.about-hero-container {
    position: relative;
    z-index: 2;
    width: min(1220px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    align-items: center;
    gap: 75px;
}

/* =========================================================
   LEFT CONTENT
========================================================= */

.about-hero-content {
    max-width: 610px;
}

.about-hero-label {
    width: fit-content;
    margin-bottom: 21px;
    padding: 10px 16px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #bacbff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.06);
    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.19),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.about-hero-label span {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        #4a8cff,
        #a056f2
    );
    box-shadow:
        0 0 0 5px rgba(91, 104, 239, 0.11),
        0 0 17px rgba(80, 126, 255, 0.7);
    animation: aboutHeroLabelPulse 2s ease-in-out infinite;
}

.about-hero-content h1 {
    margin: 0;
    color: #ffffff;
    font-family: "Manrope", sans-serif;
    font-size: clamp(46px, 5vw, 42px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -3.4px;
    text-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
}

.about-hero-content h1 span {
    display: block;
    margin-top: 5px;
    color: transparent;
    background:
        linear-gradient(
            90deg,
            #65a3ff,
            #9880ff,
            #d26cff,
            #58d9ff
        );
    background-size: 260% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: aboutHeroTitleGradient 6s ease-in-out infinite;
}

.about-hero-description {
    max-width: 575px;
    margin: 25px 0 32px;
    color: rgba(226, 233, 255, 0.68);
    font-size: 16px;
    line-height: 1.8;
}

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

.about-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.about-hero-primary-btn {
    position: relative;
    min-height: 58px;
    padding: 0 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    overflow: hidden;
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 14px;
    background:
        linear-gradient(
            100deg,
            #3976f7,
            #6e4cee,
            #9140ec
        );
    background-size: 190% 100%;
    box-shadow:
        0 18px 38px rgba(62, 70, 210, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    animation: aboutHeroButtonGradient 5s ease-in-out infinite;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.about-hero-primary-btn::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -80%;
    width: 55%;
    height: 200%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.25),
        transparent
    );
    transform: rotate(18deg);
    transition: left 0.65s ease;
}

.about-hero-primary-btn:hover::before {
    left: 135%;
}

.about-hero-primary-btn:hover {
    color: #ffffff;
    transform: translateY(-4px);
    box-shadow:
        0 25px 48px rgba(62, 70, 210, 0.47),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.about-hero-primary-btn span {
    position: relative;
    z-index: 2;
    font-size: 19px;
    transition: transform 0.3s ease;
}

.about-hero-primary-btn:hover span {
    transform: translate(4px, -4px);
}

.about-hero-secondary-btn {
    min-height: 58px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: rgba(242, 246, 255, 0.86);
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.035)
        );
    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.19),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    transition:
        color 0.3s ease,
        transform 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.about-hero-secondary-btn:hover {
    color: #ffffff;
    border-color: rgba(126, 123, 255, 0.38);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.11),
            rgba(112, 73, 235, 0.11)
        );
    transform: translateY(-4px);
    box-shadow:
        0 20px 42px rgba(0, 0, 0, 0.25);
}

.about-hero-play {
    width: 35px;
    height: 35px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: #ffffff;
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            #4787fb,
            #8447ec
        );
    box-shadow:
        0 10px 22px rgba(62, 74, 208, 0.32),
        0 0 0 5px rgba(93, 98, 226, 0.07);
}

.about-hero-play svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
    stroke: none;
    transform: translateX(1px);
}

/* =========================================================
   HIGHLIGHTS
========================================================= */

.about-hero-highlights {
    margin-top: 42px;
    padding-top: 28px;
    display: flex;
    align-items: center;
    gap: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.11);
}

.about-hero-highlight {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.about-hero-highlight strong {
    color: #ffffff;
    font-family: "Manrope", sans-serif;
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
}

.about-hero-highlight span {
    color: rgba(224, 232, 255, 0.52);
    font-size: 10px;
    font-weight: 600;
}

.about-hero-highlights > i {
    width: 1px;
    height: 42px;
    background: rgba(255, 255, 255, 0.11);
}

/* =========================================================
   RIGHT VISUAL AREA
========================================================= */

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

/* Orbit Lines */

.about-visual-orbit {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.about-visual-orbit-one {
    width: 535px;
    height: 535px;
    border: 1px solid rgba(101, 138, 255, 0.18);
    box-shadow:
        inset 0 0 45px rgba(75, 96, 225, 0.035);
    animation: aboutVisualOrbit 28s linear infinite;
}

.about-visual-orbit-two {
    width: 425px;
    height: 425px;
    border: 1px dashed rgba(173, 103, 255, 0.22);
    animation: aboutVisualOrbitReverse 23s linear infinite;
}

.about-visual-orbit-one::before,
.about-visual-orbit-one::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            #4a8cff,
            #a34cf0
        );
    box-shadow:
        0 0 0 7px rgba(79, 97, 225, 0.08),
        0 0 25px rgba(84, 111, 255, 0.65);
}

.about-visual-orbit-one::before {
    top: 18%;
    left: 5%;
}

.about-visual-orbit-one::after {
    right: 8%;
    bottom: 13%;
}

/* =========================================================
   MAIN VISUAL CARD
========================================================= */

.about-visual-main-card {
    position: relative;
    z-index: 4;
    width: min(500px, 85%);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 29px;
    background:
        linear-gradient(
            145deg,
            rgba(18, 29, 58, 0.9),
            rgba(10, 15, 34, 0.92)
        );
    box-shadow:
        0 48px 105px rgba(0, 0, 0, 0.46),
        0 0 0 1px rgba(89, 99, 228, 0.045),
        inset 0 1px 0 rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    animation: aboutMainCardFloat 7s ease-in-out infinite;
}

.about-visual-main-card::before {
    content: "";
    position: absolute;
    z-index: 7;
    top: 0;
    left: 50%;
    width: 160px;
    height: 3px;
    border-radius: 0 0 20px 20px;
    background:
        linear-gradient(
            90deg,
            #4a8cff,
            #a056f2,
            #55d7ff
        );
    box-shadow: 0 0 18px rgba(103, 101, 242, 0.65);
    transform: translateX(-50%);
}

/* Top Bar */

.about-visual-topbar {
    min-height: 57px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.015);
}

.about-visual-dots {
    display: flex;
    gap: 7px;
}

.about-visual-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.about-visual-dots span:nth-child(1) {
    background: #ff6b70;
    box-shadow: 0 0 10px rgba(255, 107, 112, 0.45);
}

.about-visual-dots span:nth-child(2) {
    background: #ffc04e;
    box-shadow: 0 0 10px rgba(255, 192, 78, 0.42);
}

.about-visual-dots span:nth-child(3) {
    background: #45c98e;
    box-shadow: 0 0 10px rgba(69, 201, 142, 0.45);
}

.about-visual-status {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(225, 233, 255, 0.6);
    font-size: 9px;
    font-weight: 700;
}

.about-visual-status span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #43d39a;
    box-shadow:
        0 0 0 5px rgba(59, 201, 142, 0.1),
        0 0 15px rgba(59, 201, 142, 0.5);
    animation: aboutVisualStatusPulse 2s ease-in-out infinite;
}

/* =========================================================
   VISUAL SCREEN
========================================================= */

.about-visual-screen {
    position: relative;
    min-height: 390px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(
            circle at center,
            rgba(95, 89, 234, 0.18),
            transparent 52%
        ),
        linear-gradient(
            145deg,
            #0a1126,
            #0d0b20
        );
}

.about-visual-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.28;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.06) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.06) 1px,
            transparent 1px
        );
    background-size: 35px 35px;
}

.about-visual-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            transparent 65%,
            rgba(4, 7, 18, 0.38)
        );
    pointer-events: none;
}

.about-visual-screen-glow {
    position: absolute;
    width: 310px;
    height: 310px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(103, 91, 238, 0.23),
            rgba(74, 126, 255, 0.07) 45%,
            transparent 70%
        );
    filter: blur(4px);
    animation: aboutScreenGlow 6s ease-in-out infinite alternate;
}

/* =========================================================
   CENTRAL CORE
========================================================= */

.about-visual-core {
    position: relative;
    z-index: 3;
    width: 188px;
    height: 188px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 50%;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.1),
            rgba(255, 255, 255, 0.045)
        );
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.36),
        0 0 65px rgba(77, 83, 224, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.about-visual-core::before {
    content: "";
    position: absolute;
    inset: -10px;
    border: 1px dashed rgba(139, 103, 255, 0.21);
    border-radius: inherit;
    animation: aboutCoreRingRotate 18s linear infinite;
}

.about-visual-core-icon {
    position: relative;
    z-index: 2;
    width: 57px;
    height: 57px;
    margin-bottom: 12px;
    display: grid;
    place-items: center;
    color: #ffffff;
    border-radius: 17px;
    background:
        linear-gradient(
            135deg,
            #3d78f8,
            #6d50ed,
            #923fea
        );
    box-shadow:
        0 15px 32px rgba(61, 74, 210, 0.37),
        0 0 0 8px rgba(91, 94, 229, 0.07),
        0 0 27px rgba(94, 94, 231, 0.3);
    animation: aboutCoreIconFloat 4s ease-in-out infinite;
}

.about-visual-core-icon svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.about-visual-core > span {
    color: rgba(224, 232, 255, 0.52);
    font-size: 9px;
    font-weight: 600;
}

.about-visual-core > strong {
    margin-top: 6px;
    color: #ffffff;
    font-family: "Manrope", sans-serif;
    font-size: 13px;
    line-height: 1.4;
}

/* =========================================================
   CONNECTING PATHS
========================================================= */

.about-visual-path {
    position: absolute;
    z-index: 1;
    height: 1px;
    overflow: hidden;
    transform-origin: left center;
    background:
        linear-gradient(
            90deg,
            rgba(65, 123, 248, 0.04),
            rgba(139, 76, 235, 0.75),
            rgba(65, 123, 248, 0.04)
        );
    box-shadow: 0 0 12px rgba(103, 92, 237, 0.35);
}

.about-visual-path::after {
    content: "";
    position: absolute;
    top: -1px;
    left: -30%;
    width: 35%;
    height: 3px;
    background:
        linear-gradient(
            90deg,
            transparent,
            #7ca7ff,
            transparent
        );
    animation: aboutPathFlow 3s linear infinite;
}

.about-visual-path-one {
    width: 210px;
    top: 28%;
    left: 8%;
    transform: rotate(22deg);
}

.about-visual-path-two {
    width: 220px;
    top: 53%;
    right: 5%;
    transform: rotate(-17deg);
}

.about-visual-path-three {
    width: 190px;
    left: 16%;
    bottom: 19%;
    transform: rotate(-22deg);
}

/* =========================================================
   VISUAL NODES
========================================================= */

.about-visual-node {
    position: absolute;
    z-index: 4;
    min-width: 90px;
    padding: 10px 11px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(234, 239, 255, 0.76);
    font-size: 9px;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 12px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.085),
            rgba(255, 255, 255, 0.035)
        );
    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
}

.about-visual-node span {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: #ffffff;
    border-radius: 8px;
    background:
        linear-gradient(
            135deg,
            #4280fa,
            #8347ec
        );
    box-shadow: 0 8px 17px rgba(62, 74, 208, 0.28);
    font-size: 7px;
}

.about-visual-node-one {
    top: 12%;
    left: 6%;
    animation: aboutNodeOne 5.2s ease-in-out infinite;
}

.about-visual-node-two {
    top: 15%;
    right: 5%;
    animation: aboutNodeTwo 5.8s ease-in-out infinite;
}

.about-visual-node-three {
    bottom: 14%;
    left: 5%;
    animation: aboutNodeThree 6.2s ease-in-out infinite;
}

.about-visual-node-four {
    right: 6%;
    bottom: 12%;
    animation: aboutNodeFour 5.5s ease-in-out infinite;
}

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

.about-visual-footer {
    min-height: 75px;
    padding: 0 21px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.018);
}

.about-visual-footer > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.about-visual-footer span {
    color: rgba(224, 232, 255, 0.47);
    font-size: 8px;
    font-weight: 600;
}

.about-visual-footer strong {
    color: rgba(255, 255, 255, 0.9);
    font-size: 11px;
}

.about-visual-progress {
    width: 105px;
    height: 6px;
    overflow: hidden;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
}

.about-visual-progress span {
    display: block;
    width: 76%;
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            #4a88fc,
            #9145ed,
            #56d1ff
        );
    box-shadow: 0 0 12px rgba(91, 104, 239, 0.4);
    animation: aboutProgressMove 4s ease-in-out infinite;
}

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

.about-floating-card {
    position: absolute;
    z-index: 7;
    padding: 13px 15px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 15px;
    background:
        linear-gradient(
            145deg,
            rgba(19, 29, 58, 0.9),
            rgba(10, 15, 34, 0.89)
        );
    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.about-floating-card > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.about-floating-card strong {
    color: #ffffff;
    font-size: 10px;
}

.about-floating-card span {
    color: rgba(224, 232, 255, 0.49);
    font-size: 8px;
    font-weight: 600;
}

.about-floating-card-one {
    top: 12%;
    left: -1%;
    animation: aboutFloatingOne 5.5s ease-in-out infinite;
}

.about-floating-card-two {
    top: 20%;
    right: -3%;
    animation: aboutFloatingTwo 6s ease-in-out infinite;
}

.about-floating-card-three {
    right: 3%;
    bottom: 9%;
    animation: aboutFloatingThree 5.8s ease-in-out infinite;
}

.about-floating-icon {
    width: 37px;
    height: 37px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: #ffffff;
    border-radius: 11px;
    background:
        linear-gradient(
            135deg,
            #417ffa,
            #8447ec
        );
    box-shadow:
        0 10px 22px rgba(62, 74, 208, 0.31),
        0 0 0 5px rgba(96, 96, 229, 0.055);
}

.about-floating-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.about-floating-number {
    color: #88abff;
    font-family: "Manrope", sans-serif;
    font-size: 21px;
    font-weight: 800;
}

.about-floating-live {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #43d39a;
    box-shadow:
        0 0 0 7px rgba(59, 201, 142, 0.1),
        0 0 20px rgba(59, 201, 142, 0.5);
    animation: aboutFloatingLivePulse 2s ease-in-out infinite;
}

/* =========================================================
   SCROLL INDICATOR
========================================================= */

.about-hero-scroll {
    position: absolute;
    z-index: 5;
    bottom: 24px;
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: rgba(224, 232, 255, 0.5);
    text-decoration: none;
    font-size: 10px;
    font-weight: 700;
    transform: translateX(-50%);
}

.about-hero-scroll:hover {
    color: #ffffff;
}

.about-hero-scroll i {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            #407df9,
            #8347ec
        );
    box-shadow:
        0 11px 25px rgba(62, 74, 208, 0.35),
        0 0 0 6px rgba(96, 96, 229, 0.055);
    animation: aboutScrollBounce 2.3s ease-in-out infinite;
}

.about-hero-scroll svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes aboutHeroGridMove {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 136px 68px;
    }
}

@keyframes aboutHeroGlowOne {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(130px, 90px) scale(1.2);
    }
}

@keyframes aboutHeroGlowTwo {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(-120px, -85px) scale(1.2);
    }
}

@keyframes aboutHeroLabelPulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow:
            0 0 0 5px rgba(91, 104, 239, 0.11),
            0 0 17px rgba(80, 126, 255, 0.7);
    }

    50% {
        transform: scale(1.16);
        box-shadow:
            0 0 0 10px rgba(91, 104, 239, 0.02),
            0 0 25px rgba(80, 126, 255, 0.85);
    }
}

@keyframes aboutHeroTitleGradient {
    0%,
    100% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }
}

@keyframes aboutHeroButtonGradient {
    0%,
    100% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }
}

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

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

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

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

@keyframes aboutVisualStatusPulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow:
            0 0 0 5px rgba(59, 201, 142, 0.1),
            0 0 15px rgba(59, 201, 142, 0.5);
    }

    50% {
        transform: scale(1.15);
        box-shadow:
            0 0 0 9px rgba(59, 201, 142, 0.02),
            0 0 22px rgba(59, 201, 142, 0.7);
    }
}

@keyframes aboutScreenGlow {
    from {
        transform: scale(0.9);
        opacity: 0.68;
    }

    to {
        transform: scale(1.14);
        opacity: 1;
    }
}

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

@keyframes aboutCoreIconFloat {
    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-5px) rotate(-3deg);
    }
}

@keyframes aboutPathFlow {
    from {
        left: -35%;
    }

    to {
        left: 120%;
    }
}

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

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

@keyframes aboutNodeTwo {
    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(7px, -6px);
    }
}

@keyframes aboutNodeThree {
    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-6px, 8px);
    }
}

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

    50% {
        transform: translateY(9px);
    }
}

@keyframes aboutProgressMove {
    0%,
    100% {
        width: 58%;
    }

    50% {
        width: 88%;
    }
}

@keyframes aboutFloatingOne {
    0%,
    100% {
        transform: translateY(0) rotate(-2deg);
    }

    50% {
        transform: translateY(-12px) rotate(1deg);
    }
}

@keyframes aboutFloatingTwo {
    0%,
    100% {
        transform: translateY(0) rotate(2deg);
    }

    50% {
        transform: translateY(11px) rotate(-1deg);
    }
}

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

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

@keyframes aboutFloatingLivePulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow:
            0 0 0 7px rgba(59, 201, 142, 0.1),
            0 0 20px rgba(59, 201, 142, 0.5);
    }

    50% {
        transform: scale(1.15);
        box-shadow:
            0 0 0 11px rgba(59, 201, 142, 0.02),
            0 0 27px rgba(59, 201, 142, 0.7);
    }
}

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

    50% {
        transform: translateY(7px);
    }
}

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

@media (max-width: 1050px) {
    .about-hero-section {
        min-height: auto;
        padding: 115px 22px 100px;
    }

    .about-hero-container {
        grid-template-columns: 1fr;
        max-width: 820px;
        gap: 60px;
    }

    .about-hero-content {
        max-width: 750px;
        margin: 0 auto;
        text-align: center;
    }

    .about-hero-label {
        margin-right: auto;
        margin-left: auto;
    }

    .about-hero-description {
        margin-right: auto;
        margin-left: auto;
    }

    .about-hero-actions,
    .about-hero-highlights {
        justify-content: center;
    }

    .about-hero-visual {
        min-height: 590px;
    }
}

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

@media (max-width: 700px) {
    .about-hero-section {
        min-height: auto;
        padding: 105px 16px 80px;
    }

    .about-hero-container {
        gap: 43px;
    }

    .about-hero-content h1 {
        font-size: 47px;
        line-height: 1.08;
        letter-spacing: -2.2px;
    }

    .about-hero-description {
        font-size: 14px;
    }

    .about-hero-highlights {
        gap: 17px;
    }

    .about-hero-highlight strong {
        font-size: 22px;
    }

    .about-hero-highlight span {
        font-size: 9px;
    }

    .about-hero-visual {
        min-height: 510px;
        margin-bottom: -60px;
        transform: scale(0.86);
        transform-origin: top center;
    }

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

    .about-visual-orbit-two {
        width: 370px;
        height: 370px;
    }

    .about-hero-scroll {
        display: none;
    }
}

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

@media (max-width: 480px) {
    .about-hero-section {
        padding: 95px 14px 60px;
    }

    .about-hero-label {
        font-size: 11px;
    }

    .about-hero-content h1 {
        font-size: 38px;
        letter-spacing: -1.7px;
    }

    .about-hero-description {
        margin-top: 20px;
        font-size: 13px;
    }

    .about-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .about-hero-primary-btn,
    .about-hero-secondary-btn {
        width: 100%;
    }

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

    .about-hero-highlights > i {
        display: none;
    }

    .about-hero-highlight strong {
        font-size: 19px;
    }

    .about-hero-highlight span {
        font-size: 8px;
        line-height: 1.4;
    }

    .about-hero-visual {
        min-height: 430px;
        margin: -10px 0 -95px;
        transform: scale(0.67);
    }

    .about-floating-card-one {
        left: -7%;
    }

    .about-floating-card-two {
        right: -8%;
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .about-hero-grid,
    .about-hero-glow,
    .about-hero-label span,
    .about-hero-content h1 span,
    .about-hero-primary-btn,
    .about-visual-orbit,
    .about-visual-main-card,
    .about-visual-status span,
    .about-visual-screen-glow,
    .about-visual-core::before,
    .about-visual-core-icon,
    .about-visual-path::after,
    .about-visual-node,
    .about-visual-progress span,
    .about-floating-card,
    .about-floating-live,
    .about-hero-scroll i {
        animation: none !important;
    }
}

/* =========================================================
   COMPANY INTRODUCTION SECTION
========================================================= */

.company-intro-section,
.company-intro-section * {
    box-sizing: border-box;
}

.company-intro-section {
    position: relative;
    width: 100%;
    padding: 120px 24px;
    overflow: hidden;
    isolation: isolate;
    font-family: "Inter", Arial, sans-serif;
    background:
        radial-gradient(
            circle at 8% 25%,
            rgba(54, 108, 247, 0.1),
            transparent 27%
        ),
        radial-gradient(
            circle at 92% 75%,
            rgba(137, 61, 239, 0.09),
            transparent 29%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8faff 52%,
            #ffffff 100%
        );
}

/* =========================================================
   BACKGROUND
========================================================= */

.company-intro-grid {
    position: absolute;
    z-index: -8;
    inset: 0;
    opacity: 0.3;
    pointer-events: none;
    background-image:
        linear-gradient(
            rgba(45, 82, 173, 0.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(45, 82, 173, 0.04) 1px,
            transparent 1px
        );
    background-size: 70px 70px;
    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 13%,
            #000 87%,
            transparent
        );
    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 13%,
            #000 87%,
            transparent
        );
    animation: companyIntroGridMove 30s linear infinite;
}

.company-intro-glow {
    position: absolute;
    z-index: -7;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}

.company-intro-glow-one {
    width: 430px;
    height: 430px;
    top: -240px;
    left: -220px;
    background: rgba(55, 108, 247, 0.13);
    animation: companyIntroGlowOne 15s ease-in-out infinite alternate;
}

.company-intro-glow-two {
    width: 470px;
    height: 470px;
    right: -240px;
    bottom: -250px;
    background: rgba(134, 58, 241, 0.12);
    animation: companyIntroGlowTwo 18s ease-in-out infinite alternate;
}

/* =========================================================
   MAIN LAYOUT
========================================================= */

.company-intro-container {
    position: relative;
    z-index: 2;
    width: min(1200px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    align-items: center;
    gap: 95px;
}

/* =========================================================
   LEFT VISUAL
========================================================= */

.company-intro-visual {
    position: relative;
    min-height: 625px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.company-intro-image-frame {
    position: relative;
    width: min(510px, 88%);
    height: 570px;
    overflow: hidden;
    border: 10px solid rgba(255, 255, 255, 0.92);
    border-radius: 34px;
    background: #e8edf7;
    box-shadow:
        0 40px 95px rgba(31, 51, 110, 0.18),
        0 0 0 1px rgba(76, 96, 177, 0.08);
}

.company-intro-image-frame img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.company-intro-image-frame:hover img {
    transform: scale(1.07);
}

.company-intro-image-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(6, 15, 40, 0.04) 20%,
            rgba(6, 15, 40, 0.12) 56%,
            rgba(6, 15, 40, 0.78) 100%
        );
}

.company-intro-image-label {
    position: absolute;
    top: 24px;
    left: 24px;
    padding: 10px 14px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 100px;
    background: rgba(9, 18, 45, 0.36);
    box-shadow: 0 12px 27px rgba(0, 0, 0, 0.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.company-intro-image-label span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #51d69d;
    box-shadow: 0 0 0 5px rgba(81, 214, 157, 0.12);
    animation: companyIntroStatusPulse 2s ease-in-out infinite;
}

.company-intro-image-bottom {
    position: absolute;
    right: 25px;
    bottom: 25px;
    left: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.company-intro-image-bottom > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.company-intro-image-bottom strong {
    color: #ffffff;
    font-family: "Manrope", sans-serif;
    font-size: 18px;
}

.company-intro-image-bottom span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 10px;
}

.company-intro-image-arrow {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            rgba(70, 125, 249, 0.9),
            rgba(132, 66, 236, 0.92)
        );
    box-shadow: 0 13px 29px rgba(16, 24, 74, 0.32);
    font-size: 18px;
    transition: transform 0.35s ease;
}

.company-intro-image-frame:hover
.company-intro-image-arrow {
    transform: translate(4px, -4px);
}

/* =========================================================
   EXPERIENCE CARD
========================================================= */

.company-intro-experience-card {
    position: absolute;
    z-index: 5;
    left: -3%;
    bottom: 55px;
    min-width: 235px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid rgba(210, 219, 238, 0.94);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow:
        0 25px 55px rgba(33, 52, 109, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    animation: companyIntroExperienceFloat 5.5s ease-in-out infinite;
}

.company-intro-experience-number {
    color: #315fd7;
    font-family: "Manrope", sans-serif;
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
}

.company-intro-experience-number span {
    color: #8d48eb;
    font-size: 20px;
}

.company-intro-experience-card > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.company-intro-experience-card strong {
    color: #172b51;
    font-size: 11px;
}

.company-intro-experience-card > div:last-child span {
    color: #8994a6;
    font-size: 8px;
    line-height: 1.4;
}

/* =========================================================
   FLOATING REVIEW
========================================================= */

.company-intro-floating-review {
    position: absolute;
    z-index: 6;
    top: 70px;
    right: -3%;
    max-width: 250px;
    padding: 15px 17px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(210, 219, 238, 0.94);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow:
        0 22px 50px rgba(33, 52, 109, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    animation: companyIntroReviewFloat 6s ease-in-out infinite;
}

.company-intro-review-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: #ffffff;
    border-radius: 13px;
    background:
        linear-gradient(
            135deg,
            #3e77f8,
            #8141ec
        );
    box-shadow: 0 11px 23px rgba(62, 74, 208, 0.22);
}

.company-intro-review-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.company-intro-floating-review > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.company-intro-floating-review strong {
    color: #172b51;
    font-size: 10px;
}

.company-intro-floating-review span {
    color: #8994a7;
    font-size: 8px;
}

/* =========================================================
   DECORATIVE SHAPE
========================================================= */

.company-intro-shape {
    position: absolute;
    z-index: -1;
    top: 10px;
    left: 10px;
    width: 100px;
    height: 100px;
}

.company-intro-shape span {
    position: absolute;
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            rgba(61, 120, 248, 0.18),
            rgba(133, 65, 236, 0.15)
        );
}

.company-intro-shape span:nth-child(1) {
    width: 14px;
    height: 14px;
    top: 0;
    left: 37px;
    animation: companyIntroShapeOne 4s ease-in-out infinite;
}

.company-intro-shape span:nth-child(2) {
    width: 9px;
    height: 9px;
    top: 37px;
    left: 0;
    animation: companyIntroShapeTwo 5s ease-in-out infinite;
}

.company-intro-shape span:nth-child(3) {
    width: 20px;
    height: 20px;
    right: 0;
    bottom: 0;
    animation: companyIntroShapeThree 6s ease-in-out infinite;
}

/* =========================================================
   RIGHT CONTENT
========================================================= */

.company-intro-content {
    max-width: 600px;
}

.company-intro-tag {
    width: fit-content;
    margin-bottom: 18px;
    padding: 9px 15px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #315bd9;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid #dce5fa;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 30px rgba(37, 68, 145, 0.07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.company-intro-tag span {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            #3772f6,
            #8a3fed
        );
    box-shadow: 0 0 0 5px rgba(68, 101, 239, 0.1);
    animation: companyIntroTagPulse 2s ease-in-out infinite;
}

.company-intro-content h2 {
    margin: 0;
    color: #0c1e48;
    font-family: "Manrope", sans-serif;
    font-size: clamp(40px, 4.4vw, 32px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -3px;
}

.company-intro-content h2 span {
    display: block;
    color: transparent;
    background:
        linear-gradient(
            90deg,
            #376df3,
            #704bed,
            #9137e9,
            #36aadd
        );
    background-size: 260% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: companyIntroTitleGradient 6s ease-in-out infinite;
}

.company-intro-lead {
    margin: 23px 0 13px;
    color: #31466d;
    font-family: "Manrope", sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.65;
}

.company-intro-description {
    margin: 0;
    color: #727e94;
    font-size: 14px;
    line-height: 1.8;
}

/* =========================================================
   HIGHLIGHTS
========================================================= */

.company-intro-highlights {
    margin-top: 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
}

.company-intro-highlight {
    position: relative;
    min-height: 116px;
    padding: 17px;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    overflow: hidden;
    border: 1px solid rgba(215, 223, 239, 0.94);
    border-radius: 17px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.96),
            rgba(248, 248, 255, 0.92)
        );
    box-shadow:
        0 14px 35px rgba(34, 52, 108, 0.065),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.company-intro-highlight::before {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    right: -70px;
    bottom: -70px;
    border-radius: 50%;
    background: rgba(104, 76, 232, 0.075);
    transition: transform 0.5s ease;
}

.company-intro-highlight:hover {
    border-color: rgba(83, 101, 224, 0.24);
    transform: translateY(-6px);
    box-shadow:
        0 23px 48px rgba(34, 52, 108, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.company-intro-highlight:hover::before {
    transform: scale(1.45);
}

.company-intro-highlight-icon {
    position: relative;
    z-index: 2;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: #ffffff;
    border-radius: 13px;
    background:
        linear-gradient(
            135deg,
            #3e77f8,
            #8141ec
        );
    box-shadow: 0 10px 22px rgba(62, 74, 208, 0.21);
    transition: transform 0.35s ease;
}

.company-intro-highlight:hover
.company-intro-highlight-icon {
    transform: rotate(-5deg) scale(1.07);
}

.company-intro-highlight-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.company-intro-highlight > div:last-child {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.company-intro-highlight strong {
    color: #172b51;
    font-size: 12px;
    line-height: 1.4;
}

.company-intro-highlight span {
    color: #8792a6;
    font-size: 9px;
    line-height: 1.55;
}

/* =========================================================
   BOTTOM AREA
========================================================= */

.company-intro-bottom {
    margin-top: 31px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 25px;
}

.company-intro-button {
    min-height: 55px;
    padding: 0 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    color: #ffffff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    border-radius: 13px;
    background:
        linear-gradient(
            100deg,
            #3a73f6,
            #694bed,
            #883aea
        );
    background-size: 190% 100%;
    box-shadow: 0 15px 32px rgba(62, 70, 210, 0.27);
    animation: companyIntroButtonGradient 5s ease-in-out infinite;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.company-intro-button:hover {
    color: #ffffff;
    transform: translateY(-4px);
    box-shadow: 0 21px 42px rgba(62, 70, 210, 0.37);
}

.company-intro-button span {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.company-intro-button:hover span {
    transform: translate(4px, -4px);
}

/* Trust */

.company-intro-trust {
    display: flex;
    align-items: center;
    gap: 12px;
}

.company-intro-trust-avatars {
    display: flex;
    align-items: center;
}

.company-intro-trust-avatars span {
    width: 34px;
    height: 34px;
    margin-left: -8px;
    display: grid;
    place-items: center;
    color: #ffffff;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            #3c78f5,
            #8242eb
        );
    box-shadow: 0 7px 17px rgba(46, 65, 139, 0.15);
    font-family: "Manrope", sans-serif;
    font-size: 8px;
    font-weight: 800;
}

.company-intro-trust-avatars span:first-child {
    margin-left: 0;
}

.company-intro-trust-avatars span:nth-child(2) {
    background: linear-gradient(135deg, #28a88a, #50c89d);
}

.company-intro-trust-avatars span:nth-child(3) {
    background: linear-gradient(135deg, #ed793b, #f0a13e);
}

.company-intro-trust-avatars span:last-child {
    background: #172b51;
}

.company-intro-trust > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.company-intro-trust strong {
    color: #172b51;
    font-size: 10px;
}

.company-intro-trust > div:last-child span {
    color: #8994a7;
    font-size: 8px;
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes companyIntroGridMove {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 140px 70px;
    }
}

@keyframes companyIntroGlowOne {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(130px, 90px) scale(1.2);
    }
}

@keyframes companyIntroGlowTwo {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(-120px, -90px) scale(1.2);
    }
}

@keyframes companyIntroStatusPulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 5px rgba(81, 214, 157, 0.12);
    }

    50% {
        transform: scale(1.15);
        box-shadow: 0 0 0 10px rgba(81, 214, 157, 0.02);
    }
}

@keyframes companyIntroExperienceFloat {
    0%,
    100% {
        transform: translateY(0) rotate(-2deg);
    }

    50% {
        transform: translateY(-12px) rotate(1deg);
    }
}

@keyframes companyIntroReviewFloat {
    0%,
    100% {
        transform: translateY(0) rotate(2deg);
    }

    50% {
        transform: translateY(10px) rotate(-1deg);
    }
}

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

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

@keyframes companyIntroShapeTwo {
    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(9px);
    }
}

@keyframes companyIntroShapeThree {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
}

@keyframes companyIntroTagPulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 5px rgba(68, 101, 239, 0.1);
    }

    50% {
        transform: scale(1.16);
        box-shadow: 0 0 0 10px rgba(68, 101, 239, 0.02);
    }
}

@keyframes companyIntroTitleGradient {
    0%,
    100% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }
}

@keyframes companyIntroButtonGradient {
    0%,
    100% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }
}

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

@media (max-width: 1050px) {
    .company-intro-section {
        padding: 100px 22px;
    }

    .company-intro-container {
        grid-template-columns: 1fr;
        max-width: 820px;
        gap: 75px;
    }

    .company-intro-content {
        max-width: 760px;
        margin: 0 auto;
        text-align: center;
    }

    .company-intro-tag {
        margin-right: auto;
        margin-left: auto;
    }

    .company-intro-highlights {
        text-align: left;
    }

    .company-intro-bottom {
        justify-content: center;
        text-align: left;
    }

    .company-intro-visual {
        min-height: 610px;
    }
}

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

@media (max-width: 700px) {
    .company-intro-section {
        padding: 80px 16px;
    }

    .company-intro-container {
        gap: 55px;
    }

    .company-intro-content h2 {
        font-size: 39px;
        letter-spacing: -1.8px;
    }

    .company-intro-lead {
        font-size: 15px;
    }

    .company-intro-description {
        font-size: 13px;
    }

    .company-intro-highlights {
        grid-template-columns: 1fr;
    }

    .company-intro-visual {
        min-height: 535px;
    }

    .company-intro-image-frame {
        width: 84%;
        height: 500px;
    }

    .company-intro-experience-card {
        left: 0;
        bottom: 35px;
    }

    .company-intro-floating-review {
        right: 0;
    }
}

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

@media (max-width: 480px) {
    .company-intro-section {
        padding: 70px 14px;
    }

    .company-intro-content h2 {
        font-size: 34px;
        letter-spacing: -1.5px;
    }

    .company-intro-lead {
        font-size: 14px;
    }

    .company-intro-description {
        font-size: 12px;
    }

    .company-intro-visual {
        min-height: 470px;
        margin-bottom: 10px;
    }

    .company-intro-image-frame {
        width: 91%;
        height: 430px;
        border-width: 7px;
        border-radius: 25px;
    }

    .company-intro-image-label {
        top: 16px;
        left: 16px;
        max-width: calc(100% - 32px);
        font-size: 8px;
    }

    .company-intro-image-bottom {
        right: 17px;
        bottom: 18px;
        left: 17px;
    }

    .company-intro-image-bottom strong {
        font-size: 15px;
    }

    .company-intro-experience-card {
        left: -5px;
        bottom: 8px;
        min-width: 190px;
        padding: 14px;
    }

    .company-intro-experience-number {
        font-size: 27px;
    }

    .company-intro-floating-review {
        top: 45px;
        right: -4px;
        max-width: 195px;
        padding: 11px;
    }

    .company-intro-review-icon {
        width: 35px;
        height: 35px;
    }

    .company-intro-highlights {
        gap: 10px;
    }

    .company-intro-highlight {
        min-height: 105px;
    }

    .company-intro-bottom {
        flex-direction: column;
        align-items: stretch;
    }

    .company-intro-button {
        width: 100%;
    }

    .company-intro-trust {
        justify-content: center;
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .company-intro-grid,
    .company-intro-glow,
    .company-intro-image-label span,
    .company-intro-experience-card,
    .company-intro-floating-review,
    .company-intro-shape span,
    .company-intro-tag span,
    .company-intro-content h2 span,
    .company-intro-button {
        animation: none !important;
    }
}

/* =========================================================
   ABOUT COMPANY STATISTICS SECTION
========================================================= */

.about-stats-section,
.about-stats-section * {
    box-sizing: border-box;
}

.about-stats-section {
    position: relative;
    width: 100%;
    padding: 115px 24px 105px;
    overflow: hidden;
    isolation: isolate;
    color: #ffffff;
    font-family: "Inter", Arial, sans-serif;
    background:
        radial-gradient(
            circle at 8% 15%,
            rgba(54, 113, 247, 0.21),
            transparent 29%
        ),
        radial-gradient(
            circle at 92% 80%,
            rgba(143, 61, 240, 0.2),
            transparent 31%
        ),
        radial-gradient(
            circle at 50% 110%,
            rgba(54, 198, 255, 0.07),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #030611 0%,
            #071025 47%,
            #0c0c1e 100%
        );
}

/* =========================================================
   BACKGROUND GRID
========================================================= */

.about-stats-grid {
    position: absolute;
    z-index: -8;
    inset: 0;
    opacity: 0.21;
    pointer-events: none;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.055) 1px,
            transparent 1px
        );
    background-size: 68px 68px;
    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 10%,
            #000 90%,
            transparent
        );
    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 10%,
            #000 90%,
            transparent
        );
    animation: aboutStatsGridMove 28s linear infinite;
}

/* =========================================================
   GLOWS
========================================================= */

.about-stats-glow {
    position: absolute;
    z-index: -7;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
}

.about-stats-glow-one {
    width: 470px;
    height: 470px;
    top: -270px;
    left: -230px;
    background: rgba(55, 111, 247, 0.22);
    animation: aboutStatsGlowOne 15s ease-in-out infinite alternate;
}

.about-stats-glow-two {
    width: 520px;
    height: 520px;
    right: -270px;
    bottom: -290px;
    background: rgba(143, 61, 241, 0.2);
    animation: aboutStatsGlowTwo 18s ease-in-out infinite alternate;
}

/* =========================================================
   MOVING DECORATIVE LINES
========================================================= */

.about-stats-line {
    position: absolute;
    z-index: -6;
    width: 420px;
    height: 1px;
    overflow: hidden;
    opacity: 0.55;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(103, 113, 245, 0.75),
            transparent
        );
}

.about-stats-line::after {
    content: "";
    position: absolute;
    top: -1px;
    left: -30%;
    width: 30%;
    height: 3px;
    background:
        linear-gradient(
            90deg,
            transparent,
            #65a3ff,
            transparent
        );
    animation: aboutStatsLineFlow 4s linear infinite;
}

.about-stats-line-one {
    top: 22%;
    left: -130px;
    transform: rotate(18deg);
}

.about-stats-line-two {
    right: -130px;
    bottom: 20%;
    transform: rotate(-18deg);
}

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

.about-stats-container {
    position: relative;
    z-index: 2;
    width: min(1200px, 100%);
    margin: 0 auto;
}

/* =========================================================
   HEADING
========================================================= */

.about-stats-heading {
    margin-bottom: 58px;
}

.about-stats-tag {
    width: fit-content;
    margin-bottom: 18px;
    padding: 9px 15px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #b8c9ff;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.055);
    box-shadow:
        0 13px 30px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
}

.about-stats-tag span {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            #4c8cff,
            #a24df0
        );
    box-shadow:
        0 0 0 5px rgba(92, 104, 239, 0.11),
        0 0 17px rgba(80, 126, 255, 0.65);
    animation: aboutStatsTagPulse 2s ease-in-out infinite;
}

.about-stats-heading-row {
    display: grid;
    grid-template-columns: 1fr 0.72fr;
    align-items: end;
    gap: 70px;
}

.about-stats-heading h2 {
    margin: 0;
    color: #ffffff;
    font-family: "Manrope", sans-serif;
    font-size: clamp(40px, 4.6vw, 62px);
    font-weight: 800;
    line-height: 1.07;
    letter-spacing: -3px;
}

.about-stats-heading h2 span {
    display: block;
    color: transparent;
    background:
        linear-gradient(
            90deg,
            #65a3ff,
            #9780ff,
            #d36cff,
            #58d9ff
        );
    background-size: 250% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: aboutStatsHeadingGradient 6s ease-in-out infinite;
}

.about-stats-heading p {
    margin: 0 0 5px;
    color: rgba(226, 233, 255, 0.62);
    font-size: 14px;
    line-height: 1.8;
}

/* =========================================================
   STATISTICS GRID
========================================================= */

.about-stats-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

/* =========================================================
   STAT CARD
========================================================= */

.about-stat-card {
    position: relative;
    min-height: 380px;
    padding: 25px 23px 23px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 23px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.025)
        );
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(17px);
    -webkit-backdrop-filter: blur(17px);
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}

.about-stat-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 3px;
    border-radius: 0 0 16px 16px;
    background:
        linear-gradient(
            90deg,
            #4c8cff,
            #a14ff0,
            #53d8ff
        );
    box-shadow: 0 0 18px rgba(103, 101, 242, 0.6);
    transform: translateX(-50%);
    transition: width 0.45s ease;
}

.about-stat-card:hover {
    border-color: rgba(125, 119, 255, 0.28);
    transform: translateY(-10px);
    box-shadow:
        0 38px 80px rgba(0, 0, 0, 0.37),
        0 0 45px rgba(82, 80, 220, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.about-stat-card:hover::before {
    width: 45%;
}

/* Top */

.about-stat-card-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.about-stat-icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 15px;
    background:
        linear-gradient(
            135deg,
            #3e7df9,
            #704dee,
            #8f42eb
        );
    box-shadow:
        0 14px 30px rgba(61, 73, 210, 0.32),
        0 0 0 7px rgba(96, 96, 229, 0.055);
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

.about-stat-card:hover .about-stat-icon {
    transform: rotate(-6deg) scale(1.08);
    box-shadow:
        0 18px 38px rgba(61, 73, 210, 0.42),
        0 0 0 9px rgba(96, 96, 229, 0.06);
}

.about-stat-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.about-stat-index {
    color: rgba(224, 232, 255, 0.26);
    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
}

/* Number */

.about-stat-number-wrap {
    position: relative;
    z-index: 2;
    margin-top: 38px;
    display: flex;
    align-items: flex-start;
}

.about-stat-number {
    color: #ffffff;
    font-family: "Manrope", sans-serif;
    font-size: clamp(52px, 5vw, 70px);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -4px;
}

.about-stat-symbol {
    margin: 2px 0 0 4px;
    color: #9b75ff;
    font-family: "Manrope", sans-serif;
    font-size: 26px;
    font-weight: 800;
    text-shadow: 0 0 20px rgba(142, 91, 244, 0.45);
}

.about-stat-card h3 {
    position: relative;
    z-index: 2;
    margin: 21px 0 10px;
    color: rgba(255, 255, 255, 0.93);
    font-family: "Manrope", sans-serif;
    font-size: 17px;
    font-weight: 700;
}

.about-stat-card p {
    position: relative;
    z-index: 2;
    margin: 0 0 25px;
    color: rgba(224, 232, 255, 0.52);
    font-size: 11px;
    line-height: 1.75;
}

/* Progress */

.about-stat-progress {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 5px;
    margin-top: auto;
    overflow: hidden;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.075);
}

.about-stat-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            #4b88fc,
            #9749ee,
            #55d4ff
        );
    box-shadow: 0 0 14px rgba(92, 102, 238, 0.45);
    transition:
        width 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.about-stats-section.is-stats-active
.about-stat-progress span {
    width: var(--stat-progress);
}

/* Card Glow */

.about-stat-card-glow {
    position: absolute;
    right: -110px;
    bottom: -120px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(111, 71, 232, 0.105);
    filter: blur(18px);
    transition:
        transform 0.65s ease,
        opacity 0.5s ease;
}

.about-stat-card:hover .about-stat-card-glow {
    transform: translate(-35px, -35px) scale(1.25);
}

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

.about-stats-trust-bar {
    margin-top: 35px;
    padding: 21px 23px;
    display: grid;
    grid-template-columns: auto 1px minmax(0, 1fr) auto;
    align-items: center;
    gap: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    background:
        linear-gradient(
            100deg,
            rgba(255, 255, 255, 0.065),
            rgba(108, 73, 237, 0.045)
        );
    box-shadow:
        0 20px 48px rgba(0, 0, 0, 0.23),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.about-stats-trust-status {
    display: flex;
    align-items: center;
    gap: 13px;
}

.about-stats-trust-status > span {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #48d49a;
    box-shadow:
        0 0 0 7px rgba(72, 212, 154, 0.08),
        0 0 20px rgba(72, 212, 154, 0.5);
    animation: aboutStatsTrustPulse 2s ease-in-out infinite;
}

.about-stats-trust-status div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.about-stats-trust-status small {
    color: rgba(224, 232, 255, 0.43);
    font-size: 9px;
}

.about-stats-trust-status strong {
    color: #ffffff;
    font-size: 12px;
}

.about-stats-trust-divider {
    width: 1px;
    height: 41px;
    background: rgba(255, 255, 255, 0.1);
}

.about-stats-trust-bar > p {
    margin: 0;
    color: rgba(224, 232, 255, 0.57);
    font-size: 11px;
    line-height: 1.65;
}

.about-stats-trust-bar > a {
    padding: 11px 15px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #b7c5ff;
    text-decoration: none;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.045);
    transition:
        color 0.3s ease,
        transform 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease;
}

.about-stats-trust-bar > a:hover {
    color: #ffffff;
    border-color: rgba(128, 115, 255, 0.27);
    background: rgba(116, 77, 237, 0.12);
    transform: translateX(4px);
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes aboutStatsGridMove {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 136px 68px;
    }
}

@keyframes aboutStatsGlowOne {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(130px, 90px) scale(1.2);
    }
}

@keyframes aboutStatsGlowTwo {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(-120px, -90px) scale(1.2);
    }
}

@keyframes aboutStatsLineFlow {
    from {
        left: -30%;
    }

    to {
        left: 120%;
    }
}

@keyframes aboutStatsTagPulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow:
            0 0 0 5px rgba(92, 104, 239, 0.11),
            0 0 17px rgba(80, 126, 255, 0.65);
    }

    50% {
        transform: scale(1.16);
        box-shadow:
            0 0 0 10px rgba(92, 104, 239, 0.02),
            0 0 25px rgba(80, 126, 255, 0.8);
    }
}

@keyframes aboutStatsHeadingGradient {
    0%,
    100% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }
}

@keyframes aboutStatsTrustPulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow:
            0 0 0 7px rgba(72, 212, 154, 0.08),
            0 0 20px rgba(72, 212, 154, 0.5);
    }

    50% {
        transform: scale(1.14);
        box-shadow:
            0 0 0 12px rgba(72, 212, 154, 0.02),
            0 0 27px rgba(72, 212, 154, 0.7);
    }
}

/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1100px) {
    .about-stats-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-stat-card {
        min-height: 350px;
    }
}

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

@media (max-width: 850px) {
    .about-stats-section {
        padding: 95px 20px 90px;
    }

    .about-stats-heading-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .about-stats-heading {
        text-align: center;
    }

    .about-stats-tag {
        margin-right: auto;
        margin-left: auto;
    }

    .about-stats-heading p {
        max-width: 650px;
        margin-right: auto;
        margin-left: auto;
    }

    .about-stats-trust-bar {
        grid-template-columns: 1fr auto;
    }

    .about-stats-trust-divider {
        display: none;
    }

    .about-stats-trust-bar > p {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

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

@media (max-width: 620px) {
    .about-stats-section {
        padding: 80px 16px 75px;
    }

    .about-stats-heading {
        margin-bottom: 45px;
    }

    .about-stats-heading h2 {
        font-size: 39px;
        letter-spacing: -1.8px;
    }

    .about-stats-heading p {
        font-size: 13px;
    }

    .about-stats-cards {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .about-stat-card {
        min-height: 310px;
        padding: 19px 16px 17px;
        border-radius: 19px;
    }

    .about-stat-icon {
        width: 43px;
        height: 43px;
    }

    .about-stat-icon svg {
        width: 20px;
        height: 20px;
    }

    .about-stat-number-wrap {
        margin-top: 29px;
    }

    .about-stat-number {
        font-size: 47px;
        letter-spacing: -3px;
    }

    .about-stat-symbol {
        font-size: 20px;
    }

    .about-stat-card h3 {
        margin-top: 17px;
        font-size: 14px;
    }

    .about-stat-card p {
        font-size: 9px;
        line-height: 1.65;
    }

    .about-stats-trust-bar {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }

    .about-stats-trust-bar > p {
        grid-column: auto;
        grid-row: auto;
    }

    .about-stats-trust-bar > a {
        width: fit-content;
    }
}

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

@media (max-width: 430px) {
    .about-stats-section {
        padding: 70px 14px 65px;
    }

    .about-stats-heading h2 {
        font-size: 34px;
        letter-spacing: -1.5px;
    }

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

    .about-stat-card {
        min-height: 315px;
        padding: 22px 20px;
    }

    .about-stat-number {
        font-size: 58px;
    }

    .about-stat-card h3 {
        font-size: 16px;
    }

    .about-stat-card p {
        font-size: 10px;
    }

    .about-stats-trust-bar {
        padding: 19px;
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .about-stats-grid,
    .about-stats-glow,
    .about-stats-line::after,
    .about-stats-tag span,
    .about-stats-heading h2 span,
    .about-stats-trust-status > span {
        animation: none !important;
    }
}

/* =========================================================
   EDITORIAL OUR STORY SECTION
========================================================= */

.editorial-story-section,
.editorial-story-section * {
    box-sizing: border-box;
}

.editorial-story-section {
    position: relative;
    width: 100%;
    padding: 125px 24px 110px;
    overflow: hidden;
    isolation: isolate;
    font-family: "Inter", Arial, sans-serif;
    background:
        radial-gradient(
            circle at 7% 20%,
            rgba(57, 111, 247, 0.09),
            transparent 27%
        ),
        radial-gradient(
            circle at 93% 75%,
            rgba(140, 61, 239, 0.085),
            transparent 29%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7f9ff 50%,
            #ffffff 100%
        );
}

/* =========================================================
   BACKGROUND ELEMENTS
========================================================= */

.editorial-story-noise {
    position: absolute;
    z-index: -8;
    inset: 0;
    opacity: 0.22;
    pointer-events: none;
    background-image:
        linear-gradient(
            rgba(46, 77, 152, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(46, 77, 152, 0.035) 1px,
            transparent 1px
        );
    background-size: 72px 72px;
    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 9%,
            #000 91%,
            transparent
        );
    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 9%,
            #000 91%,
            transparent
        );
    animation: editorialStoryGrid 30s linear infinite;
}

.editorial-story-glow {
    position: absolute;
    z-index: -7;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
}

.editorial-story-glow-one {
    width: 450px;
    height: 450px;
    top: -260px;
    left: -230px;
    background: rgba(55, 108, 247, 0.13);
    animation: editorialStoryGlowOne 15s ease-in-out infinite alternate;
}

.editorial-story-glow-two {
    width: 490px;
    height: 490px;
    right: -260px;
    bottom: -270px;
    background: rgba(134, 58, 241, 0.11);
    animation: editorialStoryGlowTwo 18s ease-in-out infinite alternate;
}

/* Large Faded Heading */

.editorial-story-word {
    position: absolute;
    z-index: -5;
    top: 135px;
    left: 50%;
    color: rgba(39, 65, 127, 0.035);
    font-family: "Manrope", sans-serif;
    font-size: clamp(120px, 16vw, 240px);
    font-weight: 900;
    line-height: 0.8;
    letter-spacing: -12px;
    white-space: nowrap;
    transform: translateX(-50%);
    user-select: none;
}

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

.editorial-story-container {
    position: relative;
    z-index: 2;
    width: min(1220px, 100%);
    margin: 0 auto;
}

/* =========================================================
   TOP HEADING
========================================================= */

.editorial-story-top {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 0.55fr;
    align-items: end;
    gap: 85px;
    margin-bottom: 80px;
}

.editorial-story-label {
    width: fit-content;
    margin-bottom: 18px;
    padding: 9px 15px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #315bd9;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid #dce5fa;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 30px rgba(37, 68, 145, 0.07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.editorial-story-label span {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            #3772f6,
            #8a3fed
        );
    box-shadow: 0 0 0 5px rgba(68, 101, 239, 0.1);
    animation: editorialStoryLabelPulse 2s ease-in-out infinite;
}

.editorial-story-heading h2 {
    max-width: 750px;
    margin: 0;
    color: #0b1e48;
    font-family: "Manrope", sans-serif;
    font-size: clamp(43px, 5vw, 68px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -3.6px;
}

.editorial-story-heading h2 span {
    display: block;
    color: transparent;
    background:
        linear-gradient(
            90deg,
            #376df3,
            #704bed,
            #9137e9,
            #36aadd
        );
    background-size: 260% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: editorialStoryTitleGradient 6s ease-in-out infinite;
}

/* Top Intro */

.editorial-story-intro {
    position: relative;
    padding: 0 0 6px 25px;
    border-left: 1px solid #dbe2ef;
}

.editorial-story-intro-number {
    position: absolute;
    top: -29px;
    left: 25px;
    color: #456fdc;
    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.editorial-story-intro p {
    margin: 0;
    color: #707c92;
    font-size: 14px;
    line-height: 1.85;
}

/* =========================================================
   MAIN EDITORIAL LAYOUT
========================================================= */

.editorial-story-layout {
    display: grid;
    grid-template-columns: 0.78fr 1.05fr 0.78fr;
    align-items: center;
    gap: 48px;
}

/* Shared Content */

.editorial-story-left,
.editorial-story-right {
    position: relative;
}

.editorial-story-side-label {
    display: block;
    margin-bottom: 16px;
    color: #4670dc;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.editorial-story-left h3,
.editorial-story-right h3 {
    margin: 0;
    color: #142850;
    font-family: "Manrope", sans-serif;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.38;
    letter-spacing: -0.7px;
}

.editorial-story-left > p,
.editorial-story-right > p {
    margin: 20px 0 0;
    color: #748096;
    font-size: 13px;
    line-height: 1.85;
}

/* =========================================================
   LEFT QUOTE
========================================================= */

.editorial-story-quote {
    position: relative;
    margin-top: 29px;
    padding: 23px 20px 21px 27px;
    overflow: hidden;
    border-left: 3px solid #6f50ed;
    border-radius: 0 16px 16px 0;
    background:
        linear-gradient(
            100deg,
            rgba(61, 116, 247, 0.07),
            rgba(136, 65, 237, 0.055)
        );
}

.editorial-story-quote::after {
    content: "";
    position: absolute;
    width: 105px;
    height: 105px;
    right: -70px;
    bottom: -70px;
    border-radius: 50%;
    background: rgba(112, 77, 236, 0.09);
}

.editorial-story-quote-mark {
    position: absolute;
    top: 3px;
    left: 9px;
    color: rgba(91, 74, 226, 0.18);
    font-family: Georgia, serif;
    font-size: 62px;
    line-height: 1;
}

.editorial-story-quote p {
    position: relative;
    z-index: 2;
    margin: 0;
    color: #405477;
    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.7;
}

/* =========================================================
   CENTER VISUAL
========================================================= */

.editorial-story-visual {
    position: relative;
    min-height: 620px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.editorial-story-image-frame {
    position: relative;
    z-index: 3;
    width: min(455px, 88%);
    height: 575px;
    overflow: hidden;
    border: 9px solid rgba(255, 255, 255, 0.95);
    border-radius: 210px 210px 30px 30px;
    background: #e5eaf4;
    box-shadow:
        0 42px 95px rgba(31, 51, 110, 0.2),
        0 0 0 1px rgba(76, 96, 177, 0.08);
}

.editorial-story-image-frame img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition:
        transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.6s ease;
}

.editorial-story-image-frame:hover img {
    transform: scale(1.07);
    filter: saturate(1.05);
}

.editorial-story-image-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(5, 14, 38, 0.02) 28%,
            rgba(5, 14, 38, 0.12) 58%,
            rgba(5, 14, 38, 0.84) 100%
        );
}

.editorial-story-image-top {
    position: absolute;
    top: 35px;
    left: 50%;
    padding: 10px 14px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 100px;
    background: rgba(7, 16, 42, 0.37);
    box-shadow: 0 12px 27px rgba(0, 0, 0, 0.13);
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
    transform: translateX(-50%);
}

.editorial-story-image-top span {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #51d89d;
    box-shadow: 0 0 0 5px rgba(81, 216, 157, 0.12);
    animation: editorialStoryStatusPulse 2s ease-in-out infinite;
}

.editorial-story-image-caption {
    position: absolute;
    right: 28px;
    bottom: 30px;
    left: 28px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.editorial-story-image-caption small {
    color: rgba(255, 255, 255, 0.6);
    font-size: 9px;
    font-weight: 600;
}

.editorial-story-image-caption strong {
    color: #ffffff;
    font-family: "Manrope", sans-serif;
    font-size: 18px;
    line-height: 1.45;
}

/* Year Floating Card */

.editorial-story-year-card {
    position: absolute;
    z-index: 7;
    left: -1%;
    bottom: 58px;
    min-width: 135px;
    padding: 17px 18px;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(210, 219, 238, 0.95);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.93);
    box-shadow:
        0 24px 54px rgba(33, 52, 109, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    animation: editorialStoryYearFloat 5.5s ease-in-out infinite;
}

.editorial-story-year-card small {
    color: #8994a7;
    font-size: 8px;
    font-weight: 600;
}

.editorial-story-year-card strong {
    margin: 5px 0 3px;
    color: transparent;
    background:
        linear-gradient(
            90deg,
            #376df3,
            #8b40ec
        );
    background-clip: text;
    -webkit-background-clip: text;
    font-family: "Manrope", sans-serif;
    font-size: 31px;
    font-weight: 800;
    line-height: 1;
}

.editorial-story-year-card span {
    color: #65728a;
    font-size: 8px;
}

/* Status Floating Card */

.editorial-story-status-card {
    position: absolute;
    z-index: 7;
    top: 85px;
    right: -4%;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(210, 219, 238, 0.95);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.93);
    box-shadow:
        0 22px 50px rgba(33, 52, 109, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    animation: editorialStoryStatusFloat 6s ease-in-out infinite;
}

.editorial-story-status-dot {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #43ce95;
    box-shadow:
        0 0 0 7px rgba(67, 206, 149, 0.1),
        0 0 18px rgba(67, 206, 149, 0.4);
    animation: editorialStoryLivePulse 2s ease-in-out infinite;
}

.editorial-story-status-card > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.editorial-story-status-card strong {
    color: #172b51;
    font-size: 10px;
}

.editorial-story-status-card span {
    color: #8994a7;
    font-size: 8px;
}

/* Decorative Ring */

.editorial-story-ring {
    position: absolute;
    z-index: 1;
    width: 540px;
    height: 540px;
    border: 1px dashed rgba(106, 91, 225, 0.16);
    border-radius: 50%;
    animation: editorialStoryRingRotate 28s linear infinite;
}

.editorial-story-ring::before,
.editorial-story-ring::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            #3f7cf8,
            #9143ec
        );
    box-shadow:
        0 0 0 6px rgba(90, 96, 229, 0.07),
        0 0 19px rgba(90, 96, 229, 0.35);
}

.editorial-story-ring::before {
    top: 13%;
    left: 12%;
}

.editorial-story-ring::after {
    right: 11%;
    bottom: 15%;
}

/* =========================================================
   RIGHT SIDE POINTS
========================================================= */

.editorial-story-points {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
}

.editorial-story-point {
    position: relative;
    padding: 18px 0;
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 13px;
    border-bottom: 1px solid #e0e6ef;
}

.editorial-story-point:first-child {
    border-top: 1px solid #e0e6ef;
}

.editorial-story-point > span {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: #ffffff;
    border-radius: 10px;
    background:
        linear-gradient(
            135deg,
            #3e77f8,
            #8141ec
        );
    box-shadow: 0 9px 20px rgba(62, 74, 208, 0.2);
    font-size: 8px;
    font-weight: 800;
    transition: transform 0.35s ease;
}

.editorial-story-point:hover > span {
    transform: rotate(-6deg) scale(1.08);
}

.editorial-story-point > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.editorial-story-point strong {
    color: #172b51;
    font-size: 11px;
}

.editorial-story-point p {
    margin: 0;
    color: #8490a5;
    font-size: 9px;
    line-height: 1.6;
}

/* =========================================================
   HORIZONTAL JOURNEY
========================================================= */

.editorial-story-journey {
    position: relative;
    margin-top: 95px;
    padding-top: 27px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.editorial-story-journey-line {
    position: absolute;
    top: 6px;
    left: 7%;
    right: 7%;
    height: 2px;
    overflow: hidden;
    border-radius: 20px;
    background: #dfe5ef;
}

.editorial-story-journey-line span {
    display: block;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(
            90deg,
            #3f7bf8,
            #744ced,
            #9441eb,
            #45bce7
        );
    background-size: 220% 100%;
    animation: editorialStoryJourneyFlow 7s linear infinite;
}

.editorial-story-step {
    position: relative;
    min-height: 155px;
    padding: 25px 20px 20px;
    border: 1px solid transparent;
    border-radius: 17px;
    transition:
        background 0.35s ease,
        border-color 0.35s ease,
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.editorial-story-step:hover,
.editorial-story-step.is-active {
    border-color: rgba(207, 217, 237, 0.95);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.96),
            rgba(247, 248, 255, 0.92)
        );
    box-shadow: 0 18px 42px rgba(34, 52, 108, 0.08);
    transform: translateY(-5px);
}

.editorial-story-step-dot {
    position: absolute;
    top: -27px;
    left: 20px;
    width: 14px;
    height: 14px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            #3e77f8,
            #8141ec
        );
    box-shadow:
        0 0 0 5px rgba(76, 91, 224, 0.08),
        0 7px 15px rgba(61, 73, 210, 0.2);
}

.editorial-story-step small {
    color: #446edb;
    font-size: 9px;
    font-weight: 800;
}

.editorial-story-step strong {
    display: block;
    margin: 7px 0 8px;
    color: #142850;
    font-family: "Manrope", sans-serif;
    font-size: 17px;
    font-weight: 800;
}

.editorial-story-step p {
    margin: 0;
    color: #7a869b;
    font-size: 10px;
    line-height: 1.65;
}

/* =========================================================
   BOTTOM STATEMENT
========================================================= */

.editorial-story-bottom {
    position: relative;
    margin-top: 65px;
    padding: 30px 32px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    overflow: hidden;
    border: 1px solid rgba(210, 219, 238, 0.95);
    border-radius: 22px;
    background:
        linear-gradient(
            110deg,
            rgba(255, 255, 255, 0.98),
            rgba(245, 244, 255, 0.95)
        );
    box-shadow:
        0 24px 58px rgba(34, 52, 109, 0.105),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.editorial-story-bottom::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -175px;
    bottom: -190px;
    border-radius: 50%;
    background: rgba(111, 72, 232, 0.09);
}

.editorial-story-bottom-icon {
    position: relative;
    z-index: 2;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    color: #ffffff;
    border-radius: 18px;
    background:
        linear-gradient(
            135deg,
            #3e7df9,
            #704dee,
            #8f42eb
        );
    box-shadow:
        0 15px 31px rgba(61, 73, 210, 0.27),
        0 0 0 8px rgba(96, 96, 229, 0.05);
    animation: editorialStoryBottomIcon 4s ease-in-out infinite;
}

.editorial-story-bottom-icon svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.editorial-story-bottom > div:nth-child(2) {
    position: relative;
    z-index: 2;
}

.editorial-story-bottom > div:nth-child(2) span {
    color: #446fdd;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.editorial-story-bottom h3 {
    margin: 7px 0 0;
    color: #142850;
    font-family: "Manrope", sans-serif;
    font-size: 22px;
    font-weight: 800;
}

.editorial-story-bottom > a {
    position: relative;
    z-index: 2;
    min-height: 52px;
    padding: 0 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #ffffff;
    text-decoration: none;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
    border-radius: 12px;
    background:
        linear-gradient(
            100deg,
            #3a73f6,
            #694bed,
            #883aea
        );
    background-size: 190% 100%;
    box-shadow: 0 14px 30px rgba(62, 70, 210, 0.27);
    animation: editorialStoryButtonGradient 5s ease-in-out infinite;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.editorial-story-bottom > a:hover {
    color: #ffffff;
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(62, 70, 210, 0.37);
}

.editorial-story-bottom > a span {
    font-size: 17px;
    transition: transform 0.3s ease;
}

.editorial-story-bottom > a:hover span {
    transform: translate(3px, -3px);
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes editorialStoryGrid {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 144px 72px;
    }
}

@keyframes editorialStoryGlowOne {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(125px, 90px) scale(1.2);
    }
}

@keyframes editorialStoryGlowTwo {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(-120px, -85px) scale(1.2);
    }
}

@keyframes editorialStoryLabelPulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 5px rgba(68, 101, 239, 0.1);
    }

    50% {
        transform: scale(1.16);
        box-shadow: 0 0 0 10px rgba(68, 101, 239, 0.02);
    }
}

@keyframes editorialStoryTitleGradient {
    0%,
    100% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }
}

@keyframes editorialStoryStatusPulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 5px rgba(81, 216, 157, 0.12);
    }

    50% {
        transform: scale(1.15);
        box-shadow: 0 0 0 10px rgba(81, 216, 157, 0.02);
    }
}

@keyframes editorialStoryYearFloat {
    0%,
    100% {
        transform: translateY(0) rotate(-2deg);
    }

    50% {
        transform: translateY(-11px) rotate(1deg);
    }
}

@keyframes editorialStoryStatusFloat {
    0%,
    100% {
        transform: translateY(0) rotate(2deg);
    }

    50% {
        transform: translateY(10px) rotate(-1deg);
    }
}

@keyframes editorialStoryLivePulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow:
            0 0 0 7px rgba(67, 206, 149, 0.1),
            0 0 18px rgba(67, 206, 149, 0.4);
    }

    50% {
        transform: scale(1.14);
        box-shadow:
            0 0 0 11px rgba(67, 206, 149, 0.02),
            0 0 25px rgba(67, 206, 149, 0.58);
    }
}

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

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

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

@keyframes editorialStoryBottomIcon {
    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-5px) rotate(-4deg);
    }
}

@keyframes editorialStoryButtonGradient {
    0%,
    100% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }
}

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

@media (max-width: 1050px) {
    .editorial-story-section {
        padding: 105px 22px 95px;
    }

    .editorial-story-top {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }

    .editorial-story-label {
        margin-right: auto;
        margin-left: auto;
    }

    .editorial-story-heading h2 {
        margin-right: auto;
        margin-left: auto;
    }

    .editorial-story-intro {
        max-width: 650px;
        margin: 0 auto;
        padding: 0;
        border-left: 0;
    }

    .editorial-story-intro-number {
        display: none;
    }

    .editorial-story-layout {
        grid-template-columns: 1fr 1.1fr;
        align-items: center;
    }

    .editorial-story-left {
        grid-column: 1;
    }

    .editorial-story-visual {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .editorial-story-right {
        grid-column: 1;
    }

    .editorial-story-journey {
        grid-template-columns: repeat(2, 1fr);
        gap: 35px 20px;
    }

    .editorial-story-journey-line {
        display: none;
    }

    .editorial-story-step-dot {
        top: 17px;
        left: auto;
        right: 18px;
    }
}

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

@media (max-width: 760px) {
    .editorial-story-section {
        padding: 85px 16px 75px;
    }

    .editorial-story-word {
        top: 110px;
        font-size: 110px;
        letter-spacing: -7px;
    }

    .editorial-story-top {
        margin-bottom: 55px;
    }

    .editorial-story-heading h2 {
        font-size: 42px;
        letter-spacing: -2px;
    }

    .editorial-story-intro p {
        font-size: 13px;
    }

    .editorial-story-layout {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .editorial-story-left,
    .editorial-story-right,
    .editorial-story-visual {
        grid-column: 1;
        grid-row: auto;
    }

    .editorial-story-left,
    .editorial-story-right {
        text-align: center;
    }

    .editorial-story-left h3,
    .editorial-story-right h3 {
        font-size: 23px;
    }

    .editorial-story-visual {
        min-height: 560px;
    }

    .editorial-story-image-frame {
        height: 520px;
    }

    .editorial-story-quote {
        text-align: left;
    }

    .editorial-story-point {
        text-align: left;
    }

    .editorial-story-journey {
        margin-top: 70px;
        grid-template-columns: 1fr 1fr;
    }

    .editorial-story-bottom {
        grid-template-columns: auto 1fr;
    }

    .editorial-story-bottom > a {
        grid-column: 2;
        width: fit-content;
    }
}

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

@media (max-width: 480px) {
    .editorial-story-section {
        padding: 72px 14px 65px;
    }

    .editorial-story-word {
        font-size: 78px;
        letter-spacing: -5px;
    }

    .editorial-story-heading h2 {
        font-size: 35px;
        letter-spacing: -1.5px;
    }

    .editorial-story-visual {
        min-height: 470px;
    }

    .editorial-story-image-frame {
        width: 92%;
        height: 435px;
        border-width: 7px;
        border-radius: 150px 150px 25px 25px;
    }

    .editorial-story-image-top {
        top: 25px;
        font-size: 8px;
    }

    .editorial-story-image-caption {
        right: 19px;
        bottom: 21px;
        left: 19px;
    }

    .editorial-story-image-caption strong {
        font-size: 15px;
    }

    .editorial-story-year-card {
        left: -3px;
        bottom: 25px;
        min-width: 112px;
        padding: 13px;
    }

    .editorial-story-year-card strong {
        font-size: 25px;
    }

    .editorial-story-status-card {
        top: 60px;
        right: -3px;
        padding: 11px;
    }

    .editorial-story-ring {
        width: 430px;
        height: 430px;
    }

    .editorial-story-left h3,
    .editorial-story-right h3 {
        font-size: 20px;
    }

    .editorial-story-left > p,
    .editorial-story-right > p {
        font-size: 12px;
    }

    .editorial-story-journey {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .editorial-story-step {
        min-height: auto;
        padding: 20px;
        border-color: rgba(211, 220, 238, 0.92);
        background: rgba(255, 255, 255, 0.82);
    }

    .editorial-story-step-dot {
        top: 20px;
    }

    .editorial-story-bottom {
        padding: 23px 19px;
        grid-template-columns: 1fr;
    }

    .editorial-story-bottom > a {
        grid-column: 1;
        width: 100%;
    }

    .editorial-story-bottom h3 {
        font-size: 18px;
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .editorial-story-noise,
    .editorial-story-glow,
    .editorial-story-label span,
    .editorial-story-heading h2 span,
    .editorial-story-image-top span,
    .editorial-story-year-card,
    .editorial-story-status-card,
    .editorial-story-status-dot,
    .editorial-story-ring,
    .editorial-story-journey-line span,
    .editorial-story-bottom-icon,
    .editorial-story-bottom > a {
        animation: none !important;
    }
}

/* =========================================================
   CONTACT PAGE HERO SECTION
========================================================= */

.contact-hero-section,
.contact-hero-section * {
    box-sizing: border-box;
}

.contact-hero-section {
    position: relative;
    width: 100%;
    min-height: 780px;
    padding: 95px 24px 110px;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    color: #ffffff;
    font-family: "Inter", Arial, sans-serif;
    background:
        radial-gradient(
            circle at 7% 18%,
            rgba(48, 110, 255, 0.24),
            transparent 29%
        ),
        radial-gradient(
            circle at 93% 72%,
            rgba(145, 61, 244, 0.22),
            transparent 31%
        ),
        radial-gradient(
            circle at 50% 110%,
            rgba(55, 205, 255, 0.08),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            #030611 0%,
            #071027 46%,
            #0c0b1e 100%
        );
}

/* =========================================================
   BACKGROUND GRID
========================================================= */

.contact-hero-grid {
    position: absolute;
    z-index: -9;
    inset: 0;
    opacity: 0.23;
    pointer-events: none;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.055) 1px,
            transparent 1px
        );
    background-size: 68px 68px;
    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 8%,
            #000 92%,
            transparent
        );
    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 8%,
            #000 92%,
            transparent
        );
    animation: contactHeroGridMove 28s linear infinite;
}

/* =========================================================
   BACKGROUND GLOWS
========================================================= */

.contact-hero-glow {
    position: absolute;
    z-index: -8;
    border-radius: 50%;
    filter: blur(105px);
    pointer-events: none;
}

.contact-hero-glow-one {
    width: 480px;
    height: 480px;
    top: -270px;
    left: -235px;
    background: rgba(55, 111, 255, 0.23);
    animation: contactHeroGlowOne 15s ease-in-out infinite alternate;
}

.contact-hero-glow-two {
    width: 530px;
    height: 530px;
    right: -270px;
    bottom: -290px;
    background: rgba(145, 61, 242, 0.2);
    animation: contactHeroGlowTwo 18s ease-in-out infinite alternate;
}

/* =========================================================
   DECORATIVE ORBS
========================================================= */

.contact-hero-orb {
    position: absolute;
    z-index: -6;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    pointer-events: none;
}

.contact-hero-orb-one {
    width: 145px;
    height: 145px;
    top: 16%;
    left: 3%;
    animation: contactOrbOne 10s ease-in-out infinite;
}

.contact-hero-orb-two {
    width: 95px;
    height: 95px;
    right: 4%;
    bottom: 13%;
    border-style: dashed;
    animation: contactOrbTwo 13s ease-in-out infinite;
}

/* =========================================================
   MAIN CONTAINER
========================================================= */

.contact-hero-container {
    position: relative;
    z-index: 2;
    width: min(1220px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 82px;
}

/* =========================================================
   LEFT CONTENT
========================================================= */

.contact-hero-content {
    max-width: 610px;
}

.contact-hero-label {
    width: fit-content;
    margin-bottom: 21px;
    padding: 10px 16px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #b8caff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.055);
    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.contact-hero-label span {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            #4a8cff,
            #a151f3
        );
    box-shadow:
        0 0 0 5px rgba(91, 104, 239, 0.11),
        0 0 18px rgba(80, 126, 255, 0.7);
    animation: contactHeroLabelPulse 2s ease-in-out infinite;
}

.contact-hero-content h1 {
    margin: 0;
    color: #ffffff;
    font-family: "Manrope", sans-serif;
    font-size: clamp(47px, 5.3vw, 40px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -3.7px;
    text-shadow: 0 14px 38px rgba(0, 0, 0, 0.22);
}

.contact-hero-content h1 span {
    display: block;
    margin-top: 5px;
    color: transparent;
    background:
        linear-gradient(
            90deg,
            #64a3ff,
            #9980ff,
            #d36cff,
            #55d8ff
        );
    background-size: 260% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: contactHeroTitleGradient 6s ease-in-out infinite;
}

.contact-hero-description {
    max-width: 575px;
    margin: 25px 0 32px;
    color: rgba(225, 233, 255, 0.68);
    font-size: 16px;
    line-height: 1.8;
}

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

.contact-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.contact-hero-primary-btn {
    position: relative;
    min-height: 58px;
    padding: 0 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    overflow: hidden;
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 14px;
    background:
        linear-gradient(
            100deg,
            #3976f7,
            #6f4cee,
            #9140ec
        );
    background-size: 190% 100%;
    box-shadow:
        0 18px 38px rgba(62, 70, 210, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    animation: contactHeroButtonGradient 5s ease-in-out infinite;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.contact-hero-primary-btn::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -80%;
    width: 55%;
    height: 200%;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.25),
            transparent
        );
    transform: rotate(18deg);
    transition: left 0.65s ease;
}

.contact-hero-primary-btn:hover::before {
    left: 135%;
}

.contact-hero-primary-btn:hover {
    color: #ffffff;
    transform: translateY(-4px);
    box-shadow:
        0 25px 48px rgba(62, 70, 210, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.contact-hero-primary-btn span {
    position: relative;
    z-index: 2;
    font-size: 19px;
    transition: transform 0.3s ease;
}

.contact-hero-primary-btn:hover span {
    transform: translate(4px, -4px);
}

.contact-hero-secondary-btn {
    min-height: 58px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: rgba(242, 246, 255, 0.86);
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.035)
        );
    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.19),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    transition:
        color 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.contact-hero-secondary-btn:hover {
    color: #ffffff;
    border-color: rgba(126, 123, 255, 0.38);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.11),
            rgba(112, 73, 235, 0.11)
        );
    transform: translateY(-4px);
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.25);
}

.contact-hero-mail-icon {
    width: 35px;
    height: 35px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: #ffffff;
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            #4787fb,
            #8447ec
        );
    box-shadow:
        0 10px 22px rgba(62, 74, 208, 0.32),
        0 0 0 5px rgba(93, 98, 226, 0.07);
}

.contact-hero-mail-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =========================================================
   QUICK CONTACT LINKS
========================================================= */

.contact-hero-quick {
    margin-top: 38px;
    padding-top: 26px;
    display: flex;
    align-items: center;
    gap: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.11);
}

.contact-hero-quick-item {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
    color: inherit;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.contact-hero-quick-item:hover {
    transform: translateY(-3px);
}

.contact-hero-quick-icon {
    width: 39px;
    height: 39px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: #aebfff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.055);
}

.contact-hero-quick-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contact-hero-quick-item > span:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-hero-quick-item small {
    color: rgba(225, 233, 255, 0.43);
    font-size: 9px;
    font-weight: 600;
}

.contact-hero-quick-item strong {
    overflow-wrap: anywhere;
    color: rgba(255, 255, 255, 0.88);
    font-size: 11px;
    font-weight: 700;
}

.contact-hero-quick-divider {
    width: 1px;
    height: 39px;
    background: rgba(255, 255, 255, 0.1);
}

/* =========================================================
   RESPONSE BADGE
========================================================= */

.contact-hero-response {
    width: fit-content;
    margin-top: 24px;
    padding: 11px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.04);
}

.contact-hero-response-dot {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #43d39a;
    box-shadow:
        0 0 0 7px rgba(59, 201, 142, 0.09),
        0 0 18px rgba(59, 201, 142, 0.5);
    animation: contactResponsePulse 2s ease-in-out infinite;
}

.contact-hero-response > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.contact-hero-response strong {
    color: rgba(255, 255, 255, 0.86);
    font-size: 10px;
}

.contact-hero-response span:last-child {
    color: rgba(225, 233, 255, 0.42);
    font-size: 8px;
}

/* =========================================================
   RIGHT VISUAL AREA
========================================================= */

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

/* Rings */

.contact-visual-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.contact-visual-ring-one {
    width: 550px;
    height: 550px;
    border: 1px solid rgba(101, 138, 255, 0.17);
    animation: contactVisualRing 28s linear infinite;
}

.contact-visual-ring-two {
    width: 435px;
    height: 435px;
    border: 1px dashed rgba(173, 103, 255, 0.21);
    animation: contactVisualRingReverse 23s linear infinite;
}

.contact-visual-ring-one::before,
.contact-visual-ring-one::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            #4a8cff,
            #a34cf0
        );
    box-shadow:
        0 0 0 7px rgba(79, 97, 225, 0.08),
        0 0 25px rgba(84, 111, 255, 0.65);
}

.contact-visual-ring-one::before {
    top: 17%;
    left: 5%;
}

.contact-visual-ring-one::after {
    right: 8%;
    bottom: 14%;
}

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

.contact-visual-dashboard {
    position: relative;
    z-index: 4;
    width: min(515px, 86%);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 29px;
    background:
        linear-gradient(
            145deg,
            rgba(18, 29, 58, 0.92),
            rgba(9, 14, 33, 0.94)
        );
    box-shadow:
        0 50px 110px rgba(0, 0, 0, 0.48),
        0 0 0 1px rgba(89, 99, 228, 0.045),
        inset 0 1px 0 rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    animation: contactDashboardFloat 7s ease-in-out infinite;
}

.contact-visual-dashboard::before {
    content: "";
    position: absolute;
    z-index: 8;
    top: 0;
    left: 50%;
    width: 165px;
    height: 3px;
    border-radius: 0 0 20px 20px;
    background:
        linear-gradient(
            90deg,
            #4a8cff,
            #a056f2,
            #55d7ff
        );
    box-shadow: 0 0 19px rgba(103, 101, 242, 0.68);
    transform: translateX(-50%);
}

/* Dashboard Topbar */

.contact-visual-topbar {
    min-height: 57px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.015);
}

.contact-visual-window-dots {
    display: flex;
    gap: 7px;
}

.contact-visual-window-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.contact-visual-window-dots span:nth-child(1) {
    background: #ff6b70;
}

.contact-visual-window-dots span:nth-child(2) {
    background: #ffc04e;
}

.contact-visual-window-dots span:nth-child(3) {
    background: #45c98e;
}

.contact-visual-online {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(225, 233, 255, 0.59);
    font-size: 9px;
    font-weight: 700;
}

.contact-visual-online span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #43d39a;
    box-shadow:
        0 0 0 5px rgba(59, 201, 142, 0.1),
        0 0 15px rgba(59, 201, 142, 0.5);
    animation: contactOnlinePulse 2s ease-in-out infinite;
}

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

.contact-visual-body {
    position: relative;
    min-height: 415px;
    padding: 27px 25px 25px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(95, 89, 234, 0.15),
            transparent 48%
        ),
        linear-gradient(
            145deg,
            #0a1126,
            #0d0b20
        );
}

.contact-visual-body::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.22;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.055) 1px,
            transparent 1px
        );
    background-size: 34px 34px;
}

.contact-visual-body-glow {
    position: absolute;
    top: -120px;
    right: -100px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(113, 70, 234, 0.14);
    filter: blur(30px);
}

/* Dashboard Header */

.contact-visual-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.contact-visual-header > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contact-visual-header span {
    color: rgba(224, 232, 255, 0.47);
    font-size: 8px;
    font-weight: 600;
}

.contact-visual-header strong {
    color: #ffffff;
    font-family: "Manrope", sans-serif;
    font-size: 17px;
    font-weight: 800;
}

.contact-visual-message-icon {
    width: 47px;
    height: 47px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: #ffffff;
    border-radius: 15px;
    background:
        linear-gradient(
            135deg,
            #3e7df9,
            #704dee,
            #8f42eb
        );
    box-shadow:
        0 13px 28px rgba(61, 73, 210, 0.34),
        0 0 0 7px rgba(96, 96, 229, 0.05);
    animation: contactMessageIconFloat 4s ease-in-out infinite;
}

.contact-visual-message-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =========================================================
   FAKE FORM
========================================================= */

.contact-visual-form {
    position: relative;
    z-index: 2;
    margin-top: 25px;
}

.contact-visual-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
}

.contact-visual-field {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.contact-visual-field > span {
    color: rgba(224, 232, 255, 0.48);
    font-size: 8px;
    font-weight: 600;
}

.contact-visual-field > div {
    min-height: 42px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    color: rgba(245, 247, 255, 0.76);
    font-size: 9px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.045);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.contact-visual-select {
    justify-content: space-between;
}

.contact-visual-select i {
    color: rgba(224, 232, 255, 0.46);
    font-size: 14px;
    font-style: normal;
}

.contact-visual-field .contact-visual-message {
    min-height: 68px;
    align-items: flex-start;
    padding-top: 12px;
    color: rgba(224, 232, 255, 0.48);
    line-height: 1.55;
}

.contact-visual-submit {
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.contact-visual-submit > div {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(224, 232, 255, 0.42);
    font-size: 7px;
    font-weight: 600;
}

.contact-visual-submit > div span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #43d39a;
    box-shadow: 0 0 0 5px rgba(59, 201, 142, 0.08);
}

.contact-visual-submit button {
    min-height: 42px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #ffffff;
    border: 0;
    border-radius: 10px;
    background:
        linear-gradient(
            100deg,
            #3976f7,
            #704cee,
            #9140ec
        );
    box-shadow: 0 12px 25px rgba(62, 70, 210, 0.3);
    font: inherit;
    font-size: 8px;
    font-weight: 800;
    cursor: default;
}

.contact-visual-submit button span {
    font-size: 13px;
}

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

.contact-visual-footer {
    min-height: 76px;
    padding: 0 21px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.018);
}

.contact-visual-team {
    display: flex;
    align-items: center;
    gap: 11px;
}

.contact-visual-avatars {
    display: flex;
    align-items: center;
}

.contact-visual-avatars span {
    width: 29px;
    height: 29px;
    margin-left: -7px;
    display: grid;
    place-items: center;
    color: #ffffff;
    border: 2px solid #111a35;
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            #3f7cf8,
            #8243ec
        );
    font-size: 7px;
    font-weight: 800;
}

.contact-visual-avatars span:first-child {
    margin-left: 0;
}

.contact-visual-avatars span:nth-child(2) {
    background:
        linear-gradient(
            135deg,
            #25a688,
            #4fc79c
        );
}

.contact-visual-avatars span:nth-child(3) {
    background:
        linear-gradient(
            135deg,
            #e8733e,
            #ef9f3f
        );
}

.contact-visual-team > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-visual-team small {
    color: rgba(224, 232, 255, 0.42);
    font-size: 7px;
}

.contact-visual-team strong {
    color: rgba(255, 255, 255, 0.84);
    font-size: 9px;
}

.contact-visual-progress {
    width: 105px;
    height: 6px;
    overflow: hidden;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
}

.contact-visual-progress span {
    display: block;
    width: 72%;
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            #4a88fc,
            #9145ed,
            #56d1ff
        );
    box-shadow: 0 0 12px rgba(91, 104, 239, 0.4);
    animation: contactProgressMove 4s ease-in-out infinite;
}

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

.contact-floating-card {
    position: absolute;
    z-index: 7;
    padding: 13px 15px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 15px;
    background:
        linear-gradient(
            145deg,
            rgba(19, 29, 58, 0.92),
            rgba(10, 15, 34, 0.9)
        );
    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.contact-floating-card > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-floating-card strong {
    color: #ffffff;
    font-size: 10px;
}

.contact-floating-card span {
    color: rgba(224, 232, 255, 0.49);
    font-size: 8px;
    font-weight: 600;
}

.contact-floating-response {
    top: 9%;
    left: -1%;
    animation: contactFloatingResponse 5.5s ease-in-out infinite;
}

.contact-floating-consultation {
    top: 21%;
    right: -5%;
    animation: contactFloatingConsultation 6s ease-in-out infinite;
}

.contact-floating-secure {
    right: 2%;
    bottom: 8%;
    animation: contactFloatingSecure 5.8s ease-in-out infinite;
}

.contact-floating-status {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #43d39a;
    box-shadow:
        0 0 0 7px rgba(59, 201, 142, 0.1),
        0 0 20px rgba(59, 201, 142, 0.5);
    animation: contactFloatingStatusPulse 2s ease-in-out infinite;
}

.contact-floating-calendar,
.contact-floating-shield {
    width: 37px;
    height: 37px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: #ffffff;
    border-radius: 11px;
    background:
        linear-gradient(
            135deg,
            #417ffa,
            #8447ec
        );
    box-shadow:
        0 10px 22px rgba(62, 74, 208, 0.31),
        0 0 0 5px rgba(96, 96, 229, 0.055);
}

.contact-floating-calendar svg,
.contact-floating-shield svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =========================================================
   SCROLL INDICATOR
========================================================= */

.contact-hero-scroll {
    position: absolute;
    z-index: 5;
    bottom: 24px;
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: rgba(224, 232, 255, 0.5);
    text-decoration: none;
    font-size: 10px;
    font-weight: 700;
    transform: translateX(-50%);
}

.contact-hero-scroll:hover {
    color: #ffffff;
}

.contact-hero-scroll i {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            #407df9,
            #8347ec
        );
    box-shadow:
        0 11px 25px rgba(62, 74, 208, 0.35),
        0 0 0 6px rgba(96, 96, 229, 0.055);
    animation: contactScrollBounce 2.3s ease-in-out infinite;
}

.contact-hero-scroll svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes contactHeroGridMove {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 136px 68px;
    }
}

@keyframes contactHeroGlowOne {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(130px, 90px) scale(1.2);
    }
}

@keyframes contactHeroGlowTwo {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(-120px, -85px) scale(1.2);
    }
}

@keyframes contactOrbOne {
    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-18px) rotate(35deg);
    }
}

@keyframes contactOrbTwo {
    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(17px) rotate(-40deg);
    }
}

@keyframes contactHeroLabelPulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow:
            0 0 0 5px rgba(91, 104, 239, 0.11),
            0 0 18px rgba(80, 126, 255, 0.7);
    }

    50% {
        transform: scale(1.16);
        box-shadow:
            0 0 0 10px rgba(91, 104, 239, 0.02),
            0 0 26px rgba(80, 126, 255, 0.85);
    }
}

@keyframes contactHeroTitleGradient {
    0%,
    100% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }
}

@keyframes contactHeroButtonGradient {
    0%,
    100% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }
}

@keyframes contactResponsePulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }
}

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

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

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

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

@keyframes contactOnlinePulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }
}

@keyframes contactMessageIconFloat {
    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-5px) rotate(-4deg);
    }
}

@keyframes contactProgressMove {
    0%,
    100% {
        width: 56%;
    }

    50% {
        width: 88%;
    }
}

@keyframes contactFloatingResponse {
    0%,
    100% {
        transform: translateY(0) rotate(-2deg);
    }

    50% {
        transform: translateY(-12px) rotate(1deg);
    }
}

@keyframes contactFloatingConsultation {
    0%,
    100% {
        transform: translateY(0) rotate(2deg);
    }

    50% {
        transform: translateY(11px) rotate(-1deg);
    }
}

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

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

@keyframes contactFloatingStatusPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }
}

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

    50% {
        transform: translateY(7px);
    }
}

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

@media (max-width: 1050px) {
    .contact-hero-section {
        min-height: auto;
        padding: 115px 22px 100px;
    }

    .contact-hero-container {
        grid-template-columns: 1fr;
        max-width: 830px;
        gap: 65px;
    }

    .contact-hero-content {
        max-width: 750px;
        margin: 0 auto;
        text-align: center;
    }

    .contact-hero-label,
    .contact-hero-response {
        margin-right: auto;
        margin-left: auto;
    }

    .contact-hero-description {
        margin-right: auto;
        margin-left: auto;
    }

    .contact-hero-actions,
    .contact-hero-quick {
        justify-content: center;
    }

    .contact-hero-visual {
        min-height: 610px;
    }
}

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

@media (max-width: 700px) {
    .contact-hero-section {
        padding: 105px 16px 82px;
    }

    .contact-hero-container {
        gap: 45px;
    }

    .contact-hero-content h1 {
        font-size: 46px;
        line-height: 1.08;
        letter-spacing: -2.2px;
    }

    .contact-hero-description {
        font-size: 14px;
    }

    .contact-hero-quick {
        align-items: flex-start;
        gap: 15px;
    }

    .contact-hero-quick-divider {
        height: 50px;
    }

    .contact-hero-visual {
        min-height: 520px;
        margin-bottom: -55px;
        transform: scale(0.86);
        transform-origin: top center;
    }

    .contact-visual-ring-one {
        width: 480px;
        height: 480px;
    }

    .contact-visual-ring-two {
        width: 380px;
        height: 380px;
    }

    .contact-hero-scroll {
        display: none;
    }
}

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

@media (max-width: 480px) {
    .contact-hero-section {
        padding: 95px 14px 62px;
    }

    .contact-hero-label {
        font-size: 10px;
    }

    .contact-hero-content h1 {
        font-size: 37px;
        letter-spacing: -1.7px;
    }

    .contact-hero-description {
        margin-top: 20px;
        font-size: 13px;
    }

    .contact-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .contact-hero-primary-btn,
    .contact-hero-secondary-btn {
        width: 100%;
    }

    .contact-hero-quick {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .contact-hero-quick-divider {
        width: 100%;
        height: 1px;
    }

    .contact-hero-quick-item {
        width: 100%;
    }

    .contact-hero-response {
        width: 100%;
        text-align: left;
    }

    .contact-hero-visual {
        min-height: 435px;
        margin: -10px 0 -105px;
        transform: scale(0.66);
    }

    .contact-floating-response {
        left: -7%;
    }

    .contact-floating-consultation {
        right: -9%;
    }

    .contact-floating-secure {
        right: -2%;
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .contact-hero-grid,
    .contact-hero-glow,
    .contact-hero-orb,
    .contact-hero-label span,
    .contact-hero-content h1 span,
    .contact-hero-primary-btn,
    .contact-hero-response-dot,
    .contact-visual-ring,
    .contact-visual-dashboard,
    .contact-visual-online span,
    .contact-visual-message-icon,
    .contact-visual-progress span,
    .contact-floating-card,
    .contact-floating-status,
    .contact-hero-scroll i {
        animation: none !important;
    }
}

/* =========================================================
   CONTACT FORM SECTION
========================================================= */

.contact-form-section,
.contact-form-section * {
    box-sizing: border-box;
}

.contact-form-section {
    position: relative;
    width: 100%;
    padding: 120px 24px;
    overflow: hidden;
    isolation: isolate;
    font-family: "Inter", Arial, sans-serif;
    background:
        radial-gradient(
            circle at 8% 22%,
            rgba(55, 108, 247, 0.1),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 76%,
            rgba(137, 61, 239, 0.09),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7f9ff 50%,
            #ffffff 100%
        );
}

/* =========================================================
   BACKGROUND
========================================================= */

.contact-form-grid {
    position: absolute;
    z-index: -8;
    inset: 0;
    opacity: 0.28;
    pointer-events: none;
    background-image:
        linear-gradient(
            rgba(45, 82, 173, 0.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(45, 82, 173, 0.04) 1px,
            transparent 1px
        );
    background-size: 70px 70px;
    mask-image: linear-gradient(
        to bottom,
        transparent,
        #000 10%,
        #000 90%,
        transparent
    );
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent,
        #000 10%,
        #000 90%,
        transparent
    );
    animation: contactFormGridMove 30s linear infinite;
}

.contact-form-glow {
    position: absolute;
    z-index: -7;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
}

.contact-form-glow-one {
    width: 440px;
    height: 440px;
    top: -250px;
    left: -220px;
    background: rgba(55, 108, 247, 0.13);
    animation: contactFormGlowOne 15s ease-in-out infinite alternate;
}

.contact-form-glow-two {
    width: 480px;
    height: 480px;
    right: -250px;
    bottom: -270px;
    background: rgba(134, 58, 241, 0.12);
    animation: contactFormGlowTwo 18s ease-in-out infinite alternate;
}

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

.contact-form-container {
    position: relative;
    z-index: 2;
    width: min(1200px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.78fr 1.22fr;
    align-items: start;
    gap: 75px;
}

/* =========================================================
   LEFT INFORMATION
========================================================= */

.contact-form-info {
    position: sticky;
    top: 110px;
}

.contact-form-tag {
    width: fit-content;
    margin-bottom: 18px;
    padding: 9px 15px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #315bd9;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid #dce5fa;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 30px rgba(37, 68, 145, 0.07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.contact-form-tag span {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        #3772f6,
        #8a3fed
    );
    box-shadow: 0 0 0 5px rgba(68, 101, 239, 0.1);
    animation: contactFormTagPulse 2s ease-in-out infinite;
}

.contact-form-info h2 {
    margin: 0;
    color: #0c1e48;
    font-family: "Manrope", sans-serif;
    font-size: clamp(40px, 4.3vw, 39px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -3px;
}

.contact-form-info h2 span {
    display: block;
    color: transparent;
    background: linear-gradient(
        90deg,
        #376df3,
        #704bed,
        #9137e9,
        #36aadd
    );
    background-size: 260% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: contactFormTitleGradient 6s ease-in-out infinite;
}

.contact-form-description {
    margin: 23px 0 32px;
    color: #727e94;
    font-size: 14px;
    line-height: 1.85;
}

/* =========================================================
   CONTACT INFO LIST
========================================================= */

.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.contact-info-item {
    position: relative;
    min-height: 86px;
    padding: 15px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    color: inherit;
    text-decoration: none;
    border: 1px solid rgba(214, 222, 239, 0.95);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow:
        0 14px 35px rgba(34, 52, 108, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

a.contact-info-item:hover {
    border-color: rgba(83, 101, 224, 0.25);
    transform: translateX(7px);
    box-shadow:
        0 22px 46px rgba(34, 52, 108, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.contact-info-icon {
    width: 47px;
    height: 47px;
    display: grid;
    place-items: center;
    color: #ffffff;
    border-radius: 14px;
    background: linear-gradient(
        135deg,
        #3e77f8,
        #8141ec
    );
    box-shadow:
        0 11px 24px rgba(62, 74, 208, 0.23),
        0 0 0 6px rgba(96, 96, 229, 0.05);
}

.contact-info-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contact-info-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-info-content small {
    color: #8a95a8;
    font-size: 9px;
    font-weight: 600;
}

.contact-info-content strong {
    overflow-wrap: anywhere;
    color: #172b51;
    font-size: 12px;
    font-weight: 800;
}

.contact-info-content > span {
    color: #909aad;
    font-size: 8px;
}

.contact-info-item > i {
    color: #6a7da8;
    font-size: 17px;
    font-style: normal;
    transition: transform 0.3s ease;
}

a.contact-info-item:hover > i {
    transform: translate(4px, -4px);
}

/* =========================================================
   RESPONSE BOX
========================================================= */

.contact-response-box {
    margin-top: 18px;
    padding: 19px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    border: 1px solid rgba(203, 219, 235, 0.95);
    border-radius: 18px;
    background: linear-gradient(
        120deg,
        rgba(237, 253, 247, 0.94),
        rgba(242, 248, 255, 0.94)
    );
    box-shadow: 0 16px 38px rgba(33, 70, 92, 0.07);
}

.contact-response-status {
    width: 43px;
    height: 43px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(63, 202, 145, 0.1);
}

.contact-response-status span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #42cc93;
    box-shadow:
        0 0 0 7px rgba(66, 204, 147, 0.1),
        0 0 18px rgba(66, 204, 147, 0.4);
    animation: contactResponseBoxPulse 2s ease-in-out infinite;
}

.contact-response-box > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-response-box small {
    color: #5d9a7e;
    font-size: 8px;
    font-weight: 700;
}

.contact-response-box strong {
    color: #193c32;
    font-size: 11px;
}

.contact-response-box p {
    margin: 3px 0 0;
    color: #769187;
    font-size: 9px;
    line-height: 1.6;
}

/* =========================================================
   FORM CARD
========================================================= */

.contact-form-card {
    position: relative;
    padding: 37px;
    overflow: hidden;
    border: 1px solid rgba(211, 220, 238, 0.96);
    border-radius: 29px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow:
        0 38px 90px rgba(31, 51, 110, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.contact-form-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 190px;
    height: 4px;
    border-radius: 0 0 20px 20px;
    background: linear-gradient(
        90deg,
        #3f7df8,
        #8742ec,
        #4cc9ee
    );
    box-shadow: 0 0 18px rgba(91, 94, 229, 0.45);
    transform: translateX(-50%);
}

.contact-form-card-head {
    position: relative;
    z-index: 2;
    padding-bottom: 26px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 25px;
    border-bottom: 1px solid #e1e7f0;
}

.contact-form-card-head > div:first-child {
    display: flex;
    flex-direction: column;
}

.contact-form-card-head > div:first-child > span {
    color: #416ddb;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.contact-form-card-head h3 {
    margin: 8px 0 7px;
    color: #142850;
    font-family: "Manrope", sans-serif;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -0.8px;
}

.contact-form-card-head p {
    margin: 0;
    color: #7e899d;
    font-size: 11px;
}

.contact-form-head-icon {
    width: 53px;
    height: 53px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: #ffffff;
    border-radius: 16px;
    background: linear-gradient(
        135deg,
        #3e7df9,
        #704dee,
        #8f42eb
    );
    box-shadow:
        0 14px 30px rgba(61, 73, 210, 0.27),
        0 0 0 7px rgba(96, 96, 229, 0.05);
    animation: contactFormHeadFloat 4s ease-in-out infinite;
}

.contact-form-head-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =========================================================
   FORM
========================================================= */

.contact-project-form {
    position: relative;
    z-index: 2;
    margin-top: 28px;
}

.contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.contact-form-group {
    margin-bottom: 18px;
}

.contact-form-group label {
    margin-bottom: 9px;
    display: block;
    color: #34496d;
    font-size: 10px;
    font-weight: 800;
}

.contact-form-group label > span {
    color: #8346eb;
}

.contact-input-wrap,
.contact-select-wrap,
.contact-textarea-wrap {
    position: relative;
}

.contact-input-wrap > span,
.contact-select-wrap > span,
.contact-textarea-wrap > span {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 15px;
    display: grid;
    place-items: center;
    color: #7586a7;
    transform: translateY(-50%);
    pointer-events: none;
}

.contact-textarea-wrap > span {
    top: 17px;
    transform: none;
}

.contact-input-wrap svg,
.contact-select-wrap svg,
.contact-textarea-wrap svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contact-input-wrap input,
.contact-select-wrap select,
.contact-textarea-wrap textarea {
    width: 100%;
    color: #1c3158;
    border: 1px solid #dce3ee;
    outline: none;
    background: #f9faff;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    transition:
        border-color 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.contact-input-wrap input {
    height: 54px;
    padding: 0 15px 0 47px;
    border-radius: 13px;
}

.contact-select-wrap select {
    height: 54px;
    padding: 0 43px 0 47px;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 13px;
    cursor: pointer;
}

.contact-textarea-wrap textarea {
    min-height: 145px;
    padding: 16px 16px 16px 47px;
    resize: vertical;
    border-radius: 15px;
    line-height: 1.65;
}

.contact-input-wrap input::placeholder,
.contact-textarea-wrap textarea::placeholder {
    color: #9ba5b7;
    font-weight: 500;
}

.contact-input-wrap input:focus,
.contact-select-wrap select:focus,
.contact-textarea-wrap textarea:focus {
    border-color: rgba(78, 102, 225, 0.5);
    background: #ffffff;
    box-shadow:
        0 0 0 4px rgba(77, 98, 224, 0.07),
        0 12px 27px rgba(40, 61, 124, 0.07);
}

.contact-select-wrap > i {
    position: absolute;
    top: 50%;
    right: 15px;
    color: #7786a0;
    font-size: 16px;
    font-style: normal;
    transform: translateY(-55%);
    pointer-events: none;
}

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

.contact-form-footer {
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}

.contact-consent {
    margin: 0 !important;
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    color: #7f8a9e !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    line-height: 1.5;
    cursor: pointer;
}

.contact-consent input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.contact-checkbox {
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border: 1px solid #ccd5e4;
    border-radius: 5px;
    background: #ffffff;
    transition:
        border-color 0.3s ease,
        background 0.3s ease;
}

.contact-consent input:checked + .contact-checkbox {
    border-color: transparent;
    background: linear-gradient(
        135deg,
        #3e77f8,
        #8141ec
    );
}

.contact-consent input:checked + .contact-checkbox::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 6px;
    width: 4px;
    height: 8px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.contact-submit-button {
    position: relative;
    min-width: 205px;
    min-height: 56px;
    padding: 0 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    overflow: hidden;
    color: #ffffff;
    border: 0;
    border-radius: 13px;
    background: linear-gradient(
        100deg,
        #3a73f6,
        #694bed,
        #883aea
    );
    background-size: 190% 100%;
    box-shadow: 0 16px 34px rgba(62, 70, 210, 0.28);
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    animation: contactSubmitGradient 5s ease-in-out infinite;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.contact-submit-button::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -80%;
    width: 50%;
    height: 200%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.25),
        transparent
    );
    transform: rotate(18deg);
    transition: left 0.65s ease;
}

.contact-submit-button:hover::before {
    left: 135%;
}

.contact-submit-button:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 44px rgba(62, 70, 210, 0.38);
}

.contact-submit-text,
.contact-submit-arrow {
    position: relative;
    z-index: 2;
}

.contact-submit-arrow {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.contact-submit-button:hover .contact-submit-arrow {
    transform: translate(4px, -4px);
}

/* Security Message */

.contact-form-security {
    margin-top: 19px;
    padding-top: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #8994a6;
    font-size: 8px;
    font-weight: 600;
    border-top: 1px solid #e3e8f1;
}

.contact-form-security > span {
    color: #47a481;
}

.contact-form-security svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contact-form-card-glow {
    position: absolute;
    right: -170px;
    bottom: -190px;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: rgba(111, 72, 232, 0.07);
    filter: blur(20px);
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes contactFormGridMove {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 140px 70px;
    }
}

@keyframes contactFormGlowOne {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(130px, 90px) scale(1.2);
    }
}

@keyframes contactFormGlowTwo {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(-120px, -90px) scale(1.2);
    }
}

@keyframes contactFormTagPulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 5px rgba(68, 101, 239, 0.1);
    }

    50% {
        transform: scale(1.16);
        box-shadow: 0 0 0 10px rgba(68, 101, 239, 0.02);
    }
}

@keyframes contactFormTitleGradient {
    0%,
    100% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }
}

@keyframes contactResponseBoxPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }
}

@keyframes contactFormHeadFloat {
    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-5px) rotate(-4deg);
    }
}

@keyframes contactSubmitGradient {
    0%,
    100% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }
}

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

@media (max-width: 1000px) {
    .contact-form-section {
        padding: 100px 22px;
    }

    .contact-form-container {
        grid-template-columns: 1fr;
        max-width: 820px;
        gap: 65px;
    }

    .contact-form-info {
        position: static;
        max-width: 720px;
        margin: 0 auto;
        text-align: center;
    }

    .contact-form-tag {
        margin-right: auto;
        margin-left: auto;
    }

    .contact-info-list,
    .contact-response-box {
        text-align: left;
    }
}

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

@media (max-width: 650px) {
    .contact-form-section {
        padding: 80px 16px;
    }

    .contact-form-info h2 {
        font-size: 39px;
        letter-spacing: -1.8px;
    }

    .contact-form-description {
        font-size: 13px;
    }

    .contact-form-card {
        padding: 27px 22px;
        border-radius: 23px;
    }

    .contact-form-card-head h3 {
        font-size: 23px;
    }

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

    .contact-form-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .contact-submit-button {
        width: 100%;
    }
}

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

@media (max-width: 430px) {
    .contact-form-section {
        padding: 70px 14px;
    }

    .contact-form-info h2 {
        font-size: 34px;
        letter-spacing: -1.5px;
    }

    .contact-info-item {
        grid-template-columns: auto 1fr;
    }

    .contact-info-item > i {
        display: none;
    }

    .contact-form-card {
        padding: 24px 17px;
    }

    .contact-form-card-head {
        align-items: center;
    }

    .contact-form-card-head h3 {
        font-size: 20px;
    }

    .contact-form-head-icon {
        width: 46px;
        height: 46px;
    }

    .contact-input-wrap input,
    .contact-select-wrap select {
        height: 52px;
    }

    .contact-consent {
        font-size: 8px !important;
    }

    .contact-form-security {
        text-align: center;
        line-height: 1.5;
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .contact-form-grid,
    .contact-form-glow,
    .contact-form-tag span,
    .contact-form-info h2 span,
    .contact-response-status span,
    .contact-form-head-icon,
    .contact-submit-button {
        animation: none !important;
    }
}

/*----------------------------service page---------------------------------------*/
:root {
    --dark-blue: #071a38;
    --navy-blue: #0b2550;
    --primary-blue: #2563eb;
    --light-blue: #3b82f6;
    --cyan: #22d3ee;
    --violet: #7c3aed;
    --heading: #10213d;
    --text: #53647f;
    --muted: #7f8da4;
    --border: #e8edf5;
    --white: #ffffff;
    --soft-blue: #f3f7ff;
    --soft-cyan: #eefcff;
    --soft-violet: #f6f1ff;
}

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

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Inter", Arial, sans-serif;
    color: var(--white);
    background: #020a18;
}

a {
    color: inherit;
}

button,
input,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

svg {
    display: block;
}

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

.macro-container {
    position: relative;
    z-index: 3;
    width: min(1240px, calc(100% - 40px));
    margin-inline: auto;
}

/* ======================================
   EXISTING REVEAL JS SUPPORT
====================================== */

[data-site-reveal] {
    opacity: 0;
    transform: translateY(34px);

    transition:
        opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-site-reveal].is-site-visible {
    opacity: 1;
    transform: translateY(0);
}

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

.macro-service-hero {
    position: relative;
    min-height: 850px;
    padding: 135px 0 85px;
    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(
            circle at 10% 18%,
            rgba(34, 211, 238, 0.12),
            transparent 31%
        ),
        radial-gradient(
            circle at 87% 15%,
            rgba(124, 58, 237, 0.17),
            transparent 34%
        ),
        radial-gradient(
            circle at 65% 92%,
            rgba(37, 99, 235, 0.1),
            transparent 32%
        ),
        linear-gradient(
            125deg,
            #020a18 0%,
            #04152f 38%,
            #101545 68%,
            #180d39 100%
        );
}

/* No background rectangle */

.macro-service-hero::before {
    content: "";
    position: absolute;
    top: -260px;
    left: 50%;
    z-index: -2;

    width: 900px;
    height: 540px;

    transform: translateX(-50%);
    border-radius: 50%;
    pointer-events: none;

    background: rgba(37, 99, 235, 0.1);
    filter: blur(120px);

    animation: macroMainGlow 8s ease-in-out infinite;
}

.macro-service-hero::after {
    content: "";
    position: absolute;
    right: -220px;
    bottom: -260px;
    z-index: -2;

    width: 560px;
    height: 560px;

    border-radius: 50%;
    pointer-events: none;

    background: rgba(124, 58, 237, 0.12);
    filter: blur(120px);

    animation: macroSideGlow 9s ease-in-out infinite;
}

/* ======================================
   BACKGROUND ORBS
====================================== */

.macro-service-hero__orb {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(26px);

    animation: macroOrbFloat 8s ease-in-out infinite;
}

.macro-service-hero__orb--one {
    top: 110px;
    left: -155px;
    width: 350px;
    height: 350px;

    background: rgba(34, 211, 238, 0.1);
}

.macro-service-hero__orb--two {
    right: -170px;
    bottom: 20px;
    width: 410px;
    height: 410px;

    background: rgba(124, 58, 237, 0.1);
    animation-delay: -3s;
}

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

.macro-service-hero__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(470px, 0.88fr);
    align-items: center;
    gap: clamp(50px, 7vw, 95px);
}

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

.macro-service-hero__content {
    position: relative;
    z-index: 3;
    max-width: 690px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

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

.macro-service-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 22px;
    padding: 0;

    color: #8be9ff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;

    border: 0;
    background: transparent;
    box-shadow: none;
}

.macro-service-hero__badge-icon {
    display: grid;
    place-items: center;

    width: 28px;
    height: 28px;

    color: var(--cyan);
}

.macro-service-hero__badge-icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;

    animation: macroBadgeFloat 3s ease-in-out infinite;
}

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

.macro-service-hero__title {
    margin: 0;
    max-width: 690px;

    color: var(--white);
    font-size: clamp(48px, 5.3vw, 37px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.055em;
}

.macro-service-hero__title span {
    display: inline;

    color: transparent;

    background: linear-gradient(
        100deg,
        var(--light-blue),
        var(--cyan),
        #a78bfa,
        var(--light-blue)
    );

    background-size: 220% auto;
    background-clip: text;
    -webkit-background-clip: text;

    animation: macroTextGradient 5s linear infinite;
}

/* ======================================
   DESCRIPTION
====================================== */

.macro-service-hero__description {
    max-width: 630px;
    margin: 27px 0 0;

    color: rgba(255, 255, 255, 0.66);
    font-size: 17px;
    line-height: 1.75;
}

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

.macro-service-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;

    margin-top: 35px;
}

.macro-btn {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 54px;
    padding: 0 24px;

    overflow: hidden;

    color: var(--white);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;

    border: 1px solid transparent;
    border-radius: 12px;

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

.macro-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;

    width: 90%;
    height: 100%;

    transform: skewX(-20deg);

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );

    transition: left 0.65s ease;
}

.macro-btn:hover::before {
    left: 140%;
}

.macro-btn:hover {
    transform: translateY(-4px);
}

.macro-btn svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform 0.3s ease;
}

.macro-btn:hover svg {
    transform: translateX(4px);
}

.macro-btn--primary {
    background: linear-gradient(
        135deg,
        var(--primary-blue),
        var(--light-blue)
    );

    box-shadow:
        0 15px 35px rgba(37, 99, 235, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.macro-btn--primary:hover {
    box-shadow:
        0 22px 46px rgba(37, 99, 235, 0.44),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.macro-btn--secondary {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.055);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 12px 30px rgba(0, 0, 0, 0.13);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.macro-btn--secondary:hover {
    color: var(--cyan);
    border-color: rgba(34, 211, 238, 0.38);
    background: rgba(255, 255, 255, 0.09);
}

/* ======================================
   SMALL HERO POINTS
====================================== */

.macro-service-hero__points {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 24px;

    margin-top: 35px;
}

.macro-service-hero__points span {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    font-weight: 600;
}

.macro-service-hero__points i {
    display: block;
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--cyan);

    box-shadow:
        0 0 0 4px rgba(34, 211, 238, 0.09),
        0 0 14px rgba(34, 211, 238, 0.38);
}

/* ======================================
   FORM SHELL
====================================== */

.tech-form-shell {
    position: relative;
    z-index: 4;

    width: 100%;
    max-width: 535px;
    margin-left: auto;

    border-radius: 26px;

    transform-style: preserve-3d;

    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.45s ease;
}

.tech-form-shell:hover {
    transform: translateY(-7px);
}

/* Animated border */

.tech-form-border {
    position: absolute;
    inset: -1px;
    z-index: -2;

    overflow: hidden;

    border-radius: 27px;

    background: linear-gradient(
        135deg,
        rgba(34, 211, 238, 0.5),
        rgba(37, 99, 235, 0.18),
        rgba(124, 58, 237, 0.55),
        rgba(34, 211, 238, 0.5)
    );

    background-size: 260% 260%;

    animation: techBorderMove 7s linear infinite;
}

.tech-form-border::before {
    content: "";
    position: absolute;
    inset: 1px;

    border-radius: 25px;

    background: #08132d;
}

/* ======================================
   FORM CARD
====================================== */

.tech-form-card {
    position: relative;
    z-index: 1;

    padding: 29px;

    overflow: hidden;

    border-radius: 25px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(124, 58, 237, 0.13),
            transparent 31%
        ),
        radial-gradient(
            circle at 0% 100%,
            rgba(34, 211, 238, 0.07),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            rgba(12, 27, 61, 0.97),
            rgba(7, 18, 43, 0.97)
        );

    box-shadow:
        0 38px 85px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.tech-form-card::before {
    content: "";
    position: absolute;
    top: -100px;
    right: -90px;
    z-index: -1;

    width: 230px;
    height: 230px;

    border-radius: 50%;

    background: rgba(37, 99, 235, 0.12);
    filter: blur(35px);
}

.tech-form-card::after {
    content: "";
    position: absolute;
    bottom: -120px;
    left: -100px;
    z-index: -1;

    width: 240px;
    height: 240px;

    border-radius: 50%;

    background: rgba(124, 58, 237, 0.1);
    filter: blur(45px);
}

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

.tech-form-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 25px;
}

.tech-form-label {
    display: block;
    margin-bottom: 8px;

    color: var(--cyan);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.tech-form-header h2 {
    margin: 0;

    color: var(--white);
    font-size: clamp(25px, 2.4vw, 34px);
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -0.035em;
}

.tech-form-header p {
    max-width: 360px;
    margin: 10px 0 0;

    color: rgba(255, 255, 255, 0.48);
    font-size: 12px;
    line-height: 1.65;
}

.tech-form-icon {
    display: grid;
    flex: 0 0 48px;
    place-items: center;

    width: 48px;
    height: 48px;

    border: 1px solid rgba(34, 211, 238, 0.18);
    border-radius: 15px;

    background: rgba(34, 211, 238, 0.075);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 12px 28px rgba(0, 0, 0, 0.13);

    animation: techIconFloat 4s ease-in-out infinite;
}

.tech-form-icon svg {
    width: 23px;
    height: 23px;

    fill: none;
    stroke: var(--cyan);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ======================================
   FORM
====================================== */

.tech-form {
    display: grid;
    gap: 17px;
}

.tech-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.tech-field {
    display: grid;
    gap: 8px;
}

.tech-field label {
    color: rgba(255, 255, 255, 0.68);
    font-size: 11px;
    font-weight: 650;
}

/* ======================================
   INPUT WRAPPER
====================================== */

.tech-input-wrapper {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 51px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;

    background: rgba(255, 255, 255, 0.045);

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

.tech-input-wrapper:focus-within {
    border-color: rgba(34, 211, 238, 0.45);

    background: rgba(255, 255, 255, 0.07);

    box-shadow:
        0 0 0 4px rgba(34, 211, 238, 0.07),
        0 12px 25px rgba(0, 0, 0, 0.13);

    transform: translateY(-1px);
}

.tech-input-wrapper > svg {
    position: absolute;
    left: 15px;
    z-index: 2;

    width: 17px;
    height: 17px;

    fill: none;
    stroke: rgba(139, 233, 255, 0.66);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;

    pointer-events: none;

    transition:
        stroke 0.3s ease,
        transform 0.3s ease;
}

.tech-input-wrapper:focus-within > svg {
    stroke: var(--cyan);
    transform: scale(1.08);
}

/* ======================================
   INPUTS AND SELECT
====================================== */

.tech-input-wrapper input,
.tech-input-wrapper select {
    width: 100%;
    min-width: 0;
    height: 51px;
    padding: 0 39px 0 43px;

    color: var(--white);
    font-size: 12px;

    outline: none;
    border: 0;

    background: transparent;
}

.tech-input-wrapper input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.tech-input-wrapper select {
    cursor: pointer;

    color: rgba(255, 255, 255, 0.52);

    appearance: none;
    -webkit-appearance: none;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            rgba(255, 255, 255, 0.55) 50%
        ),
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.55) 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 17px) 22px,
        calc(100% - 12px) 22px;

    background-size: 5px 5px;
    background-repeat: no-repeat;
}

.tech-input-wrapper select:valid {
    color: var(--white);
}

.tech-input-wrapper select option {
    color: #17213a;
    background: var(--white);
}

/* Autofill */

.tech-input-wrapper input:-webkit-autofill,
.tech-input-wrapper input:-webkit-autofill:hover,
.tech-input-wrapper input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--white);
    transition: background-color 9999s ease-in-out 0s;
}

/* ======================================
   FORM BUTTON
====================================== */

.tech-form-button {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    width: 100%;
    min-height: 54px;
    margin-top: 2px;
    padding: 0 22px;

    overflow: hidden;

    color: var(--white);
    font-size: 13px;
    font-weight: 750;

    border: 0;
    border-radius: 12px;

    background: linear-gradient(
        135deg,
        var(--primary-blue),
        #4f46e5
    );

    box-shadow:
        0 16px 35px rgba(37, 99, 235, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.tech-form-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;

    width: 90%;
    height: 100%;

    transform: skewX(-20deg);

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );

    transition: left 0.7s ease;
}

.tech-form-button:hover::before {
    left: 140%;
}

.tech-form-button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 22px 45px rgba(37, 99, 235, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.tech-form-button svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform 0.3s ease;
}

.tech-form-button:hover svg {
    transform: translateX(5px);
}

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

.tech-form-security {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    color: rgba(255, 255, 255, 0.39);
    font-size: 10px;
    line-height: 1.5;
    text-align: center;
}

.tech-form-security svg {
    width: 14px;
    height: 14px;

    fill: none;
    stroke: rgba(34, 211, 238, 0.62);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ======================================
   ANIMATIONS
====================================== */

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

    100% {
        background-position: 220% center;
    }
}

@keyframes macroOrbFloat {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(25px, -20px, 0) scale(1.08);
    }
}

@keyframes macroMainGlow {
    0%,
    100% {
        opacity: 0.65;
        transform: translateX(-50%) scale(0.95);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.07);
    }
}

@keyframes macroSideGlow {
    0%,
    100% {
        opacity: 0.58;
        transform: translate3d(0, 0, 0) scale(0.95);
    }

    50% {
        opacity: 1;
        transform: translate3d(-25px, -16px, 0) scale(1.07);
    }
}

@keyframes macroBadgeFloat {
    0%,
    100% {
        transform: rotate(0deg) scale(1);
        filter: drop-shadow(
            0 0 4px rgba(34, 211, 238, 0.25)
        );
    }

    50% {
        transform: rotate(12deg) scale(1.1);
        filter: drop-shadow(
            0 0 12px rgba(34, 211, 238, 0.55)
        );
    }
}

@keyframes techBorderMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes techIconFloat {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-6px) rotate(3deg);
    }
}

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

@media (max-width: 1100px) {
    .macro-service-hero {
        padding-top: 125px;
    }

    .macro-service-hero__layout {
        grid-template-columns: minmax(0, 1fr) minmax(430px, 0.88fr);
        gap: 45px;
    }

    .macro-service-hero__title {
        font-size: clamp(45px, 5.7vw, 65px);
    }

    .tech-form-card {
        padding: 25px;
    }
}

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

@media (max-width: 900px) {
    .macro-service-hero {
        min-height: auto;
        padding: 120px 0 75px;
    }

    .macro-service-hero__layout {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .macro-service-hero__content {
        max-width: 760px;
        margin-inline: auto;
        text-align: center;
    }

    .macro-service-hero__title,
    .macro-service-hero__description {
        margin-inline: auto;
    }

    .macro-service-hero__badge,
    .macro-service-hero__actions,
    .macro-service-hero__points {
        justify-content: center;
    }

    .tech-form-shell {
        max-width: 610px;
        margin-inline: auto;
    }
}

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

@media (max-width: 650px) {
    .macro-container {
        width: min(100% - 28px, 1240px);
    }

    .macro-service-hero {
        padding: 100px 0 60px;
    }

    .macro-service-hero__title {
        font-size: clamp(39px, 11vw, 53px);
        letter-spacing: -0.045em;
    }

    .macro-service-hero__description {
        font-size: 16px;
        line-height: 1.7;
    }

    .macro-service-hero__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .macro-btn {
        width: 100%;
    }

    .macro-service-hero__points {
        gap: 13px 18px;
    }

    .tech-form-card {
        padding: 22px 18px;
        border-radius: 21px;
    }

    .tech-form-shell,
    .tech-form-border {
        border-radius: 22px;
    }

    .tech-form-border::before {
        border-radius: 20px;
    }

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

    .tech-form-header h2 {
        font-size: 27px;
    }
}

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

@media (max-width: 430px) {
    .macro-service-hero__badge {
        font-size: 10px;
    }

    .macro-service-hero__title {
        font-size: 38px;
    }

    .macro-service-hero__points {
        align-items: center;
        flex-direction: column;
    }

    .tech-form-header {
        gap: 12px;
    }

    .tech-form-icon {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    .tech-form-header h2 {
        font-size: 24px;
    }
}

/* ======================================
   REDUCED MOTION
====================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    [data-site-reveal] {
        opacity: 1;
        transform: none;
    }
}

/* ======================================
   SERVICE OVERVIEW SECTION
====================================== */

.macro-overview {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(37, 99, 235, 0.07),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 75%,
            rgba(124, 58, 237, 0.07),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7f9ff 52%,
            #f2f6ff 100%
        );
}

.macro-overview::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    z-index: -2;

    width: 900px;
    height: 360px;

    transform: translateX(-50%);
    border-radius: 50%;

    background: rgba(37, 99, 235, 0.055);
    filter: blur(110px);
}

.macro-overview::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(37, 99, 235, 0.03) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(37, 99, 235, 0.03) 1px,
            transparent 1px
        );

    background-size: 60px 60px;

    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent,
        black 18%,
        black 82%,
        transparent
    );

    mask-image: linear-gradient(
        to bottom,
        transparent,
        black 18%,
        black 82%,
        transparent
    );
}

/* ======================================
   DECORATIVE ORBS
====================================== */

.macro-overview__orb {
    position: absolute;
    z-index: -1;

    border-radius: 50%;
    pointer-events: none;

    filter: blur(20px);

    animation: macroOverviewOrb 9s ease-in-out infinite;
}

.macro-overview__orb--one {
    top: 85px;
    left: -130px;

    width: 300px;
    height: 300px;

    background: rgba(34, 211, 238, 0.08);
}

.macro-overview__orb--two {
    right: -145px;
    bottom: 60px;

    width: 340px;
    height: 340px;

    background: rgba(124, 58, 237, 0.08);

    animation-delay: -4s;
}

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

.macro-overview__layout {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(500px, 1.08fr);
    align-items: center;
    gap: clamp(60px, 8vw, 110px);
}

/* ======================================
   LEFT CONTENT
====================================== */

.macro-overview__content {
    max-width: 620px;
}

.macro-overview__label {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 18px;

    color: var(--primary-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.macro-overview__label span {
    display: block;
    width: 28px;
    height: 2px;

    border-radius: 10px;

    background: linear-gradient(
        90deg,
        var(--primary-blue),
        var(--cyan)
    );

    box-shadow: 0 0 12px rgba(37, 99, 235, 0.22);

    animation: macroOverviewLine 2.8s ease-in-out infinite;
}

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

.macro-overview__title {
    margin: 0;

    color: var(--dark-blue);
    font-size: clamp(40px, 4.6vw, 30px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.macro-overview__title span {
    color: transparent;

    background: linear-gradient(
        100deg,
        var(--primary-blue),
        var(--cyan),
        var(--violet)
    );

    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;

    animation: macroOverviewText 5s linear infinite;
}

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

.macro-overview__text {
    margin: 22px 0 0;

    color: var(--text);
    font-size: 16px;
    line-height: 1.8;
}

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

.macro-overview__benefits {
    display: grid;
    gap: 18px;

    margin-top: 32px;
}

.macro-overview__benefit {
    display: flex;
    align-items: flex-start;
    gap: 14px;

    padding: 0;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}

.macro-overview__benefit:hover {
    transform: translateX(7px);
}

.macro-overview__check {
    display: grid;
    flex: 0 0 34px;
    place-items: center;

    width: 34px;
    height: 34px;

    margin-top: 1px;

    border: 1px solid rgba(37, 99, 235, 0.13);
    border-radius: 11px;

    background: linear-gradient(
        145deg,
        var(--soft-blue),
        var(--white)
    );

    box-shadow:
        0 10px 24px rgba(37, 99, 235, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);

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

.macro-overview__benefit:hover .macro-overview__check {
    transform: rotate(-6deg) scale(1.07);

    background: linear-gradient(
        135deg,
        var(--primary-blue),
        var(--light-blue)
    );

    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.24);
}

.macro-overview__check svg {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: var(--primary-blue);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: stroke 0.3s ease;
}

.macro-overview__benefit:hover .macro-overview__check svg {
    stroke: var(--white);
}

.macro-overview__benefit > div {
    display: grid;
    gap: 5px;
}

.macro-overview__benefit strong {
    color: var(--heading);
    font-size: 14px;
    font-weight: 750;
}

.macro-overview__benefit small {
    max-width: 470px;

    color: var(--muted);
    font-size: 12px;
    line-height: 1.65;
}

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

.macro-overview__button {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 52px;
    margin-top: 36px;
    padding: 0 23px;

    overflow: hidden;

    color: var(--white);
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;

    border-radius: 12px;

    background: linear-gradient(
        135deg,
        var(--dark-blue),
        var(--primary-blue)
    );

    box-shadow:
        0 16px 34px rgba(7, 26, 56, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.macro-overview__button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;

    width: 90%;
    height: 100%;

    transform: skewX(-20deg);

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );

    transition: left 0.65s ease;
}

.macro-overview__button:hover::before {
    left: 140%;
}

.macro-overview__button:hover {
    transform: translateY(-4px);

    box-shadow:
        0 22px 44px rgba(7, 26, 56, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.macro-overview__button svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform 0.3s ease;
}

.macro-overview__button:hover svg {
    transform: translateX(5px);
}

/* ======================================
   RIGHT VISUAL
====================================== */

.macro-overview__visual {
    position: relative;
    min-height: 620px;

    perspective: 1300px;
}

.macro-overview__visual-glow {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 470px;
    height: 470px;

    transform: translate(-50%, -50%);
    border-radius: 50%;

    background: linear-gradient(
        135deg,
        rgba(37, 99, 235, 0.17),
        rgba(34, 211, 238, 0.11),
        rgba(124, 58, 237, 0.15)
    );

    filter: blur(55px);

    animation: macroOverviewGlow 5s ease-in-out infinite;
}

/* ======================================
   MAIN PANEL
====================================== */

.macro-overview__panel {
    position: absolute;
    top: 40px;
    left: 25px;
    z-index: 2;

    width: calc(100% - 50px);
    padding: 27px;

    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 26px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(124, 58, 237, 0.08),
            transparent 28%
        ),
        rgba(255, 255, 255, 0.88);

    box-shadow:
        0 35px 90px rgba(8, 32, 72, 0.17),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    transform: rotateY(-4deg) rotateX(1deg);

    animation: macroOverviewPanel 6s ease-in-out infinite;
}

/* ======================================
   PANEL TOP
====================================== */

.macro-overview__panel-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 22px;
}

.macro-overview__panel-label {
    display: block;
    margin-bottom: 7px;

    color: var(--primary-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.macro-overview__panel-top h3 {
    margin: 0;

    color: var(--heading);
    font-size: 24px;
    font-weight: 780;
    line-height: 1.2;
    letter-spacing: -0.035em;
}

.macro-overview__panel-icon {
    display: grid;
    flex: 0 0 48px;
    place-items: center;

    width: 48px;
    height: 48px;

    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 15px;

    background: linear-gradient(
        145deg,
        var(--soft-blue),
        var(--white)
    );

    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.1);

    animation: macroOverviewIcon 4s ease-in-out infinite;
}

.macro-overview__panel-icon svg {
    width: 23px;
    height: 23px;

    fill: none;
    stroke: var(--primary-blue);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ======================================
   CAPABILITY CARDS
====================================== */

.macro-overview__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.macro-overview__card {
    position: relative;

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

    min-height: 145px;
    padding: 17px;

    overflow: hidden;

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

    background: linear-gradient(
        145deg,
        var(--white),
        var(--soft-blue)
    );

    box-shadow:
        0 12px 28px rgba(8, 32, 72, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);

    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.macro-overview__card::before {
    content: "";
    position: absolute;
    top: -70px;
    right: -60px;

    width: 130px;
    height: 130px;

    border-radius: 50%;

    background: rgba(37, 99, 235, 0.06);

    transition:
        transform 0.4s ease,
        background 0.4s ease;
}

.macro-overview__card:hover {
    transform: translateY(-8px);

    border-color: rgba(37, 99, 235, 0.17);

    box-shadow:
        0 22px 42px rgba(8, 32, 72, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.macro-overview__card:hover::before {
    transform: scale(1.35);
    background: rgba(34, 211, 238, 0.08);
}

.macro-overview__card-icon {
    position: relative;
    z-index: 2;

    display: grid;
    flex: 0 0 40px;
    place-items: center;

    width: 40px;
    height: 40px;

    border-radius: 12px;

    background: linear-gradient(
        135deg,
        var(--primary-blue),
        var(--light-blue)
    );

    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.22);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.macro-overview__card:nth-child(2)
.macro-overview__card-icon {
    background: linear-gradient(
        135deg,
        var(--cyan),
        var(--primary-blue)
    );
}

.macro-overview__card:nth-child(3)
.macro-overview__card-icon {
    background: linear-gradient(
        135deg,
        var(--violet),
        var(--primary-blue)
    );
}

.macro-overview__card:nth-child(4)
.macro-overview__card-icon {
    background: linear-gradient(
        135deg,
        var(--dark-blue),
        var(--violet)
    );
}

.macro-overview__card:hover
.macro-overview__card-icon {
    transform: rotate(-7deg) scale(1.08);

    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.3);
}

.macro-overview__card-icon svg {
    width: 20px;
    height: 20px;

    fill: none;
    stroke: var(--white);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.macro-overview__card > div:nth-child(2) {
    position: relative;
    z-index: 2;

    display: grid;
    gap: 6px;
}

.macro-overview__card strong {
    color: var(--heading);
    font-size: 13px;
    font-weight: 750;
}

.macro-overview__card p {
    margin: 0;

    color: var(--muted);
    font-size: 10px;
    line-height: 1.6;
}

.macro-overview__card-number {
    position: absolute;
    right: 14px;
    bottom: 8px;
    z-index: 1;

    color: rgba(37, 99, 235, 0.07);
    font-size: 34px;
    font-weight: 850;
    letter-spacing: -0.06em;
}

/* ======================================
   PANEL BOTTOM
====================================== */

.macro-overview__panel-bottom {
    margin-top: 16px;
    padding: 16px;

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

    background: linear-gradient(
        145deg,
        var(--soft-blue),
        var(--white)
    );
}

.macro-overview__progress-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.macro-overview__progress-content > div {
    display: grid;
    gap: 4px;
}

.macro-overview__progress-content span {
    color: var(--muted);
    font-size: 9px;
}

.macro-overview__progress-content strong {
    color: var(--heading);
    font-size: 12px;
}

.macro-overview__progress-value {
    color: var(--primary-blue) !important;
    font-size: 14px !important;
    font-weight: 800;
}

.macro-overview__progress {
    height: 7px;
    margin-top: 13px;

    overflow: hidden;

    border-radius: 20px;

    background: #dde7fa;
}

.macro-overview__progress span {
    display: block;

    width: 92%;
    height: 100%;

    border-radius: inherit;

    background: linear-gradient(
        90deg,
        var(--primary-blue),
        var(--cyan),
        var(--violet)
    );

    background-size: 200% auto;

    animation:
        macroOverviewProgress 1.7s ease both,
        macroOverviewProgressGlow 4s linear infinite;
}

/* ======================================
   FLOATING LABELS
====================================== */

.macro-overview__floating {
    position: absolute;
    z-index: 4;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 10px 13px;

    color: var(--heading);
    font-size: 10px;
    font-weight: 750;

    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 12px;

    background: rgba(255, 255, 255, 0.9);

    box-shadow:
        0 16px 35px rgba(8, 32, 72, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.macro-overview__floating span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--cyan);

    box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.1);
}

.macro-overview__floating--one {
    top: 12px;
    right: 5px;

    animation: macroOverviewFloatOne 4.7s ease-in-out infinite;
}

.macro-overview__floating--two {
    bottom: 12px;
    left: -2px;

    animation: macroOverviewFloatTwo 5.3s ease-in-out infinite;
}

/* ======================================
   ANIMATIONS
====================================== */

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

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

@keyframes macroOverviewLine {
    0%,
    100% {
        width: 28px;
        opacity: 0.7;
    }

    50% {
        width: 40px;
        opacity: 1;
    }
}

@keyframes macroOverviewOrb {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(24px, -20px, 0) scale(1.08);
    }
}

@keyframes macroOverviewGlow {
    0%,
    100% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(0.95);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.08);
    }
}

@keyframes macroOverviewPanel {
    0%,
    100% {
        transform:
            rotateY(-4deg)
            rotateX(1deg)
            translateY(0);
    }

    50% {
        transform:
            rotateY(-2deg)
            rotateX(0deg)
            translateY(-10px);
    }
}

@keyframes macroOverviewIcon {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-6px) rotate(3deg);
    }
}

@keyframes macroOverviewProgress {
    from {
        width: 0;
    }

    to {
        width: 92%;
    }
}

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

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

@keyframes macroOverviewFloatOne {
    0%,
    100% {
        transform: translateY(0) rotate(1deg);
    }

    50% {
        transform: translateY(-11px) rotate(-1deg);
    }
}

@keyframes macroOverviewFloatTwo {
    0%,
    100% {
        transform: translateY(0) rotate(-1deg);
    }

    50% {
        transform: translateY(10px) rotate(1deg);
    }
}

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

@media (max-width: 1050px) {

    .macro-overview {
        padding: 100px 0;
    }

    .macro-overview__layout {
        grid-template-columns: minmax(0, 0.9fr) minmax(450px, 1.1fr);
        gap: 50px;
    }

    .macro-overview__panel {
        left: 10px;
        width: calc(100% - 20px);
    }

}

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

@media (max-width: 900px) {

    .macro-overview__layout {
        grid-template-columns: 1fr;
        gap: 65px;
    }

    .macro-overview__content {
        max-width: 720px;
        margin-inline: auto;
        text-align: center;
    }

    .macro-overview__label,
    .macro-overview__button {
        margin-inline: auto;
    }

    .macro-overview__text {
        max-width: 660px;
        margin-inline: auto;
        margin-top: 22px;
    }

    .macro-overview__benefit {
        max-width: 580px;
        margin-inline: auto;
        text-align: left;
    }

    .macro-overview__visual {
        width: min(650px, 100%);
        margin-inline: auto;
    }

    .macro-overview__panel {
        transform: none;
        animation-name: macroOverviewPanelMobile;
    }

}

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

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

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

@media (max-width: 650px) {

    .macro-overview {
        padding: 80px 0;
    }

    .macro-overview__title {
        font-size: clamp(36px, 10vw, 48px);
    }

    .macro-overview__text {
        font-size: 15px;
    }

    .macro-overview__visual {
        min-height: 730px;
    }

    .macro-overview__panel {
        top: 38px;
        left: 0;

        width: 100%;
        padding: 20px;
    }

    .macro-overview__cards {
        grid-template-columns: 1fr;
    }

    .macro-overview__card {
        min-height: 120px;
    }

    .macro-overview__floating--one {
        right: 0;
    }

    .macro-overview__floating--two {
        left: 0;
    }

}

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

@media (max-width: 430px) {

    .macro-overview {
        padding: 70px 0;
    }

    .macro-overview__title {
        font-size: 36px;
    }

    .macro-overview__benefit {
        gap: 11px;
    }

    .macro-overview__check {
        flex-basis: 31px;
        width: 31px;
        height: 31px;
    }

    .macro-overview__panel-top h3 {
        font-size: 21px;
    }

    .macro-overview__panel-icon {
        flex-basis: 43px;
        width: 43px;
        height: 43px;
    }

}

/* ======================================
   REDUCED MOTION
====================================== */

@media (prefers-reduced-motion: reduce) {

    .macro-overview *,
    .macro-overview *::before,
    .macro-overview *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

}

/* ======================================
   WHAT WE OFFER / SERVICES SECTION
   COMPLETE CSS
====================================== */

.macro-services {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(34, 211, 238, 0.13),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 82%,
            rgba(124, 58, 237, 0.14),
            transparent 30%
        ),
        linear-gradient(
            125deg,
            #020a18 0%,
            #04152f 38%,
            #101545 68%,
            #180d39 100%
        );
}

/* Soft glow only, no grid or rectangular box */

.macro-services::before {
    content: "";
    position: absolute;
    top: -220px;
    left: 50%;
    z-index: -2;

    width: 900px;
    height: 480px;

    transform: translateX(-50%);
    border-radius: 50%;
    pointer-events: none;

    background: rgba(37, 99, 235, 0.12);
    filter: blur(120px);

    animation: macroServicesMainGlow 8s ease-in-out infinite;
}

.macro-services::after {
    content: "";
    position: absolute;
    right: -190px;
    bottom: -240px;
    z-index: -2;

    width: 520px;
    height: 520px;

    border-radius: 50%;
    pointer-events: none;

    background: rgba(124, 58, 237, 0.13);
    filter: blur(115px);

    animation: macroServicesSideGlow 9s ease-in-out infinite;
}

/* ======================================
   BACKGROUND GLOWS
====================================== */

.macro-services__glow {
    position: absolute;
    z-index: -1;

    border-radius: 50%;
    pointer-events: none;
    filter: blur(50px);

    animation: macroServicesGlowFloat 9s ease-in-out infinite;
}

.macro-services__glow--one {
    top: 100px;
    left: -175px;

    width: 360px;
    height: 360px;

    background: rgba(34, 211, 238, 0.1);
}

.macro-services__glow--two {
    right: -180px;
    bottom: 80px;

    width: 410px;
    height: 410px;

    background: rgba(124, 58, 237, 0.11);

    animation-delay: -4s;
}

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

.macro-services__header {
    position: relative;
    z-index: 2;

    max-width: 820px;
    margin: 0 auto 64px;

    text-align: center;
}

.macro-services__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    margin-bottom: 18px;

    color: var(--cyan);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.macro-services__label span {
    display: block;

    width: 30px;
    height: 2px;

    border-radius: 20px;

    background: linear-gradient(
        90deg,
        var(--primary-blue),
        var(--cyan)
    );

    box-shadow: 0 0 14px rgba(34, 211, 238, 0.32);

    animation: macroServicesLabelLine 2.8s ease-in-out infinite;
}

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

.macro-services__title {
    margin: 0;

    color: var(--white);
    font-size: clamp(42px, 5vw, 44px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.macro-services__title span {
    color: transparent;

    background: linear-gradient(
        100deg,
        var(--light-blue),
        var(--cyan),
        #a78bfa,
        var(--light-blue)
    );

    background-size: 220% auto;
    background-clip: text;
    -webkit-background-clip: text;

    animation: macroServicesGradientText 5s linear infinite;
}

.macro-services__intro {
    max-width: 660px;
    margin: 23px auto 0;

    color: rgba(255, 255, 255, 0.62);
    font-size: 16px;
    line-height: 1.75;
}

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

.macro-services__grid {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

/* ======================================
   SERVICE CARD
====================================== */

.macro-service-card {
    position: relative;

    display: flex;
    flex-direction: column;

      padding: 28px;

    overflow: hidden;

    border: 1px solid rgba(8, 32, 72, 0.08);
    border-radius: 22px;

    background: #ffffff;

    box-shadow:
        0 22px 52px rgba(0, 0, 0, 0.22),
        0 5px 16px rgba(37, 99, 235, 0.06);

    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}

.macro-service-card::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -110px;

    width: 240px;
    height: 240px;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(37, 99, 235, 0.13),
        transparent 68%
    );

    opacity: 0.65;
    transform: scale(0.9);

    transition:
        transform 0.55s ease,
        opacity 0.55s ease;
}

.macro-service-card::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    height: 3px;

    background: linear-gradient(
        90deg,
        var(--primary-blue),
        var(--cyan),
        var(--violet)
    );

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.45s ease;
}

.macro-service-card:hover {
    transform: translateY(-12px);

    border-color: rgba(34, 211, 238, 0.32);

    box-shadow:
        0 34px 78px rgba(0, 0, 0, 0.28),
        0 15px 34px rgba(37, 99, 235, 0.12),
        0 0 40px rgba(34, 211, 238, 0.08);
}

.macro-service-card:hover::before {
    opacity: 1;

    transform:
        scale(1.35)
        translate(-15px, 15px);
}

.macro-service-card:hover::after {
    transform: scaleX(1);
}

/* ======================================
   CARD TOP
====================================== */

.macro-service-card__top {
    position: relative;
    z-index: 3;

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

    margin-bottom: 26px;
}

/* ======================================
   ICON ALWAYS VISIBLE
====================================== */

.macro-service-card__icon {
    position: relative;
    z-index: 5;

    display: grid;
    place-items: center;

    width: 54px;
    height: 54px;

    overflow: visible;

    color: var(--primary-blue);

    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: 16px;

    background: linear-gradient(
        145deg,
        #f3f7ff,
        #ffffff
    );

    box-shadow:
        0 12px 28px rgba(37, 99, 235, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);

    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.35s ease,
        background 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}

.macro-service-card__icon::before {
    content: "";
    position: absolute;
    inset: 6px;
    z-index: 0;

    border-radius: 11px;

    background: rgba(37, 99, 235, 0.05);

    transition:
        transform 0.35s ease,
        background 0.35s ease;
}

.macro-service-card__icon svg {
    position: relative;
    z-index: 2;

    display: block;

    width: 25px;
    height: 25px;

    overflow: visible;

    color: var(--primary-blue);

    fill: none !important;
    stroke: var(--primary-blue) !important;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    opacity: 1 !important;
    visibility: visible !important;

    transition:
        color 0.35s ease,
        stroke 0.35s ease,
        transform 0.35s ease,
        filter 0.35s ease;
}

/* Force all inner SVG shapes visible */

.macro-service-card__icon svg path,
.macro-service-card__icon svg circle,
.macro-service-card__icon svg rect,
.macro-service-card__icon svg line,
.macro-service-card__icon svg polyline,
.macro-service-card__icon svg polygon,
.macro-service-card__icon svg ellipse {
    fill: none !important;
    stroke: var(--primary-blue) !important;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    opacity: 1 !important;
    visibility: visible !important;
}

/* Different default icon backgrounds */

.macro-service-card:nth-child(2)
.macro-service-card__icon {
    background: linear-gradient(
        145deg,
        #eefcff,
        #ffffff
    );
}

.macro-service-card:nth-child(3)
.macro-service-card__icon {
    background: linear-gradient(
        145deg,
        #f6f1ff,
        #ffffff
    );
}

.macro-service-card:nth-child(4)
.macro-service-card__icon {
    background: linear-gradient(
        145deg,
        #eef4ff,
        #ffffff
    );
}

.macro-service-card:nth-child(5)
.macro-service-card__icon {
    background: linear-gradient(
        145deg,
        #eefcff,
        #ffffff
    );
}

.macro-service-card:nth-child(6)
.macro-service-card__icon {
    background: linear-gradient(
        145deg,
        #f7f1ff,
        #ffffff
    );
}

/* Hover icon */

.macro-service-card:hover
.macro-service-card__icon {
    color: var(--white);

    transform: rotate(-7deg) scale(1.1);

    border-color: rgba(255, 255, 255, 0.35);

    background: linear-gradient(
        135deg,
        var(--primary-blue),
        var(--cyan)
    );

    box-shadow:
        0 18px 40px rgba(37, 99, 235, 0.32),
        0 0 28px rgba(34, 211, 238, 0.2);
}

.macro-service-card:hover
.macro-service-card__icon::before {
    background: rgba(255, 255, 255, 0.08);
    transform: scale(0.9);
}

.macro-service-card:hover
.macro-service-card__icon svg {
    color: var(--white);

    fill: none !important;
    stroke: var(--white) !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: scale(1.08);

    filter: drop-shadow(
        0 0 5px rgba(255, 255, 255, 0.45)
    );
}

.macro-service-card:hover
.macro-service-card__icon svg path,
.macro-service-card:hover
.macro-service-card__icon svg circle,
.macro-service-card:hover
.macro-service-card__icon svg rect,
.macro-service-card:hover
.macro-service-card__icon svg line,
.macro-service-card:hover
.macro-service-card__icon svg polyline,
.macro-service-card:hover
.macro-service-card__icon svg polygon,
.macro-service-card:hover
.macro-service-card__icon svg ellipse {
    fill: none !important;
    stroke: var(--white) !important;

    opacity: 1 !important;
    visibility: visible !important;
}

/* ======================================
   CARD NUMBER
====================================== */

.macro-service-card__number {
    color: rgba(37, 99, 235, 0.09);
    font-size: 43px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: -0.07em;

    transition:
        color 0.35s ease,
        transform 0.35s ease,
        text-shadow 0.35s ease;
}

.macro-service-card:hover
.macro-service-card__number {
    color: rgba(37, 99, 235, 0.24);

    transform: translateY(-5px);

    text-shadow:
        0 10px 22px rgba(37, 99, 235, 0.12);
}

/* ======================================
   CARD HEADING
====================================== */

.macro-service-card h3 {
    position: relative;
    z-index: 3;

    margin: 0;

    color: var(--heading);
    font-size: 21px;
    font-weight: 750;
    line-height: 1.3;
    letter-spacing: -0.025em;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.macro-service-card:hover h3 {
    color: var(--primary-blue);
    transform: translateX(3px);
}

/* ======================================
   CARD DESCRIPTION
====================================== */

.macro-service-card > p {
    position: relative;
    z-index: 3;

    margin: 15px 0 0;

    color: var(--text);
    font-size: 13px;
    line-height: 1.75;
}

/* ======================================
   SERVICE LIST
====================================== */

.macro-service-card ul {
    position: relative;
    z-index: 3;

    display: grid;
    gap: 11px;

    margin: 22px 0 28px;
    padding: 0;

    list-style: none;
}

.macro-service-card li {
    display: flex;
    align-items: center;
    gap: 11px;

    color: var(--text);
    font-size: 12px;
    font-weight: 600;

    transition:
        transform 0.3s ease,
        color 0.3s ease;
}

.macro-service-card li::before {
    content: "";

    flex: 0 0 7px;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--primary-blue);

    box-shadow:
        0 0 0 4px rgba(37, 99, 235, 0.08),
        0 0 12px rgba(37, 99, 235, 0.18);

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

.macro-service-card:hover li {
    color: var(--heading);
}

.macro-service-card:hover li:nth-child(1) {
    transform: translateX(4px);
}

.macro-service-card:hover li:nth-child(2) {
    transform: translateX(7px);
}

.macro-service-card:hover li:nth-child(3) {
    transform: translateX(10px);
}

.macro-service-card:hover li::before {
    transform: scale(1.18);

    background: var(--cyan);

    box-shadow:
        0 0 0 5px rgba(34, 211, 238, 0.1),
        0 0 15px rgba(34, 211, 238, 0.32);
}

/* ======================================
   CARD LINK
====================================== */

.macro-service-card__link {
    position: relative;
    z-index: 3;

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

    width: fit-content;
    margin-top: auto;

    color: var(--primary-blue);
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;

    transition:
        gap 0.3s ease,
        color 0.3s ease;
}

.macro-service-card__link::after {
    content: "";

    position: absolute;
    right: 0;
    bottom: -5px;
    left: 0;

    height: 1px;

    background: linear-gradient(
        90deg,
        var(--primary-blue),
        var(--cyan),
        transparent
    );

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.35s ease;
}

.macro-service-card__link svg {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;

    opacity: 1;
    visibility: visible;

    transition: transform 0.3s ease;
}

.macro-service-card__link:hover {
    gap: 14px;
    color: var(--violet);
}

.macro-service-card__link:hover::after {
    transform: scaleX(1);
}

.macro-service-card__link:hover svg {
    transform: translateX(5px);
}

/* ======================================
   EXISTING REVEAL JS SUPPORT
====================================== */

.macro-services [data-site-reveal] {
    opacity: 0;
    transform: translateY(34px);

    transition:
        opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.macro-services
[data-site-reveal].is-site-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ======================================
   ANIMATIONS
====================================== */

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

    100% {
        background-position: 220% center;
    }
}

@keyframes macroServicesLabelLine {
    0%,
    100% {
        width: 30px;
        opacity: 0.7;
    }

    50% {
        width: 43px;
        opacity: 1;
    }
}

@keyframes macroServicesMainGlow {
    0%,
    100% {
        opacity: 0.6;
        transform: translateX(-50%) scale(0.95);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.08);
    }
}

@keyframes macroServicesSideGlow {
    0%,
    100% {
        opacity: 0.55;
        transform: translate3d(0, 0, 0) scale(0.95);
    }

    50% {
        opacity: 1;
        transform:
            translate3d(-25px, -18px, 0)
            scale(1.08);
    }
}

@keyframes macroServicesGlowFloat {
    0%,
    100% {
        opacity: 0.65;
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        opacity: 1;
        transform:
            translate3d(28px, -22px, 0)
            scale(1.1);
    }
}

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

@media (max-width: 1050px) {
    .macro-services {
        padding: 100px 0;
    }

    .macro-services__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .macro-service-card {
        min-height: 410px;
    }
}

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

@media (max-width: 800px) {
    .macro-services__header {
        margin-bottom: 50px;
    }

    .macro-services__title {
        font-size: clamp(39px, 8vw, 54px);
    }

    .macro-services__intro {
        font-size: 15px;
    }
}

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

@media (max-width: 680px) {
    .macro-services {
        padding: 80px 0;
    }

    .macro-services__grid {
        grid-template-columns: 1fr;
        gap: 19px;
    }

    .macro-service-card {
        min-height: auto;
        padding: 25px;
    }

    .macro-service-card:hover {
        transform: translateY(-7px);
    }
}

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

@media (max-width: 430px) {
    .macro-services {
        padding: 70px 0;
    }

    .macro-services__header {
        margin-bottom: 42px;
    }

    .macro-services__label {
        font-size: 10px;
    }

    .macro-services__title {
        font-size: 36px;
    }

    .macro-services__intro {
        font-size: 14px;
    }

    .macro-service-card {
        padding: 22px;
        border-radius: 19px;
    }

    .macro-service-card h3 {
        font-size: 19px;
    }

    .macro-service-card__icon {
        width: 49px;
        height: 49px;
        border-radius: 14px;
    }

    .macro-service-card__number {
        font-size: 38px;
    }
}

/* ======================================
   TOUCH DEVICES
====================================== */

@media (hover: none) {
    .macro-service-card:hover {
        transform: none;
    }

    .macro-service-card:hover li {
        transform: none;
    }

    .macro-service-card__icon,
    .macro-service-card:hover .macro-service-card__icon {
        color: var(--primary-blue);

        background: linear-gradient(
            145deg,
            #f3f7ff,
            #ffffff
        );
    }

    .macro-service-card__icon svg,
    .macro-service-card:hover .macro-service-card__icon svg,
    .macro-service-card__icon svg path,
    .macro-service-card__icon svg circle,
    .macro-service-card__icon svg rect,
    .macro-service-card__icon svg line,
    .macro-service-card__icon svg polyline,
    .macro-service-card__icon svg polygon,
    .macro-service-card__icon svg ellipse {
        fill: none !important;
        stroke: var(--primary-blue) !important;

        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* ======================================
   REDUCED MOTION
====================================== */

@media (prefers-reduced-motion: reduce) {
    .macro-services *,
    .macro-services *::before,
    .macro-services *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .macro-services [data-site-reveal] {
        opacity: 1;
        transform: none;
    }
}

/* ======================================
   WHY CHOOSE MACRO / IMPACT SECTION
====================================== */

.macro-impact {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(
            circle at 7% 18%,
            rgba(37, 99, 235, 0.1),
            transparent 30%
        ),
        radial-gradient(
            circle at 94% 80%,
            rgba(124, 58, 237, 0.1),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f6f8ff 48%,
            #eef4ff 100%
        );
}

.macro-impact::before {
    content: "";
    position: absolute;
    top: -260px;
    left: 50%;
    z-index: -2;

    width: 920px;
    height: 520px;

    transform: translateX(-50%);
    border-radius: 50%;
    pointer-events: none;

    background: rgba(37, 99, 235, 0.08);
    filter: blur(120px);

    animation: macroImpactMainGlow 8s ease-in-out infinite;
}

.macro-impact::after {
    content: "";
    position: absolute;
    right: -220px;
    bottom: -260px;
    z-index: -2;

    width: 560px;
    height: 560px;

    border-radius: 50%;
    pointer-events: none;

    background: rgba(124, 58, 237, 0.09);
    filter: blur(120px);

    animation: macroImpactSideGlow 9s ease-in-out infinite;
}

/* ======================================
   BACKGROUND GLOWS
====================================== */

.macro-impact__glow {
    position: absolute;
    z-index: -1;

    border-radius: 50%;
    pointer-events: none;

    filter: blur(55px);
}

.macro-impact__glow--one {
    top: 130px;
    left: -170px;

    width: 380px;
    height: 380px;

    background: rgba(34, 211, 238, 0.09);

    animation: macroImpactGlowOne 8s ease-in-out infinite;
}

.macro-impact__glow--two {
    right: -190px;
    bottom: 90px;

    width: 430px;
    height: 430px;

    background: rgba(124, 58, 237, 0.09);

    animation: macroImpactGlowTwo 9s ease-in-out infinite;
}

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

.macro-impact__layout {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(500px, 1.08fr);
    align-items: center;
    gap: 85px;
}

/* ======================================
   LEFT CONTENT
====================================== */

.macro-impact__content {
    max-width: 610px;
}

.macro-impact__label {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 18px;

    color: var(--primary-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.macro-impact__label span {
    display: block;

    width: 30px;
    height: 2px;

    border-radius: 30px;

    background: linear-gradient(
        90deg,
        var(--primary-blue),
        var(--cyan)
    );

    box-shadow: 0 0 14px rgba(37, 99, 235, 0.25);

    animation: macroImpactLabelLine 2.8s ease-in-out infinite;
}

.macro-impact__title {
    margin: 0;

    color: var(--dark-blue);
    font-size: clamp(42px, 5vw, 38px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.macro-impact__title span {
    color: transparent;

    background: linear-gradient(
        100deg,
        var(--primary-blue),
        var(--cyan),
        var(--violet),
        var(--primary-blue)
    );

    background-size: 220% auto;
    background-clip: text;
    -webkit-background-clip: text;

    animation: macroImpactTitleGradient 5s linear infinite;
}

.macro-impact__description {
    max-width: 580px;
    margin: 24px 0 0;

    color: var(--text);
    font-size: 16px;
    line-height: 1.8;
}

/* ======================================
   FEATURE LIST
====================================== */

.macro-impact__features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;

    margin-top: 38px;
}

.macro-impact__feature {
    display: flex;
    align-items: flex-start;
    gap: 14px;

    padding: 17px 0;

    border-bottom: 1px solid rgba(8, 32, 72, 0.09);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease;
}

.macro-impact__feature:hover {
    transform: translateX(6px);
    border-color: rgba(37, 99, 235, 0.25);
}

.macro-impact__feature-icon {
    display: grid;
    flex: 0 0 45px;
    place-items: center;

    width: 45px;
    height: 45px;

    color: var(--primary-blue);

    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 14px;

    background: linear-gradient(
        145deg,
        var(--soft-blue),
        var(--white)
    );

    box-shadow:
        0 10px 25px rgba(37, 99, 235, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);

    transition:
        transform 0.35s ease,
        color 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;
}

.macro-impact__feature-icon svg {
    width: 21px;
    height: 21px;

    fill: none !important;
    stroke: var(--primary-blue) !important;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    opacity: 1;
    visibility: visible;

    transition:
        stroke 0.35s ease,
        transform 0.35s ease;
}

.macro-impact__feature-icon svg path,
.macro-impact__feature-icon svg circle,
.macro-impact__feature-icon svg rect,
.macro-impact__feature-icon svg line,
.macro-impact__feature-icon svg polyline {
    fill: none !important;
    stroke: var(--primary-blue) !important;
}

.macro-impact__feature:hover
.macro-impact__feature-icon {
    transform: rotate(-6deg) scale(1.08);

    color: var(--white);

    background: linear-gradient(
        135deg,
        var(--primary-blue),
        var(--cyan)
    );

    box-shadow:
        0 15px 32px rgba(37, 99, 235, 0.25),
        0 0 22px rgba(34, 211, 238, 0.12);
}

.macro-impact__feature:hover
.macro-impact__feature-icon svg,
.macro-impact__feature:hover
.macro-impact__feature-icon svg path,
.macro-impact__feature:hover
.macro-impact__feature-icon svg circle,
.macro-impact__feature:hover
.macro-impact__feature-icon svg rect,
.macro-impact__feature:hover
.macro-impact__feature-icon svg line,
.macro-impact__feature:hover
.macro-impact__feature-icon svg polyline {
    stroke: var(--white) !important;
}

.macro-impact__feature h3 {
    margin: 1px 0 0;

    color: var(--heading);
    font-size: 15px;
    font-weight: 750;
    line-height: 1.35;

    transition: color 0.3s ease;
}

.macro-impact__feature:hover h3 {
    color: var(--primary-blue);
}

.macro-impact__feature p {
    margin: 7px 0 0;

    color: var(--text);
    font-size: 11px;
    line-height: 1.65;
}

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

.macro-impact__button {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 54px;
    margin-top: 34px;
    padding: 0 25px;

    overflow: hidden;

    color: var(--white);
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;

    border-radius: 12px;

    background: linear-gradient(
        135deg,
        var(--primary-blue),
        var(--light-blue)
    );

    box-shadow:
        0 16px 35px rgba(37, 99, 235, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.macro-impact__button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;

    width: 90%;
    height: 100%;

    transform: skewX(-20deg);

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.32),
        transparent
    );

    transition: left 0.65s ease;
}

.macro-impact__button:hover::before {
    left: 140%;
}

.macro-impact__button:hover {
    transform: translateY(-4px);

    box-shadow:
        0 22px 46px rgba(37, 99, 235, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.macro-impact__button svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform 0.3s ease;
}

.macro-impact__button:hover svg {
    transform: translateX(5px);
}

/* ======================================
   RIGHT VISUAL
====================================== */

.macro-impact__visual {
    position: relative;

    min-height: 620px;

    display: grid;
    place-items: center;
}

/* Soft circular background */

.macro-impact__visual::before {
    content: "";
    position: absolute;
    inset: 65px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(37, 99, 235, 0.11),
            rgba(34, 211, 238, 0.04) 42%,
            transparent 68%
        );

    filter: blur(4px);

    animation: macroImpactVisualPulse 6s ease-in-out infinite;
}

/* Decorative orbit */

.macro-impact__visual-orbit {
    position: absolute;

    width: 430px;
    height: 430px;

    border: 1px dashed rgba(37, 99, 235, 0.2);
    border-radius: 50%;

    animation: macroImpactOrbitRotate 24s linear infinite;
}

.macro-impact__visual-orbit::before,
.macro-impact__visual-orbit::after {
    content: "";
    position: absolute;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background: var(--cyan);

    box-shadow:
        0 0 0 7px rgba(34, 211, 238, 0.08),
        0 0 18px rgba(34, 211, 238, 0.42);
}

.macro-impact__visual-orbit::before {
    top: 50px;
    left: 55px;
}

.macro-impact__visual-orbit::after {
    right: 45px;
    bottom: 70px;

    background: var(--violet);

    box-shadow:
        0 0 0 7px rgba(124, 58, 237, 0.08),
        0 0 18px rgba(124, 58, 237, 0.4);
}

/* ======================================
   CENTER CORE
====================================== */

.macro-impact__core {
    position: relative;
    z-index: 3;

    display: grid;
    place-items: center;

    width: 245px;
    height: 245px;

    border: 1px solid rgba(37, 99, 235, 0.15);
    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 28%,
            rgba(255, 255, 255, 0.95),
            rgba(241, 246, 255, 0.96) 50%,
            rgba(227, 237, 255, 0.95) 100%
        );

    box-shadow:
        0 35px 80px rgba(8, 32, 72, 0.18),
        0 0 60px rgba(37, 99, 235, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 1);

    animation: macroImpactCoreFloat 5s ease-in-out infinite;
}

.macro-impact__core::before {
    content: "";
    position: absolute;
    inset: 18px;

    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 50%;
}

.macro-impact__core-ring {
    position: absolute;
    inset: -18px;

    border: 2px solid transparent;
    border-top-color: var(--primary-blue);
    border-right-color: var(--cyan);
    border-radius: 50%;

    filter: drop-shadow(
        0 0 8px rgba(37, 99, 235, 0.3)
    );

    animation: macroImpactRingSpin 9s linear infinite;
}

.macro-impact__core-ring::before {
    content: "";
    position: absolute;
    inset: 8px;

    border: 1px solid transparent;
    border-bottom-color: rgba(124, 58, 237, 0.65);
    border-left-color: rgba(37, 99, 235, 0.45);
    border-radius: 50%;

    animation: macroImpactRingSpinReverse 7s linear infinite;
}

.macro-impact__core-content {
    position: relative;
    z-index: 2;

    text-align: center;
}

.macro-impact__core-content span {
    display: block;

    color: var(--primary-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.macro-impact__core-content strong {
    display: block;
    margin-top: 6px;

    color: var(--dark-blue);
    font-size: 35px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: -0.05em;
}

.macro-impact__core-content small {
    display: block;
    margin-top: 10px;

    color: var(--text);
    font-size: 10px;
    font-weight: 650;
}

/* ======================================
   METRIC BLOCKS
====================================== */

.macro-impact__metric {
    position: absolute;
    z-index: 5;

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

    min-width: 180px;
    padding: 15px 17px;

    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 17px;

    background: rgba(255, 255, 255, 0.94);

    box-shadow:
        0 20px 48px rgba(8, 32, 72, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 1);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.macro-impact__metric:hover {
    transform: translateY(-8px) scale(1.03);

    border-color: rgba(34, 211, 238, 0.3);

    box-shadow:
        0 28px 58px rgba(8, 32, 72, 0.2),
        0 0 30px rgba(34, 211, 238, 0.08);
}

.macro-impact__metric--one {
    top: 70px;
    left: 8px;

    animation: macroImpactMetricOne 5s ease-in-out infinite;
}

.macro-impact__metric--two {
    top: 105px;
    right: -5px;

    animation: macroImpactMetricTwo 5.8s ease-in-out infinite;
}

.macro-impact__metric--three {
    bottom: 90px;
    left: 12px;

    animation: macroImpactMetricThree 6.2s ease-in-out infinite;
}

.macro-impact__metric--four {
    right: -10px;
    bottom: 65px;

    animation: macroImpactMetricFour 5.4s ease-in-out infinite;
}

.macro-impact__metric-icon {
    display: grid;
    flex: 0 0 43px;
    place-items: center;

    width: 43px;
    height: 43px;

    border-radius: 13px;

    background: linear-gradient(
        135deg,
        var(--primary-blue),
        var(--cyan)
    );

    box-shadow:
        0 12px 24px rgba(37, 99, 235, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);

    transition: transform 0.35s ease;
}

.macro-impact__metric:hover
.macro-impact__metric-icon {
    transform: rotate(-7deg) scale(1.08);
}

.macro-impact__metric-icon svg {
    width: 20px;
    height: 20px;

    fill: none !important;
    stroke: var(--white) !important;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    opacity: 1;
    visibility: visible;
}

.macro-impact__metric-icon svg path,
.macro-impact__metric-icon svg circle,
.macro-impact__metric-icon svg rect,
.macro-impact__metric-icon svg line {
    fill: none !important;
    stroke: var(--white) !important;
}

.macro-impact__metric strong {
    display: block;

    color: var(--dark-blue);
    font-size: 22px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: -0.04em;
}

.macro-impact__metric small {
    display: block;
    margin-top: 5px;

    color: var(--text);
    font-size: 9px;
    font-weight: 650;
    white-space: nowrap;
}

/* ======================================
   FLOATING LABELS
====================================== */

.macro-impact__floating-label {
    position: absolute;
    z-index: 4;

    padding: 9px 13px;

    color: var(--primary-blue);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.05em;

    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 100px;

    background: rgba(255, 255, 255, 0.88);

    box-shadow:
        0 12px 30px rgba(8, 32, 72, 0.1);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.macro-impact__floating-label--one {
    top: 245px;
    left: 5px;

    animation: macroImpactLabelFloatOne 5s ease-in-out infinite;
}

.macro-impact__floating-label--two {
    right: 8px;
    bottom: 240px;

    animation: macroImpactLabelFloatTwo 5.5s ease-in-out infinite;
}

/* ======================================
   REVEAL SUPPORT
====================================== */

.macro-impact [data-site-reveal] {
    opacity: 0;
    transform: translateY(34px);

    transition:
        opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.macro-impact
[data-site-reveal].is-site-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ======================================
   KEYFRAMES
====================================== */

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

    100% {
        background-position: 220% center;
    }
}

@keyframes macroImpactLabelLine {
    0%,
    100% {
        width: 30px;
        opacity: 0.7;
    }

    50% {
        width: 43px;
        opacity: 1;
    }
}

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

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

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

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

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

@keyframes macroImpactVisualPulse {
    0%,
    100% {
        opacity: 0.65;
        transform: scale(0.95);
    }

    50% {
        opacity: 1;
        transform: scale(1.06);
    }
}

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

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

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

    50% {
        transform: translateY(9px);
    }
}

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

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

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

    50% {
        transform: translateY(11px);
    }
}

@keyframes macroImpactLabelFloatOne {
    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(12px);
    }
}

@keyframes macroImpactLabelFloatTwo {
    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-12px);
    }
}

@keyframes macroImpactMainGlow {
    0%,
    100% {
        opacity: 0.6;
        transform: translateX(-50%) scale(0.95);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.08);
    }
}

@keyframes macroImpactSideGlow {
    0%,
    100% {
        opacity: 0.55;
        transform: translate3d(0, 0, 0) scale(0.95);
    }

    50% {
        opacity: 1;
        transform:
            translate3d(-25px, -18px, 0)
            scale(1.08);
    }
}

@keyframes macroImpactGlowOne {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform:
            translate3d(30px, -22px, 0)
            scale(1.1);
    }
}

@keyframes macroImpactGlowTwo {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform:
            translate3d(-26px, 20px, 0)
            scale(1.08);
    }
}

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

@media (max-width: 1100px) {
    .macro-impact {
        padding: 100px 0;
    }

    .macro-impact__layout {
        grid-template-columns: 1fr;
        gap: 65px;
    }

    .macro-impact__content {
        max-width: 780px;
    }

    .macro-impact__visual {
        width: 100%;
        max-width: 650px;
        margin: 0 auto;
    }
}

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

@media (max-width: 700px) {
    .macro-impact {
        padding: 80px 0;
    }

    .macro-impact__title {
        font-size: clamp(37px, 10vw, 50px);
    }

    .macro-impact__description {
        font-size: 15px;
    }

    .macro-impact__features {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .macro-impact__visual {
        min-height: auto;
        padding: 30px 0 10px;
    }

    .macro-impact__visual::before,
    .macro-impact__visual-orbit,
    .macro-impact__floating-label {
        display: none;
    }

    .macro-impact__core {
        width: 210px;
        height: 210px;
        margin-bottom: 38px;
    }

    .macro-impact__metric {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;

        width: 100%;
        min-width: 0;
        margin-bottom: 14px;

        animation: none;
    }

    .macro-impact__visual {
        display: flex;
        flex-direction: column;
    }

    .macro-impact__core {
        align-self: center;
    }
}

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

@media (max-width: 430px) {
    .macro-impact {
        padding: 70px 0;
    }

    .macro-impact__label {
        font-size: 10px;
    }

    .macro-impact__title {
        font-size: 36px;
    }

    .macro-impact__feature {
        padding: 15px 0;
    }

    .macro-impact__button {
        width: 100%;
    }

    .macro-impact__core {
        width: 185px;
        height: 185px;
    }

    .macro-impact__core-content strong {
        font-size: 30px;
    }
}

/* ======================================
   REDUCED MOTION
====================================== */

@media (prefers-reduced-motion: reduce) {
    .macro-impact *,
    .macro-impact *::before,
    .macro-impact *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .macro-impact [data-site-reveal] {
        opacity: 1;
        transform: none;
    }
}

/* ======================================
   INDUSTRIES WE SERVE
====================================== */

.macro-industries {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(
            circle at 7% 15%,
            rgba(34, 211, 238, 0.12),
            transparent 29%
        ),
        radial-gradient(
            circle at 93% 82%,
            rgba(124, 58, 237, 0.14),
            transparent 31%
        ),
        linear-gradient(
            125deg,
            #020a18 0%,
            #04152f 38%,
            #101545 68%,
            #180d39 100%
        );
}

.macro-industries::before {
    content: "";
    position: absolute;
    top: -230px;
    left: 50%;
    z-index: -2;

    width: 920px;
    height: 500px;

    transform: translateX(-50%);
    border-radius: 50%;
    pointer-events: none;

    background: rgba(37, 99, 235, 0.13);
    filter: blur(125px);

    animation: macroIndustriesMainGlow 8s ease-in-out infinite;
}

.macro-industries::after {
    content: "";
    position: absolute;
    right: -220px;
    bottom: -260px;
    z-index: -2;

    width: 560px;
    height: 560px;

    border-radius: 50%;
    pointer-events: none;

    background: rgba(124, 58, 237, 0.14);
    filter: blur(120px);

    animation: macroIndustriesSideGlow 9s ease-in-out infinite;
}

/* ======================================
   BACKGROUND ORBS
====================================== */

.macro-industries__orb {
    position: absolute;
    z-index: -1;

    border-radius: 50%;
    pointer-events: none;

    filter: blur(55px);
}

.macro-industries__orb--one {
    top: 130px;
    left: -180px;

    width: 390px;
    height: 390px;

    background: rgba(34, 211, 238, 0.1);

    animation: macroIndustriesOrbOne 8s ease-in-out infinite;
}

.macro-industries__orb--two {
    right: -200px;
    bottom: 100px;

    width: 440px;
    height: 440px;

    background: rgba(124, 58, 237, 0.11);

    animation: macroIndustriesOrbTwo 9s ease-in-out infinite;
}

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

.macro-industries__header {
    position: relative;
    z-index: 2;

    max-width: 850px;
    margin: 0 auto 65px;

    text-align: center;
}

.macro-industries__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    margin-bottom: 18px;

    color: var(--cyan);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.macro-industries__label span {
    display: block;

    width: 30px;
    height: 2px;

    border-radius: 30px;

    background: linear-gradient(
        90deg,
        var(--primary-blue),
        var(--cyan)
    );

    box-shadow: 0 0 14px rgba(34, 211, 238, 0.34);

    animation: macroIndustriesLabelLine 2.8s ease-in-out infinite;
}

.macro-industries__title {
    margin: 0;

    color: var(--white);
    font-size: clamp(42px, 5vw, 64px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.macro-industries__title span {
    color: transparent;

    background: linear-gradient(
        100deg,
        var(--light-blue),
        var(--cyan),
        #a78bfa,
        var(--light-blue)
    );

    background-size: 220% auto;
    background-clip: text;
    -webkit-background-clip: text;

    animation: macroIndustriesTitle 5s linear infinite;
}

.macro-industries__description {
    max-width: 680px;
    margin: 23px auto 0;

    color: rgba(255, 255, 255, 0.61);
    font-size: 16px;
    line-height: 1.75;
}

/* ======================================
   WORKSPACE
====================================== */

.macro-industries__workspace {
    position: relative;
    z-index: 3;

    display: grid;
    grid-template-columns: minmax(290px, 0.78fr) minmax(0, 1.55fr);
    gap: 28px;
}

/* Hide native radio buttons */

.macro-industries__workspace > input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
    pointer-events: none;
}

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

.macro-industries__navigation {
    padding: 16px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 25px;

    background: rgba(255, 255, 255, 0.055);

    box-shadow:
        0 28px 65px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.macro-industries__navigation-title {
    display: block;
    padding: 10px 13px 17px;

    color: rgba(255, 255, 255, 0.42);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

/* ======================================
   INDUSTRY TAB
====================================== */

.macro-industry-tab {
    position: relative;

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

    min-height: 74px;
    margin-bottom: 8px;
    padding: 12px 14px;

    overflow: hidden;
    cursor: pointer;

    border: 1px solid transparent;
    border-radius: 17px;

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

.macro-industry-tab:last-child {
    margin-bottom: 0;
}

.macro-industry-tab::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    width: 3px;

    border-radius: 20px;

    background: linear-gradient(
        to bottom,
        var(--primary-blue),
        var(--cyan)
    );

    transform: scaleY(0);

    transition: transform 0.35s ease;
}

.macro-industry-tab:hover {
    transform: translateX(5px);

    border-color: rgba(255, 255, 255, 0.1);

    background: rgba(255, 255, 255, 0.065);
}

.macro-industry-tab:hover::before {
    transform: scaleY(0.55);
}

/* ======================================
   TAB ICON
====================================== */

.macro-industry-tab__icon {
    position: relative;

    display: grid;
    flex: 0 0 45px;
    place-items: center;

    width: 45px;
    height: 45px;

    border: 1px solid rgba(34, 211, 238, 0.16);
    border-radius: 14px;

    background: rgba(34, 211, 238, 0.07);

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

.macro-industry-tab__icon svg {
    width: 21px;
    height: 21px;

    fill: none !important;
    stroke: var(--cyan) !important;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    opacity: 1;
    visibility: visible;

    transition:
        stroke 0.35s ease,
        transform 0.35s ease;
}

.macro-industry-tab__icon svg path,
.macro-industry-tab__icon svg circle,
.macro-industry-tab__icon svg rect,
.macro-industry-tab__icon svg line,
.macro-industry-tab__icon svg polyline {
    fill: none !important;
    stroke: var(--cyan) !important;
}

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

.macro-industry-tab__text {
    min-width: 0;
}

.macro-industry-tab__text strong {
    display: block;

    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    font-weight: 750;
    line-height: 1.3;

    transition: color 0.3s ease;
}

.macro-industry-tab__text small {
    display: block;
    margin-top: 4px;

    color: rgba(255, 255, 255, 0.38);
    font-size: 9px;
    font-weight: 600;
}

/* ======================================
   TAB ARROW
====================================== */

.macro-industry-tab__arrow {
    display: grid;
    flex: 0 0 29px;
    place-items: center;

    width: 29px;
    height: 29px;
    margin-left: auto;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.05);

    transition:
        transform 0.35s ease,
        background 0.35s ease;
}

.macro-industry-tab__arrow svg {
    width: 14px;
    height: 14px;

    fill: none;
    stroke: rgba(255, 255, 255, 0.4);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ======================================
   ACTIVE TAB STATES
====================================== */

#industry-healthcare:checked
~ .macro-industries__navigation
.macro-industry-tab--healthcare,

#industry-finance:checked
~ .macro-industries__navigation
.macro-industry-tab--finance,

#industry-retail:checked
~ .macro-industries__navigation
.macro-industry-tab--retail,

#industry-education:checked
~ .macro-industries__navigation
.macro-industry-tab--education,

#industry-logistics:checked
~ .macro-industries__navigation
.macro-industry-tab--logistics,

#industry-realestate:checked
~ .macro-industries__navigation
.macro-industry-tab--realestate {
    transform: translateX(7px);

    border-color: rgba(34, 211, 238, 0.24);

    background:
        linear-gradient(
            90deg,
            rgba(37, 99, 235, 0.15),
            rgba(34, 211, 238, 0.07)
        );

    box-shadow:
        0 14px 35px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

#industry-healthcare:checked
~ .macro-industries__navigation
.macro-industry-tab--healthcare::before,

#industry-finance:checked
~ .macro-industries__navigation
.macro-industry-tab--finance::before,

#industry-retail:checked
~ .macro-industries__navigation
.macro-industry-tab--retail::before,

#industry-education:checked
~ .macro-industries__navigation
.macro-industry-tab--education::before,

#industry-logistics:checked
~ .macro-industries__navigation
.macro-industry-tab--logistics::before,

#industry-realestate:checked
~ .macro-industries__navigation
.macro-industry-tab--realestate::before {
    transform: scaleY(0.75);
}

#industry-healthcare:checked
~ .macro-industries__navigation
.macro-industry-tab--healthcare
.macro-industry-tab__icon,

#industry-finance:checked
~ .macro-industries__navigation
.macro-industry-tab--finance
.macro-industry-tab__icon,

#industry-retail:checked
~ .macro-industries__navigation
.macro-industry-tab--retail
.macro-industry-tab__icon,

#industry-education:checked
~ .macro-industries__navigation
.macro-industry-tab--education
.macro-industry-tab__icon,

#industry-logistics:checked
~ .macro-industries__navigation
.macro-industry-tab--logistics
.macro-industry-tab__icon,

#industry-realestate:checked
~ .macro-industries__navigation
.macro-industry-tab--realestate
.macro-industry-tab__icon {
    transform: rotate(-6deg) scale(1.06);

    border-color: rgba(255, 255, 255, 0.28);

    background: linear-gradient(
        135deg,
        var(--primary-blue),
        var(--cyan)
    );

    box-shadow:
        0 14px 30px rgba(37, 99, 235, 0.3),
        0 0 22px rgba(34, 211, 238, 0.14);
}

#industry-healthcare:checked
~ .macro-industries__navigation
.macro-industry-tab--healthcare
.macro-industry-tab__icon svg,

#industry-finance:checked
~ .macro-industries__navigation
.macro-industry-tab--finance
.macro-industry-tab__icon svg,

#industry-retail:checked
~ .macro-industries__navigation
.macro-industry-tab--retail
.macro-industry-tab__icon svg,

#industry-education:checked
~ .macro-industries__navigation
.macro-industry-tab--education
.macro-industry-tab__icon svg,

#industry-logistics:checked
~ .macro-industries__navigation
.macro-industry-tab--logistics
.macro-industry-tab__icon svg,

#industry-realestate:checked
~ .macro-industries__navigation
.macro-industry-tab--realestate
.macro-industry-tab__icon svg,

#industry-healthcare:checked
~ .macro-industries__navigation
.macro-industry-tab--healthcare
.macro-industry-tab__icon svg *,

#industry-finance:checked
~ .macro-industries__navigation
.macro-industry-tab--finance
.macro-industry-tab__icon svg *,

#industry-retail:checked
~ .macro-industries__navigation
.macro-industry-tab--retail
.macro-industry-tab__icon svg *,

#industry-education:checked
~ .macro-industries__navigation
.macro-industry-tab--education
.macro-industry-tab__icon svg *,

#industry-logistics:checked
~ .macro-industries__navigation
.macro-industry-tab--logistics
.macro-industry-tab__icon svg *,

#industry-realestate:checked
~ .macro-industries__navigation
.macro-industry-tab--realestate
.macro-industry-tab__icon svg * {
    stroke: var(--white) !important;
}

#industry-healthcare:checked
~ .macro-industries__navigation
.macro-industry-tab--healthcare
.macro-industry-tab__text strong,

#industry-finance:checked
~ .macro-industries__navigation
.macro-industry-tab--finance
.macro-industry-tab__text strong,

#industry-retail:checked
~ .macro-industries__navigation
.macro-industry-tab--retail
.macro-industry-tab__text strong,

#industry-education:checked
~ .macro-industries__navigation
.macro-industry-tab--education
.macro-industry-tab__text strong,

#industry-logistics:checked
~ .macro-industries__navigation
.macro-industry-tab--logistics
.macro-industry-tab__text strong,

#industry-realestate:checked
~ .macro-industries__navigation
.macro-industry-tab--realestate
.macro-industry-tab__text strong {
    color: var(--white);
}

#industry-healthcare:checked
~ .macro-industries__navigation
.macro-industry-tab--healthcare
.macro-industry-tab__arrow,

#industry-finance:checked
~ .macro-industries__navigation
.macro-industry-tab--finance
.macro-industry-tab__arrow,

#industry-retail:checked
~ .macro-industries__navigation
.macro-industry-tab--retail
.macro-industry-tab__arrow,

#industry-education:checked
~ .macro-industries__navigation
.macro-industry-tab--education
.macro-industry-tab__arrow,

#industry-logistics:checked
~ .macro-industries__navigation
.macro-industry-tab--logistics
.macro-industry-tab__arrow,

#industry-realestate:checked
~ .macro-industries__navigation
.macro-industry-tab--realestate
.macro-industry-tab__arrow {
    transform: translateX(3px);

    background: rgba(34, 211, 238, 0.12);
}

/* ======================================
   RIGHT CONTENT
====================================== */

.macro-industries__content {
    position: relative;

    min-height: 600px;
}

/* ======================================
   INDUSTRY PANEL
====================================== */

.macro-industry-panel {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;

    padding: 50px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 28px;

    background:
        radial-gradient(
            circle at 95% 5%,
            rgba(124, 58, 237, 0.18),
            transparent 33%
        ),
        radial-gradient(
            circle at 8% 100%,
            rgba(34, 211, 238, 0.11),
            transparent 34%
        ),
        rgba(255, 255, 255, 0.07);

    box-shadow:
        0 34px 85px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    opacity: 0;
    visibility: hidden;

    transform:
        translateX(35px)
        scale(0.97);

    transition:
        opacity 0.5s ease,
        visibility 0.5s ease,
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.macro-industry-panel::before {
    content: "";
    position: absolute;
    top: -160px;
    right: -130px;

    width: 360px;
    height: 360px;

    border-radius: 50%;

    background: rgba(37, 99, 235, 0.13);
    filter: blur(35px);

    animation: macroIndustryPanelGlow 6s ease-in-out infinite;
}

.macro-industry-panel::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    height: 3px;

    background: linear-gradient(
        90deg,
        var(--primary-blue),
        var(--cyan),
        var(--violet)
    );
}

/* ======================================
   PANEL VISIBILITY
====================================== */

#industry-healthcare:checked
~ .macro-industries__content
.macro-industry-panel--healthcare,

#industry-finance:checked
~ .macro-industries__content
.macro-industry-panel--finance,

#industry-retail:checked
~ .macro-industries__content
.macro-industry-panel--retail,

#industry-education:checked
~ .macro-industries__content
.macro-industry-panel--education,

#industry-logistics:checked
~ .macro-industries__content
.macro-industry-panel--logistics,

#industry-realestate:checked
~ .macro-industries__content
.macro-industry-panel--realestate {
    opacity: 1;
    visibility: visible;

    transform:
        translateX(0)
        scale(1);
}

/* ======================================
   PANEL BACKGROUND NUMBER
====================================== */

.macro-industry-panel__background-number {
    position: absolute;
    right: 28px;
    bottom: -28px;

    color: rgba(255, 255, 255, 0.035);
    font-size: clamp(150px, 17vw, 260px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.1em;

    pointer-events: none;
}

/* ======================================
   PANEL TOP
====================================== */

.macro-industry-panel__top {
    position: relative;
    z-index: 3;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    margin-bottom: 34px;
}

.macro-industry-panel__badge {
    display: inline-flex;
    align-items: center;

    min-height: 33px;
    padding: 0 14px;

    color: var(--cyan);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;

    border: 1px solid rgba(34, 211, 238, 0.18);
    border-radius: 100px;

    background: rgba(34, 211, 238, 0.07);
}

.macro-industry-panel__large-icon {
    display: grid;
    flex: 0 0 78px;
    place-items: center;

    width: 78px;
    height: 78px;

    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 23px;

    background: linear-gradient(
        135deg,
        var(--primary-blue),
        var(--cyan)
    );

    box-shadow:
        0 20px 45px rgba(37, 99, 235, 0.32),
        0 0 35px rgba(34, 211, 238, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);

    animation: macroIndustryIconFloat 4.5s ease-in-out infinite;
}

.macro-industry-panel__large-icon svg {
    width: 35px;
    height: 35px;

    fill: none !important;
    stroke: var(--white) !important;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.macro-industry-panel__large-icon svg * {
    fill: none !important;
    stroke: var(--white) !important;
}

/* ======================================
   PANEL CONTENT
====================================== */

.macro-industry-panel h3 {
    position: relative;
    z-index: 3;

    max-width: 620px;
    margin: 0;

    color: var(--white);
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 790;
    line-height: 1.13;
    letter-spacing: -0.04em;
}

.macro-industry-panel > p {
    position: relative;
    z-index: 3;

    max-width: 650px;
    margin: 20px 0 0;

    color: rgba(255, 255, 255, 0.57);
    font-size: 14px;
    line-height: 1.8;
}

/* ======================================
   SOLUTION PILLS
====================================== */

.macro-industry-panel__solutions {
    position: relative;
    z-index: 3;

    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 30px;
}

.macro-industry-panel__solutions span {
    display: inline-flex;
    align-items: center;

    min-height: 38px;
    padding: 0 14px;

    color: rgba(255, 255, 255, 0.74);
    font-size: 10px;
    font-weight: 700;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;

    background: rgba(255, 255, 255, 0.055);

    transition:
        transform 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease;
}

.macro-industry-panel__solutions span:hover {
    transform: translateY(-4px);

    color: var(--white);

    border-color: rgba(34, 211, 238, 0.26);

    background: rgba(34, 211, 238, 0.09);
}

/* ======================================
   PANEL BOTTOM METRICS
====================================== */

.macro-industry-panel__bottom {
    position: relative;
    z-index: 3;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;

    margin-top: auto;
    padding-top: 38px;
}

.macro-industry-panel__bottom > div {
    padding: 18px;

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

    transition:
        transform 0.3s ease,
        border-color 0.3s ease;
}

.macro-industry-panel__bottom > div:hover {
    transform: translateY(-5px);

    border-color: rgba(34, 211, 238, 0.35);
}

.macro-industry-panel__bottom strong {
    display: block;

    color: var(--white);
    font-size: 15px;
    font-weight: 760;
}

.macro-industry-panel__bottom small {
    display: block;
    margin-top: 5px;

    color: rgba(255, 255, 255, 0.38);
    font-size: 9px;
    font-weight: 600;
}

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

.macro-industries__footer {
    position: relative;
    z-index: 3;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;

    margin-top: 55px;
    padding: 34px 38px;

    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 23px;

    background: rgba(255, 255, 255, 0.06);

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.macro-industries__footer-content > span {
    display: block;
    margin-bottom: 8px;

    color: var(--cyan);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.macro-industries__footer-content h3 {
    max-width: 720px;
    margin: 0;

    color: var(--white);
    font-size: clamp(24px, 3vw, 35px);
    font-weight: 760;
    line-height: 1.25;
    letter-spacing: -0.035em;
}

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

.macro-industries__button {
    position: relative;

    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 54px;
    padding: 0 24px;

    overflow: hidden;

    color: var(--white);
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;

    border-radius: 12px;

    background: linear-gradient(
        135deg,
        var(--primary-blue),
        var(--light-blue)
    );

    box-shadow:
        0 16px 35px rgba(37, 99, 235, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.macro-industries__button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;

    width: 90%;
    height: 100%;

    transform: skewX(-20deg);

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.32),
        transparent
    );

    transition: left 0.65s ease;
}

.macro-industries__button:hover::before {
    left: 140%;
}

.macro-industries__button:hover {
    transform: translateY(-4px);

    box-shadow:
        0 22px 46px rgba(37, 99, 235, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.macro-industries__button svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform 0.3s ease;
}

.macro-industries__button:hover svg {
    transform: translateX(5px);
}

/* ======================================
   REVEAL SUPPORT
====================================== */

.macro-industries [data-site-reveal] {
    opacity: 0;
    transform: translateY(34px);

    transition:
        opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.macro-industries
[data-site-reveal].is-site-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ======================================
   KEYFRAMES
====================================== */

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

    100% {
        background-position: 220% center;
    }
}

@keyframes macroIndustriesLabelLine {
    0%,
    100% {
        width: 30px;
        opacity: 0.7;
    }

    50% {
        width: 43px;
        opacity: 1;
    }
}

@keyframes macroIndustryIconFloat {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-9px) rotate(-4deg);
    }
}

@keyframes macroIndustryPanelGlow {
    0%,
    100% {
        opacity: 0.65;
        transform: scale(0.95);
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}

@keyframes macroIndustriesMainGlow {
    0%,
    100% {
        opacity: 0.6;
        transform: translateX(-50%) scale(0.95);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.08);
    }
}

@keyframes macroIndustriesSideGlow {
    0%,
    100% {
        opacity: 0.55;
        transform: translate3d(0, 0, 0) scale(0.95);
    }

    50% {
        opacity: 1;
        transform:
            translate3d(-24px, -18px, 0)
            scale(1.08);
    }
}

@keyframes macroIndustriesOrbOne {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform:
            translate3d(28px, -22px, 0)
            scale(1.1);
    }
}

@keyframes macroIndustriesOrbTwo {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform:
            translate3d(-24px, 20px, 0)
            scale(1.08);
    }
}

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

@media (max-width: 1000px) {
    .macro-industries {
        padding: 100px 0;
    }

    .macro-industries__workspace {
        grid-template-columns: 1fr;
    }

    .macro-industries__navigation {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .macro-industries__navigation-title {
        grid-column: 1 / -1;
    }

    .macro-industry-tab {
        margin: 0;
    }

    .macro-industry-tab__arrow {
        display: none;
    }

    .macro-industries__content {
        min-height: 620px;
    }
}

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

@media (max-width: 700px) {
    .macro-industries {
        padding: 80px 0;
    }

    .macro-industries__header {
        margin-bottom: 48px;
    }

    .macro-industries__title {
        font-size: clamp(37px, 10vw, 50px);
    }

    .macro-industries__description {
        font-size: 15px;
    }

    .macro-industries__navigation {
        display: flex;
        gap: 10px;

        overflow-x: auto;
        padding: 13px;

        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .macro-industries__navigation::-webkit-scrollbar {
        display: none;
    }

    .macro-industries__navigation-title {
        display: none;
    }

    .macro-industry-tab {
        flex: 0 0 210px;
        min-height: 68px;

        scroll-snap-align: start;
    }

    .macro-industries__content {
        min-height: 690px;
    }

    .macro-industry-panel {
        padding: 30px 25px;
        border-radius: 23px;
    }

    .macro-industry-panel__large-icon {
        width: 65px;
        height: 65px;
        flex-basis: 65px;
        border-radius: 19px;
    }

    .macro-industry-panel__large-icon svg {
        width: 29px;
        height: 29px;
    }

    .macro-industry-panel h3 {
        font-size: clamp(29px, 8vw, 40px);
    }

    .macro-industry-panel__bottom {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .macro-industry-panel__bottom > div {
        padding: 14px 0;
    }

    .macro-industries__footer {
        align-items: flex-start;
        flex-direction: column;

        margin-top: 40px;
        padding: 28px 24px;
    }

    .macro-industries__button {
        width: 100%;
    }
}

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

@media (max-width: 430px) {
    .macro-industries {
        padding: 70px 0;
    }

    .macro-industries__label {
        font-size: 10px;
    }

    .macro-industries__title {
        font-size: 36px;
    }

    .macro-industries__content {
        min-height: 735px;
    }

    .macro-industry-panel {
        padding: 26px 21px;
    }

    .macro-industry-panel__top {
        align-items: flex-start;
    }

    .macro-industry-panel__badge {
        padding: 0 11px;
        font-size: 8px;
    }

    .macro-industry-panel__solutions {
        gap: 8px;
    }

    .macro-industry-panel__solutions span {
        min-height: 34px;
        padding: 0 11px;
        font-size: 9px;
    }
}

/* ======================================
   REDUCED MOTION
====================================== */

@media (prefers-reduced-motion: reduce) {
    .macro-industries *,
    .macro-industries *::before,
    .macro-industries *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .macro-industries [data-site-reveal] {
        opacity: 1;
        transform: none;
    }
}

/* ======================================
   FAQ SECTION
====================================== */

.macro-faq {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(
            circle at 8% 18%,
            rgba(37, 99, 235, 0.1),
            transparent 29%
        ),
        radial-gradient(
            circle at 92% 82%,
            rgba(124, 58, 237, 0.1),
            transparent 31%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7f9ff 50%,
            #eef4ff 100%
        );
}

.macro-faq::before {
    content: "";
    position: absolute;
    top: -250px;
    left: 50%;
    z-index: -2;

    width: 920px;
    height: 520px;

    transform: translateX(-50%);
    border-radius: 50%;
    pointer-events: none;

    background: rgba(37, 99, 235, 0.08);
    filter: blur(120px);

    animation: macroFaqMainGlow 8s ease-in-out infinite;
}

.macro-faq::after {
    content: "";
    position: absolute;
    right: -220px;
    bottom: -270px;
    z-index: -2;

    width: 560px;
    height: 560px;

    border-radius: 50%;
    pointer-events: none;

    background: rgba(124, 58, 237, 0.09);
    filter: blur(120px);

    animation: macroFaqSideGlow 9s ease-in-out infinite;
}

/* ======================================
   BACKGROUND ORBS
====================================== */

.macro-faq__orb {
    position: absolute;
    z-index: -1;

    border-radius: 50%;
    pointer-events: none;
    filter: blur(55px);
}

.macro-faq__orb--one {
    top: 140px;
    left: -180px;

    width: 380px;
    height: 380px;

    background: rgba(34, 211, 238, 0.08);

    animation: macroFaqOrbOne 8s ease-in-out infinite;
}

.macro-faq__orb--two {
    right: -190px;
    bottom: 110px;

    width: 430px;
    height: 430px;

    background: rgba(124, 58, 237, 0.08);

    animation: macroFaqOrbTwo 9s ease-in-out infinite;
}

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

.macro-faq__layout {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns:
        minmax(0, 0.82fr)
        minmax(520px, 1.18fr);

    align-items: start;
    gap: 80px;
}

/* ======================================
   LEFT CONTENT
====================================== */

.macro-faq__content {
    position: sticky;
    top: 110px;

    max-width: 560px;
}

.macro-faq__label {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 18px;

    color: var(--primary-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.macro-faq__label span {
    display: block;

    width: 30px;
    height: 2px;

    border-radius: 30px;

    background: linear-gradient(
        90deg,
        var(--primary-blue),
        var(--cyan)
    );

    box-shadow:
        0 0 14px rgba(37, 99, 235, 0.25);

    animation: macroFaqLabelLine 2.8s ease-in-out infinite;
}

.macro-faq__title {
    margin: 0;

    color: var(--dark-blue);
    font-size: clamp(42px, 5vw, 62px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.macro-faq__title span {
    color: transparent;

    background: linear-gradient(
        100deg,
        var(--primary-blue),
        var(--cyan),
        var(--violet),
        var(--primary-blue)
    );

    background-size: 220% auto;
    background-clip: text;
    -webkit-background-clip: text;

    animation: macroFaqTitleGradient 5s linear infinite;
}

.macro-faq__description {
    max-width: 520px;
    margin: 24px 0 0;

    color: var(--text);
    font-size: 16px;
    line-height: 1.8;
}

/* ======================================
   SUPPORT BOX
====================================== */

.macro-faq__support {
    display: flex;
    align-items: flex-start;
    gap: 16px;

    margin-top: 38px;
    padding: 24px;

    border: 1px solid rgba(37, 99, 235, 0.11);
    border-radius: 20px;

    background: rgba(255, 255, 255, 0.82);

    box-shadow:
        0 18px 45px rgba(8, 32, 72, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 1);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    transition:
        transform 0.4s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.macro-faq__support:hover {
    transform: translateY(-6px);

    border-color: rgba(34, 211, 238, 0.25);

    box-shadow:
        0 26px 56px rgba(8, 32, 72, 0.13),
        0 0 28px rgba(34, 211, 238, 0.06);
}

.macro-faq__support-icon {
    display: grid;
    flex: 0 0 52px;
    place-items: center;

    width: 52px;
    height: 52px;

    border-radius: 16px;

    background: linear-gradient(
        135deg,
        var(--primary-blue),
        var(--cyan)
    );

    box-shadow:
        0 15px 32px rgba(37, 99, 235, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);

    transition: transform 0.35s ease;
}

.macro-faq__support:hover
.macro-faq__support-icon {
    transform: rotate(-7deg) scale(1.08);
}

.macro-faq__support-icon svg {
    width: 24px;
    height: 24px;

    fill: none !important;
    stroke: #ffffff !important;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.macro-faq__support-icon svg * {
    fill: none !important;
    stroke: #ffffff !important;
}

.macro-faq__support span {
    display: block;
    margin-bottom: 7px;

    color: var(--primary-blue);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.macro-faq__support h3 {
    margin: 0;

    color: var(--heading);
    font-size: 18px;
    font-weight: 760;
    line-height: 1.35;
}

.macro-faq__support p {
    margin: 8px 0 0;

    color: var(--text);
    font-size: 11px;
    line-height: 1.65;
}

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

.macro-faq__button {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 54px;
    margin-top: 30px;
    padding: 0 25px;

    overflow: hidden;

    color: #ffffff;
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;

    border-radius: 12px;

    background: linear-gradient(
        135deg,
        var(--primary-blue),
        var(--light-blue)
    );

    box-shadow:
        0 16px 35px rgba(37, 99, 235, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.macro-faq__button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;

    width: 90%;
    height: 100%;

    transform: skewX(-20deg);

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.32),
        transparent
    );

    transition: left 0.65s ease;
}

.macro-faq__button:hover::before {
    left: 140%;
}

.macro-faq__button:hover {
    transform: translateY(-4px);

    box-shadow:
        0 22px 46px rgba(37, 99, 235, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.macro-faq__button svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform 0.3s ease;
}

.macro-faq__button:hover svg {
    transform: translateX(5px);
}

/* ======================================
   ACCORDION
====================================== */

.macro-faq__accordion {
    display: grid;
    gap: 15px;
}

/* ======================================
   FAQ ITEM
====================================== */

.macro-faq__item {
    position: relative;

    overflow: hidden;

    border: 1px solid rgba(8, 32, 72, 0.09);
    border-radius: 20px;

    background: rgba(255, 255, 255, 0.92);

    box-shadow:
        0 16px 40px rgba(8, 32, 72, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 1);

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

.macro-faq__item::before {
    content: "";
    position: absolute;
    top: -100px;
    right: -100px;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(37, 99, 235, 0.12),
        transparent 68%
    );

    opacity: 0;
    transform: scale(0.75);

    transition:
        opacity 0.45s ease,
        transform 0.45s ease;
}

.macro-faq__item::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    height: 3px;

    background: linear-gradient(
        90deg,
        var(--primary-blue),
        var(--cyan),
        var(--violet)
    );

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.4s ease;
}

.macro-faq__item:hover {
    transform: translateY(-4px);

    border-color: rgba(37, 99, 235, 0.17);

    box-shadow:
        0 23px 52px rgba(8, 32, 72, 0.11),
        0 0 25px rgba(34, 211, 238, 0.04);
}

.macro-faq__item[open] {
    border-color: rgba(34, 211, 238, 0.25);

    background: #ffffff;

    box-shadow:
        0 26px 58px rgba(8, 32, 72, 0.13),
        0 0 32px rgba(34, 211, 238, 0.06);
}

.macro-faq__item[open]::before {
    opacity: 1;
    transform: scale(1);
}

.macro-faq__item[open]::after {
    transform: scaleX(1);
}

/* ======================================
   SUMMARY
====================================== */

.macro-faq__item summary {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 16px;

    min-height: 92px;
    padding: 20px 22px;

    cursor: pointer;
    list-style: none;
    outline: none;
    user-select: none;
}

.macro-faq__item summary::-webkit-details-marker {
    display: none;
}

.macro-faq__number {
    display: grid;
    place-items: center;

    width: 46px;
    height: 46px;

    color: var(--primary-blue);
    font-size: 12px;
    font-weight: 850;

    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 14px;

    background: var(--soft-blue);

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

.macro-faq__item[open]
.macro-faq__number {
    color: #ffffff;

    border-color: transparent;

    background: linear-gradient(
        135deg,
        var(--primary-blue),
        var(--cyan)
    );

    transform: rotate(-6deg) scale(1.06);

    box-shadow:
        0 13px 28px rgba(37, 99, 235, 0.25),
        0 0 20px rgba(34, 211, 238, 0.12);
}

.macro-faq__question {
    color: var(--heading);
    font-size: 16px;
    font-weight: 750;
    line-height: 1.45;
    letter-spacing: -0.015em;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.macro-faq__item:hover
.macro-faq__question,
.macro-faq__item[open]
.macro-faq__question {
    color: var(--primary-blue);
    transform: translateX(3px);
}

/* ======================================
   PLUS / MINUS
====================================== */

.macro-faq__toggle {
    position: relative;

    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;

    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 50%;

    background: var(--soft-blue);

    transition:
        transform 0.4s ease,
        background 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.macro-faq__toggle::before,
.macro-faq__toggle::after {
    content: "";
    position: absolute;

    width: 14px;
    height: 2px;

    border-radius: 20px;

    background: var(--primary-blue);

    transition:
        transform 0.35s ease,
        background 0.35s ease;
}

.macro-faq__toggle::after {
    transform: rotate(90deg);
}

.macro-faq__item[open]
.macro-faq__toggle {
    transform: rotate(180deg);

    border-color: transparent;

    background: linear-gradient(
        135deg,
        var(--primary-blue),
        var(--cyan)
    );

    box-shadow:
        0 12px 25px rgba(37, 99, 235, 0.23);
}

.macro-faq__item[open]
.macro-faq__toggle::before,
.macro-faq__item[open]
.macro-faq__toggle::after {
    background: #ffffff;
}

.macro-faq__item[open]
.macro-faq__toggle::after {
    transform: rotate(0deg);
}

/* ======================================
   ANSWER ANIMATION
====================================== */

.macro-faq__answer {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-rows: 0fr;

    opacity: 0;

    transition:
        grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.35s ease;
}

.macro-faq__answer-inner {
    min-height: 0;
    overflow: hidden;
}

.macro-faq__answer p {
    margin: 0;
    padding:
        0
        84px
        26px
        86px;

    color: var(--text);
    font-size: 13px;
    line-height: 1.8;
}

.macro-faq__item[open]
.macro-faq__answer {
    grid-template-rows: 1fr;
    opacity: 1;
}

/* ======================================
   REVEAL SUPPORT
====================================== */

.macro-faq [data-site-reveal] {
    opacity: 0;
    transform: translateY(34px);

    transition:
        opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.macro-faq
[data-site-reveal].is-site-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ======================================
   KEYFRAMES
====================================== */

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

    100% {
        background-position: 220% center;
    }
}

@keyframes macroFaqLabelLine {
    0%,
    100% {
        width: 30px;
        opacity: 0.7;
    }

    50% {
        width: 43px;
        opacity: 1;
    }
}

@keyframes macroFaqMainGlow {
    0%,
    100% {
        opacity: 0.6;
        transform: translateX(-50%) scale(0.95);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.08);
    }
}

@keyframes macroFaqSideGlow {
    0%,
    100% {
        opacity: 0.55;
        transform: translate3d(0, 0, 0) scale(0.95);
    }

    50% {
        opacity: 1;
        transform:
            translate3d(-24px, -18px, 0)
            scale(1.08);
    }
}

@keyframes macroFaqOrbOne {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform:
            translate3d(28px, -22px, 0)
            scale(1.1);
    }
}

@keyframes macroFaqOrbTwo {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform:
            translate3d(-24px, 20px, 0)
            scale(1.08);
    }
}

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

@media (max-width: 1050px) {
    .macro-faq {
        padding: 100px 0;
    }

    .macro-faq__layout {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .macro-faq__content {
        position: relative;
        top: auto;

        max-width: 780px;
    }
}

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

@media (max-width: 700px) {
    .macro-faq {
        padding: 80px 0;
    }

    .macro-faq__layout {
        gap: 48px;
    }

    .macro-faq__title {
        font-size: clamp(37px, 10vw, 50px);
    }

    .macro-faq__description {
        font-size: 15px;
    }

    .macro-faq__item summary {
        grid-template-columns: 42px minmax(0, 1fr) 38px;
        gap: 12px;

        min-height: 84px;
        padding: 18px;
    }

    .macro-faq__number {
        width: 40px;
        height: 40px;

        border-radius: 12px;
    }

    .macro-faq__question {
        font-size: 14px;
    }

    .macro-faq__toggle {
        width: 36px;
        height: 36px;
    }

    .macro-faq__answer p {
        padding:
            0
            20px
            23px
            72px;
    }
}

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

@media (max-width: 430px) {
    .macro-faq {
        padding: 70px 0;
    }

    .macro-faq__label {
        font-size: 10px;
    }

    .macro-faq__title {
        font-size: 36px;
    }

    .macro-faq__support {
        padding: 20px;
    }

    .macro-faq__support-icon {
        width: 47px;
        height: 47px;
        flex-basis: 47px;
    }

    .macro-faq__button {
        width: 100%;
    }

    .macro-faq__item {
        border-radius: 17px;
    }

    .macro-faq__item summary {
        grid-template-columns: 36px minmax(0, 1fr) 34px;
        gap: 10px;

        padding: 15px;
    }

    .macro-faq__number {
        width: 36px;
        height: 36px;

        font-size: 10px;
    }

    .macro-faq__question {
        font-size: 13px;
    }

    .macro-faq__toggle {
        width: 32px;
        height: 32px;
    }

    .macro-faq__toggle::before,
    .macro-faq__toggle::after {
        width: 12px;
    }

    .macro-faq__answer p {
        padding:
            0
            17px
            20px
            61px;

        font-size: 12px;
    }
}

/* ======================================
   REDUCED MOTION
====================================== */

@media (prefers-reduced-motion: reduce) {
    .macro-faq *,
    .macro-faq *::before,
    .macro-faq *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .macro-faq [data-site-reveal] {
        opacity: 1;
        transform: none;
    }
}

/* ======================================
   PRIVACY POLICY BANNER
====================================== */

.macro-policy-banner {
    position: relative;
    min-height: 520px;
    padding: 150px 0 100px;
    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(34, 211, 238, 0.14),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 78%,
            rgba(124, 58, 237, 0.18),
            transparent 30%
        ),
        linear-gradient(
            125deg,
            #020a18 0%,
            #04152f 38%,
            #101545 68%,
            #180d39 100%
        );
}

/* Soft background light only, no rectangular box */

.macro-policy-banner::before {
    content: "";
    position: absolute;
    top: -260px;
    left: 50%;
    z-index: -2;

    width: 920px;
    height: 520px;

    transform: translateX(-50%);
    border-radius: 50%;
    pointer-events: none;

    background: rgba(37, 99, 235, 0.13);
    filter: blur(125px);

    animation: macroPolicyMainGlow 8s ease-in-out infinite;
}

.macro-policy-banner::after {
    content: "";
    position: absolute;
    right: -220px;
    bottom: -280px;
    z-index: -2;

    width: 560px;
    height: 560px;

    border-radius: 50%;
    pointer-events: none;

    background: rgba(124, 58, 237, 0.14);
    filter: blur(120px);

    animation: macroPolicySideGlow 9s ease-in-out infinite;
}

/* ======================================
   BACKGROUND ORBS
====================================== */

.macro-policy-banner__orb {
    position: absolute;
    z-index: -1;

    border-radius: 50%;
    pointer-events: none;
    filter: blur(55px);
}

.macro-policy-banner__orb--one {
    top: 80px;
    left: -170px;

    width: 370px;
    height: 370px;

    background: rgba(34, 211, 238, 0.1);

    animation: macroPolicyOrbOne 8s ease-in-out infinite;
}

.macro-policy-banner__orb--two {
    right: -180px;
    bottom: 50px;

    width: 420px;
    height: 420px;

    background: rgba(124, 58, 237, 0.11);

    animation: macroPolicyOrbTwo 9s ease-in-out infinite;
}

/* ======================================
   MAIN LAYOUT
====================================== */

.macro-policy-banner .macro-container {
    position: relative;
    z-index: 2;

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

/* ======================================
   LEFT CONTENT
====================================== */

.macro-policy-banner__content {
    max-width: 760px;
}

.macro-policy-banner__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 20px;

    color: var(--cyan);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.macro-policy-banner__badge span {
    display: block;

    width: 31px;
    height: 2px;

    border-radius: 20px;

    background: linear-gradient(
        90deg,
        var(--primary-blue),
        var(--cyan)
    );

    box-shadow:
        0 0 14px rgba(34, 211, 238, 0.38);

    animation: macroPolicyBadgeLine 2.8s ease-in-out infinite;
}

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

.macro-policy-banner__title {
    margin: 0;

    color: var(--white);
    font-size: clamp(54px, 7vw, 88px);
    font-weight: 850;
    line-height: 0.98;
    letter-spacing: -0.06em;
}

.macro-policy-banner__title span {
    display: inline-block;

    color: transparent;

    background: linear-gradient(
        100deg,
        var(--light-blue),
        var(--cyan),
        #a78bfa,
        var(--light-blue)
    );

    background-size: 220% auto;
    background-clip: text;
    -webkit-background-clip: text;

    animation: macroPolicyTitleGradient 5s linear infinite;
}

.macro-policy-banner__description {
    max-width: 650px;
    margin: 26px 0 0;

    color: rgba(255, 255, 255, 0.62);
    font-size: 16px;
    line-height: 1.8;
}

/* ======================================
   BREADCRUMB
====================================== */

.macro-policy-banner__breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-top: 34px;
    padding: 11px 16px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;

    background: rgba(255, 255, 255, 0.06);

    box-shadow:
        0 16px 35px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.macro-policy-banner__breadcrumb a,
.macro-policy-banner__breadcrumb span {
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.macro-policy-banner__breadcrumb a {
    color: rgba(255, 255, 255, 0.62);

    transition: color 0.3s ease;
}

.macro-policy-banner__breadcrumb a:hover {
    color: var(--cyan);
}

.macro-policy-banner__breadcrumb span {
    color: var(--white);
}

.macro-policy-banner__breadcrumb svg {
    width: 14px;
    height: 14px;

    fill: none;
    stroke: var(--cyan);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ======================================
   RIGHT VISUAL
====================================== */

.macro-policy-banner__visual {
    position: relative;

    display: grid;
    place-items: center;

    min-height: 360px;
}

/* Circular glow behind shield */

.macro-policy-banner__visual::before {
    content: "";
    position: absolute;

    width: 320px;
    height: 320px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(37, 99, 235, 0.24),
            rgba(34, 211, 238, 0.08) 42%,
            transparent 70%
        );

    filter: blur(3px);

    animation: macroPolicyVisualPulse 5s ease-in-out infinite;
}

/* ======================================
   SHIELD
====================================== */

.macro-policy-banner__shield {
    position: relative;
    z-index: 3;

    display: grid;
    place-items: center;

    width: 190px;
    height: 190px;

    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 52px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.13),
            rgba(255, 255, 255, 0.055)
        );

    box-shadow:
        0 35px 80px rgba(0, 0, 0, 0.32),
        0 0 55px rgba(34, 211, 238, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.13);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    animation: macroPolicyShieldFloat 4.8s ease-in-out infinite;
}

.macro-policy-banner__shield::before {
    content: "";
    position: absolute;
    inset: 15px;

    border: 1px solid rgba(34, 211, 238, 0.17);
    border-radius: 40px;
}

.macro-policy-banner__shield svg {
    position: relative;
    z-index: 2;

    width: 84px;
    height: 84px;

    fill: none !important;
    stroke: var(--white) !important;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;

    filter:
        drop-shadow(0 0 10px rgba(34, 211, 238, 0.5));
}

.macro-policy-banner__shield svg * {
    fill: none !important;
    stroke: var(--white) !important;
}

/* Rotating ring */

.macro-policy-banner__shield-ring {
    position: absolute;
    inset: -23px;

    border: 2px solid transparent;
    border-top-color: var(--cyan);
    border-right-color: var(--primary-blue);
    border-radius: 58px;

    filter:
        drop-shadow(0 0 9px rgba(34, 211, 238, 0.4));

    animation: macroPolicyShieldRing 9s linear infinite;
}

.macro-policy-banner__shield-ring::before {
    content: "";
    position: absolute;
    inset: 9px;

    border: 1px solid transparent;
    border-bottom-color: rgba(167, 139, 250, 0.75);
    border-left-color: rgba(34, 211, 238, 0.45);
    border-radius: 50px;

    animation: macroPolicyShieldRingReverse 7s linear infinite;
}

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

.macro-policy-banner__floating-card {
    position: absolute;
    z-index: 5;

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

    min-width: 176px;
    padding: 13px 15px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.09);

    box-shadow:
        0 22px 48px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.macro-policy-banner__floating-card--one {
    top: 38px;
    left: -10px;

    animation: macroPolicyCardOne 5s ease-in-out infinite;
}

.macro-policy-banner__floating-card--two {
    right: -10px;
    bottom: 35px;

    animation: macroPolicyCardTwo 5.8s ease-in-out infinite;
}

.macro-policy-banner__floating-icon {
    display: grid;
    flex: 0 0 40px;
    place-items: center;

    width: 40px;
    height: 40px;

    border-radius: 12px;

    background: linear-gradient(
        135deg,
        var(--primary-blue),
        var(--cyan)
    );

    box-shadow:
        0 12px 25px rgba(37, 99, 235, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.macro-policy-banner__floating-icon svg {
    width: 19px;
    height: 19px;

    fill: none !important;
    stroke: var(--white) !important;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.macro-policy-banner__floating-icon svg * {
    fill: none !important;
    stroke: var(--white) !important;
}

.macro-policy-banner__floating-card strong {
    display: block;

    color: var(--white);
    font-size: 12px;
    font-weight: 750;
}

.macro-policy-banner__floating-card small {
    display: block;
    margin-top: 4px;

    color: rgba(255, 255, 255, 0.45);
    font-size: 8px;
    font-weight: 600;
}

/* ======================================
   REVEAL SUPPORT
====================================== */

.macro-policy-banner [data-site-reveal] {
    opacity: 0;
    transform: translateY(32px);

    transition:
        opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.macro-policy-banner
[data-site-reveal].is-site-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ======================================
   KEYFRAMES
====================================== */

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

    100% {
        background-position: 220% center;
    }
}

@keyframes macroPolicyBadgeLine {
    0%,
    100% {
        width: 31px;
        opacity: 0.7;
    }

    50% {
        width: 44px;
        opacity: 1;
    }
}

@keyframes macroPolicyShieldFloat {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-13px) rotate(-2deg);
    }
}

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

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

@keyframes macroPolicyVisualPulse {
    0%,
    100% {
        opacity: 0.68;
        transform: scale(0.94);
    }

    50% {
        opacity: 1;
        transform: scale(1.07);
    }
}

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

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

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

    50% {
        transform: translateY(10px);
    }
}

@keyframes macroPolicyMainGlow {
    0%,
    100% {
        opacity: 0.6;
        transform: translateX(-50%) scale(0.95);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.08);
    }
}

@keyframes macroPolicySideGlow {
    0%,
    100% {
        opacity: 0.55;
        transform: translate3d(0, 0, 0) scale(0.95);
    }

    50% {
        opacity: 1;
        transform:
            translate3d(-25px, -18px, 0)
            scale(1.08);
    }
}

@keyframes macroPolicyOrbOne {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform:
            translate3d(28px, -22px, 0)
            scale(1.1);
    }
}

@keyframes macroPolicyOrbTwo {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform:
            translate3d(-24px, 20px, 0)
            scale(1.08);
    }
}

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

@media (max-width: 1000px) {
    .macro-policy-banner {
        padding: 135px 0 90px;
    }

    .macro-policy-banner .macro-container {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .macro-policy-banner__content {
        max-width: 820px;
    }

    .macro-policy-banner__visual {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }
}

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

@media (max-width: 700px) {
    .macro-policy-banner {
        min-height: auto;
        padding: 120px 0 75px;
    }

    .macro-policy-banner .macro-container {
        gap: 48px;
    }

    .macro-policy-banner__title {
        font-size: clamp(50px, 15vw, 70px);
    }

    .macro-policy-banner__description {
        font-size: 15px;
    }

    .macro-policy-banner__visual {
        min-height: 310px;
    }

    .macro-policy-banner__shield {
        width: 165px;
        height: 165px;
        border-radius: 44px;
    }

    .macro-policy-banner__shield svg {
        width: 70px;
        height: 70px;
    }

    .macro-policy-banner__floating-card {
        min-width: 158px;
        padding: 11px 12px;
    }

    .macro-policy-banner__floating-card--one {
        left: 0;
    }

    .macro-policy-banner__floating-card--two {
        right: 0;
    }
}

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

@media (max-width: 460px) {
    .macro-policy-banner {
        padding: 105px 0 65px;
    }

    .macro-policy-banner__badge {
        font-size: 9px;
    }

    .macro-policy-banner__title {
        font-size: 52px;
    }

    .macro-policy-banner__breadcrumb {
        margin-top: 27px;
    }

    .macro-policy-banner__visual {
        min-height: 280px;
    }

    .macro-policy-banner__shield {
        width: 145px;
        height: 145px;
        border-radius: 38px;
    }

    .macro-policy-banner__shield svg {
        width: 60px;
        height: 60px;
    }

    .macro-policy-banner__floating-card {
        min-width: 138px;
        gap: 8px;
        padding: 10px;
    }

    .macro-policy-banner__floating-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .macro-policy-banner__floating-card strong {
        font-size: 10px;
    }

    .macro-policy-banner__floating-card small {
        font-size: 7px;
    }

    .macro-policy-banner__floating-card--one {
        top: 28px;
    }

    .macro-policy-banner__floating-card--two {
        bottom: 20px;
    }
}

/* ======================================
   REDUCED MOTION
====================================== */

@media (prefers-reduced-motion: reduce) {
    .macro-policy-banner *,
    .macro-policy-banner *::before,
    .macro-policy-banner *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .macro-policy-banner [data-site-reveal] {
        opacity: 1;
        transform: none;
    }
}

/* ======================================
   SIMPLE SERVICE & SUPPORT POLICY
====================================== */

.macro-support-policy {
    position: relative;
    padding: 90px 0 100px;

    background: #ffffff;
}

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

.macro-support-policy__header {
    max-width: 900px;
    margin-bottom: 52px;
}

.macro-support-policy__badge {
    display: inline-flex;
    align-items: center;

    min-height: 28px;
    margin-bottom: 14px;
    padding: 0 11px;

    color: var(--primary-blue);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.05em;

    border-radius: 100px;

    background: var(--soft-blue);
}

.macro-support-policy__header h2 {
    margin: 0;

    color: var(--dark-blue);
    font-size: clamp(36px, 5vw, 58px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.macro-support-policy__header p {
    max-width: 820px;
    margin: 19px 0 0;

    color: var(--text);
    font-size: 14px;
    line-height: 1.8;
}

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

.macro-support-policy__content {
    max-width: 930px;
}

/* ======================================
   POLICY ITEM
====================================== */

.macro-support-policy__item {
    padding: 0 0 34px;
    margin-bottom: 34px;

    border-bottom: 1px solid rgba(37, 99, 235, 0.18);
}

.macro-support-policy__item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;

    border-bottom: 0;
}

/* ======================================
   HEADING
====================================== */

.macro-support-policy__item h3 {
    display: flex;
    align-items: baseline;
    gap: 7px;

    margin: 0;

    color: var(--dark-blue);
    font-size: 19px;
    font-weight: 780;
    line-height: 1.35;
    letter-spacing: -0.02em;
}

.macro-support-policy__item h3 span {
    color: var(--primary-blue);
}

/* ======================================
   PARAGRAPH
====================================== */

.macro-support-policy__item p {
    max-width: 850px;
    margin: 13px 0 0;

    color: var(--text);
    font-size: 13px;
    line-height: 1.8;
}

/* ======================================
   LIST
====================================== */

.macro-support-policy__item ul {
    display: grid;
    gap: 9px;

    margin: 18px 0 0;
    padding: 0;

    list-style: none;
}

.macro-support-policy__item li {
    position: relative;

    padding-left: 19px;

    color: var(--text);
    font-size: 12px;
    line-height: 1.65;
}

.macro-support-policy__item li::before {
    content: "";

    position: absolute;
    top: 8px;
    left: 0;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--primary-blue);

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.08);
}

/* ======================================
   REVEAL ANIMATION SUPPORT
====================================== */

.macro-support-policy [data-site-reveal] {
    opacity: 0;
    transform: translateY(24px);

    transition:
        opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.macro-support-policy
[data-site-reveal].is-site-visible {
    opacity: 1;
    transform: translateY(0);
}

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

@media (max-width: 900px) {
    .macro-support-policy {
        padding: 75px 0 85px;
    }

    .macro-support-policy__header {
        margin-bottom: 45px;
    }
}

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

@media (max-width: 600px) {
    .macro-support-policy {
        padding: 60px 0 70px;
    }

    .macro-support-policy__header {
        margin-bottom: 38px;
    }

    .macro-support-policy__header h2 {
        font-size: 36px;
    }

    .macro-support-policy__header p {
        font-size: 13px;
    }

    .macro-support-policy__item {
        margin-bottom: 27px;
        padding-bottom: 27px;
    }

    .macro-support-policy__item h3 {
        font-size: 17px;
    }

    .macro-support-policy__item p {
        font-size: 12px;
    }

    .macro-support-policy__item li {
        font-size: 11px;
    }
}

/* ======================================
   REDUCED MOTION
====================================== */

@media (prefers-reduced-motion: reduce) {
    .macro-support-policy *,
    .macro-support-policy *::before,
    .macro-support-policy *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }

    .macro-support-policy [data-site-reveal] {
        opacity: 1;
        transform: none;
    }
}