:root {
            --primary: #3658a7;
            --primary-dark: #22366f;
            --secondary: #00a47a;
            --secondary-dark: #007e62;
            --dark: #14223b;
            --text: #526170;
            --light: #f4f8fb;
            --line: #dce7ef;
            --white: #ffffff;
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Inter', sans-serif;
            color: var(--text);
            background: linear-gradient(180deg, #ffffff 0%, #f7fbfd 100%);
            overflow-x: hidden;
        }

        h1, h2, h3, h4, h5 {
            font-family: 'Plus Jakarta Sans', sans-serif;
            color: var(--dark);
        }

        a {
            text-decoration: none;
        }

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

        .navbar {
            padding: 12px 0;
            background: rgba(255,255,255,0.97);
            backdrop-filter: blur(14px);
            border-bottom: 1px solid rgba(54,88,167,.12);
            box-shadow: 0 8px 30px rgba(20,34,59,0.07);
            transition: .3s;
        }

        .navbar-brand {
            display: inline-flex;
            align-items: center;
            max-width: 270px;
            padding: 0;
        }

        .brand-logo {
            width: 100%;
            max-height: 58px;
            object-fit: contain;
            object-position: left center;
        }

        .nav-link {
            color: #2f3e55 !important;
            font-weight: 500;
            margin: 0 7px;
        }

        .nav-link:hover {
            color: var(--primary) !important;
        }

        .btn-primary-custom {
            background: var(--secondary);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            font-weight: 600;
            box-shadow: 0 12px 24px rgba(0,164,122,.22);
            transition: .3s;
        }

        .btn-primary-custom:hover {
            background: var(--secondary-dark);
            color: white;
            transform: translateY(-2px);
        }

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

        .hero {
            min-height: 720px;
            padding: 150px 0 100px;
            position: relative;
            background:
                linear-gradient(
                    90deg,
                    rgba(20,34,59,.96) 0%,
                    rgba(34,54,111,.86) 48%,
                    rgba(0,164,122,.30) 100%
                ),
                url("https://images.unsplash.com/photo-1532094349884-543bc11b234d?auto=format&fit=crop&w=2000&q=85")
                center/cover no-repeat;
            display: flex;
            align-items: center;
        }

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

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255,255,255,.13);
            border: 1px solid rgba(255,255,255,.25);
            padding: 9px 15px;
            border-radius: 30px;
            color: #e7fbf5;
            font-size: 14px;
            margin-bottom: 22px;
        }

        .hero h1 {
            color: white;
            font-size: clamp(42px, 6vw, 70px);
            line-height: 1.08;
            font-weight: 800;
            margin-bottom: 25px;
        }

        .hero h1 span {
            color: #42d6ae;
        }

        .hero p {
            color: #dcebef;
            font-size: 18px;
            line-height: 1.8;
            max-width: 680px;
            margin-bottom: 32px;
        }

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

        .btn-hero {
            padding: 14px 26px;
            border-radius: 8px;
            font-weight: 600;
        }

        .btn-hero-primary {
            background: var(--secondary);
            color: white;
            box-shadow: 0 16px 30px rgba(0,164,122,.25);
        }

        .btn-hero-primary:hover {
            background: var(--secondary-dark);
            color: white;
        }

        .btn-hero-outline {
            border: 1px solid rgba(255,255,255,.6);
            color: white;
        }

        .btn-hero-outline:hover {
            background: white;
            color: var(--dark);
        }

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

        section {
            padding: 100px 0;
        }

        .section-label {
            display: inline-block;
            color: var(--primary);
            background: #edf4ff;
            padding: 7px 14px;
            border-radius: 30px;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: .5px;
            margin-bottom: 15px;
        }

        .section-title {
            font-size: 40px;
            font-weight: 800;
            margin-bottom: 20px;
        }

        .section-text {
            font-size: 16px;
            line-height: 1.9;
        }

        .section-text-narrow {
            max-width: 700px;
        }

        /* ================= ABOUT ================= */

        .about-image {
            border-radius: 8px;
            overflow: hidden;
            position: relative;
        }

        .about-image img {
            width: 100%;
            height: 500px;
            object-fit: cover;
        }

        .about-box {
            position: absolute;
            bottom: 25px;
            left: 25px;
            background: white;
            padding: 20px 25px;
            border-radius: 8px;
            box-shadow: 0 10px 30px rgba(0,0,0,.15);
        }

        .about-box strong {
            color: var(--primary);
            font-size: 25px;
            display: block;
        }

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

        .services {
            background: var(--light);
        }

        .service-card {
            height: 100%;
            padding: 32px;
            background: white;
            border: 1px solid var(--line);
            border-radius: 8px;
            box-shadow: 0 10px 28px rgba(20,34,59,.05);
            transition: .3s;
        }

        .service-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 18px 45px rgba(34,54,111,.12);
            border-color: rgba(0,164,122,.35);
        }

        .service-icon {
            width: 58px;
            height: 58px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            background: #eef4ff;
            color: var(--primary);
            font-size: 27px;
            margin-bottom: 22px;
        }

        .service-card h4 {
            font-size: 20px;
            margin-bottom: 12px;
        }

        .service-card p {
            line-height: 1.7;
            margin-bottom: 0;
            font-size: 14px;
        }

        /* ================= STATS ================= */

        .stats {
            background: linear-gradient(135deg, var(--primary-dark), var(--primary));
            padding: 65px 0;
        }

        .stat-box {
            min-height: 145px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
        }

        .stat-box i {
            min-height: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            color: #5fe0c3;
            margin-bottom: 10px;
        }

        .stat-box h3 {
            color: white;
            font-size: 35px;
            line-height: 1;
            margin-bottom: 4px;
        }

        .stat-box p {
            margin: 0;
            color: #d7e5f2;
        }

        /* ================= INDUSTRIES ================= */

        .industry-card {
            position: relative;
            height: 220px;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 25px;
        }

        .industry-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: .5s;
        }

        .industry-card:hover img {
            transform: scale(1.08);
        }

        .industry-overlay {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: flex-end;
            padding: 25px;
            background: linear-gradient(
                transparent,
                rgba(20,34,59,.88)
            );
        }

        .industry-overlay h4 {
            color: white;
            margin: 0;
        }

        /* ================= WHY US ================= */

        .why-list {
            list-style: none;
            padding: 0;
        }

        .why-list li {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            line-height: 1.7;
        }

        .why-list i {
            flex-shrink: 0;
            width: 30px;
            height: 30px;
            background: #eaf8f3;
            color: var(--secondary);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .quality-card {
            padding: 35px;
            border-radius: 8px;
            background: white;
            border: 1px solid var(--line);
            box-shadow: 0 12px 30px rgba(20,34,59,.06);
            height: 100%;
        }

        .quality-card i {
            font-size: 40px;
            color: var(--primary);
            margin-bottom: 20px;
        }

        .quality-image {
            display: block;
            width: 100%;
            max-height: 430px;
            object-fit: cover;
            border-radius: 8px;
            box-shadow: 0 18px 45px rgba(20,34,59,.16);
        }

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

        .cta {
            padding: 80px 0;
            background:
                linear-gradient(
                    100deg,
                    rgba(20,34,59,.97),
                    rgba(34,54,111,.86)
                ),
                url("https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?auto=format&fit=crop&w=1800&q=80")
                center/cover;
        }

        .cta h2 {
            color: white;
            font-size: 40px;
        }

        .cta p {
            color: #e5edf7;
            max-width: 700px;
            margin: auto;
            line-height: 1.8;
        }

        /* ================= CONTACT ================= */

        .contact-card {
            background: white;
            border-radius: 8px;
            padding: 35px;
            border: 1px solid var(--line);
            box-shadow: 0 14px 35px rgba(20,34,59,.06);
            height: 100%;
        }

        .contact-item {
            display: flex;
            gap: 15px;
            margin-bottom: 25px;
        }

        .contact-icon {
            width: 48px;
            height: 48px;
            background: #edf4ff;
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            flex-shrink: 0;
        }

        .contact-item h6 {
            color: var(--dark);
            margin-bottom: 5px;
        }

        .contact-item p {
            margin: 0;
            font-size: 14px;
        }

        .form-control {
            padding: 13px 15px;
            border-radius: 8px;
            border: 1px solid #dbe7ea;
        }

        .form-control:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(54,88,167,.12);
        }

        /* ================= FOOTER ================= */

        footer {
            background: #101b31;
            padding: 65px 0 25px;
            color: #b7c3d3;
        }

        footer h5 {
            color: white;
            margin-bottom: 20px;
        }

        footer a {
            color: #b7c3d3;
            display: block;
            margin-bottom: 10px;
        }

        footer a:hover {
            color: #42d6ae;
        }

        .footer-brand {
            display: inline-flex;
            align-items: center;
            background: white;
            border-radius: 8px;
            padding: 10px 12px;
            max-width: 300px;
        }

        .footer-logo {
            width: 100%;
            max-height: 58px;
            object-fit: contain;
        }

        .copyright {
            border-top: 1px solid rgba(255,255,255,.1);
            margin-top: 45px;
            padding-top: 22px;
            text-align: center;
            font-size: 13px;
        }

        .copyright a {
            color: #42d6ae;
            display: inline;
            font-weight: 700;
            margin-bottom: 0;
        }

        .copyright a:hover {
            color: white;
        }

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

        .floating-buttons {
            position: fixed;
            right: 20px;
            bottom: 20px;
            z-index: 999;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .floating-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 22px;
            box-shadow: 0 5px 20px rgba(0,0,0,.2);
        }

        .call-btn {
            background: var(--primary);
        }

        .whatsapp-btn {
            background: #25D366;
        }

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

        @media(max-width: 991px) {

            .navbar-nav {
                padding-top: 15px;
            }

            .navbar-brand {
                max-width: 230px;
            }

            .hero {
                min-height: 650px;
                padding-top: 130px;
            }

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

        }

        @media(max-width: 767px) {

            section {
                padding: 70px 0;
            }

            .navbar {
                padding: 10px 0;
            }

            .navbar-brand {
                max-width: 195px;
            }

            .brand-logo {
                max-height: 46px;
            }

            .hero {
                min-height: 650px;
                padding-top: 118px;
            }

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

            .hero p {
                font-size: 16px;
            }

            .about-image img {
                height: 350px;
            }

            .stat-box {
                margin-bottom: 35px;
            }

        }