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

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

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: "Inter", sans-serif;
            background: #111417;
            color: #f2f4f5;
            overflow-x: hidden;
        }


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

        header {
            position: absolute;

            top: 0;
            left: 0;

            width: 100%;

            padding: 28px 5vw;

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

            z-index: 20;

            border-bottom: 1px solid rgba(255,255,255,0.08);
        }

        .logo {
            font-size: 22px;
            font-weight: 800;
            letter-spacing: -1px;
        }

        .logo span {
            color: #8fc7d9;
        }

        nav {
            display: flex;
            gap: 35px;
        }

        nav a {
            color: #b8bec3;

            text-decoration: none;

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

            transition: color 0.25s ease;
        }

        nav a:hover {
            color: #ffffff;
        }


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

        .hero {
            min-height: 100vh;

            display: grid;

            grid-template-columns: 52% 48%;

            position: relative;
        }


        /* ==========================================
           LEVA STRANA
        ========================================== */

        .hero-content {
            position: relative;
            z-index: 5;

            display: flex;
            flex-direction: column;
            justify-content: center;

            padding: 150px 5vw 100px;

            border-right: 1px solid rgba(255,255,255,0.08);
        }

        .eyebrow {
            display: flex;
            align-items: center;
            gap: 12px;

            margin-bottom: 30px;

            font-family: "Roboto Mono", monospace;

            font-size: 12px;

            text-transform: uppercase;
            letter-spacing: 2px;

            color: #8fc7d9;
        }

        .eyebrow::before {
            content: "";

            width: 35px;
            height: 1px;

            background: #8fc7d9;
        }


        h1 {
            max-width: 800px;

            font-size: clamp(55px, 7vw, 105px);

            line-height: 0.95;

            letter-spacing: -5px;

            font-weight: 800;
        }

        h1 span {
            color: #8fc7d9;
        }


        .description {
            max-width: 560px;

            margin-top: 40px;

            color: #aeb4b9;

            font-size: 17px;

            line-height: 1.7;
        }


        /* ==========================================
           DUGME
        ========================================== */

        .button {
            display: inline-flex;

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

            width: fit-content;

            margin-top: 40px;

            padding: 15px 25px;

            border: 1px solid #8fc7d9;

            color: #8fc7d9;

            text-decoration: none;

            font-size: 13px;

            font-weight: 600;

            font-family: "Roboto Mono", monospace;

            transition: all 0.3s ease;
        }

        .button:hover {
            background: #8fc7d9;

            color: #111417;

            transform: translateY(-2px);
        }


        /* ==========================================
           DESNA TEHNIČKA GRAFIKA
        ========================================== */

        .engineering-graphic {
            position: relative;

            overflow: hidden;

            background: #15191c;
        }


        /* ==========================================
           GRID
        ========================================== */

        .engineering-graphic::before {

            content: "";

            position: absolute;

            inset: 0;

            background-image:

                linear-gradient(
                    rgba(143,199,217,0.07) 1px,
                    transparent 1px
                ),

                linear-gradient(
                    90deg,
                    rgba(143,199,217,0.07) 1px,
                    transparent 1px
                );

            background-size: 45px 45px;
        }


        /* ==========================================
           CENTRALNA KONSTRUKCIJA
        ========================================== */

        .technical-object {

            position: absolute;

            width: 430px;
            height: 430px;

            left: 50%;
            top: 50%;

            transform:
                translate(-50%, -50%)
                rotate(-8deg);

        }


        /* veliki krug */

        .technical-object::before {

            content: "";

            position: absolute;

            inset: 0;

            border: 1px solid rgba(143,199,217,0.5);

            border-radius: 50%;
        }


        /* unutrašnji krug */

        .technical-object::after {

            content: "";

            position: absolute;

            width: 260px;
            height: 260px;

            left: 85px;
            top: 85px;

            border: 1px dashed rgba(143,199,217,0.5);

            border-radius: 50%;
        }


        /* ==========================================
           DIJAGONALNE LINIJE
        ========================================== */

        .line {

            position: absolute;

            height: 1px;

            background: #8fc7d9;

            transform-origin: left center;

            opacity: 0.75;
        }

        .line-1 {

            width: 430px;

            top: 215px;
            left: 0;

            transform: rotate(0deg);
        }

        .line-2 {

            width: 430px;

            top: 215px;
            left: 0;

            transform: rotate(90deg);
        }

        .line-3 {

            width: 610px;

            top: 215px;
            left: -90px;

            transform: rotate(45deg);

            opacity: 0.35;
        }

        .line-4 {

            width: 610px;

            top: 215px;
            left: -90px;

            transform: rotate(-45deg);

            opacity: 0.35;
        }


        /* ==========================================
           CENTRALNA TAČKA
        ========================================== */

        .center-point {

            position: absolute;

            width: 14px;
            height: 14px;

            left: 208px;
            top: 208px;

            border-radius: 50%;

            background: #8fc7d9;

            box-shadow:
                0 0 0 6px rgba(143,199,217,0.12),
                0 0 30px rgba(143,199,217,0.4);
        }


        /* ==========================================
           TEHNIČKE OZNAKE
        ========================================== */

        .dimension {

            position: absolute;

            font-family: "Roboto Mono", monospace;

            font-size: 11px;

            color: #8fc7d9;

            letter-spacing: 1px;
        }

        .dimension-1 {

            top: 20%;

            right: 12%;
        }

        .dimension-2 {

            bottom: 18%;

            left: 10%;
        }

        .dimension-3 {

            top: 50%;

            right: 5%;

            transform: rotate(90deg);
        }


        /* ==========================================
           OSA
        ========================================== */

        .axis-x,
        .axis-y {

            position: absolute;

            background: rgba(255,255,255,0.15);
        }

        .axis-x {

            width: 100%;

            height: 1px;

            top: 50%;
        }

        .axis-y {

            width: 1px;

            height: 100%;

            left: 50%;
        }


        /* ==========================================
           DONJI INFO
        ========================================== */

        .technical-info {

            position: absolute;

            bottom: 30px;

            right: 35px;

            font-family: "Roboto Mono", monospace;

            font-size: 10px;

            line-height: 1.8;

            color: #687177;

            text-align: right;
        }


        /* ==========================================
           DONJI LEVI STATUS
        ========================================== */

        .status {

            position: absolute;

            left: 5vw;

            bottom: 30px;

            display: flex;

            align-items: center;

            gap: 10px;

            font-family: "Roboto Mono", monospace;

            font-size: 10px;

            color: #687177;

            z-index: 10;
        }

        .status-dot {

            width: 7px;
            height: 7px;

            border-radius: 50%;

            background: #8fc7d9;

            box-shadow:
                0 0 10px rgba(143,199,217,0.6);
        }


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

        @media (max-width: 900px) {

            nav {
                display: none;
            }

            .hero {

                grid-template-columns: 1fr;

            }

            .hero-content {

                min-height: 75vh;

                border-right: none;

                border-bottom:
                    1px solid rgba(255,255,255,0.08);

                padding:
                    140px 25px 80px;
            }

            h1 {

                font-size:
                    clamp(55px, 15vw, 90px);

                letter-spacing: -4px;
            }

            .engineering-graphic {

                min-height: 550px;
            }

            .status {

                left: 25px;
            }
        }


        @media (max-width: 500px) {

            .technical-object {

                width: 320px;
                height: 320px;
            }

            .technical-object::after {

                width: 190px;
                height: 190px;

                left: 65px;
                top: 65px;
            }

            .line-1,
            .line-2 {

                width: 320px;
            }

            .line-3,
            .line-4 {

                width: 450px;

                left: -65px;
            }

            .center-point {

                left: 153px;
                top: 153px;
            }
        }