/* ==========================================================================
   Mavan — Dari (right-to-left) page at /afg/.
   Loaded after styles.css; only adjusts typography, direction and the Dari mockups.
   ========================================================================== */

:root {
  --font-display: "Vazirmatn", "Inter Tight", system-ui, sans-serif;
  --font-body: "Vazirmatn", "Inter", system-ui, sans-serif;
}
/* Product mockups that stay in English keep the original fonts */
[dir="ltr"] {
  --font-display: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
}
[dir="ltr"] [dir="rtl"] {
  --font-display: "Vazirmatn", "Inter Tight", system-ui, sans-serif;
  --font-body: "Vazirmatn", "Inter", system-ui, sans-serif;
  font-family: var(--font-body);
}

/* Dari letters join up: any letter-spacing pulls words apart */
html[dir="rtl"] body :not(.brand-name):not(.footer-word):not([dir="ltr"]):not([dir="ltr"] *) { letter-spacing: 0 !important; }
html[dir="rtl"] body { line-height: 1.8; }
html[dir="rtl"] em { font-style: normal; }
.brand-name, .footer-word { font-family: "Inter Tight", "Inter", sans-serif; }

/* ---------- Headings ---------- */
/* As wide as the English headline: the longest rotating word is ~8.6em, so it still fits */
html[dir="rtl"] .hero-title { font-weight: 800; font-size: clamp(30px, 6.1vw, 87px); line-height: 1.16; }
html[dir="rtl"] .h2, html[dir="rtl"] .ind-copy h3 { font-weight: 700; line-height: 1.38; }
html[dir="rtl"] .h2 em, html[dir="rtl"] .ind-copy h3 em {
  font-family: var(--font-display); font-style: normal; font-weight: 800; font-size: 1em; color: var(--accent);
}
html[dir="rtl"] .statement { font-weight: 600; line-height: 1.55; max-width: 26ch; }
html[dir="rtl"] .svc h3, html[dir="rtl"] .step-card h3, html[dir="rtl"] .t-card--why h3, html[dir="rtl"] .case-info h3 { font-weight: 700; }
html[dir="rtl"] .faq-q { text-align: right; font-weight: 600; line-height: 1.6; }
html[dir="rtl"] .ind-tab { text-align: right; }
html[dir="rtl"] .t-card--feature .t-quote { font-weight: 600; line-height: 1.6; max-width: 34ch; }
html[dir="rtl"] .plan-price, html[dir="rtl"] .stat-num, html[dir="rtl"] .hero-stat dt, html[dir="rtl"] .t-rating-num, html[dir="rtl"] .ind-metric b { font-weight: 700; }
html[dir="rtl"] .stat-num .unit--word { margin-left: 0; margin-right: 0.28em; }
/* Vazirmatn's tabular digits are very wide: keep its natural spacing */
html[dir="rtl"] .stat-num, html[dir="rtl"] .plan-price, html[dir="rtl"] .hero-stat dt { font-variant-numeric: normal; }
html[dir="rtl"] .t-rating-num { font-weight: 800; line-height: 1.2; }

/* Rotating word in the hero */
html[dir="rtl"] .rotator { font-family: var(--font-display); font-style: normal; font-weight: 800; font-size: 1em; line-height: 1.3; }
html[dir="rtl"] .rotator.is-ready { height: 1.3em; }
html[dir="rtl"] .rotator-word { padding-right: 0; padding-left: 0.06em; }
html[dir="rtl"] .rotator.is-ready .rotator-word { left: auto; right: 0; }

/* Giant word in the closing call to action: tall Dari letters need a taller window */
html[dir="rtl"] .big-lead { line-height: 1.45; }
html[dir="rtl"] .big-slot { font-weight: 800; font-size: clamp(64px, 15vw, 220px); line-height: 1.3; margin: -0.12em 0 -0.32em; letter-spacing: 0 !important; }
html[dir="rtl"] .big-word { padding: 0.12em 0 0.32em 0.06em; }
html[dir="rtl"] .big-slot.is-ready .big-word > span { transform: translateY(1.9em); }
html[dir="rtl"] .big-slot.is-ready .big-word.is-active > span { transform: none; }
html[dir="rtl"] .big-slot.is-ready .big-word.is-leaving > span { transform: translateY(-1.9em); }

