:root{
  --bg: #0b1020;
  --surface: #0f1428;
  --card: #111836;
  --elev: #0d1330;
  --text: #eef2ff;
  --muted: #a5b4fc;
  --muted-2: #94a3b8;
  --primary: #8b5cf6;
  --primary-600: #7c3aed;
  --accent: #22d3ee;
  --ring: #1f2a44;
  --shadow: 0 10px 30px rgba(2,6,23,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background:radial-gradient(1200px 800px at 80% -10%, rgba(34,211,238,.08), transparent 60%),
             radial-gradient(900px 600px at -10% 10%, rgba(139,92,246,.10), transparent 60%),
             var(--bg); color:var(--text);
  display:flex; flex-direction:column; min-height:100dvh;
}

.site-header{background:rgba(15,20,40,.7); backdrop-filter: blur(10px); border-bottom:1px solid var(--ring); position:sticky; top:0; z-index:10}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.logo{color:var(--text); text-decoration:none; font-weight:800; letter-spacing:.2px}
.nav{display:flex; gap:14px}
.nav-link{color:var(--muted-2); text-decoration:none; padding:8px 12px; border-radius:999px; border:1px solid transparent}
.nav-link:hover{color:var(--text); background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.06)}
.nav-link.active{color:var(--text); background:linear-gradient(90deg, rgba(139,92,246,.22), rgba(34,211,238,.18)); border-color:rgba(139,92,246,.35)}

.container{width:min(1100px,92%); margin:0 auto}
.site-main{flex:1;}

.hero{padding:72px 0; background:linear-gradient(180deg, rgba(139,92,246,.08), rgba(0,0,0,0) 40%)}
.lead{color:var(--muted-2); font-size:1.1rem}
.hero-cta{display:flex; gap:12px; margin-top:16px}

.btn{display:inline-block; padding:12px 16px; border-radius:12px; text-decoration:none; cursor:pointer; border:1px solid transparent; box-shadow:var(--shadow)}
.btn-primary{background:linear-gradient(135deg, var(--primary), var(--accent)); color:#0b1220}
.btn-primary:hover{filter:brightness(1.05)}
.btn-secondary{background:#0b1220; color:var(--text); border-color:var(--ring)}
.btn-secondary:hover{background:#0a0f1b}

.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.card{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)), var(--card); border:1px solid var(--ring); border-radius:16px; padding:18px; box-shadow:var(--shadow)}
.card:hover{transform:translateY(-2px)}
.features{padding:24px 0 40px}

.badges{display:flex; gap:14px; flex-wrap:wrap; margin-top:18px}
.badge{border:1px solid var(--ring); color:var(--muted-2); padding:8px 12px; border-radius:999px; background:#0b1220}

.timeline{display:grid; gap:12px; margin-top:18px}
.timeline-item{display:flex; gap:12px; align-items:flex-start}
.dot{width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg, var(--primary), var(--accent)); margin-top:8px}
.timeline-content{flex:1}
.timeline-content h4{margin:0 0 4px}

.testimonials{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:18px}
.testimonial .who{color:var(--muted)}
.stars{color:#fbbf24}

.page-header{padding:32px 0}
.services-list{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; padding-bottom:24px}

.pricing{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px}
.price{font-size:1.8rem; font-weight:800}
.include{color:var(--muted-2)}

.form-row{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
label{font-weight:600}
input,select,textarea{background:#0b1220; color:var(--text); border:1px solid var(--ring); border-radius:10px; padding:10px}
input::placeholder,textarea::placeholder{color:#6b7280}
.form-actions{display:flex; gap:10px}
.muted{color:var(--muted)}

.survey-result pre{white-space:pre-wrap; margin:0}

.site-footer{margin-top:auto; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)), var(--surface); border-top:1px solid var(--ring)}
.footer-inner{display:flex; gap:12px; align-items:center; justify-content:space-between; padding:14px 0; flex-wrap:wrap}
.footer-brand{font-weight:700}
.footer-contact{color:var(--muted)}

.modal{position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.8); display:flex; align-items:center; justify-content:center; z-index:1000; opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s}
.modal.show{opacity:1; visibility:visible}
.modal-content{background:var(--card); border:1px solid var(--ring); border-radius:16px; padding:24px; max-width:500px; width:90%; max-height:80vh; overflow-y:auto; box-shadow:var(--shadow)}
.modal-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px}
.modal-title{margin:0; font-size:1.25rem}
.modal-close{background:none; border:none; color:var(--muted); font-size:1.5rem; cursor:pointer; padding:0; width:24px; height:24px; display:flex; align-items:center; justify-content:center}
.modal-close:hover{color:var(--text)}
.modal-body{color:var(--muted-2)}
.modal-footer{margin-top:16px; display:flex; gap:8px; justify-content:flex-end}

@media(max-width:800px){
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .testimonials{grid-template-columns:1fr}
}