:root{
  --purple:#5b2e8a;
  --purple-2:#865ad0;
  --silver:#cfcfd4;
  --bg:#0f0f12;
  --muted:#b9b9bf;
  --max-width:1100px;
  --gap:1rem;
  --radius:10px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Quicksand',system-ui,-apple-system,Segoe UI,Roboto;
  background:linear-gradient(180deg,#070611 0%, #0f0f12 100%);
  color: #fff;
  -webkit-font-smoothing:antialiased;
}

.container{max-width:var(--max-width);margin:0 auto;padding:0 1rem}

/* Header */
.site-header{position:fixed;left:0;right:0;top:0;background:rgba(10,8,14,0.6);backdrop-filter:blur(6px);z-index:1200;border-bottom:1px solid rgba(255,255,255,0.03)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:.9rem 0}
.brand{font-weight:700;color:var(--purple);font-size:1.05rem;display:flex;align-items:center;gap:.6rem}
.brand .star{color:var(--purple-2);font-size:1.25rem}

/* Desktop nav */
.nav ul{display:flex;gap:1rem;list-style:none}
.nav a{color:var(--silver);text-decoration:none;padding:.35rem .6rem;border-radius:6px;transition:background .18s}
.nav a:hover{background:rgba(255,255,255,0.03)}

/* Mobile nav toggle */
.mobile-toggle{display:none;background:transparent;border:0;color:var(--silver);font-size:1.25rem;cursor:pointer}

/* Mobile slide nav */
.mobile-nav{position:fixed;right:0;top:0;bottom:0;width:280px;background:linear-gradient(180deg,var(--purple),#2a1b3d);padding:1.2rem;transform:translateX(110%);transition:transform .28s ease;z-index:1300;border-left:1px solid rgba(255,255,255,0.04)}
.mobile-nav.show{transform:translateX(0)}
.mobile-nav a{display:block;color:#fff;padding:.6rem 0;border-bottom:1px solid rgba(255,255,255,0.03)}
.mobile-nav-close{background:transparent;border:0;color:var(--silver);font-size:2rem;position:absolute;top:12px;right:12px;cursor:pointer}

/* hero */
.hero{padding-top:6.2rem;padding-bottom:2.4rem}
.hero-grid{display:grid;grid-template-columns:1fr 320px;gap:2rem;align-items:center}
.hero h1{font-size:clamp(1.6rem,3.4vw,2.6rem);color:var(--silver);margin-bottom:.4rem}
.lead{color:var(--muted);margin-bottom:1rem}
.hero-card{background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.02));padding:1rem;border-radius:10px;border:1px solid rgba(255,255,255,0.03);color:var(--silver)}

/* sections */
.section{padding:2.4rem 0}
.section-title{font-size:1.25rem;color:var(--silver);margin-bottom:.4rem}
.section-sub{color:var(--muted);margin-bottom:1rem}

/* cards grid */
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.card{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));padding:1rem;border-radius:10px;border:1px solid rgba(255,255,255,0.03);color:var(--silver)}
.card h3{color:var(--purple-2)}

/* testimonials */
.testimonials{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
blockquote{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));padding:1rem;border-radius:8px;border:1px solid rgba(255,255,255,0.03);color:var(--muted)}
blockquote footer{margin-top:.5rem;color:var(--silver);font-weight:600}

/* CTA strip */
.cta-strip{background:linear-gradient(90deg,var(--purple),var(--purple-2));padding:.9rem;border-radius:12px;margin:1.5rem 0;box-shadow:0 8px 30px rgba(70,10,100,0.15)}
.cta-strip .btn{background:#fff;color:var(--purple)}

/* footer */
.site-footer{padding:2rem 0;border-top:1px solid rgba(255,255,255,0.03);margin-top:2rem}
.footer-grid{display:flex;justify-content:space-between;gap:1rem;align-items:center;flex-wrap:wrap}
.footer-links a{color:var(--muted);margin-left:.8rem;text-decoration:none}

/* buttons */
.btn{display:inline-block;padding:.6rem 1rem;border-radius:8px;text-decoration:none}
.btn-primary{background:var(--purple-2);color:#fff;font-weight:700}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--silver)}
.btn-small{padding:.4rem .7rem;border-radius:6px}

/* layout helpers */
.container{max-width:1100px;margin:0 auto;padding:0 1rem}

/* responsive */
@media (max-width:900px){
  .cards-grid{grid-template-columns:repeat(2,1fr)}
  .hero-grid{grid-template-columns:1fr}
}
@media (max-width:700px){
  .nav ul{display:none}
  .mobile-toggle{display:block}
  .cards-grid{grid-template-columns:1fr}
  .testimonials{grid-template-columns:1fr}
  .hero{padding-top:5.8rem}
}