/* =========================================
   1. VARIABLES & RESET
   ========================================= */
.menu-toggle { display: none; }
:root {
    /* --- Brand Colors: Neon Nature --- */
    --primary: #00ff88;
    --primary-dark: #00cc6a;
    --accent: #00E5FF;
    
    /* --- Dark Luxury Palette --- */
    --bg-dark: #050d0a;       /* Deepest Jungle Dark */
    --bg-panel: #0f1c16;      /* Lighter Panel Background */
    --text-main: #e0e6e3;     /* Off-white text */
    --text-muted: #94a39b;    /* Muted Moss Gray */
    
    /* --- Glassmorphism Effects --- */
    --glass-box-gradient: linear-gradient(180deg, rgba(20, 30, 25, 0.9) 0%, rgba(10, 20, 15, 0.7) 100%);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-blur: 16px;
    
    /* --- Dimensions --- */
    --radius: 16px;
    --container: 1400px;
}

/* Enforce smooth scrolling globally */
html { 
    overflow-x: hidden; 
    scroll-behavior: smooth !important; 
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden; /* Prevents horizontal scrollbar */
}

/* Prevent scrolling when splash screen or modal is open */
body.splash-active, body.modal-open { overflow: hidden; }

/* Global Image & Video Resets */
img, video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--radius); }
a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; }

/* =========================================
   2. TYPOGRAPHY & UTILITIES
   ========================================= */
h1, h2, h3, h4 { font-weight: 700; line-height: 1.2; color: white; margin-bottom: 15px; }

/* Neon Text Highlights */
h2 span.text-primary, h1 span.text-primary, .highlight-text font { 
    color: var(--primary); 
    text-shadow: 0 0 25px rgba(0, 255, 136, 0.25); 
}

.container { max-width: var(--container); margin: 0 auto; padding: 0 30px; position: relative; }
.text-center { text-align: center; }
.section-padding { padding: 40px 0; }

/* --- Primary Button (Liquid Gradient) --- */
.btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: linear-gradient(135deg, var(--primary) 0%, #00C6FF 100%); 
    color: #003829;
    padding: 14px 32px; border-radius: 50px; font-weight: 700;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.15); border: none; cursor: pointer;
    transition: all 0.3s ease;
    background-size: 200% auto; 
}
.btn-primary:hover {
    background-position: right center; 
    transform: translateY(-2px);
    box-shadow: 0 5px 25px rgba(0, 198, 255, 0.3);
}

/* --- Animations --- */
.animate-up { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.animate-up.visible { opacity: 1; transform: translateY(0); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* =========================================
   3. GLOBAL COMPONENTS
   ========================================= */
/* --- FIX: GLOBAL MODAL STYLES (Hide by default on Desktop) --- */
.custom-modal {
    display: none; /* Hidden by default everywhere */
    position: fixed;
    z-index: 20000; /* High z-index to sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    backdrop-filter: blur(5px);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* When Javascript adds 'show', make it visible */
.custom-modal.show {
    display: flex;
    opacity: 1;
}

/* Ensure the box inside looks good on desktop too */
.custom-modal .modal-content {
    background: #141917; /* Dark background */
    width: 400px;         /* Fixed width for desktop/tablet */
    max-width: 90%;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    display: flex;        /* Ensure content flows correctly */
    flex-direction: column;
}

/* --- Splash Screen --- */
#splash-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #000; z-index: 9999;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    transition: transform 0.8s cubic-bezier(0.8, 0, 0.2, 1);
}
#splash-screen.slide-up { transform: translateY(-100%); }
.splash-content { margin-left: 30%; position: relative; z-index: 2; text-align: center; width:40%;}
.splash-logo img { height: 120px; width: auto; }
.splash-tagline { font-size: 1.5rem; margin-bottom: 10px; color: var(--text-main); }
/* Enter Button */
#enter-btn {
    background: rgba(0, 229, 255, 0.05); border: 1px solid #00E5FF; color: #00E5FF;
    padding: 18px 45px; border-radius: 20px; font-size: 1.1rem; font-weight: 600;
    text-transform: uppercase; display: inline-flex; align-items: center; gap: 15px; margin-top: 40px;
    cursor: pointer; transition: all 0.4s; position: relative; z-index: 10;
}
#enter-btn:hover { box-shadow: 0 10px 40px rgba(0, 255, 136, 0.4); }

/* --- Navigation Header --- */
header { position: absolute; top: 0; left: 0; width: 100%; z-index: 10; padding: 25px 0; }
.nav-inner { display: flex; justify-content: space-between; align-items: center; }
.logo img { width: auto; height: 90px; }
.nav-links { display: flex; gap: 40px; }
.nav-links a { color: var(--text-muted); font-size: 0.95rem; font-weight: 500; position: relative; }
.nav-links a:hover { color: var(--primary); }

/* --- Footer --- */
footer { border-top: 1px solid #333; padding-top: 50px; background: #020504; color: var(--text-muted); }
.footer-desc {
    margin-top: 25px; /* Adds space between logo and text */
    display: block;
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 60px; padding-bottom: 60px; border-bottom: 1px solid rgba(255,255,255,0.05); }

/* ALIGNMENT FIX: Negative margins remove the visual gap on Top & Left */
.footer-logo { 
    margin-top: -15px;  /* Pulls logo UP to sit flush with 'Quick Links' */
    margin-left: -10px; /* Pulls logo LEFT to align perfectly with the edge */
}
.footer-logo img { height: 140px; width: auto; }

.footer-links li { margin-bottom: 15px; }
.footer-links a:hover { color: var(--primary); padding-left: 5px; }
.footer-bottom { padding: 30px 0; display: flex; justify-content: flex-start; align-items: center; font-size: 0.85rem; }
.legal-links { display: flex; align-items: center; gap: 15px; }

/* --- Floating Social Sidebar --- */
.social-sidebar {
    position: fixed; right: 0; top: 50%; transform: translateY(-50%);
    display: flex; flex-direction: column; background: rgba(15, 28, 22, 0.85);
    backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border);
    border-right: none; border-radius: 12px 0 0 12px; z-index: 9998; padding: 12px 10px;
}
.sidebar-icon { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin: 6px 0; border-radius: 10px; color: white; }
.sidebar-icon.yt:hover { background: #FF0000; }
.sidebar-icon.ig:hover { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.sidebar-icon.wa:hover { background: #25D366; }

/* =========================================
   4. PAGE SECTIONS
   ========================================= */

/* --- Hero Section --- */
.hero { 
    position: relative; 
    min-height: 100vh; 
    display: flex; 
    align-items: center; 
    padding: 100px 0; 
    overflow: hidden; 
}

/* RESTORED: This makes the video background visible again */
.hero-bg-video { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    z-index: 0; 
    opacity: 0.6; /* Adjust transparency here if needed */
}

.hero-glass-box {
    background: var(--glass-box-gradient); 
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border); 
    border-radius: 30px;
    padding: 50px; 
    max-width: 1100px; 
    margin: 0 auto; 
    text-align: center;
    position: relative; 
    z-index: 2; 
    box-shadow: 0 30px 60px rgba(0,0,0,0.5);
    opacity: 0; 
    transform: scale(0.95); 
    transition: opacity 1s ease 0.5s, transform 1s ease 0.5s;
}
.hero-glass-box.revealed { opacity: 1; transform: scale(1); }

.hero h1 { 
    font-size: 3.5rem; 
    margin-bottom: 25px; 
    line-height: 1.1; 
    margin-top: 40px;
    text-align: center; /* CENTERED as requested */
}

/* FIX: Limits text width on PC so it doesn't stretch */
.hero-glass-box p, .hero-sub {
    max-width: 650px !important; 
    width: 90%;             
    margin-left: auto;      
    margin-right: auto;
    margin-bottom: 45px;    
    display: block;
    line-height: 1.6;
    position: relative; 
    z-index: 10;
}

/* Comparison Cards (Traditional vs Natural) */
.comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.comp-card { background: rgba(255, 255, 255, 0.03); border-radius: 20px; padding: 30px; position: relative; overflow: hidden; }
.comp-card.traditional { border-color: rgba(255, 82, 82, 0.3); }
.comp-card.natural { border-color: rgba(0, 255, 136, 0.3); }
.comp-img-wrapper { height: 200px; border-radius: 12px; overflow: hidden; margin-bottom: 20px; }
.comp-list li { margin-bottom: 10px; display: flex; gap: 10px; font-size: 0.9rem; color: var(--text-muted); }
.comp-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(10, 20, 15, 0.95); backdrop-filter: blur(15px); padding: 30px;
    opacity: 0; transform: translateY(20px); transition: all 0.4s; pointer-events: none; z-index: 20;
}
.comp-card:hover .comp-overlay { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* --- Why Switch Section --- */
.why-switch { background-color: var(--bg-panel); }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 60px; }
.feature-card { background: #09110e; padding: 40px 30px; border-radius: 24px; border: 1px solid rgba(255,255,255,0.05); text-align: center; transition: 0.4s; }
.feature-card p {
    margin-top: 25px; 
    color: var(--text-muted); /* Ensures text is readable/grey */
    font-size: 0.95rem;
}
.feature-card:hover { transform: translateY(-10px); border-color: var(--primary); }
.icon-box { width: 60px; height: 60px; margin: 0 auto 20px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.bg-red { background: rgba(239, 68, 68, 0.2); color: #f87171; }
.bg-green { background: rgba(0, 255, 136, 0.1); color: var(--primary); }

/* --- How It Works (Tabs) --- */
.tabs-nav { display: flex; justify-content: center; gap: 15px; margin-bottom: 40px; flex-wrap: wrap; }
.tab-btn {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.15) 0%, rgba(0, 198, 255, 0.15) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text-muted); padding: 15px 30px; border-radius: 12px; 
    cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 10px;
}
.tab-btn.active {
    background: linear-gradient(135deg, var(--primary) 0%, #00C6FF 100%);
    color: #003829; font-weight: 700; transform: translateY(-2px);
}
.tab-content {
    background: #09110e; padding: 50px; border-radius: 30px; border: 1px solid rgba(255,255,255,0.05);
    display: none; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center;
}
.tab-content.active { display: grid; animation: fadeIn 0.5s; }

/* --- Expert Section --- */
.choose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }

/* Ensures the icon sits to the left of the text, not centered */
.tab-header-row { 
    display: flex; 
    align-items: center; 
    gap: 20px; 
    margin-bottom: 20px; 
}

.tab-header-row .icon-box { 
    margin: 0; /* Overrides the 'auto' centering margin */
}

/* =========================================
   5. COMPLEX MODULES
   ========================================= */

/* --- Portfolio Grid --- */
.portfolio-wrapper { position: relative; max-width: var(--container); margin: 0 auto; }
.infinite-portfolio-window {
    height: 850px; overflow-y: scroll; position: relative; padding-right: 10px;
}
.portfolio-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); 
    grid-auto-rows: 300px; grid-auto-flow: dense; gap: 20px; padding: 20px;
}
.port-item { position: relative; border-radius: 20px; overflow: hidden; cursor: pointer; width: 100%; height: 100%; }
.port-item img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.port-item:hover img { transform: scale(1.05); }


	/* This tells the browser to actually hide the items when the button is clicked */
	.port-item.hide {
		display: none !important;
	}


/* Grid Spans */
.w-25  { grid-column: span 1; }
.w-50  { grid-column: span 2; }
.w-75  { grid-column: span 3; }
.w-100 { grid-column: span 4; }
.h-std { grid-row: span 1; }
.h-dbl { grid-row: span 2; }

/* Portfolio Hover Overlay */
.port-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.95), rgba(0,0,0,0.2), transparent);
    padding: 30px; display: flex; flex-direction: column; justify-content: flex-end;
    opacity: 0; transition: 0.3s;
}
.port-item:hover .port-overlay { opacity: 1; }

