:root{
    --wand:#ACB2C3;
    --week:#8DBB8D;
    --blue:#526FAE;
    --shade:#676061;
    --red:#B10C2A;
    --black:#30303A;
    --white:#ffffff;
    --soft:#f7f7f4;
  }

  .vitrier-services-section{
    position:relative;
    padding:110px 0;
    background:
      linear-gradient(135deg, rgba(255,255,255,.96), rgba(247,247,244,.96));
    overflow:hidden;
  }

  .vitrier-services-section::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(circle at 8% 18%, rgba(172,178,195,.38), transparent 25%),
      radial-gradient(circle at 90% 12%, rgba(82,111,174,.20), transparent 24%),
      radial-gradient(circle at 80% 85%, rgba(177,12,42,.10), transparent 30%);
    pointer-events:none;
  }

  .vitrier-services-section::after{
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:0;
    height:0;
    border-top:76px solid var(--red);
    border-left:76px solid transparent;
    z-index:1;
  }

  .vitrier-intro-card{
    position:relative;
    z-index:2;
    background:var(--black);
    color:#fff;
    padding:44px;
    min-height:100%;
    box-shadow:0 30px 70px rgba(48,48,58,.24);
    overflow:hidden;
  }

  .vitrier-intro-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      linear-gradient(90deg, rgba(48,48,58,.92), rgba(48,48,58,.70)),
      url('/assets/images/section.webp') center/cover no-repeat;
    opacity:.9;
    z-index:-2;
  }

  .vitrier-intro-card::after{
    content:"";
    position:absolute;
    right:-65px;
    bottom:-65px;
    width:170px;
    height:170px;
    background:var(--red);
    border-radius:50%;
    opacity:.85;
    z-index:-1;
  }

  .vitrier-label{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--wand);
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.18em;
    margin-bottom:22px;
  }

  .vitrier-intro-card h2{
    font-size:44px;
    line-height:1.05;
    font-weight:950;
    margin-bottom:22px;
  }

  .vitrier-intro-card h2 span{
    color:var(--red);
  }

  .vitrier-intro-card p{
    color:rgba(255,255,255,.82);
    font-size:16px;
    line-height:1.75;
    margin-bottom:28px;
  }

  .vitrier-mini-list{
    display:grid;
    gap:12px;
    margin-bottom:30px;
  }

  .vitrier-mini-list div{
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:800;
    color:#fff;
  }

  .vitrier-mini-list i{
    color:var(--red);
  }

  .vitrier-intro-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:var(--red);
    color:#fff;
    text-decoration:none;
    padding:15px 24px;
    font-size:13px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
    transition:.25s ease;
  }

  .vitrier-intro-btn:hover{
    background:#fff;
    color:var(--red);
    transform:translateY(-3px);
  }

  .vitrier-service-card{
    position:relative;
    height:100%;
    background:#fff;
    padding:34px;
    border:1px solid rgba(48,48,58,.08);
    box-shadow:
      20px 24px 55px rgba(48,48,58,.12),
      -10px -10px 30px rgba(255,255,255,.9);
    transition:.35s ease;
    overflow:hidden;
    transform-style:preserve-3d;
  }

  .vitrier-service-card:hover{
    transform:translateY(-12px) rotateX(3deg) rotateY(-3deg);
    box-shadow:
      28px 34px 78px rgba(48,48,58,.22),
      -12px -12px 36px rgba(255,255,255,.95);
  }

  .vitrier-service-card::before{
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:0;
    height:0;
    border-top:58px solid var(--red);
    border-left:58px solid transparent;
    z-index:2;
  }

  .vitrier-service-card::after{
    content:"";
    position:absolute;
    right:-80px;
    bottom:-80px;
    width:180px;
    height:180px;
    background:var(--wand);
    border-radius:50%;
    opacity:.26;
  }

  .vitrier-card-blue::after{
    background:var(--blue);
  }

  .vitrier-card-green::after{
    background:var(--week);
  }

  .vitrier-image-card{
    padding:0;
    min-height:370px;
    background:
      linear-gradient(180deg, rgba(48,48,58,.10), rgba(48,48,58,.82)),
      url('/assets/images/section1.webp') center/cover no-repeat;
  }

  .vitrier-image-content{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:34px;
    color:#fff;
    z-index:3;
  }

  .vitrier-image-content small{
    color:var(--wand);
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.16em;
  }

  .vitrier-image-content h3{
    font-size:28px;
    font-weight:950;
    margin:10px 0 0;
  }

  .vitrier-number{
    position:absolute;
    top:26px;
    right:32px;
    color:rgba(48,48,58,.10);
    font-size:64px;
    font-weight:950;
    line-height:1;
  }

  .vitrier-icon{
    position:relative;
    z-index:3;
    width:76px;
    height:76px;
    background:linear-gradient(145deg, #ffffff, #eceef3);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--red);
    font-size:30px;
    margin-bottom:28px;
    box-shadow:
      12px 12px 26px rgba(48,48,58,.16),
      -8px -8px 20px rgba(255,255,255,.95);
  }

  .vitrier-card-blue .vitrier-icon{
    color:var(--blue);
  }

  .vitrier-card-green .vitrier-icon{
    color:var(--week);
  }

  .vitrier-service-card h3{
    position:relative;
    z-index:3;
    color:var(--black);
    font-size:23px;
    line-height:1.18;
    font-weight:950;
    margin-bottom:15px;
  }

  .vitrier-service-card p{
    position:relative;
    z-index:3;
    color:var(--shade);
    font-size:15.5px;
    line-height:1.75;
    margin-bottom:24px;
  }

  .vitrier-tag{
    position:relative;
    z-index:3;
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--black);
    color:#fff;
    padding:9px 14px;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
  }

  .vitrier-tag i{
    color:var(--red);
  }

  .vitrier-color-line{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:7px;
    display:flex;
    z-index:4;
  }

  .vitrier-color-line span{
    flex:1;
  }

  .vitrier-color-line span:nth-child(1){background:var(--wand);}
  .vitrier-color-line span:nth-child(2){background:var(--week);}
  .vitrier-color-line span:nth-child(3){background:var(--blue);}
  .vitrier-color-line span:nth-child(4){background:var(--shade);}
  .vitrier-color-line span:nth-child(5){background:var(--red);}
  .vitrier-color-line span:nth-child(6){background:var(--black);}

  @media(max-width:991px){
    .vitrier-services-section{
      padding:80px 0;
    }

    .vitrier-intro-card h2{
      font-size:36px;
    }

    .vitrier-image-card{
      min-height:320px;
    }
  }

  @media(max-width:576px){
    .vitrier-intro-card,
    .vitrier-service-card{
      padding:28px;
    }

    .vitrier-intro-card h2{
      font-size:31px;
    }

    .vitrier-service-card h3{
      font-size:21px;
    }
  }