:root{
  --bg: #0b1220;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --brand: #0ea5e9; /* sky-500 */
  --brand-2: #22c55e; /* green-500 */
  --card: #111827;
  --ring: rgba(14,165,233,.35);
  --maxw: 1100px;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial;
  color:var(--text);
  background: radial-gradient(1200px 800px at 80% -10%, rgba(14,165,233,.08), transparent), linear-gradient(180deg, var(--bg) 0%, #0b1220 100%);
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{max-width:var(--maxw); margin-inline:auto; padding: 0 20px}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:.6rem; padding:.9rem 1.2rem; border-radius:9999px; background:var(--brand); color:white; font-weight:700; box-shadow: var(--shadow); border:1px solid rgba(255,255,255,.08)}
.btn.small{padding:.55rem .9rem; font-weight:600}
.btn.secondary{background:transparent; border:1px solid rgba(148,163,184,.35)}
.btn:hover{filter:brightness(1.03)}

/* Header */
header{position:sticky; top:0; backdrop-filter: blur(8px); background: rgba(11,18,32,.6); border-bottom:1px solid rgba(255,255,255,.06); z-index:50}
nav{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:800}
.logo-box{display:inline-grid; place-items:center; width:34px; height:34px; background:var(--brand); border-radius:10px}
.brand-name{letter-spacing:.3px}
.nav-links{display:flex; gap:1rem}
.nav-links a{padding:.5rem .8rem; border-radius:10px}
.nav-links a:hover{background: rgba(255,255,255,.06)}
.menu-btn{display:none}

/* Hero */
.hero{padding:clamp(3rem, 6vw, 6rem) 0}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:2.5rem; align-items:center}
.kicker{margin-bottom:1rem}
h1{font-size:clamp(2rem, 4vw, 3.2rem); line-height:1.1; margin:.25rem 0 1rem}
.highlight{background: linear-gradient(90deg, var(--brand), var(--brand-2)); -webkit-background-clip: text; background-clip:text; color:transparent}
.lead{font-size:1.15rem; color:var(--muted); max-width:62ch}
.cta-row{display:flex; gap:.8rem; margin-top:1.2rem}
.hero-highlights{margin-top:1.2rem; color:var(--muted); display:flex; gap:1rem; align-items:center; list-style:none; padding:0}
.hero-card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:1.2rem; box-shadow: var(--shadow)}

/* Logos */
.logos{display:grid; grid-template-columns:repeat(5,1fr); gap:1.2rem; opacity:.85; margin-top:1rem}
.logo{background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:1rem; text-align:center; font-weight:600; color:#cbd5e1}

/* Sections */
section{padding:clamp(2.5rem, 6vw, 4rem) 0}
.section-title{font-size:1.8rem; margin:0 0 .4rem}
.section-sub{color:var(--muted); max-width:68ch}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:1.5rem}
.card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:1.1rem; box-shadow: var(--shadow)}
.card h3{margin:.2rem 0 .5rem}
.icon{width:42px; height:42px; border-radius:10px; display:grid; place-items:center; background: rgba(14,165,233,.15); border:1px solid rgba(14,165,233,.35); margin-bottom:.6rem}

/* Pricing */
.pricing{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; align-items:stretch; margin-top:1.5rem}
.price{font-size:2rem; font-weight:800}
.list{margin:.6rem 0 0; padding:0; list-style:none}
.list li{display:flex; gap:.6rem; align-items:start; margin:.35rem 0}
.price-cta{margin-top:1rem}

/* Steps */
.steps .step{position:relative}
.step-num{width:34px; height:34px; border-radius:9999px; background:var(--brand); display:grid; place-items:center; font-weight:800}

/* Demos */
.demos img{border-radius:12px; border:1px solid rgba(255,255,255,.08)}

/* Testimonials */
.testimonials{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:1.3rem}
.quote{font-style:italic; color:#cbd5e1}

/* FAQ */
.faq{display:grid; gap:.6rem; margin-top:1rem}
.faq details{background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:.8rem 1rem}
.faq summary{cursor:pointer; font-weight:600}

/* Forms */
form{display:grid; gap:.8rem; margin-top:1rem}
input, textarea, select{width:100%; padding:.9rem 1rem; background:#0a1020; border:1px solid rgba(255,255,255,.12); color:var(--text); border-radius:12px; outline:none}
input:focus, textarea:focus, select:focus{border-color:var(--brand); box-shadow:0 0 0 4px var(--ring)}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:.8rem}
.form-note{color:var(--muted); font-size:.9rem}
.legal{color:#cbd5e1; font-size:.95rem}

/* Footer */
footer{border-top:1px solid rgba(255,255,255,.08); padding:2rem 0; color:#9aa4b2}
.footer-grid{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* Mobile menu */
#mobileMenu{position:fixed; inset:64px 0 0 0; background:rgba(11,18,32,.98); border-top:1px solid rgba(255,255,255,.08); padding:1rem; z-index:40}
.mobile-menu-grid{display:grid; gap:.6rem}

/* Responsive */
@media (max-width: 960px){
  .hero-grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .pricing{grid-template-columns:1fr}
  .testimonials{grid-template-columns:1fr}
  .logos{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 640px){
  .nav-links{display:none}
  .menu-btn{display:inline-flex}
  .grid-3{grid-template-columns:1fr}
  .logos{grid-template-columns:repeat(2,1fr)}
  .form-row{grid-template-columns:1fr}
}

/* Motion */
@media (prefers-reduced-motion: no-preference){
  .float{animation: float 8s ease-in-out infinite}
  @keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-8px)}100%{transform:translateY(0)}}
}