/* --- Contact Section --- */
.contact-wrapper {
    background: var(--bg-panel); border: 1px solid rgba(255,255,255,0.05);
    border-radius: 24px; overflow: hidden; display: grid; grid-template-columns: 2fr 3fr;
}
.contact-visual { background: url('images/contact.jpg') center/cover; position: relative; display: flex; align-items: flex-end; }
.contact-visual::before { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #000, transparent); }
.contact-quote { position: relative; z-index: 2; font-size: 2rem; font-weight: 700; color: white; padding: 40px; }
.contact-form-side { padding: 60px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.form-control {
    width: 100%; padding: 15px; background: #000; border: 1px solid #333;
    border-radius: 10px; color: white; transition: 0.3s;
}

/* --- Project Modal (REPAIRED) --- */
.modal {
    display: none; 
    position: fixed; 
    inset: 0; 
    
    /* UPDATED: Max Z-Index to beat the Filter Buttons (2,000,000) */
    z-index: 2147483647 !important; 
    
    background: rgba(0,0,0,0.95); 
    backdrop-filter: blur(10px);
    align-items: center; 
    justify-content: center; 
    opacity: 0; 
    transition: 0.3s;
}
.modal.show { display: flex; opacity: 1; } /* Added display:flex to center it */

.modal-content {
    background: var(--bg-panel); 
    width: 90%; max-width: 1100px; height: 85vh; /* Fixed height is crucial */
    border-radius: 20px; 
    border: 1px solid rgba(255,255,255,0.1);
    
    /* Desktop Layout: Side-by-Side */
    display: grid; 
    grid-template-columns: 1.5fr 1fr; /* Image gets more space */
    grid-template-rows: 100%; /* Full height */
    
    overflow: hidden; 
    transform: scale(0.95); transition: 0.3s;
    position: relative;
    box-shadow: 0 50px 100px rgba(0,0,0,0.8);
}
.modal.show .modal-content { transform: scale(1); }

/* --- The Media Side (Left) --- */
.modal-img { 
    width: 100%; 
    height: 100%; 
    background: #000; 
    position: relative; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    overflow: hidden;
}

.modal-img img, .modal-img video { 
    width: 100%; 
    height: 100%; 
    /* The !important forces it to override the HTML inline settings */
    object-fit: contain !important; 
    display: block;
}

/* --- The Details Side (Right) --- */
.modal-details { 
    padding: 40px; 
    overflow-y: auto; /* Internal scroll for text only */
    display: flex; flex-direction: column;
}
.modal-title { font-size: 2rem; margin-bottom: 10px; line-height: 1.1; }
.modal-cat { color: var(--primary); font-size: 0.8rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; display: block;}
.modal-desc { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 20px; }

.close-modal { 
    position: absolute; top: 20px; right: 20px; 
    font-size: 1.5rem; cursor: pointer; color: white; z-index: 10; 
    background: rgba(0,0,0,0.5); width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: 0.3s;
}
.close-modal:hover { background: var(--primary); color: black; }

.modal-meta { 
    margin-top: auto; /* Pushes to bottom */
    border-top: 1px solid rgba(255,255,255,0.1); 
    padding-top: 20px; 
    display: flex; gap: 30px; 
}
.meta-item strong { display: block; font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; }
.meta-item span { color: white; font-weight: 600; }

/* --- Fix: Modal Footer (Stacked Layout) --- */
.modal-footer-row {
    margin-top: 30px;
    display: flex;
    flex-direction: column; /* Forces the location to a new line */
    gap: 15px;              /* Space between button and location */
    width: 100%;
}

.modal-footer-row .btn-primary {
    width: 100%;            /* Makes the button span the full width */
    justify-content: center;
    white-space: nowrap;
    padding: 15px 30px;
}

.location-tag { 
    align-self: flex-end;   /* Forces the text to the RIGHT */
    text-align: right;
    
    /* Styling */
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #ffffff;
    text-transform: uppercase;
    opacity: 0.9;
}

/* =========================================
   5A. SPECIAL UI ELEMENTS
   ========================================= */

/* --- 3D Ribbon Link (Big Glass Style) --- */
.ribbon-3d {
    position: absolute; top: 25px; right: -8px; 
    background: linear-gradient(90deg, rgba(0, 229, 255, 0.9) 0%, rgba(0, 229, 255, 0.2) 20%, rgba(41, 98, 255, 0.2) 80%, rgba(41, 98, 255, 0.95) 100%);
    backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.5); border-right: none;
    border-radius: 60px 0 0 60px; padding: 12px 15px 12px 20px; 
    color: white; font-weight: 800; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1.5px;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.8);
    box-shadow: -8px 8px 25px rgba(0,0,0,0.5), inset 0 2px 1px rgba(255,255,255,0.7);
    z-index: 20; transition: all 0.3s ease;
}
.ribbon-3d::after {
    content: ''; position: absolute; bottom: -8px; right: 0; width: 0; height: 0;
    border-top: 8px solid #00154a; border-right: 8px solid transparent; z-index: -1; 
}

.ribbon-3d:hover {
    /* Gradient starts Green but turns Blue much faster (at 40%) */
    background: linear-gradient(90deg, #00ff88 0%, #00e5ff 50%, #2962ff 100%);
    transform: translateX(-5px) scale(1.02);
    box-shadow: -5px 8px 25px rgba(0, 229, 255, 0.4); /* Blue-ish glow */
}

/* --- Trust Badges & Stamps --- */
.trust-badge { display: block; height: auto; transition: all 0.4s ease; mix-blend-mode: multiply; opacity: 0.9; }
.trust-badge:hover { transform: scale(1.05) rotate(2deg); opacity: 1; }
.hero-stamp-wrapper {
    position: absolute; bottom: 40px; right: 100px; z-index: 10;
    animation: stampDrop 1s ease-out forwards; opacity: 0; transform: scale(1.5) rotate(-15deg);
}
.hero-stamp { width: 150px; mix-blend-mode: normal; filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.3)); }

@keyframes stampDrop { to { opacity: 1; transform: scale(1) rotate(-5deg); } }

/* --- Chatbot UI --- */
.sb-msg-bubble {
    background: rgba(255, 255, 255, 0.06) !important; padding: 12px 16px !important;
    border-radius: 0 15px 15px 15px !important; font-size: 0.85rem !important;
    color: #e0e6e3 !important; max-width: 85% !important; line-height: 1.4 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important; display: block !important; margin-bottom: 5px !important;
}
.sb-btn-option {
    background: rgba(0, 255, 136, 0.05) !important; border: 1px solid rgba(0, 255, 136, 0.3) !important;
    color: white !important; padding: 10px 15px !important; border-radius: 10px !important;
    cursor: pointer !important; font-size: 0.85rem !important; width: 100% !important;
    display: block !important; margin-bottom: 8px !important; transition: 0.3s !important;
}
.sb-btn-option:hover { background: #00ff88 !important; color: #003829 !important; }

/* =========================================
   5B. DEEP DETAILS (MODAL & LOGS)
   ========================================= */

/* --- Status Bar (Top Half of the Box) --- */
.status-bar-wrapper {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Subtle divider */
    
    /* Rounded Top ONLY */
    border-radius: 16px 16px 0 0;
    
    padding: 18px 25px;
    display: flex;
    align-items: center; 
    gap: 15px;           
    margin-top: 25px;
    margin-bottom: 0 !important; /* GLUE TO ACCORDION BELOW */
}

#m-status-text {
    font-weight: 700;    
    font-size: 0.95rem;
    color: #ffffff;      
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1;      
    padding-top: 2px;    
}

