:root {
  --primary:#3b82f6;
  --primary-dark:#2563eb;
  --bg-dark:#0b1020;
  --muted:#64748b;
  --card:#ffffff;
  --glass: rgba(255,255,255,0.06);
  --radius:12px;
  --container:1100px;
  font-size:16px;
  --shadow: 0 10px 30px rgba(16,24,40,0.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  color:#0f172a;
  background:#f8fafc;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Utility container */
.container{max-width:var(--container);margin:0 auto;padding:0 20px}

/* NAVBAR */
.navbar{
  position:sticky;top:0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;background:linear-gradient(90deg,var(--bg-dark),#0a1220);
  color:white;backdrop-filter: blur(6px);
  box-shadow: 0 3px 10px rgba(2,6,23,0.15);
}
.brand img{height:40px}
.nav-links{display:flex;gap:18px;align-items:center}
.nav-links a{color:#cbd5e1;text-decoration:none;font-weight:600}
.nav-links a:hover{color:white}
.nav-actions{display:flex;gap:12px;align-items:center}
.btn{display:inline-block;padding:10px 16px;border-radius:10px;font-weight:600;text-decoration:none;cursor:pointer;border:none}
.btn.primary{background:var(--primary);color:white;box-shadow:0 8px 24px rgba(59,130,246,0.18)}
.btn.primary:hover{background:var(--primary-dark);transform:translateY(-2px)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.08);color:#e6eefc}

/* Floating CTA */
.floating-cta{
  position:fixed;right:18px;bottom:20px;z-index:90;
  background:linear-gradient(90deg,var(--primary),#6d28d9);
  color:white;padding:12px 16px;border-radius:999px;box-shadow:var(--shadow);text-decoration:none;font-weight:700;
  display:inline-flex;align-items:center;gap:8px;transform:translateY(0);transition:transform .2s ease;
}
.floating-cta:hover{transform:translateY(-4px)}

/* HERO */
.hero{
  position:relative;padding:64px 0 80px;color:white;overflow:hidden;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(59,130,246,0.12), transparent 20%),
              linear-gradient(180deg,#081229,#071026);
}
.hero .container{display:flex;gap:32px;align-items:center;flex-wrap:wrap}
.hero-copy{flex:1;min-width:320px}
.badge{display:inline-block;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,0.06);font-weight:700;margin-bottom:16px;color:#dbeafe}
.hero h1{font-size:clamp(28px,4.8vw,48px);margin:6px 0 12px;line-height:1.05;background:linear-gradient(90deg,#e6f0ff,#d0ccff);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.lead{color:rgba(235,245,255,0.9);max-width:56ch;font-size:1.05rem}
.cta-row{margin:18px 0;display:flex;gap:12px;flex-wrap:wrap}
.highlights{list-style:none;display:flex;gap:12px;padding:0;margin-top:12px;color:#cfe0ff;font-weight:600}
.stats{display:flex;gap:18px;margin-top:22px;flex-wrap:wrap}
.stat{background:rgba(255,255,255,0.03);padding:10px 14px;border-radius:10px;min-width:100px;text-align:left}
.stat .num{font-size:1.25rem;font-weight:700}
.stat .label{font-size:13px;color:rgba(235,245,255,0.8)}

/* Hero media */
.hero-media{width:420px;max-width:46%;min-width:280px;display:flex;flex-direction:column;align-items:center}
.video-mockup{position:relative;width:100%;border-radius:14px;overflow:hidden;box-shadow:0 12px 40px rgba(2,6,23,0.45)}
.video-mockup svg{display:block;width:100%;height:auto}
.play-overlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.5);border-radius:999px;border:none;padding:18px 22px;font-size:20px;color:white;cursor:pointer}
.media-caption{color:rgba(255,255,255,0.7);font-size:13px;margin-top:10px}

/* Blobs */
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:0.16;animation:float 8s ease-in-out infinite}
.b1{width:360px;height:360px;background:linear-gradient(180deg,#3b82f6,#60a5fa);left:-90px;top:-120px}
.b2{width:300px;height:300px;background:linear-gradient(180deg,#9333ea,#7c3aed);right:-80px;bottom:-120px}
.b3{width:200px;height:200px;background:linear-gradient(180deg,#00b894,#00d2b8);left:60%;top:40%}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-18px)}100%{transform:translateY(0)}}

/* Sections */
.section-light{background:#f8fafc;padding:64px 0}
section{padding:48px 0}

/* Showcase Carousel */
.showcase {
  padding: 80px 8%;
  text-align: center;
}
.carousel-wrapper {
  position: relative;
  overflow: hidden;
}
.carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none; /* hide scrollbar firefox */
}
.carousel::-webkit-scrollbar { display: none; } /* hide scrollbar chrome */

.carousel-item {
  flex: 0 0 250px;
  position: relative;
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}
.carousel-item img {
  width: 100%;
  display: block;
  border-radius: 12px;
}
.carousel-item:hover { transform: scale(1.05); }

.item-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 6px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* Buttons */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(0,0,0,0.6);
  border: none;
  color: #fff;
  font-size: 32px;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 50%;
  transition: background 0.3s;
}
.carousel-btn:hover { background: rgba(0,0,0,0.8); }
.carousel-btn.prev { left: -10px; }
.carousel-btn.next { right: -10px; }

/* Modal */
.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  inset: 0;
  background: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
}
.modal-content {
  position: relative;
  width: 80%;
  max-width: 900px;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
}
.modal-content iframe {
  display: block;
  width: 100%;
  height: 500px;
}
.close {
  position: absolute;
  top: 10px; right: 20px;
  color: white;
  font-size: 28px;
  cursor: pointer;
  background: transparent;
  border: none;
}

/* Steps + features */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.step{background:white;padding:20px;border-radius:12px;box-shadow:var(--shadow);text-align:center;transition:transform .2s}
.step:hover{transform:translateY(-6px)}
.step .emoji{font-size:30px;display:block;margin-bottom:10px}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:18px}
.feature-card{background:white;border-radius:12px;padding:18px;box-shadow:var(--shadow);transition:transform .2s}
.feature-card:hover{transform:translateY(-6px)}

/* Testimonials */
.testimonials{display:flex;gap:16px;overflow:hidden;padding:8px}
.testimonial{min-width:300px;background:white;padding:18px;border-radius:12px;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.testimonial .avatar{width:54px;height:54px;border-radius:999px;background:linear-gradient(90deg,#f97316,#f43f5e)}
.testimonial blockquote{margin:0;font-size:15px;color:#0f172a;font-weight:600}
.tmeta{font-size:13px;color:var(--muted)}

/* Use grid */
.usegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.use{background:white;padding:14px;border-radius:10px;box-shadow:var(--shadow);font-weight:600;display:flex;flex-direction:column}
.tag{font-size:12px;color:var(--muted);font-weight:500;margin-top:8px}

/* CTA Bar */
.cta-bar{display:flex;align-items:center;justify-content:space-between;padding:28px;background:linear-gradient(90deg,var(--primary),#6d28d9);color:white;border-radius:12px;margin:28px 0;flex-wrap:wrap}
.cta-bar .muted{opacity:0.95}

/* Footer */
.footer{background:#071026;color:#cfe8ff;padding:28px 0}
.footer .footer-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.footer a{color:rgba(255,255,255,0.85);text-decoration:none;font-weight:600}
.footer a:hover{text-decoration:underline}

/* Responsive */
@media (max-width:900px){
  .hero .container{flex-direction:column-reverse;align-items:center}
  .hero-media{max-width:92%}
  .nav-links{display:none}
  .carousel-item{flex:0 0 180px}
}
@media (max-width:520px){
  .stats{flex-direction:column;gap:8px}
  .hero h1{font-size:26px}
  .cta-bar{flex-direction:column;gap:12px;align-items:center}
}