/* ============================================
   Evaluatd Product Page Styles
   ============================================ */

.evaluatd-hero {
    position: relative;
    padding-top: calc(80px + var(--space-20));
    padding-bottom: var(--space-16);
    text-align: center;
    overflow: hidden;
}

/* Classroom background - slightly more visible than home hero */
.evaluatd-hero-bg {
    position: absolute;
    inset: 0;
    background: url('../assets/images/hero-classroom.jpg') center 30% / cover no-repeat;
    z-index: 0;
    pointer-events: none;
}

.evaluatd-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(10, 14, 26, 0.82) 0%,
        rgba(10, 14, 26, 0.75) 40%,
        rgba(10, 14, 26, 0.88) 70%,
        rgba(10, 14, 26, 0.97) 100%
    );
    z-index: 0;
    pointer-events: none;
}

.evaluatd-hero .section-bg {
    background: radial-gradient(ellipse at 50% 30%, rgba(0, 212, 255, 0.1) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 70%, rgba(124, 92, 252, 0.06) 0%, transparent 50%);
    z-index: 1;
}

.evaluatd-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-8);
    animation: fadeInUp 0.6s var(--ease-out) both;
}

.evaluatd-logo-img {
    height: 64px;
    width: auto;
    object-fit: contain;
}

.evaluatd-hero h1 {
    animation: fadeInUp 0.6s var(--ease-out) 0.1s both;
}

.evaluatd-hero .lead {
    max-width: 600px;
    margin-inline: auto;
    margin-bottom: var(--space-8);
    animation: fadeInUp 0.6s var(--ease-out) 0.2s both;
}

.evaluatd-hero .hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    animation: fadeInUp 0.6s var(--ease-out) 0.3s both;
}

/* Demo sections */
.demo-section {
    position: relative;
}

.demo-section .section-header {
    text-align: left;
    margin-inline: 0;
    max-width: none;
}

.demo-layout {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: var(--space-12);
    align-items: center;
}

.demo-layout.reverse {
    grid-template-columns: 1.4fr 1fr;
}

.demo-layout.reverse .demo-text {
    order: 2;
}

.demo-text h2 {
    margin-bottom: var(--space-4);
}

.demo-text p {
    margin-bottom: var(--space-6);
}

.demo-highlights {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.demo-highlight {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.demo-highlight-icon {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    background: rgba(0, 212, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--accent-primary);
    font-size: 12px;
}

/* Feature grid */
.feature-grid-3x3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

@media (max-width: 1024px) {
    .demo-layout,
    .demo-layout.reverse {
        grid-template-columns: 1fr;
    }

    .demo-layout.reverse .demo-text {
        order: 0;
    }

    .demo-section .section-header {
        text-align: center;
        margin-inline: auto;
    }

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

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

    .evaluatd-hero {
        padding-top: calc(70px + var(--space-12));
        padding-bottom: var(--space-12);
    }
}