/* Hero slider: rotates the homepage hero between MZGuard, SecurePass360 and
   RivoCleaner. Each slide re-uses the existing .hero-content / .hero-visual
   markup/CSS from main.css; only positioning + crossfade + dots are added
   here so main.css stays untouched. */

/* main.css's ".hero .container" rule (display:grid, 2 columns) was written
   for a single hero-content/hero-visual pair directly inside .container.
   Now that .hero-slider wraps 3 slides, that grid must apply per-slide
   instead of to the wrapper, or the slides stack/collide. So .hero-slider
   itself stays a plain block, and each .hero-slide carries the 2-column
   grid on its own (only the active one is actually displayed). */
.hero .container {
    display: block;
}

.hero-slider {
    position: relative;
}

.hero-slide {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl, 3rem);
    align-items: center;
    animation: heroSlideIn 0.5s ease;
}

.hero-slide.is-active {
    display: grid;
}

@media (max-width: 1024px) {
    .hero-slide.is-active {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl, 2rem);
    }

    .hero-slide .hero-visual {
        order: -1;
    }
}

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

.hero-slide .hero-visual .dashboard-img,
.hero-slide .hero-visual .shot {
    width: 100%;
    height: auto;
    display: block;
}

.hero-slide[data-product="securepass360"] .hero-visual .dashboard-preview {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

.hero-slide[data-product="rivocleaner"] .hero-visual .dashboard-preview {
    background: radial-gradient(circle at 30% 0%, #1e293b 0%, #0f172a 100%);
}

.hero-slide[data-product="securepass360"] .gradient-text {
    background: linear-gradient(135deg, #60a5fa 0%, #2563eb 55%, #1d4ed8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #2563eb;
}

.hero-slide[data-product="rivocleaner"] .gradient-text {
    background: linear-gradient(135deg, #ff6b66 0%, #e5322d 55%, #b91c1c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #e5322d;
}

.hero-slide[data-product="rivocleaner"] .btn-primary-large {
    background: #e5322d !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 1px rgba(229, 50, 45, 0.5), 0 10px 20px -5px rgba(229, 50, 45, 0.4);
}

.hero-slide[data-product="rivocleaner"] .btn-primary-large:hover {
    background: #c42823 !important;
}

.hero-slide[data-product="securepass360"] .btn-primary-large {
    background: #2563eb !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.5), 0 10px 20px -5px rgba(37, 99, 235, 0.4);
}

.hero-slide[data-product="securepass360"] .btn-primary-large:hover {
    background: #1d4ed8 !important;
}

/* Dots navigation */
.hero-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: var(--spacing-xl, 2rem);
}

.hero-dot {
    width: 28px;
    height: 4px;
    border-radius: 999px;
    border: none;
    background: var(--gray-200, #e5e7eb);
    cursor: pointer;
    padding: 0;
    position: relative;
    overflow: hidden;
    transition: background 0.2s ease;
}

.hero-dot[aria-current="true"] {
    background: var(--gray-300, #d1d5db);
}

.hero-dot[aria-current="true"]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--primary, #2f6feb);
    transform-origin: left;
    animation: heroDotProgress var(--hero-slide-interval, 6s) linear forwards;
}

.hero-dot[aria-current="true"][data-product="rivocleaner"]::after {
    background: #e5322d;
}

.hero-dot[aria-current="true"][data-product="securepass360"]::after {
    background: #2563eb;
}

@keyframes heroDotProgress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@media (max-width: 768px) {
    .hero-slide {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-product-badge {
        justify-content: center;
    }
}