/* ---------- Mirrored spacing and positions ---------- */
html[dir="rtl"] .scroll-progress { transform-origin: 100% 50%; }
html[dir="rtl"] .nav-inner { padding: 0 12px 0 8px; }
html[dir="rtl"] .nav-links { margin-left: auto; margin-right: 8px; }
html[dir="rtl"] .nav-right { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .eyebrow { padding: 5px 5px 5px 14px; }
html[dir="rtl"] .section-label { padding: 5px 5px 5px 14px; }
html[dir="rtl"] .btn { padding: 0 22px 0 6px; }
html[dir="rtl"] .btn-ghost { padding: 0 22px; }
html[dir="rtl"] .btn-sm { padding-left: 6px; padding-right: 18px; }
html[dir="rtl"] .btn-ghost.btn-sm { padding: 0 18px; }
html[dir="rtl"] .btn > .i { margin-right: 0; margin-left: 16px; }
html[dir="rtl"] .hero-stats { padding-left: 0; padding-right: 28px; border-left: 0; border-right: 1px solid var(--line-2); }
html[dir="rtl"] .stat { border-left: 0; border-right: 1px solid var(--line-2); }
html[dir="rtl"] .stat:first-child { border-right: 0; padding-right: 0; padding-left: clamp(16px, 2.4vw, 32px); }
html[dir="rtl"] .field select { padding-right: 16px; padding-left: 42px; background-position: left 16px center; }
html[dir="rtl"] .sc-chip { padding: 10px 10px 10px 14px; }
html[dir="rtl"] .sc-chip--concept { padding: 10px 14px; align-items: flex-end; }
/* Showcase: mirror the stage so the phone covers the photo, not the menu text */
html[dir="rtl"] .showcase-inner {
  background:
    radial-gradient(60% 70% at 15% 10%, rgba(255, 90, 31, 0.16), transparent 70%),
    radial-gradient(120% 90% at 50% 0%, #ffffff 0%, #f1f0ec 62%, #e9e7e2 100%);
}
html[dir="rtl"] .sc-browser { left: auto; right: 6%; }
html[dir="rtl"] .sc-phone { right: auto; left: 8%; }
html[dir="rtl"] .sc-chip--orders { left: auto; right: 2.5%; }
html[dir="rtl"] .sc-chip--table { left: auto; right: 43%; }
html[dir="rtl"] .sc-chip--concept { right: auto; left: 3%; }
html[dir="rtl"] .case-badge { left: auto; right: 16px; }
html[dir="rtl"] .process-line { left: auto; right: 28px; }
html[dir="rtl"] .step-num { left: auto; right: 0; }
html[dir="rtl"] .process-line i { transform-origin: 100% 50%; }
html[dir="rtl"] .ind-tab .ind-go { margin-left: 0; margin-right: auto; transform: translateX(6px); }
html[dir="rtl"] .ind-tab[aria-selected="true"] .ind-go { transform: none; }
html[dir="rtl"] .contact-mail { background-position: 100% 100%; }

/* Example designs and industry apps are written in Dari too: Dari letters, no slanted text,
   and mirror whatever the English layout places with left/right */
html[dir="rtl"] :is(.case-media, .ind-visual) { --font-serif: "Vazirmatn", ui-serif, serif; }
html[dir="rtl"] :is(.case-media, .ind-visual) * { font-style: normal; }
html[dir="rtl"] :is(.case-media--napoli, .case-media--smile) .cm-browser { left: auto; right: 8%; }
html[dir="rtl"] :is(.case-media--glow, .case-media--petal) .cm-browser { left: auto; right: 7%; }
html[dir="rtl"] .sno-cart { border-left: 0; border-right: 1px solid rgba(31, 58, 46, 0.08); }
html[dir="rtl"] .ffc-card { text-align: right; }
html[dir="rtl"] :is(.gs-photo, .scd-photo) { right: auto; left: 0; }
html[dir="rtl"] .gs-widget { left: auto; right: 0; }
html[dir="rtl"] .scd-doc { left: auto; right: 0; padding: 0.8cqw 0.8cqw 0.8cqw 1.6cqw; }
html[dir="rtl"] .scd-widget { left: auto; right: -2%; }
html[dir="rtl"] .it-tag { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .it-qr { right: auto; left: 6%; }
html[dir="rtl"] .it-feature > span { left: auto; right: 4cqw; }
html[dir="rtl"] .it-class { padding: 2.2cqw 2.2cqw 2.2cqw 3cqw; }
html[dir="rtl"] .pss-heart { right: auto; left: 0.9cqw; }
html[dir="rtl"] .pss-bag b { right: auto; left: -0.9cqw; }

/* The hero light is mirrored: the deepest colour sits top right, the streaks sweep in from the top left */
html[dir="rtl"] .hero {
  background:
    radial-gradient(48% 620px at 100% 0%, #ffb084, rgba(255, 176, 132, 0)),
    radial-gradient(60% 720px at 0% 0%, #ffc7a6, rgba(255, 199, 166, 0)),
    radial-gradient(50% 420px at 82% 1000px, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0)),
    linear-gradient(180deg, #ffd2b8 0, #ffe0cf 380px, #ffece2 700px, #fff6f1 960px, #fff 1300px);
}
html[dir="rtl"] .hero-light { right: auto; left: 0; scale: -1 1; transform-origin: 50% 0; }

/* Arrows point the way you read: right to left */
html[dir="rtl"] .btn .i, html[dir="rtl"] .link-arrow .i, html[dir="rtl"] .mm-link .i,
html[dir="rtl"] .svc-arrow .i, html[dir="rtl"] .ind-go .i { transform: scaleX(-1); }
html[dir="rtl"] .btn:hover > .i { transform: scaleX(-1) translateX(3px); }
html[dir="rtl"] .btn:hover .btn-icon .i { animation: arrow-loop-rtl 0.55s var(--ease); }
html[dir="rtl"] .svc:hover .svc-arrow { transform: rotate(-45deg); }
@keyframes arrow-loop-rtl {
  0% { transform: scaleX(-1) translateX(0); }
  45% { transform: scaleX(-1) translateX(160%); }
  46% { transform: scaleX(-1) translateX(-160%); }
  100% { transform: scaleX(-1) translateX(0); }
}

/* ==========================================================================
   Dastarkhan: the Afghan restaurant concept in the hero (Dari, RTL)
   ========================================================================== */
.dk {
  aspect-ratio: 16 / 10.2; padding: 2.2cqw 3.4cqw 2.6cqw;
  display: flex; flex-direction: column;
  background: #3b1f2b; color: #fbf3e4; line-height: 1.5;
  background-image: radial-gradient(circle at 50% 50%, transparent 0 1.2cqw, rgba(251, 243, 228, 0.05) 1.25cqw 1.35cqw, transparent 1.4cqw);
  background-size: 5cqw 5cqw;
}
.dk-nav { display: flex; align-items: center; justify-content: space-between; font-size: 1.3cqw; }
.dk-logo { display: inline-flex; align-items: center; gap: 0.8cqw; font-size: 2.2cqw; font-weight: 800; }
.dk-logo i {
  width: 2.2cqw; height: 2.2cqw; border-radius: 0.6cqw; background: #e3a72f;
  clip-path: polygon(50% 0, 61% 35%, 100% 50%, 61% 65%, 50% 100%, 39% 65%, 0 50%, 39% 35%);
}
.dk-links { display: flex; gap: 2.4cqw; opacity: 0.8; }
.dk-links i { font-style: normal; }
.dk-btn {
  display: inline-flex; align-items: center; height: 3.3cqw; padding: 0 1.7cqw;
  border-radius: 99px; background: #e3a72f; color: #2a1e22; font-size: 1.25cqw; font-weight: 700;
}
.dk-hero { flex: 1; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 2.4cqw; }
.dk-copy { display: flex; flex-direction: column; align-items: flex-start; }
.dk-kicker { font-size: 1.15cqw; color: #e3a72f; }
.dk-title { margin: 1cqw 0 1.4cqw; font-size: 4.4cqw; font-weight: 800; line-height: 1.3; }
.dk-title em { color: #e3a72f; }
.dk-p { max-width: 30cqw; font-size: 1.35cqw; line-height: 1.75; color: rgba(251, 243, 228, 0.78); }
.dk-ctas { display: flex; gap: 1cqw; margin-top: 2.2cqw; }
.dk-btn--ghost { background: transparent; color: #fbf3e4; box-shadow: inset 0 0 0 1px rgba(251, 243, 228, 0.35); }
.dk-visual { position: relative; aspect-ratio: 1; width: 90%; justify-self: center; }
.dk-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 60%;
  border-radius: 2cqw; box-shadow: 0 2.4cqw 4cqw -1.6cqw rgba(0, 0, 0, 0.5);
}
.dk-badge {
  position: absolute; right: -4%; bottom: 8%;
  display: flex; align-items: center; gap: 0.7cqw;
  padding: 1cqw 1.4cqw; border-radius: 1.4cqw; background: #fbf3e4; color: #2a1e22;
  font-size: 1.15cqw; box-shadow: 0 1.4cqw 3cqw -1cqw rgba(0, 0, 0, 0.4);
}
.dk-badge b { font-size: 1.45cqw; }
.dk-badge .i { color: #2f9e5b; font-size: 1.4cqw; }
.dk-badge small { color: #8b7d76; }
.dk-strip { display: flex; gap: 1.4cqw; }
.dk-item {
  flex: 1; display: flex; align-items: center; gap: 1.1cqw;
  padding: 0.9cqw; border-radius: 1.4cqw; background: rgba(251, 243, 228, 0.08);
  font-size: 1.2cqw; box-shadow: inset 0 0 0 1px rgba(251, 243, 228, 0.1);
}
.dk-item img { width: 4.2cqw; height: 4.2cqw; flex-shrink: 0; border-radius: 0.9cqw; object-fit: cover; }
.dk-item > span { display: flex; flex-direction: column; line-height: 1.5; }
.dk-item b { font-weight: 700; }
.dk-item small { opacity: 0.7; }
.dk-item i {
  margin-right: auto; display: grid; place-items: center; width: 2.6cqw; height: 2.6cqw;
  border-radius: 50%; background: #e3a72f; color: #2a1e22; font-style: normal; font-size: 1.5cqw;
}

/* The ordering app on the phone */
.dkp { flex: 1; display: flex; flex-direction: column; gap: 2.6cqw; padding: 1cqw 5cqw 5cqw; line-height: 1.5; }
.dkp-cover { position: relative; height: 34cqw; margin: 0 -1cqw 0.6cqw; border-radius: 5cqw; overflow: hidden; flex-shrink: 0; }
.dkp-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dkp-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.75)); }
.dkp-cover-info { position: absolute; left: 3.5cqw; right: 3.5cqw; bottom: 3cqw; z-index: 1; display: flex; align-items: center; gap: 2.6cqw; color: #fff; }
.dkp-logo {
  display: grid; place-items: center; flex-shrink: 0; width: 10cqw; height: 10cqw; border-radius: 3cqw;
  background: #e3a72f; color: #2a1e22; font-weight: 800; font-size: 5cqw;
}
.dkp-cover-info strong { display: block; font-size: 4.6cqw; font-weight: 800; }
.dkp-cover-info small { display: block; font-size: 3cqw; color: rgba(255, 255, 255, 0.8); }
.dkp-chips { display: flex; gap: 1.6cqw; }
.dkp-chips span { padding: 1.2cqw 3.2cqw; border-radius: 99px; background: #f1ebe2; font-size: 3.2cqw; font-weight: 600; color: #5c4a44; }
.dkp-chips .is-on { background: #3b1f2b; color: #fbf3e4; }
.dkp-item {
  display: flex; align-items: center; gap: 3cqw; padding: 2cqw 2.2cqw 2cqw 3.4cqw;
  border-radius: 4cqw; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 3.4cqw;
}
.dkp-item img { width: 11cqw; height: 11cqw; flex-shrink: 0; border-radius: 3cqw; object-fit: cover; }
.dkp-item strong { display: block; font-weight: 700; }
.dkp-item small { display: block; font-size: 2.9cqw; color: var(--muted); }
.dkp-item b { margin-right: auto; font-weight: 700; white-space: nowrap; }
.dkp-bar {
  margin-top: auto; display: flex; align-items: center; gap: 2.4cqw; height: 12cqw; padding: 0 2.2cqw 0 4cqw;
  border-radius: 99px; background: #3b1f2b; color: #fbf3e4; font-size: 3.4cqw; font-weight: 600;
}
.dkp-bar i {
  display: grid; place-items: center; width: 7.6cqw; height: 7.6cqw; border-radius: 50%;
  background: #e3a72f; color: #2a1e22; font-style: normal; font-weight: 800;
}
.dkp-bar b { margin-right: auto; }

/* ---------- Small screens ---------- */
@media (max-width: 760px) {
  html[dir="rtl"] .hero-stats { padding-right: 0; border-right: 0; }
  html[dir="rtl"] .nav-inner { padding: 0 12px 0 8px; }
  html[dir="rtl"] .hero-light { left: -22vw; }
  html[dir="rtl"] .sc-chip--table { right: 4%; }
}
@media (max-width: 960px) {
  html[dir="rtl"] .stat:nth-child(3) { border-right: 0; padding-right: 0; padding-left: clamp(16px, 2.4vw, 32px); }
}
@media (max-width: 560px) {
  html[dir="rtl"] .hero-title { font-size: calc((100vw - 32px) / 12.6); }
}

/* ==========================================================================
   Dari-only industry apps: hotel, real estate, hospital, company
   ========================================================================== */
/* Hotel */
.ap--hotels { --gold: #c9a15b; background: #f7f3ee; color: #1d2a3a; }
.hot-hero { position: absolute; inset: 0 0 auto; height: 70cqw; }
.hot-hero img { width: 100%; height: 100%; }
.hot-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 45%); }
.hot-actions { position: absolute; top: 15.5cqw; left: 5.5cqw; right: 5.5cqw; z-index: 2; display: flex; justify-content: space-between; }
.hot-actions span { display: grid; place-items: center; width: 9cqw; height: 9cqw; border-radius: 50%; background: rgba(255, 255, 255, 0.92); font-size: 4cqw; }
.hot-sheet { position: relative; z-index: 1; margin-top: 58cqw; padding: 5.4cqw 5.5cqw 0; border-radius: 8cqw 8cqw 0 0; background: #f7f3ee; }
.hot-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 2cqw; }
.hot-head strong { display: block; font-size: 6.2cqw; font-weight: 800; line-height: 1.25; }
.hot-head small { display: flex; align-items: center; gap: 1cqw; margin-top: 0.6cqw; font-size: 2.8cqw; color: rgba(29, 42, 58, 0.55); }
.hot-rate { display: flex; align-items: center; gap: 0.8cqw; padding: 1.4cqw 2.4cqw; border-radius: 99px; background: #fff; font-size: 2.9cqw; font-weight: 700; }
.hot-rate .i { color: var(--gold); font-size: 2.8cqw; }
.hot-dates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; margin-top: 3.6cqw; }
.hot-dates span { padding: 2cqw 2.4cqw; border-radius: 3.4cqw; background: #fff; }
.hot-dates small { display: block; font-size: 2.4cqw; color: rgba(29, 42, 58, 0.5); }
.hot-dates b { display: block; margin-top: 0.3cqw; font-size: 3cqw; }
.hot-label { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4cqw; }
.hot-label b { font-size: 3.6cqw; }
.hot-label small { font-size: 2.8cqw; color: rgba(29, 42, 58, 0.5); }
.hot-rooms { display: flex; flex-direction: column; gap: 2cqw; margin-top: 2.2cqw; }
.hot-room { display: flex; align-items: center; gap: 3cqw; padding: 2cqw; border-radius: 4.4cqw; background: #fff; }
.hot-room.is-on { box-shadow: inset 0 0 0 0.5cqw var(--gold); }
.hot-room img { flex-shrink: 0; width: 14cqw; height: 11.5cqw; border-radius: 3cqw; }
.hot-room span { flex: 1; min-width: 0; }
.hot-room b { display: block; font-size: 3.3cqw; }
.hot-room small { display: block; font-size: 2.6cqw; color: rgba(29, 42, 58, 0.55); }
.hot-room em { flex-shrink: 0; font-size: 3.2cqw; font-weight: 800; }
.hot-bar {
  position: absolute; left: 4cqw; right: 4cqw; bottom: 4cqw; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 2cqw;
  padding: 2.2cqw 4.4cqw 2.2cqw 2.2cqw; border-radius: 99px; background: #1d2a3a; color: #fff;
}
.hot-bar small { display: block; font-size: 2.4cqw; opacity: 0.7; }
.hot-bar b { font-size: 4cqw; font-weight: 800; }
.hot-bar em { display: flex; align-items: center; gap: 1.2cqw; padding: 2.4cqw 3.8cqw; border-radius: 99px; background: var(--gold); color: #1d2a3a; font-size: 3.1cqw; font-weight: 700; }
.hot-bar em .i { transform: scaleX(-1); }

/* Real estate */
.ap--realestate { --green: #1f6f4a; background: #f4f7f4; color: #17261d; }
.re-top { display: flex; align-items: center; justify-content: space-between; padding: 1cqw 5.5cqw 0; }
.re-top small { display: block; font-size: 2.6cqw; color: rgba(23, 38, 29, 0.5); }
.re-top b { display: block; font-size: 4.6cqw; font-weight: 800; }
.re-bell { display: grid; place-items: center; width: 9.4cqw; height: 9.4cqw; border-radius: 50%; background: #fff; font-size: 4.2cqw; }
.re-title { margin: 3cqw 5.5cqw 0; font-size: 6.4cqw; font-weight: 800; line-height: 1.3; }
.re-title em { color: var(--green); }
.re-search { display: flex; align-items: center; gap: 2cqw; margin: 3cqw 5.5cqw 0; height: 11cqw; padding: 0 3.4cqw 0 1.6cqw; border-radius: 99px; background: #fff; box-shadow: 0 0 0 0.3cqw rgba(23, 38, 29, 0.06); font-size: 2.8cqw; color: rgba(23, 38, 29, 0.5); }
.re-search > .i { font-size: 4cqw; color: var(--green); }
.re-search > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.re-search > i { display: grid; place-items: center; width: 8cqw; height: 8cqw; border-radius: 50%; background: var(--green); color: #fff; font-size: 3.6cqw; }
.re-seg { display: grid; grid-template-columns: repeat(3, 1fr); margin: 3cqw 5.5cqw 0; padding: 1cqw; border-radius: 99px; background: #e6ede7; font-size: 3cqw; text-align: center; }
.re-seg span { padding: 1.7cqw 0; border-radius: 99px; color: rgba(23, 38, 29, 0.6); }
.re-seg .is-on { background: #fff; color: #17261d; font-weight: 700; box-shadow: 0 0.4cqw 1.2cqw rgba(0, 0, 0, 0.08); }
.re-card { margin: 3.2cqw 5.5cqw 0; padding: 2.2cqw; border-radius: 5cqw; background: #fff; }
.re-media { position: relative; height: 38cqw; border-radius: 3.6cqw; overflow: hidden; }
.re-media img { width: 100%; height: 100%; }
.re-tag { position: absolute; top: 2cqw; right: 2cqw; padding: 0.8cqw 2.4cqw; border-radius: 99px; background: var(--green); color: #fff; font-size: 2.4cqw; font-weight: 700; }
.re-fav { position: absolute; top: 2cqw; left: 2cqw; display: grid; place-items: center; width: 7.6cqw; height: 7.6cqw; border-radius: 50%; background: #fff; color: #d14a5a; font-size: 3.4cqw; }
.re-info { display: flex; justify-content: space-between; align-items: flex-start; gap: 2cqw; margin-top: 2.4cqw; padding: 0 1cqw; }
.re-info b { display: block; font-size: 3.5cqw; }
.re-info small { display: flex; align-items: center; gap: 0.8cqw; font-size: 2.6cqw; color: rgba(23, 38, 29, 0.55); }
.re-info em { flex-shrink: 0; font-size: 3.5cqw; font-weight: 800; color: var(--green); }
.re-info em small { display: inline; font-size: 2.3cqw; font-weight: 500; }
.re-meta { display: flex; gap: 1.6cqw; margin-top: 2cqw; padding: 0 1cqw 1cqw; }
.re-meta span { padding: 1.1cqw 2.4cqw; border-radius: 99px; background: #f1f5f1; font-size: 2.5cqw; font-weight: 600; }
.re-row { display: flex; align-items: center; gap: 3cqw; margin: 2.4cqw 5.5cqw 0; padding: 2.2cqw; border-radius: 4.4cqw; background: #fff; }
.re-row img { flex-shrink: 0; width: 13cqw; height: 13cqw; border-radius: 3cqw; }
.re-row span { flex: 1; min-width: 0; }
.re-row b { display: block; font-size: 3.2cqw; }
.re-row small { display: block; font-size: 2.6cqw; color: rgba(23, 38, 29, 0.55); }
.re-row em { flex-shrink: 0; font-size: 3.2cqw; font-weight: 800; color: var(--green); }

/* Hospital */
.ap--hospitals { --teal: #0f8b8d; background: #f1f6f8; color: #0f2530; }
.hos-top { display: flex; align-items: center; justify-content: space-between; padding: 1cqw 5.5cqw 0; }
.hos-top small { display: block; font-size: 2.7cqw; color: rgba(15, 37, 48, 0.5); }
.hos-top b { display: block; font-size: 5cqw; font-weight: 800; }
.hos-bell { position: relative; display: grid; place-items: center; width: 9.4cqw; height: 9.4cqw; border-radius: 50%; background: #fff; font-size: 4.2cqw; }
.hos-bell i { position: absolute; top: 2.3cqw; right: 2.5cqw; width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: #ff5a5f; }
.hos-queue { margin: 3.4cqw 5.5cqw 0; padding: 4cqw; border-radius: 6cqw; background: linear-gradient(150deg, #13a3a5, #0b6466); color: #fff; }
.hos-q-head { display: flex; justify-content: space-between; align-items: center; }
.hos-q-head small { font-size: 2.7cqw; opacity: 0.82; }
.hos-q-head span { display: flex; align-items: center; gap: 1cqw; padding: 1cqw 2.2cqw; border-radius: 99px; background: rgba(255, 255, 255, 0.18); font-size: 2.4cqw; font-weight: 700; }
.hos-q-head span::before { content: ""; width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #7dfcc6; }
.hos-q-main { display: flex; align-items: center; gap: 3cqw; margin-top: 1.6cqw; }
.hos-q-main strong { font-size: 15cqw; font-weight: 800; line-height: 1.05; }
.hos-q-main span { flex: 1; min-width: 0; }
.hos-q-main b { display: block; font-size: 3.2cqw; }
.hos-q-main small { display: block; font-size: 2.6cqw; opacity: 0.8; }
.hos-q-main img { flex-shrink: 0; width: 11cqw; height: 11cqw; border-radius: 50%; box-shadow: 0 0 0 0.7cqw rgba(255, 255, 255, 0.3); }
.hos-q-bar { height: 1.4cqw; margin-top: 2.6cqw; border-radius: 99px; background: rgba(255, 255, 255, 0.22); }
.hos-q-bar i { display: block; width: 75%; height: 100%; border-radius: inherit; background: #fff; }
.hos-q-note { display: block; margin-top: 1.6cqw; font-size: 2.6cqw; opacity: 0.85; }
.hos-label { display: flex; justify-content: space-between; align-items: baseline; padding: 4.2cqw 5.5cqw 2.2cqw; }
.hos-label b { font-size: 3.6cqw; }
.hos-label small { font-size: 2.8cqw; color: rgba(15, 37, 48, 0.5); }
.hos-deps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; margin: 0 5.5cqw; }
.hos-deps span { display: flex; flex-direction: column; align-items: center; gap: 1.4cqw; padding: 2.8cqw 1cqw; border-radius: 4cqw; background: #fff; font-size: 2.6cqw; font-weight: 600; text-align: center; line-height: 1.3; }
.hos-deps i { display: grid; place-items: center; width: 9cqw; height: 9cqw; border-radius: 50%; background: #e3f3f3; color: var(--teal); font-size: 4.2cqw; }
.hos-lab { display: flex; align-items: center; gap: 3cqw; margin: 3cqw 5.5cqw 0; padding: 3cqw; border-radius: 4.6cqw; background: #fff; }
.hos-lab-ico { display: grid; place-items: center; flex-shrink: 0; width: 9.6cqw; height: 9.6cqw; border-radius: 3cqw; background: #fff3e6; color: #e8770e; font-size: 4.2cqw; }
.hos-lab > span:nth-child(2) { flex: 1; min-width: 0; }
.hos-lab b { display: block; font-size: 3.1cqw; }
.hos-lab small { display: block; font-size: 2.5cqw; color: rgba(15, 37, 48, 0.5); }
.hos-lab em { flex-shrink: 0; padding: 1.6cqw 3.2cqw; border-radius: 99px; background: var(--teal); color: #fff; font-size: 2.8cqw; font-weight: 700; }

/* Company */
.ap--companies { --mint: #34d399; background: #0f1115; color: #fff; }
.co-top { display: flex; align-items: center; justify-content: space-between; padding: 1cqw 5.5cqw 0; }
.co-top small { display: block; font-size: 2.6cqw; color: rgba(255, 255, 255, 0.5); }
.co-top b { display: block; font-size: 4.8cqw; font-weight: 800; }
.co-av { display: grid; place-items: center; width: 9.4cqw; height: 9.4cqw; border-radius: 50%; background: var(--mint); color: #0f1115; font-size: 3.8cqw; font-weight: 800; }
.co-hero { margin: 3.4cqw 5.5cqw 0; padding: 4cqw; border-radius: 6cqw; background: #181b22; box-shadow: inset 0 0 0 0.3cqw rgba(255, 255, 255, 0.06); }
.co-hero small { font-size: 2.7cqw; color: rgba(255, 255, 255, 0.55); }
.co-hero-row { display: flex; align-items: baseline; justify-content: space-between; gap: 2cqw; margin-top: 0.4cqw; }
.co-hero strong { font-size: 7.4cqw; font-weight: 800; }
.co-up { padding: 1cqw 2.2cqw; border-radius: 99px; background: rgba(52, 211, 153, 0.15); color: var(--mint); font-size: 2.6cqw; font-weight: 700; }
.co-chart { display: flex; align-items: flex-end; gap: 1.6cqw; height: 16cqw; margin-top: 3cqw; }
.co-chart i { flex: 1; border-radius: 1.2cqw 1.2cqw 0.4cqw 0.4cqw; background: rgba(255, 255, 255, 0.12); }
.co-chart i.is-on { background: var(--mint); }
.co-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; margin: 2.6cqw 5.5cqw 0; }
.co-kpis span { padding: 2.6cqw 2.4cqw; border-radius: 4cqw; background: #181b22; }
.co-kpis small { display: block; font-size: 2.3cqw; color: rgba(255, 255, 255, 0.5); }
.co-kpis b { display: block; margin-top: 0.4cqw; font-size: 4.2cqw; font-weight: 800; }
.co-label { display: flex; justify-content: space-between; align-items: baseline; padding: 4.2cqw 5.5cqw 2.2cqw; }
.co-label b { font-size: 3.6cqw; }
.co-label small { font-size: 2.8cqw; color: rgba(255, 255, 255, 0.5); }
.co-list { display: flex; flex-direction: column; gap: 2cqw; margin: 0 5.5cqw; }
.co-row { display: flex; align-items: center; gap: 2.6cqw; padding: 2.4cqw; border-radius: 4cqw; background: #181b22; }
.co-row > i { display: grid; place-items: center; flex-shrink: 0; width: 9cqw; height: 9cqw; border-radius: 2.8cqw; background: rgba(255, 255, 255, 0.08); font-style: normal; font-size: 3.4cqw; font-weight: 800; }
.co-row > span { flex: 1; min-width: 0; }
.co-row b { display: block; font-size: 3.1cqw; }
.co-row small { display: block; font-size: 2.5cqw; color: rgba(255, 255, 255, 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-row em { flex-shrink: 0; padding: 1.2cqw 2.4cqw; border-radius: 99px; font-size: 2.5cqw; font-weight: 700; }
.co-row .is-way { background: rgba(251, 146, 60, 0.15); color: #fdba74; }
.co-row .is-done { background: rgba(52, 211, 153, 0.15); color: var(--mint); }
.co-row .is-new { background: rgba(129, 140, 248, 0.18); color: #a5b4fc; }

/* ==========================================================================
   Dari-only example designs: hotel site, real estate site, hospital app, company panel
   ========================================================================== */
:is(.case-media--hotel, .case-media--estate, .case-media--company, .case-media--special) .cm-browser { position: absolute; right: 8%; top: 11%; width: 100%; }

/* Hotel website */
.case-media--hotel { background: radial-gradient(90% 80% at 85% 0%, #f3e7d3, #e0caa4); }
.htl { position: relative; aspect-ratio: 16 / 10; display: flex; flex-direction: column; padding: 2.2cqw 3.2cqw 2.6cqw; overflow: hidden; color: #fff; font-size: 1.3cqw; line-height: 1.4; }
.htl-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.htl::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15, 20, 30, 0.6), rgba(15, 20, 30, 0.15) 42%, rgba(15, 20, 30, 0.7)); }
.htl > :not(.htl-photo) { position: relative; z-index: 2; }
.htl-nav { display: flex; align-items: center; justify-content: space-between; }
.htl-logo { display: inline-flex; align-items: center; gap: 0.8cqw; font-size: 2cqw; font-weight: 800; }
.htl-logo i { width: 2.2cqw; height: 2.2cqw; background: #c9a15b; clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); }
.htl-links { display: flex; gap: 2.4cqw; opacity: 0.85; }
.htl-links i { font-style: normal; }
.htl-btn { display: inline-flex; align-items: center; height: 3.3cqw; padding: 0 1.8cqw; border-radius: 99px; background: #c9a15b; color: #1d2a3a; font-size: 1.25cqw; font-weight: 700; }
.htl-copy { margin-top: auto; max-width: 48cqw; }
.htl-copy small { font-size: 1.15cqw; color: #f3e7d3; }
.htl-title { display: block; margin: 0.6cqw 0; font-size: 4.2cqw; font-weight: 800; line-height: 1.3; }
.htl-title em { color: #e9c98c; }
.htl-p { display: block; max-width: 40cqw; font-size: 1.3cqw; opacity: 0.85; }
.htl-book { display: flex; align-items: center; gap: 0.6cqw; margin-top: 2cqw; padding: 0.8cqw; border-radius: 1.8cqw; background: rgba(255, 255, 255, 0.95); color: #1d2a3a; }
.htl-book span { flex: 1; padding: 0.3cqw 1.4cqw; }
.htl-book span + span { border-right: 1px solid rgba(29, 42, 58, 0.12); }
.htl-book small { display: block; font-size: 1cqw; color: rgba(29, 42, 58, 0.55); }
.htl-book b { display: block; font-size: 1.3cqw; }
.htl-book em { flex-shrink: 0; padding: 1.2cqw 2.2cqw; border-radius: 1.3cqw; background: #1d2a3a; color: #fff; font-style: normal; font-size: 1.3cqw; font-weight: 700; }

/* Real estate website */
.case-media--estate { background: radial-gradient(90% 80% at 15% 100%, #e3efe6, #c4dccb); }
.est { aspect-ratio: 16 / 10; display: flex; flex-direction: column; padding: 2.2cqw 3.2cqw; background: #fbfcfa; color: #17261d; font-size: 1.25cqw; line-height: 1.4; }
.est-nav { display: flex; align-items: center; justify-content: space-between; }
.est-logo { display: inline-flex; align-items: center; gap: 0.8cqw; font-size: 2cqw; font-weight: 800; }
.est-logo i { width: 2.2cqw; height: 2.2cqw; background: #1f6f4a; clip-path: polygon(50% 0, 100% 45%, 100% 100%, 0 100%, 0 45%); }
.est-links { display: flex; gap: 2.4cqw; color: rgba(23, 38, 29, 0.6); }
.est-links i { font-style: normal; }
.est-links .is-on { color: #1f6f4a; font-weight: 700; }
.est-btn { display: inline-flex; align-items: center; height: 3.3cqw; padding: 0 1.8cqw; border-radius: 99px; background: #1f6f4a; color: #fff; font-size: 1.2cqw; font-weight: 700; }
.est-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 3cqw; margin-top: 2.4cqw; }
.est-title { max-width: 38cqw; font-size: 3.3cqw; font-weight: 800; line-height: 1.3; }
.est-title em { color: #1f6f4a; }
.est-search { display: flex; align-items: center; gap: 1cqw; width: 38cqw; height: 4.4cqw; padding: 0 1.4cqw 0 0.6cqw; border-radius: 99px; background: #fff; box-shadow: 0 0 0 1px rgba(23, 38, 29, 0.1), 0 1cqw 2.4cqw -1cqw rgba(23, 38, 29, 0.25); color: rgba(23, 38, 29, 0.5); font-size: 1.15cqw; }
.est-search .i { font-size: 1.5cqw; color: #1f6f4a; }
.est-search em { margin-right: auto; padding: 0.9cqw 1.8cqw; border-radius: 99px; background: #1f6f4a; color: #fff; font-style: normal; font-weight: 700; }
.est-chips { display: flex; gap: 0.8cqw; margin-top: 1.8cqw; }
.est-chips i { padding: 0.5cqw 1.5cqw; border-radius: 99px; box-shadow: inset 0 0 0 1px rgba(23, 38, 29, 0.15); font-style: normal; font-size: 1.1cqw; }
.est-chips .is-on { background: #17261d; color: #fff; box-shadow: none; }
.est-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; margin-top: 1.6cqw; }
.est-card { display: flex; flex-direction: column; gap: 0.2cqw; padding: 1cqw; border-radius: 1.8cqw; background: #fff; box-shadow: 0 0 0 1px rgba(23, 38, 29, 0.07); }
.est-media { position: relative; display: block; aspect-ratio: 4 / 3.2; margin-bottom: 0.7cqw; overflow: hidden; border-radius: 1.2cqw; }
.est-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.est-tag { position: absolute; top: 0.8cqw; right: 0.8cqw; padding: 0.2cqw 1cqw; border-radius: 99px; background: #1f6f4a; color: #fff; font-style: normal; font-size: 1cqw; font-weight: 700; }
.est-card b { font-size: 1.6cqw; font-weight: 800; color: #1f6f4a; }
.est-name { font-size: 1.2cqw; font-weight: 600; }
.est-meta { display: flex; gap: 1.2cqw; font-size: 1.05cqw; color: rgba(23, 38, 29, 0.55); }
.est-meta i { font-style: normal; }

/* Hospital app: two phones over a photo */
.case-media--hospital { background: #0f2a30; }
.case-media--hospital::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8, 30, 34, 0.4), rgba(8, 30, 34, 0.62)); }
.case-media--hospital .phone { position: absolute; z-index: 1; width: 33%; }
.cm-hsp-a { right: 13%; top: 10%; }
.cm-hsp-b { right: 53%; top: 20%; }
.phone-screen--teal { background: linear-gradient(180deg, #13a3a5, #0b5e60); color: #fff; }
.hsp { flex: 1; display: flex; flex-direction: column; gap: 2.2cqw; padding: 1cqw 6cqw 6cqw; }
.hsp-brand { display: inline-flex; align-items: center; gap: 1.6cqw; font-size: 3.2cqw; font-weight: 700; color: #0f8b8d; }
.hsp-brand i { width: 4.6cqw; height: 4.6cqw; background: #0f8b8d; clip-path: polygon(35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%, 0 35%, 35% 35%); }
.hsp-h { font-size: 6.2cqw; font-weight: 800; }
.hsp-label { margin-top: 0.6cqw; font-size: 3cqw; font-weight: 700; color: var(--muted-2); }
.hsp-deps { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8cqw; }
.hsp-deps span { display: flex; align-items: center; gap: 1.6cqw; padding: 2.2cqw; border-radius: 3.4cqw; background: #f1f6f8; font-size: 3.1cqw; font-weight: 600; }
.hsp-deps .i { font-size: 3.8cqw; color: #0f8b8d; }
.hsp-deps .is-on { background: #0f8b8d; color: #fff; }
.hsp-deps .is-on .i { color: #fff; }
.hsp-doc { display: flex; align-items: center; gap: 2.6cqw; padding: 2cqw; border-radius: 3.6cqw; box-shadow: inset 0 0 0 0.3cqw #e3ecef; }
.hsp-doc.is-on { box-shadow: inset 0 0 0 0.55cqw #0f8b8d; }
.hsp-doc img { flex-shrink: 0; width: 10cqw; height: 10cqw; border-radius: 50%; object-fit: cover; }
.hsp-doc b { display: block; font-size: 3.2cqw; }
.hsp-doc small { display: block; font-size: 2.6cqw; color: var(--muted); }
.hsp-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6cqw; }
.hsp-slots span { display: grid; place-items: center; height: 8cqw; border-radius: 2.6cqw; background: #f1f6f8; font-size: 3cqw; font-weight: 600; }
.hsp-slots .is-off { opacity: 0.4; text-decoration: line-through; }
.hsp-slots .is-on { background: #0f8b8d; color: #fff; }
.hsp-cta { margin-top: auto; display: grid; place-items: center; height: 11cqw; border-radius: 99px; background: #0f2530; color: #fff; font-size: 3.6cqw; font-weight: 700; }
.hsq { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 4cqw 7cqw 7cqw; }
.hsq > small { font-size: 3.4cqw; opacity: 0.8; }
.hsq strong { font-size: 30cqw; font-weight: 800; line-height: 1.15; }
.hsq-dep { padding: 1.4cqw 3.4cqw; border-radius: 99px; background: rgba(255, 255, 255, 0.16); font-size: 3cqw; font-weight: 600; }
.hsq-card { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; width: 100%; margin-top: 6cqw; }
.hsq-card > span { padding: 3cqw; border-radius: 4cqw; background: rgba(255, 255, 255, 0.12); }
.hsq-card small { display: block; font-size: 2.6cqw; opacity: 0.75; }
.hsq-card b { display: block; font-size: 4.4cqw; }
.hsq-doc { display: flex; align-items: center; gap: 2.6cqw; width: 100%; margin-top: 2cqw; padding: 2.6cqw; border-radius: 4cqw; background: #fff; color: #0f2530; text-align: right; }
.hsq-doc img { flex-shrink: 0; width: 10cqw; height: 10cqw; border-radius: 50%; object-fit: cover; }
.hsq-doc b { display: block; font-size: 3.2cqw; }
.hsq-doc small { display: block; font-size: 2.6cqw; color: var(--muted); }
.hsq-note { margin-top: auto; font-size: 2.8cqw; opacity: 0.85; }

/* Company panel */
.case-media--company { background: radial-gradient(90% 80% at 85% 0%, #e7e9ff, #c6ccf6); }
.cdb { aspect-ratio: 16 / 10; display: grid; grid-template-columns: 17cqw 1fr; background: #f5f6fa; color: #141826; font-size: 1.2cqw; line-height: 1.35; }
.cdb-side { display: flex; flex-direction: column; gap: 0.5cqw; padding: 2.2cqw 1.6cqw; background: #141826; color: rgba(255, 255, 255, 0.7); }
.cdb-logo { display: flex; align-items: center; gap: 0.9cqw; margin-bottom: 1.8cqw; color: #fff; font-size: 1.6cqw; font-weight: 800; }
.cdb-logo i { display: grid; place-items: center; width: 2.6cqw; height: 2.6cqw; border-radius: 0.8cqw; background: #34d399; color: #141826; font-style: normal; font-size: 1.3cqw; }
.cdb-nav { display: flex; align-items: center; gap: 0.9cqw; padding: 0.9cqw 1cqw; border-radius: 1cqw; font-size: 1.2cqw; }
.cdb-nav .i { font-size: 1.4cqw; }
.cdb-nav.is-on { background: rgba(52, 211, 153, 0.14); color: #34d399; font-weight: 700; }
.cdb-main { display: flex; flex-direction: column; gap: 1.3cqw; min-width: 0; padding: 2.2cqw 2.6cqw; }
.cdb-top { display: flex; align-items: center; gap: 1.2cqw; }
.cdb-top b { font-size: 2cqw; font-weight: 800; }
.cdb-top small { color: rgba(20, 24, 38, 0.5); }
.cdb-search { display: flex; align-items: center; gap: 0.8cqw; width: 18cqw; height: 3cqw; margin-right: auto; padding: 0 1.2cqw; border-radius: 99px; background: #fff; box-shadow: 0 0 0 1px rgba(20, 24, 38, 0.08); color: rgba(20, 24, 38, 0.45); }
.cdb-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2cqw; }
.cdb-kpis > span { padding: 1.3cqw 1.4cqw; border-radius: 1.6cqw; background: #fff; box-shadow: 0 0 0 1px rgba(20, 24, 38, 0.06); }
.cdb-kpis small { display: block; font-size: 1cqw; color: rgba(20, 24, 38, 0.5); }
.cdb-kpis b { display: block; margin-top: 0.2cqw; font-size: 1.85cqw; font-weight: 800; }
.cdb-kpis em { display: inline-block; margin-top: 0.3cqw; padding: 0.15cqw 0.8cqw; border-radius: 99px; background: #eef0f6; font-style: normal; font-size: 0.95cqw; font-weight: 700; }
.cdb-kpis em.up { background: #dcfce7; color: #15803d; }
.cdb-kpis em.warn { background: #fff1e6; color: #c2410c; }
.cdb-row { flex: 1; display: grid; grid-template-columns: 1.25fr 1fr; gap: 1.2cqw; min-height: 0; }
.cdb-chart, .cdb-orders { display: flex; flex-direction: column; min-height: 0; padding: 1.3cqw 1.6cqw; border-radius: 1.6cqw; background: #fff; box-shadow: 0 0 0 1px rgba(20, 24, 38, 0.06); }
.cdb-h { display: flex; justify-content: space-between; align-items: baseline; }
.cdb-h b { font-size: 1.3cqw; }
.cdb-h small { font-size: 1cqw; color: rgba(20, 24, 38, 0.45); }
.cdb-bars { display: flex; align-items: flex-end; gap: 1.2cqw; height: 27cqw; margin-top: auto; padding-top: 1cqw; }
.cdb-bars span { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0.5cqw; height: 100%; font-size: 0.95cqw; color: rgba(20, 24, 38, 0.45); }
.cdb-bars i { display: block; width: 100%; height: var(--h); border-radius: 0.6cqw 0.6cqw 0.2cqw 0.2cqw; background: #dfe3f1; }
.cdb-bars .is-on i { background: #34d399; }
.cdb-o { display: flex; align-items: center; gap: 1cqw; padding: 0.9cqw 0; border-top: 1px solid rgba(20, 24, 38, 0.06); }
.cdb-h + .cdb-o { margin-top: 0.5cqw; border-top: 0; }
.cdb-o > i { display: grid; place-items: center; flex-shrink: 0; width: 2.8cqw; height: 2.8cqw; border-radius: 0.9cqw; background: #eef0f6; font-style: normal; font-size: 1.2cqw; font-weight: 800; }
.cdb-o > span { flex: 1; min-width: 0; }
.cdb-o b { display: block; font-size: 1.15cqw; }
.cdb-o small { display: block; font-size: 0.95cqw; color: rgba(20, 24, 38, 0.5); }
.cdb-o em { flex-shrink: 0; padding: 0.3cqw 1cqw; border-radius: 99px; font-style: normal; font-size: 0.95cqw; font-weight: 700; }
.cdb-o .is-way { background: #fff1e6; color: #c2410c; }
.cdb-o .is-done { background: #dcfce7; color: #15803d; }
.cdb-o .is-new { background: #e0e7ff; color: #4338ca; }

/* Wedding hall: a photo of the hall, the booking app and a confirmation ticket */
.case-media--hall { background: #2a1f14; }
.case-media--hall::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(30, 20, 10, 0.2), rgba(30, 20, 10, 0.55)); }
.case-media--hall .phone { position: absolute; z-index: 1; right: 12%; top: 9%; width: 35%; }
.wh { flex: 1; display: flex; flex-direction: column; gap: 2.4cqw; padding: 0 5cqw 6cqw; }
.wh-cover { position: relative; height: 32cqw; margin: 0 -5cqw; overflow: hidden; }
.wh-cover img { width: 100%; height: 100%; object-fit: cover; }
.wh-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.6)); }
.wh-cover-info { position: absolute; right: 5cqw; bottom: 3cqw; z-index: 1; color: #fff; }
.wh-cover-info b { display: block; font-size: 5.6cqw; font-weight: 800; }
.wh-cover-info small { font-size: 2.8cqw; opacity: 0.85; }
.wh-month { display: flex; justify-content: space-between; align-items: center; margin-top: 1cqw; }
.wh-month b { font-size: 4cqw; }
.wh-month span { display: flex; gap: 1.6cqw; }
.wh-month .i { width: 6.4cqw; height: 6.4cqw; padding: 1.5cqw; border-radius: 50%; background: #f4efe6; }
.wh-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1.2cqw; text-align: center; }
.wh-cal b { font-size: 2.6cqw; font-weight: 600; color: var(--muted-2); }
.wh-cal i { display: grid; place-items: center; height: 7.2cqw; border-radius: 2.2cqw; font-style: normal; font-size: 3cqw; font-weight: 600; }
.wh-cal .is-pad { visibility: hidden; }
.wh-cal .is-full { background: #f4efe6; color: rgba(13, 13, 13, 0.3); text-decoration: line-through; }
.wh-cal .is-on { background: #b8893b; color: #fff; }
.wh-legend { display: flex; gap: 3cqw; font-size: 2.5cqw; color: var(--muted); }
.wh-legend span { display: flex; align-items: center; gap: 1cqw; }
.wh-legend i { width: 2.6cqw; height: 2.6cqw; border-radius: 0.8cqw; box-shadow: inset 0 0 0 0.3cqw #e6dccb; }
.wh-legend .is-full { background: #f4efe6; box-shadow: none; }
.wh-legend .is-on { background: #b8893b; box-shadow: none; }
.wh-pack { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; padding: 2.4cqw 3cqw; border-radius: 3.6cqw; box-shadow: inset 0 0 0 0.3cqw #ece4d6; }
.wh-pack.is-on { background: #fbf6ec; box-shadow: inset 0 0 0 0.55cqw #b8893b; }
.wh-pack b { display: block; font-size: 3.2cqw; }
.wh-pack small { display: block; font-size: 2.5cqw; color: var(--muted); }
.wh-pack em { flex-shrink: 0; font-size: 3.2cqw; font-weight: 800; }
.wh-pack em small { display: inline; font-weight: 500; }
.wh-cta { margin-top: auto; display: grid; place-items: center; height: 11cqw; border-radius: 99px; background: #1c1710; color: #fff; font-size: 3.6cqw; font-weight: 700; }
.wh-ticket {
  position: absolute; z-index: 2; left: 7%; bottom: 14%; width: 44%;
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.96); box-shadow: var(--shadow-l); transform: rotate(-3deg);
}
.case:hover .wh-ticket { transform: rotate(-5deg) translateY(-8px); }
.wh-ticket-ico { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: #b8893b; color: #fff; font-size: 16px; }
.wh-ticket b { display: block; font-size: clamp(12px, 1.25vw, 16px); }
.wh-ticket small { display: block; font-size: clamp(10px, 0.9vw, 12px); color: var(--muted); }

/* Specialist clinic website: find a specialist and book */
.case-media--special { background: radial-gradient(90% 80% at 85% 0%, #e3f5f8, #bfe2ea); }
.spc { aspect-ratio: 16 / 10; display: flex; flex-direction: column; padding: 2.2cqw 3.2cqw; background: #fbfdfd; color: #0f2a33; font-size: 1.25cqw; line-height: 1.4; }
.spc-nav { display: flex; align-items: center; justify-content: space-between; }
.spc-logo { display: inline-flex; align-items: center; gap: 0.8cqw; font-size: 1.8cqw; font-weight: 800; }
.spc-logo i { width: 2.2cqw; height: 2.2cqw; background: #0e7490; clip-path: polygon(35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%, 0 35%, 35% 35%); }
.spc-links { display: flex; gap: 2.4cqw; color: rgba(15, 42, 51, 0.6); }
.spc-links i { font-style: normal; }
.spc-btn { display: inline-flex; align-items: center; height: 3.3cqw; padding: 0 1.8cqw; border-radius: 99px; background: #0e7490; color: #fff; font-size: 1.2cqw; font-weight: 700; }
.spc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 3cqw; margin-top: 2.4cqw; }
.spc-copy small { display: block; font-size: 1.15cqw; font-weight: 600; color: #0e7490; }
.spc-title { display: block; font-size: 3.3cqw; font-weight: 800; line-height: 1.3; }
.spc-title em { color: #0e7490; }
.spc-search { display: flex; align-items: center; gap: 1cqw; width: 34cqw; height: 4.4cqw; padding: 0 1.4cqw 0 0.6cqw; border-radius: 99px; background: #fff; box-shadow: 0 0 0 1px rgba(15, 42, 51, 0.1), 0 1cqw 2.4cqw -1cqw rgba(15, 42, 51, 0.25); color: rgba(15, 42, 51, 0.5); font-size: 1.15cqw; }
.spc-search .i { font-size: 1.5cqw; color: #0e7490; }
.spc-search em { margin-right: auto; padding: 0.9cqw 1.8cqw; border-radius: 99px; background: #0e7490; color: #fff; font-style: normal; font-weight: 700; }
.spc-chips { display: flex; gap: 0.8cqw; margin-top: 1.8cqw; }
.spc-chips i { padding: 0.5cqw 1.5cqw; border-radius: 99px; box-shadow: inset 0 0 0 1px rgba(15, 42, 51, 0.15); font-style: normal; font-size: 1.1cqw; }
.spc-chips .is-on { background: #0f2a33; color: #fff; box-shadow: none; }
.spc-grid { display: grid; grid-template-columns: 1fr 1fr 1.05fr; gap: 1.6cqw; margin-top: 1.6cqw; }
.spc-doc { display: flex; flex-direction: column; gap: 0.8cqw; padding: 1.1cqw; border-radius: 1.8cqw; background: #fff; box-shadow: 0 0 0 1px rgba(15, 42, 51, 0.07); }
.spc-doc img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3.1; object-fit: cover; object-position: 50% 25%; border-radius: 1.2cqw; }
.spc-doc-info b { display: block; font-size: 1.45cqw; }
.spc-doc-info small { display: block; font-size: 1.1cqw; color: var(--muted); }
.spc-rate { display: inline-flex; align-items: center; gap: 0.4cqw; font-size: 1.1cqw; font-weight: 700; }
.spc-rate .i { font-size: 1.1cqw; color: #f5a524; }
.spc-next { display: flex; justify-content: space-between; align-items: center; padding: 0.8cqw 1cqw; border-radius: 1cqw; background: #ecf7f9; }
.spc-next small { font-size: 1cqw; color: var(--muted); }
.spc-next b { font-size: 1.15cqw; color: #0e7490; }
.spc-doc em { display: grid; place-items: center; height: 3cqw; border-radius: 99px; background: #0e7490; color: #fff; font-style: normal; font-size: 1.15cqw; font-weight: 700; }
.spc-book { display: flex; flex-direction: column; gap: 1cqw; padding: 1.6cqw; border-radius: 1.8cqw; background: #0f2a33; color: #fff; }
.spc-book > small { font-size: 1.05cqw; opacity: 0.7; }
.spc-book > b { font-size: 1.7cqw; }
.spc-days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6cqw; }
.spc-days i { display: flex; flex-direction: column; align-items: center; padding: 0.7cqw 0; border-radius: 1cqw; background: rgba(255, 255, 255, 0.08); font-style: normal; font-size: 1cqw; }
.spc-days b { font-size: 1.4cqw; }
.spc-days .is-on, .spc-slots .is-on { background: #22b8cf; color: #0f2a33; }
.spc-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6cqw; }
.spc-slots i { display: grid; place-items: center; height: 2.8cqw; border-radius: 1cqw; background: rgba(255, 255, 255, 0.08); font-style: normal; font-size: 1.15cqw; font-weight: 600; }
.spc-slots .is-off { opacity: 0.35; text-decoration: line-through; }
.spc-book > em { margin-top: auto; display: grid; place-items: center; height: 3.2cqw; border-radius: 99px; background: #fff; color: #0f2a33; font-style: normal; font-size: 1.2cqw; font-weight: 700; }

/* ==========================================================================
   Dari-only industry apps: travel agency, language & computer school, furniture
   ========================================================================== */
/* Travel agency */
.ap--travel { --sky: #1677d2; background: #eef5fb; color: #0b2a40; }
.tr-top { display: flex; align-items: center; justify-content: space-between; padding: 1cqw 5.5cqw 0; }
.tr-top small { display: block; font-size: 2.6cqw; color: rgba(11, 42, 64, 0.5); }
.tr-top b { display: block; font-size: 5.6cqw; font-weight: 800; }
.tr-av { display: grid; place-items: center; width: 9.4cqw; height: 9.4cqw; border-radius: 50%; background: var(--sky); color: #fff; font-size: 4.2cqw; }
.tr-card { margin: 3.4cqw 5.5cqw 0; padding: 4cqw; border-radius: 6cqw; background: #fff; box-shadow: 0 2cqw 6cqw -3cqw rgba(11, 42, 64, 0.25); }
.tr-route { display: flex; align-items: center; justify-content: space-between; }
.tr-route > span:not(.tr-swap) small { display: block; font-size: 2.5cqw; color: rgba(11, 42, 64, 0.5); }
.tr-route b { display: block; font-size: 4.6cqw; font-weight: 800; }
.tr-route i { font-style: normal; font-size: 2.5cqw; font-weight: 700; color: var(--sky); }
.tr-route > span:last-child { text-align: left; }
.tr-swap { display: grid; place-items: center; width: 9cqw; height: 9cqw; border-radius: 50%; background: #e6f1fb; color: var(--sky); font-size: 4cqw; }
.tr-swap .i { transform: scaleX(-1); }
.tr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; margin-top: 3cqw; padding-top: 3cqw; border-top: 0.3cqw dashed #dbe6f0; }
.tr-row small { display: block; font-size: 2.5cqw; color: rgba(11, 42, 64, 0.5); }
.tr-row b { display: block; font-size: 3.4cqw; }
.tr-btn { display: flex; align-items: center; justify-content: center; gap: 1.6cqw; height: 10.5cqw; margin-top: 3.4cqw; border-radius: 99px; background: var(--sky); color: #fff; font-size: 3.4cqw; font-weight: 700; }
.tr-label { display: flex; justify-content: space-between; align-items: baseline; padding: 4cqw 5.5cqw 2cqw; }
.tr-label b { font-size: 3.6cqw; }
.tr-label small { font-size: 2.8cqw; color: rgba(11, 42, 64, 0.5); }
.tr-list { display: flex; flex-direction: column; gap: 2cqw; margin: 0 5.5cqw; }
.tr-flight { display: flex; align-items: center; gap: 2.6cqw; padding: 2.4cqw; border-radius: 4cqw; background: #fff; }
.tr-flight.is-on { box-shadow: inset 0 0 0 0.5cqw var(--sky); }
.tr-flight > i { display: grid; place-items: center; flex-shrink: 0; width: 8.6cqw; height: 8.6cqw; border-radius: 2.8cqw; background: #e6f1fb; color: var(--sky); font-size: 3.8cqw; }
.tr-flight > span { flex: 1; min-width: 0; }
.tr-flight b { display: block; font-size: 3.1cqw; }
.tr-flight small { display: block; font-size: 2.5cqw; color: rgba(11, 42, 64, 0.55); }
.tr-flight em { flex-shrink: 0; font-size: 3.1cqw; font-weight: 800; color: var(--sky); }
.tr-visa { display: flex; align-items: center; gap: 2.6cqw; margin: 3cqw 5.5cqw 0; padding: 3cqw; border-radius: 4.4cqw; background: #0b2a40; color: #fff; }
.tr-visa-ico { display: grid; place-items: center; flex-shrink: 0; width: 9cqw; height: 9cqw; border-radius: 2.8cqw; background: rgba(255, 255, 255, 0.12); font-size: 4cqw; }
.tr-visa > span:nth-child(2) { flex: 1; min-width: 0; }
.tr-visa b { display: block; font-size: 3.1cqw; }
.tr-visa small { display: block; font-size: 2.4cqw; opacity: 0.7; }
.tr-visa em { flex-shrink: 0; padding: 1.6cqw 2.8cqw; border-radius: 99px; background: #fff; color: #0b2a40; font-size: 2.6cqw; font-weight: 700; }

/* Language & computer school */
.ap--schools { --violet: #5b3fd6; background: #f4f2fd; color: #1d1640; }
.sc-top { display: flex; align-items: center; justify-content: space-between; padding: 1cqw 5.5cqw 0; }
.sc-top small { display: block; font-size: 2.6cqw; color: rgba(29, 22, 64, 0.5); }
.sc-top b { display: block; font-size: 5cqw; font-weight: 800; }
.sc-av { display: grid; place-items: center; width: 9.4cqw; height: 9.4cqw; border-radius: 50%; background: #ffd9a8; color: #6b3d00; font-size: 3.8cqw; font-weight: 800; }
.sc-next { margin: 3.4cqw 5.5cqw 0; padding: 4cqw; border-radius: 6cqw; background: linear-gradient(150deg, #6d4cf0, #3f26a8); color: #fff; }
.sc-next small { display: block; font-size: 2.7cqw; opacity: 0.8; }
.sc-next b { display: block; margin-top: 0.6cqw; font-size: 5.4cqw; font-weight: 800; }
.sc-next-row { display: flex; flex-wrap: wrap; gap: 1.6cqw; margin-top: 2.6cqw; }
.sc-next-row i { display: inline-flex; align-items: center; gap: 1cqw; padding: 1.2cqw 2.4cqw; border-radius: 99px; background: rgba(255, 255, 255, 0.16); font-style: normal; font-size: 2.5cqw; font-weight: 600; }
.sc-seg { display: grid; grid-template-columns: 1fr 1fr; margin: 3.4cqw 5.5cqw 0; padding: 1cqw; border-radius: 99px; background: #e6e1fa; font-size: 3cqw; text-align: center; }
.sc-seg span { padding: 1.7cqw 0; border-radius: 99px; color: rgba(29, 22, 64, 0.6); }
.sc-seg .is-on { background: #fff; color: #1d1640; font-weight: 700; box-shadow: 0 0.4cqw 1.2cqw rgba(0, 0, 0, 0.08); }
.sc-label { display: flex; justify-content: space-between; align-items: baseline; padding: 4cqw 5.5cqw 2cqw; }
.sc-label b { font-size: 3.6cqw; }
.sc-label small { font-size: 2.8cqw; color: rgba(29, 22, 64, 0.5); }
.sc-list { display: flex; flex-direction: column; gap: 2cqw; margin: 0 5.5cqw; }
.sc-course { display: flex; align-items: center; gap: 2.6cqw; padding: 2.4cqw; border-radius: 4cqw; background: #fff; }
.sc-course > i { display: grid; place-items: center; flex-shrink: 0; width: 9cqw; height: 9cqw; border-radius: 2.8cqw; background: #ece8fd; color: var(--violet); font-size: 4cqw; }
.sc-course > span { flex: 1; min-width: 0; }
.sc-course b { display: block; font-size: 3.1cqw; }
.sc-course small { display: block; font-size: 2.5cqw; color: rgba(29, 22, 64, 0.55); }
.sc-course em { flex-shrink: 0; font-size: 2.8cqw; font-weight: 800; color: var(--violet); }
.sc-cta { display: flex; align-items: center; justify-content: center; gap: 1.6cqw; height: 11cqw; margin: 3.4cqw 5.5cqw 0; border-radius: 99px; background: #1d1640; color: #fff; font-size: 3.5cqw; font-weight: 700; }
.sc-cta .i { transform: scaleX(-1); }

/* Furniture catalogue */
.ap--furniture { --wood: #9a6b3f; background: #f7f2ec; color: #2b1f16; }
.fu-top { display: flex; align-items: center; justify-content: space-between; padding: 1cqw 5.5cqw 0; }
.fu-top small { display: block; font-size: 2.6cqw; color: rgba(43, 31, 22, 0.5); }
.fu-top b { display: block; font-size: 5.4cqw; font-weight: 800; line-height: 1.3; }
.fu-top b em { color: var(--wood); }
.fu-bag { display: grid; place-items: center; width: 9.4cqw; height: 9.4cqw; border-radius: 50%; background: #fff; font-size: 4.2cqw; }
.fu-search { display: flex; align-items: center; gap: 2cqw; margin: 3cqw 5.5cqw 0; height: 10.5cqw; padding: 0 3.4cqw; border-radius: 99px; background: #fff; font-size: 2.8cqw; color: rgba(43, 31, 22, 0.5); }
.fu-search .i { font-size: 4cqw; color: var(--wood); }
.fu-cats { display: flex; gap: 1.6cqw; margin: 3cqw 5.5cqw 0; }
.fu-cats span { padding: 1.5cqw 3.2cqw; border-radius: 99px; background: #fff; font-size: 2.8cqw; }
.fu-cats .is-on { background: #2b1f16; color: #fff; font-weight: 700; }
.fu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; margin: 3cqw 5.5cqw 0; }
.fu-item { display: flex; flex-direction: column; padding: 1.8cqw; border-radius: 4cqw; background: #fff; }
.fu-media { position: relative; display: block; height: 22cqw; margin-bottom: 1.6cqw; overflow: hidden; border-radius: 3cqw; background: #efe7dd; }
.fu-media img { width: 100%; height: 100%; }
.fu-media i { position: absolute; top: 1.4cqw; left: 1.4cqw; display: grid; place-items: center; width: 6.4cqw; height: 6.4cqw; border-radius: 50%; background: #fff; color: #c2410c; font-size: 3cqw; }
.fu-item b { font-size: 2.9cqw; }
.fu-item small { font-size: 2.3cqw; color: rgba(43, 31, 22, 0.55); }
.fu-item em { margin-top: 0.8cqw; font-size: 2.8cqw; font-weight: 800; color: var(--wood); }
.fu-bar {
  position: absolute; left: 4cqw; right: 4cqw; bottom: 4cqw; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 2cqw;
  padding: 2.2cqw 4.4cqw 2.2cqw 2.2cqw; border-radius: 99px; background: #2b1f16; color: #fff; font-size: 3cqw;
}
.fu-bar em { display: flex; align-items: center; gap: 1.2cqw; padding: 2.4cqw 3.8cqw; border-radius: 99px; background: #e9c08f; color: #2b1f16; font-size: 3cqw; font-weight: 700; }
.fu-bar em .i { transform: scaleX(-1); }

/* ==========================================================================
   Dari-only example designs: fast food, travel agency, school, furniture
   ========================================================================== */
:is(.case-media--travel, .case-media--school, .case-media--furniture) .cm-browser { position: absolute; right: 8%; top: 11%; width: 100%; }

/* Fast food: a photo of the food, the ordering app and a new-order ticket */
.case-media--fastfood { background: #1a120c; }
.case-media--fastfood::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(20, 12, 6, 0.25), rgba(20, 12, 6, 0.6)); }
.case-media--fastfood .phone { position: absolute; z-index: 1; right: 12%; top: 9%; width: 35%; }
.ffm { flex: 1; display: flex; flex-direction: column; gap: 2.2cqw; padding: 1cqw 5cqw 6cqw; background: #fff8f1; }
.ffm-head { display: flex; align-items: center; gap: 2.4cqw; }
.ffm-logo { display: grid; place-items: center; flex-shrink: 0; width: 10cqw; height: 10cqw; border-radius: 3cqw; background: #f97316; color: #fff; font-size: 5cqw; font-weight: 800; }
.ffm-head b { display: block; font-size: 4.2cqw; font-weight: 800; }
.ffm-head small { display: block; font-size: 2.6cqw; color: #15803d; }
.ffm-chips { display: flex; gap: 1.4cqw; }
.ffm-chips span { padding: 1.4cqw 2.8cqw; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 0.3cqw #f1e4d6; font-size: 2.7cqw; }
.ffm-chips .is-on { background: #f97316; color: #fff; box-shadow: none; font-weight: 700; }
.ffm-promo { display: flex; align-items: center; gap: 2cqw; padding: 2.4cqw 3cqw; border-radius: 3.6cqw; background: linear-gradient(120deg, #f97316, #ea580c); color: #fff; font-size: 2.5cqw; }
.ffm-promo b { font-size: 3.6cqw; font-weight: 800; white-space: nowrap; }
.ffm-item { display: flex; align-items: center; gap: 2.4cqw; padding: 2cqw; border-radius: 3.6cqw; background: #fff; }
.ffm-item.is-on { box-shadow: inset 0 0 0 0.5cqw #f97316; }
.ffm-item img { flex-shrink: 0; width: 13cqw; height: 13cqw; border-radius: 3cqw; object-fit: cover; }
.ffm-item > span { flex: 1; min-width: 0; }
.ffm-item b { display: block; font-size: 3.1cqw; }
.ffm-item small { display: block; font-size: 2.3cqw; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ffm-item em { flex-shrink: 0; font-style: normal; font-size: 2.7cqw; font-weight: 800; }
.ffm-item > i { display: grid; place-items: center; flex-shrink: 0; width: 6cqw; height: 6cqw; border-radius: 50%; background: #f97316; color: #fff; font-style: normal; font-size: 3.6cqw; font-weight: 700; }
.ffm-bar { margin-top: auto; display: flex; align-items: center; gap: 2.4cqw; height: 11cqw; padding: 0 2cqw 0 4cqw; border-radius: 99px; background: #1f140b; color: #fff; font-size: 3.2cqw; }
.ffm-bar i { display: grid; place-items: center; width: 7cqw; height: 7cqw; border-radius: 50%; background: #f97316; font-style: normal; font-size: 3cqw; font-weight: 700; }
.ffm-bar span { flex: 1; }
.ffm-bar b { font-size: 3.2cqw; }
.ffm-ticket {
  position: absolute; z-index: 2; left: 7%; bottom: 14%; width: 44%;
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.96); box-shadow: var(--shadow-l); transform: rotate(-3deg);
}
.case:hover .ffm-ticket { transform: rotate(-5deg) translateY(-8px); }
.ffm-ticket-ico { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: #f97316; color: #fff; font-size: 16px; }
.ffm-ticket b { display: block; font-size: clamp(12px, 1.25vw, 16px); }
.ffm-ticket small { display: block; font-size: clamp(10px, 0.9vw, 12px); color: var(--muted); }

/* Travel agency website */
.case-media--travel { background: radial-gradient(90% 80% at 85% 0%, #e2f0fc, #b9d8f3); }
.trv { position: relative; aspect-ratio: 16 / 10; display: flex; flex-direction: column; padding: 2.2cqw 3.2cqw 2.4cqw; overflow: hidden; color: #fff; font-size: 1.3cqw; line-height: 1.4; }
.trv-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.trv::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(6, 30, 54, 0.55), rgba(6, 30, 54, 0.1) 40%, rgba(6, 30, 54, 0.75)); }
.trv > :not(.trv-photo) { position: relative; z-index: 2; }
.trv-nav { display: flex; align-items: center; justify-content: space-between; }
.trv-logo { display: inline-flex; align-items: center; gap: 0.8cqw; font-size: 1.9cqw; font-weight: 800; }
.trv-logo i { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: linear-gradient(135deg, #7cc4ff, #1677d2); }
.trv-links { display: flex; gap: 2.4cqw; opacity: 0.88; }
.trv-links i { font-style: normal; }
.trv-btn { display: inline-flex; align-items: center; height: 3.3cqw; padding: 0 1.8cqw; border-radius: 99px; background: #22c55e; color: #fff; font-size: 1.2cqw; font-weight: 700; }
.trv-copy { margin-top: 3cqw; }
.trv-copy small { font-size: 1.2cqw; color: #bfe0ff; }
.trv-title { display: block; max-width: 46cqw; margin-top: 0.5cqw; font-size: 4cqw; font-weight: 800; line-height: 1.3; }
.trv-title em { color: #9fd3ff; }
.trv-search { display: flex; align-items: center; gap: 0.6cqw; margin-top: 2cqw; padding: 0.8cqw; border-radius: 1.8cqw; background: rgba(255, 255, 255, 0.96); color: #0b2a40; }
.trv-search span { flex: 1; padding: 0.3cqw 1.4cqw; }
.trv-search span + span { border-right: 1px solid rgba(11, 42, 64, 0.12); }
.trv-search small { display: block; font-size: 1cqw; color: rgba(11, 42, 64, 0.55); }
.trv-search b { display: block; font-size: 1.3cqw; }
.trv-search em { flex-shrink: 0; padding: 1.2cqw 2.2cqw; border-radius: 1.3cqw; background: #1677d2; color: #fff; font-style: normal; font-size: 1.3cqw; font-weight: 700; }
.trv-dests { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2cqw; margin-top: auto; }
.trv-dest { display: flex; align-items: center; gap: 1cqw; padding: 0.8cqw; border-radius: 1.4cqw; background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.trv-dest img { flex-shrink: 0; width: 5.4cqw; height: 4.2cqw; border-radius: 0.9cqw; object-fit: cover; }
.trv-dest > span { flex: 1; min-width: 0; }
.trv-dest b { display: block; font-size: 1.3cqw; }
.trv-dest small { display: block; font-size: 1cqw; opacity: 0.75; }
.trv-dest em { flex-shrink: 0; font-style: normal; font-size: 1.1cqw; font-weight: 700; color: #bfe0ff; }

/* Language & computer school website */
.case-media--school { background: radial-gradient(90% 80% at 15% 100%, #eeeaff, #d3caf9); }
.sch { aspect-ratio: 16 / 10; display: flex; flex-direction: column; padding: 2.2cqw 3.2cqw; background: #fcfbff; color: #1d1640; font-size: 1.25cqw; line-height: 1.4; }
.sch-nav { display: flex; align-items: center; justify-content: space-between; }
.sch-logo { display: inline-flex; align-items: center; gap: 0.8cqw; font-size: 1.9cqw; font-weight: 800; }
.sch-logo i { width: 2.2cqw; height: 2.2cqw; border-radius: 0.6cqw; background: #5b3fd6; transform: rotate(45deg) scale(0.8); }
.sch-links { display: flex; gap: 2.4cqw; color: rgba(29, 22, 64, 0.6); }
.sch-links i { font-style: normal; }
.sch-btn { display: inline-flex; align-items: center; height: 3.3cqw; padding: 0 1.8cqw; border-radius: 99px; background: #5b3fd6; color: #fff; font-size: 1.2cqw; font-weight: 700; }
.sch-hero { display: grid; grid-template-columns: 1fr 26cqw; gap: 2.4cqw; align-items: center; margin-top: 2cqw; }
.sch-kicker { display: inline-flex; align-items: center; gap: 0.8cqw; padding: 0.5cqw 1.4cqw; border-radius: 99px; background: #ece8fd; color: #5b3fd6; font-size: 1.1cqw; font-weight: 700; }
.sch-kicker i { width: 0.9cqw; height: 0.9cqw; border-radius: 50%; background: #22c55e; }
.sch-title { display: block; margin-top: 1cqw; font-size: 3.2cqw; font-weight: 800; line-height: 1.3; }
.sch-title em { color: #5b3fd6; }
.sch-p { display: block; margin-top: 0.8cqw; color: rgba(29, 22, 64, 0.6); }
.sch-photo { display: block; width: 100%; height: 15cqw; border-radius: 1.8cqw; object-fit: cover; }
.sch-table { margin-top: 1.8cqw; padding: 1.2cqw 1.6cqw; border-radius: 1.8cqw; background: #fff; box-shadow: 0 0 0 1px rgba(29, 22, 64, 0.08); }
.sch-tabs { display: flex; gap: 0.6cqw; margin-bottom: 0.8cqw; }
.sch-tabs i { padding: 0.4cqw 1.6cqw; border-radius: 99px; background: #f1eefc; font-style: normal; font-size: 1.1cqw; }
.sch-tabs .is-on { background: #1d1640; color: #fff; }
.sch-row { display: grid; grid-template-columns: 1.4fr 0.8fr 0.9fr 1fr; gap: 1cqw; padding: 0.8cqw 0.6cqw; border-top: 1px solid rgba(29, 22, 64, 0.07); font-size: 1.15cqw; }
.sch-row--head { border-top: 0; color: rgba(29, 22, 64, 0.5); font-size: 1cqw; font-weight: 600; }
.sch-row.is-on { border-radius: 0.8cqw; background: #f4f1ff; font-weight: 700; color: #3f26a8; }

/* Furniture catalogue website */
.case-media--furniture { background: radial-gradient(90% 80% at 85% 0%, #f6ebdd, #e3cdb2); }
.frn { aspect-ratio: 16 / 10; display: flex; flex-direction: column; padding: 2.2cqw 3.2cqw; background: #fbf8f4; color: #2b1f16; font-size: 1.25cqw; line-height: 1.4; }
.frn-nav { display: flex; align-items: center; justify-content: space-between; }
.frn-logo { display: inline-flex; align-items: center; gap: 0.8cqw; font-size: 1.9cqw; font-weight: 800; }
.frn-logo i { width: 2.2cqw; height: 2.2cqw; background: #9a6b3f; clip-path: polygon(50% 0, 90% 70%, 60% 70%, 60% 100%, 40% 100%, 40% 70%, 10% 70%); }
.frn-links { display: flex; gap: 2.4cqw; color: rgba(43, 31, 22, 0.6); }
.frn-links i { font-style: normal; }
.frn-links .is-on { color: #9a6b3f; font-weight: 700; }
.frn-icons { display: flex; gap: 1.4cqw; font-size: 1.7cqw; }
.frn-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2cqw; margin-top: 2.2cqw; }
.frn-title { max-width: 40cqw; font-size: 3.1cqw; font-weight: 800; line-height: 1.3; }
.frn-title em { color: #9a6b3f; }
.frn-chips { display: flex; gap: 0.8cqw; }
.frn-chips i { padding: 0.5cqw 1.5cqw; border-radius: 99px; box-shadow: inset 0 0 0 1px rgba(43, 31, 22, 0.15); font-style: normal; font-size: 1.1cqw; }
.frn-chips .is-on { background: #2b1f16; color: #fff; box-shadow: none; }
.frn-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4cqw; margin-top: 1.8cqw; }
.frn-card { display: flex; flex-direction: column; gap: 0.2cqw; padding: 1cqw; border-radius: 1.8cqw; background: #fff; box-shadow: 0 0 0 1px rgba(43, 31, 22, 0.07); }
.frn-media { position: relative; display: block; aspect-ratio: 4 / 3.3; margin-bottom: 0.7cqw; overflow: hidden; border-radius: 1.2cqw; background: #f1e9df; }
.frn-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.frn-tag { position: absolute; top: 0.8cqw; right: 0.8cqw; padding: 0.2cqw 1cqw; border-radius: 99px; background: #9a6b3f; color: #fff; font-style: normal; font-size: 1cqw; font-weight: 700; }
.frn-card b { font-size: 1.35cqw; }
.frn-card small { font-size: 1cqw; color: rgba(43, 31, 22, 0.55); }
.frn-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6cqw; margin-top: 0.6cqw; }
.frn-row em { font-style: normal; font-size: 1.15cqw; font-weight: 800; color: #9a6b3f; }
.frn-row i { padding: 0.4cqw 0.9cqw; border-radius: 99px; background: #2b1f16; color: #fff; font-style: normal; font-size: 0.9cqw; font-weight: 600; white-space: nowrap; }

/* ==========================================================================
   Pricing for each type of business
   ========================================================================== */
.ptype { margin-top: 20px; padding: clamp(22px, 3vw, 34px); border-radius: var(--radius-l); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-s); }
.ptype-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; }
.ptype-head b { font-family: var(--font-display); font-size: 21px; font-weight: 700; }
.ptype-head small { font-size: 14px; color: var(--muted); }
.ptype-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; margin-top: 14px; }
.ptype-list li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.ptype-ico { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-size: 19px; }
.ptype-list li > span:nth-child(2) { flex: 1; min-width: 0; }
.ptype-list b { display: block; font-size: 15px; font-weight: 600; }
.ptype-list small { display: block; font-size: 13px; color: var(--muted); }
.ptype-list em { flex-shrink: 0; font-style: normal; font-size: 15px; font-weight: 700; white-space: nowrap; }
.ptype-list .ptype-more em a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 760px) {
  .ptype-list { grid-template-columns: 1fr; }
  .case-media--hospital .phone { width: 40%; }
  .case-media--hall .phone { width: 42%; right: 7%; top: 17%; }
  .case-media--fastfood .phone { width: 42%; right: 7%; top: 17%; }
  .ffm-ticket { width: 50%; left: 4%; padding: 9px 10px; gap: 8px; border-radius: 14px; }
  .ffm-ticket-ico { width: 26px; height: 26px; font-size: 13px; }
  .wh-ticket { width: 50%; left: 4%; padding: 9px 10px; gap: 8px; border-radius: 14px; }
  .wh-ticket-ico { width: 26px; height: 26px; font-size: 13px; }
  .cm-hsp-a { right: 7%; }
  .cm-hsp-b { right: 53%; }
}

/* A price range like «۱۰۰ تا ۲۰۰» stays on one line; its note drops below when there is no room */
html[dir="rtl"] .plan-price { flex-wrap: wrap; row-gap: 10px; white-space: nowrap; }
@media (max-width: 560px) {
  .ptype-list li { display: grid; grid-template-columns: 42px 1fr; align-items: start; gap: 6px 14px; }
  .ptype-ico { grid-row: span 2; }
  .ptype-list em { grid-column: 2; color: var(--accent); }
}
html[dir="rtl"] .eyebrow-tag { white-space: nowrap; }