*{
      margin:0;
      padding:0;
      box-sizing:border-box;
    }




    :root{
      --blue:#3a3ef7;
      --dark:#000000;
      --light:#e7e7e7;
      --border:#3a3ef7;
      --text:#000000;
    }




    body{
      font-family:'Inter',sans-serif;
      background:#e7e7e7;
      color:var(--text);
      overflow-x:hidden;
      
    }

h1,
h2{
  font-family:'Bricolage Grotesque', sans-serif;
}


    img{
      max-width:100%;
      display:block;
    }




    .container{
      width:90%;
      max-width:1200px;
      margin:auto;
    }




    section{
      position:relative;
    }

.scroll-top{
    position:fixed;
    bottom:15px;
    right:20px;
    width: 35px;
    height:35px;
    background:#bebebe;
    color:white;
    border:2px solid #504f4e;
    border-radius:25%;
    display:flex;
    justify-content:center;
    align-items:center;
    text-decoration:none;
    font-size:24px;
    font-weight:700;
    z-index:9999;
    transition:all 0.3s ease;
    box-shadow:0 5px 15px rgba(0,0,0,0.2);
    opacity: 0.2;
    rotate: -20deg;
}

.scroll-top:hover{
    transform:translateY(-4px);
    opacity: 1;
    rotate: 0deg;
}

.gora-icon{
      width:40px;
      height:40px;
      flex-shrink:0;
    }


    /* NAVBAR */


html{
    scroll-behavior:smooth;
}

    .navbar{
      background:var(--blue);
      padding:18px 0;
      position:sticky;
      top:0;
      z-index:1000;
    }




    .nav-content{
      display:flex;
      align-items:center;
      justify-content:space-between;
    }




    .logo{
      height: 40px;
    }




    .nav-links{
      display:flex;
      gap:40px;
      list-style:none;
    }




    .nav-links a{
      color:white;
      text-decoration:none;
      font-size:0.95rem;
      font-weight:500;
      transition:0.3s;
    }




    .nav-links a:hover{
      opacity:0.7;
    }




    .nav-btn{
      background:black;
      color:white;
      border:none;
      padding:12px 28px;
      border-radius:8px;
      font-weight:600;
      cursor:pointer;
    }




    /* DESKARGATU APLIKAZIOA */




    .hero{
      padding:80px 0 120px;
      background:#ededed;
    }




    .hero-box{
      border:2px solid var(--border);
      border-radius:10px;
      padding:120px 40px;
      text-align:center;
      background:rgba(255,255,255,0.3);
      position:relative;
      overflow:hidden;
    }




    .hero-box::before{
      content:"";
      position:absolute;
      inset:0;
      background:url('../img/222043012_6768d33b-e2a1-4100-b1a6-b3a74dcfc530.jpg')
      center/cover;
      opacity:0.08;
    }




    .hero-content{
      position:relative;
      z-index:2;
    }




    .hero-sub{
      font-size:0.8rem;
      text-transform:uppercase;
      letter-spacing:2px;
      margin-bottom:18px;
    }




    .hero h1{
      color:var(--blue);
      font-size:4rem;
      line-height:1.1;
      margin-bottom:25px;
      font-weight:800;
    }



    .hero p{
      max-width:650px;
      margin:auto;
      font-size:1rem;
      margin-bottom:35px;
    }




    .primary-btn{
    display:inline-block;
    text-decoration:none;
    background:var(--blue);
    color:white;
    border:2px solid var(--blue);
    padding:16px 36px;
    border-radius:10px;
    font-weight:700;
    cursor:pointer;
    transition:all 0.3s ease;
}

.primary-btn:hover{
    background:transparent;
    color:var(--blue);
    border:2px solid var(--blue);
    transform:translateY(-2px);
}




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




    /* BIDEOA */




    .video-section{
      background:var(--blue);
      padding:100px 0;
    }




    .video-box{
      height: auto;
      margin:auto;
      border-radius:12px;
      overflow:hidden;
      border:2px solid #8c8c8b;
      box-shadow:0 10px 40px rgba(0,0,0,0.2);
    }

