/* ==========================================================
   NOYTRIX PRODUCTS V23
   DIGITAL BILLBOARD CAROUSEL
   ========================================================== */


#screen-products.active {
  overflow: hidden !important;

  padding: 0 !important;
}


.products-v23 {
  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  padding:
    4px 0 0;

  overflow: hidden;
}


/* ==========================================================
   STAGE
   ========================================================== */

.products-stage-v23 {
  position: relative;

  width: 100%;
  height: 100%;

  min-height: 0;

  overflow: hidden;

  border:
    1px solid
    rgba(48,74,113,.74);

  border-radius:
    18px;

  background:
    #061225;

  box-shadow:
    0 30px 100px
    rgba(0,0,0,.32),

    0 12px 35px
    rgba(0,0,0,.22),

    inset 0 1px 0
    rgba(255,255,255,.035);

  user-select: none;

  touch-action:
    pan-y;

  isolation: isolate;
}


.products-stage-v23::before {
  content: '';

  position: absolute;

  z-index: 50;

  pointer-events: none;

  inset: 0;

  border-radius:
    inherit;

  box-shadow:
    inset 0 0 100px
    rgba(0,0,0,.18);
}


.products-stage-v23.dragging {
  cursor: grabbing;
}


/* ==========================================================
   SLIDES
   ========================================================== */

.products-slides-v23 {
  width: 100%;
  height: 100%;

  display: flex;

  transition:
    transform
    .85s
    cubic-bezier(.22,.83,.24,1);

  will-change:
    transform;
}


.product-slide-v23 {
  position: relative;

  width: 100%;
  height: 100%;

  flex: 0 0 100%;

  min-width: 0;
  min-height: 0;

  display: grid;

  grid-template-columns:
    minmax(0,1.02fr)
    minmax(420px,.98fr);

  align-items: center;

  gap:
    clamp(20px,3vw,55px);

  padding:
    clamp(32px,4.5vw,78px)
    clamp(40px,5vw,90px);

  overflow: hidden;

  cursor: pointer;

  isolation: isolate;
}


/* ==========================================================
   BILLBOARD GRID / NOISE
   ========================================================== */

.product-slide-grid-v23 {
  position: absolute;

  z-index: -2;

  inset: 0;

  opacity: .13;

  background-image:
    linear-gradient(
      rgba(255,255,255,.08)
      1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,.06)
      1px,
      transparent 1px
    );

  background-size:
    70px 70px;

  mask-image:
    linear-gradient(
      90deg,
      black,
      transparent 90%
    );
}


.product-slide-noise-v23 {
  position: absolute;

  z-index: 30;

  inset: 0;

  pointer-events: none;

  opacity: .025;

  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}


/* ==========================================================
   THEMES
   ========================================================== */


/* MOBILE */

.theme-mobile {
  background:
    radial-gradient(
      circle at 78% 38%,
      rgba(46,115,255,.28),
      transparent 27%
    ),

    radial-gradient(
      circle at 84% 64%,
      rgba(0,211,255,.13),
      transparent 32%
    ),

    linear-gradient(
      117deg,
      #030b19 0%,
      #06152c 47%,
      #061c42 100%
    );
}


.theme-mobile::before {
  content: '';

  position: absolute;

  z-index: -3;

  width: 800px;
  height: 800px;

  right: -260px;
  top: -290px;

  border-radius: 50%;

  border:
    1px solid
    rgba(68,139,255,.11);

  box-shadow:
    0 0 0 90px
    rgba(51,120,255,.025),

    0 0 0 180px
    rgba(51,120,255,.017);
}


/* EXTENSION */

.theme-extension {
  background:
    radial-gradient(
      circle at 78% 47%,
      rgba(255,175,17,.22),
      transparent 30%
    ),

    radial-gradient(
      circle at 56% 20%,
      rgba(255,79,55,.07),
      transparent 35%
    ),

    linear-gradient(
      116deg,
      #070b12 0%,
      #101015 49%,
      #261404 100%
    );
}


.theme-extension::before {
  content: '';

  position: absolute;

  z-index: -3;

  width: 600px;
  height: 600px;

  right: -140px;
  bottom: -210px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255,181,25,.18),
      transparent 67%
    );

  filter:
    blur(30px);
}


/* TELEGRAM */

.theme-telegram {
  background:
    radial-gradient(
      circle at 78% 43%,
      rgba(0,171,255,.27),
      transparent 31%
    ),

    radial-gradient(
      circle at 70% 70%,
      rgba(61,126,255,.13),
      transparent 33%
    ),

    linear-gradient(
      118deg,
      #030a15 0%,
      #05192c 48%,
      #032a48 100%
    );
}


/* WEB */

.theme-web {
  background:
    radial-gradient(
      circle at 72% 48%,
      rgba(65,95,255,.22),
      transparent 33%
    ),

    radial-gradient(
      circle at 82% 25%,
      rgba(255,181,31,.08),
      transparent 26%
    ),

    linear-gradient(
      118deg,
      #030817 0%,
      #07132c 50%,
      #0b1742 100%
    );
}


/* ==========================================================
   COPY
   ========================================================== */

.product-copy-v23 {
  position: relative;

  z-index: 5;

  max-width:
    780px;
}


.product-number-v23 {
  display: block;

  margin-bottom:
    25px;

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

  font-size:
    12px;

  font-weight:
    800;

  letter-spacing:
    .18em;
}


.product-eyebrow-v23 {
  display: inline-flex;

  align-items: center;

  min-height:
    30px;

  padding:
    0 11px;

  border:
    1px solid
    rgba(255,188,42,.28);

  border-radius:
    999px;

  background:
    rgba(255,181,31,.035);

  color:
    #ffba2b;

  font-size:
    11px;

  font-weight:
    900;

  letter-spacing:
    .13em;

  box-shadow:
    0 0 30px
    rgba(255,181,31,.035);
}


.product-copy-v23 h2 {
  margin:
    22px 0 0;

  color:
    #f5f7fb;

  font-size:
    clamp(
      49px,
      5.2vw,
      92px
    );

  line-height:
    .94;

  letter-spacing:
    -.065em;

  font-weight:
    900;

  text-transform:
    uppercase;

  text-shadow:
    0 10px 25px
    rgba(0,0,0,.38),

    0 35px 80px
    rgba(0,0,0,.35);
}


.product-copy-v23 h2 em {
  display: block;

  margin-top:
    4px;

  color:
    #ffb927;

  font-style:
    normal;

  background:
    linear-gradient(
      180deg,
      #ffd760,
      #ffab12
    );

  -webkit-background-clip:
    text;

  background-clip:
    text;

  -webkit-text-fill-color:
    transparent;

  filter:
    drop-shadow(
      0 9px 23px
      rgba(255,164,11,.12)
    );
}


.theme-telegram
.product-copy-v23 h2 em {
  background:
    linear-gradient(
      180deg,
      #77d8ff,
      #2aaeff
    );

  -webkit-background-clip:
    text;

  background-clip:
    text;
}


.theme-mobile
.product-copy-v23 h2 em,
.theme-web
.product-copy-v23 h2 em {
  background:
    linear-gradient(
      180deg,
      #80b8ff,
      #3a8fff
    );

  -webkit-background-clip:
    text;

  background-clip:
    text;
}


.product-copy-v23 > p {
  max-width:
    690px;

  margin:
    25px 0 0;

  color:
    #a9b5c6;

  font-size:
    clamp(
      14px,
      1.15vw,
      18px
    );

  line-height:
    1.55;

  font-weight:
    600;
}


/* ==========================================================
   CTA
   ========================================================== */

.product-actions-v23 {
  display: flex;

  align-items: center;

  gap:
    18px;

  margin-top:
    31px;
}


.product-cta-v23 {
  min-width:
    205px;

  height:
    51px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap:
    15px;

  padding:
    0 9px 0 18px;

  border:
    1px solid
    rgba(255,219,104,.45);

  border-radius:
    10px;

  background:
    linear-gradient(
      135deg,
      #ffd75b,
      #ffad12
    );

  color:
    #10151c;

  font-size:
    12px;

  font-weight:
    850;

  box-shadow:
    0 15px 40px
    rgba(255,165,10,.18),

    0 0 40px
    rgba(255,181,31,.04),

    inset 0 1px 0
    rgba(255,255,255,.55);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}


.theme-mobile
.product-cta-v23,
.theme-telegram
.product-cta-v23,
.theme-web
.product-cta-v23 {
  border-color:
    rgba(103,175,255,.48);

  background:
    linear-gradient(
      135deg,
      #79c3ff,
      #328cff
    );

  box-shadow:
    0 15px 40px
    rgba(52,137,255,.18),

    inset 0 1px 0
    rgba(255,255,255,.48);
}


.product-cta-v23 b {
  width:
    34px;

  height:
    34px;

  display: grid;

  place-items: center;

  border-radius:
    8px;

  background:
    rgba(0,0,0,.11);

  font-size:
    17px;
}


.product-cta-v23:hover {
  transform:
    translateY(-2px)
    scale(1.01);

  box-shadow:
    0 20px 50px
    rgba(255,165,10,.28);
}


.product-actions-v23 > small {
  max-width:
    250px;

  color:
    #74839a;

  font-size:
    10px !important;

  font-weight:
    700 !important;

  line-height:
    1.4;
}


/* ==========================================================
   MASSIVE BACKGROUND WORD
   ========================================================== */

.product-massive-word-v23 {
  position: absolute;

  z-index: -1;

  left:
    clamp(30px,4vw,70px);

  bottom:
    -1.5vw;

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

  font-size:
    clamp(
      120px,
      15vw,
      260px
    );

  line-height:
    .78;

  font-weight:
    950;

  letter-spacing:
    -.08em;

  pointer-events:
    none;
}


/* ==========================================================
   VISUAL AREA
   ========================================================== */

.product-visual-v23 {
  position: relative;

  z-index: 4;

  width: 100%;
  height:
    min(610px,68vh);

  display: grid;

  place-items: center;

  perspective:
    1500px;
}


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

.product-phone-v23 {
  position: relative;

  width:
    min(290px,18vw);

  aspect-ratio:
    .51;

  border:
    5px solid
    #263a59;

  border-radius:
    39px;

  background:
    linear-gradient(
      160deg,
      #0a1831,
      #040b17
    );

  box-shadow:
    0 45px 100px
    rgba(0,0,0,.58),

    0 0 80px
    rgba(53,131,255,.15),

    inset 0 0 0 1px
    rgba(255,255,255,.05);

  transform:
    rotateY(-12deg)
    rotateX(3deg)
    rotateZ(3deg);

  animation:
    productPhoneFloat
    5s ease-in-out
    infinite;
}


@keyframes productPhoneFloat {

  0%,
  100% {
    transform:
      rotateY(-12deg)
      rotateX(3deg)
      rotateZ(3deg)
      translateY(0);
  }

  50% {
    transform:
      rotateY(-9deg)
      rotateX(1deg)
      rotateZ(2deg)
      translateY(-13px);
  }
}


.product-phone-top-v23 {
  position: absolute;

  z-index: 3;

  top: 8px;
  left: 50%;

  width: 86px;
  height: 22px;

  transform:
    translateX(-50%);

  border-radius:
    20px;

  background:
    #02050a;
}


.product-phone-screen-v23 {
  position: absolute;

  inset:
    11px;

  padding:
    70px 19px 20px;

  overflow: hidden;

  border-radius:
    30px;

  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(53,127,255,.18),
      transparent 37%
    ),

    linear-gradient(
      180deg,
      #071a38,
      #040b17
    );
}


.phone-brand-v23 {
  position: absolute;

  top: 32px;
  left: 19px;

  display: flex;

  align-items: center;

  gap: 7px;

  color:
    #dce8fa;

  font-size:
    10px;

  font-weight:
    850;

  letter-spacing:
    .12em;
}


.phone-brand-v23 span {
  color:
    #58a4ff;
}


.phone-status-v23 {
  width:
    max-content;

  display: flex;

  align-items: center;

  gap: 6px;

  margin:
    32px auto 23px;

  color:
    #72b8ff;

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    .10em;
}


.phone-status-v23 span {
  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    #36d990;

  box-shadow:
    0 0 9px
    rgba(54,217,144,.55);
}


.product-phone-screen-v23 > strong {
  display: block;

  color:
    #f5f8fd;

  font-size:
    clamp(
      54px,
      4vw,
      72px
    );

  line-height:
    1;

  text-align:
    center;
}


.product-phone-screen-v23 > small {
  display: block;

  margin-top:
    5px;

  color:
    #69809c;

  font-size:
    8px !important;

  letter-spacing:
    .15em;

  text-align:
    center;
}


.phone-line-v23 {
  height:
    7px;

  margin-top:
    34px;

  border-radius:
    7px;

  background:
    #173963;
}


.phone-line-v23.short {
  width:
    68%;

  margin-top:
    12px;
}


.phone-safe-v23 {
  margin-top:
    34px;

  padding:
    15px 10px;

  border:
    1px solid
    rgba(45,218,143,.25);

  border-radius:
    9px;

  background:
    rgba(45,218,143,.055);

  color:
    #48dd96;

  font-size:
    9px;

  font-weight:
    800;

  text-align:
    center;
}


/* floating */

