/* Gregorys — портфолио, версия 2. Подача кейсов — как у студии Луч, характер — как у Pragmatica. */
:root {
  --bg: #ffffff;
  --ink: #0d0d0f;
  --ink-2: #2a2a2f;
  --muted: #6c6c75;
  --line: #ececef;
  --soft: #f4f4f5;
  --accent: #3a5bff;
  --green: #22c55e;
  --violet: #7c5cff;
  --radius: 28px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --font: 'Inter Tight', 'Noto Sans Georgian', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

@view-transition { navigation: auto; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
html:not(.lenis) { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, svg { display: block; }
.ic { width: 18px; height: 18px; flex: none; }
::selection { background: var(--accent); color: #fff; }

/* ---------- кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 20px; border-radius: 14px;
  font-size: 15px; font-weight: 500; line-height: 1.2; white-space: nowrap;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s;
}
.btn:active { transform: scale(.97); }
.btn .ic { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.btn:hover .ic { transform: translateX(2px); }
.btn.dark { background: var(--ink); color: #fff; box-shadow: 0 10px 20px -8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.14); }
.btn.dark:hover { transform: translateY(-2px); box-shadow: 0 16px 26px -10px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.14); }
.btn.ghost { border: 1px solid var(--line); }
.btn.ghost:hover { border-color: #d0d0d6; }
.btn.sm { padding: 6px 16px 6px 6px; font-size: 13px; border-radius: 999px; }
.nav-cta .ava.xs { width: 26px; height: 26px; }
.btn.lg { padding: 18px 30px; font-size: 17px; border-radius: 18px; gap: 10px; }
.btn.lg .ic { width: 19px; height: 19px; }
.btn.light { background: #fff; color: var(--ink); }
.btn.light:hover { transform: translateY(-2px); }
.btn.ghost-light { border: 1px solid rgba(255,255,255,.24); color: #fff; }
.btn.ghost-light:hover { background: rgba(255,255,255,.08); }

/* ссылка-«перекат»: текст уезжает вверх, снизу приезжает копия */
.roll { position: relative; display: inline-block; overflow: hidden; vertical-align: top; }
.roll span { position: relative; display: block; transition: transform .5s var(--ease); }
.roll span::after { content: attr(data-t); position: absolute; left: 0; top: 100%; }
.roll:hover span { transform: translateY(-100%); }

/* аватар (фото или буква) */
.ava { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.ava.mono { background: linear-gradient(135deg, #b9f3d6, #8f7bff); color: var(--ink); font-weight: 600; }
.ava.xs { width: 24px; height: 24px; font-size: 12px; }
.ava.lg { width: 76px; height: 76px; margin: 0 auto 22px; font-size: 30px; box-shadow: 0 0 0 6px rgba(255,255,255,.08); }

/* ---------- шапка ---------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 66px; padding: 0 28px;
  background: rgba(255,255,255,.84);
  backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
  transition: background .4s, color .4s;
}
.brand { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.nav-links { display: flex; gap: 26px; font-size: 14px; color: var(--ink-2); }
.nav-right { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.langs { display: flex; padding: 3px; border-radius: 10px; background: var(--soft); }
.langs a { padding: 4px 9px; border-radius: 7px; font-size: 12px; font-weight: 500; color: var(--muted); transition: color .2s, background .2s; }
.langs a:hover { color: var(--ink); }
.langs a.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* ---------- первый экран: по центру, ниже — карусель работ ---------- */
.hero { max-width: 1000px; margin: 0 auto; padding: 72px 24px 0; text-align: center; }
.status { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 26px; padding: 7px 15px; border-radius: 999px; background: var(--soft); font-size: 13px; color: var(--ink-2); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(34,197,94,.16); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(34,197,94,.05); } }
.hero-title { font-size: clamp(40px, 5.6vw, 80px); font-weight: 500; letter-spacing: -.04em; line-height: 1.04; }
.lang-ka .hero-title { font-size: clamp(28px, 4.2vw, 60px); letter-spacing: -.01em; line-height: 1.15; }
.rot { display: inline-block; vertical-align: bottom; color: var(--accent); text-align: left; white-space: nowrap; transition: width .28s var(--ease); }
.rot-t { display: inline-block; transition: opacity .22s ease, filter .22s ease; }
.rot.fade .rot-t { transition-duration: .1s; }
.rot.fade .rot-t { opacity: 0; filter: blur(3px); }
.hero-text { max-width: 580px; margin: 24px auto 0; font-size: 18px; color: var(--muted); }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }


/* ---------- карусель работ в рамках устройств ---------- */
.showcase-wrap { padding-top: 0; overflow: hidden; }
.showcase {
  --tw: clamp(300px, 44vw, 600px); /* ширина iPad; iPhone считается от неё */
  /* блок выше устройств на 70px сверху и снизу: маска обрезает всё за его краями, а тени длинные */
  position: relative; height: calc(var(--tw) * .92 + 180px); margin-bottom: -70px; outline: none; touch-action: pan-y;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
}
.dev { position: absolute; left: 50%; top: 50%; display: block; transform: translate(-50%, -50%); transition: transform .9s var(--ease), opacity .6s; will-change: transform; -webkit-tap-highlight-color: transparent; }
.js .showcase:not(.ready) .dev:not(.is-active), html:not(.js) .dev:not(.is-active) { opacity: 0; }
.dev-frame { display: block; background: #0e0e10; box-shadow: 0 30px 60px -30px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08); transition: box-shadow .6s; }
.dev.is-active .dev-frame { box-shadow: 0 50px 90px -30px rgba(10,10,30,.55), inset 0 0 0 1px rgba(255,255,255,.08); }
.dev-tab { width: var(--tw); aspect-ratio: 4 / 3; padding: calc(var(--tw) * .022); border-radius: calc(var(--tw) * .055); }
.dev-phone { width: calc(var(--tw) * .4); aspect-ratio: 9 / 19.5; padding: calc(var(--tw) * .012); border-radius: calc(var(--tw) * .07); }
.dev-scr { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--tw) * .034); background: #fff; }
.dev-phone .dev-scr { border-radius: calc(var(--tw) * .058); }
.dev-scr.dark { background: #1e1c28; }
/* Нарисованные интерфейсы рассчитаны на ширину окна 86% (iPad) и телефона 31% исходной картинки.
   Поэтому «контейнер» делаем шире экрана в 1/k раз, а сам интерфейс — шириной k·100cqw = ровно экран. */
.dev-in { position: absolute; top: 0; left: 0; display: block; width: calc(100% / var(--k)); height: 100%; container-type: inline-size; }
.dev-tab .dev-in { --k: .86; }
.dev-phone .dev-in { --k: .31; }
.dev-win { position: absolute; top: 0; left: 0; width: 86cqw; height: 100%; border-radius: 0; box-shadow: none; }
.dev-in .mk-scr { width: 31cqw; height: 100%; border-radius: 0; }
.ph-search { flex: none; height: 4.2cqw; border-radius: 2cqw; background: #f2f2f4; }
.ph-banner { display: flex; flex: none; flex-direction: column; justify-content: flex-end; gap: 1cqw; height: 13cqw; padding: 2cqw; border-radius: 1.8cqw; background: linear-gradient(135deg, #7f5fd6, #efa6f6); }
.ph-tabs { display: flex; justify-content: space-around; margin-top: auto; padding-top: 1.6cqw; border-top: 1px solid #f1f1f3; }
.ph-tabs i { width: 3cqw; height: 3cqw; border-radius: 1cqw; background: #e4e4e8; }
.ph-tabs i.on { background: #7f5fd6; }
.sc-bar { position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 26px; padding: 0 16px; }
.sc-cap { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 10px 10px 10px 22px; border-radius: 999px; background: var(--soft); transition: opacity .3s, background .2s; }
.sc-cap:hover { background: #ececee; }
.sc-cap.swap { opacity: 0; }
.sc-text { display: flex; flex-direction: column; min-width: 0; text-align: left; line-height: 1.3; }
.sc-text b { font-size: 15px; font-weight: 600; }
.sc-text small { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-cap:hover .card-pill { background: var(--ink); color: #fff; }

/* ---------- секции ---------- */
.section { max-width: 1160px; margin: 0 auto; padding: 150px 32px 0; scroll-margin-top: 70px; }
.section-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 34px; }
.section-head.row { flex-direction: row; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
h2 { font-size: clamp(36px, 4.8vw, 64px); font-weight: 500; letter-spacing: -.035em; line-height: 1.05; }
.lang-ka h2 { font-size: clamp(30px, 3.8vw, 52px); letter-spacing: -.01em; }
.lead { max-width: 540px; font-size: 16px; color: var(--muted); }

/* текст появляется по словам */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.split .w > span { display: inline-block; }
.js .split.is-split .w > span { transform: translateY(108%); transition: transform 1s var(--ease); transition-delay: calc(var(--i) * 45ms); }
.js .split.is-split.in .w > span { transform: none; }

/* ---------- работы: карточки с живыми кусками интерфейса ---------- */
.works { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.card { position: relative; display: block; aspect-ratio: 6 / 5; border-radius: var(--radius); overflow: hidden; isolation: isolate; background: var(--tint); }
.card-top { position: absolute; top: 24px; left: 26px; right: 22px; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.card h3 { font-size: 21px; font-weight: 500; letter-spacing: -.015em; line-height: 1.2; }
.card-top p { max-width: 320px; margin-top: 6px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.card-pill { display: inline-flex; flex: none; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(0,0,0,.1); background: rgba(255,255,255,.65); font-size: 13px; transition: background .25s, color .25s; }
.card-pill .ic { width: 14px; height: 14px; }
.card:hover .card-pill { background: var(--ink); color: #fff; }
.card-status { position: absolute; left: 26px; bottom: 22px; z-index: 2; padding: 4px 11px; border-radius: 999px; background: #fff; font-size: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.card .frw { transition: translate .7s var(--ease); }
.card:hover .frw:nth-child(1) { translate: -52% -52%; }
.card:hover .frw:nth-child(2) { translate: -47% -54%; }
.card:hover .frw:nth-child(3) { translate: -50% -46%; }

/* ---------- куски интерфейса ---------- */
.art { position: absolute; inset: 30% 0 0 0; container-type: inline-size; }
.art-in { position: absolute; inset: 0; font-size: clamp(7px, 2.7cqi, 17px); }
.art-stage { inset: 0; }
.art-stage .art-in { font-size: clamp(7px, 1.45cqi, 15px); }
.frw { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; rotate: var(--r); }
.fr {
  padding: 1em 1.15em; border-radius: 1.1em;
  background: #fff; color: #141416; font-size: 1em; line-height: 1.32;
  box-shadow: 0 1em 2.6em -.7em rgba(25,25,50,.24), 0 0 0 1px rgba(0,0,0,.04);
  animation: fl 7s ease-in-out infinite; animation-delay: var(--d);
}
@keyframes fl { 50% { transform: translateY(-.45em); } }
.fr b { font-weight: 600; }
.fr small { display: block; font-size: .78em; color: #7a7a84; }
.fr p { font-size: .9em; }
.fr .ic { width: 1.1em; height: 1.1em; }
.fr-head { display: flex; align-items: center; gap: .45em; margin-bottom: .55em; font-size: .95em; font-weight: 600; }
.ok-i { display: grid; place-items: center; flex: none; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--green); color: #fff; }
.ok-i .ic { width: 1em; height: 1em; stroke-width: 2.8; }
.ok-i.sm { width: 1.25em; height: 1.25em; }
.fbtn { display: block; padding: .62em 1em; border-radius: .7em; background: #2563eb; color: #fff; font-size: .88em; font-weight: 600; text-align: center; }
.fbtn.dark { background: #111; }
.fbtn.gold { margin-top: .7em; background: #a07850; }
.fbtn.wa { display: flex; align-items: center; justify-content: center; gap: .4em; background: #22c55e; }
.fbtn.sm { display: inline-block; padding: .4em .75em; font-size: .8em; }

.fr-appointment { width: 17em; }
.ap-row { display: flex; gap: .8em; padding: .55em 0; border-top: 1px solid #f0f0f2; }
.ap-row b { min-width: 3em; font-size: .85em; color: #555; }
.ap-row i { display: block; font-style: normal; font-size: .92em; font-weight: 600; }
.ap-row.free i { color: #16a34a; }
.fr-arrived, .fr-ai { display: flex; align-items: center; gap: .6em; padding: .75em 1.15em; border-radius: 999px; font-size: .95em; font-weight: 600; white-space: nowrap; }
.fr-oki { display: flex; gap: .75em; width: 17.5em; background: #15151b; color: #fff; }
.oki-av { display: grid; place-items: center; flex: none; width: 2.3em; height: 2.3em; border-radius: 50%; background: linear-gradient(135deg, #84e3b8, #7c5cff); color: #0d0d0f; }
.fr-oki p { margin-top: .15em; color: rgba(255,255,255,.8); }
.fr-okiTip { display: flex; flex-direction: column; align-items: flex-start; gap: .45em; padding: 0; background: none; box-shadow: none; }
.sugg { padding: .55em .95em; border-radius: 999px; background: #fff; font-size: .88em; white-space: nowrap; box-shadow: 0 .6em 1.6em -.6em rgba(25,25,50,.3), 0 0 0 1px rgba(0,0,0,.05); }
.fr-kpi { width: 16em; }
.bars { display: flex; align-items: flex-end; gap: .6em; height: 7em; }
.bars span { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; align-items: center; gap: .3em; height: 100%; }
.bars i { width: 100%; border-radius: .4em; background: linear-gradient(to top, #2aa874, #a3e6c8); }
.bars small { font-size: .7em; }
.fr-patients { width: 14em; }
.pt-row { display: flex; align-items: center; gap: .6em; padding: .42em 0; font-size: .92em; }
.pav { display: grid; place-items: center; width: 1.85em; height: 1.85em; border-radius: 50%; color: #fff; font-size: .8em; font-weight: 600; }
.pav.c0 { background: #f59e0b; } .pav.c1 { background: #3b82f6; } .pav.c2 { background: #ec4899; }
.fr-link { margin-top: .45em; font-size: .85em; font-weight: 600; color: #2563eb; }
.fr-roles { width: 23em; }
.rl-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: .6em; align-items: center; justify-items: center; }
.rl-grid small { font-size: .72em; }
.rl-grid b { justify-self: start; font-size: .9em; }
.no { width: 1.25em; height: 1.25em; border-radius: 50%; border: 1.5px dashed #d4d4da; }
.fr-chat { width: 16.5em; }
.grp { display: grid; place-items: center; width: 1.85em; height: 1.85em; border-radius: 50%; background: #ff7a59; color: #fff; font-size: .8em; }
.cb { width: fit-content; max-width: 88%; margin-top: .45em; padding: .55em .8em; border-radius: 1em; font-size: .88em; }
.cb.in { background: #f1f1f4; border-bottom-left-radius: .3em; }
.cb.out { margin-left: auto; background: #ff6a4a; color: #fff; border-bottom-right-radius: .3em; }
.cb.file { display: flex; align-items: center; gap: .4em; }
.fr-lesson { width: 14.5em; }
.ls-video { display: grid; place-items: center; height: 6.5em; margin-bottom: .7em; border-radius: .8em; background: linear-gradient(135deg, #ffd0b6, #ff8a65); color: #fff; }
.ls-video .ic { width: 2.2em; height: 2.2em; fill: #fff; }
.fr-lesson b { display: block; font-size: .92em; }
.prog { height: .42em; margin: .6em 0 .3em; overflow: hidden; border-radius: 1em; background: #f0f0f2; }
.prog i { display: block; height: 100%; border-radius: 1em; background: #ff6a4a; }
.fr-quiz { width: 15.5em; }
.qz { display: flex; align-items: center; gap: .5em; margin-top: .45em; padding: .5em .65em; border-radius: .7em; border: 1px solid #ececef; font-size: .88em; }
.qz.on { border-color: var(--green); background: #effbf3; }
.rd { width: 1.25em; height: 1.25em; border-radius: 50%; border: 1.5px solid #d4d4da; }
.fr-task, .fr-task2, .fr-doctor, .fr-order, .fr-tgNotice { display: flex; align-items: center; gap: .75em; }
.fr-task, .fr-task2 { width: 15em; }
.cbx { flex: none; width: 1.45em; height: 1.45em; border-radius: .4em; border: 1.8px solid #c9c9d0; }
.strike { color: #888; text-decoration: line-through; }
.fr-lock { display: flex; flex-direction: column; align-items: center; gap: .65em; width: 12em; padding: 1.4em; text-align: center; }
.dots { display: flex; gap: .6em; }
.dots i { width: .8em; height: .8em; border-radius: 50%; border: 1.5px solid #222; }
.dots i.f { background: #222; }
.fr-lock .face { width: 2.6em; height: 2.6em; color: #ff6a4a; }
.fid { font-size: .8em; color: #555; }
.fr-booking { width: 15.5em; }
.slots { display: flex; gap: .4em; margin: .7em 0; }
.slots span { flex: 1; padding: .45em 0; border-radius: .6em; border: 1px solid #e3e8f5; font-size: .85em; text-align: center; }
.slots .on { border-color: #2563eb; background: #2563eb; color: #fff; }
.fr-serp { width: 21em; }
.fr .url { display: flex; align-items: center; gap: .3em; color: #3c7a3c; }
.url .ic { width: 1em; height: 1em; }
.fr .sr-t { display: block; margin: .25em 0; color: #1a0dab; font-size: 1.02em; font-weight: 500; }
.fr-doctor { width: 15em; }
.doc-av { flex: none; width: 3em; height: 3em; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #f3d9c6 0 25%, transparent 26%), linear-gradient(#dbe8ff, #8fb5f7); }
.fr-blocks { width: 13.5em; }
.bl { display: flex; align-items: center; gap: .5em; margin-top: .3em; padding: .5em .6em; border-radius: .6em; font-size: .88em; color: #444; }
.bl .ic { width: 1em; height: 1em; color: #aaa; }
.bl.on { background: #eef3ff; color: #2563eb; outline: 1.5px dashed #2563eb; }
.fr-blockDrag { width: 12.5em; outline: .15em solid #8b5cf6; }
.mini-docs { display: flex; gap: .5em; }
.mini-docs i { flex: 1; height: 3.4em; border-radius: .6em; background: radial-gradient(circle at 50% 40%, #c9d8f5 0 22%, transparent 23%), #f1f4fb; }
.fr-article { width: 16.5em; }
.art-img { display: block; height: 6em; margin-bottom: .7em; border-radius: .8em; background: linear-gradient(135deg, #dbe8ff, #a5c4f7); }
.fr .atag { color: #2563eb; font-weight: 600; }
.fr-article b { display: block; margin: .3em 0; }
.fr-service { width: 13.5em; }
.sv-img { display: block; height: 6.5em; margin-bottom: .7em; border-radius: .8em; background: linear-gradient(135deg, #7a5a40, #c49d78 55%, #ead7bf); }
.fr-toggle { width: 15.5em; }
.tg-row { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .5em 0; border-top: 1px solid #f0f0f2; font-size: .88em; }
.sw { position: relative; width: 2.4em; height: 1.35em; border-radius: 1em; background: #ddd; }
.sw::after { content: ''; position: absolute; top: .15em; left: .15em; width: 1.05em; height: 1.05em; border-radius: 50%; background: #fff; }
.sw.on { background: var(--green); }
.sw.on::after { left: 1.2em; }
.field { padding: .15em .6em; border: 1px solid #e5e5ea; border-radius: .4em; font-weight: 600; }
.thumb-s { width: 2.2em; height: 1.6em; border-radius: .3em; background: linear-gradient(135deg, #c49d78, #ead7bf); }
.fr-langs { white-space: nowrap; }
.lg { display: flex; gap: .4em; margin-top: .5em; }
.lg span { padding: .45em .85em; border-radius: 999px; border: 1px solid #ececef; font-size: .9em; }
.lg .on { border-color: #111; background: #111; color: #fff; }
.fr-request { width: 15.5em; }
.fr-request p { margin: .2em 0 .75em; }
.tg-av { display: grid; place-items: center; flex: none; width: 2.3em; height: 2.3em; border-radius: 50%; background: #2aabee; color: #fff; }
.fr-product { width: 11.5em; }
.bottle { display: grid; place-items: end center; height: 7em; margin-bottom: .6em; padding-bottom: .6em; border-radius: .8em; background: linear-gradient(150deg, #fde4f4, #efa6f6); }
.bottle i { position: relative; width: 2.4em; height: 4.4em; border-radius: .7em .7em .5em .5em; background: #fff; box-shadow: inset 0 -1.2em 0 #f0c6f5; }
.bottle i::before { content: ''; position: absolute; top: -.8em; left: .7em; width: 1em; height: .9em; border-radius: .2em; background: #7f5fd6; }
.pr-row { display: flex; align-items: center; justify-content: space-between; margin-top: .5em; }
.fr-cart { width: 14.5em; }
.ct-row { display: flex; align-items: center; gap: .6em; padding: .35em 0; font-size: .9em; }
.ct-row i { flex: 1; height: .55em; border-radius: 1em; background: #ececf0; }
.ph-s { width: 2em; height: 2em; border-radius: .5em; }
.ct-total { display: flex; justify-content: space-between; margin: .3em 0 .6em; padding-top: .6em; border-top: 1px dashed #e3e3e8; font-size: .9em; }
.fr-order { width: 15.5em; }
.bell { display: grid; place-items: center; flex: none; width: 2.3em; height: 2.3em; border-radius: 50%; background: #7f5fd6; color: #fff; }
.fr-order2 { display: flex; align-items: center; gap: .6em; padding: .6em .95em; border-radius: .8em .8em .3em .3em; white-space: nowrap; }
.tab-ic { display: grid; place-items: center; width: 1.35em; height: 1.35em; border-radius: .3em; background: #111; color: #fff; font-size: .75em; font-weight: 700; }
.tab-x { margin-left: 1em; color: #aaa; }
.fr-flats { width: 16.5em; }
.fl-row { display: flex; align-items: center; gap: .6em; padding: .5em 0; border-top: 1px solid #f0f0f2; font-size: .9em; }
.fl-row span:nth-child(2) { flex: 1; }
.fl-img { width: 2.2em; height: 2.2em; border-radius: .5em; background: linear-gradient(135deg, #a3b2fb, #efa6f6); }
.code { display: flex; align-items: center; gap: .5em; margin-top: .4em; padding: .55em .85em; border: 1.5px dashed #7f5fd6; border-radius: .7em; font-weight: 700; letter-spacing: .04em; }
.code b { margin-left: .6em; color: #7f5fd6; }
.fr-ai { background: #8b5cf6; color: #fff; }
.spark .ic { width: 1.2em; height: 1.2em; }
.fr-aiText { width: 17.5em; }
.caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -.15em; background: #8b5cf6; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.fr-seo { width: 13.5em; }
.seo-row { display: flex; align-items: center; gap: .5em; padding: .35em 0; font-size: .9em; }
.seo-ok { margin-top: .5em; padding: .45em .7em; border-radius: .6em; background: #effbf3; color: #15803d; font-size: .85em; font-weight: 600; }



/* ---------- обо мне ---------- */
.about { display: grid; grid-template-columns: .9fr 1.1fr; gap: 14px; }
.about-card { display: flex; flex-direction: column; min-height: 460px; padding: 32px; border-radius: var(--radius); background: var(--ink); color: #fff; box-shadow: 0 30px 60px -30px rgba(0,0,0,.5); }
.about-label { margin-bottom: 18px; font-size: 13px; color: rgba(255,255,255,.5); }
.about-card h2 { margin-bottom: 18px; font-size: clamp(30px, 3.2vw, 44px); color: #fff; }
.lang-ka .about-card h2 { font-size: clamp(26px, 2.6vw, 36px); }
.about-card p { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.72); }
.about-card p + p { margin-top: 12px; }
.about-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 32px; }
.about-photo { flex: none; width: 64px; height: 64px; border-radius: 18px; object-fit: cover; }
.about-foot .btn { flex: 1; justify-content: center; }
.about-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stat { display: flex; flex-direction: column; min-height: 220px; padding: 26px; border-radius: var(--radius); background: var(--soft); }
.stat-num { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .35em; }
.stat .odo { font-size: clamp(44px, 4.6vw, 64px); white-space: nowrap; }
.stat .unit { font-size: clamp(20px, 1.9vw, 26px); font-weight: 500; letter-spacing: -.02em; color: var(--ink-2); }
.stat p { margin-top: auto; padding-top: 20px; font-size: 14.5px; color: var(--ink-2); }

/* ---------- ИИ в бизнесе: слева текст, справа — окно Оки один в один как в приложении East Clinic ---------- */
.ai { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: center; }
.ai-lead { max-width: 480px; margin-top: 18px; font-size: 17px; color: var(--muted); }
.ai-case { max-width: 480px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 15px; color: var(--muted); }
.ai-case b { display: block; margin-bottom: 4px; font-weight: 500; color: var(--ink); }
.ai-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 26px; }
.ai-cta span { max-width: 240px; font-size: 14px; color: var(--muted); }

/* Оки: значения взяты из components/oki/OkiWindow.tsx и OkiWindowFx.web.tsx */
@property --oki-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.oki-stage {
  display: flex; justify-content: center; padding: 34px; border-radius: 40px; isolation: isolate;
  background:
    radial-gradient(55% 45% at 12% 88%, rgba(255,159,10,.55), transparent 70%),
    radial-gradient(50% 45% at 90% 78%, rgba(175,82,222,.5), transparent 70%),
    radial-gradient(60% 55% at 62% 6%, rgba(90,200,250,.55), transparent 70%),
    #e8ebf7;
}
.oki-wrap { position: relative; width: 100%; max-width: 520px; }
.oki-glow { position: absolute; inset: -2px; z-index: 0; border-radius: 46px; background: conic-gradient(from var(--oki-angle), #5AC8FA, #AF52DE, #FF2D55, #FF9F0A, #FFD60A, #5AC8FA); filter: blur(9px); opacity: 0; }
.oki-glow.hello { animation: oki-hello 1300ms cubic-bezier(.23,1,.32,1) both; }
.oki-glow.busy { opacity: .85; animation: oki-spin 3.2s linear infinite; }
@keyframes oki-hello { 0% { opacity: 0; --oki-angle: 0deg; } 30% { opacity: .9; } 100% { opacity: 0; --oki-angle: 200deg; } }
@keyframes oki-spin { to { --oki-angle: 360deg; } }
.oki-win {
  position: relative; z-index: 1; display: flex; flex-direction: column; height: 660px; overflow: hidden;
  border-radius: 44px; color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans Georgian', sans-serif;
  background-image: linear-gradient(to bottom, rgba(4,4,6,.96) 0%, rgba(6,6,9,.93) 38%, rgba(14,14,18,.70) 68%, rgba(40,40,46,.30) 100%);
  backdrop-filter: blur(34px) saturate(180%); -webkit-backdrop-filter: blur(34px) saturate(180%);
  box-shadow: 0 30px 90px rgba(0,0,0,.40), inset 0 0 0 1px rgba(255,255,255,.16), inset 0 -1.5px 1px rgba(255,255,255,.30), inset 0 -22px 34px -18px rgba(255,255,255,.16);
}
.oki-head { display: flex; flex: none; align-items: center; gap: 12px; padding: 16px 20px 12px; }
.oki-tool { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 26px; background: rgba(255,255,255,.13); }
.oki-tool .ic { width: 18px; height: 18px; color: #fff; }
.oki-tool.m { margin-left: -4px; }
.oki-tool.m .ic { width: 15px; height: 15px; color: rgba(255,255,255,.56); }
.oki-tool.x .ic { width: 16px; height: 16px; }
.oki-face { flex: none; width: 36px; height: 36px; object-fit: contain; transform: scale(1.27) translateY(-1.4%); filter: saturate(1.45) brightness(1.12) contrast(1.04); }
.oki-who b { display: block; font-size: 15px; font-weight: 600; line-height: 19px; }
.oki-who small { display: block; font-size: 12.5px; line-height: 16px; color: rgba(255,255,255,.56); }
.oki-sp { flex: 1; }
.oki-thread { display: flex; flex: 1; flex-direction: column; gap: 16px; min-height: 0; padding: 4px 20px 8px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.oki-thread::-webkit-scrollbar { display: none; }
.oki-hello { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 0 4px; }
.oki-hello img { width: 96px; height: 96px; filter: saturate(1.45) brightness(1.12) contrast(1.04); }
.oki-hello p { font-size: 24px; font-weight: 500; letter-spacing: -.3px; }
.oki-q { align-self: flex-end; max-width: 86%; padding: 9px 14px; border-radius: 20px; background: rgba(255,255,255,.13); border: .5px solid rgba(255,255,255,.16); font-size: 15.5px; line-height: 21px; animation: oki-in .35s var(--ease); }
.oki-a { display: flex; flex-direction: column; gap: 10px; font-size: 16.5px; line-height: 24px; animation: oki-in .45s var(--ease); }
@keyframes oki-in { from { opacity: 0; transform: translateY(10px); } }
.oki-skills { padding: 0 12px; border-radius: 20px; background: rgba(255,255,255,.13); }
.oki-skill { display: flex; gap: 11px; padding: 11px 0; border-top: .5px solid rgba(255,255,255,.16); }
.oki-skill:first-child { border-top: 0; }
.oki-sic { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.14); }
.oki-sic .ic { width: 16px; height: 16px; color: #fff; }
.oki-skill b { display: block; font-size: 15.5px; font-weight: 600; line-height: 20px; }
.oki-skill p { margin-top: 2px; font-size: 14px; line-height: 19px; color: rgba(255,255,255,.86); }
.oki-steps { display: flex; flex-direction: column; gap: 6px; }
.oki-step { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 19px; color: rgba(255,255,255,.56); }
.oki-step .ic { width: 15px; height: 15px; color: #34D399; stroke-width: 2.6; }
.oki-step.now { font-size: 15px; line-height: 20px; color: rgba(255,255,255,.86); }
.oki-dots { display: inline-flex; gap: 5px; }
.oki-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.56); animation: oki-dot 1.1s ease-in-out infinite; }
.oki-dots i:nth-child(2) { animation-delay: .15s; }
.oki-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes oki-dot { 0%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }
.oki-table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid #38383A; border-radius: 14px; background: rgba(14,14,18,.82); font-size: 14px; line-height: 19px; }
.oki-table th { padding: 7px 10px; background: rgba(255,255,255,.07); font-weight: 600; text-align: left; }
.oki-table td { padding: 7px 10px; border-top: 1px solid #38383A; color: rgba(255,255,255,.86); }
.oki-btn { align-self: flex-start; padding: 9px 16px; border-radius: 18px; background: #fff; color: #000; font-size: 14px; font-weight: 600; }
.oki-chips { display: flex; flex: none; gap: 8px; padding: 12px 20px 0; overflow-x: auto; scrollbar-width: none; }
.oki-chips::-webkit-scrollbar { display: none; }
.oki-chip { flex: none; height: 38px; padding: 0 15px; border-radius: 19px; background: rgba(255,255,255,.13); border: .5px solid rgba(255,255,255,.16); color: #fff; font-size: 14.5px; white-space: nowrap; transition: background .2s, opacity .3s; }
.oki-chip:hover { background: rgba(255,255,255,.2); }
.oki-chip:disabled { opacity: .45; cursor: default; }
.oki-ask { display: flex; flex: none; align-items: flex-end; gap: 8px; padding: 12px 20px 20px; }
.oki-field { display: flex; flex: 1; align-items: center; min-height: 44px; padding: 10px 16px; border-radius: 26px; background: rgba(255,255,255,.14); border: .5px solid rgba(255,255,255,.16); cursor: text; }
.oki-field input { width: 100%; padding: 0; border: 0; outline: none; background: none; color: #fff; font: inherit; font-size: 16px; line-height: 22px; }
.oki-field input::placeholder { color: rgba(255,255,255,.56); }
.oki-send { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.14); border: .5px solid rgba(255,255,255,.16); color: #fff; transition: background .2s, color .2s; }
.oki-send .ic { width: 18px; height: 18px; }
.oki-send .up { display: none; stroke-width: 2.4; }
.oki-send.on { background: #fff; border-color: transparent; color: #000; }
.oki-send.on .mic { display: none; }
.oki-send.on .up { display: block; }

.fr-calls { width: 21em; }
.cw { display: flex; align-items: center; gap: .22em; height: 3.2em; margin: .2em 0 .4em; }
.cw i { flex: 1; border-radius: .2em; }
.cw .a { background: #3a5bff; }
.cw .b { background: #c7cdf9; }
.cw-leg { display: flex; gap: 1em; margin-bottom: .5em; font-size: .78em; color: #6b6b75; }
.cw-leg span::before { content: ''; display: inline-block; width: .7em; height: .7em; margin-right: .35em; border-radius: 50%; vertical-align: -.05em; }
.cw-leg .a::before { background: #3a5bff; }
.cw-leg .b::before { background: #c7cdf9; }
.cw-tag { display: flex; align-items: center; gap: .55em; padding: .4em 0; border-top: 1px solid #f0f0f2; font-size: .88em; }
.ok-i.bad { background: #ef4444; }
.cw-sum { display: flex; align-items: center; gap: .45em; margin-top: .55em; padding: .6em .8em; border-radius: .7em; background: #f3f0ff; color: #5b3fd6; font-size: .85em; font-weight: 600; }
.fr-llm { display: flex; align-items: center; gap: .75em; white-space: nowrap; }
.llm-ic { display: grid; place-items: center; flex: none; width: 2.4em; height: 2.4em; border-radius: 50%; background: #111; color: #fff; }
.fr-llm small { display: flex; align-items: center; gap: .4em; }
.fr-llm .dot { width: .55em; height: .55em; box-shadow: none; }

/* ---------- живая демо-админка ---------- */
.demo { display: grid; grid-template-columns: 360px 1fr; gap: 18px; padding: 24px; border-radius: 36px; background: var(--soft); }
.demo-admin { display: flex; flex-direction: column; gap: 18px; padding: 22px; border-radius: 26px; background: #fff; box-shadow: 0 20px 40px -24px rgba(0,0,0,.2); }
.da-head { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.da-field { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--muted); }
.da-field input { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; font: inherit; font-size: 16px; color: var(--ink); background: #fff; transition: border-color .2s, box-shadow .2s; }
.da-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(58,91,255,.12); }
.da-price { display: flex; gap: 8px; }
.da-price input { text-align: center; -moz-appearance: textfield; }
.da-price input::-webkit-outer-spin-button, .da-price input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.da-price button { flex: none; width: 46px; border: 1px solid var(--line); border-radius: 12px; font-size: 20px; transition: background .2s; }
.da-price button:hover { background: var(--soft); }
.da-price button:active { transform: scale(.94); }
.da-photos { display: flex; gap: 10px; }
.da-photos button { width: 58px; height: 58px; border-radius: 14px; transition: transform .2s var(--ease), box-shadow .2s; }
.da-photos button:hover { transform: translateY(-2px); }
.da-photos button.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent); }
.da-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px; cursor: pointer; }
.da-sw { position: relative; flex: none; width: 48px; height: 28px; border-radius: 99px; background: #d9d9de; appearance: none; -webkit-appearance: none; cursor: pointer; transition: background .25s; }
.da-sw::before { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .3s var(--ease); }
.da-sw:checked { background: var(--green); }
.da-sw:checked::before { transform: translateX(20px); }
.da-sw:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ph-a { background: linear-gradient(135deg, #7a5a40, #c49d78 55%, #ead7bf); }
.ph-b { background: linear-gradient(135deg, #1f5f9e, #5aa6e0 55%, #c8e6ff); }
.ph-c { background: linear-gradient(135deg, #2f6b4f, #6cbf8f 55%, #d6f3e1); }
.demo-site { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 26px; background: #fff; box-shadow: 0 20px 40px -24px rgba(0,0,0,.2); }
.ds-top { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.ds-top i { width: 10px; height: 10px; border-radius: 50%; background: #e3e3e7; }
.ds-top b { margin-left: 8px; padding: 5px 14px; border-radius: 99px; background: var(--soft); font-size: 12px; font-weight: 500; color: var(--muted); }
.ds-langs { display: flex; gap: 2px; margin-left: auto; padding: 3px; border-radius: 10px; background: var(--soft); }
.ds-langs button { padding: 4px 9px; border-radius: 7px; font-size: 12px; font-weight: 500; color: var(--muted); }
.ds-langs button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.ds-body { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-content: center; padding: 32px; background: linear-gradient(#faf7f3, #fff); }
.ds-card { position: relative; padding: 14px; border-radius: 22px; background: #fff; box-shadow: 0 14px 34px -16px rgba(60,40,20,.28); transition: opacity .4s, filter .4s; }
.ds-img { display: block; aspect-ratio: 4 / 3; margin-bottom: 14px; border-radius: 14px; transition: opacity .3s; }
.ds-card b { display: block; min-height: 1.3em; font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.ds-card small { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); }
.ds-btn { display: block; min-height: 40px; margin-top: 14px; padding: 10px; border-radius: 12px; background: #a07850; color: #fff; font-size: 14px; font-weight: 600; text-align: center; }
.ds-card.ghost i { display: block; height: 12px; width: 70%; margin-top: 4px; border-radius: 99px; background: #ecebe8; }
.ds-card.ghost i.s { width: 45%; margin-top: 10px; }
.ds-card.ghost .ds-btn { background: #e9e2da; }
.ds-hidden { position: absolute; top: 24px; left: 24px; padding: 5px 11px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 12px; opacity: 0; transition: opacity .3s; }
.ds-card.off { opacity: .45; filter: grayscale(1); }
.ds-card.off .ds-hidden { opacity: 1; }
.ds-card.flash { animation: flash .7s var(--ease); }
@keyframes flash { from { box-shadow: 0 0 0 0 rgba(58,91,255,.55), 0 14px 34px -16px rgba(60,40,20,.28); } to { box-shadow: 0 0 0 16px rgba(58,91,255,0), 0 14px 34px -16px rgba(60,40,20,.28); } }
.ds-toast { position: absolute; left: 50%; top: 62px; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 14px; white-space: nowrap; opacity: 0; transform: translate(-50%, -12px); transition: opacity .3s, transform .4s var(--ease); pointer-events: none; z-index: 2; }
.ds-toast .ic { width: 16px; height: 16px; color: #6ee7a0; stroke-width: 2.6; }
.ds-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- услуги вкладками ---------- */
.tabs { display: flex; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; margin-bottom: -1px; padding: 14px 20px; border-bottom: 2px solid transparent; font-size: 15px; color: var(--muted); transition: color .2s, border-color .3s; }
.tab:hover { color: var(--ink); }
.tab.on { border-color: var(--ink); color: var(--ink); }
.panel { display: grid; grid-template-columns: 1.5fr 1fr; gap: 56px; padding: 44px 0 0; }
.js .panel { display: none; }
.js .panel.on { display: grid; animation: panel-in .6s var(--ease); }
@keyframes panel-in { from { opacity: 0; transform: translateY(12px); } }
.promise { font-size: clamp(24px, 2.8vw, 38px); font-weight: 500; letter-spacing: -.025em; line-height: 1.2; }
.lang-ka .promise { font-size: clamp(20px, 2.2vw, 30px); letter-spacing: 0; }
.panel-side p { font-size: 15px; color: var(--muted); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 22px; }
.pills span { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); font-size: 14px; }
.panel-case { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 18px; background: var(--tint); transition: transform .3s var(--ease); }
.panel-case:hover { transform: translateY(-2px); }
.panel-case small { font-size: 12px; color: var(--muted); }
.panel-case .ic { margin-left: auto; }

/* ---------- принципы ---------- */
.pr-nav { display: flex; align-items: center; gap: 10px; }
.pr-count { margin-right: 8px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pr-count b { color: var(--ink); font-weight: 500; }
.round { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); transition: background .2s, color .2s, border-color .2s; }
.round:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.principles { display: grid; }
.pr { grid-area: 1 / 1; }
.pr p { max-width: 1020px; font-size: clamp(28px, 3.6vw, 52px); font-weight: 500; letter-spacing: -.03em; line-height: 1.14; }
.lang-ka .pr p { font-size: clamp(22px, 2.8vw, 40px); letter-spacing: 0; line-height: 1.3; }
.js .pr { opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .5s var(--ease), transform .7s var(--ease), visibility 0s .5s; }
.js .pr.on { opacity: 1; visibility: visible; transform: none; transition: opacity .6s var(--ease) .1s, transform .8s var(--ease) .1s; }
html:not(.js) .principles { display: block; }
html:not(.js) .pr + .pr { margin-top: 28px; }
.sign { display: flex; align-items: center; gap: 12px; margin-top: 30px; font-size: 14px; color: var(--muted); line-height: 1.35; }
.sign b { color: var(--ink); font-weight: 500; }
.nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 64px; }
.num { display: flex; flex-direction: column; min-height: 240px; padding: 26px 26px 24px; border-radius: var(--radius); background: var(--soft); transition: transform .4s var(--ease); }
a.num:hover { transform: translateY(-4px); }
.num p { margin-top: auto; padding-top: 24px; font-size: 14.5px; color: var(--muted); }
.num.dark { background: var(--ink); color: #fff; }
.num.dark p { color: rgba(255,255,255,.62); }
.num-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 13px; font-weight: 500; }
.num-link .ic { width: 14px; height: 14px; }

/* цифры-барабаны */
.odo { display: inline-flex; font-size: clamp(56px, 6vw, 80px); font-weight: 500; letter-spacing: -.045em; line-height: 1; }
.odo .dg { display: inline-block; height: 1em; overflow: hidden; }
.odo .dg > span { display: flex; flex-direction: column; transition: transform 1.6s var(--ease); transition-delay: calc(var(--k) * 90ms); }
.odo .dg > span > span { display: block; height: 1em; }

/* ---------- этапы ---------- */
.steps { list-style: none; border-top: 1px solid var(--line); }
.step { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.step-no { padding-top: 4px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.step h3 { margin-bottom: 6px; font-size: 22px; font-weight: 500; letter-spacing: -.015em; }
.step p { max-width: 640px; font-size: 15px; color: var(--muted); }

/* ---------- контакты ---------- */
.contact { position: relative; overflow: hidden; padding: 80px 32px; border-radius: 36px; background: var(--ink); color: #fff; text-align: center; }
.contact::before { content: ''; position: absolute; inset: -40% -10% auto; height: 120%; pointer-events: none; background: radial-gradient(40% 50% at 30% 50%, rgba(132,227,184,.18), transparent 70%), radial-gradient(40% 50% at 70% 40%, rgba(58,91,255,.3), transparent 70%); }
.contact > * { position: relative; }
.contact h2 { margin-bottom: 14px; }
.contact p { max-width: 480px; margin: 0 auto 30px; font-size: 16px; color: rgba(255,255,255,.64); }
.contact-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ---------- подвал и меню-таблетка ---------- */
.footer { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 20px; max-width: 1160px; margin: 0 auto; padding: 64px 32px 120px; font-size: 12.5px; color: var(--muted); line-height: 1.7; }
.footer b { color: var(--ink); font-weight: 500; }
.footer-r { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }

.pill {
  position: fixed; left: 50%; bottom: 18px; z-index: 50;
  display: flex; align-items: center; gap: 2px; padding: 5px;
  border-radius: 999px; background: rgba(18,18,22,.88); color: #fff; font-size: 14px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.5);
  opacity: 0; transform: translate(-50%, 140%);
  transition: transform .6s var(--ease), opacity .4s;
}
.pill.show { opacity: 1; transform: translate(-50%, 0); }
.pill .roll { margin: 9px 14px; color: rgba(255,255,255,.82); }
.pill .roll:hover { color: #fff; }
.pill-cta { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 500; white-space: nowrap; }
.pill-cta .ic { width: 15px; height: 15px; color: var(--accent); }

/* ---------- страница кейса ---------- */
.page-case .nav:not(.past) { background: var(--c); color: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
.page-case .nav:not(.past) .nav-links { color: rgba(255,255,255,.86); }
.page-case .nav:not(.past) .langs { background: rgba(255,255,255,.14); }
.page-case .nav:not(.past) .langs a { color: rgba(255,255,255,.7); }
.page-case .nav:not(.past) .langs a.on { background: #fff; color: var(--ink); }
.page-case .nav:not(.past) .nav-cta { background: #fff; color: var(--ink); box-shadow: none; }
.cover { position: relative; overflow: hidden; padding: 40px 32px 0; border-radius: 0 0 44px 44px; background: var(--c); color: #fff; text-align: center; }
.back { position: absolute; top: 24px; left: 28px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.14); font-size: 14px; transition: background .2s; }
.back:hover { background: rgba(255,255,255,.24); }
.back .ic { width: 16px; height: 16px; }
.cover-tags { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 44px 0 22px; }
.cover-tags span { padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.4); font-size: 13px; }
.cover-tags .soft { border-color: transparent; background: rgba(255,255,255,.92); color: var(--ink); }
.cover h1 { font-size: clamp(42px, 6.4vw, 92px); font-weight: 500; letter-spacing: -.04em; line-height: 1.02; }
.lang-ka .cover h1 { font-size: clamp(32px, 5vw, 70px); letter-spacing: -.01em; line-height: 1.15; }
.cover-sum { max-width: 720px; margin: 22px auto 0; font-size: 19px; color: rgba(255,255,255,.82); }
.cover-shot { max-width: 1040px; margin: 60px auto 0; overflow: hidden; border-radius: 26px 26px 0 0; box-shadow: 0 -10px 60px rgba(0,0,0,.25); will-change: transform; }
.vis-cover { aspect-ratio: 16 / 9; }

.passport { max-width: 1160px; margin: 0 auto; padding: 40px 32px 0; }
.passport dl { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.passport dt { margin-bottom: 4px; font-size: 12.5px; color: var(--muted); }
.passport dd { font-size: 15px; font-weight: 500; line-height: 1.35; }

.chapter { display: grid; grid-template-columns: 250px 1fr; gap: 40px; max-width: 1160px; margin: 0 auto; padding: 120px 32px 0; }
.ch-label { position: sticky; top: 96px; align-self: start; font-size: 14px; color: var(--muted); }
.ch-label span { color: var(--ink); font-weight: 600; }
.chapter.wide { grid-template-columns: 1fr; }
.chapter.wide .ch-label { position: static; }
.big-text { max-width: 840px; font-size: clamp(20px, 2vw, 28px); letter-spacing: -.012em; line-height: 1.4; }
.ch-body h4 { margin: 40px 0 12px; font-size: 14px; font-weight: 500; color: var(--muted); }
.tasks { list-style: none; max-width: 840px; }
.tasks li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 17px; }
.tasks .ic { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: #e8f8ee; color: #15803d; stroke-width: 2.6; }
.facts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.fact { padding: 28px; border-radius: var(--radius); background: var(--tint); }
.fact p { margin-top: 18px; font-size: 15px; color: var(--ink-2); }

.pair { margin: 0 0 80px; }
.stage-box { position: relative; aspect-ratio: 16 / 8.5; overflow: hidden; border-radius: 34px; background: var(--tint); }
.stage-vis { position: absolute; top: 13%; left: 50%; width: 60%; overflow: hidden; border-radius: 22px 22px 0 0; transform: translateX(-50%); box-shadow: 0 30px 60px -20px rgba(0,0,0,.35); }
.stage-vis .vis { aspect-ratio: 4 / 3; }
.pair figcaption { max-width: 660px; margin: 26px auto 0; font-size: 18px; line-height: 1.5; color: var(--ink-2); }
.focus-title { margin-bottom: 18px; font-size: clamp(32px, 4vw, 56px); font-weight: 500; letter-spacing: -.035em; line-height: 1.05; }
.stage-box.focus { margin-top: 40px; background: var(--c); }
.design { display: flex; align-items: center; flex-wrap: wrap; gap: 56px; }
.swatches { display: flex; padding-left: 18px; }
.swatches span { width: 88px; height: 88px; margin-left: -18px; border-radius: 50%; border: 4px solid #fff; background: var(--s); box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.type-sample { display: flex; flex-direction: column; }
.type-sample b { font-size: 96px; font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.type-sample span { margin-top: 8px; font-size: 16px; font-weight: 500; }
.type-sample small { font-size: 13px; color: var(--muted); }
.result-text { max-width: 900px; font-size: clamp(24px, 2.6vw, 38px); font-weight: 500; letter-spacing: -.025em; line-height: 1.25; }
.lang-ka .result-text { font-size: clamp(20px, 2.1vw, 30px); letter-spacing: 0; }
.stack { margin-top: 22px; color: var(--muted); }

.industry { max-width: 1096px; margin: 130px auto 0; padding: 72px 32px; border-radius: 36px; background: var(--ink); color: #fff; text-align: center; }
.industry h2 { margin-bottom: 30px; }
.more { margin-top: 130px; overflow: hidden; }
.more-head { max-width: 1160px; margin: 0 auto 30px; padding: 0 32px; }
.more-track { display: flex; gap: 14px; padding: 0 32px 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.more-track::-webkit-scrollbar { display: none; }
.more-track.h { width: max-content; overflow: visible; scroll-snap-type: none; will-change: transform; }
.card.mini { flex: 0 0 min(440px, 82vw); scroll-snap-align: start; }

.next-case { position: relative; display: block; overflow: hidden; margin: 130px 16px 0; padding: 72px 32px 0; border-radius: 44px; background: var(--c); color: #fff; text-align: center; }
.next-label { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.14); font-size: 14px; }
.next-label .ic { width: 15px; height: 15px; }
.next-title { display: block; margin: 24px 0 10px; font-size: clamp(44px, 7vw, 112px); font-weight: 500; letter-spacing: -.045em; line-height: 1; }
.lang-ka .next-title { font-size: clamp(34px, 5.5vw, 84px); letter-spacing: -.01em; }
.next-sum { display: block; font-size: 18px; opacity: .8; }
.next-shot { display: block; max-width: 900px; margin: 54px auto 0; overflow: hidden; border-radius: 26px 26px 0 0; transform: translateY(40px); transition: transform .8s var(--ease); }
.next-case:hover .next-shot { transform: translateY(0); }
.page-case .footer { padding-top: 48px; }

/* ---------- схематичные окна и телефоны ---------- */
.vis { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--g); }
.vis-in { position: absolute; inset: 0; container-type: inline-size; }
.vis-portal   { --g: radial-gradient(120% 90% at 18% 0%, #5aa585 0%, #1d3a30 72%); }
.vis-app      { --g: linear-gradient(160deg, #ffc8a8 0%, #ff6a4a 100%); }
.vis-clinic   { --g: linear-gradient(160deg, #d6e6ff 0%, #5b8ef0 100%); }
.vis-serenity { --g: linear-gradient(160deg, #f1e5d3 0%, #b48a64 100%); }
.vis-shop     { --g: linear-gradient(160deg, #f7dcf3 0%, #a68ae8 100%); }
.vis-builder  { --g: radial-gradient(120% 90% at 82% 0%, #4d3f82 0%, #15141c 72%); }
.mk { position: absolute; }
.ln { display: block; flex: none; height: 1.1cqw; border-radius: 1cqw; background: #e7e7eb; }
.ln.d { background: #2a2a30; }
.ln.big { height: 2cqw; }
.ln.w { background: rgba(255,255,255,.92); }
.ln.l { background: rgba(255,255,255,.18); }
.ln.l.on { background: #84e3b8; }
.av { flex: none; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: #dfe5e2; }
.av.lg { width: 5.4cqw; height: 5.4cqw; background: linear-gradient(160deg, #e5edff, #b9cdf6); }
.mk-win { overflow: hidden; border-radius: 1.8cqw; background: #fff; box-shadow: 0 2.4cqw 6cqw rgba(0,0,0,.22); }
.mk-top { display: flex; align-items: center; gap: .8cqw; height: 4cqw; padding: 0 1.8cqw; border-bottom: 1px solid #f0f0f2; }
.mk-top i { width: 1cqw; height: 1cqw; border-radius: 50%; background: #e2e2e6; }
.mk-top b { width: 34%; height: 1.9cqw; margin-left: 2cqw; border-radius: 1cqw; background: #f2f2f4; }
.mk-phone { padding: .9cqw; border-radius: 5cqw; background: #0e0e10; box-shadow: 0 3cqw 6cqw rgba(0,0,0,.28); }
.mk-scr { position: relative; display: flex; flex-direction: column; gap: 1.4cqw; height: 100%; padding: 4.6cqw 2.2cqw 2.2cqw; overflow: hidden; border-radius: 4.2cqw; background: #fff; }
.mk-scr::before { content: ''; position: absolute; top: 1.2cqw; left: 50%; width: 32%; height: 1.8cqw; transform: translateX(-50%); border-radius: 1cqw; background: #0e0e10; }
.scr-head { display: flex; align-items: center; gap: 1.2cqw; padding-bottom: 1.4cqw; border-bottom: 1px solid #f1f1f3; }
.dash { display: grid; grid-template-columns: 22% 1fr; height: calc(100% - 4cqw); }
.dash-side { display: flex; flex-direction: column; gap: 1.7cqw; padding: 2.4cqw 2cqw; background: #13261f; }
.dash-logo { width: 3cqw; height: 3cqw; margin-bottom: 1cqw; border-radius: .8cqw; background: #84e3b8; }
.dash-main { display: flex; flex-direction: column; gap: 2cqw; min-width: 0; padding: 2.4cqw; }
.dash-head { display: flex; align-items: center; justify-content: space-between; }
.pill-mini { width: 9cqw; height: 2.6cqw; border-radius: 2cqw; background: #111; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqw; }
.kpi { display: flex; flex-direction: column; gap: 1.3cqw; padding: 1.6cqw; border: 1px solid #efeff1; border-radius: 1.3cqw; }
.kpi em { display: block; height: 2.2cqw; border-radius: .6cqw; background: #1f8f63; }
.kpi em.b { background: #3b82f6; }
.kpi em.o { background: #f59e0b; }
.chart { display: flex; align-items: flex-end; gap: .9cqw; height: 16cqw; padding: 1.6cqw; border-radius: 1.3cqw; background: #f5f8f6; }
.chart i { flex: 1; border-radius: .5cqw .5cqw .2cqw .2cqw; background: linear-gradient(to top, #2aa874, #a3e6c8); }
.rows { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: 1.4cqw; padding: 1.1cqw 0; border-bottom: 1px solid #f1f1f3; }
.tag-mini { width: 6cqw; height: 1.9cqw; margin-left: auto; border-radius: 1cqw; background: #e3f6ec; }
.bub { flex: none; height: 4.4cqw; border-radius: 2cqw; }
.bub.in { align-self: flex-start; background: #f1f1f4; border-bottom-left-radius: .6cqw; }
.bub.out { align-self: flex-end; background: #ff7a59; border-bottom-right-radius: .6cqw; }
.bub.img { width: 62%; height: 13cqw; background: linear-gradient(135deg, #ffd3bd, #ff8f6b); }
.scr-input { flex: none; height: 4cqw; margin-top: auto; border-radius: 2cqw; border: 1px solid #ececef; }
.video { display: grid; place-items: center; flex: none; height: 15cqw; border-radius: 1.6cqw; background: linear-gradient(135deg, #ffd0b6, #ff8a65); }
.play { position: relative; width: 4.4cqw; height: 4.4cqw; border-radius: 50%; background: rgba(255,255,255,.92); }
.play::after { content: ''; position: absolute; left: 1.8cqw; top: 1.3cqw; border-left: 1.4cqw solid #ff6a4a; border-top: .9cqw solid transparent; border-bottom: .9cqw solid transparent; }
.lesson-s { display: flex; align-items: center; gap: 1.2cqw; padding: 1.1cqw; border-radius: 1.3cqw; background: #f7f7f8; }
.n-dot { display: grid; place-items: center; flex: none; width: 2.8cqw; height: 2.8cqw; border-radius: 50%; background: #e7e7ea; color: #555; font-size: 1.4cqw; font-weight: 600; }
.n-dot.on { background: #ff6a4a; color: #fff; }
.site { display: flex; flex-direction: column; gap: 2.8cqw; padding: 2.4cqw 3cqw; }
.site-nav { display: flex; align-items: center; gap: 2cqw; }
.logo-dot { width: 3cqw; height: 3cqw; margin-right: 1cqw; border-radius: 50%; background: #2563eb; }
.btn-mini { display: block; flex: none; width: 9cqw; height: 2.8cqw; margin-left: auto; border-radius: 2cqw; background: #2563eb; }
.btn-mini.wide { width: 14cqw; margin: 1cqw 0 0; }
.btn-mini.light { margin: 1.2cqw auto 0; background: rgba(255,255,255,.88); }
.btn-mini.dark { margin-top: auto; background: #111; }
.site-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3cqw; align-items: center; }
.site-copy { display: flex; flex-direction: column; gap: 1.4cqw; }
.site-img { position: relative; height: 22cqw; overflow: hidden; border-radius: 2cqw; background: linear-gradient(160deg, #dbe8ff, #8fb5f7); }
.doc { position: absolute; bottom: 0; left: 50%; width: 52%; height: 62%; transform: translateX(-50%); border-radius: 48% 48% 0 0 / 38% 38% 0 0; background: linear-gradient(#fff, #e5eeff); }
.doc::before { content: ''; position: absolute; left: 50%; top: -48%; width: 46%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: #f3d9c6; }
.docs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6cqw; }
.doc-card { display: flex; flex-direction: column; align-items: center; gap: 1cqw; padding: 1.8cqw 1.2cqw; border: 1px solid #eef0f6; border-radius: 1.4cqw; }
.spa-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4cqw; height: 27cqw; background: linear-gradient(135deg, #7a5a40, #c49d78 55%, #ead7bf); }
.spa-list { display: flex; flex-direction: column; gap: 1.6cqw; padding: 2.6cqw; }
.spa-item { display: flex; align-items: center; gap: 1.6cqw; }
.spa-item .ln:last-child { margin-left: auto; }
.sq { flex: none; width: 5cqw; height: 5cqw; border-radius: 1.2cqw; background: linear-gradient(#ead7bf, #c49d78); }
.adm-row { display: flex; align-items: center; justify-content: space-between; padding: 1.2cqw 0; border-bottom: 1px solid #f1f1f3; }
.tgl { position: relative; flex: none; width: 4.4cqw; height: 2.4cqw; border-radius: 2cqw; background: #e3e3e7; }
.tgl::after { content: ''; position: absolute; top: .3cqw; left: .3cqw; width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: #fff; }
.tgl.on { background: var(--green); }
.tgl.on::after { left: 2.3cqw; }
.cart-dot { width: 2.6cqw; height: 2.6cqw; margin-left: auto; border-radius: 50%; background: #9b6cf0; }
.prods { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw 1.3cqw; }
.prod { display: flex; flex-direction: column; gap: .9cqw; }
.ph { display: block; flex: none; height: 11cqw; border-radius: 1.4cqw; }
.ph.sm { width: 5cqw; height: 5cqw; }
.p1 { background: linear-gradient(150deg, #fde4f4, #efa6f6); }
.p2 { background: linear-gradient(150deg, #e2e8ff, #a3b2fb); }
.p3 { background: linear-gradient(150deg, #fff3cc, #fbcf4f); }
.p4 { background: linear-gradient(150deg, #dcfbe6, #80e7a6); }
.mk-card { display: flex; flex-direction: column; gap: 1.7cqw; padding: 2.6cqw; border-radius: 2.2cqw; background: #fff; box-shadow: 0 2.4cqw 6cqw rgba(40,10,80,.22); }
.cart-row { display: flex; align-items: center; gap: 1.4cqw; }
.cart-row .ln:last-child { margin-left: auto; }
.cart-total { display: flex; justify-content: space-between; padding-top: 1.6cqw; border-top: 1px dashed #e6e6ea; }
.mk-win.dark { background: #1e1c28; }
.mk-win.dark .mk-top { border-color: rgba(255,255,255,.07); }
.mk-win.dark .mk-top i { background: rgba(255,255,255,.16); }
.mk-win.dark .mk-top b { background: rgba(255,255,255,.07); }
.bld { display: grid; grid-template-columns: 17% 1fr; height: calc(100% - 4cqw); }
.bld-side { display: flex; flex-direction: column; gap: 1.4cqw; padding: 2.2cqw 1.8cqw; border-right: 1px solid rgba(255,255,255,.07); }
.thumb { height: 5cqw; border-radius: 1cqw; background: rgba(255,255,255,.08); }
.bld-canvas { display: flex; flex-direction: column; gap: 1.8cqw; margin: 2.4cqw; padding: 2.4cqw; border-radius: 1.4cqw; background: #fff; }
.sec { display: flex; flex-direction: column; gap: 1.2cqw; padding: 2cqw; border: 1.5px dashed #e3e3ea; border-radius: 1.2cqw; }
.sec.hero-s { background: #f5f2ff; }
.sec.cols { flex-direction: row; gap: 1.4cqw; }
.sec.cols span { flex: 1; height: 8cqw; border-radius: 1cqw; background: #f1f1f4; }
.mk-drag { display: flex; flex-direction: column; gap: 1.2cqw; padding: 2.2cqw; border-radius: 1.4cqw; background: #fff; outline: .35cqw solid #8b5cf6; transform: rotate(-4deg); box-shadow: 0 3cqw 6cqw rgba(0,0,0,.4); }

/* ---------- появление при прокрутке ---------- */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .js .reveal, .js .split.is-split .w > span, .js .pr { transform: none !important; transition: opacity .3s !important; }
  .odo .dg > span { transition: none; }
}

/* ---------- планшет ---------- */
@media (max-width: 980px) {
  .nav { grid-template-columns: 1fr auto; padding: 0 20px; }
  .nav-links { display: none; }
  .demo { grid-template-columns: 1fr; }
  .about { grid-template-columns: 1fr; }
  .about-card { min-height: 0; }
  .ai { grid-template-columns: 1fr; gap: 40px; }
  .section { padding: 110px 20px 0; }
  .panel { grid-template-columns: 1fr; gap: 24px; }
  .chapter { grid-template-columns: 1fr; gap: 18px; padding: 90px 20px 0; }
  .ch-label { position: static; }
  .passport { padding: 32px 20px 0; }
  .passport dl { grid-template-columns: repeat(2, 1fr); }
  .stage-box { aspect-ratio: 4 / 3; }
  .stage-vis { width: 76%; }
  .art-stage .art-in { font-size: clamp(7px, 2.2cqi, 15px); }
  .footer { padding: 48px 20px 110px; }
}

/* ---------- телефон ---------- */
@media (max-width: 680px) {
  .nav { height: 58px; padding: 0 16px; }
  .nav-cta { display: none; }
  .hero { padding: 44px 16px 0; }
  .showcase { --tw: 78vw; }
  .sc-text small { display: none; }
  .sc-cap { padding-left: 18px; }
  .ds-top i { display: none; }
  .ds-top b { margin-left: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .hero-text { font-size: 16px; }
  .hero-cta .btn.lg { width: 100%; justify-content: center; padding: 16px 22px; font-size: 16px; }
      .demo { padding: 12px; border-radius: 26px; }
  .about-stats { grid-template-columns: 1fr; }
  .stat { min-height: 170px; }
  .oki-stage { padding: 10px; border-radius: 28px; }
  .oki-win { height: 600px; border-radius: 34px; }
  .oki-glow { border-radius: 36px; }
  .ds-body { grid-template-columns: 1fr; padding: 20px; }
  .ds-card.ghost { display: none; }
  .section { padding: 90px 16px 0; }
  .works, .nums, .facts-grid { grid-template-columns: 1fr; }
  .card { aspect-ratio: 5 / 5.2; }
  .card-top { top: 18px; left: 18px; right: 16px; }
  .card h3 { font-size: 18px; }
  .card-pill { display: none; }
  .art { inset: 34% 0 0 0; }
  .num { min-height: 190px; }
  .step { grid-template-columns: 1fr; gap: 6px; }
  .contact, .industry { padding: 56px 20px; border-radius: 26px; }
  .contact-btns .btn { width: 100%; justify-content: center; }
  .footer { flex-direction: column; padding: 40px 16px 110px; }
  .footer-r { align-items: flex-start; }
  .pill { bottom: 12px; max-width: calc(100vw - 20px); font-size: 13px; }
  .pill .roll { margin: 8px 10px; }
  .pill .roll:nth-child(n+2) { display: none; }
  .cover { padding: 76px 16px 0; border-radius: 0 0 30px 30px; }
  .back { top: 18px; left: 16px; }
  .cover-tags { margin-top: 0; }
  .cover-sum { font-size: 16px; }
  .cover-shot { margin-top: 40px; border-radius: 18px 18px 0 0; }
  .passport dl { grid-template-columns: 1fr 1fr; gap: 16px; }
  .chapter { padding: 72px 16px 0; }
  .stage-box { aspect-ratio: 4 / 4.2; border-radius: 24px; }
  .stage-vis { top: 10%; width: 84%; }
  .art-stage .art-in { font-size: clamp(6.5px, 2.6cqi, 14px); }
  .pair { margin-bottom: 56px; }
  .pair figcaption { font-size: 16px; }
  .swatches span { width: 60px; height: 60px; }
  .design { gap: 28px; }
  .industry { margin: 90px 16px 0; }
  .more-head, .more-track { padding-left: 16px; padding-right: 16px; }
  .next-case { margin: 90px 10px 0; padding: 52px 18px 0; border-radius: 30px; }
}
/* лента «Больше кейсов», пока закреплена, стоит по центру экрана */
.more.pinning { display: flex; flex-direction: column; justify-content: center; min-height: calc(100vh - 80px); }

/* сцена без макета: куски интерфейса крупнее, сама сцена ниже */
.stage-box.solo { aspect-ratio: 16 / 7; }
.stage-box.solo .art-stage .art-in { font-size: clamp(8px, 2cqi, 21px); }
@media (max-width: 980px) { .stage-box.solo { aspect-ratio: 4 / 3; } .stage-box.solo .art-stage .art-in { font-size: clamp(7px, 2.8cqi, 18px); } }
@media (max-width: 680px) { .stage-box.solo { aspect-ratio: 4 / 5; } .stage-box.solo .art-stage .art-in { font-size: clamp(7px, 3.2cqi, 16px); } }
/* на телефоне куски интерфейса в сценах без макета — аккуратной стопкой, без наложений */
@media (max-width: 680px) {
  .stage-box.solo { aspect-ratio: auto; padding: 40px 16px; }
  .stage-box.solo .art-stage { position: relative; inset: auto; }
  .stage-box.solo .art-in { position: relative; inset: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; font-size: 13px !important; }
  .stage-box.solo .frw { position: relative; left: auto; top: auto; translate: none; }
}

/* ---------- настоящие снимки интерфейсов в рамках ---------- */
.mk-win > .shot { display: block; width: 100%; height: auto; min-height: 100%; object-fit: cover; object-position: top left; }
.mk-scr.has-shot { padding: 0; gap: 0; }
/* у снимков своя шапка экрана — «чёлку» не рисуем, иначе она закрывает заголовок */
.mk-scr.has-shot::before { display: none; }
.mk-scr > .shot { display: block; flex: none; width: 100%; height: auto; }
.dev-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
/* телефон: строка состояния сверху, снимок под ней */
.dev-phone .dev-scr { display: flex; flex-direction: column; container-type: inline-size; }
.dev-phone .dev-img { position: static; flex: 1; min-height: 0; height: auto; object-position: top center; }
.mk-scr.has-shot { container-type: inline-size; }
.sbar { position: relative; z-index: 1; display: flex; flex: none; align-items: center; justify-content: space-between; height: 13cqw; padding: 1.2cqw 7cqw 0 9.5cqw; color: #0e0e10; }
.sbar.on-dark { color: #fff; }
.sbar b { font: 600 4.3cqw/1 -apple-system, 'SF Pro Text', Inter, sans-serif; letter-spacing: -.01em; }
.sbar .island { position: absolute; top: 3cqw; left: 50%; width: 31cqw; height: 9cqw; transform: translateX(-50%); border-radius: 5cqw; background: #000; }
.sb-ic { display: flex; align-items: center; gap: 1.5cqw; }
.sb-ic svg { display: block; height: 3.1cqw; width: auto; fill: currentColor; }
.sb-ic svg:last-child { height: 3.4cqw; }

/* нечётная последняя карточка — во всю ширину; картинку держим в середине того же размера, что у соседних */
@media (min-width: 681px) {
  .works > .card:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 12 / 5; }
  .works > .card:last-child:nth-child(odd) .art { top: 16%; left: 25%; right: 25%; }
}

/* логотип Grig в шапке: знак + «studio» */
.brand { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); text-decoration: none; }
.brand .logo { display: block; width: auto; height: 30px; align-self: center; }
.brand-sub { font-size: 17px; font-weight: 500; letter-spacing: -.01em; color: #8a8a93; transform: translateY(2px); }
@media (max-width: 680px) { .brand .logo { height: 26px; } .brand-sub { font-size: 15px; } }