/* MUST BE LINE 1 */
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@300;400&display=swap");

/* 1. GLOBAL DEFAULTS */
#mobile-version { display: none !important; }
#desktop-version { display: block; }

/* 2. MOBILE OVERRIDES (Phones) */
@media (max-width: 768px) {
    #desktop-version { display: none !important; }
    #mobile-version { display: block !important; }
    
    /* Ensures the desktop preloader doesn't stay visible on mobile */
    #preloader { display: none !important; } 
}

/* 3. DESKTOP WRAPPER (Computers) */
@media (min-width: 769px) {
    #mobile-version { display: none !important; }
    #desktop-version { display: block !important; }
}

/* =========================================
   EXISTING DESKTOP STYLES START HERE
   ========================================= */
:root {
    --current-text: #ffffff;       
    --side-gap: 5mm;
    --bg-color: #ffffff;           
    --final-bg-color: #ffffff; 
    --glow-color: #000000;

    /* RESTORED PLASMA VARIABLES */
    --base-color: #182C4A;
    --primary-glow: #00FFFF;
    --secondary-glow: rgb(168, 222, 207);
    --white-glow: #FFFFFF;
    --glow-blur: 75px;
    --animation-speed: 30s;
    --parallax-strength: 0.225;
    --plasma-intensity: 0.75;

}

::-webkit-scrollbar { display: none; }
/* Update this block at the top of styles.css */
html, body {
    -ms-overflow-style: none; scrollbar-width: none;
    margin: 0; padding: 0; box-sizing: border-box;
    background: #000; 
    
    /* THE FIX: Allow vertical scrolling, hide horizontal */
    overflow-x: hidden; 
    overflow-y: auto; 
    
    /* THE FIX: Allow the body to stretch with the GSAP pin spacer */
    min-height: 100vh; 
}

body { 
    background-color: #000 !important; 
    color: var(--current-text);
    font-family: 'Montserrat', sans-serif; 
    min-height: 100dvh; 
    transition: background-color 1s ease; 
}

@keyframes flare-flicker {
    0%, 100% { opacity: 1; box-shadow: 0 0 5px var(--glow-color), 0 0 10px var(--glow-color); }
    50% { opacity: 0.5; box-shadow: 0 0 2px var(--glow-color), 0 0 5px var(--glow-color); }
}

#fullscreen-shader {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 90; 
    pointer-events: none;
    
    /* CHANGED: Make it fully visible and remove the transparent masking hole */
    opacity: 1; 
    -webkit-mask-image: none; 
    mask-image: none;
}
#content {
position: absolute; /* Change to absolute to overlay and fill independently */
top: 0;
left: 0;
width: 100%;
height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0;
z-index: 10; /* Ensure above background */
pointer-events: none;
overflow: visible; /* Allow content to render without clipping */
box-sizing: border-box;
}

#services-container { 
    position: absolute; /* Changed from fixed */
    top: 0; left: 0; 
    width: 100%; height: 100vh; min-height: 100dvh;
    z-index: 15; 
    visibility: hidden; 
    opacity: 0; 
    background-color: transparent; 
    overflow: hidden;
    backface-visibility: hidden; transform: translateZ(0); will-change: transform;
}


/* 1. HIDE DOTS ANIMATION */
#hero-background, .service-visual-left { display: none !important; }





/* 4. INNER CIRCLE (The Content Wrapper) */
.circle-content {
    width: 75%; height: 75%;
    border-radius: 50%;
    
    background: rgba(0, 0, 0, 0.05); /* CHANGED: Initially Grey/Black Fill */
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    position: relative;
    transition: all 0.4s ease;
    overflow: hidden; 
}

/* 5. TEXT STYLES (Title & Description) */
.circle-text {
    position: absolute; /* Stacked on top */
    font-family: 'Montserrat', sans-serif;
    font-size: 7.5px; 
    font-weight: 600; 
    letter-spacing: 0.05em; 
    color: #000000;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.2;
    width: 100%;
    transition: all 0.3s ease;
    opacity: 1; transform: translateY(0);
}

.circle-desc {
    position: absolute; /* Stacked but hidden */
    font-family: 'Montserrat', sans-serif;
    font-size: 6.5px; /* Slightly smaller for description */
    font-weight: 500;
    color: #000000;
    text-align: center;
    line-height: 1.4;
    width: 85%;
    opacity: 0; 
    transform: translateY(10px); /* Start slightly down */
    transition: all 0.3s ease;
    margin: 0;
}


/* Keep these helper classes hidden initially */
.services-title-wrapper, .service-visual-left { opacity: 0; visibility: hidden; }
.text-container { 
    text-align: center; 
    pointer-events: auto; 
    display: grid; 
    place-items: center; 
    z-index: 20; 
    width: 100%; 
}
#home-content { display: flex; flex-direction: column; align-items: center; transition: opacity 0.5s ease; }
.you-matter { font-family: 'Montserrat', sans-serif; letter-spacing: 1.5em; text-indent: 1.5em; font-size: 18px; font-weight: 300; color: #ffffff; margin-bottom: 12px; text-shadow: 0 0 15px rgba(255,255,255,0.2); white-space: nowrap; }
.slogan { font-family: 'Montserrat', sans-serif; letter-spacing: 0.4em; font-size: 11px; color: rgba(255, 255, 255, 0.9); text-transform: uppercase; text-shadow: 0 0 15px rgba(255,255,255,0.2); }
.app-name { position: fixed; top: 20px; left: var(--side-gap); font-family: 'Montserrat'; font-size: 18px; letter-spacing: 0.5em; color: #ffffff; text-decoration: none; font-weight: 600; z-index: 20; }.beta-suffix { font-size: 0.7em; background: rgba(255,255,255,0.1); padding: 4px; border-radius: 4px; margin-left: -5px; position: absolute; top: 100%; right: 0; font-weight: 250; }

#subscribe-container, #appointment-container { 
    position: fixed; top: 50%; left: 50%; 
    transform: translate(-50%, -50%); 
    z-index: 5000; text-align: center; 
    opacity: 0; visibility: hidden; 
    width: 600px; 
}

select.sub-input.custom-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    background: transparent;
}
select.sub-input.custom-select option {
    background: #111111; /* Dark background for dropdown options */
    color: #ffffff;
}
select.sub-input.custom-select:invalid {
    color: rgba(255, 255, 255, 0.7); /* Match placeholder text color */
}

.glass-card { 
    background: rgba(255, 255, 255, 0.1); 
    backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); 
    /* CHANGED: Removed Pink Border, restored to clean white/glass */
    border: 1px solid rgba(255, 255, 255, 0.3); 
    border-radius: 20px; 
    padding: 60px 50px; 
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); 
    transition: transform 0.3s ease; 
}

.sub-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    letter-spacing: 0.2em;
    color: #ffffff; /* CHANGED: Was Pink (#FF007F) */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3); /* CHANGED: Was Pink shadow */
    text-transform: uppercase;
    font-weight: 600; 
    margin-bottom: 30px;
    margin-top: 0;
}

.input-stack { 
    display: flex; flex-direction: column; gap: 25px; margin-bottom: 40px; 
}

/* Inputs - Custom Colors */
.sub-input { 
    background: none; 
    border: none; 
    border-bottom: 1px solid rgba(0, 0, 0, 0.5); 
    outline: none; 
    
    /* 2. USER TYPED TEXT */
    color: #ffffff; /* CHANGED: Was Neon Yellow (#DFFF00) */
    text-shadow: 0px 1px 2px #000000;
    
    font-family: 'Montserrat', sans-serif; 
    font-size: 16px; 
    padding: 12px 0; 
    width: 100%; 
    font-weight: 300; 
    letter-spacing: 0.05em; 
    transition: all 0.3s ease; 
}

.sub-input:focus { 
    border-bottom: 1px solid #000000; 
}

/* 3. PLACEHOLDER ("Pretext") */
.sub-input::placeholder { 
    color: rgba(255, 255, 255, 0.7); /* CHANGED: Was Pink (#FF007F) */
    text-shadow: none; /* CHANGED: Removed pink shadow */
    
    font-weight: 300; 
    letter-spacing: 0.05em;
    text-transform: capitalize; 
    opacity: 1; 
}

textarea.sub-input { 
    resize: none; min-height: 60px; overflow: hidden; line-height: 1.5; 
}

.row-inputs { display: flex; gap: 20px; } 
.row-inputs .sub-input { width: 50%; }

/* Button - Black Outline & Text */
#submit-btn, #appointment-submit-btn { 
    background: rgba(0, 0, 0, 0.05); 
    border: 1px solid rgba(0, 0, 0, 0.3); /* Black Border */
    color: #000000; /* BLACK TEXT */
    font-family: 'Montserrat', sans-serif; 
    font-size: 11px; 
    letter-spacing: 0.2em; 
    text-transform: uppercase; 
    padding: 12px 30px; 
    cursor: pointer; 
    transition: all 0.3s ease; 
    border-radius: 20px; 
}

#submit-btn:hover, #appointment-submit-btn:hover { 
    background: #000000; 
    color: #ffffff; 
}

#success-message { 
    display: none; 
    text-align: center; 
    animation: fadeIn 1s ease forwards; 
}

/* This forces ALL tags inside the success message to be Montserrat Lite */
#success-message,
#success-message h2,
#success-message h3,
#success-message p,
#success-message span { 
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 300 !important;
    color: #ffffff !important;
    line-height: 1.6;
    letter-spacing: 0.05em;
    margin: 10px 0;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

#footer { position: fixed; bottom: 15px; width: 100%; text-align: center; z-index: 20; }
.copyright { font-size: 10px; opacity: 0.4; color: rgb(0, 0, 0); letter-spacing: 0.05em; }
/* =========================================
   MENU & PINK ANIMATION (Original Font Preserved)
   ========================================= */
#menu-dots { 
    position: fixed; 
    top: 20px; 
    right: var(--side-gap); 
    display: flex; 
    flex-direction: column; 
    gap: 5px; 
    z-index: 10000; 
    align-items: center; 
    pointer-events: auto; 
}

.dots-container { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 9px; 
    width: 37.5px; 
    height: 45px; 
    justify-items: center; 
    align-items: center; 
    position: relative; 
}

/* DOTS: White by default */
.dot { 
    width: 2.25px; 
    height: 2.25px; 
    background-color: #ffffff; 
    position: relative; 
    cursor: pointer; 
    transition: all 0.3s ease; 
}

/* Invisible click area */
.dot::before { 
    content: ''; position: absolute; top: -6px; left: -6px; width: 16.5px; height: 16.5px; 
}

/* DOT HOVER: Turns Pink */
.dot:hover, .dot:focus, .dot:active { 
    background-color: #FF007F !important; 
    box-shadow: 0 0 10px #FF007F, 0 0 20px #FF007F; 
}