.product-float-card-v23 {
  position: absolute;

  display: flex;

  align-items: center;

  gap:
    9px;

  min-width:
    180px;

  padding:
    11px 13px;

  border:
    1px solid
    rgba(93,151,239,.28);

  border-radius:
    12px;

  background:
    rgba(6,18,39,.73);

  backdrop-filter:
    blur(14px);

  box-shadow:
    0 20px 50px
    rgba(0,0,0,.28);
}


.product-float-card-v23 > span {
  width:
    31px;

  height:
    31px;

  display: grid;

  place-items: center;

  border-radius:
    8px;

  background:
    rgba(72,155,255,.10);

  color:
    #66afff;
}


.product-float-card-v23 b,
.product-float-card-v23 small {
  display: block;
}


.product-float-card-v23 b {
  color:
    #dbe7f7;

  font-size:
    9px;
}


.product-float-card-v23 small {
  margin-top:
    2px;

  color:
    #71859f;

  font-size:
    8px !important;
}


.mobile-card-one {
  top:
    22%;

  left:
    2%;
}


.mobile-card-two {
  right:
    0;

  bottom:
    22%;
}


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

.product-browser-v23 {
  width:
    min(650px,38vw);

  aspect-ratio:
    1.38;

  border:
    1px solid
    #3b4555;

  border-radius:
    15px;

  overflow: hidden;

  background:
    #10151d;

  box-shadow:
    0 55px 110px
    rgba(0,0,0,.56),

    0 0 90px
    rgba(255,169,25,.08);

  transform:
    perspective(1300px)
    rotateY(-8deg)
    rotateX(4deg)
    rotateZ(1deg);
}


.browser-bar-v23 {
  height:
    48px;

  display: flex;

  align-items: center;

  gap:
    7px;

  padding:
    0 13px;

  background:
    #1a1f27;

  border-bottom:
    1px solid
    #2c333e;
}


.browser-bar-v23 > i {
  width:
    8px;

  height:
    8px;

  border-radius:
    50%;

  background:
    #4c5563;
}


.browser-bar-v23 > i:first-child {
  background:
    #ff5b55;
}


.browser-bar-v23 > div {
  flex: 1;

  height:
    28px;

  display: flex;

  align-items: center;

  margin-left:
    8px;

  padding:
    0 10px;

  border-radius:
    7px;

  background:
    #10141a;

  color:
    #838b97;

  font-size:
    8px;
}


.browser-body-v23 {
  height:
    calc(100% - 48px);

  display: grid;

  place-items: center;

  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(255,171,16,.07),
      transparent 34%
    ),

    #080d13;
}


.browser-warning-v23 {
  width:
    70%;

  padding:
    26px;

  border:
    1px solid
    rgba(255,68,59,.38);

  border-radius:
    13px;

  background:
    linear-gradient(
      145deg,
      rgba(83,17,18,.34),
      rgba(19,10,13,.89)
    );

  text-align:
    center;

  box-shadow:
    0 25px 65px
    rgba(0,0,0,.38),

    0 0 50px
    rgba(255,62,52,.05);
}


.browser-warning-v23 > span {
  width:
    48px;

  height:
    48px;

  display: grid;

  place-items: center;

  margin:
    0 auto 13px;

  border:
    2px solid
    #ff4c46;

  border-radius:
    50%;

  color:
    #ff514b;

  font-size:
    25px;

  font-weight:
    900;
}


.browser-warning-v23 small {
  display: block;

  color:
    #9b6563;

  font-size:
    8px !important;

  font-weight:
    850 !important;

  letter-spacing:
    .13em;
}


.browser-warning-v23 strong {
  display: block;

  margin-top:
    8px;

  color:
    #ff5750;

  font-size:
    28px;
}


.browser-warning-v23 p {
  color:
    #9ca4ae;

  font-size:
    9px;

  line-height:
    1.4;
}


.browser-warning-v23 button {
  width:
    100%;

  height:
    34px;

  margin-top:
    10px;

  border:
    1px solid
    rgba(255,84,73,.42);

  border-radius:
    7px;

  background:
    rgba(255,77,69,.11);

  color:
    #ff655d;

  font-size:
    9px;

  font-weight:
    800;
}


.extension-shield-v23 {
  position: absolute;

  right:
    3%;

  top:
    9%;

  width:
    94px;

  height:
    94px;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(255,184,31,.35);

  border-radius:
    25px;

  background:
    linear-gradient(
      145deg,
      rgba(255,182,31,.13),
      rgba(255,182,31,.025)
    );

  color:
    #ffc03c;

  font-size:
    43px;

  box-shadow:
    0 20px 50px
    rgba(0,0,0,.28),

    0 0 60px
    rgba(255,177,23,.09);

  transform:
    rotate(8deg);
}


/* ==========================================================
   TELEGRAM VISUAL
   ========================================================== */

.telegram-orbit-v23 {
  position: absolute;

  width:
    min(500px,31vw);

  aspect-ratio:
    1;

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

  border-radius:
    50%;

  box-shadow:
    0 0 0 70px
    rgba(36,164,255,.025),

    0 0 0 140px
    rgba(36,164,255,.014);
}


.telegram-logo-v23 {
  position: absolute;

  top:
    9%;

  right:
    13%;

  width:
    120px;

  height:
    120px;

  display: grid;

  place-items: center;

  border-radius:
    50%;

  background:
    linear-gradient(
      145deg,
      #44c5ff,
      #1689e7
    );

  color:
    #fff;

  font-size:
    53px;

  box-shadow:
    0 30px 65px
    rgba(0,95,190,.32),

    0 0 70px
    rgba(61,187,255,.15);

  animation:
    telegramFloatV23
    5s ease-in-out
    infinite;
}


@keyframes telegramFloatV23 {
  50% {
    transform:
      translateY(-12px)
      rotate(4deg);
  }
}


.telegram-logo-v23 span {
  transform:
    translate(-3px,1px)
    rotate(-12deg);
}


.telegram-chat-v23 {
  position: relative;

  width:
    min(470px,29vw);

  min-height:
    370px;

  padding:
    33px 25px;

  border:
    1px solid
    rgba(73,145,204,.31);

  border-radius:
    24px;

  background:
    linear-gradient(
      160deg,
      rgba(7,29,52,.87),
      rgba(4,15,29,.91)
    );

  backdrop-filter:
    blur(15px);

  box-shadow:
    0 45px 100px
    rgba(0,0,0,.42);

  transform:
    rotateY(-8deg)
    rotateZ(-2deg);
}


.tg-message-v23 {
  max-width:
    76%;

  padding:
    15px;

  border-radius:
    15px;

  font-size:
    9px;
}


.tg-message-v23.user {
  margin-left:
    auto;

  background:
    linear-gradient(
      145deg,
      #1f77c6,
      #155d9e
    );

  color:
    #e8f5ff;
}


.tg-message-v23.bot {
  margin-top:
    24px;

  background:
    #101d2b;

  border:
    1px solid
    #243b53;

  color:
    #b8c9dc;
}


.tg-message-v23.bot small,
.tg-message-v23.bot strong,
.tg-message-v23.bot span {
  display: block;
}


.tg-message-v23.bot small {
  color:
    #38b6ff;

  font-size:
    8px !important;

  font-weight:
    850 !important;
}


.tg-message-v23.bot strong {
  margin-top:
    8px;

  color:
    #ff5b61;

  font-size:
    28px;
}


.tg-message-v23.bot span {
  margin-top:
    6px;

  color:
    #a6b5c5;
}


/* ==========================================================
   WEB VISUAL
   ========================================================== */

.web-dashboard-v23 {
  width:
    min(650px,39vw);

  aspect-ratio:
    1.33;

  padding:
    19px;

  border:
    1px solid
    #334c75;

  border-radius:
    18px;

  background:
    radial-gradient(
      circle at 70% 20%,
      rgba(58,107,255,.13),
      transparent 35%
    ),

    linear-gradient(
      150deg,
      #0a1833,
      #050c1b
    );

  box-shadow:
    0 55px 110px
    rgba(0,0,0,.50),

    0 0 80px
    rgba(68,95,255,.08);

  transform:
    rotateY(-8deg)
    rotateX(3deg)
    rotateZ(1deg);
}


.web-dashboard-top-v23 {
  display: flex;

  justify-content: space-between;

  align-items: center;

  color:
    #d8e4f5;

  font-size:
    10px;

  font-weight:
    850;

  letter-spacing:
    .12em;
}


.web-dashboard-top-v23 > div {
  display: flex;

  align-items: center;

  gap:
    6px;

  color:
    #55db98;

  font-size:
    8px;
}


.web-dashboard-top-v23 i {
  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    #46db92;

  box-shadow:
    0 0 10px
    #46db92;
}


.web-dashboard-grid-v23 {
  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:
    8px;

  margin-top:
    24px;
}


.web-dashboard-grid-v23 section {
  min-height:
    100px;

  padding:
    14px;

  border:
    1px solid
    #263d60;

  border-radius:
    10px;

  background:
    rgba(8,23,46,.72);
}


.web-dashboard-grid-v23 small,
.web-dashboard-grid-v23 strong,
.web-dashboard-grid-v23 em {
  display: block;
}


.web-dashboard-grid-v23 small {
  color:
    #687c99;

  font-size:
    7px !important;

  letter-spacing:
    .10em;
}


.web-dashboard-grid-v23 strong {
  margin-top:
    9px;

  color:
    #f0f5fd;

  font-size:
    28px;
}


.web-dashboard-grid-v23 em {
  margin-top:
    4px;

  color:
    #4e9fff;

  font-size:
    7px;

  font-style:
    normal;
}


.web-dashboard-chart-v23 {
  height:
    190px;

  display: flex;

  align-items: flex-end;

  gap:
    10px;

  margin-top:
    15px;

  padding:
    20px;

  border:
    1px solid
    #223758;

  border-radius:
    11px;

  background:
    rgba(4,15,32,.65);
}


.web-dashboard-chart-v23 i {
  flex: 1;

  border-radius:
    6px 6px 2px 2px;

  background:
    linear-gradient(
      180deg,
      #4ca5ff,
      #1d56b4
    );

  box-shadow:
    0 0 14px
    rgba(60,140,255,.10);
}


.web-dashboard-chart-v23 i:nth-child(1) { height:28%; }
.web-dashboard-chart-v23 i:nth-child(2) { height:42%; }
.web-dashboard-chart-v23 i:nth-child(3) { height:36%; }
.web-dashboard-chart-v23 i:nth-child(4) { height:69%; }
.web-dashboard-chart-v23 i:nth-child(5) { height:53%; }
.web-dashboard-chart-v23 i:nth-child(6) { height:81%; }
.web-dashboard-chart-v23 i:nth-child(7) { height:63%; }


.web-floating-score-v23 {
  position: absolute;

  right:
    0;

  bottom:
    11%;

  min-width:
    150px;

  padding:
    15px;

  border:
    1px solid
    rgba(255,187,36,.25);

  border-radius:
    12px;

  background:
    rgba(7,17,35,.76);

  backdrop-filter:
    blur(13px);

  box-shadow:
    0 22px 55px
    rgba(0,0,0,.28);
}


.web-floating-score-v23 small,
.web-floating-score-v23 strong {
  display: block;
}


.web-floating-score-v23 small {
  color:
    #8d7744;

  font-size:
    7px !important;

  letter-spacing:
    .10em;
}


.web-floating-score-v23 strong {
  margin-top:
    6px;

  color:
    #ffc13d;

  font-size:
    27px;
}


/* ==========================================================
   ARROWS
   ========================================================== */

.products-arrow-v23 {
  position: absolute;

  z-index: 80;

  top: 50%;

  width:
    48px;

  height:
    48px;

  display: grid;

  place-items: center;

  transform:
    translateY(-50%);

  border:
    1px solid
    rgba(111,134,169,.26);

  border-radius:
    50%;

  background:
    rgba(5,15,31,.55);

  backdrop-filter:
    blur(13px);

  color:
    #aebdd1;

  font-size:
    18px;

  box-shadow:
    0 12px 30px
    rgba(0,0,0,.24);

  transition:
    .18s ease;
}


.products-arrow-v23.previous {
  left:
    15px;
}


.products-arrow-v23.next {
  right:
    15px;
}


.products-arrow-v23:hover {
  border-color:
    rgba(255,185,37,.42);

  color:
    #ffc03c;

  background:
    rgba(12,24,44,.82);

  transform:
    translateY(-50%)
    scale(1.08);
}


/* ==========================================================
   DOT NAVIGATION
   ========================================================== */

.products-dots-v23 {
  position: absolute;

  z-index: 80;

  left: 50%;

  bottom:
    18px;

  display: flex;

  align-items: center;

  gap:
    5px;

  transform:
    translateX(-50%);

  padding:
    5px;

  border:
    1px solid
    rgba(73,96,128,.25);

  border-radius:
    11px;

  background:
    rgba(3,11,23,.52);

  backdrop-filter:
    blur(14px);

  box-shadow:
    0 15px 40px
    rgba(0,0,0,.20);
}


.products-dots-v23 button {
  position: relative;

  height:
    34px;

  display: flex;

  align-items: center;

  gap:
    7px;

  padding:
    0 10px;

  border: 0;

  border-radius:
    7px;

  background:
    transparent;

  color:
    #607086;

  font-size:
    9px;

  font-weight:
    700;

  transition:
    .2s ease;
}


