/* ---------- Quick edit guide ----------
1) Colours: change --brand, --ink, --bg, --muted below.
2) Logo: replace images/logo-placeholder.png and/or edit .logo-text.
3) Images: drop your JPG/PNG files into /images and update <img src> paths.
4) Captions/text: edit the HTML directly — it's clean and commented.
--------------------------------------- */
:root{
  --brand:#0ea5e9; /* sky blue */
  --ink:#0f172a;   /* dark slate */
  --bg:#ffffff;
  --muted:#64748b;
  --card:#f8fafc;
  --ring:rgba(14,165,233,0.25);
  --radius:16px;
}
*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}
.container{max-width:none;margin:0; padding-left: 100px;
  padding-right: 100px; /* optional */}
.topbar{position:sticky;top:0;background:rgba(255,255,255,0.9);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid #e2e8f0;z-index:10}
.topbar .nav{display:flex;align-items:center;justify-content:space-between;height:150px}
.logo{display:flex;align-items:center;gap:10px}
.logo-img{height:128px;width:auto;border-radius:8px;background:#e2e8f0}
.logo-text{font-weight:800;font-size:18px;color:var(--ink)}
.topbar nav a{margin-left:16px;padding:8px 10px;border-radius:10px}
.topbar nav a:hover{background:#f1f5f9}

.hero{padding:60px 0;background:linear-gradient(180deg,#f0f9ff,transparent)}
.hero-inner{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center}
.hero-text h1{font-size:40px;line-height:1.1;margin:0 0 10px}
.tagline{font-size:18px;color:var(--muted);margin:0 0 16px}
.cta-row{display:flex;gap:12px;margin:8px 0 12px}
.btn{display:inline-block;background:var(--brand);color:white;padding:10px 16px;border-radius:12px;border:1px solid transparent;transition:.2s box-shadow,.2s transform}
.btn:hover{box-shadow:0 8px 24px var(--ring);transform:translateY(-1px);text-decoration:none}
.btn.ghost{background:transparent;color:var(--brand);border-color:var(--brand)}
.mini{font-size:12px;color:var(--muted)}
.hero-media img{width:100%;border-radius:var(--radius);box-shadow:0 10px 30px rgba(2,6,23,.08)}

.section-title{padding-top:24px}
.section-title h2{margin:0}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:22px 0 30px}
.grid.two{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card);border:1px solid #e2e8f0;border-radius:var(--radius);overflow:hidden}
.card img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover}
.card-body{padding:14px}
.card h4{margin:0 0 8px}
.card p{margin:0 0 10px;color:var(--muted)}
.card:hover{box-shadow:0 12px 30px rgba(2,6,23,.08);transform:translateY(-1px);transition:.15s ease;}

.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:30px auto}
.feature{background:var(--card);border:1px solid #e2e8f0;border-radius:var(--radius);padding:16px;text-align:center}
.feature .icon{font-size:28px}
.lead{color:var(--muted);margin-top:-6px}
.checklist li{margin:6px 0}

.cta{background:linear-gradient(180deg,transparent,#ecfeff);padding:40px 0;margin:20px 0 0}
.cta-inner{text-align:center}
.rounded{border-radius:var(--radius);width:100%}

.footer{margin-top:40px;padding:24px 0;border-top:1px solid #e2e8f0;background:#ffffffc9;backdrop-filter:blur(6px)}
.footer .cols{display:grid;grid-template-columns:2fr 1fr 1.5fr;gap:20px}
.footer .copy{margin-top:12px;color:var(--muted);text-align:center}
.links{list-style:none;padding:0;margin:0}
.links li{margin:6px 0}

.form{padding:16px;display:grid;gap:12px}
label{display:grid;gap:6px}
input,textarea{padding:10px;border:1px solid #cbd5e1;border-radius:12px;font:inherit}
input:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--ring)}

@media (max-width:900px){
  .grid{grid-template-columns:1fr 1fr}
  .footer .cols{grid-template-columns:1fr 1fr}
  .hero-inner{grid-template-columns:1fr}
}
@media (max-width:600px){
  .grid{grid-template-columns:1fr}
  .footer .cols{grid-template-columns:1fr}
  .hero-text h1{font-size:32px}
}