:root{
  --bg: #222222;
  --green: #00ff7f;
  --green-dark: #0bb07a;
  --glass: rgba(255,255,255,0.03);
}

/* Reset / global */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
  background:var(--bg);
  color:#ddd;
  -webkit-font-smoothing:antialiased;
}
.container{width:min(1100px,94%);margin:0 auto}

/* HEADER */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:999;
  background:linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.25));
  backdrop-filter: blur(6px);
  transform: translateY(0);
  transition: transform .28s cubic-bezier(.2,.9,.2,1), opacity .22s ease;
}
.header-inner{display:flex;align-items:center;gap:12px;padding:10px 0}
.brand{color:var(--green);text-decoration:none;font-weight:700}

/* Language buttons */
.lang-wrap{margin-left:8px;display:flex;gap:6px}
.lang-btn{
  background:transparent;border:1px solid rgba(255,255,255,0.06);
  color:#bbb;padding:6px 10px;border-radius:6px;cursor:pointer;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),color .18s, border-color .18s;
}
.lang-btn.active{color:var(--green);border-color:var(--green)}
.lang-btn:hover{transform:scale(1.06)}

/* NAV */
.nav{margin-left:auto}
.nav ul{list-style:none;display:flex;gap:6px;margin:0;padding:0}
.nav a{
  display:inline-block;padding:10px 14px;color:var(--green);
  text-decoration:none;border-radius:8px;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), background .18s;
  transform-origin:center;
}
.nav a:hover{transform:scale(1.08);background:rgba(0,255,127,0.03)}

/* HAMBURGER - mobile */
.hamburger{display:none;margin-left:10px;background:transparent;border:0;cursor:pointer;padding:8px;align-items:center;justify-content:center;flex-direction:column;gap:4px;z-index:1000}
.hamburger span{display:block;width:22px;height:2px;background:var(--green);margin:3px 0;border-radius:2px;transition:all .25s;transform-origin:center}
.hamburger.is-active span:nth-child(1){transform: translateY(6px) rotate(45deg)}
.hamburger.is-active span:nth-child(2){opacity:0}
.hamburger.is-active span:nth-child(3){transform: translateY(-6px) rotate(-45deg)}

/* MAIN e SEÇÕES */
main{
  position:relative;
  z-index:auto; /* permite hero ficar atrás das waves */
  padding-bottom:6vh;
}
.section{padding:110px 0;min-height:60vh}
.intro{display:flex;align-items:center;justify-content:center;text-align:center;padding-top:80px}

.hero{
  position:relative;
  z-index:50; /* hero atrás das waves */
}
.hero-title{font-size:clamp(2rem,4.5vw,3.2rem);line-height:1.05;margin-bottom:0.6rem}
.lead{color:#cfeee0;max-width:66ch;margin:0 auto 1rem auto;text-align:center}
.btn{display:inline-block;margin-top:14px;padding:10px 16px;border-radius:8px;background:transparent;border:1px solid var(--green);color:var(--green);text-decoration:none;transition:transform .2s ease,box-shadow .2s}
.btn:hover{transform:scale(1.06);box-shadow:0 6px 18px rgba(0,255,127,0.06)}

/* GRIDs */
.grid{display:grid;gap:18px}
.grid-cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid-projects{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

/* Cards e conteúdo acima das waves */
.card, .project-card, .project-body, .project-thumb, .icon-list li a, .site-footer{
  position:relative;
  z-index:210;
}

.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:18px;border-radius:12px;border:1px solid rgba(0,0,0,0.4)}
.card img{width:48px;height:48px;object-fit:contain;margin-bottom:10px}
.icon-list{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.icon-list li a{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,0.02);text-decoration:none;color:#ddd;transition:transform .18s}
.icon-list li a:hover{transform:scale(1.06)}
.icon-list img{width:28px;height:28px}

/* Project cards */
.project-card{overflow:visible;border-radius:12px}
.project-thumb img{width:100%;height:180px;object-fit:cover;display:block;border-bottom-left-radius:0;border-bottom-right-radius:0}
.project-body{padding:12px}
.project-body .link{color:var(--green);text-decoration:none}

/* FOOTER */
.site-footer{
  position:relative;
  padding:24px 0;
  text-align:center;
  color:rgba(200,200,200,0.6);
  z-index:210;
  margin-top:6px;
}
.watermark{color:var(--green);opacity:0.24;font-weight:600}

/* WAVES */
.waves{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:18vh;
  min-height:80px;
  max-height:180px;
  pointer-events:none;
  overflow:hidden;
  z-index:100;
}
.waves svg{
  position:absolute;
  left:50%;
  top:0;
  width:150%;
  height:100%;
  transform:translateX(-50%);
  transition: transform 1s linear;
}

/* wave1 - atrás do hero */
.wave1{
  z-index:90;
  opacity:0.25;
  filter: blur(2.5px);
  animation:moveX 20s linear infinite reverse;
}
.wave1 path{fill:var(--green-dark);}

/* wave2 - na frente do hero */
.wave2{
  z-index:120;
  opacity:0.35;
  animation:moveX 14s linear infinite reverse;
}
.wave2 path{fill:var(--green);}

/* wave3 - mais visível */
.wave3{
  z-index:125;
  opacity:0.45;
  animation:moveX 10s linear infinite;
}
.wave3 path{fill:var(--green);}

/* animação horizontal */
@keyframes moveX{
  0%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-55%) translateY(0)}
  100%{transform:translateX(-50%) translateY(0)}
}

/* Header hide/show */
.site-header.hide{transform: translateY(-110%); opacity:0}

/* NAV mobile aberto */
.nav.open{display:block;position:absolute;top:64px;right:16px;background:rgba(0,0,0,0.95);padding:12px;border-radius:10px;z-index:1000}
.nav.open ul{display:flex;flex-direction:column;gap:8px}
.nav.open a{display:block}

/* RESPONSIVO */
@media (max-width:900px){
  .nav{display:none}
  .hamburger{display:flex}
  .header-inner{gap:8px}
  .waves{height:26vh; min-height:120px}
  .waves svg{width:150%}
  .project-thumb img{height:160px}
}
@media (max-width:600px){
  .section{padding:90px 0}
  .project-thumb img{height:140px}
  .container{width:94%}
}