:root {
            --bg: #050506;
            --bg-soft: #0c0c0f;
            --panel: rgba(255,255,255,0.045);
            --panel-strong: rgba(255,255,255,0.075);
            --text: #f7f4ea;
            --muted: #bdb7a7;
            --line: rgba(255,255,255,0.105);
            --yellow: #ffcc00;
            --yellow-2: #ffb800;
            --cream: #f5f1e6;
            --black: #050506;
            --shadow: 0 24px 75px rgba(0,0,0,0.5);
            --radius: 24px;
            --radius-lg: 36px;
            --max: 1240px;
            --font-main: Inter, Arial, Helvetica, sans-serif;
        }
 
        .hero {
            padding: 88px 0 50px;
        }

        .hero-grid {
            display: grid;
            grid-template-columns: 1.04fr 0.96fr;
            gap: 44px;
            align-items: center;
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 9px 15px;
            border: 1px solid rgba(255,255,255,0.10);
            border-radius: 999px;
            color: var(--muted);
            background: rgba(255,255,255,0.035);
            margin-bottom: 24px;
            font-size: 0.9rem;
        }

        .pulse-dot {
            width: 9px;
            height: 9px;
            border-radius: 999px;
            background: var(--yellow);
            box-shadow: 0 0 16px rgba(255,204,0,0.72);
        }

        .hero h1 {
            font-size: clamp(3rem, 6.9vw, 6.45rem);
            line-height: 0.91;
            letter-spacing: -3px;
            font-weight: 950;
            margin-bottom: 24px;
        }

        .hero h1 span {
            color: var(--yellow);
        }

        .hero p.lead {
            font-size: 1.15rem;
            color: var(--muted);
            max-width: 700px;
            margin-bottom: 28px;
        }

        .hero-points {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 18px;
        }

        .hero-points span {
            padding: 10px 14px;
            border-radius: 999px;
            background: rgba(255,255,255,0.045);
            border: 1px solid rgba(255,255,255,0.09);
            color: #e8e1ce;
            font-size: 0.92rem;
        }

        .hero-visual {
            position: relative;
        }


.hero-product {
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: center;
    overflow: hidden;

    background-image: url('/_system/assets/images/products/background.webp');
    background-size: cover;
    background-position: 78% center; /* pushes product box further right */
    background-repeat: no-repeat;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(5,5,6,0.98) 0%,
            rgba(5,5,6,0.96) 20%,
            rgba(5,5,6,0.88) 40%,
            rgba(5,5,6,0.68) 58%,
            rgba(5,5,6,0.38) 75%,
            rgba(5,5,6,0.12) 100%
        );
}


.hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(320px, 620px);
}

.hero-copy {
    max-width: 620px;
}

.hero-copy h1,
.hero-copy p,
.hero-copy .eyebrow,
.hero-copy .hero-points {
    position: relative;
    z-index: 2;
}

@media (max-width: 980px) {
    .hero-product {
        min-height: auto;
        padding: 120px 0 80px;
        background-position: 72% center;
    }

    .hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(5,5,6,0.92) 0%,
                rgba(5,5,6,0.82) 35%,
                rgba(5,5,6,0.65) 100%
            );
    }

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