/* =========================================
           NORTH FRAME 9 - BRAND VARIABLES
        ========================================= */

        :root {
            --bg: #0d1117;
            --panel: #161b22;
            --border: #30363d;

            --text: #ffffff;
            --text-muted: #c8d1da;
            --text-light: #8b949e;

            --accent: #4f8cff;
            --accent-hover: #669cff;

            --space-sm: 8px;
            --space-md: 16px;
            --space-lg: 32px;
            --space-xl: 48px;
        }


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

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

        html,
        body {
            min-height: 100%;
        }

        body {
            background: var(--bg);
            color: var(--text);
            font-family: 'Poppins', sans-serif;
            font-size: 15px;
            line-height: 1.6;
        }


        /* =========================================
           TEST PAGE LAYOUT
        ========================================= */

        .site-wrapper {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        main {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 60px 20px;
        }

        .preview-content {
            text-align: center;
        }

        .preview-content h1 {
            font-size: 32px;
            margin-bottom: 12px;
        }

        .preview-content p {
            color: var(--text-light);
        }


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

        .site-footer {
            width: 100%;
            border-top: 1px solid #1a1a1d;
            padding: 40px 20px 20px;
        }

        .footer-container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
        }


        /* =========================================
           FOOTER MAIN ROW
        ========================================= */

        .footer-main {
            display: grid;
            grid-template-columns: 1.6fr 1fr 1fr;
            gap: 70px;
            padding-bottom: 35px;
        }


        /* =========================================
           BRAND COLUMN
        ========================================= */

        .footer-brand {
            max-width: 360px;
        }

        .footer-logo {
            display: inline-flex;
            align-items: center;
            text-decoration: none;
            margin-bottom: 16px;
        }

        /*
         * Temporary text logo for testing.
         * Replace this with your actual North Frame 9
         * SVG/PNG when ready.
         */

        .logo-mark {
            width: 34px;
            height: 34px;
            margin-right: 10px;
            border-radius: 8px;

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

            background: linear-gradient(
                135deg,
                #4f8cff,
                #00aef0
            );

            color: #ffffff;
            font-weight: 700;
            font-size: 17px;
        }

        .logo-text {
            font-size: 20px;
            font-weight: 600;

            background: linear-gradient(
                90deg,
                #4f8cff,
                #00aef0
            );

            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .footer-description {
            color: var(--text-light);
            font-size: 14px;
            line-height: 1.7;
            max-width: 330px;
        }


        /* =========================================
           FOOTER LINK GROUPS
        ========================================= */

        .footer-column h3 {
            color: var(--text);
            font-size: 17px;
            font-weight: 600;
            margin-bottom: 16px;
        }

        .footer-column ul {
            list-style: none;
        }

        .footer-column li {
            margin-bottom: 9px;
        }

        .footer-column a {
            color: var(--text-muted);
            text-decoration: none;
            font-size: 14px;

            transition:
                color 0.2s ease,
                text-shadow 0.2s ease;
        }

        .footer-column a:hover {
            color: var(--accent-hover);
            text-shadow: 0 0 12px rgba(79, 140, 255, 0.35);
        }

        .footer-column a:focus-visible,
        .footer-logo:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 4px;
            border-radius: 4px;
        }


        /* =========================================
           FOOTER BOTTOM / COPYRIGHT
        ========================================= */

        .footer-bottom {
            border-top: 1px solid var(--border);
            padding-top: 18px;

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

            text-align: center;
        }

        .copyright {
            color: var(--text-light);
            font-size: 12px;
        }


        /* =========================================
           TABLET
           768px - 1199px
        ========================================= */

        @media (max-width: 1199px) {

            .footer-main {
                grid-template-columns: 1.4fr 1fr;
                gap: 45px;
            }

            .footer-brand {
                max-width: 100%;
            }
        }


        /* =========================================
           MOBILE
           <= 767px
        ========================================= */

        @media (max-width: 767px) {

            .site-footer {
                padding: 35px 20px 18px;
            }

            .footer-main {
                grid-template-columns: 1fr;
                gap: 30px;
                text-align: center;
            }

            .footer-brand {
                margin: 0 auto;
            }

            .footer-description {
                margin: 0 auto;
            }

            .footer-logo {
                justify-content: center;
            }

            .footer-column h3 {
                margin-bottom: 12px;
            }

            .footer-column li {
                margin-bottom: 7px;
            }

            .footer-bottom {
                padding-top: 18px;
            }
        }


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

        @media (max-width: 400px) {

            .footer-main {
                gap: 26px;
            }

            .logo-text {
                font-size: 18px;
            }

            .footer-description {
                font-size: 13px;
            }

            .footer-column a {
                font-size: 13px;
            }
        }