:root{
  --bg:#071926; /* dark navy */
  --card:#072733;
  --accent:#76f2c6; /* mint (from logo) */
  --accent-2:#48d9b1;
  --text:#e6fff7;
  --muted:#9fb7b0;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:linear-gradient(180deg,var(--bg),#031216);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

.container{
  max-width:1000px;
  margin:0 auto;
  padding:28px;
}

.topnav{
  position:fixed;
  right:24px;
  top:18px;
  display:flex;
  gap:12px;
  z-index:60;
}
.topnav a{
  color:var(--muted);
  text-decoration:none;
  font-weight:600;
  padding:6px 10px;
  border-radius:8px;
}
.topnav a:hover{color:var(--accent)}

.hero{
  padding:60px 0 40px;
  text-align:center;
  border-bottom:1px solid rgba(255,255,255,0.03);
}
.logo{
  max-width:160px;
  height:auto;
  display:block;
  margin:0 auto 12px;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.6));
}
.hero h1{
  font-size:34px;
  margin:8px 0 6px;
  letter-spacing:1px;
}
.tagline{
  color:var(--muted);
  margin-bottom:18px;
}
.btn{
  display:inline-block;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#01211a;
  text-decoration:none;
  padding:12px 20px;
  border-radius:12px;
  font-weight:700;
}
.section{padding:44px 0}
.section.dark{background:rgba(0,0,0,0.12); border-top:1px solid rgba(255,255,255,0.02); border-bottom:1px solid rgba(255,255,255,0.02);}

.two-col{display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start}

.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:18px}
.card{background:var(--card);padding:18px;border-radius:12px;box-shadow:0 6px 18px rgba(3,8,12,0.6)}
.price-card{background:linear-gradient(180deg,rgba(7,39,51,0.6),rgba(4,18,24,0.6));padding:16px;border-radius:10px;box-shadow:0 8px 20px rgba(0,0,0,0.6)}

.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:12px}

.contact-card{background:linear-gradient(90deg, rgba(7,39,51,0.6), rgba(4,24,30,0.6)); padding:16px;border-radius:10px}

form{max-width:720px;margin-top:12px}
label{display:block;margin-bottom:10px;font-size:14px;color:var(--muted)}
input[type="text"], input[type="email"], input[type="tel"], select, textarea{
  width:100%;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.02);
  color:var(--text);
}
textarea{resize:vertical}
.btn{border:none;cursor:pointer}
.small{color:var(--muted);font-size:13px;margin-top:8px}

.footer{padding:18px 0;text-align:center;color:var(--muted);border-top:1px solid rgba(255,255,255,0.02)}

@media (max-width:880px){
  .two-col{grid-template-columns:1fr}
  .topnav{display:none}
  .hero h1{font-size:28px}
}