/* OFF page loading skeleton */
/* ── OFF page skeleton ─────────────────────────── */
    .off-skeleton {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      inset: 0;
      z-index: 9999;
      overflow: hidden;
      background: #0d1117;
      opacity: 1;
      visibility: visible;
      transition: opacity 0.18s ease, visibility 0.18s ease;
    }
    .off-skeleton.is-hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    .off-sk__shimmer {
      position: relative;
      overflow: hidden;
    }
    .off-sk__shimmer::after {
      content: "";
      position: absolute;
      inset: 0;
      transform: translateX(-100%);
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
      animation: offSkShimmer 1.25s ease-in-out infinite;
    }
    @keyframes offSkShimmer { 100% { transform: translateX(100%); } }

    .off-sk__hero {
      background: linear-gradient(135deg, #0d1117 0%, #161b22 60%, #1a1035 100%);
      padding: 52px 16px 40px;
      text-align: center;
    }
    .off-sk__badge {
      width: 160px; height: 30px; border-radius: 999px;
      background: rgba(125,255,170,0.16);
      margin: 0 auto 22px; display: block;
    }
    .off-sk__title {
      width: min(58vw,500px); height: 40px; border-radius: 999px;
      background: rgba(255,255,255,0.11);
      margin: 0 auto 14px; display: block;
    }
    .off-sk__subtitle {
      width: min(40vw,360px); height: 18px; border-radius: 999px;
      background: rgba(255,255,255,0.07);
      margin: 0 auto 36px; display: block;
    }
    .off-sk__timer {
      display: flex; align-items: center; justify-content: center; gap: 10px;
      margin-bottom: 30px;
    }
    .off-sk__timer-box {
      width: 76px; height: 84px; border-radius: 14px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(168,255,202,0.14);
    }
    .off-sk__timer-sep {
      width: 10px; height: 34px; border-radius: 4px;
      background: rgba(255,255,255,0.1);
    }
    .off-sk__cta {
      width: 210px; height: 54px; border-radius: 14px;
      background: linear-gradient(135deg, rgba(125,255,170,0.2), rgba(74,222,128,0.26));
      border: 1px solid rgba(125,255,170,0.22);
      margin: 0 auto; display: block;
    }

    .off-sk__cards-wrap {
      background: #f8fafc;
      padding: 44px 16px;
    }
    .off-sk__cards-title {
      width: 260px; height: 28px; border-radius: 999px;
      background: rgba(15,23,42,0.1);
      margin: 0 auto 34px; display: block;
    }
    .off-sk__grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 24px;
      max-width: 1100px;
      margin: 0 auto;
    }
    .off-sk__card {
      background: #fff; border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 4px 16px rgba(15,23,42,0.07);
    }
    .off-sk__card-img {
      width: 100%; height: 185px;
      background: rgba(15,23,42,0.07);
    }
    .off-sk__card-body {
      padding: 18px;
      display: flex; flex-direction: column; gap: 10px;
    }
    .off-sk__line {
      height: 14px; border-radius: 999px;
      background: rgba(15,23,42,0.08);
    }
    .off-sk__line--title { width: 72%; height: 19px; }
    .off-sk__line--sm    { width: 48%; }
    .off-sk__card-footer {
      display: flex; align-items: center; justify-content: space-between;
      margin-top: 6px;
    }
    .off-sk__badge-pill {
      width: 86px; height: 32px; border-radius: 10px;
      background: rgba(125,255,170,0.17);
    }
    .off-sk__card-btn {
      width: 106px; height: 36px; border-radius: 10px;
      background: rgba(158,18,177,0.1);
    }

    @media (max-width: 768px) {
      .off-sk__grid { grid-template-columns: 1fr; }
      .off-sk__timer-box { width: 58px; height: 66px; }
      .off-sk__title  { width: 78vw; }
      .off-sk__subtitle { width: 60vw; }
    }