/* ============================================================
   بخش «اپلیکیشن آموزش پرگار» (pg-appx) — مشترکِ هر ۳ چیدمان
   طراحی از Claude Design. ریشه به .pg-appx و کلاس‌های عمومی به
   .pg-appx-* تغییرِ نام یافته‌اند تا با .pg-app/.pg-container و ...
   قالب تداخل نکنند. متغیرها از --bm-* نگاشت می‌شوند.
   ============================================================ */
.pg-appx{
  --pg-page: var(--bm-bg);
  --pg-surface: var(--bm-surface);
  --pg-surface-soft: var(--bm-surface-2);
  --pg-text: var(--bm-text);
  --pg-muted: var(--bm-text-sub);
  --pg-border: var(--bm-border);
  --pg-primary: var(--bm-primary);
  --pg-primary-rgb: 86, 89, 245;
  --pg-primary-soft: var(--bm-primary-soft);
  --pg-phone: #171d35;
  --pg-phone-soft: #202740;
  --pg-shadow: var(--bm-shadow-lg, 0 18px 55px rgba(27,38,72,.1));
  --pg-shadow-hover: var(--bm-shadow-xl, 0 26px 70px rgba(27,38,72,.17));
  --feature-accent: #675cf4;
  --feature-accent-rgb: 103, 92, 244;
  font-family: var(--bm-font, "Vazirmatn", Tahoma, Arial, sans-serif);
  color: var(--pg-text);
}
:root[data-theme="dark"] .pg-appx{
  --pg-primary-rgb: 124, 124, 255;
  --pg-phone: #111729;
  --pg-phone-soft: #1b233a;
  --pg-shadow: 0 18px 58px rgba(0,0,0,.2);
  --pg-shadow-hover: 0 28px 76px rgba(0,0,0,.35);
}
.pg-appx *, .pg-appx *::before, .pg-appx *::after{ box-sizing: border-box; }
.pg-appx button, .pg-appx a{ font: inherit; }

    .pg-appx {
      --rx: 0deg;
      --ry: 0deg;
      --phone-scale: 1;
      position: relative;
      overflow: hidden;
      padding: clamp(76px, 9vw, 138px) 20px;
      background:
        radial-gradient(circle at 12% 82%, rgba(var(--feature-accent-rgb), .11), transparent 29%),
        radial-gradient(circle at 88% 17%, rgba(var(--pg-primary-rgb), .10), transparent 27%),
        var(--pg-page);
      border-block: 1px solid var(--pg-border);
      isolation: isolate;
      transition: background-color .25s ease;
      /* بهینه‌سازی: تا وقتی بخش نزدیکِ دید نیست، رندر نمی‌شود (ارتفاعِ آخر به‌خاطر سپرده می‌شود) */
      content-visibility: auto;
      contain-intrinsic-size: auto 1150px;
    }

    .pg-appx-grid-pattern {
      position: absolute;
      z-index: -2;
      inset: 0;
      opacity: .34;
      background-image: radial-gradient(color-mix(in srgb, var(--pg-muted) 23%, transparent) .8px, transparent .8px);
      background-size: 22px 22px;
      mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
      pointer-events: none;
    }

    .pg-appx-noise {
      position: absolute;
      z-index: -1;
      inset: 0;
      opacity: .03;
      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='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
      pointer-events: none;
    }

    .pg-appx-container {
      width: min(1280px, 100%);
      margin-inline: auto;
    }

    .pg-appx-header {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
      gap: 30px;
      margin-bottom: clamp(42px, 6vw, 72px);
    }

    .pg-appx-head-copy { max-width: 820px; }

    .pg-appx-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      min-height: 38px;
      margin: 0 0 16px;
      padding: 7px 14px;
      color: var(--pg-primary);
      background: var(--pg-primary-soft);
      border: 1px solid color-mix(in srgb, var(--pg-primary) 20%, transparent);
      border-radius: 999px;
      font-size: 13px;
      font-weight: 900;
    }

    .pg-appx-eyebrow::before {
      width: 7px;
      height: 7px;
      content: "";
      background: currentColor;
      border-radius: 50%;
      box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 12%, transparent);
    }

    .pg-appx-title {
      max-width: 780px;
      margin: 0;
      font-size: clamp(34px, 4.7vw, 62px);
      font-weight: 900;
      line-height: 1.3;
      letter-spacing: -.05em;
    }

    .pg-appx-title span {
      position: relative;
      color: var(--pg-primary);
      white-space: nowrap;
    }

    .pg-appx-title span::after {
      position: absolute;
      inset: auto 0 -5px;
      height: 5px;
      content: "";
      background: color-mix(in srgb, var(--pg-primary) 26%, transparent);
      border-radius: 999px;
      transform: scaleX(.82) rotate(-1deg);
    }

    .pg-appx-lead {
      max-width: 720px;
      margin: 16px 0 0;
      color: var(--pg-muted);
      font-size: clamp(14px, 1.45vw, 17px);
      font-weight: 500;
      line-height: 2.05;
    }

    .pg-appx-layout {
      display: grid;
      grid-template-columns: minmax(360px, .88fr) minmax(0, 1.12fr);
      align-items: center;
      gap: clamp(38px, 7vw, 100px);
    }

    .pg-phone-stage {
      position: relative;
      display: grid;
      min-height: 700px;
      place-items: center;
      perspective: 1400px;
    }

    .pg-orbit {
      position: absolute;
      width: min(570px, 105%);
      aspect-ratio: 1;
      border: 1px solid color-mix(in srgb, var(--feature-accent) 19%, transparent);
      border-radius: 50%;
      transform: rotate(-9deg);
      transition: border-color .35s ease;
    }

    .pg-orbit::before,
    .pg-orbit::after {
      position: absolute;
      content: "";
      border: 1px solid color-mix(in srgb, var(--feature-accent) 11%, transparent);
      border-radius: inherit;
    }

    .pg-orbit::before { inset: 12%; }
    .pg-orbit::after { inset: 28%; }

    .pg-orbit-dot {
      position: absolute;
      z-index: 2;
      display: grid;
      width: 48px;
      height: 48px;
      place-items: center;
      color: var(--feature-accent);
      background: var(--pg-surface);
      border: 1px solid color-mix(in srgb, var(--feature-accent) 25%, var(--pg-border));
      border-radius: 16px;
      box-shadow: var(--pg-shadow);
      transition: color .3s ease, border-color .3s ease, transform .3s ease;
    }

    .pg-orbit-dot svg { width: 21px; height: 21px; }
    .pg-orbit-dot:nth-child(1) { inset: 11% auto auto 7%; animation: pg-float 5.4s ease-in-out infinite; }
    .pg-orbit-dot:nth-child(2) { inset: 42% 2% auto auto; animation: pg-float 6s .8s ease-in-out infinite; }
    .pg-orbit-dot:nth-child(3) { inset: auto auto 10% 15%; animation: pg-float 5.8s 1.4s ease-in-out infinite; }

    @keyframes pg-float {
      0%, 100% { transform: translateY(0) rotate(0); }
      50% { transform: translateY(-12px) rotate(-4deg); }
    }

    .pg-phone-aura {
      position: absolute;
      width: 320px;
      height: 520px;
      background: radial-gradient(ellipse at center, rgba(var(--feature-accent-rgb), .22), transparent 68%);
      filter: blur(18px);
      transform: translateY(32px);
      transition: background .35s ease;
    }

    .pg-phone-wrap {
      position: relative;
      z-index: 3;
      width: 292px;
      transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0) scale(var(--phone-scale));
      transform-style: preserve-3d;
      transition: transform .14s ease-out;
      will-change: transform;
    }

    .pg-phone {
      position: relative;
      overflow: hidden;
      padding: 12px;
      background: #272f4b;
      border: 1px solid #343e5c;
      border-radius: 45px;
      box-shadow:
        0 42px 80px rgba(18, 25, 52, .26),
        inset 0 0 0 2px rgba(255, 255, 255, .05),
        inset 0 -4px 12px rgba(0, 0, 0, .22);
    }

    .pg-phone::before {
      position: absolute;
      z-index: 8;
      inset: 12px 70px auto;
      height: 25px;
      content: "";
      background: #080b14;
      border-radius: 0 0 16px 16px;
    }

    .pg-phone-glare {
      position: absolute;
      z-index: 7;
      inset: 0;
      background: linear-gradient(115deg, rgba(255, 255, 255, .13), transparent 27%, transparent 72%, rgba(255, 255, 255, .04));
      border-radius: inherit;
      pointer-events: none;
    }

    .pg-phone-screen {
      position: relative;
      min-height: 596px;
      overflow: hidden;
      color: #fff;
      background: var(--pg-phone);
      border-radius: 35px;
    }

    .pg-status {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 42px;
      padding: 10px 17px 0;
      direction: ltr;
      color: rgba(255, 255, 255, .78);
      font-size: 9px;
      font-weight: 800;
    }

    .pg-status-icons { display: flex; align-items: center; gap: 4px; }
    .pg-status-icons i { display: block; width: 12px; height: 6px; border: 1px solid currentColor; border-radius: 2px; }
    .pg-status-icons b { display: block; width: 9px; height: 7px; border-bottom: 2px solid currentColor; border-radius: 50%; }

    .pg-mobile-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 9px 16px 14px;
    }

    .pg-mobile-head button {
      display: grid;
      width: 28px;
      height: 28px;
      padding: 0;
      place-items: center;
      color: rgba(255, 255, 255, .68);
      background: transparent;
      border: 0;
    }

    .pg-mobile-head button svg { width: 17px; height: 17px; }
    .pg-mobile-course { min-width: 0; text-align: center; }
    .pg-mobile-course strong { display: block; overflow: hidden; font-size: 11px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
    .pg-mobile-course small { display: block; margin-top: 2px; color: rgba(255, 255, 255, .48); font-size: 8px; }

    .pg-player {
      position: relative;
      min-height: 175px;
      margin: 0 13px;
      overflow: hidden;
      background:
        radial-gradient(circle at 22% 20%, rgba(255, 255, 255, .19), transparent 25%),
        linear-gradient(135deg, color-mix(in srgb, var(--feature-accent) 85%, #8a72ff), color-mix(in srgb, var(--feature-accent) 60%, #208eff));
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 22px;
      transition: background .35s ease;
    }

    .pg-player::after {
      position: absolute;
      inset: auto -45px -75px auto;
      width: 170px;
      height: 170px;
      content: "";
      border: 1px solid rgba(255, 255, 255, .16);
      border-radius: 50%;
      box-shadow: 0 0 0 28px rgba(255, 255, 255, .035);
    }

    .pg-player-label {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 15px 15px 0;
      font-size: 8px;
      font-weight: 800;
    }

    .pg-player-label::before { width: 6px; height: 6px; content: ""; background: #fff; border-radius: 50%; animation: pg-pulse 1.8s ease-in-out infinite; }
    @keyframes pg-pulse { 50% { opacity: .35; transform: scale(.75); } }

    .pg-player-title {
      position: relative;
      z-index: 2;
      display: block;
      max-width: 210px;
      margin: 7px 15px 0;
      font-size: 12px;
      font-weight: 900;
      line-height: 1.7;
    }

    .pg-play-button {
      position: absolute;
      z-index: 4;
      inset: 50% 50% auto auto;
      display: grid;
      width: 54px;
      height: 54px;
      padding: 0;
      place-items: center;
      color: #fff;
      background: rgba(255, 255, 255, .17);
      border: 2px solid rgba(255, 255, 255, .85);
      border-radius: 50%;
      backdrop-filter: blur(8px);
      cursor: pointer;
      transform: translate(50%, -29%);
      transition: transform .2s ease, background-color .2s ease;
    }

    .pg-play-button:hover { background: rgba(255, 255, 255, .27); transform: translate(50%, -29%) scale(1.07); }
    .pg-play-button svg { width: 22px; height: 22px; }
    .pg-play-button .pg-pause-icon { display: none; }
    .pg-player.is-playing .pg-play-button .pg-play-icon { display: none; }
    .pg-player.is-playing .pg-play-button .pg-pause-icon { display: block; }
    .pg-player.is-playing .pg-play-button { animation: pg-playing 1.7s ease-in-out infinite; }
    @keyframes pg-playing { 50% { box-shadow: 0 0 0 9px rgba(255, 255, 255, .11); } }

    .pg-player-time {
      position: absolute;
      z-index: 3;
      inset: auto 14px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      direction: ltr;
      font-size: 7px;
      font-weight: 800;
    }

    .pg-video-progress {
      position: absolute;
      z-index: 3;
      inset: auto 14px 27px;
      height: 3px;
      overflow: hidden;
      background: rgba(255, 255, 255, .24);
      border-radius: 99px;
    }

    .pg-video-progress span {
      display: block;
      width: 42%;
      height: 100%;
      background: #fff;
      border-radius: inherit;
      transition: width .35s ease;
    }

    .pg-mobile-tabs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 4px;
      margin: 10px 13px;
      padding: 3px;
      background: var(--pg-phone-soft);
      border: 1px solid rgba(255, 255, 255, .10);
      border-radius: 11px;
    }

    .pg-mobile-tabs span {
      padding: 7px 2px;
      color: rgba(255, 255, 255, .48);
      border-radius: 8px;
      font-size: 8px;
      font-weight: 800;
      text-align: center;
    }

    .pg-mobile-tabs .is-active { color: #fff; background: var(--feature-accent); box-shadow: 0 5px 12px rgba(var(--feature-accent-rgb), .27); }

    .pg-mobile-list { display: grid; gap: 8px; padding: 0 13px 14px; }

    .pg-mobile-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-height: 64px;
      padding: 10px 11px;
      background: var(--pg-phone-soft);
      border: 1px solid rgba(255, 255, 255, .10);
      border-radius: 14px;
    }

    .pg-mobile-card-copy { min-width: 0; }
    .pg-mobile-card small { display: block; color: rgba(255, 255, 255, .42); font-size: 7px; }
    .pg-mobile-card strong { display: block; margin-top: 5px; overflow: hidden; font-size: 9px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }

    .pg-rating { display: flex; direction: ltr; gap: 3px; margin-top: 6px; }
    .pg-rating i { width: 5px; height: 5px; background: #f3a91b; border-radius: 50%; }

    .pg-ring {
      --value: 68;
      position: relative;
      display: grid;
      width: 39px;
      height: 39px;
      flex: 0 0 auto;
      place-items: center;
      background: conic-gradient(var(--feature-accent) calc(var(--value) * 1%), rgba(255, 255, 255, .10) 0);
      border-radius: 50%;
      transition: background .35s ease;
    }

    .pg-ring::before { width: 29px; height: 29px; content: ""; background: var(--pg-phone-soft); border-radius: 50%; }
    .pg-ring b { position: absolute; font-size: 7px; }

    .pg-next-icon {
      display: grid;
      width: 34px;
      height: 34px;
      flex: 0 0 auto;
      place-items: center;
      color: #fff;
      background: var(--feature-accent);
      border-radius: 50%;
      box-shadow: 0 6px 16px rgba(var(--feature-accent-rgb), .32);
    }

    .pg-next-icon svg { width: 15px; height: 15px; }

    .pg-home-indicator { width: 82px; height: 4px; margin: 5px auto 9px; background: rgba(255, 255, 255, .28); border-radius: 99px; }

    .pg-feature-panel { min-width: 0; }

    .pg-live-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 15px;
      color: var(--feature-accent);
      font-size: 11px;
      font-weight: 900;
      transition: color .3s ease;
    }

    .pg-live-chip::before { width: 20px; height: 2px; content: ""; background: currentColor; border-radius: 99px; }

    .pg-panel-title {
      margin: 0 0 10px;
      font-size: clamp(24px, 3vw, 37px);
      font-weight: 900;
      line-height: 1.45;
      letter-spacing: -.035em;
    }

    .pg-panel-lead {
      max-width: 650px;
      margin: 0 0 26px;
      color: var(--pg-muted);
      font-size: 14px;
      font-weight: 500;
      line-height: 2;
    }

    .pg-feature-list {
      display: grid;
      gap: 11px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .pg-feature-item {
      --item-accent: #675cf4;
      position: relative;
      overflow: hidden;
      background: var(--pg-surface);
      border: 1px solid var(--pg-border);
      border-radius: 20px;
      box-shadow: var(--pg-shadow);
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
    }

    .pg-feature-item::after {
      position: absolute;
      inset: 0 auto 0 0;
      width: 4px;
      content: "";
      background: var(--item-accent);
      opacity: 0;
      transform: scaleY(.25);
      transition: opacity .25s ease, transform .25s ease;
    }

    .pg-feature-item.is-active {
      background: color-mix(in srgb, var(--item-accent) 5%, var(--pg-surface));
      border-color: color-mix(in srgb, var(--item-accent) 34%, var(--pg-border));
      box-shadow: var(--pg-shadow-hover);
      transform: translateX(-7px);
    }

    .pg-feature-item.is-active::after { opacity: 1; transform: scaleY(1); }

    .pg-feature-trigger {
      display: grid;
      width: 100%;
      grid-template-columns: 54px minmax(0, 1fr) 30px;
      align-items: center;
      gap: 15px;
      padding: 18px;
      color: inherit;
      background: transparent;
      border: 0;
      cursor: pointer;
      text-align: right;
    }

    .pg-feature-icon {
      display: grid;
      width: 54px;
      height: 54px;
      place-items: center;
      color: var(--item-accent);
      background: color-mix(in srgb, var(--item-accent) 11%, transparent);
      border: 1px solid color-mix(in srgb, var(--item-accent) 18%, transparent);
      border-radius: 17px;
      transition: color .25s ease, background-color .25s ease, transform .25s ease;
    }

    .pg-feature-item.is-active .pg-feature-icon { color: #fff; background: var(--item-accent); transform: rotate(-4deg); }
    .pg-feature-icon svg { width: 25px; height: 25px; }

    .pg-feature-copy { min-width: 0; }
    .pg-feature-copy strong { display: block; margin-bottom: 5px; font-size: 15px; font-weight: 900; line-height: 1.6; }
    .pg-feature-copy small { display: block; color: var(--pg-muted); font-size: 11px; font-weight: 500; line-height: 1.8; }

    .pg-feature-index {
      color: color-mix(in srgb, var(--pg-muted) 66%, transparent);
      font-size: 11px;
      font-weight: 900;
      direction: ltr;
      text-align: center;
    }

    .pg-feature-item.is-active .pg-feature-index { color: var(--item-accent); }
    .pg-feature-item[data-color="blue"] { --item-accent: #0d98d4; }
    .pg-feature-item[data-color="amber"] { --item-accent: #ce870a; }
    .pg-feature-item[data-color="green"] { --item-accent: #149c70; }

    .pg-download-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      margin-top: 24px;
    }

    .pg-store-button {
      position: relative;
      display: inline-flex;
      min-height: 51px;
      align-items: center;
      gap: 10px;
      overflow: hidden;
      padding: 7px 15px;
      color: var(--pg-text);
      text-decoration: none;
      background: var(--pg-surface);
      border: 1px solid var(--pg-border);
      border-radius: 15px;
      box-shadow: var(--pg-shadow);
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }

    .pg-store-button:hover { border-color: var(--pg-primary); box-shadow: var(--pg-shadow-hover); transform: translateY(-3px); }
    .pg-store-button svg { width: 24px; height: 24px; color: var(--pg-primary); }
    .pg-store-button span { display: block; }
    .pg-store-button small { display: block; color: var(--pg-muted); font-size: 8px; font-weight: 600; }
    .pg-store-button strong { display: block; margin-top: 1px; font-size: 12px; font-weight: 900; }

    .pg-ripple {
      position: absolute;
      width: 10px;
      height: 10px;
      background: rgba(var(--pg-primary-rgb), .17);
      border-radius: 50%;
      pointer-events: none;
      transform: translate(-50%, -50%) scale(0);
      animation: pg-ripple .55s ease-out forwards;
    }

    @keyframes pg-ripple { to { opacity: 0; transform: translate(-50%, -50%) scale(16); } }

    .pg-appx.pg-js-reveal .pg-reveal {
      opacity: 0;
      transform: translateY(16px);
      transition: opacity .45s cubic-bezier(.2, .8, .2, 1), transform .45s cubic-bezier(.2, .8, .2, 1);
    }

    .pg-appx.pg-js-reveal .pg-reveal.is-visible { opacity: 1; transform: translateY(0); }

    /* انیمیشن‌های همیشگی (مدارها، نبضِ «در حال یادگیری») وقتی بخش دیده نمی‌شود متوقف می‌شوند */
    .pg-appx.is-paused *, .pg-appx.is-paused *::before, .pg-appx.is-paused *::after { animation-play-state: paused !important; }

    @media (max-width: 1020px) {
      .pg-appx-layout { grid-template-columns: minmax(310px, .78fr) minmax(0, 1.22fr); gap: 42px; }
      .pg-phone-stage { min-height: 650px; }
      .pg-orbit { width: 470px; }
    }

    @media (max-width: 820px) {
      .pg-appx { padding: 66px 16px; }
      .pg-appx-header { margin-bottom: 35px; }
      .pg-appx-title { font-size: 35px; }
      .pg-appx-layout { grid-template-columns: 1fr; }
      .pg-phone-stage { min-height: 650px; order: 2; }
      .pg-feature-panel { order: 1; }
      .pg-feature-item.is-active { transform: translateX(-4px); }
      .pg-orbit { width: min(520px, 92vw); }
    }

    @media (max-width: 560px) {
      .pg-appx { --phone-scale: .82; padding: 48px 14px; }
      .pg-appx-header { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; margin-bottom: 27px; }
      .pg-appx-eyebrow { min-height: 32px; margin-bottom: 11px; padding: 5px 11px; font-size: 11px; }
      .pg-appx-title { font-size: 27px; line-height: 1.35; }
      .pg-appx-lead { margin-top: 10px; font-size: 12px; line-height: 1.85; }
      .pg-theme-toggle { width: 40px; height: 40px; border-radius: 13px; }
      .pg-theme-toggle svg { width: 18px; height: 18px; }
      .pg-live-chip { margin-bottom: 10px; font-size: 10px; }
      .pg-panel-title { margin-bottom: 7px; font-size: 21px; }
      .pg-panel-lead { margin-bottom: 18px; font-size: 11.5px; line-height: 1.85; }
      .pg-feature-list { gap: 8px; }
      .pg-feature-item { border-radius: 16px; }
      .pg-feature-trigger { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding: 11px; }
      .pg-feature-icon { width: 44px; height: 44px; border-radius: 13px; }
      .pg-feature-icon svg { width: 21px; height: 21px; }
      .pg-feature-index { display: none; }
      .pg-feature-copy strong { margin-bottom: 3px; font-size: 12.5px; line-height: 1.5; }
      .pg-feature-copy small { font-size: 9.5px; line-height: 1.65; }
      .pg-download-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 17px; }
      .pg-store-button { min-width: 0; min-height: 44px; gap: 7px; padding: 6px 9px; border-radius: 13px; }
      .pg-store-button svg { width: 20px; height: 20px; }
      .pg-store-button small { font-size: 7px; }
      .pg-store-button strong { font-size: 10.5px; }
      .pg-phone-stage { min-height: 535px; }
      .pg-phone-wrap { width: 276px; }
      .pg-phone-aura { width: 265px; height: 430px; }
      .pg-orbit { width: min(390px, 88vw); }
      .pg-orbit-dot { width: 38px; height: 38px; border-radius: 12px; }
      .pg-orbit-dot svg { width: 18px; height: 18px; }
    }

    @media (max-width: 380px) {
      .pg-appx { --phone-scale: .76; padding-block: 42px; }
      .pg-appx-title { font-size: 25px; }
      .pg-panel-title { font-size: 20px; }
      .pg-feature-trigger { grid-template-columns: 41px minmax(0, 1fr); padding: 10px; }
      .pg-feature-icon { width: 41px; height: 41px; }
      .pg-feature-copy strong { font-size: 12px; }
      .pg-feature-copy small { font-size: 9px; }
      .pg-phone-stage { min-height: 500px; }
      .pg-orbit { width: 86vw; }
    }

    @media (prefers-reduced-motion: reduce) {
      .pg-appx *, .pg-appx *::before, .pg-appx *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
      .pg-appx .pg-reveal, .pg-appx.pg-js-reveal .pg-reveal { opacity: 1; transform: none; }
      .pg-phone-wrap { transform: scale(var(--phone-scale)) !important; }
    }