/* CSS base */
:root{
  --bg: #0f172a; /* dark background for accent wave */
  --surface: #0b1220;
  --muted: #94a3b8;
  --glass: rgba(255,255,255,0.04);
  --accent-from:#7c5cff;
  --accent-to:#2dd4bf;
  --container: 1100px;
  --radius: 12px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color: #e6eef8;
  background: linear-gradient(180deg,#07070a 0%, #071026 60%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 20px;
}
.site-header{position:sticky;top:0;backdrop-filter: blur(6px);background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-bottom:1px solid rgba(255,255,255,0.03)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{font-weight:700;color:linear-gradient(90deg,var(--accent-from),var(--accent-to));text-decoration:none;font-size:1.05rem}
.logo::first-letter{color:var(--accent-from)}
.nav-list{display:flex;gap:18px;align-items:center;list-style:none;padding:0;margin:0}
.nav-list a{color:var(--muted);text-decoration:none;font-weight:500}
.nav-toggle{display:none;background:none;border:0}
.hamburger{display:block;width:22px;height:2px;background:var(--muted);position:relative}
.hamburger::after,.hamburger::before{content:'';position:absolute;left:0;width:22px;height:2px;background:var(--muted);}
.hamburger::before{top:-7px}
.hamburger::after{bottom:-7px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;font-weight:600;text-decoration:none}
.btn-primary{background:linear-gradient(90deg,var(--accent-from),var(--accent-to));color:#072137}
.btn-ghost{border:1px solid rgba(255,255,255,0.04);padding:8px 12px;background:transparent;color:var(--muted)}
.btn-outline{border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--muted);padding:10px 14px}
.lead{color:var(--muted);margin-top:8px}
.hero{position:relative;padding:64px 0 40px}
.hero-inner{display:grid;grid-template-columns:1fr 420px;gap:32px;align-items:center}
.hero-copy h1{margin:0;font-size:2.4rem;letter-spacing:-0.02em}
.hero-card{background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));border-radius:16px;padding:20px;box-shadow:0 6px 30px rgba(2,6,23,0.6);position:relative;overflow:hidden}
.card-decor{position:absolute;right:-40px;top:-40px;width:240px;height:240px;filter:blur(10px);opacity:0.85}
.card-content{position:relative;z-index:2}
.meta{display:flex;gap:12px;color:var(--muted);margin-top:12px}
.hero-wave{display:block;width:100%;height:80px;position:absolute;left:0;bottom:-1px}
.section-title{font-size:1.25rem;margin:28px 0}
.features .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--glass);padding:18px;border-radius:12px;color:var(--muted)}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.price-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:20px;border-radius:12px;text-align:center}
.price{font-size:1.2rem;font-weight:700;margin:10px 0}
.price-card.highlight{transform:translateY(-8px);box-shadow:0 10px 40px rgba(124,92,255,0.12)}
.contact{padding:28px 0 64px;text-align:center}
.form{display:inline-flex;gap:10px;background:rgba(255,255,255,0.03);padding:8px;border-radius:999px}
.form input{background:transparent;border:0;padding:12px 16px;color:inherit;outline:none}
.note{color:var(--muted);margin-top:12px}
.site-footer{border-top:1px solid rgba(255,255,255,0.03);padding:18px 0;margin-top:40px}
.footer-inner{display:flex;align-items:center;justify-content:space-between}
.toast{position:fixed;right:18px;bottom:18px;background:rgba(0,0,0,0.6);padding:12px 16px;border-radius:10px;color:#e6eef8;transform:translateY(12px);opacity:0;transition:opacity 300ms,transform 300ms}
.toast.show{opacity:1;transform:translateY(0)}

/* Responsive */
@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr 1fr}
  .features .cards{grid-template-columns:1fr 1fr}
  .pricing-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .container{padding:0 16px}
  .hero-inner{grid-template-columns:1fr}
  .hero-card{order:-1;margin-bottom:18px}
  .nav-list{display:none}
  .nav-toggle{display:block}
  .nav-list.mobile-open{display:flex;flex-direction:column;gap:12px;position:absolute;right:20px;top:64px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:14px;border-radius:10px}
  .footer-inner{flex-direction:column;gap:8px}
}