.about__container-title {
      font-size: 50px;
      margin-top: 120px;
   }

   .header__container {
      margin: -1.8% -1.8% 0 -1.8%;
   }


   .about__container-contant-block-info {
      position: relative;
      margin-bottom: 0px;
      padding: 3% 0 3% 37px;

   }

   a {
      color: #8c6f3d;
   }

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

   @media (max-width: 766px) {
      .service-landing {
         padding-top: 87px;
      }
   }

   .service-landing__hero-text {
      margin-top: 150px;
   }


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

   .service-landing__hero-media {
      position: relative;
      min-width: 0;
      min-height: 640px;
      isolation: isolate;
   }

   .service-showcase {
      position: relative;

      width: 100%;
      height: 100%;

      min-height: 640px;

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


   /* =========================================================
      BACKGROUND
   ========================================================= */


   /* =========================================================
      BROWSER
   ========================================================= */

   .service-showcase__browser {
      position: relative;

      z-index: 2;

      width: min(92%, 760px);

      margin-left: auto;
      margin-right: 1%;

      overflow: hidden;

      border-radius: 26px;

      background: #0d0d0d;

      border:
         1px solid
         rgba(255, 255, 255, 0.11);

      box-shadow:
         0 40px 100px rgba(0, 0, 0, 0.72),
         0 0 0 1px rgba(255, 255, 255, 0.025) inset,
         0 1px 0 rgba(255, 255, 255, 0.08) inset;

      transform:
         perspective(1400px)
         rotateY(-4deg)
         rotateX(1deg);

      transform-origin: center;

      animation:
         serviceBrowserFloat
         7s
         ease-in-out
         infinite;
   }


   /* =========================================================
      BROWSER TOP BAR
   ========================================================= */

   .service-showcase__browser-bar {
      height: 54px;

      display: grid;

      grid-template-columns:
         auto 1fr auto;

      align-items: center;

      gap: 20px;

      padding: 0 18px;

      background:
         linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.065),
            rgba(255, 255, 255, 0.02)
         );

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


   .service-showcase__browser-dots {
      display: flex;
      align-items: center;
      gap: 7px;
   }


   .service-showcase__browser-dots span {
      width: 8px;
      height: 8px;

      border-radius: 50%;

      background:
         rgba(255, 255, 255, 0.18);
   }


   .service-showcase__browser-dots span:first-child {
      background:
         rgba(226, 180, 92, 0.8);
   }


   .service-showcase__browser-address {
      justify-self: center;

      width: min(100%, 310px);
      height: 29px;

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

      gap: 8px;

      padding: 0 15px;

      border-radius: 999px;

      background:
         rgba(0, 0, 0, 0.25);

      border:
         1px solid
         rgba(255, 255, 255, 0.06);

      color:
         rgba(255, 255, 255, 0.45);

      font-size: 10px;

      letter-spacing: 0.08em;
   }


   .service-showcase__lock {
      position: relative;

      width: 8px;
      height: 7px;

      border-radius: 2px;

      background:
         rgba(219, 183, 112, 0.7);
   }


   .service-showcase__lock::before {
      content: "";

      position: absolute;

      width: 5px;
      height: 5px;

      left: 50%;
      top: -4px;

      transform:
         translateX(-50%);

      border:
         1px solid
         rgba(219, 183, 112, 0.7);

      border-bottom: 0;

      border-radius:
         5px 5px 0 0;
   }


   .service-showcase__browser-menu {
      display: flex;
      align-items: center;

      gap: 3px;
   }


   .service-showcase__browser-menu span {
      width: 3px;
      height: 3px;

      border-radius: 50%;

      background:
         rgba(255, 255, 255, 0.35);
   }


   /* =========================================================
      MAIN PROJECT IMAGE
   ========================================================= */

   .service-showcase__browser-content {
      position: relative;

      height: 480px;

      overflow: hidden;

      background: #111;

      cursor: zoom-in;

      outline: none;
   }


   .service-showcase__main-image {
      width: 100%;
      height: 100%;

      display: block;

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

      transform:
         scale(1.01);

      transition:
         transform 1.2s cubic-bezier(.2, .7, .2, 1),
         filter .5s ease;
   }


   .service-showcase__browser-content:hover
   .service-showcase__main-image {
      transform:
         scale(1.045);
   }


   .service-showcase__browser-overlay {
      position: absolute;
      inset: 0;

      background:
         linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.02) 30%,
            rgba(0, 0, 0, 0.68) 100%
         ),
         linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.15),
            transparent 50%
         );

      pointer-events: none;
   }


   /* =========================================================
      VIEW PROJECT / ZOOM
   ========================================================= */

   .service-showcase__zoom {
      position: absolute;

      z-index: 5;

      top: 22px;
      right: 22px;

      display: flex;
      align-items: center;

      gap: 8px;

      padding:
         9px 13px;

      border-radius: 999px;

      background:
         rgba(8, 8, 8, 0.63);

      border:
         1px solid
         rgba(255, 255, 255, 0.12);

      color:
         rgba(255, 255, 255, 0.8);

      font-size: 9px;

      letter-spacing: .11em;

      text-transform: uppercase;

      backdrop-filter:
         blur(14px);

      -webkit-backdrop-filter:
         blur(14px);

      pointer-events: none;

      opacity: .72;

      transform:
         translateY(0);

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


   .service-showcase__browser-content:hover
   .service-showcase__zoom {
      opacity: 1;

      transform:
         translateY(-2px);

      background:
         rgba(12, 12, 12, 0.82);
   }


   .service-showcase__zoom-icon {
      position: relative;

      width: 12px;
      height: 12px;

      border:
         1px solid
         rgba(223, 188, 120, 0.9);

      border-radius: 50%;
   }


   .service-showcase__zoom-icon::after {
      content: "";

      position: absolute;

      width: 5px;
      height: 1px;

      right: -4px;
      bottom: -2px;

      background:
         #dfbc78;

      transform:
         rotate(45deg);

      transform-origin:
         left center;
   }


   /* =========================================================
      BROWSER LABEL
   ========================================================= */

   .service-showcase__browser-label {
      position: absolute;

      z-index: 4;

      left: 28px;
      bottom: 28px;

      display: flex;
      flex-direction: column;

      gap: 6px;

      padding:
         14px 17px;

      border-radius: 14px;

      background:
         rgba(9, 9, 9, 0.55);

      border:
         1px solid
         rgba(255, 255, 255, 0.1);

      box-shadow:
         0 18px 35px
         rgba(0, 0, 0, 0.3);

      backdrop-filter:
         blur(14px);

      -webkit-backdrop-filter:
         blur(14px);

      pointer-events: none;
   }


   .service-showcase__browser-label span {
      color:
         rgba(255, 255, 255, 0.48);

      font-size: 9px;
      font-weight: 500;

      letter-spacing:
         0.16em;

      text-transform:
         uppercase;
   }


   .service-showcase__browser-label strong {
      color: #fff;

      font-size: 17px;
      font-weight: 500;

      letter-spacing:
         -0.02em;
   }


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

   .service-showcase__phone {
      position: absolute;

      z-index: 5;

      left: -1%;
      bottom: 0;

      width: 190px;

      filter:
         drop-shadow(
            0 28px 45px
            rgba(0, 0, 0, 0.7)
         );

      animation:
         servicePhoneFloat
         6s
         ease-in-out
         infinite;
   }


   .service-showcase__phone-frame {
      position: relative;

      padding: 7px;

      border-radius: 35px;

      background:
         linear-gradient(
            145deg,
            #4d4d4d 0%,
            #171717 24%,
            #050505 55%,
            #383838 100%
         );

      box-shadow:
         0 0 0 1px rgba(255, 255, 255, 0.11),
         0 16px 40px rgba(0, 0, 0, 0.55),
         inset 0 1px 1px rgba(255, 255, 255, 0.22);
   }


   .service-showcase__phone-frame::before {
      content: "";

      position: absolute;

      right: -3px;
      top: 82px;

      width: 3px;
      height: 51px;

      border-radius:
         0 3px 3px 0;

      background:
         #242424;
   }


   .service-showcase__phone-speaker {
      position: absolute;

      z-index: 4;

      width: 61px;
      height: 17px;

      top: 13px;
      left: 50%;

      transform:
         translateX(-50%);

      border-radius:
         999px;

      background:
         #050505;
   }


   .service-showcase__phone-screen {
      position: relative;

      height: 380px;

      overflow: hidden;

      border-radius:
         29px;

      background:
         #111;
   }


   .service-showcase__phone-screen img {
      width: 100%;
      height: 100%;

      display: block;

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


   .service-showcase__phone-overlay {
      position: absolute;
      inset: 0;

      background:
         linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.05),
            rgba(0, 0, 0, 0.28) 45%,
            rgba(0, 0, 0, 0.92) 100%
         );
   }


   .service-showcase__phone-ui {
      position: absolute;

      z-index: 2;

      left: 15px;
      right: 15px;
      bottom: 18px;

      display: flex;
      flex-direction: column;

      align-items:
         flex-start;

      gap: 9px;
   }


   .service-showcase__phone-tag {
      display: inline-flex;

      padding:
         5px 8px;

      border-radius:
         999px;

      background:
         rgba(218, 177, 98, 0.15);

      border:
         1px solid
         rgba(218, 177, 98, 0.32);

      color:
         #dfbc78;

      font-size:
         8px;

      letter-spacing:
         0.12em;

      text-transform:
         uppercase;
   }


   .service-showcase__phone-ui strong {
      max-width:
         130px;

      color: #fff;

      font-size:
         16px;

      font-weight:
         500;

      line-height:
         1.14;

      letter-spacing:
         -0.03em;
   }


   .service-showcase__phone-button {
      width: 100%;

      padding:
         9px 12px;

      border-radius:
         9px;

      background:
         #d8b16c;

      color:
         #111;

      font-size:
         9px;

      font-weight:
         700;

      text-align:
         center;

      text-transform:
         uppercase;

      letter-spacing:
         0.12em;
   }


   /* =========================================================
      ANALYTICS
   ========================================================= */

   .service-showcase__analytics {
      position: absolute;

      z-index: 6;

      width: 230px;

      top: 2%;
      right: -3%;

      padding:
         18px;

      border-radius:
         20px;

      background:
         linear-gradient(
            145deg,
            rgba(24, 24, 24, 0.94),
            rgba(9, 9, 9, 0.91)
         );

      border:
         1px solid
         rgba(255, 255, 255, 0.1);

      box-shadow:
         0 25px 55px rgba(0, 0, 0, 0.52),
         inset 0 1px 0 rgba(255, 255, 255, 0.06);

      backdrop-filter:
         blur(18px);

      -webkit-backdrop-filter:
         blur(18px);

      animation:
         serviceAnalyticsFloat
         6.5s
         ease-in-out
         infinite;
   }


   .service-showcase__analytics-head {
      display: flex;

      align-items:
         flex-start;

      justify-content:
         space-between;

      gap: 12px;
   }


   .service-showcase__analytics-head > div:first-child {
      display: flex;
      flex-direction: column;

      gap: 4px;
   }


   .service-showcase__analytics-head span {
      color:
         rgba(255, 255, 255, 0.42);

      font-size: 9px;

      letter-spacing:
         0.08em;

      text-transform:
         uppercase;
   }


   .service-showcase__analytics-head strong {
      color:
         #fff;

      font-size:
         24px;

      font-weight:
         500;

      letter-spacing:
         -0.04em;
   }


   .service-showcase__analytics-badge {
      padding:
         5px 8px;

      border-radius:
         999px;

      background:
         rgba(110, 178, 122, 0.12);

      border:
         1px solid
         rgba(110, 178, 122, 0.25);

      color:
         #8fd49a;

      font-size:
         8px;

      font-weight:
         600;

      letter-spacing:
         0.09em;

      text-transform:
         uppercase;
   }


   .service-showcase__chart {
      height:
         72px;

      display:
         flex;

      align-items:
         flex-end;

      gap:
         7px;

      margin-top:
         22px;

      padding-top:
         8px;

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


   .service-showcase__chart span {
      flex: 1;

      min-width:
         0;

      border-radius:
         5px 5px 1px 1px;

      background:
         linear-gradient(
            180deg,
            #e0bc76,
            rgba(224, 188, 118, 0.18)
         );

      box-shadow:
         0 0 14px
         rgba(224, 188, 118, 0.12);
   }


   .service-showcase__analytics-footer {
      display:
         flex;

      justify-content:
         space-between;

      gap:
         12px;

      margin-top:
         12px;
   }


   .service-showcase__analytics-footer span {
      color:
         rgba(255, 255, 255, 0.32);

      font-size:
         8px;
   }


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

   .service-showcase__status {
      position:
         absolute;

      z-index:
         7;

      right:
         5%;

      bottom:
         2%;

      display:
         flex;

      align-items:
         center;

      gap:
         11px;

      padding:
         12px 15px;

      border-radius:
         14px;

      background:
         rgba(12, 12, 12, 0.8);

      border:
         1px solid
         rgba(255, 255, 255, 0.09);

      box-shadow:
         0 18px 40px
         rgba(0, 0, 0, 0.45);

      backdrop-filter:
         blur(14px);

      -webkit-backdrop-filter:
         blur(14px);
   }


   .service-showcase__status-icon {
      width:
         30px;

      height:
         30px;

      display:
         flex;

      align-items:
         center;

      justify-content:
         center;

      flex:
         0 0 auto;

      border-radius:
         50%;

      background:
         rgba(218, 177, 98, 0.13);

      border:
         1px solid
         rgba(218, 177, 98, 0.3);

      color:
         #dfba71;

      font-size:
         13px;
   }


   .service-showcase__status > div {
      display:
         flex;

      flex-direction:
         column;

      gap:
         3px;
   }


   .service-showcase__status strong {
      color:
         #fff;

      font-size:
         11px;

      font-weight:
         500;
   }


   .service-showcase__status div span {
      color:
         rgba(255, 255, 255, 0.38);

      font-size:
         8px;

      letter-spacing:
         0.04em;
   }


   /* =========================================================
      FULLSCREEN LIGHTBOX
   ========================================================= */

   .project-lightbox {
      position:
         fixed;

      inset:
         0;

      z-index:
         999999;

      display:
         flex;

      align-items:
         center;

      justify-content:
         center;

      padding:
         88px 46px 46px;

      background:
         rgba(4, 4, 4, 0.94);

      backdrop-filter:
         blur(24px);

      -webkit-backdrop-filter:
         blur(24px);

      opacity:
         0;

      visibility:
         hidden;

      pointer-events:
         none;

      transition:
         opacity .35s ease,
         visibility .35s ease;
   }


   .project-lightbox::before {
      content:
         "";

      position:
         absolute;

      width:
         700px;

      height:
         700px;

      left:
         50%;

      top:
         50%;

      transform:
         translate(-50%, -50%);

      border-radius:
         50%;

      background:
         rgba(212, 172, 96, .06);

      filter:
         blur(120px);

      pointer-events:
         none;
   }


   .project-lightbox--active {
      opacity:
         1;

      visibility:
         visible;

      pointer-events:
         auto;
   }


   .project-lightbox__top {
      position:
         absolute;

      z-index:
         5;

      top:
         24px;

      left:
         32px;

      right:
         32px;

      display:
         flex;

      align-items:
         center;

      justify-content:
         space-between;

      pointer-events:
         none;
   }


   .project-lightbox__info {
      display:
         flex;

      flex-direction:
         column;

      gap:
         3px;
   }


   .project-lightbox__info span {
      color:
         #d7af69;

      font-size:
         8px;

      letter-spacing:
         .22em;

      text-transform:
         uppercase;
   }


   .project-lightbox__info strong {
      color:
         rgba(255, 255, 255, .86);

      font-size:
         13px;

      font-weight:
         500;

      letter-spacing:
         -.01em;
   }


   .project-lightbox__close {
      position:
         relative;

      width:
         48px;

      height:
         48px;

      padding:
         0;

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

      border-radius:
         50%;

      background:
         rgba(255, 255, 255, .055);

      cursor:
         pointer;

      pointer-events:
         auto;

      backdrop-filter:
         blur(15px);

      -webkit-backdrop-filter:
         blur(15px);

      transition:
         transform .3s ease,
         background .3s ease,
         border-color .3s ease;
   }


   .project-lightbox__close:hover {
      transform:
         rotate(90deg);

      background:
         rgba(255, 255, 255, .1);

      border-color:
         rgba(216, 177, 108, .4);
   }


   .project-lightbox__close span {
      position:
         absolute;

      width:
         16px;

      height:
         1px;

      left:
         50%;

      top:
         50%;

      background:
         #fff;

      transform-origin:
         center;
   }


   .project-lightbox__close span:first-child {
      transform:
         translate(-50%, -50%)
         rotate(45deg);
   }


   .project-lightbox__close span:last-child {
      transform:
         translate(-50%, -50%)
         rotate(-45deg);
   }


   .project-lightbox__content {
      position:
         relative;

      z-index:
         2;

      max-width:
         1500px;

      width:
         100%;

      max-height:
         calc(100vh - 135px);

      display:
         flex;

      align-items:
         center;

      justify-content:
         center;

      overflow:
         hidden;

      border-radius:
         18px;

      background:
         #090909;

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

      box-shadow:
         0 45px 150px
         rgba(0, 0, 0, .9);

      transform:
         translateY(18px)
         scale(.96);

      opacity:
         0;

      transition:
         transform .45s cubic-bezier(.16, 1, .3, 1),
         opacity .35s ease;
   }


   .project-lightbox--active
   .project-lightbox__content {
      transform:
         translateY(0)
         scale(1);

      opacity:
         1;
   }


   .project-lightbox__image {
      display:
         block;

      width:
         auto;

      height:
         auto;

      max-width:
         100%;

      max-height:
         calc(100vh - 135px);

      object-fit:
         contain;

      user-select:
         none;

      -webkit-user-drag:
         none;
   }


   .project-lightbox__hint {
      position:
         absolute;

      z-index:
         3;

      left:
         50%;

      bottom:
         15px;

      transform:
         translateX(-50%);

      display:
         flex;

      align-items:
         center;

      gap:
         7px;

      color:
         rgba(255, 255, 255, .34);

      font-size:
         8px;

      letter-spacing:
         .08em;

      pointer-events:
         none;
   }


   .project-lightbox__hint span {
      padding:
         3px 6px;

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

      border-radius:
         4px;

      color:
         rgba(255, 255, 255, .58);

      font-size:
         7px;
   }


   body.project-lightbox-open {
      overflow:
         hidden;
   }


   /* =========================================================
      ANIMATIONS
   ========================================================= */

   @keyframes serviceBrowserFloat {

      0%,
      100% {
         transform:
            perspective(1400px)
            rotateY(-4deg)
            rotateX(1deg)
            translateY(0);
      }

      50% {
         transform:
            perspective(1400px)
            rotateY(-3deg)
            rotateX(0deg)
            translateY(-8px);
      }

   }


   @keyframes servicePhoneFloat {

      0%,
      100% {
         transform:
            translateY(0)
            rotate(-2deg);
      }

      50% {
         transform:
            translateY(-10px)
            rotate(-1deg);
      }

   }


   @keyframes serviceAnalyticsFloat {

      0%,
      100% {
         transform:
            translateY(0);
      }

      50% {
         transform:
            translateY(-9px);
      }

   }


   /* =========================================================
      RESPONSIVE — 1200
   ========================================================= */

   @media (max-width: 1200px) {

      .service-landing__hero-media {
         min-height:
            580px;
      }

      .service-showcase {
         min-height:
            580px;
      }

      .service-showcase__browser {
         width:
            90%;
      }

      .service-showcase__browser-content {
         height:
            420px;
      }

      .service-showcase__phone {
         width:
            165px;
      }

      .service-showcase__phone-screen {
         height:
            330px;
      }

      .service-showcase__analytics {
         width:
            205px;
      }

   }


   /* =========================================================
      RESPONSIVE — TABLET
   ========================================================= */

   @media (max-width: 991px) {

      .service-landing__hero-media {
         width:
            100%;

         min-height:
            650px;

         margin-top:
            30px;
      }

      .service-showcase {
         min-height:
            650px;
      }

      .service-showcase__browser {
         width:
            88%;

         margin:
            0 auto;

         transform:
            none;
      }

      .service-showcase__browser-content {
         height:
            440px;
      }


      @keyframes serviceBrowserFloat {

         0%,
         100% {
            transform:
               translateY(0);
         }

         50% {
            transform:
               translateY(-7px);
         }

      }

   }


   /* =========================================================
      RESPONSIVE — MOBILE
   ========================================================= */

   @media (max-width: 700px) {

      .service-landing__hero-media {
         min-height:
            500px;

         margin-top:
            20px;
      }


      .service-showcase {
         min-height:
            500px;

         padding-bottom:
            30px;
      }


      .service-showcase::before {
         inset:
            4% 0;

         border-radius:
            30px;
      }


      .service-showcase__browser {
         width:
            96%;

         margin-top:
            15px;

         border-radius:
            18px;
      }


      .service-showcase__browser-bar {
         height:
            42px;

         grid-template-columns:
            auto 1fr;

         gap:
            10px;

         padding:
            0 12px;
      }


      .service-showcase__browser-address {
         width:
            100%;

         height:
            24px;

         font-size:
            8px;
      }


      .service-showcase__browser-menu {
         display:
            none;
      }


      .service-showcase__browser-content {
         height:
            330px;
      }


      .service-showcase__browser-label {
         left:
            15px;

         bottom:
            15px;

         padding:
            10px 12px;
      }


      .service-showcase__browser-label strong {
         font-size:
            14px;
      }


      .service-showcase__zoom {
         top:
            12px;

         right:
            12px;

         padding:
            7px 9px;

         font-size:
            7px;
      }


      .service-showcase__phone {
         width:
            120px;

         left:
            -1%;

         bottom:
            0;
      }


      .service-showcase__phone-frame {
         padding:
            5px;

         border-radius:
            25px;
      }


      .service-showcase__phone-screen {
         height:
            245px;

         border-radius:
            21px;
      }


      .service-showcase__phone-speaker {
         width:
            42px;

         height:
            12px;

         top:
            9px;
      }


      .service-showcase__phone-ui {
         left:
            10px;

         right:
            10px;

         bottom:
            11px;

         gap:
            6px;
      }


      .service-showcase__phone-ui strong {
         font-size:
            11px;
      }


      .service-showcase__phone-tag {
         font-size:
            6px;

         padding:
            3px 5px;
      }


      .service-showcase__phone-button {
         padding:
            6px;

         font-size:
            6px;
      }


      .service-showcase__analytics {
         width:
            160px;

         top:
            0;

         right:
            -1%;

         padding:
            12px;

         border-radius:
            14px;
      }


      .service-showcase__analytics-head strong {
         font-size:
            18px;
      }


      .service-showcase__analytics-badge {
         display:
            none;
      }


      .service-showcase__chart {
         height:
            48px;

         gap:
            4px;

         margin-top:
            14px;
      }


      .service-showcase__status {
         right:
            1%;

         bottom:
            4%;

         padding:
            8px 10px;
      }


      .service-showcase__status-icon {
         width:
            24px;

         height:
            24px;
      }


      /* Fullscreen mobile */

      .project-lightbox {
         padding:
            75px 12px 36px;
      }


      .project-lightbox__top {
         top:
            15px;

         left:
            16px;

         right:
            16px;
      }


      .project-lightbox__close {
         width:
            42px;

         height:
            42px;
      }


      .project-lightbox__content {
         max-height:
            calc(100vh - 115px);

         border-radius:
            12px;
      }


      .project-lightbox__image {
         max-height:
            calc(100vh - 115px);
      }


      .project-lightbox__hint {
         display:
            none;
      }

   }


   /* =========================================================
      RESPONSIVE — SMALL PHONE
   ========================================================= */

   @media (max-width: 480px) {

      .service-landing__hero-media {
         min-height:
            425px;
      }


      .service-showcase {
         min-height:
            425px;
      }


      .service-showcase__browser-content {
         height:
            275px;
      }


      .service-showcase__phone {
         width:
            98px;
      }


      .service-showcase__phone-screen {
         height:
            198px;
      }


      .service-showcase__analytics {
         width:
            135px;
      }


      .service-showcase__analytics-head span {
         font-size:
            7px;
      }


      .service-showcase__analytics-head strong {
         font-size:
            15px;
      }


      .service-showcase__analytics-footer {
         display:
            none;
      }


      .service-showcase__status {
         display:
            none;
      }


      .service-showcase__zoom span:last-child {
         display:
            none;
      }


      .service-showcase__zoom {
         width:
            32px;

         height:
            32px;

         padding:
            0;

         display:
            flex;

         align-items:
            center;

         justify-content:
            center;
      }

   }


   /* =========================================================
      REDUCED MOTION
   ========================================================= */

   @media (prefers-reduced-motion: reduce) {

      .service-showcase__browser,
      .service-showcase__phone,
      .service-showcase__analytics {
         animation:
            none;
      }


      .service-showcase__main-image,
      .project-lightbox,
      .project-lightbox__content {
         transition:
            none;
      }

   }

      .service-landing {
         padding: 80px 0 100px;
        background-color: #1d1d1d;
         /* фон страницы, если нужен */

         color: #f5efe4;
         font-family: inherit;

      }

      .service-landing__bg {
         max-width: 90%;
         margin: 0 auto;
      }

      .service-landing__hero {
         display: grid;
         grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
         gap: 40px;
         align-items: center;
         margin-bottom: 80px;
      }

      .service-landing__hero-text {
         max-width: 640px;
         margin-top: 150px;
      }

      .service-landing__eyebrow {
         letter-spacing: .2em;
         text-transform: uppercase;
         font-size: 11px;
         opacity: .7;
         margin-bottom: 12px;
      }

      .service-landing__title {
         font-size: clamp(26px, 3vw, 34px);
         line-height: 1.2;
         margin-bottom: 18px;
      }

      .service-landing__title span {
         display: block;
         color: #f8d48b;
      }

      .service-landing__subtitle {
         font-size: 15px;
         line-height: 1.6;
         opacity: .9;
         margin-bottom: 24px;
      }

      .service-landing__highlights {
         display: flex;
         flex-wrap: wrap;
         gap: 10px 24px;
         list-style: none;
         padding: 0;
         margin: 0 0 28px;
         font-size: 14px;
      }

      .service-landing__highlights li strong {
         color: #f8d48b;
         font-weight: 600;
      }

      .service-landing__hero-cta {
         display: flex;
         justify-content: center;
         gap: 2px;
      }

      /* Кнопки можно привязать к твоим готовым классам */
      .btn-primary,
      .btn-secondary {
         display: inline-flex;
         align-items: center;
         justify-content: center;
         padding: 12px 26px;
         border-radius: 999px;
         font-size: 14px;
         border: 1px solid transparent;
         cursor: pointer;
         text-decoration: none;
         transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
      }

      .btn-primary {
         background: linear-gradient(120deg, #f9d78e, #c7923e);
         color: #1b130e;
         box-shadow: 0 0 20px rgba(249, 215, 142, .35);
      }

      .btn-primary:hover {
         transform: translateY(-1px);
         box-shadow: 0 0 26px rgba(249, 215, 142, .55);
      }

      .btn-secondary {
         background: transparent;
         border-color: rgba(245, 239, 228, .4);
         color: #f5efe4;
      }

      .btn-secondary:hover {
         background: rgba(245, 239, 228, .06);
      }

      /* HERO media */

      .service-landing__hero-media {
         position: relative;
         min-height: 260px;
      }

      .service-landing__mockup {
         position: absolute;
         overflow: hidden;
         border-radius: 24px;
         background: radial-gradient(circle at top, rgba(248, 212, 139, .25), transparent 60%);
         border: 1px solid rgba(248, 212, 139, .35);
         box-shadow: 0 18px 60px rgba(0, 0, 0, .75);
      }

      .service-landing__mockup img {
         display: block;
         width: 100%;
         height: 100%;
         object-fit: cover;
      }

      .service-landing__mockup--main {
         width: 100%;
         height: 100%;
      }

      .service-landing__mockup--secondary {
         width: 46%;
         height: 42%;
         right: -4%;
         top: 4%;
      }

      .service-landing__mockup--secondary img {
         object-position: top;
      }

      .service-landing__mockup--bottom {
         top: auto;
         bottom: -6%;
         left: -4%;
         object-fit: cover;
         object-position: top;
      }

      .service-landing__mockup--bottom img {
         object-position: bottom;
      }

      /* Sections */

      .service-landing__section {
         padding: 60px 0;
      }

      .service-landing__section--dark {
         background: radial-gradient(circle at top, rgba(248, 212, 139, .12), rgba(10, 6, 4, 1));
         border-radius: 32px;
         margin-inline: -20px;
         padding-inline: 20px;
      }

      .service-landing__section-head {
         max-width: 700px;
         margin-bottom: 32px;
      }

      .service-landing__section-title {
         font-size: 22px;
         margin-bottom: 10px;
      }

      .service-landing__section-subtitle {
         font-size: 14px;
         opacity: .85;
      }

      .service-landing__grid {
         display: grid;
         gap: 32px;
      }

      .service-landing__grid--two {
         grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .service-landing__list {
         list-style: disc;
         padding-left: 18px;
         margin: 0;
         font-size: 14px;
         line-height: 1.7;
      }

      .service-landing__list--compact li+li {
         margin-top: 6px;
      }

      /* Chips */

      .service-landing__chips {
         display: flex;
         flex-wrap: wrap;
         gap: 10px;
         list-style: none;
         padding: 0;
         margin: 12px 0 0;
      }

      .service-landing__chips li {
         padding: 6px 12px;
         border-radius: 999px;
         border: 1px solid rgba(248, 212, 139, .4);
         font-size: 12px;
         background: rgba(0, 0, 0, .35);
      }

      /* Steps */

      .service-landing__steps {
         list-style: none;
         padding: 0;
         margin: 0;
         border-top: 1px solid rgba(248, 212, 139, .18);
      }

      .service-landing__step {
         display: grid;
         grid-template-columns: auto minmax(0, 1fr);
         gap: 18px;
         padding: 20px 0;
         border-bottom: 1px solid rgba(248, 212, 139, .18);
      }

      .service-landing__step-number {
         font-size: 18px;
         font-weight: 600;
         color: #f8d48b;
      }

      .service-landing__step h3 {
         font-size: 16px;
         margin: 0 0 6px;
      }

      .service-landing__step p {
         font-size: 14px;
         opacity: .9;
         margin: 0;
      }

      /* CTA */

      .service-landing__cta {
         text-align: center;
      }

      .service-landing__cta-inner {
         max-width: 620px;
         margin: 0 auto;
      }

      .service-landing__cta-inner h2 {
         font-size: 24px;
         margin-bottom: 10px;
      }

      .service-landing__cta-inner p {
         font-size: 14px;
         opacity: .9;
         margin-bottom: 22px;
      }

      /* ======= ADAPTIVE ======= */

      @media (max-width: 1024px) {
         .service-landing__hero {
            grid-template-columns: minmax(0, 1.1fr);
         }

         .service-landing__hero-media {
            order: -1;
            margin-bottom: 18px;
            height: 260px;
         }

         .service-landing__mockup--main {
            width: 100%;
            height: 100%;
         }
      }

      @media (max-width: 768px) {
         .service-landing {
            padding-top: 87px;
         }

         .service-landing__hero {
            margin-bottom: 56px;
         }

         .service-landing__grid--two {
            grid-template-columns: 1fr;
         }

         .service-landing__section--dark {
            margin-inline: -12px;
            padding-inline: 12px;
         }
      }

      @media (max-width: 480px) {
         .service-landing__hero-media {
            height: 220px;
         }

         .service-landing__mockup--secondary {
            /* display: none; */
            /* если слишком мелко, можно скрыть доп превью */
         }
      }
   

      .header__container-hire-link-language-radio {
         --radius: 8px;
         --border: 4px;
         --height: 48px;
         --speed: 0.25s;
         display: grid;
         place-items: center;
         align-content: center;
      }

      .tabs {
         display: grid;
         grid-auto-flow: column;
         /* background: transparent; */
         grid-auto-columns: 1fr;
         position: relative;
         border: 1px solid #8c6f3d;
         border-radius: 35px;
      }

      .tabs>.input,
      .sr-only {
         position: absolute;
         width: 1px;
         height: 1px;
         padding: 0;
         margin: -1px;
         overflow: hidden;
         clip: rect(0, 0, 0, 0);
         white-space: nowrap;
         border-width: 0;
      }

      .tabs:has(:checked:nth-of-type(1)) {
         --active: 0;

      }

      .tabs:has(:checked:nth-of-type(2)) {
         --active: 1;
      }

      .tabs:has(:checked:nth-of-type(3)) {
         --active: 2;
      }

      .tabs:has(:checked:nth-of-type(4)) {
         --active: 3;
      }

      .tabs :checked+.label {
         --highlight: 1;
      }

      .tabs:has(.input:nth-of-type(2)) {
         --count: 2;
      }

      .tabs:has(.input:nth-of-type(3)) {
         --count: 3;
      }

      .tabs:has(.input:nth-of-type(4)) {
         --count: 4;
      }

      .tabs .label {
         padding: 15px;
         cursor: pointer;
         text-align: center;
         font-size: 9px;
         color: #3A3A3A;
         z-index: 2;
         font-family: "Orbitron", sans-serif;
      }

      .input:not(:checked)+.label:hover {
         border-radius: 20px;
      }

      .tabs::after {
         pointer-events: none;
         content: "";
         width: calc(100% / var(--count));
         height: 100%;
         background: #8c6f3d;
         position: absolute;
         border-radius: 20px;
         /* mix-blend-mode: difference; */
         translate: calc(var(--active, 0) * 100%) 0;
         /* transition: translate, outline-color; */
         transition-duration: var(--speed);
         transition-timing-function: var(--ease, ease);
         /* outline: 2px solid transparent; */
      }

      .tabs:has(:focus-visible)::after {
         outline-color: red;
      }
   

@media (max-width: 768px) {
  /* Disable expensive backdrop-filter on mobile: it tanks compositor
     performance (janky scrolling/menus) on phones; desktop keeps the effect. */
  .service-showcase__zoom,
  .service-showcase__browser-label,
  .service-showcase__analytics,
  .service-showcase__status,
  .project-lightbox,
  .project-lightbox__close {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}