:root{
  --bg: #0b1020;
  --bg-elev: #0e1428;
  --text: #e6e8f0;
  --muted: #aab0c0;
  --primary: #7c5cff;
  --primary-2: #0ea5e9;
  --accent: linear-gradient(135deg, var(--primary-2), var(--primary));
  --card: #0f1732cc;
  --border: #1b2442;
  --shadow: 0 10px 30px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji';
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 10% -10%, rgba(124,92,255,.20), transparent 60%),
    radial-gradient(1000px 600px at 100% 10%, rgba(14,165,233,.18), transparent 55%),
    var(--bg);
}

.container{width:min(1120px, 92%); margin-inline:auto}

/* Header */
.site-header{
  position:sticky; top:0; z-index:1000;
  backdrop-filter:saturate(140%) blur(10px);
  background:linear-gradient(to bottom, #0b1020dd, #0b102000);
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0}
.brand{display:flex; gap:10px; align-items:center; color:var(--text); text-decoration:none; font-weight:700}
.brand small{font-size:.95rem}
.nav-toggle{display:none}
.menu{display:flex; list-style:none; gap:18px; margin:0; padding:0}
.menu a{color:var(--muted); text-decoration:none; font-weight:500}
.menu a:hover{color:var(--text)}
.actions{display:flex; gap:10px}

/* Buttons */
.btn{--p:var(--primary); --q:var(--primary-2); border:1px solid transparent; color:white; text-decoration:none; font-weight:700; padding:10px 16px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; gap:10px; transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg, var(--q), var(--p))}
.btn.ghost{background:transparent; border-color:var(--border); color:var(--text)}
.btn.xl{padding:14px 20px; border-radius:14px}

