/* ==========================================================================
   CORE VARIABLES & BASE SETUP
   ========================================================================== */
:root {
    --bg-page: #faf9f6; 
    --bg-card: #ffffff;
    --bg-dark: #0f172a;
    
    --text-dark: #1e293b;
    --text-body: #475569;
    --text-light: #94a3b8;
    
    --accent-blue: #0284c7;
    --accent-blue-hover: #0369a1;
    --accent-orange: #ea580c;
    --accent-green: #10b981;
    --accent-purple: #8b5cf6;
    
    --font-display: 'Outfit', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    --font-code: 'Fira Code', monospace;
    
    --shadow-soft: 0 10px 40px -10px rgba(0,0,0,0.08);
    --shadow-hover: 0 20px 40px -10px rgba(2, 132, 199, 0.15);
    --radius-box: 24px;
    --transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

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

html { 
    scroll-behavior: smooth; 
    background-color: var(--bg-page); 
}

body { 
    font-family: var(--font-body); 
    color: var(--text-body); 
    line-height: 1.7; 
    overflow-x: hidden; 
    transition: transform 0.5s ease; 
}

::selection { 
    background-color: var(--accent-orange); 
    color: white; 
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-page); }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-blue); }

.mouse-dot, .mouse-ring {
    position: fixed; 
    top: 0; left: 0; 
    transform: translate(-50%, -50%);
    border-radius: 50%; 
    z-index: 2147483647; 
    pointer-events: none;
}
.mouse-dot { width: 6px; height: 6px; background-color: var(--accent-orange); }
.mouse-ring { 
    width: 36px; height: 36px; 
    border: 2px solid rgba(234, 88, 12, 0.4); 
    transition: width 0.2s, height 0.2s, background-color 0.2s; 
}

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text-dark); line-height: 1.2; }

.main-title { 
    font-size: clamp(2.2rem, 4vw, 3.5rem); 
    text-align: center; margin-bottom: 4rem; position: relative; display: block; 
}
.main-title span { color: var(--accent-blue); }
.main-title::after { content: '.'; color: var(--accent-orange); }

.tagline { 
    font-size: 1.1rem; color: var(--accent-orange); font-weight: 700; 
    text-transform: uppercase; letter-spacing: 1.5px; display: block; margin-bottom: 10px; 
}