.video-box video{
    width:100%;
    object-fit:cover;
    display:block;
}


    /* ZER DA ZIABOGA? */ 




    .testimonials{
      background:#efefef;
      padding:120px 0;
    }




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




    .section-title h2{
      color:var(--blue);
      font-size:3rem;
      margin-bottom:20px;
    }




    .section-title p{
      max-width:700px;
      margin:auto;
      line-height:1.7;
    }




    .testimonial-grid{
      display:grid;
      gap:30px;
    }




    .testimonial-card{
      background:white;
      border:2px solid var(--border);
      border-radius:12px;
      padding:35px;
    }




    .testimonial-card h3{
      margin-bottom:15px;
      color:var(--blue);
    }




    .testimonial-card p{
      line-height:1.8;
    }




    /* ZIABOGAREN OINARRIAK */




    .benefits{
      background:var(--blue);
      color:white;
      padding:120px 0;
    }




    .benefits-content{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:70px;
      align-items:flex-start;
    }




    .benefits-left h2{
      font-size:3rem;
      line-height:1.2;
    }




    .benefit-list{
      display:flex;
      flex-direction:column;
      gap:35px;
    }




    .benefit-item{
      display:flex;
      gap:20px;
    }




    .benefit-icon{
      width:40px;
      height:40px;
      border:1px solid white;
      border-radius:8px;
      flex-shrink:0;
    }




    .benefit-item h4{
      margin-bottom:10px;
      font-size:1.1rem;
    }




    .benefit-item p{
      opacity:0.9;
      line-height:1.7;
    }




    /* PRODUKTUAK */




    .apps{
      background:var(--blue);
      padding:140px 0;
      color:white;
    }




    .apps-title{
      text-align:center;
      margin-bottom:120px;
    }




    .apps-title h2{
      font-size:3rem;
    }




    .app-item{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:60px;
      align-items:center;
      margin-bottom:120px;
    }




    .app-item.reverse{
      direction:rtl;
    }




    .app-item.reverse .app-text{
      direction:ltr;
    }




    .app-image{
      border-radius:16px;
      overflow:hidden;
      border:2px solid #8c8c8b;
      box-shadow:0 10px 30px rgba(0,0,0,0);
    }




    .app-image img{
      width:100%;
      height:100%;
      object-fit:cover;
    }




    .app-text span{
      font-size:0.8rem;
      letter-spacing:2px;
      text-transform:uppercase;
      opacity:0.8;
    }




    .app-text h3{
      font-size:2.5rem;
      margin:18px 0;
    }




    .app-text p{
      line-height:1.8;
      opacity:0.9;
      max-width:500px;
    }

 /* NOLA JOLASTU? */

.how-play{
  padding:120px 0;
  background:#e7e7e7;
}

.steps-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
}

.step-card{
  background:white;
  border:2px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  transition:all 0.3s ease;
}

.step-card:hover{
  transform:translateY(-6px);
}

.step-image{
  padding:20px;
  background:#f4f4f4;
  display:flex;
  justify-content:center;
}

.step-image img{
  width:100%;
  max-width:220px;
  aspect-ratio:9/18;
  object-fit:cover;
  border-radius:16px;
  border:2px solid #d9d9d9;
}

.step-content{
  padding:25px;
}

.step-content span{
  color:var(--blue);
  font-size:0.8rem;
  font-weight:700;
  letter-spacing:2px;
}

.step-content h3{
  margin:12px 0;
  color:var(--blue);
  font-size:1.4rem;
}

.step-content p{
  line-height:1.7;
}


    /* FOOTER */




    .footer-top{
      padding:90px 0;
      background:#e7e7e7;
      text-align:center;
    }




    .footer-top h2{
      font-size:2.7rem;
      margin-bottom:20px;
    }




    .footer-top p{
      line-height:1.8;
      max-width:700px;
      margin:auto;
    }




    footer{
      background:var(--blue);
      color:white;
      padding:50px 0;
    }




    .footer-content{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:30px;
      flex-wrap:wrap;
    }




    .socials{
      display:flex;
      gap:15px;
    }




    .social{
      width:40px;
      height:40px;
      border:1px solid rgba(255,255,255,0.4);
      border-radius:50%;
    }




    /* RESPONSIVE */

@media(max-width:1200px){

  .steps-grid{
    grid-template-columns:repeat(2,1fr);
  }

}

@media(max-width:768px){

  .steps-grid{
    grid-template-columns:1fr;
  }

  .step-image img{
    max-width:260px;
  }

}


    @media(max-width:992px){




      .hero h1{
        font-size:3rem;
      }




      .benefits-content,
      .branding-content,
      .app-item{
        grid-template-columns:1fr;
      }




      .app-item.reverse{
        direction:ltr;
      }




      .branding-grid{
        margin-top:20px;
      }
    }




    @media(max-width:768px){




      .nav-content{
        flex-direction:column;
        gap:20px;
      }




      .nav-links{
        flex-wrap:wrap;
        justify-content:center;
        gap:20px;
      }




      .hero{
        padding:60px 0 80px;
      }




      .hero-box{
        padding:80px 20px;
      }




      .hero h1{
        font-size:2.2rem;
      }




      .section-title h2,
      .benefits-left h2,
      .branding-left h2,
      .apps-title h2{
        font-size:2rem;
      }




      .branding-grid{
        grid-template-columns:1fr;
      }




      .app-text h3{
        font-size:2rem;
      }
    }




    @media(max-width:480px){




      .hero h1{
        font-size:1.8rem;
      }




      .section-title h2{
        font-size:1.7rem;
      }




      .testimonial-card{
        padding:25px;
      }




      .benefits,
      .branding,
      .apps,
      .testimonials{
        padding:80px 0;
      }




      .app-item{
        margin-bottom:80px;
      }
      .scroll-top{
    transform:translateY(-4px);
    opacity: 1;
    rotate: 0deg;
}
    }