.menu-label { 
    color: #ffffff; 
    font-size: 9px; 
    font-family: 'Montserrat', sans-serif; 
    font-weight: 200;  /* Original Thin Weight */
    letter-spacing: 0.5em; /* Original Wide Spacing */
    text-align: center; 
    margin-top: 10px; 
}

/* SLIDING TEXT: White (Restored Old Animation) */
#hover-text { 
    position: absolute; 
    right: 100%; 
    margin-right: 15px; /* Tighter distance from the dots */
    top: 50%; 
    
    color: #ffffff !important; /* WHITE TEXT */
    
    font-size: 12.5px; 
    font-family: 'Montserrat', sans-serif; 
    font-weight: 300;  
    letter-spacing: 0.5em; 
    
    text-align: right; 
    white-space: nowrap; 
    
    /* HIDDEN STATE: Invisible and shifted slightly right (into the dots) */
    opacity: 0; 
    transform: translateY(-50%) translateX(20px); 
    transition: opacity 0.4s ease, transform 0.4s ease; 
    pointer-events: none;
}

/* VISIBLE STATE: Visible and slides left to natural position */
#hover-text.shown { 
    opacity: 1; 
    transform: translateY(-50%) translateX(0); 
}
/* ANIMATION BENEATH: Cyan Gradient (Restored) */
#hover-text::after { 
    content: ''; 
    position: absolute; 
    bottom: -7.5px; 
    left: 0; 
    width: 100%; 
    height: 1.5px; 
    
    background: linear-gradient(to right, transparent, #00FFFF, transparent); /* CYAN LINE */
    
    filter: blur(2.25px); 
    opacity: 0; 
    transition: opacity 0.675s ease; 
    animation: line-flicker 0.5s infinite ease-in-out; 
}

#hover-text.shown::after { 
    opacity: 1; 
}

/* Restored scaling animation for the line */
@keyframes line-flicker {
    0% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.075); }
    100% { opacity: 0.5; transform: scale(1); }
}

.services-title-wrapper { position: absolute; top: 8%; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; z-index: 25; }

/* UPDATED: Black text for White Background */
.services-title { 
    font-family: 'Montserrat', sans-serif; 
    letter-spacing: 0.5em; 
    font-size: 24px; 
    font-weight: 300; 
    color: #000000; /* CHANGED FROM WHITE TO BLACK */
    margin: 0; 
    text-transform: uppercase; 
}
.title-underline { 
    width: 0%; 
    height: 1.5px; 
    background: linear-gradient(to right, transparent, #00FFFF, transparent); 
    filter: blur(2.25px); 
    margin-top: 10px; 
    animation: line-flicker 0.5s infinite ease-in-out; 
}
#raycaster-container canvas { width: 100% !important; height: 100% !important; filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.1)); }



/* =========================================
   TALK SECTION (Final Screen)
   ========================================= */
#talk-section {
    position: absolute; /* Changed from fixed */
    top: 0; left: 0;
    width: 100%; height: 100vh; min-height: 100dvh;
    z-index: 200; 
    pointer-events: none;
    visibility: hidden; 
    overflow: hidden;
    background-color: transparent; 
    backface-visibility: hidden; transform: translateZ(0); will-change: transform;
}

/* --- NEW: HAND IMAGE WRAPPERS --- */
/* --- NEW: HAND IMAGE WRAPPERS --- */
/* --- NEW: HAND IMAGE WRAPPERS --- */
.hand-image-wrapper {
    position: absolute;
    left: 0;
    width: 100%; /* Spans the full screen so left/right alignment works */
    height: 50%; /* Each takes exactly half the screen height */
    z-index: 201; /* Sits behind your text layer (205) */
    overflow: hidden;
    will-change: transform;
    pointer-events: none; /* Ensures you can still click buttons underneath */
}

#hand-top-container {
    top: 0;
    transform: translateY(-100%); /* Slides down from top */
}

#hand-bottom-container {
    bottom: 0;
    transform: translateY(100%); /* Slides up from bottom */
}

.hand-image-inner {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    /* FIX: This forces the image to fill 100% of the vertical height, removing the top white gap! */
    background-size: auto 100%; 
}
/* --- NEW: CONTENT LAYER --- */
.talk-content-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 205; /* Sits above the hands */
    pointer-events: none; 
}

/* CENTER CONTENT WRAPPER */
.talk-hero-content {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    opacity: 0; 
    pointer-events: auto;
}

.hero-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 80px; 
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    line-height: 1.1;
}

.hero-sub {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 300;
    color: #ffffff;
    letter-spacing: 0.2em;
    margin-top: 15px;
}

.services-title-wrapper {
    position: fixed !important; /* Forces it to stay glued to the top of the screen */
    top: 8% !important;
    transition: none; 
    z-index: 250 !important; /* Must be higher than talk-section (200) so it isn't buried */
}

.services-title {
    width: auto; 
    min-width: 200px;
    text-align: center;
}

/* RIGHT PANEL POSITIONING */
#talk-right-panel {
    position: absolute;
    top: 50%;
    right: 5%; 
    transform: translateY(-50%);
    width: 450px; 
    opacity: 0;
    visibility: hidden;
    pointer-events: auto; 
    display: block;
}

/* TEXT STYLING */
.talk-description {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.8;
    color: #ffffff;
    text-align: justify;
    letter-spacing: 0.02em;
    margin-bottom: 25px;
}

.talk-divider {
    width: 100%;
    height: 1px;
    background: rgba(255,255,255,0.2);
    margin-bottom: 25px;
}

.selection-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 15px;
    display: block;
}

/* SELECTION BUTTONS */
/* SELECTION BUTTONS */
.selection-row {
    display: flex;
    gap: 15px;
}

.selection-card.glossy-rect {
    position: relative;
    flex: 1;
    overflow: hidden;
    /* RESTORED: Beautiful white glass for Dark Mode visibility */
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 25px 15px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.card-icon {
    width: 28px;
    height: 28px;
    display: block;
    color: #FF007F; 
    transition: all 0.3s ease;
}

.glass-reflection {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    /* RESTORED: Bright sweeping reflection */
    background: linear-gradient(
        45deg,
        transparent 0%,
        rgba(255, 255, 255, 0.03) 45%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.03) 55%,
        transparent 100%
    );
    transform: rotate(-20deg);
    pointer-events: none;
    transition: all 0.6s ease;
    z-index: 1; 
}

.selection-card.glossy-rect:hover {
    transform: translateY(-5px);
    /* RESTORED: Brightens up on hover */
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
}

.selection-card.glossy-rect:hover .glass-reflection {
    left: 100%;
    transition: all 0.8s ease;
}

.selection-card.glossy-rect:hover .card-icon {
    /* CHANGED: Keeps the icon pink or changes to a white color on hover */
    color: #ffffff; 
}

.selection-card.glossy-rect:hover .card-label {
    color: #ffffff;
    font-weight: 600;
}

.card-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #ffffff !important; 
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-top: 12px;
    display: block;
    text-align: center;
    width: 100%;
}

.card-png-icon {
    width: 35px;
    height: 35px;
    object-fit: contain;
    display: block;
    z-index: 20;
    transition: transform 0.3s ease;
}

.selection-card.glossy-rect:hover .card-png-icon {
    transform: scale(1.1);
    filter: brightness(0) invert(1); 
}

.icon-space-rect {
    width: 65px;
    height: 50px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10;
    transition: all 0.3s ease;
}

/* =========================================
   MEET SECTION
   ========================================= */
#meet-section {
    position: absolute; /* Changed from fixed */
    top: 0; left: 0;
    width: 100%; height: 100vh; min-height: 100dvh;
    z-index: 210; 
    pointer-events: auto;
visibility: visible;
    overflow: hidden;
    background-color: transparent; 
    backface-visibility: hidden; transform: translateZ(0); will-change: transform;
}


/* =========================================
   WELLNESS SECTION
   ========================================= */
#wellness-section {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100vh; min-height: 100dvh;
    z-index: 215;
    pointer-events: none;
    visibility: hidden; 
    overflow: hidden;
    background-color: transparent; 
    backface-visibility: hidden; transform: translateZ(0); will-change: transform;
}

.wellness-content-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    align-items: center;         
    justify-content: center;
    z-index: 216;
    opacity: 0;                  
    pointer-events: none;
    perspective: 1000px;
}

.wellness-card {
    max-width: 650px;
    padding: 60px 50px;
    text-align: center;
    pointer-events: auto;
    cursor: default;
}

.wellness-headline {
    font-family: 'Montserrat', sans-serif;
    font-size: 38px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 20px 0;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-shadow: 0 4px 20px rgba(0, 255, 255, 0.3);
}

.wellness-divider {
    width: 100px;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, #00FFFF, transparent);
    margin: 0 auto 30px auto;
    filter: blur(0.5px);
}

.wellness-description {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.8;
    letter-spacing: 0.03em;
    margin: 0;
}

/* =========================================
   PURPOSE SECTION (CENTERED PILL WITH MIRROR TAIL)
   ========================================= */
#purpose-section {
    position: absolute; 
    top: 100vh; 
    left: 0; 
    width: 100vw; 
    height: 100vh; 
    min-height: 100dvh;
    z-index: 220; 
    pointer-events: none;
    background-color: transparent; 
    visibility: hidden;
    overflow: visible !important; /* THE SHIELD FIX: Overrides HTML inline styles */
    backface-visibility: hidden; transform: translateZ(0); will-change: transform;
}

.purpose-top-white {
    width: 100%;
    height: 20vh;
    background-color: transparent;
}

.purpose-bottom-black {
    position: relative;
    width: 100%;
    height: 80vh; /* Keeps text perfectly centered with the lightbulb */
    background-color: transparent; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
    overflow: visible; 
    pointer-events: auto; 
}

/* THE FULL PILL BACKGROUND (Top and Bottom Curves) */
.purpose-bottom-black::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; 
    height: 120vh; /* Shortened to pull the bottom curve up tighter */
    background: radial-gradient(circle at 50% 30%, rgba(42, 40, 30, 0.8) 0%, #050505 90%), url('flowers.jpg');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    border-radius: 50% / 120px;
    filter: brightness(0.05) grayscale(80%); 
    transition: filter 1.5s ease;
    z-index: -2; 
}

/* Reveal color when bulb is pulled */
.purpose-bottom-black.is-illuminated::before {
    filter: brightness(1) grayscale(0%); 
}
/* Hide the text initially and give it a smooth fade */
.purpose-content-wrapper {
    opacity: 0;
    transition: opacity 1.5s ease; /* Matches the background lighting up */
}

/* Reveal the text when the light is pulled */
.purpose-bottom-black.is-illuminated .purpose-content-wrapper {
    opacity: 1;
}

