:root{
      --blue:#0b49b5;
      --blue-dark:#07317f;
      --blue-soft:#eef5ff;
      --text:#111827;
      --muted:#5f6b7a;
      --line:#dce7f5;
      --white:#ffffff;
      --bg:#f7faff;
      --shadow:0 12px 30px rgba(22,65,120,.10);
      --radius:20px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:Inter,Arial,Helvetica,sans-serif;
      color:var(--text);
      background:#fff;
      line-height:1.55;
    }

    a{text-decoration:none;color:inherit}
    img{max-width:100%;display:block}
    .container{width:min(1180px,calc(100% - 40px));margin:auto}

    /* HEADER */
    .site-header{
      position:sticky;
      top:0;
      z-index:30;
      background:rgba(255,255,255,.96);
      backdrop-filter:blur(12px);
      border-bottom:1px solid #edf1f7;
    }
    .header-inner{
      min-height:82px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:30px;
    }
    .brand{
      display:flex;
      flex-direction:column;
      line-height:.92;
      min-width:180px;
    }
    .brand strong{
      font-size:29px;
      letter-spacing:-1.8px;
      color:#555b63;
    }
    .brand span{
      font-size:16px;
      font-weight:800;
      margin-left:26px;
      color:#252a31;
    }
    .nav{
      display:flex;
      align-items:center;
      gap:34px;
      font-weight:700;
      font-size:14px;
    }
    .nav a{position:relative;padding:30px 0 25px}
    .nav a:hover,.nav a.active{color:var(--blue)}
    .nav a.active:after{
      content:"";
      position:absolute;
      left:0;right:0;bottom:17px;
      height:3px;border-radius:10px;background:var(--blue);
    }
    .menu-toggle{
      display:none;
      width:44px;height:44px;border:1px solid var(--line);
      background:#fff;border-radius:12px;font-size:23px;
    }

    /* HERO */
    .hero{
      position:relative;
      overflow:hidden;
      background:
        radial-gradient(circle at 69% 40%,rgba(255,255,255,.96),rgba(235,243,252,.85) 34%,rgba(218,230,245,.92) 62%,rgba(202,216,233,.96)),
        linear-gradient(120deg,#f9fcff,#dbe8f6);
    }
    .hero:before{
      content:"";
      position:absolute;
      inset:0;
      opacity:.36;
      background-image:
        linear-gradient(30deg,transparent 47%,rgba(255,255,255,.9) 48%,transparent 49%),
        linear-gradient(150deg,transparent 47%,rgba(255,255,255,.8) 48%,transparent 49%);
      background-size:68px 118px;
      mask-image:linear-gradient(90deg,transparent 25%,#000 55%,transparent 82%);
    }
    .hero-grid{
      min-height:650px;
      display:grid;
      grid-template-columns:1.05fr .95fr;
      align-items:center;
      gap:30px;
      position:relative;
      z-index:2;
    }
    .eyebrow{
      font-size:46px;
      font-weight:900;
      letter-spacing:-2px;
      margin:0 0 4px;
    }
    h1{
      margin:0;
      font-size:72px;
      line-height:.98;
      letter-spacing:-4px;
      max-width:600px;
    }
    h1 .blue{color:var(--blue)}
    .title-line{
      width:62px;height:5px;background:var(--blue);border-radius:999px;
      margin:24px 0 22px;
    }
    .hero-text{
      max-width:560px;
      color:#202735;
      font-size:19px;
      margin-bottom:28px;
    }
    .phones{
      display:flex;
      align-items:center;
      gap:30px;
      flex-wrap:wrap;
      margin-bottom:28px;
    }
    .phone-item{
      display:flex;gap:13px;align-items:center;
      padding-right:28px;
      border-right:1px solid #8ea8ca;
    }
    .phone-item:last-child{border-right:none}
    .phone-icon{
      width:34px;height:34px;border-radius:50%;
      display:grid;place-items:center;
      color:var(--blue);font-size:26px;
    }
    .phone-item small{display:block;color:#3f4b5c;font-size:13px}
    .phone-item strong{display:block;font-size:23px;color:var(--blue-dark)}
    .cta-row{display:flex;gap:16px;flex-wrap:wrap}
    .btn{
      min-height:58px;
      padding:0 25px;
      display:inline-flex;align-items:center;justify-content:center;gap:12px;
      border-radius:8px;
      font-weight:800;
      transition:.25s ease;
      border:2px solid var(--blue);
    }
    .btn-primary{background:var(--blue);color:#fff}
    .btn-primary:hover{background:var(--blue-dark);transform:translateY(-2px)}
    .btn-secondary{background:rgba(255,255,255,.72);color:var(--blue-dark)}
    .btn-secondary:hover{background:#fff;transform:translateY(-2px)}

    .boiler-stage{
      min-height:560px;
      display:flex;
      align-items:flex-end;
      justify-content:center;
      position:relative;
    }
    .boiler-shadow{
      position:absolute;
      width:420px;height:72px;
      border-radius:50%;
      background:rgba(19,48,82,.17);
      filter:blur(20px);
      bottom:33px;
    }
    .boiler{
      position:relative;
      width:min(370px,92%);
      height:490px;
      background:linear-gradient(135deg,#fff 0%,#f9fafc 45%,#dfe6ef 100%);
      border-radius:9px 9px 18px 18px;
      box-shadow:25px 24px 48px rgba(32,53,80,.20),inset -16px 0 22px rgba(137,154,177,.20);
      border:1px solid #e6eaf0;
    }
    .boiler:before{
      content:"";
      position:absolute;
      top:-66px;left:47%;
      width:70px;height:68px;
      transform:translateX(-50%);
      background:linear-gradient(90deg,#d7dee7,#fff,#b8c2cf);
      border-radius:8px 8px 0 0;
      box-shadow:inset -8px 0 10px rgba(0,0,0,.07);
    }
    .boiler-logo{
      position:absolute;top:220px;left:0;right:0;
      text-align:center;font-size:14px;color:#50545b;font-weight:700;
    }
    .control{
      position:absolute;
      left:50%;bottom:68px;transform:translateX(-50%);
      width:170px;height:110px;border-radius:16px;
      background:linear-gradient(145deg,#3e444c,#11161d);
      box-shadow:inset 0 0 0 4px #7a8087,0 8px 15px rgba(0,0,0,.18);
    }
    .screen{
      width:82px;height:42px;margin:15px auto 5px;
      border-radius:5px;
      display:grid;place-items:center;
      background:#052c6c;color:#70c8ff;
      font-family:monospace;font-size:27px;
      box-shadow:0 0 12px rgba(0,125,255,.75) inset;
    }
    .knob{
      width:34px;height:34px;border-radius:50%;
      background:radial-gradient(circle at 35% 30%,#dbe2e9,#4f565f 50%,#14181e 54%);
      margin:auto;
    }
    .pipes{
      position:absolute;left:50%;bottom:-120px;transform:translateX(-50%);
      display:flex;gap:25px;
    }
    .pipe{
      width:18px;height:125px;border-radius:0 0 9px 9px;
      background:linear-gradient(90deg,#7c8793,#fff,#65717e);
      border-top:10px solid #ac7a3a;
    }
    .plant{
      position:absolute;
      right:-75px;bottom:15px;
      width:180px;height:230px;
      opacity:.72;
      filter:blur(.2px);
    }
    .leaf{
      position:absolute;width:80px;height:34px;background:#76a837;
      border-radius:80% 10% 80% 10%;transform-origin:left center;
      box-shadow:0 10px 20px rgba(72,108,28,.16);
    }
    .leaf:nth-child(1){top:70px;left:35px;transform:rotate(-35deg)}
    .leaf:nth-child(2){top:105px;left:70px;transform:rotate(22deg)}
    .leaf:nth-child(3){top:145px;left:25px;transform:rotate(-16deg)}
    .leaf:nth-child(4){top:185px;left:65px;transform:rotate(28deg)}

    /* SECTIONS */
    .section{padding:32px 0}
    .section-soft{background:linear-gradient(#fbfdff,#f4f8fd)}
    .cards-3{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:24px;
    }
    .service-card{
      padding:28px 26px 22px;
      border:1px solid var(--line);
      border-radius:18px;
      background:#fff;
      text-align:center;
      box-shadow:var(--shadow);
      transition:.25s ease;
    }
    .service-card:hover{transform:translateY(-6px)}
    .icon-circle{
      width:72px;height:72px;margin:0 auto 14px;border-radius:50%;
      display:grid;place-items:center;background:var(--blue-soft);
      color:var(--blue);font-size:34px;
    }
    .service-card h3{margin:0 0 8px;color:var(--blue-dark);font-size:22px}
    .service-card p{margin:0 0 20px;color:var(--muted);font-size:14px}
    .mini-btn{
      display:inline-flex;gap:10px;align-items:center;
      background:var(--blue);color:#fff;font-weight:800;
      padding:10px 18px;border-radius:7px;font-size:13px;
    }

    .fault-grid{
      display:grid;grid-template-columns:1fr 1fr;gap:22px;
    }
    .fault-card{
      min-height:350px;
      border:1px solid #b8d0ef;
      border-radius:18px;
      background:linear-gradient(120deg,#f7fbff,#eaf3ff);
      padding:28px;
      position:relative;
      overflow:hidden;
    }
    .fault-card h2{margin:0 0 10px;color:var(--blue-dark);font-size:28px}
    .fault-card p{max-width:58%;color:#3d4a5d;font-size:15px}
    .fault-art{
      position:absolute;right:0;bottom:0;width:47%;height:100%;
      display:grid;place-items:center;
    }
    .fault-device{
      width:150px;height:220px;border-radius:15px;
      background:linear-gradient(145deg,#fff,#d9e1ea);
      box-shadow:0 15px 30px rgba(25,61,102,.18);
      position:relative;
    }
    .fault-display{
      position:absolute;top:82px;left:23px;
      width:104px;height:60px;border-radius:10px;
      background:#111923;color:#66c4ff;
      display:grid;place-items:center;font:700 31px monospace;
    }
    .feature-mini{
      display:flex;gap:16px;flex-wrap:wrap;margin:32px 0 24px;
      max-width:60%;
    }
    .feature-mini span{
      flex:1;min-width:110px;color:var(--blue-dark);
      font-size:12px;font-weight:800;text-align:center;
    }

    .trust-grid{
      display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
    }
    .trust-card{
      background:#fff;border:1px solid var(--line);border-radius:16px;
      padding:20px;display:flex;align-items:center;gap:14px;
    }
    .trust-card b{display:block;font-size:15px}
    .trust-card small{color:var(--muted)}

    .emergency{
      margin-top:10px;
      background:linear-gradient(90deg,#073b94,#0756cf);
      color:#fff;
    }
    .emergency-inner{
      min-height:132px;display:grid;grid-template-columns:1.2fr 1fr 1fr;
      align-items:center;gap:28px;
    }
    .emergency-main{display:flex;align-items:center;gap:20px}
    .emergency-icon{
      width:76px;height:76px;border:2px solid #fff;border-radius:50%;
      display:grid;place-items:center;font-size:34px;
    }
    .emergency h2{margin:0;font-size:26px}
    .emergency p{margin:3px 0 0;color:#dfeaff;font-size:14px}
    .emergency-phone{
      border-left:1px solid rgba(255,255,255,.5);
      padding-left:30px;
    }
    .emergency-phone small{display:block}
    .emergency-phone strong{font-size:26px}

    footer{background:#fff}
    .footer-main{
      padding:46px 0;
      display:grid;
      grid-template-columns:1.25fr 1fr 1fr 1fr;
      gap:44px;
    }
    .footer-main h4{margin:0 0 14px;font-size:14px}
    .footer-main p,.footer-main li{color:#4d5968;font-size:14px}
    .footer-main ul{list-style:none;padding:0;margin:0}
    .footer-main li{margin:9px 0}
    .socials{display:flex;gap:10px;margin-top:18px}
    .socials a{
      width:34px;height:34px;border-radius:50%;background:#4c545e;color:#fff;
      display:grid;place-items:center;font-size:13px;font-weight:900;
    }
    .footer-bottom{
      background:#444d59;color:#fff;
      padding:18px 0;font-size:13px;
    }
    .footer-bottom .container{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

    @media (max-width:980px){
      .menu-toggle{display:block}
      .nav{
        display:none;position:absolute;top:82px;left:0;right:0;
        background:#fff;padding:20px;box-shadow:var(--shadow);
        flex-direction:column;gap:0;align-items:flex-start;
      }
      .nav.open{display:flex}
      .nav a{padding:13px 0;width:100%}
      .nav a.active:after{bottom:5px}
      .hero-grid{grid-template-columns:1fr;min-height:auto;padding:75px 0 30px}
      .boiler-stage{min-height:480px}
      .cards-3,.trust-grid{grid-template-columns:repeat(2,1fr)}
      .fault-grid{grid-template-columns:1fr}
      .emergency-inner{grid-template-columns:1fr}
      .emergency{padding:28px 0}
      .emergency-phone{border-left:0;border-top:1px solid rgba(255,255,255,.35);padding:18px 0 0}
      .footer-main{grid-template-columns:repeat(2,1fr)}
    }

    @media (max-width:640px){
      .container{width:min(100% - 26px,1180px)}
      .brand strong{font-size:24px}
      .brand span{font-size:14px}
      .eyebrow{font-size:34px}
      h1{font-size:50px;letter-spacing:-2.5px}
      .hero-text{font-size:17px}
      .phones{gap:15px}
      .phone-item{border-right:0;padding-right:0;width:100%}
      .phone-item strong{font-size:20px}
      .cta-row .btn{width:100%}
      .boiler-stage{min-height:420px}
      .boiler{height:400px;width:290px}
      .boiler-logo{top:175px}
      .control{bottom:45px}
      .pipes{bottom:-110px}
      .cards-3,.trust-grid,.footer-main{grid-template-columns:1fr}
      .fault-card{padding:24px;min-height:470px}
      .fault-card p,.feature-mini{max-width:100%}
      .fault-art{width:100%;height:210px;bottom:0}
      .fault-device{width:120px;height:170px}
      .fault-display{top:62px;left:18px;width:84px;height:52px}
      .emergency-main{align-items:flex-start}
      .emergency-phone strong{font-size:22px}
    }