/* =========================================================
   01 — VARIÁVEIS GERAIS
========================================================= */

:root{

  --bg:#090713;

  --bg-soft:#0d091b;

  --panel:#120d25;

  --line:#272044;

  --line-bright:#4b397b;

  --text:#eeeaff;

  --muted:#8979bb;

  --purple:#9b76ed;

  --purple-light:#b69aff;

  --max:1320px;


  /* FONTES */

  --serif:"Bodoni Moda", Georgia, serif;

  --sans:"DM Sans", Arial, sans-serif;

  --mono:"Space Mono", monospace;

}



/* =========================================================
   02 — RESET / CONFIGURAÇÕES GERAIS
========================================================= */

*{
  box-sizing:border-box;
}


html{
  scroll-behavior:smooth;
}


body{

  margin:0;

  background:var(--bg);

  color:var(--text);

  font-family:var(--sans);

  overflow-x:hidden;

}


body::selection{

  background:var(--purple);

  color:#fff;

}


a{

  color:inherit;

  text-decoration:none;

}


button,
input,
textarea{

  font:inherit;

}


img{

  display:block;

  max-width:100%;

}



/* =========================================================
   03 — NAVBAR
========================================================= */

.site-header{

  height:98px;

  position:sticky;

  top:0;

  z-index:1000;

  display:flex;

  align-items:center;

  padding:0 4.2vw;

  background:rgba(9,7,19,.96);

  border-bottom:1px solid #1b1730;

  backdrop-filter:blur(14px);

}


/* LOGO */

.brand{

  width:65px;

  display:flex;

  align-items:center;

}


.brand img{

  width:70px;

  height:auto;

  object-fit:contain;

}


/* MENU */

.main-nav{

  display:flex;

  align-items:center;

  gap:48px;

  margin:auto;

}


/* TEXTOS DA NAVBAR */

.main-nav a,
.header-cta,
.eyebrow,
.section-link,
.stat small,
.member p,
.contact-details small{

  font-family:var(--mono);

  letter-spacing:.14em;

  font-size:12px;

}


/* LINKS */

.main-nav a{

  color:var(--muted);

  transition:.25s;

}


.main-nav a:hover,
.main-nav a.active{

  color:var(--purple-light);

}


/* BOTÃO */

.header-cta{

  border:1px solid var(--purple);

  color:var(--purple-light);

  padding:12px 28px;

  transition:.25s;

}


.header-cta:hover{

  background:var(--purple);

  color:#fff;

}


/* MENU MOBILE */

.menu-toggle{

  display:none;

  background:none;

  border:0;

  color:var(--text);

  font-size:25px;

}



/* =========================================================
   04 — CONFIGURAÇÃO GERAL DAS SEÇÕES
========================================================= */

.section{

  padding-left:4.45vw;

  padding-right:4.45vw;

}



/* =========================================================
   05 — HERO / HOME
========================================================= */

.hero{

  min-height:645px;

  display:grid;

  grid-template-columns:1fr 1fr;

  position:relative;

  border-bottom:1px solid var(--line);

}


/* TEXTO */

.hero-copy{

  padding-top:83px;

  position:relative;

  z-index:2;

}


/* PEQUENO TÍTULO */

.eyebrow{

  color:#9b78ff;

  margin:0 0 29px;

}


/* RESET DOS TÍTULOS */

.hero h1,
h2,
h3,
p{

  margin-top:0;

}


/* TÍTULO PRINCIPAL */

.hero h1{

  font-family:var(--serif);

  font-size:clamp(65px,6.5vw,104px);

  line-height:.86;

  letter-spacing:-.055em;

  margin:0 0 40px;

  font-weight:600;

}


.hero h1 span,
h2 span,
.contact h2 span{

  color:var(--purple);

}


/* DESCRIÇÃO */

.hero-description{

  max-width:510px;

  color:#8d7db8;

  font-size:19px;

  line-height:1.85;

  margin-bottom:54px;

}


/* BOTÕES */

.hero-actions{

  display:flex;

  gap:20px;

}


.button{

  display:inline-flex;

  justify-content:center;

  align-items:center;

  min-height:62px;

  padding:0 38px;

  border:1px solid transparent;

  font-family:var(--mono);

  letter-spacing:.14em;

  font-size:12px;

  cursor:pointer;

  transition:.25s;

}


/* BOTÃO PRINCIPAL */

.button-primary{

  background:var(--purple);

  color:#100b1e;

}


.button-primary:hover{

  background:#b093ff;

  transform:translateY(-2px);

}


/* BOTÃO OUTLINE */

.button-outline{

  border-color:#36275e;

  color:#9277d3;

}


.button-outline:hover{

  border-color:var(--purple);

  color:#fff;

}



/* =========================================================
   06 — ARTE DO HERO
========================================================= */

