/* =====================================================
   PREMIUM COSMIC EXPERIENCE - CSS
   Seamless integration - NO CUTS
   ===================================================== */

/* Same cosmic color everywhere */
:root {
    --cosmic-bg: #0a0a12;
    --cosmic-deep: #08080f;
}

/* Force consistent background */
html,
body {
    background: var(--cosmic-bg) !important;
}

/* Cosmic background container - contained within hero */
.cosmic-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* Hide old CSS elements */
.star-field,
.shooting-stars,
.nebula-glow,
.cosmic-ring,
.floating-shape {
    display: none !important;
}

/* Hero content above canvas */
.hero-content,
.hero-scroll-indicator {
    position: relative;
    z-index: 10;
}

/* Hero cinematic stays transparent to show fixed background */
.hero-cinematic {
    background: transparent !important;
    position: relative;
    overflow: visible;
    padding-bottom: 100px;
}

/* Sections AFTER hero - solid background to cover fixed animation */
.section,
.services-stack,
.process-section,
.cta-impact,
.promo-section,
footer,
.footer {
    background: #0a0a12 !important;
    position: relative;
    z-index: 1;
}

/* Instagram section - transparent to show star animation */
.social-bento-section {
    background: transparent !important;
    position: relative;
    z-index: 1;
}

/* Glass-effect cards */
.showcase-item {
    background: rgba(12, 12, 20, 0.75) !important;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(94, 90, 255, 0.08);
}

.service-card {
    background: rgba(15, 15, 25, 0.8) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Text visibility */
.section-header h2,
.section-title,
h1,
h2,
h3 {
    text-shadow: 0 0 60px rgba(0, 0, 0, 1);
}

/* Mobile optimization */
@media (max-width: 768px) {
    .cosmic-orb {
        display: none;
    }
}