.products-dots-v23 button i {
  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    #435269;
}


.products-dots-v23 button.active {
  background:
    rgba(255,255,255,.045);

  color:
    #dce5f1;
}


.products-dots-v23 button.active i {
  background:
    #ffb82a;

  box-shadow:
    0 0 11px
    rgba(255,181,31,.40);
}


/* ==========================================================
   COUNTER
   ========================================================== */

.products-counter-v23 {
  position: absolute;

  z-index: 75;

  right:
    27px;

  bottom:
    24px;

  display: flex;

  align-items: center;

  gap:
    8px;

  color:
    #56667d;
}


.products-counter-v23 strong {
  color:
    #bdc8d7;

  font-size:
    11px;
}


.products-counter-v23 span {
  width:
    24px;

  height:
    1px;

  background:
    #3c4a60;
}


.products-counter-v23 small {
  font-size:
    9px !important;

  color:
    #59697f;
}


/* ==========================================================
   SWIPE LABEL
   ========================================================== */

.products-swipe-v23 {
  position: absolute;

  z-index: 70;

  left:
    28px;

  bottom:
    29px;

  color:
    #48586f;

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    .11em;
}


/* ==========================================================
   ENTRANCE
   ========================================================== */

.product-copy-v23,
.product-visual-v23 {
  transition:
    opacity .6s ease,
    transform .7s
    cubic-bezier(.2,.8,.2,1);
}


.product-slide-v23:not(
  :nth-child(1)
)
.product-copy-v23 {
  opacity:
    .92;
}


/* ==========================================================
   1440 / LAPTOP
   ========================================================== */

@media(max-width:1450px) {

  .product-slide-v23 {
    grid-template-columns:
      minmax(0,1.08fr)
      minmax(360px,.92fr);

    padding-left:
      50px;

    padding-right:
      50px;
  }


  .product-copy-v23 h2 {
    font-size:
      clamp(
        46px,
        4.5vw,
        72px
      );
  }


  .product-phone-v23 {
    width:
      min(250px,18vw);
  }


  .product-browser-v23,
  .web-dashboard-v23 {
    width:
      min(570px,38vw);
  }


  .telegram-chat-v23 {
    width:
      min(420px,29vw);
  }

}


/* ==========================================================
   SHORT SCREENS
   ========================================================== */

@media(
  min-width:761px
) and (
  max-height:820px
) {

  .product-slide-v23 {
    padding-top:
      34px;

    padding-bottom:
      44px;
  }


  .product-copy-v23 h2 {
    margin-top:
      14px;

    font-size:
      clamp(
        42px,
        4.3vw,
        66px
      );
  }


  .product-copy-v23 > p {
    margin-top:
      16px;
  }


  .product-actions-v23 {
    margin-top:
      21px;
  }


  .product-visual-v23 {
    height:
      min(
        500px,
        61vh
      );
  }


  .product-phone-v23 {
    width:
      min(
        220px,
        16vw
      );
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:760px) {

  #screen-products.active {
    overflow:
      hidden !important;
  }


  .products-v23 {
    height:
      calc(100vh - 90px);
  }


  .product-slide-v23 {
    grid-template-columns:
      1fr;

    grid-template-rows:
      auto
      minmax(250px,1fr);

    gap:
      15px;

    padding:
      32px 24px 70px;
  }


  .product-copy-v23 h2 {
    font-size:
      clamp(
        37px,
        12vw,
        59px
      );
  }


  .product-copy-v23 > p {
    font-size:
      12px;
  }


  .product-actions-v23 {
    flex-direction:
      column;

    align-items:
      flex-start;
  }


  .product-visual-v23 {
    height:
      100%;
  }


  .product-phone-v23 {
    width:
      170px;
  }


  .product-browser-v23,
  .web-dashboard-v23 {
    width:
      min(
        95%,
        430px
      );
  }


  .telegram-chat-v23 {
    width:
      80%;
  }


  .products-dots-v23
  button span {
    display: none;
  }


  .products-dots-v23 button {
    width:
      27px;

    padding: 0;

    justify-content:
      center;
  }


  .products-swipe-v23,
  .products-counter-v23 {
    display: none;
  }


  .products-arrow-v23 {
    width:
      39px;

    height:
      39px;
  }

}



/* ==========================================================
   PRODUCTS V24 — REAL PRODUCT VISUALS
   ========================================================== */


/* ==========================================================
   REAL MOBILE PHONE
   ========================================================== */

.real-phone-scene-v24 {
  position: relative;

  width: 100%;
  height: 100%;

  display: grid;
  place-items: center;
}


.real-phone-glow-v24 {
  position: absolute;

  width: 420px;
  height: 520px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(54,139,255,.28),
      rgba(54,139,255,.06) 43%,
      transparent 70%
    );

  filter: blur(32px);
}


.real-phone-v24 {
  position: relative;

  width: min(300px,19vw);

  aspect-ratio: .49;

  padding: 8px;

  border:
    2px solid
    rgba(152,171,201,.75);

  border-radius: 45px;

  background:
    linear-gradient(
      145deg,
      #5d687b,
      #1d2634 35%,
      #090d13 68%,
      #4c5666
    );

  box-shadow:
    0 55px 120px rgba(0,0,0,.60),
    0 0 95px rgba(52,132,255,.18),
    inset 0 0 0 1px rgba(255,255,255,.25);

  transform:
    perspective(1500px)
    rotateY(-13deg)
    rotateX(3deg)
    rotateZ(3deg);

  animation:
    realPhoneFloatV24
    5s ease-in-out infinite;
}


@keyframes realPhoneFloatV24 {

  50% {
    transform:
      perspective(1500px)
      rotateY(-9deg)
      rotateX(1deg)
      rotateZ(2deg)
      translateY(-12px);
  }

}


.real-phone-screen-v24 {
  position: absolute;

  inset: 8px;

  overflow: hidden;

  border-radius: 37px;

  background: #030813;
}


.real-phone-screen-v24 img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  object-position: top center;
}


.real-phone-island-v24 {
  position: absolute;

  z-index: 5;

  top: 17px;
  left: 50%;

  width: 91px;
  height: 26px;

  transform: translateX(-50%);

  border-radius: 20px;

  background: #020305;

  box-shadow:
    0 2px 8px rgba(0,0,0,.5);
}


.real-phone-side-v24 {
  position: absolute;

  width: 3px;

  border-radius: 5px;

  background: #8590a1;
}


.real-phone-side-v24.left {
  left: -4px;
  top: 105px;

  height: 63px;
}


.real-phone-side-v24.right {
  right: -4px;
  top: 124px;

  height: 82px;
}


/* floating */

.real-product-badge-v24 {
  position: absolute;

  min-width: 175px;

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 12px;

  border:
    1px solid
    rgba(102,165,255,.31);

  border-radius: 13px;

  background:
    rgba(5,16,34,.72);

  backdrop-filter: blur(18px);

  box-shadow:
    0 20px 55px rgba(0,0,0,.35);
}


.real-product-badge-v24 > span {
  width: 32px;
  height: 32px;

  display: grid;
  place-items: center;

  border-radius: 9px;

  color: #61aeff;

  background:
    rgba(58,147,255,.10);
}


.real-product-badge-v24 b,
.real-product-badge-v24 small {
  display: block;
}


.real-product-badge-v24 b {
  color: #e2ebf8;

  font-size: 9px;
}


.real-product-badge-v24 small {
  margin-top: 2px;

  color: #7488a3;

  font-size: 8px !important;
}


.mobile-security {
  left: 0;
  top: 24%;
}


.mobile-alert {
  right: 1%;
  bottom: 22%;
}


/* ==========================================================
   MACBOOK EXTENSION
   ========================================================== */

.macbook-scene-v24 {
  position: relative;

  width: 100%;
  height: 100%;

  display: grid;
  place-items: center;
}


.macbook-back-glow-v24 {
  position: absolute;

  width: 600px;
  height: 450px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255,180,25,.24),
      rgba(255,180,25,.04) 45%,
      transparent 72%
    );

  filter: blur(35px);
}


.macbook-v24 {
  position: relative;

  width: min(680px,41vw);

  transform:
    perspective(1600px)
    rotateY(-8deg)
    rotateX(3deg)
    rotateZ(1deg);

  filter:
    drop-shadow(
      0 55px 70px
      rgba(0,0,0,.55)
    );
}


.macbook-display-v24 {
  position: relative;

  aspect-ratio: 1.58;

  padding: 10px;

  border:
    2px solid #737a84;

  border-radius:
    18px 18px 10px 10px;

  background:
    linear-gradient(
      145deg,
      #6e757e,
      #161a20 20%,
      #050709 70%,
      #555c65
    );
}


.macbook-screen-v24 {
  width: 100%;
  height: 100%;

  overflow: hidden;

  border-radius: 10px;

  background: #02050a;
}


.macbook-screen-v24 img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  object-position: center top;
}


.macbook-camera-v24 {
  position: absolute;

  z-index: 5;

  top: 4px;
  left: 50%;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #171c22;
}


.macbook-base-v24 {
  position: relative;

  width: 111%;
  height: 18px;

  margin-left: -5.5%;

  border-radius:
    2px 2px 40px 40px;

  background:
    linear-gradient(
      180deg,
      #adb2b8,
      #6b7076 45%,
      #34383d
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65);
}


.macbook-notch-v24 {
  width: 90px;
  height: 5px;

  margin: auto;

  border-radius:
    0 0 8px 8px;

  background: #767b81;
}


.extension-floating-warning-v24 {
  position: absolute;

  right: 2%;
  top: 16%;

  min-width: 180px;

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 13px;

  border:
    1px solid
    rgba(255,76,72,.35);

  border-radius: 13px;

  background:
    rgba(36,8,11,.75);

  backdrop-filter: blur(15px);

  box-shadow:
    0 20px 50px rgba(0,0,0,.32),
    0 0 45px rgba(255,74,66,.07);
}


.extension-floating-warning-v24 > span {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border:
    1px solid #ff554f;

  border-radius: 50%;

  color: #ff5b55;

  font-weight: 900;
}


.extension-floating-warning-v24 small,
.extension-floating-warning-v24 strong {
  display: block;
}


.extension-floating-warning-v24 small {
  color: #8a6968;

  font-size: 7px !important;
}


.extension-floating-warning-v24 strong {
  margin-top: 3px;

  color: #ff625c;

  font-size: 10px;
}


/* ==========================================================
   TELEGRAM REAL SCREEN
   ========================================================== */

.telegram-real-scene-v24 {
  position: relative;

  width: 100%;
  height: 100%;

  display: grid;
  place-items: center;
}


.telegram-real-glow-v24 {
  position: absolute;

  width: 580px;
  height: 520px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(41,170,255,.27),
      rgba(41,170,255,.05) 45%,
      transparent 72%
    );

  filter: blur(38px);
}


.telegram-window-v24 {
  position: relative;

  width: min(530px,33vw);

  overflow: hidden;

  border:
    1px solid
    rgba(89,151,199,.43);

  border-radius: 22px;

  background: #101c29;

  box-shadow:
    0 50px 110px rgba(0,0,0,.53),
    0 0 80px rgba(29,168,255,.12);

  transform:
    perspective(1400px)
    rotateY(-8deg)
    rotateZ(-2deg);
}


.telegram-window-top-v24 {
  height: 62px;

  display: flex;

  align-items: center;

  gap: 11px;

  padding: 0 16px;

  background:
    linear-gradient(
      180deg,
      #182838,
      #132231
    );

  border-bottom:
    1px solid #243849;
}


.telegram-app-icon-v24 {
  width: 38px;
  height: 38px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #42bfff,
      #188edc
    );

  color: white;

  transform: rotate(-12deg);
}


.telegram-window-top-v24 strong,
.telegram-window-top-v24 small {
  display: block;
}


.telegram-window-top-v24 strong {
  color: #e8f3fc;

  font-size: 11px;
}


.telegram-window-top-v24 small {
  margin-top: 2px;

  color: #6793af;

  font-size: 8px !important;
}


.telegram-window-top-v24 > i {
  width: 7px;
  height: 7px;

  margin-left: auto;

  border-radius: 50%;

  background: #3bd18d;

  box-shadow:
    0 0 10px #3bd18d;
}


.telegram-real-screen-v24 {
  height: min(520px,55vh);

  overflow: hidden;

  background: #0d1823;
}


.telegram-real-screen-v24 img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  object-position: top center;
}


.telegram-live-badge-v24 {
  position: absolute;

  right: 2%;
  bottom: 16%;

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 11px 14px;

  border:
    1px solid
    rgba(75,193,255,.28);

  border-radius: 999px;

  background:
    rgba(5,23,40,.76);

  color: #7bcfff;

  font-size: 8px;

  font-weight: 850;

  letter-spacing: .10em;

  backdrop-filter: blur(14px);
}


.telegram-live-badge-v24 span {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #43d895;

  box-shadow:
    0 0 9px rgba(67,216,149,.55);
}


/* ==========================================================
   ANTIVIRUS SLIDE
   ========================================================== */

.theme-antivirus {
  background:
    radial-gradient(
      circle at 75% 45%,
      rgba(38,231,153,.17),
      transparent 30%
    ),

    radial-gradient(
      circle at 85% 10%,
      rgba(66,113,255,.13),
      transparent 27%
    ),

    linear-gradient(
      118deg,
      #02070f 0%,
      #06131d 47%,
      #08251f 100%
    );
}