.hero-art{

  position:relative;

  min-height:645px;

  display:flex;

  justify-content:center;

  align-items:center;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 55% 50%,
      #1a1232 0,
      #0d091a 54%,
      #0a0713 100%
    );

}


/* GRADE / TEXTURA */

.hero-art::after{

  content:"";

  position:absolute;

  inset:0;

  background-image:
    linear-gradient(
      rgba(255,255,255,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.025) 1px,
      transparent 1px
    );

  background-size:46px 46px;

  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      black 30%,
      transparent
    );

}


/* BRILHO */

.hero-glow{

  width:520px;

  height:320px;

  position:absolute;

  background:
    radial-gradient(
      ellipse,
      rgba(143,104,234,.28),
      transparent 65%
    );

  filter:blur(22px);

}


/* LOGO */

.hero-art img{

  width:min(84%,540px);

  position:relative;

  z-index:2;

  filter:
    drop-shadow(
      0 20px 30px
      rgba(115,76,210,.22)
    );

  animation:float 5s ease-in-out infinite;

}


/* ANIMAÇÃO */

@keyframes float{

  50%{

    transform:translateY(-9px);

  }

}



/* =========================================================
   07 — ESTATÍSTICAS
========================================================= */

.stats{

  min-height:200px;

  display:flex;

  align-items:center;

  gap:100px;

  border-bottom:1px solid var(--line);

}


.stat{

  min-width:82px;

}


.stat strong{

  display:block;

  font:
    600 40px/1
    var(--serif);

  color:var(--purple-light);

  margin-bottom:14px;

}


.stat strong span{

  font-size:28px;

}


.stat small{

  color:#7666a7;

}



/* =========================================================
   08 — CONFIGURAÇÃO DOS TÍTULOS DAS SEÇÕES
========================================================= */

.portfolio,
.services,
.team,
.partners,
.contact{

  padding-top:126px;

  padding-bottom:126px;

}


.section-heading{

  display:flex;

  justify-content:space-between;

  align-items:end;

  margin-bottom:57px;

}


.section-heading.single{

  justify-content:flex-start;

}


.section-heading h2,
.contact h2{

  font:
    600 clamp(46px,4.5vw,70px)/.98
    var(--serif);

  letter-spacing:-.05em;

  margin:0;

}


.section-link{

  color:#9877ef;

  margin-bottom:9px;

  transition:.25s;

}


.section-link:hover{

  color:#fff;

}



/* =========================================================
   09 — PORTFÓLIO / GALERIA
========================================================= */

/*
   AQUI ESTÁ A PRINCIPAL ALTERAÇÃO.

   Os jogos agora ficam:

   [ JOGO 01 ] [ JOGO 02 ] [ JOGO 03 ]

   em vez do formato anterior de
   uma imagem grande + uma pequena.
*/


.game-grid{

  display:grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:28px;

}


/* CARD */

.game-card{

  min-width:0;

  overflow:hidden;

  background:#100c1d;

  border:1px solid #282044;

  border-radius:18px;

  transition:
    transform .3s ease,
    border-color .3s ease;

}


.game-card:hover{

  transform:translateY(-5px);

  border-color:#4b397b;

}



/* =========================================================
   IMAGEM DO JOGO
========================================================= */

.game-image{

  height:255px;

  position:relative;

  overflow:hidden;

}


.game-image img{

  width:100%;

  height:100%;

  object-fit:cover;

  filter:
    brightness(.55)
    saturate(.7);

  transition:.6s;

}


.game-card:hover .game-image img{

  transform:scale(1.05);

  filter:
    brightness(.72)
    saturate(.9);

}



/* =========================================================
   TAG DO GÊNERO
========================================================= */

.game-tag{

  position:absolute;

  top:16px;

  right:16px;

  z-index:2;

  padding:8px 15px;

  border-radius:20px;

  background:
    rgba(91,67,140,.72);

  border:
    1px solid
    rgba(180,153,255,.38);

  color:#d0c2ff;

  font:
    600 12px
    var(--sans);

  backdrop-filter:blur(8px);

}



/* =========================================================
   INFORMAÇÕES DO JOGO
========================================================= */

.game-info{

  padding:
    27px
    25px
    29px;

}


.game-year{

  display:block;

  color:#a082e5;

  font-size:14px;

  margin-bottom:8px;

}


.game-info h3{

  margin:0;

  color:var(--text);

  font:
    600 27px
    var(--serif);

  letter-spacing:-.03em;

}




/* =========================================================
   10 — SERVIÇOS
========================================================= */

.services{

  background:#120c23;

}


.service-list{

  border-top:1px solid var(--line);

}