/* =========================================
   4. MINIMALIST LIGHTBULB DESIGN
   ========================================= */
.light-wrapper {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 60px; height: 180px; /* Much smaller footprint */
    pointer-events: auto; cursor: pointer; z-index: 20;
}

/* Ultra-thin hanging wire */
.wire {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 1px; height: 80px; 
    background: #444;
}

/* Simple, flat geometric socket */
.socket {
    position: absolute; top: 80px; left: 50%; transform: translateX(-50%);
    width: 12px; height: 10px;
    background: #222;
    border-radius: 2px 2px 0 0;
    z-index: 2;
    transition: background 0.3s ease;
}

/* Clean, perfect circle bulb */
.bulb {
    position: absolute; top: 88px; left: 50%; transform: translateX(-50%);
    width: 32px; height: 32px; 
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s ease;
    z-index: 1;
}

/* Soft environmental glow */
.glow-effect {
    position: absolute; top: 40px; left: 50%; transform: translateX(-50%);
    width: 300px; height: 300px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 245, 200, 0.15) 0%, transparent 60%);
    opacity: 0; pointer-events: none; transition: opacity 0.5s ease;
    mix-blend-mode: screen;
}

/* =========================================
   LIGHT ON STATE
   ========================================= */
.light-wrapper:not(.off) .bulb {
    background: #ffffff; /* Pure, clean white center */
    border-color: #ffffff;
    box-shadow: 0 0 30px 10px rgba(255, 230, 150, 0.6), 
                0 0 60px 20px rgba(255, 200, 50, 0.2);
}

.light-wrapper:not(.off) .socket {
    background: #0a0a0a; /* Socket silhouettes darkly against the light */
}

.light-wrapper:not(.off) .glow-effect { 
    opacity: 1; 
}

/* =========================================
   PREMIUM GLASS BUTTON (MEET PAGE)
   ========================================= */

@property --angle-1 {
  syntax: "<angle>";
  inherits: false;
  initial-value: -75deg;
}

@property --angle-2 {
  syntax: "<angle>";
  inherits: false;
  initial-value: -45deg;
}

:root {
  --global--size: clamp(1rem, 1.5vw, 1.5rem); 
  --anim--hover-time: 400ms;
  --anim--hover-ease: cubic-bezier(0.25, 1, 0.5, 1);
}

.meet-page-btn {
    margin-top: 40px; 
    pointer-events: auto !important; 
}

.button-wrap {
  position: relative;
  z-index: 2;
  border-radius: 999vw;
  background: transparent;
  pointer-events: none;
  transition: all var(--anim--hover-time) var(--anim--hover-ease);
}

.button-shadow {
  --shadow-cuttoff-fix: 2em;
  position: absolute;
  width: calc(100% + var(--shadow-cuttoff-fix));
  height: calc(100% + var(--shadow-cuttoff-fix));
  top: calc(0% - var(--shadow-cuttoff-fix) / 2);
  left: calc(0% - var(--shadow-cuttoff-fix) / 2);
  filter: blur(clamp(2px, 0.125em, 12px));
  -webkit-filter: blur(clamp(2px, 0.125em, 12px));
  -moz-filter: blur(clamp(2px, 0.125em, 12px));
  -ms-filter: blur(clamp(2px, 0.125em, 12px));
  overflow: visible;
  pointer-events: none;
}

.button-shadow::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: 999vw;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.01));
  width: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);
  height: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);
  top: calc(var(--shadow-cuttoff-fix) + 0.3em); 
  left: calc(var(--shadow-cuttoff-fix) + 0.3em);
  padding: 0.125em;
  box-sizing: border-box;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition: all var(--anim--hover-time) var(--anim--hover-ease);
}

.button-wrap button {
  --border-width: clamp(1px, 0.0625em, 4px);
  all: unset;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  pointer-events: auto;
  z-index: 3;
  background: linear-gradient(
    -75deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0.05)
  );
  border-radius: 999vw;
  box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
    inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
    0 0.25em 0.125em -0.125em rgba(0, 0, 0, 0.2),
    0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.2),
    0 0 0 0 rgba(255, 255, 255, 1);
  backdrop-filter: blur(clamp(1px, 0.125em, 4px));
  -webkit-backdrop-filter: blur(clamp(1px, 0.125em, 4px));
  -moz-backdrop-filter: blur(clamp(1px, 0.125em, 4px));
  -ms-backdrop-filter: blur(clamp(1px, 0.125em, 4px));
  transition: all var(--anim--hover-time) var(--anim--hover-ease);
}

.button-wrap button:hover {
  transform: scale(0.975);
  backdrop-filter: blur(0.01em);
  -webkit-backdrop-filter: blur(0.01em);
  -moz-backdrop-filter: blur(0.01em);
  -ms-backdrop-filter: blur(0.01em);
  box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
    inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
    0 0.15em 0.05em -0.1em rgba(0, 0, 0, 0.25),
    0 0 0.05em 0.1em inset rgba(255, 255, 255, 0.5),
    0 0 0 0 rgba(255, 255, 255, 1);
}

.button-wrap button span {
  position: relative;
  display: block;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 1em;
  color: rgba(50, 50, 50, 1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: 0em 0.25em 0.05em rgba(0, 0, 0, 0.1);
  transition: all var(--anim--hover-time) var(--anim--hover-ease);
  padding-inline: 1.5em;
  padding-block: 0.875em;
}

.button-wrap button:hover span {
  text-shadow: 0.025em 0.025em 0.025em rgba(0, 0, 0, 0.12);
}

.button-wrap button span::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  width: calc(100% - var(--border-width)); 
  height: calc(100% - var(--border-width));
  top: calc(0% + var(--border-width) / 2);
  left: calc(0% + var(--border-width) / 2);
  box-sizing: border-box;
  border-radius: 999vw;
  overflow: clip;
  background: linear-gradient(
    var(--angle-2),
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 40% 50%,
    rgba(255, 255, 255, 0) 55%
  );
  z-index: 3;
  mix-blend-mode: screen;
  pointer-events: none;
  background-size: 200% 200%;
  background-position: 0% 50%;
  background-repeat: no-repeat;
  transition: background-position calc(var(--anim--hover-time) * 1.25)
      var(--anim--hover-ease),
    --angle-2 calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease);
}

.button-wrap button:hover span::after {
  background-position: 25% 50%;
}

.button-wrap button:active span::after {
  background-position: 50% 15%;
  --angle-2: -15deg;
}

@media (hover: none) and (pointer: coarse) {
  .button-wrap button span::after,
  .button-wrap button:active span::after {
    --angle-2: -45deg;
  }
}

.button-wrap button::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: 999vw;
  width: calc(100% + var(--border-width));
  height: calc(100% + var(--border-width));
  top: calc(0% - var(--border-width) / 2);
  left: calc(0% - var(--border-width) / 2);
  padding: var(--border-width);
  box-sizing: border-box;
  background: conic-gradient(
      from var(--angle-1) at 50% 50%,
      rgba(255, 255, 255, 0.8),
      rgba(255, 255, 255, 0) 5% 40%,
      rgba(255, 255, 255, 0.8) 50%,
      rgba(255, 255, 255, 0) 60% 95%,
      rgba(255, 255, 255, 0.8)
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition: all var(--anim--hover-time) var(--anim--hover-ease), --angle-1 500ms ease;
  box-shadow: inset 0 0 0 calc(var(--border-width) / 2) rgba(255, 255, 255, 0.5);
}

.button-wrap button:hover::after {
  --angle-1: -125deg;
}

.button-wrap button:active::after {
  --angle-1: -75deg;
}

@media (hover: none) and (pointer: coarse) {
  .button-wrap button::after,
  .button-wrap button:hover::after,
  .button-wrap button:active::after {
    --angle-1: -75deg;
  }
}

.button-wrap:has(button:hover) .button-shadow {
  filter: blur(clamp(2px, 0.0625em, 6px));
  -webkit-filter: blur(clamp(2px, 0.0625em, 6px));
  -moz-filter: blur(clamp(2px, 0.0625em, 6px));
  -ms-filter: blur(clamp(2px, 0.0625em, 6px));
  transition: filter var(--anim--hover-time) var(--anim--hover-ease);
}

.button-wrap:has(button:hover) .button-shadow::after {
  top: calc(var(--shadow-cuttoff-fix) - 0.875em);
  opacity: 1;
}

.button-wrap:has(button:active) {
  transform: rotate3d(1, 0, 0, 25deg);
}

.button-wrap:has(button:active) button {
  box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
    inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
    0 0.125em 0.125em -0.125em rgba(0, 0, 0, 0.2),
    0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.2),
    0 0.225em 0.05em 0 rgba(0, 0, 0, 0.05),
    0 0.25em 0 0 rgba(255, 255, 255, 0.75),
    inset 0 0.25em 0.05em 0 rgba(0, 0, 0, 0.15);
}

.button-wrap:has(button:active) .button-shadow {
  filter: blur(clamp(2px, 0.125em, 12px));
  -webkit-filter: blur(clamp(2px, 0.125em, 12px));
  -moz-filter: blur(clamp(2px, 0.125em, 12px));
  -ms-filter: blur(clamp(2px, 0.125em, 12px));
}

.button-wrap:has(button:active) .button-shadow::after {
  top: calc(var(--shadow-cuttoff-fix) - 0.5em);
  opacity: 0.75;
}

.button-wrap:has(button:active) span {
  text-shadow: 0.025em 0.25em 0.05em rgba(0, 0, 0, 0.12);
}

/* =========================================
   SERVICES FINALE "JOIN THE MOVEMENT" WRAPPER
   ========================================= */

#services-subscribe-wrapper {
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%); 
    z-index: 2000; 
    opacity: 0;
    visibility: hidden;
    pointer-events: auto !important; 
}

#services-subscribe-wrapper .button-wrap {
    transform: scale(1.3); 
    transform-origin: center center;
}

/* =========================================
   CLEAN MEET PAGE LAYOUT
   ========================================= */
.meet-content-layer {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    display: flex;
    align-items: center;         
    justify-content: flex-end; /* Shifts the content block to the right */
    padding-right: 10vw;       /* Adds breathing room on the right edge */
    box-sizing: border-box;
    z-index: 205;
    opacity: 0;                  
    pointer-events: none;
}

.meet-text-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 550px;
    pointer-events: auto;
}