.theme-antivirus::before {
  content: '';

  position: absolute;

  z-index: -3;

  right: -250px;
  top: -270px;

  width: 760px;
  height: 760px;

  border-radius: 50%;

  border:
    1px solid
    rgba(48,222,156,.10);

  box-shadow:
    0 0 0 90px rgba(45,217,150,.022),
    0 0 0 180px rgba(45,217,150,.012);
}


.theme-antivirus
.product-copy-v23 h2 em {
  background:
    linear-gradient(
      180deg,
      #6fffc0,
      #25d98e
    );

  -webkit-background-clip: text;
  background-clip: text;
}


.theme-antivirus
.product-cta-v23 {
  border-color:
    rgba(99,255,191,.43);

  background:
    linear-gradient(
      135deg,
      #67fbb9,
      #25d68c
    );

  box-shadow:
    0 15px 40px
    rgba(38,214,140,.17),
    inset 0 1px 0
    rgba(255,255,255,.43);
}


.antivirus-scene-v24 {
  position: relative;

  width: 100%;
  height: 100%;

  display: grid;
  place-items: center;
}


.antivirus-radar-v24 {
  position: absolute;

  width: 570px;
  height: 570px;

  border:
    1px solid
    rgba(54,219,154,.11);

  border-radius: 50%;
}


.antivirus-radar-v24::before,
.antivirus-radar-v24::after,
.antivirus-radar-v24 i {
  content: '';

  position: absolute;

  inset: 15%;

  border:
    1px solid
    rgba(54,219,154,.075);

  border-radius: 50%;
}


.antivirus-radar-v24::after {
  inset: 31%;
}


.antivirus-radar-v24 i:nth-child(1) {
  inset: 46%;
}


.antivirus-machine-v24 {
  position: relative;

  width: min(620px,38vw);
}


.antivirus-monitor-v24 {
  position: relative;

  aspect-ratio: 1.58;

  padding: 9px;

  border:
    2px solid
    #4c5963;

  border-radius: 16px;

  background:
    linear-gradient(
      145deg,
      #58636d,
      #151a1e 21%,
      #050809 70%,
      #3f484f
    );

  box-shadow:
    0 55px 110px rgba(0,0,0,.56),
    0 0 85px rgba(43,220,150,.10);

  transform:
    perspective(1500px)
    rotateY(-7deg)
    rotateX(2deg);
}


.antivirus-monitor-top-v24 {
  height: 45px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  padding: 0 15px;

  border-radius: 9px 9px 0 0;

  background: #0c171a;

  color: #d8e9e3;

  font-size: 9px;

  font-weight: 850;

  letter-spacing: .12em;
}


.antivirus-monitor-top-v24 b {
  display: flex;

  align-items: center;

  gap: 6px;

  color: #4ade98;

  font-size: 7px;
}


.antivirus-monitor-top-v24 i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #43df96;

  box-shadow:
    0 0 10px #43df96;
}


.antivirus-monitor-content-v24 {
  height:
    calc(100% - 45px);

  display: flex;

  flex-direction: column;

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

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(44,226,153,.10),
      transparent 37%
    ),

    linear-gradient(
      180deg,
      #071416,
      #04090b
    );
}


.antivirus-shield-v24 {
  width: 75px;
  height: 75px;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(65,228,162,.38);

  border-radius: 22px;

  color: #43e19a;

  background:
    rgba(46,220,153,.045);

  font-size: 37px;

  box-shadow:
    0 0 45px
    rgba(42,218,148,.08);
}


.antivirus-monitor-content-v24 > strong {
  margin-top: 16px;

  color: #edf8f4;

  font-size: 24px;

  letter-spacing: .05em;
}


.antivirus-monitor-content-v24
> strong span {
  color: #48df99;
}


.antivirus-monitor-content-v24
> small {
  margin-top: 5px;

  color: #637d75;

  font-size: 8px !important;
}


.antivirus-live-row-v24 {
  display: flex;

  gap: 8px;

  margin-top: 26px;
}


.antivirus-live-row-v24 span {
  min-width: 91px;

  min-height: 30px;

  display: flex;

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

  gap: 7px;

  border:
    1px solid
    rgba(57,111,96,.45);

  border-radius: 7px;

  background:
    rgba(17,40,34,.55);

  color: #9ab6ae;

  font-size: 7.5px;
}


.antivirus-live-row-v24 i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #3bdc92;
}


.antivirus-monitor-stand-v24 {
  width: 105px;
  height: 58px;

  margin: auto;

  clip-path:
    polygon(
      36% 0,
      64% 0,
      70% 77%,
      92% 84%,
      92% 100%,
      8% 100%,
      8% 84%,
      30% 77%
    );

  background:
    linear-gradient(
      180deg,
      #646e74,
      #30383d
    );
}


.antivirus-dev-label-v24 {
  position: absolute;

  top: 11%;
  right: 2%;

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 11px 14px;

  border:
    1px solid
    rgba(53,222,153,.27);

  border-radius: 999px;

  background:
    rgba(7,29,23,.75);

  color: #57e6a4;

  font-size: 8px;

  font-weight: 850;

  letter-spacing: .11em;

  backdrop-filter: blur(14px);
}


.antivirus-dev-label-v24 span {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #42df98;

  animation:
    antivirusPulseV24
    1.5s ease-in-out
    infinite;
}


@keyframes antivirusPulseV24 {

  50% {
    opacity: .35;

    box-shadow:
      0 0 14px
      #42df98;
  }

}


.antivirus-threat-v24 {
  position: absolute;

  left: 1%;
  bottom: 16%;

  min-width: 175px;

  padding: 13px;

  border:
    1px solid
    rgba(255,76,84,.30);

  border-radius: 12px;

  background:
    rgba(37,8,13,.74);

  backdrop-filter: blur(14px);

  box-shadow:
    0 20px 50px rgba(0,0,0,.32);
}


.antivirus-threat-v24 small,
.antivirus-threat-v24 strong {
  display: block;
}


.antivirus-threat-v24 small {
  color: #ff6069;

  font-size: 7px !important;

  font-weight: 850 !important;

  letter-spacing: .12em;
}


.antivirus-threat-v24 strong {
  margin-top: 5px;

  color: #d7b4b6;

  font-size: 9px;

  line-height: 1.3;
}


/* ==========================================================
   SMALLER LAPTOPS
   ========================================================== */

@media(max-width:1450px) {

  .real-phone-v24 {
    width: min(250px,18vw);
  }


  .macbook-v24 {
    width: min(590px,40vw);
  }


  .telegram-window-v24 {
    width: min(465px,32vw);
  }


  .antivirus-machine-v24 {
    width: min(550px,38vw);
  }


  .antivirus-radar-v24 {
    width: 490px;
    height: 490px;
  }

}


@media(
  min-width:761px
) and (
  max-height:820px
) {

  .real-phone-v24 {
    width: min(215px,16vw);
  }


  .telegram-real-screen-v24 {
    height: min(420px,50vh);
  }


  .antivirus-machine-v24 {
    width: min(490px,35vw);
  }

}



/* ==========================================================
   ANTIVIRUS WAITLIST
   ========================================================== */

.antivirus-waitlist-v24 {
  position: fixed;

  z-index: 5000;

  inset: 0;

  display: grid;

  place-items: center;
}


.antivirus-waitlist-v24[hidden] {
  display: none !important;
}


.antivirus-waitlist-backdrop-v24 {
  position: absolute;

  inset: 0;

  background:
    rgba(1,7,12,.84);

  backdrop-filter:
    blur(14px);
}


.antivirus-waitlist-card-v24 {
  position: relative;

  z-index: 1;

  width:
    min(
      510px,
      calc(100vw - 30px)
    );

  padding:
    31px;

  border:
    1px solid
    rgba(68,217,158,.32);

  border-radius:
    18px;

  background:
    radial-gradient(
      circle at 25% 0%,
      rgba(43,218,148,.12),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      #0a1b19,
      #06100f
    );

  box-shadow:
    0 40px 120px
    rgba(0,0,0,.65),

    0 0 70px
    rgba(40,218,146,.05),

    inset 0 1px 0
    rgba(255,255,255,.035);
}


.antivirus-waitlist-close-v24 {
  position: absolute;

  top: 13px;
  right: 13px;

  width: 33px;
  height: 33px;

  border: 0;

  border-radius: 8px;

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

  color: #7e938c;

  font-size: 20px;
}


.antivirus-waitlist-mark-v24 {
  width: 48px;
  height: 48px;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(70,226,164,.35);

  border-radius: 13px;

  color: #49df9d;

  background:
    rgba(48,218,151,.05);

  font-size: 24px;
}


.antivirus-waitlist-eyebrow-v24 {
  display: block;

  margin-top: 19px;

  color: #45d897;

  font-size: 9px;

  font-weight: 900;

  letter-spacing: .12em;
}


.antivirus-waitlist-card-v24 h3 {
  margin: 6px 0 0;

  color: #eff8f5;

  font-size: 29px;

  letter-spacing: -.035em;
}


.antivirus-waitlist-card-v24 p {
  margin: 11px 0 0;

  color: #829a92;

  font-size: 11px;

  line-height: 1.55;
}


#antivirusWaitlistFormV24 {
  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    auto;

  gap: 8px;

  margin-top: 22px;
}


#antivirusEmailV24 {
  height: 45px;

  padding: 0 13px;

  border:
    1px solid
    #315148;

  border-radius: 9px;

  outline: 0;

  background: #071310;

  color: #e1eee9;

  font-size: 11px !important;

  font-weight: 650 !important;
}


#antivirusEmailV24:focus {
  border-color:
    rgba(66,220,158,.54);

  box-shadow:
    0 0 0 3px
    rgba(54,218,153,.035);
}


#antivirusWaitlistFormV24
button {
  min-width: 155px;

  height: 45px;

  display: flex;

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

  gap: 10px;

  border:
    1px solid
    rgba(110,255,197,.42);

  border-radius: 9px;

  background:
    linear-gradient(
      135deg,
      #67fbbc,
      #29d991
    );

  color: #07140f;

  font-size: 10px;

  font-weight: 850;
}


.antivirus-waitlist-card-v24
> small {
  display: block;

  margin-top: 10px;

  color: #536b63;

  font-size: 8px !important;

  font-weight: 650 !important;
}



/* ==========================================================
   PRODUCTS V25 — FULL MACBOOK WITH KEYBOARD
   ========================================================== */


/*
   Даём ноутбуку больше визуального пространства.
   Теперь он целиком помещается справа.
*/

.theme-extension .product-visual-v23 {
  overflow: visible !important;

  height:
    min(650px, 72vh) !important;

  padding:
    20px 12px 35px !important;
}


.macbook-scene-v24 {
  overflow: visible !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  padding:
    10px 20px 45px !important;
}


/* ==========================================================
   FULL LAPTOP
   ========================================================== */

.macbook-v24 {
  position: relative !important;

  width:
    min(640px, 38vw) !important;

  max-width:
    100% !important;

  transform:
    perspective(1700px)
    rotateY(-6deg)
    rotateX(4deg)
    rotateZ(.4deg)
    translateX(-8px) !important;

  transform-origin:
    center center !important;

  filter:
    drop-shadow(
      0 45px 55px
      rgba(0,0,0,.55)
    ) !important;

  overflow:
    visible !important;
}


/* ==========================================================
   DISPLAY
   ========================================================== */

.macbook-display-v24 {
  position: relative !important;

  z-index: 5 !important;

  width: 100% !important;

  aspect-ratio:
    16 / 10 !important;

  padding:
    9px !important;

  border:
    2px solid
    rgba(153,160,169,.85) !important;

  border-radius:
    18px 18px 10px 10px !important;

  background:
    linear-gradient(
      145deg,
      #8d949c 0%,
      #333941 7%,
      #11151b 20%,
      #06080c 78%,
      #6e757d 100%
    ) !important;

  box-shadow:
    inset 0 1px 1px
    rgba(255,255,255,.35),

    inset 0 -1px 1px
    rgba(0,0,0,.65) !important;
}


/* screenshot теперь НЕ обрезаем */

.macbook-screen-v24 {
  position: relative !important;

  width: 100% !important;
  height: 100% !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  overflow: hidden !important;

  border-radius:
    9px !important;

  background:
    #02060c !important;

  box-shadow:
    inset 0 0 25px
    rgba(0,0,0,.45) !important;
}


.macbook-screen-v24 img {
  width: 100% !important;
  height: 100% !important;

  display: block !important;

  object-fit:
    contain !important;

  object-position:
    center center !important;

  background:
    #02060c !important;
}


/* camera */

.macbook-camera-v24 {
  position: absolute !important;

  z-index: 8 !important;

  top: 3px !important;
  left: 50% !important;

  width: 5px !important;
  height: 5px !important;

  transform:
    translateX(-50%) !important;

  border-radius:
    50% !important;

  background:
    radial-gradient(
      circle,
      #172536,
      #030508 70%
    ) !important;

  box-shadow:
    0 0 0 1px
    rgba(255,255,255,.025) !important;
}


/* ==========================================================
   HINGE
   ========================================================== */

