*{
      margin:0;
      padding:0;
      box-sizing:border-box;
      text-decoration:none;
    }

    html,
    body{
      width:100%;
      overflow-x:hidden;

      font-family:
      "Century Gothic",
      CenturyGothic,
      AppleGothic,
      sans-serif;

      background:#071b33;
    }

    body{
      min-height:100vh;
    }


    /* ======================================
       ABOUT
    ====================================== */
    .feature-about {
        padding: 24px;
        color: #fff;
        background: rgba(0,0,0,.30);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,.18);
    }

    .feature-about ul {
      margin: 10px 0 10px 18px;
    }

    .features-about {
      position: relative;
      width: 100%;
      z-index: 25;
      padding: 0 30px;
      margin-top: 110px;
    }

    /* ======================================
       PHONE
    ====================================== */

    .phone{
      color:#fff;
      font-size:x-large;
      white-space:nowrap;
    }

    .phone-block{
      border-left:1px solid rgba(255,255,255,.35);
      margin-left:10px;
      padding-left:14px;
    }

    /* ======================================
       CALLBACK BUTTON
    ====================================== */

    .callback-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;

      margin-left:14px;
      padding:12px 18px;

      color:#04111f;
      font-size:15px;
      font-weight:700;
      white-space:nowrap;

      background:#00b7ff;
      border:1px solid rgba(255,255,255,.25);
      border-radius:12px;
      cursor:pointer;

      box-shadow:0 10px 24px rgba(0,183,255,.25);

      transition:
        transform .25s,
        background .25s,
        box-shadow .25s;
    }

    .callback-btn:hover{
      transform:translateY(-1px);
      background:#40caff;
      box-shadow:0 14px 30px rgba(0,183,255,.35);
    }

    .mobile-callback-btn{
      width:100%;
      margin:16px 0 0;
    }

    /* ======================================
       HERO
    ====================================== */

    .hero-banner{
      position:relative;

      width:100%;
      height:100svh;
      min-height:100svh;

      overflow:hidden;

      background:
      linear-gradient(
        135deg,
        #04111f 0%,
        #0b2f52 50%,
        #04111f 100%
      );
    }

    /* ======================================
       HEADER
    ====================================== */

    .top-bar{
      position:absolute;
      top:0;
      left:0;

      width:100%;
      height:82px;

      display:flex;
      align-items:center;
      justify-content:space-between;

      padding:0 28px;

      z-index:30;

      background:rgba(0,0,0,.30);

      backdrop-filter:blur(10px);

      border-bottom:
      1px solid rgba(255,255,255,.08);
    }

    /* ======================================
       LOGO
    ====================================== */

    .logo{
      display:flex;
      align-items:center;
      gap:14px;
      flex-shrink:0;
    }

    .logo img{
      display:block;

      width:auto;
      height:46px;

      object-fit:contain;

      filter:
      drop-shadow(0 0 14px rgba(0,183,255,.35));
    }

    /* ======================================
       NAV
    ====================================== */

    .nav{
      display:flex;
      align-items:center;
      gap:6px;
      margin:0 auto;
      padding:0 20px;
    }

    .nav a{
      color:rgba(255,255,255,.85);
      font-size:16px;
      font-weight:600;
      white-space:nowrap;
      padding:8px 16px;
      border-radius:10px;
      border:1px solid transparent;

      transition:
        color .25s,
        background .25s,
        border-color .25s;
    }

    .nav a:hover{
      color:#fff;
      background:rgba(255,255,255,.10);
      border-color:rgba(255,255,255,.18);
    }

    .nav a.active{
      color:#00b7ff;
      background:rgba(0,183,255,.10);
      border-color:rgba(0,183,255,.30);
    }

    /* ======================================
       HEADER RIGHT
    ====================================== */

    .top-bar-right{
      display:flex;
      align-items:center;
      flex-shrink:0;
    }

    /* ======================================
       BURGER
    ====================================== */

    .burger{
      display:none;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      gap:5px;

      width:40px;
      height:40px;

      background:none;
      border:none;
      cursor:pointer;

      padding:4px;
      margin-left:10px;

      z-index:50;
    }

    .burger span{
      display:block;
      width:24px;
      height:2px;
      background:#fff;
      border-radius:2px;

      transition:
        transform .3s,
        opacity .3s;
    }

    .burger.open span:nth-child(1){
      transform:translateY(7px) rotate(45deg);
    }

    .burger.open span:nth-child(2){
      opacity:0;
    }

    .burger.open span:nth-child(3){
      transform:translateY(-7px) rotate(-45deg);
    }

    /* ======================================
       MOBILE MENU DRAWER
    ====================================== */

    .mobile-menu{
      position:fixed;
      top:0;
      right:0;

      width:260px;
      height:100%;

      background:rgba(4,17,31,.97);
      backdrop-filter:blur(16px);

      border-left:1px solid rgba(255,255,255,.10);

      z-index:45;

      display:flex;
      flex-direction:column;
      align-items:flex-start;

      padding:100px 24px 40px;

      gap:8px;

      transform:translateX(100%);
      transition:transform .35s cubic-bezier(.4,0,.2,1);
    }

    .mobile-menu.open{
      transform:translateX(0);
    }

    .mobile-menu a{
      color:rgba(255,255,255,.85);
      font-size:18px;
      font-weight:600;
      padding:12px 16px;
      border-radius:12px;
      width:100%;
      border:1px solid transparent;

      transition:
        color .25s,
        background .25s,
        border-color .25s;
    }

    .mobile-menu a:hover{
      color:#fff;
      background:rgba(255,255,255,.10);
      border-color:rgba(255,255,255,.18);
    }

    .mobile-menu a.active{
      color:#00b7ff;
      background:rgba(0,183,255,.10);
      border-color:rgba(0,183,255,.30);
    }

    /* MOBILE MENU PHONE */

    .mobile-menu .mobile-phone{
      margin-top:auto;
      padding-top:24px;
      border-top:1px solid rgba(255,255,255,.12);
      width:100%;
    }

    .mobile-menu .mobile-phone a{
      color:#00b7ff;
      font-size:17px;
      border:none;
      padding-left:0;
    }

    /* OVERLAY FOR MOBILE MENU */

    .menu-overlay{
      position:fixed;
      inset:0;

      background:rgba(0,0,0,.55);
      backdrop-filter:blur(2px);

      z-index:40;

      opacity:0;
      pointer-events:none;

      transition:opacity .35s;
    }

    .menu-overlay.open{
      opacity:1;
      pointer-events:all;
    }

    /* ======================================
       IMAGE
    ====================================== */

    .banner-image{
      position:absolute;
      inset:0;

      width:100%;
      height:100%;

      object-fit:cover;
      object-position:center center;

      filter:
        contrast(1.05)
        saturate(1.08)
        brightness(1.02);

      z-index:1;
    }

    /* ======================================
       OVERLAY
    ====================================== */

    .overlay{
      position:absolute;
      inset:0;

      z-index:2;

      background:
      linear-gradient(
        to bottom,
        rgba(0,0,0,.18),
        rgba(0,0,0,.48)
      );
    }

    /* ======================================
       GLOW EFFECT
    ====================================== */

    .glow{
      position:absolute;

      width:550px;
      height:550px;

      border-radius:50%;

      background:
      rgba(0,153,255,.16);

      filter:blur(120px);

      z-index:3;

      pointer-events:none;
    }

    .glow.left{
      left:-220px;
      bottom:-220px;
    }

    .glow.right{
      right:-220px;
      top:-220px;
    }

    /* ======================================
       STATIC FEATURES
    ====================================== */

    .features-wrapper{
      position:absolute;

      left:0;
      bottom:34px;

      width:100%;

      z-index:25;

      padding:0 30px;
    }

    .features-track{
      display:flex;
      flex-wrap:wrap;
      gap:20px;

      justify-content:center;

      width:100%;
    }

    /* ======================================
       CARD
    ====================================== */

    .feature-card{

      flex:0 0 auto;

      min-width:200px;
      min-height:110px;

      display:flex;
      align-items:center;
      justify-content:center;

      text-align:center;

      padding:24px;

      color:#fff;

      font-size:24px;
      line-height:1.35;
      font-weight:700;

      background:rgba(0,0,0,.30);

      backdrop-filter:blur(10px);

      border:
      1px solid rgba(255,255,255,.08);

      border-radius:20px;

      box-shadow:
      0 10px 30px rgba(0,0,0,.18);
    }

    /* ======================================
       CALLBACK MODAL
    ====================================== */

    .callback-modal{
      position:fixed;
      inset:0;
      z-index:100;

      display:flex;
      align-items:center;
      justify-content:center;

      padding:20px;

      opacity:0;
      pointer-events:none;

      background:rgba(0,0,0,.66);
      backdrop-filter:blur(5px);

      transition:opacity .3s;
    }

    .callback-modal.open{
      opacity:1;
      pointer-events:all;
    }

    .callback-form{
      position:relative;

      width:100%;
      max-width:430px;

      padding:34px;

      color:#fff;

      background:rgba(4,17,31,.96);
      border:1px solid rgba(255,255,255,.12);
      border-radius:24px;

      box-shadow:0 24px 80px rgba(0,0,0,.45);
    }

    .callback-form h2{
      margin-bottom:10px;
      font-size:28px;
      line-height:1.2;
    }
    .privacy p{
      font-size:10px;
    }

    .callback-form p{
      margin-bottom:24px;
      color:rgba(255,255,255,.72);
      font-size:15px;
      line-height:1.5;
    }

    .form-group{
      margin-bottom:16px;
    }

    .form-group label{
      display:block;
      margin-bottom:8px;
      color:rgba(255,255,255,.82);
      font-size:14px;
      font-weight:600;
    }

    .form-group input{
      width:100%;
      height:48px;

      padding:0 14px;

      color:#fff;
      font-size:16px;

      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.16);
      border-radius:12px;
      outline:none;

      transition:
        border-color .25s,
        background .25s;
    }

    .form-group input:focus{
      background:rgba(255,255,255,.11);
      border-color:#00b7ff;
    }

    .form-group.error input{
      border-color:#ff5c7a;
    }

    .error-message{
      display:block;
      min-height:18px;
      margin-top:6px;
      color:#ff8da1;
      font-size:13px;
    }

    .form-submit{
      width:100%;
      height:50px;

      margin-top:6px;

      color:#04111f;
      font-size:16px;
      font-weight:800;

      background:#00b7ff;
      border:none;
      border-radius:14px;
      cursor:pointer;

      transition:
        background .25s,
        transform .25s;
    }

    .form-submit:hover{
      background:#40caff;
      transform:translateY(-1px);
    }

    .form-success{
      display:none;
      margin-top:16px;
      color:#73e6a1;
      font-size:15px;
      line-height:1.4;
      text-align:center;
    }

    .form-success.show{
      display:block;
    }

    .modal-close{
      position:absolute;
      top:14px;
      right:14px;

      width:36px;
      height:36px;

      color:#fff;
      font-size:26px;
      line-height:1;

      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
      border-radius:50%;
      cursor:pointer;
    }

    /* ======================================
       LAPTOP
    ====================================== */

    @media (max-width:1200px){

      .top-bar{
        height:76px;
        padding:0 22px;
      }

      .logo img{
        height:40px;
      }

      .nav a{
        font-size:15px;
        padding:7px 13px;
      }

      .feature-card{
        font-size:20px;
        min-height:100px;
      }
    }

    /* ======================================
       TABLET
    ====================================== */

    @media (max-width:992px){

      .top-bar{
        height:72px;
        padding:0 18px;
      }

      .logo img{
        height:36px;
      }

      .nav{
        display:none;
      }

      .burger{
        display:flex;
      }

      .phone{
        font-size:18px;
      }

      .top-bar-right .callback-btn{
        display:none;
      }

      .banner-image{
        object-position:60% center;
      }

      .feature-card{
        font-size:18px;
        padding:20px;
      }

      .glow{
        width:420px;
        height:420px;
      }
    }

    /* ======================================
       MOBILE
    ====================================== */

    @media (max-width:768px){

      html,
      body{
        height:100%;
      }

      .hero-banner{
        height:100dvh;
        min-height:100dvh;
      }

      .top-bar{
        height:64px;
        padding:0 14px;
      }

      .logo img{
        height:32px;
      }

      .phone{
        font-size:16px;
      }

      .banner-image{
        object-position:64% center;
        transform:scale(1.08);
      }

      .features-wrapper{
        bottom:20px;
        padding:0 14px;
      }

      .features-track{
        gap:14px;
      }

      .feature-card{
        min-height:95px;
        font-size:18px;
        padding:18px;
      }

      .glow{
        width:280px;
        height:280px;

        filter:blur(80px);
      }

      .glow.left{
        left:-90px;
        bottom:-90px;
      }

      .glow.right{
        right:-90px;
        top:-90px;
      }

      .callback-form{
        padding:28px 22px;
      }

      .callback-form h2{
        font-size:24px;
      }
    }

    /* ======================================
       SMALL MOBILE
    ====================================== */

    @media (max-width:480px){

      .top-bar{
        height:58px;
        padding:0 12px;
      }

      .logo img{
        height:28px;
      }

      .phone{
        font-size:13px;
      }

      .banner-image{
        object-position:50% center;
        transform:scale(1.14);
      }

      .features-wrapper{
        bottom:14px;
        padding:0 12px;
      }

      .features-track{
        gap:12px;
      }

      .feature-card{
        min-height:88px;
        font-size:16px;
        line-height:1.3;
        border-radius:18px;
      }
    }


