/* KOGG MEDIA - 2026 PREMIUM CORE */
@import url('https://fonts.cdnfonts.com/css/anurati');
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;600;800&family=Nunito+Sans:wght@300;400;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    --bg-deep: #020205;
    --bg-surface: #0a0a0f;
    --accent-cyan: #00f2ff;
    --accent-blue: #0072ff;
    --text-main: #ffffff;
    --text-dim: #94a3b8;
    --gradient: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));
    --glass: rgba(255, 255, 255, 0.03);
    --border: rgba(255, 255, 255, 0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    background-color: var(--bg-deep); 
    color: var(--text-main); 
    font-family: 'Nunito Sans', sans-serif; 
    line-height: 1.7; 
    overflow-x: hidden;
}

/* Typography */
h1, h2, h3 { font-family: 'Lexend', sans-serif; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.logo-font { font-family: 'Anurati', sans-serif; letter-spacing: 4px; }
.mono { font-family: 'JetBrains Mono', monospace; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 2px; color: var(--accent-cyan); }

.container { max-width: 1400px; margin: 0 auto; padding: 0 4rem; }
.section { padding: 120px 0; position: relative; }

/* Sections Dividers */
.divider { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); margin: 40px 0; }

/* Navigation */
nav {
    position: fixed; width: 100%; top: 0; z-index: 1000;
    padding: 1.5rem 0; background: rgba(2, 2, 5, 0.8); backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
}
.nav-content { display: flex; justify-content: space-between; align-items: center; }
.nav-links a { margin-left: 2.5rem; text-decoration: none; color: #fff; font-family: 'Lexend'; font-size: 0.85rem; transition: 0.3s; }
.nav-links a:hover { color: var(--accent-cyan); }

/* Buttons */
.btn {
    padding: 1rem 2.5rem; border-radius: 4px; text-decoration: none; font-family: 'Lexend';
    font-weight: 600; display: inline-flex; align-items: center; transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-primary { background: var(--gradient); color: #000; }
.btn-primary:hover { transform: scale(1.05); box-shadow: 0 0 30px rgba(0, 242, 255, 0.3); }

/* Blinking WhatsApp */
.whatsapp-float {
    position: fixed; bottom: 40px; right: 40px; z-index: 2000;
    width: 65px; height: 65px; background: #25d366;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    animation: whatsapp-pulse 2s infinite;
    cursor: pointer;
}

@keyframes whatsapp-pulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 20px rgba(37, 211, 102, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* Social Icons List */
.social-bar { display: flex; gap: 20px; align-items: center; }
.social-icon { color: #fff; text-decoration: none; font-size: 0.9rem; transition: 0.3s; }
.social-icon:hover { color: var(--accent-cyan); transform: translateY(-3px); }

/* Animations */
.reveal { opacity: 0; transform: translateY(40px); transition: all 1s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }

/* Bento Grid */
.bento-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; margin-top: 40px; }
.bento-item { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 20px; padding: 40px; overflow: hidden; position: relative; }