:root{--primary:#2D1B4E;--secondary:#7B2CBF;--accent:#FFD60A;--muted:#cfc8df}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:'Cairo',sans-serif;background:linear-gradient(180deg,#0b0611 0%,#0f0820 40%);color:#fff}
.site-bg{position:fixed;inset:0;z-index:-2;background:radial-gradient(800px 400px at 10% 10%,rgba(123,44,191,0.14),transparent),radial-gradient(600px 300px at 90% 90%,rgba(255,214,10,0.06),transparent);animation:bgShift 12s linear infinite alternate}
@keyframes bgShift{from{filter:hue-rotate(0deg)}to{filter:hue-rotate(30deg)}}
.navbar{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;backdrop-filter:blur(6px);background:linear-gradient(90deg,rgba(45,27,78,0.85),rgba(123,44,191,0.75));box-shadow:0 6px 30px rgba(0,0,0,0.5);position:sticky;top:0;z-index:50}
.logo{color:var(--accent);font-weight:800;font-size:1.25rem;display:flex;gap:.6rem;align-items:center}
.nav-links{display:flex;gap:1rem;align-items:center}
.nav-links a{color:#fff;text-decoration:none;opacity:.95;padding:.35rem .6rem;border-radius:.5rem}
.btn-login{background:var(--accent);color:var(--primary);padding:.45rem .85rem;border-radius:999px;font-weight:700}
.hero{display:flex;align-items:center;gap:2rem;padding:4.5rem 1rem}
.hero-left{flex:1}
.hero-right{width:420px;min-width:260px}
.eyebrow{color:var(--muted);margin-bottom:.5rem}
h1{font-size:2.6rem;margin:.1rem 0}
.sub{color:var(--accent);font-weight:700;margin-bottom:1rem}
.lead{color:#e8e2ff;margin-bottom:1.2rem}
.card-custom{background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.02));border-radius:12px;padding:1rem;box-shadow:0 10px 30px rgba(2,2,8,0.6)}
.features{padding:2.5rem 1rem}
.feature-card{background:rgba(255,255,255,0.02);padding:1.2rem;border-radius:10px}
.stats-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;padding:2rem 1rem}
.stat-number{font-size:1.6rem;color:var(--accent);font-weight:800}
.cta-strip{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem;border-radius:12px;margin:1.5rem 0;background:linear-gradient(90deg,var(--secondary),var(--primary))}
.footer{padding:2rem;text-align:center;color:var(--muted)}
#float-whatsapp{position:fixed;bottom:28px;left:28px;z-index:60}
.whatsapp-btn{width:58px;height:58px;border-radius:999px;background:linear-gradient(90deg,#25D366,#128C7E);display:flex;align-items:center;justify-content:center;font-size:24px}
.reveal{opacity:0;transform:translateY(12px);transition:all .7s ease}
.reveal.active{opacity:1;transform:none}
/* Socials buttons (hero) */
.socials .social-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .75rem;border-radius:999px;border:1px solid rgba(255,255,255,0.08);color:#fff;background:transparent;transition:all .15s ease}
.socials .social-btn:hover{transform:translateY(-3px);background:rgba(255,255,255,0.03)}
.socials .social-btn .social-label{font-weight:700}
@media(min-width:992px){.hero{max-width:1200px;margin:2rem auto}.features,.stats-section{max-width:1200px;margin:0 auto}}

/* Carousel styling */
.hero-carousel{border-radius:12px;overflow:hidden;box-shadow:0 10px 30px rgba(2,2,8,0.6)}
.hero-carousel .carousel-item{min-height:260px;display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center}
.carousel-slide-overlay{background:linear-gradient(180deg,rgba(0,0,0,0.45),rgba(0,0,0,0.35));padding:1.2rem;border-radius:12px}
.carousel-indicators [data-bs-target]{background:#fff;opacity:.6}
.carousel-fade .carousel-item{transition:opacity .8s ease}

/* Mobile tweaks */
@media(max-width:767.98px){
  .hero{flex-direction:column-reverse;padding:2rem 1rem}
  .hero-right{width:100%;min-width:unset}
  h1{font-size:1.8rem}
  .hero-carousel .carousel-item{min-height:220px}
}