:root {
    --primary: #6ee7b7;
    --primary-hover: #34d399;
    --surface: #0a1929;
    --surface-raised: #0f2847;
    --border: #2c3147;
}

.reveal-node {
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform, filter;
}

@keyframes scrollMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 12px)); }
}

.animate-marquee {
    animation: scrollMarquee 30s linear infinite;
}

@keyframes paneFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.portfolio-preview {
    background: linear-gradient(180deg, #0f2847 0%, #0a1929 100%);
}

.portfolio-preview-hero {
    background: linear-gradient(135deg, rgba(110, 231, 183, 0.15) 0%, transparent 60%);
}

.faq-details summary {
    cursor: pointer;
    list-style: none;
}

.faq-details summary::-webkit-details-marker {
    display: none;
}

.faq-details[open] summary .faq-chevron {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .reveal-node,
    .animate-marquee,
    .checkout-modal-card,
    .modal-overlay,
    #contact-form-panel {
        animation: none !important;
        transition: none !important;
    }

    .reveal-node {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .animate-marquee {
        transform: none !important;
    }
}