/* --- Status Pulse Dots --- */
.pulse-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.pulse-dot.green { background: #00ff88; box-shadow: 0 0 0 rgba(0, 255, 136, 0.4); animation: pulse-green 2s infinite; }
.pulse-dot.yellow { background: #ffeb3b; box-shadow: 0 0 0 rgba(255, 235, 59, 0.4); animation: pulse-yellow 2s infinite; }
.pulse-dot.white { background: #ffffff; box-shadow: 0 0 0 rgba(255, 255, 255, 0.4); animation: pulse-white 2s infinite; }

@keyframes pulse-green { 0% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(0, 255, 136, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0); } }
@keyframes pulse-yellow { 0% { box-shadow: 0 0 0 0 rgba(255, 235, 59, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(255, 235, 59, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 235, 59, 0); } }
@keyframes pulse-white { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }

/* --- System Logs (Modal Internal) --- */
.sys-log { display: flex; flex-direction: column; gap: 25px; font-size: 0.9rem; }
.sys-header { font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase; color: #fff; margin-bottom: 15px; font-weight: 700; opacity: 0.8; }
.sys-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; background: rgba(255,255,255,0.03); padding: 20px; border-radius: 12px; }
.sys-item { display: flex; align-items: center; gap: 10px; color: #ccc; }

/* Timeline */
.timeline { position: relative; padding-left: 20px; border-left: 2px solid rgba(255,255,255,0.1); margin-left: 10px; }
.tl-item { position: relative; margin-bottom: 20px; padding-left: 15px; }
.tl-item::before { content: ''; position: absolute; left: -26px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: #333; border: 2px solid #000; }
.tl-item.active::before { background: var(--primary); }
.tl-row { display: flex; gap: 20px; align-items: flex-start; }
.tl-date { color: var(--text-muted); font-size: 0.85rem; min-width: 50px; }
.tl-sub { display: block; font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }

/* --- Accordion in Modal (Bottom Half of the Box) --- */
/* Remove gap between this and the status bar above */
#modal-acc-wrapper { margin-top: 0 !important; }

.modal-acc-item { 
    background: rgba(255, 255, 255, 0.03); 
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: none; /* Removed top border to merge with status bar */
    
    /* Rounded Bottom ONLY */
    border-radius: 0 0 16px 16px; 
    
    overflow: hidden; 
}
.modal-acc-btn { 
    width: 100%; 
    padding: 18px 25px; /* Match padding of status bar */
    background: transparent; 
    border: none; 
    color: var(--text-main); 
    font-size: 1rem; 
    font-weight: 600; 
    text-align: left; 
    cursor: pointer; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.accordion-body { padding: 0 25px 25px; font-size: 0.95rem; color: var(--text-muted); }

/* --- Real Project Teaser (Portfolio Top) --- */
.real-project-teaser {
    background: linear-gradient(145deg, rgba(255,255,255,0.03) 0%, rgba(0,56,41,0.4) 100%);
    border: 1px solid rgba(0, 255, 136, 0.2); border-radius: 20px; padding: 40px;
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 50px; align-items: center;
    position: relative; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.3); margin-bottom: 80px;
}
.teaser-badge { display: inline-flex; align-items: center; gap: 10px; background: var(--primary); color: #003829; padding: 8px 20px; border-radius: 50px; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; margin-bottom: 25px; }
.teaser-video-wrapper { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.15); aspect-ratio: 16/9; }

.teaser-meta {
    margin-top: 35px; /* Adds breathing room above Place/Time */
    border-top: 1px solid rgba(255,255,255,0.1); /* Optional: adds a nice separator line */
    padding-top: 20px;
}

/* "In Process" Overlay */
.process-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; opacity: 0; pointer-events: none; width: 100%; text-align: center; transition: opacity 0.3s ease; }
.process-label span { display: inline-block; font-size: 1.5rem; font-weight: 800; color: #ffffff; text-transform: uppercase; letter-spacing: 4px; border: 2px solid rgba(255, 255, 255, 0.8); padding: 15px 25px; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); }
.port-item.fallback-active .process-label { opacity: 1; }
.port-item.fallback-active img { filter: sepia(10%) hue-rotate(80deg) contrast(1.1) brightness(0.9); opacity: 0.5; }

/* =========================================
   5C. SPECIFIC PAGE STYLES
   ========================================= */

/* --- Common Text Page Heroes --- */
.terms-hero, .privacy-hero, .faq-hero { padding: 180px 0 80px; text-align: center; }
.terms-title, .privacy-title, .faq-title { font-size: 3.5rem; font-weight: 700; color: white; margin-bottom: 10px; }
.terms-sub, .privacy-sub, .faq-sub { font-size: 1.1rem; text-transform: uppercase; letter-spacing: 2px; }

.terms-hero { background: radial-gradient(circle at top center, rgba(0, 255, 136, 0.05), transparent 60%); }
.terms-sub { color: var(--primary); }
.privacy-hero { background: radial-gradient(circle at top center, rgba(0, 229, 255, 0.05), transparent 60%); }
.privacy-sub { color: var(--accent); }
.faq-hero { background: radial-gradient(circle at top center, rgba(0, 255, 136, 0.08), transparent 60%); }
.faq-sub { color: var(--primary); }

/* --- Terms & FAQ Content Boxes --- */
.terms-content-box, .privacy-content-box, .faq-container {
    max-width: 900px; margin: 0 auto 100px; background: var(--bg-panel);
    border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 20px; padding: 60px;
}
.accordion-item { background: var(--bg-panel); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 16px; margin-bottom: 15px; overflow: hidden; transition: all 0.3s ease; }
.accordion-item.active { border-color: var(--primary); background: #0a1410; }
.accordion-btn { width: 100%; padding: 25px 30px; background: transparent; border: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; color: white; font-size: 1.1rem; font-weight: 600; }
.accordion-item.active .accordion-icon { transform: rotate(180deg); color: var(--primary); }

/* --- Built Around Life (Manifesto Page) --- */
.bh-hero { height: 60vh; display: flex; align-items: center; justify-content: center; position: relative; margin-bottom: 50px; overflow: hidden; background: #000; }
.bh-title-large { font-size: 8vw; font-weight: 800; line-height: 0.9; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.4); opacity: 0; animation: fadeInSlow 1.5s ease forwards 0.2s; }
.bh-subtitle { font-size: 1.5rem; color: var(--primary); letter-spacing: 4px; text-transform: uppercase; margin-top: 20px; opacity: 0; animation: slideUp 1s ease forwards 0.8s; }
.manifesto-box { max-width: 900px; margin: 0 auto; text-align: center; padding: 80px 20px; border-top: 1px solid rgba(0, 255, 136, 0.2); border-bottom: 1px solid rgba(0, 255, 136, 0.2); background: linear-gradient(180deg, transparent 0%, rgba(0,255,136,0.02) 50%, transparent 100%); }
.manifesto-text { font-size: 1.8rem; font-weight: 300; color: white; line-height: 1.6; }
.bh-row { display: grid; grid-template-columns: 1fr 1fr; min-height: 70vh; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.05); }
.bh-content { padding: 60px 80px; }
.bh-visual { height: 100%; min-height: 60vh; position: relative; overflow: hidden; }
.viz-quote { font-size: 3.5rem; font-weight: 700; line-height: 1.1; color: #1a2e26; -webkit-text-stroke: 1px rgba(255,255,255,0.2); margin: 40px 0; }
.viz-quote span { color: white; -webkit-text-stroke: 0; text-shadow: 0 0 20px rgba(255,255,255,0.5); }

@keyframes fadeInSlow { to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* =========================================
   5D. MISSING LUXURY DETAILS (POLISH)
   ========================================= */

/* --- 1. The "Logo Story" Popup (Hover Card) --- */
/* This is the black card that appears when hovering the logo */
.logo-wrapper { position: relative; display: inline-block; z-index: 99999; cursor: help; }
.logo-wrapper:hover .logo-img { transform: scale(1.05) translateY(-2px); transition: transform 0.4s ease; }

.hover-card {
    position: absolute; top: 100%; left: 0; width: 340px; margin-top: 20px;
    background: #020504; border: 1px solid rgba(255, 255, 255, 0.1); border-left: 3px solid #00d170;
    padding: 25px 30px; border-radius: 0 16px 16px 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.9);
    opacity: 0; visibility: hidden; transform: translateY(15px); transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none; z-index: 100000;
}
.logo-wrapper:hover .hover-card { opacity: 1; visibility: visible; transform: translateY(0); }
.hover-card p {
    font-family: 'Georgia', serif; color: #c0c8c5; font-size: 1rem; line-height: 1.8;
    font-style: italic; margin: 0; text-align: left;
}
.hover-card strong { font-family: 'Poppins', sans-serif; font-weight: 700; color: #e0e6e3; }
.hover-card big { color: #00d170; font-size: 1.1em; text-transform: uppercase; letter-spacing: 2px; }

/* Footer variation for the popup */
footer .hover-card { top: auto; bottom: 100%; margin-bottom: 20px; margin-top: 0; border-radius: 16px 16px 16px 0; }


/* --- 2. Splash Screen Corner Button --- */
/* The "Built Around Life" button in the top right */
.splash-corner-btn {
    background: linear-gradient(90deg, #00ff88 0%, #00e5ff 100%);
    backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 10px 25px; border-radius: 50px; display: inline-block;
    color: #003829; font-weight: 700; font-size: 0.95rem; text-transform: uppercase;
    letter-spacing: 1px; cursor: pointer; z-index: 99999;
    box-shadow: 0 0 25px rgba(0, 229, 255, 0.6); transition: all 0.3s ease;
}
.splash-corner-btn:hover {
    transform: translateY(-3px) scale(1.05); color: white;
    background: linear-gradient(90deg, rgba(0, 229, 255, 0.8) 0%, rgba(41, 98, 255, 0.9) 100%);
}

/* --- 3. Portfolio Play Buttons (Glass Style) --- */
.play-indicator {
    position: absolute; bottom: 10px; right: 10px; z-index: 20;
    display: flex; align-items: center; justify-content: center; border-radius: 50%;
    pointer-events: none; transition: all 0.3s ease;
}
.play-style-glass {
    width: 40px; height: 40px; background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, 0.3);
    color: white; font-size: 0.8rem; box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.port-item:hover .play-style-glass { background: rgba(255, 255, 255, 0.2); transform: scale(1.1); border-color: white; }

/* --- 4. Navigation Arrows (Scroll Down & Back to Top) --- */
.scroll-indicator, .global-top-btn, .move-to-top-btn {
    width: 60px; height: 60px; border-radius: 50%;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(8px);
    border: 2px solid rgba(255,255,255,0.2); color: white;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Scroll Down Specifics */
.scroll-indicator {
    position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
    /* CRITICAL FIX: Must be higher than Filter Buttons (2,000,000) */
    z-index: 3000000 !important;
    opacity: 0; pointer-events: none;
    cursor: pointer;
    transition: all 0.3s ease;
}
.scroll-indicator.visible { 
    opacity: 1 !important; 
    pointer-events: auto !important; /* KEY: Enables clicking */
}
.scroll-indicator:hover { 
    transform: translateX(-50%) scale(1.1); 
    border-color: var(--primary); 
    color: var(--primary); 
}

/* Back to Top Specifics */
.global-top-btn {
    position: fixed; bottom: 30px; right: 30px; z-index: 1001;
    opacity: 0; transform: translateY(20px); pointer-events: none; width: 50px; height: 50px;
}
.global-top-btn.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.global-top-btn:hover { transform: translateY(-3px) scale(1.1); border-color: var(--primary); color: var(--primary); }

/* Portfolio Internal Up Button */
.move-to-top-btn { position: absolute; bottom: 30px; right: 30px; z-index: 10; width: 50px; height: 50px; }
.move-to-top-btn:hover { transform: translateY(-3px) scale(1.1); border-color: var(--primary); color: var(--primary); }


/* --- 5. Hero Pointer Bounce Animation --- */
/* For the "Click to explore" hand icon */
@keyframes pointerBounce { 
    0%, 100% { transform: translateY(0) rotate(-15deg); } 
    50% { transform: translateY(-5px) rotate(-15deg); } 
}


/* =========================================
   5E. MISSING CONTENT MODULES
   ========================================= */

/* --- 1. Portfolio Filter Buttons (GLOBAL FIX - PC/TABLET) --- */
.filter-btns { 
    display: flex; 
    justify-content: center; 
    gap: 15px; 
    margin-bottom: 50px; 
    flex-wrap: wrap; 
    
    /* FIX: Z-Index 2 Million beats Chat Widget (999,999) */
    position: relative !important; 
    z-index: 2000000 !important; 
    pointer-events: auto !important;
    width: 100%;
}

.filter-btn {
    background: transparent; 
    border: 1px solid rgba(255,255,255,0.1); 
    color: var(--text-muted);
    padding: 10px 25px; 
    border-radius: 50px; 
    cursor: pointer; 
    transition: 0.3s;
    
    /* FIX: Button specific layering */
    position: relative !important;
    z-index: 2000001 !important; 
    pointer-events: auto !important;
}

.filter-btn.active, .filter-btn:hover { 
    border-color: var(--primary); 
    color: var(--primary); 
    background: rgba(0, 255, 136, 0.05); 
}

/* --- 2. Custom Scrollbar for Infinite Window --- */
.infinite-portfolio-window::-webkit-scrollbar { width: 8px; }
.infinite-portfolio-window::-webkit-scrollbar-track { background: #111; border-radius: 4px; }
.infinite-portfolio-window::-webkit-scrollbar-thumb { background: var(--primary-dark); border-radius: 4px; }
.infinite-portfolio-window::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* --- 3. Studio Note (How It Works) --- */
.studio-note { 
    background: rgba(0, 255, 136, 0.03); border: 1px solid rgba(0, 255, 136, 0.1); 
    padding: 30px; border-radius: 15px; margin-top: 30px; display: flex; gap: 20px; align-items: start; 
}
.studio-icon { background: var(--primary); color: black; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.studio-text h4 { color: white; margin-bottom: 5px; font-size: 1rem; }
.studio-text p { color: var(--text-muted); font-size: 0.9rem; margin: 0; }

/* --- 4. Expert Section Grid --- */
.choose-img-stack { position: relative; }
.choose-img-stack img { border: 1px solid rgba(255,255,255,0.1); }
.choose-feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; }
.small-feat { 
    background: #121f1a; padding: 20px; border-radius: 12px; 
    border: 1px solid rgba(255,255,255,0.05); transition: 0.3s;
}
.small-feat:hover { transform: translateY(-5px); border-color: var(--primary); }
.small-feat i { font-size: 1.5rem; color: var(--primary); margin-bottom: 10px; }
.small-feat h4 { font-size: 0.9rem; color: white; margin-bottom: 5px; }
.small-feat p { font-size: 0.75rem; color: var(--text-muted); margin: 0; }

/* --- 5. Check List Style (How It Works) --- */
.check-list li { margin-bottom: 15px; display: flex; gap: 12px; color: var(--text-muted); align-items: center; }
.check-list i { color: var(--primary); }

/* --- 6. Form Enhancements (Dropdown Arrow & 3-Col Layout) --- */
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-bottom: 20px; }
/* Custom SVG Dropdown Arrow */
select.form-control { 
    appearance: none; 
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2300ff88%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"); 
    background-repeat: no-repeat; 
    background-position: right 1rem top 50%; 
    background-size: 0.65em auto; 
}
.form-control:focus { outline: none; border-color: var(--primary); background: #08100c; }

/* --- 7. Footer Specifics --- */
.separator { color: rgba(255, 255, 255, 0.2); font-weight: 300; pointer-events: none; }
.legal-item { cursor: pointer; transition: color 0.3s ease; color: var(--text-muted); }
.legal-item:hover { color: var(--primary); }

/* =========================================
   5F. FINAL MISSING PIECES (GRANULAR DETAILS)
   ========================================= */

/* --- 1. Nav Link Animated Underline --- */
/* This creates the green line that slides under menu items on hover */
.nav-links a::after {
    content: ''; position: absolute; width: 0; height: 2px;
    bottom: -5px; left: 0; background-color: var(--primary);
    transition: width 0.3s ease;
}
.nav-links a:hover::after { width: 100%; }

/* --- 2. Comparison Card Header --- */
/* Styles the "Traditional" vs "Natural" titles inside the cards */
.comp-header { 
    margin-bottom: 15px; font-weight: 700; display: flex; 
    align-items: center; gap: 10px; font-size: 1.1rem;
}
.comp-card.traditional .comp-header { color: #ff5252; }
.comp-card.natural .comp-header { color: var(--primary); }

/* --- 3. Process Blueprint (How It Works) --- */
/* Centers the diagram image and text */
.process-blueprint { 
    text-align: center; margin-bottom: 50px; max-width: 800px; 
    margin-left: auto; margin-right: auto; 
}
.process-blueprint img { 
    width: 100%; max-width: 700px; display: inline-block; height: auto; 
    border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); 
    border: 1px solid rgba(255,255,255,0.1); 
}

/* --- 4. Portfolio Category Tag --- */
/* The small green text (e.g., "COMMERCIAL") above project titles */
.port-cat { 
    color: var(--primary); font-size: 0.8rem; text-transform: uppercase; 
    font-weight: 700; letter-spacing: 1px; margin-bottom: 5px; display: block; 
}

/* --- 5. Footer Extras --- */
.readdy-badge { color: var(--text-muted); opacity: 0.8; }
.footer-left-group { display: flex; flex-wrap: wrap; align-items: center; gap: 30px; }


/* =========================================
   5G. FINAL AUDIT PATCH (MISSED ITEMS)
   ========================================= */

/* --- 1. Quote Boxes (Why Switch Section) --- */
/* The red and green boxes inside the feature cards */
.quote-box { 
    background: rgba(190, 18, 60, 0.1); border-left: 3px solid #f43f5e; 
    padding: 15px; margin-top: 20px; font-size: 0.85rem; color: #fda4af; 
    text-align: left; font-style: italic; 
}
.quote-box.green { 
    background: rgba(5, 150, 105, 0.1); border-color: var(--primary); color: #6ee7b7; 
}

/* --- 2. Splash Screen Video Positioning --- */
/* Ensures the background video sits correctly behind the logo */
.splash-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0.6; z-index: 0;
}

/* --- 3. Hide Sidebar on Splash --- */
/* Critical: Prevents social icons from appearing over the splash screen */
body.splash-active .social-sidebar {
    opacity: 0; pointer-events: none; right: -70px;
}
body.splash-active #sb-root { display: none !important; }

/* --- 4. Global Scrollbar Styling (Optional Polish) --- */
/* Matches the portfolio scrollbar for the whole page */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #050d0a; }
::-webkit-scrollbar-thumb { background: #1f3a2e; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }


/* =========================================
   FIXED CALLBACK MODAL STYLES (SCOPED)
   ========================================= */

/* Modal Overlay (Background) */
#callbackModal.modal-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 2000000; /* Very high z-index */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    align-items: center;
    justify-content: center;
}

/* Modal Box - SCOPED to prevent breaking Portfolio */
#callbackModal .modal-content {
    background-color: #141917; /* Matches your theme */
    padding: 40px 30px;
    border-radius: 20px;
    width: 90%;
    max-width: 400px;
    position: relative;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    
    /* Reset properties that might bleed from portfolio */
    display: block; 
    height: auto;
    grid-template-columns: none;
    transform: none;
}

/* Modal Text */
#callbackModal .modal-content h3 {
    color: #fff;
    margin-bottom: 10px;
    font-size: 1.5rem;
}
#callbackModal .modal-content p {
    color: var(--text-muted);
    margin-bottom: 25px;
    font-size: 0.9rem;
}

/* Close Button (X) */
#callbackModal .close-modal {
    position: absolute;
    top: 15px;
    right: 15px;
    color: #aaa;
    font-size: 24px;
    cursor: pointer;
    background: transparent;
    width: auto; height: auto;
}
#callbackModal .close-modal:hover {
    color: var(--primary);
}

/* Form Inputs */
.callback-form input {
    width: 100%;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    background: rgba(0,0,0,0.3);
    color: #fff;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
.callback-form input:focus {
    outline: none;
    border-color: var(--primary);
    background: rgba(0,0,0,0.5);
}

/* Submit Button */
.callback-form button {
    width: 100%;
    padding: 15px;
    margin-top: 10px;
    cursor: pointer;
}

/* =========================================
   FOOTER BUTTON STYLES (MISSING)
   ========================================= */

.footer-buttons {
    display: flex;
    flex-direction: column; /* Stacks them vertically */
    gap: 12px;              /* Space between buttons */
    margin-top: 25px;       /* Distance from the text above */
    width: 100%;
    max-width: 280px;       /* Keeps them looking neat */
}

/* General Button Shape */
.cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 20px;
    border-radius: 12px;
    text-decoration: none !important;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
    width: 100%;
    cursor: pointer;
}

/* Icons inside buttons */
.cta-btn i {
    font-size: 1.1rem;
}

/* --- Style 1: Outlined Buttons (Email & Call Back) --- */
.btn-outline {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #94a39b; /* Muted text color */
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
    color: #ffffff;
    transform: translateY(-2px);
}

/* --- Style 2: Green Filled Button (WhatsApp) --- */
.btn-green {
    background: var(--primary); /* Neon Green */
    border: 1px solid var(--primary);
    color: #003829; /* Dark Green Text for contrast */
}

.btn-green:hover {
    background: #00cc6a; /* Slightly darker on hover */
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.4); /* Neon Glow */
    transform: translateY(-2px);
    color: #000;
}

/* Mobile Fix: Ensure they don't stretch too wide on phone */
@media screen and (max-width: 768px) {
    .footer-buttons {
        max-width: 100%; /* Full width on mobile */
    }
}

/* ===================================================================
   PART 5: RESPONSIVE TABLET / SMALL LAPTOP ENGINE (Max-Width: 1024px)
   =================================================================== */
@media screen and (max-width: 1024px) {

    /* --- 1. GLOBAL LAYOUT & SCALING --- */
    .container { 
        padding: 0 25px; /* Slightly tighter edges than desktop */
        max-width: 100%;
    }
    
    /* Scale down giant headings */
    .hero h1 { font-size: 3rem !important; }
    h2 { font-size: 2.2rem !important; }
    
    /* --- 2. HERO & GLASS BOX --- */
    .hero-glass-box {
        width: 90% !important; /* preventing edge touching */
        padding: 40px 30px;
    }
    
    /* Comparison Cards: Keep 2 columns but reduce gaps */
    .comparison-grid {
        gap: 20px;
    }
    .comp-card {
        padding: 20px;
    }

    /* --- 3. TABS & EXPERTISE --- */
    /* Keep Tabs horizontal but allow scrolling if screen gets too narrow */
    .tabs-nav {
        flex-wrap: wrap; 
        gap: 10px;
    }
    
    /* Expertise Grid: Keep 2 columns, but fix image sizes */
    .choose-grid {
        grid-template-columns: 1fr 1fr; 
        gap: 30px;
    }
    .choose-img-stack img {
        height: auto; /* Allow height to adjust naturally */
        max-height: 400px;
    }

    /* --- 4. PORTFOLIO GRID (The 2-Column Request) --- */
    .portfolio-grid { 
        display: grid;
        /* Force exactly 2 columns */
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 20px;
        padding: 0 10px; /* Safe space from screen edges */
    }
    
    /* SPANNING LOGIC FOR 2 COLUMNS */
    /* Large items (100%, 75%, 50%) span full width of the 2-col grid */
    .w-100, .w-75, .w-50 { 
        grid-column: span 2 !important; 
    }
    
    /* Small items (25%) take up 1 slot (half width) */
    .w-25 { 
        grid-column: span 1 !important; 
    }
    
    /* Adjust heights for tablet (Desktop is 300px, Mobile is 300px, Tablet can be same) */
    .port-item { height: 300px; }
    .h-dbl { height: 450px; }

    /* Fix: Prevent Social Icons from covering Portfolio Title on Tablet */
    .portfolio-header, .section-title {
        padding-right: 60px; /* Safe space for the sidebar */
    }

    /* --- 5. CONTACT SECTION --- */
    /* Switch from Side-by-Side to Stacked for Contact Form */
    .contact-wrapper {
        grid-template-columns: 1fr; /* Stack vertically */
    }
    .contact-visual {
        min-height: 250px; /* Shorter visual on top */
        padding: 30px;
    }
    .contact-form-side {
        padding: 40px 30px;
    }

    /* --- 6. FOOTER --- */
    /* Switch from 3 columns (2fr 1fr 1fr) to 2 columns */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        text-align: left;
    }
    
    /* Make the logo column span full width on top */
    .footer-col:first-child {
        grid-column: span 2;
        text-align: center;
        margin-bottom: 20px;
    }
    /* Re-align logo */
    .footer-logo {
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
        justify-content: center;
        display: flex;
    }
	
	/* --- TABLET NAV MENU FIX --- */
    
    /* 1. Show the Hamburger Button */
    .menu-toggle {
        display: block;      /* Visible on Tablet */
        font-size: 1.5rem;
        color: white;
        cursor: pointer;
        padding: 10px;
        order: 3;            /* Place it after the button if using flex */
        z-index: 1001;
    }

    /* 2. Hide the Horizontal Links by Default */
    .nav-links {
        position: absolute;
        top: 80px;           /* Below header */
        right: 0;
        width: 100%;
        background: rgba(5, 13, 10, 0.98); /* Dark Glass Background */
        backdrop-filter: blur(15px);
        border-bottom: 1px solid rgba(255,255,255,0.1);
        
        display: none;       /* Hidden until clicked */
        flex-direction: column;
        align-items: center;
        padding: 30px 0;
        gap: 25px;
        z-index: 999;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    }

    /* 3. State: Active (Visible) */
.nav-links.active {
    display: flex !important; /* Forces it to override the 'display: none' */
    flex-direction: column;   /* Stacks them vertically */
    
    /* POSITIONING FIXES */
    position: absolute;
    top: 70px;               /* Adjusts to sit right below your header */
    left: 0;
    width: 100%;
    
    /* VISUALS */
    background: #050d0a;      /* Solid dark background (no transparency issues) */
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 30px 0;
    gap: 20px;
    z-index: 10000;           /* Ensures it sits on top of everything */
    
    animation: slideDown 0.3s ease forwards;
}

/* Ensure the links inside are visible and white */
.nav-links.active a {
    color: white;
    font-size: 1.2rem;
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px 0;
}

    /* 4. Style the Links inside the dropdown */
    .nav-links a {
        font-size: 1.2rem;
        width: 100%;
        text-align: center;
        padding: 10px 0;
        display: block;
    }

    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
}
/* ===================================================
   PART 6: MOBILE RESPONSIVE ENGINE (Max-Width: 768px)
   =================================================== */
@media screen and (max-width: 768px) {

    /* =========================================
       1. GLOBAL RESET & SCROLLING
       ========================================= */
    .animate-up, .fade-in {
        opacity: 1 !important;
        transform: none !important;
    }

    /* Fix: Restore Window Scrolling & Snap behavior */
    html {
        height: auto !important;
        overflow-y: scroll !important;
        scroll-snap-type: y mandatory !important; 
        scroll-behavior: smooth !important;
    }

    body, body.app-mode {
        overflow-x: hidden; 
        height: auto !important;
        overflow-y: visible !important;
        scroll-snap-type: none !important;
    }

    /* Snap Points */
    .hero, .bh-hero, #why, .manifesto-box, #switch, .bh-row,       
    #how, #expert, #portfolio, #contact, footer {
        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;
        margin-bottom: 0 !important;
    }

    /* Hide Desktop-Only Elements */
    .social-sidebar, #back-to-top, #port-up-btn, 
    section .btn-primary, section .btn-secondary {
        display: none !important;
    }

	/* =========================================
	   2. SPLASH SCREEN (Consolidated & Fixed)
	   ========================================= */

	/* --- Layout & Logo --- */
	.splash-logo {
		/* Positioning */
		top: 20px !important;
		left: 20px !important;
		position: relative; /* Required for z-index to work properly in some contexts */
		
		/* Visibility & Interaction */
		overflow: visible !important;
		z-index: 100000 !important; /* Kept the higher value so it stays on top */
		pointer-events: auto !important;
		cursor: pointer;
		
		/* Transition for smooth tap reset */
		transition: transform 0.2s ease;
	}

	.splash-logo img {
		height: 60px !important;
		width: auto !important;
		border-radius: 0 !important;
	}

	/* --- Mobile Tap Feedback (Active State) --- */
	/* Triggers instantly when finger touches screen */
	.splash-logo:active {
		transform: scale(0.95);
		transition: transform 0.1s ease-out;
	}

	/* --- Splash Overlay Interaction --- */
	/* Ensures clicks pass through the background to the logo */
	.splash-overlay {
		pointer-events: none; 
	}

	/* Splash Hover Card (Centered Popup) */
	.splash-logo .hover-card {
		display: block !important;
		width: 280px !important;
		position: fixed !important;
		top: 50% !important; left: 50% !important;
		transform: translate(-50%, -50%) !important;
		background: rgba(5, 13, 10, 0.95);
		border: 1px solid rgba(255, 255, 255, 0.2);
		padding: 15px; border-radius: 12px;
		box-shadow: 0 20px 50px rgba(0,0,0,0.8);
		z-index: 200000 !important;
		
		/* Default Hidden State */
		opacity: 0; 
		visibility: hidden;
		transition: opacity 0.3s ease;
		pointer-events: none;
	}

	/* THE MAGIC PART: Keeps it open on mobile after tap */
	.splash-logo:focus .hover-card, 
	.splash-logo:focus-within .hover-card, /* Safety net for some browsers */
	.splash-logo:hover .hover-card {
		opacity: 1 !important; 
		visibility: visible !important;
		pointer-events: auto !important; /* Allows selecting text on the card */
	}

	/* Removes the blue outline box some phones add when you tap */
	.splash-logo:focus {
		outline: none; 
	}

	/* --- Main Text Content --- */
	.splash-content {
		width: 90% !important;
		margin: 0 5% !important;
		position: absolute !important; 
		bottom: 160px !important; 
		top: auto !important;
		text-align: center;
	}
	.splash-tagline { 
		font-size: 1.2rem; 
		line-height: 1.4; 
	}
	#enter-btn { 
		width: 100%; 
		justify-content: center; 
		padding: 15px; 
		font-size: 0.9rem; 
		margin-top: 20px; 
	}

	/* --- Corner Button (Built Around Life) --- */
	#splash-screen > div[style*="top: 30px"],
	#splash-screen > div[style*="top: 20px"] { 
		display: flex !important; 
		top: 20px !important; 
		right: 20px !important;
		align-items: flex-end !important; 
		pointer-events: none !important; 
		z-index: 200000 !important;
	}

	#splash-screen > div[style*="top"] > div { 
		font-size: 0.6rem !important; 
		margin-bottom: 3px !important; 
	}

	.splash-corner-btn {
		padding: 6px 14px !important; 
		font-size: 0.7rem !important;
		pointer-events: auto !important; 
		position: relative !important; 
		z-index: 200001 !important; 
		display: inline-block !important;
	}

	/* --- Hide scroll arrow on splash --- */
	body.splash-active .scroll-indicator { 
		display: none !important; 
	}

    /* =========================================
       3. HEADER & NAV
       ========================================= */
    header { padding: 10px 0; }
    .nav-links { display: none; } 
    
    .nav-inner { 
        display: flex !important; flex-direction: row !important;
        justify-content: space-between !important; align-items: center !important; gap: 10px;
    }
    .logo img { height: 40px !important; width: auto; }
    .nav-inner .btn-primary {
        width: auto !important; padding: 8px 12px !important;
        font-size: 0.7rem !important; white-space: nowrap; margin-top: 0 !important; height: 36px;
    }
    /* Remove Header Logo Hover on Mobile */
    header .logo .hover-card, .nav-inner .logo .hover-card { display: none !important; pointer-events: none !important; }

    /* =========================================
       4. HERO SECTION
       ========================================= */
    .hero { padding-top: 60px !important; padding-bottom: 40px; min-height: auto; }
    .hero h1 { margin-top: 10px; margin-bottom: 15px; font-size: 2.2rem; line-height: 1.1; }
    .hero-sub { font-size: 0.9rem; margin-bottom: 30px !important; }

    /* Glass Box */
    .hero-glass-box { 
        padding: 40px 20px 30px; width: 95% !important; margin-top: 0px !important;
        overflow: visible !important; 
    }
    /* Hide 'Click to explore' hand */
    .hero-glass-box > div[style*="top: 80px"] { display: none !important; }

    /* Hero Stamp (Pulled Up) */
    .hero-stamp-wrapper {
        position: relative !important; display: block !important; width: fit-content !important;
        margin: -40px auto 10px auto !important; 
        transform: rotate(-5deg) scale(0.8) !important; z-index: 20 !important;
    }
    .hero-stamp { width: 90px !important; filter: drop-shadow(0 5px 10px rgba(0,0,0,0.3)); }

    /* =========================================
       5. COMPARISON & WHY SWITCH
       ========================================= */
    .comparison-grid { grid-template-columns: 1fr; gap: 20px; }
    .comp-img-wrapper { height: 160px; }
    .comp-card { position: relative !important; overflow: visible !important; }
    
    /* Cross/Check Icons */
    .comp-card.traditional img[src*="cross"] {
        width: 35px !important; position: absolute !important; top: -20px !important; right: -20px !important;
        z-index: 50 !important; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5));
    }
    .comp-card.natural img[src*="zero-stress"] { width: 60px !important; bottom: 15px !important; right: 15px !important; }

    /* Lists */
    .comp-list { text-align: left !important; padding-left: 5px !important; margin: 0 auto !important; }
    .comp-list li { justify-content: flex-start !important; padding-left: 0 !important; }
    .comp-header { justify-content: center !important; margin-bottom: 20px !important; }

	/* =========================================
       FIX: BIO-ENGINE ICONS (Single Col & Top Align)
       ========================================= */
    
    /* 1. FORCE SINGLE COLUMN (Overrides inline '1fr 1fr') */
    /* This targets the div with the grid style inside the glass box */
    .hero-glass-box > div[style*="linear-gradient"] > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* 2. TOP ALIGN ICONS (Fixes the centering issue) */
    .hero-glass-box > div[style*="linear-gradient"] > div[style*="grid-template-columns"] > div {
        align-items: flex-start !important;    /* Aligns icons to top */
        text-align: left !important;
    }

    /* 3. ADJUST ICON HEIGHT (Aligns with text) */
    .hero-glass-box > div[style*="linear-gradient"] > div[style*="grid-template-columns"] > div i {
        margin-top: 5px !important;            /* Pushes icon down slightly to match text */
    }
	