.meet-headline {
    font-family: 'Montserrat', sans-serif;
    font-size: 42px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 20px 0;
    line-height: 1.2;
    letter-spacing: 0.05em;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.meet-divider {
    width: 60px;
    height: 2px;
    background: #00FFFF;
    margin-bottom: 25px;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.meet-description {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.8;
    letter-spacing: 0.03em;
    margin: 0 0 45px 0;
    text-align: justify;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* THE BUTTON CONTAINER */
.meet-button-container {
    pointer-events: auto;
}

.meet-page-btn {
    margin: 0;
}

#vangogh-canvas {
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%); /* Perfectly centers the container */
    width: 0vh; /* Starts as a tiny dot */
    height: 0vh; 
    border-radius: 50%; /* Makes the container a perfect physical circle */
    overflow: hidden; /* Hides the corners of the video */
    z-index: 25; 
    pointer-events: none; /* THE SHIELD FIX */
}

#vangogh-canvas img {
    width: 100%; 
    height: 100%;
    object-fit: cover; 
    display: block;
    transform: scale(1.1); 
    
    /* Boosts highlights to create glossy peaks and darkens the rest */
    filter: grayscale(100%) contrast(3) brightness(0.6);
    
    /* THE MAGIC: Drops all black pixels to reveal the background, making it look like glowing glass */
    mix-blend-mode: screen; 
    opacity: 0.45; /* Adjust this to make the gloss stronger or softer */
}

/* =========================================
   SCROLLYTELLING SERVICES & VIDEO CANVAS
   ========================================= */


#vangogh-canvas video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%; /* Increased width slightly for better cropping in a smaller circle */
    height: 120%;
    object-fit: cover; 
    display: block;
}

#scroll-services-wrapper {
    position: absolute;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 30; 
    pointer-events: none;
}

/* BULLETPROOF CENTERING: GSAP cannot break this flexbox */
.scroll-service-item {
    position: absolute;
    top: 0; left: 0;
    width: 100vw; 
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center; 
    opacity: 0; 
    visibility: hidden;
}

/* =========================================
   STARRY NIGHT "SUN" PORTALS
   ========================================= */
.glass-circle {
    width: 260px;  
    height: 260px; 
    border-radius: 50%;
    
    /* THE BUBBLE LOOK: Translucent gradient with iridescent inner shadows */
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0.7) 100%);
    box-shadow: 
        inset 0 0 20px rgba(255,255,255,0.7),
        inset 10px 0 40px rgba(255,255,255,0.5),
        inset -10px 0 30px rgba(0, 255, 255, 0.15), /* Subtle cyan reflection */
        0 15px 35px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 25px;
    box-sizing: border-box;
    position: relative; /* Needed for the highlight */
    
    -webkit-font-smoothing: antialiased;
    transform: translateZ(0); 
    will-change: transform, opacity;
}

/* THE BUBBLE HIGHLIGHT: Creates a curved light reflection on the top left */
.glass-circle::before {
    content: '';
    position: absolute;
    top: 8%;
    left: 15%;
    width: 35%;
    height: 15%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    filter: blur(2px);
    transform: rotate(-35deg);
    pointer-events: none;
    z-index: 0;
}

/* Ensure text stays above the highlight */
.glass-circle h2, .glass-circle p {
    z-index: 2;
    position: relative;
}

/* Dark, elegant text against the white sun */
/* UPDATED: Smaller, elegant titles for the Sun Portals */
.glass-circle h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;        /* Reduced from 22px for a premium look */
    font-weight: 600;        /* Slightly lighter weight */
    color: #000000;
    margin: 0 0 8px 0;
    letter-spacing: 0.25em;  /* Increased spacing for elegance */
    text-transform: uppercase;
    text-align: center;
}

/* Optional: Slight adjustment to the description text for hierarchy */
.glass-circle p {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;        /* Slightly smaller to match the new title size */
    font-weight: 400;
    color: #444444;
    margin: 0;
    letter-spacing: 0.05em;
    line-height: 1.6;
    max-width: 85%;         /* Keeps text contained and readable */
}

/* =========================================
   SERVICES FINALE PILL BUTTON WRAPPER
   ========================================= */
/* Centers the button perfectly in the middle of the page during the constellation finale */
#services-subscribe-wrapper {
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%); 
    z-index: 2000; 
    opacity: 0;
    visibility: hidden;
    pointer-events: auto !important; 
}

/* Scaled up by 30% to make it prominent in the empty center */
#services-subscribe-wrapper .button-wrap {
    transform: scale(1.3); 
    transform-origin: center center;
}
/* =========================================
   SERVICE ORBS: FLOAT & HOVER EFFECTS
   ========================================= */

/* 1. Enable Interactions & Smooth Transitions */
.glass-circle {
    pointer-events: auto; /* Allows the circles to be clickable/hoverable through their wrapper */
    cursor: pointer;
    
    /* We ONLY transition properties GSAP isn't animating to prevent stuttering */
    transition: box-shadow 0.4s ease, scale 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* Attach the idle floating animation */
    animation: float-services 5s ease-in-out infinite;
}

/* 2. The Hover Reaction */
.glass-circle:hover {
    /* Independent CSS scale property multiplies beautifully with GSAP's transform scale */
    scale: 1.1; 
    
    /* Intensify the glow on hover */
    box-shadow: 
        0 0 70px rgba(255, 255, 255, 1),        
        0 0 140px rgba(255, 255, 255, 0.9),       
        0 0 250px rgba(255, 255, 255, 0.7);
}

/* 3. The Idle Floating Animation */
@keyframes float-services {
    0%, 100% { translate: 0px 0px; }
    50% { translate: 0px -15px; }
}

/* 4. Organic Offsets 
   We stagger the animation speeds and delays so they don't all bounce up and down 
   at the exact same robotic time. This gives it a natural, breathing feel. */
.scroll-service-item:nth-child(1) .glass-circle { animation-delay: 0.0s; animation-duration: 5.2s; }
.scroll-service-item:nth-child(2) .glass-circle { animation-delay: -1.2s; animation-duration: 4.8s; }
.scroll-service-item:nth-child(3) .glass-circle { animation-delay: -2.4s; animation-duration: 5.5s; }
.scroll-service-item:nth-child(4) .glass-circle { animation-delay: -0.8s; animation-duration: 4.5s; }
.scroll-service-item:nth-child(5) .glass-circle { animation-delay: -3.1s; animation-duration: 5.1s; }
.scroll-service-item:nth-child(6) .glass-circle { animation-delay: -1.9s; animation-duration: 4.9s; }
.scroll-service-item:nth-child(7) .glass-circle { animation-delay: -0.5s; animation-duration: 5.3s; }
.scroll-service-item:nth-child(8) .glass-circle { animation-delay: -2.7s; animation-duration: 4.7s; }
.scroll-service-item:nth-child(9) .glass-circle { animation-delay: -1.5s; animation-duration: 5.4s; }

/* =========================================
   MAGNETIC HOVER VARIABLES & KEYFRAMES
   ========================================= */

/* Register custom properties so they can be transitioned smoothly */
@property --mx {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
@property --my {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

/* Add the transition for the magnetic snap-back */
.glass-circle {
    transition: box-shadow 0.4s ease, scale 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), --mx 0.5s ease-out, --my 0.5s ease-out;
}

/* Replace the old float-services keyframes with this upgraded version */
@keyframes float-services {
    0%, 100% { translate: var(--mx, 0px) var(--my, 0px); }
    50% { translate: var(--mx, 0px) calc(var(--my, 0px) - 15px); }
}

/* Ensure text inside small constellation orbs is still elegant but scales with the box */
.glass-circle.constellation-mode h2, 
.glass-circle.constellation-mode p {
    transition: transform 0.4s ease, opacity 0.4s ease;
}

/* Optional: You can hide the description p tag when small, and reveal it on hover */
.glass-circle.constellation-mode:not(:hover) p {
    opacity: 0;
    transform: translateY(10px);
}

.glass-circle.constellation-mode:hover p {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   MEET SECTION: FLOATING BLACK HOLE
   ========================================= */
/* Box container removed for text layout */


#neural-network-canvas {
    display: block;
    width: 100%; height: 100%;
    cursor: crosshair;
    position: absolute;
    top: 0; left: 0;
    z-index: 1;
    pointer-events: auto !important; /* Fixes interaction pulses */
}

/* Allow clicks to pass through the Meet layout to the canvas */
.meet-content-layer {
    pointer-events: none !important;
}
.meet-button-container {
    pointer-events: auto !important; /* Keep Connect button clickable */
}

/* UI Elements */
:root {
    --nn-glass-border: rgba(255, 255, 255, 0.08);
    --nn-glass-highlight: rgba(255, 255, 255, 0.2);
    --nn-text-main: rgba(255, 255, 255, 0.9);
    --nn-text-muted: rgba(255, 255, 255, 0.6);
}



#density-controls { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.density-label { display: flex; justify-content: space-between; font-size: 13px; color: var(--nn-text-muted); font-weight: 300; }
#density-value { color: white; font-weight: 500; text-shadow: 0 0 10px rgba(255,255,255,0.3); }

.density-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: rgba(255,255,255,0.1); border-radius: 10px; outline: none; box-shadow: inset 0 1px 2px rgba(0,0,0,0.3); }
.density-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; cursor: pointer; box-shadow: 0 0 15px rgba(255,255,255,0.8), 0 2px 5px rgba(0,0,0,0.3); transition: all 0.2s ease; margin-top: -6px; position: relative; z-index: 2; }
.density-slider::-webkit-slider-runnable-track { width: 100%; height: 6px; cursor: pointer; background: linear-gradient(90deg, rgba(255,255,255,0.3) var(--val, 100%), rgba(255,255,255,0.05) var(--val, 100%)); border-radius: 3px; }
.density-slider::-webkit-slider-thumb:hover { transform: scale(1.2); box-shadow: 0 0 20px rgba(255,255,255,1); }


/* =========================================
   FRACTAL TRANSITION LAYER
   ========================================= */
#desynchronizer-wrapper {
    position: absolute;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 5; /* Above plasma, below services */
    pointer-events: none;
    opacity: 0; 
    visibility: hidden;
    /* THE SILVER BULLET: Makes all black pixels 100% invisible natively */
    mix-blend-mode: screen; 
}

#desynchronizer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
}

/* =========================================
   RESTORED: PLASMA & GLOW LAYERS
   ========================================= */
#background {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(to right, #182c4a 0%, rgba(24, 44, 74, 0.5) 25%, rgba(0, 229, 255, 0.15) 50%);
}

#plasma-canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    mix-blend-mode: screen;
    opacity: var(--plasma-intensity);
    filter: blur(37.5px);
}

.glow-container {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    will-change: transform;
    transition: transform 0.225s ease-out;
}

.glow {
    position: absolute;
    mix-blend-mode: screen;
    filter: blur(var(--glow-blur));
    opacity: 0.6;
}

