:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --muted:#5f6b7a;
  --text:#0b1a2b;
  --border:#e7ebf0;
  --brand:#3b82f6;
  --brand-2:#22c55e;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1100px,92%);margin:auto}

/* Header (hide on scroll) */
header{position:sticky;top:0;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.2) blur(6px);
  border-bottom:1px solid var(--border);z-index:10;transform:translateY(0);
  transition:transform 260ms ease, box-shadow 180ms ease, background-color 180ms ease}
header.header-hidden{transform:translateY(-100%)}
header.scrolled{box-shadow:0 10px 24px rgba(15,23,42,.06)}

.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:16px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:105px;width:auto;display:block}
.nav .logo{font-weight:700;letter-spacing:.3px;color:var(--text)}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:18px}
.nav li a{padding:8px 10px;border-radius:10px;color:#1f2937}
.nav .cta{background:var(--brand);color:#fff;padding:10px 14px;border-radius:12px;font-weight:600}
.nav .cta:hover{filter:brightness(.95)}

/* Hero */
.hero{padding:84px 0 48px;border-bottom:1px solid var(--border);
  background:radial-gradient(90% 60% at 50% -20%,rgba(59,130,246,.10),transparent 60%)}
.hero h1{font-size:clamp(36px,6vw,60px);line-height:1.05;margin:0 0 14px;color:#0b1a2b}
.hero p{color:#475569;font-size:clamp(16px,2.6vw,20px);max-width:760px}
.hero .actions{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 16px;border:1px solid var(--border);border-radius:12px;font-weight:600;color:#0b1a2b;background:#fff}
.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn.primary:hover{filter:brightness(.95)}

/* Contact Form Styles */
.contact-form {
  max-width: 420px;
  margin: 32px auto;
  background: #fff;
  padding: 32px 28px;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(2,6,23,.04);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.contact-form label {
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text);
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 16px;
  margin-bottom: 12px;
  background: #f8fafc;
  color: var(--text);
}
.contact-form textarea {
  min-height: 120px;
  resize: vertical;
}
.contact-form button[type="submit"] {
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 14px 0;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 8px;
  transition: background 0.2s;
}
.contact-form button[type="submit"]:hover {
  background: var(--brand-2);
}

.tagline-strip{padding:12px 0;border-top:1px solid var(--border);background:linear-gradient(90deg,#f8fafc,transparent)}
.tagline-strip .taglines{display:flex;gap:12px;flex-wrap:wrap}
.tagline{display:inline-block;padding:8px 12px;border:1px solid var(--border);border-radius:999px;background:#fff;color:#0b1a2b;font-weight:600;font-size:14px}

.section{padding:56px 0;border-bottom:1px solid var(--border);background:var(--surface)}
.section h2{margin:0 0 10px;font-size:clamp(26px,4.5vw,36px);color:#0b1a2b}
.section p.lead{color:#475569;max-width:820px}

.grid{display:grid;gap:18px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}

.card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px;box-shadow:0 2px 8px rgba(2,6,23,.04)}
.card h3{margin:6px 0 6px;color:#0b1a2b}

.versions{display:grid;gap:18px;grid-template-columns:repeat(3,1fr);margin-top:18px}
.plan{background:#fff;border:1px solid var(--border);border-radius:14px;padding:22px;display:flex;flex-direction:column;box-shadow:0 2px 8px rgba(2,6,23,.04)}
.plan .version{font-size:32px;margin:6px 0 10px;color:#0b1a2b}
.plan ul{padding-left:18px;color:#475569}
.plan .buy{margin-top:auto}

.faq{margin-top:18px}
.faq details{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:10px}
.faq summary{cursor:pointer}

footer{padding:40px 0;color:#475569;background:#fff}
footer .cols{display:grid;gap:18px;grid-template-columns:2fr 1fr 1fr}
small, .muted{color:#6b7280}

@media (max-width:900px){
  .grid.cols-3, .pricing{grid-template-columns:1fr 1fr}
  footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .grid.cols-3, .pricing{grid-template-columns:1fr}
  .nav ul{display:none}
}