/* =========================================
       6. TABS (HOW IT WORKS) - CLEANED & FIXED
       ========================================= */
    
    /* 1. Nav Buttons Container */
    .tabs-nav {
        display: flex !important;
        justify-content: center !important;
        gap: 15px !important;
        flex-wrap: nowrap !important;
        margin-bottom: 30px !important;
        overflow-x: auto !important;
        padding-bottom: 10px;
    }

    /* 2. Tab Buttons (Centered Icons) */
    .tab-btn {
        width: 60px !important;
        height: 60px !important;
        border-radius: 16px !important;
        padding: 0 !important;
        flex-shrink: 0;
        
        /* Flex Centering (Critical Fix) */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important; /* Prevents icon shifting */
        
        font-size: 0 !important; /* Helps hide text */
    }

    /* Ensure text label is completely removed */
    .tab-btn span {
        display: none !important;
    }

    /* Icon Styling */
    .tab-btn i {
        font-size: 1.5rem !important;
        margin: 0 !important;
        display: block !important;
    }

    /* Active State */
    .tab-btn.active {
        box-shadow: 0 0 15px rgba(0, 255, 136, 0.4);
        border-color: var(--primary);
    }

    /* 3. Tab Content - Single Column */
    .tab-content.active {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        padding: 30px 20px !important;
        text-align: left !important;
    }

    /* Header Row (Icon + Title) */
    .tab-header-row {
        flex-direction: row !important;
        align-items: center !important;
        text-align: left !important;
        gap: 15px !important;
        margin-bottom: 20px !important;
    }
    .tab-header-row .icon-box {
        width: 45px !important; height: 45px !important; min-width: 45px !important;
        font-size: 1.1rem !important; margin: 5px 0 0 0 !important;
    }
    .tab-header-row h3 { width: auto !important; font-size: 1.3rem !important; margin: 0 !important; }
    
    /* 4. Media & Lists */
    .tab-content > div { width: 100% !important; }
    
    .tab-content video, 
    .tab-content img {
        width: 100% !important;
        height: auto !important;
        max-height: 250px !important;
        object-fit: cover !important;
        border-radius: 12px !important;
        margin-top: 10px !important;
    }
    
    .check-list li {
        font-size: 0.95rem !important;
        margin-bottom: 12px !important;
    }
	
	/* =========================================
       7. FIX: STUDIO NOTE (Mobile Stack)
       ========================================= */
    .studio-note {
        flex-direction: column !important; /* Stack vertically */
        align-items: center !important;
        text-align: center !important;
        gap: 15px !important;
        padding: 25px 20px !important;
    }
    
    .studio-icon {
        width: 50px !important; height: 50px !important; /* Slightly larger icon */
        margin-bottom: 5px !important;
    }

    /* =========================================
       7. EXPERTISE SECTION (2-COL GRID)
       ========================================= */
    .choose-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
    
    /* Image Stack */
    .choose-img-stack { width: 100% !important; height: auto !important; margin-bottom: 20px !important; display: block !important; }
    .choose-img-stack img { width: 100% !important; height: 250px !important; object-fit: cover !important; }
    .choose-img-stack > div[style*="position: absolute"] {
        position: relative !important; margin: -20px auto 0 auto !important;
        width: 90% !important; transform: none !important; justify-content: center !important; background: var(--primary) !important;
    }

    /* 2x2 Feature Grid (Clean Tile Layout) */
    .choose-feat-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
    
    .small-feat {
        padding: 15px 10px !important; text-align: center !important;
        display: flex !important; flex-direction: column !important; align-items: center !important;
    }
    .small-feat i { margin-bottom: 8px !important; font-size: 1.4rem !important; display: block !important; }
    .small-feat h4 { 
        font-size: 0.8rem !important; margin-bottom: 5px !important; line-height: 1.2 !important;
        min-height: 30px; display: flex; align-items: center; justify-content: center;
    }
    .small-feat p { font-size: 0.7rem !important; opacity: 0.8; }

    /* =========================================
       8. VIDEO TEASER & STAMPS
       ========================================= */
    .real-project-teaser {
        display: flex !important; flex-direction: column !important;
        padding: 25px 20px !important; gap: 30px !important; height: auto !important;
    }
    .real-project-teaser h1 { font-size: 1.8rem !important; line-height: 1.2 !important; }
    
    .teaser-video-wrapper, .teaser-video-wrapper iframe {
        width: 100% !important; height: auto !important; aspect-ratio: 16/9 !important; border-radius: 12px !important;
    }
    .teaser-video-wrapper { margin-top: 25px !important; }
    .teaser-video-wrapper img[src*="peace-of-mind"] {
        width: 60px !important; top: -15px !important; left: -5px !important; z-index: 20 !important;
    }

    /* Custom Design Stamp - Vertical Stack */
    .custom-design-stamp > div { flex-direction: column !important; align-items: center !important; width: 100% !important; }
    .custom-design-stamp img { height: 140px !important; margin: 0 auto 10px auto !important; transform: rotate(-5deg) !important; }
    .custom-design-stamp > div > div { text-align: center !important; width: 100% !important; padding: 0 15px !important; }
    .custom-design-stamp h2.section-title { text-align: center !important; font-size: 1.8rem !important; }
    .custom-design-stamp p.section-subtitle { text-align: center !important; margin: 0 auto !important; max-width: 100% !important; }
	
	/* Fix: Prevent Social Icons from covering Portfolio Title on Tablet */
    .portfolio-header, .section-title {
        padding-right: 0px; /* Safe space for the sidebar */
    }

    /* =========================================
       9. PORTFOLIO & MODAL
       ========================================= */
    .infinite-portfolio-window { height: auto; overflow-y: visible; padding-right: 0; }
    
    /* Filter Buttons - High Z-Index */
    .filter-btns {
        display: flex !important; flex-wrap: wrap !important; justify-content: center !important;
        gap: 12px !important; width: 100% !important;
        position: relative !important; z-index: 2000000 !important; pointer-events: auto !important;
    }
    .filter-btn {
        pointer-events: auto !important; font-size: 0.85rem !important; padding: 10px 20px !important;
        position: relative !important; z-index: 2000001 !important;
    }

    /* Vertical Grid */
    .portfolio-grid { display: flex; flex-direction: column; gap: 25px; }
    .w-25, .w-50, .w-75, .w-100 { width: 100%; grid-column: span 1; }
    .port-item { height: 300px; margin-bottom: 0; }
    .h-dbl { height: 450px; }

    /* Modal Layout */
    .modal-content { height: 90vh !important; grid-template-columns: 1fr !important; grid-template-rows: 250px 1fr !important; }
    .modal-img { height: 100% !important; min-height: 250px !important; }
    .modal-details { padding: 30px 20px !important; display: block !important; }
    .modal-footer-row { flex-direction: column-reverse; gap: 20px; text-align: center; margin-top: 30px; }
    .ribbon-3d { display: none; }
	
	/* =========================================
       FIX: VIDEO STAMP & GALLERY TITLE (Final Polish)
       ========================================= */

    /* 1. RESTORE "PEACE OF MIND" STAMP (Corner Hang) */
    .teaser-video-wrapper img[src*="peace-of-mind"] {
        width: 80px !important;              /* Smaller, subtle size */
        height: auto !important;
        
        position: absolute !important;
        top: -20px !important;               /* Pull UP to hang off the top edge */
        left: -15px !important;              /* Pull LEFT to hang off the side */
        
        z-index: 20 !important;
        transform: rotate(-10deg) !important; /* Slight tilt for natural look */
        filter: drop-shadow(0 5px 15px rgba(0,0,0,0.5)); /* Deep shadow for 3D effect */
    }

    /* 2. GALLERY TITLE SECTION (Tight & Centered) */
    .custom-design-stamp {
        margin-top: 40px !important;         /* Space from the video above */
        margin-bottom: 20px !important;
        padding: 0 !important;
        width: 100% !important;
    }
    
    .custom-design-stamp > div {
        gap: 10px !important;                /* Gap between stamp and text */
    }

    /* The "Custom Design" Stamp Image */
    .custom-design-stamp img {
        height: 110px !important;            /* Balanced size (not huge, not tiny) */
        margin: -20px auto 0 auto !important;/* Slight overlap with space above */
    }

    /* The "Aquarium Visualization Gallery" Title */
    .custom-design-stamp h2.section-title {
        font-size: 2rem !important;          /* Large and bold */
        line-height: 1.1 !important;
        text-align: center !important;
        margin-top: 5px !important;
        width: 100% !important;
        display: block !important;
    }
    /* =========================================
       10. CONTACT SECTION
       ========================================= */
    /* Headers */
    .contact-section h2, .contact-container h2, .section-header h2 { font-size: 1.5rem !important; line-height: 1.3 !important; }
    
    .contact-wrapper { grid-template-columns: 1fr !important; margin-top: 10px !important; }
    .contact-visual { min-height: 220px !important; padding: 30px 20px !important; align-items: center !important; }
    .contact-quote { font-size: 1.3rem !important; text-align: center !important; padding: 0 !important; text-shadow: 0 2px 10px rgba(0,0,0,0.8); }
    
    .contact-form-side { padding: 30px 20px !important; }
    .form-row, .form-row-3 { display: grid !important; grid-template-columns: 1fr !important; gap: 15px !important; }
    .form-control { padding: 12px 15px !important; font-size: 1rem !important; }
    .contact-form-side button[type="button"] { width: 100% !important; padding: 15px !important; font-size: 1rem !important; }

    /* =========================================
       11. FOOTER SECTION
       ========================================= */
    .footer-grid { display: flex !important; flex-direction: column !important; gap: 50px !important; text-align: center !important; }
    .footer-logo { width: 100% !important; margin: 0 auto 20px auto !important; display: flex !important; justify-content: center !important; }
    /* Find the existing .footer-logo .logo img rule and REPLACE it with this: */
	.footer-logo .logo img { 
		width: auto !important;          /* Let the logo define its own width */
		height: 90px !important;         /* Set a fixed height so it's visible but not huge */
		max-width: 90% !important;       /* Safety cap */
		border-radius: 0 !important;     /* REMOVES THE "ROUNDED CUT" */
		object-fit: contain !important;  /* Ensures the whole text is visible */
		margin: 0 auto !important;       /* Centers it */
	}
    
    /* Update the .footer-bottom rule */
