* {
            box-sizing: border-box;
        }

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

        body {
            font-family: Arial, Helvetica, sans-serif;
            background-color: #171720;
        }

        .hero {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 2rem;
            overflow: hidden;
            background-image:
                linear-gradient(
                    rgba(12, 12, 18, 0.15),
                    rgba(12, 12, 18, 0.15)
                ),
                url("/bg.jpg");
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        .hero__content {
            position: relative;
            z-index: 1;
            width: min(900px, 100%);
            padding: 2rem 3rem;
            text-align: center;
            background: rgba(15, 15, 22, 0.18);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 1.5rem;
            backdrop-filter: blur(4px);
        }

        .hero__title {
            margin: 0;
            color: #ffffff;
            font-size: clamp(1.5rem, 4vw, 4.5rem);
            font-weight: 700;
            line-height: 1.1;
            letter-spacing: -0.03em;
            text-shadow:
                0 2px 10px rgba(0, 0, 0, 0.55),
                0 8px 30px rgba(0, 0, 0, 0.35);
        }

        @media (max-width: 700px) {
            .hero {
                padding: 1.5rem;
                background-position: center;
            }

            .hero__content {
                max-width: 90%;
            }
        }