:root {
  --s: min(100vw / 1505, 100vh / 700);
  --red: #c81b1c;
  --ink: #fff;
  --sub: #e6e6e6;
  --lab: #949494;
  --bx: 60; --by: 36; --bs: 44;
  --h1y: -12.5; --suby: 167.5; --numy: 19; --laby: 74;
  --h1fs: 68.7; --h1lh: 76; --subfs: 18.7; --sublh: 26; --left: 73;
  --SG: 'Space Grotesk', system-ui, sans-serif;
  --JB: 'JetBrains Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #000; overflow: hidden; }
body { color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; font-family: var(--JB); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.svgdefs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- stage ---------- */
.screen { position: fixed; inset: 0; overflow: hidden; background: #000; }
.bg, .bg2 { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.bg { filter: url(#grade); }
.bg video, .bg2 video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.bg2 { filter: url(#grade2); mix-blend-mode: plus-lighter; opacity: .35;
  -webkit-mask-image: linear-gradient(180deg, transparent 21.5%, #000 100%); mask-image: linear-gradient(180deg, transparent 21.5%, #000 100%); }
.scrim { position: absolute; inset: 0; pointer-events: none; display: none; }

.frame { position: absolute; inset: 0; display: flex; flex-direction: column; }
.sp-a { flex: 239 1 0; } .sp-b { flex: 194 1 0; } .sp-c { flex: 115 1 0; }

/* ---------- header ---------- */
header { position: relative; flex: none; height: calc(92 * var(--s)); }
.logo { position: absolute; left: calc(60 * var(--s)); top: calc(35 * var(--s)); display: flex; align-items: center; gap: calc(14 * var(--s)); }
.logo svg { width: calc(45 * var(--s)); height: calc(45 * var(--s)); display: block; }
.logo b { font: 700 calc(25 * var(--s)) / 1 var(--SG); letter-spacing: calc(-1 * var(--s)); }
nav { position: absolute; left: calc(482 * var(--s)); top: calc(32 * var(--s)); height: calc(58 * var(--s)); display: flex; align-items: center; }
nav > .ni { position: relative; margin-left: calc(40 * var(--s)); }
nav > .ni:first-child { margin-left: 0; }
nav > .ni:nth-child(2) { margin-left: calc(53 * var(--s)); }
nav > .ni:nth-child(4) { margin-left: calc(37 * var(--s)); }
nav .nl { display: inline-flex; align-items: center; gap: calc(9 * var(--s)); font: 400 calc(19.9 * var(--s)) / 1 var(--JB); color: #fff; transition: color .2s; }
nav .nl svg { width: calc(11.6 * var(--s)); height: calc(7.2 * var(--s)); margin-top: calc(-2.6 * var(--s)); transition: transform .25s; }
nav .ni.open .nl svg { transform: rotate(180deg); }
.dd { position: absolute; top: calc(44 * var(--s)); left: calc(-18 * var(--s)); min-width: calc(260 * var(--s)); padding: calc(10 * var(--s)) 0; background: rgba(0,0,0,.92); border: 1px solid rgba(255,255,255,.12); border-top: 2px solid var(--red); opacity: 0; visibility: hidden; transform: translateY(calc(6 * var(--s))); transition: opacity .2s, transform .2s, visibility .2s; }
.ni.open .dd { opacity: 1; visibility: visible; transform: none; }
.dd a { display: block; padding: calc(10 * var(--s)) calc(18 * var(--s)); font: 400 calc(16 * var(--s)) / 1.2 var(--JB); color: var(--sub); }
.lang { position: absolute; left: calc(1060 * var(--s)); top: calc(50 * var(--s)); display: flex; gap: calc(14 * var(--s)); font: 400 calc(15 * var(--s)) / 1 var(--JB); }
.lang button { color: var(--lab); transition: color .2s; padding: 2px 0; }
.lang button.on { color: #fff; box-shadow: 0 1px 0 var(--red); }

/* ---------- buttons ---------- */
.btn { position: absolute; display: flex; align-items: center; justify-content: space-between; width: calc(212 * var(--s)); height: calc(58 * var(--s)); padding: 0 calc(22 * var(--s)) 0 calc(18 * var(--s)); gap: calc(11 * var(--s)); background: var(--red); color: #fff; border-radius: 0; transition: background .2s; }
.btn span { font: 480 calc(20.85 * var(--s)) / 1 var(--SG); letter-spacing: calc(-.62 * var(--s)); transform: translateY(calc(1.5 * var(--s))); white-space: nowrap; }
.btn svg { width: calc(21.5 * var(--s)); height: calc(18 * var(--s)); flex: none; transition: transform .25s; }
.btn-top { left: calc(1232 * var(--s)); top: calc(30 * var(--s)); }
.btn-cta { left: calc(var(--left) * var(--s)); top: calc(248 * var(--s)); }
@media (hover: hover) {
  nav .nl:hover { color: var(--red); }
  .dd a:hover { color: #fff; background: rgba(200,27,28,.18); }
  .lang button:hover { color: #fff; }
  .btn:hover { background: #b01617; }
  .btn:hover svg { transform: translateX(calc(3 * var(--s))); }
}

/* ---------- hero ---------- */
.hero { position: relative; flex: none; height: calc(306 * var(--s)); }
h1 { position: absolute; left: calc(var(--left) * var(--s)); top: calc(var(--h1y) * var(--s)); font: 700 calc(var(--h1fs) * var(--s)) / calc(var(--h1lh) * var(--s)) var(--SG); letter-spacing: calc(-2.4 * var(--s)); white-space: nowrap; }
h1 .ln { display: block; }
.sub { position: absolute; left: calc(var(--left) * var(--s)); top: calc(var(--suby) * var(--s)); font: 400 calc(var(--subfs) * var(--s)) / calc(var(--sublh) * var(--s)) var(--JB); letter-spacing: calc(-.87 * var(--s)); color: var(--sub); white-space: nowrap; }

/* ---------- stats ---------- */
.stats { position: relative; flex: none; height: calc(104 * var(--s)); }
.st { position: absolute; top: 0; }
.st .num { position: absolute; top: calc(var(--numy) * var(--s)); font: 480 calc(33.45 * var(--s)) / 1 var(--JB); white-space: nowrap; }
.st .lab { position: absolute; top: calc(var(--laby) * var(--s)); font: 400 calc(21.9 * var(--s)) / 1 var(--SG); letter-spacing: calc(-.62 * var(--s)); color: var(--lab); white-space: nowrap; }
.s1 { left: calc(70.4 * var(--s)); } .s2 { left: calc(213.1 * var(--s)); } .s3 { left: calc(392.6 * var(--s)); }
.s3 .num { left: calc(-4.4 * var(--s)); }
.rule { position: absolute; top: calc(10 * var(--s)); height: calc(88 * var(--s)); width: calc(1.5 * var(--s)); background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.21) 50%, rgba(255,255,255,.085)); }
.r1 { left: calc(181 * var(--s)); } .r2 { left: calc(356 * var(--s)); }

/* ---------- burger + menu ---------- */
.burger { display: none; position: absolute; left: auto; right: calc(var(--bx) * var(--s)); top: calc(var(--by) * var(--s)); width: calc(var(--bs) * var(--s)); height: calc(var(--bs) * var(--s)); z-index: 30; }
.burger i { position: absolute; left: 12%; width: 76%; height: 2px; background: #fff; transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s, width .35s; }
.burger i:nth-child(1) { top: 30%; } .burger i:nth-child(2) { top: 49%; } .burger i:nth-child(3) { top: 68%; width: calc(76% * .47); }
.nav-open .burger i:nth-child(1) { transform: translateY(calc(var(--bs) * .19 * var(--s))) rotate(45deg); }
.nav-open .burger i:nth-child(2) { opacity: 0; }
.nav-open .burger i:nth-child(3) { width: 76%; transform: translateY(calc(var(--bs) * -.19 * var(--s))) rotate(-45deg); }

.menu { position: fixed; inset: 0; z-index: 20; background: #000; display: flex; flex-direction: column; padding: calc(110 * var(--s)) calc(var(--bx) * var(--s)) calc(30 * var(--s)); opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.nav-open .menu { opacity: 1; visibility: visible; }
.menu-tex { position: absolute; inset: 0; opacity: .4; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%); mask-image: linear-gradient(180deg, transparent, #000 45%); filter: url(#grade2); }
.menu-tex video { width: 100%; height: 100%; object-fit: cover; object-position: 78% top; }
.menu-rule { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .55s cubic-bezier(.2,.7,.2,1) .04s; }
.nav-open .menu-rule { transform: scaleX(1); }
.menu-in { position: relative; display: flex; flex-direction: column; height: 100%; }
.eyebrow { font: 400 11.5px / 1 var(--JB); letter-spacing: .22em; text-transform: uppercase; color: var(--lab); margin-bottom: 14px; }
.mlist > li { border-bottom: 1px solid rgba(255,255,255,.1); opacity: 0; transform: translateY(14px); transition: opacity .45s, transform .45s cubic-bezier(.2,.7,.2,1); }
.nav-open .mlist > li { opacity: 1; transform: none; }
.nav-open .mlist > li:nth-child(1) { transition-delay: .08s; } .nav-open .mlist > li:nth-child(2) { transition-delay: .14s; }
.nav-open .mlist > li:nth-child(3) { transition-delay: .20s; } .nav-open .mlist > li:nth-child(4) { transition-delay: .26s; }
.mrow { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 16px 0; font: 700 30px / 1 var(--SG); letter-spacing: -1px; text-align: left; }
.mrow svg { width: 16px; height: 10px; transition: transform .3s; }
.acc.open .mrow svg { transform: rotate(180deg); }
.msub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s; }
.acc.open .msub { grid-template-rows: 1fr; }
.msub > div { overflow: hidden; }
.msub a { display: block; padding: 0 0 12px; font: 400 14px / 1.3 var(--JB); color: var(--sub); }
.msub a:first-child { padding-top: 2px; }
.mlang { display: flex; gap: 18px; margin-top: 22px; font: 400 14px var(--JB); }
.mlang button { color: var(--lab); } .mlang button.on { color: #fff; box-shadow: 0 1px 0 var(--red); }
.mfoot { margin-top: auto; }
.btn-menu { position: relative; width: 100%; height: 54px; padding: 0 20px 0 18px; }
.btn-menu span { font-size: 18px; } .btn-menu svg { width: 20px; height: 17px; }
.mnote { margin-top: 12px; font: 400 12px var(--JB); color: var(--lab); text-align: center; }

/* ---------- tablet portrait ---------- */
@media (max-width: 1023px) and (max-aspect-ratio: 1/1) {
  :root { --s: clamp(0.82px, min(100vw / 900, 100vh / 1200), 1.25px);
    --bx: 56; --by: 33; --bs: 40; --h1y: -10.25; --suby: 137.4; --numy: 15.6; --laby: 60.7;
    --h1fs: 58; --h1lh: 63; --subfs: 15.4; --sublh: 21.4; --left: 56; }
  .bg2 { display: none; }
  .bg video { object-position: right top; transform: scale(1.18); transform-origin: right top; }
  .bg { -webkit-mask-image: linear-gradient(180deg, #000 0 40%, transparent 64%); mask-image: linear-gradient(180deg, #000 0 40%, transparent 64%); }
  .scrim { display: block; background: linear-gradient(100deg, #000 26%, rgba(0,0,0,.74) 50%, rgba(0,0,0,.18) 76%, transparent 92%); }
  .sp-a { flex-grow: 340; } .sp-b { flex-grow: 276; } .sp-c { flex-grow: 163; }
  .hero { height: calc(250 * var(--s)); }
  .btn { width: calc(174 * var(--s) * 1.15); height: calc(47.6 * var(--s) * 1.15); padding: 0 calc(18 * var(--s)) 0 calc(14.8 * var(--s)); gap: calc(9 * var(--s)); }
  .btn span { font-size: calc(17.1 * var(--s) * 1.15); }
  .btn-cta { top: calc(200 * var(--s)); }
  .logo { left: calc(var(--bx) * var(--s)); top: calc(var(--by) * var(--s)); }
  .s1 { left: calc(56 * var(--s)); }
}
@media (max-width: 1023px) {
  nav, .btn-top, .lang { display: none; }
  .burger { display: block; }
}
@media (min-width: 1024px) { .menu { display: none; } }

/* ---------- phone ---------- */
@media (max-width: 599px) {
  :root { --s: min(100vw / 430, 100vh / 620, 1.02px);
    --bx: 26; --by: 21; --bs: 34; --h1y: -7.1; --suby: 108; --numy: 13; --laby: 50;
    --h1fs: 41; --h1lh: 45; --subfs: 13.6; --sublh: 19.5; --left: 26; }
  .bg video, .bg2 video { object-position: 78% top; transform: none; }
  .bg { -webkit-mask-image: none; mask-image: none; }
  .bg2 { display: block; -webkit-mask-image: linear-gradient(180deg, transparent 10%, #000 60%); mask-image: linear-gradient(180deg, transparent 10%, #000 60%); }
  .scrim { display: block; background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.50) 24%, rgba(0,0,0,.86) 42%, #000 66%); }
  .sp-a { flex-grow: 106; } .sp-b { flex-grow: 92; } .sp-c { flex-grow: 56; }
  header { height: calc(76 * var(--s)); }
  .logo { left: calc(26 * var(--s)); top: calc(21 * var(--s)); }
  .logo svg { width: calc(34 * var(--s)); height: calc(34 * var(--s)); }
  .logo b { font-size: calc(21 * var(--s)); }
  .hero { height: calc(220 * var(--s)); }
  h1 { letter-spacing: calc(-1.5 * var(--s)); }
  .btn { width: calc(185 * var(--s)); height: calc(50 * var(--s)); padding: 0 calc(19.1 * var(--s)) 0 calc(15.7 * var(--s)); gap: calc(9.6 * var(--s)); }
  .btn span { font-size: calc(17.5 * var(--s)); }
  .btn-cta { top: calc(160 * var(--s)); }
  .stats { height: calc(80 * var(--s)); }
  .st .num { font-size: calc(25 * var(--s)); }
  .st .lab { font-size: calc(16 * var(--s)); }
  .s1 { left: calc(26 * var(--s)); } .r1 { left: calc(118 * var(--s)); }
  .s2 { left: calc(140 * var(--s)); } .r2 { left: calc(262 * var(--s)); }
  .s3 { left: calc(286 * var(--s)); } .s3 .num { left: 0; }
  .rule { top: calc(6 * var(--s)); height: calc(70 * var(--s)); }
  .menu { padding: 92px 26px 26px; }
}

/* ---------- entrance (initial state) ---------- */
html.intro .logo, html.intro nav .ni, html.intro .burger, html.intro .lang, html.intro .sub, html.intro .st .num, html.intro .st .lab { opacity: 0; }
html.intro .logo { transform: scale(.9); }
html.intro nav .ni, html.intro .lang { transform: translateY(calc(7 * var(--s))); }
html.intro .sub { transform: translateY(calc(14 * var(--s))); }
html.intro .st .num { transform: translateY(calc(12 * var(--s))); }
html.intro .st .lab { transform: translateY(calc(10 * var(--s))); }
html.intro .rule { transform: scaleY(0); }
html.intro .btn-top, html.intro .btn-cta { clip-path: inset(0 100% 0 0); }
h1 .ln { overflow: hidden; padding-bottom: calc(6 * var(--s)); margin-bottom: calc(-6 * var(--s)); }
html.intro h1 .ln > span { display: inline-block; transform: translateY(120%); }
h1 .ln > span { display: inline-block; }

/* кнопка меню всегда на всю ширину */
.menu .btn-menu { position: relative; left: auto; top: auto; width: 100%; height: 54px; padding: 0 20px 0 18px; }
.menu .btn-menu span { font-size: 18px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ================= service pages (with scroll) ================= */
html.scroll, html.scroll body { overflow: auto; height: auto; }
html.scroll .screen { position: relative; height: 100vh; height: 100svh; }
.more { position: relative; background: #000; padding: calc(120 * var(--s)) calc(var(--left) * var(--s)) 0; }
.more__head { display: flex; align-items: baseline; gap: 24px; border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 22px; }
.more__head span { font: 400 13px var(--JB); color: var(--red); letter-spacing: .1em; }
.more__head h2 { font: 700 clamp(28px, 3vw, 44px) / 1.05 var(--SG); letter-spacing: -.03em; }
.rows li { display: grid; grid-template-columns: 90px minmax(0, .9fr) minmax(0, 1.2fr); gap: 24px; align-items: start; padding: 34px 0; border-bottom: 1px solid rgba(255,255,255,.12); opacity: 0; transform: translateY(24px); transition: opacity .8s, transform .8s cubic-bezier(.16,1,.3,1); }
.rows li.in { opacity: 1; transform: none; }
.rows .n { font: 400 14px var(--JB); color: var(--red); padding-top: 8px; }
.rows b { font: 700 clamp(24px, 2.2vw, 34px) / 1.05 var(--SG); letter-spacing: -.02em; }
.rows p { font: 400 15.5px / 1.6 var(--JB); letter-spacing: -.3px; color: var(--sub); max-width: 560px; }
@media (hover: hover) { .rows li:hover b { color: var(--red); } }
.final { position: relative; padding: clamp(110px, 16vh, 180px) calc(var(--left) * var(--s)) clamp(70px, 10vh, 110px); display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; overflow: hidden; }
.final::before { content: ''; position: absolute; right: -10%; bottom: -40%; width: 70vw; height: 70vw; background: radial-gradient(circle, rgba(200,27,28,.22), transparent 60%); pointer-events: none; }
.final h2 { position: relative; font: 700 clamp(40px, 5.4vw, 84px) / .95 var(--SG); letter-spacing: -.045em; }
.final h2 em { font-style: normal; color: var(--red); }
.final .btn { position: relative; left: auto; top: auto; }
.foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px calc(var(--left) * var(--s)); border-top: 1px solid rgba(255,255,255,.12); font: 400 12px var(--JB); color: var(--lab); }
.foot a:hover { color: #fff; }
.scroll-hint { position: absolute; left: 50%; bottom: 22px; width: 1px; height: 46px; background: linear-gradient(#fff, transparent); opacity: .5; animation: hint 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes hint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@media (max-width: 1023px) {
  .rows li { grid-template-columns: 50px 1fr; }
  .rows li p { grid-column: 2; }
  .more, .final, .foot { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 599px) { .rows li { grid-template-columns: 1fr; gap: 10px; padding: 26px 0; } .rows li p { grid-column: 1; } .scroll-hint { display: none; } }
nav .ni.cur > .nl { color: var(--red); }

/* шире колонки цифр — под длинные подписи */
.r1 { left: calc(238 * var(--s)); } .s2 { left: calc(266 * var(--s)); }
.r2 { left: calc(432 * var(--s)); } .s3 { left: calc(460 * var(--s)); } .s3 .num { left: 0; }
@media (max-width: 599px) {
  .s1 { left: calc(26 * var(--s)); } .r1 { left: calc(146 * var(--s)); }
  .s2 { left: calc(160 * var(--s)); } .r2 { left: calc(280 * var(--s)); }
  .s3 { left: calc(294 * var(--s)); }
  .st .lab { font-size: calc(14 * var(--s)); }
}
html.scroll .screen::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(transparent, #000); pointer-events: none; }

/* телефон и планшет: заголовок и подзаголовок переносятся, а не уезжают за экран */
@media (max-width: 1023px) {
  .hero { height: auto; display: flex; flex-direction: column; align-items: flex-start; padding: 0 calc(var(--left) * var(--s)); }
  h1, .sub, .btn-cta { position: relative; left: auto; top: auto; }
  h1 { white-space: normal; max-width: 100%; margin-top: calc(var(--h1y) * var(--s)); }
  .sub { white-space: normal; max-width: 100%; margin-top: calc(22 * var(--s)); }
  .btn-cta { margin-top: calc(30 * var(--s)); }
}
@media (max-width: 599px) {
  h1 { font-size: clamp(26px, 8.2vw, 40px); line-height: 1.1; letter-spacing: -.03em; }
  .sub { font-size: 13.5px; line-height: 1.5; letter-spacing: -.02em; }
  .sub br { display: none; }
  .sp-b { flex-grow: 60; }
}

/* пример магазина на странице интернет-магазинов */
.case-s { position: relative; background: #000; padding: calc(110 * var(--s)) calc(var(--left) * var(--s)) 0; }
.case-lead { margin: 26px 0 40px; max-width: 760px; font: 400 15.5px / 1.65 var(--JB); letter-spacing: -.3px; color: var(--sub); }
.gal { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.win { margin: 0; border: 1px solid rgba(255,255,255,.12); background: #0b0b0b; overflow: hidden; }
.win.big { grid-column: 1 / -1; }
.win .bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #141414; border-bottom: 1px solid rgba(255,255,255,.08); }
.win .bar i { width: 9px; height: 9px; border-radius: 50%; background: #3a3a3a; }
.win .bar span { margin-left: 10px; font: 400 11px var(--JB); color: var(--lab); }
.win img { display: block; width: 100%; height: auto; transition: transform .8s cubic-bezier(.16,1,.3,1); }
@media (hover: hover) { .win:hover img { transform: scale(1.02); } }
.win figcaption { padding: 14px 16px; font: 400 13px / 1.5 var(--JB); color: var(--sub); border-top: 1px solid rgba(255,255,255,.08); }
.win figcaption::before { content: ''; display: inline-block; width: 10px; height: 2px; margin: 0 10px 3px 0; background: var(--red); vertical-align: middle; }
.case-adm { margin-top: 56px; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 24px 48px; align-items: start; }
.case-adm h3 { font: 700 clamp(24px, 2.2vw, 34px) / 1.05 var(--SG); letter-spacing: -.02em; }
.case-adm ul { border-top: 1px solid rgba(255,255,255,.12); }
.case-adm li { position: relative; padding: 14px 0 14px 26px; border-bottom: 1px solid rgba(255,255,255,.12); font: 400 15px / 1.5 var(--JB); letter-spacing: -.3px; color: var(--sub); }
.case-adm li::before { content: ''; position: absolute; left: 2px; top: 24px; width: 10px; height: 2px; background: var(--red); }
.case-link { grid-column: 2; justify-self: start; font: 500 15px var(--JB); color: #fff; border-bottom: 1px solid var(--red); padding-bottom: 4px; }
.case-link:hover { color: var(--red); }
@media (max-width: 1023px) { .case-s { padding-left: 24px; padding-right: 24px; } .case-adm { grid-template-columns: 1fr; } .case-link { grid-column: 1; } }
@media (max-width: 599px) { .gal { grid-template-columns: 1fr; gap: 14px; } .case-s { padding-top: 80px; } .case-s .more__head { flex-direction: column; gap: 10px; } }