/* Element styles of index.html, grouped by page section.
   Generated once from the former inline styles; edit freely. */

/* ===== Page wrapper ===== */
.page {
  min-height: 100vh;
  background: #F7F5F8;
  font-family: 'TT Commons Pro',-apple-system,'Segoe UI',sans-serif;
  color: #2C2C2C;
  overflow-x: hidden;
}

/* ===== Mobile layout (320px, scaled with --m-zoom) ===== */
.m-layout {
  width: 320px;
  margin: 0 auto;
  position: relative;
  padding-bottom: calc(40px + env(safe-area-inset-bottom));
  background: #F7F5F8;
  zoom: var(--m-zoom);
}

/* ===== Mobile: shared ===== */
.m-img1 {
  width: 15px;
  height: 15px;
}
.m-span1 {
  display: inline-flex;
  align-items: center;
  gap: 3.19px;
  height: 24px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: .88;
  letter-spacing: -0.03em;
  white-space: nowrap;
  background: rgba(120,116,255,0.21);
  color: rgb(120,116,255);
}
.m-span2 {
  display: inline-flex;
  align-items: center;
  gap: 3.19px;
  height: 24px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: .88;
  letter-spacing: -0.03em;
  white-space: nowrap;
  background: rgba(220,127,255,0.19);
  color: rgb(220,127,255);
}
.m-span3 {
  display: inline-flex;
  align-items: center;
  gap: 3.19px;
  height: 24px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: .88;
  letter-spacing: -0.03em;
  white-space: nowrap;
  background: rgba(227,242,101,0.55);
  color: rgb(142,159,0);
}
.m-h21 {
  margin: 0;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.02;
  color: #2C2C2C;
}

/* ===== Mobile: title ===== */
.m-title-section1 {
  padding: 58px 16px 0;
}
.m-title-h11 {
  margin: 0;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  text-align: center;
  color: #99979A;
  text-wrap: balance;
}
.m-title-span1 {
  display: inline-block;
  width: 25px;
  height: 25px;
  vertical-align: -6px;
  margin: 0 3px;
  border-radius: 50%;
  overflow: hidden;
  background: #D3D2FF;
}

