:root{
  --navy:#061b2b;
  --navy2:#0b2d43;
  --blue:#19a7d3;
  --ice:#eaf8fc;
  --ice2:#f5fbfd;
  --text:#243746;
  --muted:#657985;
  --border:#dbe8ee;
  --white:#ffffff;
  --shadow:0 24px 70px rgba(5,31,48,.10);
}

*{
  box-sizing:border-box;
}

body{
  margin:0;
  background:#ffffff;
  color:var(--text);
  font-family:
  -apple-system,
  BlinkMacSystemFont,
  "Segoe UI",
  Arial,
  Helvetica,
  sans-serif;
}

.el-blog{
  width:100%;
  overflow:hidden;
}

.el-container{
  width:min(1160px,calc(100% - 40px));
  margin:auto;
}

/* HERO */

.el-hero{
  position:relative;
  overflow:hidden;
  padding:96px 0 90px;
  background:
  radial-gradient(circle at 82% 20%,rgba(24,169,212,.22),transparent 30%),
  radial-gradient(circle at 8% 90%,rgba(67,208,229,.10),transparent 24%),
  linear-gradient(135deg,#041521 0%,#08283b 55%,#073248 100%);
  color:white;
}

.el-hero:before{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:50%;
  right:-160px;
  top:-190px;
}

.el-hero:after{
  content:"";
  position:absolute;
  width:320px;
  height:320px;
  border:1px solid rgba(67,213,238,.14);
  border-radius:50%;
  right:60px;
  top:20px;
}

.el-hero-content{
  max-width:880px;
  position:relative;
  z-index:2;
}

.el-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50px;
  background:rgba(255,255,255,.06);
  font-size:12px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:28px;
}

.el-dot{
  width:7px;
  height:7px;
  background:#51d6ef;
  border-radius:50%;
  box-shadow:0 0 18px #51d6ef;
}

.el-hero h1{
  margin:0;
  max-width:1000px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(42px,6vw,70px);
  font-weight:400;
  line-height:1.06;
  letter-spacing:-1.6px;
}

.el-hero h1 span{
  color:#75dcf2;
}

.el-hero-sub{
  max-width:760px;
  margin:28px 0 0;
  font-size:19px;
  line-height:1.75;
  color:rgba(255,255,255,.76);
}

.el-hero-meta{
  margin-top:36px;
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  color:rgba(255,255,255,.56);
  font-size:13px;
}

.el-hero-meta strong{
  color:white;
  font-weight:600;
}

/* QUICK ANSWER */

.el-answer-wrap{
  margin-top:-36px;
  position:relative;
  z-index:5;
}

.el-answer{
  padding:34px 38px;
  border-radius:22px;
  background:white;
  box-shadow:var(--shadow);
  border:1px solid rgba(13,121,157,.09);
  display:grid;
  grid-template-columns:180px 1fr;
  gap:30px;
}

.el-answer-label{
  color:#129bc5;
  font-size:12px;
  line-height:1.3;
  letter-spacing:1.8px;
  text-transform:uppercase;
  font-weight:800;
}

.el-answer p{
  margin:0;
  font-size:18px;
  line-height:1.75;
}

/* ARTICLE */

.el-article{
  padding:76px 0 100px;
}

.el-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 290px;
  gap:70px;
}

.el-main h2{
  margin:72px 0 22px;
  color:var(--navy);
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  font-size:38px;
  line-height:1.18;
  letter-spacing:-.6px;
}

.el-main h2:first-child{
  margin-top:0;
}

.el-main h3{
  color:var(--navy2);
  margin:36px 0 12px;
  font-size:21px;
}

.el-main p{
  margin:0 0 20px;
  font-size:17px;
  line-height:1.82;
  color:#405563;
}

.el-main strong{
  color:#142f40;
}

.el-lead{
  font-size:20px!important;
  color:#263e4d!important;
}

