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

html {
  scroll-behavior: smooth;
}

body {

  font-family: Poppins, sans-serif;

  background: #090811;

  color: #fff;

  line-height: 1.7;

}

.container {

  width: min(1200px, 92%);

  margin: auto;

}

header {

  position: sticky;

  top: 0;

  z-index: 999;

  background: rgba(15, 12, 25, .8);

  backdrop-filter: blur(16px);

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

}

nav {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 20px 0;

}

.logo {

  font-size: 28px;

  font-weight: 700;

  color: #9e73ff;

}

nav ul {

  display: flex;

  gap: 30px;

  list-style: none;

}

nav a {

  color: white;

  text-decoration: none;

  font-weight: 500;

  transition: .3s;

}

nav a:hover {

  color: #9e73ff;

}

.hero {

  padding: 100px 0;

  background:

    radial-gradient(circle at top, #6d28ff55, transparent 55%),

    linear-gradient(#090811, #0c0917);

}

.hero-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 60px;

  align-items: center;

}

.hero h1 {

  font-size: 60px;

  line-height: 1.1;

  margin-bottom: 20px;

}

.hero p {

  font-size: 20px;

  color: #ccccdd;

  margin-bottom: 35px;

}

.buttons {

  display: flex;

  gap: 20px;

  flex-wrap: wrap;

}

.btn {

  display: inline-block;

  padding: 15px 35px;

  border-radius: 12px;

  text-decoration: none;

  font-weight: 600;

  transition: .25s;

}

.primary {

  background: #8c5cff;

  color: white;

}

.primary:hover {

  background: #a57dff;

  transform: translateY(-3px);

}

.secondary {

  border: 2px solid #8c5cff;

  color: white;

}

.secondary:hover {

  background: #8c5cff;

}

.hero-card {

  background: #151223;

  padding: 25px;

  border-radius: 24px;

  border: 1px solid rgba(255, 255, 255, .08);

  box-shadow: 0 0 50px rgba(118, 71, 255, .25);

}

.hero-card img {

  width: 100%;

  display: block;

  border-radius: 18px;

}

.features {

  padding: 90px 0;

}

.features h2 {

  text-align: center;

  font-size: 42px;

  margin-bottom: 50px;

}

.grid {

  display: grid;

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

  gap: 30px;

}

.card {

  background: #14111f;

  padding: 30px;

  border-radius: 18px;

  border: 1px solid rgba(255, 255, 255, .08);

  transition: .3s;

}

.card:hover {

  transform: translateY(-8px);

  box-shadow: 0 0 35px rgba(123, 84, 255, .3);

}

.card h3 {

  margin-bottom: 15px;

  color: #ae8bff;

}

.card p {

  color: #ccccdd;

}

.screenshots {

  padding: 100px 0;

  background: #0d0b16;

}

.screenshots h2 {

  text-align: center;

  font-size: 42px;

  margin-bottom: 50px;

}

.gallery {

  display: grid;

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

  gap: 30px;

}

.gallery img {

  width: 100%;

  border-radius: 18px;

  border: 2px solid rgba(255, 255, 255, .08);

  transition: .3s;

}

.gallery img:hover {

  transform: scale(1.03);

  box-shadow: 0 0 40px rgba(123, 84, 255, .35);

}

footer {

  padding: 40px 0;

  text-align: center;

  background: #08070e;

  color: #aaa;

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

}

footer a {

  color: #9e73ff;

  text-decoration: none;

}

@media(max-width:900px) {

  .hero-grid {

    grid-template-columns: 1fr;

  }

  .hero h1 {

    font-size: 42px;

  }

  .hero {

    padding: 70px 0;

  }

  nav {

    flex-direction: column;

    gap: 20px;

  }

  nav ul {

    flex-wrap: wrap;

    justify-content: center;

  }

}