/* ===== Mobile: hero ===== */
.m-hero-section1 {
  margin-top: 12px;
}
.m-hero-div1 {
  position: relative;
  height: 240px;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.m-hero-div2 {
  margin: 14px 4px 0;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.m-hero-div3 {
  position: relative;
  height: 48px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg,transparent 0%,rgba(0,0,0,.14) 16%,#000 50%,rgba(0,0,0,.14) 84%,transparent 100%);
  mask-image: linear-gradient(90deg,transparent 0%,rgba(0,0,0,.14) 16%,#000 50%,rgba(0,0,0,.14) 84%,transparent 100%);
}
.m-hero-div4 {
  position: relative;
  height: 24px;
  margin-top: 4px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent);
  mask-image: linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent);
}
.m-hero-div5 {
  display: flex;
  justify-content: center;
  margin-top: 19px;
}
.m-hero-a1 {
  width: 195px;
  height: 52px;
  border-radius: 47px;
  background: #202020;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  transition: background .2s,transform .2s;
}

/* ===== Mobile: leaders ===== */
.m-leaders-section1 {
  margin-top: 41px;
  text-align: center;
}
.m-leaders-h21 {
  margin: 0;
  font-size: 20px;
  line-height: 1.02;
  font-weight: 500;
  color: #99979A;
}
.m-leaders-img1 {
  width: 17px;
  height: 17px;
  vertical-align: -2px;
}
.m-leaders-p1 {
  margin: 11px auto 0;
  max-width: 251px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: #1E1E1E;
  opacity: .8;
}
.m-leaders-div1 {
  position: relative;
  margin-top: 21px;
  text-align: left;
}
.m-leaders-div2 {
  position: relative;
  height: 41px;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.m-leaders-div3 {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  gap: 6px;
  padding-right: 6px;
  will-change: transform;
}
.m-leaders-div4 {
  position: relative;
  height: 41px;
  margin-top: 7px;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.m-leaders-div5 {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%,-100%) translateY(8px);
  transition: opacity .2s,transform .25s cubic-bezier(.2,.7,.2,1);
  background: #fff;
  border-radius: 15px;
  padding: 10px 13px 11px;
  box-shadow: 0 14px 34px -14px rgba(30,30,30,.35);
  white-space: nowrap;
}
.m-leaders-div6 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
  color: #8E8E8E;
}
.m-leaders-img2 {
  width: 11px;
  height: 11px;
}
.m-leaders-div7 {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.15;
  color: #1E1E1E;
}
.m-leaders-div8 {
  margin-top: 3px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  color: #1E1E1E;
}
.m-leaders-div9 {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
  color: #8E8E8E;
}
.m-leaders-div10 {
  display: flex;
  justify-content: space-around;
  padding: 0 20px;
  margin-top: 26px;
  font-variant-numeric: tabular-nums;
}
.m-leaders-div11 {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.m-leaders-span1 {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.3;
  color: #2C2C2C;
}
.m-leaders-span2 {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: #2C2C2C;
  opacity: .8;
  margin-top: -5px;
}

/* ===== Mobile: cases ===== */
.m-cases-section1 {
  margin-top: 22px;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.m-cases-article1 {
  background: #fff;
  border-radius: 27.2px;
  padding: 5.44px 6px 20px;
  cursor: pointer;
}
.m-cases-div1 {
  position: relative;
  aspect-ratio: 1;
  border-radius: 23.57px;
  overflow: hidden;
  background: #D9D9D9;
}
.m-cases-span1 {
  position: absolute;
  left: 10px;
  top: 10px;
  height: 26px;
  padding: 0 11px;
  border-radius: 13px;
  background: rgba(255,255,255,.92);
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #1E1E1E;
  white-space: nowrap;
  pointer-events: none;
}
.m-cases-a1 {
  position: absolute;
  right: 10px;
  bottom: 8px;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: #fff;
  color: #1E1E1E;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s,color .2s;
}
.m-cases-span2 {
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: url(../assets/icons/arrow.svg) center/contain no-repeat;
  mask: url(../assets/icons/arrow.svg) center/contain no-repeat;
}
.m-cases-div2 {
  padding: 13px 8px 0 14px;
}
.m-cases-p1 {
  margin: 11px 0 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: #A5A5A5;
}
.m-cases-p2 {
  margin: 13px 0 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: #A5A5A5;
}
.m-cases-div3 {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 12px;
}
.m-cases-span3 {
  display: inline-flex;
  align-items: center;
  gap: 3.19px;
  height: 24px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: .88;
  letter-spacing: -0.03em;
  white-space: nowrap;
  background: rgba(255,173,8,0.14);
  color: rgb(255,173,8);
}

/* ===== Mobile: others ===== */
.m-others-section1 {
  margin-top: 31px;
}
.m-others-div1 {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 15px 24px 4px;
  scroll-padding: 0 24px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.m-others-div2 {
  width: 180px;
  flex-shrink: 0;
  scroll-snap-align: start;
  background: #fff;
  border-radius: 27.2px;
  padding: 7px 7px 14px;
  cursor: pointer;
}
.m-others-div3 {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 22px;
  overflow: hidden;
  background: #D9D9D9;
}
.m-others-div4 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  padding-left: 4px;
}
.m-others-div5 {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #D9D9D9;
}
.m-others-div6 {
  display: flex;
  align-items: center;
  gap: 4px;
}
.m-others-div7 {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
  color: #8E8E8E;
}
.m-others-a1 {
  width: 180px;
  flex-shrink: 0;
  scroll-snap-align: start;
  box-sizing: border-box;
  background: #1E1E1E;
  border-radius: 27.2px;
  padding: 20px 14px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s;
}
.m-others-div8 {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,.12);
}
.m-others-p1 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #fff;
  text-wrap: balance;
}
.m-others-span1 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 11px;
  height: 44px;
  border-radius: 22px;
  background: #DC7FFF;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}

/* ===== Mobile: about ===== */
.m-about-section1 {
  margin: 51px 1px 0;
  background: #fff;
  border-radius: 30px;
  padding: 34px 0 44px;
  overflow: hidden;
}
.m-about-div1 {
  padding: 0 37px;
}
.m-about-div2 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.m-about-div3 {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: #D3D2FF;
}
.m-about-img1 {
  width: 12px;
  height: 11px;
  margin-top: 3px;
}
.m-about-h21 {
  margin: 13px 0 0;
  max-width: 232px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  color: #000;
}
.m-about-div4 {
  display: contents;
}
.m-about-p1 {
  margin: 24px 0 0;
  max-width: 242px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  color: #8E8E8E;
}
.m-about-p2 {
  margin: 20px 0 0;
  max-width: 242px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  color: #8E8E8E;
}
.m-about-p3 {
  margin: 32px 0 0;
  padding: 0 37px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: #8E8E8E;
}
.m-about-div5 {
  margin-top: 12px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image: linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.m-about-div6 {
  display: flex;
  gap: 10px;
  width: max-content;
  animation: logoMarquee 60s linear infinite;
}
.m-about-img2 {
  width: 70px;
  height: 70px;
  flex-shrink: 0;
  border-radius: 24px;
  display: block;
}
.m-about-p4 {
  margin: 36px 0 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  color: #8E8E8E;
}
.m-about-a1 {
  margin-top: 20px;
  width: 195px;
  height: 52px;
  border-radius: 47px;
  background: #202020;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  transition: background .2s;
}

/* ===== Mobile: tariffs ===== */
.m-tariffs-section1 {
  margin-top: 50px;
  padding: 0 24px;
}
.m-tariffs-div1 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
}
.m-tariffs-article1 {
  background: #fff;
  border-radius: 27.2px;
  padding: 30px 17px 28px;
}
.m-tariffs-h31 {
  margin: 0;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  color: #2C2C2C;
}
.m-tariffs-p1 {
  margin: 8px auto 0;
  max-width: 217px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: #8E8E8E;
  opacity: .8;
}
.m-tariffs-div2 {
  padding: 0 7px;
  margin-top: 20px;
}
.m-tariffs-div3 {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  color: #202020;
}
.m-tariffs-ul1 {
  margin: 6px 0 0;
  padding-left: 14px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: #202020;
  opacity: .8;
}
.m-tariffs-div4 {
  margin-top: 16px;
  background: rgba(227,242,101,0.55);
  border-radius: 19px;
  padding: 20px 22px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: #202020;
}
.m-tariffs-div5 {
  margin-top: 22px;
  text-align: center;
}
.m-tariffs-div6 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  color: #2C2C2C;
}
.m-tariffs-div7 {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: #8E8E8E;
  opacity: .8;
}
.m-tariffs-a1 {
  margin: 16px auto 0;
  width: 195px;
  height: 52px;
  border-radius: 47px;
  background: #202020;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}
.m-tariffs-article2 {
  position: relative;
  background: #fff;
  border-radius: 27.2px;
  padding: 52px 17px 28px;
}
.m-tariffs-div8 {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 168px;
  height: 30px;
  border-radius: 0 0 20px 20px;
  background: rgba(120,116,255,0.21);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: #7874FF;
  white-space: nowrap;
}
.m-tariffs-img1 {
  width: 14px;
  height: 14px;
}
.m-tariffs-div9 {
  margin-top: 16px;
  background: rgba(120,116,255,0.21);
  border-radius: 19px;
  padding: 20px 22px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: #202020;
}
.m-tariffs-article3 {
  background: #202020;
  border-radius: 27.2px;
  padding: 28px 24px 36px;
  text-align: center;
}
.m-tariffs-div10 {
  width: 44px;
  height: 44px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  background: #D3D2FF;
}
.m-tariffs-h32 {
  margin: 14px 0 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
}
.m-tariffs-p2 {
  margin: 12px auto 0;
  max-width: 230px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: #fff;
  opacity: .85;
}
.m-tariffs-a2 {
  margin: 26px auto 0;
  width: 188px;
  height: 52px;
  border-radius: 47px;
  background: #fff;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}
.m-tariffs-img2 {
  width: 16px;
  height: 13.33px;
  filter: invert(1);
}

/* ===== Mobile: facts ===== */
.m-facts-section1 {
  margin-top: 46px;
  padding: 0 24px;
}
.m-facts-div1 {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 22px;
}
.m-facts-div2 {
  background: #fff;
  border-radius: 21px;
  padding: 20px 24px 22px;
}
.m-facts-p1 {
  margin: 14px 0 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: #202020;
  opacity: .8;
}
.m-facts-p2 {
  margin: 1px 0 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: #202020;
  opacity: .8;
}

/* ===== Mobile: me ===== */
.m-me-section1 {
  margin: 31px 1px 0;
  background: #fff;
  border-radius: 30px;
  padding: 36px 35px 34px;
}
.m-me-img1 {
  width: 12px;
  height: 11px;
  margin-left: 7px;
}
.m-me-p1 {
  margin: 14px 0 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  color: #000;
}
.m-me-p2 {
  margin: 5px 0 0;
  max-width: 254px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  color: #000;
}
.m-me-div1 {
  position: relative;
  width: 196px;
  height: 224px;
  margin: 28px 0 0 8px;
  cursor: pointer;
}
.m-me-div2 {
  position: absolute;
  inset: 0;
  border-radius: 32px;
  overflow: hidden;
  transition: transform .5s cubic-bezier(.3,.7,.2,1),opacity .4s;
}
.m-me-p3 {
  margin: 30px 0 0;
  max-width: 254px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  color: #000;
}
.m-me-p4 {
  margin: 0;
  max-width: 254px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  color: #000;
}

/* ===== Mobile: reviews ===== */
.m-reviews-section1 {
  margin-top: 46px;
}
.m-reviews-div1 {
  width: 236px;
  margin: 20px auto 0;
}
.m-reviews-div2 {
  display: flex;
  gap: 3px;
}
.m-reviews-div3 {
  flex: 1;
  height: 2.5px;
  border-radius: 2px;
  background: rgba(32,32,32,0.14);
  overflow: hidden;
}
.m-reviews-div4 {
  height: 100%;
  width: 0;
  background: #202020;
  border-radius: 2px;
}
.m-reviews-div5 {
  position: relative;
  width: 236px;
  height: 485px;
  margin-top: 12px;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}
.m-reviews-div6 {
  position: absolute;
  left: 0;
  top: 0;
  width: 194.923px;
  height: 400.547px;
  zoom: 1.2107;
  border-radius: 27.48px;
  transition: transform .45s cubic-bezier(.3,.7,.2,1),opacity .3s;
}

/* ===== Mobile: final ===== */
.m-final-section1 {
  margin-top: 51px;
  padding: 0 1px;
}
.m-final-div1 {
  background: #fff;
  border-radius: 30px;
  padding: 34px 16px 16px;
}
.m-final-h21 {
  margin: 0;
  padding: 0 21px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  color: #000;
}
.m-final-p1 {
  margin: 16px 0 0;
  padding: 0 21px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: #1E1E1E;
  opacity: .8;
}
.m-final-div2 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
  margin-top: 24px;
}
.m-final-a1 {
  margin-top: 10px;
  display: block;
  background: #202020;
  border-radius: 26px;
  padding: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s;
}

/* ===== Mobile: dock ===== */
.m-dock-div1 {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.m-dock-a1 {
  position: relative;
  z-index: 1;
  width: 195px;
  height: 52px;
  border-radius: 47px;
  background: #202020;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s;
}

/* ===== Desktop layout ===== */
.d-layout {
  position: relative;
  overflow: hidden;
  padding-bottom: 100px;
  background: #F7F5F8;
}

/* ===== Desktop: shared ===== */
.d-img1 {
  width: 16px;
  height: 16px;
}
.d-img2 {
  width: 18px;
  height: 18px;
}
.d-span1 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: .88;
  letter-spacing: -0.03em;
  white-space: nowrap;
  background: rgba(120,116,255,0.21);
  color: rgb(120,116,255);
}
.d-span2 {
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: url(../assets/icons/brush.svg) center/contain no-repeat;
  mask: url(../assets/icons/brush.svg) center/contain no-repeat;
}
.d-span3 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: .88;
  letter-spacing: -0.03em;
  white-space: nowrap;
  background: rgba(220,127,255,0.19);
  color: rgb(220,127,255);
}
.d-span4 {
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: url(../assets/icons/folder.svg) center/contain no-repeat;
  mask: url(../assets/icons/folder.svg) center/contain no-repeat;
}
.d-span5 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: .88;
  letter-spacing: -0.03em;
  white-space: nowrap;
  background: rgba(227,242,101,0.55);
  color: rgb(142,159,0);
}
.d-span6 {
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: url(../assets/icons/laptop.svg) center/contain no-repeat;
  mask: url(../assets/icons/laptop.svg) center/contain no-repeat;
}
.d-section1 {
  zoom: 0.84;
  max-width: 1344px;
  margin: 120px auto 0;
  padding: 0 48px;
}
.d-h21 {
  margin: 0;
  text-align: center;
  font-size: 44px;
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: #2C2C2C;
}

