:root{
  --bg:#f8fbff;
  --panel:#ffffff;
  --muted:#6b7280;
  --accent:#007FFF;
  --radius:12px;
  --container:1100px;
  --max-width:1200px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial;color:#0f172a;background:var(--bg);margin:0;line-height:1.5}
.container{max-width:var(--container);margin:0 auto;padding:1.5rem}
.site-header{background:transparent;padding:.8rem 0;position:sticky;top:0;z-index:40}
.header-inner{display:flex;align-items:center;gap:1rem}
.brand{font-weight:700;font-size:1.125rem;text-decoration:none;color:#0f172a}
.brand .dot{color:var(--accent)}
.nav{margin-left:auto;display:flex;gap:1rem;align-items:center}
.nav a{color:var(--muted);text-decoration:none;padding:.45rem;}
.btn-outline{border:1px solid rgba(15,23,42,.08);padding:.45rem .75rem;border-radius:8px}
.mobile-toggle{display:none;background:none;border:0;font-size:1.1rem;cursor:pointer}

.hero{padding:3.5rem 0}
.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:2rem;align-items:center}
.hero-content h1{font-size:2rem;margin:0 0 .5rem}
.lead{color:var(--muted);margin-bottom:1rem}
.cta-row{margin:1rem 0}
.btn-primary{background:var(--accent);color:white;padding:.7rem 1rem;border-radius:10px;text-decoration:none;display:inline-block}
.btn-ghost {
  background-color: #007FFF; /* Fogwing blue */
  color: white; /* Text color */
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 6px;
  font-weight: bold;
  display: inline-block;
}
.btn-ghost:hover {
  background-color: #005FCC; /* Darker blue on hover */
}
.meta{list-style:none;padding:0;margin:1rem 0 0;display:flex;gap:1rem;color:var(--muted)}
.hero-card{background:var(--panel);padding:1rem;border-radius:var(--radius);box-shadow:0 6px 18px rgba(15,23,42,.06)}
.card-screenshot img{width:100%;height:auto;border-radius:8px;display:block}
.card-stats{display:flex;gap:1rem;justify-content:space-between;margin-top:.75rem}
.card-stats div{font-size:.9rem;color:var(--muted)}
.card-stats strong{display:block;color:#0f172a;font-size:1.1rem}

.features{padding:2.5rem 0}
.features h2{text-align:center;margin-bottom:1rem}
.features-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.feature{background:var(--panel);padding:1rem;border-radius:12px;box-shadow:0 6px 18px rgba(15,23,42,.04)}

.testimonials{padding:2.5rem 0}
.testimonials h2{text-align:center;margin-bottom:1rem}
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.testimonial{background:var(--panel);padding:1rem;border-radius:12px;box-shadow:0 6px 18px rgba(15,23,42,.04)}
.testimonial p{margin:0 0 .5rem;color:var(--muted)}
.testimonial footer{font-size:.85rem;color:#374151}

.faq{padding:2.5rem 0}
.faq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.faq-item{background:var(--panel);border-radius:12px;padding:0;overflow:hidden;box-shadow:0 6px 18px rgba(15,23,42,.04)}
.faq-q{width:100%;text-align:left;padding:1rem;border:0;background:transparent;font-weight:600;cursor:pointer}
.faq-a{padding:0 1rem 1rem;color:var(--muted);display:none}

.download-cta{padding:2rem 0;text-align:center}
.download-buttons{display:flex;gap:1rem;justify-content:center;margin-top:1rem}
.small{color:var(--muted);font-size:.9rem}

.community{padding:2rem 0}
.community-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.community-card{background:var(--panel);padding:1rem;border-radius:12px}
.link{display:inline-block;margin-top:.6rem;text-decoration:none;color:var(--accent)}

.contact{padding:2rem 0}
.contact-form{display:grid;gap:.6rem;max-width:640px}
.contact-form label{display:block;font-size:.9rem}
.contact-form input,.contact-form textarea{width:100%;padding:.6rem;border-radius:8px;border:1px solid #e6eef9}
.form-actions{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
#contactResult{color:var(--muted)}

.site-footer{padding:2rem 0;background:transparent}
.footer-grid{display:flex;gap:2rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.footer-links a{margin-right:1rem;color:var(--muted);text-decoration:none}

/* responsive */
@media(max-width:1000px){
  .hero-grid{grid-template-columns:1fr;}
  .features-grid{grid-template-columns:1fr;}
  .testimonials-grid{grid-template-columns:1fr;}
  .faq-grid{grid-template-columns:1fr;}
  .community-grid{grid-template-columns:1fr;}
  .nav{display:none}
  .mobile-toggle{display:block}
}

@media(max-width:480px){
  .brand{font-size:1rem}
  .hero-content h1{font-size:1.5rem}
  .card-stats{flex-direction:column;align-items:flex-start;gap:.25rem}
}