/* ============================================
   PAGES / HOME — الصفحة الرئيسية
   index.php
   ============================================ */

/* ===== HERO ===== */
.export-hero {
    position: relative;
    background: linear-gradient(135deg, var(--export-primary) 0%, var(--export-primary-light) 50%, var(--export-sky) 100%);
    color: var(--export-text-white);
    padding: 80px 24px 100px;
    overflow: hidden;
}

.export-hero-inner {
    max-width: var(--export-container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.export-hero-content {
    position: relative;
    z-index: 3;
    color: var(--export-text-white);
}

.export-hero .export-badge,
.export-hero .export-hero-badge {
    display: inline-block;
    background: rgba(252, 211, 77, 0.2);
    color: var(--export-gold) !important;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 20px;
    border: 1px solid rgba(252, 211, 77, 0.4);
}

.export-hero h1 {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 20px;
    color: var(--export-text-white) !important;
    letter-spacing: -0.5px;
}

.export-hero p {
    font-size: 17px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.95) !important;
    margin: 0 0 28px;
    max-width: 600px;
}

.export-hero-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.export-hero-buttons .export-btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.export-hero-buttons .export-btn span {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.export-hero-buttons .export-btn-gold {
    background: var(--export-gold);
    color: var(--export-primary) !important;
    border-color: var(--export-gold);
}

.export-hero-buttons .export-btn-gold span {
    color: var(--export-primary) !important;
}

.export-hero-buttons .export-btn-outline-white {
    background: transparent;
    color: var(--export-text-white) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
}

.export-hero-buttons .export-btn-outline-white span {
    color: var(--export-text-white) !important;
}

/* Hero Visual */
.export-hero-visual {
    position: relative;
    height: 300px;
    z-index: 1;
}

.export-hero-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    pointer-events: none;
}

.export-hero-shape.shape-1 { width: 200px; height: 200px; top: 20px; right: 80px; }
.export-hero-shape.shape-2 { width: 120px; height: 120px; top: 140px; right: 0; background: rgba(252, 211, 77, 0.15); }
.export-hero-shape.shape-3 { width: 80px; height: 80px; top: 60px; right: 200px; background: rgba(255, 255, 255, 0.15); }

/* ===== STATS BAR ===== */
.export-stats-bar {
    background: var(--export-bg-card);
    border-bottom: 1px solid var(--export-border);
    padding: 24px;
    margin-top: -40px;
    position: relative;
    z-index: 5;
    box-shadow: var(--export-shadow-md);
}

.export-stats-inner {
    max-width: var(--export-container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    text-align: center;
}

.export-stat-num {
    font-size: 32px;
    font-weight: 800;
    color: var(--export-primary);
    line-height: 1;
    margin-bottom: 6px;
}

.export-stat-label {
    font-size: 13px;
    color: var(--export-text-muted);
    font-weight: 600;
}

/* ===== CATEGORIES SECTION (on home) ===== */
.export-cats {
    padding: 80px 0;
    background: var(--export-bg-page);
}

.export-cats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.export-cat-card {
    display: flex;
    gap: 16px;
    padding: 24px;
    background: var(--export-bg-card);
    border-radius: var(--export-radius-lg);
    border: 1px solid var(--export-border);
    text-decoration: none;
    transition: var(--export-transition);
    box-shadow: var(--export-shadow-sm);
}

.export-cat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--export-shadow-lg);
    border-color: var(--export-primary);
}

.export-cat-icon {
    font-size: 40px;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--export-bg-highlight), #DBEAFE);
    border-radius: var(--export-radius-lg);
    flex-shrink: 0;
}

.export-cat-body h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--export-text-primary);
    margin: 0 0 6px;
}

.export-cat-body p {
    font-size: 13px;
    color: var(--export-text-muted);
    margin: 0 0 10px;
    line-height: 1.5;
}

.export-cat-count {
    font-size: 12px;
    font-weight: 700;
    color: var(--export-sky);
    background: var(--export-bg-highlight);
    padding: 4px 10px;
    border-radius: 50px;
}

.export-cats-footer {
    text-align: center;
    margin-top: 40px;
}

/* ===== FEATURED ===== */
.export-featured {
    padding: 80px 0;
    background: var(--export-bg-card);
}

/* ===== FAQ (home) ===== */
.export-faq {
    padding: 80px 0;
    background: var(--export-bg-page);
}

/* ===== CTA ===== */
.export-cta {
    padding: 80px 0;
    background: var(--export-bg-card);
}

.export-cta-box {
    background: linear-gradient(135deg, var(--export-primary) 0%, var(--export-primary-light) 100%);
    color: var(--export-text-white);
    border-radius: var(--export-radius-xl);
    padding: 60px 40px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.export-cta-box h2 {
    font-size: 32px;
    font-weight: 800;
    margin: 0 0 14px;
    color: var(--export-text-white) !important;
}

.export-cta-box p {
    font-size: 16px;
    max-width: 600px;
    margin: 0 auto 28px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95) !important;
}

.export-cta-box .export-btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.export-cta-box .export-btn-gold {
    background: var(--export-gold);
    color: var(--export-primary) !important;
    border-color: var(--export-gold);
}

.export-cta-box .export-btn-gold span {
    display: inline-block !important;
    color: var(--export-primary) !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ===== RESPONSIVE HOME ===== */
@media (max-width: 900px) {
    .export-hero-inner { grid-template-columns: 1fr; }
    .export-hero-visual { display: none; }
    .export-hero h1 { font-size: 34px; }
    .export-stats-inner { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .export-hero { padding: 60px 16px 80px; }
    .export-hero h1 { font-size: 26px; }
    .export-hero p { font-size: 15px; }
    .export-cats, .export-featured, .export-faq, .export-cta { padding: 50px 0; }
    .export-cat-card { padding: 16px; }
    .export-cat-icon { width: 50px; height: 50px; font-size: 28px; }
    .export-stat-num { font-size: 24px; }
    .export-cta-box { padding: 40px 24px; }
    .export-cta-box h2 { font-size: 24px; }
}