:root{
  --blue:#033F63; --teal:#28666E; --gold:#B5B682; --charcoal:#7C9885; --cream:#FEDC97; --white:#FFFFFF;
  --bg:#0F1316; --card:#121820; --text:#E9EDF1; --muted:#AFC2CF; --border:#223242;
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font:16px/1.6 Helvetica, Arial, system-ui, sans-serif}
h1,h2,h3,h4{font-family: Georgia, 'Times New Roman', serif;font-weight:700}
a{color:#033F63;text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:20px}

/* Light header */
.nav{background:#FFFFFF;border-bottom:1px solid rgba(0,0,0,.08);z-index:20}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0}
.brand__img{height:80px;display:block}
.menu{display:flex;gap:16px;align-items:center}
.menu a{color:#033F63;opacity:.95}
.menu .btn--ghost{border:1px solid rgba(3,63,99,.25);padding:8px 14px;border-radius:999px;color:#033F63;background:transparent}
.menu-toggle{display:none;background:none;border:1px solid rgba(3,63,99,.25);border-radius:8px;color:#033F63;padding:6px 10px}

/* Hero */
.hero{background:linear-gradient(180deg, #F8FAFB 0%, #EDF2F6 100%);border-bottom:1px solid var(--border);color:#033F63}
.hero__inner{padding:56px 20px 32px}
.hero h1{font-size:2.1rem;margin:0 0 10px}
.lead{color:#28536E;max-width:760px}
.cta{margin-top:16px;display:flex;gap:12px;flex-wrap:wrap}

/* Steps (alignment fix) */
.steps{counter-reset: step;display:flex;gap:14px;flex-wrap:wrap;padding-left:0;margin:12px 0 0}
.steps li{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:10px 18px;list-style:none;display:inline-flex;align-items:center;font-weight:600}
.steps li::before{content: counter(step, decimal-leading-zero) '. ';counter-increment: step;margin-right:8px;color:var(--cream)}

.badges{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.badge{border:1px solid var(--border);border-radius:999px;padding:6px 12px;color:var(--muted);background:#0d1419}

.grid{display:grid;gap:18px}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px}
.card h3{margin-top:0}
.nest{margin-left:14px;color:var(--muted)}

.btn{background:var(--gold);color:#111;border:none;border-radius:999px;padding:10px 16px;font-weight:700;cursor:pointer;display:inline-block}
.btn:hover{filter:brightness(1.06)}
.btn--ghost{background:transparent;color:#033F63}

.form label{display:block;margin:10px 0}
.form input,.form textarea,.form select{width:100%;background:#0c1016;border:1px solid var(--border);border-radius:10px;padding:10px;color:var(--text)}
.form button{margin-top:8px}

.footer{border-top:1px solid var(--border);background:#0b1016;margin-top:40px}
.footer h4{margin:0 0 8px}
.footer .grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

.muted{color:var(--muted)}

.calc label{display:block;margin:8px 0}
.calc__result{margin-top:10px;font-weight:700}

.whapp{
  position:fixed;right:18px;bottom:18px;z-index:50;
  background:#25D366;color:#111;font-weight:700;border-radius:999px;padding:12px 14px;border:0;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.whapp:hover{filter:brightness(1.05)}

/* Snapshots page */
.snap-intro{max-width:900px;margin:0 auto 16px;color:var(--muted)}
.snap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.snap-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:10px;cursor:zoom-in;transition:transform .08s ease}
.snap-card:hover{transform:translateY(-2px)}
.snap-card img{width:100%;height:180px;object-fit:cover;border-radius:10px}
.snap-caption{margin-top:8px;color:var(--muted);font-size:.95rem}

.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:100;cursor:zoom-out}
.lightbox.open{display:flex}
/* 🚀 Allow much larger images in lightbox */
.lightbox img{
  width:auto;
  height:auto;
  max-width:98vw;
  max-height:96vh;
  border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.6)
}
.lightbox .close{position:absolute;top:16px;right:20px;font-size:28px;color:#fff;cursor:pointer}

}