.macbook-hinge-v25 {
  position: relative;

  z-index: 7;

  width: 91%;
  height: 10px;

  margin:
    -2px auto 0;

  border-radius:
    0 0 8px 8px;

  background:
    linear-gradient(
      180deg,
      #24292f,
      #6f767d 38%,
      #32373d
    );

  box-shadow:
    0 2px 3px
    rgba(0,0,0,.55);
}


/* ==========================================================
   KEYBOARD DECK
   ========================================================== */

.macbook-keyboard-deck-v25 {
  position: relative;

  z-index: 4;

  width: 113%;

  min-height:
    205px;

  margin:
    -2px 0 0
    -6.5%;

  padding:
    19px 29px 15px;

  clip-path:
    polygon(
      4% 0,
      96% 0,
      100% 90%,
      97% 100%,
      3% 100%,
      0 90%
    );

  background:
    linear-gradient(
      165deg,
      #c0c4c8 0%,
      #8f959b 16%,
      #757b81 43%,
      #a2a7ac 68%,
      #686d72 100%
    );

  box-shadow:
    inset 0 2px 2px
    rgba(255,255,255,.65),

    inset 0 -4px 8px
    rgba(0,0,0,.25),

    0 18px 35px
    rgba(0,0,0,.24);

  transform:
    perspective(1000px)
    rotateX(61deg);

  transform-origin:
    top center;
}


/* ==========================================================
   KEYBOARD
   ========================================================== */

.macbook-keyboard-v25 {
  width: 71%;

  margin:
    0 auto;

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

  padding:
    5px 8px 8px;

  border-radius:
    7px;

  background:
    rgba(58,62,67,.18);

  box-shadow:
    inset 0 1px 1px
    rgba(0,0,0,.25);
}


.macbook-key-row-v25 {
  width: 100%;

  display:
    flex;

  justify-content:
    center;

  gap:
    4px;
}


.macbook-key-row-v25 i {
  width:
    23px;

  height:
    18px;

  flex:
    0 0 23px;

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

  border-radius:
    3px;

  background:
    linear-gradient(
      180deg,
      #24282d,
      #111419
    );

  box-shadow:
    0 1px 1px
    rgba(0,0,0,.75),

    inset 0 1px 0
    rgba(255,255,255,.055);
}


.macbook-key-row-v25
i.wide {
  width:
    31px;

  flex-basis:
    31px;
}


.macbook-key-row-v25
i.wide2 {
  width:
    38px;

  flex-basis:
    38px;
}


.macbook-key-row-v25
i.wide3 {
  width:
    47px;

  flex-basis:
    47px;
}


.macbook-key-row-v25
i.space {
  width:
    135px;

  flex-basis:
    135px;
}


.macbook-key-row-v25.bottom {
  margin-top:
    1px;
}


/* subtle key labels */

.macbook-key-row-v25 i::after {
  content: '';

  display: block;

  width: 5px;
  height: 1px;

  margin:
    5px auto 0;

  border-radius:
    2px;

  background:
    rgba(255,255,255,.20);
}


/* ==========================================================
   TRACKPAD
   ========================================================== */

.macbook-trackpad-v25 {
  position: absolute;

  left: 50%;
  bottom: 17px;

  width:
    155px;

  height:
    72px;

  transform:
    translateX(-50%);

  border:
    1px solid
    rgba(62,67,73,.32);

  border-radius:
    6px;

  background:
    linear-gradient(
      145deg,
      rgba(191,195,199,.46),
      rgba(123,129,135,.30)
    );

  box-shadow:
    inset 0 1px 1px
    rgba(255,255,255,.35);
}


/* ==========================================================
   FRONT EDGE
   ========================================================== */

.macbook-front-lip-v25 {
  position: relative;

  z-index: 3;

  width:
    116%;

  height:
    12px;

  margin:
    -83px 0 0
    -8%;

  border-radius:
    0 0 50% 50%;

  background:
    linear-gradient(
      180deg,
      #858a8f,
      #42474c
    );

  box-shadow:
    0 10px 17px
    rgba(0,0,0,.34);
}


.macbook-front-lip-v25::after {
  content: '';

  position: absolute;

  top: 1px;
  left: 50%;

  width:
    82px;

  height:
    4px;

  transform:
    translateX(-50%);

  border-radius:
    0 0 7px 7px;

  background:
    #666b70;
}


/* ==========================================================
   THREAT BADGE
   Не даём ему вылезать за экран
   ========================================================== */

.extension-floating-warning-v24 {
  z-index: 20 !important;

  top:
    17% !important;

  right:
    -1% !important;

  min-width:
    166px !important;

  transform:
    translateX(-3px) !important;
}


/* ==========================================================
   GLOW
   ========================================================== */

.macbook-back-glow-v24 {
  width:
    680px !important;

  height:
    560px !important;

  background:
    radial-gradient(
      circle,
      rgba(255,181,31,.20),
      rgba(255,181,31,.055) 41%,
      transparent 69%
    ) !important;

  filter:
    blur(42px) !important;
}


/* ==========================================================
   1440 / NOTEBOOK SCREENS
   ========================================================== */

@media(max-width:1450px) {

  .macbook-v24 {
    width:
      min(575px,37vw) !important;

    transform:
      perspective(1600px)
      rotateY(-5deg)
      rotateX(4deg)
      translateX(-4px) !important;
  }


  .macbook-keyboard-deck-v25 {
    min-height:
      180px;

    padding:
      16px 25px 13px;
  }


  .macbook-key-row-v25 i {
    width:
      20px;

    height:
      16px;

    flex-basis:
      20px;
  }


  .macbook-key-row-v25 i.space {
    width:
      115px;

    flex-basis:
      115px;
  }


  .macbook-trackpad-v25 {
    width:
      135px;

    height:
      62px;
  }


  .macbook-front-lip-v25 {
    margin-top:
      -73px;
  }

}


/* ==========================================================
   SHORT SCREENS
   ТВОЙ ТЕКУЩИЙ РАЗМЕР ЭКРАНА
   ========================================================== */

@media(
  min-width:761px
) and (
  max-height:850px
) {

  .theme-extension
  .product-visual-v23 {
    height:
      min(560px,64vh) !important;

    padding-bottom:
      25px !important;
  }


  .macbook-v24 {
    width:
      min(520px,35vw) !important;

    transform:
      perspective(1500px)
      rotateY(-4deg)
      rotateX(3deg)
      translateY(-3px) !important;
  }


  .macbook-keyboard-deck-v25 {
    min-height:
      164px;
  }


  .macbook-keyboard-v25 {
    transform:
      scale(.90);

    transform-origin:
      top center;
  }


  .macbook-trackpad-v25 {
    width:
      120px;

    height:
      54px;
  }


  .macbook-front-lip-v25 {
    margin-top:
      -65px;
  }


  .extension-floating-warning-v24 {
    top:
      13% !important;

    right:
      -2% !important;
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:760px) {

  .macbook-v24 {
    width:
      min(440px,92vw) !important;

    transform:
      perspective(1200px)
      rotateY(-2deg)
      rotateX(2deg) !important;
  }


  .macbook-keyboard-deck-v25 {
    min-height:
      140px;
  }


  .macbook-keyboard-v25 {
    transform:
      scale(.75);

    transform-origin:
      top center;
  }


  .extension-floating-warning-v24 {
    display:
      none !important;
  }

}



/* ==========================================================
   NOYTRIX PRODUCTS — MACBOOK V26
   smaller + realistic proportions
   ========================================================== */


/* убиваем старую геометрию V25 */

.macbook-keyboard-deck-v25,
.macbook-keyboard-v25,
.macbook-trackpad-v25,
.macbook-front-lip-v25 {
  display: none !important;
}


/* ==========================================================
   SCENE
   ========================================================== */

.theme-extension .product-visual-v23 {
  overflow: visible !important;

  height: 100% !important;

  min-height: 0 !important;

  padding:
    18px 18px 45px !important;
}


.macbook-scene-v24 {
  position: relative !important;

  width: 100% !important;
  height: 100% !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  overflow: visible !important;
}


/*
   Главное изменение:
   ноутбук теперь заметно меньше.
*/

.macbook-v24 {
  position: relative !important;

  z-index: 5 !important;

  width:
    min(470px, 30vw) !important;

  max-width:
    470px !important;

  margin:
    -5px 10px 0 0 !important;

  overflow:
    visible !important;

  transform:
    perspective(1800px)
    rotateY(-4deg)
    rotateX(1.5deg)
    rotateZ(.2deg) !important;

  transform-origin:
    center center !important;

  filter:
    drop-shadow(
      0 35px 35px
      rgba(0,0,0,.46)
    ) !important;
}


/* ==========================================================
   DISPLAY — THIN REALISTIC BEZELS
   ========================================================== */

.macbook-display-v24 {
  position: relative !important;

  z-index: 10 !important;

  width: 100% !important;

  aspect-ratio:
    16 / 10 !important;

  padding:
    6px 6px 8px !important;

  border:
    1px solid
    rgba(176,183,190,.82) !important;

  border-radius:
    13px 13px 7px 7px !important;

  background:
    linear-gradient(
      120deg,
      #8e9499 0%,
      #4b5055 3%,
      #131619 8%,
      #090b0d 91%,
      #777d82 98%,
      #9aa0a5 100%
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.36),

    inset 0 -1px 0
    rgba(0,0,0,.65),

    0 3px 5px
    rgba(0,0,0,.32) !important;
}


/* тонкая чёрная область вокруг LCD */

.macbook-screen-v24 {
  position: relative !important;

  width: 100% !important;
  height: 100% !important;

  overflow: hidden !important;

  border-radius:
    8px 8px 4px 4px !important;

  background:
    #02050a !important;

  box-shadow:
    inset 0 0 0 1px
    rgba(255,255,255,.018),

    inset 0 0 15px
    rgba(0,0,0,.65) !important;
}


.macbook-screen-v24::after {
  content: '';

  position: absolute;

  pointer-events: none;

  inset: 0;

  background:
    linear-gradient(
      115deg,
      rgba(255,255,255,.035),
      transparent 23%,
      transparent 77%,
      rgba(255,255,255,.012)
    );
}


/* screenshot целиком */

.macbook-screen-v24 img {
  width: 100% !important;
  height: 100% !important;

  display: block !important;

  object-fit: contain !important;

  object-position:
    center center !important;

  background:
    #02050a !important;
}


/* камера */

.macbook-camera-v24 {
  top: 2px !important;

  width: 4px !important;
  height: 4px !important;

  background:
    radial-gradient(
      circle at 40% 35%,
      #204468,
      #030507 58%
    ) !important;

  box-shadow:
    0 0 0 1px
    rgba(0,0,0,.8) !important;
}


/* ==========================================================
   HINGE
   ========================================================== */

.macbook-hinge-v25 {
  position: relative !important;

  z-index: 9 !important;

  width: 94% !important;
  height: 7px !important;

  margin:
    -1px auto 0 !important;

  border-radius:
    0 0 8px 8px !important;

  background:
    linear-gradient(
      180deg,
      #15191d 0%,
      #585e63 34%,
      #8c9297 60%,
      #33383c 100%
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.20),

    0 1px 3px
    rgba(0,0,0,.45) !important;
}


/* ==========================================================
   ALUMINIUM TOP CASE
   ========================================================== */

.macbook-keyboard-deck-v26 {
  position: relative;

  z-index: 7;

  width: 108%;

  height: 145px;

  margin:
    -2px 0 0
    -4%;

  padding:
    12px 20px 10px;

  clip-path:
    polygon(
      4% 0,
      96% 0,
      100% 91%,
      98.5% 100%,
      1.5% 100%,
      0 91%
    );

  background:
    linear-gradient(
      110deg,
      #aeb3b7 0%,
      #d1d4d6 17%,
      #a6abae 39%,
      #c6c9cb 62%,
      #979da1 84%,
      #c1c5c7 100%
    );

  box-shadow:
    inset 0 2px 1px
    rgba(255,255,255,.58),

    inset 0 -3px 5px
    rgba(70,74,78,.32),

    0 10px 18px
    rgba(0,0,0,.19);

  transform:
    perspective(900px)
    rotateX(63deg);

  transform-origin:
    top center;
}


/* brushed aluminium */

.macbook-keyboard-deck-v26::before {
  content: '';

  position: absolute;

  inset: 0;

  pointer-events: none;

  opacity: .17;

  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.20) 0,
      rgba(255,255,255,.20) 1px,
      transparent 1px,
      transparent 4px
    );
}


/* ==========================================================
   KEYBOARD
   ========================================================== */

.macbook-keyboard-v26 {
  position: absolute;

  z-index: 3;

  top: 13px;
  left: 50%;

  width: 70%;

  transform:
    translateX(-50%);

  display: grid;

  grid-template-columns:
    repeat(14, minmax(0,1fr));

  grid-auto-rows:
    17px;

  gap:
    3px;

  padding:
    5px;

  border-radius:
    5px;

  background:
    rgba(70,74,77,.15);

  box-shadow:
    inset 0 1px 2px
    rgba(44,48,52,.18);
}


