/* ════════════════════════════════════════════════════════════
   BACKGROUND IMAGES FOR PAGES
   ════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   HOME PAGE HERO
   ───────────────────────────────────────────────────────────── */
.home-hero-bg {
    background:
        linear-gradient(135deg, rgba(8, 20, 48, 0.75) 0%, rgba(15, 35, 65, 0.72) 50%, rgba(5, 18, 40, 0.8) 100%),
        url('../img/imagesca01.webp') center/cover no-repeat;
    background-attachment: fixed;
}

.home-hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────
   ABOUT PAGE
   ───────────────────────────────────────────────────────────── */
.about-page-hero {
    background:
        linear-gradient(135deg, rgba(8, 20, 48, 0.85) 0%, rgba(15, 35, 65, 0.82) 50%, rgba(5, 18, 40, 0.9) 100%),
        url('../img/imagesca02.webp') center/cover no-repeat;
    background-attachment: fixed;
}

.about-section-alt {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(249, 250, 251, 0.98)),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><defs><pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="2" fill="rgba(59,130,246,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
    background-attachment: fixed;
}

/* ─────────────────────────────────────────────────────────────
   SERVICES PAGE
   ───────────────────────────────────────────────────────────── */
.services-page-hero {
    background:
        linear-gradient(135deg, rgba(8, 20, 48, 0.85) 0%, rgba(15, 35, 65, 0.82) 50%, rgba(5, 18, 40, 0.9) 100%),
        url('../img/imagesca02.webp') center/cover no-repeat;
    background-attachment: fixed;
}

.services-grid-bg {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(249, 250, 251, 0.95)),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><defs><pattern id="grid" x="0" y="0" width="60" height="60" patternUnits="userSpaceOnUse"><path d="M 60 0 L 0 0 0 60" fill="none" stroke="rgba(59,130,246,0.05)" stroke-width="0.5"/></pattern></defs><rect width="60" height="60" fill="url(%23grid)"/></svg>');
}

/* ─────────────────────────────────────────────────────────────
   BLOG PAGE
   ───────────────────────────────────────────────────────────── */
.blog-page-hero {
    background:
        linear-gradient(135deg, rgba(8, 20, 48, 0.88) 0%, rgba(15, 35, 65, 0.8) 50%, rgba(5, 18, 40, 0.92) 100%),
        url('../img/imagesca02.webp') center/cover no-repeat;
    background-attachment: fixed;
}

.blog-list-bg {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.98), rgba(249, 250, 251, 0.95)),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><defs><pattern id="dots-alt" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(59,130,246,0.04)"/><circle cx="30" cy="30" r="1" fill="rgba(59,130,246,0.04)"/></pattern></defs><rect width="40" height="40" fill="url(%23dots-alt)"/></svg>');
}

/* ─────────────────────────────────────────────────────────────
   BOUTIQUE / SHOP PAGE
   ───────────────────────────────────────────────────────────── */
.boutique-page-hero {
    background:
        linear-gradient(135deg, rgba(5, 20, 45, 0.88) 0%, rgba(10, 34, 61, 0.82) 40%, rgba(6, 22, 42, 0.9) 100%),
        url('../img/imagesca01.webp') center/cover no-repeat;
    background-attachment: fixed;
}

.boutique-products-bg {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.98), rgba(249, 250, 251, 0.95)),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80"><defs><pattern id="cross" x="0" y="0" width="80" height="80" patternUnits="userSpaceOnUse"><line x1="40" y1="0" x2="40" y2="80" stroke="rgba(59,130,246,0.03)" stroke-width="1"/><line x1="0" y1="40" x2="80" y2="40" stroke="rgba(59,130,246,0.03)" stroke-width="1"/></pattern></defs><rect width="80" height="80" fill="url(%23cross)"/></svg>');
}

/* ─────────────────────────────────────────────────────────────
   REALIZATIONS / PORTFOLIO PAGE
   ───────────────────────────────────────────────────────────── */
.realizations-page-hero {
    background:
        linear-gradient(135deg, rgba(8, 20, 48, 0.9) 0%, rgba(15, 35, 65, 0.85) 50%, rgba(5, 18, 40, 0.93) 100%),
        url('../img/imagesca01.webp') center/cover no-repeat;
    background-attachment: fixed;
}

/* ─────────────────────────────────────────────────────────────
   CONTACT PAGE
   ───────────────────────────────────────────────────────────── */
