:root {
    --bg: #0b1a2a;
    --fg: #ffffff;
    --muted: #e2e8f0;
    --line: rgba(255, 255, 255, 0.18);
    --card: rgba(255, 255, 255, 0.04);
    --hero-bg: url('../assets/banners/rrsecurity/banner_fundo_RRSecurity.jpg');
}

/* :root {
} */


header.pages:has(+ .rrsecurity) > * {
    position: relative;
    z-index: 1;
}

header.pages:has(+ .rrsecurity) > section {
    position: relative;
    isolation: isolate;
    background-image: linear-gradient(
            rgba(16, 35, 107, 0.9),
            rgba(11, 26, 60, 0.65)
        ),
        var(--hero-bg),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cg stroke='white' stroke-opacity='0.08' stroke-width='1'%3E%3Cpath d='M0 40H320M0 80H320M0 120H320M0 160H320M0 200H320M0 240H320M0 280H320'/%3E%3Cpath d='M40 0V320M80 0V320M120 0V320M160 0V320M200 0V320M240 0V320M280 0V320'/%3E%3C/g%3E%3Cg stroke='white' stroke-opacity='0.15' stroke-width='2'%3E%3Cpath d='M0 0L320 320M320 0L0 320'/%3E%3C/g%3E%3C/svg%3E");
    background-size: cover, cover, 300px 300px;
    background-repeat: no-repeat, no-repeat, repeat;
    overflow: hidden;
    background-position: center center, center center, left top;
}

.hero {
    padding: 60px 0;
    background: transparent;
    color: #fff;
    text-align: center;
    border-bottom: 1px solid var(--line);
}

.hero h1 {
    font-size: 38px;
    margin: 0 0 16px;
}

.hero p {
    font-size: 18px;
    max-width: 720px;
    margin: 0 auto 24px;
}

main.rrsecurity {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: var(--bg);
    color: var(--fg);

    .section {
        padding: 48px 0;
        border-bottom: 1px solid var(--line);
    }

    .section h2 {
        margin: 0 0 16px;
        /* font-size: 28px; */
        color: #fff;
    }

    .grid {
        display: grid;
        gap: 18px;
    }

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

    @media (max-width: 768px) {
        .grid.cols-3 {
            grid-template-columns: 1fr;
        }
    }

    .card {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 18px;
    }

    .card h3 {
        margin: 0 0 10px;
        font-size: 20px;
        color: #fff;
    }

    .muted {
        color: var(--muted);
    }

    /* Imagem de fundo do background */

    .bg-image-cyber {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        border-radius: 12px;
        background-image: linear-gradient(
                rgba(16, 35, 107, 0.9),
                rgba(11, 26, 60, 0.65)
            ),
            var(--hero-bg),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cg stroke='white' stroke-opacity='0.08' stroke-width='1'%3E%3Cpath d='M0 40H320M0 80H320M0 120H320M0 160H320M0 200H320M0 240H320M0 280H320'/%3E%3Cpath d='M40 0V320M80 0V320M120 0V320M160 0V320M200 0V320M240 0V320M280 0V320'/%3E%3C/g%3E%3Cg stroke='white' stroke-opacity='0.15' stroke-width='2'%3E%3Cpath d='M0 0L320 320M320 0L0 320'/%3E%3C/g%3E%3C/svg%3E");
        background-size: cover, cover, 300px 300px;
        background-position: center, center, top left;
        background-repeat: no-repeat, no-repeat, repeat;
    }

    .bg-image-cyber > * {
        position: relative;
        z-index: 1;
    }

    /* ----- Features: ícones bonitos (azul-escuro + branco) ----- */
    .grid.cols-4 {
        grid-template-columns: repeat(4, 1fr);
        gap: 28px;
    }

    @media (max-width: 1000px) {
        .grid.cols-4 {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media (max-width: 640px) {
        .grid.cols-4 {
            grid-template-columns: 1fr;
        }
    }

    .features .feature {
        text-align: center;
        padding: 10px 8px;
    }

    .features h3 {
        margin: 10px 0 8px;
        font-size: 20px;
        color: #fff;
    }

    .features p {
        margin: 0;
        color: var(--muted);
    }

    .features .icon {
        width: 6.25em;
        height: 6.25em;
        margin: 0 auto 14px;
        border-radius: 999px;
        display: grid;
        place-items: center;
        color: #fff;
        /* anel “glass” com apenas branco */
        background: radial-gradient(
                60% 60% at 30% 20%,
                rgba(255, 255, 255, 0.18),
                rgba(255, 255, 255, 0) 60%
            ),
            conic-gradient(
                from 210deg,
                rgba(255, 255, 255, 0.22),
                rgba(255, 255, 255, 0.06) 40%,
                rgba(255, 255, 255, 0.22) 100%
            );
        border: 1px solid rgba(255, 255, 255, 0.22);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
        transition: transform 0.2s ease, border-color 0.2s ease,
            box-shadow 0.2s ease;
    }

    .features .icon::after {
        content: '';
        position: absolute;
        width: 84px;
        height: 84px;
        border-radius: 999px;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
        /* sombra suave, ainda minimalista */
    }

    .features .feature:hover .icon {
        transform: translateY(-2px);
        border-color: rgba(255, 255, 255, 0.35);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12),
            0 8px 26px rgba(0, 0, 0, 0.28);
    }

    .features .icon svg {
        width: 46px;
        height: 46px;
    }

    .features .icon svg [stroke] {
        stroke: #fff;
    }

    .features .icon svg [fill] {
        fill: #fff;
    }

    /* grid de 4 colunas para serviços (responsivo) */
    .grid.cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    @media (max-width: 1080px) {
        .grid.cols-4 {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media (max-width: 640px) {
        .grid.cols-4 {
            grid-template-columns: 1fr;
        }
    }

    /* bullets discretos dentro dos cards */
    .card .mini {
        margin: 10px 0 0;
        padding: 0;
        list-style: none;
        color: var(--muted);
        font-size: 14px;
    }

    .card .mini li {
        margin: 4px 0;
    }

    .card .mini li::before {
        content: '• ';
        opacity: 0.6;
    }
}