/* WaveX Colorful UI */
:root{
  --bg:#0b1020;
  --panel:#0f1630;
  --card:#121a3a;
  --text:#e8edff;
  --muted:#a7b0d8;
  --primary:#7c5cff;
  --primary-2:#2ad4ff;
  --accent:#00ff9d;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:radial-gradient(1200px 600px at 20% -10%, #233 0%, transparent 55%),
             radial-gradient(1000px 600px at 90% 0%, #102 0%, transparent 50%),
             var(--bg);
  overflow-x:hidden;
}

/* Animated blobs background */
.bg .blob{
  position:fixed;
  filter:blur(60px);
  opacity:.35;
  z-index:-1;
  border-radius:50%;
  animation:float 18s ease-in-out infinite;
}
.bg .b1{background:linear-gradient(45deg,var(--primary),var(--primary-2)); width:520px;height:520px; left:-120px; top:-120px;}
.bg .b2{background:linear-gradient(45deg,#ff7ce5,#ffd479); width:460px;height:460px; right:-80px; top:-100px; animation-duration:22s;}
.bg .b3{background:linear-gradient(45deg,#00ffa6,#6bfffd); width:420px;height:420px; left:40%; top:60%; animation-duration:26s;}
@keyframes float{
  0%,100%{transform:translateY(0) translateX(0) scale(1)}
  50%{transform:translateY(-30px) translateX(15px) scale(1.05)}
}

.container{max-width:1150px; margin:0 auto; padding:0 20px}
.center{text-align:center}
.sub{color:var(--muted); margin-top:-8px}

/* Navbar */
.nav{position:sticky; top:0; backdrop-filter:saturate(180%) blur(10px); background:rgba(11,16,32,.5); border-bottom:1px solid rgba(255,255,255,.06); z-index:20}
.nav-inner{display:flex; align-items:center; gap:18px; padding:12px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; text-decoration:none; color:var(--text)}
.brand img{height:28px}
.links{display:flex; gap:18px; margin-left:auto}
.links a{color:var(--muted); text-decoration:none; padding:10px 6px; border-radius:8px}
.links a:hover{background:rgba(255,255,255,.06); color:var(--text)}
.cta{display:flex; gap:10px}
.hamburger{display:none; background:none; border:0; cursor:pointer}
.hamburger span{display:block; width:24px; height:2px; background:#fff; margin:5px 0}

/* Buttons */
.btn{border:0; padding:10px 16px; border-radius:12px; cursor:pointer; font-weight:700; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; box-shadow:var(--shadow); transition:transform .15s ease, filter .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn.primary{background:linear-gradient(135deg,var(--primary),var(--primary-2)); color:#0b0f1f}
.btn.ghost{background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.18)}
.btn.lg{padding:14px 20px; font-size:1.05rem}
.btn.small{padding:8px 12px; font-size:.9rem}
.btn.wfull{width:100%}

/* Hero */
.hero{padding:76px 0 40px}
.hero-grid{display:grid; grid-template-columns:1.2fr .9fr; gap:32px; align-items:center}
.hero h1{font-size:3rem; margin:.2em 0}
.lead{font-size:1.15rem; color:#d9e2ff}
.hero-actions{display:flex; gap:12px; margin:18px 0 24px}

.card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:18px; box-shadow:var(--shadow)}
.hero-visual{position:relative}
.demo-phone{background:#0d132a; border-radius:28px; padding:14px; width:100%; max-width:320px; margin:0 auto}
.statusbar{height:10px; background:linear-gradient(90deg,#fff,#999); border-radius:10px; opacity:.3; margin-bottom:10px}
.chat{display:flex; flex-direction:column; gap:10px; height:360px; overflow:hidden; padding:8px}
.bubble{max-width:80%; padding:10px 12px; border-radius:14px; font-size:.95rem}
.bubble.you{background:#0b1020; align-self:flex-start}
.bubble.me{background:#162149; align-self:flex-end}
.bubble.me.green{background:#0e3c2b}

.bullets{list-style:none; padding:0; margin:16px 0 0; display:grid; gap:10px}
.bullets li{background:rgba(255,255,255,.04); padding:10px 12px; border-radius:12px; color:var(--muted)}

.mini-form h3{margin:0 0 6px}
.mini-form .row{display:flex; flex-direction:column; gap:6px; margin:10px 0}
.mini-form .row.two{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.mini-form input, .mini-form select, .contact input, .contact textarea{
  width:100%; padding:12px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06); color:var(--text); outline:none
}
.code{background:#0a0f23; padding:12px; border-radius:12px; border:1px solid rgba(255,255,255,.1); overflow:auto}
.code.small{font-size:.85rem}

/* Sections */
.section{padding:70px 0}
.section.alt{background:rgba(255,255,255,.03); border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06)}
.grid{display:grid; gap:18px}
.cards-3{grid-template-columns:repeat(3,1fr)}
.feat .icon{font-size:1.6rem}
.provider h3{margin-top:0}
.price .price-tag{font-size:2rem; font-weight:900}
.price .badge{position:absolute; right:16px; top:12px; background:linear-gradient(135deg,var(--primary),var(--accent)); color:#081021; padding:4px 10px; border-radius:999px; font-size:.75rem; font-weight:800}
.price.popular{position:relative; outline:2px solid rgba(255,255,255,.12)}

/* FAQ */
.faq details{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:12px 14px}
.faq details+details{margin-top:10px}
.faq summary{cursor:pointer; font-weight:700}

/* Contact */
.contact .row{display:flex; flex-direction:column; gap:8px; margin:10px 0}
.contact .row.two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.muted{color:var(--muted)}
.small{font-size:.9rem}

/* Footer */
.footer{padding:40px 0; border-top:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.25)}
.footer-grid{display:grid; grid-template-columns:1.2fr .6fr .6fr; gap:18px; align-items:start}
.footer a{color:var(--muted); text-decoration:none}
.footer a:hover{color:#fff}

/* Modals */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; padding:20px}
.modal[aria-hidden="false"]{display:flex}
.modal-card{max-width:460px; width:100%}
.modal .close{position:absolute; right:16px; top:12px; font-size:1.6rem; border:0; background:transparent; color:var(--text); cursor:pointer}

/* Responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .cards-3{grid-template-columns:1fr; gap:14px}
  .links{display:none}
  .hamburger{display:block; margin-left:auto}
}