/* Products: Storixx animation, spotlight card, product page and the talking assistant */

/* ---------- Storixx animated scene ---------- */
.sx-art { display: block; width: 100%; height: 100%; }
.sx-art * { transform-box: fill-box; }

.sx-tile { transform-origin: 50% 100%; animation: sx-pop 6s ease-in-out infinite; }
.sx-t1 { animation-delay: 0.0s; } .sx-t2 { animation-delay: 0.15s; } .sx-t3 { animation-delay: 0.3s; }
.sx-t4 { animation-delay: 0.45s; } .sx-t5 { animation-delay: 0.6s; } .sx-t6 { animation-delay: 0.75s; }
@keyframes sx-pop {
  0% { transform: scale(0); opacity: 0; }
  10%, 88% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}

.sx-bar { transform-origin: 50% 100%; animation: sx-grow 6s ease-in-out infinite; }
.sx-bb2 { animation-delay: 0.2s; } .sx-bb3 { animation-delay: 0.4s; } .sx-bb4 { animation-delay: 0.6s; }
@keyframes sx-grow {
  0%, 30% { transform: scaleY(0.1); }
  50%, 88% { transform: scaleY(1); }
  100% { transform: scaleY(0.1); }
}

.sx-fill { transform-origin: 0 50%; animation: sx-fill 6s ease-in-out infinite; }
@keyframes sx-fill { 0%, 30% { transform: scaleX(0.08); } 60%, 88% { transform: scaleX(1); } 100% { transform: scaleX(0.08); } }

.sx-row { animation: sx-row 6s ease-in-out infinite; opacity: 0; }
.sx-r2 { animation-delay: 0.5s; } .sx-r3 { animation-delay: 1s; }
@keyframes sx-row {
  0% { opacity: 0; transform: translateX(14px); }
  12%, 88% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateX(14px); }
}

.sx-notif { animation: sx-notif 6s ease-in-out infinite; }
@keyframes sx-notif {
  0%, 8% { transform: translateY(-34px); opacity: 0; }
  16%, 40% { transform: none; opacity: 1; }
  50%, 100% { transform: translateY(-34px); opacity: 0; }
}

.sx-plus { transform-origin: 50% 50%; animation: sx-tap 2.4s ease-in-out infinite; }
.sx-pd { animation-delay: 0.5s; } .sx-pd2 { animation-delay: 1s; }
@keyframes sx-tap { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }

.sx-receipt { transform-origin: 50% 0; animation: sx-print 6s ease-in-out infinite; }
@keyframes sx-print {
  0%, 52% { transform: scaleY(0); }
  75%, 92% { transform: scaleY(1); }
  100% { transform: scaleY(0); }
}

.sx-float { animation: sx-float 3.6s ease-in-out infinite; }
.sx-f2 { animation-delay: -1s; } .sx-f3 { animation-delay: -2s; } .sx-f4 { animation-delay: -0.5s; animation-duration: 4.4s; }
@keyframes sx-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-9px) rotate(3deg); } }

.sx-led { animation: sx-blink 1.4s steps(1) infinite; }
@keyframes sx-blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.25; } }