.service-row{

  display:grid;

  grid-template-columns:
    75px
    56px
    minmax(300px,1.1fr)
    minmax(330px,1fr)
    30px;

  align-items:center;

  gap:18px;

  min-height:129px;

  border-bottom:1px solid var(--line);

  transition:.25s;

}


.service-row:hover{

  padding-left:10px;

  background:
    rgba(155,118,237,.035);

}


.service-number{

  font:
    12px
    var(--mono);

  color:#7c6bad;

}


.service-icon{

  font-size:25px;

}


.service-row h3{

  font:
    600 30px
    var(--serif);

  margin:0;

}


.service-row p{

  font-size:17px;

  color:#8978b8;

  margin:0;

}


.arrow{

  font-size:28px;

  color:#9b76ed;

}



/* =========================================================
   11 — EQUIPE
========================================================= */

.team{

  padding-bottom:112px;

}


.team-grid{

  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:1px;

}


/* FOTO */

.member-image{

  height:315px;

  overflow:hidden;

  background:#141021;

}


.member-image img{

  width:100%;

  height:100%;

  object-fit:cover;

  filter:
    brightness(.55)
    saturate(.7);

  transition:.5s;

}


.member:hover img{

  transform:scale(1.03);

  filter:
    brightness(.72)
    saturate(.8);

}


.member{

  padding-bottom:8px;

}


.member p{

  color:#9d76ff;

  margin:42px 0 13px;

}


.member h3{

  font:
    600 27px
    var(--serif);

  margin:0;

}



/* =========================================================
   12 — PARCEIROS
========================================================= */

.partners{

  padding-bottom:0;

  border-top:1px solid var(--line);

}


.partner-marquee{

  margin:
    0
    -4.45vw;

  overflow:hidden;

  border-top:1px solid var(--line);

  border-bottom:1px solid var(--line);

}


.partner-track{

  width:max-content;

  display:flex;

  align-items:center;

  gap:40px;

  min-height:99px;

  animation:
    marquee
    24s
    linear
    infinite;

}


.partner-track span{

  font:
    600 30px
    var(--serif);

  color:#a07fe8;

  white-space:nowrap;

}


.partner-track span:nth-of-type(even){

  color:#eeeaff;

}


.partner-track i{

  font-style:normal;

  color:#a07fe8;

}


/* ANIMAÇÃO */

@keyframes marquee{

  to{

    transform:translateX(-50%);

  }

}



/* =========================================================
   13 — CONTATO
========================================================= */

.contact{

  display:grid;

  grid-template-columns:
    1.05fr
    1fr;

  gap:130px;

  border-top:1px solid var(--line);

}


.contact-copy h2{

  font-size:
    clamp(
      50px,
      5.2vw,
      76px
    );

  margin-bottom:32px;

}


.contact-copy > p:not(.eyebrow){

  color:#8979b7;

  font-size:18px;

  line-height:1.8;

  max-width:500px;

}


/* INFORMAÇÕES */

.contact-details{

  margin-top:65px;

  display:grid;

  gap:34px;

}


.contact-details small{

  display:block;

  color:#9d76ff;

  margin-bottom:12px;

}


.contact-details a,
.contact-details span{

  font-size:17px;

  color:#eeeaff;

}


.contact-details a:hover{

  color:var(--purple-light);

}



/* =========================================================
   14 — FORMULÁRIO
========================================================= */

.contact-form{

  padding-top:4px;

}


.contact-form label{

  display:block;

  border-bottom:1px solid var(--line);

  margin-bottom:10px;

}


.contact-form label span{

  display:block;

  color:#9d76ff;

  font:
    12px
    var(--mono);

  letter-spacing:.14em;

  margin-bottom:17px;

}


.contact-form input,
.contact-form textarea{

  width:100%;

  border:0;

  outline:0;

  background:transparent;

  color:#eeeaff;

  font-size:20px;

  padding:
    0
    0
    24px;

}


.contact-form input::placeholder,
.contact-form textarea::placeholder{

  color:#796b9c;

}


.contact-form textarea{

  height:175px;

  resize:vertical;

}


.contact-form .button{

  width:260px;

  margin-top:30px;

}


.form-status{

  font-size:14px;

  color:#9b76ed;

  margin-top:18px;

  min-height:20px;

}



/* =========================================================
   15 — FOOTER
========================================================= */

.footer{

  min-height:100px;

  padding:
    0
    4.45vw;

  display:flex;

  justify-content:space-between;

  align-items:center;

  border-top:1px solid var(--line);

}


.footer .brand{

  width:45px;

}


.footer .brand img{

  width:45px;

}


.footer p{

  font:
    11px
    var(--mono);

  letter-spacing:.13em;

  color:#7566a5;

  margin:0;

}



/* =========================================================
   16 — BOTÃO DE AJUDA
========================================================= */