.contact-page-hero {
    background:
        linear-gradient(135deg, rgba(10, 28, 56, 0.85) 0%, rgba(18, 40, 71, 0.8) 50%, rgba(8, 26, 50, 0.88) 100%),
        url('../img/imagesca02.webp') center/cover no-repeat;
    background-attachment: fixed;
}

.contact-form-bg {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.98), rgba(249, 250, 251, 0.98)),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><defs><pattern id="wave" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M0,50 Q25,40 50,50 T100,50" fill="none" stroke="rgba(59,130,246,0.04)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23wave)"/></svg>');
}

/* ─────────────────────────────────────────────────────────────
   TEAM PAGE
   ───────────────────────────────────────────────────────────── */
.team-page-hero {
    background:
        linear-gradient(135deg, rgba(10, 30, 61, 0.88) 0%, rgba(18, 42, 72, 0.84) 50%, rgba(8, 28, 54, 0.92) 100%),
        url('../img/imagesca02.webp') center/cover no-repeat;
    background-attachment: fixed;
}

.team-members-bg {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.98), rgba(249, 250, 251, 0.95)),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"><defs><pattern id="hexagon" x="0" y="0" width="50" height="50" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="15" fill="none" stroke="rgba(59,130,246,0.04)" stroke-width="1"/></pattern></defs><rect width="50" height="50" fill="url(%23hexagon)"/></svg>');
}

/* ─────────────────────────────────────────────────────────────
   FAQ PAGE
   ───────────────────────────────────────────────────────────── */
.faq-page-hero {
    background:
        linear-gradient(135deg, rgba(11, 29, 58, 0.92) 0%, rgba(19, 45, 79, 0.88) 40%, rgba(15, 40, 66, 0.94) 100%),
        url('../img/imagesca02.webp') center/cover no-repeat;
    background-attachment: fixed;
}

.faq-content-bg {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.98), rgba(249, 250, 251, 0.96)),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><defs><pattern id="dots-grid" x="0" y="0" width="120" height="120" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(59,130,246,0.03)"/><circle cx="70" cy="70" r="1" fill="rgba(59,130,246,0.03)"/></pattern></defs><rect width="120" height="120" fill="url(%23dots-grid)"/></svg>');
}

/* ─────────────────────────────────────────────────────────────
   GENERIC PAGE BACKGROUNDS
   ───────────────────────────────────────────────────────────── */
.page-section-dark {
    background:
        linear-gradient(135deg, rgba(8, 20, 48, 0.85) 0%, rgba(15, 35, 65, 0.82) 50%, rgba(5, 18, 40, 0.9) 100%),
        url('../img/imagesca02.webp') center/cover no-repeat;
    background-attachment: fixed;
    color: #fff;
}

.page-section-light {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.98), rgba(249, 250, 251, 0.95)),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"><defs><pattern id="subtle" x="0" y="0" width="30" height="30" patternUnits="userSpaceOnUse"><rect x="0" y="0" width="15" height="15" fill="rgba(59,130,246,0.02)"/></pattern></defs><rect width="30" height="30" fill="url(%23subtle)"/></svg>');
    background-attachment: fixed;
}

.page-section-accent {
    background:
        linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(96, 165, 250, 0.05) 100%),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><defs><pattern id="accent-dots" x="0" y="0" width="60" height="60" patternUnits="userSpaceOnUse"><circle cx="15" cy="15" r="1" fill="rgba(59,130,246,0.08)"/><circle cx="45" cy="45" r="1" fill="rgba(59,130,246,0.08)"/></pattern></defs><rect width="60" height="60" fill="url(%23accent-dots)"/></svg>');
    background-attachment: fixed;
}

/* ─────────────────────────────────────────────────────────────
   OVERLAY & UTILITY CLASSES
   ───────────────────────────────────────────────────────────── */
.bg-overlay-dark {
    background-color: rgba(0, 0, 0, 0.4);
}

.bg-overlay-medium {
    background-color: rgba(0, 0, 0, 0.2);
}

.bg-overlay-light {
    background-color: rgba(255, 255, 255, 0.1);
}

/* ─────────────────────────────────────────────────────────────
   PARALLAX EFFECT
   ───────────────────────────────────────────────────────────── */
.parallax-bg {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE ADJUSTMENTS
   ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .parallax-bg {
        background-attachment: scroll;
    }
}