/* =========================================
       RESET
    ========================================= */

        *,
        *::before,
        *::after {

            box-sizing: border-box;

            margin: 0;

            padding: 0;

        }

        :root {
            --primary: #2c3e50;
            --secondary: #0f0bdf;
            --light-bg: #f9f9f9;
            --dark-text: #333;
            --light-text: #777;
            --white: #ffffff;
        }


        html {

            scroll-behavior: smooth;

            min-height: 100%;

        }


        body {

            display: flex;

            flex-direction: column;

            min-height: 100vh;

            font-family: "Inter", sans-serif;

            background: #ffffff;

            color: #111827;

            line-height: 1.6;

            overflow-x: hidden;

        }

        main {

            flex: 1;

        }


        img {

            max-width: 100%;

            display: block;

        }


        a {

            text-decoration: none;

            color: inherit;

        }


        button,
        input,
        textarea {

            font: inherit;

        }


        :root {

            /*
         * Brand colours inspired by the NOIRZEN logo
         */

            --brand-blue: #087fc1;
            --brand-blue-dark: #05649a;
            --brand-blue-light: #eaf7fd;

            /* Orange accent */
            --brand-orange: #f58220;
            --brand-orange-dark: #d9650d;
            --brand-orange-light: #fff3e8;

            --navy: #101c2c;
            --text: #17202d;
            --muted: #657184;
            --light-bg: #f7fafc;
            --border: #e5eaf0;
            --white: #ffffff;

            --shadow: 0 18px 50px rgba(15, 39, 64, 0.09);

            --radius: 20px;

            --max-width: 1200px;

        }


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

        .container {

            width: min(100% - 40px, var(--max-width));

            margin-inline: auto;

        }


        section {

            padding: 110px 0;

        }


        .section-label {

            color: var(--brand-blue);

            font-size: 0.76rem;

            font-weight: 800;

            letter-spacing: 0.16em;

            text-transform: uppercase;

            margin-bottom: 16px;

        }


        .section-title {

            font-family: "Space Grotesk", sans-serif;

            color: var(--navy);

            font-size: clamp(2.1rem, 4vw, 3.5rem);

            line-height: 1.08;

            letter-spacing: -0.045em;

            max-width: 720px;

            margin-bottom: 22px;

        }


        .section-description {

            color: var(--muted);

            max-width: 680px;

            font-size: 1.05rem;

        }


        .btn {

            min-height: 52px;

            display: inline-flex;

            align-items: center;

            justify-content: center;

            gap: 10px;

            padding: 0 25px;

            border-radius: 8px;

            border: 1px solid transparent;

            font-weight: 700;

            transition: 0.3s ease;

            cursor: pointer;

        }


        .btn-primary {

            color: #ffffff;

            background: var(--brand-blue);

            box-shadow: 0 8px 22px rgba(8, 127, 193, 0.22);

        }


        .btn-primary:hover {

            background: var(--brand-orange);

            transform: translateY(-3px);

            box-shadow: 0 14px 30px rgba(8, 127, 193, 0.3);

        }


        .btn-outline {

            color: var(--navy);

            border-color: #d5dce4;

            background: #ffffff;

        }


        .btn-outline:hover {

            color: var(--brand-blue);

            border-color: var(--brand-blue);

            transform: translateY(-3px);

        }


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

        .navbar {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            z-index: 1000;

            background: rgba(81, 110, 206, 0.92);

            backdrop-filter: blur(18px);

            border-bottom: 1px solid transparent;

            transition: 0.3s ease;

        }


        .navbar.scrolled {

            background: rgba(255, 255, 255, 0.97);

            border-bottom-color: var(--border);

            box-shadow: 0 5px 25px rgba(15, 39, 64, 0.06);

        }


        .nav-inner {

            min-height: 82px;

            display: flex;

            align-items: center;

            justify-content: space-between;

        }


        /*
     * ONLY THE LOGO IS DISPLAYED.
     * The company name has been removed from beside the logo.
     */

        .logo img {

            width: 80px;

            height: 80px;

            object-fit: contain;

        }


        .nav-links {

            display: flex;

            align-items: center;

            gap: 34px;

            list-style: none;

        }


        .nav-links a {

            color: #354052;

            font-size: 0.9rem;

            font-weight: 600;

            transition: 0.3s ease;

        }


        .nav-links a:hover {

            color: var(--brand-orange);

        }


        .nav-cta {

            color: #ffffff !important;

            background: var(--brand-blue);

            padding: 12px 20px;

            border-radius: 7px;

        }


        .nav-cta:hover {

            color: #ffffff !important;

            background: var(--brand-blue-dark);

        }


        .menu-toggle {

            display: none;

            width: 44px;

            height: 44px;

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

            background: #ffffff;

            color: var(--navy);

            border-radius: 8px;

            cursor: pointer;

            font-size: 1.3rem;

        }


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

        .hero {
            min-height: 820px;

            display: flex;
            align-items: center;

            padding-top: 130px;

            position: relative;
            overflow: hidden;

            background:
                radial-gradient(circle at 85% 25%,
                    rgba(8, 127, 193, 0.10),
                    transparent 30%),

                linear-gradient(135deg,
                    #ffffff 0%,
                    #ffffff 65%,
                    #f1f9fd 100%);
        }


        .hero-grid {
            display: grid;

            grid-template-columns:
                minmax(0, 1.05fr) minmax(400px, 0.95fr);

            align-items: center;

            gap: 65px;
        }


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


        .hero-image-wrapper {
            position: relative;

            min-height: 520px;

            display: flex;
            align-items: center;
        }


        .hero-image {
            position: relative;
            z-index: 2;

            width: 100%;
            height: 340px;

            object-fit: cover;

            /*
     * The camera is located toward the right side
     * of the original image.
     */
            object-position: 68% center;

            border-radius: 28px;

            border: 8px solid #ffffff;

            box-shadow:
                0 25px 70px rgba(15, 39, 64, 0.18);
        }


        /* Blue decorative circle */

        .hero-image-wrapper::before {
            content: "";

            position: absolute;

            width: 180px;
            height: 180px;

            top: -35px;
            right: -35px;

            border-radius: 50%;

            background: var(--brand-blue);

            opacity: 0.15;

            z-index: 0;
        }


        /* Orange decorative block */

        .hero-image-wrapper::after {
            content: "";

            position: absolute;

            width: 115px;
            height: 115px;

            bottom: -28px;
            left: -28px;

            border-radius: 24px;

            background: var(--brand-orange);

            z-index: 0;
        }


        /* Image status badge */

        .hero-image-badge {
            position: absolute;

            z-index: 3;

            left: 25px;
            bottom: 25px;

            display: flex;
            align-items: center;
            gap: 9px;

            padding: 12px 17px;

            border-radius: 999px;

            color: var(--navy);

            background: rgba(255, 255, 255, 0.94);

            box-shadow:
                0 10px 30px rgba(15, 39, 64, 0.18);

            font-size: 0.68rem;
            font-weight: 800;
            letter-spacing: 0.08em;
        }


        .status-dot {
            width: 9px;
            height: 9px;

            border-radius: 50%;

            background: var(--brand-orange);

            box-shadow:
                0 0 0 4px rgba(245, 130, 32, 0.15);
        }


        /* Responsive adjustments for hero */
        @media (max-width: 900px) {

            .hero {
                min-height: auto;
                padding-top: 100px;
                padding-bottom: 42px;
            }

            .hero-grid {
                grid-template-columns: 1fr;
                gap: 24px;
                align-items: start;
            }

            .hero-content {
                max-width: 680px;
                margin-bottom: 8px;
            }

            .hero-image-wrapper {
                min-height: 320px;
                display: block;
            }

            .hero-image {
                height: auto;
                max-height: 420px;
                object-position: center center;
                border-radius: 18px;
            }

            .hero-image-wrapper::before,
            .hero-image-wrapper::after {
                display: none;
            }

            .hero-image-badge {
                left: 16px;
                bottom: 16px;
                font-size: 0.7rem;
                padding: 10px 14px;
            }

            .hero-content h1 {
                font-size: clamp(1.2rem, 5vw, 2rem);
                line-height: 1.08;
                margin-bottom: 12px;
            }

            .hero-eyebrow {
                font-size: 0.95rem;
            }

            .hero-actions {
                display: flex;
                flex-wrap: wrap;
                gap: 12px;
            }

            .hero-actions .btn {
                min-height: 44px;
                padding: 0 18px;
                font-size: 0.95rem;
            }

            .about-grid {
                grid-template-columns: 1fr;
                gap: 32px;
            }

            .about {
                padding-top: 70px;
            }

            .about-content {
                margin-top: 8px;
            }

            .about-image {
                min-height: 220px;
            }

        }

        @media (max-width: 480px) {

            .nav-inner { min-height: 64px; }

            .hero {
                padding-top: 84px;
                padding-bottom: 28px;
            }

            .container { width: calc(100% - 32px); }

            .hero-content h1 {
                font-size: 1.15rem;
                line-height: 1.12;
            }

            .hero-eyebrow {
                font-size: 0.95rem;
            }

            .hero-image {
                max-height: 300px;
                border-radius: 12px;
            }

            .hero-actions {
                display: flex;
                flex-direction: column;
                gap: 12px;
            }

            .hero-actions .btn {
                width: 100%;
                justify-content: center;
            }

            .about {
                padding-top: 60px;
                padding-bottom: 80px;
            }

            .about-content {
                margin-top: 4px;
            }

            .about-image {
                min-height: 260px;
            }

            .about-image-card {
                position: relative;
                left: auto;
                right: auto;
                bottom: auto;
                margin: 16px;
                padding: 16px;
            }

            .about-content .section-label {
                margin-bottom: 10px;
            }

            .feature-list {
                grid-template-columns: 1fr;
            }

        }


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

        .about {

            background: #ffffff;

        }


        .about-grid {

            display: grid;

            grid-template-columns: 0.9fr 1.1fr;

            gap: 80px;

            align-items: center;

        }


        .about-image {

            min-height: 340px;

            border-radius: var(--radius);

            overflow: hidden;

            position: relative;

            background:

                linear-gradient(180deg,

                    rgba(8, 127, 193, 0.05),

                    rgba(16, 28, 44, 0.35)),

                url("https://files.cdn-files-a.com/admin/system_photos_stock/2000_6961ee054f864.jpg") center / cover;

            box-shadow: var(--shadow);

        }


        .about-image::after {

            content: "";

            position: absolute;

            inset: 18px;

            border: 1px solid rgba(255, 255, 255, 0.45);

            border-radius: 14px;

        }


        .about-image-card {

            position: absolute;

            z-index: 2;

            left: 25px;

            right: 25px;

            bottom: 25px;

            padding: 22px;

            border-radius: 14px;

            background: rgba(255, 255, 255, 0.95);

            box-shadow: 0 15px 35px rgba(15, 39, 64, 0.15);

        }


        .about-image-card strong {

            display: block;

            color: var(--navy);

            font-family: "Space Grotesk", sans-serif;

            font-size: 1.25rem;

            margin-bottom: 5px;

        }


        .about-image-card span {

            color: var(--muted);

            font-size: 0.88rem;

        }


        .about-content p {

            color: var(--muted);

            margin-bottom: 18px;

        }


        .feature-list {

            display: grid;

            grid-template-columns: repeat(2, 1fr);

            gap: 14px;

            list-style: none;

            margin-top: 30px;

        }


        .feature-list li {

            display: flex;

            gap: 10px;

            color: #354052;

            font-size: 0.9rem;

        }


        .feature-list li::before {

            content: "✓";

            color: var(--brand-blue);

            font-weight: 800;

        }


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

        .services {

            background: var(--light-bg);

        }


        .services-header {

            display: flex;

            justify-content: space-between;

            align-items: end;

            gap: 30px;

            margin-bottom: 50px;

        }


        .services-grid {

            display: grid;

            grid-template-columns: repeat(4, 1fr);

            gap: 20px;

        }


        .service-card {

            min-height: 310px;

            padding: 30px;

            border-radius: var(--radius);

            background: #ffffff;

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

            box-shadow: 0 8px 25px rgba(15, 39, 64, 0.035);

            transition: 0.35s ease;

        }


        .service-card:hover {

            transform: translateY(-8px);

            border-color: rgba(245, 130, 32, 0.4);

            box-shadow: var(--shadow);

        }


        .service-icon {

            width: 58px;

            height: 58px;

            display: grid;

            place-items: center;

            border-radius: 15px;

            color: var(--brand-blue);

            background: var(--brand-blue-light);

            font-size: 1.6rem;

            margin-bottom: 28px;

        }


        .service-card h3 {

            color: var(--navy);

            font-family: "Space Grotesk", sans-serif;

            font-size: 1.22rem;

            margin-bottom: 12px;

        }


        .service-card p {

            color: var(--muted);

            font-size: 0.9rem;

        }


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

        .security-cta {

            padding: 90px 0;

            background:
                linear-gradient(110deg,
                    var(--brand-blue-dark) 0%,
                    var(--brand-blue) 72%,
                    var(--brand-orange) 100%);
        }


        .cta-box {

            display: flex;

            justify-content: space-between;

            align-items: center;

            gap: 40px;

        }


        .cta-box h2 {

            color: #ffffff;

            font-family: "Space Grotesk", sans-serif;

            font-size: clamp(2rem, 4vw, 3.6rem);

            line-height: 1;

            letter-spacing: -0.05em;

            max-width: 700px;

        }


        .cta-box .btn-primary {

            color: var(--brand-blue-dark);

            background: #ffffff;

            box-shadow: none;

            flex-shrink: 0;

        }


        .cta-box .btn-primary:hover {

            background: #eaf7fd;

        }


        /* =========================================
       TESTIMONIALS
    ========================================= */

        .testimonials {

            background: #ffffff;

        }


        .testimonial-grid {

            display: grid;

            grid-template-columns: repeat(3, 1fr);

            gap: 20px;

            margin-top: 50px;

        }


        .testimonial-card {

            padding: 30px;

            border-radius: var(--radius);

            background: #ffffff;

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

            box-shadow: 0 8px 25px rgba(15, 39, 64, 0.04);

        }


        .stars {

            color: var(--brand-blue);

            letter-spacing: 4px;

            margin-bottom: 20px;

        }


        .testimonial-card p {

            color: var(--muted);

            font-size: 0.95rem;

            margin-bottom: 25px;

        }


        .testimonial-author {

            color: var(--navy);

            font-weight: 700;

        }


        .testimonial-role {

            color: var(--muted);

            font-size: 0.8rem;

        }


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

        .contact {

            background: var(--light-bg);

        }


        .contact-grid {

            display: grid;

            grid-template-columns: 0.8fr 1.2fr;

            gap: 60px;

            margin-top: 50px;

        }


        .contact-info {

            display: grid;

            gap: 18px;

        }


        .contact-item {

            padding: 22px;

            border-radius: 14px;

            background: #ffffff;

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

        }


        .contact-item small {

            display: block;

            color: var(--brand-blue);

            font-size: 0.7rem;

            font-weight: 800;

            letter-spacing: 0.12em;

            text-transform: uppercase;

            margin-bottom: 6px;

        }


        .contact-item a,
        .contact-item span {

            color: #354052;

        }


        .contact-form {

            display: grid;

            gap: 16px;

        }



      /* Footer */
        .footer {
            display: block;
            margin-top: auto;
            background: var(--primary);
            color: white;
            padding: 4rem 0 2.5rem;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2.5rem;
            margin-bottom: 2rem;
        }

        .footer-logo {
            font-size: 1.8rem;
            margin-bottom: 1rem;
        }

        .footer-about p,
        .footer-bottom p {
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 1rem;
            line-height: 1.8;
        }

        .footer-bottom {
            text-align: center;
            padding-top: 2rem;
            border-top: 1px solid rgba(255, 255, 255, 0.12);
            color: #ccc;
            font-size: 0.95rem;
            margin-top: 1rem;
        }

        .footer-logo span {
            color: var(--secondary);
        }

        .footer h4 {
            color: white;
            margin-bottom: 1.5rem;
            font-size: 1.2rem;
        }

        .footer ul {
            list-style: none;
        }

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

        .footer ul a {
            color: #ddd;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .footer ul a:hover {
            color: var(--secondary);
        }

        .social-links {
            margin-top: 1.5rem;
        }

        .social-links a {
            display: inline-block;
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            text-align: center;
            line-height: 40px;
            color: white;
            margin-right: 0.5rem;
            transition: all 0.3s ease;
        }

        .social-links a:hover {
            background: var(--secondary);
            transform: translateY(-3px);
        }


        .footer-bottom {
            text-align: center;
            padding-top: 2rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: #aaa;
            font-size: 0.9rem;
        }


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

        .reveal {

            opacity: 0;

            transform: translateY(30px);

            transition: 0.8s ease;

        }

        @media (max-width: 900px) {
            .reveal {
                transform: translateY(20px);
            }
        }


        .reveal.active {

            opacity: 1;

            transform: translateY(0);

        }


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

        @media (max-width: 1000px) {

            .services-grid {

                grid-template-columns: repeat(2, 1fr);

            }


            .about-grid {

                grid-template-columns: 1fr;

                gap: 45px;

            }


            .testimonial-grid {

                grid-template-columns: 1fr;

            }


            .contact-grid {

                grid-template-columns: 1fr;

            }

        }


        @media (max-width: 760px) {

            .container {

                width: min(100% - 30px, var(--max-width));

            }


            section {

                padding: 80px 0;

            }


            .nav-links {

                position: fixed;

                top: 82px;

                left: 15px;

                right: 15px;

                padding: 15px;

                display: flex;

                flex-direction: column;

                align-items: stretch;

                gap: 0;

                background: #ffffff;

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

                border-radius: 14px;

                box-shadow: var(--shadow);

                opacity: 0;

                visibility: hidden;

                transform: translateY(-15px);

                transition: 0.3s ease;

            }


            .nav-links.active {

                opacity: 1;

                visibility: visible;

                transform: translateY(0);

            }


            .nav-links li {

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

            }


            .nav-links li:last-child {

                border-bottom: 0;

            }


            .nav-links a {

                display: block;

                padding: 15px 5px;

            }


            .nav-cta {

                margin-top: 8px;

                text-align: center;

            }


            .menu-toggle {

                display: block;

            }


            .hero {

                min-height: 760px;

            }


            .hero h1 {

                font-size: clamp(1.5rem, 4vw, 5rem);
                margin-top: 15px;

            }


            .hero-stats {

                gap: 24px;

                margin-top: 45px;

            }


            .services-header {

                display: block;

            }


            .services-header .btn {

                margin-top: 25px;

            }


            .services-grid {

                grid-template-columns: 1fr;

            }


            .feature-list {

                grid-template-columns: 1fr;

            }


            .cta-box {

                display: block;

            }


            .cta-box .btn {

                margin-top: 28px;

            }


            .form-row {

                grid-template-columns: 1fr;

            }


            .footer-inner {

                flex-direction: column;

                align-items: flex-start;

            }

        }