*{margin:0;padding:0;box-sizing:border-box;font-family:'Jura',sans-serif}

/* Base */
body{background:#000;color:#fff;line-height:1.6;overflow-x:hidden;position:relative}

/* Scrollbar */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#333}
::-webkit-scrollbar-thumb{background:#fff;border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:#ddd}
html{scrollbar-width:thin;scrollbar-color:#fff #333}

/* Header fixo */
header{position:fixed;top:0;width:100%;transition:transform .3s ease;background:#000;z-index:1000}
header.hidden{transform:translateY(-100%)}

/* Nav */
nav{display:flex;justify-content:space-between;align-items:center;padding:20px 5%;max-width:1000px;margin:0 auto}
.menu-toggle{display:none;background:none;border:0}
.logo{display:flex;align-items:center}
.logo-img{height:60px;width:auto}
nav ul{display:flex;list-style:none}
nav ul li{margin-left:35px}
nav ul li a{color:#fff;text-decoration:none;font-weight:500;transition:color .3s}
nav ul li a:hover{color:#ddd}

/* Compensa o header em âncoras */
section{scroll-margin-top:100px}

/* Hero */
#home{
  height:100vh;position:relative;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 5%;
  background-image:url('img/background-gms.png');background-size:60% auto;background-position:center 150%;
  background-repeat:no-repeat;z-index:0;opacity:0;animation:moonRise 2s ease-out forwards
}
@keyframes moonRise{
  0%{background-position:center 150%;opacity:0}
  100%{background-position:center bottom;opacity:1}
}
#background-canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}
.hero{position:relative;z-index:2;margin-top:-50px}
.hero h1{font-size:4.5rem;font-weight:700;margin-bottom:15px;opacity:0;animation:fadeIn 1s ease-out .5s forwards}
.hero p{font-size:1.6rem;font-weight:300;margin-bottom:35px;opacity:0;animation:fadeIn 1s ease-out .7s forwards}
.mobile-break{display:none}
.cta{
  padding:14px 35px;background:#fff;color:#000;border:2px solid #fff;border-radius:0;
  font-size:1.2rem;cursor:pointer;transition:transform .3s;font-weight:500;opacity:0;animation:fadeIn 1s ease-out .9s forwards
}
.cta:hover{transform:scale(1.05)}
@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}

/* Containers de seção */
#servicos,#sobre,#contato{padding:100px 5%;max-width:1200px;margin:0 auto}
#servicos h2,#sobre h2,#contato h2{text-align:center;font-size:2.8rem;font-weight:700;margin-bottom:60px}

/* Sobre alinhado */
#sobre p{max-width:800px;margin:0 auto;text-align:center;font-weight:300}

/* Cards de serviços */
.servicos-container{display:flex;flex-direction:column;gap:40px}
.servicos-row{display:flex;justify-content:space-between;gap:20px}
.servico-card{
  background:#111;padding:35px;border:2px solid #222;border-radius:0;text-align:center;flex:1;
  transition:transform .3s,opacity .6s ease,transform .6s ease;position:relative;overflow:hidden;
  box-shadow:0 4px 10px rgba(0,0,0,.3);opacity:0;transform:translateY(20px)
}
.servico-card.visible{opacity:1;transform:translateY(0)}
.servico-card .icon{width:40px;height:40px;color:#fff;margin-bottom:20px}
.servico-card h3{font-weight:500;margin-bottom:15px}
.servico-card .description{font-weight:300;font-size:.95rem}

/* Stats + Carrossel */
.stats{text-align:center;margin-top:60px;font-size:1.4rem;font-weight:300}
.stats span{font-weight:700;color:#ddd}
.carousel{margin-top:40px;overflow:hidden;max-width:1200px;margin-left:auto;margin-right:auto}
.carousel-track{display:flex;animation:infiniteScroll 15s linear infinite}
.carousel-track img{width:150px;height:60px;margin:0 10px;border-radius:0;flex:0 0 auto}
@keyframes infiniteScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Contato */
#contato p{text-align:center}

/* Footer */
footer{text-align:center;padding:25px;background:#111}

/* Responsivo */
@media (max-width:768px){
  nav{padding:15px 5%;position:relative;justify-content:center;align-items:center}

  /* BOTÃO à DIREITA */
  .menu-toggle{
    display:block;cursor:pointer;position:absolute;right:5%;top:50%;
    transform:translateY(-50%);left:auto;
  }
  .menu-icon{width:30px;height:30px;color:#fff}

  .logo{justify-content:center}
  .logo-img{height:40px}

  /* SIDEBAR MOBILE vindo da DIREITA */
  nav ul.nav-links{
    position:fixed;top:0;right:-250px;left:auto;
    width:250px;height:100%;background:#111;flex-direction:column;align-items:center;
    gap:20px;padding-top:80px;transition:right .3s ease;z-index:1000
  }
  nav ul.nav-links.active{right:0}

  nav ul li{margin:0}
  nav ul li a{font-size:1.2rem;padding:10px;transition:color .3s,transform .3s}
  nav ul li a:hover{transform:scale(1.1)}

  .hero h1{font-size:2.5rem}
  .hero p{font-size:1.2rem}
  .cta{padding:12px 30px;font-size:1rem}
  .mobile-break{display:inline}

  #home{background-size:60% auto;background-position:center 150%;animation:moonRise 2s ease-out forwards}
  @keyframes moonRise{
    0%{background-position:center 150%;opacity:0}
    100%{background-position:center 85%;opacity:1}
  }

  #servicos,#sobre,#contato{padding:60px 10%;max-width:90%}
  #servicos h2,#sobre h2,#contato h2{font-size:2rem;margin-bottom:40px}

  .servicos-container{gap:30px;max-width:100%}
  .servicos-row{flex-direction:column;gap:30px}
  .servico-card{
    padding:25px;box-shadow:0 4px 15px rgba(0,0,0,.4);
    transition:transform .3s,box-shadow .3s,opacity .6s ease,transform .6s ease
  }
  .servico-card:hover{transform:scale(1.02);box-shadow:0 6px 20px rgba(0,0,0,.5)}
  .servico-card .icon{width:35px;height:35px;margin-bottom:15px}
  .servico-card h3{font-size:1.2rem}
  .servico-card .description{font-size:.9rem}

  .stats{margin-top:40px;font-size:1.2rem}
  .carousel{margin-top:30px;max-width:90%}
  .carousel-track{animation:infiniteScroll 10s linear infinite}
  .carousel-track img{width:100px;height:40px;margin:0 10px}
}

/* Área para ajustes desktop futuros */
@media (min-width:769px){
  /* vazio intencionalmente */
}