/* =========================================================
   HERO
========================================================= */

.hero{
  min-height:100vh;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:80px;

  padding:
    140px
    8%
    100px;

  position:relative;
  overflow:hidden;
}

/* BG GLOW */

.hero::before{

  content:"";

  position:absolute;

  width:700px;
  height:700px;

  background:
    radial-gradient(
      circle,
      rgba(124,58,237,0.25),
      transparent 70%
    );

  top:-200px;
  right:-200px;

  z-index:-1;
}

/* =========================================================
   LEFT
========================================================= */

.hero-left{
  flex:1;
  max-width:700px;
}

.hero-left h1{

  font-size:64px;
  line-height:1.05;

  font-weight:800;

  margin:
    24px
    0;

  letter-spacing:-2px;
}

.hero-description{

  font-size:20px;
  line-height:1.8;

  color:#bdb7d4;

  margin-bottom:40px;
}

/* =========================================================
   BUTTONS
========================================================= */

.hero-buttons{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}

.btn-primary{

  background:
    linear-gradient(
      135deg,
      #7c3aed,
      #5b21b6
    );

  color:white;

  padding:
    18px
    34px;

  border-radius:18px;

  font-weight:700;

  transition:0.3s;

  box-shadow:
    0 10px 35px
    rgba(124,58,237,0.4);
}

.btn-primary:hover{
  transform:translateY(-4px);
}

.btn-secondary{

  border:
    1px solid
    rgba(255,255,255,0.15);

  padding:
    18px
    34px;

  border-radius:18px;

  color:white;

  transition:0.3s;

  background:
    rgba(255,255,255,0.04);
}

.btn-secondary:hover{
  background:
    rgba(255,255,255,0.08);
}

/* =========================================================
   INFO CARDS
========================================================= */

.hero-info{

  margin-top:50px;

  display:grid;

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

  gap:18px;
}

.info-card{

  background:
    rgba(255,255,255,0.04);

  border:
    1px solid
    rgba(255,255,255,0.08);

  padding:22px;

  border-radius:22px;

  backdrop-filter:blur(10px);
}

.info-card strong{

  display:block;

  font-size:16px;

  margin-bottom:8px;
}

.info-card span{

  color:#a8a1c2;
  font-size:14px;
}

/* =========================================================
   RIGHT
========================================================= */

.hero-right{
  flex:1;

  display:flex;
  justify-content:center;
}

.device-card{

  position:relative;

  padding:22px;

  border-radius:40px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.08),
      rgba(255,255,255,0.02)
    );

  border:
    1px solid
    rgba(255,255,255,0.08);

  backdrop-filter:blur(16px);

  box-shadow:
    0 25px 80px
    rgba(0,0,0,0.45);

  animation:
    floating 6s ease-in-out infinite;
}

.mockup-image{

  width:340px;
  max-width:100%;

  border-radius:28px;
}

/* =========================================
   NAV RIGHT
========================================= */
/* =========================================================
   NAVBAR
========================================================= */

.navbar{

  position:fixed;

  top:0;
  left:0;

  width:100%;

  height:88px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:0 60px;

  background:
    rgba(8,8,12,0.78);

  backdrop-filter:blur(18px);

  border-bottom:
    1px solid rgba(255,255,255,0.05);

  z-index:999;
}

/* CONTAINER */

.navbar-container{

  width:100%;
  max-width:1400px;

  display:grid;

  grid-template-columns:
    260px
    1fr
    260px;

  align-items:center;
}

/* =========================================================
   LEFT
========================================================= */

.nav-left{

  display:flex;
  align-items:center;

  gap:14px;
}

.logo{

  width:54px;
  height:54px;

  border-radius:16px;

  object-fit:cover;

  box-shadow:
    0 8px 24px rgba(124,58,237,0.35);
}

.logo-text{

  font-size:40px;
  font-weight:800;

  color:white;

  letter-spacing:-1px;
}

/* =========================================================
   CENTER
========================================================= */

.nav-center{

  display:flex;

  align-items:center;
  justify-content:center;

  gap:42px;
}

