/* 
 * Products Page Styles - Nexra Corppe
 * Standardized with Precision Corporate Theme
 */

.prd-hero { 
    background: #0f172a; 
    background-image: 
        linear-gradient(to right, rgba(15,23,42,0.93) 40%, rgba(15,23,42,0.72) 100%),
        url('/images/products-hero-bg-optimized.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 12rem 0 8rem; 
    color: #fff; 
    border-bottom: 1px solid rgba(255,255,255,0.1); 
}

.prd-hero h1 { 
    font-size: clamp(3rem, 5vw, 5rem); 
    font-weight: 800; 
    line-height: 1.05; 
    letter-spacing: -0.04em; 
    color: #f8fafc; 
    margin-bottom: 1.5rem; 
    max-width: 800px; 
}

.prd-hero p { 
    font-size: 1.25rem; 
    color: #94a3b8; 
    max-width: 600px; 
    line-height: 1.6; 
}

.p-sm { 
    font-size: 0.875rem; 
    text-transform: uppercase; 
    letter-spacing: 0.1em; 
    color: #38bdf8; 
    font-weight: 700; 
    margin-bottom: 1.5rem; 
    display: flex; 
    align-items: center; 
    gap: 1rem; 
}

.p-sm::after { 
    content: ''; 
    height: 1px; 
    width: 40px; 
    background: #38bdf8; 
}

/* Quick Nav */
.prd-quick-nav {
    display: flex; 
    gap: 1rem; 
    margin-top: 3rem; 
    flex-wrap: wrap;
}

.prd-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.8);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.prd-nav-link .dot {
    width: 8px; 
    height: 8px; 
    border-radius: 50%;
}

