:root{
	--bg:#0f0b14;
	--card:#1a1520;
	--accent:#8a2be2;
	--accent-2:#caa6ff;
	--muted:#bfb6cf;
	--glass: rgba(255,255,255,0.03);
	font-synthesis: none;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	background: radial-gradient(1200px 500px at 10% 10%, rgba(138,43,226,0.12), transparent),
				radial-gradient(800px 400px at 90% 90%, rgba(202,166,255,0.06), transparent),
				var(--bg);
	color:#fff;
	-webkit-font-smoothing:antialiased;
}

.container{max-width:1100px;margin:0 auto;padding:2rem;width:calc(100% - 4rem)}

.site-header{position:sticky;top:0;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);backdrop-filter: blur(6px);z-index:50;border-bottom:1px solid rgba(255,255,255,0.02)}
.site-header .container{display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:700;color:var(--accent);text-decoration:none;font-size:1.15rem}
.nav a{color:var(--muted);text-decoration:none;margin-left:1rem;padding:0.5rem 0.5rem;border-radius:8px}
.nav a.cta{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#0b0210;padding:0.6rem 0.9rem;font-weight:600}

.hero{padding:4rem 0;position:relative;overflow:visible}
.hero-inner{display:flex;gap:2rem;align-items:center}
.hero-text{flex:1;max-width:56ch}
.hero-text h1{font-size:2.1rem;margin:0 0 0.5rem;color:var(--accent-2);text-shadow:0 6px 24px rgba(138,43,226,0.08)}
.hero-text p{color:var(--muted);line-height:1.6}
.hero-ctas{margin:1rem 0;display:flex;gap:0.75rem;flex-wrap:wrap}
.btn{display:inline-block;text-decoration:none;padding:0.65rem 1rem;border-radius:10px;font-weight:600}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#0b0210;box-shadow:0 12px 30px rgba(138,43,226,0.14)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}
.btn.large{padding:0.9rem 1.4rem;font-size:1.05rem}

.highlights{display:flex;gap:0.6rem;margin-top:1rem;padding:0;list-style:none;color:var(--muted);flex-wrap:wrap}
.highlights li{background:var(--glass);padding:0.4rem 0.6rem;border-radius:8px;font-size:0.9rem;border:1px solid rgba(255,255,255,0.15)}
.highlights li strong {background: linear-gradient(90deg, var(--accent), #6b47ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: bold;}

.hero-visual{width:420px;max-width:46%;position:relative}
.chat-carousel{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);border-radius:18px;padding:14px;box-shadow:0 10px 40px rgba(4,4,8,0.5);overflow:hidden;min-height:300px}
.chat-card{opacity:0;transform:translateY(18px) scale(0.99);transition:all .55s cubic-bezier(.18,.9,.3,1);border-radius:12px;padding:12px;background:linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));backdrop-filter: blur(6px);border:1px solid rgba(255,255,255,0.02)}
.chat-card.active{opacity:1;transform:none}
.chat-header{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.chat-header img{width:48px;height:48px;border-radius:10px;object-fit:cover;border:1px solid rgba(255,255,255,0.04)}
.chat-body{background:transparent;padding:6px 2px}
.msg{display:inline-block;padding:10px 12px;border-radius:14px;margin:6px 0;max-width:84%;line-height:1.3}
.from-me{background:linear-gradient(90deg,#2b2033,#241528);color:var(--muted);align-self:flex-end}
.from-bot{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#0b0210}

.hero-deco{position:absolute;right:-40px;bottom:-30px;width:260px;height:160px;filter:blur(26px);transform:translateY(6px);opacity:0.9}

.features{padding:3.5rem 0}
.features h2{color:var(--accent-2);margin-bottom:1rem;background: linear-gradient(90deg, var(--accent), #6b47ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}

h2 {background: linear-gradient(90deg, var(--accent), #6b47ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.feature{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:1.2rem;border-radius:12px;border:1px solid rgba(255,255,255,0.02)}
.feature .icon{font-size:1.8rem;margin-bottom:0.5rem}
.feature h3{margin:0 0 0.4rem}

.examples{padding:3.5rem 0}
.examples-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;align-items:start}
.example{background:linear-gradient(180deg, rgba(255,255,255,0.015), transparent);padding:1rem;border-radius:10px;border:1px solid rgba(255,255,255,0.02)}
.bubble{background:rgba(255,255,255,0.02);padding:10px;border-radius:12px;color:var(--muted);margin-bottom:8px}
.bubble.bot{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#0b0210}
.bubble.file{background:linear-gradient(90deg,#34233a,#2a1e33);color:var(--muted);display:flex;align-items:center;gap:8px}
.bubble.file::before{content:"📎";font-size:1.1rem}
.bubble.audio{background:linear-gradient(90deg,#4b2b8d,#7e56d6);color:#fff}
.bubble.contact{background:linear-gradient(90deg,#6b3ecf,#caa6ff);color:#0b0210}

.contact-cta{padding:3rem 0;text-align:center;background:linear-gradient(180deg, rgba(138,43,226,0.06), transparent);border-top:1px solid rgba(255,255,255,0.02)}

.site-footer{padding:2rem 0;color:var(--muted);font-size:0.9rem;border-top:1px solid rgba(255,255,255,0.02)}

.back-to-top{position:fixed;bottom:20px;right:20px;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#0b0210;border:none;border-radius:50%;width:50px;height:50px;font-size:1.5rem;cursor:pointer;opacity:0;visibility:hidden;transition:opacity 0.3s, visibility 0.3s;z-index:100}
.back-to-top.show{opacity:1;visibility:visible}

.muted{color:var(--muted);font-size:0.95rem}

/* responsive */
@media (max-width:900px){
	.hero-inner{flex-direction:column}
	.hero-visual{max-width:100%;width:100%}
	.grid{grid-template-columns:repeat(1,1fr)}
	.examples-grid{grid-template-columns:repeat(1,1fr);align-items:start}
}