/* PolusWater — стили в духе текущего макета (glass/dark + акцент небесно‑голубой) */
:root{
  --accent: #21b4e8;         /* цвет логотипа/кнопок */
  --accent-2: #0ea5d5;       /* второй оттенок для подсветок */
  --glass: rgba(16, 21, 29, .55);
  --glass-strong: rgba(16, 21, 29, .7);
  --text: #eaf4fb;
  --text-muted: #b9cadd;
}

.about-company {
    padding: 120px 20px;
    position: relative;
    z-index: 25;
}

.about-company__inner{
  max-width: 1200px;
  margin: 0 auto;
}

/* Стеклянная карточка секции */
.about-company__content{
  position: relative;
  padding: 48px;
  border-radius: 22px;
  color: var(--text);
  background:
    linear-gradient(180deg, var(--glass-strong), rgba(12,16,22,.6)),
    radial-gradient(120% 180% at 0% 0%, rgba(33,180,232,.08), rgba(33,180,232,0) 40%);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    0 20px 60px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.about-company p {
  font-size: 14px;
}

/* Заголовок — чистый белый с лёгким свечением */
.about-company__title{
  margin: 0 0 20px;  
  line-height: 1.15;
  font-weight: 800;
  color: #f5fbff;
  text-shadow: 0 2px 18px rgba(33,180,232,.12);
}

/* Вводный абзац чуть крупнее */
.about-company__lead{
  margin: 0 0 22px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--text);
}

.about-company p{
  margin: 0 0 16px;
  color: var(--text-muted);
  line-height: 1.75;
}

/* Блок направлений — сетка «пилюль», как на скриншоте внизу героя */
.about-company__directions{
  margin: 34px 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.about-company__directions h3{
  margin: 0 0 18px;
  font-size: 22px;
  color: #e7f5ff;
  font-weight: 700;
}

.about-company__directions ul{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Плитка-направление: стеклянная тёмная капсула с подсветкой */
.about-company__directions li{
  display: flex;
  align-items: center;
  min-height: 60px;
  padding: 17px 17px;
  border-radius: 20px;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .2px;
  background:
    linear-gradient(180deg, rgba(18,24,33,.76), rgba(12,16,22,.72)),
    radial-gradient(120% 180% at 0% 0%, rgba(33,180,232,.10), rgba(33,180,232,0) 45%);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    0 14px 40px rgba(0,0,0,.45),
    0 6px 24px rgba(33,180,232,.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  cursor: default; /* поменяйте на pointer, если это ссылки */
}

/* Светящийся маркер слева */
.about-company__directions li::before{
  content: "";
  width: 12px;
  height: 12px;
  margin-right: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #9beaff, var(--accent));
  box-shadow:
    0 0 0 4px rgba(33,180,232,.12),
    0 0 14px rgba(33,180,232,.6);
  flex: 0 0 12px;
}

/* Ховер — лёгкий подъём и усиление свечения */
.about-company__directions li:hover{
  transform: translateY(-4px);
  border-color: rgba(33,180,232,.4);
  box-shadow:
    0 22px 62px rgba(0,0,0,.55),
    0 10px 36px rgba(33,180,232,.18);
  background:
    linear-gradient(180deg, rgba(20,28,40,.82), rgba(14,20,30,.78)),
    radial-gradient(120% 180% at 0% 0%, rgba(33,180,232,.14), rgba(33,180,232,0) 48%);
}

/* Адаптив */
@media (max-width: 1200px){
  .about-company__directions ul{ grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 992px){
  /*.about-company{ padding: 56px 16px; }*/
  .about-company__content {
        padding: 36px 26px;
        height: 100%;
        max-height: 500px;
        overflow: auto;
      }
  .about-company__directions ul{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px){
  .about-company__title{ font-size: 34px; }
  .about-company__lead{ font-size: 18px; }
  .about-company__directions ul{ grid-template-columns: repeat(2, 1fr); }
  .about-company__directions li{ min-height: 72px; padding: 18px 20px; }
}
@media (max-width: 480px){
  .about-company__directions ul{ grid-template-columns: 1fr; }
}