/* ===== Desktop: title ===== */
.d-title-section1 {
  padding: 64px 48px 0;
  display: flex;
  justify-content: center;
}
.d-title-h11 {
  margin: 0;
  max-width: 1240px;
  font-weight: 500;
  font-size: clamp(30px,2.6vw,42px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: center;
  color: #99979A;
}
.d-title-span1 {
  display: inline-block;
  width: 1.04em;
  height: 1.04em;
  vertical-align: -0.22em;
  margin: 0 0.06em;
  border-radius: 50%;
  overflow: hidden;
  background: #D3D2FF;
}

/* ===== Desktop: hero ===== */
.d-hero-section1 {
  margin-top: 36px;
}
.d-hero-div1 {
  position: relative;
  height: var(--d-box);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.d-hero-div2 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
  padding: 0 48px;
}
.d-hero-button1 {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid #DCDADD;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s;
}
.d-hero-div3 {
  width: 720px;
  max-width: 100%;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.d-hero-div4 {
  position: relative;
  height: 56px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg,transparent 0%,rgba(0,0,0,.14) 16%,#000 50%,rgba(0,0,0,.14) 84%,transparent 100%);
  mask-image: linear-gradient(90deg,transparent 0%,rgba(0,0,0,.14) 16%,#000 50%,rgba(0,0,0,.14) 84%,transparent 100%);
}
.d-hero-div5 {
  position: relative;
  height: 36px;
  margin-top: 6px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
  mask-image: linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
}
.d-hero-img1 {
  width: 16px;
  height: 16px;
  transform: scaleX(-1);
}
.d-hero-div6 {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}
.d-hero-a1 {
  height: 64px;
  padding: 0 34px;
  border-radius: 47px;
  background: #202020;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  transition: background .2s,transform .2s;
}

/* ===== Desktop: leaders ===== */
.d-leaders-section1 {
  zoom: 0.84;
  max-width: 1344px;
  margin: 168px auto 0;
  padding: 0 48px;
  text-align: center;
}
.d-leaders-h21 {
  margin: 0;
  font-size: 44px;
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #99979A;
}
.d-leaders-img1 {
  width: 36px;
  height: 36px;
  vertical-align: -3px;
}
.d-leaders-p1 {
  margin: 24px auto 0;
  max-width: 400px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: #1E1E1E;
  opacity: .8;
}
.d-leaders-section2 {
  zoom: 0.84;
  position: relative;
  margin-top: 50px;
}
.d-leaders-div1 {
  position: relative;
  height: 100px;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image: linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.d-leaders-div2 {
  position: absolute;
  left: 0;
  top: 6px;
  display: flex;
  gap: 12px;
  padding-right: 12px;
  will-change: transform;
}
.d-leaders-div3 {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%,-100%) translateY(8px);
  transition: opacity .2s,transform .25s cubic-bezier(.2,.7,.2,1);
  background: #fff;
  border-radius: 24px;
  padding: 16px 22px 18px;
  box-shadow: 0 22px 48px -20px rgba(30,30,30,.35);
  white-space: nowrap;
}
.d-leaders-div4 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  color: #8E8E8E;
}
.d-leaders-img2 {
  width: 17px;
  height: 17px;
}
.d-leaders-div5 {
  margin-top: 8px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
  color: #1E1E1E;
}
.d-leaders-div6 {
  margin-top: 6px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  color: #1E1E1E;
}
.d-leaders-div7 {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  color: #8E8E8E;
}
.d-leaders-div8 {
  display: flex;
  justify-content: center;
  gap: 96px;
  margin-top: 44px;
  font-variant-numeric: tabular-nums;
}
.d-leaders-div9 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.d-leaders-span1 {
  font-size: 64px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #2C2C2C;
}
.d-leaders-span2 {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  color: #2C2C2C;
  opacity: .8;
}

/* ===== Desktop: cases ===== */
.d-cases-section1 {
  zoom: 0.84;
  max-width: 1344px;
  margin: 120px auto 0;
  padding: 0 48px;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 24px;
  align-items: stretch;
}
.d-cases-article1 {
  cursor: pointer;
  background: #fff;
  border-radius: 40px;
  padding: 8px 8px 28px;
  display: flex;
  flex-direction: column;
  transition: transform .3s,box-shadow .3s;
}
.d-cases-div1 {
  position: relative;
  aspect-ratio: 1;
  border-radius: 34px;
  overflow: hidden;
  background: #D9D9D9;
}
.d-cases-span1 {
  position: absolute;
  left: 16px;
  top: 16px;
  height: 38px;
  padding: 0 16px;
  border-radius: 19px;
  background: rgba(255,255,255,.92);
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #1E1E1E;
  white-space: nowrap;
  pointer-events: none;
}
.d-cases-a1 {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  color: #1E1E1E;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s,color .2s;
}
.d-cases-span2 {
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url(../assets/icons/arrow.svg) center/contain no-repeat;
  mask: url(../assets/icons/arrow.svg) center/contain no-repeat;
}
.d-cases-div2 {
  padding: 22px 20px 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.d-cases-div3 {
  display: flex;
  align-items: center;
  gap: 12px;
}
.d-cases-div4 {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #D9D9D9;
}
.d-cases-div5 {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.d-cases-div6 {
  display: flex;
  align-items: center;
  gap: 6px;
}
.d-cases-span3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  color: #1E1E1E;
  white-space: nowrap;
}
.d-cases-div7 {
  display: flex;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: #8E8E8E;
  white-space: nowrap;
}
.d-cases-p1 {
  margin: 20px 0 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: #A5A5A5;
  text-wrap: pretty;
}
.d-cases-p2 {
  margin: 14px 0 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: #A5A5A5;
}
.d-cases-div8 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 22px;
}
.d-cases-span4 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: .88;
  letter-spacing: -0.03em;
  white-space: nowrap;
  background: rgba(255,173,8,0.14);
  color: rgb(255,173,8);
}
.d-cases-span5 {
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: url(../assets/icons/stack.svg) center/contain no-repeat;
  mask: url(../assets/icons/stack.svg) center/contain no-repeat;
}

/* ===== Desktop: others ===== */
.d-others-div1 {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 16px;
  margin-top: 40px;
}
.d-others-div2 {
  background: #fff;
  border-radius: 32px;
  padding: 8px 8px 18px;
  transition: transform .3s;
  cursor: pointer;
}
.d-others-div3 {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 26px;
  overflow: hidden;
  background: #D9D9D9;
}
.d-others-div4 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-left: 8px;
}
.d-others-div5 {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #D9D9D9;
}
.d-others-span1 {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: #1E1E1E;
  white-space: nowrap;
}
.d-others-a1 {
  box-sizing: border-box;
  background: #1E1E1E;
  border-radius: 32px;
  padding: 32px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .3s,background .2s;
}
.d-others-div6 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.d-others-div7 {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255,255,255,.12);
}
.d-others-p1 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #fff;
  text-wrap: balance;
}
.d-others-span2 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 16px;
  height: 52px;
  border-radius: 26px;
  background: #DC7FFF;
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
}

/* ===== Desktop: about ===== */
.d-about-div1 {
  background: #fff;
  border-radius: 48px;
  padding: 72px 0 64px;
  overflow: hidden;
}
.d-about-div2 {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 80px;
  padding: 0 80px;
}
.d-about-p1 {
  margin: 64px 0 0;
  padding: 0 80px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: #8E8E8E;
}
.d-about-div3 {
  margin-top: 20px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.d-about-div4 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 56px;
  padding: 0 80px;
}

