/* =========================================================
           GLOBAL
        ========================================================= */

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

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: "Segoe UI", Arial, sans-serif;
            background: #ffffff;
            color: #102033;
            overflow-x: hidden;
        }

        a {
            text-decoration: none;
        }

        img {
            max-width: 100%;
        }

        :root {
            --primary: #00bfe8;
            --primary-dark: #009bc2;
            --navy: #0b1f33;
            --text: #102033;
            --muted: #64748b;
            --light-bg: #f5f9fc;
            --border: #e5edf3;
        }

        .text-primary-custom {
            color: var(--primary) !important;
        }

        .section-padding {
            padding: 100px 0;
        }

        .section-label {
            display: inline-block;
            color: var(--primary-dark);
            font-size: 13px;
            font-weight: 800;
            letter-spacing: 3px;
            text-transform: uppercase;
            margin-bottom: 15px;
        }

        .section-title {
            color: var(--navy);
            font-size: 46px;
            line-height: 1.15;
            font-weight: 750;
            margin-bottom: 20px;
        }

        .section-description {
            color: var(--muted);
            font-size: 17px;
            line-height: 30px;
        }


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

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

            padding: 14px 28px;

            border-radius: 7px;

            background: var(--primary);
            color: #062033;

            font-weight: 700;

            border: 2px solid var(--primary);

            transition: all .3s ease;
        }

        .btn-vivastar:hover {
            background: var(--primary-dark);
            border-color: var(--primary-dark);
            color: white;
            transform: translateY(-3px);
        }

        .btn-vivastar-outline {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;

            padding: 14px 28px;

            border-radius: 7px;

            background: white;
            color: var(--navy);

            font-weight: 650;

            border: 1px solid #cbd8e2;

            transition: all .3s ease;
        }

        .btn-vivastar-outline:hover {
            border-color: var(--primary);
            color: var(--primary-dark);
            transform: translateY(-3px);
        }


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

        .hero {
            position: relative;

            min-height: 720px;

            display: flex;
            align-items: center;

            padding: 150px 0 100px;

            background:
                linear-gradient(
                    90deg,
                    #f7fbfe 0%,
                    #f7fbfe 48%,
                    rgba(247,251,254,.78) 100%
                );

            overflow: hidden;
        }

        .hero::before {
            content: "";

            position: absolute;

            width: 420px;
            height: 420px;

            right: -150px;
            top: -120px;

            background: rgba(0,191,232,.10);

            border-radius: 50%;

            filter: blur(50px);
        }

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

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;

            padding: 8px 15px;

            border: 1px solid rgba(0,191,232,.25);

            background: rgba(0,191,232,.07);

            border-radius: 30px;

            color: var(--primary-dark);

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

            margin-bottom: 25px;
        }

        .hero-badge span {
            width: 8px;
            height: 8px;

            background: var(--primary);

            border-radius: 50%;

            box-shadow: 0 0 10px rgba(0,191,232,.5);
        }

        .hero h1 {
            color: var(--navy);

            font-size: 60px;

            line-height: 1.08;

            font-weight: 800;

            letter-spacing: -2px;

            margin-bottom: 25px;
        }

        .hero h1 span {
            color: var(--primary-dark);
        }

        .hero-description {
            max-width: 650px;

            color: #5f7180;

            font-size: 18px;

            line-height: 31px;

            margin-bottom: 35px;
        }

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


        /* HERO IMAGE */

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

        .hero-image-wrapper {
            position: relative;

            padding: 12px;
        }

        .hero-image {
            width: 100%;
            height: 480px;

            object-fit: cover;

            border-radius: 24px;

            border: 1px solid #dce7ee;

            box-shadow:
                0 25px 60px rgba(13,48,72,.14);
        }

        .hero-floating-card {
            position: absolute;

            left: -35px;
            bottom: 35px;

            min-width: 245px;

            padding: 20px;

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

            border: 1px solid #e1ebf1;

            border-radius: 15px;

            box-shadow:
                0 20px 45px rgba(15,50,75,.15);
        }

        .hero-floating-card i {
            font-size: 29px;
            color: var(--primary-dark);
        }

        .hero-floating-card h5 {
            color: var(--navy);
            margin: 8px 0 3px;
            font-size: 17px;
        }

        .hero-floating-card p {
            margin: 0;
            color: #71808d;
            font-size: 13px;
        }


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

        .trust-bar {
            background: var(--navy);
            padding: 28px 0;
        }

        .trust-item {
            text-align: center;
            color: white;
        }

        .trust-item i {
            color: var(--primary);
            font-size: 24px;
            margin-right: 8px;
        }

        .trust-item span {
            color: #dce8ef;
            font-size: 14px;
            font-weight: 600;
        }


        /* =========================================================
           WHO WE ARE
        ========================================================= */

        .who-we-are {
            background: white;
        }

        .about-image-wrapper {
            position: relative;
        }

        .about-image {
            width: 100%;
            height: 500px;

            object-fit: cover;

            border-radius: 22px;

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

            box-shadow:
                0 20px 55px rgba(16,48,70,.10);
        }

        .about-image-card {
            position: absolute;

            right: -20px;
            bottom: 25px;

            width: 215px;

            padding: 22px;

            background: white;

            border-radius: 15px;

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

            box-shadow:
                0 20px 45px rgba(16,48,70,.14);
        }

        .about-image-card h3 {
            color: var(--primary-dark);

            font-size: 34px;

            font-weight: 800;

            margin-bottom: 5px;
        }

        .about-image-card p {
            color: #687988;

            font-size: 14px;

            line-height: 22px;

            margin: 0;
        }

        .about-points {
            list-style: none;

            padding: 0;

            margin: 28px 0;
        }

        .about-points li {
            display: flex;

            gap: 12px;

            margin-bottom: 14px;

            color: #47596a;

            font-size: 15px;
        }

        .about-points i {
            color: var(--primary-dark);

            font-size: 18px;
        }


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

        .services {
            background: #f5f9fc;
        }

        .services-header {
            max-width: 750px;

            margin: 0 auto 55px;

            text-align: center;
        }

        .service-card {
            height: 100%;

            padding: 32px;

            background: white;

            border: 1px solid #e2ebf1;

            border-radius: 16px;

            transition: all .35s ease;

            box-shadow:
                0 5px 20px rgba(20,55,75,.03);
        }

        .service-card:hover {
            transform: translateY(-8px);

            border-color: rgba(0,191,232,.35);

            box-shadow:
                0 20px 45px rgba(20,55,75,.10);
        }

        .service-icon {
            width: 60px;
            height: 60px;

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

            border-radius: 13px;

            background: #eafaff;

            color: var(--primary-dark);

            font-size: 28px;

            margin-bottom: 22px;
        }

        .service-card h4 {
            color: var(--navy);

            font-size: 20px;

            margin-bottom: 13px;
        }

        .service-card p {
            color: #71808d;

            line-height: 26px;

            font-size: 15px;

            margin: 0;
        }


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

        .technology {
            background: white;
        }

        .tech-image {
            width: 100%;
            height: 500px;

            object-fit: cover;

            border-radius: 22px;

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

            box-shadow:
                0 20px 55px rgba(16,48,70,.10);
        }

        .tech-list {
            margin-top: 30px;
        }

        .tech-item {
            display: flex;

            align-items: flex-start;

            gap: 15px;

            padding: 17px 0;

            border-bottom: 1px solid #e8eef2;
        }

        .tech-item:last-child {
            border-bottom: none;
        }

        .tech-icon {
            min-width: 45px;
            height: 45px;

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

            border-radius: 10px;

            background: #eafaff;

            color: var(--primary-dark);

            font-size: 20px;
        }

        .tech-item h5 {
            color: var(--navy);

            margin: 0 0 5px;

            font-size: 16px;
        }

        .tech-item p {
            margin: 0;

            color: #7b8995;

            font-size: 14px;

            line-height: 22px;
        }


        /* =========================================================
           WHY VIVASTAR
        ========================================================= */

        .why-vivastar {
            background: #f5f9fc;
        }

        .why-card {
            height: 100%;

            padding: 28px;

            background: white;

            border: 1px solid #e3ebf0;

            border-radius: 15px;

            transition: all .3s ease;
        }

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

            border-color: rgba(0,191,232,.3);

            box-shadow:
                0 15px 35px rgba(16,48,70,.08);
        }

        .why-number {
            color: rgba(0,155,194,.22);

            font-size: 36px;

            font-weight: 800;

            margin-bottom: 8px;
        }

        .why-card h5 {
            color: var(--navy);

            font-size: 18px;

            margin-bottom: 12px;
        }

        .why-card p {
            color: #73828e;

            line-height: 25px;

            font-size: 14px;

            margin: 0;
        }


        /* =========================================================
           APPROACH
        ========================================================= */

        .approach {
            background: white;
        }

        .approach-line {
            position: relative;
        }

        .approach-line::before {
            content: "";

            position: absolute;

            top: 35px;

            left: 8%;
            right: 8%;

            height: 1px;

            background: #cde8ef;
        }

        .approach-card {
            position: relative;

            text-align: center;

            z-index: 2;
        }

        .approach-number {
            width: 70px;
            height: 70px;

            margin: 0 auto 20px;

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

            border-radius: 50%;

            background: white;

            border: 2px solid var(--primary);

            color: var(--primary-dark);

            font-weight: 800;

            box-shadow:
                0 0 0 8px white;
        }

        .approach-card h5 {
            color: var(--navy);

            margin-bottom: 9px;
        }

        .approach-card p {
            color: #778692;

            font-size: 14px;

            line-height: 23px;
        }


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

        .cta-section {
            padding: 90px 0;

            background: #f5f9fc;
        }

        .cta-box {
            position: relative;

            padding: 70px 50px;

            text-align: center;

            border-radius: 24px;

            overflow: hidden;

            background:
                linear-gradient(
                    135deg,
                    #0b2439,
                    #102f49
                );

            box-shadow:
                0 25px 60px rgba(10,35,55,.15);
        }

        .cta-box::after {
            content: "";

            position: absolute;

            width: 300px;
            height: 300px;

            right: -100px;
            top: -150px;

            background: rgba(0,191,232,.12);

            border-radius: 50%;
        }

        .cta-box .section-label {
            color: var(--primary);
        }

        .cta-box h2 {
            position: relative;
            z-index: 2;

            color: white;

            font-size: 44px;

            font-weight: 800;

            margin-bottom: 18px;
        }

        .cta-box p {
            position: relative;
            z-index: 2;

            max-width: 700px;

            margin: 0 auto 30px;

            color: #b9c9d5;

            font-size: 16px;

            line-height: 28px;
        }

        .cta-box a {
            position: relative;
            z-index: 3;
        }


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

        @media (max-width: 1199px) {

            .hero h1 {
                font-size: 56px;
            }

            .section-title {
                font-size: 40px;
            }

        }


        @media (max-width: 991px) {

            .hero {
                text-align: center;

                padding-top: 150px;
            }

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

            .hero-buttons {
                justify-content: center;
            }

            .hero-visual {
                margin-top: 50px;
            }

            .hero-floating-card {
                left: 20px;
            }

            .about-image-wrapper {
                margin-bottom: 55px;
            }

            .about-image-card {
                right: 15px;
            }

            .tech-image {
                margin-bottom: 45px;
            }

            .approach-line::before {
                display: none;
            }

        }


        @media (max-width: 767px) {

            .section-padding {
                padding: 75px 0;
            }

            .hero {
                min-height: auto;

                padding: 135px 0 75px;
            }

            .hero h1 {
                font-size: 43px;

                letter-spacing: -1px;
            }

            .hero-description {
                font-size: 16px;

                line-height: 27px;
            }

            .hero-image {
                height: 350px;
            }

            .hero-floating-card {
                left: 10px;

                bottom: 20px;

                min-width: 200px;

                padding: 16px;
            }

            .section-title {
                font-size: 34px;
            }

            .about-image {
                height: 350px;
            }

            .about-image-card {
                width: 180px;
            }

            .service-card {
                padding: 27px;
            }

            .tech-image {
                height: 350px;
            }

            .cta-box {
                padding: 50px 25px;
            }

            .cta-box h2 {
                font-size: 34px;
            }

            .trust-item {
                margin-bottom: 15px;
            }

        }


        @media (max-width: 480px) {

            .hero h1 {
                font-size: 36px;
            }

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

            .hero-buttons a {
                width: 100%;
            }

            .hero-image {
                height: 300px;
            }

            .section-title {
                font-size: 30px;
            }

        }