/* WaterLevel.lk — minimal, modern stylesheet */
:root{
  --bg:#0b1220;
  --ink:#0e1116;
  --card:#0f172a;
  --soft:#f1f5f9;
  --muted:#94a3b8;
  --brand:#0ea5e9;
  --brand-ink:#075985;
  --ring: rgba(14,165,233,.35);
  --radius: 16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans, "Apple Color Emoji","Segoe UI Emoji";
  color:#0f172a;
  background:#ffffff;
  line-height:1.5;
  font-size:16px;
}

.container{width:min(1120px, 92%); margin-inline:auto}
.section{padding:72px 0}
.section.alt{background:#f8fafc}
.section-title{font-size: clamp(24px, 2.5vw, 32px); margin:0 0 24px 0;}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 18px; border-radius: 999px; border:1px solid #0ea5e9; text-decoration:none; font-weight:600}
.btn-primary{background:var(--brand); color:white; border-color:var(--brand)}
.btn-ghost{border-color:#cbd5e1; color:#0f172a; background:white}
.btn-outline{background:transparent; color:var(--brand); border-color:var(--brand)}
.btn-sm{padding:8px 12px; font-size:14px}
.btn-block{display:block; width:100%}

.site-header{position:sticky; top:0; backdrop-filter:saturate(1.5) blur(10px); background:rgba(255,255,255,.7); border-bottom:1px solid #e2e8f0; z-index: 30}
.site-header .container{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; color:#0f172a; text-decoration:none}
.logo{width:32px; height:32px}
.nav{display:flex; align-items:center; gap:18px}
.nav a{color:#0f172a; text-decoration:none; font-weight:600}
.hamburger{display:none; background:transparent; border:0; width:44px; height:44px; border-radius:8px}
.hamburger span{display:block; height:2px; background:#0f172a; margin:6px 10px}

.hero{padding:64px 0 24px 0; background:linear-gradient(180deg,#e0f2fe, #ffffff)}
.hero-grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:32px; align-items:center}
.hero h1{font-size: clamp(28px, 5vw, 48px); line-height:1.1; margin:0 0 12px 0}
.lead{font-size: clamp(16px, 2vw, 20px); color:#0f172a; opacity:.9}
.sub{color:#334155; margin:6px 0 18px}
.cta{display:flex; gap:12px; margin:14px 0 10px}
.mini-points{display:flex; gap:18px; list-style:none; padding:0; margin:12px 0 0 0; color:#334155}

.hero-art{position:relative}
.hero-art .wave{width:100%; max-width:520px; opacity:.85}
.hero-art .device{position:absolute; right:4%; top:10%; width:70%; max-width:360px; filter: drop-shadow(0 10px 30px rgba(2,6,23,.25))}

.badges{padding:10px 0 18px 0; background:#ffffff}
.badges-row{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
.badge{border:1px dashed #bae6fd; color:#0369a1; padding:6px 10px; border-radius:999px; background:#ecfeff; font-weight:600; font-size:14px}

.cards{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px}
.card{background:white; border:1px solid #e2e8f0; border-radius: var(--radius); padding:18px; box-shadow: 0 2px 8px rgba(2,6,23,.04)}
.card h3{margin:10px 0 6px 0}
.icon.circle{width:44px; height:44px; display:grid; place-items:center; border-radius:999px; background:#e0f2fe; border:1px solid #bae6fd}

.steps{counter-reset: step; display:grid; gap:12px; max-width:720px; margin:0 auto; padding-left:0; list-style:none}
.step-num{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:999px; background:#0ea5e9; color:white; font-weight:700; margin-right:8px}

.pricing{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px}
.price-card{background:white; border:1px solid #e2e8f0; border-radius: var(--radius); padding:18px}
.price-card.highlight{border-color:#0ea5e9; box-shadow: 0 6px 18px rgba(14,165,233,.15)}
.price{font-size:28px; font-weight:800; margin:8px 0 12px}

.contact-grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:22px; align-items:start}
.contact-form{display:grid; gap:12px}
.contact-form input, .contact-form textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid #cbd5e1; outline:none;
}
.contact-form input:focus, .contact-form textarea:focus{box-shadow:0 0 0 4px var(--ring); border-color:#38bdf8}
.form-msg{font-size:14px; color:#065f46}

.contact-aside{display:grid; gap:12px}
.contact-card{border:1px solid #e2e8f0; border-radius:12px; padding:16px; background:white}

.site-footer{border-top:1px solid #e2e8f0; padding:24px 0; background:#ffffff}
.foot-grid{display:grid; grid-template-columns: 1.2fr 1fr 1fr .8fr; gap:16px; align-items:start}
.foot-grid h4{margin:.2rem 0 .4rem}
.foot-grid ul{list-style:none; padding:0; margin:0; display:grid; gap:6px}
.copyright{text-align:center; color:#64748b; font-size:14px; margin:6px 0 0}

@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .cards{grid-template-columns: 1fr 1fr}
  .pricing{grid-template-columns: 1fr}
  .contact-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns: 1fr 1fr}
}
@media (max-width: 640px){
  .nav{display:none}
  .hamburger{display:block}
  .cards{grid-template-columns:1fr}
  .foot-grid{grid-template-columns: 1fr}
}