.glow-primary {
    background: radial-gradient(circle at 50% 50%, var(--primary-glow) 0%, transparent 80%);
    top: -50%; left: 33%; width: 100%; height: 200%;
    animation: drift-primary var(--animation-speed) ease-in-out infinite;
}

.glow-secondary {
    background: linear-gradient(to right, transparent 0%, #93e3cc4d 20%, var(--secondary-glow) 50%, transparent 100%);
    top: 0; left: 20%; width: 100%; height: 100%;
    opacity: 0.5;
    animation: drift-secondary calc(var(--animation-speed) * 1.5) ease-in-out infinite;
}

.glow-white {
    background: radial-gradient(circle at 50% 50%, var(--white-glow) 0%, transparent 80%);
    top: -50%; left: 33%; width: 100%; height: 200%;
    opacity: 0.2;
    animation: drift-white calc(var(--animation-speed) * 1.2) ease-in-out infinite;
}

/* DRIFT ANIMATIONS */
@keyframes drift-primary {
    0%, 100% { transform: translate(0%, 0%) rotate(0deg); }
    50% { transform: translate(10%, 15%) rotate(-5deg); }
}

@keyframes drift-secondary {
    0%, 100% { transform: translate(0%, 0%) scale(1); }
    50% { transform: translate(-10%, 10%) scale(1.1); }
}

@keyframes drift-white {
    0%, 100% { transform: translate(5%, -5%) rotate(5deg); }
    50% { transform: translate(15%, 10%) rotate(-5deg); }
}

/* Ensure Team Section receives GPU acceleration */
#team-section {
    min-height: 100dvh;
    backface-visibility: hidden; 
    transform: translateZ(0); 
    will-change: transform;
}

#central-heart {
    width: 100%;
    max-width: 800px;
    height: auto;
    aspect-ratio: 720 / 300;
    margin: 0 auto 15px auto;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    clip-path: polygon(50% 90%, 25% 70%, 25% 50%, 37.5% 30%, 50% 45%, 62.5% 30%, 75% 50%, 75% 70%, 50% 90%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 15;
    pointer-events: auto; /* Enables hover and clicks */
}

#central-heart:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* =========================================
   NEW POLYGONAL HEART PRELOADER
   ========================================= */
#preloader {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 99999;
    background-color: #1829ad;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

#preloader svg {
    /* Scaled up massively so the button fits inside the center gap */
    width: 1200px; 
    max-width: 150vw; /* Allows it to bleed off the edges on mobile for a cinematic look */
    height: auto;
    transition: transform 1s ease;
}

#preloader path {
    fill: transparent; 
    stroke: rgba(255, 255, 255, 0.5); /* Ghostly, sleek base */
    stroke-width: 0.35; /* Restored razor-thin minimalist look */
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)); /* Very subtle ambient glow */
    pointer-events: all; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Snappy but smooth transition */
    cursor: crosshair; 
}

/* The Intense Modern Hover Glow */
#preloader path:hover {
    stroke: #ffffff; /* Pure white hot core */
    stroke-width: 0.6; /* Barely thickens, just enough to hold the intense light */
    fill: rgba(0, 255, 255, 0.03); /* Extremely subtle cyan glass fill inside the polygon */
    
    /* Massive triple-layered modern plasma glow */
    filter: drop-shadow(0 0 5px #ffffff) 
            drop-shadow(0 0 15px #00FFFF) 
            drop-shadow(0 0 30px #0096FF); 
    z-index: 10;
}

/* The Interactive Glow Effect */
#preloader path:hover {
    stroke: #ffffff; /* Crisp pure white */
    stroke-width: 1.2; /* Thickens slightly to stand out */
    fill: rgba(255, 255, 255, 0.02); /* Barely-there glass fill */
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 25px rgba(0, 255, 255, 0.5)); /* Double layered cyan & white glow */
    z-index: 10; /* Brings the glowing path to the front visually */
}

/* RESTORED PREMIUM ENTER BUTTON */
#preloader-enter-circle {
    position: absolute; 
    top: 50%; left: 50%; 
    transform: translate(-50%, -50%); 
    width: 110px; height: 110px; /* Reduced from 140px for a more refined look */
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08); /* Slightly more delicate glass fill */
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 100; opacity: 0; visibility: hidden; transition: all 0.8s ease;
}

#preloader-enter-circle.ready { opacity: 1; visibility: visible; }

#preloader-enter-circle:hover { 
    background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.8);
    transform: translate(-50%, -50%) scale(1.05);
}

.enter-text { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 300; color: white; letter-spacing: 0.5em; text-indent: 0.5em; }

#preloader.fade-out {
    opacity: 0;
    pointer-events: none;
}

/* Continuous elegant rotation for the heart flower */
@keyframes flower-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

#heartContainer.spin {
    transform-origin: 360px 170px; /* Locked to the exact drawing pivot */
    animation: flower-spin 45s linear infinite;
}

/* =========================================
   PURE CSS ORGANIC BLOB (TALK PAGE)
   ========================================= */
#companion-blob-container {
    position: absolute;
    bottom: 8%;
    left: 8%;
    width: 140px;
    height: 140px;
    z-index: 250;
    
    /* Hidden Initially */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.9);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    
    display: flex;
    justify-content: center;
    align-items: center;
}

#companion-blob-container.revealed {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* The Magic Shape */
.pure-black-blob {
    width: 100%;
    height: 100%;
    background-color: #000000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); /* Soft shadow to give it presence */
    
    /* Complex border radius gives the fluid, liquid shape */
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    
    /* Smooth, continuous breathing animation */
    animation: morph-blob 8s ease-in-out infinite alternate;
}

/* The Morphing Animation */
@keyframes morph-blob {
    0% {
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
        transform: scale(1) rotate(0deg);
    }
    34% {
        border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
        transform: scale(1.02) rotate(45deg);
    }
    67% {
        border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
        transform: scale(0.98) rotate(90deg);
    }
    100% {
        border-radius: 30% 70% 40% 60% / 50% 40% 70% 40%;
        transform: scale(1.05) rotate(135deg);
    }
}
/* =========================================
   TALK PAGE: LEFT CORNER BLOB HELPLINE
   ========================================= */
#left-blob-panel {
    position: absolute;
    bottom: 5%;
    left: 3%;
    width: 420px;
    height: 420px;
    z-index: 250;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Hidden Initially */
    opacity: 0;
    visibility: hidden;
    transform: scale(0.8) translateY(30px);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

#left-blob-panel.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

/* The Breathing Black Shape */
.corner-blob-shape {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: #000000;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
    z-index: 1;
    
    /* Pure CSS Morphing */
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    animation: morph-corner-blob 12s ease-in-out infinite alternate;
}

@keyframes morph-corner-blob {
    0%   { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; transform: scale(1) rotate(0deg); }
    34%  { border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%; transform: scale(1.02) rotate(15deg); }
    67%  { border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%; transform: scale(0.98) rotate(30deg); }
    100% { border-radius: 30% 70% 40% 60% / 50% 40% 70% 40%; transform: scale(1.04) rotate(45deg); }
}

/* Text Content Inside the Blob */
.blob-text-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 85%;
}

.blob-text-content p {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 300;
    line-height: 1.6;
    color: #ffffff;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
}

#helpline-timer {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.15em;
    margin-top: 15px;
    margin-bottom: 8px;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.4);
}

.blob-text-content .govt-text {
    font-size: 8px;
    font-weight: 300;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.5;
    margin-bottom: 25px;
}

.close-button {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 10px 30px;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.close-button:hover {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

/* =========================================
   MEET PAGE: INLINE FORM STYLES
   ========================================= */
.meet-text-wrapper {
    position: relative; /* Keeps the intro and form overlapping cleanly */
    width: 100%;
    max-width: 550px;
}

.meet-intro-block {
    position: relative;
    width: 100%;
    pointer-events: auto;
}

.meet-form-block {
    position: absolute; /* Overlays perfectly on top of where the intro was */
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: auto;
}

.meet-form-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
}

.form-title {
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 500;
    margin: 0;
    letter-spacing: 0.05em;
}

#meet-back-btn {
    background: none;
    border: none;
    color: #00FFFF;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 5px 10px 5px 0;
    transition: color 0.3s ease, transform 0.3s ease;
}
#meet-back-btn:hover { 
    color: #ffffff; 
    transform: translateX(-3px);
}

.meet-input-stack {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Tighter vertical spacing */
}

/* Minimalist styling: completely transparent, thin lines, smaller text */
.inline-input {
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 8px 0px; /* Flush edges */
    border-radius: 0;
    font-size: 13px; /* More elegant font sizing */
    transition: border-color 0.3s ease;
}
.inline-input:focus {
    border-bottom: 1px solid #00FFFF;
    background: transparent;
}
.form-title {
    font-size: 18px; /* Slightly refined title size */
}
.inline-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.form-submit-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 15px 30px;
    margin-top: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 30px;
    width: fit-content;
}
.form-submit-btn:hover { 
    background: #ffffff; 
    color: #000000; 
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

/* Modern Service Selector Styles */
.service-selector-container {
    margin-top: 5px;
    margin-bottom: 5px;
}
.selector-label {
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    margin-bottom: 10px;
}
.service-options {
    display: flex;
    gap: 15px;
}
.service-btn {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    padding: 12px 0;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}
.service-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}
.service-btn.active {
    background: rgba(255, 255, 255, 0.15); /* White glass tint */
    border-color: #ffffff;
    color: #ffffff;
    font-weight: 500;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); /* Soft white glow */
}
/* Error state for validation */
.service-options.error-glow .service-btn {
    border-color: #ff4d4d;
}

/* =========================================
   TEAM PAGE 4-GRID LAYOUT
   ========================================= */
.team-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    width: 90%;
    max-width: 1200px;
    pointer-events: auto; 
    margin-top: 12vh; /* NEW: Brings the pictures/cards further down the screen */
}

.team-member-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Image Container */
.team-reveal-container, .team-placeholder-img {
    width: 100%;
    aspect-ratio: 3 / 4; /* Perfect portrait framing */
    position: relative;
    border-radius: 50%; /* CHANGED: 50% on a rectangle makes a perfect oval */
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.25);
    /* NEW: Cinematic base glow (soft white and subtle cyan) */
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.15), 
                0 0 40px rgba(0, 255, 255, 0.1),
                0 15px 35px rgba(0, 0, 0, 0.5);
    margin-bottom: 20px;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.team-reveal-container {
    cursor: crosshair;
    pointer-events: auto !important;
}

/* NEW: The glow intensifies and the card lifts slightly when hovered */
.team-member-card:hover .team-reveal-container {
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.4), 
                0 0 60px rgba(0, 255, 255, 0.3),
                0 15px 35px rgba(0, 0, 0, 0.6);
    transform: translateY(-5px);
}

.team-placeholder-img {
    background: rgba(255, 255, 255, 0.05); /* Just an empty box for the others for now */
}

