/* ---
Dhibira Analytics :: High-Conversion Website v14.1
Author: Gemini Advanced Panel
Change Log: No changes. CSS is correct. Issue is related to server file paths.
--- */

/* --- 1. Global Styles & Variables --- */
:root {
    --primary-green: #00FF94;
    --accent-gold: #D4AF37;
    --dark-bg: #0A0D10;
    --dark-card: rgba(26, 30, 35, 0.5);
    --glass-border: rgba(255, 255, 255, 0.08);
    --text-white: #ECEFF4;
    --text-light: #9DA8B7;
    --text-dark: #0A0D10;
    --shadow-glow: 0 0 120px rgba(0, 255, 148, 0.1);
    --font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-main); background: var(--dark-bg); color: var(--text-white); line-height: 1.6; overflow-x: hidden; position: relative; }

/* --- 2. Modern Scrollbar & Background --- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--dark-bg); }
::-webkit-scrollbar-thumb { background: var(--primary-green); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-gold); }
html { scrollbar-width: thin; scrollbar-color: var(--primary-green) var(--dark-bg); }
.gradient-bg {
    position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 0;
    background: radial-gradient(circle at 15% 85%, rgba(0, 255, 148, 0.1), transparent 35%),
                radial-gradient(circle at 85% 25%, rgba(212, 175, 55, 0.08), transparent 35%),
                radial-gradient(circle at 50% 50%, rgba(26, 30, 35, 0.7), var(--dark-bg) 70%);
    animation: breathing-gradient 15s ease-in-out infinite alternate;
}
@keyframes breathing-gradient {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
}
main { position: relative; z-index: 2; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* --- 3. Header & Navigation --- */
header {
    background: rgba(10, 13, 16, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    padding: 18px 0; position: fixed; width: 100%; top: 0;
    z-index: 1001; /* Header is on top */
    border-bottom: 1px solid var(--glass-border);
}
nav { display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 22px; font-weight: 800; text-decoration: none; color: var(--text-white); }
.nav-links { display: flex; list-style: none; gap: 40px; }
.nav-links a { color: var(--text-light); text-decoration: none; font-weight: 600; font-size: 15px; transition: color 0.3s ease; }
.nav-links a:hover { color: var(--primary-green); }
.cta-header {
    background: var(--primary-green); color: var(--text-dark); padding: 10px 20px;
    border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 14px;
    transition: all 0.3s ease;
}
.cta-header:hover { background: white; transform: translateY(-2px); }
.mobile-menu-toggle { display: none; }
.mobile-menu { display: none; }


/* --- 4. Hero Section --- */
.hero { padding: 180px 0 140px; text-align: center; }
.hero-content { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.hero h1 {
    font-size: 56px; font-weight: 800; line-height: 1.15; max-width: 850px; letter-spacing: -2px;
    background: linear-gradient(135deg, var(--text-white) 70%, var(--accent-gold));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-subtitle { font-size: 18px; color: var(--text-light); max-width: 700px; line-height: 1.7; }
.hero-ctas { margin-top: 16px; display: flex; gap: 16px; align-items: center; justify-content: center; flex-wrap: wrap; }
.cta-primary {
    padding: 16px 32px; border-radius: 8px; text-decoration: none;
    font-weight: 700; font-size: 16px; transition: all 0.3s ease;
    border: 2px solid transparent; background: var(--primary-green); color: var(--text-dark);
    box-shadow: 0 0 50px rgba(0, 255, 148, 0.3);
}
.cta-primary:hover { background: white; transform: translateY(-3px) scale(1.02); }
.cta-secondary {
    font-weight: 600; font-size: 16px; color: var(--text-light); text-decoration: none;
    border-bottom: 1px dashed var(--glass-border); padding-bottom: 4px;
    transition: all 0.3s ease;
}
.cta-secondary:hover { color: var(--text-white); border-color: var(--primary-green); }


/* --- All other sections are correct and do not need changes --- */
.showcase { padding: 120px 0; }
.clarity-engine { padding: 120px 0; background: rgba(255,255,255,0.02); overflow: hidden; }
.services { padding: 120px 0; }
.testimonials { padding: 120px 0; background: rgba(255,255,255,0.02); }
.philosophy { padding: 120px 0; background: var(--dark-bg); }
.experts { padding: 120px 0; }
.final-cta { padding: 120px 0; }
footer { padding: 40px 0; text-align: center; border-top: 1px solid var(--glass-border); color: var(--text-light); font-size: 14px; position: relative; z-index: 2; }
/* (Including full styles for completeness below) */
.showcase-container{background:var(--dark-card);border:1px solid var(--glass-border);border-radius:16px;padding:32px;backdrop-filter:blur(10px)}.showcase-nav{display:flex;gap:12px;margin-bottom:24px;flex-wrap:wrap;justify-content:center}.showcase-tab{background:transparent;border:1px solid var(--glass-border);color:var(--text-light);padding:10px 20px;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;text-align:left}.showcase-tab:hover{background:rgba(255,255,255,.05);color:var(--text-white)}.showcase-tab.active{background:var(--primary-green);color:var(--text-dark);border-color:var(--primary-green)}.showcase-main{position:relative;min-height:500px}.dashboard-display{display:block;border-radius:8px;overflow:hidden;border:1px solid var(--glass-border);position:absolute;top:0;left:0;width:100%;opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .4s ease;pointer-events:none}.dashboard-display.active{opacity:1;transform:translateY(0);pointer-events:auto}.dashboard-display img{display:block;width:100%}.dashboard-link-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(10,13,16,.7);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:18px;opacity:0;transition:opacity .3s ease}.dashboard-display:hover .dashboard-link-overlay{opacity:1}
.clarity-flow-diagram{display:grid;grid-template-columns:1fr 1fr 1.5fr;align-items:center;gap:32px}.flow-stage{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}.flow-title{font-size:16px;font-weight:700;color:var(--text-light);margin-bottom:24px;text-transform:uppercase;letter-spacing:1px}.source-icons-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;width:100%}.flow-icon{background:var(--dark-card);border:1px solid var(--glass-border);border-radius:12px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--text-light);transition:all .3s ease;opacity:0;transform:scale(.9)}.clarity-flow-diagram.is-animating .flow-icon{animation:pop-in .5s ease-out forwards}.flow-icon:nth-of-type(2){animation-delay:.1s}.flow-icon:nth-of-type(3){animation-delay:.2s}.flow-icon:nth-of-type(4){animation-delay:.3s}.flow-icon:hover{transform:translateY(-5px) scale(1.05)!important;border-color:var(--primary-green);color:var(--text-white)}.flow-icon svg{width:28px;height:28px;color:var(--primary-green)}.flow-icon span{font-size:14px;font-weight:600}
.engine-core-center{width:160px;height:160px;background:radial-gradient(circle,rgba(0,255,148,.15) 0,rgba(0,255,148,0) 70%);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;border:1px solid rgba(0,255,148,.2);opacity:0;transform:scale(.8)}.clarity-flow-diagram.is-animating .engine-core-center{animation:pop-in .6s ease-out .6s forwards,pulse 4s infinite 1.2s ease-in-out}.engine-main-icon{width:70px;height:70px;background:var(--dark-bg);border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid var(--glass-border)}.engine-main-icon svg{width:32px;height:32px;color:var(--primary-green)}.engine-core-center span{margin-top:10px;font-weight:700;color:var(--text-white)}.dashboard-output-wrapper{width:100%;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}.dashboard-output-final{width:100%;height:100%;background:var(--dark-card);border:1px solid var(--glass-border);border-radius:12px;padding:8px;position:relative;opacity:0;transform:scale(.8)}.clarity-flow-diagram.is-animating .dashboard-output-final{animation:pop-in 1s ease-out 1.2s forwards}.dashboard-output-final img{display:block;width:100%;height:100%;object-fit:cover;border-radius:8px}.dashboard-overlay-final{position:absolute;bottom:8px;left:8px;right:8px;background:linear-gradient(to top,rgba(10,13,16,.9),transparent);padding:24px 16px 16px;border-radius:0 0 8px 8px;text-align:left}.dashboard-overlay-final h4{font-size:16px;font-weight:700}.dashboard-overlay-final p{font-size:13px;color:var(--text-light)}@keyframes pop-in{to{opacity:1;transform:scale(1)}}@keyframes pulse{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(0,255,148,.4)}70%{transform:scale(1.05);box-shadow:0 0 0 20px rgba(0,255,148,0)}100%{transform:scale(1);box-shadow:0 0 0 0 rgba(0,255,148,0)}}
.section-header{text-align:center;margin-bottom:64px}.header-badge{display:inline-block;border:1px solid var(--accent-gold);color:var(--accent-gold);padding:6px 14px;border-radius:20px;font-size:14px;font-weight:700;margin-bottom:16px;background:rgba(212,175,55,.1)}.section-title{font-size:42px;font-weight:800;letter-spacing:-1.5px;margin-bottom:16px}.section-subtitle{font-size:18px;color:var(--text-light);max-width:700px;margin:0 auto}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}.service-card{background:var(--dark-card);border:1px solid var(--glass-border);padding:32px;border-radius:16px;transition:all .3s ease;backdrop-filter:blur(10px)}.service-card:hover{transform:translateY(-8px);border-color:rgba(0,255,148,.5)}.service-icon{width:48px;height:48px;background:var(--primary-green);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:24px}.service-icon svg{color:var(--text-dark);width:24px;height:24px}.service-title{font-size:20px;font-weight:700;margin-bottom:12px}.service-description{color:var(--text-light);font-size:15px}
.swiper-slide{background:var(--dark-card);border:1px solid var(--glass-border);border-radius:16px;padding:40px;display:flex;flex-direction:column;justify-content:space-between}.testimonial-text{font-size:18px;font-weight:500;line-height:1.6;margin-bottom:32px;flex-grow:1;color:var(--text-light)}.testimonial-text::before{content:'“';font-size:48px;color:var(--primary-green);float:left;margin:-10px 10px 0 -20px}.testimonial-author{display:flex;align-items:center;gap:16px}.testimonial-author img{width:50px;height:50px;border-radius:50%;border:2px solid var(--glass-border)}.author-name{font-size:16px;font-weight:700}.author-title{font-size:14px;color:var(--text-light)}.swiper-pagination{position:static;margin-top:32px}.swiper-pagination-bullet{background:var(--glass-border);opacity:1}.swiper-pagination-bullet-active{background:var(--primary-green)}
.philosophy-content{display:grid;grid-template-columns:1fr .8fr;align-items:center;gap:64px;background:var(--dark-card);border:1px solid var(--glass-border);border-radius:16px;padding:64px}.philosophy-text .header-badge{margin-bottom:24px}.philosophy-text .section-title{text-align:left;margin-bottom:24px}.philosophy-text p{color:var(--text-light);margin-bottom:16px}.philosophy-text p:last-child{margin-bottom:0}.philosophy-image img{width:100%;height:100%;object-fit:cover;border-radius:12px;border:1px solid var(--glass-border)}
.experts-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}.expert-card{background:var(--dark-card);border:1px solid var(--glass-border);border-radius:16px;display:flex;align-items:stretch;text-align:left;transition:all .3s ease;backdrop-filter:blur(10px);overflow:hidden}.expert-card:hover{transform:translateY(-8px);border-color:rgba(212,175,55,.5);box-shadow:0 10px 30px rgba(0,0,0,.2)}.expert-image-col{flex:0 0 40%;position:relative;min-height:400px;background:#000}.expert-photo{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .4s ease}.expert-card:hover .expert-photo{transform:scale(1.05)}.expert-details-col{flex:1;padding:32px;display:flex;flex-direction:column}.expert-name{font-size:24px;font-weight:700;margin-bottom:4px}.expert-role{color:var(--accent-gold);font-weight:600;margin-bottom:20px;font-size:16px}.certifications{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;justify-content:flex-start}.certifications span{background:var(--dark-bg);border:1px solid var(--glass-border);color:var(--text-light);font-size:12px;font-weight:600;padding:4px 10px;border-radius:20px}.expert-achievements{list-style:none;color:var(--text-light);font-size:15px;margin-bottom:24px;padding-left:0}.expert-achievements li{margin-bottom:12px;padding-left:24px;position:relative}.expert-achievements li::before{content:'✓';color:var(--primary-green);position:absolute;left:0;font-size:16px;top:2px}.linkedin-btn{display:inline-flex;align-items:center;gap:8px;background:var(--dark-bg);color:var(--text-white);border:1px solid var(--glass-border);padding:12px 24px;cursor:pointer;border-radius:8px;font-weight:600;transition:all .3s ease;margin-top:auto;align-self:flex-start}.linkedin-btn:hover{background:var(--text-white);color:var(--text-dark);border-color:var(--text-white)}.linkedin-btn svg{width:18px;height:18px}
.cta-content{background:linear-gradient(135deg,rgba(0,255,148,.1),rgba(212,175,55,.1));border:1px solid var(--glass-border);border-radius:24px;padding:64px 40px;box-shadow:var(--shadow-glow);text-align:center}.cta-content h2{font-size:36px;max-width:650px;margin:0 auto 16px;letter-spacing:-1px}.cta-content p{max-width:600px;margin:0 auto 32px;color:var(--text-light)}.cta-subtext{font-size:14px;margin-top:16px!important;opacity:.7}
.contact-modal{display:none;position:fixed;z-index:1002;left:0;top:0;width:100%;height:100%;background-color:rgba(10,13,16,.7);backdrop-filter:blur(12px);animation:fadeIn .3s ease}.contact-modal-content{background:var(--dark-card);margin:10% auto;padding:40px;border:1px solid var(--glass-border);width:90%;max-width:600px;border-radius:20px;text-align:center;position:relative;box-shadow:0 20px 50px rgba(0,0,0,.3)}.close-btn{position:absolute;top:15px;right:20px;background:none;border:none;color:var(--text-light);font-size:28px;cursor:pointer;transition:color .3s ease}.close-btn:hover{color:var(--text-white)}.contact-modal-content h3{font-size:28px;margin-bottom:12px;color:var(--primary-green)}.contact-modal-content p{color:var(--text-light);margin-bottom:32px;max-width:450px;margin-left:auto;margin-right:auto}.modal-contact-options{display:grid;grid-template-columns:1fr 1fr;gap:24px}.contact-person-card{background:var(--dark-bg);border:1px solid var(--glass-border);border-radius:16px;padding:24px;display:flex;flex-direction:column;align-items:center;transition:all .3s ease}.contact-person-card:hover{border-color:var(--accent-gold);transform:translateY(-5px)}.person-name{font-size:20px;font-weight:700;color:var(--text-white);margin-bottom:4px}.person-title{font-size:13px;color:var(--text-light);margin-bottom:24px;min-height:38px}.contact-buttons{display:flex;flex-direction:column;gap:12px;width:100%}.contact-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px;border-radius:8px;text-decoration:none;font-weight:600;transition:all .3s ease;border:1px solid transparent}.contact-btn svg{width:20px;height:20px}.whatsapp-btn{background:#25d366;color:#fff}.whatsapp-btn:hover{background:#128c7e}.email-btn{background:var(--dark-card);border-color:var(--glass-border);color:var(--text-light)}.email-btn:hover{background-color:var(--primary-green);border-color:var(--primary-green);color:var(--text-dark)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease}.reveal.visible{opacity:1;transform:translateY(0)}

/* --- 15. Responsive Design --- */
@media (max-width: 1024px) {
    .services-grid, .experts-grid { grid-template-columns: 1fr; }
    .philosophy-content { grid-template-columns: 1fr; gap: 40px; padding: 48px; }
    .philosophy-image { order: -1; }
    .philosophy-text .section-title { font-size: 32px; }
}
@media (max-width: 768px) {
    .nav-links, .cta-header { display: none; }
    .mobile-menu-toggle { 
        display: block; 
        background: none; 
        border: none; 
        color: var(--text-white); 
        z-index: 1002; /* Must be on top of everything */
        cursor: pointer; 
    }
    .mobile-menu-toggle .icon-close { display: none; }
    .mobile-menu-toggle.active .icon-hamburger { display: none; }
    .mobile-menu-toggle.active .icon-close { display: block; }

    .mobile-menu {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--dark-bg); /* Use solid, fully opaque background */
        z-index: 1001; /* Sits below the toggle button but above everything else */
        padding: 120px 32px 32px;
        opacity: 0;
        transform: translateX(-100%); /* Start off-screen */
        pointer-events: none;
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .mobile-menu.active {
        display: flex;
        flex-direction: column;
        opacity: 1;
        transform: translateX(0); /* Slide in */
        pointer-events: auto;
    }
    
    .mobile-nav-links { list-style: none; display: flex; flex-direction: column; gap: 24px; margin-bottom: 32px; }
    .mobile-nav-links a { font-size: 24px; font-weight: 700; color: var(--text-white);}
    .mobile-cta {
        display: block; text-align: center; background: var(--primary-green);
        color: var(--text-dark); padding: 16px; border-radius: 8px;
        text-decoration: none; font-weight: 700; margin-top: auto;
    }
    .hero { padding: 140px 0 100px; }
    .hero h1 { font-size: 36px; letter-spacing: -1px; }
    .hero-subtitle { font-size: 16px; }
    .section-title { font-size: 32px; }
    .cta-content h2 { font-size: 28px; letter-spacing: -1px; }
    .cta-content { padding: 48px 24px; }
    .final-cta .cta-primary { padding: 14px 24px; font-size: 15px; }
    .showcase-main { min-height: 250px; }
    .showcase-nav { justify-content: center; }
    
    .expert-card { flex-direction: column; }
    .expert-image-col { flex: 0 0 300px; }
    .expert-details-col { padding: 24px; }
    .linkedin-btn { align-self: stretch; justify-content: center; }

    .clarity-flow-diagram { grid-template-columns: 1fr; }
    .flow-stage-engine { margin: 32px 0; }

    .modal-contact-options { grid-template-columns: 1fr; }
    .person-title { min-height: auto; }
    
    .philosophy-content { padding: 32px 24px; }
}