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

 body {
     font-family: "Poppins", sans-serif;
     background-color: #0d1117;
     color: #e6edf3;
     overflow-x: hidden;
     scroll-behavior: smooth;
     transition: background 0.5s, color 0.5s;
 }

 a {
     color: inherit;
     text-decoration: none;
 }

 h2 {
     font-weight: 600;
     margin-bottom: 20px;
     color: #58a6ff;
 }

 section {
     padding: 80px 20px;
     text-align: center;
     position: relative;
     z-index: 2;
 }

 /* ======== FUNDO ANIMADO ======== */
 #particles-js {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
     background: radial-gradient(circle at 20% 20%, #1a1f2c, #0d1117);
 }

 /* ======== HEADER ======== */
 header {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 10;
     background: rgba(13, 17, 23, 0.85);
     backdrop-filter: blur(8px);
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 15px 40px;
 }

 header h1 {
     font-size: 1.4rem;
     letter-spacing: 1px;
 }

 nav a {
     margin: 0 15px;
     font-weight: 500;
     transition: color 0.3s;
 }

 nav a:hover {
     color: #58a6ff;
 }

 .theme-toggle {
     background: none;
     border: 1px solid #58a6ff;
     border-radius: 20px;
     color: #58a6ff;
     padding: 6px 15px;
     cursor: pointer;
     transition: 0.3s;
 }

 .theme-toggle:hover {
     background: #58a6ff;
     color: #0d1117;
 }

 /* ======== SEÇÃO SOBRE ======== */
 .sobre {
     display: flex;
     flex-direction: column;
     align-items: center;
     margin-top: 120px;
 }

 .foto-perfil {
     width: 150px;
     height: 150px;
     border-radius: 50%;
     border: 3px solid #58a6ff;
     object-fit: cover;
     margin-bottom: 20px;
     box-shadow: 0 0 20px #58a6ff50;
 }

 .sobre p {
     max-width: 600px;
     font-size: 1.1rem;
     line-height: 1.6;
     color: #c9d1d9;
 }

 /* ======== HABILIDADES ======== */
 .skills-list {
     display: flex;
     flex-wrap: wrap;
     gap: 14px;
     margin-top: 12px;
     justify-content: center;
 }

 .skill {
     display: flex;
     align-items: center;
     gap: 8px;
     background: rgba(255, 255, 255, 0.05);
     padding: 8px 12px;
     border-radius: 8px;
     font-weight: 600;
     color: var(--text);
     transition: background 0.3s ease, transform 0.2s ease;
 }

 .skill:hover {
     background: rgba(255, 255, 255, 0.1);
     transform: translateY(-2px);
 }

 .skill i {
     font-size: 1.2rem;
     color: var(--primary);
 }


 /* ======== CERTIFICAÇÕES ======== */
 .cert-list {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 20px;
     max-width: 900px;
     margin: 0 auto;
 }

 .cert-card {
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid #30363d;
     border-radius: 12px;
     padding: 20px;
     transition: transform 0.3s, background 0.3s;
 }

 .cert-card:hover {
     transform: translateY(-5px);
     background: rgba(255, 255, 255, 0.1);
 }

 .cert-card h3 {
     color: #58a6ff;
     margin-bottom: 8px;
 }

 /* ======== REPOSITÓRIOS ======== */
 .repos-container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 20px;
     margin-top: 20px;
     padding: 10px;
 }

 .repo-card {
     border: 1px solid #333;
     border-radius: 12px;
     padding: 20px;
     text-align: left;
     color: #fff;
     transition: transform 0.2s, box-shadow 0.2s;
 }

 .repo-card:hover {
     transform: translateY(-5px);
     background: rgba(255, 255, 255, 0.1);
 }

 .repo-card h3 {
     color: #58a6ff;
     margin-bottom: 10px;
 }

 .repo-card p {
     color: #c9d1d9;
     font-size: 0.95rem;
     min-height: 40px;
 }

 .repo-card a {
     display: inline-block;
     margin-top: 10px;
     color: #58a6ff;
     border: 1px solid #58a6ff;
     border-radius: 8px;
     padding: 6px 12px;
     transition: 0.3s;
 }

 .repo-card a:hover {
     background: #58a6ff;
     color: #0d1117;
 }

 /* ======== LIGHT MODE ======== */
 body.light-mode {
     background: #f5f5f5;
     color: #111;
 }

 body.light-mode header {
     background: rgba(255, 255, 255, 0.8);
 }

 body.light-mode .theme-toggle {
     border-color: #111;
     color: #111;
 }

 body.light-mode .skill,
 body.light-mode .cert-card,
 body.light-mode .repo-card,
 #contato .contact-card,
 footer {
     background: #fff;
     border: 1px solid #ccc;
     color: #111;
 }

 #contato {
     text-align: center;
     padding: 60px 20px;
 }

 #contato h2 {
     margin-bottom: 16px;
     color: var(--primary);
 }

 #contato .muted {
     color: var(--muted);
     margin-bottom: 24px;
 }

 .contact-list {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 18px;
 }

 .contact-card {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 14px 20px;
     border-radius: 12px;
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
     color: var(--text);
     font-weight: 600;
     text-decoration: none;
     transition: all 0.25s ease;
 }

 .contact-card i {
     font-size: 1.3rem;
     color: var(--accent);
 }

 .contact-card:hover {
     transform: translateY(-4px);
     background: rgba(255, 255, 255, 0.1);
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
 }

 @media(max-width:520px) {
     .contact-card {
         width: 100%;
         justify-content: center;
     }
 }

 /* ===== Footer ===== */
 footer {
     background: rgba(255, 255, 255, 0.05);
     backdrop-filter: blur(10px);
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     text-align: center;
     padding: 25px 10px;
     color: #ddd;
     font-size: 0.95rem;
     letter-spacing: 0.5px;
     position: relative;
     z-index: 10;
     margin-top: 60px;
     transition: background 0.3s ease;
 }

 footer:hover {
     background: rgba(255, 255, 255, 0.08);
 }

 footer p {
     margin: 0;
     line-height: 1.6;
 }

 footer a {
     color: #58a6ff;
     text-decoration: none;
     font-weight: 600;
     margin: 0 8px;
     transition: color 0.3s ease, text-shadow 0.3s ease;
 }

 footer a:hover {
     color: #4199ff;
     text-shadow: 0 0 8px #4199ff;
 }

 @media (max-width: 768px) {
     footer {
         font-size: 0.85rem;
         padding: 20px 8px;
     }
 }


 @media (max-width: 768px) {
     nav {
         display: none;
     }
 }