@font-face { font-family: "Unbounded"; src: url("/assets/fonts/unbounded-cyrillic-wght-normal.woff2") format("woff2"); font-weight: 200 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Unbounded"; src: url("/assets/fonts/unbounded-latin-wght-normal.woff2") format("woff2"); font-weight: 200 900; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+20BD, U+2212; }
@font-face { font-family: "Onest"; src: url("/assets/fonts/onest-cyrillic-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; src: url("/assets/fonts/onest-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+20BD, U+2212; }

/* Страница светлая. Цвет даёт каждая работа: её блок окрашен в цвета её собственного дизайна. */
:root {
  --paper: #f3f2ed;
  --ink: #111214;
  --soft: #5c5f66;
  --line: rgb(17 18 20 / .12);
  --radius: 36px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  /* цвета работ */
  --otdel-bg: #0b1016; --otdel-fg: #f3efe6; --otdel-ac: #e3b261;
  --sek-bg: #3949ab;   --sek-fg: #ffffff;   --sek-ac: #dfe3ff;
  --fit-bg: #ffae1a;   --fit-fg: #1a1204;   --fit-ac: #1a1204;
  --up-bg: #2b3ed1;    --up-fg: #ffffff;    --up-ac: #ffffff;
  --siren-bg: #0d9298; --siren-fg: #faf3e1; --siren-ac: #e7624d;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 18px/1.55 "Onest", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: "Unbounded", sans-serif; font-weight: 700; letter-spacing: -.03em; line-height: 1.02; text-wrap: balance; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 28px; }
@media (max-width: 640px) { .wrap { padding: 0 16px; } body { font-size: 17px; } }

/* ---------- Шапка ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 22px; }
.top a { text-decoration: none; }
.me { font-family: "Unbounded", sans-serif; font-weight: 700; font-size: 17px; letter-spacing: -.02em; }
.top-links { display: flex; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--ink); font-weight: 500; font-size: 16px; text-decoration: none; white-space: nowrap; transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); }
.pill:hover { background: var(--ink); color: var(--paper); }
.pill:active { transform: scale(.97); }
.pill.solid { background: var(--ink); color: var(--paper); }
.pill.solid:hover { background: transparent; color: var(--ink); }
@media (max-width: 560px) { .top-links .hide-s { display: none; } }

/* ---------- Первый экран ---------- */
.hero { padding-block: clamp(36px, 6vw, 80px) clamp(40px, 5vw, 64px); }
.hero h1 { font-size: clamp(42px, 6.6vw, 104px); font-weight: 800; letter-spacing: -.045em; line-height: 1; max-width: 15ch; }
.hero-row { margin-top: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; }
.hero-row p { font-size: clamp(18px, 1.5vw, 21px); color: var(--soft); max-width: 52ch; }
.swatch-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.sw { display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border-radius: 999px; font-weight: 600; font-size: 15px; text-decoration: none; transition: transform .3s var(--ease); }
.sw:hover { transform: translateY(-3px) rotate(-2deg); }
@media (max-width: 860px) { .hero-row { grid-template-columns: 1fr; } .swatch-row { justify-content: flex-start; } }

/* ---------- Блоки работ на главной ---------- */
.works { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-bottom: 16px; }
.work { position: relative; overflow: hidden; border-radius: var(--radius); text-decoration: none; display: grid; isolation: isolate; transition: transform .5s var(--ease); }
.work:hover { transform: translateY(-4px); }
.work:focus-visible { outline: 4px solid var(--ink); outline-offset: 4px; }
.work.full { grid-column: 1 / -1; }
.work-text { position: relative; z-index: 2; padding: clamp(26px, 3.4vw, 48px); display: flex; flex-direction: column; gap: 16px; }
.work h2 { font-size: clamp(36px, 4.6vw, 72px); font-weight: 800; letter-spacing: -.05em; }
.work p { font-size: clamp(17px, 1.35vw, 20px); max-width: 38ch; opacity: .86; }
.work .meta { font-size: 14px; font-weight: 600; letter-spacing: .02em; opacity: .7; }
.go { margin-top: 6px; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 999px; font-weight: 600; font-size: 16px; transition: gap .3s var(--ease); }
.work:hover .go { gap: 16px; }
.go i { font-size: 18px; }

.w-otdel { background: var(--otdel-bg); color: var(--otdel-fg); grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); min-height: 640px; }
.w-otdel h2 { color: var(--otdel-ac); }
.w-otdel .go { background: var(--otdel-ac); color: var(--otdel-bg); }
.w-otdel .fan { align-self: end; position: relative; height: 100%; min-height: 560px; }
.fan .phone { position: absolute; bottom: -60px; width: 34%; transition: transform .6s var(--ease); }
.fan .phone:nth-child(1) { left: 6%; transform: rotate(-9deg) translateY(30px); }
.fan .phone:nth-child(2) { left: 33%; z-index: 2; transform: translateY(-20px); }
.fan .phone:nth-child(3) { left: 60%; transform: rotate(9deg) translateY(30px); }
.work:hover .fan .phone:nth-child(1) { transform: rotate(-13deg) translate(-16px, 20px); }
.work:hover .fan .phone:nth-child(3) { transform: rotate(13deg) translate(16px, 20px); }

.w-sek { background: var(--sek-bg); color: var(--sek-fg); grid-template-rows: auto 1fr; min-height: 760px; }
.w-sek .go { background: #fff; color: var(--sek-bg); }
.w-sek .stage { position: relative; min-height: 400px; }
.w-sek .stage .card { position: absolute; width: 60%; border-radius: 26px; box-shadow: 0 30px 60px -20px rgb(10 14 60 / .55); transition: transform .6s var(--ease); }
.w-sek .stage .card:nth-child(1) { left: 6%; top: 10px; transform: rotate(-5deg); }
.w-sek .stage .card:nth-child(2) { right: 5%; top: 190px; transform: rotate(4deg); }
.w-sek:hover .stage .card:nth-child(1) { transform: rotate(-8deg) translateY(-8px); }
.w-sek:hover .stage .card:nth-child(2) { transform: rotate(7deg) translateY(8px); }

.w-fit { background: var(--fit-bg); color: var(--fit-fg); grid-template-rows: auto 1fr; min-height: 760px; }
.w-fit h2 { text-transform: uppercase; }
.w-fit .go { background: var(--fit-fg); color: var(--fit-bg); }
.w-fit .stage { position: relative; min-height: 400px; }
.w-fit .stage .phone { position: absolute; width: 44%; bottom: -120px; transition: transform .6s var(--ease); }
.w-fit .stage .phone:nth-child(1) { left: 6%; transform: rotate(-6deg); }
.w-fit .stage .phone:nth-child(2) { right: 6%; transform: rotate(5deg) translateY(-40px); }
.w-fit .stage .hero-cat { position: absolute; z-index: 3; width: 30%; left: 35%; bottom: -6px; filter: drop-shadow(0 20px 30px rgb(60 30 0 / .35)); transition: transform .6s var(--ease); }
.w-fit:hover .stage .hero-cat { transform: translateY(-14px) rotate(-4deg) scale(1.04); }

.w-up { background: var(--up-bg); color: var(--up-fg); grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); min-height: 600px;
  background-image: linear-gradient(rgb(255 255 255 / .07) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .07) 1px, transparent 1px); background-size: 28px 28px; }
.w-up .go { background: #fff; color: var(--up-bg); }
.w-up .shot-wrap { align-self: end; padding-top: 56px; margin-right: -2px; }
.w-up .browser { border-radius: 18px 0 0 0; transform: translate(0, 24px); transition: transform .6s var(--ease); }
.w-up:hover .browser { transform: translate(-10px, 10px); }

.w-siren { background: var(--siren-bg); color: var(--siren-fg); grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); min-height: 620px; }
.w-siren .go { background: var(--siren-ac); color: #fff; }
.w-siren .work-text { order: 2; justify-content: flex-end; }
.w-siren .shots { order: 1; position: relative; min-height: 520px; }
.w-siren .shots .browser { position: absolute; left: -2px; top: 48px; width: 92%; border-radius: 0 18px 18px 0; transition: transform .6s var(--ease); }
.w-siren .shots .phone { position: absolute; right: 2%; bottom: -70px; width: 34%; z-index: 2; transform: rotate(5deg); transition: transform .6s var(--ease); }
.w-siren:hover .shots .phone { transform: rotate(8deg) translateY(-14px); }

@media (max-width: 980px) {
  .works { grid-template-columns: 1fr; }
  .w-otdel, .w-up, .w-siren { grid-template-columns: 1fr; min-height: 0; }
  .w-otdel .fan { min-height: 420px; }
  .fan .phone { width: 36%; bottom: -80px; }
  .w-sek, .w-fit { min-height: 0; }
  .w-fit .stage { min-height: 52vw; }
  .w-fit .stage .phone { width: 32%; }
  .w-fit .stage .hero-cat { width: 26%; left: 37%; }
  .w-siren .work-text { order: 1; }
  .w-siren .shots { order: 2; min-height: 440px; }
  .w-up .shot-wrap { padding-top: 0; padding-left: 24px; }
}
@media (max-width: 560px) {
  .w-otdel .fan { min-height: 330px; }
  .w-sek .stage, .w-fit .stage { min-height: 330px; }
  .w-fit .stage .phone { width: 40%; }
  .w-fit .stage .hero-cat { width: 30%; left: 35%; }
  .w-sek .stage .card { width: 80%; }
  .w-sek .stage .card:nth-child(2) { top: 120px; }
  .w-siren .shots { min-height: 300px; }
  .w-siren .shots .browser { top: 0; width: 96%; }
  .w-siren .shots .phone { width: 40%; bottom: -60px; }
}

/* Рамки для скриншотов */
.phone { background: #0c0d10; border-radius: 34px; padding: 7px; box-shadow: 0 30px 60px -24px rgb(0 0 0 / .55), inset 0 0 0 1px rgb(255 255 255 / .1); }
.phone img { border-radius: 27px; width: 100%; }
.phone.light { background: #e9e8e3; box-shadow: 0 30px 60px -24px rgb(0 0 0 / .35), inset 0 0 0 1px rgb(0 0 0 / .08); }
.browser { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 34px 70px -30px rgb(0 0 0 / .5); }
.browser .bar { height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 14px; background: #ecebe7; }
.browser .bar i { width: 10px; height: 10px; border-radius: 50%; background: #cfcdc6; }
.browser .bar span { margin-left: 8px; font-size: 12px; color: #77756f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* ---------- Связь ---------- */
.contact { background: var(--ink); color: var(--paper); border-radius: var(--radius) var(--radius) 0 0; padding: clamp(56px, 8vw, 110px) 0 36px; margin-top: clamp(64px, 8vw, 120px); }
.contact p.lead { font-size: clamp(18px, 1.6vw, 22px); color: rgb(243 242 237 / .7); max-width: 52ch; }
.big-link { display: inline-block; margin-top: 18px; font-family: "Unbounded", sans-serif; font-weight: 800; font-size: clamp(48px, 10vw, 168px); letter-spacing: -.05em; line-height: 1; text-decoration: none; color: var(--fit-bg); padding-bottom: .08em; transition: color .3s var(--ease); }
.big-link:hover { color: var(--paper); }
.mail-link { display: inline-block; margin-top: 18px; font-size: clamp(18px, 2vw, 26px); color: var(--paper); text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
.foot { margin-top: clamp(56px, 7vw, 90px); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; color: rgb(243 242 237 / .5); }

/* ---------- Страница работы ---------- */
.case-hero { border-radius: var(--radius); padding: clamp(28px, 4.4vw, 64px); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 40px; align-items: end; }
.case-hero h1 { font-size: clamp(48px, 9vw, 150px); font-weight: 800; letter-spacing: -.05em; }
.case-hero .lead { margin-top: 24px; font-size: clamp(18px, 1.6vw, 22px); max-width: 46ch; opacity: .9; }
.facts { display: grid; gap: 18px; font-size: 16px; }
.facts dt { font-size: 13px; font-weight: 600; letter-spacing: .04em; opacity: .65; }
.facts dd { margin: 2px 0 0; font-weight: 500; }
.facts a { text-underline-offset: 4px; }
@media (max-width: 860px) { .case-hero { grid-template-columns: 1fr; } }

.c-otdel { background: var(--otdel-bg); color: var(--otdel-fg); }
.c-otdel h1 { color: var(--otdel-ac); }
.c-sek { background: var(--sek-bg); color: var(--sek-fg); }
.c-fit { background: var(--fit-bg); color: var(--fit-fg); }
.c-fit h1 { text-transform: uppercase; }
.c-up { background: var(--up-bg); color: var(--up-fg); background-image: linear-gradient(rgb(255 255 255 / .07) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .07) 1px, transparent 1px); background-size: 28px 28px; }
.c-siren { background: var(--siren-bg); color: var(--siren-fg); }

.screens { padding: clamp(56px, 7vw, 96px) 0 0; }
.screens h2, .features h2 { font-size: clamp(28px, 3.2vw, 44px); margin-bottom: 32px; }
.phones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 32px; }
.phones.five { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1120px; margin-inline: auto; }
.phones.three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 980px; }
figure { margin: 0; }
figcaption { margin-top: 16px; font-size: 16px; color: var(--soft); }
figcaption b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.phones figure:nth-child(even) { margin-top: 48px; }
@media (max-width: 1100px) { .phones, .phones.five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .phones, .phones.five, .phones.three { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; margin: 0 -16px; padding: 0 16px 16px; }
  .phones figure { flex: 0 0 68%; scroll-snap-align: start; margin-top: 0 !important; }
}
.wide-shots { display: grid; gap: 48px; }
.wide-shots .pair { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .6fr); gap: 24px; align-items: end; }
@media (max-width: 760px) { .wide-shots .pair { grid-template-columns: 1fr; } .wide-shots .pair .phone { max-width: 260px; } }

.cards-row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 64px; max-width: 1000px; }
.cards-row img { border-radius: 24px; box-shadow: 0 24px 50px -24px rgb(0 0 0 / .35); }
@media (max-width: 760px) { .cards-row { grid-template-columns: 1fr; } }

.features { padding: clamp(64px, 8vw, 110px) 0 clamp(40px, 6vw, 80px); }
.feat-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.feat-list li { padding: 20px 0; border-top: 1.5px solid var(--ink); font-size: 18px; }
.feat-list li b { font-weight: 600; }
@media (max-width: 760px) { .feat-list { grid-template-columns: 1fr; } }
.note { margin-top: 28px; font-size: 15px; color: var(--soft); }

.next { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; border-radius: var(--radius); padding: clamp(28px, 4vw, 52px); text-decoration: none; margin-top: clamp(40px, 6vw, 80px); transition: transform .5s var(--ease); }
.next:hover { transform: translateY(-4px); }
.next small { display: block; font-size: 15px; font-weight: 600; opacity: .7; margin-bottom: 8px; }
.next strong { font-family: "Unbounded", sans-serif; font-weight: 800; font-size: clamp(32px, 5vw, 72px); letter-spacing: -.05em; line-height: 1; }
.next i { font-size: clamp(40px, 5vw, 64px); transition: transform .5s var(--ease); }
.next:hover i { transform: translateX(10px); }

/* Появление при прокрутке */
@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; transform: translateY(32px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .js .rv.in { opacity: 1; transform: none; }
  .hero h1 { animation: rise 1s var(--ease) both; }
  .hero-row { animation: rise 1s var(--ease) .12s both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(40px); } }
@media (prefers-reduced-motion: reduce) { .work, .work *, .next, .next i, .sw, .pill { transition: none !important; } }