/* Languages (EN / RU / AR) and currencies (₽ / $ / AED) on top of style.css + en.css — same palette and glass. */

@font-face { font-family: Cairo; src: url(../fonts/cairo-arabic-wght-normal.woff2) format('woff2'); font-weight: 200 1000; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }

/* ---------- Language switch (header) ---------- */
.langs { display: inline-flex; gap: 2px; padding: 4px; border-radius: 99px; border: 1px solid rgba(150, 172, 255, .14); background: rgba(8, 14, 60, .3); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.langs__a { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: 99px; font: 700 11px/1 var(--body); letter-spacing: .14em; color: var(--muted); transition: color .25s, background .25s, box-shadow .25s; }
.langs__a:hover { color: #fff; background: rgba(120, 150, 255, .16); }
.langs__a[aria-current] { color: #fff; background: linear-gradient(180deg, rgba(90, 120, 255, .5), rgba(31, 60, 255, .3)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 18px -8px rgba(63, 107, 255, .9); }
.menu__foot { align-items: center; }
.menu__langs { display: inline-flex; gap: 18px; margin-inline-start: auto; }
.menu__lang { font-weight: 700; letter-spacing: .14em; }
.menu__lang[aria-current], .foot__langs a[aria-current] { color: #fff; }
.doc-page .top__right { display: flex; align-items: center; gap: 12px; }

/* ---------- Currency switch ---------- */
.cur { display: inline-flex; flex: none; gap: 2px; padding: 2px; border-radius: 99px; border: 1px solid var(--line); background: rgba(2, 4, 26, .35); }
.cur__b { min-width: 30px; height: 26px; padding: 0 8px; border-radius: 99px; font: 700 11px/1 var(--body); letter-spacing: .04em; color: var(--dim); transition: color .25s, background .25s, box-shadow .25s; }
.cur__b:hover { color: #fff; }
.cur__b[aria-pressed="true"] { color: #fff; background: linear-gradient(180deg, rgba(90, 120, 255, .55), rgba(31, 60, 255, .35)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 4px 14px -6px rgba(63, 107, 255, .9); }
.cur--lg .cur__b { min-width: 52px; height: 38px; padding: 0 14px; font-size: 13px; }
.cur-global { display: flex; align-items: center; gap: 14px; margin-top: 22px; font: 600 11px/1.4 var(--body); letter-spacing: .26em; text-transform: uppercase; color: var(--dim); }
@media (pointer: coarse) { .cur__b { min-width: 36px; height: 32px; } }

/* One price, three currencies stacked in one grid cell: the active one is in place, the others wait off to the side
   and slide in (direction follows the swipe). The cell is as wide as the widest variant, so nothing jumps. */
.money { display: inline-grid; vertical-align: bottom; overflow: hidden; padding-block: .12em; margin-block: -.12em; --dirx: 1; }
.money__v { grid-area: 1 / 1; white-space: nowrap; transition: transform .55s var(--ease), opacity .4s var(--ease); transform: translateX(calc((var(--k) - var(--ci)) * 70% * var(--dirx))); }
.money__v[data-c="RUB"] { --k: 0; } .money__v[data-c="USD"] { --k: 1; } .money__v[data-c="AED"] { --k: 2; }
html { --ci: 2; }
html[data-cur="RUB"] { --ci: 0; } html[data-cur="USD"] { --ci: 1; } html[data-cur="AED"] { --ci: 2; }
html[data-cur="RUB"] .money__v:not([data-c="RUB"]), html[data-cur="USD"] .money__v:not([data-c="USD"]), html[data-cur="AED"] .money__v:not([data-c="AED"]) { opacity: 0; pointer-events: none; }
[data-swipe-cur] { touch-action: pan-y; }
[data-swipe-cur] .money { cursor: pointer; -webkit-user-select: none; user-select: none; }
#calcTotal { cursor: pointer; }

/* Service cards: price + switch on one row, timeline under it */
.svc footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; }
.svc footer .svc__term { grid-column: 1 / -1; }
.svc__price { min-width: 0; }
.svc__price small { margin-left: 0; margin-inline-start: 2px; }
/* Packages */
.bundle__price { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.bundle__price strong { font: 600 30px/1.1 var(--display); letter-spacing: -.02em; }
.bundle__price .from { margin: 0; margin-inline-end: 4px; }
.bundle__price s { display: block; margin-top: 6px; font: 500 15px/1 var(--body); color: var(--dim); }
.bundle__price .money__v { white-space: normal; }
/* Calculator */
.calc__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.calc__alt--1 { grid-template-columns: 1fr; }
.calc__alt--3 { grid-template-columns: repeat(3, 1fr); }
.opt__price .money { vertical-align: baseline; }
.tog em .money { vertical-align: baseline; }
.calc__usd { min-height: 1.4em; }
.hero__note .money { vertical-align: baseline; color: var(--muted); }
.sec-head__side { display: grid; justify-items: start; }

@media (max-width: 600px) {
  .langs { padding: 3px; }
  .langs__a { min-width: 34px; height: 34px; padding: 0 7px; font-size: 10px; letter-spacing: .1em; }
  .top__right { gap: 8px; }
  .cur-global { letter-spacing: .18em; }
  .bundle__price strong { font-size: 26px; }
  .calc__alt--3 { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 430px) {
  .top .pill:not(.menu__close) { padding: 0 14px; gap: 0; }
  .top .pill:not(.menu__close) span { display: none; }
  .top { gap: 12px; }
}
@media (max-width: 380px) {
  .langs__a { min-width: 30px; height: 32px; padding: 0 5px; }
  .brand { gap: 7px; }
  .brand__mark { width: 34px; }
  .brand__name { font-size: 21px; }
}

/* ---------- Arabic: font, no letter-spacing (it breaks joined letters), roomier line height ---------- */
html:lang(ar) { --display: Cairo, Montserrat, ui-sans-serif, system-ui, sans-serif; --body: Cairo, Manrope, ui-sans-serif, system-ui, sans-serif; }
:lang(ar) { letter-spacing: 0 !important; }
html:lang(ar) body { line-height: 1.8; }
html:lang(ar) .h1, html:lang(ar) .h2, html:lang(ar) .hero__title { line-height: 1.3; font-weight: 600; }
html:lang(ar) .hero__title { font-size: clamp(34px, 4.2vw, 68px); }
html:lang(ar) .h1 { font-size: clamp(44px, 7.5vw, 112px); }
html:lang(ar) .lead { line-height: 1.75; }
html:lang(ar) .eyebrow, html:lang(ar) .sec-index, html:lang(ar) .foot__copy, html:lang(ar) .hero__meta, html:lang(ar) .cur-global { font-size: 13px; }
html:lang(ar) .btn, html:lang(ar) .pill { font-size: 14px; }
html:lang(ar) .svc h3, html:lang(ar) .step h3, html:lang(ar) .qa summary { line-height: 1.45; }
html:lang(ar) .split-line { padding-bottom: .2em; margin-bottom: -.2em; }
html:lang(ar) .marquee__row span { line-height: 1.4; }

/* ---------- Right-to-left: mirror what style.css places with left/right ---------- */
[dir="rtl"] .money { --dirx: -1; }
[dir="rtl"] .brand { direction: ltr; }
[dir="rtl"] .arr { display: inline-block; transform: scaleX(-1); }
[dir="rtl"] .menu__nav a:hover { transform: translateX(-10px); }
[dir="rtl"] .way:hover { transform: translateX(-6px); }
[dir="rtl"] .work__open { right: auto; left: 22px; }
[dir="rtl"] .bundle .badge { right: auto; left: 20px; }
[dir="rtl"] .bundle--hot .eyebrow { padding-right: 0; padding-left: 120px; }
[dir="rtl"] .bundle li { padding-left: 0; padding-right: 26px; }
[dir="rtl"] .bundle li::before { left: auto; right: 0; }
[dir="rtl"] .tog { padding: 14px 48px 14px 16px; }
[dir="rtl"] .tog::before { left: auto; right: 16px; }
[dir="rtl"] .tog::after { left: auto; right: 23px; }
[dir="rtl"] .select::after { right: auto; left: 18px; }
[dir="rtl"] .select select { padding: 15px 18px 15px 44px; }
[dir="rtl"] .msg i { right: auto; left: 18px; }
[dir="rtl"] .msg--main i { margin-left: 0; margin-right: auto; }
[dir="rtl"] .email-copy { text-align: right; }
[dir="rtl"] .loader__bar i { transform-origin: right; }
[dir="rtl"] .process__line { left: 0; right: 9px; transform: scaleX(-1); }
[dir="rtl"] .marquee__row { animation-name: marqueeRtl; }
@keyframes marqueeRtl { to { transform: translateX(100%); } }
[dir="rtl"] .doc ul, [dir="rtl"] .doc .steps-list { padding-left: 0; padding-right: 22px; }
[dir="rtl"] .tbl th { text-align: right; }
[dir="rtl"] .field input[dir="ltr"] { text-align: right; }
[dir="rtl"] .field input[dir="ltr"]::placeholder { text-align: right; }
@media (max-width: 860px) { [dir="rtl"] .hero { text-align: right; } }
@media (max-width: 600px) {
  [dir="rtl"] .work__open { left: 16px; }
  [dir="rtl"] .msg i { margin-left: 0; margin-right: auto; }
}

/* Long Arabic service names in the <select> must not widen the contact grid on phones */
.contact__grid > *, .brief .field { min-width: 0; }
.select select { max-width: 100%; text-overflow: ellipsis; }
/* Honeypot: hide without a far-off offset — in RTL a left: -9999px element becomes horizontal scroll */
.hp { left: 0 !important; clip-path: inset(50%); white-space: nowrap; pointer-events: none; }
/* The studio email is one long word: keep it inside the button on 360–390 px phones */
@media (max-width: 600px) { .email-copy b { font-size: min(17px, 4vw); overflow-wrap: anywhere; } }

/* ---------- Ready-made projects (data/lots.json): poster + description, same glass as the packages ---------- */
.lots { display: grid; gap: 24px; }
.lot.is-folded { display: none; }
.lots-more { display: flex; justify-content: center; margin-top: 32px; }
.lot { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(22px, 3vw, 44px); align-items: center; padding: clamp(14px, 1.6vw, 22px); }
.lot__shot { display: block; overflow: hidden; border-radius: 16px; border: 1px solid rgba(150, 172, 255, .18); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.lot__shot img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; transition: transform 1.2s var(--ease); }
a.lot__shot:hover { transform: translateY(-4px); box-shadow: 0 30px 70px -30px rgba(63, 107, 255, .9); }
a.lot__shot:hover img { transform: scale(1.03); }
.lot__body { display: grid; gap: 14px; align-content: start; padding: clamp(6px, 1.4vw, 18px); }
.lot__kind { margin: 0; }
.lot h3 { font: 500 clamp(26px, 2.6vw, 38px)/1.12 var(--display); letter-spacing: -.02em; }
.lot__pitch { color: var(--muted); }
.lot__honest { padding: 12px 14px; border-radius: 14px; font-size: 14px; color: var(--muted); border: 1px dashed rgba(150, 172, 255, .3); background: rgba(255, 255, 255, .02); }
.lot__honest b, .lot__more b { color: var(--text); font-weight: 600; }
.lot__more { border-block: 1px solid rgba(150, 172, 255, .14); }
.lot__more summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; cursor: pointer; list-style: none; font: 600 16px/1.3 var(--display); }
.lot__more summary::-webkit-details-marker { display: none; }
.lot__more summary span { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); }
.lot__more summary span::before, .lot__more summary span::after { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 1.5px; background: currentColor; }
.lot__more summary span::after { transform: rotate(90deg); transition: transform .4s var(--ease); }
.lot__more[open] summary span::after { transform: rotate(0); }
.lot__more > div { display: grid; gap: 8px; padding-bottom: 16px; font-size: 14px; color: var(--muted); }
.lot__list { display: grid; gap: 8px; margin-bottom: 4px; }
.lot__list li { position: relative; padding-inline-start: 24px; }
.lot__list li::before { content: ""; position: absolute; inset-inline-start: 0; top: .45em; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #7f9cff 60%, #2a3a9a); box-shadow: 0 0 10px #6d8bff; }
.lot__price { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.lot__label { font: 600 11px/1 var(--body); letter-spacing: .26em; text-transform: uppercase; color: var(--dim); }
.lot__price strong { font: 600 30px/1.1 var(--display); letter-spacing: -.02em; }
.lot__old { font: 500 20px/1.1 var(--display); color: var(--dim); }
.lot__old .money__v { text-decoration: line-through; text-decoration-thickness: 2px; } /* <s> не зачёркивает inline-grid внутри */
.lot__buyout { flex: 1 1 100%; margin: 0; font-size: 15px; color: var(--muted); }
.lot__buyout .money { color: var(--text); font-weight: 600; }
.lot__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.lot__cta .btn--ghost { --h: 52px; }
@media (max-width: 860px) { .lot { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .lot__cta .btn { flex: 1 1 100%; } .lot__price strong { font-size: 26px; } }
/* Longer Russian menu (with «Готовые проекты») next to the language switch on 1100–1240 px screens */
@media (max-width: 1240px) { .top__nav { gap: 2px; } .top__nav a { padding: 9px 11px; font-size: 13px; } }

/* ---------- Service tabs: on desktop all categories are visible (wrap), on phones they scroll ---------- */
@media (min-width: 861px) {
  .chips--scroll { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding: 4px 0; -webkit-mask-image: none; mask-image: none; }
}

/* ---------- Header: the menu sits exactly in the middle of the page ---------- */
@media (min-width: 1101px) {
  .top:has(> .top__nav) { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } /* equal side columns even when one side is wider: the menu never drifts off-centre */
  .top:has(> .top__nav) > .brand { justify-self: start; }
  .top:has(> .top__nav) > .top__right { justify-self: end; }
}

/* ---------- «View all» under works and ready-made projects ---------- */
.more { display: flex; justify-content: center; margin-top: clamp(30px, 4vw, 52px); }
.more .btn sup { font-size: 11px; opacity: .65; margin-inline-start: 2px; }
[dir="rtl"] .more .arr { display: inline-block; transform: scaleX(-1); }

/* ---------- Pages /work and /ready ---------- */
.list-page .top { background: rgba(3, 7, 34, .6); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.list { padding: 150px 0 90px; }
.list .h2 { margin: 0; }
.work__cta { margin-top: 10px; }
.work__cta .btn { --h: 46px; }
@media (max-width: 600px) { .list { padding-top: 112px; } }
@media (min-width: 1101px) and (max-width: 1439px) {
  .top [data-menu-open] { padding: 0 14px; gap: 0; }
  .top [data-menu-open] span { display: none; }
}
@media (min-width: 1101px) { .list-page .top__right .pill { display: none; } }
/* Dev Lab page: one heading per group */
.lab__group { margin: clamp(34px, 5vw, 64px) 0 18px; }
.lab__group sup { font-size: 12px; opacity: .6; margin-inline-start: 4px; }

/* Toast with an action link (email fallback → Gmail) */
.toast a { margin-inline-start: 6px; color: var(--ice); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.toast:has(a) { border-radius: 18px; text-align: center; }