/* «تبا تبدا؟»: ثلاث بطاقات زجاجية، الوسط مميّز بإطار ذهبي يلف، ونور يتبع الماوس */
.st { position: relative; padding: clamp(80px, 10vw, 130px) 16px; background: radial-gradient(60% 50% at 50% 0%, #2a1f0e 0%, transparent 70%), #0a0a0b; color: #f4f2fa; overflow: hidden; text-align: center; }
.st-kicker { display: inline-block; font-size: 15px; font-weight: 700; color: #f1b35c; }
.st h2 { margin: 10px 0 0; font-size: clamp(48px, 7vw, 96px); font-weight: 900; line-height: 1.05; }
.st-sub { max-width: 560px; margin: 16px auto 0; color: #a9a6b2; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.8; }
.st-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; max-width: 1140px; margin: clamp(44px, 5vw, 64px) auto 0; align-items: stretch; }

.st-card { --mx: 50%; --my: 0%; position: relative; display: flex; flex-direction: column; gap: 18px; padding: 34px 30px 30px; border-radius: 30px; text-align: start; color: inherit; text-decoration: none; isolation: isolate;
  background: radial-gradient(420px circle at var(--mx) var(--my), #f1b35c1f, transparent 45%), linear-gradient(180deg, #17161c, #0f0f12); border: 1px solid #ffffff14;
  box-shadow: 0 1px 0 #ffffff12 inset, 0 30px 70px -30px #000; transition: transform .35s cubic-bezier(.2, .9, .3, 1.2), border-color .3s; opacity: 0; translate: 0 40px; }
.st.in .st-card { opacity: 1; translate: 0 0; transition: opacity .8s ease, translate .9s cubic-bezier(.2, 1, .3, 1), transform .35s, border-color .3s; }
.st.in .st-card:nth-child(2) { transition-delay: .12s, .12s, 0s, 0s; } .st.in .st-card:nth-child(3) { transition-delay: .24s, .24s, 0s, 0s; }
.st-card:hover { transform: translateY(-8px); border-color: #f1b35c55; color: inherit; }

/* المميّز: إطار ذهبي يلف */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.st-card.hot { background: radial-gradient(420px circle at var(--mx) var(--my), #f1b35c2e, transparent 45%), linear-gradient(180deg, #221a0e, #110e09); border-color: transparent; transform: translateY(-14px); }
.st-card.hot:hover { transform: translateY(-22px); }
.st-card.hot::before { content: ""; position: absolute; inset: -1.5px; z-index: -1; border-radius: 31px; padding: 1.5px;
  background: conic-gradient(from var(--ang), #f1b35c, #fff1c9, #f1b35c00 30%, #f1b35c00 70%, #f1b35c); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: st-spin 4s linear infinite; }
.st-card.hot::after { content: ""; position: absolute; inset: 20% 10% auto; height: 60%; z-index: -2; background: #f1b35c; filter: blur(80px); opacity: .18; }
.st-badge { position: absolute; top: -14px; inset-inline-start: 50%; translate: 50% 0; padding: 6px 16px; border-radius: 999px; background: linear-gradient(90deg, #f1b35c, #ffe2a2); color: #1a1206; font-size: 13px; font-weight: 800; white-space: nowrap; box-shadow: 0 10px 24px #f1b35c44; }
[dir="ltr"] .st-badge { translate: -50% 0; }

.st-ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: #ffffff0d; border: 1px solid #ffffff1a; color: #f1b35c; }
.st-card.hot .st-ico { background: linear-gradient(135deg, #f1b35c, #e8992e); color: #1a1206; border: 0; box-shadow: 0 14px 30px #f1b35c44; }
.st-ico svg { width: 30px; height: 30px; }
.st-card h3 { margin: 0; font-size: 26px; font-weight: 800; }
.st-tag { display: block; margin-top: -10px; color: #f1b35c; font-weight: 700; font-size: 14px; }
.st-card ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; color: #c9c6d2; font-size: 15px; }
.st-card li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.6; }
.st-card li::before { content: "✓"; flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: #f1b35c22; color: #f1b35c; font-size: 12px; font-weight: 900; }
.st-go { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; border-radius: 999px; background: #ffffff0f; border: 1px solid #ffffff1f; font-weight: 700; transition: background .25s, color .25s; }
.st-card:hover .st-go { background: #fff; color: #111; }
.st-card.hot .st-go { background: #f1b35c; color: #1a1206; border: 0; }
.st-card.hot:hover .st-go { background: #ffe2a2; }
.st-go svg { width: 15px; height: 15px; transition: translate .25s; }
.st-card:hover .st-go svg { translate: -3px -3px; }
[dir="ltr"] .st-go svg { transform: scaleX(-1); } [dir="ltr"] .st-card:hover .st-go svg { translate: 3px -3px; }

@keyframes st-spin { to { --ang: 360deg; } }
@media (max-width: 900px) { .st-grid { grid-template-columns: 1fr; max-width: 520px; } .st-card.hot, .st-card.hot:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) { .st-card { opacity: 1; translate: none; transition: none; } .st-card.hot::before { animation: none; } }

/* «صُمّم لك.» ترتفع شوي، وتحتها زرار «احسب كم يكلف مشروعك» */
.vo-watchstory-end { margin-top: 10svh !important; min-height: 78svh !important; justify-content: flex-start !important; padding-top: 70px !important; }
.calc-cta { position: relative; display: inline-flex; align-items: center; gap: 12px; margin-top: 40px; min-height: 68px; padding: 0 30px 0 12px; border-radius: 999px; text-decoration: none; font-size: clamp(17px, 1.8vw, 21px); font-weight: 800; color: #1a1206;
  background: linear-gradient(100deg, #e8992e, #ffe2a2 30%, #f1b35c 55%, #ffe9b8 80%, #e8992e) 0 0 / 250% 100%; box-shadow: 0 18px 44px #f1b35c44, 0 0 0 1px #ffffff55 inset; animation: calc-shine 5s linear infinite; transition: transform .25s, box-shadow .25s; }
.calc-cta::before { content: ""; position: absolute; inset: -6px; border-radius: 999px; border: 2px solid #f1b35c88; animation: calc-ring 2.4s ease-out infinite; pointer-events: none; }
.calc-cta:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 24px 54px #f1b35c66, 0 0 0 1px #fff inset; color: #1a1206; }
.calc-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #1a1206; font-size: 22px; }
.calc-cta svg { width: 16px; height: 16px; }
[dir="ltr"] .calc-cta { padding: 0 12px 0 30px; flex-direction: row-reverse; }
@keyframes calc-shine { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@keyframes calc-ring { 0% { opacity: .9; scale: 1; } 100% { opacity: 0; scale: 1.12; } }
@media (prefers-reduced-motion: reduce) { .calc-cta, .calc-cta::before { animation: none; } }
.vo-watchstory-end .calc-cta { flex-direction: row !important; width: auto !important; white-space: nowrap; }
[dir="ltr"] .vo-watchstory-end .calc-cta { flex-direction: row-reverse !important; }
/* أصغر */
.vo-watchstory-end .calc-cta { min-height: 52px; margin-top: 30px; padding: 0 22px 0 8px; gap: 9px; font-size: 16px; }
[dir="ltr"] .vo-watchstory-end .calc-cta { padding: 0 8px 0 22px; }
.calc-ico { width: 36px; height: 36px; font-size: 17px; }
.calc-cta svg { width: 13px; height: 13px; }
.calc-cta::before { inset: -4px; }