/* =========================================
   RESET
========================================= */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
/* =========================================
   ROOT
========================================= */
:root{
    --primary:#0099ff;
    --primary-light:#4db8ff;
    --primary-dark:#0066cc;
    --background:#050505;
    --surface:#111827;
    --white:#ffffff;
    --text:#eaf6ff;
     --text-secondary:#cfeeff;
}
/* =========================================
   BODY
========================================= */
body{
    font-family:'Montserrat',sans-serif;
    color:var(--text);
    background:linear-gradient(
        180deg,
        #050505 0%,
        #08111f 25%,
        #0b1728 55%,
        #102e52 80%,
        #153f6e 100%
     );
    min-height:100vh;
} 
/* =========================================
   CONTAINER
========================================= */
.container{
    width:min(100%,900px);
    margin:auto;
    padding:20px;
}

/* =========================================
   TOP BAR
========================================= */
.top-bar{
   width:100%;
   height:50px;
   display:flex;
   justify-content:center;
   align-items:center;
   background:var(--primary);
   border-radius:10px;
   margin-bottom:35px;
}
.top-bar-text{
   color:var(--black);
   font-size:14px;
   font-weight:700;
   letter-spacing:1px;
   text-transform:uppercase;
}
.logo-container{
   display:flex;
   justify-content:center;
   align-items:center;
   margin-top:35px;
}
.logo{
   width:100%;
   max-width:320px;
   display:block;
}
/* =========================================
   TAGLINE
========================================= */
.tagline-container{
   margin-top:20px;
   display:flex;
   justify-content:center;
}
.tagline{
   max-width:600px;
   text-align:center;
   line-height:1.6;
   border-right:2px solid var(--primary);
   white-space:nowrap;
   overflow:hidden;
   animation:blink .8s infinite;
   display:inline-block;
   padding-right:3px;
}
/* =========================================
   HERO BANNER
========================================= */
.hero-banner{
   margin-top:30px;
   margin-bottom:30px;
}
.hero-image{
   display:block;
   width:100%;
   border-radius:15px;
   transition:.35s;
   box-shadow: 0 0 18px rgba(0,153,255,.25);
}
.hero-image:hover{
   transform:scale(1.02);
}
/* =========================================
   BUTTON
========================================= */
.button-container{
   display:flex;
   flex-direction:column;
   gap:15px;
   margin-top:35px;
}
.btn{
   display:flex;
   justify-content:center;
   align-items:center;
   width:100%;
   height:55px;
   text-decoration:none;
   border-radius:12px;
   font-size:18px;
   font-weight:700;
   transition:all .3s ease;
   position:relative;
   overflow:hidden;
   box-shadow:0 0 12px rgba(0,153,255,.4);
}
.btn::before{
   content:"";
   position:absolute;
   top:-30%;
   left:180%;
   width:45px;
   height:220%;
   background:linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.8),
      transparent
      );
      transform:rotate(20deg);
   animation:shine 2.5s linear infinite;
}
.btn-login{
   background:#000;
   color:var(--white);
   border:2px solid var(--primary);
}
.btn-register{
   background:#000;
   color:var(--white);
   border:2px solid var(--primary);
}
.btn-whatsapp{
   background:#000;
   color:var(--white);
   border:2px solid var(--primary);
}
.btn:hover{
   transform:translateY(-2px);
   box-shadow:0 0 20px rgba(0,153,255,.6);
}
/* =========================================
   FAQ
========================================= */
.faq-container{
   margin-top:45px;
}
.faq-title{
   text-align:center;
   font-size:28px;
   color:var(--white);
   margin-bottom:25px;
}
.faq-item{
   background:#111827;
   border:1px solid var(--primary);
   border-radius:12px;
   overflow:hidden;
}
.faq-question{
   width:100%;
   background:none;
   border:none;
   color:var(--white);
   display:flex;
   justify-content:space-between;
   align-items:center;
   padding:18px 20px;
   cursor:pointer;
   font-size:17px;
   font-weight:600;
}
.faq-answer{
   display:none;
   padding:20px;
   color:var(--text);
   line-height:1.7;
}
.faq-icon{
   font-size:24px;
   color:var(--primary);
}
/* =========================================
   TESTIMONIAL
========================================= */
.testimonial-container{
   margin-top:45px;
}
.testimonial-title{
   text-align:center;
   color:var(--white);
   font-size:28px;
   margin-bottom:30px;
}
.testimonial-grid{
   display:grid;
   gap:20px;
}
.testimonial-card{
   background:#111827;
   border:1px solid var(--primary);
   border-radius:15px;
   padding:22px;
}
.testimonial-rating{
   color:#FFD700;
   font-size:20px;
   margin-bottom:15px;
}
.testimonial-text{
   color:var(--white);
   line-height:1.8;
   font-size:15px;
}
.testimonial-name{
   margin-top:18px;
   color:var(--primary);
   text-align:right;
   font-weight:700;
}
/* =========================================
   ANIMATION
========================================= */
@keyframes shine{
   from{
      left:-120%;
   }
   to{
      left:160%;
   }
}
@keyframes blink{
   50%{
      border-color:transparent;
    }
}
/* =========================================
   RESPONSIVE
========================================= */
@media (min-width:768px){
   .testimonial-grid{
      grid-template-columns:repeat(2,1fr);
   }
}