/* --- Variáveis e Base --- */
        :root {
            --bg-color: #050505;
            --primary: #8b5cf6;
            --secondary: #ec4899;
            --tertiary: #3b82f6;
            --glass: rgba(255, 255, 255, 0.03);
            --border: rgba(255, 255, 255, 0.08);
            --text-muted: #aaa;
            --text-dark: #444;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            font-family: 'Space Grotesk', sans-serif;
            background-color: var(--bg-color);
            color: #ffffff;
            overflow-x: hidden;
            line-height: 1.6;
        }

        /* --- Background e Animações --- */
        .bg-blobs { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
        .blob { position: absolute; width: 350px; height: 350px; border-radius: 50%; filter: blur(100px); opacity: 0.15; }
        .blob-1 { top: -10%; left: -10%; background: var(--primary); animation: blobMove 10s infinite alternate; }
        .blob-2 { bottom: -10%; right: -10%; background: var(--secondary); animation: blobMove 12s infinite alternate-reverse; }

        @keyframes blobMove {
            0% { transform: translate(0, 0) scale(1); }
            100% { transform: translate(50px, 100px) scale(1.2); }
        }

        @keyframes borderSpin { 100% { transform: rotate(360deg); } }

        /* --- Layout --- */
        .container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
        section { padding: 120px 0; position: relative; }
        
        .section-header { text-align: center; margin-bottom: 60px; }
        .section-header h2 { font-size: 3rem; font-weight: 700; margin-bottom: 10px; }
        .underline { width: 60px; height: 4px; background: linear-gradient(90deg, var(--primary), var(--secondary)); margin: 0 auto; border-radius: 2px; }

        /* --- Utilitários --- */
        .text-gradient {
            background: linear-gradient(to right, #60a5fa, #c084fc, #f472b6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .text-white { color: #ffffff; }

        /* --- Navegação --- */
        .glass-nav {
            position: fixed; width: 100%; top: 0; z-index: 1000;
            background: rgba(5, 5, 5, 0.8); backdrop-filter: blur(15px);
            border-bottom: 1px solid var(--border); height: 80px;
            display: flex; align-items: center;
        }
        .nav-content { display: flex; justify-content: space-between; align-items: center; width: 100%; }
        .nav-logo { text-decoration: none; color: white; font-size: 1.5rem; font-weight: 700; }
        .nav-logo img { max-height: 40px; }
        .nav-links { display: flex; gap: 2.5rem; }
        .nav-links a { 
            text-decoration: none; color: var(--text-muted); font-size: 1.1rem; font-weight: 500; 
            transition: 0.3s; 
        }
        .nav-links a:hover { color: var(--primary); }

        .menu-toggle { display: none; flex-direction: column; gap: 6px; cursor: pointer; z-index: 1100; }
        .menu-toggle span { display: block; width: 28px; height: 3px; background: white; border-radius: 2px; transition: 0.3s; }

        /* --- Hero Section --- */
        .hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: center; min-height: 85vh; padding-top: 100px; }
        .hero-text { text-align: left; }
        .hero-subtitle { color: var(--primary); letter-spacing: 2px; font-weight: 600; margin-bottom: 15px; text-transform: uppercase; font-size: 1.5rem; }
        
        .hero-text h1 { font-size: 4.5rem; line-height: 1.1; margin-bottom: 20px; font-weight: 800; font-family: "Inter"; }

        .hero-experience { display: flex; align-items: center; gap: 12px; margin-bottom: 15px;font-family: "Inter"; }
        .badge-years { 
            background: rgba(139, 92, 246, 0.2); color: var(--primary); border: 1px solid var(--primary); 
            padding: 4px 12px; border-radius: 6px; font-weight: 700; font-size: 1.3rem; white-space: nowrap;font-family: "Inter";
        }
        .hero-description-main { font-size: 1.2rem; font-weight: 500; color: #ffffff;font-family: "Inter"; }
        .hero-description-sub { color: var(--text-muted); font-size: 1.1rem; max-width: 500px; margin-bottom: 35px;font-family: "Inter"; }

        .btn-group { display: flex; gap: 15px; justify-content: flex-start; flex-wrap: wrap; align-items: center; }
        .btn { 
            display: inline-flex; align-items: center; justify-content: center;
            padding: 14px 36px; border-radius: 50px; 
            text-decoration: none; font-weight: 600; transition: 0.4s; 
            border: 1px solid var(--border); color: white;
            font-family: "Inter";
        }
        .btn-primary { background: var(--primary); border-color: var(--primary); box-shadow: 0 0 20px rgba(139, 92, 246, 0.3); }
        .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 0 30px rgba(139, 92, 246, 0.5); }
        .btn-outline { background: transparent; border: 1px solid var(--border); }
        .btn-outline:hover { background: var(--glass); border-color: white; transform: translateY(-3px); }
        
        .btn-social { padding: 14px 20px; font-size: 1.2rem;background-color: blue; }

        /* --- Profile Image Morph --- */
        .profile-container { position: relative; width: 100%; display: flex; justify-content: center; align-items: center; }
        .profile-wrapper {
            width: 380px; height: 380px; position: relative; border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
            overflow: hidden; animation: morph 8s ease-in-out infinite; display: flex; align-items: center; justify-content: center;
        }
        .profile-wrapper::before {
            content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
            background: conic-gradient(transparent, var(--primary), var(--secondary), transparent);
            animation: borderSpin 4s linear infinite; z-index: 1;
        }
        .profile-inner {
            position: relative; width: calc(100% - 12px); height: calc(100% - 12px);
            background: #050505; background-image: url("../images/photo_about.png");
            background-size: cover; background-position: center; border-radius: inherit; z-index: 2; overflow: hidden;
        }
        @keyframes morph {
            0%, 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
            50% { border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%; }
        }

        /* --- About & Stats --- */
        .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
        .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
        .stat-card { 
            background: var(--glass); padding: 20px; border-radius: 20px; 
            text-align: center; border: 1px solid var(--border);
            position: relative; overflow: hidden; transition: 0.4s ease;
            backdrop-filter: blur(10px);
        }
        .stat-card.align-left { text-align: left; }
        .stat-card p.description { color: var(--text-muted); margin-bottom: 20px; }
        .stat-card:hover { transform: translateY(-8px); border-color: var(--primary); box-shadow: 0 10px 30px rgba(139, 92, 246, 0.15); }
        .stat-card h4 { font-size: 2.0rem; color: var(--primary); margin-bottom: 5px; }

        /* --- Services --- */
        .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
        .service-card { background: var(--glass); border: 1px solid var(--border); border-radius: 24px; padding: 40px; transition: 0.4s; backdrop-filter: blur(10px);text-align: center; }
        .service-card:hover { border-color: var(--secondary); transform: translateY(-10px); }
        .service-icon { margin-bottom: 20px; display: block; }
        .icon_size{font-size: 60px;}

        /* --- Portfolio --- */
        .projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 40px; }
        .project-card { height: 400px; border-radius: 12px; overflow: hidden; position: relative; border: 1px solid var(--border); transition: 0.4s; background: #111; }
        .browser-mockup { border-top: 25px solid #2a2a2a; position: relative; height: 100%; display: flex; flex-direction: column; }
        .browser-mockup::before { content: ''; position: absolute; top: -17px; left: 12px; width: 8px; height: 8px; background-color: #ff5f56; border-radius: 50%; box-shadow: 15px 0 0 #ffbd2e, 30px 0 0 #27c93f; z-index: 10; }
        
        .project-image { width: 100%; 
            height: 100%; 
            background-image: var(--bg-image); 
            background-size: cover; 
            background-position: top center; 
            transition: 2s ease-in-out; }
        
        .project-card:hover .project-image { background-position: bottom center; }
        .project-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.9) 60%, rgba(0,0,0,0) 100%); padding: 30px; display: flex; flex-direction: column; justify-content: flex-end; opacity: 0; transform: translateY(10px); transition: 0.4s; pointer-events: none; }
        .project-overlay h3{ font-size: 18px; }
        .project-card:hover .project-overlay { opacity: 1; transform: translateY(0); pointer-events: auto; }
        .filter-container { display: flex; justify-content: center; gap: 15px; margin-bottom: 40px; }
        .filter-btn { background: transparent; border: 1px solid var(--border); color: #fff; padding: 10px 25px; border-radius: 50px; cursor: pointer; transition: 0.3s; font-weight: 500; }
        .filter-btn.active, .filter-btn:hover { background: var(--primary); border-color: var(--primary); color: #000; }
        .card-tag { font-size: 1.9rem; text-transform: uppercase; font-weight: 600; }
        .card-desc { font-size: 0.9rem; color: #ccc; margin: 10px 0; }
        .card-link { text-decoration: none; font-weight: 600; }

        /* --- Contact Form --- */
        .contact-container { max-width: 800px; }
        .contact-form { display: grid; gap: 20px; }
        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
        .form-input, .form-textarea { background: var(--glass); border: 1px solid var(--border); padding: 15px; color: white; border-radius: 12px; width: 100%; font-family: inherit; }
        .btn-submit { width: 100%; cursor: pointer; border: none; }

        /* --- Footer --- */
        .main-footer { padding: 40px; text-align: center; border-top: 1px solid var(--border); color: var(--text-dark); }

        /* --- Responsividade --- */
        @media (max-width: 992px) {
            .hero-grid, .about-grid { grid-template-columns: 1fr; text-align: center; }
            .hero-text h1 { text-align: center;font-size: 3rem; }
            .profile-wrapper { width: 300px; height: 300px; margin: 0 auto; }
            .hero-experience, .btn-group { justify-content: center; }
            .hero-description-sub { margin: 0 auto 35px auto; }
            .menu-toggle { display: flex; }
            .nav-links { position: fixed; top: 0; right: -100%; width: 70%; height: 100vh; background: rgba(10, 10, 10, 0.95); backdrop-filter: blur(20px); flex-direction: column; justify-content: center; align-items: center; transition: 0.4s; border-left: 1px solid var(--border); }
            .nav-links.active { right: 0; }
            .nav-links a { font-size: 1.5rem; }
            .menu-toggle.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
            .menu-toggle.active span:nth-child(2) { opacity: 0; }
            .menu-toggle.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
        }
        @media (max-width: 600px) { .stats-grid, .form-row { grid-template-columns: 1fr; } 
        .filter-container {
        display: flex;
        justify-content: center;
        flex-direction: column;
        margin-bottom: 40px;
        gap: 15px;
       }                        
        }