/* Base Image and Canvas Setup */
.team-overlay-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 1; 
    filter: contrast(1.1) saturate(1.2);
}

.team-base-canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 2; 
    pointer-events: auto; 
}

/* Bio Text Styles */
.team-bio-section {
    width: 100%;
}

.team-member-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 5px 0;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.team-member-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: #00FFFF;
    margin: 0 0 12px 0;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.team-member-desc {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6; /* 1.6em per line */
    margin: 0;
    
    /* FIX: Uses max-height for a smooth, warning-free animation */
    max-height: 4.8em; /* Exactly 3 lines of text (1.6 line-height * 3) */
    overflow: hidden;
    transition: max-height 0.6s cubic-bezier(0.25, 1, 0.5, 1), color 0.3s ease;
}

/* Expands the text smoothly when you hover over the team member card */
.team-member-card:hover .team-member-desc {
    max-height: 500px; /* Gives it plenty of room to slide open smoothly */
    color: rgba(255, 255, 255, 0.95); /* Brightens text slightly for easier reading */
}
#heart-3d-canvas {
    position: fixed; 
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    
    /* THE FIX: Lowered to 1. 
       Now it sits safely beneath all sections (z-index 2-10) 
       but above the plasma background (z-index -1) */
    z-index: 1; 
    
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
#heart-glass-polygon {
    position: relative;
    z-index: 1;
    width: 100%; height: 100%;
}

/* CRITICAL OVERRIDE FOR MEET BUTTON */
#meet-connect-btn, 
#meet-connect-btn * {
    pointer-events: auto !important;
    cursor: pointer !important;
}

.meet-button-container {
    position: relative !important;
    z-index: 99999 !important;
    pointer-events: auto !important;
}

/* =========================================
   STRESS BALL TEXT & ICON
   ========================================= */
/* =========================================
   STRESS BALL TEXT & ICON
   ========================================= */
#chatbot-stress-ball {
  position: fixed;
  top: 0; left: 0;
  width: 120px; height: 120px;
  
  background-color: rgba(24, 44, 74, 0.8);
  background-image: url("https://emils.graphics/shared/stress-ball-1.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: 50%;
  
  box-shadow: 
    inset -15px -15px 25px rgba(0, 0, 0, 0.7),
    inset 15px 15px 25px rgba(255, 255, 255, 0.5),
    inset -5px -5px 15px rgba(0, 255, 255, 0.3),
    0 20px 40px rgba(0, 0, 0, 0.35);
    
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  z-index: 99998; 
  opacity: 0; pointer-events: none; 
  transform-style: preserve-3d;
  transform-origin: center center;
  
  /* OPTIMIZATION: Only cache transform. Caching filters kills frame rates. */
  will-change: transform;
  transition: opacity 0.8s ease; 
  
  display: flex;
  align-items: center;
  justify-content: center;
}

/* THE BUBBLE GLOSS HIGHLIGHT */
#chatbot-stress-ball::before {
  content: '';
  position: absolute;
  top: 8%;
  left: 15%;
  width: 45%;
  height: 25%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 70%);
  transform: rotate(-35deg);
  pointer-events: none;
  z-index: 1; 
  mix-blend-mode: overlay; /* Blends the highlight naturally with the image */
}

/* --- NEW: Desktop Ball Hint --- */
.ball-hint {
    position: absolute;
    bottom: -28px; /* MOVED TO BOTTOM */
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    white-space: nowrap;
    pointer-events: none;
    
    opacity: 0; 
    transition: opacity 0.5s ease;
}

/* Only show the hint when the ball is specifically 'at-home' */
#chatbot-stress-ball.at-home .ball-hint {
    opacity: 1;
}

/* Force hide when dragging, just to be safe during the initial grab */
#chatbot-stress-ball.dragging .ball-hint {
    opacity: 0 !important;
}

/* Light Mode Override */
body.light-mode .ball-hint {
    color: rgba(0, 0, 0, 0.4);
}
/* Ensure the text sits ABOVE the new gloss highlight */
.ball-text {
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 200; 
  font-size: 11px;  
  line-height: 1.2;
  text-align: center;
  letter-spacing: 0.25em; 
  /* text-transform: uppercase;  <-- DELETED THIS LINE */
  text-shadow: 0 0 15px rgba(0, 255, 255, 0.8), 0 2px 5px rgba(0, 0, 0, 0.6);
  
  position: relative;
  z-index: 2; 
  
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  pointer-events: none;
  
  transition: none !important; 
  will-change: transform;
}

/* Enhancing the hover state to pop even more */
#chatbot-stress-ball.ready {
  opacity: 1; pointer-events: auto; cursor: grab; touch-action: none;
}
#chatbot-stress-ball.ready:hover {
  filter: brightness(1.2); 
  box-shadow: 
    inset -15px -15px 25px rgba(0, 0, 0, 0.7),
    inset 15px 15px 30px rgba(255, 255, 255, 0.7), /* Brighter inset on hover */
    inset -5px -5px 15px rgba(0, 255, 255, 0.5),
    0 25px 50px rgba(0, 0, 0, 0.45);
}
#chatbot-stress-ball.dragging {
  cursor: grabbing !important; 
  
  /* OPTIMIZATION: Strip all expensive UI effects while the ball is moving */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5) !important; 
}

/* =========================================
   CIRCULAR WARP CHAT INTERFACE (PLASMA)
   ========================================= */
/* =========================================
   CIRCULAR WARP CHAT INTERFACE (PLASMA)
   ========================================= */
#appta-chat-warp {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  opacity: 0;
  background: rgba(0, 0, 0, 0.7); 
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  transition: opacity 0.4s ease;
}

#appta-chat-warp.chat-active {
  opacity: 1;
  pointer-events: auto;
}

.chat-glowing-orb {
  width: 540px; height: 540px; 
  max-width: 95vw; max-height: 95vw;
  border-radius: 50%; 
  background: rgba(5, 5, 8, 0.96); 
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden; 
  box-shadow: 0 0 40px 5px var(--primary-glow), 0 0 100px 20px rgba(0, 255, 255, 0.2), inset 0 0 60px rgba(255, 255, 255, 0.1);
  transform: scale(0.4);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
  animation: plasma-orb-flow 6s infinite alternate ease-in-out;
}

#appta-chat-warp.chat-active .chat-glowing-orb {
  transform: scale(1);
  opacity: 1;
}

@keyframes plasma-orb-flow {
    0% { box-shadow: 0 0 30px 5px rgba(0, 255, 255, 0.5), 0 0 70px 15px rgba(168, 222, 207, 0.2), inset 0 0 40px rgba(255, 255, 255, 0.1); }
    50% { box-shadow: 0 0 50px 10px rgba(255, 255, 255, 0.4), 0 0 110px 25px rgba(0, 255, 255, 0.3), inset 0 0 70px rgba(0, 255, 255, 0.2); }
    100% { box-shadow: 0 0 40px 8px rgba(168, 222, 207, 0.6), 0 0 90px 20px rgba(255, 255, 255, 0.2), inset 0 0 50px rgba(168, 222, 207, 0.15); }
}

.chat-header {
  padding: 85px 20px 10px;
  display: flex; justify-content: center; align-items: center;
  position: relative;
  color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 600; 
  letter-spacing: 0.2em; text-transform: uppercase; font-size: 11px;
}

#close-chat-btn {
  position: absolute; right: 80px; top: 82px;
  background: none; border: none; color: #fff; font-size: 22px; cursor: pointer; opacity: 0.5; transition: 0.3s;
}

/* --- FIXED SCROLLING CONTAINER --- */
.chat-body {
  flex: 1; 
  padding: 10px 80px; 
  display: flex; 
  flex-direction: column; 
  gap: 12px;
  
  /* FORCE SCROLLING PRIORITY */
  overflow-y: auto !important; 
  pointer-events: auto !important; 
  
  /* Thin white scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

/* Scrollbar styling for Chrome/Safari */
.chat-body::-webkit-scrollbar { width: 4px; display: block; }
.chat-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 10px; }

/* Custom Scrollbar for Chrome/Safari */
.chat-body::-webkit-scrollbar {
  width: 4px;
  display: block;
}
.chat-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 10px;
}

.chat-bubble {
  max-width: 90%; padding: 8px 12px; border-radius: 15px;
  font-family: 'Montserrat', sans-serif; font-size: 11px; line-height: 1.4; color: #fff; font-weight: 300;
  word-wrap: break-word; /* Prevents long text from breaking the layout */
}
.ai-bubble { background: rgba(255, 255, 255, 0.12); border-bottom-left-radius: 4px; align-self: flex-start; }
.user-bubble { background: rgba(0, 255, 255, 0.15); border: 1px solid rgba(0, 255, 255, 0.2); border-bottom-right-radius: 4px; align-self: flex-end; }

.chat-input-area { padding: 10px 90px 85px; display: flex; justify-content: center; }
.input-wrapper {
  display: flex; gap: 8px; width: 100%; background: rgba(255, 255, 255, 0.08); 
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; padding: 4px 8px; backdrop-filter: blur(10px);
}
.input-wrapper input { flex: 1; background: transparent; border: none; padding: 8px; color: #fff; font-family: 'Montserrat', sans-serif; font-size: 11px; outline: none; }
.send-btn { background: #ffffff; border: none; width: 28px; height: 28px; border-radius: 50%; color: #000; cursor: pointer; display: flex; align-items: center; justify-content: center; }


/* =========================================
   THEME TOGGLE BUTTON (MINIMALIST DOT)
   ========================================= */
/* =========================================
   THEME TOGGLE BUTTON (VERTICAL CAPSULE)
   ========================================= */
#theme-toggle {
    position: fixed; /* This stays! */
    bottom: 70px;
    left: 23px; 
    z-index: 90000;
    width: 30px;
    height: 54px;
    padding: 0;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    display: flex;
    justify-content: center;
    /* position: relative;  <-- REMOVE THIS LINE */
    transition: all 0.4s ease;
}

#theme-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* The Sliding Dot Inside */
.toggle-dot {
    position: absolute;
    bottom: 4px; /* Rests at bottom for Dark Mode */
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.4s ease;
}

/* Hide the old text span just in case it's lingering */
.mode-text { display: none !important; }

/* --- LIGHT MODE OVERRIDES --- */
body.light-mode #theme-toggle {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.2);
    box-shadow: none;
}

body.light-mode #theme-toggle:hover {
    background: rgba(0, 0, 0, 0.1);
}

body.light-mode .toggle-dot {
    transform: translateY(-26px); /* Slides UP to the top */
    background-color: #2b00ff; /* Turns Blue */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 
}
/* =========================================
   MUSIC TOGGLE BUTTON (FLOWING SINE WAVE)
   ========================================= */