.mac-key-v26 {
  min-width: 0;

  display: flex;

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

  overflow: hidden;

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

  border-radius:
    2.5px;

  background:
    linear-gradient(
      180deg,
      #24272a 0%,
      #17191c 50%,
      #0e1012 100%
    );

  color:
    rgba(244,246,247,.72);

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    Arial,
    sans-serif;

  font-size:
    4.4px;

  font-style: normal;

  font-weight: 500;

  line-height: 1;

  text-transform: none;

  box-shadow:
    0 1px 1px
    rgba(0,0,0,.55),

    inset 0 1px 0
    rgba(255,255,255,.055);
}


/* реальные размеры специальных клавиш */

.mac-key-v26.delete {
  grid-column:
    span 1;
}


.mac-key-v26.tab,
.mac-key-v26.caps {
  grid-column:
    span 1;
}


.mac-key-v26.enter {
  grid-column:
    span 2;
}


.mac-key-v26.shift-left {
  grid-column:
    span 2;
}


.mac-key-v26.shift-right {
  grid-column:
    span 2;
}


.mac-key-v26.space {
  grid-column:
    span 4;
}


.mac-key-v26.command {
  font-size:
    6px;
}


.mac-key-v26.arrows {
  font-size:
    4px;
}


/* ==========================================================
   SPEAKERS
   ========================================================== */

.macbook-speaker-v26 {
  position: absolute;

  z-index: 3;

  top: 15px;

  width: 11%;
  height: 72px;

  opacity: .48;

  border-radius: 5px;

  background-image:
    radial-gradient(
      circle,
      #414548 0,
      #414548 1px,
      transparent 1.3px
    );

  background-size:
    5px 5px;
}


.macbook-speaker-v26.left {
  left: 4.3%;
}


.macbook-speaker-v26.right {
  right: 4.3%;
}


/* ==========================================================
   TRACKPAD
   ========================================================== */

.macbook-trackpad-v26 {
  position: absolute;

  z-index: 4;

  left: 50%;
  bottom: 9px;

  width: 31%;
  height: 38px;

  transform:
    translateX(-50%);

  border:
    1px solid
    rgba(78,82,85,.30);

  border-radius:
    4px;

  background:
    linear-gradient(
      145deg,
      rgba(211,214,216,.30),
      rgba(153,158,161,.15)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.35),

    inset 0 -1px 1px
    rgba(85,89,92,.10);
}


/* ==========================================================
   FRONT EDGE
   ========================================================== */

.macbook-front-edge-v26 {
  position: relative;

  z-index: 6;

  width: 111%;
  height: 8px;

  margin:
    -48px 0 0
    -5.5%;

  border-radius:
    0 0 50% 50%;

  background:
    linear-gradient(
      180deg,
      #a4a9ac 0%,
      #7a7f82 47%,
      #505558 100%
    );

  box-shadow:
    0 8px 12px
    rgba(0,0,0,.22);
}


.macbook-front-edge-v26 span {
  position: absolute;

  top: 0;
  left: 50%;

  width: 63px;
  height: 3px;

  transform:
    translateX(-50%);

  border-radius:
    0 0 7px 7px;

  background:
    rgba(92,97,101,.70);
}


/* ==========================================================
   BACK GLOW — smaller
   ========================================================== */

.macbook-back-glow-v24 {
  width: 500px !important;
  height: 430px !important;

  background:
    radial-gradient(
      circle,
      rgba(255,176,25,.19),
      rgba(255,176,25,.045) 43%,
      transparent 70%
    ) !important;

  filter:
    blur(40px) !important;
}


/* ==========================================================
   THREAT BLOCKED BADGE
   ========================================================== */

.extension-floating-warning-v24 {
  position: absolute !important;

  z-index: 30 !important;

  top: 22% !important;
  right: 1% !important;

  min-width: 150px !important;

  padding:
    10px 11px !important;

  transform: none !important;

  border-radius:
    10px !important;
}


.extension-floating-warning-v24 > span {
  width: 29px !important;
  height: 29px !important;

  font-size:
    13px !important;
}


.extension-floating-warning-v24 small {
  font-size:
    6px !important;
}


.extension-floating-warning-v24 strong {
  font-size:
    8px !important;
}


/* ==========================================================
   YOUR CURRENT SCREEN SIZE
   ========================================================== */

@media (
  min-width: 761px
) and (
  max-height: 900px
) {

  .macbook-v24 {
    width:
      min(430px,28vw) !important;

    margin-top:
      -6px !important;
  }


  .macbook-keyboard-deck-v26 {
    height:
      132px;
  }


  .macbook-keyboard-v26 {
    grid-auto-rows:
      15px;

    gap:
      2.5px;
  }


  .macbook-speaker-v26 {
    height:
      63px;
  }


  .macbook-trackpad-v26 {
    height:
      34px;

    bottom:
      9px;
  }


  .macbook-front-edge-v26 {
    margin-top:
      -44px;
  }

}


/* ==========================================================
   VERY SHORT DESKTOP
   ========================================================== */