.nav-center a{

  color:white;

  font-size:17px;
  font-weight:600;

  transition:0.3s;
}

.nav-center a:hover{

  color:#a855f7;
}

/* =========================================================
   RIGHT
========================================================= */

.nav-right{

  display:flex;

  align-items:center;
  justify-content:flex-end;

  gap:18px;
}

/* LOGIN */

.nav-login{

  color:white;

  font-weight:700;

  font-size:16px;

  transition:0.3s;
}

.nav-login:hover{

  color:#a855f7;
}

/* BUTTON */

.nav-download{

  height:50px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:0 26px;

  border-radius:16px;

  background:
    linear-gradient(
      135deg,
      #7c3aed,
      #5b21b6
    );

  color:white;

  font-weight:700;

  font-size:15px;

  box-shadow:
    0 12px 30px rgba(124,58,237,0.35);

  transition:0.3s;
}

.nav-download:hover{

  transform:translateY(-3px);

  box-shadow:
    0 20px 40px rgba(124,58,237,0.45);
}

/* =========================================================
   BENEFITS
========================================================= */

.section{
  padding:
    120px
    8%;
}

.section-title{
  text-align:center;
  margin-bottom:70px;
}

.section-title h2{

  font-size:48px;

  margin-top:20px;

  max-width:900px;

  margin-inline:auto;
}

.benefits-grid{

  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

  gap:28px;
}

.benefit-card{

  background:
    rgba(255,255,255,0.04);

  border:
    1px solid
    rgba(255,255,255,0.08);

  border-radius:30px;

  padding:36px;

  transition:0.4s;
}

.benefit-card:hover{

  transform:
    translateY(-8px);

  border-color:
    rgba(124,58,237,0.6);
}

.benefit-card h3{

  font-size:24px;

  margin-bottom:16px;
}

.benefit-card p{

  color:#b8b2cb;

  line-height:1.8;
}

/* =========================================================
   RDC
========================================================= */

.rdc-section{

  background:
    linear-gradient(
      180deg,
      rgba(124,58,237,0.08),
      transparent
    );
}

.rdc-content{

  max-width:900px;
  margin:auto;
  text-align:center;
}

.rdc-content h2{

  font-size:52px;
  margin:24px 0;
}

.rdc-content p{

  color:#b8b2cb;

  line-height:1.9;

  font-size:20px;
}

/* =========================================================
   CTA
========================================================= */

.cta{
  text-align:center;
}

.cta h2{

  font-size:56px;

  max-width:900px;

  margin:
    20px auto;
}

.cta p{

  color:#b8b2cb;

  margin-bottom:40px;

  font-size:20px;
}

/* =========================================================
   FOOTER
========================================================= */

footer{

  border-top:
    1px solid
    rgba(255,255,255,0.08);

  padding:60px 8%;

  text-align:center;
}

.footer-logo{

  font-size:28px;
  font-weight:800;

  margin-bottom:18px;
}

/* =========================================================
   ANIMATION
========================================================= */

@keyframes floating{

  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-12px);
  }

  100%{
    transform:translateY(0px);
  }
}

/* =========================================================
   RESPONSIVO
========================================================= */

@media(max-width:1100px){

  .hero{

    flex-direction:column;
    text-align:center;

    padding-top:120px;
  }

  .hero-left{
    max-width:100%;
  }

  .hero-buttons{
    justify-content:center;
  }

  .hero-info{

    grid-template-columns:1fr;
  }

  .hero-left h1{
    font-size:52px;
  }

  .section-title h2,
  .rdc-content h2,
  .cta h2{
    font-size:42px;
  }
}

@media(max-width:700px){

  .hero-left h1{
    font-size:42px;
  }

  .hero-description{
    font-size:18px;
  }

  .section-title h2,
  .rdc-content h2,
  .cta h2{
    font-size:34px;
  }

  .mockup-image{
    width:280px;
  }

 }

 @media(max-width:1100px){

  .navbar-container{

    grid-template-columns:1fr;
  }

  .nav-center{

    display:none;
  }

  .nav-right{

    display:none;
  }

  .logo-text{

    font-size:30px;
  }
}