#music-toggle {
    position: fixed;
    bottom: 20px; 
    left: 20px; 
    z-index: 100000;
    
    /* Reduced size for a more minimal footprint */
    width: 36px;
    height: 36px;
    padding: 0; 
    border-radius: 50%; 
    
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff; 
    
    /* BULLETPROOF FIX: Hides behind the preloader natively */
    z-index: 90000;
    transition: box-shadow 0.4s ease, border-color 0.4s ease, transform 0.2s ease;
}

/* NEW: The Glowing State when music is playing! */
#music-toggle.playing {
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3), inset 0 0 8px rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

#music-toggle.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

#music-toggle.visible:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

/* --- THE WAVE ANIMATION --- */
.wave-container {
    width: 20px; /* Scaled down to fit the smaller button */
    height: 20px;
    overflow: hidden; 
    display: flex;
    align-items: center;
}

.sine-wave {
    width: 40px; 
    height: 20px;
    flex-shrink: 0;
    /* PERFORMANCE FIX: Disabled infinite SVG vector repainting */
    opacity: 0.8;
}

/* When the button does NOT have the .playing class, pause the wave! */
#music-toggle:not(.playing) .sine-wave {
    animation-play-state: paused;
    opacity: 0.3; 
}

@keyframes flowWave {
    0% { transform: translateX(0); }
    100% { transform: translateX(-20px); } /* Adjusted to match new width */
}

/* Light Mode Overrides */
body.light-mode #music-toggle {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.2);
    color: #000000; 
}

/* NEW: Light Mode Glow */
body.light-mode #music-toggle.playing {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.15), inset 0 0 8px rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.4);
}

body.light-mode #music-toggle.visible:hover {
    background: rgba(0, 0, 0, 0.08);
}

/* =========================================
   DESKTOP SOCIAL LINKS
   ========================================= */
#d-social-links {
    position: fixed;
    bottom: 140px; /* Stacks perfectly above the theme toggle */
    left: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 90000;
}

#d-social-links a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    /* Matched to your lag-free performance colors */
    background-color: rgba(255, 255, 255, 0.15); 
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: all 0.3s ease;
    text-decoration: none;
    will-change: transform;
}

#d-social-links a:hover {
    background-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

#d-social-links a svg {
    width: 16px;
    height: 16px;
}

/* Light Mode Overrides for Social Links */
body.light-mode #d-social-links a {
    background-color: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.2);
    color: #000000;
}

body.light-mode #d-social-links a:hover {
    background-color: rgba(0, 0, 0, 0.15);
}
/* =========================================
   LIGHT MODE MASTER OVERRIDES
   ========================================= */
/* 1. Change Background and hide Plasma */
body.light-mode {
    background-color: #ffffff !important;
}

body.light-mode #background, 
body.light-mode #plasma-canvas,
body.light-mode #desynchronizer-wrapper {
    display: none !important; /* Kills the dark backgrounds entirely */
}

/* 2. Invert all primary white typography to black */
body.light-mode,
body.light-mode .app-name,
body.light-mode .you-matter,
body.light-mode .slogan,
body.light-mode .menu-label,
body.light-mode #hover-text,
body.light-mode .hero-text,
body.light-mode .hero-sub,
body.light-mode .talk-description,
body.light-mode .selection-label,
body.light-mode .meet-headline,
body.light-mode .meet-description,
body.light-mode .form-title,
body.light-mode .wellness-headline,
body.light-mode .wellness-description,
body.light-mode .team-member-name,
body.light-mode .team-member-title,
body.light-mode .team-member-desc,
body.light-mode .sub-text,
body.light-mode .card-label,
body.light-mode .purpose-hidden-text p,
body.light-mode .purpose-hidden-text h3 {
    color: #000000 !important;
    text-shadow: none !important; /* Removes the white glowing shadows */
}

/* 3. Invert UI Elements (Dots, Inputs, Lines) */
body.light-mode .dot {
    background-color: #000000 !important;
}

body.light-mode .talk-divider,
body.light-mode .meet-divider {
    background: #000000 !important;
    box-shadow: none !important;
}

body.light-mode .sub-input, 
body.light-mode .inline-input {
    color: #000000 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3) !important;
}

body.light-mode .sub-input::placeholder, 
body.light-mode .inline-input::placeholder {
    color: rgba(0, 0, 0, 0.5) !important;
}


/* =========================================
   LIGHT MODE: HEART GLOW & VISIBILITY FIXES
   ========================================= */

/* 1. Central Heart Backside Glow */
body.light-mode #central-heart {
    background: rgba(0, 0, 0, 0.03) !important; /* Slight dark tint for the glass */
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    /* Soft dark drop shadow + glowing cyan backlight */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 
                0 0 50px rgba(0, 255, 255, 0.3) !important; 
}

body.light-mode #central-heart:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 
                0 0 70px rgba(0, 255, 255, 0.4) !important;
}

/* 2. Overriding the HTML <style> block for Titles */
body.light-mode .services-title {
    color: #000000 !important;
    text-shadow: none !important;
}

/* 3. Wellness Page & Card Fixes */
body.light-mode .wellness-headline,
body.light-mode .wellness-description {
    color: #000000 !important;
    text-shadow: none !important;
}

body.light-mode .selection-card.glossy-rect {
    background: rgba(0, 0, 0, 0.03) !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}

/* --- NEW: Refines hover and icons for Light Mode --- */
body.light-mode .selection-card.glossy-rect:hover {
    background: rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(0, 0, 0, 0.25) !important;
}

body.light-mode .icon-space-rect {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}

/* Invert the glowing cyan dividers to solid black gradients */
body.light-mode .wellness-divider,
body.light-mode .meet-divider {
    background: linear-gradient(90deg, transparent, #000000, transparent) !important;
    box-shadow: none !important;
    height: 1.5px;
}

/* Make sure the text inside the transparent buttons stays readable */
body.light-mode .meet-page-btn button span {
    color: #000000 !important;
}

/* 4. Light Mode: Video Canvas Glow Override */
body.light-mode #vangogh-canvas {
    /* PERFORMANCE FIX: Replaced massive GPU-crashing blurs with a clean, simple drop shadow */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;
}

/* 5. Fix for Meet Page Service Buttons (Therapy/Psychiatry) */
body.light-mode .service-btn {
    color: #000000 !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    background: rgba(0, 0, 0, 0.02) !important;
}

body.light-mode .service-btn:hover {
    background: rgba(0, 0, 0, 0.06) !important;
    color: #000000 !important;
}

body.light-mode .service-btn.active {
    background: rgba(0, 0, 0, 0.08) !important;
    border-color: #000000 !important;
    color: #000000 !important;
    font-weight: 600 !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1) !important; /* Soft dark shadow instead of white glow */
}

/* Also fix the "What type of support..." label right above the buttons */
body.light-mode .selector-label {
    color: #000000 !important;
    opacity: 0.7 !important;
}

/* Ensure Purpose page content remains white in Light Mode */
body.light-mode #purpose-section,
body.light-mode #purpose-section * {
    color: #ffffff !important;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.2) !important;
}

/* --- OPTIMIZED: HARDWARE ACCELERATION FOR HEAVY UI --- */
#theme-toggle, 
#music-toggle {
    transform: translateZ(0);
    will-change: transform;
}

.sine-wave {
    will-change: transform;
    transform: translateZ(0);
}
/* =========================================
   PERFORMANCE OVERRIDES: KILL THE GPU LAG
   ========================================= */
/* Remove expensive glass blurs from floating UI elements that sit over moving WebGL */
#theme-toggle, 
#music-toggle,
#chatbot-stress-ball {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: rgba(255, 255, 255, 0.15) !important; /* Slightly more opaque to compensate for no blur */
}

/* Fix the colors for Light Mode */
body.light-mode #theme-toggle, 
body.light-mode #music-toggle {
    background-color: rgba(0, 0, 0, 0.1) !important;
}

/* =========================================
   NEW: DESKTOP HUD & PROGRESS BAR
   ========================================= */
#desktop-hud {
    position: fixed;
    bottom: 30px;
    left: 80px; /* MOVED FURTHER RIGHT */
    z-index: 90000;
    
    display: grid;
    grid-template-areas: 
        "name name"
        "bar pct";
    grid-template-columns: auto auto;
    align-items: center;
    gap: 8px 12px;
    
    font-family: 'DM Mono', monospace, 'Montserrat', sans-serif;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    pointer-events: none;
}

#desktop-hud .d-progress-bar {
    width: 120px;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

#d-prog-fill {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 0%;
    background: #00FFFF; /* Vibrant Cyan */
    transition: width 0.1s linear;
}

#d-scene-name {
    grid-area: name; /* Places name on the top row */
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    color: #ffffff;
    letter-spacing: 0.2em;
    text-align: left;
    margin-bottom: 2px;
}

#d-hud-pct {
    grid-area: pct; /* Places percentage on bottom-right */
    font-weight: 300;
    letter-spacing: 0.1em;
    min-width: 35px;
}

/* Light Mode Adaptations */
body.light-mode #desktop-hud {
    color: rgba(0, 0, 0, 0.5);
}
body.light-mode #desktop-hud .d-progress-bar {
    background: rgba(0, 0, 0, 0.2);
}
body.light-mode #d-scene-name { color: #000000; }
body.light-mode #desktop-hud { color: rgba(0, 0, 0, 0.5); }

 /* END DESKTOP WRAPPER */

/* =========================================
   3. MOBILE ONLY VERSION (LESS RAIN STYLE)
   ========================================= */
@media (max-width: 768px) {
    /* Hide everything desktop related immediately */
    #desktop-version, #preloader, #chatbot-stress-ball, #theme-toggle, #music-toggle { 
        display: none !important; 
    }
    
    #mobile-version { display: block !important; }

   :root {
        --mobile-bg: #0a0a0f;
        --mobile-fg: #e8e4d9;
        --mobile-accent: #c8ff47;
        --mobile-card-bg: rgba(10, 10, 15, 0.82);
        --mobile-font-display: "Bebas Neue", sans-serif;
        --mobile-font-mono: "DM Mono", monospace;
    }

    /* LIGHT THEME OVERRIDES */
    :root[data-theme="light"] {
        --mobile-bg: #f0ece3; /* Light background color */
        --mobile-fg: #000000; /* Black font color as requested */
        --mobile-card-bg: rgba(240, 236, 227, 0.88); /* Lighter card background */
        --mobile-accent: #3a6e00; /* Darker accent for better readability on white */
    }

    /* FORCE RESET FOR MOBILE EXPERIENCE */
    html, body {
        background: var(--mobile-bg) !important;
        color: var(--mobile-fg) !important;
        font-family: var(--mobile-font-mono) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        height: auto !important;
        margin: 0; padding: 0;
    }