/* Hero */
.hero{padding:72px 0}
.hero-inner{display:grid; grid-template-columns: 1.1fr 1fr; gap:32px; align-items:center}
.hero h1{font-size: clamp(2rem, 3.4vw + .5rem, 3.4rem); line-height:1.1; margin:0 0 14px}
.hero .accent{display:inline-block; background:var(--accent); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{color:var(--muted); font-size:1.1rem; max-width:52ch}
.cta-group{display:flex; gap:12px; margin:20px 0 10px}
.trust{display:flex; gap:8px; flex-wrap:wrap}
.pill{border:1px solid var(--border); padding:6px 10px; border-radius:999px; color:var(--muted); font-size:.9rem}

.hero-visual{position:relative; height:100%}
.phone{width:280px; height:520px; background:#0f1326; border:1px solid #20284e; border-radius:26px; box-shadow: var(--shadow); padding:14px; margin-inline:auto; position:relative; overflow:hidden}
.phone-notch{position:absolute; inset:0 0 auto 0; height:26px; background:linear-gradient(to bottom, #111835, transparent);}
.chat{display:grid; gap:8px; margin-top:36px}
.msg{max-width:85%; padding:10px 12px; border-radius:14px; font-size:.95rem; animation:pop .5s ease both}
.msg.bot{background:#15204a; border:1px solid #26336b}
.msg.user{background:#0ea5e9; color:#001420; margin-left:auto}
@keyframes pop{from{opacity:0; transform:translateY(8px) scale(.98)} to{opacity:1; transform:translateY(0) scale(1)}}

.shape{position:absolute; filter:blur(30px); opacity:.7}
.shape.s1{width:200px; height:200px; background:radial-gradient(circle at 30% 30%, #7c5cff, transparent 60%); right:-40px; top:-20px}
.shape.s2{width:240px; height:240px; background:radial-gradient(circle at 60% 40%, #0ea5e9, transparent 60%); left:-60px; bottom:-40px}

/* Features */
.section-head{text-align:center; margin:20px 0 30px}
.section-head h2{font-size: clamp(1.5rem, 2.2vw + .5rem, 2.4rem); margin:0 0 6px}
.section-head p{color:var(--muted)}

.features{padding:30px 0 10px}
.features .grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px}
.card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:18px; transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-3px); border-color:#2b386e; box-shadow:0 12px 30px rgba(17,24,39,.25)}
.card .icon{font-size:1.4rem; width:40px; height:40px; display:grid; place-items:center; border-radius:10px; margin-bottom:10px}
.gradient{background:linear-gradient(135deg, #0ea5e9, #8b5cf6); background-clip:text; -webkit-background-clip:text; color:transparent}
.card h3{margin:0 0 6px}
.card p{margin:0; color:var(--muted)}

/* How it works */
.how{padding:34px 0}
.steps{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; list-style:none; padding:0; margin:0}
.steps li{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:18px; position:relative; overflow:hidden}
.step-number{position:absolute; top:10px; right:12px; width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:rgba(124,92,255,.18); color:#cfd4ff; font-weight:800}
.steps h3{margin:0 0 6px}
.steps p{margin:0; color:var(--muted)}

/* Testimonials - slider */
.testimonials{padding:36px 0}
.slider{position:relative; overflow:hidden; background:var(--card); border:1px solid var(--border); border-radius:18px; padding:16px}
.slides{display:flex; transition:transform .4s ease}
.slide{min-width:100%; padding:6px 8px}
.slide blockquote{font-size:1.2rem; line-height:1.5; margin:0 0 8px}
.slide figcaption{color:var(--muted)}
.nav{position:absolute; top:50%; transform:translateY(-50%); background:#0e1428; border:1px solid var(--border); width:36px; height:36px; border-radius:10px; display:grid; place-items:center; color:#cfd4ff; cursor:pointer}
.nav.prev{left:8px}
.nav.next{right:8px}
.dots{display:flex; gap:6px; justify-content:center; margin-top:10px}
.dots button{width:8px; height:8px; border-radius:999px; border:0; background:#26336b; cursor:pointer}
.dots button.active{background:linear-gradient(135deg, #0ea5e9, #8b5cf6)}

/* Pricing */
.pricing{padding:34px 0}
.pricing-grid{display:grid; grid-template-columns: 1fr 1fr; gap:16px}
.price-card{background:var(--card); border:1px solid var(--border); border-radius:18px; padding:18px; position:relative}
.price-card .badge{position:absolute; top:12px; right:12px; background:rgba(14,165,233,.18); border:1px solid #214b62; color:#d8f0ff; padding:6px 10px; border-radius:999px; font-size:.8rem}
.price{font-size:2rem; margin:6px 0 10px}
.features-list{list-style:none; padding:0; margin:0 0 14px; color:var(--muted); display:grid; gap:6px}
.price-card.highlight{outline:1px solid #2b386e; box-shadow:0 16px 36px rgba(17,24,39,.28)}
.price-card .sub{color:var(--muted)}

/* FAQ */
.faq{padding:30px 0}
.accordion details{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:10px 12px; margin-bottom:10px}
.accordion summary{cursor:pointer; list-style:none; font-weight:600}
.accordion summary::-webkit-details-marker{display:none}
.accordion .content{color:var(--muted); padding-top:6px}

/* CTA panel */
.cta-panel{padding:38px 0 56px}
.cta-inner{display:grid; grid-template-columns: 1.2fr .8fr; gap:20px; align-items:center; background:linear-gradient(180deg, rgba(14,165,233,.15), rgba(139,92,246,.15)); border:1px solid #28446a; border-radius:22px; padding:18px}
.signup{display:flex; gap:10px; margin:10px 0}
.signup input{flex:1; padding:12px 14px; border-radius:12px; background:#0e1428; border:1px solid var(--border); color:var(--text)}
.signup input:focus{outline:2px solid #2b386e; outline-offset:2px}
.stats{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.stats li{background:#0e1428; border:1px solid var(--border); border-radius:14px; padding:12px; display:flex; gap:10px; align-items:baseline}
.stats .count{font-size:1.8rem; background:var(--accent); background-clip:text; -webkit-background-clip:text; color:transparent}
.stats span{color:var(--muted)}

/* Footer */
.site-footer{border-top:1px solid var(--border); padding:20px 0 40px; margin-top:10px}
.footer-grid{display:flex; align-items:flex-start; justify-content:space-between; gap:16px}
.footer-grid nav ul{display:grid; grid-auto-flow:column; gap:12px; list-style:none; padding:0; margin:0}
.footer-grid nav a{color:var(--muted); text-decoration:none}
.footer-grid nav a:hover{color:var(--text)}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease}
.reveal.visible{opacity:1; transform:none}

/* Toast */
.toast{position:fixed; left:50%; bottom:20px; transform:translateX(-50%); background:#0e1428; border:1px solid var(--border); padding:10px 14px; border-radius:12px; color:var(--text); display:none; box-shadow:var(--shadow); z-index:2000}

/* A11y */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* Mobile */
@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr; gap:22px}
  .features .grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:1fr}
  .cta-inner{grid-template-columns:1fr; gap:16px}
  .menu{display:none; position:absolute; top:56px; right:12px; background:#0e1428; border:1px solid var(--border); border-radius:14px; padding:10px; flex-direction:column; gap:8px}
  .nav-toggle{display:inline-flex; background:#0e1428; border:1px solid var(--border); color:#cfd4ff; padding:8px 10px; border-radius:10px}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important}
}