.el-rule{
  width:52px;
  height:3px;
  margin:20px 0 30px;
  border-radius:4px;
  background:linear-gradient(90deg,#159fc9,#76d9ef);
}

/* SIDEBAR */

.el-sidebar{
  position:relative;
}

.el-side-box{
  position:sticky;
  top:30px;
  border:1px solid var(--border);
  border-radius:18px;
  padding:26px;
  background:#ffffff;
}

.el-side-title{
  color:#0a2a3e;
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:1.3px;
  margin-bottom:18px;
}

.el-side-box a{
  display:block;
  padding:11px 0;
  color:#5d7280;
  font-size:14px;
  line-height:1.4;
  text-decoration:none;
  border-bottom:1px solid #edf2f5;
}

.el-side-box a:last-child{
  border-bottom:0;
}

.el-side-box a:hover{
  color:#149bc5;
}

/* KEY METRICS */

.el-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin:38px 0;
}

.el-metric{
  min-height:170px;
  border-radius:18px;
  padding:25px;
  background:linear-gradient(145deg,#f7fcfe,#edf8fb);
  border:1px solid #dcecf2;
}

.el-metric-num{
  font-family:Georgia,"Times New Roman",serif;
  font-size:36px;
  color:#0a7fa7;
  margin-bottom:8px;
}

.el-metric-title{
  font-size:15px;
  color:#12374b;
  font-weight:700;
}

.el-metric-text{
  margin-top:9px;
  font-size:13px;
  line-height:1.6;
  color:#687c88;
}

/* QUOTE */

.el-quote{
  margin:38px 0;
  padding:34px;
  border-radius:18px;
  background:var(--navy);
  color:white;
  position:relative;
  overflow:hidden;
}

.el-quote:after{
  content:"";
  position:absolute;
  width:200px;
  height:200px;
  border-radius:50%;
  right:-70px;
  top:-80px;
  background:rgba(33,176,215,.16);
}

.el-quote p{
  margin:0!important;
  position:relative;
  z-index:2;
  color:white!important;
  font-family:Georgia,"Times New Roman",serif;
  font-size:24px!important;
  line-height:1.5!important;
}

/* COST CARDS */

.el-cost-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
  margin:30px 0 40px;
}

.el-cost{
  border:1px solid var(--border);
  border-radius:18px;
  padding:28px;
  background:#fff;
}

.el-cost-tag{
  font-size:11px;
  color:#0b8eb9;
  font-weight:800;
  letter-spacing:1.3px;
  text-transform:uppercase;
}

.el-cost h3{
  margin:10px 0 12px!important;
}

.el-cost p{
  font-size:15px!important;
  margin:0!important;
}

/* TABLE */

.el-table-wrap{
  overflow-x:auto;
  margin:32px 0;
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:0 12px 32px rgba(9,43,64,.04);
}

.el-table{
  width:100%;
  min-width:760px;
  border-collapse:collapse;
}

.el-table th{
  background:#08283c;
  color:white;
  text-align:left;
  padding:19px 20px;
  font-size:13px;
  letter-spacing:.3px;
}

.el-table td{
  padding:19px 20px;
  border-bottom:1px solid #e7eef2;
  font-size:14px;
  line-height:1.55;
  color:#506673;
}

.el-table tr:last-child td{
  border-bottom:none;
}

.el-table tbody tr:hover{
  background:#f6fbfd;
}

.el-table td:first-child{
  color:#17394c;
  font-weight:700;
}

/* FEATURE LIST */

.el-features{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin:30px 0;
}

.el-feature{
  display:flex;
  gap:16px;
  padding:22px;
  background:#f7fbfd;
  border-radius:16px;
  border:1px solid #e0edf2;
}

.el-feature-number{
  flex:0 0 38px;
  width:38px;
  height:38px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#0a2b3e;
  color:white;
  font-size:13px;
  font-weight:700;
}