.sx-spark { transform-origin: 50% 50%; animation: sx-spark 2.4s ease-in-out infinite; }
.sx-s2 { animation-delay: 0.8s; } .sx-s3 { animation-delay: 1.5s; }
@keyframes sx-spark { 0%, 100% { transform: scale(0.3) rotate(0); opacity: 0.2; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }

/* ---------- spotlight card on the home page ---------- */
.spotlight {
  position: relative; display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center;
  padding: 36px; margin-bottom: 40px; border-radius: 28px; overflow: hidden;
  color: #cbd5e1; background: radial-gradient(120% 120% at 80% 30%, #0f3a8a 0%, #071a45 45%, #020818 100%);
  box-shadow: 0 30px 70px -30px rgba(15, 40, 120, 0.7);
  touch-action: pan-y; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
.spotlight .eyebrow { background: rgba(255, 255, 255, 0.1); color: #a5b4fc; }
.spotlight h3 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: 0.04em; }
.spotlight-copy > p:not(.eyebrow):not(.hold-hint) { margin-top: 12px; font-size: 1.05rem; max-width: 46ch; }
.spotlight-points { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; color: #e2e8f0; font-weight: 500; }
.spotlight-points li::before { content: "\2713"; color: #3ee6a8; font-weight: 800; margin-inline-end: 10px; }
.spotlight-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.spotlight .btn-outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.spotlight .btn-outline:hover { background: rgba(255, 255, 255, 0.1); }
.spotlight-art { min-width: 0; aspect-ratio: 480 / 300; }

.hold-hint { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 0.88rem; color: #94a3b8; }
.hold-btn {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08); color: #fff; padding: 8px 14px; border-radius: 999px;
  font: inherit; font-weight: 600; font-size: 0.88rem; cursor: pointer;
}
.hold-btn:hover { background: rgba(255, 255, 255, 0.16); }
.hold-btn svg { width: 16px; height: 16px; fill: currentColor; }

/* progress bar while the card is held down */
[data-assistant]::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 5px; width: 100%;
  background: linear-gradient(90deg, #62d8ff, #7c3aed); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}
[data-assistant].holding::after { animation: hold-fill 1.6s linear forwards; }
html[dir="rtl"] [data-assistant]::after { transform-origin: 100% 50%; }
@keyframes hold-fill { to { transform: scaleX(1); } }

/* ---------- product page ---------- */
.sp-art.art-storixx {
  aspect-ratio: 480 / 300; position: relative; touch-action: pan-y; -webkit-touch-callout: none; user-select: none;
  background: radial-gradient(120% 120% at 80% 30%, #0f3a8a 0%, #071a45 45%, #020818 100%);
  box-shadow: 0 30px 70px -25px rgba(15, 40, 120, 0.7); overflow: hidden;
}
.sp-hint { margin-top: 20px; font-size: 0.9rem; color: var(--muted); }
.sp-hint .hold-btn { background: #eef2ff; color: var(--blue); border-color: #c7d2fe; margin-inline-end: 8px; }
.sp-hint .hold-btn:hover { background: #e0e7ff; }

/* ---------- the talking assistant ---------- */
.assistant { position: fixed; inset: 0; z-index: 200; }
.assistant[hidden] { display: none; }
.assistant-backdrop {
  position: absolute; inset: 0; background: rgba(2, 8, 24, 0.62);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  opacity: 0; transition: opacity 0.35s ease;
}
.assistant.open .assistant-backdrop { opacity: 1; }

.assistant-panel {
  position: absolute; right: max(16px, 4vw); bottom: 0; display: flex; align-items: flex-end; gap: 12px;
  max-width: calc(100vw - 32px);
}
.assistant-girl {
  width: min(330px, 42vh, 78vw); flex: none;
  transform: translateY(40px) scale(0.55); transform-origin: 50% 100%; opacity: 0;
  transition: transform 0.6s cubic-bezier(.2,1.2,.3,1), opacity 0.35s ease;
}
.assistant.open .assistant-girl { transform: none; opacity: 1; }
.girl-svg { display: block; width: 100%; height: auto; overflow: visible; }

.assistant-bubble {
  position: relative; align-self: center; width: min(340px, 52vw);
  background: #fff; color: var(--ink); border-radius: 22px; padding: 18px 20px 20px;
  box-shadow: 0 24px 60px rgba(2, 8, 24, 0.45);
  transform: translateX(24px) scale(0.9); opacity: 0; transform-origin: 100% 60%;
  transition: transform 0.5s 0.25s cubic-bezier(.2,1.1,.3,1), opacity 0.3s 0.25s ease;
}
.assistant.open .assistant-bubble { transform: none; opacity: 1; }
.assistant-bubble::after {
  content: ""; position: absolute; right: -9px; top: 50%; width: 18px; height: 18px; background: #fff;
  transform: translateY(-50%) rotate(45deg); border-radius: 3px;
}
.assistant-name { font: 800 0.8rem/1 'Plus Jakarta Sans', 'Inter', sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--violet); margin: 0 0 8px; }
.assistant-text { margin: 0; font-size: 1.02rem; line-height: 1.55; min-height: 3.2em; color: var(--ink); font-weight: 500; }
.assistant-note { margin: 10px 0 0; font-size: 0.8rem; color: var(--muted); }
.assistant-cta { margin-top: 14px; }

.assistant-close {
  position: absolute; top: 14px; right: 14px; z-index: 3; width: 42px; height: 42px; border-radius: 50%;
  border: 0; background: rgba(255, 255, 255, 0.92); color: var(--ink); font-size: 1.6rem; line-height: 1; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.assistant-panel .assistant-close { position: fixed; top: 16px; right: 16px; }

/* character motion */
.girl-breathe { animation: girl-breathe 3.4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes girl-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.012); } }

.girl-wave { transform-origin: 170px 214px; animation: girl-wave 1.1s ease-in-out 4; }
@keyframes girl-wave { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(14deg); } 70% { transform: rotate(-10deg); } }

.girl-eye { transform-box: fill-box; transform-origin: 50% 50%; animation: girl-blink 4s infinite; }
@keyframes girl-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(0.08); } }

.girl-mouth, .girl-tongue { opacity: 0; transform-box: fill-box; transform-origin: 50% 20%; }
.assistant.talking .girl-smile { opacity: 0; }
.assistant.talking .girl-mouth, .assistant.talking .girl-tongue { opacity: 1; animation: girl-talk 0.34s ease-in-out infinite alternate; }
.assistant.talking .girl-tongue { animation-duration: 0.34s; }
@keyframes girl-talk { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }

@media (max-width: 700px) {
  .spotlight { grid-template-columns: 1fr; padding: 24px; gap: 24px; }
  .assistant-panel { right: 0; left: 0; flex-direction: column-reverse; align-items: center; gap: 0; }
  .assistant-girl { width: min(250px, 36vh); }
  .assistant-bubble { width: min(92vw, 420px); margin-bottom: -6px; transform-origin: 50% 100%; }
  .assistant-bubble::after { right: 50%; top: auto; bottom: -9px; transform: translateX(50%) rotate(45deg); }
}

@media (max-width: 960px) {
  .spotlight { grid-template-columns: 1fr; }
}

html[dir="rtl"] .spotlight h3 { letter-spacing: 0.04em; font-family: 'Plus Jakarta Sans', sans-serif; }
html[dir="rtl"] .spotlight-copy > p { line-height: 2; }
html[dir="rtl"] .assistant-text { line-height: 2.1; font-size: 1.05rem; }
html[dir="rtl"] .assistant-name { letter-spacing: 0; text-transform: none; }

@media (prefers-reduced-motion: reduce) {
  .assistant-girl, .assistant-bubble { transition: none; }
}

/* =====================================================================
   Product illustrations: School, Distribution, Accounts, Inklyra
   ===================================================================== */
.pr-art { display: block; width: 100%; height: 100%; }
.pr-art * { transform-box: fill-box; }

/* ----- School ----- */
.sc-spin { transform-origin: 50% 50%; animation: pr-spin 3s linear infinite; }
.sc-flag { transform-origin: 0 50%; animation: sc-wave 1.2s ease-in-out infinite; }
@keyframes sc-wave { 0%, 100% { transform: scaleX(1) skewY(0); } 50% { transform: scaleX(0.82) skewY(-6deg); } }
.sc-hand { transform-origin: 50% 100%; animation: pr-spin 6s linear infinite; }
.sc-win { animation: sc-light 3.2s ease-in-out infinite; }
.sc-w2 { animation-delay: 1.2s; }
@keyframes sc-light { 0%, 100% { fill: #bae6fd; } 50% { fill: #fde68a; } }
.sc-fill { transform-origin: 0 50%; animation: sc-bar 6s ease-in-out infinite; }
.sc-f2 { animation-delay: 0.3s; } .sc-f3 { animation-delay: 0.6s; }
@keyframes sc-bar { 0%, 8% { transform: scaleX(0); } 35%, 88% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.sc-stamp { transform-origin: 50% 50%; animation: sc-stamp 6s ease-in-out infinite; }
@keyframes sc-stamp {
  0%, 38% { transform: scale(0) rotate(-30deg); }
  46% { transform: scale(1.25) rotate(8deg); }
  52%, 88% { transform: scale(1) rotate(0); }
  100% { transform: scale(0) rotate(-30deg); }
}
.sc-scan { animation: sc-scan 2.2s ease-in-out infinite alternate; filter: drop-shadow(0 0 3px #22d3ee); }
@keyframes sc-scan { from { transform: translateY(0); } to { transform: translateY(32px); } }
.sc-tick { transform-origin: 50% 50%; animation: pr-pop 4.4s ease-in-out infinite; }
.sc-att { transform-origin: 50% 50%; animation: pr-pop 4.4s ease-in-out infinite; animation-delay: 0.3s; }
.sc-a2 { animation-delay: 0.9s; } .sc-a3 { animation-delay: 1.5s; }

/* ----- Distribution ----- */
.ds-road { animation: ds-road 0.9s linear infinite; }
@keyframes ds-road { to { stroke-dashoffset: -26; } }
.ds-route { animation: ds-route 1.2s linear infinite; }
@keyframes ds-route { to { stroke-dashoffset: -22; } }
.ds-pin { transform-origin: 50% 100%; animation: ds-pin 1.6s ease-in-out infinite; }
@keyframes ds-pin { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(0) scaleY(0.92); } }
.ds-box { transform-origin: 50% 100%; animation: pr-pop 5s ease-in-out infinite; }
.ds-b2 { animation-delay: 0.4s; } .ds-b3 { animation-delay: 0.8s; }
.ds-truck { animation: ds-drive 6s ease-in-out infinite; }
@keyframes ds-drive {
  0% { transform: translateX(-70px); opacity: 0; }
  12% { opacity: 1; }
  50% { transform: translateX(14px); }
  88% { opacity: 1; }
  100% { transform: translateX(30px); opacity: 0; }
}
.ds-wheel { transform-origin: 50% 50%; animation: pr-spin 0.8s linear infinite; }
.ds-doc { animation: ds-doc 3.4s ease-in-out infinite; }
@keyframes ds-doc { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(3deg); } }

/* ----- Accounts ----- */
.ac-row { animation: ac-row 6s ease-in-out infinite; opacity: 0; }
.ac-r2 { animation-delay: 0.4s; } .ac-r3 { animation-delay: 0.8s; } .ac-r4 { animation-delay: 1.2s; }
@keyframes ac-row {
  0% { opacity: 0; transform: translateX(-12px); }
  14%, 86% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateX(-12px); }
}
.ac-total { transform-origin: 0 50%; animation: ac-total 6s ease-in-out infinite; }
@keyframes ac-total { 0%, 25% { transform: scaleX(0.2); } 55%, 88% { transform: scaleX(1); } 100% { transform: scaleX(0.2); } }
.ac-donut { transform-origin: 50% 50%; animation: pr-spin 9s linear infinite; }
.ac-up { animation: ac-up 1.8s ease-in-out infinite; }
.ac-down { animation: ac-down 1.8s ease-in-out infinite 0.9s; }
@keyframes ac-up { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes ac-down { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.ac-coin { transform-origin: 50% 100%; animation: ac-coin 4.4s ease-in-out infinite; }
.ac-c2 { animation-delay: 0.35s; } .ac-c3 { animation-delay: 0.7s; }
@keyframes ac-coin {
  0%, 6% { transform: translateY(-40px); opacity: 0; }
  18% { transform: translateY(2px); opacity: 1; }
  24%, 86% { transform: none; opacity: 1; }
  100% { transform: translateY(-40px); opacity: 0; }
}
.ac-spin { transform-origin: 50% 50%; animation: pr-spin 3s linear infinite; }

/* ----- Inklyra ----- */
.ik-caret { animation: sx-blink 0.9s steps(1) infinite; }
.ik-p { opacity: 0; animation: ik-show 7s ease-in-out infinite; }
.ik-p1 { animation-delay: 0.2s; } .ik-p2 { animation-delay: 1.2s; } .ik-p3 { animation-delay: 2.4s; } .ik-p4 { animation-delay: 3.5s; }
@keyframes ik-show {
  0% { opacity: 0; transform: translateY(6px); }
  6%, 88% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(6px); }
}
.ik-badge { animation: art-float 2.6s ease-in-out infinite; }

/* shared */
@keyframes pr-spin { to { transform: rotate(360deg); } }
@keyframes pr-pop {
  0%, 20% { transform: scale(0); }
  32%, 85% { transform: scale(1); }
  100% { transform: scale(0); }
}

/* picture backgrounds (home cards and product pages) */
.art-school { background: radial-gradient(circle at 50% 30%, #ffffff, #fff1c9 75%); }
.art-distribution { background: radial-gradient(circle at 50% 30%, #ffffff, #dbeafe 75%); }
.art-accounts { background: radial-gradient(circle at 50% 30%, #ffffff, #d1fae5 75%); }
.art-inklyra { background: radial-gradient(circle at 50% 30%, #ffffff, #e9e0ff 75%); }

/* four product cards on the home page */
.cards-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .cards-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cards-4 { grid-template-columns: 1fr; } }
.product-showcase .solution-body p { -webkit-line-clamp: 4; }

/* feature pills under the lead on product pages */
.badges { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 22px 0 0; }
.badges li {
  background: #fff; border: 1px solid #dbe4f1; border-radius: 999px; padding: 6px 14px;
  font-size: 0.85rem; font-weight: 600; color: var(--ink);
}
.badges li::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); margin-inline-end: 8px; }

/* SVG text must keep its left-to-right layout inside the Urdu (rtl) pages */
.pr-art, .sx-art, .art-svg { direction: ltr; }

/* =====================================================================
   STORIXX AI: WhatsApp + Instagram automation scene
   ===================================================================== */
.ai-art { display: block; width: 100%; height: 100%; direction: ltr; }
.ai-art * { transform-box: fill-box; }

.ai-bubble { transform-origin: 0 50%; animation: ai-bubble 8s ease-in-out infinite; opacity: 0; }
.ai-reply { transform-origin: 50% 50%; animation: ai-reply 8s ease-in-out infinite; opacity: 0; }
.ai-row { animation: ai-row 8s ease-in-out infinite; opacity: 0; }
.ai-chip { animation: ai-chip 8s ease-in-out infinite; opacity: 0; transform-origin: 50% 50%; }
.ai-order { animation: ai-order 8s ease-in-out infinite; opacity: 0; }
.ai-d4 { animation-delay: -4s; }

@keyframes ai-bubble {
  0%, 3% { opacity: 0; transform: scale(0); }
  7% { opacity: 1; transform: scale(1.06); }
  9%, 88% { opacity: 1; transform: scale(1); }
  95%, 100% { opacity: 0; transform: scale(0.9); }
}
@keyframes ai-reply {
  0%, 49% { opacity: 0; transform: scale(0.4); }
  54% { opacity: 1; transform: scale(1.06); }
  56%, 88% { opacity: 1; transform: scale(1); }
  95%, 100% { opacity: 0; transform: scale(0.9); }
}
@keyframes ai-row {
  0%, 40% { opacity: 0; transform: translateX(18px); }
  46%, 90% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateX(-10px); }
}
@keyframes ai-chip {
  0%, 52% { opacity: 0; transform: scale(0.3); }
  58%, 90% { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; }
}
@keyframes ai-order {
  0%, 64% { opacity: 0; transform: translateY(10px); }
  70%, 90% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; }
}

.ai-ring { transform-origin: 50% 50%; animation: pr-spin 14s linear infinite; }
.ai-ring2 { animation-duration: 22s; animation-direction: reverse; }
.ai-core { transform-origin: 50% 50%; animation: ai-core 4s ease-in-out infinite; }
@keyframes ai-core { 0%, 38%, 66%, 100% { transform: scale(1); } 52% { transform: scale(1.14); } }
.ai-spark { transform-origin: 50% 50%; animation: ai-spark 4s ease-in-out infinite; }
@keyframes ai-spark { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(90deg) scale(1.18); } }

.ai-typing { animation: ai-typing 4s ease-in-out infinite; opacity: 0; }
@keyframes ai-typing { 0%, 42% { opacity: 0; transform: translateY(6px); } 47%, 62% { opacity: 1; transform: none; } 68%, 100% { opacity: 0; } }
.ai-dot { animation: ai-dot 0.9s ease-in-out infinite; }
.ai-dot2 { animation-delay: 0.15s; } .ai-dot3 { animation-delay: 0.3s; }
@keyframes ai-dot { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(-3px); opacity: 1; } }

.ai-knob { animation: ai-knob 4s ease-in-out infinite; }
@keyframes ai-knob { 0%, 8% { transform: translateX(0); } 18%, 100% { transform: translateX(12px); } }

.ai-sp { transform-origin: 50% 50%; animation: sx-spark 2.4s ease-in-out infinite; }
.ai-sp2 { animation-delay: 1s; }

/* dark stage for the AI picture wherever it is shown */
.art-storixx-ai, .sp-art.art-storixx-ai {
  background: radial-gradient(120% 120% at 20% 20%, #123a8a 0%, #071a45 45%, #020818 100%);
}
.sp-art.art-storixx-ai {
  aspect-ratio: 480 / 300; position: relative; overflow: hidden;
  box-shadow: 0 30px 70px -25px rgba(15, 40, 120, 0.7);
}

/* two spotlights: alternate the layout */
.spotlight + .spotlight { margin-top: -8px; }
.spotlight.reverse .spotlight-art { order: -1; }
.spotlight .new-tag { background: linear-gradient(135deg, #22d3ee, #7c3aed); color: #fff; }

/* works-together strip on product pages */
.related { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.related-card {
  display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 14px; transition: transform .2s, box-shadow .2s;
}
.related-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(37, 99, 235, 0.14); }
.related-card .related-art { border-radius: 12px; overflow: hidden; aspect-ratio: 480 / 300; background: #071a45; }
.related-card h3 { font-size: 1.05rem; margin-bottom: 4px; }
.related-card p { font-size: 0.9rem; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.related-card .more { padding-top: 8px; }
@media (max-width: 560px) { .related-card { grid-template-columns: 1fr; } }
html[dir="rtl"] .related-card h3 { line-height: 1.9; }

.spotlight-art.art-storixx-ai { background: none; }