/* Useless Facts Room page styles */

.product-hero {
    background: linear-gradient(135deg, #08101a 0%, #0f1724 60%, #071235 100%);
    color: #e6eef8;
    padding: 3.5rem 0;
    margin-top: 80px;
}

.product-hero .hero-badge {
    background: rgba(59,130,246,0.12);
    color: #60a5fa;
    border: 1px solid rgba(59,130,246,0.18);
    display:inline-flex;
    gap:0.5rem;
    padding:0.4rem 0.8rem;
    border-radius:18px;
    font-weight:700;
}

.product-hero h1 {
    font-size: clamp(2rem,4vw,2.8rem);
    margin: 0.5rem 0 0.5rem;
    color: #fff;
}

.product-tagline {
    color: #cbd5e1;
    margin-bottom: 1rem;
}

/* Reviews / Screenshots grid */
.screenshots-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(1, 1fr);
}

.screenshot-item {
    background: rgba(17,24,39,0.86);
    border: 1px solid rgba(59,130,246,0.12);
    border-radius: 12px;
    padding: 0.75rem;
    text-align: center;
}

.screenshot-item img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 8px;
    display:block;
    margin-bottom:0.75rem;
}

.screenshot-item h4 { color: #fff; margin:0.25rem 0; }
.screenshot-item p { color:#9ca3af; margin:0; }

/* On medium screens show 2 columns, on large show up to 4 */
@media (min-width: 600px) {
    .screenshots-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
    .screenshots-grid { grid-template-columns: repeat(4, 1fr); }
    .screenshot-item img { height: 200px; }
}

/* Download buttons */
.product-download .cta-button {
    border-radius: 12px;
    padding: 1rem 1.5rem;
    min-width: 220px;
}

/* Installation two-column layout */
.download-columns {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
}
.download-card {
    background: rgba(17,24,39,0.86);
    border: 1px solid rgba(59,130,246,0.12);
    padding: 1.25rem;
    border-radius: 12px;
}

@media (min-width: 800px) {
    .download-columns { grid-template-columns: 1fr 1fr; }
}

/* Developer notes and support */
.developer-notes, .support-section {
    background: linear-gradient(180deg, rgba(8,12,20,0.6), rgba(12,18,28,0.6));
    border: 1px solid rgba(59,130,246,0.06);
    padding: 1.5rem;
    border-radius: 12px;
}

.support-section ul { color: #cbd5e1; margin:0; padding-left:1.25rem; }
.support-section li { margin-bottom:0.5rem; }

/* General small tweaks */
.section-header h2 { color: #fff; }
.section-header p { color: #cbd5e1; }

/* Make sure product pages match main color accents */
.cta-button.primary { background: linear-gradient(135deg,#3b82f6,#8b5cf6); color:#fff; }
.cta-button.secondary { background: rgba(59,130,246,0.08); color:#60a5fa; border:1px solid rgba(59,130,246,0.12); }