@media (
  min-width: 761px
) and (
  max-height: 760px
) {

  .macbook-v24 {
    width:
      min(385px,26vw) !important;
  }


  .macbook-keyboard-deck-v26 {
    height:
      118px;
  }


  .macbook-keyboard-v26 {
    transform:
      translateX(-50%)
      scale(.88);

    transform-origin:
      top center;
  }


  .macbook-speaker-v26 {
    height:
      55px;
  }


  .macbook-trackpad-v26 {
    height:
      30px;
  }


  .macbook-front-edge-v26 {
    margin-top:
      -39px;
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:760px) {

  .macbook-v24 {
    width:
      min(390px,87vw) !important;

    margin: 0 !important;

    transform:
      perspective(1200px)
      rotateY(-2deg)
      rotateX(1deg) !important;
  }


  .macbook-keyboard-deck-v26 {
    height:
      120px;
  }


  .macbook-keyboard-v26 {
    transform:
      translateX(-50%)
      scale(.88);

    transform-origin:
      top center;
  }


  .extension-floating-warning-v24 {
    display:
      none !important;
  }

}



/* ==========================================================
   NOYTRIX PRODUCTS V28
   REAL MOBILE APP SCREEN
   ========================================================== */


/* ==========================================================
   MOBILE SCENE
   ========================================================== */

.theme-mobile
.product-visual-v23 {
  position: relative !important;

  overflow: visible !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  height: 100% !important;

  min-height: 0 !important;

  padding:
    18px 30px 40px !important;
}


.real-phone-scene-v24 {
  position: relative !important;

  width: 100% !important;
  height: 100% !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  overflow: visible !important;
}


/* ==========================================================
   PHONE — PREMIUM REALISTIC FRAME
   ========================================================== */

.real-phone-v24 {
  position: relative !important;

  z-index: 10 !important;

  width:
    min(300px,18vw) !important;

  aspect-ratio:
    712 / 1536 !important;

  padding:
    7px !important;

  overflow:
    visible !important;

  border:
    1px solid
    rgba(205,214,226,.55) !important;

  border-radius:
    43px !important;

  background:
    linear-gradient(
      145deg,
      #b4bcc8 0%,
      #555e6a 5%,
      #171c24 12%,
      #06090e 82%,
      #727b87 95%,
      #bec5ce 100%
    ) !important;

  box-shadow:
    0 48px 90px
    rgba(0,0,0,.58),

    0 0 90px
    rgba(55,126,255,.17),

    inset 0 1px 1px
    rgba(255,255,255,.48),

    inset 0 -1px 1px
    rgba(0,0,0,.70) !important;

  transform:
    perspective(1600px)
    rotateY(-8deg)
    rotateX(2deg)
    rotateZ(2deg) !important;

  transform-origin:
    center center !important;

  animation:
    ntxRealPhoneFloatV28
    5.5s
    ease-in-out
    infinite !important;
}


@keyframes ntxRealPhoneFloatV28 {

  0%,
  100% {

    transform:
      perspective(1600px)
      rotateY(-8deg)
      rotateX(2deg)
      rotateZ(2deg)
      translateY(0);

  }

  50% {

    transform:
      perspective(1600px)
      rotateY(-5deg)
      rotateX(1deg)
      rotateZ(1deg)
      translateY(-10px);

  }

}


/* ==========================================================
   SCREEN
   ========================================================== */

.real-phone-screen-v24 {
  position: absolute !important;

  inset:
    7px !important;

  overflow:
    hidden !important;

  border-radius:
    36px !important;

  background:
    #030617 !important;

  box-shadow:
    inset 0 0 0 1px
    rgba(255,255,255,.025),

    inset 0 0 18px
    rgba(0,0,0,.45) !important;
}


/*
   ВАЖНО:
   показываем весь твой screenshot,
   ничего не отрезаем.
*/

.real-phone-screen-v24 img {
  width: 100% !important;
  height: 100% !important;

  display: block !important;

  object-fit:
    contain !important;

  object-position:
    center center !important;

  background:
    #030617 !important;

  user-select:
    none !important;

  pointer-events:
    none !important;
}


/* лёгкое стекло поверх реального screenshot */

.real-phone-screen-v24::after {
  content: '';

  position: absolute;

  pointer-events: none;

  inset: 0;

  border-radius:
    inherit;

  background:
    linear-gradient(
      115deg,
      rgba(255,255,255,.04),
      transparent 20%,
      transparent 76%,
      rgba(255,255,255,.012)
    );

  mix-blend-mode:
    screen;

  opacity:
    .55;
}


/* ==========================================================
   TOP CAMERA / SPEAKER
   У тебя Android, поэтому убираем iPhone island
   ========================================================== */

.real-phone-island-v24 {
  display:
    none !important;
}


.real-phone-v24::before {
  content: '';

  position: absolute;

  z-index: 30;

  top:
    13px;

  left:
    50%;

  width:
    6px;

  height:
    6px;

  transform:
    translateX(-50%);

  border-radius:
    50%;

  background:
    radial-gradient(
      circle at 40% 35%,
      #354b63,
      #06090d 58%
    );

  box-shadow:
    0 0 0 2px
    rgba(0,0,0,.65);
}


/* ==========================================================
   METAL SIDE BUTTONS
   ========================================================== */

.real-phone-side-v24.left {
  left:
    -3px !important;

  top:
    115px !important;

  width:
    3px !important;

  height:
    54px !important;

  border-radius:
    4px 0 0 4px !important;

  background:
    linear-gradient(
      180deg,
      #7e8997,
      #313844
    ) !important;
}


.real-phone-side-v24.right {
  right:
    -3px !important;

  top:
    135px !important;

  width:
    3px !important;

  height:
    77px !important;

  border-radius:
    0 4px 4px 0 !important;

  background:
    linear-gradient(
      180deg,
      #818b98,
      #303741
    ) !important;
}


/* ==========================================================
   BACK GLOW
   ========================================================== */

.real-phone-glow-v24 {
  position: absolute !important;

  z-index: 0 !important;

  width:
    470px !important;

  height:
    570px !important;

  border-radius:
    50% !important;

  background:
    radial-gradient(
      circle,
      rgba(47,117,255,.25),
      rgba(46,103,221,.08) 37%,
      rgba(255,177,27,.025) 57%,
      transparent 72%
    ) !important;

  filter:
    blur(40px) !important;
}


/* ==========================================================
   FLOATING CARDS
   ========================================================== */

.real-product-badge-v24 {
  z-index:
    20 !important;

  min-width:
    166px !important;

  padding:
    11px 12px !important;

  border:
    1px solid
    rgba(77,139,234,.30) !important;

  border-radius:
    12px !important;

  background:
    rgba(4,14,31,.72) !important;

  backdrop-filter:
    blur(18px) !important;

  box-shadow:
    0 20px 55px
    rgba(0,0,0,.32),

    inset 0 1px 0
    rgba(255,255,255,.025) !important;
}


.mobile-security {
  left:
    5% !important;

  top:
    25% !important;
}


.mobile-alert {
  right:
    3% !important;

  bottom:
    24% !important;
}


/* ==========================================================
   PHONE SIZE FOR YOUR CURRENT SCREEN
   ========================================================== */

@media (
  min-width: 761px
) and (
  max-height: 900px
) {

  .real-phone-v24 {

    width:
      min(250px,16vw) !important;

  }


  .real-phone-glow-v24 {

    width:
      390px !important;

    height:
      490px !important;

  }


  .mobile-security {

    left:
      2% !important;

  }


  .mobile-alert {

    right:
      1% !important;

  }

}


/* ==========================================================
   SHORT LAPTOP
   ========================================================== */

@media (
  min-width: 761px
) and (
  max-height: 760px
) {

  .real-phone-v24 {

    width:
      min(215px,14vw) !important;

  }


  .real-product-badge-v24 {

    transform:
      scale(.88);

  }

}


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

@media(max-width:760px) {

  .real-phone-v24 {

    width:
      min(
        260px,
        65vw
      ) !important;

    transform:
      perspective(1200px)
      rotateY(-3deg)
      rotateX(1deg) !important;

  }


  .real-product-badge-v24 {

    display:
      none !important;

  }

}



/* ==========================================================
   NOYTRIX PRODUCTS V29
   REAL TELEGRAM DESKTOP
   ========================================================== */


/* ==========================================================
   RIGHT SIDE
   ========================================================== */

.theme-telegram
.product-visual-v23 {
  position: relative !important;

  height: 100% !important;

  min-height: 0 !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  overflow: visible !important;

  padding:
    20px 18px 55px !important;
}


.telegram-real-scene-v24 {
  position: relative !important;

  width: 100% !important;
  height: 100% !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  overflow: visible !important;
}


/* ==========================================================
   REMOVE OLD FAKE TELEGRAM HEADER
   screenshot already contains Telegram Desktop UI
   ========================================================== */

.telegram-window-top-v24 {
  display: none !important;
}


/* ==========================================================
   REAL TELEGRAM WINDOW
   ========================================================== */

.telegram-window-v24 {
  position: relative !important;

  z-index: 10 !important;

  width:
    min(690px, 42vw) !important;

  max-width:
    100% !important;

  aspect-ratio:
    1648 / 928 !important;

  overflow:
    hidden !important;

  border:
    1px solid
    rgba(123,164,205,.46) !important;

  border-radius:
    15px !important;

  background:
    #eef1f4 !important;

  box-shadow:
    0 50px 110px
    rgba(0,0,0,.48),

    0 20px 45px
    rgba(0,0,0,.28),

    0 0 90px
    rgba(39,170,255,.12),

    inset 0 1px 0
    rgba(255,255,255,.38) !important;

  transform:
    perspective(1700px)
    rotateY(-5deg)
    rotateX(2deg)
    rotateZ(-.4deg) !important;

  transform-origin:
    center center !important;

  animation:
    telegramRealFloatV29
    6s ease-in-out
    infinite !important;
}


@keyframes telegramRealFloatV29 {

  0%,
  100% {
    transform:
      perspective(1700px)
      rotateY(-5deg)
      rotateX(2deg)
      rotateZ(-.4deg)
      translateY(0);
  }

  50% {
    transform:
      perspective(1700px)
      rotateY(-3deg)
      rotateX(1deg)
      rotateZ(-.2deg)
      translateY(-8px);
  }

}


/* ==========================================================
   SCREEN
   ========================================================== */

.telegram-real-screen-v24 {
  position: relative !important;

  width: 100% !important;
  height: 100% !important;

  overflow:
    hidden !important;

  background:
    #eef1f4 !important;
}


/*
   Показываем ВЕСЬ реальный Telegram screenshot.
   Не crop.
*/

.telegram-real-screen-v24 img {
  width: 100% !important;
  height: 100% !important;

  display: block !important;

  object-fit:
    contain !important;

  object-position:
    center center !important;

  background:
    #eef1f4 !important;

  user-select:
    none !important;

  pointer-events:
    none !important;
}


/* subtle screen glass */

.telegram-real-screen-v24::after {
  content: '';

  position: absolute;

  pointer-events: none;

  inset: 0;

  background:
    linear-gradient(
      118deg,
      rgba(255,255,255,.09),
      transparent 17%,
      transparent 76%,
      rgba(255,255,255,.015)
    );

  opacity:
    .5;
}


/* ==========================================================
   WINDOW FRAME DETAILS
   ========================================================== */

.telegram-window-v24::before {
  content: '';

  position: absolute;

  z-index: 30;

  pointer-events: none;

  inset: 0;

  border-radius:
    inherit;

  box-shadow:
    inset 0 0 0 1px
    rgba(255,255,255,.12),

    inset 0 -1px 0
    rgba(0,0,0,.12);
}


/* ==========================================================
   BACK GLOW
   ========================================================== */

.telegram-real-glow-v24 {
  position: absolute !important;

  z-index: 0 !important;

  width:
    680px !important;

  height:
    500px !important;

  border-radius:
    50% !important;

  background:
    radial-gradient(
      circle,
      rgba(41,176,255,.27),
      rgba(39,136,255,.07) 40%,
      transparent 70%
    ) !important;

  filter:
    blur(48px) !important;
}


/* ==========================================================
   LIVE BADGE
   ========================================================== */

.telegram-live-badge-v24 {
  position: absolute !important;

  z-index: 25 !important;

  right:
    0 !important;

  bottom:
    18% !important;

  display: flex !important;

  align-items: center !important;

  gap:
    8px !important;

  padding:
    11px 14px !important;

  border:
    1px solid
    rgba(73,191,255,.28) !important;

  border-radius:
    999px !important;

  background:
    rgba(4,19,34,.78) !important;

  color:
    #7bd1ff !important;

  font-size:
    8px !important;

  font-weight:
    850 !important;

  letter-spacing:
    .10em !important;

  backdrop-filter:
    blur(16px) !important;

  box-shadow:
    0 17px 40px
    rgba(0,0,0,.28),

    0 0 40px
    rgba(46,172,255,.07) !important;
}


.telegram-live-badge-v24 span {
  width:
    7px !important;

  height:
    7px !important;

  border-radius:
    50% !important;

  background:
    #42dc96 !important;

  box-shadow:
    0 0 10px
    rgba(66,220,150,.65) !important;
}


/* ==========================================================
   EXTRA FLOATING RESULT CARD
   ========================================================== */

.telegram-real-scene-v24::after {
  content:
    '100 / 100  •  CRITICAL';

  position: absolute;

  z-index: 24;

  left:
    1%;

  top:
    22%;

  min-width:
    150px;

  padding:
    12px 15px;

  border:
    1px solid
    rgba(255,76,85,.31);

  border-radius:
    11px;

  background:
    rgba(38,7,13,.78);

  color:
    #ff656c;

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    .045em;

  backdrop-filter:
    blur(15px);

  box-shadow:
    0 20px 50px
    rgba(0,0,0,.31),

    0 0 40px
    rgba(255,66,76,.06);
}


/* ==========================================================
   CURRENT DESKTOP / YOUR SCREEN
   ========================================================== */

@media (
  min-width: 761px
) and (
  max-height: 900px
) {

  .telegram-window-v24 {

    width:
      min(610px, 39vw) !important;

  }


  .telegram-real-glow-v24 {

    width:
      590px !important;

    height:
      440px !important;

  }


  .telegram-real-scene-v24::after {

    left:
      -1%;

    top:
      19%;

  }


  .telegram-live-badge-v24 {

    right:
      -1% !important;

    bottom:
      16% !important;

  }

}


/* ==========================================================
   SHORT SCREEN
   ========================================================== */

@media (
  min-width: 761px
) and (
  max-height: 760px
) {

  .telegram-window-v24 {

    width:
      min(540px, 36vw) !important;

  }


  .telegram-real-scene-v24::after {

    transform:
      scale(.9);

    transform-origin:
      left center;

  }


  .telegram-live-badge-v24 {

    transform:
      scale(.9);

    transform-origin:
      right center;

  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:760px) {

  .telegram-window-v24 {

    width:
      min(
        620px,
        92vw
      ) !important;

    transform:
      perspective(1200px)
      rotateY(-2deg)
      rotateX(1deg) !important;

  }


  .telegram-real-scene-v24::after,
  .telegram-live-badge-v24 {

    display:
      none !important;

  }

}



/* ==========================================================
   NOYTRIX PRODUCTS V30
   REAL BROWSER EXTENSION VISUAL
   ========================================================== */


/* ==========================================================
   CLEAN OLD FAKE OVERLAY
   Generated image already contains warning UI
   ========================================================== */

.theme-extension
.extension-floating-warning-v24 {
  display: none !important;
}


/* ==========================================================
   SCENE
   ========================================================== */

.theme-extension
.product-visual-v23 {
  position: relative !important;

  height: 100% !important;

  min-height: 0 !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  overflow: visible !important;

  padding:
    16px 20px 52px !important;
}


.theme-extension
.macbook-scene-v24 {
  position: relative !important;

  width: 100% !important;
  height: 100% !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  overflow: visible !important;
}


/* ==========================================================
   MACBOOK SIZE
   smaller so the FULL machine always fits
   ========================================================== */

.theme-extension
.macbook-v24 {
  position: relative !important;

  z-index: 10 !important;

  width:
    min(465px,29vw) !important;

  max-width:
    465px !important;

  margin:
    -5px 8px 0 0 !important;

  overflow: visible !important;

  transform:
    perspective(1800px)
    rotateY(-4deg)
    rotateX(1.5deg)
    rotateZ(.15deg) !important;

  transform-origin:
    center center !important;

  filter:
    drop-shadow(
      0 34px 38px
      rgba(0,0,0,.50)
    ) !important;
}


/* ==========================================================
   SCREEN FRAME
   ========================================================== */

.theme-extension
.macbook-display-v24 {
  position: relative !important;

  z-index: 10 !important;

  width: 100% !important;

  aspect-ratio:
    16 / 10 !important;

  padding:
    6px 6px 8px !important;

  border:
    1px solid
    rgba(190,198,207,.72) !important;

  border-radius:
    13px 13px 7px 7px !important;

  background:
    linear-gradient(
      120deg,
      #a0a7ad 0%,
      #4c535a 4%,
      #12161b 9%,
      #06090c 91%,
      #737a81 97%,
      #adb3b9 100%
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.40),

    inset 0 -1px 0
    rgba(0,0,0,.65),

    0 3px 5px
    rgba(0,0,0,.35) !important;
}


/* ==========================================================
   REAL GENERATED IMAGE
   ========================================================== */

.theme-extension
.macbook-screen-v24 {
  position: relative !important;

  width: 100% !important;
  height: 100% !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  overflow: hidden !important;

  border-radius:
    8px 8px 4px 4px !important;

  background:
    linear-gradient(
      145deg,
      #050c18,
      #02060d
    ) !important;

  box-shadow:
    inset 0 0 0 1px
    rgba(255,255,255,.02),

    inset 0 0 20px
    rgba(0,0,0,.6) !important;
}


/*
   ВАЖНО:
   картинка видна ЦЕЛИКОМ.
*/

.theme-extension
.macbook-screen-v24 img {
  width: 100% !important;
  height: 100% !important;

  display: block !important;

  object-fit:
    contain !important;

  object-position:
    center center !important;

  background:
    #030815 !important;

  pointer-events:
    none !important;

  user-select:
    none !important;
}


/* subtle glossy real-display reflection */

.theme-extension
.macbook-screen-v24::after {
  content: '';

  position: absolute;

  z-index: 5;

  pointer-events: none;

  inset: 0;

  background:
    linear-gradient(
      115deg,
      rgba(255,255,255,.055),
      transparent 18%,
      transparent 68%,
      rgba(255,255,255,.012)
    );

  opacity: .50;
}


/* ==========================================================
   CAMERA
   ========================================================== */

.theme-extension
.macbook-camera-v24 {
  z-index: 20 !important;

  top: 2px !important;
  left: 50% !important;

  width: 4px !important;
  height: 4px !important;

  transform:
    translateX(-50%) !important;

  border-radius:
    50% !important;

  background:
    radial-gradient(
      circle at 40% 35%,
      #31516e,
      #030507 58%
    ) !important;
}


/* ==========================================================
   HINGE
   ========================================================== */

.theme-extension
.macbook-hinge-v25 {
  width: 94% !important;

  height: 7px !important;

  margin:
    -1px auto 0 !important;

  background:
    linear-gradient(
      180deg,
      #161a1e,
      #656b70 42%,
      #969b9f 65%,
      #34393d
    ) !important;
}


/* ==========================================================
   REALISTIC ALUMINIUM KEYBOARD DECK
   ========================================================== */

.theme-extension
.macbook-keyboard-deck-v26 {
  width: 108% !important;

  height: 137px !important;

  margin:
    -2px 0 0 -4% !important;

  padding:
    12px 20px 10px !important;

  background:
    linear-gradient(
      110deg,
      #aeb3b7 0%,
      #d6d9db 17%,
      #a5aaae 39%,
      #c9ccce 63%,
      #959a9e 84%,
      #c4c8ca 100%
    ) !important;

  box-shadow:
    inset 0 2px 1px
    rgba(255,255,255,.62),

    inset 0 -3px 5px
    rgba(70,74,78,.30),

    0 10px 18px
    rgba(0,0,0,.20) !important;
}


/* keyboard */

.theme-extension
.macbook-keyboard-v26 {
  width:
    69% !important;

  top:
    12px !important;

  grid-auto-rows:
    16px !important;

  gap:
    2.7px !important;
}


.theme-extension
.mac-key-v26 {
  background:
    linear-gradient(
      180deg,
      #2c3034 0%,
      #171a1d 58%,
      #0d0f11 100%
    ) !important;

  color:
    rgba(255,255,255,.68) !important;

  box-shadow:
    0 1px 1px rgba(0,0,0,.65),

    inset 0 1px 0
    rgba(255,255,255,.055) !important;
}


/* speakers */

.theme-extension
.macbook-speaker-v26 {
  top:
    15px !important;

  height:
    65px !important;

  opacity:
    .43 !important;
}


/* ==========================================================
   TRACKPAD
   ========================================================== */

.theme-extension
.macbook-trackpad-v26 {
  bottom:
    8px !important;

  width:
    31% !important;

  height:
    35px !important;

  border:
    1px solid
    rgba(73,78,82,.30) !important;

  background:
    linear-gradient(
      145deg,
      rgba(224,226,228,.30),
      rgba(145,150,154,.15)
    ) !important;
}


/* ==========================================================
   FRONT EDGE
   ========================================================== */

.theme-extension
.macbook-front-edge-v26 {
  width:
    111% !important;

  height:
    8px !important;

  margin:
    -45px 0 0 -5.5% !important;

  background:
    linear-gradient(
      180deg,
      #a9aeb1,
      #777c80 47%,
      #505457
    ) !important;
}


/* ==========================================================
   PREMIUM GOLD/BLUE LIGHT BEHIND DEVICE
   ========================================================== */

.theme-extension
.macbook-back-glow-v24 {
  position: absolute !important;

  z-index: 0 !important;

  width:
    560px !important;

  height:
    470px !important;

  border-radius:
    50% !important;

  background:
    radial-gradient(
      circle at 54% 48%,
      rgba(255,180,25,.20),
      rgba(255,176,22,.055) 31%,
      rgba(51,104,255,.065) 49%,
      transparent 71%
    ) !important;

  filter:
    blur(47px) !important;
}


/* ==========================================================
   SMALL PREMIUM LABEL
   ========================================================== */

.theme-extension
.macbook-scene-v24::after {
  content:
    'NOYTRIX SHIELD  •  LIVE PROTECTION';

  position: absolute;

  z-index: 25;

  right:
    1%;

  bottom:
    18%;

  padding:
    10px 13px;

  border:
    1px solid
    rgba(255,184,40,.25);

  border-radius:
    999px;

  background:
    rgba(8,15,28,.76);

  color:
    #efb435;

  font-size:
    7px;

  font-weight:
    850;

  letter-spacing:
    .10em;

  backdrop-filter:
    blur(15px);

  box-shadow:
    0 18px 44px
    rgba(0,0,0,.28);
}


/* ==========================================================
   CURRENT DESKTOP
   ========================================================== */

@media (
  min-width:761px
) and (
  max-height:900px
) {

  .theme-extension
  .macbook-v24 {

    width:
      min(425px,27vw) !important;

  }


  .theme-extension
  .macbook-keyboard-deck-v26 {

    height:
      127px !important;

  }


  .theme-extension
  .macbook-keyboard-v26 {

    grid-auto-rows:
      14px !important;

  }


  .theme-extension
  .macbook-front-edge-v26 {

    margin-top:
      -42px !important;

  }


  .theme-extension
  .macbook-back-glow-v24 {

    width:
      500px !important;

    height:
      420px !important;

  }

}


/* ==========================================================
   SHORT DESKTOP
   ========================================================== */

@media (
  min-width:761px
) and (
  max-height:760px
) {

  .theme-extension
  .macbook-v24 {

    width:
      min(385px,25vw) !important;

  }


  .theme-extension
  .macbook-keyboard-deck-v26 {

    height:
      112px !important;

  }


  .theme-extension
  .macbook-keyboard-v26 {

    transform:
      translateX(-50%)
      scale(.88) !important;

    transform-origin:
      top center !important;

  }


  .theme-extension
  .macbook-scene-v24::after {

    display:
      none !important;

  }

}



/* ==========================================================
   NOYTRIX EXTENSION V31
   FULL SCREEN + SHARPER + BIGGER MACBOOK
   ========================================================== */


/* больше места под продукт справа */
.theme-extension .product-visual-v23 {
  height: 100% !important;
  padding: 10px 6px 45px !important;

  overflow: visible !important;
}


/* ==========================================================
   MACBOOK — BIGGER, STRAIGHTER, SHARPER
   ========================================================== */

.theme-extension .macbook-v24 {
  width: min(590px, 36vw) !important;
  max-width: 590px !important;

  margin: 0 !important;

  /*
     Убираем сильную перспективу.
     Именно transform делал мелкие элементы менее чёткими.
  */
  transform:
    translate3d(0, 0, 0)
    rotateY(-1deg)
    rotateX(.5deg) !important;

  backface-visibility: hidden !important;
  -webkit-font-smoothing: antialiased;

  filter:
    drop-shadow(0 42px 46px rgba(0,0,0,.55))
    drop-shadow(0 0 35px rgba(255,174,22,.06))
    !important;
}


/* ==========================================================
   DISPLAY
   ========================================================== */

.theme-extension .macbook-display-v24 {
  padding: 5px !important;

  border-radius: 15px 15px 8px 8px !important;

  border:
    1px solid rgba(198,205,213,.82) !important;

  background:
    linear-gradient(
      135deg,
      #b6bcc1 0%,
      #5e6469 4%,
      #111519 9%,
      #050709 91%,
      #747a7f 97%,
      #b1b6ba 100%
    ) !important;
}


/* ==========================================================
   SCREEN — IMAGE FILLS WHOLE DISPLAY
   ========================================================== */

.theme-extension .macbook-screen-v24 {
  position: relative !important;

  width: 100% !important;
  height: 100% !important;

  overflow: hidden !important;

  border-radius: 10px 10px 5px 5px !important;

  background: #02050b !important;

  /*
     убираем внутренние тени, которые затемняли screenshot
  */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.018)
    !important;
}


/*
   ГЛАВНОЕ:
   больше НЕ contain.
   Расширение заполняет весь экран ноутбука.
*/

.theme-extension .macbook-screen-v24 img {
  position: absolute !important;

  top: 50% !important;
  left: 50% !important;

  width: 100% !important;
  height: 100% !important;

  max-width: none !important;
  max-height: none !important;

  object-fit: cover !important;
  object-position: center center !important;

  /*
     слегка увеличиваем исходник,
     чтобы убрать внутренние поля самой картинки
  */
  transform:
    translate(-50%, -50%)
    scale(1.12) !important;

  transform-origin: center center !important;

  /*
     визуально делаем asset более ясным
  */
  filter:
    contrast(1.10)
    brightness(1.035)
    saturate(1.08)
    !important;

  image-rendering: auto !important;

  backface-visibility: hidden !important;

  pointer-events: none !important;
}


/* убираем старое стекло — оно тоже размывало UI */

.theme-extension .macbook-screen-v24::after {
  display: none !important;
}


/* камера остаётся минимальной */

.theme-extension .macbook-camera-v24 {
  width: 4px !important;
  height: 4px !important;

  top: 1px !important;
}


/* ==========================================================
   KEYBOARD
   чуть крупнее вместе с ноутбуком
   ========================================================== */

.theme-extension .macbook-keyboard-deck-v26 {
  height: 158px !important;
}


.theme-extension .macbook-keyboard-v26 {
  width: 70% !important;

  grid-auto-rows: 18px !important;

  gap: 3px !important;
}


.theme-extension .macbook-speaker-v26 {
  height: 77px !important;
}


.theme-extension .macbook-trackpad-v26 {
  width: 32% !important;
  height: 42px !important;

  bottom: 10px !important;
}


.theme-extension .macbook-front-edge-v26 {
  margin-top: -52px !important;
}


/* ==========================================================
   GLOW
   ========================================================== */

.theme-extension .macbook-back-glow-v24 {
  width: 650px !important;
  height: 530px !important;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(255,177,24,.22),
      rgba(255,170,16,.07) 34%,
      rgba(48,91,190,.055) 52%,
      transparent 72%
    ) !important;

  filter: blur(50px) !important;
}


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

