/* ==========================================================================
   File: 1-bhk.css
   Description: Ultra-Premium Custom Styles for 1BHK Space-Saving Interior Design
   Author: AGOID INTERIOR (World-Class UI/UX & High-Performance CSS)
   Branding: Cyan, Pink, Gold & Heavy Glassmorphism
   Optimization: GPU-Accelerated, Zero Overlaps, High Contrast
   ========================================================================== */

/* ==========================================================================
   1. DESIGN SYSTEM VARIABLES & CUSTOM PROPERTY CONFIGURATIONS
   ========================================================================== */
:root {
    /* Theme Base Colors */
    --bg-deep: #050515;
    --bg-dark: #0A0A2A;
    --bg-card: rgba(15, 16, 42, 0.9);
    --bg-panel: rgba(10, 10, 30, 0.98);
    --bg-glass-heavy: rgba(5, 5, 15, 0.95);
    
    /* Vibrant Neon Brand Colors */
    --accent-cyan: #33D5E5;
    --accent-pink: #E849E8;
    --accent-gold: #FFD700;
    --accent-green: #2ecc71;
    --accent-red: #ff4757;
    
    /* High Contrast Typography */
    --text-main: #FFFFFF;
    --text-muted: #a0aabf;
    --text-dark: #050515;
    
    /* Structural Borders & Shadows */
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-border-heavy: rgba(255, 255, 255, 0.2);
    --cyan-border-glow: rgba(51, 213, 229, 0.5);
    --pink-border-glow: rgba(232, 73, 232, 0.5);
    
    --shadow-neon-cyan: 0 0 20px rgba(51, 213, 229, 0.4);
    --shadow-neon-pink: 0 0 20px rgba(232, 73, 232, 0.4);
    --shadow-neon-gold: 0 0 20px rgba(255, 215, 0, 0.4);
    --shadow-card-heavy: 0 25px 50px rgba(0, 0, 0, 0.7);
    
    /* Performance Micro-Transitions */
    --transition-fast: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-normal: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-slow: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ==========================================================================
   2. GLOBAL BROWSER NORMALIZATION, RESETS & ISOLATIONS
   ========================================================================== */
.bhk-page {
    background-color: var(--bg-deep) !important;
    color: var(--text-main) !important;
    overflow-x: hidden;
    scroll-behavior: smooth;
    transform: translateZ(0); /* Hardware GPU Acceleration */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Custom Scrollbars (Chrome, Safari, Edge) */
.bhk-page::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.bhk-page::-webkit-scrollbar-track {
    background: var(--bg-deep);
}
.bhk-page::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--accent-cyan), var(--accent-pink));
    border-radius: 10px;
}
.bhk-page::-webkit-scrollbar-thumb:hover {
    background: var(--accent-cyan);
    box-shadow: var(--shadow-neon-cyan);
}

/* Custom Firefox Scrollbar */
.bhk-page {
    scrollbar-width: thin;
    scrollbar-color: var(--accent-cyan) var(--bg-deep);
}

/* Typography Overrides (Legibility Protection) */
.bhk-page h1, .bhk-page h2, .bhk-page h3, .bhk-page h4, .bhk-page h5, .bhk-page h6 {
    color: #FFFFFF !important;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.95) !important;
    font-weight: 700;
    margin: 0 0 15px 0;
}

.bhk-page p {
    color: var(--text-muted) !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
    line-height: 1.7 !important;
}

.bhk-page strong {
    color: #FFFFFF !important;
    font-weight: 600;
}

/* CSS Selection Highlight */
.bhk-page ::selection {
    background: var(--accent-cyan);
    color: var(--text-dark);
}

/* Accessible Focus Outlines */
.bhk-page :focus-visible {
    outline: 2px dashed var(--accent-cyan);
    outline-offset: 4px;
}

/* Layout Utilities */
.bhk-page .container {
    width: 100%;
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* ==========================================================
   3. HIGH-PERFORMANCE SYSTEM TRANSITIONS & KEYFRAMES
   ========================================================== */
@keyframes bhkFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

@keyframes btnBreathe {
    0% { box-shadow: 0 0 15px rgba(51, 213, 229, 0.3); }
    100% { box-shadow: 0 0 30px rgba(51, 213, 229, 0.7); }
}

@keyframes bhkPulseGreen {
    0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(46, 204, 113, 0); }
    100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

@keyframes bhkRadarPing {
    0% { width: 100%; height: 100%; opacity: 1; }
    100% { width: 300%; height: 300%; opacity: 0; }
}

@keyframes bhkSlowSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes bhkScanLine {
    0% { top: 0; }
    50% { top: 100%; }
    100% { top: 0; }
}

@keyframes targetPulse {
    0% { transform: scale(1); border-color: rgba(51, 213, 229, 0.3); }
    50% { transform: scale(1.02); border-color: var(--accent-cyan); box-shadow: var(--shadow-neon-cyan); }
    100% { transform: scale(1); border-color: rgba(51, 213, 229, 0.3); }
}

/* ==========================================================
   4. CINEMATIC HERO SECTION (WORLD-CLASS PREMIUM SPLIT)
   ========================================================== */
.bhk-hero-premium {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--bg-deep) !important;
    padding-top: 100px;
}

.bhk-hero-video-premium {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.75; /* Ensures layout elements are perfectly high-contrast */
}

/* Heavy gradient black vignette overlays for maximum text contrast */
.bhk-hero-overlay-premium {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: radial-gradient(circle at center, rgba(10, 10, 30, 0.35) 0%, rgba(5, 5, 20, 0.8) 100%);
    z-index: 1;
}

/* Futuristic grid overlay */
.hero-tech-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(51, 213, 229, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(51, 213, 229, 0.02) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 1;
    pointer-events: none;
}

.bhk-hero-wrapper-premium {
    position: relative;
    z-index: 2;
    width: 100%;
}

.hero-split-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 60px;
    align-items: center;
}

/* Breadcrumbs (Dynamic Glass Pill) */
.bhk-breadcrumbs-premium {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 8px 22px;
    border-radius: 50px;
    display: inline-flex;
    margin-bottom: 25px;
    font-size: 0.8rem;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}
.bhk-breadcrumbs-premium a {
    color: var(--text-muted) !important;
    text-decoration: none;
    transition: var(--transition-fast);
}
.bhk-breadcrumbs-premium a:hover {
    color: var(--accent-cyan) !important;
}
.bhk-breadcrumbs-premium .divider {
    margin: 0 10px;
    color: var(--accent-pink);
}
.bhk-breadcrumbs-premium .active {
    color: var(--accent-cyan);
    font-weight: 700;
}

/* Brand badge */
.bhk-badge-premium {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px;
    border-radius: 50px;
    background: rgba(51, 213, 229, 0.08);
    color: var(--accent-cyan);
    border: 1px solid rgba(51, 213, 229, 0.25);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 25px;
}
.badge-glow {
    width: 6px;
    height: 6px;
    background: var(--accent-cyan);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--accent-cyan);
    animation: btnBreathe 2s infinite alternate;
}

/* Typography Overhaul */
.bhk-main-title-premium {
    font-family: 'Playfair Display', serif;
    font-size: 3.8rem !important;
    line-height: 1.15 !important;
    color: #fff !important;
    margin-bottom: 20px;
    /* ডাবল ড্রপ-শ্যাডো যোগ করা হলো যাতে উজ্জ্বল ভিডিওর ওপরেও টেক্সটটি নিখুঁতভাবে পড়া যায় */
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.95), 0 0 30px rgba(0, 0, 0, 0.5);
}

.bhk-sub-text-premium {
    font-size: 1.1rem !important;
    color: #e2e8f0 !important; /* লেখার উজ্জ্বলতা কিছুটা বাড়ানো হলো */
    line-height: 1.7 !important;
    margin-bottom: 35px;
    /* ডার্ক ড্রপ-শ্যাডো */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

/* CTA Layout Improvements */
.bhk-hero-cta-premium {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
}
.btn-outline-matte-premium {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff !important;
    padding: 16px 32px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: var(--transition-normal);
}
.btn-outline-matte-premium:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: #fff;
    transform: translateY(-3px);
}

/* Mini Stats Pill Board */
.hero-stats-pills {
    display: flex;
    align-items: center;
    gap: 25px;
    background: rgba(10, 10, 30, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.04);
    padding: 15px 30px;
    border-radius: 18px;
    max-width: fit-content;
}
.h-pill-item {
    display: flex;
    flex-direction: column;
}
.h-p-val {
    font-size: 1.5rem;
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.h-p-lbl {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 3px;
}
.h-pill-divider {
    width: 1px;
    height: 35px;
    background: rgba(255, 255, 255, 0.08);
}

/* Right Column: Holographic 3D Parallax Screen */
.hero-interactive-deck {
    perspective: 1000px;
}
.isometric-tech-card {
    background: rgba(15, 16, 42, 0.55);
    border: 1px solid rgba(51, 213, 229, 0.2);
    border-radius: 24px;
    padding: 20px;
    transform-style: preserve-3d;
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.6),
        inset 0 0 30px rgba(51, 213, 229, 0.05);
    transition: transform 0.1s linear; /* Responsive tilt */
}
.tech-hud-header, .tech-hud-footer {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent-cyan);
    font-family: 'Orbitron', sans-serif;
    padding-bottom: 15px;
}
.tech-hud-header .hud-led {
    color: var(--accent-green);
}
.tech-hud-footer {
    padding-bottom: 0;
    padding-top: 15px;
    color: #4b5563;
}
.iso-image-view {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 16/12;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.iso-render-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.blueprint-vector-overlay {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(51, 213, 229, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(51, 213, 229, 0.1) 1px, transparent 1px);
    background-size: 15px 15px;
    pointer-events: none;
}
.iso-spec-tag {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: rgba(5, 5, 15, 0.9);
    border: 1px solid var(--accent-pink);
    border-radius: 8px;
    padding: 8px 15px;
    display: flex;
    flex-direction: column;
}
.tag-title {
    font-size: 0.6rem;
    font-weight: 800;
    color: var(--text-muted);
}
.tag-metric {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--accent-pink);
    font-family: 'Orbitron', sans-serif;
}

/* Mouse Wheel indicator bottom */
.bhk-scroll-mouse-premium {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    z-index: 5;
}
.scroll-txt {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 1px;
}
.mouse-icon-premium {
    width: 22px;
    height: 34px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    position: relative;
}
.wheel-premium {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 6px;
    background: var(--accent-cyan);
    border-radius: 2px;
    animation: scrollMouse 2s infinite;
}

@media (max-width: 1150px) {
    .hero-split-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .bhk-main-title-premium {
        font-size: 3rem !important;
    }
}
@media (max-width: 768px) {
    .bhk-hero-cta-premium {
        flex-direction: column;
        gap: 12px;
    }
}


/* ==========================================================
   2. ULTRA-LUXURY SEO EDITORIAL INTRO & BRAND AUTHORITY
   ========================================================== */
.luxury-editorial-intro-section {
    padding: 150px 0 120px;
    background: #020205; /* Deep rich luxury black */
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
}

/* Elegant Ambient Backgrounds */
.ambient-glow-top-left {
    position: absolute; top: -10%; left: -10%;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(51, 213, 229, 0.05) 0%, transparent 70%);
    border-radius: 50%; filter: blur(100px); pointer-events: none;
}
.ambient-glow-bottom-right {
    position: absolute; bottom: -10%; right: -10%;
    width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.03) 0%, transparent 70%);
    border-radius: 50%; filter: blur(100px); pointer-events: none;
}
.luxury-noise-overlay {
    position: absolute; inset: 0;
    background-image: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.03"/%3E%3C/svg%3E');
    pointer-events: none; z-index: 1;
}

/* Grid Layout */
.luxury-editorial-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 80px;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* ==========================================================
   LEFT COLUMN: CINEMATIC VISUAL COMPOSITION
   ========================================================== */
.visual-composition-column {
    position: relative;
    padding-right: 40px;
    padding-bottom: 60px;
}
.composition-wrapper {
    position: relative;
    width: 100%;
}
.glass-border {
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.8);
    border-radius: 24px;
    overflow: hidden;
}
.zoom-img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 1.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Main Image */
.main-image-frame {
    width: 100%; aspect-ratio: 4/5;
    position: relative; z-index: 1;
}
.main-image-frame:hover .zoom-img { transform: scale(1.05); }

/* Overlapping Detail Image */
.overlap-image-frame {
    position: absolute;
    bottom: -40px; right: -40px;
    width: 55%; aspect-ratio: 1/1;
    z-index: 2;
    border: 4px solid #020205; /* Creates separation */
}
.overlap-image-frame:hover .zoom-img { transform: scale(1.08); }
.parallax-up { animation: floatParallax 6s ease-in-out infinite alternate; }
@keyframes floatParallax { 0% { transform: translateY(0); } 100% { transform: translateY(-15px); } }

