.elementor-27734 .elementor-element.elementor-element-5538d20{--display:flex;--background-transition:0.3s;}.elementor-27734 .elementor-element.elementor-element-404a2f0{width:100%;max-width:100%;}/* Start custom CSS *//* 1. Background Grids */
.bg-grid-light {
    background-color: #ffffff;
    background-image: linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
    background-size: 32px 32px;
}
.bg-grid-dark {
    background-color: #0B0A10;
    background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 32px 32px;
}

/* 2. Eklipse Signature Gradient Text */
.text-gradient-eklipse {
    background: linear-gradient(135deg, #FFCC16 0%, #FA1FD1 50%, #9146FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 3. Glassmorphism Cards (Dark Mode) */
.glass-card-dark {
    background: rgba(20, 18, 30, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(145, 70, 255, 0.15);
    border-radius: 20px;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.glass-card-dark:hover {
    border-color: rgba(145, 70, 255, 0.4);
    transform: translateY(-4px);
    box-shadow: 0 10px 40px -10px rgba(145, 70, 255, 0.2);
}

/* 4. Glassmorphism Cards (Light Mode) */
.glass-card-light {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.glass-card-light:hover {
    border-color: #9146FF;
    transform: translateY(-4px);
    box-shadow: 0 10px 30px -10px rgba(145, 70, 255, 0.15);
}

/* 5. Glow Orbs (Cahaya di Background) */
.glow-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    z-index: 0;
    pointer-events: none;
}

/* 6. Phone Mockup & Wrapper */
.video-box-wrapper {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 14px;
    border-radius: 46px;
    box-shadow: 0 20px 50px rgba(145, 70, 255, 0.15), inset 0 0 0 1.5px rgba(255, 255, 255, 0.8);
    position: relative;
    z-index: 10;
}
.phone-mockup {
    border: 8px solid #111;
    border-radius: 40px;
    overflow: hidden;
    position: relative;
    background: #000;
    transform: rotate(-2deg);
    transition: transform 0.5s ease;
    z-index: 10;
}
.phone-mockup:hover {
    transform: rotate(0deg) translateY(-10px);
    box-shadow: 0 30px 70px rgba(250, 31, 209, 0.2), inset 0 0 0 2px rgba(255,255,255,0.1);
}
.phone-notch {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 100px; height: 24px; background: #111;
    border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; z-index: 10;
}
.phone-notch-bar { width: 64px; height: 5px; background: rgba(255,255,255,0.2); border-radius: 3px; margin: 12px auto 0; }

/* 7. Floating Badges */
.float-badge {
    position: absolute;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    padding: 8px 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    white-space: nowrap;
    z-index: 20;
}

/* 8. FAQ Accordion */
.faq-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease; }
.faq-item.active .faq-content { max-height: 400px; padding-bottom: 20px; }
.faq-icon { transition: transform 0.3s ease; }
.faq-item.active .faq-icon { transform: rotate(180deg); color: #9146FF; }

/* 9. Mobile Sticky Bar */
#sticky-bar {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: #0B0A10; border-top: 2px solid rgba(145,70,255,0.4);
    padding: 12px 24px; display: none; align-items: center; justify-content: space-between; z-index: 50;
}
@media (max-width: 640px) { #sticky-bar { display: flex; } }/* End custom CSS */