/* ==========================================================================
   تابان — استودیو محتوا (همه با وزیرمتن)
   ========================================================================== */
:root { --emerald: #0f2a24; }

.cx-nav { gap: 18px; font-size: 14px; }
.cx-hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; }
.cx-hero h1 { font-size: clamp(32px, 4.4vw, 54px); margin: 12px 0 16px; }
.cx-hero h1 em { font-style: normal; color: var(--gold); }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kpis div { background: #fffdf8; border: 1px solid var(--line); border-radius: 18px; padding: 18px; }
.kpis b { font-size: 24px; font-weight: 900; color: var(--ink); display: block; line-height: 1.4; }
.kpis span { font-size: 13px; color: var(--muted); }

/* ستون‌ها */
.pillars-wrap { display: grid; grid-template-columns: 280px 1fr; gap: 40px; align-items: center; }
.donut svg { width: 100%; }
.pillar-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pillar { border-radius: 16px; padding: 16px; background: #fffdf8; border: 1px solid var(--line); border-inline-start: 5px solid var(--c); }
.pillar b { font-size: 15px; color: var(--ink); }
.pillar b small { color: var(--c); font-weight: 800; margin-inline-start: 6px; }
.pillar p { font-size: 13.5px; color: var(--muted); }
.diff { margin-top: 40px; background: var(--cream); border-radius: 22px; padding: 24px; overflow-x: auto; }
.diff h3 { font-size: 20px; font-weight: 800; color: var(--ink); margin-bottom: 10px; }
.diff table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.diff th, .diff td { padding: 10px 12px; text-align: start; border-bottom: 1px solid var(--line); }
.diff th { color: var(--muted); font-weight: 600; }
.diff td:first-child { font-weight: 800; color: var(--ink); }
.diff td:last-child { color: var(--ink); font-weight: 600; }

/* گوشی و پیج */
.phone { width: min(340px, 100%); border-radius: 44px; background: #111; padding: 12px; box-shadow: 0 40px 80px -30px #0007, inset 0 0 0 2px #333; }
.phone-in { border-radius: 34px; overflow: hidden; background: #fff; height: 680px; overflow-y: auto; scrollbar-width: none; }
.profile-wrap { display: grid; grid-template-columns: auto 1fr; gap: 48px; align-items: center; }
.profile-notes { list-style: none; display: grid; gap: 12px; }
.profile-notes li { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.profile-notes b { color: var(--ink); }
.profile-notes span { color: var(--muted); font-size: 14.5px; }
.ig { font-size: 13px; color: #111; }
.ig-top { display: flex; justify-content: space-between; padding: 26px 16px 8px; font-weight: 800; font-size: 16px; }
.ig-head { display: flex; align-items: center; gap: 18px; padding: 6px 16px; }
.ig-av { width: 78px; height: 78px; border-radius: 50%; padding: 3px; background: conic-gradient(#f1cf72, #b8893b, #ecd2c4, #f1cf72); flex: none; }
.ig-av span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--ink); border: 3px solid #fff; color: var(--gold-2); font-size: 17px; font-weight: 900; }
.ig-stats { display: flex; flex: 1; justify-content: space-around; text-align: center; }
.ig-stats b { display: block; font-size: 15px; }
.ig-bio { padding: 6px 16px 10px; line-height: 1.7; }
.ig-bio a { color: #00376b; font-weight: 600; }
.ig-btns { display: flex; gap: 6px; padding: 0 16px 12px; }
.ig-btns span { flex: 1; text-align: center; background: #efefef; border-radius: 8px; padding: 6px; font-weight: 700; }
.ig-btns span:first-child { background: #0095f6; color: #fff; }
.ig-hl { display: flex; gap: 12px; padding: 4px 16px 12px; overflow-x: auto; scrollbar-width: none; }
.ig-hl div { text-align: center; font-size: 11px; flex: none; }
.ig-hl i { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid #ddd; padding: 3px; margin-bottom: 3px; }
.ig-hl i span { width: 100%; height: 100%; border-radius: 50%; background: var(--ink); color: var(--gold-2); display: grid; place-items: center; font-style: normal; font-size: 18px; }
.ig-tabs { display: flex; border-top: 1px solid #eee; }
.ig-tabs span { flex: 1; text-align: center; padding: 8px; font-size: 16px; color: #999; }
.ig-tabs span:first-child { color: #111; border-bottom: 1.5px solid #111; }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.tile { position: relative; aspect-ratio: 4/5; overflow: hidden; cursor: pointer; display: block; width: 100%; }
.tile svg { width: 100%; height: 100%; }
.tile .tl { position: absolute; inset: auto 6px 8px 6px; color: #fff; font-size: 12.5px; font-weight: 900; line-height: 1.45; text-shadow: 0 2px 10px #0009; text-align: center; }
.tile .tl.dark { color: var(--ink); text-shadow: none; }
.tile .rk { position: absolute; top: 6px; left: 6px; width: 16px; height: 16px; fill: #fff; filter: drop-shadow(0 1px 2px #0008); }
.tile.anim svg { animation: tileZoom 6s ease-in-out infinite; }
@keyframes tileZoom { 50% { transform: scale(1.12) rotate(-2deg); } }

/* ==========================================================================
   استودیو ریلز
   ========================================================================== */
.studio { display: grid; grid-template-columns: 240px auto 1fr; gap: 28px; align-items: start; }
.studio > *, .profile-wrap > *, .pillars-wrap > *, .cx-hero > *, .kit-grid > *, .meet-grid > *, .ig-cards > * { min-width: 0; }
.reel-list { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 90px; }
.reel-list h4 { font-size: 12px; color: var(--muted); margin: 10px 4px 2px; font-weight: 700; }
.reel-item { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; text-align: start; padding: 8px; border-radius: 14px; border: 1px solid transparent; transition: all .2s; }
.reel-item:hover { background: var(--cream); }
.reel-item[aria-current=true] { background: #fffdf8; border-color: var(--line); box-shadow: var(--shadow); }
.reel-item .th { width: 40px; height: 56px; border-radius: 8px; overflow: hidden; background: linear-gradient(160deg, #1f4a3f, #0b1f1a); color: var(--gold-2); display: grid; place-items: center; font-size: 15px; font-weight: 900; }
.reel-item b { font-size: 13px; display: block; line-height: 1.5; }
.reel-item small { color: var(--muted); font-size: 11.5px; }

.player { position: sticky; top: 90px; }
.stage-wrap { position: relative; width: 340px; aspect-ratio: 9/16; border-radius: 28px; overflow: hidden; background: #000; box-shadow: 0 30px 70px -30px #000a, 0 0 0 8px #141210, 0 0 0 9px #2a2622; }
.bars { position: absolute; top: 10px; inset-inline: 10px; display: flex; gap: 3px; z-index: 6; direction: ltr; }
.bars i { flex: 1; height: 2.5px; border-radius: 2px; background: #ffffff55; overflow: hidden; }
.bars i b { display: block; height: 100%; background: #fff; width: 0; }
.ig-ui { position: absolute; inset: auto 12px 12px 12px; z-index: 6; color: #fff; font-size: 11.5px; display: flex; flex-direction: column; gap: 3px; text-shadow: 0 1px 4px #0008; pointer-events: none; }
.ig-name { display: flex; align-items: center; gap: 6px; font-weight: 800; }
.ig-name i { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); border: 1.5px solid var(--gold-2); }
.ig-name em { font-style: normal; border: 1px solid #fffa; border-radius: 6px; padding: 0 6px; font-size: 10.5px; font-weight: 600; }
.ig-music::before { content: '♫ '; }
.ig-side { position: absolute; left: 10px; bottom: 70px; z-index: 6; display: flex; flex-direction: column; gap: 14px; align-items: center; color: #fff; font-size: 10px; pointer-events: none; text-shadow: 0 1px 4px #0008; }
.ig-side svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.8; filter: drop-shadow(0 1px 3px #0007); }
.safe { position: absolute; inset: 0; z-index: 7; pointer-events: none; display: none; }
.stage-wrap.show-safe .safe { display: block; }
.safe::before { content: 'ناحیهٔ امن متن'; position: absolute; top: 14%; bottom: 22%; left: 14%; right: 6%; border: 1.5px dashed #6ff; color: #6ff; font-size: 10px; padding: 4px; }
.safe::after { content: 'رابط اینستاگرام'; position: absolute; bottom: 0; inset-inline: 0; height: 20%; background: #f004; color: #fdd; font-size: 10px; padding: 4px; }
.controls { display: flex; align-items: center; gap: 8px; margin-top: 16px; width: 340px; }
.ctl { width: 38px; height: 38px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; flex: none; }
.ctl svg { width: 18px; height: 18px; stroke: var(--ivory); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ctl [data-ico-play] path { fill: var(--ivory); }
.controls input { flex: 1; direction: ltr; }
.time { font-size: 12px; color: var(--muted); min-width: 64px; text-align: center; }
.toggles { display: flex; gap: 6px; margin-top: 10px; width: 340px; flex-wrap: wrap; }
.toggles button { font-size: 12px; border: 1px solid var(--line); border-radius: 99px; padding: 4px 12px; background: #fffdf8; }
.toggles button[aria-pressed=true] { background: var(--ink); color: var(--ivory); border-color: var(--ink); }

.board { min-width: 0; }
.board-head h3 { font-size: 24px; font-weight: 900; color: var(--ink); line-height: 1.5; }
.board-head .logline { color: var(--muted); font-size: 14.5px; margin-top: 2px; }
.board-head .tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 4px; }
.board-head .tags span { font-size: 12px; padding: 2px 10px; border-radius: 99px; background: var(--cream); }
.tabs { scrollbar-width: none; display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 14px 0; overflow-x: auto; }
.tabs button { padding: 10px 14px; font-size: 14px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs button[aria-selected=true] { color: var(--ink); border-color: var(--gold); }

.scenes { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.scene { display: grid; grid-template-columns: 78px 1fr; gap: 14px; padding: 10px; border-radius: 16px; background: #fffdf8; border: 1px solid var(--line); cursor: pointer; transition: border-color .25s, box-shadow .25s; position: relative; overflow: hidden; }
.scene::before { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: #b8893b12; }
.scene.on { border-color: var(--gold); box-shadow: 0 6px 20px -10px #b8893b88; }
.mini { width: 78px; aspect-ratio: 9/16; border-radius: 10px; overflow: hidden; position: relative; background: #000; container-type: size; pointer-events: none; align-self: start; }
.scene .body { position: relative; min-width: 0; }
.scene .tc { font-size: 12px; color: var(--gold); font-weight: 800; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.scene .tc span { color: var(--muted); font-weight: 500; }
.scene .tc em { font-style: normal; background: var(--cream); color: var(--ink); border-radius: 6px; padding: 0 6px; font-weight: 600; }
.scene dl { display: grid; grid-template-columns: 68px 1fr; gap: 2px 10px; font-size: 13px; margin-top: 4px; }
.scene dt { color: var(--muted); }
.scene dd.ost { font-weight: 800; color: var(--ink); }

/* سناریو به سبک فیلم‌نامه */
.script { background: #fffdf8; border: 1px solid var(--line); border-radius: 18px; padding: 26px 28px; font-size: 14.5px; line-height: 2; }
.script h4 { font-size: 18px; font-weight: 900; color: var(--ink); }
.script .meta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 18px; background: var(--cream); border-radius: 12px; padding: 12px 16px; margin: 10px 0 18px; font-size: 13.5px; }
.script .meta-grid b { color: var(--ink); }
.script .sh { margin-top: 18px; font-weight: 900; color: var(--ink); background: linear-gradient(90deg, transparent, #f1cf7244); padding: 2px 8px; border-radius: 6px; display: inline-block; }
.script .act { margin: 4px 0; }
.script .cam { color: var(--muted); font-size: 13px; }
.script .dlg { margin: 6px 12%; text-align: center; }
.script .dlg b { display: block; font-size: 12.5px; color: var(--gold); }
.script .sup { border-inline-start: 3px solid var(--gold); padding-inline-start: 10px; font-weight: 800; color: var(--ink); }
.script .fx { font-size: 13px; color: #5f7d71; }
.script .trn { text-align: end; font-size: 12.5px; color: var(--muted); font-weight: 700; }

.prod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.prod-grid > div { background: #fffdf8; border: 1px solid var(--line); border-radius: 16px; padding: 16px; font-size: 13.5px; min-width: 0; }
.prod-grid h5 { font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.prod-grid ul { padding-inline-start: 18px; }
.prod-grid .wide { grid-column: 1 / -1; overflow-x: auto; }
.prod-grid table { width: 100%; border-collapse: collapse; min-width: 480px; }
.prod-grid td, .prod-grid th { border-bottom: 1px dashed var(--line); padding: 6px; text-align: start; vertical-align: top; }
.prod-grid th { color: var(--muted); font-weight: 600; font-size: 12.5px; }

.pub { display: grid; grid-template-columns: 180px 1fr; gap: 16px; align-items: start; }
.cover { aspect-ratio: 9/16; border-radius: 14px; overflow: hidden; position: relative; container-type: size; background: #000; }
.cover .crop { position: absolute; inset-inline: 0; top: 50%; aspect-ratio: 4/5; transform: translateY(-50%); border-block: 1.5px dashed #fff9; pointer-events: none; z-index: 8; }
.cover .crop::after { content: 'برش گرید ۴:۵'; position: absolute; bottom: 4px; right: 6px; font-size: 9px; color: #fffc; }
.pub-info > div { background: var(--cream); border-radius: 14px; padding: 14px; font-size: 13.5px; margin-bottom: 10px; }
.pub-info h5 { font-size: 13.5px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.pub-info .cap { white-space: pre-line; }
.kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kpi-row div { background: #fffdf8; border-radius: 10px; padding: 8px; text-align: center; }
.kpi-row b { display: block; font-size: 18px; font-weight: 900; color: var(--ink); }
.kpi-row small { font-size: 11px; color: var(--muted); }
.copy { font-size: 12px; text-decoration: underline; color: var(--ink); margin-top: 6px; }

/* ==========================================================================
   صحنهٔ موشن ۹:۱۶ — همهٔ اندازه‌ها نسبت به عرض کادر (cqw)
   ========================================================================== */
.stage { position: absolute; inset: 0; overflow: hidden; color: #fff; container-type: size; }
.stage *, .mini *, .cover *, .ig-frame *, .sting-box * { animation-fill-mode: both !important; }
.stage .shine::after, .mini .shine::after { animation-fill-mode: both; }
.st { position: absolute; inset: 0; overflow: hidden; color: #fff; }

.bg-velvet { background: radial-gradient(120% 70% at 50% 38%, #24584a, #0b1f1a 72%); }
.bg-ivory { background: radial-gradient(110% 70% at 50% 35%, #fffaf2, #e6d3b3); color: var(--ink); }
.bg-blush { background: radial-gradient(110% 70% at 50% 35%, #fdf1ec, #ddb3a1); color: #4a2a20; }
.bg-night { background: radial-gradient(110% 70% at 50% 30%, #2c2620, #090807); }
.bg-fire { background: radial-gradient(70% 45% at 50% 62%, #ffb347, #c4410f 45%, #2a0d05 85%); }
.bg-work { background: radial-gradient(90% 60% at 60% 40%, #4a3a2a, #120d09 80%); }
.bg-room { background: radial-gradient(80% 50% at 30% 30%, #6b4e3c, #1d1715 75%); }
.bg-gold { background: radial-gradient(120% 80% at 50% 30%, #fff3c4, #e3b85a 45%, #8f6519); color: #2a1d06; }

.grain { position: absolute; inset: -50%; z-index: 4; pointer-events: none; opacity: .08; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 33% { transform: translate(-5%, 3%); } 66% { transform: translate(4%, -4%); } 100% { transform: translate(-2%, 5%); } }
.vig { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(120% 80% at 50% 45%, transparent 55%, #000a); }
.bokeh { position: absolute; inset: 0; pointer-events: none; }
.bokeh i { position: absolute; border-radius: 50%; background: radial-gradient(circle, #ffe9a8cc, #ffe9a800 70%); filter: blur(2px); animation: drift 7s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate(6cqw, -8cqw) scale(1.2); opacity: .4; } }
.sparks i { position: absolute; bottom: 30%; width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: #ffd27a; box-shadow: 0 0 2cqw #ffb347; animation: spark 1.6s ease-out infinite; }
@keyframes spark { from { transform: translate(0, 0); opacity: 1; } to { transform: translate(var(--x, 4cqw), -60cqw); opacity: 0; } }
.rec { position: absolute; top: 6.5%; right: 4%; z-index: 5; font-size: 2.8cqw; font-weight: 700; background: #0008; border: 1px solid #fff3; padding: .6cqw 2.2cqw; border-radius: 99px; display: flex; gap: 1.4cqw; align-items: center; color: #fff; }
.rec::before { content: ''; width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: #ff4d4d; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.kb { position: absolute; inset: 0; animation: kb 8s ease-out; }
@keyframes kb { from { transform: scale(1.18) translate(2%, 2%); } }
.surface { position: absolute; left: 10%; right: 10%; height: 8cqw; border-radius: 50%; background: radial-gradient(closest-side, #0009, transparent); }
.hand { position: absolute; }
.prop { position: absolute; }

/* تایپوگرافی */
.tx { position: absolute; inset-inline: 7cqw; text-align: center; line-height: 1.45; text-shadow: 0 .6cqw 4cqw #0007; z-index: 2; }
.t-xxl { font-size: 15cqw; font-weight: 900; line-height: 1.2; letter-spacing: -.3cqw; }
.t-xl { font-size: 11cqw; font-weight: 900; line-height: 1.3; }
.t-l { font-size: 8.4cqw; font-weight: 900; line-height: 1.4; }
.t-m { font-size: 6.2cqw; font-weight: 800; }
.t-s { font-size: 4.4cqw; font-weight: 600; }
.t-xs { font-size: 3.3cqw; font-weight: 500; opacity: .85; }
.gt { background: linear-gradient(100deg, #fff3c4, #f1cf72 35%, #c99630 60%, #fff0b5 80%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.ink { color: var(--ink); text-shadow: none; }
.hl { background: #f1cf72; color: #1b1407; padding: 0 1.6cqw; border-radius: 1.2cqw; text-shadow: none; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.kick { display: inline-flex; align-items: center; gap: 2cqw; font-size: 3.2cqw; font-weight: 700; color: #f1cf72; }
.kick::before, .kick::after { content: ''; width: 6cqw; height: 1px; background: currentColor; }
.wm { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 .5cqw 1cqw; margin-bottom: -1cqw; }
.wi { display: inline-block; animation: wIn .55s cubic-bezier(.2, .9, .2, 1) var(--d, 0s); }
@keyframes wIn { from { transform: translateY(110%) rotate(4deg); opacity: 0; } }

.subt { position: absolute; inset-inline: 8cqw; bottom: 22%; z-index: 5; text-align: center; font-size: 4.2cqw; font-weight: 800; line-height: 1.75; pointer-events: none; }
.subt .sb { background: #000000b0; padding: .4cqw 2cqw; border-radius: 1.6cqw; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.subt span span { color: #ffffff8c; }
.subt span span.on { color: #fff; }
.subt span span.now { color: #f1cf72; }
.no-subs .subt { display: none; }

.glass { position: absolute; background: #ffffff14; border: 1px solid #ffffff2e; border-radius: 4cqw; backdrop-filter: blur(6px); }
.glass.light { background: #ffffffe0; border-color: #fff; color: var(--ink); box-shadow: 0 4cqw 10cqw -4cqw #0006; }
.jw { position: absolute; }
.jw svg { width: 100%; height: 100%; }
.shine { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.shine::after { content: ''; position: absolute; top: -20%; bottom: -20%; width: 35%; background: linear-gradient(90deg, transparent, #fff8, transparent); animation: aShine 1.3s ease-in-out var(--d, .3s) both; }
.stack { position: absolute; inset-inline: 7cqw; display: flex; flex-direction: column; gap: 1.4cqw; }
.stack .row { display: grid; grid-template-columns: 2.6cqw 1fr auto; gap: 2.4cqw; align-items: center; background: #ffffff10; border: 1px solid #ffffff22; border-radius: 3cqw; padding: 1.7cqw 3.4cqw; font-size: 3.5cqw; font-weight: 600; overflow: hidden; position: relative; }
.stack .row .dot { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: var(--c); position: relative; }
.stack .row i { position: absolute; top: 0; bottom: 0; right: 0; width: var(--w); background: var(--c); opacity: .2; transform-origin: right; animation: aGrowX .9s cubic-bezier(.2, .8, .2, 1) var(--d, 0s); }
.stack .row span { position: relative; }
.stack .row b { font-size: 4.4cqw; font-weight: 900; position: relative; }
.stack .row.total { background: linear-gradient(100deg, #fff3c4, #f1cf72 50%, #c99630); color: #1b1407; border: 0; padding-block: 2.4cqw; grid-template-columns: 1fr auto; }
.stack .row.total b { font-size: 5.6cqw; }
.ring-chart { position: absolute; }
.ring-chart svg { width: 100%; height: 100%; overflow: visible; }
.ring-chart circle.seg { fill: none; stroke-width: 9; animation: aDash 1.1s cubic-bezier(.4, 0, .2, 1) var(--d, 0s); }
@keyframes aDash { from { stroke-dasharray: 0 400; } }
.ring-chart .mid { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; text-align: center; line-height: 1.4; }
.vs { position: absolute; inset-inline: 6cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; }
.vs > div { background: #ffffff10; border: 1px solid #ffffff28; border-radius: 4cqw; padding: 3cqw; text-align: center; }
.vs .jwv { aspect-ratio: 1; }
.vs .jwv svg { width: 100%; height: 100%; }
.vs b { display: block; font-size: 9cqw; font-weight: 900; line-height: 1.3; }
.vs small { font-size: 3.2cqw; opacity: .8; display: block; }
.vs .bar { height: 2.2cqw; background: #ffffff1a; border-radius: 2cqw; margin: 2cqw 0; position: relative; overflow: hidden; }
.vs .bar i { position: absolute; top: 0; bottom: 0; right: 0; background: #f1cf72; transform-origin: right; animation: aGrowX 1s cubic-bezier(.2, .8, .2, 1) var(--d, 0s); }
.vs .win { border-color: #f1cf72; box-shadow: 0 0 0 1px #f1cf72, 0 0 8cqw -2cqw #f1cf7288; }
.grid1000 { position: absolute; left: 12%; width: 76%; display: grid; grid-template-columns: repeat(20, 1fr); gap: .7cqw; direction: ltr; }
.grid1000 i { aspect-ratio: 1; border-radius: .5cqw; background: #ffffff22; }
.grid1000 i.g { background: linear-gradient(135deg, #fff3c4, #e0b04f); animation: aPop .3s ease var(--d, 0s); }
.grid1000 i.c { background: #c98b6b; animation: aPop .3s ease var(--d, 0s); }
.grid1000 i.s { background: #cfd5db; animation: aPop .3s ease var(--d, 0s); }
.hbars { position: absolute; inset-inline: 8cqw; display: flex; flex-direction: column; gap: 3.4cqw; }
.hbars > div { font-size: 3.6cqw; font-weight: 700; }
.hbars > div span { display: flex; justify-content: space-between; margin-bottom: 1cqw; }
.hbars > div p { height: 3.4cqw; border-radius: 2cqw; background: #ffffff1c; overflow: hidden; }
.hbars > div p i { display: block; height: 100%; width: var(--w); border-radius: 2cqw; background: var(--c, linear-gradient(270deg, #c99630, #f1cf72)); transform-origin: right; animation: aGrowX 1s cubic-bezier(.2, .8, .2, 1) var(--d, 0s); }
.finger { position: absolute; inset-inline: 0; margin-inline: auto; }
.thread { fill: none; stroke: #e64b4b; stroke-width: 3; stroke-linecap: round; stroke-dasharray: var(--len, 300); animation: aDraw 1.6s ease-in-out var(--d, 0s); }
.ruler { position: absolute; inset-inline: 5cqw; height: 15cqw; background: linear-gradient(180deg, #faf0cf, #e9d79e); border-radius: 2cqw; direction: ltr; overflow: hidden; box-shadow: 0 3cqw 8cqw #0005; }
.ruler i { position: absolute; top: 0; width: 1px; background: #5a4a20; }
.ruler .tape { position: absolute; top: 62%; left: 4%; height: 1.2cqw; border-radius: 1cqw; background: #e64b4b; transform-origin: left; animation: aGrowX 1.4s ease var(--d, 0s); }
.ruler span { position: absolute; top: 34%; font-size: 2.8cqw; color: #5a4a20; font-weight: 700; transform: translateX(-50%); }
.size-tbl { position: absolute; inset-inline: 12cqw; font-size: 3.6cqw; border-radius: 3cqw; overflow: hidden; box-shadow: 0 3cqw 8cqw #0003; }
.size-tbl div { display: grid; grid-template-columns: 1fr 1fr; padding: 1.6cqw 4cqw; background: #fffffff0; color: var(--ink); text-align: center; }
.size-tbl div:nth-child(even) { background: #fff8ec; }
.size-tbl div.me { background: var(--ink); color: #f1cf72; font-weight: 900; }
.swipe { position: absolute; inset-inline: 12%; aspect-ratio: 4/5; border-radius: 5cqw; overflow: hidden; box-shadow: 0 6cqw 14cqw #0007; background: #fff; }
.swipe svg { width: 100%; height: 100%; }
.pricetag { position: absolute; display: flex; flex-direction: column; align-items: center; background: #fff; color: var(--ink); border-radius: 3cqw; padding: 1.6cqw 4cqw; box-shadow: 0 3cqw 8cqw #0005; z-index: 3; }
.pricetag b { font-size: 6.4cqw; font-weight: 900; line-height: 1.3; }
.pricetag small { font-size: 2.8cqw; color: var(--muted); }
.num-badge { position: absolute; width: 13cqw; height: 13cqw; border-radius: 50%; display: grid; place-items: center; background: #1b1407; color: #f1cf72; font-weight: 900; font-size: 7cqw; border: .6cqw solid #f1cf72; z-index: 3; }
.tag { position: absolute; background: #fff; color: var(--ink); border-radius: 99px; padding: 1.2cqw 4cqw; font-size: 5cqw; font-weight: 900; box-shadow: 0 2cqw 6cqw #0005; white-space: nowrap; z-index: 3; }
.coins { position: absolute; left: 8%; width: 84%; display: flex; align-items: end; justify-content: space-between; direction: ltr; }
.coins .colm { width: 6.4%; display: flex; flex-direction: column-reverse; gap: .5cqw; align-items: center; }
.coins .colm i { width: 100%; height: 1.8cqw; border-radius: 50%/45%; background: linear-gradient(180deg, #fff1b8, #d6a645 60%, #8f6519); animation: aUp .3s ease var(--d, 0s); }
.coins .colm span { font-size: 2.4cqw; opacity: .6; margin-top: 1cqw; }
.lower { position: absolute; bottom: 31%; right: 6cqw; display: flex; align-items: stretch; overflow: hidden; border-radius: 2cqw; box-shadow: 0 2cqw 6cqw #0006; z-index: 5; }
.lower b { background: linear-gradient(135deg, #fff3c4, #f1cf72 40%, #c99630); color: #1b1407; font-size: 5cqw; font-weight: 900; padding: 1cqw 3cqw; display: grid; place-items: center; }
.lower span { background: #0f2a24e6; color: #fff; font-size: 3.6cqw; font-weight: 700; padding: 1.4cqw 3.6cqw; display: flex; flex-direction: column; justify-content: center; line-height: 1.5; }
.lower span small { font-size: 2.6cqw; color: #f1cf72; font-weight: 500; }
.tl-steps { position: absolute; top: 9%; inset-inline: 10cqw; display: flex; justify-content: space-between; align-items: center; z-index: 5; }
.tl-steps i { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: #ffffff55; position: relative; }
.tl-steps i.on { background: #f1cf72; box-shadow: 0 0 2cqw #f1cf72; }
.tl-steps::before { content: ''; position: absolute; inset-inline: 0; top: 50%; height: 1px; background: #ffffff44; }
.chat { position: absolute; inset-inline: 6cqw; display: flex; flex-direction: column; gap: 2.4cqw; }
.chat p { max-width: 78%; padding: 2.4cqw 4cqw; border-radius: 5cqw; font-size: 4cqw; line-height: 1.6; font-weight: 500; }
.chat .me { align-self: flex-start; background: linear-gradient(135deg, #7b5bf0, #3797f0); color: #fff; border-bottom-left-radius: 1.2cqw; }
.chat .them { align-self: flex-end; background: #2b2b2b; color: #fff; border-bottom-right-radius: 1.2cqw; }
.chat-head { position: absolute; top: 7%; inset-inline: 0; display: flex; justify-content: center; align-items: center; gap: 2cqw; font-size: 3.6cqw; font-weight: 700; padding-bottom: 3cqw; border-bottom: 1px solid #ffffff1a; }
.chat-head i { width: 7cqw; height: 7cqw; border-radius: 50%; background: linear-gradient(135deg, #e9b896, #b07a5a); }
.typing { align-self: flex-end; background: #2b2b2b; border-radius: 5cqw; padding: 2.6cqw 4cqw; display: flex; gap: 1cqw; }
.typing i { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #aaa; animation: typ 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typ { 50% { transform: translateY(-1.2cqw); background: #fff; } }
.rain span { position: absolute; top: -10%; font-size: 7cqw; animation: rain 2.4s linear var(--d, 0s) infinite; }
@keyframes rain { to { transform: translateY(130cqh) rotate(40deg); } }
.box { position: absolute; left: 22%; width: 56%; aspect-ratio: 1.2; }
.box .lid { position: absolute; inset: 0 0 58% 0; background: linear-gradient(180deg, #2f6b5b, #173e34); border-radius: 3cqw 3cqw 1cqw 1cqw; transform-origin: 50% 0; animation: lid 1s cubic-bezier(.5, 0, .2, 1) var(--d, 0s); z-index: 2; }
@keyframes lid { from { transform: perspective(60cqw) rotateX(0); } to { transform: perspective(60cqw) rotateX(-100deg) translateY(-6cqw); opacity: .9; } }
.box .base { position: absolute; inset: 40% 0 0 0; background: linear-gradient(180deg, #1f4a3f, #0f2a24); border-radius: 1cqw 1cqw 3cqw 3cqw; box-shadow: 0 4cqw 10cqw #0007; }
.box .velvet { position: absolute; inset: 46% 6% 8% 6%; background: radial-gradient(#2d6857, #143a30); border-radius: 2cqw; }
.flow { position: absolute; inset-inline: 7cqw; display: flex; flex-direction: column; align-items: center; gap: 1.4cqw; }
.flow .node { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 2.4cqw 4cqw; border-radius: 3cqw; background: #ffffff14; border: 1px solid #ffffff2a; font-size: 3.8cqw; font-weight: 600; }
.flow .node b { font-size: 4.6cqw; font-weight: 900; }
.flow .op { font-size: 5cqw; font-weight: 900; color: #f1cf72; line-height: 1; }
.flow .node.res { background: linear-gradient(100deg, #fff3c4, #f1cf72 50%, #c99630); color: #1b1407; }
.flow .node.x { opacity: .6; }
.flow .node.x b { text-decoration: line-through; }
.care { position: absolute; inset-inline: 7cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 2.6cqw; }
.care > div { border-radius: 3.4cqw; padding: 3cqw; font-size: 3.4cqw; font-weight: 600; text-align: center; line-height: 1.5; }
.care .no { background: #ff5a5a24; border: 1px solid #ff8a8a66; }
.care .yes { background: #4fd18a24; border: 1px solid #7ee0a866; }
.care > div b { display: block; font-size: 8cqw; line-height: 1.3; }
.ticker-st { position: absolute; inset-inline: 6cqw; border-radius: 5cqw; padding: 4cqw; }
.ticker-st .r { display: flex; justify-content: space-between; align-items: center; padding: 2.4cqw 0; border-bottom: 1px dashed #c9b28a66; font-size: 3.8cqw; font-weight: 600; }
.ticker-st .r:last-child { border: 0; }
.ticker-st b { font-size: 5.2cqw; font-weight: 900; }
.ticker-st .up { color: #2f7a55; font-size: 3.6cqw; }
.spark-line { position: absolute; inset-inline: 6cqw; height: 22cqw; }
.spark-line svg { width: 100%; height: 100%; }
.spark-line path.l { fill: none; stroke: #c99630; stroke-width: 2; stroke-dasharray: 400; animation: aDraw 1.6s ease var(--d, 0s); --len: 400; }
.spark-line path.a { animation: aFade 1s ease calc(var(--d, 0s) + .8s); }
.poll { position: absolute; inset-inline: 10cqw; background: #fff; border-radius: 5cqw; padding: 4cqw; color: #111; box-shadow: 0 4cqw 10cqw #0005; text-align: center; }
.poll p { font-weight: 800; font-size: 4.4cqw; margin-bottom: 3cqw; }
.poll .opts2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; }
.poll .opts2 span { border-radius: 3cqw; padding: 3cqw 1cqw; background: #f0f0f0; font-weight: 800; position: relative; overflow: hidden; font-size: 3.8cqw; }
.poll .opts2 span i { position: absolute; top: 0; bottom: 0; right: 0; background: #f1cf7299; transform-origin: right; animation: aGrowX 1s ease var(--d, 0s); }
.poll .opts2 span em { position: relative; font-style: normal; }
.poll .q { border-radius: 3cqw; background: #f3f3f3; color: #999; padding: 3cqw; font-size: 3.6cqw; }
.countdown { position: absolute; inset-inline: 10cqw; background: linear-gradient(135deg, #fff3c4, #f1cf72 50%, #c99630); border-radius: 5cqw; padding: 4cqw; color: #2a1d06; text-align: center; box-shadow: 0 4cqw 10cqw #0005; font-size: 4.4cqw; }
.countdown .digits { display: flex; justify-content: center; gap: 2cqw; margin-top: 2cqw; align-items: center; }
.countdown .digits span { background: #1b1407; color: #f1cf72; border-radius: 2.4cqw; padding: 1.4cqw 3cqw; font-size: 8cqw; font-weight: 900; min-width: 13cqw; }
.link-st { position: absolute; left: 25%; right: 25%; text-align: center; background: #fff; color: #3797f0; border-radius: 3cqw; padding: 2cqw 3cqw; font-size: 4cqw; font-weight: 800; white-space: nowrap; box-shadow: 0 2cqw 6cqw #0004; }

.logo-end { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 1.6cqw; text-align: center; }
.logo-end svg.mk { width: 24cqw; height: 24cqw; overflow: visible; }
.logo-end svg.mk circle { fill: none; stroke: #f1cf72; stroke-width: 1; stroke-dasharray: 110; animation: aDraw 1s ease var(--d, 0s); --len: 110; }
.logo-end svg.mk path { fill: #f1cf72; transform-origin: 20px 20px; animation: aStar .8s cubic-bezier(.3, 1.6, .5, 1) calc(var(--d, 0s) + .45s); }
@keyframes aStar { from { transform: scale(0) rotate(-90deg); } }
.logo-end .wm2 { font-size: 13cqw; font-weight: 900; color: #f6ecd6; line-height: 1.3; animation: aUp .6s cubic-bezier(.2, .8, .2, 1) calc(var(--d, 0s) + .7s); }
.logo-end .sub2 { font-size: 3cqw; color: #f6ecd6aa; animation: aFade .5s ease calc(var(--d, 0s) + .9s); }
.logo-end .cta { margin-top: 3cqw; font-size: 4cqw; font-weight: 800; color: #1b1407; background: linear-gradient(100deg, #fff3c4, #f1cf72 50%, #c99630); padding: 2cqw 5cqw; border-radius: 99px; animation: aUp .5s ease calc(var(--d, 0s) + 1.1s); }

.a-up { animation: aUp .6s cubic-bezier(.2, .8, .2, 1) var(--d, 0s); }
.a-pop { animation: aPop .55s cubic-bezier(.3, 1.5, .5, 1) var(--d, 0s); }
.a-fade { animation: aFade .6s ease-out var(--d, 0s); }
.a-right { animation: aRight .6s cubic-bezier(.2, .8, .2, 1) var(--d, 0s); }
.a-left { animation: aLeft .6s cubic-bezier(.2, .8, .2, 1) var(--d, 0s); }
.a-float { animation: aFloat 3.2s ease-in-out var(--d, 0s) infinite; }
.a-spin { animation: aSpinY 5s ease-in-out var(--d, 0s) infinite; }
.a-wipe { animation: aWipe .7s cubic-bezier(.6, 0, .2, 1) var(--d, 0s); }
.a-shake { animation: aShake .5s ease var(--d, 0s); }
.a-blur { animation: aBlur .8s cubic-bezier(.2, .8, .2, 1) var(--d, 0s); }
@keyframes aUp { from { opacity: 0; transform: translateY(8cqw); } }
@keyframes aPop { from { opacity: 0; transform: scale(.4); } }
@keyframes aFade { from { opacity: 0; } }
@keyframes aRight { from { opacity: 0; transform: translateX(-110%); } }
@keyframes aLeft { from { opacity: 0; transform: translateX(110%); } }
@keyframes aFloat { 50% { transform: translateY(-2.4cqw) rotate(-2deg); } }
@keyframes aSpinY { 50% { transform: perspective(80cqw) rotateY(28deg) rotate(-4deg); } }
@keyframes aWipe { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes aShake { 20%, 60% { transform: translateX(-1.2cqw) rotate(-2deg); } 40%, 80% { transform: translateX(1.2cqw) rotate(2deg); } }
@keyframes aBlur { from { opacity: 0; filter: blur(4cqw); transform: scale(1.15); } }
@keyframes aGrowX { from { transform: scaleX(0); } }
@keyframes aShine { from { transform: translateX(-120%) skewX(-20deg); } to { transform: translateX(380%) skewX(-20deg); } }
@keyframes aDraw { from { stroke-dashoffset: var(--len, 400); } to { stroke-dashoffset: 0; } }

.tr-iris { animation: trIris .7s cubic-bezier(.6, 0, .2, 1); }
.tr-wipe { animation: trWipe .6s cubic-bezier(.7, 0, .2, 1); }
.tr-zoom { animation: trZoom .6s cubic-bezier(.2, .8, .2, 1); }
.tr-slide { animation: trSlide .55s cubic-bezier(.7, 0, .2, 1); }
.tr-flash::after { content: ''; position: absolute; inset: 0; background: #fff; z-index: 9; pointer-events: none; animation: flash .45s ease-out both; }
@keyframes trIris { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(80% at 50% 50%); } }
@keyframes trWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes trZoom { from { transform: scale(1.3); filter: blur(3cqw); opacity: 0; } }
@keyframes trSlide { from { transform: translateY(100%); } }
@keyframes flash { from { opacity: .85; } to { opacity: 0; } }

/* ==========================================================================
   اینفوگرافی‌های پست
   ========================================================================== */
.ig-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ig-card { display: flex; flex-direction: column; gap: 10px; }
.ig-frame { position: relative; aspect-ratio: 4/5; border-radius: 18px; overflow: hidden; container-type: size; box-shadow: var(--shadow); color: #fff; }
.ig-frame .in { position: absolute; inset: 0; padding: 7cqw; display: flex; flex-direction: column; }
.ig-frame h4 { font-size: 7cqw; font-weight: 900; line-height: 1.45; }
.ig-frame .kick { font-size: 3.4cqw; }
.ig-card p { font-size: 13px; color: var(--muted); }
.ig-card b.t { font-size: 15px; color: var(--ink); }
.ig-card .replay { align-self: start; font-size: 12px; text-decoration: underline; color: var(--ink); }
.ig-frame .legend2 { display: grid; gap: 1.6cqw; font-size: 3.6cqw; margin-top: auto; }
.ig-frame .legend2 span { display: flex; justify-content: space-between; gap: 2cqw; align-items: center; }
.ig-frame .legend2 i { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: var(--c); display: inline-block; margin-inline-end: 1.6cqw; }
.ig-frame .foot { margin-top: auto; font-size: 3cqw; opacity: .7; display: flex; justify-content: space-between; padding-top: 3cqw; }
.ig-frame .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3cqw; margin-top: 5cqw; text-align: center; font-size: 3.4cqw; }
.ig-frame .cols b { font-size: 6cqw; font-weight: 900; display: block; }
.ig-frame .col { height: 30cqw; display: flex; align-items: end; justify-content: center; margin-bottom: 2cqw; }
.ig-frame .col i { width: 60%; height: var(--h); border-radius: 2cqw 2cqw 0 0; background: linear-gradient(180deg, #fff3c4, #c99630); transform-origin: bottom; animation: aGrowY 1s cubic-bezier(.2, .8, .2, 1) var(--d, 0s); }
.ig-frame .dots { display: flex; gap: .8cqw; justify-content: center; margin-top: 1.4cqw; }
.ig-frame .dots i { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: #ffffff33; }
.ig-frame .dots i.f { background: #f1cf72; }
@keyframes aGrowY { from { transform: scaleY(0); } }

/* ==========================================================================
   روند تولید
   ========================================================================== */
.pipe { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; counter-reset: p; }
.pipe > div { background: #fffdf8; border: 1px solid var(--line); border-radius: 16px; padding: 18px 12px 14px; position: relative; counter-increment: p; }
.pipe > div::before { content: counter(p, persian); position: absolute; top: -12px; right: 12px; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--gold-2); font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.pipe b { display: block; font-size: 14px; color: var(--ink); }
.pipe small { display: block; color: var(--gold); font-weight: 700; font-size: 12px; }
.pipe p { font-size: 12.5px; color: var(--muted); line-height: 1.7; margin-top: 4px; }
.shoot { margin-top: 24px; background: #fffdf8; border: 1px solid var(--line); border-radius: 20px; padding: 20px; overflow-x: auto; }
.shoot h3 { font-size: 18px; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.shoot table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 640px; }
.shoot th, .shoot td { text-align: start; padding: 8px 10px; border-bottom: 1px dashed var(--line); }
.shoot th { color: var(--muted); font-weight: 600; }
.shoot td:first-child { font-weight: 800; color: var(--gold); white-space: nowrap; }

/* ---------- کاروسل ---------- */
.carousel { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
.slide { flex: 0 0 300px; aspect-ratio: 4/5; border-radius: 18px; scroll-snap-align: start; position: relative; overflow: hidden; padding: 24px; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.slide .n { position: absolute; top: 14px; left: 16px; font-size: 12px; opacity: .6; }
.slide h4 { font-size: 24px; font-weight: 900; line-height: 1.5; }
.slide p { font-size: 14px; margin-top: 8px; line-height: 1.8; }
.slide .big { font-size: 48px; font-weight: 900; line-height: 1.3; margin-top: auto; }
.slide .jwc { width: 70%; align-self: center; margin-top: auto; }
.slide .jwc svg { width: 100%; }
.slide .swipe-hint { margin-top: auto; font-size: 13px; opacity: .8; }

/* ---------- تقویم ---------- */
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.cal { display: grid; grid-template-columns: 70px repeat(7, 1fr); gap: 6px; overflow-x: auto; }
.cal .h { font-size: 12.5px; color: var(--muted); text-align: center; padding: 4px; font-weight: 600; }
.cal .w { color: var(--ink); font-size: 14px; display: grid; place-items: center; font-weight: 800; }
.cal .c { background: #fffdf8; border: 1px solid var(--line); border-radius: 12px; padding: 8px; min-height: 92px; font-size: 12.5px; display: flex; flex-direction: column; gap: 4px; border-top: 4px solid var(--c, var(--line)); }
.cal .c b { font-size: 11px; color: var(--c); }
.cal .c button { text-align: start; text-decoration: underline; color: var(--ink); font-size: 11.5px; margin-top: auto; }
.cal .c.off { background: transparent; border-style: dashed; color: var(--muted); }

/* ---------- کیت ---------- */
.kit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.kit-card { background: #fffdf8; border: 1px solid var(--line); border-radius: 20px; padding: 22px; }
.kit-card h3 { font-size: 18px; font-weight: 800; color: var(--ink); margin-bottom: 12px; }
.swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sw { border-radius: 12px; aspect-ratio: 1; display: flex; flex-direction: column; justify-content: end; padding: 8px; font-size: 11px; border: 1px solid #0001; }
.sw b { font-size: 12px; }
.ty1 { font-size: 30px; font-weight: 900; color: var(--ink); line-height: 1.4; }
.ty2 { font-size: 20px; font-weight: 700; color: var(--ink); }
.ty3 { font-size: 15px; font-weight: 400; margin-bottom: 8px; }
.kit-card small { color: var(--muted); font-size: 12.5px; display: block; }
.motion-rules { list-style: none; display: grid; gap: 8px; font-size: 13.5px; }
.motion-rules b { color: var(--gold); margin-inline-end: 4px; }
.sting-box { position: relative; aspect-ratio: 16/10; border-radius: 14px; overflow: hidden; background: radial-gradient(120% 90% at 50% 40%, #24584a, #0b1f1a 70%); container-type: size; margin-bottom: 12px; }
.sting-box .logo-end svg.mk { width: 22cqh; height: 22cqh; }
.sting-box .logo-end .wm2 { font-size: 16cqh; }
.sting-box .logo-end .sub2 { font-size: 5cqh; }
.sting-box .logo-end .cta { font-size: 6cqh; }
.dodont .do { color: var(--ok); font-size: 14px; }
.dodont .dont { color: #b0453d; font-size: 14px; }
.kit-card.dodont { grid-column: span 2; }

/* ---------- جلسه ---------- */
.meet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.meet-col { background: #fffdf8; border: 1px solid var(--line); border-radius: 20px; padding: 20px; }
.meet-col h3 { font-size: 18px; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.meet-col label { display: flex; gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 14px; cursor: pointer; }
.meet-col label:last-child { border: 0; }
.meet-col input { accent-color: var(--ink); width: 18px; height: 18px; margin-top: 4px; flex: none; }
.meet-col input:checked + span { text-decoration: line-through; color: var(--muted); }

@media (max-width: 1240px) {
  .studio { grid-template-columns: auto 1fr; }
  .reel-list { grid-column: 1 / -1; position: static; flex-direction: row; overflow-x: auto; padding-bottom: 6px; }
  .reel-list h4 { display: none; }
  .reel-item { flex: 0 0 210px; }
  .ig-cards { grid-template-columns: 1fr 1fr; }
  .pipe { grid-template-columns: repeat(4, 1fr); row-gap: 22px; }
}
@media (max-width: 1080px) { .cx-nav { display: none; } }
@media (max-width: 860px) {
  .cx-hero, .pillars-wrap, .profile-wrap, .studio, .kit-grid, .meet-grid, .prod-grid, .pub { grid-template-columns: 1fr; }
  .pillar-list { grid-template-columns: 1fr; }
  .donut { max-width: 240px; margin: 0 auto; }
  .phone { margin: 0 auto; }
  .player { position: static; margin: 0 auto; }
  .kit-card.dodont { grid-column: auto; }
  .cal { grid-template-columns: 50px repeat(7, minmax(110px, 1fr)); }
  .pipe { grid-template-columns: 1fr 1fr; }
  .cover { width: 180px; }
  .script { padding: 18px; }
  .script .dlg { margin-inline: 0; }
  .script .meta-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .ig-cards { grid-template-columns: 1fr; } }
@media (max-width: 420px) {
  .stage-wrap, .controls, .toggles { width: calc(100vw - 48px); }
  .phone-in { height: 600px; }
  .profile-notes li { grid-template-columns: 1fr; gap: 2px; }
}