html { scroll-behavior: smooth; scroll-padding-top: 88px; }
    body { font-family: "DM Sans", sans-serif; background: #101827; }
    h1,h2,h3,.brand { font-family: "Space Grotesk", sans-serif; }
    .grid-bg {
      background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: linear-gradient(to bottom, black, transparent 90%);
    }
    .gradient-text { background: linear-gradient(100deg,#fff 10%,#d7b5ef 55%,#ffc010); -webkit-background-clip:text; background-clip:text; color:transparent; }
    .glass { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.10); backdrop-filter: blur(16px); }
    .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    .nav-link.active { color: #FFC010; }
    .nav-link.active::after { width: 100%; }
    .nav-link::after { content:""; display:block; height:2px; width:0; background:#FFC010; transition:width .25s ease; margin-top:5px; }
    .project-card:hover .project-art { transform: scale(1.04); }
    .project-art { transition: transform .5s ease; }
    .skill-bar > span { display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,#66208D,#FFC010); transition:width 1.2s ease; }
    ::selection { background:#66208D; color:#fff; }

.skill { border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); border-radius:999px; padding:7px 12px; font-size:12px; color:#cbd5e1; }




/* Floating WhatsApp Button */

.whatsapp-float {
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 9999;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 13px 20px;
    border-radius: 50px;

    background: #25D366;
    color: #ffffff;

    font-size: 14px;
    font-weight: 700;
    text-decoration: none;

    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3);

    transition: all 0.3s ease;
}

.whatsapp-float:hover {
    background: #1ebe5d;
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.4);
}

.whatsapp-icon {
    width: 25px;
    height: 25px;
    flex-shrink: 0;
}

/* Mobile Responsive */

@media (max-width: 480px) {
    .whatsapp-float {
        right: 15px;
        bottom: 15px;
        padding: 12px 16px;
        font-size: 12px;
    }

    .whatsapp-icon {
        width: 22px;
        height: 22px;
    }
}