:root{
--primary:#14B8A6;
--primary-dark:#0F766E;
--accent:#5EEAD4;
--bg:#071821;
--card:rgba(255,255,255,.08);
--text:#fff;
--muted:#cde8e6;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
font-family:Poppins,sans-serif;
background:linear-gradient(135deg,#06141c,#0b2430,#0f766e);
color:var(--text);
overflow-x:hidden;
}

a{text-decoration:none;color:inherit}
section{padding:90px 8%}
h1,h2,h3{font-weight:700}
p{line-height:1.8;color:var(--muted)}

.aurora{
position:fixed;inset:0;
background:
radial-gradient(circle at 20% 20%,rgba(20,184,166,.22),transparent 30%),
radial-gradient(circle at 80% 30%,rgba(94,234,212,.15),transparent 25%),
radial-gradient(circle at 50% 90%,rgba(20,184,166,.18),transparent 35%);
animation:aurora 15s infinite alternate ease-in-out;
z-index:-3;
}
@keyframes aurora{
from{transform:scale(1) rotate(0)}
to{transform:scale(1.2) rotate(5deg)}
}

.navbar{
position:sticky;top:0;
display:flex;justify-content:space-between;align-items:center;
padding:18px 8%;
background:rgba(6,20,28,.6);
backdrop-filter:blur(18px);
border-bottom:1px solid rgba(255,255,255,.08);
z-index:99;
}
.logo{display:flex;gap:10px;align-items:center}
.logo h2{font-size:24px}
nav{display:flex;align-items:center;gap:28px}
nav a:hover{color:var(--accent)}

.btn,.primary-btn{
background:var(--primary);
padding:14px 26px;
border-radius:50px;
font-weight:600;
display:inline-block;
transition:.3s;
box-shadow:0 0 30px rgba(20,184,166,.35);
}
.btn:hover,.primary-btn:hover{transform:translateY(-3px)}

.secondary-btn{
padding:14px 26px;
border:1px solid rgba(255,255,255,.2);
border-radius:50px;
margin-left:12px;
display:inline-block;
}

.hero{
min-height:90vh;
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
gap:40px;
}

.badge{
display:inline-block;
padding:10px 18px;
border-radius:30px;
background:rgba(20,184,166,.12);
border:1px solid rgba(94,234,212,.4);
margin-bottom:22px;
color:var(--accent);
}

.hero h1{
font-size:68px;
line-height:1.1;
margin-bottom:22px;
}
.hero h1 span{color:var(--accent)}
.hero p{max-width:620px;font-size:18px}

.hero-right{
display:flex;
justify-content:center;
align-items:center;
}
.hero-right lottie-player{
width:420px;
height:420px;
filter:drop-shadow(0 0 40px rgba(94,234,212,.35));
animation:float 4s ease-in-out infinite;
}
@keyframes float{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-15px)}
}

.stats{
display:flex;
gap:28px;
margin-top:40px;
}
.stats div{
background:var(--card);
padding:20px;
border-radius:18px;
backdrop-filter:blur(16px);
min-width:120px;
text-align:center;
}

.section{text-align:center}
.section h2{
font-size:46px;
margin-bottom:50px;
}

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:25px;
}
.card{
background:var(--card);
border:1px solid rgba(255,255,255,.08);
padding:35px;
border-radius:22px;
backdrop-filter:blur(16px);
transition:.35s;
}
.card:hover{
transform:translateY(-8px);
border-color:rgba(94,234,212,.5);
box-shadow:0 20px 50px rgba(20,184,166,.18);
}

.dark{background:rgba(255,255,255,.03)}
.steps{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
}
.step,.plan,.faq-item,.chat-box{
background:var(--card);
border-radius:22px;
padding:28px;
backdrop-filter:blur(16px);
}

.chat-box{max-width:650px;margin:auto;text-align:left}
.user,.bot{
padding:14px 18px;
border-radius:16px;
margin:15px 0;
}
.user{background:#154a56}
.bot{background:#0f766e}

.pricing{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:25px;
}
.featured{
border:2px solid var(--accent);
transform:scale(1.04);
}

.faq{
max-width:900px;
margin:auto;
display:grid;
gap:18px;
text-align:left;
}

.cta{
text-align:center;
padding:110px 8%;
background:linear-gradient(180deg,transparent,#0a313c);
}
.cta h2{font-size:54px;margin-bottom:20px}

footer{
padding:35px;
text-align:center;
border-top:1px solid rgba(255,255,255,.08);
color:#9bc5c3;
}

@media(max-width:900px){
nav a:not(.btn){display:none}
.hero{
grid-template-columns:1fr;
text-align:center;
}
.hero h1{font-size:44px}
.hero p{margin:auto}
.hero-buttons{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
.secondary-btn{margin-left:0}
.stats{justify-content:center;flex-wrap:wrap}
.hero-right lottie-player{width:300px;height:300px}
.section h2{font-size:34px}
.cta h2{font-size:36px}
}