.solution { position: relative; min-height: 100vh; overflow: hidden; }


  .bg-images img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .6s ease;
  }
  .bg-images img.active { opacity: 1; }

  .solution::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 45%, transparent 70%);
    pointer-events: none;
    z-index: 1;
  }

  .solution-inner {
    position: relative; z-index: 2;
    display: flex;
    min-height: 100vh;
  }

  .field-nav {
    flex: 1;
    padding: 60px 0 0 60px;
    align-self: flex-start;
  }
  .field-nav button {
    display: block;
    text-align: left;
    color: rgba(255,255,255,.9);
    font-size: 14px;
    padding: 14px 0 14px 16px;
    position: relative;
    transition: color .3s, font-size .3s;
    -webkit-tap-highlight-color: transparent;
  }
  .field-nav button::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 2px; height: 0;
    background: #fff;
    transition: height .3s;
  }
  .field-nav button.active {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
  }
  .field-nav button.active::before { height: 22px; }


  .panel {
    width: 40%;
    max-width: 560px;
    padding: 60px 56px;
    background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(1.25rem);
    -webkit-backdrop-filter: blur(16px);
    border-left: 1px solid rgba(255,255,255,.08);
    color: #fff;
  }
  .panel h2 {
    font-size: clamp(24px, 2.6vw, 38px);
    font-weight: 600;
    line-height: 1.6;
    margin-bottom: 28px;
  }
  .panel .intro {
    color: rgba(255,255,255,.72);
    font-size: 14px;
    line-height: 1.9;
    margin-bottom: 56px;
  }


  .field-item { display: none; }
  .field-item.active { display: block; animation: fadeUp .45s ease; }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }
  .field-icon { width: 52px; height: 52px; margin-bottom: 24px; }
  .field-icon svg { width: 100%; height: 100%; }
  .field-title { font-size: 28px; font-weight: 600; margin-bottom: 18px; }
  .field-desc {
    color: rgba(255,255,255,.9);
    font-size: 14px;
    line-height: 1.9;
    margin-bottom: 56px;
  }

  .btn_solu-more {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: #fff;
    font-size: 14px;
    height: 48px;
    padding: 0 28px;
    border: 1px solid rgba(255,255,255,.35);
    transition: background .3s;
  }
  .btn_solu-more:hover { background: rgba(255,255,255,.12); }
  .btn_solu-more .divider {
    width: 1px; height: 16px;
    background: rgba(255,255,255,.5);
    margin: 0 16px;
  }
  .btn_solu-more svg { width: 13px; height: 13px; }
  .btn_solu-more::before, .btn_solu-more::after,
  .btn_solu-more .ck::before, .btn_solu-more .ck::after {
    content: "";
    position: absolute;
    width: 10px; height: 10px;
    border: 0 solid #fff;
  }
  .btn_solu-more::before   { top: -5px; left: -5px;  border-width: 1px 0 0 1px; }
  .btn_solu-more::after    { top: -5px; right: -5px; border-width: 1px 1px 0 0; }
  .btn_solu-more .ck::before { bottom: -5px; left: -5px;  border-width: 0 0 1px 1px; }
  .btn_solu-more .ck::after  { bottom: -5px; right: -5px; border-width: 0 1px 1px 0; }


  @media (max-width: 992px) {
    .solution, .solution-inner { min-height: auto; }
    .solution-inner { flex-direction: column; }
    .field-nav {
		display: inline-block;
      /*display: flex;*/
      flex-wrap: wrap;
      gap: 4px;
      padding: 32px 16px 20px;
    }
    .field-nav button { padding: 10px 14px; font-size: 14px; }
    .field-nav button.active { font-size: 16px; }
    .panel { width: 100%; max-width: none; padding: 36px 20px 44px; }
    .panel .intro { margin-bottom: 36px; }
    .field-desc { margin-bottom: 36px; }
  }
  
  
  
  
  .gallery_solut {
      max-width: 16.4rem;
      margin: 0 auto;
      padding: 24px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }

    .card_solut {
      background: #fff;
      /*border-radius: 8px;*/
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,.08);
      transition: transform .25s ease, box-shadow .25s ease;
    }
    .card_solut:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 20px rgba(0,0,0,.12);
    }

    .card_solut img {
      display: block;
      width: 100%;
      aspect-ratio: 3 / 2;   
      object-fit: cover;
      background: #eee;
    }

    .card_solut figcaption {
      padding: 14px 10px;
      text-align: center;
      font-weight: 700;
      font-size: 16px;
    }
.card_solut:hover figcaption{ color:var(--color-active);}
    @media (max-width: 1200px) {
      .gallery_solut { grid-template-columns: repeat(3, 1fr); }
    }

    @media (max-width: 900px) {
      .gallery_solut { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 560px) {
      .gallery_solut { grid-template-columns: 1fr; padding: 14px; gap: 14px; }
      .card_solut figcaption { font-size: 14px; padding: 12px 8px; }
      .page-header h1 { font-size: 20px; }
    }