/*
Theme Name: Mr360 Dev Growth Theme
Theme URI: https://mr360.online/
Author: Mr360.online
Author URI: https://mr360.online/
Description: A custom, premium custom WordPress theme for Mr360.online agency. Blends a dark-mode IDE developer environment with a high-growth neon ads and marketing visual system. Powered by GSAP ScrollTrigger and Three.js.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mr360
Tags: dark, developer, marketing, WebGL, GSAP, tailwind

Built using semantic HTML5, GSAP for smooth scroll-trigger parallax, Three.js for programmatic 3D WebGL morphing, and Tailwind CSS.
*/

/* ==========================================================================
   CSS CUSTOM PROPERTIES (IDE & HIGH-SPEED GROW METRICS)
   ========================================================================== */
:root {
    /* Color Palette - Hacker / IDE */
    --color-bg-hacker: #05070a;
    --color-panel-ide: #0c0f16;
    --color-border-ide: rgba(0, 240, 255, 0.1);
    
    /* Syntax Highlighting (VS Code Dark Theme) */
    --syntax-tag: #e06c75;       /* Red */
    --syntax-attr: #d19a66;      /* Orange */
    --syntax-string: #98c379;    /* Green */
    --syntax-keyword: #c678dd;   /* Purple */
    --syntax-comment: #5c6370;   /* Gray */
    --syntax-function: #61afef;  /* Blue */

    /* Color Palette - Marketing & Social Platforms */
    --color-platform-google: #4285f4;
    --color-platform-facebook: #1877f2;
    --color-platform-tiktok-cyan: #00f2fe;
    --color-platform-tiktok-magenta: #fe0979;
    --color-platform-snapchat: #fffc00;
    
    /* Neon Accents */
    --color-neon-blue: #00f0ff;
    --color-neon-purple: #8b5cf6;
    --color-neon-green: #10b981;
    --gradient-growth: linear-gradient(135deg, var(--color-platform-tiktok-cyan) 0%, var(--color-platform-tiktok-magenta) 100%);
    --gradient-ide: linear-gradient(135deg, var(--color-neon-blue) 0%, var(--color-neon-purple) 100%);

    /* Typography */
    --font-heading: 'Outfit', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    --font-body: 'Inter', sans-serif;

    /* Transitions & Blurs */
    --glass-bg: rgba(12, 15, 22, 0.7);
    --glass-border: rgba(255, 255, 255, 0.05);
    --glass-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.5);
    --transition-smooth: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   RESET & SYSTEM WRAPPERS
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    background-color: var(--color-bg-hacker);
    color: #e2e8f0;
    font-family: var(--font-body);
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: var(--color-bg-hacker);
}
::-webkit-scrollbar-thumb {
    background: #171d2b;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-neon-blue);
}

/* Selection */
::selection {
    background: rgba(0, 240, 255, 0.2);
    color: #ffffff;
}

/* Code Styles */
code, pre {
    font-family: var(--font-mono);
}

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}