/* Floating Trust Badge */
.floating-trust-badge {
    position: absolute;
    top: 40px; left: -30px;
    display: flex; align-items: center; gap: 15px;
    padding: 15px 25px; border-radius: 16px;
    z-index: 3;
}
.glass-matte-light {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}
.badge-ring {
    width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(135deg, #FFD700, #ff9f43);
    display: flex; justify-content: center; align-items: center;
    color: #000; font-size: 1.1rem; box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}
.badge-text strong { display: block; color: #fff; font-size: 0.95rem; font-family: 'Orbitron', sans-serif; letter-spacing: 0.5px;}
.badge-text span { color: #a0aabf; font-size: 0.75rem; text-transform: uppercase; font-weight: 600; }

/* ==========================================================
   RIGHT COLUMN: SEO CONTENT & LINKS
   ========================================================== */
.content-composition-column {
    display: flex; flex-direction: column;
}

/* Eyebrow Text */
.brand-eyebrow {
    display: flex; align-items: center; gap: 10px; margin-bottom: 20px;
}
.pulse-dot-gold {
    width: 8px; height: 8px; background: #FFD700; border-radius: 50%;
    box-shadow: 0 0 10px #FFD700; animation: blinkGold 2s infinite;
}
@keyframes blinkGold { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.eyebrow-text { font-size: 0.75rem; color: #FFD700; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }

/* SEO Title */
.editorial-title {
    font-size: 3.2rem !important; line-height: 1.2 !important;
    font-family: 'Playfair Display', serif; color: #fff !important;
    margin-bottom: 30px;
}
.fw-light { font-weight: 400; font-style: italic; color: #e2e8f0; }
.text-gold-gradient {
    font-weight: 700;
    background: linear-gradient(135deg, #fff, #a0aabf);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* Editorial Body */
.editorial-content-body { margin-bottom: 35px; }
.eng-text {
    font-size: 1.05rem !important; line-height: 1.8 !important;
    color: #cbd5e1 !important; margin-bottom: 0; font-weight: 300;
}
.eng-text strong { color: #fff; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.2); }
.content-divider { width: 60px; height: 2px; background: var(--accent-cyan); margin: 20px 0; opacity: 0.5;}
.ben-text {
    font-size: 0.95rem !important; line-height: 1.7 !important;
    color: #94a3b8 !important; font-style: italic; margin-bottom: 0;
}

/* Mini Trust Metrics */
.mini-metrics-row {
    display: flex; gap: 25px; align-items: center;
    padding: 20px 0; border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05);
    margin-bottom: 35px;
}
.m-metric { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: #e2e8f0; font-weight: 600; }
.m-metric i { font-size: 1.2rem; }
.text-cyan { color: var(--accent-cyan); }
.text-gold { color: #FFD700; }
.text-pink { color: var(--accent-pink); }

/* Upgrade Links (2BHK, 3BHK, 4BHK) */
.explore-upgrades-box {
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05);
    border-radius: 16px; padding: 25px;
}
.up-label { display: block; font-size: 0.8rem; color: #8fa0bd; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px; }
.up-links { display: flex; gap: 15px; flex-wrap: wrap; }
.upgrade-pill {
    flex: 1; text-align: center;
    padding: 12px 20px; border-radius: 50px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
    color: #fff !important; font-size: 0.9rem; font-weight: 600; font-family: 'Poppins', sans-serif;
    text-decoration: none; transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex; justify-content: center; align-items: center; gap: 8px;
}
.upgrade-pill i { font-size: 0.8rem; color: #a0aabf; transition: 0.3s; }
.upgrade-pill:hover {
    background: #fff; color: #000 !important;
    border-color: #fff; box-shadow: 0 10px 20px rgba(255,255,255,0.2);
    transform: translateY(-3px);
}
.upgrade-pill:hover i { color: #000; transform: translateX(5px); }

/* ==========================================================
   RESPONSIVE DESIGN
   ========================================================== */
@media (max-width: 1150px) {
    .luxury-editorial-grid { grid-template-columns: 1fr; gap: 80px; }
    .visual-composition-column { padding-right: 20px; width: 90%; margin: 0 auto; }
    .floating-trust-badge { left: -10px; }
}
@media (max-width: 768px) {
    .editorial-title { font-size: 2.4rem !important; }
    .visual-composition-column { width: 100%; padding-right: 20px; padding-bottom: 40px; }
    .overlap-image-frame { width: 60%; right: -10px; bottom: -20px;}
    .mini-metrics-row { flex-wrap: wrap; gap: 15px; }
    .up-links { flex-direction: column; }
}

/* ==========================================================
   3. WORLD-CLASS BEFORE & AFTER KINETIC ANALYSIS ENGINE (V2.0)
   ========================================================== */
.premium-transformation-section {
    padding: 140px 0;
    background: #02020a; /* Deepest space blue/black */
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(51, 213, 229, 0.15);
}

/* Ambient Flares & Kinetic Grid */
.kinetic-bg-grid {
    position: absolute; inset: -50%;
    background-image: 
        linear-gradient(rgba(51, 213, 229, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(51, 213, 229, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    transform: perspective(1000px) rotateX(60deg) translateY(0);
    animation: gridMove 25s linear infinite;
    z-index: 0; pointer-events: none;
}
@keyframes gridMove {
    0% { transform: perspective(1000px) rotateX(60deg) translateY(0); }
    100% { transform: perspective(1000px) rotateX(60deg) translateY(60px); }
}
.ambient-flare {
    position: absolute; width: 600px; height: 600px; border-radius: 50%;
    filter: blur(150px); opacity: 0.15; z-index: 0; pointer-events: none;
}
.flare-cyan { background: var(--accent-cyan); top: 0; left: -10%; }
.flare-pink { background: var(--accent-pink); bottom: -20%; right: -10%; }

.transformation-dashboard-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.9fr;
    gap: 45px; margin-top: 50px; position: relative; z-index: 2;
}

/* Ultra-Premium Glassmorphism (Sharper, cleaner) */
.glass-matte-ultra {
    background: rgba(8, 8, 20, 0.65) !important;
    backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-top: 1px solid rgba(255, 255, 255, 0.15); /* Soft top highlight */
    border-radius: 24px;
    box-shadow: 0 35px 70px rgba(0, 0, 0, 0.9), inset 0 0 40px rgba(51, 213, 229, 0.03);
}

.slider-telemetry-panel { padding: 30px; display: flex; flex-direction: column; gap: 20px; }

/* Top HUD Bar */
.hud-top-telemetry-bar {
    display: flex; justify-content: space-between; align-items: center;
    background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(51, 213, 229, 0.2);
    border-radius: 12px; padding: 12px 20px;
    font-family: 'Orbitron', sans-serif; font-size: 0.75rem; color: #a0aabf;
    box-shadow: inset 0 0 15px rgba(51, 213, 229, 0.05);
}
.hud-status-node { display: flex; align-items: center; gap: 8px; }
.font-bold { font-weight: 800; letter-spacing: 1px;}
.led-blink-cyan {
    display: inline-block; width: 8px; height: 8px; background: var(--accent-cyan);
    border-radius: 50%; box-shadow: 0 0 12px var(--accent-cyan);
    animation: blinkLed 1.5s infinite;
}
@keyframes blinkLed { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
.telemetry-timer { color: var(--accent-pink); font-weight: 700; letter-spacing: 0.5px;}

/* The Cyber Frame around image */
.cyber-frame-glow {
    position: relative; padding: 10px; background: #000;
    border-radius: 20px; border: 1px solid rgba(51, 213, 229, 0.15);
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
.hud-corner { position: absolute; width: 25px; height: 25px; z-index: 10; pointer-events: none; opacity: 0.8; }
.hud-corner.top-left { top: -2px; left: -2px; } .hud-corner.top-right { top: -2px; right: -2px; }
.hud-corner.bottom-left { bottom: -2px; left: -2px; } .hud-corner.bottom-right { bottom: -2px; right: -2px; }

/* Slider Container */
.custom-ba-container {
    position: relative; width: 100%; aspect-ratio: 16/10.5;
    border-radius: 14px; overflow: hidden; cursor: ew-resize;
}
.ba-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba-after { z-index: 1; }
.ba-before-wrapper {
    position: absolute; inset: 0; z-index: 2;
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}
.ba-before-img { filter: grayscale(10%) sepia(1.1); }
.holographic-scan-overlay {
    position: absolute; inset: 0;
    background: repeating-linear-gradient(transparent 0, transparent 2px, rgba(51, 213, 229, 0.1) 3px, rgba(51, 213, 229, 0.1) 4px);
    z-index: 3; opacity: 0.5; pointer-events: none; mix-blend-mode: screen;
}

/* Kinetic Slider Laser Beam & Reticle Handle */
.ba-slider-line {
    position: absolute; top: 0; left: 50%; width: 2px; height: 100%;
    z-index: 4; transform: translateX(-50%); pointer-events: none;
}
.laser-beam {
    width: 100%; height: 100%; background: #fff;
    box-shadow: 0 0 10px 2px var(--accent-cyan), 0 0 25px 4px var(--accent-pink);
}
.ba-slider-handle {
    position: absolute; top: 50%; left: 50%; width: 44px; height: 44px;
    z-index: 5; transform: translate(-50%, -50%);
    display: flex; justify-content: center; align-items: center;
}
/* The Sniper Target Reticle */
.target-reticle {
    position: absolute; inset: 0; border: 2px solid var(--accent-cyan);
    border-radius: 50%; background: rgba(5, 5, 15, 0.6);
    backdrop-filter: blur(5px); box-shadow: 0 0 20px rgba(51, 213, 229, 0.8);
}
.target-reticle::before, .target-reticle::after {
    content: ''; position: absolute; background: var(--accent-cyan);
}
.target-reticle::before { top: -8px; left: 50%; width: 2px; height: 12px; transform: translateX(-50%); box-shadow: 0 56px 0 var(--accent-cyan); }
.target-reticle::after { left: -8px; top: 50%; height: 2px; width: 12px; transform: translateY(-50%); box-shadow: 56px 0 0 var(--accent-cyan); }
.handle-icon { color: #fff; font-size: 0.9rem; z-index: 2; text-shadow: 0 0 5px #000;}

/* Dynamic Glass Labels (Replaced solid black boxes) */
.glass-pill {
    position: absolute; top: 20px;
    padding: 8px 18px; border-radius: 50px;
    background: rgba(10, 10, 25, 0.35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff !important; font-size: 0.75rem; font-family: 'Orbitron', sans-serif;
    font-weight: 700; letter-spacing: 1px; z-index: 3;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}
.label-before { left: 20px; border-left: 3px solid var(--accent-pink); }
.label-after { right: 20px; border-right: 3px solid var(--accent-cyan); }

.ba-native-slider { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; opacity: 0; cursor: ew-resize; }

/* Tactical Hotspots */
.tech-hotspot { position: absolute; width: 30px; height: 30px; z-index: 3; cursor: pointer; }
.tech-hotspot .ping-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent-cyan); animation: hudPulse 2s infinite ease-out; }
@keyframes hudPulse { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(2.5); opacity: 0; } }
.tech-hotspot .core-dot { position: absolute; top: 5px; left: 5px; width: 20px; height: 20px; background: var(--accent-cyan); border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #000; font-size: 0.6rem; box-shadow: 0 0 15px var(--accent-cyan); }
.tech-hotspot::after {
    content: attr(data-tip); position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
    background: rgba(5, 5, 15, 0.95); border: 1px solid var(--accent-cyan); color: #fff;
    font-size: 0.75rem; font-family: 'Poppins', sans-serif; padding: 6px 12px; border-radius: 6px;
    white-space: nowrap; opacity: 0; pointer-events: none; transition: 0.3s ease; box-shadow: 0 10px 20px rgba(0,0,0,0.6);
}
.tech-hotspot:hover::after { opacity: 1; bottom: 45px; }

/* Live Kinetic Readout (Cyber-Angled Shape) */
.cyber-clip-panel {
    display: flex; justify-content: space-around; align-items: center;
    background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(51, 213, 229, 0.2);
    padding: 15px; position: relative;
    /* Angled corners for Sci-Fi look */
    clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
}
.readout-box { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 45%; }
.readout-box .r-title { font-size: 0.7rem; color: #8fa0bd; text-transform: uppercase; font-weight: 700; letter-spacing: 1px;}
.readout-box .r-value { font-family: 'Orbitron', sans-serif; font-size: 1.6rem; font-weight: 800; transition: color 0.3s, text-shadow 0.3s;}
.readout-divider { width: 1px; height: 35px; background: rgba(51, 213, 229, 0.3); transform: rotate(15deg); }

/* ==========================================================
   RIGHT PANEL: LEDGER METRICS
   ========================================================== */
.metrics-ledger-panel { padding: 35px; display: flex; flex-direction: column; justify-content: space-between; }
.ledger-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed rgba(255,255,255,0.15); padding-bottom: 15px; margin-bottom: 25px; }
.lh-title { display: flex; align-items: center; gap: 12px; }
.lh-title h3 { font-size: 1.25rem; color: #fff !important; margin: 0; font-family: 'Playfair Display', serif;}
.rotating-icon { font-size: 1.2rem; animation: spinSlow 8s linear infinite; }
@keyframes spinSlow { 100% { transform: rotate(360deg); } }
.glowing-border { font-size: 0.7rem; font-weight: 800; color: #2ecc71; border: 1px solid rgba(46, 204, 113, 0.5); padding: 5px 12px; border-radius: 50px; background: rgba(46, 204, 113, 0.05); }

/* KPI Hologram Cards */
.ledger-kpis-deck { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 30px; }
.cyber-hover {
    position: relative; overflow: hidden; background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.06); border-radius: 14px;
    padding: 20px 10px; text-align: center; transition: 0.4s ease;
}
.cyber-hover:hover { background: rgba(51, 213, 229, 0.03); border-color: rgba(51, 213, 229, 0.4); transform: translateY(-5px); }
.kpi-bg-icon { position: absolute; right: -5px; bottom: -5px; font-size: 3.5rem; color: rgba(255,255,255,0.02); transition: 0.4s ease; }
.cyber-hover:hover .kpi-bg-icon { color: rgba(51, 213, 229, 0.08); transform: scale(1.1); }
.kpi-value { font-family: 'Orbitron', sans-serif; font-size: 1.4rem; font-weight: 800; display: block; margin-bottom: 5px; }
.kpi-label { font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px;}
.kpi-bottom-glow { position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; opacity: 0.5; }
.bg-cyan { background: var(--accent-cyan); box-shadow: 0 0 10px var(--accent-cyan); }
.bg-pink { background: var(--accent-pink); box-shadow: 0 0 10px var(--accent-pink); }
.bg-gold { background: #FFD700; box-shadow: 0 0 10px #FFD700; }

/* Terminal Specs (Perfectly Aligned with Flex + Dots) */
.project-specs-terminal {
    background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(51, 213, 229, 0.15);
    border-radius: 14px; padding: 20px 25px; display: flex; flex-direction: column; gap: 12px;
    margin-bottom: 30px; position: relative; overflow: hidden;
}
.scanline-bg::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(transparent, transparent 2px, rgba(51,213,229,0.03) 3px, transparent 4px);
}
.terminal-row { display: flex; align-items: center; width: 100%; }
.t-label { font-size: 0.8rem; color: #8fa0bd; display: flex; align-items: center; gap: 8px; flex-shrink: 0;}
/* Magic Dots for perfect alignment! */
.t-dots { flex-grow: 1; border-bottom: 1px dotted rgba(255, 255, 255, 0.15); margin: 0 12px; position: relative; top: -3px; }
.t-value { font-family: 'Orbitron', sans-serif; font-size: 0.8rem; font-weight: 700; color: #fff; flex-shrink: 0;}
.blinking-cursor { animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Digital Dossier (Classified Look) */
.dossier-style {
    background: rgba(0, 0, 0, 0.3) !important; border: 1px solid rgba(255,255,255,0.06) !important;
    border-left: 3px solid var(--accent-cyan) !important; position: relative; overflow: hidden;
    border-radius: 0 16px 16px 0 !important;
}
.dossier-watermark {
    position: absolute; right: -10px; top: 15px; font-size: 3rem; font-weight: 900;
    color: rgba(255,255,255,0.02); transform: rotate(-10deg); font-family: 'Orbitron', sans-serif;
    pointer-events: none; letter-spacing: 2px;
}
.quote-author { display: flex; align-items: center; gap: 15px; margin-top: 15px; }
.author-avatar-frame { position: relative; width: 45px; height: 45px; }
.author-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.avatar-ring { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); animation: spinSlow 10s linear infinite; }
.author-details strong { display: block; color: #fff; font-size: 0.9rem; }
.author-details span { color: var(--text-muted); font-size: 0.75rem; }

@media (max-width: 1100px) {
    .transformation-dashboard-grid { grid-template-columns: 1fr; }
}

/* ==========================================================
   4. THE THRESHOLD GATEWAY: FOYER & ENTRYWAY ENGINEERING
   ========================================================== */
.bhk-threshold-gateway-premium {
    padding: 130px 0;
    background: radial-gradient(circle at center left, #05101a 0%, var(--bg-deep) 100%);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(51, 213, 229, 0.1);
}

/* Background Layers */
.threshold-bg-glow {
    position: absolute;
    width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(51, 213, 229, 0.05) 0%, transparent 70%);
    top: -20%; left: -20%;
    z-index: 0; pointer-events: none;
    animation: organicBreathe 10s infinite alternate;
}
.threshold-particle-grid {
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1.5px, transparent 1.5px);
    background-size: 25px 25px;
    z-index: 1; pointer-events: none;
}

/* Header Typography */
.tech-badge-threshold {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 18px; border-radius: 50px; margin-bottom: 20px;
    font-size: 0.75rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
    position: relative; z-index: 2;
}
.glow-title-threshold { font-size: 3rem !important; font-family: 'Playfair Display', serif; color: #fff !important; margin-bottom: 20px; position: relative; z-index: 2; }
.premium-desc-threshold { max-width: 750px; margin: 0 auto 50px; color: var(--text-muted); line-height: 1.6; position: relative; z-index: 2; }

/* The Master Grid Layout */
.threshold-master-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr; /* 45% Image, 55% Data Console */
    gap: 50px;
    position: relative;
    z-index: 2;
    align-items: center;
}

/* ==========================================================
   LEFT COLUMN: THE X-RAY VISUAL ENGINE
   ========================================================== */
.t-image-frame {
    padding: 15px;
    border-radius: 24px;
    border: 1px solid rgba(51, 213, 229, 0.2) !important;
    background: rgba(5, 10, 20, 0.8) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(51, 213, 229, 0.05);
    position: relative;
}

/* Frame Header */
.t-frame-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 5px 10px 15px; font-family: 'Orbitron', sans-serif; font-size: 0.7rem; color: #8fa0bd;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1); margin-bottom: 15px;
}
.t-mode { font-weight: 700; display: flex; align-items: center; gap: 8px; }

/* Image Area & X-Ray Blueprint Magic */
.t-xray-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 3.5/5; /* Tall Portrait for Foyer */
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    cursor: crosshair;
}
.t-main-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: contrast(1.1) brightness(0.9);
    transition: clip-path 0.5s ease;
    z-index: 2; /* Sits on top initially */
}

/* The Blueprint Underneath */
.t-blueprint-layer {
    position: absolute; inset: 0;
    background: #020813;
    z-index: 1; /* Revealed when top image is clipped */
    display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.t-blueprint-bg {
    position: absolute; inset: 0;
    background-image: 
        linear-gradient(rgba(51, 213, 229, 0.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(51, 213, 229, 0.3) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.8;
}
.t-wireframe-text {
    position: relative; z-index: 2; text-align: center;
    font-family: 'Orbitron', sans-serif; color: var(--accent-cyan);
    font-size: 0.85rem; font-weight: 700; background: rgba(0,0,0,0.7);
    padding: 15px 25px; border-radius: 8px; border: 1px solid var(--accent-cyan);
    box-shadow: 0 0 20px rgba(51, 213, 229, 0.4);
}

/* Sci-Fi Laser Scanner (Activates on Hover) */
.t-laser-scanner {
    position: absolute; top: -10px; left: 0; width: 100%; height: 3px;
    background: var(--accent-pink); box-shadow: 0 0 20px 5px rgba(232, 73, 232, 0.6);
    z-index: 5; opacity: 0; pointer-events: none; transition: 0.3s ease;
}

/* HOVER LOGIC FOR X-RAY EFFECT */
.t-xray-wrapper:hover .t-main-img {
    /* Clips the top image dynamically to reveal the blueprint below */
    clip-path: polygon(0 0, 100% 0, 100% 40%, 0 40%);
}
.t-xray-wrapper:hover .t-laser-scanner {
    opacity: 1;
    top: 40%; /* Matches the clip-path edge */
    animation: scannerPulse 1s infinite alternate;
}
@keyframes scannerPulse { 0% { box-shadow: 0 0 10px 2px rgba(232, 73, 232, 0.4); } 100% { box-shadow: 0 0 25px 8px rgba(232, 73, 232, 0.8); } }

/* Floating Hint Tag */
.t-floating-hint {
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
    background: rgba(5, 10, 20, 0.9); border: 1px solid rgba(255,255,255,0.2);
    color: #fff; font-size: 0.75rem; font-family: 'Poppins', sans-serif; font-weight: 600;
    padding: 8px 20px; border-radius: 50px; z-index: 10;
    box-shadow: 0 10px 20px rgba(0,0,0,0.6); white-space: nowrap; transition: 0.3s;
}
.t-xray-wrapper:hover .t-floating-hint { opacity: 0; }
.pulse-icon { animation: blinkLed 1s infinite; color: var(--accent-cyan); margin-right: 5px; }

/* ==========================================================
   RIGHT COLUMN: ENGINEERING DATA CONSOLE
   ========================================================== */
.threshold-data-console {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Top Analytics Bar */
.t-analytics-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 25px; border-radius: 16px;
    border: 1px solid rgba(51, 213, 229, 0.2);
}
.t-a-icon { font-size: 2rem; color: rgba(255,255,255,0.05); }
.t-a-data { display: flex; flex-direction: column; gap: 5px; }
.t-a-lbl { font-size: 0.7rem; color: #8fa0bd; text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px;}
.t-a-val { font-family: 'Orbitron', sans-serif; font-size: 1.1rem; font-weight: 800; }
.t-a-divider { width: 1px; height: 35px; background: rgba(255,255,255,0.1); }

/* Engineering Spec Cards */
.t-specs-deck {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.t-spec-card {
    display: flex; gap: 20px; align-items: flex-start;
    padding: 25px; border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(10, 10, 20, 0.6) !important;
    transition: 0.4s ease;
}
.t-spec-card:hover {
    transform: translateX(-10px);
    background: rgba(51, 213, 229, 0.05) !important;
    border-color: rgba(51, 213, 229, 0.3);
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
}

.t-card-icon {
    width: 50px; height: 50px; border-radius: 12px;
    display: flex; justify-content: center; align-items: center;
    font-size: 1.3rem; background: rgba(255, 255, 255, 0.03); flex-shrink: 0;
}

.t-card-content { display: flex; flex-direction: column; flex-grow: 1; }
.t-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.t-card-header h4 { font-size: 1.15rem; color: #fff !important; margin: 0; font-family: 'Playfair Display', serif; }
.t-badge {
    font-family: 'Orbitron', sans-serif; font-size: 0.65rem; font-weight: 800;
    padding: 4px 10px; border-radius: 6px; letter-spacing: 0.5px;
    background: rgba(0,0,0,0.5); border: 1px solid;
}

.t-card-content p { font-size: 0.85rem !important; color: var(--text-muted) !important; line-height: 1.6 !important; margin: 0; }

@media (max-width: 1050px) {
    .threshold-master-grid { grid-template-columns: 1fr; gap: 40px; }
    .t-xray-wrapper { aspect-ratio: 16/10; } /* Switch to landscape for mobile */
    .t-spec-card:hover { transform: translateY(-5px) translateX(0); }
}
@media (max-width: 600px) {
    .t-analytics-bar { flex-direction: column; gap: 15px; align-items: flex-start; }
    .t-a-divider { width: 100%; height: 1px; }
    .t-spec-card { flex-direction: column; gap: 15px; }
}

/* ==========================================================
   5. THE KINETIC LOUNGE: MODULAR LIVING & DINING MATRIX
   ========================================================== */
.bhk-kinetic-lounge-premium {
    padding: 130px 0;
    background: radial-gradient(circle at top right, #0d021c 0%, var(--bg-deep) 100%);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(138, 43, 226, 0.1); /* Violet border */
}

/* Depth Layers & Kinetic Patterns */
.lounge-bg-glow {
    position: absolute;
    width: 600px; height: 600px;
    border-radius: 50%;
    filter: blur(150px);
    opacity: 0.15;
    z-index: 0; pointer-events: none;
    animation: organicBreathe 8s infinite alternate ease-in-out;
}
.glow-violet { background: #8a2be2; top: -10%; left: -10%; }
.glow-cyan-alt { background: var(--accent-cyan); bottom: 10%; right: -10%; opacity: 0.1;}

.lounge-tech-pattern {
    position: absolute; inset: 0;
    background-image: 
        radial-gradient(rgba(138, 43, 226, 0.05) 1px, transparent 1px),
        radial-gradient(rgba(51, 213, 229, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
    z-index: 1; pointer-events: none;
}

/* Color Utilities */
.text-violet { color: #b46dff !important; } /* Light Electric Violet */
.glowing-border-violet {
    border: 1px solid rgba(138, 43, 226, 0.5) !important;
    box-shadow: 0 0 15px rgba(138, 43, 226, 0.2);
    color: #b46dff !important;
    background: rgba(138, 43, 226, 0.05) !important;
}
.gradient-violet-text {
    background: linear-gradient(135deg, #b46dff, #ff7eb3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.border-violet { border: 1px solid rgba(138, 43, 226, 0.4); color: #b46dff; background: rgba(138, 43, 226, 0.1); }
.border-cyan { border: 1px solid rgba(51, 213, 229, 0.4); color: var(--accent-cyan); background: rgba(51, 213, 229, 0.1); }
.border-pink { border: 1px solid rgba(232, 73, 232, 0.4); color: var(--accent-pink); background: rgba(232, 73, 232, 0.1); }

/* Header Elements */
.tech-badge-lounge {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 18px; border-radius: 50px; margin-bottom: 20px;
    font-size: 0.75rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
    position: relative; z-index: 2;
}
.glow-title-lounge { font-size: 3rem !important; font-family: 'Playfair Display', serif; color: #fff !important; margin-bottom: 20px; position: relative; z-index: 2; }
.premium-desc-lounge { max-width: 750px; margin: 0 auto 50px; color: var(--text-muted); line-height: 1.6; position: relative; z-index: 2; }

/* ==========================================================
   THE MASTER GRID LOGIC
   ========================================================== */
.lounge-master-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.95fr; /* 55% image, 45% cards */
    gap: 40px;
    position: relative;
    z-index: 2;
}

/* ==========================================================
   LEFT COLUMN: THE CINEMATIC VISUAL CORE
   ========================================================== */
.lounge-visual-core {
    display: flex;
    flex-direction: column;
}
.l-image-frame {
    padding: 15px;
    border-radius: 24px;
    border: 1px solid rgba(138, 43, 226, 0.15) !important;
    background: rgba(10, 5, 25, 0.8) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7);
    position: sticky;
    top: 100px; /* Sticks on scroll for a cool effect */
}

/* Frame Header */
.l-frame-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 5px 10px 15px; font-family: 'Orbitron', sans-serif; font-size: 0.7rem; color: #8fa0bd;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1); margin-bottom: 15px;
}
.l-mode { font-weight: 700; display: flex; align-items: center; gap: 8px; }

/* Image Area */
.l-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 4/4.5;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.l-main-img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: contrast(1.05) brightness(0.9);
    transition: transform 1.5s ease;
}
.l-image-frame:hover .l-main-img { transform: scale(1.03); }

/* Sci-Fi Laser Scan Line */
.l-laser-scan {
    position: absolute; top: 0; left: 0; width: 100%; height: 2px;
    background: #b46dff; box-shadow: 0 0 15px 3px rgba(138, 43, 226, 0.6);
    z-index: 5; animation: violetScan 5s ease-in-out infinite alternate; pointer-events: none;
    opacity: 0.7;
}
@keyframes violetScan { 0% { top: 0; } 100% { top: calc(100% - 2px); } }

/* Floating Functionality Tag (3-in-1 UI) */
.l-function-tag {
    position: absolute;
    bottom: 20px; left: 50%;
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 15px;
    background: rgba(5, 2, 15, 0.85);
    border: 1px solid rgba(138, 43, 226, 0.4);
    padding: 10px 20px; border-radius: 50px;
    z-index: 10;
    box-shadow: 0 15px 30px rgba(0,0,0,0.6);
}
.f-item { font-family: 'Orbitron', sans-serif; font-size: 0.75rem; color: #fff; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.f-item i { color: #b46dff; }
.f-divider { width: 4px; height: 4px; background: var(--accent-cyan); border-radius: 50%; }

/* Violet Hotspots */
.hotspot-violet .ping-ring-violet { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #b46dff; animation: hudPulse 2s infinite ease-out; }
.hotspot-violet .core-dot-violet { position: absolute; top: 5px; left: 5px; width: 20px; height: 20px; background: #b46dff; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 0.6rem; box-shadow: 0 0 15px #b46dff; }

/* ==========================================================
   RIGHT COLUMN: MODULAR COMPONENTS DECK
   ========================================================== */
.lounge-modules-deck {
    display: flex;
    flex-direction: column;
    gap: 25px;
}
.l-tech-card {
    padding: 25px 30px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(10, 5, 20, 0.6) !important;
    transition: 0.4s ease;
    display: flex; flex-direction: column;
}
.l-tech-card:hover {
    transform: translateX(-10px);
    background: rgba(138, 43, 226, 0.05) !important;
    border-color: rgba(138, 43, 226, 0.3);
    box-shadow: 0 15px 35px rgba(0,0,0,0.5), inset 0 0 15px rgba(138, 43, 226, 0.05);
}

.l-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.l-icon-wrap {
    width: 45px; height: 45px; border-radius: 12px;
    display: flex; justify-content: center; align-items: center;
    font-size: 1.2rem; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255,255,255,0.08);
}
.icon-violet { color: #b46dff; border-color: rgba(138, 43, 226, 0.3) !important; background: rgba(138, 43, 226, 0.1) !important; }

.l-spec-badge {
    font-family: 'Orbitron', sans-serif; font-size: 0.65rem; font-weight: 800;
    padding: 4px 10px; border-radius: 6px; letter-spacing: 0.5px;
}

.l-tech-card h3 { font-size: 1.3rem; color: #fff !important; margin: 0 0 10px 0; font-family: 'Playfair Display', serif; }
.l-tech-card p { font-size: 0.85rem !important; color: var(--text-muted) !important; line-height: 1.6 !important; margin-bottom: 20px; }

/* Load Metrics Footer inside cards */
.l-load-metric {
    margin-top: auto;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 15px;
    border-radius: 10px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.75rem;
}
.l-load-metric span { color: #8fa0bd; font-weight: 600; text-transform: uppercase; }
.l-load-metric strong { font-family: 'Orbitron', sans-serif; font-size: 0.85rem; }

/* ==========================================================
   RESPONSIVE LOGIC
   ========================================================== */
@media (max-width: 1050px) {
    .lounge-master-grid { grid-template-columns: 1fr; gap: 50px; }
    .l-image-frame { position: relative; top: 0; }
    .l-image-wrapper { aspect-ratio: 16/10; }
    .l-tech-card:hover { transform: translateY(-5px) translateX(0); }
}
@media (max-width: 600px) {
    .l-function-tag { width: 90%; justify-content: center; gap: 10px; padding: 10px; }
    .f-item { font-size: 0.65rem; }
}

/* ==========================================================
   6. THE CULINARY COCKPIT: 1BHK MODULAR KITCHEN MATRIX
   ========================================================== */
.bhk-culinary-cockpit-section {
    padding: 130px 0;
    background: #03030a;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
}

/* Background Grids & Orbs */
.cockpit-bg-grid {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(255, 215, 0, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 215, 0, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 0;
    pointer-events: none;
}
.cockpit-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(150px);
    opacity: 0.15;
    z-index: 0;
    pointer-events: none;
}
.orb-gold {
    width: 600px; height: 600px;
    background: #FFD700;
    top: -10%; left: -10%;
}

/* Gold Theme Utilities */
.text-gold { color: #FFD700 !important; }
.glowing-border-gold {
    border: 1px solid rgba(255, 215, 0, 0.5) !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
    color: #FFD700 !important;
    background: rgba(255, 215, 0, 0.05) !important;
}
.gradient-gold-text {
    background: linear-gradient(135deg, #FFD700, #ff9f43);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Header Adjustments */
.tech-badge-kitchen {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 18px; border-radius: 50px; margin-bottom: 20px;
    font-size: 0.75rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
}
.glow-title-kitchen { font-size: 3rem !important; font-family: 'Playfair Display', serif; color: #fff !important; margin-bottom: 20px; }
.premium-desc-kitchen { max-width: 750px; margin: 0 auto 50px; color: var(--text-muted); line-height: 1.6; position: relative; z-index: 2; }

/* The Master Grid Layout */
.cockpit-master-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    position: relative;
    z-index: 2;
}

/* ==========================================================
   LEFT SIDE: VISUAL BLUEPRINT FRAME (3D HOVER)
   ========================================================== */
.cockpit-visual-frame {
    display: flex;
    flex-direction: column;
    padding: 15px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    background: rgba(10, 10, 20, 0.8) !important;
    border-radius: 24px;
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.5s;
}
.cockpit-visual-frame:hover {
    transform: perspective(1000px) rotateX(2deg) rotateY(2deg);
    box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.8), inset 0 0 30px rgba(255, 215, 0, 0.05);
}

.visual-header-bar, .visual-footer-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 15px; font-family: 'Orbitron', sans-serif; font-size: 0.7rem; color: #8fa0bd;
}
.visual-header-bar { border-bottom: 1px dashed rgba(255, 255, 255, 0.1); margin-bottom: 15px; }
.visual-footer-bar { border-top: 1px dashed rgba(255, 255, 255, 0.1); margin-top: 15px; color: #64748b;}
.led-blink-green {
    display: inline-block; width: 6px; height: 6px;
    background: #2ecc71; border-radius: 50%; box-shadow: 0 0 10px #2ecc71;
    animation: blinkLed 1s infinite; margin-left: 5px;
}

.interactive-kitchen-image {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.blueprint-base-img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: contrast(1.1) brightness(0.85);
}
.cyber-scan-line {
    position: absolute; top: 0; left: 0; width: 100%; height: 3px;
    background: rgba(255, 215, 0, 0.8); box-shadow: 0 0 20px 5px rgba(255, 215, 0, 0.4);
    z-index: 5; animation: kitchenScan 6s linear infinite; pointer-events: none;
}
@keyframes kitchenScan { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

/* Holographic Hotspots Override for Kitchen */
.hotspot-gold .ping-ring-gold { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #FFD700; animation: hudPulse 2s infinite ease-out; }
.hotspot-gold .core-dot-gold { position: absolute; top: 5px; left: 5px; width: 20px; height: 20px; background: #FFD700; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #000; font-size: 0.6rem; box-shadow: 0 0 15px #FFD700; }
.hotspot-cyan .ping-ring-cyan { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent-cyan); animation: hudPulse 2s infinite ease-out 0.5s; }
.hotspot-cyan .core-dot-cyan { position: absolute; top: 5px; left: 5px; width: 20px; height: 20px; background: var(--accent-cyan); border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #000; font-size: 0.6rem; box-shadow: 0 0 15px var(--accent-cyan); }
.hotspot-pink .ping-ring-pink { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent-pink); animation: hudPulse 2s infinite ease-out 1s; }
.hotspot-pink .core-dot-pink { position: absolute; top: 5px; left: 5px; width: 20px; height: 20px; background: var(--accent-pink); border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 0.6rem; box-shadow: 0 0 15px var(--accent-pink); }

/* ==========================================================
   RIGHT SIDE: DATA CONSOLE CARDS
   ========================================================== */
.cockpit-data-console {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.cyber-hover-card {
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(10, 10, 20, 0.7) !important;
    border-radius: 20px;
    transition: 0.4s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.cyber-hover-card:hover {
    border-color: rgba(255, 215, 0, 0.3);
    background: rgba(255, 215, 0, 0.02) !important;
    transform: translateX(-5px);
}
.widget-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 15px; border-bottom: 1px dashed rgba(255, 255, 255, 0.1); padding-bottom: 10px;
}
.widget-header h4 { font-size: 1.1rem; color: #fff !important; margin: 0; font-family: 'Playfair Display', serif; }
.w-badge {
    font-family: 'Orbitron', sans-serif; font-size: 0.65rem; font-weight: 800;
    color: #fff; background: rgba(255, 255, 255, 0.1); padding: 4px 10px; border-radius: 6px;
}

.w-desc { font-size: 0.85rem !important; color: var(--text-muted) !important; line-height: 1.6 !important; margin-bottom: 20px; }

/* CSS Radar Triangle (Widget 1) */
.ergonomic-radar-box {
    position: relative; width: 100%; height: 120px;
    background: rgba(0,0,0,0.4); border-radius: 12px; border: 1px solid rgba(255,255,255,0.05);
    overflow: hidden;
}
.radar-node {
    position: absolute; width: 8px; height: 8px; background: #FFD700; border-radius: 50%;
    box-shadow: 0 0 10px #FFD700; z-index: 2;
}
.radar-node span {
    position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
    color: #fff; font-size: 0.7rem; font-family: 'Orbitron', sans-serif;
}
.node-sink { top: 15%; left: 50%; transform: translateX(-50%); }
.node-hob { bottom: 15%; left: 15%; }
.node-fridge { bottom: 15%; right: 15%; }
.radar-lines {
    position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
}
.radar-polygon {
    fill: rgba(255, 215, 0, 0.1);
    stroke: rgba(255, 215, 0, 0.6);
    stroke-width: 1.5;
    stroke-dasharray: 4;
    animation: pulsePolygon 3s infinite alternate ease-in-out;
}
@keyframes pulsePolygon { 0% { fill: rgba(255, 215, 0, 0.05); } 100% { fill: rgba(255, 215, 0, 0.2); } }

/* Payload Metrics (Widget 2) */
.payload-metrics-deck { display: flex; flex-direction: column; gap: 15px; }
.payload-row { display: flex; flex-direction: column; gap: 6px; }
.p-label { font-size: 0.75rem; color: #8fa0bd; font-family: 'Orbitron', sans-serif; }
.p-bar-bg { width: 100%; height: 6px; background: rgba(255,255,255,0.05); border-radius: 10px; overflow: hidden; }
.p-bar-fill { height: 100%; border-radius: 10px; transition: width 1.5s ease; }
.fill-cyan { background: var(--accent-cyan); box-shadow: 0 0 10px var(--accent-cyan); }
.fill-pink { background: var(--accent-pink); box-shadow: 0 0 10px var(--accent-pink); }
.fill-gold { background: #FFD700; box-shadow: 0 0 10px #FFD700; }

/* Defense Specs List (Widget 3) */
.defense-specs-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 15px; }
.defense-specs-list li { display: flex; align-items: flex-start; gap: 15px; }
.defense-specs-list li i {
    width: 35px; height: 35px; background: rgba(255,255,255,0.05); border-radius: 8px;
    display: flex; justify-content: center; align-items: center; color: var(--accent-pink); font-size: 0.9rem; flex-shrink: 0;
}
.d-txt strong { display: block; color: #fff; font-size: 0.9rem; margin-bottom: 4px; }
.d-txt span { color: #cbd5e1; font-size: 0.8rem; line-height: 1.4; display: block;}

@media (max-width: 1050px) {
    .cockpit-master-grid { grid-template-columns: 1fr; }
    .interactive-kitchen-image { aspect-ratio: 16/10; }
}

/* ==========================================================
   7. THE SANCTUARY ARCHITECTURE: MASTER BEDROOM & CLOSET HUB
   ========================================================== */
.bhk-sanctuary-section-premium {
    padding: 130px 0;
    background: radial-gradient(circle at bottom left, #0d0a15 0%, var(--bg-deep) 100%);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(232, 73, 232, 0.1);
}

/* Depth Layers & Mesh Overlays */
.sanctuary-bg-glow {
    position: absolute;
    width: 800px; height: 800px;
    background: radial-gradient(circle, rgba(232, 73, 232, 0.05) 0%, transparent 70%);
    top: -20%; right: -10%;
    z-index: 0; pointer-events: none;
}
.sanctuary-mesh-overlay {
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.02) 2px, transparent 2px);
    background-size: 30px 30px;
    z-index: 1; pointer-events: none;
}

/* Theme Utilities (Pink Dominant) */
.text-pink { color: var(--accent-pink) !important; }
.glowing-border-pink {
    border: 1px solid rgba(232, 73, 232, 0.5) !important;
    box-shadow: 0 0 15px rgba(232, 73, 232, 0.2);
    color: var(--accent-pink) !important;
    background: rgba(232, 73, 232, 0.05) !important;
}
.gradient-pink-text {
    background: linear-gradient(135deg, var(--accent-pink), #ff7eb3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Header Elements */
.tech-badge-sanctuary {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 18px; border-radius: 50px; margin-bottom: 20px;
    font-size: 0.75rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
    position: relative; z-index: 2;
}
.glow-title-sanctuary { font-size: 3rem !important; font-family: 'Playfair Display', serif; color: #fff !important; margin-bottom: 20px; position: relative; z-index: 2; }
.premium-desc-sanctuary { max-width: 750px; margin: 0 auto 50px; color: var(--text-muted); line-height: 1.6; position: relative; z-index: 2; }

/* The Master Grid Layout */
.sanctuary-master-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 40px;
    position: relative;
    z-index: 2;
}

/* ==========================================================
   LEFT COLUMN: INTERACTIVE SPATIAL VISUALIZER
   ========================================================== */
.sanctuary-visual-engine {
    display: flex;
    flex-direction: column;
}
.s-image-frame {
    padding: 15px;
    border-radius: 24px;
    border: 1px solid rgba(232, 73, 232, 0.15);
    background: rgba(10, 5, 20, 0.8) !important;
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.5s;
}
.s-image-frame:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), inset 0 0 30px rgba(232, 73, 232, 0.05);
}

/* Scanner Header */
.s-frame-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 5px 10px 15px; font-family: 'Orbitron', sans-serif; font-size: 0.7rem; color: #8fa0bd;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1); margin-bottom: 15px;
}
.s-status { font-weight: 700; display: flex; align-items: center; gap: 5px; animation: pulseText 2s infinite; }
@keyframes pulseText { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* Image Area */
.s-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 4/4.5;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.s-main-img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: contrast(1.1) brightness(0.85);
    transition: transform 1s ease;
}
.s-image-frame:hover .s-main-img { transform: scale(1.05); }

/* Spatial Grid Overlay */
.s-grid-lines {
    position: absolute; inset: 0;
    background-image: 
        linear-gradient(rgba(232, 73, 232, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(232, 73, 232, 0.08) 1px, transparent 1px);
    background-size: 10% 10%;
    z-index: 1; pointer-events: none; opacity: 0.5;
}

/* Floating Metric Tag */
.s-floating-tag {
    position: absolute;
    bottom: 20px; right: 20px;
    background: rgba(10, 5, 20, 0.9);
    border: 1px solid var(--accent-pink);
    color: #fff; font-size: 0.75rem; font-family: 'Orbitron', sans-serif; font-weight: 700;
    padding: 8px 15px; border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.6);
    z-index: 5; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}

/* ==========================================================
   RIGHT COLUMN: DATA HUB & BENTO GRID
   ========================================================== */
.sanctuary-data-hub {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Narrative Box */
.s-narrative-box {
    padding: 25px;
    border-radius: 20px;
    display: flex; flex-direction: column; gap: 15px;
}
.s-narrative-box h3 { font-size: 1.3rem; color: #fff !important; margin: 0; font-family: 'Playfair Display', serif; }
.s-narrative-box p { font-size: 0.9rem !important; color: var(--text-muted) !important; line-height: 1.6 !important; margin: 0; }
.s-hardware-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 5px; }
.s-hardware-tags span {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
    padding: 6px 12px; border-radius: 50px; font-size: 0.75rem; color: #cbd5e1;
    display: flex; align-items: center; gap: 6px; transition: 0.3s;
}
.s-hardware-tags span:hover { border-color: var(--accent-pink); color: #fff; background: rgba(232, 73, 232, 0.1); }
.s-hardware-tags span i { color: var(--accent-pink); }

/* Volume Gauge Box */
.s-volume-gauge-box {
    padding: 25px;
    border-radius: 20px;
}
.gauge-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;
}
.gauge-header h4 { font-size: 1.05rem; color: #fff !important; margin: 0; font-family: 'Playfair Display', serif; }
.g-badge {
    font-family: 'Orbitron', sans-serif; font-size: 0.7rem; font-weight: 800;
    background: rgba(51, 213, 229, 0.1); padding: 4px 10px; border-radius: 6px;
    border: 1px solid rgba(51, 213, 229, 0.3);
}

/* CSS Stacked Bar Chart */
.stacked-bar-container { display: flex; flex-direction: column; gap: 8px; }
.bar-labels { display: flex; justify-content: space-between; font-size: 0.7rem; color: #8fa0bd; font-weight: 600; text-transform: uppercase; }
.stacked-bar-bg {
    width: 100%; height: 18px; background: rgba(0,0,0,0.5); border-radius: 50px;
    display: flex; overflow: hidden; border: 1px solid rgba(255,255,255,0.05);
}
.bar-segment {
    height: 100%; display: flex; align-items: center; justify-content: center;
    position: relative; transition: opacity 0.3s; cursor: pointer;
}
.bar-segment:hover { opacity: 0.8; }
.bar-segment::after {
    content: attr(data-value); position: absolute; font-family: 'Orbitron', sans-serif;
    font-size: 0.6rem; font-weight: 800; color: #000; text-shadow: none;
}
.seg-base { background: #475569; }
.seg-bed { background: var(--accent-cyan); }
.seg-wardrobe { background: var(--accent-pink); color: #fff !important; }
.seg-wardrobe::after { color: #fff; }

.bar-legend { display: flex; gap: 15px; margin-top: 8px; justify-content: center; }
.l-item { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; color: #94a3b8; }
.l-dot { width: 8px; height: 8px; border-radius: 50%; }
.dot-base { background: #475569; }
.dot-bed { background: var(--accent-cyan); box-shadow: 0 0 8px var(--accent-cyan); }
.dot-wardrobe { background: var(--accent-pink); box-shadow: 0 0 8px var(--accent-pink); }

/* Bottom Bento Grid */
.s-bento-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}
.s-bento-mini {
    padding: 20px 15px;
    border-radius: 16px;
    display: flex; flex-direction: column; gap: 8px;
    text-align: center; align-items: center;
    transition: 0.3s ease; border: 1px solid rgba(255,255,255,0.03);
}
.s-bento-mini:hover {
    border-color: rgba(232, 73, 232, 0.3);
    background: rgba(232, 73, 232, 0.05) !important;
    transform: translateY(-3px);
}
.s-bento-mini i { font-size: 1.5rem; margin-bottom: 5px; }
.s-bento-mini strong { font-size: 0.85rem; color: #fff; }
.s-bento-mini span { font-size: 0.7rem; color: #94a3b8; line-height: 1.4; }

@media (max-width: 1050px) {
    .sanctuary-master-grid { grid-template-columns: 1fr; }
    .s-image-wrapper { aspect-ratio: 16/10; }
}
@media (max-width: 600px) {
    .s-bento-feature-grid { grid-template-columns: 1fr; }
    .gauge-header { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ==========================================================
   8. HYDRO-KINETIC ENGINEERING: SMART WASHROOM & LAUNDRY
   ========================================================== */
.bhk-hydro-utility-premium {
    padding: 130px 0;
    background: radial-gradient(circle at top right, #010a15 0%, var(--bg-dark) 100%);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(51, 213, 229, 0.1);
}

/* Deep Aqua Glows & Caustic Mesh */
.hydro-bg-glow {
    position: absolute;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(51, 213, 229, 0.08) 0%, transparent 70%);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0; pointer-events: none;
}
.hydro-caustic-mesh {
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(51, 213, 229, 0.03) 2px, transparent 2px);
    background-size: 40px 40px;
    z-index: 1; pointer-events: none;
}

/* Header Utilities */
.tech-badge-hydro {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 18px; border-radius: 50px; margin-bottom: 20px;
    font-size: 0.75rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
    position: relative; z-index: 2;
}
.glow-title-hydro { font-size: 3rem !important; font-family: 'Playfair Display', serif; color: #fff !important; margin-bottom: 20px; position: relative; z-index: 2; }
.premium-desc-hydro { max-width: 750px; margin: 0 auto 50px; color: var(--text-muted); line-height: 1.6; position: relative; z-index: 2; }
.gradient-cyan-text {
    background: linear-gradient(135deg, var(--accent-cyan), #00f2fe);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ==========================================================
   THE ARCHITECTURAL OVERLAP GRID (3-COLUMNS)
   ========================================================== */
.hydro-master-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr; /* Center column is larger for the image */
    gap: 0; /* Gap is zero because we use negative margins to overlap */
    align-items: center;
    position: relative;
    z-index: 2;
}

.hydro-side-col {
    display: flex;
    flex-direction: column;
    gap: 40px; /* Space between the two stacked cards */
}

/* Glass-Matte Overlap Cards */
.hydro-tech-card {
    padding: 30px 25px;
    border-radius: 20px;
    position: relative;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    border: 1px solid rgba(51, 213, 229, 0.15) !important;
}
.hydro-tech-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(51, 213, 229, 0.1);
    border-color: var(--accent-cyan) !important;
}

/* Overlapping Logic for Desktop */
.overlap-right {
    margin-right: -60px; /* Pulls the card 60px over the center image */
    z-index: 5;
}
.overlap-left {
    margin-left: -60px; /* Pulls the card 60px over the center image */
    z-index: 5;
}

/* Card Content Typography */
.h-card-icon {
    width: 45px; height: 45px;
    background: rgba(51, 213, 229, 0.1);
    border: 1px solid rgba(51, 213, 229, 0.3);
    border-radius: 12px;
    display: flex; justify-content: center; align-items: center;
    color: var(--accent-cyan); font-size: 1.2rem;
    margin-bottom: 15px;
    box-shadow: 0 0 15px rgba(51, 213, 229, 0.2);
}
.hydro-tech-card h3 { font-size: 1.15rem; color: #fff !important; margin-bottom: 10px; font-family: 'Playfair Display', serif; }
.hydro-tech-card p { font-size: 0.85rem !important; color: var(--text-muted) !important; line-height: 1.6 !important; margin-bottom: 15px; }
.h-metric-tag {
    display: inline-block;
    font-family: 'Orbitron', sans-serif; font-size: 0.65rem; font-weight: 800;
    color: var(--accent-cyan); background: rgba(0,0,0,0.5);
    padding: 5px 12px; border-radius: 6px; border: 1px solid rgba(51, 213, 229, 0.2);
}

/* ==========================================================
   CENTER COLUMN: CORE VISUAL ENGINE
   ========================================================== */
.hydro-center-col {
    position: relative;
    z-index: 1; /* Sits below the overlapping cards */
    padding: 0 10px;
}
.hydro-visual-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 4/5.5; /* Tall portrait ratio like a magazine cover */
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7);
}
.hydro-main-img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: brightness(0.85) contrast(1.1);
    transition: transform 1.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.hydro-visual-frame:hover .hydro-main-img {
    transform: scale(1.05);
}

/* Sci-Fi Aqua Scanner Line Overlay */
.aqua-scanner {
    position: absolute; top: 0; left: 0; width: 100%; height: 4px;
    background: var(--accent-cyan); box-shadow: 0 0 20px 5px rgba(51, 213, 229, 0.5);
    z-index: 5; animation: aquaScan 4s ease-in-out infinite alternate; pointer-events: none;
    opacity: 0.7;
}
@keyframes aquaScan { 0% { top: 0; } 100% { top: calc(100% - 4px); } }

/* Bottom Diagnostics Bar inside Image Frame */
.hydro-diagnostics-bar {
    position: absolute; bottom: 0; left: 0; width: 100%;
    background: rgba(5, 5, 15, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(51, 213, 229, 0.3);
    padding: 20px; display: flex; justify-content: space-between; gap: 15px; z-index: 6;
}
.d-stat { display: flex; align-items: center; gap: 12px; }
.d-stat i { font-size: 1.5rem; color: var(--accent-cyan); }
.d-text { display: flex; flex-direction: column; }
.d-text span { font-size: 0.65rem; color: #8fa0bd; text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px; }
.d-text strong { font-family: 'Orbitron', sans-serif; font-size: 0.8rem; color: #fff; }

/* ==========================================================
   RESPONSIVE LOGIC
   ========================================================== */
@media (max-width: 1050px) {
    /* Break the overlap on smaller screens and convert to a standard stacked grid */
    .hydro-master-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .overlap-right, .overlap-left {
        margin-right: 0; margin-left: 0; /* Remove negative margins */
    }
    .hydro-side-col { gap: 20px; }
    .hydro-visual-frame { aspect-ratio: 16/10; /* Change to landscape image on tablet/mobile */ }
    /* Reorder for mobile flow: Image Top, Left Cards, Right Cards */
    .hydro-center-col { order: -1; padding: 0; margin-bottom: 20px;}
}
@media (max-width: 600px) {
    .hydro-diagnostics-bar { flex-direction: column; gap: 15px; }
}

/* ==========================================================
   9. THE ECO-FUTURISM DECK: BIOPHILIC BALCONY RETREAT
   ========================================================== */
.bhk-biophilic-retreat-premium {
    padding: 130px 0;
    background: radial-gradient(circle at center, #020a05 0%, #050515 100%);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(46, 204, 113, 0.1);
}

/* Organic Ambient Glows & Mesh */
.bio-bg-glow {
    position: absolute;
    width: 700px; height: 700px;
    border-radius: 50%;
    filter: blur(150px);
    opacity: 0.15;
    z-index: 0; pointer-events: none;
    animation: organicBreathe 8s infinite alternate ease-in-out;
}
.glow-green { background: #2ecc71; top: -10%; left: -10%; }
.glow-cyan { background: var(--accent-cyan); bottom: -10%; right: -10%; }
@keyframes organicBreathe { 0% { transform: scale(1); opacity: 0.1; } 100% { transform: scale(1.2); opacity: 0.2; } }

.bio-mesh-overlay {
    position: absolute; inset: 0;
    background-image: 
        radial-gradient(rgba(46, 204, 113, 0.05) 1px, transparent 1px),
        radial-gradient(rgba(46, 204, 113, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    z-index: 1; pointer-events: none;
}

/* Green Theme Utilities */
.text-green { color: #2ecc71 !important; }
.glowing-border-green {
    border: 1px solid rgba(46, 204, 113, 0.5) !important;
    box-shadow: 0 0 15px rgba(46, 204, 113, 0.2);
    color: #2ecc71 !important;
    background: rgba(46, 204, 113, 0.05) !important;
}
.gradient-green-text {
    background: linear-gradient(135deg, #2ecc71, #1abc9c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.text-gold { color: #FFD700 !important; }

/* Header Formatting */
.tech-badge-bio {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 18px; border-radius: 50px; margin-bottom: 20px;
    font-size: 0.75rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
    position: relative; z-index: 2;
}
.glow-title-bio { font-size: 3rem !important; font-family: 'Playfair Display', serif; color: #fff !important; margin-bottom: 20px; position: relative; z-index: 2; }
.premium-desc-bio { max-width: 750px; margin: 0 auto 50px; color: var(--text-muted); line-height: 1.6; position: relative; z-index: 2; }

/* ==========================================================
   MASTER GRID LOGIC
   ========================================================== */
.biophilic-master-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.9fr;
    gap: 40px;
    position: relative;
    z-index: 2;
}

/* ==========================================================
   LEFT COLUMN: THE VISTA FRAME
   ========================================================== */
.bio-vista-frame {
    display: flex;
    flex-direction: column;
    padding: 15px;
    border-radius: 24px;
    border: 1px solid rgba(46, 204, 113, 0.15) !important;
    background: rgba(5, 15, 10, 0.8) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7);
}

.vista-header-bar, .vista-footer-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 15px; font-family: 'Orbitron', sans-serif; font-size: 0.7rem; color: #8fa0bd;
}
.vista-header-bar { border-bottom: 1px dashed rgba(255, 255, 255, 0.1); margin-bottom: 15px; }
.vista-footer-bar { border-top: 1px dashed rgba(255, 255, 255, 0.1); margin-top: 15px; justify-content: center;}

.vista-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16/11;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.bio-main-img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: brightness(0.9) contrast(1.05);
    transition: transform 1.5s ease;
}
.bio-vista-frame:hover .bio-main-img { transform: scale(1.05); }

/* Environmental HUD Panels overlaid on image */
.env-hud-panel {
    position: absolute;
    background: rgba(2, 10, 5, 0.85);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(46, 204, 113, 0.3);
    padding: 10px 15px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    z-index: 5;
    transition: 0.4s ease;
}
.bio-vista-frame:hover .env-hud-panel { border-color: #2ecc71; box-shadow: 0 0 20px rgba(46, 204, 113, 0.2); }
.hud-top-left { top: 20px; left: 20px; }
.hud-bottom-right { bottom: 20px; right: 20px; border-color: rgba(51, 213, 229, 0.3); }

.env-metric { display: flex; align-items: center; gap: 12px; }
.env-metric i { font-size: 1.4rem; color: #fff; opacity: 0.9; }
.m-data { display: flex; flex-direction: column; }
.m-lbl { font-size: 0.65rem; color: #cbd5e1; text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; }
.m-val { font-family: 'Orbitron', sans-serif; font-size: 0.85rem; font-weight: 800; }

/* Holographic Hotspots Override for Balcony */
.hotspot-green .ping-ring-green { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #2ecc71; animation: hudPulse 2s infinite ease-out; }
.hotspot-green .core-dot-green { position: absolute; top: 5px; left: 5px; width: 20px; height: 20px; background: #2ecc71; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #000; font-size: 0.6rem; box-shadow: 0 0 15px #2ecc71; }

/* ==========================================================
   RIGHT COLUMN: THE ECO-BENTO DECK
   ========================================================== */
.bio-bento-deck {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.bio-bento-card {
    padding: 25px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(5, 10, 15, 0.6) !important;
    transition: 0.4s ease;
    display: flex; flex-direction: column;
}
.cyber-hover-card:hover {
    transform: translateY(-5px);
    background: rgba(46, 204, 113, 0.05) !important;
    border-color: rgba(46, 204, 113, 0.3);
    box-shadow: 0 15px 35px rgba(0,0,0,0.5), inset 0 0 15px rgba(46, 204, 113, 0.05);
}

.b-card-header { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
.b-icon-wrap {
    width: 45px; height: 45px; border-radius: 12px;
    display: flex; justify-content: center; align-items: center;
    font-size: 1.2rem; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255,255,255,0.08);
}
.icon-green { color: #2ecc71; border-color: rgba(46, 204, 113, 0.3) !important; background: rgba(46, 204, 113, 0.1) !important; }
.icon-gold { color: #FFD700; border-color: rgba(255, 215, 0, 0.3) !important; background: rgba(255, 215, 0, 0.1) !important; }
.icon-cyan { color: var(--accent-cyan); border-color: rgba(51, 213, 229, 0.3) !important; background: rgba(51, 213, 229, 0.1) !important; }

.bio-bento-card h4 { font-size: 1.2rem; color: #fff !important; margin: 0; font-family: 'Playfair Display', serif; }
.b-card-desc { font-size: 0.85rem !important; color: var(--text-muted) !important; line-height: 1.6 !important; margin-bottom: 20px; }

/* Resource Progress Meter */
.eco-resource-meter {
    background: rgba(0,0,0,0.4); border-radius: 12px; padding: 12px 15px;
    border: 1px dashed rgba(255,255,255,0.1); margin-top: auto;
}
.e-meta { display: flex; justify-content: space-between; font-size: 0.75rem; color: #cbd5e1; font-weight: 600; margin-bottom: 8px; }
.e-meta strong { font-family: 'Orbitron', sans-serif; font-size: 0.85rem; }
.e-bar-bg { width: 100%; height: 6px; background: rgba(255,255,255,0.1); border-radius: 10px; overflow: hidden; }
.e-bar-fill { height: 100%; border-radius: 10px; }
.fill-green { background: #2ecc71; box-shadow: 0 0 10px #2ecc71; }

/* Split Bottom Row */
.bio-bento-split {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.b-title-mini { font-size: 1.05rem !important; color: #fff !important; margin-bottom: 10px; font-family: 'Playfair Display', serif;}
.b-card-desc-mini { font-size: 0.8rem !important; color: var(--text-muted) !important; line-height: 1.5 !important; margin-bottom: 15px; flex-grow: 1;}
.b-tag {
    font-size: 0.7rem; font-weight: 700; background: rgba(0,0,0,0.5); padding: 5px 10px;
    border-radius: 6px; border: 1px solid rgba(255,255,255,0.1); display: inline-block; text-align: center;
}

@media (max-width: 1050px) {
    .biophilic-master-grid { grid-template-columns: 1fr; }
    .bio-bento-split { grid-template-columns: 1fr; }
}

/* ==========================================================
   10. THE HOLODECK: IMMERSIVE DIGITAL SIMULATION STUDIO
   ========================================================== */
.immersive-holodeck-section {
    padding: 140px 0;
    background: #010105; /* Deepest Obsidian Black */
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(51, 213, 229, 0.1);
}

.holodeck-ambient-bg {
    position: absolute; inset: 0;
    background: radial-gradient(circle at center, rgba(51, 213, 229, 0.03) 0%, transparent 60%);
    z-index: 0; pointer-events: none;
}

/* Header Utilities */
.tech-badge-holo {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 18px; border-radius: 50px; margin-bottom: 20px;
    font-size: 0.75rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
    position: relative; z-index: 2;
}
.glow-title-holo { font-size: 3.2rem !important; font-family: 'Playfair Display', serif; color: #fff !important; margin-bottom: 20px; position: relative; z-index: 2; }
.premium-desc-holo { max-width: 750px; margin: 0 auto 50px; color: var(--text-muted); line-height: 1.6; position: relative; z-index: 2; font-weight: 300;}

/* The Master Console Grid */
.holodeck-master-console {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 40px;
    position: relative; z-index: 2;
}

/* ==========================================================
   LEFT SIDEBAR: TACTICAL COMMAND DECK
   ========================================================== */
.command-deck-sidebar {
    display: flex; flex-direction: column; gap: 30px;
}

.tactile-switches-group {
    display: flex; flex-direction: column; gap: 15px;
}

/* Glassmorphic Tactile Switches */
.tactile-switch {
    background: rgba(15, 15, 25, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 20px rgba(0,0,0,0.5), inset 0 2px 5px rgba(255,255,255,0.02);
    border-radius: 16px; padding: 20px;
    display: flex; align-items: center; gap: 20px;
    cursor: pointer; text-align: left; position: relative;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
}
.tactile-switch:hover {
    background: rgba(25, 25, 40, 0.9);
    transform: translateY(-2px);
}
.switch-icon {
    width: 50px; height: 50px; border-radius: 12px;
    background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255,255,255,0.05);
    display: flex; justify-content: center; align-items: center;
    font-size: 1.2rem; color: #64748b; transition: 0.4s;
    box-shadow: inset 0 5px 10px rgba(0,0,0,0.5); /* Inner shadow for depth */
}
.switch-text h4 { color: #cbd5e1; font-size: 1.1rem; margin-bottom: 4px; font-family: 'Poppins', sans-serif; transition: 0.4s; }
.switch-text span { color: #64748b; font-size: 0.75rem; text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; transition: 0.4s;}

/* Active Switch State (Pushed In & Glowing) */
.tactile-switch.active {
    background: rgba(5, 5, 15, 0.9);
    border-color: rgba(51, 213, 229, 0.3);
    box-shadow: inset 0 10px 20px rgba(0,0,0,0.8), 0 0 20px rgba(51, 213, 229, 0.1);
    transform: translateY(2px);
}
.tactile-switch.active .switch-icon {
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-pink));
    color: #fff; border-color: transparent;
    box-shadow: 0 0 20px rgba(51, 213, 229, 0.5);
}
.tactile-switch.active .switch-text h4 { color: #fff; font-weight: 700; }
.tactile-switch.active .switch-text span { color: var(--accent-cyan); }
.active-indicator {
    position: absolute; left: 0; top: 0; width: 4px; height: 100%;
    background: linear-gradient(to bottom, var(--accent-cyan), var(--accent-pink));
    opacity: 0; transition: 0.4s;
}
.tactile-switch.active .active-indicator { opacity: 1; box-shadow: 0 0 15px var(--accent-cyan);}

/* Diagnostics Terminal */
.system-diagnostics-terminal {
    padding: 25px; border-radius: 16px;
    border: 1px solid rgba(51, 213, 229, 0.15);
    background: rgba(0, 0, 0, 0.6) !important;
}
.term-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed rgba(255,255,255,0.1); padding-bottom: 15px; margin-bottom: 15px; }
.term-header h5 { color: #fff; font-size: 0.9rem; margin: 0; display: flex; align-items: center; gap: 8px;}
.pulse-live { font-size: 0.7rem; font-weight: 800; color: #2ecc71; animation: blinkLed 1.5s infinite; letter-spacing: 1px;}
.term-list { list-style: none; padding: 0; margin: 0 0 15px 0; display: flex; flex-direction: column; gap: 12px; }
.term-list li { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.03); padding-bottom: 8px;}
.term-list li:last-child { border-bottom: none; padding-bottom: 0;}
.t-lbl { font-size: 0.75rem; color: #8fa0bd; font-family: 'Orbitron', sans-serif;}
.t-val { font-size: 0.8rem; font-weight: 700; font-family: 'Orbitron', sans-serif;}
.term-footer { font-size: 0.7rem; color: #64748b; text-align: center; border-top: 1px dashed rgba(255,255,255,0.1); padding-top: 15px;}

/* ==========================================================
   RIGHT SCREEN: CINEMATIC VIEWPORT
   ========================================================== */
.simulation-viewport-container {
    position: relative;
    border-radius: 24px;
    padding: 8px; /* Acts as the outer glowing bezel */
    background: #000;
    transition: box-shadow 0.5s ease, background 0.5s ease;
    /* Default Glow (Day Mode) */
    box-shadow: 0 0 40px rgba(51, 213, 229, 0.2);
}
.viewport-screen {
    position: relative; width: 100%; height: 100%; min-height: 500px;
    background: #050505; border-radius: 18px; overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
}
.exp-content-panel { display: none; width: 100%; height: 100%; }
.exp-content-panel.active { display: block; animation: fadeIn 0.6s ease; }

/* FEATURE A: MOOD ENGINE */
.mood-engine-container { position: relative; width: 100%; height: 100%; min-height: 500px; }
.mood-base-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mood-overlay { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.1s linear; mix-blend-mode: multiply; }
.evening-overlay { background: linear-gradient(to bottom, #ff7b00, #cc3300); }
.night-overlay { background: linear-gradient(to bottom, #000033, #000000); }
.cove-glow-effect { position: absolute; bottom: 0; left: 0; width: 100%; height: 60%; background: radial-gradient(ellipse at bottom, rgba(51, 213, 229, 0.9) 0%, transparent 70%); mix-blend-mode: screen; opacity: 0; pointer-events: none; transition: opacity 0.1s linear; }

/* Premium Studio Mixer Slider */
.studio-mixer-panel {
    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 20px;
    padding: 15px 30px; border-radius: 50px; width: 85%; max-width: 500px;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.8), inset 0 2px 10px rgba(255,255,255,0.05);
}
.slider-track-wrapper { position: relative; flex-grow: 1; height: 6px; background: rgba(0,0,0,0.6); border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); }
.slider-fill-progress { position: absolute; top: 0; left: 0; height: 100%; background: linear-gradient(90deg, #FFD700, var(--accent-cyan)); border-radius: 10px; pointer-events: none; width: 0%;}
input[type=range]#smart-mood-slider {
    -webkit-appearance: none; position: absolute; inset: 0; width: 100%; height: 100%;
    background: transparent; outline: none; margin: 0; z-index: 2;
}
/* The Mixer Knob */
input[type=range]#smart-mood-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%;
    background: radial-gradient(circle at top, #fff, #ccc);
    border: 1px solid #999; box-shadow: 0 5px 15px rgba(0,0,0,0.8), inset 0 -3px 5px rgba(0,0,0,0.2);
    cursor: pointer; transition: transform 0.2s;
}
input[type=range]#smart-mood-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }

/* Viewport HUD Tags */
.viewport-hud-tag {
    position: absolute; background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    color: #fff; font-family: 'Orbitron', sans-serif; font-size: 0.65rem; font-weight: 700;
    padding: 6px 15px; border-radius: 6px; letter-spacing: 1px;
}
.viewport-hud-tag i { color: var(--accent-cyan); margin-right: 5px; }
.top-left { top: 20px; left: 20px; }
.top-right { top: 20px; right: 20px; }

/* FEATURE B: ASMR MATERIAL MICRO-SCOPE */
.asmr-lab-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; width: 100%; height: 100%; min-height: 500px; background: #000; }
.lab-slide-card { position: relative; overflow: hidden; cursor: crosshair; }
.lab-slide-img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(20%) brightness(0.6); transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); }
/* Hover Magic */
.lab-slide-card:hover .lab-slide-img { filter: grayscale(0%) brightness(1); transform: scale(1.15); }
.lab-scanner-line { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--accent-cyan); box-shadow: 0 0 15px var(--accent-cyan); opacity: 0; pointer-events: none; transition: 0.3s; }
.lab-slide-card:hover .lab-scanner-line { opacity: 1; animation: labScan 2s linear infinite alternate; }
@keyframes labScan { 0% { top: 10%; } 100% { top: 90%; } }

.slide-badge { position: absolute; top: 20px; left: 20px; background: rgba(0,0,0,0.7); border: 1px solid rgba(255,255,255,0.2); color: #fff; font-size: 0.65rem; font-family: 'Orbitron', sans-serif; padding: 4px 10px; border-radius: 4px; backdrop-filter: blur(5px); }
.lab-data-overlay { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(to top, rgba(0,0,0,0.95), transparent); padding: 30px 20px 20px; transform: translateY(100%); transition: transform 0.5s ease; }
.lab-slide-card:hover .lab-data-overlay { transform: translateY(0); }
.lab-data-overlay h4 { color: #fff; font-size: 1.1rem; margin-bottom: 10px; font-family: 'Playfair Display', serif; border-bottom: 1px dashed rgba(255,255,255,0.2); padding-bottom: 8px;}
.lab-data-overlay ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; }
.lab-data-overlay ul li { display: flex; justify-content: space-between; font-size: 0.75rem; }
.lab-data-overlay ul li span { color: #cbd5e1; }
.lab-data-overlay ul li strong { font-family: 'Orbitron', sans-serif; }

/* FEATURE C: 360 VR HOLO-TOUR */
.vr-frame-wrapper { position: relative; width: 100%; height: 100%; min-height: 500px; }
.vr-crosshair { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; pointer-events: none; z-index: 10; opacity: 0.5; }
.c-line-h { position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background: rgba(255,255,255,0.5); }
.c-line-v { position: absolute; top: 0; left: 50%; width: 2px; height: 100%; background: rgba(255,255,255,0.5); }
.vr-instruction { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); padding: 12px 25px; border-radius: 50px; color: #fff; font-size: 0.9rem; pointer-events: none; border: 1px solid rgba(255,255,255,0.1); z-index: 10; display: flex; align-items: center; gap: 10px; }

@media (max-width: 1050px) {
    .holodeck-master-console { grid-template-columns: 1fr; gap: 40px; }
    .command-deck-sidebar { flex-direction: row; flex-wrap: wrap; }
    .tactile-switches-group { flex: 1; min-width: 250px; }
    .system-diagnostics-terminal { flex: 1; min-width: 250px; }
}
@media (max-width: 768px) {
    .command-deck-sidebar { flex-direction: column; }
    .asmr-lab-grid { grid-template-columns: 1fr; }
    .viewport-hud-tag { display: none; }
}

/* ==========================================================
   11. THE ECOSYSTEM MATRIX: PERFECT LOCK DESIGN ECOSYSTEMS
   ========================================================== */
.bhk-ecosystem-matrix-premium {
    padding: 140px 0;
    background: #010105; /* Deepest Luxury Black */
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
}

/* Ambient Background Glows */
.eco-bg-glow {
    position: absolute; width: 700px; height: 700px; border-radius: 50%;
    filter: blur(150px); opacity: 0.12; z-index: 0; pointer-events: none;
}
.glow-gold { background: #FFD700; top: 0%; right: -10%; }
.glow-cyan-deep { background: var(--accent-cyan); bottom: -10%; left: -10%; }

/* Header Utilities */
.bhk-ecosystem-matrix-premium .section-title {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.tech-badge-eco {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 8px 20px; border-radius: 50px; margin: 0 auto 20px auto;
    font-size: 0.75rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
    position: relative; z-index: 2;
}
.glow-title-eco { font-size: 3.2rem !important; font-family: 'Playfair Display', serif; color: #fff !important; margin-bottom: 20px; position: relative; z-index: 2; text-align: center; width: 100%;}
.premium-desc-eco { max-width: 750px; margin: 0 auto 50px; color: #94a3b8; line-height: 1.7; position: relative; z-index: 2; font-weight: 300; text-align: center;}
.text-gold { color: #FFD700 !important; }
.text-green { color: #2ecc71 !important; }
.border-gold { border: 1px solid rgba(255, 215, 0, 0.4); color: #FFD700; background: rgba(255, 215, 0, 0.1); }
.border-green { border: 1px solid rgba(46, 204, 113, 0.4); color: #2ecc71; background: rgba(46, 204, 113, 0.1); }

/* ==========================================================
   THE PERFECT LOCK BENTO GRID (3 COLUMNS = NO GAPS)
   ========================================================== */
.ecosystem-bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    
    /* SOLVED: Increased base row height to give images plenty of breathing room! */
    grid-auto-rows: 330px; 
    gap: 30px; 
    position: relative; z-index: 2;
}

/* Span Logic for Bento Boxes */
.bento-master { grid-column: span 2; grid-row: span 2; } 
.bento-tall { grid-column: span 1; grid-row: span 2; }   
.bento-standard { grid-column: span 1; grid-row: span 1; } 
.bento-wide { grid-column: span 2; grid-row: span 1; }     

/* The Core Card Container */
.eco-bento-card {
    position: relative; display: block; text-decoration: none;
    border-radius: 24px; overflow: hidden; background: #000;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.eco-bento-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 30px 60px rgba(0,0,0,0.9), inset 0 0 20px rgba(255,255,255,0.05);
    border-color: rgba(255, 215, 0, 0.3);
}

/* Image & Dynamic Tint Layer */
.eco-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; transition: transform 1.5s ease;
}

/* SOLVED: The black shadow now only covers the text area, leaving the top image crystal clear! */
.eco-image-tint {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(2, 2, 10, 0.98) 0%, rgba(2, 2, 10, 0.7) 160px, transparent 250px);
    transition: background 0.5s ease;
}
.eco-bento-card:hover .eco-img { transform: scale(1.05); }
.eco-bento-card:hover .eco-image-tint { background: linear-gradient(to top, rgba(2, 2, 10, 0.98) 0%, rgba(2, 2, 10, 0.8) 180px, rgba(2, 2, 10, 0.2) 300px); }

/* Top Floating Badges */
.eco-badges-top {
    position: absolute; top: 25px; left: 25px; right: 25px;
    display: flex; justify-content: space-between; align-items: flex-start; z-index: 5;
}
.eco-tag {
    padding: 6px 14px; border-radius: 50px; font-size: 0.65rem; font-weight: 800;
    letter-spacing: 1px; text-transform: uppercase;
    backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}
.tag-cyan { background: rgba(51, 213, 229, 0.2); color: #fff; border: 1px solid var(--accent-cyan); }
.tag-gold { background: rgba(255, 215, 0, 0.2); color: #fff; border: 1px solid #FFD700; }
.eco-tier-tag {
    padding: 5px 12px; border-radius: 6px; font-family: 'Orbitron', sans-serif;
    font-size: 0.65rem; font-weight: 800; letter-spacing: 0.5px;
    backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

/* ==========================================================
   THE "WOW" FACTOR: ARCHITECTURAL DNA REVEAL ON HOVER
   ========================================================== */
.architectural-dna-reveal {
    position: absolute; top: 35%; left: 30px; right: 30px; transform: translateY(-50%);
    opacity: 0; transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 4; pointer-events: none;
    background: rgba(0, 0, 0, 0.5); padding: 20px; border-radius: 16px;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.eco-bento-card:hover .architectural-dna-reveal { opacity: 1; top: 40%; }

.dna-header { font-family: 'Orbitron', sans-serif; font-size: 0.75rem; color: #8fa0bd; font-weight: 800; letter-spacing: 1.5px; margin-bottom: 10px; border-bottom: 1px dashed rgba(255,255,255,0.2); padding-bottom: 6px;}
.dna-specs { list-style: none; padding: 0; margin: 0 0 12px 0; display: flex; flex-direction: column; gap: 6px; }
.dna-specs.row-layout { flex-direction: row; flex-wrap: wrap; gap: 15px; } 
.dna-specs li { font-size: 0.8rem; color: #fff; display: flex; align-items: center; gap: 8px; font-weight: 500;}
.dna-specs li i { font-size: 0.7rem; color: rgba(255,255,255,0.5); }
.dna-metric { font-family: 'Orbitron', sans-serif; font-size: 0.8rem; font-weight: 800; background: rgba(0,0,0,0.6); padding: 6px 12px; border-radius: 6px; display: inline-block; border: 1px solid rgba(255,255,255,0.1); }

/* ==========================================================
   BOTTOM GLASS CONTENT PANEL
   ========================================================== */
.eco-content-panel {
    position: absolute; bottom: 20px; left: 20px; right: 20px;
    padding: 22px; border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(10, 10, 20, 0.65);
    backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    transition: transform 0.5s ease, border-color 0.5s ease;
    z-index: 5;
}
.eco-bento-card:hover .eco-content-panel {
    border-color: rgba(255, 215, 0, 0.4);
    transform: translateY(-5px);
}

.eco-content-panel h3 { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: #fff !important; margin-bottom: 8px; }
.eco-content-panel p { font-size: 0.85rem !important; color: #cbd5e1 !important; line-height: 1.5 !important; margin-bottom: 12px; font-weight: 300; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}

/* SOLVED: Compact styling specifically for the bottom row cards */
.bento-standard .eco-content-panel, .bento-wide .eco-content-panel {
    padding: 16px 20px;
}
.bento-standard .eco-content-panel h3, .bento-wide .eco-content-panel h3 {
    font-size: 1.3rem; margin-bottom: 6px;
}
.bento-standard .eco-content-panel p, .bento-wide .eco-content-panel p {
    font-size: 0.8rem !important; margin-bottom: 10px;
}

.eco-explore-btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Poppins', sans-serif; font-size: 0.8rem; font-weight: 700; color: #fff;
    text-transform: uppercase; letter-spacing: 1px; transition: 0.3s;
}
.eco-explore-btn i { color: var(--accent-cyan); transition: 0.3s; }
.eco-bento-card:hover .eco-explore-btn i { transform: translateX(8px); color: #FFD700;}

/* Typography Overrides for specific cards */
.bento-tall h3 { font-size: 1.4rem; }

/* ==========================================================
   RESPONSIVE LOGIC
   ========================================================== */
@media (max-width: 1050px) {
    .ecosystem-bento-grid { grid-template-columns: repeat(2, 1fr); gap: 25px;}
    .bento-master { grid-column: span 2; grid-row: span 2; } 
    .bento-tall { grid-column: span 1; grid-row: span 1;} 
    .bento-standard { grid-column: span 1; grid-row: span 1;} 
    .bento-wide { grid-column: span 2; grid-row: span 1;} 
}
@media (max-width: 600px) {
    .ecosystem-bento-grid { grid-template-columns: 1fr; grid-auto-rows: minmax(320px, auto); }
    .bento-master, .bento-wide, .bento-tall, .bento-standard { grid-column: span 1; grid-row: span 1;}
}

/* ==========================================================
   12. NEURAL AI SCANNER: DISCOVER YOUR INTERIOR AURA
   ========================================================== */
.matchmaker-premium-section {
    background-color: #02020a;
    padding: 140px 0;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(232, 73, 232, 0.1);
}

/* Background Neural Mesh */
.neural-network-bg {
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(232, 73, 232, 0.05) 2px, transparent 2px);
    background-size: 40px 40px;
    z-index: 0; pointer-events: none;
}
.match-orb {
    position: absolute; border-radius: 50%;
    filter: blur(150px); opacity: 0.15; z-index: 0; pointer-events: none;
    animation: organicBreathe 6s infinite alternate;
}
.match-orb-cyan { width: 500px; height: 500px; background: var(--accent-cyan); top: -10%; left: -10%; }
.match-orb-pink { width: 600px; height: 600px; background: var(--accent-pink); bottom: -10%; right: -10%; }

/* Left Column: Text & Diagnostics */
.matchmaker-master-grid {
    display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px;
    align-items: center; position: relative; z-index: 2;
}

.ai-core-indicator {
    display: inline-flex; align-items: center; gap: 12px;
    background: rgba(232, 73, 232, 0.1); border: 1px solid rgba(232, 73, 232, 0.3);
    padding: 8px 20px; border-radius: 50px; margin-bottom: 25px;
    box-shadow: 0 0 20px rgba(232, 73, 232, 0.2);
}
.ai-core-pulse {
    width: 10px; height: 10px; background: var(--accent-pink);
    border-radius: 50%; box-shadow: 0 0 15px var(--accent-pink);
    animation: blinkLed 1s infinite;
}
.ai-text { font-family: 'Orbitron', sans-serif; font-size: 0.75rem; font-weight: 800; color: var(--accent-pink); letter-spacing: 1px;}

.glow-title-ai { font-size: 3.2rem !important; line-height: 1.15 !important; font-family: 'Playfair Display', serif; color: #fff !important; margin-bottom: 20px; }
.premium-desc-ai { font-size: 1rem !important; color: #cbd5e1 !important; line-height: 1.7 !important; margin-bottom: 40px; font-weight: 300; max-width: 600px;}
.gradient-pink-text { background: linear-gradient(135deg, var(--accent-pink), #ff9a9e); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.match-features-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 20px; }
.match-features-list li {
    padding: 20px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.05);
    display: flex; align-items: flex-start; gap: 20px;
}
.mf-icon {
    width: 50px; height: 50px; border-radius: 12px; flex-shrink: 0;
    display: flex; justify-content: center; align-items: center; font-size: 1.3rem;
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.08);
}
.icon-cyan { color: var(--accent-cyan); border-color: rgba(51, 213, 229, 0.3); background: rgba(51, 213, 229, 0.1); }
.icon-pink { color: var(--accent-pink); border-color: rgba(232, 73, 232, 0.3); background: rgba(232, 73, 232, 0.1); }
.mf-text h4 { color: #fff !important; font-size: 1.1rem; margin-bottom: 8px; font-family: 'Playfair Display', serif; }
.mf-text p { color: #8fa0bd !important; font-size: 0.85rem; line-height: 1.5; margin: 0; }

/* ==========================================================
   RIGHT COLUMN: 3D HOLOGRAPHIC SWIPE TERMINAL
   ========================================================== */
.app-glass-frame {
    border-radius: 30px; padding: 25px;
    display: flex; flex-direction: column; height: 650px;
    box-shadow: 0 40px 80px rgba(0,0,0,0.9), inset 0 0 30px rgba(255,255,255,0.02);
}
.app-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; padding: 0 10px; }
.app-status { font-family: 'Orbitron', sans-serif; font-size: 0.75rem; font-weight: 800; color: #8fa0bd; letter-spacing: 1px; display: flex; align-items: center; gap: 8px;}
.progress-dots { display: flex; gap: 8px; }
.dot { width: 30px; height: 4px; background: rgba(255,255,255,0.1); border-radius: 5px; transition: 0.4s; }
.dot.active { background: var(--accent-pink); box-shadow: 0 0 15px var(--accent-pink); }

/* The 3D Stage */
.app-card-area {
    flex-grow: 1; position: relative; width: 100%;
    border-radius: 20px; perspective: 1500px; /* Crucial for 3D swipe effect */
}
.quiz-card-stack { position: absolute; inset: 0; }

/* The Cards */
.quiz-card {
    position: absolute; inset: 0; border-radius: 20px;
    background-size: cover; background-position: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.6);
    border: 1px solid rgba(255,255,255,0.15);
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.5s;
    z-index: 1; transform-origin: bottom center;
}
/* Dark gradient at bottom of card */
.quiz-card::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    border-radius: 0 0 20px 20px; pointer-events: none;
}
.quiz-card.active { z-index: 10; }

/* Magic 3D Swipe Physics */
.quiz-card.swipe-left {
    transform: translateX(-120%) rotateY(-30deg) rotateZ(-15deg) scale(0.8);
    opacity: 0;
}
.quiz-card.swipe-right {
    transform: translateX(120%) rotateY(30deg) rotateZ(15deg) scale(0.8);
    opacity: 0;
}

/* Tactical Input Controls */
.app-controls {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 25px; padding: 0 10px; position: relative;
}
.btn-swipe {
    display: flex; justify-content: center; align-items: center; gap: 10px;
    width: 140px; padding: 18px 0; border-radius: 16px; border: none; cursor: pointer;
    font-family: 'Orbitron', sans-serif; font-size: 0.8rem; font-weight: 800; letter-spacing: 1px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    background: rgba(0,0,0,0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.btn-reject { color: #ff4757; border: 1px solid rgba(255, 71, 87, 0.3); }
.btn-reject:hover { background: rgba(255, 71, 87, 0.15); border-color: #ff4757; box-shadow: 0 10px 25px rgba(255, 71, 87, 0.4); transform: translateY(-5px); }
.btn-accept { color: #2ecc71; border: 1px solid rgba(46, 204, 113, 0.3); }
.btn-accept:hover { background: rgba(46, 204, 113, 0.15); border-color: #2ecc71; box-shadow: 0 10px 25px rgba(46, 204, 113, 0.4); transform: translateY(-5px); }

/* Center Radar Graphic */
.swipe-radar-core {
    width: 40px; height: 40px; border-radius: 50%;
    border: 2px dashed rgba(255,255,255,0.2); display: flex; justify-content: center; align-items: center;
    animation: bhkSlowSpin 10s linear infinite;
}
.swipe-radar-core::after { content: ''; width: 10px; height: 10px; background: rgba(255,255,255,0.2); border-radius: 50%; }

/* The Holographic Result Box */
.quiz-result-box {
    position: absolute; inset: 0;
    background: rgba(5, 5, 15, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-radius: 20px; border: 1px solid var(--accent-pink);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center; padding: 40px;
    box-shadow: inset 0 0 50px rgba(232, 73, 232, 0.1);
    animation: floatParallax 6s ease-in-out infinite alternate;
}
.result-glow-icon {
    width: 80px; height: 80px; border-radius: 50%;
    background: rgba(232, 73, 232, 0.1); border: 2px solid var(--accent-pink);
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem; color: var(--accent-pink); margin-bottom: 25px;
    box-shadow: 0 0 30px rgba(232, 73, 232, 0.5);
}
.quiz-result-box h3 { color: #fff !important; font-size: 2.2rem; margin-bottom: 15px; font-family: 'Playfair Display', serif; }
.quiz-result-box p { color: #a0aabf !important; font-size: 0.95rem; line-height: 1.6; margin-bottom: 25px; }

/* AI Material Output */
.ai-material-recs {
    background: rgba(0,0,0,0.5); border: 1px dashed rgba(51, 213, 229, 0.3);
    padding: 15px; border-radius: 12px; width: 100%; margin-bottom: 30px;
}
.ai-material-recs .r-title { display: block; font-family: 'Orbitron', sans-serif; font-size: 0.75rem; color: var(--accent-cyan); font-weight: 700; margin-bottom: 10px; letter-spacing: 1px;}
.r-tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.r-tags span { background: rgba(51, 213, 229, 0.1); border: 1px solid rgba(51, 213, 229, 0.3); color: #fff; font-size: 0.75rem; padding: 5px 12px; border-radius: 50px; }

.btn-recalibrate {
    background: transparent; border: 1px solid var(--accent-pink); color: var(--accent-pink);
    padding: 12px 25px; border-radius: 50px; font-family: 'Poppins', sans-serif; font-weight: 600;
    cursor: pointer; transition: 0.3s; display: flex; align-items: center; gap: 8px;
}
.btn-recalibrate:hover { background: var(--accent-pink); color: #fff; box-shadow: 0 10px 20px rgba(232, 73, 232, 0.4); }

@media (max-width: 1050px) {
    .matchmaker-master-grid { grid-template-columns: 1fr; gap: 50px; }
    .app-glass-frame { height: 600px; }
}
@media (max-width: 600px) {
    .btn-swipe { width: 120px; }
    .swipe-radar-core { display: none; }
}

/* ==========================================================
   THE APEX GALLERY: CURATED ASYMMETRICAL PORTFOLIO MATRIX
   ========================================================== */
.apex-portfolio-matrix-section {
    padding: 140px 0;
    background: #010105;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(51, 213, 229, 0.15);
}

/* Ambient Background Glows */
.apex-bg-glow {
    position: absolute; width: 800px; height: 800px; border-radius: 50%;
    filter: blur(180px); opacity: 0.12; z-index: 0; pointer-events: none;
}
.glow-cyan { background: var(--accent-cyan); top: 0%; left: -20%; }
.glow-pink { background: var(--accent-pink); bottom: -10%; right: -20%; }

/* Header Utilities */
.tech-badge-apex {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 18px; border-radius: 50px; margin-bottom: 20px;
    font-size: 0.75rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
    position: relative; z-index: 2;
}
.glow-title-apex { font-size: 3.2rem !important; font-family: 'Playfair Display', serif; color: #fff !important; margin-bottom: 20px; position: relative; z-index: 2; }
.premium-desc-apex { max-width: 750px; margin: 0 auto 40px; color: var(--text-muted); line-height: 1.6; position: relative; z-index: 2; font-weight: 300;}

/* Floating Mac-Style Filter Dock */
.apex-filter-dock {
    display: flex; justify-content: center; margin-bottom: 50px; position: relative; z-index: 10;
}
.filter-dock-inner {
    display: flex; gap: 8px; padding: 8px; border-radius: 50px;
    background: rgba(10, 10, 20, 0.75) !important;
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 20px 40px rgba(0,0,0,0.6);
}
.portfolio-filter-btn {
    background: transparent; border: none; color: #a0aabf;
    font-family: 'Poppins', sans-serif; font-size: 0.85rem; font-weight: 600;
    padding: 12px 24px; border-radius: 50px; cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex; align-items: center; gap: 8px;
}
.portfolio-filter-btn:hover { color: #fff; background: rgba(255,255,255,0.05); }
.portfolio-filter-btn.active {
    background: #fff; color: #000;
    box-shadow: 0 5px 15px rgba(255,255,255,0.2);
}
.portfolio-filter-btn.active i { color: var(--accent-cyan); }

/* ==========================================================
   THE ASYMMETRICAL MASONRY GRID (TETRIS LOCK)
   ========================================================== */
.portfolio-masonry-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 320px; /* Base height block */
    gap: 30px;
    position: relative; z-index: 2;
    /* THE MAGIC FIX: এটি স্বয়ংক্রিয়ভাবে নিচের ছোট কার্ডগুলোকে টেনে ফাঁকা জায়গা পূরণ করে দেবে */
    grid-auto-flow: dense; 
}

/* Span Math for Perfect Interlocking */
.card-tall { grid-row: span 2; }
.card-wide { grid-column: span 2; }
.card-standard { grid-column: span 1; grid-row: span 1; }

/* एकदम শেষের লাইনটি পারফেক্ট সমান (Rectangle) করার জন্য ১২ নম্বর কার্ডটিকে Wide করা হলো */
.portfolio-masonry-grid > .matrix-card-item:nth-child(12) {
    grid-column: span 2;
}

/* Filtered out states (Important for JS compatibility) */
.matrix-card-item { transition: opacity 0.4s ease, transform 0.4s ease; will-change: transform, opacity; }
.matrix-card-item.filtered-out {
    opacity: 0 !important; transform: scale(0.8) translateY(30px) !important; pointer-events: none !important;
    position: absolute !important; width: 0 !important; height: 0 !important; overflow: hidden !important; padding: 0 !important; margin: 0 !important;
}

/* The Cards */
.apex-card-inner {
    position: relative; width: 100%; height: 100%;
    border-radius: 20px; overflow: hidden; background: #000;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 15px 35px rgba(0,0,0,0.5); cursor: crosshair;
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.5s ease;
}
.apex-card-inner:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 30px 60px rgba(0,0,0,0.8), inset 0 0 20px rgba(51, 213, 229, 0.1);
    border-color: rgba(51, 213, 229, 0.3);
}

.matrix-card-img, .matrix-card-img-video-preload {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transition: transform 1.5s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.5s ease;
}
.apex-card-inner:hover .matrix-card-img, .apex-card-inner:hover .matrix-card-img-video-preload {
    transform: scale(1.1); filter: brightness(0.5) contrast(1.2); /* Dims image to show text clearly */
}

/* Top Persistent Badges */
.apex-top-badges {
    position: absolute; top: 20px; left: 20px; right: 20px;
    display: flex; justify-content: space-between; align-items: flex-start; z-index: 5;
}
.a-badge, .a-tier {
    padding: 6px 14px; border-radius: 6px; font-family: 'Orbitron', sans-serif;
    font-size: 0.65rem; font-weight: 800; letter-spacing: 1px;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}
.bg-cyan { background: rgba(51, 213, 229, 0.2); color: #fff; border: 1px solid var(--accent-cyan); }
.bg-pink { background: rgba(232, 73, 232, 0.2); color: #fff; border: 1px solid var(--accent-pink); }
.border-pink { border: 1px solid rgba(232, 73, 232, 0.4); color: var(--accent-pink); background: rgba(0,0,0,0.5); }
.border-cyan { border: 1px solid rgba(51, 213, 229, 0.4); color: var(--accent-cyan); background: rgba(0,0,0,0.5); }
.border-gold { border: 1px solid rgba(255, 215, 0, 0.4); color: #FFD700; background: rgba(0,0,0,0.5); }

/* ==========================================================
   THE 3D STAGGERED HOVER REVEAL
   ========================================================== */
.apex-hover-panel {
    position: absolute; inset: 0; padding: 30px;
    display: flex; flex-direction: column; justify-content: flex-end;
    z-index: 10; pointer-events: none;
}
/* Cyber Mesh that appears on hover */
.apex-mesh-bg {
    position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s ease;
    background-image: radial-gradient(rgba(51, 213, 229, 0.15) 1px, transparent 1px);
    background-size: 10px 10px; z-index: -1;
}
.apex-card-inner:hover .apex-mesh-bg { opacity: 1; }

.a-content-stagger {
    display: flex; flex-direction: column;
}
/* The Magic: Staggered animation elements */
.a-title, .a-loc, .a-specs, .a-action-btn {
    opacity: 0; transform: translateY(20px); transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.a-title { font-family: 'Playfair Display', serif; font-size: 1.6rem; color: #fff; margin-bottom: 6px; transition-delay: 0.1s;}
.a-loc { font-size: 0.85rem; color: #cbd5e1; font-family: 'Orbitron', sans-serif; letter-spacing: 1px; margin-bottom: 15px; transition-delay: 0.15s;}
.a-specs { list-style: none; padding: 0; margin: 0 0 20px 0; display: flex; flex-direction: column; gap: 6px; transition-delay: 0.2s;}
.a-specs.row-specs { flex-direction: row; gap: 15px; }
.a-specs li { font-size: 0.8rem; color: #fff; display: flex; align-items: center; gap: 8px; font-weight: 500;}

.a-action-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: fit-content;
    background: rgba(51, 213, 229, 0.15); border: 1px solid var(--accent-cyan); color: #fff;
    padding: 10px 20px; border-radius: 50px; font-size: 0.8rem; font-family: 'Poppins', sans-serif; font-weight: 600;
    transition-delay: 0.25s; box-shadow: 0 5px 15px rgba(51, 213, 229, 0.3);
}

/* Apply Hover States */
.apex-card-inner:hover .a-title, 
.apex-card-inner:hover .a-loc, 
.apex-card-inner:hover .a-specs, 
.apex-card-inner:hover .a-action-btn {
    opacity: 1; transform: translateY(0);
}

/* Specific Card Overrides */
.card-standard .a-title { font-size: 1.3rem; }
.card-wide .a-title { font-size: 1.8rem; }

/* Video Play Overlay */
.matrix-play-button-overlay { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; z-index: 4; pointer-events: none; }
.play-circle-glow { width: 60px; height: 60px; background: rgba(0,0,0,0.5); border: 2px solid #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 1.2rem; backdrop-filter: blur(5px); transition: 0.4s; }
.apex-card-inner:hover .play-circle-glow { background: var(--accent-pink); border-color: var(--accent-pink); box-shadow: 0 0 30px var(--accent-pink); transform: scale(1.1); }

/* Responsive Logic */
@media (max-width: 1050px) {
    .portfolio-masonry-grid { grid-template-columns: repeat(2, 1fr); }
    .card-wide { grid-column: span 2; }
    .card-tall { grid-row: span 1; }
}
@media (max-width: 768px) {
    .filter-dock-inner { flex-wrap: wrap; justify-content: center; border-radius: 16px;}
    .portfolio-filter-btn { padding: 8px 16px; font-size: 0.8rem; }
}
@media (max-width: 600px) {
    .portfolio-masonry-grid { grid-template-columns: 1fr; grid-auto-rows: minmax(300px, auto); }
    .card-tall, .card-wide, .card-standard { grid-column: span 1; grid-row: span 1; }
    /* Mobile-এর জন্য ১২ নম্বর কার্ডটি আবার স্বাভাবিক করা হলো */
    .portfolio-masonry-grid > .matrix-card-item:nth-child(12) { grid-column: span 1; }
}

/* ==========================================================
   THE ABSOLUTE WORLD-CLASS LIGHTBOX THEATER MODAL (CSS - SYMMETRIC PACKED)
   ========================================================== */
.agoid-lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(3, 3, 12, 0.98);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    z-index: 1000000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.agoid-lightbox-overlay.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-close-btn {
    position: absolute;
    top: 30px;
    right: 40px;
    background: none;
    border: none;
    color: #fff;
    font-size: 3.2rem;
    cursor: pointer;
    transition: var(--transition-fast);
    z-index: 10000005;
}
.lightbox-close-btn:hover {
    color: var(--accent-pink);
    transform: rotate(90deg);
}

.lightbox-stage-box {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    width: 90%;
    max-width: 1200px;
    height: 85vh;
    background: #030310;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 50px 100px rgba(0,0,0,0.8);
}

/* Media Viewport with Blur Background (No Black Sidebars) */
.lightbox-media-viewport {
    position: relative;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}
.lightbox-blurred-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(25px) brightness(0.4);
    opacity: 0.65;
    z-index: 1;
    transform: scale(1.1); /* Prevents border bleeding */
}
.lightbox-media-viewport img, .lightbox-media-viewport video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    position: relative;
    z-index: 2;
}

/* Sliding Navigation Arrows */
.lightbox-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(10, 10, 30, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
    z-index: 10000010;
}
.lightbox-nav-arrow:hover {
    background: var(--accent-cyan);
    color: #000;
    box-shadow: var(--shadow-neon-cyan);
    transform: translateY(-50%) scale(1.1);
}
.lightbox-nav-arrow.l-prev { left: 20px; }
.lightbox-nav-arrow.l-next { right: 20px; }

/* Diagnostic Specifications Ledger (Fixed Spacing Void) */
.lightbox-specs-ledger {
    background: linear-gradient(135deg, #050515, #01010a);
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Changed from space-between to prevent stretching empty voids */
    gap: 24px; /* Perfectly structured gap between all sections */
    overflow-y: auto; /* Scrollable right panel on smaller laptop screens */
}
/* Custom Scrollbars for right panel */
.lightbox-specs-ledger::-webkit-scrollbar {
    width: 5px;
}
.lightbox-specs-ledger::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

.lightbox-ledger-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 12px;
}
.l-spec-tier {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--accent-cyan);
}
.l-spec-loc {
    font-size: 0.8rem;
    color: #8fa0bd;
}
.l-spec-loc i {
    color: var(--accent-pink);
    margin-right: 4px;
}

.l-spec-title {
    font-size: 1.8rem !important;
    font-family: 'Playfair Display', serif;
    color: #fff !important;
    margin: 15px 0 10px;
}
.l-spec-desc {
    font-size: 0.85rem !important;
    line-height: 1.6 !important;
    color: var(--text-muted) !important;
    margin-bottom: 15px;
}

/* NEW ELEMENT: Spatially-Optimized Technical KPI Deck (Fills Empty Gap 1) */
.lightbox-kpi-deck-pills {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 15px;
}
.kpi-pill-item {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    padding: 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.k-p-label {
    font-size: 0.65rem;
    color: #64748b;
    text-transform: uppercase;
}
.k-p-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
}
.k-p-value.text-pink { color: var(--accent-pink); }
.k-p-value.text-cyan { color: var(--accent-cyan); }

/* Social Engagement Deck (Likes & Share) */
.l-social-engagement-deck {
    display: flex;
    gap: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    padding-bottom: 15px;
}
.l-social-btn {
    flex: 1;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 50px;
    padding: 10px 15px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    transition: var(--transition-fast);
}
.l-social-btn:hover {
    background: rgba(255, 255, 255, 0.05);
}
.l-social-btn.btn-like:hover {
    border-color: var(--accent-pink);
    color: var(--accent-pink);
    box-shadow: var(--shadow-neon-pink);
}
.l-social-btn.btn-share:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    box-shadow: var(--shadow-neon-cyan);
}
/* Heart pulse kinetic animation */
.heart-icon-wrap {
    display: inline-block;
    transition: transform 0.2s ease;
}
.l-social-btn.btn-like.liked .heart-icon-wrap {
    animation: heartPulseAnimation 0.5s ease;
    color: var(--accent-pink);
}
@keyframes heartPulseAnimation {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

/* Live Commentary Terminal */
.l-comments-terminal {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: 180px; /* Locked height for perfect symmetry */
}
.l-comments-terminal h5 {
    font-size: 0.8rem;
    color: #fff;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.l-comments-feed-box {
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 5px;
    margin-bottom: 10px;
}
.l-comments-feed-box::-webkit-scrollbar {
    width: 4px;
}
.l-comments-feed-box::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}
.comment-bubble {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.03);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    line-height: 1.4;
}
.comment-bubble strong {
    color: var(--accent-cyan);
    margin-right: 5px;
}
.comment-bubble p {
    display: inline;
    color: #cbd5e1 !important;
}

.l-comments-input-row {
    display: flex;
    gap: 10px;
}
.l-c-input {
    flex-grow: 1;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50px;
    padding: 8px 15px;
    color: #fff;
    font-size: 0.75rem;
    outline: none;
    transition: 0.3s;
}
.l-c-input:focus {
    border-color: var(--accent-cyan);
}
.l-c-submit-btn {
    background: var(--accent-cyan);
    border: none;
    color: #000;
    width: 32px; height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 0 25px rgba(51, 213, 229, 0.7);
    transition: 0.3s;
}
.matrix-card-inner:hover .play-circle-glow {
    background: var(--accent-pink);
    color: #fff;
    box-shadow: 0 0 35px rgba(232, 73, 232, 0.8);
    transform: scale(1.1);
}

/* NEW ELEMENT: AGOID Quality Shield Checklist (Fills Empty Gap 3 Perfectly!) */
.lightbox-quality-guarantees-deck {
    background: rgba(46, 204, 113, 0.03);
    border: 1px dashed rgba(46, 204, 113, 0.2);
    border-radius: 16px;
    padding: 20px;
}
.g-header-title {
    font-size: 0.8rem;
    color: #fff;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.guarantee-specs-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.guarantee-specs-list li {
    font-size: 0.75rem;
    color: #cbd5e1;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.4;
}
.guarantee-specs-list li i {
    color: var(--accent-green);
    font-size: 0.8rem;
    margin-top: 3px;
}
.guarantee-specs-list li strong {
    color: #fff !important;
}

/* Material specs matrix */
.l-spec-technical-grid {
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
    padding-top: 15px;
}
.l-tech-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    padding-bottom: 6px;
    margin-bottom: 8px;
}
.l-tech-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}
.l-t-lbl {
    color: #64748b;
}
.l-t-val {
    color: #fff !important;
    font-weight: 600;
}

/* Ambient Neon Toast Notification */
.agoid-neon-toast {
    position: fixed;
    bottom: -80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 10, 30, 0.95);
    border: 1px solid var(--accent-cyan);
    box-shadow: var(--shadow-neon-cyan);
    border-radius: 50px;
    padding: 12px 25px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 10000010;
    transition: bottom 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.agoid-neon-toast.active {
    bottom: 30px;
}

@media (max-width: 1050px) {
    .portfolio-matrix-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 900px) {
    .lightbox-stage-box {
        grid-template-columns: 1fr;
        height: 90vh;
    }
    .lightbox-specs-ledger {
        display: none; /* Auto hides on small screens for visual optimization */
    }
}
@media (max-width: 700px) {
    .portfolio-matrix-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   13. THE HOLOGRAPHIC SANDBOX: 3D SPATIAL PLANNER
   ========================================================== */
.bhk-holographic-sandbox-premium {
    padding: 140px 0;
    background: #010409; /* Deep Cyberspace Black */
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(51, 213, 229, 0.1);
}

/* Background Layers */
.sandbox-bg-glow {
    position: absolute; width: 800px; height: 800px; border-radius: 50%;
    background: radial-gradient(circle, rgba(51, 213, 229, 0.05) 0%, transparent 60%);
    top: 50%; left: 30%; transform: translate(-50%, -50%);
    z-index: 0; pointer-events: none;
}
.sandbox-cyber-grid {
    position: absolute; inset: 0;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 1; pointer-events: none;
}

/* Header Utilities */
.tech-badge-sandbox {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 18px; border-radius: 50px; margin-bottom: 20px;
    font-size: 0.75rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
    position: relative; z-index: 2;
}
.glow-title-sandbox { font-size: 3.2rem !important; font-family: 'Playfair Display', serif; color: #fff !important; margin-bottom: 20px; position: relative; z-index: 2; }
.premium-desc-sandbox { max-width: 750px; margin: 0 auto 50px; color: var(--text-muted); line-height: 1.6; position: relative; z-index: 2; font-weight: 300;}

/* Master Grid */
.holographic-master-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* ==========================================================
   LEFT COLUMN: THE 3D PROJECTION TABLE
   ========================================================== */
.holo-projection-column {
    position: relative;
    width: 100%;
    height: 500px;
    display: flex; justify-content: center; align-items: center;
    perspective: 1200px; /* Crucial for the 3D effect */
}

/* The projector glow on the floor */
.projector-base-glow {
    position: absolute; bottom: 0; left: 50%; transform: translateX(-50%) rotateX(60deg);
    width: 300px; height: 300px; border-radius: 50%;
    background: radial-gradient(circle, rgba(51, 213, 229, 0.2) 0%, transparent 70%);
    box-shadow: 0 0 50px rgba(51, 213, 229, 0.4);
    z-index: 1;
}

/* The 3D Stage Container */
.cad-3d-stage {
    position: relative;
    width: 80%;
    height: 80%;
    transform-style: preserve-3d;
    transform: rotateX(55deg) rotateZ(-35deg); /* The Magic Isometric Tilt! */
    transition: transform 1s ease;
    z-index: 2;
}
/* Subtle movement on hover over the entire table */
.holo-projection-column:hover .cad-3d-stage {
    transform: rotateX(50deg) rotateZ(-30deg);
}

/* Individual Rooms (Zones) */
.cad-room-zone {
    position: absolute;
    background: rgba(10, 15, 30, 0.7);
    border: 1px solid rgba(51, 213, 229, 0.3);
    cursor: pointer;
    display: flex; justify-content: center; align-items: center;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: translateZ(0); /* Base Z level */
    transform-style: preserve-3d;
}

/* Zone Placements (Mimicking a real 1BHK) */
.zone-bedroom { top: 0; left: 0; width: 55%; height: 45%; border-right: 2px dashed rgba(51,213,229,0.3); border-bottom: 2px dashed rgba(51,213,229,0.3); }
.zone-bathroom { top: 0; right: 0; width: 45%; height: 45%; border-bottom: 2px dashed rgba(51,213,229,0.3); }
.zone-living { top: 45%; left: 0; width: 100%; height: 35%; border-bottom: 2px dashed rgba(51,213,229,0.3); }
.zone-foyer { bottom: 0; left: 0; width: 45%; height: 20%; border-right: 2px dashed rgba(51,213,229,0.3); }
.zone-kitchen { bottom: 0; right: 0; width: 55%; height: 20%; }

/* Internal Details of Zones */
.zone-floor-grid {
    position: absolute; inset: 0;
    background-image: 
        linear-gradient(rgba(51, 213, 229, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(51, 213, 229, 0.1) 1px, transparent 1px);
    background-size: 15px 15px; opacity: 0.5;
}
.zone-label {
    font-family: 'Orbitron', sans-serif; font-size: 1.2rem; font-weight: 800;
    color: rgba(255,255,255,0.5); display: flex; flex-direction: column; align-items: center; gap: 8px;
    transition: 0.4s; text-transform: uppercase; letter-spacing: 1px;
    transform: translateZ(20px); /* Lifts text off the floor */
}
.zone-label i { font-size: 2rem; }

/* Drop Shadow for Elevation Effect */
.zone-elevation-shadow {
    position: absolute; inset: 0; background: rgba(0,0,0,0.8);
    transform: translateZ(-20px); filter: blur(10px); opacity: 0; transition: 0.5s;
}

/* THE LEVITATION HOVER/ACTIVE MAGIC! */
.cad-room-zone:hover, .cad-room-zone.active {
    transform: translateZ(40px); /* Lifts the room up in 3D space! */
    background: rgba(51, 213, 229, 0.15);
    border-color: var(--accent-cyan);
    box-shadow: 0 0 30px rgba(51, 213, 229, 0.3), inset 0 0 20px rgba(51, 213, 229, 0.2);
}
.cad-room-zone:hover .zone-label, .cad-room-zone.active .zone-label {
    color: var(--accent-cyan); text-shadow: 0 0 10px var(--accent-cyan);
}
.cad-room-zone:hover .zone-elevation-shadow, .cad-room-zone.active .zone-elevation-shadow {
    opacity: 1; /* Shows shadow below the levitating room */
}

/* Highlight specific zones uniquely when active */
.zone-bedroom.active { border-color: var(--accent-pink); background: rgba(232, 73, 232, 0.15); box-shadow: 0 0 30px rgba(232, 73, 232, 0.3); }
.zone-bedroom.active .zone-label { color: var(--accent-pink); text-shadow: 0 0 10px var(--accent-pink); }

.zone-living.active { border-color: #FFD700; background: rgba(255, 215, 0, 0.15); box-shadow: 0 0 30px rgba(255, 215, 0, 0.3); }
.zone-living.active .zone-label { color: #FFD700; text-shadow: 0 0 10px #FFD700; }

/* ==========================================================
   RIGHT COLUMN: DIAGNOSTIC DATA CONSOLE
   ========================================================== */
.sandbox-data-console {
    padding: 35px; border-radius: 24px;
    background: rgba(8, 8, 20, 0.7) !important;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(51,213,229,0.05);
}

.zd-hdr-sandbox {
    display: flex; justify-content: space-between; align-items: flex-start;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1); padding-bottom: 20px; margin-bottom: 25px;
}
.zd-title-group { display: flex; flex-direction: column; gap: 8px; }
.zd-index-sandbox {
    font-family: 'Orbitron', sans-serif; font-size: 0.7rem; font-weight: 800;
    padding: 4px 12px; border-radius: 6px; width: fit-content;
}
.zd-title-group h3 { font-size: 1.6rem !important; margin: 0; font-family: 'Playfair Display', serif; }

.pulse-live { font-family: 'Orbitron', sans-serif; font-size: 0.7rem; font-weight: 800; color: #2ecc71; display: flex; align-items: center; gap: 6px;}
.pulse-live i { animation: blinkLed 1.5s infinite; }

/* Visual Viewport with Cyber FX */
.zd-visual-sandbox {
    position: relative; border-radius: 16px; overflow: hidden;
    aspect-ratio: 16/9; margin-bottom: 25px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: #000;
}
.zd-visual-img-sandbox {
    width: 100%; height: 100%; object-fit: cover;
    transition: opacity 0.4s ease, filter 0.4s ease;
}
.zd-scanner-fx {
    position: absolute; top: 0; left: 0; width: 100%; height: 20%;
    background: linear-gradient(to bottom, rgba(51,213,229,0.2), transparent);
    border-top: 2px solid var(--accent-cyan); z-index: 2;
    animation: terminalScan 3s linear infinite; opacity: 0.5; pointer-events: none;
}
@keyframes terminalScan { 0% { top: -20%; } 100% { top: 100%; } }

.zd-corner-bracket { position: absolute; width: 20px; height: 20px; z-index: 3; pointer-events: none; }
.zd-corner-bracket.top-left { top: 10px; left: 10px; border-top: 2px solid #fff; border-left: 2px solid #fff; }
.zd-corner-bracket.bottom-right { bottom: 10px; right: 10px; border-bottom: 2px solid #fff; border-right: 2px solid #fff; }

/* Content Area */
.zd-desc-text { font-size: 0.95rem !important; line-height: 1.7 !important; color: #cbd5e1 !important; margin-bottom: 25px; font-weight: 300;}

.zd-hacks-container {
    background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.05);
    padding: 20px; border-radius: 12px;
}
.hacks-title { font-size: 0.85rem; color: #fff !important; margin-bottom: 15px; font-family: 'Orbitron', sans-serif; letter-spacing: 1px;}
.hacks-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.hacks-list li { font-size: 0.85rem; color: #94a3b8; display: flex; align-items: flex-start; gap: 10px; line-height: 1.4;}
.hacks-list li i { color: #2ecc71; margin-top: 3px;}

/* ==========================================================
   RESPONSIVE LOGIC
   ========================================================== */
@media (max-width: 1050px) {
    .holographic-master-grid { grid-template-columns: 1fr; gap: 50px; }
    .holo-projection-column { height: 400px; }
    /* Less extreme tilt for smaller screens */
    .cad-3d-stage { transform: rotateX(45deg) rotateZ(0deg); width: 90%; }
    .holo-projection-column:hover .cad-3d-stage { transform: rotateX(45deg) rotateZ(0deg); }
    .zone-label { font-size: 1rem; transform: translateZ(10px); }
    .zone-label i { font-size: 1.5rem; }
}
@media (max-width: 600px) {
    .holo-projection-column { height: 350px; }
    /* Turn off 3D rotation on mobile to ensure usability */
    .cad-3d-stage { transform: none; width: 100%; height: 100%; border: 1px solid rgba(51,213,229,0.3); border-radius: 12px;}
    .cad-room-zone:hover, .cad-room-zone.active { transform: none; box-shadow: inset 0 0 20px rgba(51, 213, 229, 0.3); }
    .zone-label { transform: none; }
}

/* ==========================================================
   15. DESIGNS FOR EVERY SIZE (SPATIAL SCALING)
   ========================================================== */
.premium-size-guide-section {
    background-color: var(--bg-dark);
    padding: 100px 0;
}
.premium-size-guide-section .glow-title {
    color: #FFFFFF !important;
}
.spatial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 60px;
}
.spatial-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: 3/4;
    box-shadow: var(--shadow-card-heavy);
    cursor: pointer;
}
.spatial-bg-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.spatial-card:hover .spatial-bg-img {
    transform: scale(1.15);
}
.spatial-gradient-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(5,5,20,0.95) 0%, rgba(5,5,20,0.6) 40%, rgba(5,5,20,0.2) 100%);
    transition: background 0.5s ease;
    z-index: 1;
}
.spatial-card:hover .spatial-gradient-overlay {
    background: linear-gradient(to top, rgba(5,5,20,0.98) 0%, rgba(5,5,20,0.85) 60%, rgba(5,5,20,0.4) 100%);
}
.spatial-content {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    padding: 30px;
    z-index: 2;
    display: flex;
    flex-direction: column;
}
.spatial-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: translateY(180px);
}
.spatial-card:hover .spatial-header {
    transform: translateY(0);
}
.sp-title-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sp-icon {
    width: 45px;
    height: 45px;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    border: 1px solid rgba(255,255,255,0.2);
}
.spatial-header h3 {
    color: #fff !important;
    font-size: 1.6rem;
    font-family: 'Playfair Display', serif;
    margin: 0;
}
.sp-sqft-badge {
    background: rgba(255,255,255,0.15);
    color: #fff;
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    white-space: nowrap;
    margin-bottom: 5px;
}

.spatial-reveal-area {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    max-height: 0;
}
.spatial-card:hover .spatial-reveal-area {
    opacity: 1;
    transform: translateY(0);
    max-height: 500px;
}
.sp-strategy {
    color: #ccc !important;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 15px;
}
.sp-features {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sp-features li {
    color: var(--text-muted) !important;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.sp-features li i {
    color: var(--accent-cyan);
}
.sp-explore-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.btn-outline-cyan {
    color: var(--accent-cyan);
    border: 1px solid rgba(51, 213, 229, 0.4);
    background: rgba(51, 213, 229, 0.05);
}
.btn-outline-cyan:hover {
    background: var(--accent-cyan);
    color: #000 !important;
    box-shadow: var(--shadow-neon-cyan);
}
.btn-outline-pink {
    color: var(--accent-pink);
    border: 1px solid rgba(232, 73, 232, 0.4);
    background: rgba(232, 73, 232, 0.05);
}
.btn-outline-pink:hover {
    background: var(--accent-pink);
    color: #fff !important;
    box-shadow: var(--shadow-neon-pink);
}
.btn-outline-gold {
    color: var(--accent-gold);
    border: 1px solid rgba(255, 215, 0, 0.4);
    background: rgba(255, 215, 0, 0.05);
}
.btn-outline-gold:hover {
    background: var(--accent-gold);
    color: #000 !important;
    box-shadow: var(--shadow-neon-gold);
}

/* ==========================================================
   16. SMART STORAGE ARCHITECTURE (HIS & HERS)
   ========================================================== */
.wardrobe-masterclass-section {
    background-color: var(--bg-deep);
    padding: 120px 0;
    position: relative;
    overflow: hidden;
}
.wardrobe-masterclass-section .glow-title {
    color: #FFFFFF !important;
}
.tech-grid-bg {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(51, 213, 229, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(51, 213, 229, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.5;
}
.wardrobe-hub-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 40px;
    align-items: center;
    position: relative;
    z-index: 2;
}
.w-feature-col {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.w-tech-card {
    background: rgba(10, 10, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 30px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: var(--transition-normal);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}
.w-tech-card:hover {
    transform: translateY(-8px);
    border-color: rgba(51, 213, 229, 0.3);
    box-shadow: var(--shadow-neon-cyan);
}
.w-tech-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.w-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}
.w-icon.cyan-glow {
    background: rgba(51, 213, 229, 0.1);
    border: 1px solid rgba(51, 213, 229, 0.3);
    color: var(--accent-cyan);
}
.w-icon.pink-glow {
    background: rgba(232, 73, 232, 0.1);
    border: 1px solid rgba(232, 73, 232, 0.3);
    color: var(--accent-pink);
}
.spec-label {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: #666;
    border: 1px solid #444;
    padding: 4px 8px;
    border-radius: 4px;
}
.w-tech-card h3 {
    font-size: 1.3rem;
    color: #fff !important;
    margin-bottom: 10px;
}
.w-tech-card p {
    color: var(--text-muted) !important;
    font-size: 0.9rem;
    line-height: 1.6;
}

.w-glass-visualizer {
    position: relative;
    width: 100%;
    aspect-ratio: 3/4;
    border-radius: 30px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(51, 213, 229, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 0 60px rgba(51, 213, 229, 0.1);
    animation: bhkFloat 6s ease-in-out infinite;
}
.w-core-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}
.sci-fi-scanner {
    position: absolute;
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
    height: 4px;
    background: var(--accent-cyan);
    box-shadow: 0 0 20px 5px rgba(51, 213, 229, 0.6);
    animation: bhkScanLine 4s linear infinite;
    z-index: 5;
}
.w-core-tag {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-pink));
    color: #000;
    padding: 8px 25px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 800;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    white-space: nowrap;
}

/* ==========================================================
   17. TRANSPARENT ENGINEERING (MATERIAL CONSOLE)
   ========================================================== */
.premium-material-section {
    background-color: var(--bg-deep);
    padding: 120px 0;
    position: relative;
    overflow: hidden;
}
.premium-material-section .glow-title {
    color: #FFFFFF !important;
}
.mat-bg-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.8;
}
.material-console-wrapper {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 50px;
    position: relative;
    z-index: 2;
}
.mat-sidebar {
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: sticky;
    top: 100px;
}
.mat-nav-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    text-align: left;
    transition: var(--transition-normal);
}
.mat-nav-btn:hover {
    background: rgba(255, 255, 255, 0.03);
    transform: translateX(5px);
}
.nav-indicator {
    width: 4px;
    height: 0;
    background: transparent;
    border-radius: 10px;
    transition: 0.4s ease;
}
.nav-text strong {
    display: block;
    color: #fff;
    font-size: 1.15rem;
    font-family: 'Playfair Display', serif;
    margin-bottom: 4px;
}
.nav-text span {
    display: block;
    color: #666;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.mat-nav-btn.active {
    background: rgba(10, 10, 30, 0.6);
    border-color: rgba(51, 213, 229, 0.3);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transform: translateX(10px);
}
.mat-nav-btn.active .nav-indicator {
    height: 35px;
    background: linear-gradient(to bottom, var(--accent-cyan), var(--accent-pink));
    box-shadow: 0 0 10px var(--accent-cyan);
}
.mat-nav-btn.active .nav-text span {
    color: var(--accent-cyan);
}

.mat-display-area {
    padding: 50px;
}
.mat-header-dynamic h3 {
    color: var(--accent-cyan) !important;
    font-size: 2.2rem;
    margin-bottom: 8px;
    font-family: 'Playfair Display', serif;
}
.mat-header-dynamic p {
    color: var(--text-muted);
    font-size: 1.05rem;
    margin: 0;
    max-width: 600px;
}
.mat-spec-list {
    display: flex;
    flex-direction: column;
}
.spec-row {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    gap: 30px;
    padding: 25px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    align-items: center;
    transition: var(--transition-normal);
}
.spec-row:hover {
    background: rgba(255,255,255,0.02);
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 12px;
}
.sr-component {
    display: flex;
    align-items: center;
    gap: 15px;
}
.sr-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--accent-cyan);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: 0.3s;
}
.spec-row:hover .sr-icon {
    background: var(--accent-cyan);
    color: #000;
    box-shadow: var(--shadow-neon-cyan);
}
.sr-title {
    color: #fff !important;
    font-weight: 700;
    font-size: 1.05rem;
}
.sr-detail {
    color: #ccc !important;
    font-size: 0.95rem;
    line-height: 1.6;
}
.sr-brands {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}
.brand-tag {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #aaa;
    font-size: 0.75rem;
    padding: 5px 12px;
    border-radius: 50px;
    font-weight: 600;
    white-space: nowrap;
}
.spec-row:hover .brand-tag {
    border-color: rgba(51, 213, 229, 0.3);
    color: #fff;
    background: rgba(51, 213, 229, 0.05);
}
.mat-footer-note {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    font-size: 0.85rem;
    color: #666;
    font-style: italic;
}

/* ==========================================================
   18. HIGH-PERFORMANCE SAAS COST ESTIMATOR ENGINE
   ========================================================== */
.bhk-calc-section {
    padding: 100px 0;
    background: var(--bg-dark);
}
.bhk-calc-section .bhk-section-title {
    color: #FFFFFF !important;
}
.bhk-calc-grid-wrapper {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    margin-top: 50px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 40px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    align-items: start;
}

.bhk-calc-inputs-box { display: flex; flex-direction: column; gap: 25px; min-width: 0; }
.bhk-input-group label { display: block; color: #fff !important; font-weight: 600; margin-bottom: 10px; font-size: 1rem; }
.bhk-input-group label i { color: var(--accent-cyan); margin-right: 8px; }

/* Custom Form inputs & Select dropdowns */
.bhk-select-style { position: relative; }
.bhk-select-style select {
    width: 100%;
    padding: 15px 20px;
    background: rgba(0,0,0,0.4);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    color: #fff;
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
    appearance: none;
    outline: none;
    transition: 0.3s;
}
.bhk-select-style select:focus {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 15px rgba(51,213,229,0.2);
}
.bhk-select-style select option { background: var(--bg-dark); color: #fff; }
.bhk-select-style::after {
    content: '\f107';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

/* Custom Sliders & Numeric Display */
.calc-header-row { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 15px; }
.calc-header-row label {
    color: #fff !important;
}
.bhk-numeric-display {
    background: rgba(51,213,229,0.1);
    border: 1px solid var(--accent-cyan);
    padding: 5px 15px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.bhk-numeric-display input {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    width: 60px;
    text-align: right;
    outline: none;
}
.bhk-numeric-display span { color: var(--accent-cyan); font-size: 0.9rem; font-weight: 600; }
.bhk-range-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    background: rgba(255,255,255,0.1);
    border-radius: 5px;
    outline: none;
}
.bhk-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--accent-cyan);
    cursor: pointer;
    border: 3px solid #fff;
    box-shadow: 0 0 10px rgba(51,213,229,0.5);
    transition: 0.2s;
}
.bhk-range-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }

/* Area Toggle Button Group */
.bhk-toggle-group {
    display: flex;
    background: rgba(10, 10, 42, 0.8);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(51, 213, 229, 0.3);
    margin-top: 15px;
}
.bhk-toggle-btn {
    flex: 1;
    padding: 10px;
    border: none;
    background: transparent;
    color: #888;
    cursor: pointer;
    transition: 0.3s;
    font-weight: 600;
    font-size: 0.85rem;
    font-family: 'Poppins', sans-serif;
}
.bhk-toggle-btn:hover { color: #fff; }
.bhk-toggle-btn.active {
    background: rgba(51, 213, 229, 0.15);
    color: var(--accent-cyan);
    box-shadow: inset 0 -3px 0 var(--accent-cyan);
}
.bhk-helper-text { font-size: 0.8rem; margin-top: 8px; }

/* Addon horizontal carousel */
.bhk-addon-scroll-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
}
.bhk-addon-slider-container {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 10px 5px;
    width: 100%;
    cursor: grab;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.bhk-addon-slider-container::-webkit-scrollbar { display: none; }
.bhk-addon-item { flex: 0 0 135px; display: block; }
.bhk-addon-item input { display: none; }

.addon-inner-box {
    background: rgba(10, 10, 42, 0.8);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 20px 15px;
    text-align: center;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.addon-inner-box i { font-size: 1.8rem; color: #666; transition: 0.3s; }
.addon-name { color: #ccc; font-size: 0.9rem; font-weight: 500; }
.addon-price { color: #888; font-size: 0.8rem; }

.bhk-addon-item input:checked + .addon-inner-box {
    background: rgba(51, 213, 229, 0.1);
    border-color: var(--accent-cyan);
    transform: translateY(-3px);
}
.bhk-addon-item input:checked + .addon-inner-box i { color: var(--accent-cyan); }
.bhk-addon-item input:checked + .addon-inner-box .addon-name { color: #fff; font-weight: 600; }
.bhk-addon-item input:checked + .addon-inner-box .addon-price { color: var(--accent-cyan); }

.addon-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: rgba(10, 10, 30, 0.95);
    border: 1px solid var(--accent-cyan);
    color: var(--accent-cyan);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
    transition: 0.3s;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.addon-nav-arrow:hover {
    background: var(--accent-cyan);
    color: #000;
    box-shadow: 0 0 20px rgba(51, 213, 229, 0.6);
    transform: translateY(-50%) scale(1.1);
}
.addon-nav-arrow.left { left: -15px; } .addon-nav-arrow.right { right: -15px; }

/* Receipt Card (Right column) */
.bhk-calc-receipt-box {
    background: linear-gradient(145deg, #050515, #0A0A2A);
    border-radius: 20px;
    padding: 30px;
    border: 1px solid rgba(255,255,255,0.05);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 100px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}
.bhk-calc-receipt-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 4px;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-pink));
}
.receipt-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    border-bottom: 1px dashed rgba(255,255,255,0.1);
    padding-bottom: 15px;
}
.receipt-header h3 {
    color: #fff !important;
    font-size: 1.2rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.receipt-header h3 i { color: var(--accent-cyan); }
.live-badge {
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
    border: 1px solid #2ecc71;
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    animation: btnBreathe 2s infinite;
}

.receipt-visualizer {
    position: relative;
    width: 100%;
    aspect-ratio: 16/10;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 25px;
    background: #000;
    border: 1px solid rgba(255,255,255,0.1);
}
.rec-visual-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.4s ease;
    filter: brightness(0.75);
}
.rec-specs-overlay {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(5, 5, 15, 0.95), rgba(5, 5, 15, 0.7));
    backdrop-filter: blur(5px);
    padding: 15px;
    transform: translateY(calc(100% - 40px));
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.receipt-visualizer:hover .rec-specs-overlay { transform: translateY(0); }
.rec-specs-overlay h4 {
    color: var(--accent-cyan);
    font-size: 0.9rem;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
}
.rec-specs-overlay h4::after {
    content: 'Hover to expand ⬆';
    font-size: 0.65rem;
    color: #888;
    font-weight: 400;
}
.receipt-visualizer:hover .rec-specs-overlay h4::after { display: none; }

.spec-mini-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.spec-mini-list li {
    font-size: 0.75rem;
    color: #ddd;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.spec-mini-list li i { color: var(--accent-pink); margin-top: 2px; }

/* Real-time performance meters */
.bhk-performance-meters {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 25px;
    background: rgba(255,255,255,0.02);
    padding: 15px;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
}
.meter-row { display: flex; flex-direction: column; gap: 5px; }
.meter-label { color: #aaa; font-size: 0.75rem; font-weight: 500; text-transform: uppercase; }
.meter-stats-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.meter-stats-row strong { font-size: 0.9rem; font-family: 'Poppins', sans-serif; font-weight: 800; color: #fff; width: 35px; }
.bar-bg { flex-grow: 1; height: 6px; background: rgba(255,255,255,0.1); border-radius: 10px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 10px; background: linear-gradient(90deg, var(--accent-cyan), var(--accent-pink)); transition: width 1s ease; }

.receipt-breakdown { display: flex; flex-direction: column; gap: 12px; }
.bhk-r-row { display: flex; justify-content: space-between; align-items: center; }
.bhk-r-row .lbl { color: #aaa !important; font-size: 0.95rem; }
.bhk-r-row .val { color: #fff !important; font-size: 1.1rem; font-weight: 600; font-family: 'Courier New', monospace; }
.disc-pill { background: rgba(255, 71, 87, 0.15); color: #ff4757; border: 1px solid rgba(255, 71, 87, 0.4); font-size: 0.65rem; padding: 3px 8px; border-radius: 6px; font-weight: 800; margin-left: 10px; white-space: nowrap; }

.receipt-divider-line { height: 1px; background: rgba(255,255,255,0.1); margin: 10px 0; }
.grand-total-row .lbl { color: #fff !important; font-size: 1.1rem; font-weight: 700; }
.grand-total-row .grand-price { font-size: 2rem; font-weight: 800; color: #fff !important; text-shadow: 0 0 20px rgba(51, 213, 229, 0.5); font-family: 'Poppins', sans-serif; }
.receipt-disclaimer { color: #666; font-size: 0.75rem; text-align: center; font-style: italic; margin-top: 15px; line-height: 1.4; }

/* Extra Dynamic Specs Box (BHK Specific) */
.bhk-inclusions-system { background: rgba(10, 10, 30, 0.4); border: 1px solid rgba(51, 213, 229, 0.3); border-radius: 16px; padding: 25px; margin-top: 40px; box-shadow: inset 0 0 20px rgba(0,0,0,0.5); position: relative; overflow: hidden; }
.bhk-inclusions-system::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(to bottom, var(--accent-cyan), var(--accent-pink)); }
.inc-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px dashed rgba(255,255,255,0.1); padding-bottom: 15px; }
.inc-header-row h4 { color: #fff !important; font-size: 1.1rem; margin: 0; font-family: 'Playfair Display', serif; }
.inc-badge-pill { background: rgba(232, 73, 232, 0.15); color: var(--accent-pink); padding: 4px 12px; border-radius: 50px; font-size: 0.75rem; font-weight: 700; border: 1px solid rgba(232, 73, 232, 0.3); letter-spacing: 1px; text-transform: uppercase; }

.inc-grid-system { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.inc-category { background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.03); padding: 20px; border-radius: 16px; transition: 0.3s; }
.inc-category:hover { background: rgba(51, 213, 229, 0.05); border-color: rgba(51, 213, 229, 0.2); }
.inc-category h5 { color: var(--accent-cyan); font-size: 0.95rem; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.05); display: flex; align-items: center; gap: 8px; }
.inc-category ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.inc-category ul li { font-size: 0.85rem; color: #ccc; display: flex; align-items: flex-start; gap: 8px; line-height: 1.4; }
.inc-category ul li i { color: #2ecc71; font-size: 0.8rem; margin-top: 3px; }

/* Precise calculations elements */
.calc-mode-switcher { display: flex; gap: 10px; margin-bottom: 25px; background: rgba(10,10,42,0.8); padding: 5px; border-radius: 12px; }
.mode-btn { flex: 1; padding: 12px 10px; background: transparent; border: none; color: #888; font-family: 'Poppins', sans-serif; font-size: 0.9rem; font-weight: 600; border-radius: 8px; cursor: pointer; transition: 0.3s; }
.mode-btn.active { background: rgba(51, 213, 229, 0.15); color: var(--accent-cyan); box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.calc-mode-content { display: none; }
.calc-mode-content.active { display: block; }

.blueprint-card { background: #030312; border: 1px solid rgba(51, 213, 229, 0.2); border-radius: 12px; overflow: hidden; margin-bottom: 20px; }
.bp-header { background: rgba(51, 213, 229, 0.1); color: var(--accent-cyan); font-size: 0.8rem; font-weight: 600; text-align: center; padding: 6px; letter-spacing: 1px; }
.bp-canvas { height: 140px; position: relative; display: flex; justify-content: center; align-items: center; background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 20px 20px; }
.cad-block { position: absolute; border: 2px solid #fff; background: rgba(255,255,255,0.1); display: flex; justify-content: center; align-items: center; font-size: 0.75rem; font-weight: 700; }
.cad-text-cyan { color: var(--accent-cyan); border-color: var(--accent-cyan); background: rgba(51, 213, 229, 0.15); }
.cad-text-pink { color: var(--accent-pink); border-color: var(--accent-pink); background: rgba(232, 73, 232, 0.15); }

.sub-label { display: block; color: #ccc; font-size: 0.9rem; margin-bottom: 10px; font-weight: 500; }
.sub-label i { color: var(--accent-pink); margin-right: 5px; }

.wall-inputs-container { display: flex; flex-direction: column; gap: 12px; }
.wall-row { display: flex; justify-content: space-between; align-items: center; background: rgba(10,10,42,0.6); padding: 10px 15px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.05); }
.wall-label { color: #fff !important; font-weight: 600; font-size: 0.95rem; }
.ft-in-group { display: flex; align-items: center; gap: 10px; }
.ft-in-group input { width: 60px; background: transparent; border: none; border-bottom: 2px solid rgba(255,255,255,0.2); color: #fff; font-size: 1.1rem; font-weight: 700; text-align: center; outline: none; padding: 5px 0; transition: 0.3s; }
.ft-in-group input:focus { border-bottom-color: var(--accent-cyan); }
.ft-in-group i { color: #888; font-size: 0.8rem; font-style: normal; }

.height-selector { display: flex; gap: 10px; }
.height-pill { flex: 1; position: relative; }
.height-pill input { display: none; }
.height-pill span { display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); padding: 12px 5px; border-radius: 10px; cursor: pointer; transition: 0.3s; color: #ccc; font-size: 0.9rem; font-weight: 600; text-align: center; }
.height-pill span small { font-size: 0.65rem; color: #888; font-weight: 400; margin-top: 3px; }
.height-pill input:checked + span { background: linear-gradient(135deg, rgba(232, 73, 232, 0.2), rgba(51, 213, 229, 0.2)); border-color: var(--accent-cyan); color: #fff; }
.height-pill input:checked + span small { color: var(--accent-cyan); }

.calculated-area-box { margin-top: 20px; background: rgba(51, 213, 229, 0.1); border-left: 4px solid var(--accent-cyan); padding: 15px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; }
.calculated-area-box span { color: #ccc; font-size: 0.9rem; }
.calculated-area-box strong { color: #fff; font-size: 1.2rem; }

/* Space sizes pills */
.premium-size-selector { display: flex; gap: 10px; background: rgba(5, 5, 20, 0.8); padding: 8px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); }
.size-pill { flex: 1; padding: 10px 5px; background: transparent; border: none; border-radius: 8px; cursor: pointer; text-align: center; transition: 0.3s; display: flex; flex-direction: column; }
.size-pill .s-label { font-weight: 600; font-size: 0.9rem; color: #ccc; transition: 0.3s; }
.size-pill .s-range { font-size: 0.75rem; color: #777; transition: 0.3s; }
.size-pill:hover { background: rgba(255,255,255,0.05); }
.size-pill.active { background: linear-gradient(135deg, var(--accent-cyan), var(--accent-pink)); box-shadow: 0 5px 15px rgba(51, 213, 229, 0.3); }
.size-pill.active .s-label, .size-pill.active .s-range { color: #fff; }

/* ==========================================================
   14. TECHNICAL SPECIFICATIONS COMPARATIVE SHEET
   ========================================================== */
.bhk-comparison-section { padding: 100px 0; background: var(--bg-deep); }
.bhk-comparison-section .glow-title {
    color: #FFFFFF !important;
}
.bhk-comparison-table-wrapper { overflow-x: auto; margin-top: 50px; border-radius: 20px; border: 1px solid var(--glass-border); box-shadow: 0 15px 35px rgba(0,0,0,0.4); }

.bhk-comparison-table { width: 100%; border-collapse: collapse; min-width: 800px; text-align: left; }
.bhk-comparison-table th, .bhk-comparison-table td { padding: 22px 25px; border-bottom: 1px solid var(--glass-border); font-size: 0.95rem; }
.bhk-comparison-table th { background: #0a0a20; color: var(--accent-cyan); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.bhk-comparison-table td { color: #d0d0e0; background: rgba(10, 10, 30, 0.6); }
.bhk-comparison-table tr:last-child td { border-bottom: none; }

.bhk-comparison-table tr:hover td { background: rgba(255,255,255,0.02); }
.bhk-comparison-table td:first-child { font-weight: 600; color: #fff !important; }
.bhk-comparison-table td:first-child i { color: var(--accent-pink); margin-right: 10px; }

.highlight-cyan { color: var(--accent-cyan) !important; font-weight: 600; }
.highlight-pink { color: var(--accent-pink) !important; font-weight: 600; }

/* ==========================================================
   15. 45-DAY LINEAR PROJECT ROADMAP & TIMELINE
   ========================================================== */
.bhk-roadmap-section { padding: 100px 0; background: var(--bg-dark); position: relative; }
.bhk-roadmap-section .glow-title {
    color: #FFFFFF !important;
}
.bhk-timeline-wrapper { position: relative; max-width: 900px; margin: 50px auto 0; padding-left: 50px; border-left: 2px solid rgba(51, 213, 229, 0.2); }

.timeline-step-card { padding: 30px; position: relative; margin-bottom: 40px; }
.step-num-circle { position: absolute; left: -75px; top: 25px; width: 48px; height: 48px; border-radius: 50%; background: var(--bg-deep); border: 3px solid var(--accent-cyan); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--accent-cyan); font-weight: 700; box-shadow: 0 0 15px rgba(51, 213, 229, 0.3); }
.step-meta { display: flex; justify-content: space-between; margin-bottom: 12px; color: #888; font-size: 0.85rem; font-weight: 600; }
.timeline-step-card h3 { color: #fff !important; font-size: 1.3rem; margin-bottom: 10px; font-family: 'Playfair Display', serif; }
.timeline-step-card p { color: var(--text-muted) !important; font-size: 0.95rem; line-height: 1.5; margin: 0; }

.bhk-timeline-wrapper .timeline-step-card:nth-child(even) .step-num-circle { border-color: var(--accent-pink); color: var(--accent-pink); box-shadow: 0 0 15px rgba(232, 73, 232, 0.3); }

/* ==========================================================
   16. LOCALIZED REAL CASE STUDIES (IMAGE-INTEGRATED KINETIC DECK)
   ========================================================== */
.bhk-case-studies-premium {
    padding: 120px 0;
    background: var(--bg-deep);
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.tech-badge-footprint {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(51, 213, 229, 0.08);
    border: 1px solid rgba(51, 213, 229, 0.25);
    padding: 6px 18px;
    border-radius: 50px;
    margin-bottom: 20px;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--accent-cyan);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.glow-title-footprint {
    font-size: 3rem !important;
    line-height: 1.2 !important;
    font-family: 'Playfair Display', serif;
    margin-bottom: 20px;
    color: #fff !important;
}
.premium-desc-footprint {
    max-width: 750px;
    margin: 0 auto 50px;
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* 4-Column Image Grid */
.bhk-footprints-grid-ultimate {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

/* Glassmorphic Project Cases Cards with media headers */
.footprint-case-card-ult {
    background: rgba(15, 16, 42, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 24px;
    overflow: hidden; /* Clips image corners inside card */
    display: flex;
    flex-direction: column;
    transition: var(--transition-normal);
}
.footprint-case-card-ult:hover {
    transform: translateY(-8px);
    border-color: rgba(51, 213, 229, 0.25);
    box-shadow: var(--shadow-neon-cyan);
}

/* Upper Half: Crop Image with Hover Zoom */
.c-image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16/11;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.c-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: var(--transition-slow);
}
.footprint-case-card-ult:hover .c-img {
    transform: scale(1.08);
}

.area-badge-ult {
    position: absolute;
    bottom: 12px;
    right: 15px;
    background: rgba(10, 10, 30, 0.85);
    border: 1px solid rgba(51, 213, 229, 0.25);
    color: var(--accent-cyan);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* Lower Half: Conversion Content */
.c-card-body-ult {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
}

.c-meta-row {
    margin-bottom: 10px;
}
.loc-tag-ult {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--accent-pink);
    letter-spacing: 0.5px;
}

.footprint-case-card-ult h3 {
    font-size: 1.25rem !important;
    color: #fff !important;
    font-family: 'Playfair Display', serif;
    margin-bottom: 10px;
}
.c-desc-ult {
    font-size: 0.85rem !important;
    line-height: 1.6 !important;
    color: var(--text-muted) !important;
    margin-bottom: 20px;
}

/* Anchor Keyword Glow formatting (SEO Optimized) */
.keyword-highlight {
    color: #fff !important;
    font-weight: 600;
    border-bottom: 1px dashed var(--accent-cyan);
}

/* Technical Specification List inside Card Body */
.c-tech-specs-ult {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 12px 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.02);
}
.c-tech-specs-ult span {
    font-size: 0.75rem;
    color: #cbd5e1;
    display: flex;
    align-items: center;
    gap: 8px;
}
.c-tech-specs-ult span i {
    font-size: 0.8rem;
    color: var(--accent-cyan);
}

.opt-score-ult {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-cyan);
}

@media (max-width: 1200px) {
    .bhk-footprints-grid-ultimate {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 700px) {
    .bhk-footprints-grid-ultimate {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   17. TRUST HUB: VERIFIED CLIENT REVIEWS
   ========================================================== */
.bhk-reviews-section { padding: 100px 0; background: var(--bg-dark); }
.bhk-reviews-section .glow-title {
    color: #FFFFFF !important;
}
.bhk-google-trust { display: inline-block; background: rgba(255,255,255,0.05); padding: 8px 20px; border-radius: 50px; font-size: 0.9rem; color: #ccc; margin-bottom: 20px; border: 1px solid var(--glass-border); }
.bhk-google-trust i { color: #ea4335; margin-right: 5px; }
.bhk-google-trust strong { color: #fff !important; }

.bhk-reviews-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 30px; margin-top: 50px; }

/* Video card */
.bhk-video-review-card { position: relative; border-radius: 24px; overflow: hidden; cursor: pointer; box-shadow: 0 15px 35px rgba(0,0,0,0.4); min-height: 320px; }
.vid-cover-img { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; transition: 0.5s; position: absolute; inset: 0; }
.bhk-video-review-card:hover .vid-cover-img { transform: scale(1.05); opacity: 0.4; }

.bhk-video-play-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient(to top, rgba(10,10,30,0.9), transparent); text-align: center; }
.play-btn-circle { width: 60px; height: 60px; background: var(--accent-cyan); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 1.5rem; color: #000; margin-bottom: 15px; transition: 0.3s; box-shadow: 0 0 0 0 rgba(51, 213, 229, 0.7); animation: btnBreathe 2s infinite; }
.bhk-video-review-card:hover .play-btn-circle { background: var(--accent-pink); color: #fff; transform: scale(1.1); box-shadow: 0 0 20px var(--accent-pink); animation: none; }
.bhk-video-play-overlay h4 { color: #fff !important; font-size: 1.3rem; margin: 0 0 5px; }
.bhk-video-play-overlay p { color: var(--accent-cyan); font-size: 0.85rem; margin: 0; }

/* Written review */
.bhk-text-review-card { padding: 35px; display: flex; flex-direction: column; justify-content: space-between; }
.bhk-stars { color: #FFD700; font-size: 1rem; margin-bottom: 15px; }
.review-body { color: #ccc !important; font-style: italic; line-height: 1.6; margin-bottom: 25px; font-size: 0.95rem; }
.review-client-profile { display: flex; align-items: center; gap: 15px; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 20px; }
.client-avatar { width: 45px; height: 45px; border-radius: 50%; background: var(--accent-cyan); color: #000 !important; display: flex; justify-content: center; align-items: center; font-weight: 700; font-size: 1.2rem; }
.client-info strong { display: block; color: #fff !important; font-size: 1rem; margin-bottom: 3px; }
.client-info span { color: #888; font-size: 0.8rem; }
.text-green { color: #2ecc71; font-size: 0.85rem; }

/* Metrics Ticker */
.bhk-metrics-ticker { display: flex; justify-content: space-around; align-items: center; padding: 30px; margin-top: 50px; }
.metric-block { text-align: center; flex: 1; }
.m-num { font-size: 3rem; font-weight: 800; color: #fff !important; font-family: 'Poppins', sans-serif; line-height: 1; }
.m-plus { font-size: 2rem; font-weight: 800; color: var(--accent-cyan); }
.metric-block p { color: #aaa !important; font-size: 0.9rem; margin-top: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; }
.metric-divider-line { width: 1px; height: 60px; background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.1), transparent); }

/* ==========================================================
   18. FAQ ACCORDION SYSTEM
   ========================================================== */
.bhk-faq-section { padding: 100px 0; background: var(--bg-deep); }
.bhk-faq-section .glow-title {
    color: #FFFFFF !important;
}
.bhk-faq-accordion-wrapper { max-width: 850px; margin: 50px auto 0; display: flex; flex-direction: column; gap: 15px; }

.bhk-faq-item { background: rgba(255,255,255,0.01); border: 1px solid var(--glass-border); border-radius: 12px; overflow: hidden; transition: 0.3s; }
.bhk-faq-question { width: 100%; background: transparent; border: none; padding: 22px 25px; color: #fff !important; font-size: 1.05rem; font-weight: 600; text-align: left; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: 0.3s; font-family: 'Poppins', sans-serif;}
.bhk-faq-question i { color: var(--accent-cyan); transition: transform 0.3s; }
.bhk-faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, opacity 0.4s; opacity: 0; background: rgba(0,0,0,0.15); }
.bhk-faq-answer p { padding: 0 25px 20px; color: var(--text-muted) !important; font-size: 0.95rem; line-height: 1.6; margin: 0; }

.bhk-faq-item.active { background: rgba(51,213,229,0.05); border-color: var(--accent-cyan); box-shadow: 0 10px 25px rgba(51,213,229,0.1); }
.bhk-faq-item.active .bhk-faq-question { color: var(--accent-cyan) !important; }
.bhk-faq-item.active .bhk-faq-question i { transform: rotate(45deg); color: var(--accent-pink); }
.bhk-faq-item.active .bhk-faq-answer { max-height: 250px; opacity: 1; }

/* ==========================================================
   19. LEAD CAPTURE & PROPOSAL MODAL
   ========================================================== */
.bhk-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); backdrop-filter: blur(15px); z-index: 100000; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: 0.3s ease; }
.bhk-modal-overlay.active { opacity: 1; visibility: visible; }

.bhk-modal-card { padding: 40px; width: 90%; max-width: 460px; position: relative; transform: scale(0.9); transition: 0.3s ease; box-shadow: 0 20px 50px rgba(51,213,229,0.2); border: 1px solid var(--accent-cyan); }
.bhk-modal-overlay.active .bhk-modal-card { transform: scale(1); }

.bhk-modal-close { position: absolute; top: 15px; right: 20px; background: none; border: none; color: #fff; font-size: 2rem; cursor: pointer; transition: 0.3s; }
.bhk-modal-close:hover { color: #ff4757; transform: rotate(90deg); }

.modal-desc-text { color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; margin-bottom: 25px; }

.bhk-modal-input { width: 100%; padding: 15px; background: rgba(0,0,0,0.5); border: 1px solid var(--glass-border); color: #fff; border-radius: 10px; margin-bottom: 15px; font-family: 'Poppins', sans-serif; outline: none; transition: 0.3s; }
.bhk-modal-input:focus { border-color: var(--accent-cyan); box-shadow: 0 0 10px rgba(51, 213, 229, 0.2); }

.modal-buttons-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 10px; }
.bhk-btn-wa { background: #25D366; color: #fff !important; border: none; padding: 14px; border-radius: 10px; font-weight: 700; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 8px; transition: 0.3s; }
.bhk-btn-wa:hover { background: #20bd5a; box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4); }

.bhk-btn-pdf { background: #e74c3c; color: #fff !important; border: none; padding: 14px; border-radius: 10px; font-weight: 700; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 8px; transition: 0.3s; }
.bhk-btn-pdf:hover { background: #c0392b; box-shadow: 0 5px 15px rgba(231, 76, 60, 0.4); }

/* ==========================================================
   20. ADDITIONAL PREMIUM COMPONENT OVERRIDES & PRINT CONFIGS
   ========================================================== */
.foyer-tech-section .bento-gallery-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    align-items: center;
    margin-top: 50px;
}

/* Case study metadata labels readability fixes */
.bhk-page .project-stats-bar {
    background: rgba(10, 10, 30, 0.95) !important; /* Ensure heavy contrast */
    border: 1px solid var(--accent-cyan);
    box-shadow: var(--shadow-neon-cyan);
}
.bhk-page .project-stats-bar .stat-item strong {
    color: #ffffff !important;
}
.bhk-page .project-stats-bar .stat-item span {
    color: var(--text-muted) !important;
}

/* Print Layout Optimization */
@media print {
    .bhk-page {
        background: #fff !important;
        color: #000 !important;
    }
    .bhk-hero, .bhk-vastu-section, .bhk-asmr-section, .final-cta-section {
        display: none !important;
    }
    .bhk-calc-grid-wrapper {
        display: block !important;
    }
}

/* ==========================================================
   21. COMPLETE RESPONSIVE MEDIA QUERIES
   ========================================================== */
@media (max-width: 1150px) {
    .intro-master-grid { grid-template-columns: 1fr; gap: 40px; }
    .bhk-config-grid { grid-template-columns: 1fr; }
    .bhk-pricing-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
    .popular-card { transform: none; }
    .popular-card:hover { transform: translateY(-10px); }
    .bhk-calc-grid-wrapper { grid-template-columns: 1fr; }
    .bhk-calc-receipt-box { position: relative; top: 0; }
    .bhk-comparison-table th, .bhk-comparison-table td { padding: 18px 20px; }
}

@media (max-width: 900px) {
    .bhk-asmr-grid { grid-template-columns: 1fr; }
    .bhk-vastu-grid { grid-template-columns: 1fr; }
    .bhk-reviews-grid { grid-template-columns: 1fr; }
    .bhk-metrics-ticker { flex-direction: column; gap: 30px; }
    .metric-divider-line { width: 100%; height: 1px; background: linear-gradient(to right, transparent, rgba(255,255,255,0.1), transparent); }
    .foyer-tech-section .bento-gallery-grid { grid-template-columns: 1fr; }
    .bhk-bedroom-duo { grid-template-columns: 1fr; }
    .wardrobe-hub-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .bhk-main-title { font-size: 2.8rem; }
    .bhk-hero-cta { flex-direction: column; width: 100%; max-width: 350px; }
    .btn-brand-glow-cyan, .btn-outline-matte { width: 100%; justify-content: center; }
    .inc-grid-system { grid-template-columns: 1fr; }
    .bhk-pricing-grid { grid-template-columns: 1fr; }
    .bhk-comparison-table th, .bhk-comparison-table td { padding: 12px; font-size: 0.85rem; }
    .modal-buttons-grid { grid-template-columns: 1fr; }
}