/* صفحه‌ی اصلی: نمای انفجاری سه‌بعدی پلتفرم و استوانه‌ی چرخان پکیج‌ها. فقط transform/opacity انیمیت می‌شود. */
@property --g { syntax: "<length>"; inherits: true; initial-value: 6px; }

/* ================= نمای انفجاری ================= */
.pl { --g: 6px; position: relative; height: 470px; display: grid; place-items: center; perspective: 1400px; transition: --g .9s cubic-bezier(.2,.8,.2,1); }
.pl.is-in { --g: 74px; } .pl:hover { --g: 96px; }
.pl__glow { position: absolute; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(123,92,255,.55), transparent 65%); filter: blur(30px); animation: pl-glow 6s ease-in-out infinite alternate; }
@keyframes pl-glow { to { transform: scale(1.18); opacity: .7; } }
.pl__scene { position: relative; width: 340px; height: 220px; transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-36deg); animation: pl-sway 9s ease-in-out infinite alternate; }
@keyframes pl-sway { from { transform: rotateX(58deg) rotateZ(-42deg); } to { transform: rotateX(56deg) rotateZ(-28deg); } }
.pl__layer { position: absolute; inset: 0; border-radius: 22px; padding: 14px; display: grid; align-content: space-between; color: #fff;
  background: linear-gradient(145deg, rgba(60,48,130,.78), rgba(18,15,44,.86)); border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 0 0 1px rgba(123,92,255,.25), inset 0 0 40px rgba(123,92,255,.28), 0 40px 60px -20px rgba(0,0,0,.9); transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.pl__layer em { font-style: normal; font-size: 12.5px; font-weight: 800; display: flex; gap: 7px; align-items: center; color: #e4deff; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.pl__l1 { transform: translateZ(0); } .pl__l2 { transform: translateZ(calc(var(--g) * 1)); } .pl__l3 { transform: translateZ(calc(var(--g) * 2)); } .pl__l4 { transform: translateZ(calc(var(--g) * 3)); }
.pl__l1 { border-color: rgba(34,211,238,.5); } .pl__l3 { border-color: rgba(244,114,182,.55); } .pl__l4 { border-color: rgba(251,191,36,.5); }

.pl__shop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .pl__shop span { height: 46px; border-radius: 10px; background: linear-gradient(135deg, rgba(34,211,238,.55), rgba(123,92,255,.35)); }
.pl__mods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .pl__mods i { height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 17px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); }
.pl__mods i:nth-child(1), .pl__mods i:nth-child(6) { background: var(--vp-grad, linear-gradient(135deg, #7b5cff, #22d3ee)); }
.pl__chat { display: grid; gap: 7px; position: relative; } .pl__chat span { height: 10px; border-radius: 6px; background: rgba(255,255,255,.22); width: 70%; } .pl__chat span:nth-child(2) { width: 90%; margin-inline-start: auto; background: rgba(244,114,182,.5); } .pl__chat span:nth-child(3) { width: 55%; }
.pl__chat b { position: absolute; inset-inline-end: 0; top: -4px; width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, #f472b6, #7b5cff); box-shadow: 0 10px 24px -8px rgba(244,114,182,.9); }
.pl__bars { display: flex; align-items: flex-end; gap: 7px; height: 60px; } .pl__bars i { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(#fbbf24, #f97316); }

.pl__chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; font-size: 12.5px; font-weight: 800; color: #fff; white-space: nowrap; background: rgba(20,17,46,.88); border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 16px 34px -12px rgba(0,0,0,.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: pl-bob 5s ease-in-out infinite; }
.pl__chip i { color: #7ee2b8; } .pl__c2 i { color: #fbbf24; } .pl__c3 i { color: #f9a8d4; } .pl__c4 i { color: #67e8f9; }
.pl__c1 { top: 8%; inset-inline-end: 4%; } .pl__c2 { top: 30%; inset-inline-start: 0; animation-delay: -1.3s; } .pl__c3 { bottom: 24%; inset-inline-end: 0; animation-delay: -2.6s; } .pl__c4 { bottom: 6%; inset-inline-start: 6%; animation-delay: -3.9s; }
@keyframes pl-bob { 50% { transform: translateY(-9px); } }

/* ================= استوانه‌ی پکیج‌ها ================= */
.cyl { --w: 270px; --n: 7; --R: calc(var(--w) * 1.04); position: relative; margin-top: 30px; }
.cyl__stage { height: 410px; perspective: 1500px; display: grid; place-items: center; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.cyl__stage.is-drag { cursor: grabbing; }
.cyl__ring { position: relative; width: var(--w); height: 340px; transform-style: preserve-3d; transform: translateZ(calc(var(--R) * -1)) rotateY(var(--a, 0deg)); transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.cyl__stage.is-drag .cyl__ring { transition: none; }
.cyl__card { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; padding: 22px 20px; border-radius: 24px; color: #fff !important; text-decoration: none !important; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transform: rotateY(calc(var(--i) * (360deg / var(--n)))) translateZ(var(--R)); background: linear-gradient(150deg, rgba(76,60,170,.82), rgba(16,14,40,.94)); border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -30px 50px -36px rgba(123,92,255,.8), 0 30px 50px -26px rgba(0,0,0,.9); }
.cyl__card--hot { border-color: rgba(34,211,238,.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 0 40px -6px rgba(34,211,238,.45), 0 30px 50px -26px rgba(0,0,0,.9); }
.cyl__card:last-child { background: linear-gradient(150deg, rgba(160,110,10,.85), rgba(30,20,6,.95)); border-color: rgba(253,224,71,.65); }
.cyl__badge { position: absolute; top: 14px; inset-inline-start: 14px; padding: 2px 11px; border-radius: 99px; font-size: 11.5px; font-weight: 800; background: linear-gradient(135deg, #7b5cff, #22d3ee); }
.cyl__card small { color: #bdaeff; font-size: 13px; font-weight: 700; margin-top: 6px; } .cyl__card h3 { margin: 0; font-size: 24px; font-weight: 900; color: #fff; }
.cyl__amt { display: flex; align-items: baseline; gap: 6px; } .cyl__amt b { font-size: 44px; font-weight: 900; line-height: 1.1; background: linear-gradient(90deg, #fff, #bdaeff); -webkit-background-clip: text; background-clip: text; color: transparent; } .cyl__amt span { color: #b9b4d6; font-size: 13px; }
.cyl__card ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; color: #e4deff; } .cyl__card li { padding-inline-start: 22px; position: relative; } .cyl__card li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: #7ee2b8; font-weight: 900; }
.cyl__go { margin-top: auto; display: inline-flex; gap: 8px; align-items: center; font-weight: 800; font-size: 14px; color: #bdaeff; }
.cyl__ctl { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 6px; }
.cyl__ctl button { width: 46px; height: 46px; border-radius: 15px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.07); color: #fff; cursor: pointer; transition: background .2s, transform .2s; } .cyl__ctl button:hover { background: rgba(123,92,255,.35); } .cyl__ctl button:active { transform: scale(.92); }
.cyl__ctl span { min-width: 150px; text-align: center; font-weight: 800; color: #d8d4ee; }

/* ================= موبایل ================= */
@media (max-width: 900px) { .pl { height: 400px; } .pl__scene { transform: rotateX(58deg) rotateZ(-36deg) scale(.82); } .pl.is-in { --g: 58px; } }
@media (max-width: 575px) {
  .pl { height: 340px; margin-inline: -10px; } .pl__scene { width: 300px; height: 190px; animation-name: pl-sway-m; } .pl.is-in { --g: 46px; } .pl__glow { width: 280px; height: 280px; }
  @keyframes pl-sway-m { from { transform: rotateX(58deg) rotateZ(-42deg) scale(.78); } to { transform: rotateX(56deg) rotateZ(-28deg) scale(.78); } }
  .pl__chip { font-size: 11.5px; padding: 6px 11px; } .pl__c1 { top: 0; inset-inline-end: 8px; } .pl__c2 { top: 26%; inset-inline-start: 4px; } .pl__c3 { inset-inline-end: 4px; } .pl__c4 { inset-inline-start: 8px; bottom: 2%; }
  .cyl { --w: min(250px, 66vw); } .cyl__stage { height: 380px; } .cyl__ring { height: 320px; } .cyl__card { padding: 18px 16px; border-radius: 22px; } .cyl__amt b { font-size: 38px; } .cyl__card h3 { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) { .pl__scene, .pl__glow, .pl__chip { animation: none !important; } .pl { transition: none; } .cyl__ring { transition-duration: .01s; } }
@media (max-width: 575px) { .pl { height: 320px; } .pl__scene { translate: 0 30px; } }

/* ================= تبلت سه‌بعدی پنل مدیریت ================= */
.vp-art:has(.tb) { perspective: 1500px; }
.tb { position: relative; width: 100%; max-width: 620px; margin-inline: auto; padding: 26px 10px 44px; transform-style: preserve-3d; transform: rotateY(-13deg) rotateX(9deg); transition: transform .25s ease-out; }
.tb__dev { position: relative; padding: 14px; border-radius: 34px; transform-style: preserve-3d; background: linear-gradient(145deg, #4a4470, #1a1733 45%, #2b2650); border: 1px solid rgba(255,255,255,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 0 rgba(0,0,0,.5), 0 50px 80px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(123,92,255,.25); overflow: hidden; }
.tb__dev::before { content: ""; position: absolute; inset: 14px; border-radius: 22px; background: radial-gradient(120% 80% at 80% 0, rgba(123,92,255,.35), transparent 55%), linear-gradient(180deg, #0f0c26, #0a0820); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.tb__back { position: absolute; inset: 26px 10px 44px; border-radius: 34px; border: 1px solid rgba(255,255,255,.18); background: linear-gradient(145deg, rgba(123,92,255,.35), rgba(20,17,46,.8)); }
.tb__back--1 { transform: translateZ(-34px) translate(22px, 18px); opacity: .75; } .tb__back--2 { transform: translateZ(-70px) translate(44px, 36px); opacity: .45; }
.tb__shadow { position: absolute; inset: auto 8% -6px; height: 40px; border-radius: 50%; background: radial-gradient(closest-side, rgba(123,92,255,.55), transparent); filter: blur(14px); transform: translateZ(-90px) translateY(20px); }
.tb__bar { position: relative; display: flex; align-items: center; gap: 6px; padding: 10px 14px 6px; color: #8f8aab; font-size: 11.5px; } .tb__bar > i { width: 9px; height: 9px; border-radius: 50%; background: #f472b6; } .tb__bar > i:nth-child(2) { background: #fbbf24; } .tb__bar > i:nth-child(3) { background: #34d399; } .tb__bar b { margin-inline-start: 10px; font-weight: 600; direction: ltr; } .tb__bar em { margin-inline-start: auto; color: #fff; font-style: normal; }
.tb__grid { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 8px 12px 14px; transform-style: preserve-3d; }
.tb__tile { position: relative; aspect-ratio: 1 / 1.02; display: grid; place-items: center; align-content: center; gap: 7px; padding: 6px 4px; border-radius: 16px; text-align: center; color: #e4deff; font-size: 11px; font-weight: 700; line-height: 1.4;
  background: linear-gradient(150deg, rgba(255,255,255,.12), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.13); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 14px 20px -12px rgba(0,0,0,.9); transform: translateZ(24px);
  animation: tb-pop 6s ease-in-out infinite; animation-delay: calc(var(--n) * -0.45s); transition: background .25s; }
.tb__tile i { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; font-size: 17px; color: #fff; box-shadow: 0 10px 18px -8px currentColor, inset 0 1px 0 rgba(255,255,255,.4); transform: translateZ(14px); }
.tb__tile--a i { background: linear-gradient(135deg, #7b5cff, #6696ff); color: #7b5cff; } .tb__tile--b i { background: linear-gradient(135deg, #f472b6, #fb7185); color: #f472b6; } .tb__tile--c i { background: linear-gradient(135deg, #22d3ee, #34d399); color: #22d3ee; } .tb__tile--d i { background: linear-gradient(135deg, #fbbf24, #f97316); color: #fbbf24; }
.tb__tile i { color: #fff !important; }
@keyframes tb-pop { 0%, 100% { transform: translateZ(24px); } 50% { transform: translateZ(40px) translateY(-3px); } }
.tb__tile:hover { background: linear-gradient(150deg, rgba(123,92,255,.4), rgba(255,255,255,.06)); }
.tb__glare { position: absolute; inset: 0; border-radius: 34px; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.14) 48%, transparent 58%); transform: translateX(-60%); animation: tb-glare 7s ease-in-out infinite; pointer-events: none; }
@keyframes tb-glare { 0%, 55% { transform: translateX(-70%); } 100% { transform: translateX(70%); } }
.tb__chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; font-size: 12.5px; font-weight: 800; color: #fff; white-space: nowrap; background: rgba(20,17,46,.9); border: 1px solid rgba(255,255,255,.22); box-shadow: 0 16px 34px -12px rgba(0,0,0,.9); transform: translateZ(80px); animation: tb-bob 5s ease-in-out infinite; }
.tb__chip i { color: #7ee2b8; } .tb__c2 i { color: #fbbf24; } .tb__c3 i { color: #f9a8d4; }
.tb__c1 { top: 0; inset-inline-end: 0; } .tb__c2 { top: 42%; inset-inline-start: -14px; animation-delay: -1.7s; } .tb__c3 { bottom: 4px; inset-inline-end: 8%; animation-delay: -3.3s; }
@keyframes tb-bob { 50% { transform: translateZ(80px) translateY(-9px); } }

@media (max-width: 900px) { .tb { transform: rotateY(-8deg) rotateX(7deg); max-width: 520px; } }
@media (max-width: 575px) {
  .tb { padding: 20px 4px 40px; transform: rotateY(-6deg) rotateX(6deg); } .tb__dev { padding: 9px; border-radius: 26px; } .tb__dev::before { inset: 9px; border-radius: 18px; }
  .tb__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; padding: 4px 6px 10px; } .tb__tile { font-size: 10px; border-radius: 13px; gap: 5px; } .tb__tile i { width: 32px; height: 32px; font-size: 14px; border-radius: 11px; }
  .tb__back { inset: 20px 4px 40px; border-radius: 26px; } .tb__chip { font-size: 11px; padding: 6px 11px; } .tb__c2 { inset-inline-start: -4px; } .tb__bar b { display: none; }
}
@media (prefers-reduced-motion: reduce) { .tb__tile, .tb__glare, .tb__chip { animation: none !important; } }

/* ===== استوانه: مینیمال‌تر و با فاصله بین کارت‌ها ===== */
.cyl { --w: 250px; --R: calc(var(--w) * 1.62); }
.cyl__stage { height: 380px; perspective: 1700px; }
.cyl__ring { height: 300px; }
.cyl__card { padding: 22px 20px 18px; gap: 6px; border-radius: 26px; background: linear-gradient(160deg, rgba(40,33,92,.9), rgba(14,12,34,.96)); border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 26px 40px -28px rgba(0,0,0,.95); transition: opacity .5s; }
.cyl__card--hot { border-color: rgba(34,211,238,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 34px -10px rgba(34,211,238,.4), 0 26px 40px -28px rgba(0,0,0,.95); }
.cyl__card small { margin-top: 2px; font-size: 12.5px; color: #ad99ff; min-height: 20px; }
.cyl__card h3 { font-size: 21px; }
.cyl__amt { margin: 6px 0 4px; } .cyl__amt b { font-size: 46px; }
.cyl__card ul { margin: 6px 0 0; gap: 4px; font-size: 13px; color: #cfcbe6; } .cyl__card li:nth-child(n+3) { display: none; }
.cyl__go { padding: 8px 14px; border-radius: 12px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #fff; justify-content: center; width: 100%; }
.cyl__ctl button { border-radius: 50%; }
@media (max-width: 575px) { .cyl { --w: min(232px, 62vw); } .cyl__stage { height: 360px; } .cyl__ring { height: 292px; } .cyl__amt b { font-size: 40px; } }

/* ===== دکمه‌های هیرو: پکیج‌ها، تماس آنلاین و چت زنده ===== */
.hx { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 26px; position: relative; z-index: 2; }
.hx__b { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; border-radius: 16px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: #fff !important; font: 800 15px inherit; text-decoration: none !important; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .25s, background .25s, box-shadow .25s; }
.hx__b:hover { transform: translateY(-3px); background: rgba(255,255,255,.16); } .hx__b:active { transform: scale(.96); }
.hx__b--main { background: linear-gradient(135deg, #7b5cff, #6696ff); border-color: transparent; box-shadow: 0 16px 32px -12px rgba(123,92,255,.95); }
.hx__b--call { background: linear-gradient(135deg, #10b981, #22d3ee); border-color: transparent; box-shadow: 0 16px 32px -12px rgba(16,185,129,.95); }
.hx__pulse { position: absolute; inset: -3px; border-radius: 19px; border: 2px solid rgba(52,211,153,.7); animation: hx-ping 2.4s ease-out infinite; pointer-events: none; } @keyframes hx-ping { 0% { transform: scale(.96); opacity: .9; } 100% { transform: scale(1.12); opacity: 0; } }
@media (max-width: 575px) { .hx { flex-direction: column; align-items: stretch; padding-inline: 8px; } .hx__b { justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .hx__pulse { animation: none; } }