.prd-nav-link:hover {
    border-color: var(--hover-color, #38bdf8);
    color: var(--hover-color, #38bdf8);
}

/* Product Sections */
.prd-section { padding: 8rem 0; background: #fff; }
.prd-section-alt { padding: 8rem 0; background: #f8fafc; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; }
.prd-section-dark { padding: 8rem 0; background: #0f172a; }

.prd-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 5rem; 
    align-items: center; 
}

.prd-badge { 
    display: inline-block; 
    padding: 0.25rem 0.75rem; 
    font-size: 0.7rem; 
    text-transform: uppercase; 
    letter-spacing: 0.08em; 
    font-weight: 700; 
    margin-bottom: 1.5rem; 
}

.prd-badge.live { background: rgba(16,185,129,0.1); color: #10b981; border: 1px solid rgba(16,185,129,0.3); }
.prd-badge.coming { background: rgba(245,158,11,0.1); color: #f59e0b; border: 1px solid rgba(245,158,11,0.3); }

.prd-h2 { 
    font-size: clamp(2rem, 3.5vw, 3rem); 
    font-weight: 800; 
    color: #0f172a; 
    letter-spacing: -0.02em; 
    line-height: 1.1; 
    margin-bottom: 1rem; 
}

.prd-h2-white { 
    font-size: clamp(2rem, 3.5vw, 3rem); 
    font-weight: 800; 
    color: #f8fafc; 
    letter-spacing: -0.02em; 
    line-height: 1.1; 
    margin-bottom: 1rem; 
}

.prd-p { color: #475569; font-size: 1.125rem; line-height: 1.7; margin-bottom: 2rem; }
.prd-p-white { color: #94a3b8; font-size: 1.125rem; line-height: 1.7; margin-bottom: 2rem; }

.prd-feature-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 1rem; 
    margin-bottom: 2.5rem; 
}

.prd-feat { display: flex; align-items: flex-start; gap: 0.75rem; }
.prd-feat i { color: #2563eb; margin-top: 0.2rem; flex-shrink: 0; }
.prd-feat-white i { color: #38bdf8; }
.prd-feat span { font-size: 0.9rem; color: #475569; font-weight: 500; }
.prd-feat-white span { color: #94a3b8; }

.prd-action-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.prd-link { 
    display: inline-flex; 
    align-items: center; 
    gap: 0.5rem; 
    background: #2563eb; 
    color: #fff; 
    padding: 0.875rem 2rem; 
    font-weight: 700; 
    font-size: 0.875rem; 
    text-transform: uppercase; 
    letter-spacing: 0.05em; 
    text-decoration: none; 
    transition: all 0.2s; 
}

.prd-link:hover { background: #1d4ed8; gap: 1rem; }

.prd-link-outline { 
    display: inline-flex; 
    align-items: center; 
    gap: 0.5rem; 
    background: transparent; 
    color: #38bdf8; 
    padding: 0.875rem 2rem; 
    font-weight: 700; 
    font-size: 0.875rem; 
    text-transform: uppercase; 
    letter-spacing: 0.05em; 
    text-decoration: none; 
    border: 1px solid rgba(56,189,248,0.3); 
    transition: all 0.2s; 
}

.prd-link-outline:hover { background: rgba(56,189,248,0.1); }

.prd-visual { 
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%); 
    border: 1px solid #334155; 
    aspect-ratio: 16/10; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    position: relative; 
    overflow: hidden; 
}

.prd-visual-inner { text-align: center; }
.prd-visual-icon { font-size: 6rem; color: rgba(148,163,184,0.2); }
.prd-visual::after { 
    content: ''; 
    position: absolute; 
    bottom: 0; left: 0; right: 0; 
    height: 1px; 
    background: linear-gradient(90deg, transparent, #38bdf8, transparent); 
}

/* CTA */
.prd-cta { 
    background: #2563eb; 
    padding: 6rem 0; 
    text-align: center; 
}

.prd-cta h2 { 
    font-size: clamp(2rem, 4vw, 3.5rem); 
    font-weight: 800; 
    color: #fff; 
    margin-bottom: 1.5rem; 
    letter-spacing: -0.03em; 
}

.prd-cta p { 
    color: rgba(255,255,255,0.8); 
    font-size: 1.125rem; 
    max-width: 600px; 
    margin: 0 auto 3rem; 
}

.prd-cta a { 
    background: #fff; 
    color: #2563eb; 
    display: inline-flex; 
    align-items: center; 
    gap: 0.75rem; 
    padding: 1rem 2.5rem; 
    font-weight: 700; 
    text-decoration: none; 
    transition: all 0.2s; 
}

.prd-cta a:hover { 
    background: #f8fafc; 
}

/* Mobile Responsiveness */
@media (max-width: 1024px) {
    .prd-grid { gap: 3rem; }
}

@media (max-width: 960px) {
    .prd-hero { padding: 8rem 0 4rem; }
    .prd-section, .prd-section-alt, .prd-section-dark { padding: 5rem 0; }
    .prd-grid { grid-template-columns: 1fr; text-align: center; }
    .prd-grid > div:first-child { order: 2; }
    .prd-visual { order: 1; }
    .prd-section-alt .prd-grid > div:first-child { order: 1; }
    .prd-section-alt .prd-grid > div:last-child { order: 2; }
    
    /* Correct ordering logic for alternating rows on mobile */
    .prd-grid { display: flex; flex-direction: column; }
    .prd-content { order: 2; }
    .prd-visual { order: 1; width: 100%; }
    
    .prd-feature-grid { grid-template-columns: 1fr 1fr; text-align: left; }
    .prd-action-row { justify-content: center; }
}

@media (max-width: 768px) {
    .prd-feature-grid { grid-template-columns: 1fr; }
    .prd-feat { justify-content: center; text-align: center; }
}

@media (max-width: 480px) {
    .prd-hero h1 { font-size: 2.25rem; }
    .prd-h2, .prd-h2-white { font-size: 1.75rem; }
    .prd-link, .prd-link-outline { width: 100%; justify-content: center; }
}