body {
            margin: 0;
            font-family: monospace;
            background: #0a0d0c;
            color: var(--text, #eee);
        }

        /* ===== HERO base ===== */
        .hero {
            position: relative;
            min-height: 78vh;
            display: grid;
            place-items: center;
            text-align: center;
            overflow: hidden;
            color: #fff;
        }

        .hero::after {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(100% 60% at 50% 40%, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .55) 55%, rgba(0, 0, 0, .8) 100%);
            z-index: 1;
        }

        /* ===== Fundo deslizante ===== */
        .hero-bg {
            position: absolute;
            inset: 0;
            z-index: 0;
            overflow: hidden;
        }

        .hero {
            --imgs: 5;
            --stripW: calc(var(--imgs) * 100vw);
        }

        .hero-strip {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: var(--stripW);
            display: flex;
            animation: bgMove 60s linear infinite;
        }

        .hero-strip.clone {
            left: var(--stripW);
        }

        .hero-strip img {
            width: 100vw;
            height: 100%;
            object-fit: cover;
            filter: saturate(1.1) contrast(1.05) brightness(.9);
        }

        @keyframes bgMove {
            from {
                transform: translateX(0);
            }

            to {
                transform: translateX(calc(-1 * var(--stripW)));
            }
        }

        /* ===== Conteúdo ===== */
        .hero-content {
            position: relative;
            z-index: 2;
            max-width: 980px;
            padding: 0 16px;
        }

        .hero .badge {
            display: inline-block;
            margin-bottom: 10px;
            padding: 6px 10px;
            border-radius: 999px;
            border: 1px solid rgba(0, 229, 255, .35);
            background: rgba(0, 0, 0, .25);
            font-size: .85rem;
            letter-spacing: .4px;
        }

        .hero h1 {
            font-size: clamp(2.2rem, 4vw, 3.6rem);
            margin: 6px 0 12px;
            word-wrap: break-word;
        }

        .hero .lead {
            font-size: clamp(1rem, 1.6vw, 1.2rem);
            color: #d7e1de;
            margin: 0 auto 16px;
            line-height: 1.6;
        }

        /* Rotator “terminal” */
        .rotator {
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            color: var(--accent, #00ffae);
            font-size: 1rem;
            min-height: 1.4em;
            margin-bottom: 20px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .caret {
            margin-left: 4px;
            animation: blink 1s steps(1, end) infinite;
        }

        @keyframes blink {
            50% {
                opacity: 0;
            }
        }

        /* Botões */
        .btn-primary,
        .btn-ghost {
            display: inline-block;
            padding: 12px 18px;
            border-radius: 10px;
            font-weight: 700;
            text-decoration: none;
            margin: 6px 6px 0;
            transition: transform .15s ease, opacity .2s ease;
        }

        .btn-primary {
            background: var(--accent, #00ffae);
            color: #000;
        }

        .btn-ghost {
            background: rgba(0, 0, 0, .35);
            color: #fff;
            border: 1px solid rgba(0, 229, 255, .3);
        }

        .btn-primary:hover,
        .btn-ghost:hover {
            transform: translateY(-1px);
            opacity: .95;
        }

        /* ===== Responsividade ===== */
        @media (max-width: 600px) {
            .hero h1 {
                font-size: clamp(1.6rem, 6vw, 2.4rem);
                word-wrap: break-word;
            }

            .hero .lead {
                font-size: 0.95rem;
                line-height: 1.4;
                padding: 0 8px;
            }

            .rotator {
                font-size: 0.9rem;
                white-space: normal;
            }

            .cta a {
                display: block;
                width: 100%;
                max-width: 280px;
                margin: 8px auto;
            }
        }