:root{
  --purple:#6928ff;
  --teal:#18c2c0;
  --blue:#1f2e7b;
  --pink:#ec5bc8;
  --dark:#182545;
}

*{box-sizing:border-box;margin:0;padding:0;font-family:'Poppins',sans-serif;}
body{background:#f7f9fc;color:var(--dark);}

a{text-decoration:none}

.navbar{
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  position:sticky;top:0;z-index:1000;
}
.nav-container{
  max-width:1200px;margin:auto;padding:.75rem 1rem;display:flex;align-items:center;justify-content:space-between;
}
.logo{height:60px}
.nav-links{list-style:none;display:flex;gap:1.25rem;}
.nav-links a{color:var(--dark);font-weight:500;}

.hero{
  background:linear-gradient(120deg,var(--blue),var(--purple),var(--pink));
  color:#fff;text-align:center;padding:4rem 1rem 5rem;
}
.hero h1{font-size:2.2rem;margin-bottom:1rem;font-weight:700;}
.hero p{max-width:640px;margin:auto;font-weight:300;}
.cta{margin-top:2rem;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;}
.btn-primary,.btn-outline{padding:.75rem 1.5rem;border-radius:50px;font-weight:600;transition:.2s;}
.btn-primary{background:#fff;color:var(--purple);}
.btn-outline{border:2px solid #fff;color:#fff;}
.btn-primary:hover,.btn-outline:hover{transform:translateY(-3px);}

.steps{max-width:960px;margin:3rem auto;display:flex;gap:2rem;flex-wrap:wrap;justify-content:center;text-align:center;}
.step{flex:1 1 250px;}
.step h3{color:var(--purple);margin-bottom:.25rem;font-weight:600;}

.books{background:#ffffff;padding:3rem 1rem;text-align:center;}
.books h2{color:var(--blue);margin-bottom:1.5rem;font-weight:600;}
.book-grid{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;}
.book-card{background:#fff;border:1px solid #eee;border-radius:8px;padding:.5rem 1rem;width:180px;}
.book-card img{width:100%;border-radius:6px;margin-bottom:.5rem;}
.book-card span{font-weight:500;font-size:.9rem;}

.dashboard{display:flex;flex-wrap:wrap;align-items:center;gap:2rem;max-width:1100px;margin:4rem auto;padding:0 1rem;}
.dash-text{flex:1 1 320px;}
.dash-text h2{color:var(--blue);margin-bottom:.5rem;font-weight:600;}
.dash-text p{margin-bottom:1rem;}
.dash-image{flex:1 1 400px;}
.dash-image img{width:100%;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.1);}

.app-badge{text-align:center;padding:3rem 1rem;}
.app-badge h2{color:var(--blue);margin-bottom:1rem;font-weight:600;}
.play-badge{height:60px;transition:.2s;}
.play-badge:hover{transform:scale(1.05);}

.testimonials{text-align:center;padding:3rem 1rem;background:#f0f4ff;}
.testimonials h2{color:var(--blue);margin-bottom:1.5rem;font-weight:600;}
.testimonials blockquote{max-width:500px;margin:1rem auto;background:#fff;border-left:4px solid var(--teal);padding:1rem;border-radius:6px;font-style:italic;}
.testimonials cite{display:block;margin-top:.5rem;font-weight:600;color:var(--purple);}

.footer{background:var(--blue);color:#fff;text-align:center;padding:2rem 1rem;}
.footer .social{margin-top:1rem;display:flex;gap:1rem;justify-content:center;}
.footer .social a{color:#fff;font-size:1.25rem;transition:.2s;}
.footer .social a:hover{color:var(--teal);}
.footer p{font-size:.9rem;}
