/* ========== Variáveis ========== */
:root{
  --bg: #0f172a;          /* fundo escuro */
  --card: #0b1220;
  --muted: #94a3b8;
  --accent: #5eead4;      /* acento principal */
  --accent-2: #60a5fa;
  --glass: rgba(255,255,255,0.04);
  --text: #e6eef8;
  --radius: 12px;
  --container: 1100px;
  --gap: 1.25rem;
  --transition: 300ms cubic-bezier(.2,.9,.3,1);
  font-size: 16px;
}

/* ========== Reset & Base ========== */
* { box-sizing: border-box; }
html,body { height:100%; }
body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg, var(--bg) 0%, #071129 100%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

/* Container padrão */
.container{
  max-width:var(--container);
  margin:0 auto;
  padding: 2rem;
}

/* ========== Header ========== */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(7,9,21,0.6), rgba(7,9,21,0.25));
  border-bottom: 1px solid rgba(255,255,255,0.03);
  box-shadow: 0 6px 18px rgba(2,6,23,0.5);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.brand{
  color:var(--accent);
  font-weight:700;
  letter-spacing:0.4px;
  text-decoration:none;
  font-size:1.1rem;
}
.nav{
  display:flex;
  align-items:center;
  gap:1rem;
  position:relative;
}
.nav-link{
  color:var(--muted);
  text-decoration:none;
  padding:0.6rem 0.8rem;
  border-radius:10px;
  transition:color var(--transition), background var(--transition);
}
.nav-link:hover{ color:var(--text); background:var(--glass); }
.cta{ background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#022; padding:0.45rem 0.9rem; border-radius:10px; font-weight:600; }

/* nav mobile toggle */
.nav-toggle{ display:none; background:none; border:0; padding:6px; margin-left:8px; cursor:pointer; }
.nav-toggle span{ display:block; width:22px; height:2px; background:var(--text); margin:4px 0; border-radius:4px; transition:all 200ms; }

/* ========== HERO ========== */
.hero{ padding:4.5rem 0; min-height:calc(100vh - 70px); display:flex; align-items:center; }
.hero-grid{
  display:grid;
  grid-template-columns: 1fr 420px;
  gap:2.5rem;
  align-items:center;
}
.hero-content h1{ font-size:2.1rem; margin:0 0 0.5rem; font-weight:800; }
.lead{ color:var(--muted); font-size:1rem; margin-bottom:1rem; }
.accent{ color:var(--accent); }

/* Hero photo */
.hero-photo{ position:relative; display:flex; align-items:center; justify-content:center; }
.hero-photo img{
  width:320px; height:320px; object-fit:cover; border-radius:16px;
  box-shadow: 0 20px 40px rgba(2,6,23,0.6);
  border: 1px solid rgba(255,255,255,0.04);
}
.photo-deco{
  position:absolute; right:-20px; bottom:-20px; width:120px; height:120px;
  background:linear-gradient(45deg,var(--accent),var(--accent-2)); filter:blur(28px); opacity:0.18; border-radius:18px;
}

/* hero highlights */
.hero-highlights{ list-style:none; padding:0; margin-top:1.2rem; display:flex; gap:0.6rem; flex-wrap:wrap; color:var(--muted); font-weight:500; }
.btn{ display:inline-block; background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#022; padding:0.7rem 1rem; border-radius:10px; text-decoration:none; font-weight:700; transition:transform var(--transition); }
.btn:hover{ transform:translateY(-3px); }
.btn-outline{ background:transparent; border:1px solid rgba(255,255,255,0.06); color:var(--text); padding:0.6rem 0.9rem; }

/* ========== Sections ========== */
.section{ padding:3.5rem 0; }
.section-title{ font-size:1.25rem; margin-bottom:1.25rem; color:var(--text); }

/* ABOUT */
.about-grid{ display:grid; grid-template-columns: 1fr 360px; gap:1.5rem; align-items:start; }
.about-text p{ color:var(--muted); margin:0 0 1rem; }
.about-cards{ display:grid; gap:0.9rem; }
.card{ background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:1rem; border-radius:12px; border:1px solid rgba(255,255,255,0.02); }
.skill-card h3{ margin:0 0 0.5rem; }

/* SKILLS */
.skills-grid{ display:grid; gap:1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.skill{ background:var(--card); padding:0.9rem; border-radius:10px; border:1px solid rgba(255,255,255,0.03); }
.skill-head{ display:flex; justify-content:space-between; margin-bottom:0.6rem; color:var(--muted); font-weight:600; }
.skill-bar{ background:rgba(255,255,255,0.03); height:10px; border-radius:6px; overflow:hidden; }
.skill-bar-fill{ width:0%; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition: width 900ms cubic-bezier(.2,.9,.3,1); }

/* PROJECTS */
.projects-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:1rem; }
.project-card{ background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,0.03); display:flex; flex-direction:column; }
.project-card img{ width:100%; height:160px; object-fit:cover; display:block; }
.project-content{ padding:1rem; display:flex; flex-direction:column; gap:0.6rem; flex:1; }
.project-actions{ margin-top:auto; display:flex; gap:0.6rem; }

/* TIMELINE */
.timeline{ display:flex; flex-direction:column; gap:1rem; }
.timeline-item{ display:flex; gap:1rem; align-items:flex-start; }
.timeline-date{ min-width:110px; color:var(--muted); font-weight:700; }
.timeline-body{ background:var(--card); padding:1rem; border-radius:10px; border:1px solid rgba(255,255,255,0.02); }


/* CONTACT */
.contact-grid{ display:grid; grid-template-columns: 1fr 420px; gap:1.25rem; align-items:start; }
.contact-card{ background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:1.25rem; border-radius:12px; }
.contact-form{ background:var(--card); padding:1.25rem; border-radius:12px; border:1px solid rgba(255,255,255,0.02); }
.contact-form label{ display:block; margin-bottom:0.8rem; color:var(--muted); font-weight:600; }
.contact-form input, .contact-form textarea{
  width:100%; padding:0.8rem; border-radius:8px; border:1px solid rgba(255,255,255,0.04); background:transparent; color:var(--text);
  font-size:0.95rem;
}
.form-actions{ display:flex; gap:0.6rem; margin-top:0.6rem; }

/* Form message */
.form-msg{ margin-top:0.6rem; color:var(--accent); }

/* FOOTER */
.site-footer{ border-top:1px solid rgba(255,255,255,0.03); padding:1.2rem 0; color:var(--muted); }
.footer-inner{ display:flex; justify-content:space-between; gap:1rem; align-items:center; }

/* ========== Responsive ========== */
@media (max-width: 1024px){
  .hero-grid{ grid-template-columns: 1fr 360px; }
  .about-grid{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 780px){
  .hero-grid{ grid-template-columns: 1fr; text-align:center; }
  .hero-photo img{ width:260px; height:260px; margin:0 auto; }
  .nav-toggle{ display:inline-flex; }
  .nav{ gap:0.5rem; }
  .nav-links-collapsed{ display:none; }
  .site-header{ padding:0 0; }
  .header-inner{ padding:0 1rem; }
  .container{ padding:1rem; }
}

/* small screens: stack nav vertically when active (logic via JS) */
.nav-mobile{ position:absolute; right:1rem; top:64px; display:flex; flex-direction:column; gap:0.4rem; background:rgba(2,6,23,0.9); padding:0.6rem; border-radius:12px; box-shadow:0 10px 30px rgba(2,6,23,0.6); }

/* Accessibility focus */
a:focus, button:focus, input:focus, textarea:focus { outline:3px solid rgba(94,234,212,0.14); outline-offset:3px; }

/* Small polish */
.btn-sm{ display:inline-block; padding:0.4rem 0.6rem; border-radius:8px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#022; font-weight:700; text-decoration:none; }
.btn-sm.btn-outline{ background:transparent; border:1px solid rgba(255,255,255,0.04); color:var(--text); }