/* ============================================================
   PUSK HEADER V12 RETRY 1
   Desktop grid correction.

   DESKTOP:
   [ BRAND ][ WINDOWS ][ ANDROID ][ IOS ][ CABINET ]

   MOBILE:
   BRAND
   [ WINDOWS ][ ANDROID ]
   [ IOS     ][ CABINET ]

   Foreground UI only.
   Global approved background remains separate.
   ============================================================ */

.pusk-stage {
  width: min(94vw, 3360px);
  margin-inline: auto;
}

/* ============================================================
   HEADER FRAME
   ============================================================ */

.pusk-header-v12 {
  position: relative;
  z-index: 10;

  padding:
    clamp(24px, 2.2vw, 44px)
    0;
}

.pusk-header-stage-v12 {
  display: grid;

  grid-template-columns:
    minmax(360px, .95fr)
    minmax(0, 2.95fr);

  align-items: center;

  gap:
    clamp(24px, 1.8vw, 48px);
}

/* ============================================================
   BRAND
   ============================================================ */

.pusk-brand-v12 {
  min-width: 0;

  display: flex;
  align-items: center;

  gap:
    clamp(17px, 1.1vw, 27px);

  text-decoration: none;
}

.pusk-logo-v12 {
  width:
    clamp(98px, 5.9vw, 128px);

  height:
    clamp(98px, 5.9vw, 128px);

  flex: 0 0 auto;

  object-fit: contain;

  border-radius: 28px;

  filter:
    drop-shadow(0 0 9px rgba(37, 199, 255, .98))
    drop-shadow(0 0 22px rgba(34, 108, 255, .80))
    drop-shadow(0 0 38px rgba(126, 45, 255, .55));
}

.pusk-wordmark-v12 {
  white-space: nowrap;

  font-family:
    "Russo One",
    "Arial Black",
    system-ui,
    sans-serif;

  font-size:
    clamp(38px, 2.65vw, 57px);

  font-weight: 900;

  line-height: .95;

  letter-spacing: .012em;

  color: #ffffff;

  text-shadow:
    0 0 5px rgba(255, 255, 255, .36),
    0 0 15px rgba(55, 125, 255, .58),
    0 0 31px rgba(61, 75, 255, .28);
}

/* ============================================================
   DESKTOP ACTION ROW
   ============================================================ */

.pusk-header-actions-v12 {
  min-width: 0;

  display: grid;

  grid-template-columns:
    repeat(3, minmax(210px, 1fr))
    minmax(290px, 1.32fr);

  align-items: stretch;

  gap:
    clamp(12px, .85vw, 22px);
}

/* ============================================================
   TILE BASE
   ============================================================ */

.pusk-action-v12 {
  width: 100%;
  min-width: 0;

  min-height:
    clamp(84px, 5vw, 102px);

  position: relative;
  isolation: isolate;

  display: grid;

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

  align-items: center;

  gap:
    clamp(10px, .68vw, 16px);

  padding:
    0
    clamp(14px, .85vw, 22px);

  border:
    2px solid rgba(66, 176, 255, .86);

  border-radius:
    clamp(22px, 1.4vw, 29px);

  cursor: pointer;

  text-decoration: none;

  color: #ffffff;

  background:
    linear-gradient(
      180deg,
      rgba(11, 30, 80, .96) 0%,
      rgba(5, 18, 56, .97) 55%,
      rgba(3, 9, 32, .985) 100%
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 0 0 1px rgba(37, 106, 255, .18),
    0 0 13px rgba(24, 158, 255, .55),
    0 0 29px rgba(30, 94, 255, .34),
    0 14px 32px rgba(0, 0, 0, .32);

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

.pusk-action-v12[hidden] {
  display: none;
}

.pusk-action-v12::before {
  content: "";

  position: absolute;
  inset: 3px;

  z-index: -1;

  border-radius: inherit;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, .075),
      transparent 42%
    );
}

.pusk-action-v12:hover {
  transform:
    translateY(-2px)
    scale(1.01);

  filter:
    brightness(1.10);
}

.pusk-action-v12:active {
  transform:
    translateY(0)
    scale(1);
}

.pusk-action-v12:focus-visible {
  outline:
    2px solid #ffffff;

  outline-offset:
    4px;
}

/* ============================================================
   COLORS
   ============================================================ */

.pusk-windows-v12 {
  border-color:
    rgba(20, 194, 255, .98);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 0 12px rgba(0, 204, 255, .72),
    0 0 30px rgba(0, 107, 255, .45),
    0 14px 32px rgba(0, 0, 0, .32);
}

