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

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: Arial, Helvetica, sans-serif;
            background: #0b0d10;
            color: #f2f2f2;
            line-height: 1.6;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        img {
            max-width: 100%;
            display: block;
        }

        .container {
            width: min(1180px, calc(100% - 40px));
            margin: 0 auto;
        }

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

        header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;

            background: rgba(11, 13, 16, 0.9);
            backdrop-filter: blur(12px);

            border-bottom: 1px solid #242830;
        }

        .nav {
            height: 72px;

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

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

        .logo span {
            color: #a6ff00;
        }

        .menu {
            display: flex;
            gap: 28px;
        }

        .menu a {
            color: #c5c8cd;
            font-size: 14px;
            font-weight: 600;

            transition: color 0.2s;
        }

        .menu a:hover {
            color: #a6ff00;
        }

        .menu-button {
            display: none;

            border: none;
            background: none;
            color: white;

            font-size: 28px;
            cursor: pointer;
        }

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

        .hero {
            min-height: 100vh;

            display: flex;
            align-items: center;

            padding-top: 100px;

            background:
                radial-gradient(
                    circle at 80% 20%,
                    rgba(166, 255, 0, 0.12),
                    transparent 35%
                );
        }

        .hero-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;

            align-items: center;
        }

        .hero-label {
            color: #a6ff00;

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

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

            margin-bottom: 20px;
        }

        h1 {
            font-size: clamp(48px, 7vw, 88px);
            line-height: 0.95;

            letter-spacing: -4px;

            margin-bottom: 28px;
        }

        h1 span {
            color: #a6ff00;
        }

        .hero-text {
            color: #a9afb8;

            font-size: 20px;

            max-width: 620px;

            margin-bottom: 35px;
        }

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

        .button {
            display: inline-flex;

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

            min-height: 48px;

            padding: 0 22px;

            border-radius: 10px;

            font-weight: 700;

            border: 1px solid #343941;
        }

        .button-primary {
            background: #a6ff00;
            color: #101400;
            border-color: #a6ff00;
        }

        .button-secondary:hover {
            background: #171a20;
        }

        /* =========================
           IMAGE PLACEHOLDER
        ========================= */

        .photo {
            min-height: 300px;

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

            text-align: center;

            background: #14171c;

            border: 1px solid #292e36;
            border-radius: 22px;

            color: #666d77;

            overflow: hidden;
        }

        .photo img {
            width: 100%;
            height: auto;

            object-fit: contain;
        }

        .photo strong {
            display: block;

            color: #e6e6e6;

            font-size: 18px;

            margin-bottom: 8px;
        }

        /* =========================
           SECTIONS
        ========================= */

        section {
            padding: 50px 0;

            scroll-margin-top: 72px;
        }

        .section-label {
            color: #a6ff00;

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

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

            margin-bottom: 12px;
        }

        h2 {
            font-size: clamp(36px, 5vw, 58px);

            line-height: 1;

            letter-spacing: -2px;

            margin-bottom: 18px;
        }

        .section-description {
            max-width: 720px;

            color: #9da3ac;

            font-size: 18px;

            margin-bottom: 45px;
        }

		/* =========================
		   COMPACT SECTION SPACING
		========================= */

		#team {
			padding-bottom: 35px;
		}

		#competencies {
			padding-top: 35px;
		}

        /* =========================
           TEAM
        ========================= */

        .team-grid {
            display: grid;

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

            gap: 20px;
        }

        .card {
            background: #12151a;

            border: 1px solid #282d35;

            border-radius: 20px;

            padding: 28px;
        }

        .person-photo {
            width: 90px;
            height: 90px;

            border-radius: 50%;

            margin-bottom: 20px;

            background: #1b1f26;

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

            color: #666d77;
        }

        .role {
            color: #a6ff00;

            font-size: 12px;
            font-weight: 800;

            text-transform: uppercase;

            margin-bottom: 5px;
        }

        .card h3 {
            font-size: 22px;

            margin-bottom: 10px;
        }

        .card p {
            color: #969da7;
        }

        /* =========================
           COMPETENCIES
        ========================= */

        .competencies {
            display: grid;

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

            gap: 20px;
        }

        .competency {
            min-height: 190px;
        }

        .competency h3 {
            margin-bottom: 12px;
        }

        .tags {
            margin-top: 20px;
        }

        .tag {
            display: inline-block;

            border: 1px solid #333943;

            border-radius: 20px;

            padding: 5px 10px;

            margin: 3px;

            color: #c8ccd1;

            font-size: 12px;
        }

        /* =========================
           PROJECTS
        ========================= */

        .projects {
            display: grid;

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

            gap: 20px;
        }

        .project {
            overflow: hidden;

            padding: 0;
        }

        .project-image {
            min-height: 220px;

            background: #171a20;

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

            color: #666d77;

            overflow: hidden;
        }

        .project-image img {
            width: 100%;
            height: auto;

            object-fit: contain;
        }

        .project-content {
            padding: 25px;
        }

        /* =========================
           GPAINT
        ========================= */

        #gpaint {
            background:
                linear-gradient(
                    135deg,
                    rgba(166,255,0,0.06),
                    transparent 50%
                );
        }

        .gpaint-title {
            max-width: 900px;
        }

        .gpaint-title h2 {
            font-size: clamp(40px, 6vw, 72px);
        }

        .gpaint-intro {
            color: #aab0b8;

            font-size: 19px;

            max-width: 850px;

            margin-bottom: 45px;
        }

        /* =========================
           FLOW
        ========================= */

        .flow {
            display: grid;

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

            gap: 10px;

            margin-bottom: 40px;
        }

        .flow-item {
            padding: 20px 10px;

            text-align: center;

            background: #12161a;

            border: 1px solid #2c3239;

            border-radius: 12px;

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

        .flow-item:last-child {
            border-color: #a6ff00;

            color: #a6ff00;
        }

        /* =========================
           GPaint content
        ========================= */

        .two-columns {
            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 20px;

            margin-bottom: 25px;
        }

        .scenario {
            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 20px;

            margin-top: 25px;
        }

        .steps {
            display: grid;

            gap: 10px;
        }

        .step {
            display: grid;

            grid-template-columns: 42px 1fr;

            gap: 15px;

            padding: 16px;

            background: #12151a;

            border: 1px solid #282d35;

            border-radius: 14px;
        }

        .step-number {
            width: 42px;
            height: 42px;

            border-radius: 10px;

            background: #a6ff00;

            color: #101400;

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

            font-weight: 900;
        }

        .step h3 {
            font-size: 16px;
        }

        .step p {
            color: #858c96;

            font-size: 14px;
        }

        /* =========================
           RECRUIT
        ========================= */

        .recruit {
            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 20px;

            margin-top: 30px;
        }

        .recruit .card {
            border-color: #3a472f;
        }

        .recruit h3 {
            font-size: 27px;

            margin-bottom: 12px;
        }

        /* =========================
           GALLERY
        ========================= */

        .gallery {
            display: grid;

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

            gap: 12px;

            margin-top: 30px;
        }

        .gallery .photo {
            min-height: 220px;
        }

        .gallery .photo img {
            width: 100%;
            height: auto;

            object-fit: contain;
        }

        /* =========================
           JOIN
        ========================= */

        .join {
            text-align: center;

            padding: 120px 0;

            background:
                radial-gradient(
                    circle at center,
                    rgba(166,255,0,0.10),
                    transparent 45%
                );
        }

        .join h2 {
            max-width: 800px;

            margin: 0 auto 20px;
        }

        .join p {
            max-width: 650px;

            margin: 0 auto 30px;

            color: #999fa8;

            font-size: 18px;
        }

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

        footer {
            padding: 30px 0;

            border-top: 1px solid #242830;

            color: #666d77;

            font-size: 13px;
        }

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

        @media (max-width: 900px) {

            .hero-grid,
            .scenario,
            .two-columns {
                grid-template-columns: 1fr;
            }

            .team-grid,
            .competencies,
            .projects {
                grid-template-columns: 1fr 1fr;
            }

            .flow {
                grid-template-columns: repeat(3, 1fr);
            }

            .gallery {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 700px) {

            .container {
                width: min(100% - 28px, 1180px);
            }

            .menu-button {
                display: block;
            }

            .menu {
                display: none;

                position: absolute;

                top: 72px;
                left: 0;
                right: 0;

                flex-direction: column;

                gap: 0;

                padding: 10px 14px 18px;

                background: #0b0d10;

                border-bottom: 1px solid #242830;
            }

            .menu.open {
                display: flex;
            }

            .menu a {
                padding: 14px;
            }

            .team-grid,
            .competencies,
            .projects,
            .recruit {
                grid-template-columns: 1fr;
            }

            .flow {
                grid-template-columns: 1fr 1fr;
            }

            .gallery {
                grid-template-columns: 1fr;
            }

            section {
                padding: 80px 0;
            }

            h1 {
                letter-spacing: -2px;
            }
        }

        @media (max-width: 430px) {

            .flow {
                grid-template-columns: 1fr;
            }

            .hero-text {
                font-size: 17px;
            }
        }
		
		/* Заголовок изображения в сценарии GPaint */
.scenario-photo-title {
    margin-bottom: 10px;
    text-align: center;
}

.scenario-photo-title strong {
    display: block;
    color: #e6e6e6;
    font-size: 18px;
    margin-bottom: 4px;
}

.scenario-photo-title span {
    color: #666d77;
}