/* =====================================================
HESHAM TV
FILE: css/pages.css
===================================================== */

/* =====================================================
BODY BACKGROUND
===================================================== */

body {


background:
    radial-gradient(
        circle at top left,
        rgba(0,229,255,.08),
        transparent 30%
    ),
    radial-gradient(
        circle at bottom right,
        rgba(124,58,237,.08),
        transparent 30%
    ),
    var(--bg-body);


}

/* =====================================================
HERO SECTION
===================================================== */

.hero {


position: relative;

overflow: hidden;


}

.hero::before {


content: "";

position: absolute;

top: -300px;
right: -300px;

width: 600px;
height: 600px;

border-radius: 50%;

background:
    rgba(0,229,255,.08);

filter: blur(100px);

pointer-events: none;


}

.hero::after {


content: "";

position: absolute;

left: -250px;
bottom: -250px;

width: 500px;
height: 500px;

border-radius: 50%;

background:
    rgba(124,58,237,.08);

filter: blur(120px);

pointer-events: none;


}

/* =====================================================
HERO IMAGE
===================================================== */

.hero-image img {


animation:
    floatingHero 6s ease-in-out infinite;

filter:
    drop-shadow(
        0 30px 60px rgba(0,0,0,.35)
    );


}

@keyframes floatingHero {


0% {
    transform: translateY(0);
}

50% {
    transform: translateY(-12px);
}

100% {
    transform: translateY(0);
}


}

/* =====================================================
GLASS EFFECT
===================================================== */

.feature-card,
.review-card,
.stat-card {


backdrop-filter: blur(16px);

background:
    rgba(255,255,255,.03);


}

/* =====================================================
FEATURE ICON PLACEHOLDER
===================================================== */

.feature-card {


position: relative;

overflow: hidden;


}

.feature-card::before {


content: "";

position: absolute;

top: -80px;
right: -80px;

width: 180px;
height: 180px;

border-radius: 50%;

background:
    rgba(0,229,255,.06);


}

/* =====================================================
GALLERY
===================================================== */

.gallery-grid {


margin-top: 50px;


}

.gallery-grid img {


aspect-ratio: 9 / 16;

object-fit: cover;

border:
    1px solid var(--border-color);

box-shadow:
    var(--shadow-md);


}

.gallery-grid img:hover {


transform:
    translateY(-6px)
    scale(1.02);

border-color:
    var(--primary);


}

/* =====================================================
REVIEWS
===================================================== */

.review-card {


position: relative;


}

.review-card::before {


content: "★★★★★";

display: block;

color: #FFD700;

margin-bottom: 15px;


}

/* =====================================================
FAQ
===================================================== */

.faq {


max-width: 900px;

margin-inline: auto;


}

.faq-item {


background:
    var(--bg-card);


}

.faq-question {


transition:
    background var(--transition-normal);


}

.faq-question:hover {


background:
    var(--bg-card-hover);


}

/* =====================================================
DOWNLOAD CTA
===================================================== */

.download {


position: relative;

overflow: hidden;


}

.download::before {


content: "";

position: absolute;

inset: 0;

background:
    linear-gradient(
        135deg,
        rgba(0,229,255,.05),
        rgba(124,58,237,.05)
    );

pointer-events: none;


}

.download h2 {


margin-bottom: 20px;


}

.download p {


max-width: 700px;

margin-inline: auto;


}

/* =====================================================
FOOTER
===================================================== */

footer {


background:
    rgba(255,255,255,.02);


}

footer p {


color:
    var(--text-muted);


}

/* =====================================================
WHATSAPP FLOATING
===================================================== */

.whatsapp-float {


animation:
    pulseWhatsapp 2s infinite;


}

@keyframes pulseWhatsapp {


0% {

    box-shadow:
        0 0 0 0 rgba(37,211,102,.5);
}

70% {

    box-shadow:
        0 0 0 18px rgba(37,211,102,0);
}

100% {

    box-shadow:
        0 0 0 0 rgba(37,211,102,0);
}


}

/* =====================================================
SCROLL REVEAL
===================================================== */

.reveal {


opacity: 0;

transform:
    translateY(40px);

transition:
    all .8s ease;


}

.reveal.active {


opacity: 1;

transform:
    translateY(0);


}

/* =====================================================
IMAGE LOADING
===================================================== */

img {


transition:
    opacity .3s ease;


}

img[loading="lazy"] {


opacity: .98;


}

/* =====================================================
LIGHT MODE
===================================================== */

[data-theme="light"] .feature-card,
[data-theme="light"] .review-card,
[data-theme="light"] .stat-card {


background:
    rgba(255,255,255,.95);


}

[data-theme="light"] .header {


background:
    rgba(255,255,255,.9);


}

[data-theme="light"] footer {


background:
    rgba(0,0,0,.02);


}

/* =====================================================
PREMIUM HOVER EFFECTS
===================================================== */

.btn,
.feature-card,
.review-card,
.stat-card,
.gallery-grid img {


will-change:
    transform;


}

/* =====================================================
RESPONSIVE ENHANCEMENTS
===================================================== */

@media (max-width: 1024px) {


.hero-image img {

    max-width: 500px;
}


}

@media (max-width: 768px) {


.hero::before,
.hero::after {

    display: none;
}

.gallery-grid {

    gap: 15px;
}


}

@media (max-width: 480px) {


.gallery-grid img {

    border-radius:
        var(--radius-md);
}


}
/* ==========================================
   LIGHTBOX
========================================== */

.lightbox-overlay {

    position: fixed;

    inset: 0;

    background:
        rgba(0,0,0,.9);

    display: flex;

    justify-content: center;

    align-items: center;

    opacity: 0;

    visibility: hidden;

    z-index: 9999;

    transition: .3s;
}

.lightbox-overlay.active {

    opacity: 1;

    visibility: visible;
}

.lightbox-image {

    max-width: 90%;

    max-height: 90%;

    border-radius: 20px;
}

/* =====================================
   LEGAL PAGES
===================================== */

.card ul {

    margin: 15px 0 20px 25px;

    padding-left: 10px;

    list-style: disc;
}

.card li {

    margin-bottom: 10px;

    color: var(--text-secondary);

    line-height: 1.8;
}

.card h2 {

    margin-top: 25px;

    margin-bottom: 15px;
}

.card p {

    line-height: 1.9;
}