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

    html {
        scroll-behavior: smooth;
        scroll-padding-top: 120px;
    }

    /* --- TEMA DARK FUTURISTA --- */
    body {
        font-family: 'Plus Jakarta Sans', sans-serif;
        color: #e2e8f0; /* Texto claro */
        background-color: #020617; /* Fundo super escuro (Slate 950) */
        overflow-x: hidden;
    }

    /* Fundo com efeito de luzes de servidor/nebulosa */
    .bg-animated {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: -1;
        background-color: #020617;
        background-image: 
            radial-gradient(circle at 15% 50%, rgba(16, 185, 129, 0.08), transparent 25%),
            radial-gradient(circle at 85% 30%, rgba(56, 189, 248, 0.05), transparent 25%);
        animation: pulseLuz 10s ease-in-out infinite alternate;
    }

    @keyframes pulseLuz {
        0% { opacity: 0.8; }
        100% { opacity: 1.2; }
    }

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

    h1, h2, h3 { font-family: 'Outfit', sans-serif; font-weight: 700; color: #f8fafc; }
    a { text-decoration: none; transition: 0.3s; }
    
    .gradient-text {
        background: linear-gradient(to right, #34d399, #10b981); /* Verde Neon */
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 0 20px rgba(16, 185, 129, 0.3); /* Efeito Glow */
    }

    /* --- NAVBAR GLASSMORPHISM --- */
    header {
        position: sticky;
        top: 20px;
        z-index: 999;
        padding-bottom: 20px;
    }

    .navbar {
        background: rgba(15, 23, 42, 0.7); /* Vidro Escuro */
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        padding: 15px 30px;
        border-radius: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: 1px solid rgba(255, 255, 255, 0.05); 
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    }

    .navbar h2 { font-size: 1.5rem; margin: 0; color: #f8fafc;}
    .navbar h2 span { color: #10b981 !important; }

    .navbar ul { display: flex; list-style: none; gap: 25px; }
    .navbar a { color: #cbd5e1; font-weight: 500; font-size: 0.95rem; }
    .navbar a:hover { color: #10b981; text-shadow: 0 0 10px rgba(16, 185, 129, 0.5); }
    
    .btn-contact {
        background: #10b981; 
        color: #020617 !important; /* Contraste agressivo estilo terminal */
        font-weight: 700 !important;
        padding: 8px 20px;
        border-radius: 20px;
        box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
    }
    .btn-contact:hover {
        background: #34d399;
        box-shadow: 0 0 25px rgba(16, 185, 129, 0.6);
    }

    /* --- HERO SECTION --- */
    .hero {
        min-height: 85vh;
        display: flex;
        align-items: center;
        padding-top: 50px;
    }

    .hero-flex { display: flex; align-items: center; justify-content: space-between; gap: 50px; width: 100%; }
    .hero-text { flex: 1; }
    .hero-text h2 { font-size: 3.5rem; line-height: 1.1; margin: 20px 0; }
    .hero-text p { color: #94a3b8; }
    
    .hero-img { flex: 1; display: flex; justify-content: center; }
    .hero-img img {
        width: 350px; height: 350px; object-fit: cover; border-radius: 50%;
        border: 4px solid rgba(16, 185, 129, 0.5);
        box-shadow: 0 0 40px rgba(16, 185, 129, 0.2);
        filter: grayscale(20%) contrast(110%); /* Dá um tom mais sério à foto */
    }

    .btns-wrapper { display: flex; gap: 15px; margin-top: 30px; }
    
    .btn-primary {
        background: transparent;
        color: #10b981;
        padding: 12px 30px;
        border-radius: 12px;
        font-weight: 700;
        border: 1px solid #10b981;
        box-shadow: 0 0 15px rgba(16, 185, 129, 0.1);
        font-family: 'JetBrains Mono', monospace; /* Fonte de código no botão */
    }
    
    .btn-primary:hover {
        background: rgba(16, 185, 129, 0.1);
        transform: translateY(-3px);
        box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
    }

    .hero-text a[target="_blank"] { color: #cbd5e1 !important; transition: 0.3s; }
    .hero-text a[target="_blank"]:hover { color: #10b981 !important; }

    /* --- SKILLS (PILLS FUTURISTAS) --- */
    .skills { padding: 80px 0; }
    .section-title { text-align: center; font-size: 2.5rem; margin-bottom: 20px; }
    
    .skills-category {
        text-align: center;
        font-size: 1.2rem;
        color: #94a3b8;
        margin: 40px 0 20px 0;
        font-family: 'JetBrains Mono', monospace;
        letter-spacing: 1px;
    }

    .skills-grid {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 15px;
    }

    .skill-card {
        background: rgba(30, 41, 59, 0.4);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.05);
        padding: 10px 20px;
        border-radius: 50px;
        display: flex;
        align-items: center;
        gap: 12px;
        transition: all 0.3s ease;
    }

    .skill-card:hover { 
        transform: translateY(-5px); 
        background: rgba(30, 41, 59, 0.8); 
        border-color: #10b981;
        box-shadow: 0 5px 20px rgba(16, 185, 129, 0.2);
    }

    .skill-card i { font-size: 24px !important; }
    .skill-card p { margin: 0; font-weight: 500; font-size: 0.95rem; color: #e2e8f0; }

    /* --- PROJETOS (DARK CARDS) --- */
    .projects-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 30px;
    }

    .project-card {
        background: #0f172a; /* Slate 900 */
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.05);
        display: flex;
        flex-direction: column;
        transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    }

    .project-card:hover { 
        transform: translateY(-5px); 
        box-shadow: 0 10px 30px rgba(16, 185, 129, 0.15);
        border-color: rgba(16, 185, 129, 0.5);
    }

    .card-img {
        height: 200px;
        background: #020617; /* Fundo interno mais escuro */
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .card-img img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; transition: 0.3s; }
    .project-card:hover .card-img img { opacity: 1; }
    
    .card-img i { font-size: 4rem; color: #10b981; filter: drop-shadow(0 0 10px rgba(16,185,129,0.4)); }

    .card-content { padding: 25px; display: flex; flex-direction: column; flex-grow: 1; }
    
    /* Tags com fonte de código */
    .tag { 
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.7rem; 
        background: rgba(16, 185, 129, 0.1); 
        padding: 4px 10px; 
        border-radius: 6px; 
        color: #34d399; 
        font-weight: 700;
        display: inline-block;
        margin-bottom: 15px;
        margin-right: 5px;
        text-transform: uppercase;
        border: 1px solid rgba(16, 185, 129, 0.2);
    }

    /* Tag de Em Andamento com cor cinza escuro */
    .tag[style*="background:#f1f5f9"] {
        background: rgba(255, 255, 255, 0.05) !important;
        color: #94a3b8 !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .card-content p { font-size: 0.95rem; color: #94a3b8; line-height: 1.6; margin-bottom: 20px; flex-grow: 1; }
    
    .project-card a { 
        font-family: 'JetBrains Mono', monospace;
        color: #10b981 !important; 
        font-weight: 700;
        align-self: flex-start;
        display: flex;
        align-items: center;
        gap: 5px;
    }
    .project-card a:hover { color: #34d399 !important; transform: translateX(5px); }

    /* --- FOOTER --- */
    footer { text-align: center; padding: 60px 0; border-top: 1px solid rgba(255,255,255,0.05); margin-top: 50px; }
    .footer-box {
        background: rgba(15, 23, 42, 0.5);
        backdrop-filter: blur(10px);
        padding: 40px;
        border-radius: 20px;
        max-width: 600px;
        margin: 0 auto;
        border: 1px solid rgba(255, 255, 255, 0.05);
    }
    .footer-icons { display: flex; justify-content: center; gap: 20px; margin-top: 20px; font-size: 1.5rem; }
    .footer-icons a { color: #cbd5e1; transition: 0.3s; }
    .footer-icons a:hover { color: #10b981; transform: scale(1.1); text-shadow: 0 0 10px rgba(16,185,129,0.5); }

    /* --- RESPONSIVIDADE --- */
    @media (max-width: 900px) {
        header { padding: 10px; }
        .navbar { flex-direction: column; padding: 20px; gap: 20px; border-radius: 20px; }
        .navbar ul { flex-wrap: wrap; justify-content: center; gap: 15px; }
        .hero { min-height: auto; text-align: center; }
        .hero-flex { flex-direction: column-reverse; gap: 30px; }
        .hero-img img { width: 200px; height: 200px; }
        .hero-text h2 { font-size: 2.5rem; }
        .btns-wrapper { justify-content: center; flex-wrap: wrap; }
    }