.footer-bottom { 
    padding: 30px 0 120px 0 !important; /* Increased bottom padding to 120px so links don't hide behind the floating menu */
    width: 100%; 
    background: transparent; 
	justify-content: center; /* Centers items horizontally */
}

/* Update the .legal-links rule */
.legal-links { 
    display: flex !important; 
    flex-direction: column !important; 
    gap: 15px !important;           /* More space between links */
    align-items: center !important; /* Centers the text */
}

/* Add style for the items themselves */
.legal-item {
    font-size: 0.9rem !important;   /* Slightly bigger text */
    opacity: 0.7;
    letter-spacing: 0.5px;
}

/* Make the actual links (Privacy/Terms) stand out slightly */
.legal-item a {
    color: var(--text-main) !important; /* Whiter text */
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 1px solid rgba(255,255,255,0.1); /* Subtle underline */
}
    .separator { display: none !important; }

    /* Legacy Scroll Buttons (If used) */
    #scrollTopBtn, .scroll-to-top, .footer-scroll-btn {
        position: fixed !important; bottom: 25px !important; right: 25px !important; z-index: 200000 !important;
        margin: 0 !important; transform: none !important; pointer-events: auto !important;
        display: flex !important; align-items: center; justify-content: center;
    }
	
	/* =========================================
       12. MOBILE DOCK UI & DRAWERS
   ========================================= */

    /* --- 1. BOTTOM DOCK --- */
    .mobile-app-bar {
        position: fixed; bottom: 20px; left: 20px; right: 20px; height: 70px;
        background: rgba(5, 13, 10, 0.9); 
        backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 20px;
        display: flex; justify-content: space-between; align-items: center;
        padding: 0 5px;
        z-index: 2147483640 !important; 
        box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    }

    .app-nav-item { 
        width: 19%; display: flex; flex-direction: column; 
        align-items: center; justify-content: center;
        gap: 5px; color: #94a39b; text-decoration: none; 
    }
    .app-nav-item i { font-size: 1.4rem; margin-bottom: 2px; }
    .app-nav-item span { font-size: 0.65rem; font-weight: 500; text-transform: uppercase; }
    .app-nav-item.active-trigger i { color: #00ff88; text-shadow: 0 0 10px rgba(0,255,136,0.4); }

    /* Adjust Chat Button Position */
    #chat-toggle-btn, .sb-chat-btn, #sb-fab { bottom: 100px !important; right: 25px !important; }

    /* Scroll Indicator */
    .scroll-indicator {
        display: flex !important; opacity: 1 !important; pointer-events: auto !important;
        position: fixed !important; bottom: 95px !important; left: 50% !important;
        transform: translateX(-50%) scale(0.65) !important; z-index: 2147483645 !important;
        background: transparent !important;
    }
    .scroll-indicator.hidden { opacity: 0 !important; pointer-events: none !important; }


    /* --- 2. DRAWERS (Common Styles) --- */
    .app-drawer, .social-drawer {
        position: fixed; bottom: 100px;
        background: rgba(15, 25, 20, 0.95); 
        backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 24px;
        opacity: 0; visibility: hidden; transform: translateY(20px) scale(0.95);
        transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
        z-index: 2147483646 !important;
        box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    }
    .app-drawer.active, .social-drawer.active { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }


    /* --- 3. APP DRAWER CONTENT --- */
    .app-drawer { left: 20px; right: 20px; padding: 20px; }
    
    /* Header (Menu text + Close X) */
    .drawer-header {
        display: flex; justify-content: space-between; align-items: center;
        margin-bottom: 20px; padding-bottom: 10px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        color: #fff; font-size: 1.1rem; font-weight: 600;
    }
    .drawer-header i { cursor: pointer; color: #999; transition: 0.2s; }
    .drawer-header i:hover { color: #fff; }

    /* Grid Layout */
    .drawer-grid { 
        display: grid; 
        grid-template-columns: repeat(3, 1fr); /* Strict 3 columns */
        gap: 15px; 
    }
    
    /* Tiles */
    .drawer-tile { 
        display: flex; flex-direction: column; align-items: center; 
        gap: 8px; text-decoration: none; color: #ccc; cursor: pointer;
    }
    .drawer-tile span { font-size: 0.75rem; text-align: center; }
    
    /* Tile Icons */
    .tile-icon {
        width: 50px; height: 50px; border-radius: 16px; 
        display: flex; align-items: center; justify-content: center;
        font-size: 1.2rem; 
        background: rgba(255,255,255,0.05); 
        border: 1px solid rgba(255,255,255,0.1);
        transition: transform 0.2s ease;
    }
    .drawer-tile:active .tile-icon { transform: scale(0.95); }

    /* Icon Colors */
    .icon-red    { background: rgba(255, 82, 82, 0.15); color: #ff5252; }
    .icon-blue   { background: rgba(0, 229, 255, 0.15); color: #00e5ff; }
    .icon-green  { background: rgba(0, 255, 136, 0.15); color: #00ff88; }
    .icon-gold   { background: rgba(255, 215, 0, 0.15); color: #ffd700; }
    .icon-purple { background: rgba(216, 112, 147, 0.15); color: #ff80ab; }
    .icon-gray   { background: rgba(255, 255, 255, 0.1); color: #ccc; }
    .icon-cyan   { background: rgba(0, 255, 255, 0.15); color: #00bcd4; }


    /* --- 4. SOCIAL DRAWER --- */
    .social-drawer { right: 20px; width: 170px; padding: 15px; display: flex; flex-direction: column; gap: 8px; }
    .social-row { 
        display: flex; align-items: center; gap: 12px; 
        padding: 10px 12px; border-radius: 12px; 
        text-decoration: none; color: #eee; font-size: 0.9rem;
        background: rgba(255,255,255,0.03); border: 1px solid transparent;
    }
    .social-row:active { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.1); }


    /* --- 5. MODALS / POPUPS --- */
    .custom-modal {
        display: none; position: fixed; z-index: 2147483650 !important; /* Above everything */
        left: 0; top: 0; width: 100%; height: 100%;
        background-color: rgba(0,0,0,0.8); backdrop-filter: blur(5px);
        align-items: center; justify-content: center;
        opacity: 0; transition: opacity 0.3s ease;
    }
    .custom-modal.show { display: flex; opacity: 1; }

    .modal-content {
        /* Dark Theme matching your Dock */
        background: rgba(20, 25, 23, 0.95);
        border: 1px solid rgba(255,255,255,0.15);
        color: #eee;
        width: 85%; max-width: 380px;
        border-radius: 24px; overflow: hidden;
        box-shadow: 0 20px 50px rgba(0,0,0,0.5);
        animation: slideUp 0.3s ease;
    }

    @keyframes slideUp {
        from { transform: translateY(50px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }

    .modal-header {
        display: flex; justify-content: space-between; align-items: center;
        padding: 15px 20px; border-bottom: 1px solid rgba(255,255,255,0.1);
        background: rgba(255,255,255,0.02);
    }
    .modal-header h3 { margin: 0; font-size: 1.1rem; font-weight: 600; color: #00ff88; }
    .close-modal { font-size: 1.2rem; cursor: pointer; padding: 5px; color: #999; }
    
    .modal-body { padding: 25px 20px; }
    .center-text { text-align: center; }
    .modal-logo img { height: 40px; margin-bottom: 10px; }
    .contact-sub { font-size: 0.85rem; color: #999; margin-bottom: 20px; line-height: 1.4; }

    /* Buttons inside Modal */
    .help-actions { display: flex; flex-direction: column; gap: 12px; }
    
    .action-btn {
        display: flex; align-items: center; justify-content: center; gap: 10px;
        padding: 14px; border-radius: 12px; text-decoration: none;
        font-weight: 500; cursor: pointer; border: none; width: 100%; font-size: 0.9rem;
        transition: transform 0.1s;
    }
    .action-btn:active { transform: scale(0.98); }

    /* Button Colors */
    .primary-btn { background: #00ff88; color: #000; font-weight: 700; }
    .outline-btn { background: transparent; border: 1px solid rgba(255,255,255,0.2); color: #fff; }
    .whatsapp-btn { background: #25D366; color: white; }

    /* Call Form Styling */
    .hidden-form {
        display: none; background: rgba(255,255,255,0.05);
        padding: 15px; border-radius: 12px; margin-top: 10px; text-align: left;
    }
    .hidden-form label { display: block; font-size: 0.8rem; margin: 8px 0 5px; color: #aaa; }
    .hidden-form input, .hidden-form select {
        width: 100%; padding: 12px; 
        background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1);
        border-radius: 8px; color: #fff; margin-bottom: 10px; outline: none;
    }

    /* About Modal Specifics */
    .about-text { font-size: 0.9rem; line-height: 1.5; color: #ccc; margin-bottom: 20px; text-align: center; }
    .about-links { display: flex; flex-direction: column; gap: 0; }
    .about-links a {
        display: flex; justify-content: space-between; align-items: center;
        padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,0.1);
        text-decoration: none; color: #fff; font-size: 0.95rem;
    }
    .about-links a:last-child { border-bottom: none; }
    .about-links i { font-size: 0.8rem; color: #666; }


    /* =========================================
       FIX: ABOUT & HELP POPUP OVERRIDES
       ========================================= */
    /* Resets the grid layout inherited from the Project Modal */
    #about-modal .modal-content, 
    #help-modal .modal-content {
        display: flex !important;        
        flex-direction: column !important;
        height: auto !important;         
        max-height: 80vh !important;     
        grid-template-rows: none !important; 
        padding: 0 !important;           
    }

    #about-modal .modal-header, 
    #help-modal .modal-header {
        height: auto !important;
        padding: 15px 20px !important;
        flex-shrink: 0;                  
    }

    #about-modal .modal-body, 
    #help-modal .modal-body {
        overflow-y: auto !important;     
        padding: 25px 20px !important;
        display: block !important;       
    }

    #about-modal .modal-logo img, 
    #help-modal .modal-logo img {
        height: 60px !important;         
        width: auto !important;
        margin: 0 auto 20px auto !important;
        display: block !important;
        object-fit: contain !important;
    }
	
}
	
/* =========================================
   BUILT AROUND LIFE - TAB ENGINE
   ========================================= */

@media screen and (max-width: 1024px) {
    
    /* --- 1. HERO SECTION ADJUSTMENTS --- */
    .bh-hero {
        height: 85vh !important; /* Taller hero for impact on mobile */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        padding: 0 20px !important;
    }

    .bh-title-container {
        width: 100% !important;
        transform: translateY(-20px) !important; /* Move up slightly to clear stamp */
    }

    .bh-title-large {
        font-size: 3.5rem !important; /* Readable fixed size instead of massive VW */
        line-height: 1.1 !important;
        letter-spacing: -1px !important;
        -webkit-text-stroke: 0px !important; /* Remove stroke, make it solid for readability */
        color: white !important;
        text-shadow: 0 10px 30px rgba(0,0,0,0.8) !important;
    }

    .bh-subtitle {
        font-size: 1rem !important;
        letter-spacing: 3px !important;
        margin-top: 15px !important;
        opacity: 0.9 !important;
    }

    /* Fix the Stamp overlapping text */
    .hero-stamp-wrapper {
        position: relative !important; /* No longer absolute floating */
        bottom: auto !important;
        right: auto !important;
        margin-top: 40px !important;
        transform: rotate(-5deg) scale(0.9) !important;
        opacity: 1 !important;
        animation: none !important; /* Stop movement animation to prevent glitches */
        display: block !important;
    }

    /* --- 2. MANIFESTO SECTION --- */
    .manifesto-box {
        padding: 60px 25px !important;
        margin: 0 !important;
        width: 100% !important;
        border-left: none !important;
        border-right: none !important;
    }

    .manifesto-text {
        font-size: 1.4rem !important;
        line-height: 1.5 !important;
        text-align: left !important; /* Easier to read on mobile */
    }

    /* --- 3. ALTERNATING CONTENT ROWS (The "Disturbed" Part) --- */
    .bh-row {
        display: flex !important;
        flex-direction: column !important; /* Stack vertically */
        height: auto !important;
        min-height: auto !important;
        border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    }

    /* Force Visual (Image) to Top */
    .bh-visual {
        order: 1 !important; /* Image First */
        width: 100% !important;
        height: 350px !important; /* Fixed height for consistency */
        min-height: 350px !important;
    }

    /* Force Content (Text) to Bottom */
    .bh-content {
        order: 2 !important; /* Text Second */
        padding: 40px 25px !important;
        width: 100% !important;
        text-align: left !important;
    }

    .bh-heading {
        font-size: 2.2rem !important;
        margin-bottom: 20px !important;
    }

    /* Feature Lists & Quotes */
    .feature-list li {
        font-size: 0.95rem !important;
        margin-bottom: 15px !important;
    }

    .viz-quote {
        font-size: 2rem !important;
        margin: 30px 0 !important;
        -webkit-text-stroke: 0 !important;
        color: #1a2e26 !important;
    }
    .viz-quote span {
        color: white !important;
        display: block !important;
        margin-top: 5px !important;
    }

    /* --- 4. HEADER FIX --- */
    /* Ensure the logo and menu fit */
    header .container.nav-inner {
        padding: 0 20px !important;
    }
    .logo img {
        height: 50px !important; /* Smaller logo */
    }
    
    /* Hide desktop nav links on this specific page if they aren't already */
    .nav-links { display: none !important; }

    /* Make CTA button smaller */
    header .btn-primary {
        padding: 8px 15px !important;
        font-size: 0.75rem !important;
        white-space: nowrap !important;
    }
	
    .hero-stamp-wrapper {
        position: relative !important; /* Stop it from floating to the right */
        inset: auto !important;        /* Reset top/right/bottom/left coordinates */
        
        display: block !important;
        width: fit-content !important; /* Only take up as much space as the image */
        margin: 30px auto 0 auto !important; /* Top margin 30px, Left/Right AUTO (Centers it) */
        
        transform: rotate(-5deg) scale(0.8) !important; /* Make it slightly smaller to fit safely */
        opacity: 1 !important;
        animation: none !important;    /* Stop any sliding animations that might cause clipping */
    }
    
    /* Ensure the image inside doesn't get huge */
    .hero-stamp {
        width: 120px !important;       /* Safe mobile width */
        height: auto !important;
        filter: drop-shadow(0 5px 10px rgba(0,0,0,0.4));
    }
	
	/* =========================================
       FIX: EXPERTISE GRID (2-Column Layout)
       ========================================= */
    
    /* 1. Switch to 2 Columns */
    .choose-feat-grid { 
        grid-template-columns: 1fr 1fr !important; /* 2 Equal Columns */
        gap: 12px !important; 
    }

    /* 2. Style the Tiles (Centered & Compact) */
    .small-feat {
        padding: 15px 10px !important;  /* Tighter padding */
        text-align: center !important;  /* Center text for tile look */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        height: 100% !important;        /* Ensure all tiles are same height */
    }

    /* 3. Adjust Icon */
    .small-feat i {
        margin-bottom: 8px !important;
        font-size: 1.4rem !important;
        display: block !important;      /* Force it to sit on its own line */
    }

    /* 4. Adjust Text Size for 2-Col Fit */
    .small-feat h4 {
        font-size: 0.8rem !important;   /* Slightly smaller to prevent wrapping */
        margin-bottom: 5px !important;
        line-height: 1.2 !important;
        min-height: 30px;               /* Aligns descriptions even if titles vary */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .small-feat p {
        font-size: 0.7rem !important;
        line-height: 1.3 !important;
        opacity: 0.8;
    }
	
	/* =========================================
       FIX: TERMS, PRIVACY & FAQ ON MOBILE
       ========================================= */
    
    /* 1. Adjust the Hero Spacing (Too tall on mobile) */
    .terms-hero, .privacy-hero, .faq-hero {
        padding-top: 120px !important;  /* Reduced from 180px */
        padding-bottom: 40px !important;
        min-height: auto !important;
    }
    
    /* 2. Resize the Titles */
    .terms-title, .privacy-title, .faq-title {
        font-size: 2rem !important;     /* Reduced from 3.5rem */
        padding: 0 15px !important;     /* Prevents edge touching */
    }

    /* 3. FIX THE CONTENT BOX (Critical) */
    .terms-content-box, .privacy-content-box, .faq-container {
        width: 92% !important;          /* Use mostly full width */
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 30px 20px !important;  /* Reduced padding (60px was crushing the text) */
        border-radius: 16px !important;
        margin-bottom: 80px !important; /* Space for the App Dock */
    }
    
    /* 4. Ensure Text Wraps Correctly */
    .terms-content-box p, .privacy-content-box p, .accordion-body {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        word-wrap: break-word !important; /* Prevents long words from breaking layout */
    }

    /* 5. FAQ Specific Fixes */
    .accordion-btn {
        padding: 15px 20px !important;
        font-size: 0.95rem !important;
    }
	
	/* 1. Reveal the Hamburger/Toggle Button */
    .menu-toggle {
        display: block; /* Was hidden on desktop */
        cursor: pointer;
        z-index: 1001; /* Ensure it sits above the menu overlay */
    }

    /* 2. Reposition the Navigation Links */
    .nav-menu {
        position: absolute;
        top: 70px;       /* Match your header height */
        right: 0;        /* Align to right or left */
        width: 100%;     /* Full width dropdown */
        height: auto;
        
        background-color: #ffffff; /* Critical: Needs background to cover content */
        box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Optional: Shadow for depth */
        
        flex-direction: column; /* Stack items vertically */
        align-items: center;    /* Center text */
        gap: 20px;              /* Space between items */
        padding: 20px 0;
        
        /* 3. State: Hidden by default */
        display: none; 
        
        /* Optional: Smooth slide/fade animation setup */
        /* opacity: 0; transform: translateY(-10px); transition: all 0.3s ease; */
    }

    /* 4. State: Visible (Added via JavaScript when clicked) */
    .nav-menu.active {
        display: flex;
        /* opacity: 1; transform: translateY(0); */
    }

    /* Optional: Adjust link sizing for touch targets */
    .nav-menu li a {
        font-size: 1.2rem;
        display: block;
        padding: 10px;
    }
}

/* =========================================
   FIX: HIDE MOBILE ELEMENTS ON DESKTOP
   ========================================= */
@media screen and (min-width: 769px) {
    /* Hide the App Bar, Menu Grid, AND the Social Popup on PC */
    .mobile-app-bar, 
    #app-drawer, 
    #social-drawer { 
        display: none !important;
    }
}


/* =========================================
   FIX: HIDE MENU ON SPLASH SCREEN
   ========================================= */
body.splash-active .mobile-app-bar {
    display: none !important;
}

/* Optional: Ensure drawers are also hidden if active */
body.splash-active .app-drawer,
body.splash-active .social-drawer {
    display: none !important;
}

/* =========================================
   TALK BUTTON & VOICE UI STYLES
   ========================================= */

/* --- 1. The TALK Button (Left Side) --- */
.floating-fab {
    position: fixed;
    bottom: 80px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    z-index: 1000000;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.floating-fab:hover { transform: scale(1.1); }
.floating-fab i { font-size: 1.4rem; margin-bottom: 2px; }
.floating-fab span { font-size: 0.6rem; font-weight: 800; margin-top: -2px; }

/* Left Side (Talk) - Neon Green */
.left-fab {
    left: 25px;
    background: #00ff88; /* Pulse Green */
    color: #003829;
    box-shadow: 0 10px 25px rgba(0, 255, 136, 0.4);
}

/* Right Side (Chat) - Existing Blue (Ensure this matches your existing chat btn) */
#sb-fab {
    right: 25px;
    /* properties inherited from .floating-fab if you apply class, or keep existing */
}

/* --- 2. The Voice Window (Overlay) --- */
.voice-overlay {
    position: fixed;
    bottom: 160px; /* Above the buttons */
    left: 30px;    /* Aligned to the left */
    width: 320px;
    height: 480px;
    background: rgba(15, 28, 22, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    display: none; /* Hidden by default */
    flex-direction: column;
    box-shadow: 0 30px 60px rgba(0,0,0,0.6);
    z-index: 1000001;
    overflow: hidden;
    animation: slideUpFade 0.4s ease;
}

@keyframes slideUpFade {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header */
.voice-header {
    padding: 15px 20px;
    background: #0f1c16;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    display: flex; justify-content: space-between; align-items: center;
}
.voice-branding { display: flex; align-items: center; gap: 10px; }
.voice-branding img { width: 30px; height: 30px; object-fit: contain; }
.voice-title { color: white; font-weight: 700; font-size: 0.9rem; }
.voice-subtitle { color: #00ff88; font-size: 0.7rem; }
.voice-close-btn { background: none; border: none; color: white; font-size: 24px; cursor: pointer; }

/* Stream Area */
.voice-stream { flex-grow: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; }

/* Controls Area */
.voice-controls {
    padding: 25px;
    background: rgba(0,0,0,0.2);
    border-top: 1px solid rgba(255,255,255,0.05);
    display: flex; flex-direction: column; align-items: center; gap: 15px;
}
.voice-status-text { color: #94a39b; font-size: 0.8rem; font-weight: 500; height: 15px; }

/* Big Mic Button */
#mic-trigger {
    width: 70px; height: 70px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; position: relative;
    transition: all 0.3s;
}
#mic-trigger i { font-size: 1.8rem; color: white; transition: 0.3s; }

/* --- 3. Animations & States --- */
#mic-pulse {
    position: absolute; width: 100%; height: 100%;
    border-radius: 50%; border: 2px solid #00ff88;
    opacity: 0; pointer-events: none;
}

@keyframes listenPulse {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.8); opacity: 0; }
}

/* Listening State (Green) */
.listening-mode #mic-trigger { background: rgba(0, 255, 136, 0.15); border-color: #00ff88; }
.listening-mode #mic-trigger i { color: #00ff88; }
.listening-mode #mic-pulse { animation: listenPulse 1.5s infinite; }

/* Speaking State (Blue) */
.speaking-mode #mic-trigger { background: rgba(0, 229, 255, 0.15); border-color: #00e5ff; }
.speaking-mode #mic-trigger i { color: #00e5ff; }

/* --- 4. Mobile Adjustments --- */
@media screen and (max-width: 768px) {
    /* Align buttons with Mobile App Bar if present */
    .floating-fab { bottom: 100px; } 
    
    /* Center the Voice Window on mobile */
    .voice-overlay {
        left: 50%; transform: translateX(-50%);
        bottom: 180px; width: 90%;
    }
    @keyframes slideUpFade {
        from { opacity: 0; transform: translate(-50%, 20px) scale(0.95); }
        to { opacity: 1; transform: translate(-50%, 0) scale(1); }
    }
}

/* =========================================
   CONTACT FORM REFINEMENTS (Responsive & UI)
   ========================================= */

/* 1. Prevent long text in dropdowns from stretching mobile screens */
select.form-control {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* 2. Custom Styling for the "Choose File" button inside the input */
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.15) 0%, rgba(0, 198, 255, 0.15) 100%);
    border: 1px solid rgba(0, 255, 136, 0.3);
    color: var(--primary);
    padding: 8px 16px;
    border-radius: 8px;
    margin-right: 15px;
    cursor: pointer;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s ease;
}

input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover {
    background: var(--primary);
    color: #003829;
}

/* 3. Tablet Grid Fix (768px to 1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    /* Converts the 3-column row into a 2-column wrapping grid on iPads */
    .form-row-3 { 
        grid-template-columns: 1fr 1fr; 
    }
    /* Makes the 3rd odd item (Timeline) span the full width to look balanced */
    .form-row-3 > div:nth-child(3) {
        grid-column: span 2;
    }
}

/* 4. Notification Box Mobile Adjustment */
@media screen and (max-width: 768px) {
    #success-notification {
        font-size: 0.85rem !important;
        padding: 12px !important;
    }
}