.help-button{

  position:fixed;

  z-index:1100;

  right:12px;

  bottom:12px;

  width:40px;

  height:40px;

  border:0;

  border-radius:50%;

  background:#fff;

  color:#111;

  font:
    24px
    Georgia;

  cursor:pointer;

}


.help-card{

  position:fixed;

  z-index:1099;

  right:18px;

  bottom:65px;

  width:280px;

  padding:20px;

  border:1px solid var(--line-bright);

  background:#120d22;

  box-shadow:
    0
    15px
    45px
    rgba(0,0,0,.4);

}


.help-card strong{

  font-family:var(--serif);

  font-size:22px;

}


.help-card p{

  color:#8c7bb5;

  line-height:1.6;

  margin:9px 0 0;

  font-size:14px;

}



/* =========================================================
   17 — TABLET
========================================================= */

@media (max-width:1000px){

  .main-nav{

    gap:24px;

  }


  .service-row{

    grid-template-columns:
      45px
      45px
      1fr
      35px;

  }


  .service-row p{

    display:none;

  }


  .contact{

    gap:60px;

  }

}



/* =========================================================
   18 — CELULAR / MOBILE
========================================================= */

@media (max-width:760px){

  /* NAVBAR */

  .site-header{

    height:76px;

    padding:
      0
      20px;

  }


  .main-nav{

    display:none;

    position:absolute;

    top:76px;

    left:0;

    right:0;

    flex-direction:column;

    align-items:stretch;

    gap:0;

    padding:
      10px
      20px
      20px;

    background:#0b0815;

    border-bottom:1px solid var(--line);

  }


  .main-nav.open{

    display:flex;

  }


  .main-nav a{

    padding:17px 0;

    border-bottom:
      1px solid
      #1b1730;

  }


  .header-cta{

    display:none;

  }


  .menu-toggle{

    display:block;

    margin-left:auto;

  }



  /* HERO */

  .hero{

    grid-template-columns:1fr;

    min-height:auto;

  }


  .hero-copy{

    padding:
      65px
      0
      50px;

  }


  .hero h1{

    font-size:70px;

  }


  .hero-description{

    font-size:16px;

    line-height:1.7;

    margin-bottom:35px;

  }


  .hero-art{

    min-height:360px;

  }


  .hero-art img{

    width:82%;

  }



  /* ESTATÍSTICAS */

  .stats{

    min-height:150px;

    gap:35px;

    justify-content:space-between;

  }


  .stat strong{

    font-size:34px;

  }


  .stat small{

    font-size:9px;

    letter-spacing:.08em;

  }



  /* SEÇÕES */

  .portfolio,
  .services,
  .team,
  .partners,
  .contact{

    padding-top:80px;

    padding-bottom:80px;

  }


  .section-heading{

    align-items:start;

    gap:25px;

    flex-direction:column;

    margin-bottom:38px;

  }


  .section-heading h2{

    font-size:48px;

  }


  .section-link{

    margin:0;

  }



  /* PORTFÓLIO */

  .game-grid{

    grid-template-columns:1fr;

  }


  .game-card{

    min-height:300px;

  }



  /* SERVIÇOS */

  .service-row{

    grid-template-columns:
      35px
      35px
      1fr
      25px;

    min-height:110px;

    gap:8px;

  }


  .service-row h3{

    font-size:23px;

  }



  /* EQUIPE */

  .team-grid{

    grid-template-columns:
      1fr
      1fr;

    gap:
      30px
      2px;

  }


  .member-image{

    height:280px;

  }


  .member p{

    margin-top:25px;

    font-size:9px;

  }


  .member h3{

    font-size:23px;

  }



  /* CONTATO */

  .contact{

    grid-template-columns:1fr;

    gap:60px;

  }


  .contact-copy h2{

    font-size:50px;

  }



  /* FOOTER */

  .footer{

    padding:
      25px
      20px;

    gap:20px;

  }


  .footer p{

    font-size:8px;

    line-height:1.6;

    text-align:right;

  }

}



/* =========================================================
   19 — CELULAR PEQUENO
========================================================= */

@media (max-width:480px){

  .section{

    padding-left:20px;

    padding-right:20px;

  }


  .hero h1{

    font-size:58px;

  }


  .hero-actions{

    flex-direction:column;

  }


  .button{

    width:100%;

  }


  .stats{

    gap:15px;

  }


  .stat strong{

    font-size:29px;

  }


  .game-card{

    min-height:250px;

  }


  .service-icon{

    font-size:19px;

  }


  .service-row h3{

    font-size:19px;

  }


  .team-grid{

    grid-template-columns:1fr;

  }


  .member-image{

    height:320px;

  }


  .partner-marquee{

    margin-left:-20px;

    margin-right:-20px;

  }


  .contact-copy h2{

    font-size:45px;

  }

}