/* Base variables and global styles */
:root {
    --primary: #00c6ff;
    --primary-dark: #0072ff;
    --secondary: #00d9a6;
    --secondary-dark: #00b894;
    --dark: #0f172a;
    --light: #f8fafc;
    --gray: #64748b;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --digital-blue: #00f5ff;
    --digital-green: #00ffaa;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

html { scroll-behavior: smooth; }

body {
    background-color: var(--dark);
    color: var(--light);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 80%, rgba(0, 198, 255, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(0, 217, 166, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(0, 245, 255, 0.1) 0%, transparent 50%);
    z-index: -1;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

section { padding: 80px 0; }

.section-title { text-align: center; margin-bottom: 50px; }
.section-title h2 { font-size: 2.5rem; color: var(--light); margin-bottom: 15px; position: relative; display: inline-block; }
.section-title h2::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 80px; height: 4px; background: linear-gradient(90deg, var(--primary), var(--secondary)); border-radius: 2px; }
.section-title p { color: var(--gray); max-width: 700px; margin: 0 auto; font-size: 1.1rem; }

/* Accessible visually-hidden helper */
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }