:root{
      --bg-1:#070707;
      --bg-2:#0f0f10;
      --card:#0f0f10;
      /* --accent:#FF2E1A; яркий красный */
      --accent:#BB2113; /* яркий красный */
      --accent-soft:rgba(255,46,26,0.12);
      --muted:#bdbdbd;
      --glass:rgba(255,255,255,0.03);
      --glass-2:rgba(255,46,26,0.06);
      --radius:14px;
      --max-width:1180px;
    }

    *{box-sizing:border-box}
    html,body{
        /* height:100%; */
        margin:0;
        padding:0;}

    body{
      margin:0;
      font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
      background: radial-gradient(1200px 600px at 10% 10%, rgba(255,46,26,0.02), transparent 5%),
                  linear-gradient(180deg,var(--bg-1),var(--bg-2));
      color:#fff;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.5;
      overflow-x: hidden; /* предотвращение горизонтального скролла */
    }

    .wrap{
      max-width:var(--max-width);
      margin:40px auto;
      padding:36px;
      width: 100%; /* резиновая ширина */
    }

    /* Card layout */
    .card{
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      border:1px solid rgba(255,255,255,0.03);
      border-radius:20px;
      padding:48px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.6), 0 2px 0 rgba(255,46,26,0.02) inset;
      backdrop-filter: blur(6px);
      width: 100%; /* резиновая ширина */
    }

    /* Hero */
    .hero{
      min-height:56vh;
      display:grid;
      grid-template-columns:1fr 380px;
      gap:40px;
      align-items:center;
    }

    .brand{display:flex;flex-direction:column;gap:8px}

    .logo{
      font-weight:900;
      font-size:clamp(52px, 8vw, 88px); /* адаптивный размер шрифта */
      letter-spacing:0.08em; /* относительные единицы */
      color:var(--accent);
      text-shadow: 0 6px 30px rgba(255,46,26,0.18), 0 0 18px rgba(255,46,26,0.06);
      margin-bottom:6px;
      transform-origin:center left;
      animation:glow 3s ease-in-out infinite;
    }

    @keyframes glow{
      0%,100%{filter:brightness(1);text-shadow: 0 6px 30px rgba(255,46,26,0.14), 0 0 12px rgba(255,46,26,0.04)}
      50%{filter:brightness(1.06);text-shadow: 0 10px 40px rgba(255,46,26,0.22), 0 0 20px rgba(255,46,26,0.06)}
    }

    .tagline{
      font-weight:300;
      font-size:clamp(16px, 2vw, 20px); /* адаптивный размер */
      color:var(--muted);
    }

    .meta{
      margin-top:18px;
      font-size:clamp(16px, 1.8vw, 18px);
      color:var(--muted);
    }

    /* Quick contact card */
    .contact-card{
      background:linear-gradient(180deg,var(--glass),var(--glass-2));
      border-radius:16px;
      padding:22px;
      border:1px solid rgba(255,255,255,0.04);
      width: 100%; /* резиновая ширина */
    }

    .contact-title{
      font-weight:700;
      color:var(--accent);
      font-size:clamp(18px, 2vw, 20px);
      margin-bottom:8px;
    }

    .contact-list{
      font-size:clamp(14px, 1.5vw, 15px);
      color:var(--muted);
      line-height:1.6;
    }

    .btn{
      display:inline-block;
      padding:10px 16px;
      border-radius:10px;
      font-weight:700;
      text-decoration:none;
      border:1px solid rgba(255,46,26,0.18);
      background:linear-gradient(180deg, rgba(255,46,26,0.12), rgba(255,46,26,0.06));
      color:var(--accent);
      font-size:clamp(13px, 1.4vw, 15px); /* адаптивный размер кнопок */
      white-space: nowrap; /* предотвращение переноса текста в кнопках */
    }

    /* Sections */
    section{
      margin:36px 0;
      padding:28px 0;
      border-top:1px solid rgba(255,46,26,0.03);
    }

    .section-title{
      font-size:clamp(22px, 3vw, 28px); /* адаптивный размер заголовков */
      color:var(--accent);
      font-weight:700;
      margin-bottom:14px;
      word-wrap: break-word; /* перенос длинных слов */
    }

    .text{
      color:var(--muted);
      font-size:clamp(14px, 1.6vw, 16px);
      line-height:1.7; /* улучшенная читаемость */
    }

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

    /* Stat box */
    .stat-box{
      display:inline-block;
      padding:22px;
      border-radius:14px;
      background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      border:1px solid rgba(255,255,255,0.03);
      width: 100%; /* резиновая ширина */
      max-width: 300px; /* ограничение максимальной ширины */
    }

    .stat-number{
      color:var(--accent);
      font-weight:800;
      font-size:clamp(32px, 4vw, 40px);
    }

    .stat-text{
      color:var(--muted);
      font-size:clamp(12px, 1.4vw, 14px);
    }

    /* Guarantees grid */
    .grid-3{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); /* автоматическая адаптация */
      gap:22px;
    }

    .card-mini{
      background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
      padding:20px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,0.03);
      transition:transform .28s ease, box-shadow .28s ease;
      width: 100%; /* резиновая ширина */
    }

    .card-mini:hover{
      transform:translateY(-8px);
      box-shadow:0 20px 50px rgba(255,46,26,0.06),0 2px 0 rgba(255,46,26,0.03) inset;
    }

    .card-mini .mini-title{
      font-weight:700;
      color:var(--accent);
      margin-bottom:6px;
      font-size:clamp(15px, 1.8vw, 17px);
    }

    .card-mini .mini-text{
      color:var(--muted);
      font-size:clamp(13px, 1.4vw, 14px);
    }

    /* Quality & Experience cards */
    .cards-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); /* автоматическая адаптация */
      gap:18px;
    }

    .experience-card{
      padding:18px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,0.03);
      background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
      width: 100%; /* резиновая ширина */
    }

    .card-number{
      font-weight:800;
      color:var(--accent);
      font-size:clamp(24px, 3vw, 28px);
    }

    /* Small helpers */
    .note{
      display:inline-block;
      padding:12px 14px;
      border-left:4px solid var(--accent);
      background:linear-gradient(90deg, rgba(255,46,26,0.02), transparent);
      border-radius:8px;
      color:var(--muted);
      font-size:clamp(13px, 1.5vw, 15px);
      max-width: 100%; /* предотвращение выхода за границы */
      word-wrap: break-word;
    }

    /* Images wrapper */
    .img-wrap {
      display: flex;
      justify-content: center;
      gap: 16px;
      flex-wrap: wrap; /* перенос на малых экранах */
      padding: 8px;
      text-align: center;
      width: 100%;
    }

    .img-wrap img {
      max-width: 100%; /* не выходить за границы контейнера */
      height: auto; /* сохранять пропорции */
      max-height: 250px;
      display: block;
      object-fit: contain; /* сохранение пропорций изображения */
    }

    /* reveal animations */
    .reveal{
      opacity:0;
      transform:translateY(20px);
      transition:opacity .6s ease, transform .6s ease;
    }

    .reveal.visible{
      opacity:1;
      transform:none;
    }

    /* footer */
    footer{
      margin-top:40px;
      padding:28px 0;
      text-align:center;
      color:var(--muted);
      font-size:clamp(12px, 1.4vw, 14px);
    }

    /* Responsive breakpoints */

    /* Tablet - landscape and smaller desktops */
    @media (max-width:1200px){
      .wrap{
        padding:24px;
        margin:20px auto;
      }
      .card{
        padding:36px;
      }
    }

    /* Tablet - portrait */
    @media (max-width:1000px){
      .hero{
        grid-template-columns:1fr; /* однокол layout */
      }
      .two-col{
        grid-template-columns:1fr;
      }
      .cards-grid{
        grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
      }
      .card{
        padding:28px;
      }
    }

    /* Mobile - large */
    @media (max-width:768px){
      .wrap{
        padding:16px;
        margin:10px auto;
      }
      .card{
        padding:24px;
        border-radius:16px;
      }
      .hero{
        min-height:auto; /* убираем фиксированную высоту */
        gap:24px;
      }
      .grid-3{
        grid-template-columns:1fr; /* одна колонка на мобильных */
      }
      .cards-grid{
        grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
      }
      .img-wrap{
        gap:12px;
      }
      .img-wrap img{
        max-height: 200px; /* уменьшаем высоту изображений */
      }
      section{
        margin:24px 0;
        padding:20px 0;
      }
    }

    /* Mobile - standard */
    @media (max-width:600px){
      .wrap{
        padding:12px;
        margin:5px auto;
      }
      .card{
        padding:20px;
      }
      .logo{
        letter-spacing:0.06em; /* уменьшаем межбуквенное расстояние */
      }
      .btn{
        padding:8px 12px;
        font-size:13px;
      }
      .cards-grid{
        grid-template-columns:1fr; /* одна колонка */
        gap:12px;
      }
      .grid-3{
        gap:16px;
      }
      .img-wrap img{
        max-height: 180px;
      }
    }

    /* Mobile - small */
    @media (max-width:480px){
      .wrap{
        padding:8px;
      }
      .card{
        padding:16px;
        border-radius:12px;
      }
      .hero{
        gap:16px;
      }
      .contact-card{
        padding:16px;
      }
      .img-wrap{
        gap:8px;
      }
      .img-wrap img{
        max-height: 150px; /* еще меньше на маленьких экранах */
      }
      section{
        margin:16px 0;
        padding:16px 0;
      }
    }