#mobile-webgl-canvas {
        position: fixed; inset: 0;
        width: 100vw; height: 100vh;
        z-index: 0; pointer-events: none;
    }

    /* --- NEW: Mobile Logo Styles --- */
    #m-logo {
        position: fixed; 
        top: 1rem; 
        left: 1.5rem;
        z-index: 100; 
        text-decoration: none;
        font-family: var(--mobile-font-display);
        font-size: 1.8rem; 
        letter-spacing: 0.1em;
        color: var(--mobile-fg);
        transition: color 0.3s ease;
    }

    #hud {
        position: fixed; top: 1rem; right: 1rem;
        z-index: 100; text-align: right;
        font-size: 0.65rem; color: #6a6a7e; text-transform: uppercase;
    }

    #hud .progress-bar {
        width: 7.5rem; height: 1px; background: #6a6a7e;
        margin-top: 0.5rem; overflow: hidden;
    }

    #prog-fill {
        width: 0%; height: 100%; background: var(--mobile-accent);
        transition: width 0.1s linear;
    }

    #mobile-theme-toggle {
        position: fixed; 
        bottom: 1rem; 
        left: 1rem;
        z-index: 100; 
        /* Standardized Size */
        width: 36px; 
        height: 36px;
        border: none; 
        border-radius: 50%;
        background: rgba(106, 106, 126, 0.3);
        display: flex; 
        align-items: center; 
        justify-content: center;
        padding: 0;
        transition: all 0.3s ease;
    }

#mobile-theme-toggle svg { 
       width: 16px; /* Matched internal icon size */
       height: 16px;
       color: var(--mobile-accent); 
   }
    /* --- NEW: Minimal Social Links --- */
    #m-social-links {
        position: fixed;
        bottom: 4.5rem; /* Pushes them right above the theme toggle */
        left: 1rem;
        display: flex;
        flex-direction: column;
        gap: 0.7rem;
        z-index: 100;
    }

   #m-social-links a {
        /* Standardized Size to match theme toggle */
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(106, 106, 126, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--mobile-accent);
        transition: all 0.3s ease;
    }

    #m-social-links a:hover {
        background: var(--mobile-accent);
        color: var(--mobile-bg);
    }

    #m-social-links a svg {
        width: 16px; /* Matched internal icon size */
        height: 16px;
    }

    /* --- NEW: Mobile Copyright --- */
    #m-copyright {
        position: fixed;
        bottom: 1.2rem;
        left: 50%;
        transform: translateX(-50%);
        font-family: 'Montserrat', sans-serif;
        font-size: 9px;
        color: var(--mobile-fg);
        opacity: 0.4;
        z-index: 100;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        pointer-events: none; /* Prevents it from blocking touches */
    }

    /* --- NEW: Mobile Stress Ball Styles --- */
 /* --- NEW: Mobile Stress Ball Styles --- */
    #m-chatbot-stress-ball {
        position: fixed;
        top: 0 !important;
        left: 0 !important;
        width: 75px; 
        height: 75px;
        background-color: rgba(24, 44, 74, 0.8);
        background-image: url("https://emils.graphics/shared/stress-ball-1.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        border-radius: 50%;
        box-shadow: 
            inset -8px -8px 15px rgba(0, 0, 0, 0.7),
            inset 8px 8px 15px rgba(255, 255, 255, 0.5),
            0 10px 20px rgba(0, 0, 0, 0.3);
        z-index: 100000;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: grab;
        -webkit-tap-highlight-color: transparent;
        touch-action: none; 
        will-change: transform;
    }
    
    /* The bubble gloss highlight */
    #m-chatbot-stress-ball::before {
        content: '';
        position: absolute;
        top: 10%; left: 15%;
        width: 40%; height: 25%;
        border-radius: 50%;
        background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%);
        transform: rotate(-35deg);
        pointer-events: none;
        z-index: 1; 
        mix-blend-mode: overlay;
    }

    /* --- RESTORED & UPGRADED: Ball Text Styles --- */
    .m-ball-text {
        color: #ffffff;
        font-family: 'Montserrat', sans-serif;
        font-size: 11px; /* Locked size for APPTA */
        font-weight: 600; /* Bold and crisp */
        text-align: center;
        line-height: 1.0; /* Pulled tight together */
        letter-spacing: 0.15em;
        text-shadow: 0 0 6px rgba(0, 255, 255, 0.8), 0 1px 3px rgba(0, 0, 0, 0.9);
        position: relative;
        z-index: 2;
        padding-left: 2px; /* Visually centers it perfectly */
    }
    
    /* Makes the "ai" part small and techy */
    .m-ball-text span {
        font-size: 7px; 
        font-weight: 300; 
        letter-spacing: 0.3em;
    }

   /* --- NEW: Mobile Dedicated Chat Wrapper --- */
    #m-appta-chat-warp {
        position: fixed;
        top: 0; left: 0;
        width: 100vw; height: 100vh;
        z-index: 999999;
        display: flex; align-items: center; justify-content: center;
        pointer-events: none;
        opacity: 0;
        background: rgba(0, 0, 0, 0.75);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        transition: opacity 0.4s ease;
    }

   #m-appta-chat-warp.chat-active {
        opacity: 1;
        pointer-events: auto;
    }

    /* --- THE MISSING MAGIC KEY: Tells the orb to reveal itself on mobile --- */
    #m-appta-chat-warp.chat-active .chat-glowing-orb {
        transform: scale(1);
        opacity: 1;
    }
    
    /* Ensure the mobile orb scales perfectly to the phone screen */
    #m-appta-chat-warp .chat-glowing-orb {
        width: 90vw;
        height: 90vw;
        border-radius: 40px; /* Softer rounded rectangle for mobile texting */
    }

    #m-close-chat-btn {
        position: absolute; right: 25px; top: 25px; 
        background: none; border: none; color: #fff; font-size: 32px; cursor: pointer; opacity: 0.8;
    }

    @keyframes m-float {
        0% { transform: translateY(0px); }
        100% { transform: translateY(-8px); }
    }

    #scroll-container { position: relative; z-index: 1; }

    #mobile-version section {
        min-height: 100vh; display: flex; align-items: center;
        padding: 5rem 1.5rem;
    }

  .text-card {
        width: 100%; 
        padding: 2.5rem 2rem;
        background: transparent !important;
        /* Uses the dynamic accent color which darkens in light mode */
        border: 1px solid var(--mobile-accent); 
        backdrop-filter: blur(4px);
    } 

    #mobile-version h1 {
        font-family: var(--mobile-font-display);
        font-size: 3.5rem; line-height: 0.9; margin: 0;
        color: var(--mobile-fg); text-transform: uppercase;
    }

    .tag { font-size: 0.6rem; color: var(--mobile-accent); margin-bottom: 1rem; text-transform: uppercase; }
.body-text { 
        font-size: 0.85rem; 
        line-height: 1.6; 
        color: var(--mobile-fg); /* Uses the variable that switches to black */
        opacity: 0.8; /* Keeps the text slightly soft */
        margin-top: 1rem; 
    }
   .cta {
        display: inline-flex; align-items: center; gap: 0.5rem;
        margin-top: 1.5rem; padding: 0.8rem 1.25rem;
        border: 1px solid var(--mobile-accent);
        color: var(--mobile-accent); text-decoration: none;
        font-size: 0.7rem; text-transform: uppercase;
        background: transparent; /* CRITICAL FIX: Destroys the phone's default white button background */
        cursor: pointer;
    }

   /* MOBILE LIST & FORM STYLING */
    .m-list { margin: 1.5rem 0; display: flex; flex-direction: column; gap: 0.4rem; }
    .m-list p { 
        margin: 0; /* Removes the massive hidden browser spacing */
        line-height: 1.2; /* Tightens the text */
        font-size: 0.75rem; 
        letter-spacing: 0.1em; 
        color: var(--mobile-fg); 
    }
    
    .m-inputs { display: flex; flex-direction: column; gap: 10px; margin-top: 15px; }
    .m-field {
        background: transparent; border: none; border-bottom: 1px solid var(--mobile-accent);
        color: var(--mobile-fg); font-family: var(--mobile-font-mono); font-size: 0.75rem;
        padding: 10px 0; width: 100%; outline: none;
    }
    .m-field::placeholder { color: var(--mobile-fg); opacity: 0.4; }
    
.m-talk-options { margin-top: 1.5rem; }
    .m-select-label { font-size: 0.6rem; letter-spacing: 0.2em; color: var(--mobile-fg); opacity: 0.6; margin-bottom: 10px; }
.m-purpose-box { border-left: 1px solid var(--mobile-accent); padding-left: 15px; }.m-type-btn { flex: 1; justify-content: center; font-size: 0.6rem; padding: 0.6rem; opacity: 0.5; }
   .m-type-btn.active { opacity: 1; background: var(--mobile-accent) !important; color: var(--mobile-bg) !important; }

    @keyframes m-fade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

    /* Ensures the list of services is clean and spaced well */
    .mobile-services-list {
        margin-top: 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
    }

    .mobile-services-list p {
        margin: 0;
        font-size: 0.75rem;
        letter-spacing: 0.1em;
        font-weight: 300;
        /* Uses the variable that switches color automatically */
        color: var(--mobile-fg); 
    }

    /* Standard outline style for all mobile cards */
    #mobile-version .text-card {
        background: transparent !important;
        border: 1px solid var(--mobile-accent);
        backdrop-filter: blur(8px);
    }
} /* Keep only this final brace to close the @media query */

#m-logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Strictly anchors both text and heart to the left */
    gap: 0;
    text-decoration: none;
}

.m-mini-heart {
    width: 60px; 
    height: auto;
    /* Bumped opacity slightly so the vibrant neon colors aren't washed out, but it stays matte */
    opacity: 0.4; 
    transform: rotate(180deg);
    margin-top: -4px; 
    margin-left: 0; 
    display: block;
    pointer-events: none;
}

.m-mini-heart svg {
    width: 100%;
    height: auto;
    display: block;
}

/* --- NEW: Vibrant Color Morphing Animation --- */
@keyframes mini-heart-neon {
    0%   { fill: #00FFFF; } /* Cyan */
    20%  { fill: #FF007F; } /* Vibrant Pink */
    40%  { fill: #8A2BE2; } /* Deep Purple */
    60%  { fill: #04fdb6; } /* Mint Green */
    80%  { fill: #FFD700; } /* Golden Yellow */
    100% { fill: #00FFFF; } /* Loops back to Cyan */
}

.m-mini-heart polygon {
    /* Replaces the solid theme color with an infinite, smooth neon color cycle */
    animation: mini-heart-neon 8s ease-in-out infinite;
}