/* ===========================================================
   Strategy — estilos personalizados (complementam o Tailwind)
   =========================================================== */

:root {
    color-scheme: dark;
}

html {
    scroll-padding-top: 90px; /* compensa o header fixo ao navegar por âncoras */
}

body {
    background-color: #0a0a0f;
}

/* Grade sutil de fundo */
.grid-overlay {
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(circle at 50% 30%, black, transparent 75%);
    -webkit-mask-image: radial-gradient(circle at 50% 30%, black, transparent 75%);
}

/* Header com fundo ao rolar */
[data-header].is-scrolled {
    background-color: rgba(10, 10, 15, 0.8);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Animação de entrada (scroll reveal) */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    transition-delay: var(--delay, 0ms);
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* FAQ: painel expansível via grid-rows */
[data-faq-panel].is-open {
    grid-template-rows: 1fr;
}
[data-faq-btn].is-open [data-faq-icon] {
    transform: rotate(180deg);
}

/* Estrelas preenchidas nos depoimentos */
.fill-gold-400 {
    fill: #ffd25a;
}

/* Scrollbar escura */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #0a0a0f;
}
::-webkit-scrollbar-thumb {
    background: #2a2a38;
    border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
    background: #f6b61c;
}

/* Respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .animate-float {
        animation: none !important;
    }
}