:root {
            --dev-primary: #4facfe;
            --dev-secondary: #00f2fe;
            --dev-accent: #a855f7;
            --dev-dark: #050810;
            --dev-surface: #0d1117;
            --dev-card: #161b22;
            --font-display: 'Outfit', sans-serif;
            --font-mono: 'JetBrains Mono', monospace;
            --font-body: 'Inter', sans-serif;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body { font-family: var(--font-body); background: var(--dev-dark); color: #fff; overflow-x: hidden; }
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--dev-dark); }
        ::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, var(--dev-primary), var(--dev-secondary)); border-radius: 4px; }

        /* Grid Background */
        .grid-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background-image: linear-gradient(rgba(79,172,254,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(79,172,254,0.03) 1px,transparent 1px); background-size: 60px 60px; animation: gridMove 20s linear infinite; }
        @keyframes gridMove { 0% { background-position: 0 0; } 100% { background-position: 60px 60px; } }
        .grid-bg::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(ellipse at 20% 20%,rgba(79,172,254,0.15) 0%,transparent 50%),radial-gradient(ellipse at 80% 80%,rgba(0,242,254,0.1) 0%,transparent 50%),radial-gradient(ellipse at 50% 50%,rgba(168,85,247,0.08) 0%,transparent 40%); }

        /* Floating Code */
        .code-float { position: fixed; font-family: var(--font-mono); font-size: .8rem; color: rgba(79,172,254,0.15); pointer-events: none; z-index: -1; white-space: nowrap; }
        .code-float:nth-child(1) { top: 10%; left: 5%; animation: floatCode 8s ease-in-out infinite; }
        .code-float:nth-child(2) { top: 30%; right: 10%; animation: floatCode 10s ease-in-out infinite; animation-delay: 1s; }
        .code-float:nth-child(3) { top: 60%; left: 8%; animation: floatCode 12s ease-in-out infinite; animation-delay: 2s; }
        .code-float:nth-child(4) { top: 80%; right: 5%; animation: floatCode 9s ease-in-out infinite; animation-delay: 3s; }
        @keyframes floatCode { 0%,100% { transform: translateY(0) rotate(0deg); opacity: .15; } 50% { transform: translateY(-20px) rotate(2deg); opacity: .25; } }

        /* Navigation */
        .navbar-dev { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 1.5rem 0; transition: all .4s ease; }
        .navbar-dev.scrolled { background: rgba(5,8,16,0.95); backdrop-filter: blur(20px); padding: 1rem 0; border-bottom: 1px solid rgba(79,172,254,0.1); }
        .nav-brand { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: #fff; text-decoration: none; display: flex; align-items: center; gap: .5rem; }
        .nav-brand .bracket { color: var(--dev-primary); font-family: var(--font-mono); }
        .nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; }
        .nav-link-dev { color: rgba(255,255,255,0.6); text-decoration: none; font-size: .9rem; font-weight: 500; transition: all .3s; position: relative; }
        .nav-link-dev::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: linear-gradient(90deg,var(--dev-primary),var(--dev-secondary)); transition: width .3s; }
        .nav-link-dev:hover { color: #fff; }
        .nav-link-dev:hover::after { width: 100%; }
        .back-btn-dev { display: flex; align-items: center; gap: .5rem; padding: .6rem 1.2rem; background: rgba(79,172,254,0.1); border: 1px solid rgba(79,172,254,0.3); border-radius: 8px; color: var(--dev-primary); text-decoration: none; font-size: .9rem; transition: all .3s; }
        .back-btn-dev:hover { background: var(--dev-primary); color: var(--dev-dark); }

        /* Footer */
        .footer-dev { padding: 3rem 0; text-align: center; border-top: 1px solid rgba(79,172,254,0.1); }
        .footer-text-dev { font-family: var(--font-mono); font-size: .9rem; color: rgba(255,255,255,0.4); }
        .footer-text-dev span { color: var(--dev-primary); }

        /* Mobile Menu */
        .mobile-toggle-dev { display: none; background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; }
        @media (max-width: 992px) {
            .mobile-toggle-dev { display: block; }
            .nav-links { position: fixed; top: 0; right: -100%; width: 80%; max-width: 300px; height: 100vh; background: var(--dev-surface); flex-direction: column; justify-content: center; padding: 2rem; transition: right .4s; border-left: 1px solid rgba(79,172,254,0.1); }
            .nav-links.active { right: 0; }
        }

        /* Accessibility */
        .skip-link { position: absolute; top: -40px; left: 0; background: var(--dev-primary); color: var(--dev-dark); padding: 8px 16px; z-index: 10000; text-decoration: none; border-radius: 0 0 8px 0; }
        .skip-link:focus { top: 0; }
        *:focus-visible { outline: 2px solid var(--dev-primary); outline-offset: 2px; }
        @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

        /* WhatsApp Floating Button */
        .wa-float {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            z-index: 900;
            display: flex;
            align-items: center;
            gap: 0;
            opacity: 0;
            transform: translateY(80px) scale(0.5);
            animation: waEnter .6s cubic-bezier(0.34, 1.56, 0.64, 1) 2s forwards;
        }

        @keyframes waEnter {
            to { opacity: 1; transform: translateY(0) scale(1); }
        }

        .wa-btn {
            position: relative;
            width: 60px;
            height: 60px;
            background: #25D366;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 1.75rem;
            text-decoration: none;
            box-shadow: 0 4px 24px rgba(37, 211, 102, 0.4);
            transition: all .3s ease;
            z-index: 2;
        }

        .wa-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 8px 32px rgba(37, 211, 102, 0.6);
            color: #fff;
        }

        .wa-btn:active { transform: scale(0.95); }

        /* Pulse ring */
        .wa-btn::before {
            content: '';
            position: absolute;
            inset: -6px;
            border-radius: 50%;
            border: 2px solid rgba(37, 211, 102, 0.5);
            animation: waPulse 2s ease-out infinite;
        }

        @keyframes waPulse {
            0% { transform: scale(1); opacity: .7; }
            70% { transform: scale(1.35); opacity: 0; }
            100% { transform: scale(1.35); opacity: 0; }
        }

        /* Online dot */
        .wa-online {
            position: absolute;
            top: 2px;
            right: 2px;
            width: 14px;
            height: 14px;
            background: #22c55e;
            border: 2.5px solid var(--dev-dark);
            border-radius: 50%;
            z-index: 3;
        }

        /* Tooltip */
        .wa-tooltip {
            position: absolute;
            right: 72px;
            white-space: nowrap;
            background: var(--dev-card);
            border: 1px solid rgba(37, 211, 102, 0.25);
            border-radius: 12px;
            padding: .75rem 1.1rem;
            pointer-events: none;
            opacity: 0;
            transform: translateX(10px);
            transition: all .35s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
        }

        .wa-tooltip::after {
            content: '';
            position: absolute;
            top: 50%;
            right: -6px;
            transform: translateY(-50%) rotate(45deg);
            width: 12px;
            height: 12px;
            background: var(--dev-card);
            border-right: 1px solid rgba(37, 211, 102, 0.25);
            border-top: 1px solid rgba(37, 211, 102, 0.25);
        }

        .wa-tooltip-code {
            font-family: var(--font-mono);
            font-size: .75rem;
            color: rgba(37, 211, 102, 0.6);
            margin-bottom: .2rem;
        }

        .wa-tooltip-text {
            font-family: var(--font-body);
            font-size: .85rem;
            color: #fff;
            font-weight: 500;
        }

        .wa-float:hover .wa-tooltip {
            opacity: 1;
            transform: translateX(0);
            pointer-events: auto;
        }

        /* Pulse stops on hover for clean look */
        .wa-float:hover .wa-btn::before { animation: none; opacity: 0; }

        @media (max-width: 576px) {
            .wa-float { bottom: 1.25rem; right: 1.25rem; }
            .wa-btn { width: 52px; height: 52px; font-size: 1.5rem; }
            .wa-tooltip { display: none; }
        }