/* ===== Desktop: tariffs ===== */
.d-tariffs-section1 {
  zoom: 0.84;
  max-width: 1344px;
  margin: 140px auto 0;
  padding: 0 48px;
}
.d-tariffs-div1 {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 20px;
  margin-top: 48px;
  align-items: stretch;
}
.d-tariffs-article1 {
  background: #fff;
  border-radius: 40px;
  padding: 48px 32px 40px;
  display: flex;
  flex-direction: column;
}
.d-tariffs-h31 {
  margin: 0;
  text-align: center;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #2C2C2C;
}
.d-tariffs-p1 {
  margin: 12px auto 0;
  max-width: 300px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: #8E8E8E;
}
.d-tariffs-div2 {
  margin-top: 32px;
  padding: 0 6px;
}
.d-tariffs-div3 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: #202020;
}
.d-tariffs-ul1 {
  margin: 10px 0 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: #202020;
  opacity: .8;
}
.d-tariffs-div4 {
  margin-top: 28px;
  background: rgba(227,242,101,0.55);
  border-radius: 28px;
  padding: 26px 28px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: #202020;
}
.d-tariffs-div5 {
  margin-top: auto;
  padding-top: 36px;
  text-align: center;
}
.d-tariffs-div6 {
  font-size: 36px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #2C2C2C;
}
.d-tariffs-div7 {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: #8E8E8E;
}
.d-tariffs-a1 {
  margin: 24px auto 0;
  width: max-content;
  height: 64px;
  padding: 0 34px;
  border-radius: 47px;
  background: #202020;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  transition: background .2s,transform .2s;
}
.d-tariffs-img1 {
  width: 20px;
  height: 16.7px;
}
.d-tariffs-article2 {
  position: relative;
  background: #fff;
  border-radius: 40px;
  padding: 80px 32px 40px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 0 2px rgba(120,116,255,0.35);
}
.d-tariffs-div8 {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  height: 44px;
  padding: 0 26px;
  border-radius: 0 0 26px 26px;
  background: rgba(120,116,255,0.21);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  color: #7874FF;
  white-space: nowrap;
}
.d-tariffs-p2 {
  margin: 12px auto 0;
  max-width: 320px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: #8E8E8E;
}
.d-tariffs-div9 {
  margin-top: 28px;
  background: rgba(120,116,255,0.21);
  border-radius: 28px;
  padding: 26px 28px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: #202020;
}
.d-tariffs-article3 {
  background: #202020;
  border-radius: 40px;
  padding: 56px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.d-tariffs-div10 {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  background: #D3D2FF;
}
.d-tariffs-h32 {
  margin: 28px 0 0;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #fff;
}
.d-tariffs-p3 {
  margin: 18px auto 0;
  max-width: 320px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: #fff;
  opacity: .8;
}
.d-tariffs-a2 {
  margin-top: 36px;
  height: 64px;
  padding: 0 34px;
  border-radius: 47px;
  background: #fff;
  color: #000;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  transition: background .2s,transform .2s;
}
.d-tariffs-img2 {
  width: 20px;
  height: 16.7px;
  filter: invert(1);
}

/* ===== Desktop: facts ===== */
.d-facts-div1 {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 20px;
  margin-top: 48px;
}
.d-facts-div2 {
  background: #fff;
  border-radius: 32px;
  padding: 32px 32px 36px;
}
.d-facts-p1 {
  margin: 22px 0 0;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  color: #202020;
  text-wrap: pretty;
}
.d-facts-p2 {
  margin: 6px 0 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: #202020;
  opacity: .8;
  text-wrap: pretty;
}

/* ===== Desktop: me ===== */
.d-me-div1 {
  background: #fff;
  border-radius: 48px;
  padding: 80px;
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(0,1fr);
  gap: 64px;
  align-items: center;
}
.d-me-div2 {
  display: flex;
  justify-content: center;
}

/* ===== Desktop: reviews ===== */
.d-reviews-section1 {
  zoom: 0.84;
  margin: 120px auto 0;
}
.d-reviews-div1 {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 48px max(48px, calc((100% - 1248px) / 2)) 10px;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.d-reviews-div2 {
  flex-shrink: 0;
  zoom: 1.3;
  width: 194.923px;
  height: 400.547px;
  transition: transform .3s;
}
.d-reviews-div3 {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}
.d-reviews-button1 {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid #DCDADD;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s;
}
.d-reviews-img1 {
  width: 18px;
  height: 18px;
  transform: scaleX(-1);
}

/* ===== Desktop: final ===== */
.d-final-div1 {
  background: #fff;
  border-radius: 56px;
  padding: 48px;
  display: grid;
  grid-template-columns: minmax(0,1.55fr) minmax(0,1fr);
  gap: 24px;
  align-items: stretch;
}
.d-final-div2 {
  padding: 40px 32px 0 40px;
  display: flex;
  flex-direction: column;
}
.d-final-a1 {
  background: #202020;
  border-radius: 56px;
  padding: 48px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s,transform .3s;
}

/* ===== Desktop: dock ===== */
.d-dock-div1 {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.d-dock-a1 {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 26px;
  height: 60px;
  padding: 0 26px 0 36px;
  border-radius: 30px;
  background: #202020;
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s;
}

/* ===== Floating CTA button ===== */
.fab-div1 {
  position: fixed;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%,140%);
  opacity: 0;
  pointer-events: none;
  transition: transform .4s cubic-bezier(.3,.7,.2,1),opacity .25s;
  zoom: var(--m-zoom);
}
.fab-a1 {
  position: relative;
  z-index: 1;
  width: 195px;
  height: 52px;
  border-radius: 47px;
  background: #202020;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 12px 26px -12px rgba(0,0,0,.45);
  transition: background .2s;
}
.fab-div2 {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%,140%);
  opacity: 0;
  pointer-events: none;
  transition: transform .4s cubic-bezier(.3,.7,.2,1),opacity .25s;
}
.fab-a2 {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 26px;
  height: 60px;
  padding: 0 26px 0 36px;
  border-radius: 30px;
  background: #202020;
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 14px 30px -14px rgba(0,0,0,.45);
  transition: background .2s;
}

/* ===== Reviews (exported from Figma) ===== */
.rev-div1 {
  width: 194.923px;
  height: 400.547px;
  border-radius: 27.481px;
  position: relative;
}
.rev-div2 {
  width: 194.923px;
  height: 400.547px;
  overflow: hidden;
  position: relative;
}
.rev-div3 {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 194.923px;
  height: 400.547px;
  border-radius: 27.481px;
}
.rev-div4 {
  width: 194.923px;
  height: 400.547px;
  overflow: hidden;
  position: relative;
  color: rgb(120,116,255);
}
.rev-div5 {
  position: absolute;
  left: 0px;
  top: 0px;
  transform: matrix(-1,0,0,1,194.923,0);
  transform-origin: 0 0;
  width: 194.923px;
  height: 400.547px;
  border-radius: 27.481px;
  background-color: rgb(120,116,255);
}
.rev-div6 {
  position: absolute;
  left: 12.833px;
  top: 39.774px;
  width: 170px;
  height: 269px;
}
.rev-svg1 {
  position: absolute;
  left: 15.833px;
  top: 286.774px;
  width: 17.111px;
  height: 15.445px;
}
.rev-div7 {
  position: absolute;
  left: 50.833px;
  top: 286.774px;
  width: 130px;
  height: 97px;
}
.rev-div8 {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 194.923px;
  height: 400.547px;
  border-radius: 27.481px;
  background: linear-gradient(rgb(220,127,255),rgb(220,127,255)), linear-gradient(rgb(217,217,217),rgb(217,217,217));
}
.rev-div9 {
  position: absolute;
  left: 15.598px;
  top: 173.774px;
  width: 169px;
  height: 107px;
}
.rev-div10 {
  position: absolute;
  left: 18.598px;
  top: 45.774px;
  width: 160px;
  height: 128px;
}
.rev-div11 {
  position: absolute;
  left: 9.598px;
  top: 285.774px;
  width: 177px;
  height: 55px;
}
.rev-div12 {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 194.923px;
  height: 400.547px;
  border-radius: 27.481px;
  background: linear-gradient(rgb(227,242,101),rgb(227,242,101)), linear-gradient(rgb(217,217,217),rgb(217,217,217));
}
.rev-div13 {
  position: absolute;
  left: 22.598px;
  top: 38.774px;
  width: 150px;
  height: 161px;
  border-radius: 15px;
}
.rev-div14 {
  position: absolute;
  left: 18.598px;
  top: 210.774px;
  width: 164px;
  height: 152px;
}
.rev-div15 {
  width: 196.598px;
  height: 400.547px;
  overflow: hidden;
  position: relative;
  color: rgb(255,136,200);
}
.rev-div16 {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 194.923px;
  height: 400.547px;
  border-radius: 27.481px;
  background-color: rgb(56,56,56);
}
.rev-div17 {
  position: absolute;
  left: 12.598px;
  top: 47.774px;
  width: 184px;
  height: 118px;
}
.rev-div18 {
  position: absolute;
  left: 10.598px;
  top: 213.774px;
  width: 181px;
  height: 166px;
}
.rev-svg2 {
  position: absolute;
  left: 80.598px;
  top: 169.774px;
  width: 34px;
  height: 34px;
}
.rev-div19 {
  width: 196.325px;
  height: 400.547px;
  overflow: hidden;
  position: relative;
}
.rev-div20 {
  position: absolute;
  left: 1.402px;
  top: 0px;
  width: 194.923px;
  height: 400.547px;
  border-radius: 27.481px;
  background-color: rgb(120,116,255);
}
.rev-div21 {
  position: absolute;
  left: 0px;
  top: 25.774px;
  width: 195px;
  height: 278px;
}
.rev-div22 {
  position: absolute;
  left: 57px;
  top: 298.774px;
  width: 124px;
  height: 42px;
}
.rev-div23 {
  position: absolute;
  left: 18px;
  top: 338.774px;
  width: 169px;
  height: 48px;
}
.rev-div24 {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 194.923px;
  height: 400.547px;
  border-radius: 27.481px;
  background-color: rgb(235,235,235);
}
.rev-div25 {
  position: absolute;
  left: 32.598px;
  top: 30.774px;
  width: 132px;
  height: 356px;
  border-radius: 11px;
}
.rev-div26 {
  width: 196.094px;
  height: 400.547px;
  overflow: hidden;
  position: relative;
}
.rev-div27 {
  position: absolute;
  left: 0px;
  top: 0px;
  transform: matrix(-1,0,0,1,196.094,0);
  transform-origin: 0 0;
  width: 194.923px;
  height: 400.547px;
  border-radius: 27.481px;
  background-color: rgb(220,127,255);
}
.rev-div28 {
  position: absolute;
  left: 0px;
  top: 225.774px;
  width: 191px;
  height: 163px;
}
.rev-div29 {
  position: absolute;
  left: 19px;
  top: 107.774px;
  width: 157px;
  height: 110px;
}
.rev-div30 {
  position: absolute;
  left: 36px;
  top: 49.774px;
  width: 135px;
  height: 51px;
}
.rev-div31 {
  position: absolute;
  left: 0px;
  top: 0px;
  transform: matrix(-1,0,0,1,194.923,0);
  transform-origin: 0 0;
  width: 194.923px;
  height: 400.547px;
  border-radius: 27.481px;
  background-color: rgb(227,242,101);
}
.rev-div32 {
  position: absolute;
  left: 16.833px;
  top: 24.774px;
  width: 164px;
  height: 358px;
}
.rev-div33 {
  position: absolute;
  left: 0px;
  top: 0px;
  transform: matrix(-1,0,0,1,194.923,0);
  transform-origin: 0 0;
  width: 194.923px;
  height: 400.547px;
  border-radius: 27.481px;
  background-color: rgb(56,56,56);
}
.rev-div34 {
  position: absolute;
  left: 23.829px;
  top: 35.774px;
  width: 148px;
  height: 335px;
  border-radius: 10px;
}
.rev-div35 {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 194.923px;
  height: 400.547px;
  border-radius: 27.481px;
  background-color: rgb(120,116,255);
}
.rev-div36 {
  position: absolute;
  left: 12.598px;
  top: 50.774px;
  width: 176px;
  height: 189px;
}
.rev-div37 {
  position: absolute;
  left: 0.598px;
  top: 254.774px;
  width: 182px;
  height: 123px;
}
.rev-div38 {
  position: absolute;
  left: 11.598px;
  top: 35.774px;
  width: 177px;
  height: 128px;
}
.rev-div39 {
  position: absolute;
  left: 11.598px;
  top: 166.774px;
  width: 171px;
  height: 171px;
}
.rev-div40 {
  position: absolute;
  left: 16.598px;
  top: 48.774px;
  width: 168px;
  height: 214px;
}
.rev-div41 {
  position: absolute;
  left: 14.598px;
  top: 275.774px;
  width: 168px;
  height: 85px;
}
.rev-div42 {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 194.923px;
  height: 400.547px;
  overflow: hidden;
}
.rev-div43 {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 194.923px;
  height: 400.547px;
  border-radius: 27.481px;
  background-color: rgb(227,242,101);
}
.rev-div44 {
  position: absolute;
  left: 4.598px;
  top: 34px;
  width: 186px;
  height: 332px;
}
.rev-div45 {
  width: 196.599px;
  height: 400.773px;
  overflow: hidden;
  position: relative;
}
.rev-div46 {
  position: absolute;
  left: 1.676px;
  top: 0px;
  width: 194.923px;
  height: 400.547px;
  border-radius: 27.481px;
  background-color: rgb(56,56,56);
}
.rev-div47 {
  position: absolute;
  left: 0px;
  top: 0.226px;
  width: 194.923px;
  height: 400.547px;
  border-radius: 27.481px;
}
.rev-div48 {
  position: absolute;
  left: 15.598px;
  top: 32px;
  width: 166px;
  height: 112px;
}
.rev-div49 {
  position: absolute;
  left: 23.598px;
  top: 155px;
  width: 156px;
  height: 39px;
}
.rev-div50 {
  position: absolute;
  left: 78.598px;
  top: 193px;
  width: 97px;
  height: 34px;
}
.rev-div51 {
  position: absolute;
  left: 23.598px;
  top: 233px;
  width: 148px;
  height: 44px;
}
.rev-div52 {
  position: absolute;
  left: 30.598px;
  top: 277px;
  width: 148px;
  height: 59px;
}
.rev-div53 {
  position: absolute;
  left: 30.598px;
  top: 330px;
  width: 145px;
  height: 51px;
}
.rev-div54 {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 194.923px;
  height: 400.547px;
  border-radius: 27.481px;
  background: linear-gradient(rgb(120,116,255),rgb(120,116,255)), linear-gradient(rgb(217,217,217),rgb(217,217,217));
}
.rev-div55 {
  position: absolute;
  left: 19.598px;
  top: 45.774px;
  width: 152px;
  height: 324px;
  border-radius: 11px;
}
.rev-a1 {
  position: relative;
  display: block;
  aspect-ratio: 1/1.05;
  border-radius: 24px;
  background: #E3E2FF;
  overflow: hidden;
  text-decoration: none;
}
.rev-span1 {
  position: absolute;
  left: 14px;
  top: 14px;
  right: 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: #1E1E1E;
  opacity: .8;
}
.rev-img1 {
  position: absolute;
  left: 6%;
  bottom: -6%;
  width: 82%;
  display: block;
}
.rev-span2 {
  position: absolute;
  right: 9px;
  bottom: 9px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #202020;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rev-span3 {
  width: 10px;
  height: 10px;
  background: #fff;
  -webkit-mask: url(../assets/icons/arrow.svg) center/contain no-repeat;
  mask: url(../assets/icons/arrow.svg) center/contain no-repeat;
}
.rev-a2 {
  position: relative;
  display: block;
  aspect-ratio: 1/1.05;
  border-radius: 24px;
  background: #E9F587;
  overflow: hidden;
  text-decoration: none;
}
.rev-img2 {
  position: absolute;
  left: -8%;
  bottom: -22%;
  width: 120%;
  display: block;
}
.rev-div56 {
  padding: 12px 16px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.rev-div57 {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.2);
}
.rev-div58 {
  margin-top: 12px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.15;
  color: #fff;
}
.rev-span4 {
  margin-top: 14px;
  height: 52px;
  border-radius: 47px;
  background: #DC7FFF;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}
.rev-div59 {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.rev-div60 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  background: #D3D2FF;
}
.rev-img3 {
  width: 24px;
  height: 22px;
  margin-top: 4px;
}
.rev-h21 {
  margin: 32px 0 0;
  max-width: 480px;
  font-size: 44px;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #000;
  text-wrap: balance;
}
.rev-div61 {
  padding-top: 112px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.rev-p1 {
  margin: 0;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
  color: #8E8E8E;
  text-wrap: pretty;
}
.rev-div62 {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: logoMarquee 70s linear infinite;
}
.rev-img4 {
  width: 140px;
  height: 140px;
  flex-shrink: 0;
  border-radius: 44px;
  display: block;
}
.rev-p2 {
  margin: 0;
  font-size: 40px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #8E8E8E;
}
.rev-a3 {
  height: 68px;
  padding: 0 34px;
  border-radius: 47px;
  background: #202020;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  transition: background .2s,transform .2s;
}
.rev-img5 {
  width: 24px;
  height: 22px;
}
.rev-p3 {
  margin: 26px 0 0;
  font-size: 44px;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #000;
}
.rev-p4 {
  margin: 8px 0 0;
  max-width: 560px;
  font-size: 44px;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #000;
  text-wrap: balance;
}
.rev-p5 {
  margin: 56px 0 0;
  max-width: 520px;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
  color: #000;
  text-wrap: pretty;
}
.rev-p6 {
  margin: 6px 0 0;
  max-width: 520px;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
  color: #000;
  text-wrap: pretty;
}
.rev-div63 {
  position: relative;
  width: 320px;
  height: 366px;
  cursor: pointer;
}
.rev-div64 {
  position: absolute;
  inset: 0;
  border-radius: 48px;
  overflow: hidden;
  background: #D9D9D9;
  box-shadow: 0 30px 60px -34px rgba(30,30,30,.5);
  opacity: 1;
  z-index: 9;
  transform: rotate(-5deg);
  transition: transform .5s cubic-bezier(.3,.7,.2,1),opacity .4s;
}
.rev-div65 {
  position: absolute;
  inset: 0;
  border-radius: 48px;
  overflow: hidden;
  background: #CECECE;
  box-shadow: 0 12px 28px -20px rgba(30,30,30,.3);
  opacity: 1;
  z-index: 8;
  transform: rotate(4deg) translate(9%,-2%);
  transition: transform .5s cubic-bezier(.3,.7,.2,1),opacity .4s;
}
.rev-div66 {
  position: absolute;
  inset: 0;
  border-radius: 48px;
  overflow: hidden;
  background: #C4C4C4;
  box-shadow: 0 12px 28px -20px rgba(30,30,30,.3);
  opacity: 1;
  z-index: 7;
  transform: rotate(11deg) translate(18%,1%);
  transition: transform .5s cubic-bezier(.3,.7,.2,1),opacity .4s;
}
.rev-div67 {
  position: absolute;
  inset: 0;
  border-radius: 48px;
  overflow: hidden;
  background: #C4C4C4;
  box-shadow: none;
  opacity: 0;
  z-index: 6;
  transform: rotate(11deg) translate(18%,1%);
  transition: transform .5s cubic-bezier(.3,.7,.2,1),opacity .4s;
}
.rev-div68 {
  position: absolute;
  inset: 0;
  border-radius: 48px;
  overflow: hidden;
  background: #C4C4C4;
  box-shadow: none;
  opacity: 0;
  z-index: 5;
  transform: rotate(11deg) translate(18%,1%);
  transition: transform .5s cubic-bezier(.3,.7,.2,1),opacity .4s;
}
.rev-div69 {
  position: absolute;
  inset: 0;
  border-radius: 48px;
  overflow: hidden;
  background: #C4C4C4;
  box-shadow: none;
  opacity: 0;
  z-index: 4;
  transform: rotate(11deg) translate(18%,1%);
  transition: transform .5s cubic-bezier(.3,.7,.2,1),opacity .4s;
}
.rev-div70 {
  position: absolute;
  inset: 0;
  border-radius: 48px;
  overflow: hidden;
  background: #C4C4C4;
  box-shadow: none;
  opacity: 0;
  z-index: 3;
  transform: rotate(11deg) translate(18%,1%);
  transition: transform .5s cubic-bezier(.3,.7,.2,1),opacity .4s;
}
.rev-div71 {
  position: absolute;
  inset: 0;
  border-radius: 48px;
  overflow: hidden;
  background: #C4C4C4;
  box-shadow: none;
  opacity: 0;
  z-index: 2;
  transform: rotate(11deg) translate(18%,1%);
  transition: transform .5s cubic-bezier(.3,.7,.2,1),opacity .4s;
}
.rev-div72 {
  position: absolute;
  inset: 0;
  border-radius: 48px;
  overflow: hidden;
  background: #C4C4C4;
  box-shadow: none;
  opacity: 0;
  z-index: 1;
  transform: rotate(11deg) translate(18%,1%);
  transition: transform .5s cubic-bezier(.3,.7,.2,1),opacity .4s;
}
.rev-h22 {
  margin: 0;
  font-size: 44px;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #000;
  text-wrap: balance;
}
.rev-p7 {
  margin: 28px 0 0;
  max-width: 600px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  color: #1E1E1E;
  opacity: .8;
  text-wrap: pretty;
}
.rev-div73 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 20px;
  margin-top: 32px;
  margin-left: -8px;
}
.rev-a4 {
  position: relative;
  display: block;
  aspect-ratio: 1/0.93;
  border-radius: 40px;
  background: #E3E2FF;
  overflow: hidden;
  text-decoration: none;
  transition: transform .3s;
}
.rev-span5 {
  position: absolute;
  left: 30px;
  top: 30px;
  right: 30px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: #1E1E1E;
  opacity: .8;
}
.rev-img6 {
  position: absolute;
  left: 8%;
  bottom: -6%;
  width: 78%;
  display: block;
}
.rev-span6 {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #202020;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rev-span7 {
  width: 16px;
  height: 16px;
  background: #fff;
  -webkit-mask: url(../assets/icons/arrow.svg) center/contain no-repeat;
  mask: url(../assets/icons/arrow.svg) center/contain no-repeat;
}
.rev-a5 {
  position: relative;
  display: block;
  aspect-ratio: 1/0.93;
  border-radius: 40px;
  background: #E9F587;
  overflow: hidden;
  text-decoration: none;
  transition: transform .3s;
}
.rev-img7 {
  position: absolute;
  left: -8%;
  bottom: -28%;
  width: 118%;
  display: block;
}
.rev-div74 {
  padding: 24px 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.rev-div75 {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.2);
}
.rev-div76 {
  margin-top: 18px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.15;
  color: #fff;
}
.rev-span8 {
  margin-top: 24px;
  height: 64px;
  border-radius: 47px;
  background: #DC7FFF;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
}

/* ===== Case popups: overlay ===== */
.pop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(106,106,106,0.94);
  transition: opacity .3s;
}

/* ===== Case popups: mobile ===== */
.pop-m-div1 {
  width: 320px;
  margin: 0 auto;
  padding: 18px 12px 13px 12px;
  box-sizing: border-box;
  zoom: var(--m-zoom);
}
.pop-m-div2 {
  width: 297px;
  border-radius: 23px;
  background: rgb(255,255,255);
  padding: 26px 0 28px 21px;
  box-sizing: border-box;
  position: relative;
  transition: transform .5s cubic-bezier(.3,.7,.2,1);
}
.pop-m-div3 {
  position: sticky;
  top: 26px;
  height: 0;
  z-index: 5;
}
.pop-m-button1 {
  position: absolute;
  right: 14px;
  top: -12px;
  width: 26px;
  height: 26px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: rgb(237,237,237);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px -2px rgba(0,0,0,.18);
  transition: background .2s;
}
.pop-m-svg1 {
  opacity: .45;
}
.pop-m-div4 {
  display: flex;
  align-items: center;
  gap: 7.5px;
  padding-left: .5px;
}
.pop-m-img1 {
  width: 15.043px;
  height: 15.043px;
}
.pop-m-div5 {
  display: flex;
  gap: 3.5px;
  margin-top: 17px;
  margin-left: -.5px;
}
.pop-m-span1 {
  display: inline-flex;
  align-items: center;
  gap: 3.194px;
  height: 24px;
  padding: 7px 6px;
  box-sizing: border-box;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: .88;
  letter-spacing: -0.03em;
  white-space: nowrap;
  background: rgba(120,116,255,0.21);
  color: rgb(120,116,255);
}
.pop-m-span2 {
  display: inline-flex;
  align-items: center;
  gap: 3.194px;
  height: 24px;
  padding: 7px 6px;
  box-sizing: border-box;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: .88;
  letter-spacing: -0.03em;
  white-space: nowrap;
  background: rgba(220,127,255,0.19);
  color: rgb(220,127,255);
}
.pop-m-span3 {
  display: inline-flex;
  align-items: center;
  gap: 3.194px;
  height: 24px;
  padding: 7px 6px;
  box-sizing: border-box;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: .88;
  letter-spacing: -0.03em;
  white-space: nowrap;
  background: rgba(227,242,101,0.55);
  color: rgb(142,159,0);
}
.pop-m-p1 {
  margin: 22px 0 0;
  width: 258px;
  opacity: .8;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: rgb(30,30,30);
  white-space: pre-line;
}
.pop-m-span4 {
  color: #8E8E8E;
  font-weight: 500;
}
.pop-m-div6 {
  margin-top: 17px;
}
.pop-m-div7 {
  width: 254px;
  height: 254px;
  border-radius: 25px;
  overflow: hidden;
  background: rgb(8,13,17);
  transform: translateZ(0);
}
.pop-m-div8 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  box-sizing: border-box;
}
.pop-m-video1 {
  display: block;
  max-width: 100%;
  max-height: 100%;
  border-radius: 14px;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.35);
}
.pop-m-div9 {
  display: flex;
  justify-content: center;
  width: 254px;
  gap: 3px;
  margin-top: 11px;
}
.pop-m-button2 {
  width: 26px;
  height: 26px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: rgb(237,237,237);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.pop-m-svg2 {
  opacity: .3;
}
.pop-m-p2 {
  margin: 14px 0 0 1px;
  width: 258px;
  opacity: .8;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: rgb(30,30,30);
  white-space: pre-line;
}
.pop-m-div10 {
  margin-top: 19px;
  width: 258px;
}
.pop-m-div11 {
  opacity: .8;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
  color: rgb(142,142,142);
  white-space: nowrap;
}
.pop-m-div12 {
  margin-top: 2px;
  opacity: .8;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: rgb(30,30,30);
}
.pop-m-div13 {
  margin: 11px 0 0 2px;
}
.pop-m-div14 {
  display: flex;
  justify-content: center;
  gap: 3px;
  margin-top: 10px;
}
.pop-m-div15 {
  margin-top: 26px;
  width: 258px;
}
.pop-m-div16 {
  width: 254px;
  height: 254px;
  border-radius: 25px;
  overflow: hidden;
  background: rgb(20,16,10);
  transform: translateZ(0);
}
.pop-m-video2 {
  display: block;
  max-width: 100%;
  max-height: 100%;
  border-radius: 14px;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.5);
}
.pop-m-div17 {
  width: 254px;
  height: 254px;
  border-radius: 25px;
  overflow: hidden;
  background: rgb(4,6,10);
  transform: translateZ(0);
}
.pop-m-div18 {
  margin-top: 24px;
  width: 254px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pop-m-a1 {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  height: 48px;
  border-radius: 24px;
  background: #202020;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s;
}
.pop-m-div19 {
  width: 254px;
  height: 254px;
  border-radius: 25px;
  overflow: hidden;
  background: rgb(9,3,30);
  transform: translateZ(0);
}
.pop-m-p3 {
  margin: 22px 0 0 1px;
  width: 258px;
  opacity: .8;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: rgb(30,30,30);
  white-space: pre-line;
}
.pop-m-div20 {
  width: 254px;
  height: 254px;
  border-radius: 25px;
  overflow: hidden;
  background: rgb(30,30,30);
  transform: translateZ(0);
}
.pop-m-div21 {
  width: 254px;
  height: 254px;
  border-radius: 25px;
  overflow: hidden;
  background: rgb(24,40,26);
  transform: translateZ(0);
}
.pop-m-div22 {
  width: 254px;
  height: 254px;
  border-radius: 25px;
  overflow: hidden;
  background: rgb(150,112,78);
  transform: translateZ(0);
}
.pop-m-div23 {
  width: 254px;
  height: 254px;
  border-radius: 25px;
  overflow: hidden;
  background: rgb(227,227,225);
  transform: translateZ(0);
}
.pop-m-span5 {
  display: inline-flex;
  align-items: center;
  gap: 3.194px;
  height: 24px;
  padding: 7px 6px;
  box-sizing: border-box;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: .88;
  letter-spacing: -0.03em;
  white-space: nowrap;
  background: rgba(255,173,8,0.14);
  color: rgb(255,173,8);
}
.pop-m-div24 {
  width: 254px;
  height: 254px;
  border-radius: 25px;
  overflow: hidden;
  background: #CEC3F5;
  transform: translateZ(0);
}
.pop-m-video3 {
  display: block;
  max-width: 100%;
  max-height: 100%;
  border-radius: 14px;
  box-shadow: 0 10px 24px -12px rgba(60,40,140,.35);
}

/* ===== Case popups: desktop ===== */
.pop-d-div1 {
  padding: 48px 40px;
  box-sizing: border-box;
}
.pop-d-div2 {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  border-radius: 36px;
  background: #fff;
  padding: 52px 64px 64px;
  box-sizing: border-box;
  transition: transform .5s cubic-bezier(.3,.7,.2,1);
}
.pop-d-div3 {
  position: sticky;
  top: 52px;
  height: 0;
  z-index: 5;
}
.pop-d-button1 {
  position: absolute;
  right: -40px;
  top: -28px;
  width: 44px;
  height: 44px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: rgb(237,237,237);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px -4px rgba(0,0,0,.18);
  transition: background .2s,transform .2s;
}
.pop-d-svg1 {
  opacity: .5;
}
.pop-d-div4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-right: 40px;
}
.pop-d-div5 {
  display: flex;
  align-items: center;
  gap: 14px;
}
.pop-d-div6 {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #D9D9D9;
}
.pop-d-div7 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pop-d-span1 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  color: #1E1E1E;
  opacity: .8;
  white-space: nowrap;
}
.pop-d-img1 {
  width: 20px;
  height: 20px;
}
.pop-d-div8 {
  display: flex;
  gap: 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: #8E8E8E;
  white-space: nowrap;
}
.pop-d-div9 {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pop-d-span2 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: .88;
  letter-spacing: -0.03em;
  white-space: nowrap;
  background: rgba(120,116,255,0.21);
  color: rgb(120,116,255);
}
.pop-d-span3 {
  width: 13px;
  height: 13px;
  background: currentColor;
  -webkit-mask: url(../assets/icons/brush.svg) center/contain no-repeat;
  mask: url(../assets/icons/brush.svg) center/contain no-repeat;
}
.pop-d-span4 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: .88;
  letter-spacing: -0.03em;
  white-space: nowrap;
  background: rgba(220,127,255,0.19);
  color: rgb(220,127,255);
}
.pop-d-span5 {
  width: 13px;
  height: 13px;
  background: currentColor;
  -webkit-mask: url(../assets/icons/folder.svg) center/contain no-repeat;
  mask: url(../assets/icons/folder.svg) center/contain no-repeat;
}
.pop-d-span6 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: .88;
  letter-spacing: -0.03em;
  white-space: nowrap;
  background: rgba(227,242,101,0.55);
  color: rgb(142,159,0);
}
.pop-d-span7 {
  width: 13px;
  height: 13px;
  background: currentColor;
  -webkit-mask: url(../assets/icons/laptop.svg) center/contain no-repeat;
  mask: url(../assets/icons/laptop.svg) center/contain no-repeat;
}
.pop-d-div10 {
  height: 1px;
  background: rgba(30,30,30,.07);
  margin: 44px 0 48px;
}
.pop-d-div11 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 64px 48px;
}
.pop-d-div12 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  min-width: 0;
}
.pop-d-div13 {
  max-width: 400px;
}
.pop-d-h31 {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #1E1E1E;
  opacity: .85;
}
.pop-d-p1 {
  margin: 16px 0 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
  color: #8E8E8E;
  text-wrap: pretty;
}
.pop-d-div14 {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 34px;
  overflow: hidden;
  background: rgb(8,13,17);
  transform: translateZ(0);
}
.pop-d-div15 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}
.pop-d-video1 {
  display: block;
  max-width: 100%;
  max-height: 100%;
  border-radius: 20px;
  box-shadow: 0 14px 32px -16px rgba(0,0,0,.4);
}
.pop-d-div16 {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
}
.pop-d-button2 {
  width: 40px;
  height: 40px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: rgb(237,237,237);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.pop-d-svg2 {
  opacity: .35;
}
.pop-d-div17 {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(30,30,30,.07);
}
.pop-d-div18 {
  margin-top: 4px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: #1E1E1E;
  opacity: .85;
}
.pop-d-div19 {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 34px;
  overflow: hidden;
  background: rgb(20,16,10);
  transform: translateZ(0);
}
.pop-d-video2 {
  display: block;
  max-width: 100%;
  max-height: 100%;
  border-radius: 20px;
  box-shadow: 0 14px 32px -16px rgba(0,0,0,.55);
}
.pop-d-div20 {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 34px;
  overflow: hidden;
  background: rgb(4,6,10);
  transform: translateZ(0);
}
.pop-d-div21 {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pop-d-a1 {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 64px;
  padding: 0 34px;
  border-radius: 47px;
  background: #202020;
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s;
}
.pop-d-div22 {
  margin-top: -14px;
  padding: 20px 24px 8px;
  border-radius: 0 0 20px 20px;
  background: rgb(227,242,101);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #6C7713;
  white-space: nowrap;
}
.pop-d-div23 {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 34px;
  overflow: hidden;
  background: rgb(9,3,30);
  transform: translateZ(0);
}
.pop-d-div24 {
  display: grid;
  grid-template-columns: minmax(0,1fr) 440px;
  gap: 64px;
  align-items: center;
}
.pop-d-div25 {
  width: 440px;
  height: 440px;
  border-radius: 34px;
  overflow: hidden;
  background: rgb(30,30,30);
  transform: translateZ(0);
}
.pop-d-div26 {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 34px;
  overflow: hidden;
  background: rgb(24,40,26);
  transform: translateZ(0);
}
.pop-d-div27 {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 34px;
  overflow: hidden;
  background: rgb(150,112,78);
  transform: translateZ(0);
}
.pop-d-div28 {
  width: 440px;
  height: 440px;
  border-radius: 34px;
  overflow: hidden;
  background: rgb(227,227,225);
  transform: translateZ(0);
}
.pop-d-div29 {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 34px;
  overflow: hidden;
  background: rgb(30,30,30);
  transform: translateZ(0);
}
.pop-d-span8 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: .88;
  letter-spacing: -0.03em;
  white-space: nowrap;
  background: rgba(255,173,8,0.14);
  color: rgb(255,173,8);
}
.pop-d-span9 {
  width: 13px;
  height: 13px;
  background: currentColor;
  -webkit-mask: url(../assets/icons/stack.svg) center/contain no-repeat;
  mask: url(../assets/icons/stack.svg) center/contain no-repeat;
}
.pop-d-div30 {
  width: 440px;
  height: 440px;
  border-radius: 34px;
  overflow: hidden;
  background: #CEC3F5;
  transform: translateZ(0);
}
.pop-d-video3 {
  display: block;
  max-width: 100%;
  max-height: 100%;
  border-radius: 20px;
  box-shadow: 0 14px 32px -16px rgba(60,40,140,.4);
}

/* ===== "Гортайте нижче" hint ===== */
.more-div1 {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 1001;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px 0 18px;
  border-radius: 20px;
  background: #202020;
  color: #fff;
  font-family: 'TT Commons Pro',-apple-system,'Segoe UI',sans-serif;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(0,0,0,.5);
  transition: opacity .25s;
  opacity: 0;
  pointer-events: none;
}
.more-span1 {
  display: flex;
  animation: popMoreBob 1.2s ease-in-out infinite;
}

/* ===== Shared between layouts ===== */
.ui-img1 {
  background: #D3D2FF;
}
.ui-span1 {
  color: #2C2C2C;
}
.ui-div1 {
  position: absolute;
  left: 50%;
  top: 0;
  width: 0;
  height: 100%;
}
.ui-img2 {
  width: 16px;
  height: 13.33px;
}
.ui-span2 {
  font-weight: 600;
  color: #2C2C2C;
}
.ui-div2 {
  display: flex;
  align-items: center;
  gap: 7px;
}
.ui-div3 {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #D9D9D9;
}
.ui-div4 {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ui-div5 {
  display: flex;
  align-items: center;
  gap: 5px;
}
.ui-span3 {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: #1E1E1E;
  opacity: .8;
  white-space: nowrap;
}
.ui-div6 {
  display: flex;
  gap: 10px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
  color: #8E8E8E;
  white-space: nowrap;
}
.ui-span4 {
  font-weight: 600;
  color: #1E1E1E;
}
.ui-span5 {
  width: 10px;
  height: 10px;
  background: currentColor;
  -webkit-mask: url(../assets/icons/brush.svg) center/contain no-repeat;
  mask: url(../assets/icons/brush.svg) center/contain no-repeat;
}
.ui-span6 {
  width: 10px;
  height: 10px;
  background: currentColor;
  -webkit-mask: url(../assets/icons/folder.svg) center/contain no-repeat;
  mask: url(../assets/icons/folder.svg) center/contain no-repeat;
}
.ui-span7 {
  width: 10px;
  height: 10px;
  background: currentColor;
  -webkit-mask: url(../assets/icons/laptop.svg) center/contain no-repeat;
  mask: url(../assets/icons/laptop.svg) center/contain no-repeat;
}
.ui-span8 {
  width: 10px;
  height: 10px;
  background: currentColor;
  -webkit-mask: url(../assets/icons/stack.svg) center/contain no-repeat;
  mask: url(../assets/icons/stack.svg) center/contain no-repeat;
}
.ui-div7 {
  min-width: 0;
}
.ui-img3 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ui-strong1 {
  font-weight: 700;
}
.ui-div8 {
  margin-top: -14px;
  padding: 17px 16px 5px;
  border-radius: 0 0 15px 15px;
  background: rgb(227,242,101);
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  color: #6C7713;
  white-space: nowrap;
}
.ui-span9 {
  width: 11px;
  height: 11px;
  background: #6C7713;
  -webkit-mask: url(../assets/icons/calendar.svg) center/contain no-repeat;
  mask: url(../assets/icons/calendar.svg) center/contain no-repeat;
}
.ui-img4 {
  width: 21px;
  height: 17.5px;
}
.ui-div9 {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: #8E8E8E;
}
.ui-img5 {
  width: 22px;
  height: 18.33px;
}
.ui-div10 {
  margin-top: -14px;
  padding: 20px 22px 8px;
  border-radius: 0 0 20px 20px;
  background: rgb(227,242,101);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #6C7713;
  white-space: nowrap;
}
.ui-span10 {
  width: 14px;
  height: 14px;
  background: #6C7713;
  -webkit-mask: url(../assets/icons/calendar.svg) center/contain no-repeat;
  mask: url(../assets/icons/calendar.svg) center/contain no-repeat;
}
.ui-div11 {
  display: flex;
  height: 100%;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  transition: transform .5s cubic-bezier(.3,.7,.2,1);
  transform: translateX(0%);
}
.ui-div12 {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  background: #46AE7A url(../assets/pop-kyrylo-brand-greenbg.webp) center/cover no-repeat;
}
.ui-div13 {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  background: rgb(8,13,17);
}
.ui-video1 {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ui-div14 {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  background: rgb(20,16,10) url(../assets/pop-kyrylo-hp-bg.webp) center/cover no-repeat;
}
.ui-div15 {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  background: rgb(4,6,10) url(../assets/pop-kyrylo-sp-bg.webp) center/cover no-repeat;
}
.ui-div16 {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  background: rgb(9,3,30) url(../assets/pop-vlad-bg.webp) center/cover no-repeat;
}
.ui-div17 {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  background: rgb(9,3,30) url(../assets/pop-ai-bg.webp) center/cover no-repeat;
}
.ui-div18 {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  background: rgb(30,30,30) url(../assets/pop-egor-bg.webp) center/cover no-repeat;
}
.ui-div19 {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  background: rgb(24,40,26) url(../assets/pop-nik-bg.webp) center/cover no-repeat;
}
.ui-div20 {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  background: rgb(150,112,78) url(../assets/pop-nik2-bg2.webp) center/cover no-repeat;
}
.ui-div21 {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  background: rgb(227,227,225) url(../assets/pop-prus-bg.webp) center/cover no-repeat;
}
.ui-div22 {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  background: rgb(12,12,12);
}
.ui-div23 {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  background: #CEC3F5;
}