.el-feature strong{
  display:block;
  margin-bottom:4px;
}

.el-feature span{
  font-size:14px;
  line-height:1.55;
  color:#6b7f8b;
}

/* CO2 MODULE */

.el-co2{
  margin:44px 0;
  border-radius:24px;
  background:
  radial-gradient(circle at 95% 20%,rgba(50,189,223,.22),transparent 30%),
  linear-gradient(135deg,#061b2b,#0a334b);
  padding:44px;
  color:white;
}

.el-co2-label{
  font-size:11px;
  font-weight:800;
  letter-spacing:1.8px;
  color:#6edcf3;
  text-transform:uppercase;
}

.el-co2 h3{
  margin:12px 0 18px!important;
  color:white!important;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  font-size:31px;
}

.el-co2 p{
  color:rgba(255,255,255,.72)!important;
}

.el-co2 ul{
  padding-left:20px;
}

.el-co2 li{
  margin:9px 0;
  color:rgba(255,255,255,.78);
  line-height:1.6;
}

/* PRODUCT */

.el-product{
  margin:52px 0;
  border-radius:24px;
  padding:42px;
  background:linear-gradient(135deg,#edf9fc,#ffffff);
  border:1px solid #d5ebf2;
}

.el-product-tag{
  color:#119cc5;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.6px;
  text-transform:uppercase;
}

.el-product h3{
  font-family:Georgia,"Times New Roman",serif;
  font-size:31px;
  font-weight:400;
  margin:10px 0 15px!important;
}

.el-product-link{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-top:12px;
  padding:13px 20px;
  border-radius:50px;
  background:#092b3f;
  color:white;
  text-decoration:none;
  font-size:14px;
  font-weight:700;
}

.el-product-link:hover{
  background:#0d405c;
}

/* FAQ */

.el-faq{
  margin-top:24px;
}

.el-faq-item{
  border-bottom:1px solid #dfe9ee;
  padding:24px 0;
}

.el-faq-item h3{
  font-size:19px;
  margin:0 0 9px!important;
}

.el-faq-item p{
  margin:0!important;
}

/* FINAL CTA */

.el-final{
  margin-top:70px;
  padding:56px 40px;
  text-align:center;
  border-radius:28px;
  background:
  radial-gradient(circle at 15% 25%,rgba(59,204,235,.15),transparent 25%),
  linear-gradient(135deg,#041622,#0b3045);
  color:white;
}

.el-final span{
  display:block;
  font-size:11px;
  color:#72dff5;
  letter-spacing:1.8px;
  text-transform:uppercase;
  font-weight:800;
}

.el-final h2{
  margin:12px auto 18px!important;
  max-width:740px;
  color:white!important;
  font-size:38px!important;
}

.el-final p{
  max-width:700px;
  margin:0 auto 25px!important;
  color:rgba(255,255,255,.68)!important;
}

.el-final a{
  display:inline-block;
  padding:15px 26px;
  border-radius:50px;
  color:#062236;
  background:white;
  text-decoration:none;
  font-weight:800;
  font-size:14px;
}

/* RESPONSIVE */

@media(max-width:900px){

  .el-layout{
    grid-template-columns:1fr;
    gap:30px;
  }

  .el-sidebar{
    display:none;
  }

  .el-answer{
    grid-template-columns:1fr;
    gap:10px;
  }

  .el-metrics{
    grid-template-columns:1fr;
  }

}

@media(max-width:650px){

  .el-container{
    width:min(100% - 28px,1160px);
  }

  .el-hero{
    padding:68px 0 70px;
  }

  .el-hero h1{
    font-size:39px;
  }

  .el-hero-sub{
    font-size:17px;
  }

  .el-main h2{
    font-size:30px;
  }

  .el-cost-grid,
  .el-features{
    grid-template-columns:1fr;
  }

  .el-co2,
  .el-product{
    padding:28px 24px;
  }

}