.pusk-android-v12 {
  border-color:
    rgba(30, 242, 214, .98);

  background:
    linear-gradient(
      180deg,
      rgba(5, 66, 77, .96),
      rgba(3, 38, 54, .98) 56%,
      rgba(2, 15, 31, .99)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 0 12px rgba(10, 242, 214, .68),
    0 0 30px rgba(0, 159, 190, .40),
    0 14px 32px rgba(0, 0, 0, .32);
}

.pusk-ios-v12 {
  border-color:
    rgba(142, 87, 255, .98);

  background:
    linear-gradient(
      180deg,
      rgba(51, 24, 113, .96),
      rgba(27, 13, 72, .98) 56%,
      rgba(11, 7, 35, .99)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 0 13px rgba(126, 79, 255, .72),
    0 0 31px rgba(95, 43, 255, .43),
    0 14px 32px rgba(0, 0, 0, .32);
}

.pusk-cabinet-v12 {
  border-color:
    rgba(255, 61, 238, .98);

  background:
    linear-gradient(
      180deg,
      rgba(83, 23, 142, .97),
      rgba(48, 11, 101, .985) 55%,
      rgba(23, 6, 59, .995)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .21),
    0 0 13px rgba(255, 39, 227, .78),
    0 0 34px rgba(189, 40, 255, .50),
    0 14px 32px rgba(0, 0, 0, .34);
}

/* ============================================================
   ICON ZONE
   ============================================================ */

.pusk-action-icon-v12 {
  width:
    clamp(42px, 2.4vw, 55px);

  height:
    clamp(42px, 2.4vw, 55px);

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

  padding-right:
    clamp(9px, .6vw, 14px);

  border-right:
    1px solid rgba(168, 205, 255, .38);
}

.pusk-action-icon-v12 svg {
  width:
    clamp(31px, 1.85vw, 42px);

  height:
    clamp(31px, 1.85vw, 42px);

  fill: currentColor;
}

.pusk-windows-v12 .pusk-action-icon-v12 {
  color: #14deff;

  filter:
    drop-shadow(0 0 9px rgba(0, 225, 255, .95));
}

.pusk-android-v12 .pusk-action-icon-v12 {
  color: #24f0d4;

  filter:
    drop-shadow(0 0 9px rgba(21, 255, 220, .92));
}

.pusk-ios-v12 .pusk-action-icon-v12 {
  color: #ffffff;

  filter:
    drop-shadow(0 0 9px rgba(255, 255, 255, .72))
    drop-shadow(0 0 17px rgba(134, 83, 255, .72));
}

.pusk-cabinet-v12 .pusk-action-icon-v12 {
  color: #ff86ec;

  filter:
    drop-shadow(0 0 10px rgba(255, 61, 223, .92));
}

/* ============================================================
   TEXT
   ============================================================ */

.pusk-action-copy-v12 {
  min-width: 0;

  display: flex;
  flex-direction: column;

  align-items: flex-start;

  gap: 3px;
}

.pusk-action-kicker-v12 {
  font-family:
    "Russo One",
    "Arial Black",
    system-ui,
    sans-serif;

  font-size:
    clamp(9px, .55vw, 12px);

  font-weight: 800;

  line-height: 1;

  color:
    rgba(206, 222, 255, .80);
}

.pusk-action-title-v12 {
  font-family:
    "Russo One",
    "Arial Black",
    system-ui,
    sans-serif;

  font-size:
    clamp(17px, .95vw, 22px);

  font-weight: 900;

  line-height: 1;

  color: #ffffff;

  text-shadow:
    0 0 8px rgba(255, 255, 255, .18);
}

.pusk-download-v12 {
  font-size:
    clamp(28px, 1.55vw, 36px);

  line-height: .8;

  color: #e0f3ff;

  text-shadow:
    0 0 9px rgba(100, 191, 255, .82);
}

.pusk-cabinet-label-v12 {
  white-space: nowrap;

  font-family:
    "Russo One",
    "Arial Black",
    system-ui,
    sans-serif;

  font-size:
    clamp(14px, .85vw, 19px);

  font-weight: 900;

  line-height: 1;

  color: #ffffff;
}

.pusk-chevron-v12 {
  font-size:
    clamp(31px, 1.7vw, 39px);

  line-height: .7;

  color: #f1ddff;

  text-shadow:
    0 0 10px rgba(222, 87, 255, .88);
}

/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1320px) {

  .pusk-header-stage-v12 {
    grid-template-columns:
      1fr;

    gap: 18px;
  }

  .pusk-brand-v12 {
    justify-content: center;
  }

  .pusk-logo-v12 {
    width: 88px;
    height: 88px;
  }

  .pusk-wordmark-v12 {
    font-size: 40px;
  }

  .pusk-header-actions-v12 {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));
  }

}

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

@media (max-width: 760px) {

  .pusk-stage {
    width:
      calc(100% - 24px);
  }

  .pusk-header-v12 {
    padding:
      18px 0
      22px;
  }

  .pusk-header-stage-v12 {
    gap: 17px;
  }

  .pusk-brand-v12 {
    justify-content: center;

    gap: 15px;
  }

  .pusk-logo-v12 {
    width: 76px;
    height: 76px;

    border-radius: 21px;
  }

  .pusk-wordmark-v12 {
    font-size: 31px;
  }

  .pusk-header-actions-v12 {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 10px;
  }

  .pusk-action-v12 {
    min-height: 74px;

    padding:
      0
      11px;

    gap: 8px;

    border-width: 1px;
    border-radius: 20px;
  }

  .pusk-action-icon-v12 {
    width: 40px;
    height: 40px;

    padding-right: 8px;
  }

  .pusk-action-icon-v12 svg {
    width: 29px;
    height: 29px;
  }

  .pusk-action-kicker-v12 {
    display: none;
  }

  .pusk-action-title-v12 {
    font-size: 13px;
  }

  .pusk-download-v12 {
    display: none;
  }

  .pusk-cabinet-label-v12 {
    white-space: normal;

    font-size: 11px;
    line-height: 1.05;

    text-align: left;
  }

  .pusk-chevron-v12 {
    display: none;
  }

}

@media (max-width: 410px) {

  .pusk-logo-v12 {
    width: 70px;
    height: 70px;
  }

  .pusk-wordmark-v12 {
    font-size: 29px;
  }

  .pusk-header-actions-v12 {
    gap: 8px;
  }

  .pusk-action-v12 {
    min-height: 72px;

    padding-inline: 9px;
  }

  .pusk-action-title-v12 {
    font-size: 12px;
  }

  .pusk-cabinet-label-v12 {
    font-size: 10px;
  }

}