.theme-extension .macbook-scene-v24::after {
  right: 2% !important;
  bottom: 13% !important;

  padding: 10px 14px !important;

  font-size: 8px !important;
}


/* ==========================================================
   YOUR CURRENT SCREEN
   1536-ish desktop
   ========================================================== */

@media (
  min-width: 1200px
) and (
  max-height: 950px
) {

  .theme-extension .macbook-v24 {
    width: min(555px, 35vw) !important;
  }

  .theme-extension .macbook-keyboard-deck-v26 {
    height: 148px !important;
  }

  .theme-extension .macbook-keyboard-v26 {
    grid-auto-rows: 17px !important;
  }

  .theme-extension .macbook-trackpad-v26 {
    height: 39px !important;
  }

  .theme-extension .macbook-front-edge-v26 {
    margin-top: -49px !important;
  }
}


/* ==========================================================
   SHORT DESKTOP
   ========================================================== */

@media (
  min-width: 761px
) and (
  max-height: 760px
) {

  .theme-extension .macbook-v24 {
    width: min(475px, 32vw) !important;
  }

  .theme-extension .macbook-keyboard-deck-v26 {
    height: 128px !important;
  }

  .theme-extension .macbook-keyboard-v26 {
    grid-auto-rows: 14px !important;
  }

  .theme-extension .macbook-front-edge-v26 {
    margin-top: -42px !important;
  }
}



/* ==========================================================
   NOYTRIX PRODUCTS V32
   MOVE FLOATING BADGES AWAY FROM PRODUCT SCREENS
   ========================================================== */


/* ==========================================================
   MOBILE
   LIVE CHECK / SMART ALERT
   ========================================================== */

/*
   Было: карточки лежали поверх телефона.
   Теперь одна слева сверху, вторая справа снизу,
   не закрывая интерфейс приложения.
*/

.theme-mobile .mobile-security {
  top: 17% !important;
  left: -4% !important;

  right: auto !important;
  bottom: auto !important;

  transform: none !important;
}


.theme-mobile .mobile-alert {
  top: auto !important;
  left: auto !important;

  right: -2% !important;
  bottom: 15% !important;

  transform: none !important;
}


/* сами карточки немного компактнее */

.theme-mobile .real-product-badge-v24 {
  min-width: 145px !important;

  padding: 9px 11px !important;

  gap: 8px !important;

  border-radius: 10px !important;
}


.theme-mobile .real-product-badge-v24 > span {
  width: 29px !important;
  height: 29px !important;

  flex: 0 0 29px !important;
}


.theme-mobile .real-product-badge-v24 b {
  font-size: 8px !important;
}


.theme-mobile .real-product-badge-v24 small {
  font-size: 7px !important;
}


/* ==========================================================
   ANTIVIRUS
   IN DEVELOPMENT
   ========================================================== */

/*
   Уводим зелёный статус ВЫШЕ монитора.
*/

.theme-antivirus .antivirus-dev-label-v24 {
  top: 5% !important;
  right: 5% !important;

  left: auto !important;
  bottom: auto !important;

  transform: translateY(-8px) !important;

  z-index: 30 !important;
}


/* ==========================================================
   ANTIVIRUS
   BLOCKED / MALICIOUS WALLET REQUEST
   ========================================================== */

/*
   Уводим красную карточку вниз и влево
   за пределы матрицы монитора.
*/

.theme-antivirus .antivirus-threat-v24 {
  left: 3% !important;

  top: auto !important;
  right: auto !important;

  bottom: 7% !important;

  z-index: 30 !important;

  min-width: 155px !important;

  padding: 11px 13px !important;
}


/* ==========================================================
   GIVE DEVICE VISUALS SOME SAFE SPACE
   ========================================================== */

.theme-mobile .product-visual-v23,
.theme-antivirus .product-visual-v23 {
  padding-left: 45px !important;
  padding-right: 45px !important;
}


.theme-mobile .real-phone-scene-v24,
.theme-antivirus .antivirus-scene-v24 {
  overflow: visible !important;
}


/* ==========================================================
   YOUR CURRENT DESKTOP HEIGHT
   ========================================================== */

@media (
  min-width: 761px
) and (
  max-height: 950px
) {

  /* mobile */

  .theme-mobile .mobile-security {
    top: 13% !important;
    left: -1% !important;
  }


  .theme-mobile .mobile-alert {
    right: 0 !important;
    bottom: 12% !important;
  }


  /* antivirus */

  .theme-antivirus .antivirus-dev-label-v24 {
    top: 2% !important;
    right: 4% !important;
  }


  .theme-antivirus .antivirus-threat-v24 {
    left: 1% !important;
    bottom: 5% !important;
  }

}


/* ==========================================================
   SMALLER WIDTH
   ========================================================== */

@media (
  min-width: 761px
) and (
  max-width: 1450px
) {

  .theme-mobile .real-product-badge-v24 {
    transform: scale(.88) !important;
  }


  .theme-mobile .mobile-security {
    transform-origin: left center !important;
  }


  .theme-mobile .mobile-alert {
    transform-origin: right center !important;
  }


  .theme-antivirus .antivirus-dev-label-v24 {
    transform:
      translateY(-5px)
      scale(.90) !important;

    transform-origin: right center !important;
  }


  .theme-antivirus .antivirus-threat-v24 {
    transform: scale(.90) !important;

    transform-origin: left center !important;
  }

}


/* ==========================================================
   MOBILE
   Floating promo cards are unnecessary there
   ========================================================== */

@media(max-width:760px) {

  .theme-mobile .real-product-badge-v24,
  .theme-antivirus .antivirus-dev-label-v24,
  .theme-antivirus .antivirus-threat-v24 {
    display: none !important;
  }

}


/* ==========================================================
   NOYTRIX MOBILE BADGES V35
   ONLY MOVE BADGES — PHONE UNTOUCHED
   ========================================================== */

/* верхний LIVE CHECK — левее */
.theme-mobile .mobile-security {
  left: -12% !important;
  right: auto !important;

  transform:
    translateX(-20px) !important;
}


/* нижний SMART ALERT — правее */
.theme-mobile .mobile-alert {
  right: -12% !important;
  left: auto !important;

  transform:
    translateX(20px) !important;
}


/* на твоём размере экрана ещё чуть дальше */
@media (
  min-width: 1200px
) and (
  max-height: 950px
) {

  .theme-mobile .mobile-security {
    left: -16% !important;

    transform:
      translateX(-25px) !important;
  }

  .theme-mobile .mobile-alert {
    right: -16% !important;

    transform:
      translateX(25px) !important;
  }

}