/* 1. DEFINE THE SELF-HOSTED FONT */
        :root {
        /* =============
           THEME
           ============= */
              --border-thickness: 1px;
              --border-style: solid;
              --radius-main: 8px;
              --glass-blur: 10px;
              --font-family-main: 'Inter', sans-serif;
              --fontsize-main: 0.9rem;
              --shadow-x: 0px;
              --shadow-y: 4px;
              --shadow-blur: 10px;
              --padding-main: 1rem;
              --line-height-main: 1.5;
              --bg-canvas: rgba(60,60,60, 0.6);
              --bg-header: rgba(220, 220, 220, 1);
              --bg-surface1: #FFFFFF;
              --bg-surface2: rgba(238,238,238, 0.4);
              --bg-input: #F9F9F9;
              --bg-table-hover: #d1d1d1;
              --accent-1: #009EFD;
              --accent-1-hover: #3EB7FF;
              --accent-2: #A577F9;
              --accent-2-hover: #C2A4FB;
              --accent-mono: #4F6177;
              --accent-mono-hover: #263A4F;
              --border-main: #E2E8F0;
              --border-focus: #009EFD;
              --bg-overlay-main: rgba(0, 0, 0, 0.58);
              --colour-info: #009EFD;
              --colour-info-hover: #3EB7FF;
              --colour-confirm: #A577F9;
              --colour-confirm-hover: #C2A4FB;
              --colour-success: #4ADE80;
              --colour-success-hover: #75E69F;
              --colour-warn: #F9B604;
              --colour-warn-hover: #FCCF58;
              --colour-danger: #EF4444;
              --colour-danger-hover: #EB8181;
              --text-main: #1E293B;
              --text-muted: #64748B;
              --text-highlight: #009EFD;
              --text-on-accent: #FFFFFF;
              --text-on-status: #FFFFFF;
              --shadow-colour: rgba(0, 0, 0, 0.3);
            
              --dash-level-0: #e1e3e1;
              --dash-level-1: #bad1bf;
              --dash-level-2: #93bf9d;
              --dash-level-3: #60b372;
              --dash-level-4: #26a641;

              /* Calculated Scales */
              --shadow-main: var(--shadow-x) var(--shadow-y) var(--shadow-blur) -1px rgba(0, 0, 0, 0.3);
              --fontsize-tiny: calc(var(--fontsize-main) * 0.7);
              --fontsize-small: calc(var(--fontsize-main) * 0.85);
              --fontsize-large: calc(var(--fontsize-main) * 1.35);

            
            
        /* ==========================================
           GEAR CONTROLS - MANIPULATE THESE EASILY
           ========================================== */
            
            /* Main Gear (8 Teeth) */
            --main-gear-size: 1em;
            --main-gear-top: -0.03em;
            --main-gear-left: -0.07em;
            --color-main: #ffffff;

            /* Small Gear (6 Teeth) */
            --small-gear-size: 0.5em;
            --small-gear-top: -0.33em;
            --small-gear-left: -0.25em;
            --color-small: #ffffff;

            /* Hover State */
            --color-hover: #ffffff;
            
            /* Motion Constants for JS */
            --idle-speed: 0.8;
            --hover-boost: 1.5;
            --scroll-mult: 0.12;
            --easing: 0.08;
            
            
            
            /* For Nav */
            --header-height:70px;
            --nav-transition-speed: 0.4s;
            --bezier-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);
            --bezier-smooth: cubic-bezier(0.4, 0, 0.2, 1);
            --ease: cubic-bezier(0.16, 1, 0.3, 1);

    
            
             /* For Dashboard */
            --db-glass: rgba(255, 255, 255, 0.03);
            --db-border: rgba(255, 255, 255, 0.08);
            --db-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
            
            
            /* For Shop */
            --bg: #0a0a0a;
            --accent: #00ff88;
            --surface: #161616;
            --border: #262626;
            --nav-height: 70px;
            --sidebar-width: 300px;
            --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            
            /* For Portfolio */
            --portfolio-primary: #6366f1;
            --portfolio-secondary: #a855f7;
            --portfolio-bg: #0f172a;
            --portfolio-card-bg: rgba(30, 41, 59, 0.7);
            --portfolio-text: #f8fafc;
            --portfolio-text-muted: #94a3b8;
            --portfolio-glass: rgba(255, 255, 255, 0.05);
            --portfolio-glass-border: rgba(255, 255, 255, 0.1);
            --portfolio-radius: 12px;
            --portfolio-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        
        /* Has to sit outside the CSS Root variable block */
        [data-theme='dark'] {
          --border-thickness: 1px;
          --border-style: solid;
          --radius-main: 8px;
          --glass-blur: 10px;
          --font-family-main: 'Inter', sans-serif;
          --fontsize-main: 0.9rem;
          --shadow-x: 0px;
          --shadow-y: 10px;
          --shadow-blur: 20px;
          --padding-main: 1rem;
          --line-height-main: 1.5;
          --bg-canvas: rgba(0, 0, 0, 0.5);
          --bg-header: rgba(0, 0, 0, 0.95);
          --bg-surface1: #1A1A1A;
          --bg-surface2: rgba(13,13,13, 0.4);
          --bg-input: #232323;
          --bg-table-hover: #3F3F3F;
          --accent-1: #009EFD;
          --accent-1-hover: #3EB7FF;
          --accent-2: #A577F9;
          --accent-2-hover: #C2A4FB;
          --accent-mono: #363636;
          --accent-mono-hover: #646464;
          --border-main: #2A2A2A;
          --border-focus: #009EFD;
          --bg-overlay-main: rgba(0, 0, 0, 0.55);
          --colour-info: #009EFD;
          --colour-info-hover: #3EB7FF;
          --colour-confirm: #A577F9;
          --colour-confirm-hover: #C2A4FB;
          --colour-success: #4ADE80;
          --colour-success-hover: #75E69F;
          --colour-warn: #F9B604;
          --colour-warn-hover: #FCCF58;
          --colour-danger: #E14444;
          --colour-danger-hover: #EB8181;
          --text-main: #F8FAFC;
          --text-muted: #9d9fa1;
          --text-highlight: #009EFD;
          --text-on-accent: #FFFFFF;
          --text-on-status: #FFFFFF;
          --shadow-colour: rgba(0, 0, 0, 0.5);
            
          --dash-level-0: #090909;
          --dash-level-1: #0e4429;
          --dash-level-2: #006d32;
          --dash-level-3: #26a641;
          --dash-level-4: #39d353;

          /* Calculated Scales */
          --shadow-main: var(--shadow-x) var(--shadow-y) var(--shadow-blur) -1px rgba(0, 0, 0, 0.5);
          --fontsize-tiny: calc(var(--fontsize-main) * 0.7);
          --fontsize-small: calc(var(--fontsize-main) * 0.85);
          --fontsize-large: calc(var(--fontsize-main) * 1.35);
        }
        
        
        /* For HeatMap Colours on Light theme only */
        [data-theme='light'] {
              --dash-level-0: #e1e3e1;
              --dash-level-1: #bcebbc;
              --dash-level-2: #87e687;
              --dash-level-3: #39d353;
              --dash-level-4: #006d32;
        }

        
        

        /* RESET & BASE STYLES */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: #0f1115;
            color: #ffffff;
            font-family: 'Exo 2', sans-serif;
            min-height: 100vh; 
        }

        
        a {text-decoration: none; color: white; transition: 0.4s ease;}
        a:hover {color: var(--accent-1); transition: 0.1s ease;}

        
        /* Scroll Reveal Utility */
        .reveal { opacity: 0; transform: translateY(50px); filter: blur(50px); transition: 1s var(--ease); }
        .reveal.active { opacity: 1; transform: translateY(0); filter:blur(0px);}
        

        .visually-hidden{
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }
        
        
        
        /* ###################*/
        /* --- BACKGROUND */
        /* ###################*/
        /* ----*/
        .poly-bg-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            transition: filter 0.1s ease-out;
        }

        #wallpaper-poly-canvas {
            display: block;
            height: 100%;
            width: 100%;
        }
        /* ----*/
        
        
        
        
        
        /* ###################*/
        /* --- HEADER */
        /* ###################*/
        .titlebar {
            text-align: left;
            padding: 0.9rem 1.5rem 0.7rem 1.5rem;
            width: 100%;
            height:var(--header-height);
            position: fixed;
            top: 0;
            background: var(--bg-canvas);
            z-index: 9990;
            backdrop-filter: blur(6px) saturate(2);
            transition: 0.3s ease;
            box-shadow: 0px 2px 12px 1px rgba(0,0,0,0.3);
            user-select: none; /* Standard for most browsers */
            -webkit-user-select: none; /* Safari */
            -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* Internet Explorer */
        }

        .logo-img{
            height: 40px;
            display: inline-flex;
            margin-right: 12px;
            transition: 0.3s ease;
            margin-bottom: 10px;
        }
        

        .logo-img img{
            height: 100%;
            filter: brightness(0.8);
            transition: filter 0.3s ease;
            margin-top:5px;
        }
        
        
        .brand-name {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            font-weight: 350;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: #f0f0f0;
            /*transition: 0.4s ease;*/
            cursor: default;
            margin-top: -3px;

            /* Create the gradient */
            background: linear-gradient(to right, #ff7e5f, #feb47b);
            -webkit-background-clip: text; /* Clip the background to the text */
            background-clip: text;
            color: transparent; /* Make the original text color transparent so the background shows through */
        }

        .part-one, .part-two {
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            display: inline-flex;
            align-items: center;
            transition: 0.3s ease;
        }
        
        /* Part 1: TURNER (e.g., Blue Gradient) */
        .part-one {
            background-image: linear-gradient(to right, var(--accent-2), var(--accent-1));
            transition: 0.3s ease;
        }


        .part-two {
            color: white;
            transition: 0.3s ease;
        }
        

        /* Gear Container */
        .gear-container {
            position: relative;
            display: inline-block;
            width: 1em; 
            height: 1em;
            margin: 0 -0.05em; 
            vertical-align: middle;
        }

        /* Base SVG Styling */
        .gear-svg {
            position: absolute;
            overflow: visible;
        }

        /* Individual Gear Logic */
        .gear-main-svg {
            width: var(--main-gear-size);
            height: var(--main-gear-size);
            top: var(--main-gear-top);
            left: var(--main-gear-left);
            z-index: 2;
        }

        .gear-small-svg {
            width: var(--small-gear-size);
            height: var(--small-gear-size);
            top: var(--small-gear-top);
            left: var(--small-gear-left);
            z-index: 1;
        }

        /* Color Application */
        .gear-path {
            transform-origin: center;
            transition: fill 0.3s ease;
        }

        .gear-main-path {
            fill: var(--color-main);
        }

        .gear-small-path {
            fill: var(--color-small);
        }

        /* Hover Interaction */
        .brand-name:hover {
            font-weight: 800;
            transition: 0.15 ease;
        }

        .brand-name:hover .gear-main-path,
        .brand-name:hover .gear-small-path {
            fill: var(--color-hover);
        }

        .brand-name:hover .logo-img img {
            filter: brightness(1) drop-shadow(0px 0px 8px #fff);
            transition: 0.15s ease;
        }
        
        /* UI ELEMENTS */
        .content-section {
            /*
            position: relative; 
            
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding-top: 15rem;
            text-align: center;
            max-width: 800px;
            margin: 0 auto;
            */
            position: relative;
            display: flex;
        }

        .status-box {
            margin-top: 2rem;
            padding: 1.5rem;
            border-radius: 12px;
            background: #1a1d23;
            border: 1px solid #2a2e35;
            text-align: left;
        }

        .scroll-hint {
            margin-top: 4rem;
            opacity: 0.5;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 0.7; }
        }

        code {
            color: var(--color-main);
        }
        

        /* --- Scroll Progress Bar --- */
        #progress {
            position: fixed;
            top: 70px;
            left: 0;
            height: 3px;
            background: linear-gradient(to right, var(--accent-1), var(--accent-2));
            z-index: 1000;
            width: 0%;
            /*transition: width 0.15s ease;*/
        }
        
        
        
        /* ###################*/
        /* --- NAVIGATION */
        /* ###################*/
        
        /* --- DESKTOP NAVIGATION --- */
        .navigation{
            position: absolute;
            top:9px;
            right:10px;
        }
        
        .nav-wrapper {
            display: block;
        }

        .nav-container {
            background: var(--bg-surface2);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 0.4rem;
            border-radius: 100px;
            display: flex;
            align-items: center;
            gap: 0rem;
            position: relative;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
            overflow: hidden; 
            transition: 0.3s ease;
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;   
            -ms-user-select: none;  
            -webkit-touch-callout: none; 
        }

        /* Glow that follows mouse cursor */
        .nav-glow {
            position: absolute;
            width: 100px;
            height: 100px;
            background: var(--accent-2);
            filter: blur(25px);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.8s ease;
            z-index: 0;
            border-radius: 50%;
            transform: translate(-50%, -50%);
        }

        .nav-active-pill {
            position: absolute;
            height: calc(100% - 0.8rem);
            /*background: rgba(255, 255, 255, 0.08);*/
            background: var(--bg-surface1);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 100px;
            z-index: 1;
            transition: all var(--nav-transition-speed) var(--bezier-smooth);
            pointer-events: none;
            box-shadow: 0px 0px 8px var(--bg-surface1);
            width:92px;
        }

        .nav-link {
            position: relative;
            padding: 0.6rem 0.7rem;
            color: white;
            text-decoration: none;
            font-size: 0.85rem;
            font-weight: 500;
            z-index: 2;
            transition: color var(--nav-transition-speed) ease;
            border-radius: 100px;
            white-space: nowrap;
        }

        .nav-link:hover { color: white; }

        .nav-link.active {
            color: var(--accent-1);
            /*text-shadow: 0 0 6px var(--bg-surface1);*/
            /*filter:brightness(2);*/
            /*animation: hue-spin 5s linear infinite; /* 5s can be adjusted for speed */*/
        }

        @keyframes hue-spin {
            0% {
                filter: hue-rotate(0deg);
            }
            100% {
                filter: hue-rotate(360deg);
            }
        }



        /* --- MOBILE NAVIGATION --- */
        .nav-hamburger {
            display: none;
            flex-direction: column;
            gap: 4px;
            background: var(--accent-1);
            background: linear-gradient(320deg,rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.4) 100%);
            border: none;
            cursor: pointer;
            padding: 12px 10px;
            margin-top:4px;
            z-index: 2100;
            transition: var(--nav-transition-speed) var(--bezier-elastic);
            border-radius:6px;
        }

        .nav-hamburger span {
            display: block;
            width: 18px;
            height: 2px;
            background: white;
            transition: transform var(--nav-transition-speed) var(--bezier-elastic), opacity 0.3s ease;
            border-radius: 2px;
        }

        .nav-hamburger.active { transform: rotate(90deg) scale(0.8); transition: var(--nav-transition-speed) var(--bezier-elastic); border-radius:10px; background:linear-gradient(320deg,rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.4) 100%)}
        .nav-hamburger.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
        .nav-hamburger.active span:nth-child(2) { opacity: 0; transform: translateX(10px); }
        .nav-hamburger.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
        
        .nav-mobile-menu-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(2px);
            z-index: 9990;
            opacity: 0;
            visibility: hidden;
            transition: all var(--nav-transition-speed) ease;
        }

        .nav-mobile-menu-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .nav-mobile-menu {
            position: fixed;
            top: calc(var(--header-height) + 1rem);
            right: 1rem;
            width: calc(100% - 150px);
            max-width: 400px;
            max-height: 65vh;
            background: var(--bg-surface2);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(40px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            z-index: 9995;
            display: flex;
            flex-direction: column;
            
            /* Animation States */
            opacity: 0;
            visibility: hidden;
            /* Start slightly higher and more to the right with offset scale to imply curve */
            transform: scale(0.1) translate(60px, -40px);
            transform-origin: top right;
            transition: 
                opacity var(--nav-transition-speed) ease-out,
                transform var(--nav-transition-speed) var(--bezier-elastic),
                visibility var(--nav-transition-speed);
            
            box-shadow: 0px 5px 40px rgba(255,255,225, 0.25);
            overflow: hidden;
            
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;   
            -ms-user-select: none;  
            -webkit-touch-callout: none; 
        }

        .nav-mobile-menu.active {
            opacity: 1;
            visibility: visible;
            transform: scale(1) translate(0, 0);
            /* Elastic opening effect with curve-like transition */
            transition: 
                opacity var(--nav-transition-speed) var(--bezier-elastic),
                transform var(--nav-transition-speed) var(--bezier-elastic);
        }

        /* Mobile Menu Content */
        .nav-menu-header {
            padding: 0.5rem 0.5rem 0.5rem 1.25rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            display: flex;
            align-items: center;
            justify-content: space-between;
            /*background: var(--bg-surface2);*/
        }

        .nav-menu-header h2 {
            font-size: 0.85rem;
            font-weight: 700;
            letter-spacing: 1px;
            color: white;
            text-transform: uppercase;
        }

        .nav-close-btn {
            background:linear-gradient(320deg,rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.4) 100%);
            border: none;
            color: white;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 1.4rem;
            padding: 0px 0px 3px 0px;
            font-weight: 800;
            transition:var(--nav-transition-speed) var(--bezier-elastic); 
            /*box-shadow: 0px 0px 6px rgba(0,0,0,0.5);*/
            
        }

        .nav-close-btn:hover {
            background: var(--accent-1);
            transform: rotate(90deg);
            transition:var(--nav-transition-speed) var(--bezier-elastic); 
        }
        
        .nav-close-btn:active {
            background: var(--accent-1);
            filter: brightness(0.95);
            transform: rotate(90deg) scale(0.9);
            transition:0.05 ease;
        }
        
        .nav-menu-links {
            flex: 1;
            overflow-y: auto;
            padding: 0.75rem;
            display: flex;
            flex-direction: column;
            gap: 2px;
          /* hide scrollbar while keeping scroll functionality */
          scrollbar-width: none;   /* Firefox */
          -ms-overflow-style: none; /* IE and Edge */
        }

        .nav-mobile-link {
            padding: 0.85rem 1rem;
            color: white;
            text-decoration: none;
            font-size: 0.95rem;
            border-radius: 12px;
            transition: var(--nav-transition-speed) ease-out;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .nav-mobile-link:active {
            background: rgba(255, 255, 255, 0.05);
        }

        .nav-mobile-link.active {
            color: var(--accent-1);
            background: var(--bg-surface1);
            font-weight: 600;
            /*text-shadow: 0 0 6px black;*/
            box-shadow: 0px 0px 8px var(--bg-surface1);
        }

        .nav-mobile-link::after {
            opacity: 0.2;
            font-size: 0.8rem;
            transition: transform 0.2s ease;
        }
        
        .nav-mobile-link:active::after {
            transform: translateX(3px);
            opacity: 0.6;
        }

        .nav-mobile-link:hover {
            padding-left:2rem;  
            transition: 0.1s ease-out;
            /*background: var(--bg-canvas);*/
        }

        .nav-menu-footer {
            padding: 1.5rem 1.25rem;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            display: flex;
            align-items: center;
            justify-content: space-between;
            /*background: rgba(0, 0, 0, 0.1);*/
            background: var(--bg-surface2);
        }

        .slider-toggle-container {
            /*border-left:2px solid white;*/
            margin-left:5
                px;
            display: flex;
            align-items: center;
            gap: 7px;
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;   
            -ms-user-select: none;  
            -webkit-touch-callout: none; 
        }

        .slider-toggle-label {
            font-size: 0.85rem;
            font-weight: 500;
            color:white;
        }

        .slider-switch {
            position: relative;
            display: inline-block;
            width: 38px;
            height: 20px;
        }

        .slider-switch input { opacity: 0; width: 0; height: 0; }

        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0; left: 0; right: 0; bottom: 0;
            background: var(--bg-canvas);
            transition: var(--nav-transition-speed);
            border-radius: 34px;
        }

        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 14px;
            width: 14px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: var(--nav-transition-speed);
            border-radius: 50%;
        }

        input:checked + .toggle-slider { background-color: var(--accent-1); }
        input:checked + .toggle-slider:before { transform: translateX(18px); }
        
        .nav-search-btn {
            background: none;
            border: none;
            padding: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 0.2s ease;
        }

        .nav-search-btn svg {
            width: 20px;  /* Adjust size as needed */
            height: 20px;
            /* This is the magic line that links it to your theme */
            fill: white; 
        }

        .nav-search-btn:hover {
            opacity: 0.7;
        }

        .dbs-search-panel {
            position: absolute;
            top: 100%; /* Sits exactly below the header */
            left: 10%;
            width: 80%;
            background: var(--bg-surface1);
            border-bottom: 1px solid var(--border-main, #eee);
            box-shadow: 0 5px 30px rgba(0,0,0,0.5);
            z-index: 1000;
            display: none; /* Hidden by default */
            transform: translateY(-10px);
            opacity: 0;
            transition: all 0.3s ease;
            padding-bottom: 40px;
            border-radius: 0px 0px 20px 20px;
        }

        .dbs-search-panel.dbs-active {
            display: block;
            transform: translateY(0);
            opacity: 1;
        }

        .dbs-search-inner {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }

        .dbs-search-input-wrapper {
            position: relative;
            display: flex;
            align-items: center;
        }

        .dbs-search-input-wrapper input {
            width: 100%;
            padding: 12px 45px;
            border-radius: 8px;
            border: 1px solid var(--border-main);
            background: transparent;
            color: var(--text-main);
            font-size: 1.1rem;
        }

        .dbs-search-input-wrapper input.focus {
            border: 1px solid var(--accent-1);
        }

        .dbs-search-icon {
            position: absolute;
            left: 15px;
            width: 20px;
            fill: var(--text-main);
        }

        .dbs-clear-btn {
            position: absolute;
            right: 15px;
            background: none;
            border: none;
            font-size: 24px;
            color: var(--text-main);
            cursor: pointer;
            display: none; /* Shown via JS when input has text */
        }

        /* Results Styling */
        .dbs-results-container {
            margin-top: 15px;
            max-height: 400px;
            overflow-y: auto;
        }

        .dbs-search-result-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px;
            text-decoration: none;
            color: var(--text-main);
            border-radius: 6px;
            transition: background 0.2s;
        }

        .dbs-search-result-item:hover {
            background: rgba(var(--accent-rgb), 0.1);
        }

        .dbs-result-type-pill {
            font-size: 0.7rem;
            padding: 2px 8px;
            border-radius: 10px;
            text-transform: uppercase;
            font-weight: bold;
            border: 1px solid var(--text-main);
            opacity: 0.7;
        }


        .dbs-search-header {
            display: flex;
            gap: 15px;
            align-items: center;
        }

        .dbs-search-input-wrapper {
            flex-grow: 1; /* Input takes up available space */
            position: relative;
            display: flex;
            align-items: center;
        }

        .dbs-close-panel {
            background: var(--bg-surface1);
            border: 1px solid var(--border-main);
            color: var(--text-main);
            padding: 8px 16px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.85rem;
            font-weight: 500;
            transition: all 0.2s ease;
            opacity: 0.6;
            white-space: nowrap;
        }

        .dbs-close-panel:hover {
            opacity: 1;
            border:1px solid var(--accent-1);
        }

        .dbs-close-panel:active {
            opacity: 1;
            border:1px solid var(--accent-1);
            color: var(--accent-1); /* Flips colors on hover */
        }


        .dbs-mobile-search-wrapper {
            padding: 10px 1.25rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            background: none;
        }

        .dbs-mobile-search-input-container {
            position: relative;
            display: flex;
            align-items: center;
            background: var(--bg-surface2);
            border-radius: 10px;
            padding: 0 10px;
            border: 1px solid var(--border-main);
        }

        .dbs-mobile-search-input-container input {
            width: 100%;
            background: none;
            border: var(--border-main);
            padding: 10px 5px;
            color: white;
            font-size: 1.1rem;
            outline: none;
        }

        .dbs-search-icon-small {
            width: 16px;
            height: 16px;
            fill: var(--text-main);
            opacity: 0.6;
        }

        .dbs-mobile-clear-btn {
            background: none;
            border: none;
            color: var(--text-main);
            font-size: 18px;
            cursor: pointer;
            display: none; /* Shown when typing */
            padding: 0 5px;
        }

        /* Ensure the result items match your existing mobile link styles */
        .dbs-mobile-result-item {
            padding: 12px;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            text-decoration: none;
            background: var(--bg-surface2);
            margin-bottom: 4px;
        }

        .dbs-mobile-result-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 4px;
        }






        /* #########################*/
        /* --- CAROUSEL */
        /* #########################*/
        
        /* --- 1. HERO CAROUSEL WITH PARALLAX --- */
        .dash-hero-viewport {
            position: relative;
            height: 100vh;
            width: 100%;
            overflow: hidden;
            box-shadow: 0px 1px 20px 0px rgba(0,0,0,0.6);
        }

        .hero-viewport {
            position: relative;
            height: 100vh;
            width: 100%;
            overflow: hidden;
            box-shadow: 0px 1px 20px 0px rgba(0,0,0,0.6);
        }

        .hero-overlay {
            position: absolute;
            z-index: 10;
            top: 0; left: 0; width: 100%; height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 20px;
            pointer-events: none;
        }

        .hero-overlay h1 {
            font-size: clamp(2.5rem, 8vw, 6rem);
            font-weight: 800;
            letter-spacing: -0.03em;
            line-height: 1;
            text-transform: uppercase;
        }

        .hero-overlay p {
            font-size: clamp(1.8rem, 2vw, 3rem);
            margin-top: 100px;
            color: rgba(255,255,255,0.8);
            max-width: 600px;
        }

        
        .carousel-track {
            height: 100%;
            width: 100%;
            position: relative;
        }

        .carousel-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1.5s var(--ease);
            overflow: hidden;
        }

        .carousel-slide.active { opacity: 1; z-index: 1; }

        .carousel-slide-img {
            position: absolute;
            top: -20%; /* Margin for parallax */
            left: 0;
            width: 100%;
            height: 140%;
            background-size: cover;
            background-position: center;
            filter: brightness(0.8) contrast(1.1);
            transform: translateY(0);
        }



        .carousel-slide-about-img {
            position: relative;
            width:100%;
            height: 100%;
        }

        .carousel-slide-about-img img {
            position: absolute;
            top: -20%; /* Keeps the extra 20% at the top and bottom */
            left: 0;
            width: 100%;
            height: 140%; /* The oversized height for parallax */

            /* THE FIX */
            object-fit: cover;    /* Acts like background-size: cover for <img> tags */
            object-position: center; /* Acts like background-position: center */

            filter: brightness(0.8) contrast(1.1);
            transform: translateY(0);
        }
            
            /* Ensure slides stack on top of each other */
            .carousel-track-about {
                position: relative;
                width: 100%;
                height: 100vh; /* or your preferred height */
                overflow: hidden;
            }

            .carousel-slide-about {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                opacity: 0;
                transition: opacity 1s ease-in-out;
                z-index: 1;
            }

            /* The active slide sits on top and is visible */
            .carousel-slide-about.active {
                opacity: 1;
                z-index: 2;
            }


        
        /* #########################*/
        /* --- PARALLAX AND BANNERS */
        /* #########################*/
        
        /* --- 4. FULL WIDTH PARALLAX BANNER --- */
        .parallax-banner {
            height: 70vh;
            width: 100%;
            overflow: hidden;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .parallax-banner-bg {
            position: absolute;
            top: -30%;
            left: 0;
            width: 100%;
            height: 160%;
            background-image: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&q=80&w=2072');
            background-size: cover;
            background-position: center;
            filter: brightness(0.4);
        }

        .parallax-banner-content {
            position: relative;
            z-index: 5;
            text-align: center;
            padding: 40px;
        }
        
        
        
        
        
        /* #########################*/
        /* --- SECTIONS */
        /* #########################*/
        
        /* --- 2. INTRO SECTION & CARDS */
        .intro-section {
            padding: 50px 5%;
            max-width: 1400px;
            margin: 0 auto;
        }

        .intro-header { margin-bottom: 0px; }
        .intro-header h2 { color: var(--text-main); font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 20px; 
            user-select: none; /* Standard for most browsers */
            -webkit-user-select: none; /* Safari */
            -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* Internet Explorer */
        }

        .intro-header h1 { color: var(--text-main); font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 20px; 
            user-select: none; /* Standard for most browsers */
            -webkit-user-select: none; /* Safari */
            -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* Internet Explorer */
        }

        .intro-header p { color: var(--text-main); font-size: 1.2rem; max-width: 700px; }

        .intro-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 25px;
            margin-bottom: 40px;
        }

        .intro-grid a {
            text-decoration: none;
        }

        .intro-card {
            padding: 40px;
            height: 200px;
            border-radius: 24px;
            border: 1px solid rgba(255,255,255,0.3);
            cursor: pointer;
            position: relative;
            overflow: hidden;
            background: var(--bg-surface1);
            transition: var(--ease) 0.4s;
            box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.6);
            user-select: none; /* Standard for most browsers */
            -webkit-user-select: none; /* Safari */
            -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* Internet Explorer */
        }

        .intro-card:hover {
            transform: translateY(-10px);
            border: 1px solid var(--accent-1);
            background: var(--bg-surface1);
            transition: var(--ease) 0.4s;
            box-shadow: 0px 4px 16px 0px var(--accent-1);
        }

        .intro-card h3 { color: var(--text-main); margin-bottom: 15px; font-size: 1.5rem; }
        .intro-card p { color: var(--text-muted); font-size: 0.95rem; color: #aaa; }

        /* --- 3. LIQUID / CREATIVE AREA --- */
        .ticker-info-wrap {
            position: relative;
            padding: 40px 0;
            background: var(--bg-surface2);
            overflow: hidden;
            box-shadow:inset 0px 0px 24px rgba(0,0,0,0.2);
        }

        .glow {
            position: absolute;
            width: 40vw;
            height: 40vw;
            background: var(--accent-1);
            filter: blur(100px);
            opacity: 0.13;
            border-radius: 50%;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            animation: pulseGlow 8s infinite alternate;
        }

        @keyframes pulseGlow {
            from { transform: translate(-50%, -50%) scale(1); }
            to { transform: translate(-40%, -60%) scale(1.3); }
        }

        .ticker-info {
            display: flex;
            overflow: hidden;
            user-select: none;
            gap: 2rem;
            font-size: 6vw;
            font-weight: 900;
            text-transform: uppercase;
            white-space: nowrap;
            color: white;
        }

        .ticker-info span { animation: ticker-scroll 25s linear infinite; }

        @keyframes ticker-scroll {
            from { transform: translateX(0); }
            to { transform: translateX(-100%); }
        }

        
        
        
        /* #########################*/
        /* --- DASHBOARD */
        /* #########################*/
        
        .dash-container {
            max-width: 1200px;
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 24px;
            position: relative;
        }

        .dash-header {
            padding: 20px 0;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            flex-wrap: wrap;
            gap: 20px;
        }

        .dash-header-text h1 { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.02em; }
        .dash-header-text p { color: var(--text-muted); font-size: 0.85rem; margin-top: 4px; }

        .intro-flex-row {
            display: flex;
            justify-content: space-between; /* Pushes text to left, buttons to right */
            align-items: center;           /* Vertically centers them */
            flex-wrap: wrap;               /* Ensures it looks good on mobile */
            gap: 20px;
        }
        
        .dash-filter-buttons {
            display: flex;
            background: var(--bg-surface1);
            padding: 4px;
            border-radius: 6px;
            border: 1px solid var(--border-main);
        }

        .dash-filter-btn {
            background: transparent;
            border: none;
            color: var(--text-muted);
            padding: 6px 14px;
            font-size: 0.7rem;
            font-weight: 600;
            cursor: pointer;
            border-radius: 4px;
            transition: all 0.2s;
        }

        .dash-filter-btn:hover {color:white; background:var(--accent-2)}
        
        .dash-filter-btn.active {
            background: var(--accent-1);
            color: var(--text-on-status);
        }

        /* Grid for the 3 distribution cards */
        .dash-distribution-row {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }

        .dash-card {
            background: var(--bg-surface1);
            border: 1px solid var(--border-main);
            box-shadow: 0px 2px 16px rgba(0,0,0,0.2);
            border-radius: 12px;
            padding: 10px;
            display: flex;
            flex-direction: column;
            transition: 0.4s ease;
            user-select: none; /* Standard for most browsers */
            -webkit-user-select: none; /* Safari */
            -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* Internet Explorer */
        }

        .dash-card:hover {
            transform:scale(1.04);
            transition: 0.2s ease;
            border-color: var(--accent-1);
        }
        
        .dash-card-title {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--text-muted);
            margin-bottom: 10px;
            font-weight: 700;
            text-align: center;
        }

        /* Donut Styles */
        .dash-donut-container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .dash-donut-wrapper {
            position: relative;
            width: 140px;
            height: 140px;
        }

        .dash-donut-svg { 
            transform: rotate(-90deg); 
            display: block;
            overflow: visible;
        }

        .dash-donut-segment {
            fill: none;
            stroke-width: 7;
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            transform-origin: center;
        }

        .dash-donut-segment:hover, 
        .dash-donut-segment.is-active {
            stroke-width: 9;
            filter: brightness(1.2);
            transform: scale(1.03);
            transition: all 0.2s;
        }

        .dash-donut-center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            pointer-events: none;
        }

        .dash-total-count { font-size: 1.25rem; color: var(--text-main);  font-weight: 700; display: block; line-height: 1; }
        .dash-total-label { font-size: 0.55rem; color: var(--text-muted); text-transform: uppercase; margin-top: 2px; }

        /* Legend */
        .dash-legend {
            margin-top: 0px;
            width: 100%;
            display: flex;
            flex-direction: column;
        }

        .dash-legend-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.75rem;
            color: var(--text-muted);
            padding: 6px 10px;
            border-radius: 6px;
            transition: all 0.2s;
            cursor: default;
        }

        .dash-legend-item.is-highlighted { color: var(--text-main); background: rgba(255,255,255,0.05); }
        .dash-legend-item.is-dimmed { opacity: 0.3; }

        .dash-legend-label { display: flex; align-items: center; gap: 8px; }
        .dash-dot { width: 7px; height: 7px; border-radius: 1.5px; }

        /* Heatmap Card */
        .dash-heatmap-card { grid-column: span 12; padding:24px; margin-bottom: 40px;}

        .dash-heatmap-container {
            display: flex;
            flex-direction: column;
            align-items: center; /* This centers the months and grid */
            gap: 4px;
            overflow-x: auto;
            padding-bottom: 10px;
            padding-top: 20px;
            width: 100%;
        }

        .dash-heatmap-grid {
            display: grid;
            grid-template-columns: repeat(53, 1fr);
            grid-template-rows: repeat(7, 1fr);
            gap: 3px;
            width: 100%;
            min-width: 370px;
            max-width: 800px;
            margin: 0 auto; /* Added for extra safety */
        }

        .dash-day-cell {
            aspect-ratio: 1/1;
            background: var(--dash-level-0);
            border-radius: 2px;
            transition: background 0.15s;
        }

        .dash-heatmap-months {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            color: var(--text-muted);
            font-size: 0.65rem;
            width: 100%;       /* Changed from min-width to 100% */
            max-width: 800px;  /* Must match the grid's max-width */
        }
        
        .dash-timeline-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
            font-size: 0.75rem;
            color: var(--text-muted);
        }

        .dash-heatmap-legend {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .dash-heatmap-legend-cell {
            width: 12px;
            height: 12px;
            border-radius: 2px;
        }

        /* Tooltip */
        #dash-tooltip {
            position: fixed;
            background: #fff;
            color: #000;
            padding: 6px 10px;
            font-size: 0.7rem;
            font-weight: 700;
            border-radius: 4px;
            pointer-events: none;
            display: none;
            z-index: 9999;
            box-shadow: 0 4px 12px rgba(0,0,0,0.5);
        }

        .db-body-reset { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', system-ui, sans-serif; background-color: var(--bg-surface1); color: var(--text-main); line-height: 1.6; }

        .db-dashboard-container { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
        
        /* Sidebar */
        .db-aside { background: var(--bg-surface1); border-right: 1px solid var(--border-main); padding: 2rem; position: sticky; top: 0; height: 100vh; }
        .db-logo { font-size: 1.5rem; font-weight: 800; background: var(--db-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 2rem; }
        .db-nav-ul { list-style: none; padding: 0; margin: 0; }
        .db-nav-li { padding: 0.8rem; margin-bottom: 0.4rem; border-radius: 8px; color: var(--text-muted); cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 10px; }
        .db-nav-li:hover, .db-nav-li.db-active { background: var(--db-glass); color: var(--text-main); }

        .db-main { padding: 2rem; max-width: 1400px; margin: 0 auto; width: 100%; }

        /* Counter Grid */
        .db-counter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; }
        .db-counter-card { background: var(--bg-surface1); border: 1px solid var(--border-main); padding: 1.5rem; border-radius: 12px; text-align: center; }
        .db-counter-num { font-size: 2rem; font-weight: 800; display: block; background: var(--db-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .db-counter-label { color: var(--text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; }

        /* Charts Grid */
        .db-charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 3rem; }
        .db-card { background: var(--bg-surface1); border: 1px solid var(--border-main); border-radius: 20px; padding: 1.5rem; }
        .db-card-title { font-size: 1.1rem; margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: center; }

        /* Bar Chart */
        .db-bar-container { height: 200px; display: flex; align-items: flex-end; justify-content: space-around; padding-top: 20px; }
        .db-bar-group { display: flex; flex-direction: column; align-items: center; width: 15%; height: 100%; justify-content: flex-end; }
        .db-bar { width: 100%; background: var(--db-gradient); border-radius: 4px 4px 0 0; transition: height 1s; }
        .db-bar-label { font-size: 0.7rem; color: var(--text-muted); margin-top: 8px; text-align: center; }

        /* Pie Chart SVG */
        .db-pie-container { display: flex; align-items: center; justify-content: center; position: relative; height: 200px; }
        .db-pie-legend { display: flex; flex-direction: column; gap: 8px; margin-left: 20px; }
        .db-legend-item { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text-muted); }
        .db-dot { width: 10px; height: 10px; border-radius: 50%; }

        /* Section Rows */
        .db-section-block { margin-bottom: 2rem; border-radius: 15px; padding: 30px; background:var(--bg-surface1); box-shadow:0px 2px 16px rgba(0,0,0,0.2);  transition: 0.4s;}
        .db-section-block:hover {box-shadow: 0px 0px 12px 0px color-mix(in srgb, var(--accent-1) 40%, transparent); transition: 0.15s;}

        .db-section-block:hover > .db-section-header {
            border-left: 6px solid var(--accent-2);
            transition: border-left 0.6s;
        }

        .db-section-header { display: flex; align-items: center; gap: 15px; margin-bottom: 1.5rem; border-left: 6px solid var(--accent-1); padding-left: 15px; transition: 0.8s;}
        .db-section-header h2{color: var(--text-main);
          user-select: none; /* Standard for most browsers */
          -webkit-user-select: none; /* Safari */
          -moz-user-select: none; /* Firefox */
          -ms-user-select: none; /* Internet Explorer */
        }
        .db-content-layout { display: grid; grid-template-columns: 350px 1fr; gap: 1.5rem; }
        
        .db-featured-item { border-radius: 16px; padding: 2rem; display: flex; flex-direction: column; justify-content: flex-end; min-height: 280px; position: relative; overflow: hidden; cursor: pointer; transition: 0.4s;}
        .db-featured-item:hover {border: 1px solid var(--border-main); border-color: var(--accent-1); transform: scale(1.03); transition: 0.15s ease; box-shadow: 0px 0px 20px 4px var(--accent-1);}
        .db-featured-item::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.2); }
        .db-featured-content { position: relative; z-index: 2; }
        .db-featured-tag { background: rgba(255,255,255,0.2); padding: 4px 12px; border-radius: 20px; font-size: 0.7rem; text-transform: uppercase; }

        .db-recent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
        .db-recent-card { background: var(--bg-surface2); border: 1px solid var(--border-main); border-radius: 12px; padding: 1.2rem; transition: 0.4s; cursor: pointer; }
        .db-recent-card:hover { border-color: var(--accent-1); transform: translateY(-8px); transition: 0.15s;}
        .db-recent-date { font-size: 0.7rem; color: var(--text-muted); }
        .db-recent-title { color: var(--text-main); font-size: 0.9rem; font-weight: 600; margin: 8px 0; display: block; }
        .db-recent-card p { color: var(--text-muted); font-size: 0.9rem; font-weight: 500; margin: 8px 0; display: block; }

        /* Newsletter */
        .db-newsletter-footer { background: var(--db-glass); border: 1px solid var(--border-main); padding: 3rem; border-radius: 24px; text-align: center; margin-top: 2rem; }
        .db-input-wrap { max-width: 500px; margin: 1.5rem auto 0; display: flex; gap: 10px; }
        .db-input-wrap input { flex: 1; padding: 1rem; border-radius: 10px; border: 1px solid var(--border-main); background: #000; color: white; }
        .db-input-wrap button { padding: 0 2rem; border-radius: 10px; border: none; background: var(--db-gradient); color: white; font-weight: 700; cursor: pointer; }
        
        .db-recent-thumb{
            position: relative;
            width: 100% ; 
            height: 150px;
            background:var(--bg-surface2); margin-top:10px; flex-shrink: 0; border-radius: 4px; overflow: hidden; 
        }

        

        .db-badge{
            position:absolute; top:10px; right:10px; background:#c0392b; color:white; padding:4px 8px; font-size:10px; font-weight:bold; border-radius:4px; z-index: 2; box-shadow: 0 2px 10px rgba(0,0,0,0.3);
        }



        /* The Container */
        .db-featured-item {
            position: relative;
            border-radius: 12px; /* Match your design's roundness */
            overflow: hidden;    /* Clips the image as it scales */
            height: 300px;       /* Set your desired height */
            display: flex;
            align-items: flex-end;
        }

        /* The Image Wrapper */
        .db-image-wrapper {
            position: absolute !important;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
        }

        .db-image-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
        }

        /* The Dark Overlay (replaces the linear-gradient you had) */
        .db-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.7));
            z-index: 1;
        }

        /* Hover Trigger */
        .db-featured-item:hover img {
            transform: scale(1.1);
        }

        /* Content Layer */
        .db-featured-content {
            position: relative;
            z-index: 2; /* Sits above the image and overlay */
            padding: 20px;
            color: white;
            pointer-events: none;
        }

        /*
        .db-image-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            min-height: 200px; 
            overflow: hidden;
        }

        .db-image-wrapper img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .db-featured-item:hover img {
            transform: scale(1.05);
        }
        */


        .dash-heatmap-grid {
            display: grid;
            grid-template-rows: repeat(7, 1fr); /* 7 days a week */
            grid-auto-flow: column;             /* Stack vertically first */
            gap: 3px;
        }


        .dash-day-cell {
           aspect-ratio: 1/1;
            border-radius: 2px;
            background: var(--dash-level-0);
            transition: transform 0.2s;
        }

        .dash-day-cell:hover {
            transform: scale(1.3);
            z-index: 10;
            outline: 1px solid #fff;
        }

        .dash-heatmap-months {
            display: grid;
            /* Must match the 53 columns of the grid */
            grid-template-columns: repeat(53, 1fr); 
            font-size: 0.7rem;
            color: var(--text-muted);
            margin-bottom: 5px;
            height: 15px;
        }

        .dash-heatmap-months span {
            grid-column: span 1;
            text-align: left;
        }




        /* #########################*/
        /* --- ARTICLES */
        /* #########################*/
        .block-wrapper{
            position: relative;
            width: 100%;
            background: var(--accent-1);
            background: linear-gradient(160deg,var(--accent-1) 0%, var(--accent-2) 100%);
            height: 200px;
            border-radius: 20px;
            padding: 20px;
            margin-bottom: 1.5rem;
        }


        .text-block-wrapper{
            position: relative;
            width: 100%;
            background: var(--bg-surface1);
            min-height: 100px;
            border-radius: 20px;
            padding: 20px;
            margin-bottom: 1.5rem;
            color: var(--text-main);
        }


        .filter-footer-wrap{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }


        .mobile-filters-apply-btn{display: none;}




        /* #########################*/
        /* --- SHOP */
        /* #########################*/
        .close-filter-mini-btn{
            display: none;
            background: none;
            border: none;
            color: var(--text-main);
            cursor: pointer;
            padding: 2px 11px 8px 11px;
            position: absolute;
            right: 30px;
            border-radius: 6px;
            line-height: 100%;
            font-weight: 600;
            font-size: 2rem;
            top: 70px;
        }
        
        


        /* #########################*/
        /* --- NEWSLETTER */
        /* #########################*/
        .newsletter-wrap {
            padding: 100px 5%;
            text-align: center;
            background: var(--bg-surface2);
            user-select: none; /* Standard for most browsers */
            -webkit-user-select: none; /* Safari */
            -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* Internet Explorer */
        }

        .newsletter-box {
            max-width: 600px;
            margin: 0 auto;
            background: var(--surface);
            padding: 50px;
            border-radius: 30px;
            border: 1px solid rgba(255,255,255,0.1);
            background:var(--bg-surface1);
            box-shadow:0px 2px 16px rgba(0,0,0,0.2);
            transition: 0.6s ease; 
        }
        
        .newsletter-box:hover{
            border: 1px solid var(--border-main); border-color: var(--accent-1); transform: scale(1.03); transition: 0.15s ease; box-shadow: 0px 0px 20px 2px var(--accent-1);
        }
        
        .newsletter-box h2 {color: var(--text-main)}
        .newsletter-box p {color: var(--text-muted)}

        .newsletter-wrap input {
            width: 100%;
            padding: 15px 25px;
            border-radius: 50px;
            border: 1px solid #333;
            background: #000;
            color: #fff;
            margin: 20px 0;
            outline: none;
        }

        .newsletter-wrap button {
            background: var(--accent);
            color: white;
            border: 1px solid #333;
            padding: 15px 40px;
            border-radius: 50px;
            font-weight: bold;
            cursor: pointer;
            transition: 0.3s;
        }

        .newsletter-wrap button:hover { transform: scale(1.05); background: #0056b3; }
        
        






        
        
        
        /* #########################*/
        /* --- FOOTER */
        /* #########################*/
        footer {
            position: relative;
            padding: 40px 5% 40px;
            border-top: 1px solid var(--border-main);
            background:var(--bg-canvas);
            user-select: none; /* Standard for most browsers */
            -webkit-user-select: none; /* Safari */
            -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* Internet Explorer */
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr;
            gap: 40px;
        }
        
        .footer-logo { font-size: 2rem; font-weight: 800; margin-bottom: 20px; }
        .footer-links {color:white;}
        .footer-links h4 { color: white; margin-bottom: 20px; font-size: 0.8rem; text-transform: uppercase; font-weight: 800;}
        .footer-links ul { list-style: none; }
        .footer-links li { margin-bottom: 12px; color: white; cursor: pointer; transition: 0.3s; }
        .footer-links li:hover { color: var(--text-highlight); }
        
        .footer-annoucements{margin-top: 60px; color:white; font-size: 0.8rem; display: flex; justify-content: space-between;}
        
        .social-footer-links{
            
        }

        .social-foot-link {
            height: 40px;
            width: 40px;
            border-radius:40px;
            margin-top:20px;
            padding:2px;
            transition: 0.4s ease;
        }

        .social-foot-link:hover {
            background: var(--accent-1);
            transition: 0.1s ease;
        }

        .social-foot-link img{
            height: 100%;
        }

        



        /* #########################*/
        /* --- COOKIE BANNER */
        /* #########################*/
        /* Cookie Consent Banner */
        .tw-consent-banner {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%) translateY(150%);
            width: 90%;
            max-width: 500px;
            background: var(--bg-surface1);
            border: 1px solid var(--border-main);
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 0 20px rgba(0,0,0,0.5), 0 0 10px var(--accent-1);
            z-index: 9999;
            transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .tw-consent-banner.active {
            transform: translateX(-50%) translateY(0);
        }

        .tw-consent-text {
            font-size: 0.85rem;
            line-height: 1.4;
            color: var(--text-main, #fff);
        }

        .tw-consent-text a {
            color: var(--accent-1);
            text-decoration: underline;
        }

        .tw-consent-buttons {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
        }

        .tw-btn-consent {
            padding: 8px 16px;
            border-radius: 4px;
            font-family: 'Exo 2', sans-serif;
            font-weight: 600;
            cursor: pointer;
            transition: 0.2s;
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .tw-btn-accept {
            background: var(--accent-1);
            color: white;
            border: none;
        }

        .tw-btn-reject {
            background: transparent;
            color: var(--text-muted);
            border: 1px solid var(--text-muted);
        }

        .tw-btn-consent:hover {
            filter: brightness(1.2);
            box-shadow: 0 0 10px var(--accent-1);
        }







    /* --- MOBILE CSS --- */
    @media (max-width: 1023px) {
        /* ###################*/
        /* --- MOBILE NAVIGATION */
        /* ###################*/
        .nav-wrapper { display: none; }
        .nav-hamburger { display: flex; box-shadow: 0px 1px 8px 2px rgba(0,0,0,0.2);}
        .slider-toggle-container {
            border:none;
        }
        
        .navigation {
          top: 12px;
        }

        .dbs-search-panel{
            display: none;
        }
        
        
        /* ################################*/
        /* --- MOBILE PARALLAX AND BANNERS */
        /* ################################*/
        .hero-overlay h1 { font-size: 3.5rem; }
        .parallax-banner { height: 50vh; }

        
        
        /* #########################*/
        /* --- MOBILE DASHBOARD */
        /* #########################*/
        .dash-donut-container {
            flex-direction: row; /* Stack horizontally */
            justify-content: space-between;
            align-items: center;
            gap: 15px;
            padding: 5px;
        }

        .dash-donut-wrapper {
            /* Shrink the chart slightly to fit the legend next to it */
            width: 100px;
            height: 100px;
            flex-shrink: 0; /* Prevent the circle from squishing */
        }

        .dash-legend {
            margin-top: 0; /* Remove top margin since it's now side-by-side */
            flex: 1;       /* Take up remaining space */
            justify-content: center;
        }

        .dash-legend-item {
            padding: 4px 0; /* Tighter vertical spacing for mobile list */
        }

        .dash-total-count {
            font-size: 1rem; /* Scale down text to match smaller circle */
        }
        
        
        .dash-card-title{
            text-align: left;
            margin-left:10px;
            margin-top: 10px;
        }
        
        
        .dash-heatmap-grid{
            gap:1px !important;
            min-width:1px;
        }
        
        /* ################################*/
        /* --- MOBILE ARTICLES / PORTFOLIO */
        /* ################################*/
        .filter-footer-wrap{
            padding: 1.5rem;
            position: fixed;
            bottom: 0px;
            width: calc(100% - 0px);
            background: var(--bg-surface2);
            border-top: 1px solid var(--border-main);
            left: 0px;
        }

        
        .portfolio-reset-btn{
            margin-top:0px;
            width: calc(50% - 1rem);
            display: inline-block;
            margin-right: 1.5rem;
        }

        
        .mobile-filters-apply-btn{
            width:calc(50% - 1rem); padding:1rem; background:var(--bg-surface1); color:var(--text-main); border: 1px solid var(--border-main); font-weight:700; border-radius:4px;
            display: inline-block;
            transition: 0.4s ease;
        }


        .mobile-filters-apply-btn:hover{
            filter: brightness(1.2);
            transition: 0.1s ease;
        }

        .mobile-filters-apply-btn:active{
            filter: brightness(0.9);
            transition: 0.05s ease;
        }
        
        
        
        /* #########################*/
        /* --- MOBILE SHOP */
        /* #########################*/
        .shop-drawer, .shop-drawer-overlay { display: block !important; }
        .shop-sidebar { display: none; }
        .shop-mobile-filter-trigger { display: flex; }
        .pagination-shop-container { flex-direction: column; text-align: center; }

        body.filters-open { overflow: hidden; }
        body.filters-open .shop-drawer-overlay { opacity: 1; pointer-events: auto; }


        .close-filter-mini-btn{
            display: block;
        }
        
        /* #########################*/
        /* --- MOBILE FOOTER */
        /* #########################*/
        .footer-grid { grid-template-columns: 1fr; padding: 20px 8% 40px;}

    }
        
        
        
        
   @media (max-width: 1100px) {
        /* #########################*/
        /* --- MOBILE DASHBOARD */
        /* #########################*/
        .db-dashboard-container { grid-template-columns: 1fr; }
        .db-aside { display: none; }
        .db-content-layout { grid-template-columns: 1fr; }
        .db-charts-grid { grid-template-columns: 1fr; }
    }

        

    @media (max-width: 1000px) {
        /* #########################*/
        /* --- MOBILE DASHBOARD */
        /* #########################*/
        .dash-distribution-row { grid-template-columns: 1fr; }
    }

        

    @media (max-width: 768px) {
        /* #########################*/
        /* --- MOBILE DASHBOARD */
        /* #########################*/
        .db-counter-grid { grid-template-columns: repeat(2, 1fr); }
        .db-recent-grid { grid-template-columns: 1fr; }
        
        
        
        /* Change the card to a row layout */
        .db-recent-card {
            display: flex;
            flex-direction: row; /* Align items side-by-side */
            gap: 15px;
            align-items: flex-start;
            padding: 1rem;
        }

        /* Target the image container */
        .db-recent-thumb {
            position: absolute;
            width: 100px !important;  /* Fixed width for the square look */
            height: 100px !important; /* Fixed height to match */
            margin-top: 0 !important; /* Remove the top margin you have inline */
            flex-shrink: 0;           /* Prevent the image from squishing */
        }

        .db-recent-date{margin-left: 115px;}
        .db-recent-info p {margin-left: 115px !important; }
        
        /* Ensure the info section takes up the remaining space */
        .db-recent-info {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding-right: 68px;
        }

        /* Optional: Small typography adjustments for the tighter space */
        .db-recent-title {
            margin-top: 0;
            font-size: 0.85rem;
            line-height: 1.3;
            margin-left: 115px;
        }
        
        
    }