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

html{
  scroll-behavior:smooth;
}

body{
  background:#F5F6FC;
  color:#222;
}

/* NAVBAR */

.navbar{

  position:fixed;

  top:0;

  left:0;

  width:100%;

  background:white;

  padding:18px 8%;

  display:flex;

  justify-content:space-between;

  align-items:center;

  box-shadow:
    0 10px 25px rgba(0,0,0,.05);

  z-index:999;
}

.logo img{

  height:55px;
}

.navbar ul{

  display:flex;

  list-style:none;

  gap:30px;
}

.navbar a{

  text-decoration:none;

  color:#333;

  font-weight:600;

  transition:.3s;
}

.navbar a:hover{

  color:#6C3BFF;
}

/* HERO */

.hero{

  min-height:100vh;

  display:flex;

  flex-direction:column;

  justify-content:center;

  align-items:center;

  text-align:center;

  padding:120px 20px 50px;

  background:
  linear-gradient(
    135deg,
    #6C3BFF,
    #8A63FF
  );

  color:white;

  position:relative;

  overflow:hidden;
}

.hero-logo{

  width:520px;

  max-width:90%;

  margin-bottom:40px;

  filter:
  drop-shadow(
    0 20px 40px rgba(0,0,0,.2)
  );
}

.hero h1{

  font-size:68px;

  max-width:900px;

  line-height:1.15;

  margin-bottom:20px;

  color:white;
}

.hero p{

  font-size:22px;

  color:rgba(255,255,255,.9);

  margin-bottom:35px;
}

.hero button{

  border:none;

  background:white;

  color:#6C3BFF;

  padding:18px 45px;

  border-radius:50px;

  font-size:18px;

  font-weight:700;

  cursor:pointer;

  transition:.3s;
}

.hero button:hover{

  transform:translateY(-3px);
}

/* SECTION */

section{

  padding:100px 8%;
}

section h2{

  text-align:center;

  font-size:40px;

  margin-bottom:25px;
}

section p{

  text-align:center;

  color:#666;

  line-height:1.8;
}

/* FEATURES */

.features{

  display:grid;

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

  gap:25px;

  margin-top:50px;
}

.card{

  background:white;

  border-radius:25px;

  padding:40px;

  text-align:center;

  cursor:pointer;

  transition:.3s;

  box-shadow:
    0 15px 35px rgba(108,59,255,.08),
    0 8px 20px rgba(0,0,0,.05);
}

.card:hover{

  transform:translateY(-5px);
}

.card h3{

  margin-top:15px;

  font-size:22px;
}

/* HOW */

ol{

  max-width:700px;

  margin:auto;

  margin-top:40px;
}

ol li{

  background:white;

  padding:20px;

  margin-bottom:15px;

  border-radius:18px;

  box-shadow:
    0 8px 20px rgba(0,0,0,.05);

  font-size:18px;
}

/* FAQ */

.faq-item{

  background:white;

  padding:25px;

  border-radius:20px;

  margin-bottom:20px;

  box-shadow:
    0 10px 25px rgba(0,0,0,.05);
}

.faq-item h3{

  margin-bottom:10px;
}

/* FOOTER */

footer{

  background:#111;

  color:white;

  text-align:center;

  padding:50px 20px;
}

footer a{

  color:white;

  text-decoration:none;

  margin:0 15px;
}

footer p{

  margin-top:20px;
}

/* RESPONSIVE */

@media(max-width:768px){

  .navbar{

    flex-direction:column;

    gap:15px;
  }

  .navbar ul{

    gap:15px;
  }

  .hero h1{

    font-size:34px;
  }

  .hero-logo{

    width:280px;
  }

  section h2{

    font-size:28px;
  }
}

.hero-buttons{

  display:flex;

  gap:15px;

  flex-wrap:wrap;
}

.outline-btn{

  background:transparent !important;

  border:2px solid white !important;

  color:white !important;
}

.feature-icon{

  font-size:55px;

  margin-bottom:20px;
}

.card p{

  margin-top:12px;

  color:#666;

  line-height:1.7;
}

.preview{

  background:white;
}

.preview-container{

  display:grid;

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

  gap:25px;

  margin-top:50px;
}

.phone-card{

  background:#F5F6FC;

  padding:40px;

  border-radius:25px;

  text-align:center;

  box-shadow:
    0 15px 35px rgba(108,59,255,.08),
    0 8px 20px rgba(0,0,0,.05);
}

.phone-card h3{

  margin-bottom:15px;

  color:#6C3BFF;
}

.download{

  background:
  linear-gradient(
    135deg,
    #6C3BFF,
    #8B5CFF
  );

  color:white;

  text-align:center;
}

.download h2{

  color:white;
}

.download p{

  color:white;
}

.download button{

  margin-top:25px;

  background:white;

  color:#6C3BFF;

  border:none;

  padding:18px 40px;

  border-radius:50px;

  font-size:18px;

  font-weight:700;

  cursor:pointer;
}

/* DELETE ACCOUNT */

#delete-account{

  background:white;
}

#delete-account p{

  max-width:900px;

  margin:auto;

  margin-bottom:15px;
}

/* CONTACT */

#contact{

  background:#F8F9FF;
}

#contact p{

  margin-bottom:10px;
}

/* FOOTER */

footer{

  background:#111;

  color:white;

  text-align:center;

  padding:60px 20px;
}

footer a{

  color:white;

  text-decoration:none;

  margin:0 15px;

  font-weight:600;
}

footer a:hover{

  color:#8B5CFF;
}

footer p{

  margin-top:20px;

  color:#ddd;
}
/* DELETE ACCOUNT PAGE */

.delete-page{

  min-height:100vh;

  background:#F5F6FC;

  padding:
    140px
    20px
    80px;
}

.delete-card{

  max-width:900px;

  margin:auto;

  background:white;

  border-radius:30px;

  padding:40px;

  box-shadow:
    0 20px 40px rgba(108,59,255,.08),
    0 10px 25px rgba(0,0,0,.05);
}

.delete-card h1{

  text-align:center;

  color:#6C3BFF;

  margin-bottom:15px;
}

.subtitle{

  text-align:center;

  margin-bottom:35px !important;

  color:#666;
}

.info-box{

  background:#F8F9FF;

  border-radius:20px;

  padding:25px;

  margin-bottom:20px;
}

.info-box h2{

  text-align:left;

  font-size:22px;

  color:#6C3BFF;

  margin-bottom:15px;
}

.info-box ol,
.info-box ul{

  padding-left:25px;
}

.info-box li{

  margin-bottom:12px;

  line-height:1.8;
}

.back-btn{

  display:block;

  width:max-content;

  margin:auto;

  margin-top:30px;

  background:#6C3BFF;

  color:white;

  text-decoration:none;

  padding:
    15px
    30px;

  border-radius:50px;

  font-weight:600;
}