/* =====================================================================
BACKSPACE — Awesomic-style system (faithful structural recreation,
original implementation). Zinc palette, rounded stacked sections,
pill tags, dark CTA buttons, marquees, swipers, bento grid.
Fonts: Onest variable, weight-matched to the reference rendering (ink-measured).
===================================================================== */
:root {
/* palette */
--c-obsidian: #09090b;
--c-graphite: #18181b;
--c-slate: #27272a;
--c-iron: #3f3f46;
--c-steel: #52525b;
--c-fog: #71717a;
--c-ash: #a1a1aa;
--c-mist: #d4d4d8;
--c-cloud: #ececee;
--c-paper: #f4f4f5;
--c-snow: #ffffff;
--c-ember: #ff5a00;
--font-sans: 'Onest', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
/* type scale (desktop) */
--h1: 64px; --h1-lh: 1.12;
--h2: 56px; --h2-lh: 1.28;
--h3: 40px; --h3-lh: 1.28;
--h4: 32px; --h4-lh: 1.3;
--t20: 20px; --t16: 16px; --t15: 15px; --t14: 14px; --t13: 13px;
/* radii */
--r-section: 48px;
--r-card: 28px;
--r-card-lg: 36px;
--r-btn: 16px;
--r-tag: 10000px;
--r-input: 16px;
--shadow-btn: rgba(255, 255, 255, 0.5) 0px 0.5px 0px 0px inset, rgba(117, 123, 133, 0.4) 0px 9px 14px -5px inset, rgb(44, 46, 52) 0px 0px 0px 1.5px, rgba(0, 0, 0, 0.14) 0px 4px 6px 0px;
--w-wide: 1344px;
--w-mid: 1280px;
--pad-x: 40px;
--hdr-h: 72px;
--ease-soft: cubic-bezier(.22, .61, .36, 1);
--ease-spring: cubic-bezier(.34, 1.3, .4, 1);
/* legacy aliases (embedded styles on legal/404 pages) */
--bg: #ffffff; --ink: #09090b; --ink-soft: #18181b;
--panel: #18181b; --panel-90: rgba(24, 24, 27, .92);
--orange: #ff5a00; --accent: #ff5a00;
--stroke: #27272a; --stroke-light: #ececee; --line: #ececee;
--muted: #52525b; --muted-2: #a1a1aa;
--paper: #ffffff; --paper-soft: #f4f4f5; --white: #ffffff;
--on-dark: rgba(255, 255, 255, .92); --on-dark-muted: rgba(255, 255, 255, .6);
--gold: #ffb300;
--r-pill: 10000px; --maxw: 1344px; --gutter: 32px; --fs-base: 15px;
--color-obsidian: #09090b; --color-graphite: #18181b; --color-slate: #27272a;
--color-iron: #3f3f46; --color-steel: #52525b; --color-fog: #71717a;
--color-ash: #a1a1aa; --color-mist: #d4d4d8; --color-cloud: #ececee;
--color-paper: #f4f4f5; --color-snow: #ffffff; --color-ember: #ff5a00;
--surface-card: #ffffff; --surface-canvas: #f4f4f5; --surface-subtle-card: #fafafa; --surface-dark: #18181b;
--radius-badges: 12px; --radius-buttons: 16px; --radius-inputs: 16px;
--radius-cards: 28px; --radius-cards-sm: 24px; --radius-pills: 10000px;
--shadow-btn-dark: var(--shadow-btn);
}
/* ---------------------------------------------------------------------
BASE
--------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: #fff; }
html, body { margin: 0; padding: 0; }
body {
background: #fff;
color: var(--c-iron);
font-family: var(--font-sans);
font-size: 14px;
font-weight: 280;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
::selection { background: var(--c-graphite); color: #fff; }
:focus-visible { outline: 2px solid var(--c-obsidian); outline-offset: 2px; border-radius: 4px; }
.abtn:focus-visible, .rbtn:focus-visible, .cf-submit:focus-visible { outline-offset: 3px; }
.wrap { max-width: var(--w-wide); margin: 0 auto; padding: 0 var(--pad-x); }
.wrap--mid { max-width: var(--w-mid); }
.hh1 { font-size: var(--h1); line-height: var(--h1-lh); font-weight: 500; letter-spacing: -0.02em; color: var(--c-obsidian); margin: 0; text-wrap: balance; }
.hh2 { font-size: var(--h2); line-height: var(--h2-lh); font-weight: 500; letter-spacing: -0.015em; color: var(--c-obsidian); margin: 0; text-wrap: balance; }
.hh3 { font-size: var(--h3); line-height: var(--h3-lh); font-weight: 500; letter-spacing: -0.01em; color: var(--c-obsidian); margin: 0; text-wrap: balance; }
.hh4 { font-size: var(--h4); line-height: var(--h4-lh); font-weight: 600; letter-spacing: -0.01em; color: var(--c-obsidian); margin: 0; }
.t-center { text-align: center; }
.t-muted { color: var(--c-steel); }
/* rounded stacked sections */
.panel {
position: relative;
border-radius: var(--r-section) var(--r-section) 0 0;
background: #fff;
}
.panel--round { border-radius: var(--r-section); }
.panel--gray { background: var(--c-paper); }
.panel--overlap { margin-top: calc(-1 * var(--r-section)); }
.sec-pad { padding-top: 80px; padding-bottom: 144px; }
.sec-pad--low { padding-top: 48px; }
/* ---------------------------------------------------------------------
BUTTONS
--------------------------------------------------------------------- */
.abtn {
position: relative;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: 42px; padding: 0 16px;
border: none; border-radius: 14px;
background: var(--c-obsidian); color: #fff;
font-size: 13px; font-weight: 400; line-height: 1.25; white-space: nowrap;
box-shadow: var(--shadow-btn);
transition: transform .25s var(--ease-spring), background .25s ease;
}
.abtn::before {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .22) 50%, transparent 75%);
transform: translateX(-130%);
}
.abtn:hover { background: var(--c-slate); transform: translateY(-1px); }
.abtn:hover::before { animation: btnSweep 1.5s ease-in-out; }
@keyframes btnSweep { to { transform: translateX(130%); } }
.abtn:active { transform: scale(.98); }
.abtn--lg { height: 50px; padding: 0 18px; font-size: 15px; border-radius: 16px; }
.abtn--white { background: #fff; color: var(--c-graphite); box-shadow: none; border: 1px solid var(--c-cloud); }
.abtn--white:hover { background: var(--c-paper); }
.abtn--icon { width: 48px; padding: 0; border-radius: var(--r-btn); }
.abtn--icon svg { width: 16px; height: 16px; }
/* white round arrow buttons (sliders) */
.rbtn {
display: inline-flex; align-items: center; justify-content: center;
width: 48px; height: 48px; flex: 0 0 auto;
background: #fff; border: none; border-radius: var(--r-btn);
color: var(--c-obsidian);
transition: transform .2s ease, background .2s ease;
box-shadow: 0 1px 0 rgba(9, 9, 11, .04);
}
.rbtn:hover { transform: translateY(-1px); background: #fafafa; }
.rbtn:active { transform: scale(.94); }
.rbtn svg { width: 14px; height: 14px; }
.rbtn[disabled] { opacity: .4; pointer-events: none; }
/* category tag pill */
.ctag {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 8px;
background: #fff;
border: 1px solid #e4e4e7;
border-radius: 12px;
color: var(--c-graphite);
font-size: 13px; font-weight: 350; line-height: 1.5; white-space: nowrap;
}
.ctag--dark { background: var(--c-iron); border-color: var(--c-iron); color: #fafafa; }
.ctag--ember { background: var(--c-ember); border-color: var(--c-ember); color: #fff; font-weight: 400; }
.ctag--ghost { background: transparent; }
/* text rating chip */
.tchip {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px;
background: #fff; border: 1px solid var(--c-cloud);
border-radius: var(--r-tag);
font-size: 13px; font-weight: 400; color: var(--c-graphite);
}
.tchip svg { width: 14px; height: 14px; }
/* ---------------------------------------------------------------------
NAVBAR
--------------------------------------------------------------------- */
.anav {
position: sticky; top: 0; z-index: 300;
background: #fff;
height: var(--hdr-h);
}
.anav__in {
max-width: var(--w-wide); margin: 0 auto; height: 100%;
padding: 0 var(--pad-x);
display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.anav__logo { font-weight: 600; font-size: 18px; letter-spacing: .02em; color: var(--c-obsidian); line-height: 1; flex: 0 0 auto; padding: 13px 0; }
.anav__menu { display: flex; align-items: center; gap: 4px; margin: 0 auto; }
.anav__item { position: relative; }
.anav__link {
display: inline-flex; align-items: center; gap: 6px;
white-space: nowrap;
padding: 10px 16px; border-radius: var(--r-tag);
color: var(--c-graphite); font-size: 15px; font-weight: 350;
transition: color .2s ease, background .2s ease;
}
.anav__link:hover { background: var(--c-paper); }
.anav__link svg.chev { width: 12px; height: 12px; color: var(--c-fog); transition: transform .25s ease; }
.anav__item.is-open .anav__link svg.chev { transform: rotate(180deg); }
.anav__link .hrt { width: 15px; height: 15px; color: var(--c-obsidian); }
.anav__drop {
position: absolute; top: calc(100% + 10px); left: 0;
min-width: 250px;
background: #fff; border: 1px solid var(--c-cloud); border-radius: 20px;
padding: 8px;
display: none; flex-direction: column; gap: 2px;
box-shadow: 0 20px 48px rgba(9, 9, 11, .10);
z-index: 320;
}
.anav__item.is-open .anav__drop { display: flex; }
.anav__drop a {
display: block; padding: 10px 14px; border-radius: 12px;
font-size: 14px; font-weight: 350; color: var(--c-graphite);
transition: background .15s ease;
}
.anav__drop a:hover { background: var(--c-paper); }
.anav__right { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.anav__login { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 350; color: var(--c-graphite); }
.anav__login svg { width: 16px; height: 16px; }
.anav__login:hover { color: var(--c-obsidian); background: var(--c-cloud); }
.anav__burger {
display: none;
width: 44px; height: 44px; border-radius: var(--r-btn);
border: 1px solid var(--c-cloud); background: #fff; color: var(--c-obsidian);
align-items: center; justify-content: center;
}
/* mobile navbar: keep only burger on the right so it stays on-screen */
/* mobile slide-down menu (kept sheet mechanics) */
.m-menu { position: fixed; inset: 0; z-index: 400; display: none; background: rgba(9, 9, 11, 0); transition: background .35s ease; }
.m-menu.is-open { display: block; }
.m-menu.is-shown { background: rgba(9, 9, 11, .4); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.m-menu__panel {
position: absolute; top: 0; left: 0; right: 0;
background: #fff; border-radius: 0 0 28px 28px;
padding: calc(env(safe-area-inset-top, 0px) + 18px) 22px 14px;
border-bottom: 1px solid var(--c-cloud);
transform: translateY(-106%);
transition: transform .42s cubic-bezier(.32, .72, 0, 1);
overscroll-behavior: contain; touch-action: pan-y;
}
.m-menu.is-shown .m-menu__panel { transform: translateY(0); }
.m-menu__close {
position: absolute; top: calc(env(safe-area-inset-top, 0px) + 16px); right: 18px;
width: 38px; height: 38px; border-radius: var(--r-tag);
background: var(--c-paper); border: 1px solid var(--c-cloud);
color: var(--c-obsidian); font-size: 20px; line-height: 1;
display: flex; align-items: center; justify-content: center;
}
.m-menu nav { display: flex; flex-direction: column; margin-top: 26px; }
.m-menu nav a {
color: var(--c-obsidian); font-size: 22px; font-weight: 500; letter-spacing: -0.01em;
padding: 13px 4px; border-bottom: 1px solid var(--c-cloud);
}
.m-menu nav a:last-child { border-bottom: none; }
.m-menu__lang { display: flex; gap: 8px; margin-top: 18px; }
.m-menu__lang a { padding: 8px 16px; border: 1px solid var(--c-cloud); border-radius: var(--r-tag); color: var(--c-iron); font-size: 13px; font-weight: 400; }
.m-menu__lang a.is-cur { background: var(--c-obsidian); border-color: var(--c-obsidian); color: #fff; }
.m-menu__grab { width: 44px; height: 5px; border-radius: var(--r-tag); background: var(--c-mist); margin: 14px auto 2px; }
/* ---------------------------------------------------------------------
PROMO BANNER — rounded strip with nature edges
--------------------------------------------------------------------- */
.aibn {
position: relative;
display: flex; align-items: center; justify-content: center; gap: 14px;
min-height: 56px;
margin-top: 12px;
padding: 10px 150px;
background: var(--c-paper);
border: 1px solid var(--c-cloud);
border-radius: 22px;
overflow: hidden;
text-align: center;
transition: background .25s ease;
}
.aibn:hover { background: var(--c-cloud); }
.aibn__img { position: absolute; top: 0; bottom: 0; width: 170px; pointer-events: none; }
.aibn__img img { width: 100%; height: 100%; object-fit: cover; }
.aibn__img--l { left: 0; -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent); mask-image: linear-gradient(90deg, #000 30%, transparent); }
.aibn__img--r { right: 0; -webkit-mask-image: linear-gradient(270deg, #000 30%, transparent); mask-image: linear-gradient(270deg, #000 30%, transparent); }
.aibn__img--r img { transform: scaleX(-1); }
.aibn__txt { position: relative; z-index: 2; font-size: 15px; font-weight: 350; color: var(--c-graphite); }
.aibn__cta {
position: relative; z-index: 2;
display: inline-flex; align-items: center;
padding: 11px 20px;
background: #fff; border: 1px solid var(--c-cloud); border-radius: 16px;
font-size: 14px; font-weight: 400; color: var(--c-graphite); white-space: nowrap;
transition: background .2s ease;
}
.aibn:hover .aibn__cta { background: var(--c-paper); }
/* ---------------------------------------------------------------------
HERO — white, split: rotating H1 left, paragraph + email form right;
big stacked stats + grayscale logo marquee below
--------------------------------------------------------------------- */
.hero { position: relative; background: #fff; }
.hero__in { max-width: var(--w-mid); margin: 0 auto; padding: 96px var(--pad-x) 144px; }
.hero__chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.hero__grid {
display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
gap: 64px; align-items: start;
}
.hero__title { max-width: none; text-wrap: initial; }
.hero-cta { max-width: 470px; justify-self: end; padding-top: 14px; }
.hero-cta__p { font-size: 17px; line-height: 1.6; color: var(--c-steel); margin: 0 0 44px; }
.hero__faces { display: inline-flex; align-items: center; vertical-align: middle; margin: 0 2px; }
.hero__faces img {
width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
border: 2px solid #fff; margin-left: -8px;
}
.hero__faces img:first-child { margin-left: 0; }
.hero-cta__form {
display: flex; align-items: center; gap: 8px;
background: #fff;
border: 1px solid var(--c-cloud);
border-radius: 26px;
padding: 10px 10px 10px 24px;
box-shadow: 0 1px 0 rgba(9, 9, 11, .03);
}
.hero-cta__form .abtn { height: 56px; border-radius: 18px; padding: 0 26px; font-size: 15px; }
.hero-cta__form input {
flex: 1 1 auto; min-width: 0;
border: none; outline: none; background: none;
font-size: 17px; color: var(--c-graphite);
font-family: inherit;
}
.hero-cta__form input::placeholder { color: var(--c-ash); }
.hero-cta__form .abtn { flex: 0 0 auto; }
.hero__bottom {
display: flex; align-items: flex-end; justify-content: space-between; gap: 48px;
margin-top: 150px;
}
.hero__stats { display: flex; flex-direction: column; gap: 44px; flex: 0 0 auto; }
.hstat { display: flex; align-items: center; gap: 16px; }
.hstat__n { font-size: 40px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; color: var(--c-obsidian); font-variant-numeric: tabular-nums; }
.hstat__l { font-size: 15px; line-height: 1.35; color: var(--c-steel); }
.hero__logos { flex: 1 1 auto; min-width: 0; max-width: 720px; }
.hero__logos .marq::before { background: linear-gradient(90deg, #fff, transparent); }
.hero__logos .marq::after { background: linear-gradient(270deg, #fff, transparent); }
.hero__logos .marq__logo { color: var(--c-ash); font-size: 21px; }
/* ---------------------------------------------------------------------
CATEGORY BAND — big tall service cards, horizontal scroll
--------------------------------------------------------------------- */
.catband { background: #fff; padding: 40px 0 96px; }
.cat {
position: relative; flex: 0 0 auto;
width: min(464px, 84vw);
aspect-ratio: 464 / 640;
border-radius: var(--r-card);
overflow: hidden;
background: var(--c-graphite);
scroll-snap-align: center;
display: flex; flex-direction: column; justify-content: flex-end;
padding: 28px;
user-select: none; -webkit-user-select: none;
}
.cat > img.cat__bg {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
transition: transform .7s var(--ease-soft); -webkit-user-drag: none;
}
.cat:hover > img.cat__bg { transform: scale(1.03); }
.cat::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(9, 9, 11, .06) 40%, rgba(9, 9, 11, .62) 100%);
}
.cat--flat::after { display: none; }
.cat__prog { position: absolute; top: 18px; left: 24px; right: 24px; display: flex; gap: 8px; z-index: 3; }
.cat__prog i { flex: 1 1 0; height: 3px; border-radius: 100px; background: rgba(255, 255, 255, .45); }
.cat__prog i:first-child { background: #fff; }
.cat__t {
position: relative; z-index: 2;
color: #fff; font-size: 32px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.25;
margin: 0 0 16px;
text-wrap: balance;
}
.cat--flat .cat__t { position: absolute; top: 28px; left: 28px; right: 28px; margin: 0; }
.cat__tags { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; }
.cat__tags span {
padding: 8px 16px;
border: 1px solid rgba(255, 255, 255, .55);
border-radius: var(--r-tag);
color: #fff; font-size: 14px; font-weight: 350; line-height: 1.3; white-space: nowrap;
}
.cat--flat { background: #22392b; }
.cat__collage {
position: absolute; left: 28px; right: 28px; top: 108px; bottom: 190px;
display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px;
z-index: 1;
}
.cat__collage img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.cat__collage img:first-child { grid-row: span 2; }
/* ---------------------------------------------------------------------
TEAM ROLES BAND — talent-style cards
--------------------------------------------------------------------- */
.tal {
flex: 0 0 auto; width: 306px;
scroll-snap-align: start;
user-select: none; -webkit-user-select: none;
}
.tal__photo {
aspect-ratio: 306 / 320;
border-radius: var(--r-card);
overflow: hidden;
background: var(--c-mist);
margin-bottom: 18px;
}
.tal__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-soft); -webkit-user-drag: none; }
.tal:hover .tal__photo img { transform: scale(1.04); }
.tal__kicker { font-size: 14px; color: var(--c-steel); margin-bottom: 4px; }
.tal__role { font-size: 20px; font-weight: 600; color: var(--c-obsidian); letter-spacing: -0.01em; }
.tal__role span { font-weight: 350; font-size: 14px; color: var(--c-steel); }
.tal__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tal__with { font-size: 14px; color: var(--c-steel); margin: 18px 0 8px; }
.tal__logo { font-weight: 600; font-size: 17px; letter-spacing: .02em; color: var(--c-graphite); }
/* ---------------------------------------------------------------------
SWIPER (generic): scroll-snap track + arrows
--------------------------------------------------------------------- */
.swp { position: relative; }
.swp__head {
display: flex; align-items: center; justify-content: space-between; gap: 20px;
margin-bottom: 32px;
}
.swp__head .hh4 { font-size: 20px; font-weight: 500; line-height: 1.28; }
.swp__track {
display: flex; gap: 16px;
overflow-x: auto; scroll-snap-type: x mandatory;
scrollbar-width: none; -webkit-overflow-scrolling: touch;
cursor: grab;
padding: 4px;
}
.swp__track::-webkit-scrollbar { display: none; }
.swp__track.is-drag { cursor: grabbing; scroll-snap-type: none; }
.swp__nav { display: flex; gap: 10px; }
/* big case slides */
.cases__grid { align-items: stretch; }
.case {
position: relative; flex: 0 0 auto;
width: min(1022px, 82vw);
aspect-ratio: 16 / 9.6;
border-radius: var(--r-card-lg);
overflow: hidden;
background: var(--c-graphite);
scroll-snap-align: center;
cursor: pointer;
user-select: none; -webkit-user-select: none;
}
.case img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-soft); -webkit-user-drag: none; }
.case:hover img { transform: scale(1.02); }
.case__brand {
position: absolute; top: 26px; left: 0; right: 0; z-index: 2;
display: flex; align-items: center; justify-content: center; gap: 12px;
color: #fff; font-weight: 600; font-size: 15px; letter-spacing: .04em;
text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}
.case__brand .x { font-weight: 350; opacity: .8; }
.case__cap {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
padding: 80px 28px 24px;
background: linear-gradient(180deg, rgba(9, 9, 11, 0), rgba(9, 9, 11, .72));
}
.case__title { color: #fff; font-size: 22px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; }
.case__tag {
flex: 0 0 auto;
padding: 6px 12px; border-radius: var(--r-tag);
background: rgba(255, 255, 255, .16);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
color: #fff; font-size: 12px; font-weight: 400;
}
/* achievements slides */
.ach {
flex: 0 0 auto;
width: 333px; min-height: 230px;
border: 1px solid var(--c-cloud); border-radius: var(--r-card);
background: #fff;
padding: 24px;
display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
scroll-snap-align: start;
}
.ach__top { display: flex; align-items: center; gap: 12px; }
.ach__logo {
width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto;
background: var(--c-graphite); color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 600; font-size: 15px;
}
.ach__name { font-size: 20px; font-weight: 600; color: var(--c-obsidian); }
.ach__desc { font-size: 14px; color: var(--c-steel); line-height: 1.55; }
.ach__label { font-size: 14px; font-weight: 500; color: var(--c-graphite); }
.ach__num { font-size: var(--h4); font-weight: 600; letter-spacing: -0.01em; color: var(--c-obsidian); line-height: 1.1; }
/* ---------------------------------------------------------------------
WHY — bento grid
--------------------------------------------------------------------- */
.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.why__col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.wcard {
background: var(--c-paper);
border-radius: var(--r-card);
padding: 28px;
position: relative; overflow: hidden;
}
.wcard__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.wcard__num { font-size: var(--h4); font-weight: 600; letter-spacing: -0.01em; color: var(--c-obsidian); line-height: 1.1; }
.wcard__label { font-size: 20px; font-weight: 500; color: var(--c-graphite); margin-top: 4px; line-height: 1.4; }
.wcard__ico {
width: 64px; height: 64px; flex: 0 0 auto;
border-radius: 22px; background: #fff;
box-shadow: 0 1px 0 rgba(9, 9, 11, .05), inset 0 0 0 1px var(--c-cloud);
display: flex; align-items: center; justify-content: center;
color: var(--c-obsidian);
}
.wcard__ico svg { width: 26px; height: 26px; }
/* review card in bento */
.wcard--review { padding: 20px; background: var(--c-paper); }
.wcard--review.is-tall { display: flex; flex-direction: column; height: 100%; }
.wcard--review.is-tall .wrev__media { flex: 1 1 auto; aspect-ratio: auto; min-height: 300px; }
.wrev__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.wrev__ava {
width: 52px; height: 52px; border-radius: 50%; flex: 0 0 auto;
object-fit: cover; background: var(--c-graphite);
color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 500;
}
.wrev__name { font-size: 20px; font-weight: 600; color: var(--c-obsidian); line-height: 1.2; }
.wrev__role { font-size: 14px; color: var(--c-fog); }
.wrev__media { border-radius: 20px; overflow: hidden; aspect-ratio: 3 / 3.4; background: var(--c-mist); }
.wrev__media img { width: 100%; height: 100%; object-fit: cover; }
.wrev__text { font-size: 14.5px; line-height: 1.6; color: var(--c-graphite); margin: 14px 2px 2px; }
/* logo marquee */
.marq { overflow: hidden; margin-top: 22px; position: relative; }
.marq::before, .marq::after {
content: ""; position: absolute; top: 0; bottom: 0; width: 44px; z-index: 2; pointer-events: none;
}
.marq::before { left: 0; background: linear-gradient(90deg, var(--c-paper), transparent); }
.marq::after { right: 0; background: linear-gradient(270deg, var(--c-paper), transparent); }
.marq__track { display: flex; align-items: center; gap: 34px; width: max-content; animation: marqX 50s linear infinite; }
.marq__track > * { flex: 0 0 auto; }
.marq--rev .marq__track { animation-direction: reverse; }
.marq__logo { font-weight: 600; font-size: 17px; color: var(--c-fog); letter-spacing: .02em; white-space: nowrap; }
@keyframes marqX { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* tag marquees card */
.wcard--tags { padding: 24px 0; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.wcard--tags .marq { margin: 0; }
.wcard--tags .marq::before { background: linear-gradient(90deg, var(--c-paper), transparent); }
.wcard--tags .marq::after { background: linear-gradient(270deg, var(--c-paper), transparent); }
.wcard--tags .marq__track { gap: 8px; animation-duration: 50s; padding: 2px 0; }
.wcard--tags .ctag--dark { font-weight: 400; }
/* vetted face card — tall, moss image bottom */
.wcard--face { text-align: center; padding-top: 34px; min-height: 480px; }
.wcard--face::before {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56%;
background: url('https://images.unsplash.com/photo-1518495973542-4542c06a5843?w=1000&q=75&auto=format&fit=crop') center/cover no-repeat;
-webkit-mask-image: linear-gradient(180deg, transparent, #000 55%);
mask-image: linear-gradient(180deg, transparent, #000 55%);
opacity: .85;
}
.wcard--face .wcard__label { margin: 0 0 22px; font-size: 20px; position: relative; z-index: 2; }
.face-ast { width: 150px; height: 150px; margin: 6px auto 12px; display: block; position: relative; z-index: 2; }
/* hills mini card */
.wcard--hills { min-height: 210px; display: flex; align-items: center; justify-content: center; padding: 28px; }
.wcard--hills::before {
content: ""; position: absolute; inset: 0;
background: url('https://images.unsplash.com/photo-1501854140801-50d01698950b?w=900&q=75&auto=format&fit=crop') center/cover no-repeat;
}
.wcard--hills::after { content: ""; position: absolute; inset: 0; background: rgba(9, 9, 11, .22); }
.wcard--hills span { position: relative; z-index: 2; color: #fff; font-size: 20px; font-weight: 500; text-align: center; max-width: 15ch; line-height: 1.4; }
/* fee card */
.wcard--fee { text-align: center; padding-top: 34px; padding-bottom: 0; }
.wcard--fee .wcard__label { margin: 0 0 12px; font-size: 20px; }
.wcard--fee .ctag { background: #fff; font-weight: 400; }
.wcard--fee__logo { display: block; margin: 18px auto -6px; width: 132px; opacity: .92; }
/* ---------------------------------------------------------------------
ROTATING WORDS + email CTA block
--------------------------------------------------------------------- */
.rot { display: inline; }
.rot__wrap {
display: inline-block; overflow: hidden;
height: calc(var(--h1) * var(--h1-lh) * 0.92);
vertical-align: bottom;
}
.hh2 .rot__wrap { height: calc(var(--h2) * 1.15); }
.rot__inner { display: inline-block; animation: rotWords 10s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite; }
.rot__inner span { display: block; color: var(--c-ash); }
@keyframes rotWords {
0%, 20% { transform: translateY(-80%); }
25%, 45% { transform: translateY(-60%); }
50%, 70% { transform: translateY(-40%); }
75%, 95% { transform: translateY(-20%); }
100% { transform: translateY(0%); }
}
.fcta { max-width: 896px; margin: 0 auto; text-align: center; }
.fcta__form { display: flex; gap: 10px; max-width: 560px; margin: 40px auto 0; }
.fcta__form .qin { flex: 1 1 auto; }
/* full-bleed breakthrough image */
.bimg { border-radius: var(--r-section); overflow: hidden; height: clamp(260px, 44vw, 560px); }
.bimg img { width: 100%; height: 100%; object-fit: cover; }
/* ---------------------------------------------------------------------
SERVICES — tabs bar + card swiper
--------------------------------------------------------------------- */
.stabs {
display: flex; align-items: center; gap: 6px;
background: #fff; border: 1px solid var(--c-cloud); border-radius: 22px;
padding: 8px;
overflow-x: auto; scrollbar-width: none;
}
.stabs::-webkit-scrollbar { display: none; }
.stabs__tab {
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 18px; border: none; border-radius: 14px;
background: transparent; color: var(--c-graphite);
font-size: 13px; font-weight: 400; white-space: nowrap;
transition: background .2s ease, color .2s ease;
}
.stabs__tab:hover { background: var(--c-paper); }
.stabs__tab.is-active { background: var(--c-paper); box-shadow: inset 0 0 0 1px var(--c-cloud); }
.stabs__cta { margin-left: auto; flex: 0 0 auto; }
.svc-card {
flex: 0 0 auto;
width: 311px;
scroll-snap-align: start;
background: #fff; border: 1px solid var(--c-cloud); border-radius: var(--r-card);
overflow: hidden;
display: flex; flex-direction: column;
transition: transform .3s var(--ease-soft), border-color .25s ease, opacity .3s ease;
}
.svc-card:hover { transform: translateY(-4px); border-color: var(--c-mist); }
.svc-card.is-hidden { display: none; }
.svc-card__media { aspect-ratio: 1 / 0.86; background: var(--c-paper); overflow: hidden; }
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-soft); -webkit-user-drag: none; }
.svc-card:hover .svc-card__media img { transform: scale(1.04); }
.svc-card__name { padding: 18px 20px 6px; font-size: 20px; font-weight: 500; color: var(--c-obsidian); letter-spacing: -0.01em; }
.svc-card__tags { padding: 8px 20px 20px; display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.svc-card__tags .ctag { padding: 5px 11px; font-size: 12px; }
/* desktop: grid layout like the reference (wide cards span 2 cols) */
@media (min-width: 900px) {
.svcgrid { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 16px; overflow: visible; cursor: default; padding: 4px 0; }
.svcgrid .svc-card { width: auto; }
.svcgrid .svc-card--wide { grid-column: span 2; }
.svcgrid .svc-card--wide .svc-card__media { aspect-ratio: 2 / 0.86; }
}
.svc-card--cta { position: relative; justify-content: center; align-items: center; border: none; min-height: 260px; }
.svc-card--cta::before { content: ""; position: absolute; inset: 0; background: url('https://images.unsplash.com/photo-1501854140801-50d01698950b?w=1000&q=75&auto=format&fit=crop') center/cover no-repeat; }
.svc-card--cta::after { content: ""; position: absolute; inset: 0; background: rgba(9, 9, 11, .18); }
.svc-card--cta .abtn { position: relative; z-index: 2; }
/* ---------------------------------------------------------------------
HOW IT WORKS — accordion tabs left, image right, auto progress
--------------------------------------------------------------------- */
.how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 20px; align-items: stretch; }
.how__list { display: flex; flex-direction: column; gap: 12px; }
.htab {
background: var(--c-paper); border: none; border-radius: 26px;
padding: 22px 24px;
text-align: left; cursor: pointer;
transition: background .25s ease;
position: relative; overflow: hidden;
}
.htab__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.htab__lead { display: flex; align-items: center; gap: 16px; }
.htab__n {
width: 42px; height: 42px; flex: 0 0 auto;
border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--c-cloud);
display: flex; align-items: center; justify-content: center;
font-size: 13px; color: var(--c-steel);
}
.htab__t { font-size: 20px; font-weight: 500; color: var(--c-obsidian); }
.htab__chev { width: 34px; height: 34px; border-radius: 50%; background: var(--c-fog); color: #fff; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: transform .3s ease, background .3s ease; }
.htab__chev svg { width: 13px; height: 13px; }
.htab.is-active .htab__chev { transform: rotate(180deg); background: var(--c-obsidian); }
.htab__body { display: none; padding: 16px 4px 6px; }
.htab.is-active .htab__body { display: block; }
.htab__d { font-size: 15px; line-height: 1.5; color: var(--c-steel); max-width: 40ch; margin: 0 0 18px; }
.htab__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.htab__prog { flex: 1 1 auto; height: 4px; border-radius: 100px; background: var(--c-cloud); overflow: hidden; max-width: 160px; margin-left: auto; }
.htab__prog i { display: block; height: 100%; width: 0; background: var(--c-obsidian); border-radius: 100px; }
.htab.is-active .htab__prog i { animation: howProg 6s linear forwards; }
@keyframes howProg { from { width: 0; } to { width: 100%; } }
.how__media { border-radius: 26px; overflow: hidden; background: var(--c-paper); min-height: 420px; position: relative; }
.how__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s ease; }
.how__media img.is-active { opacity: 1; }
.htab__media-m { display: none; border-radius: 18px; overflow: hidden; margin-bottom: 16px; aspect-ratio: 4 / 3; }
.htab__media-m img { width: 100%; height: 100%; object-fit: cover; }
/* ---------------------------------------------------------------------
STEPS — quality funnel (dark first card)
--------------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: stretch; }
.step {
border: 1px solid var(--c-cloud); border-radius: var(--r-card);
background: #fff;
padding: 26px 24px 24px;
display: flex; flex-direction: column; gap: 8px;
min-height: 320px;
position: relative; overflow: hidden;
}
.step--dark { background: var(--c-iron); border-color: var(--c-iron); color: #fff; }
.step__tag { align-self: flex-start; margin-bottom: 8px; }
.step--dark .step__tag { background: rgba(255, 255, 255, .12); border-color: transparent; color: #fff; }
.step__t { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.step--dark .step__t { color: #fff; }
.step__num { font-size: var(--h3); font-weight: 500; letter-spacing: -0.01em; color: var(--c-obsidian); margin-top: auto; }
.step--dark .step__num { color: #fff; }
.step__d { font-size: 14px; line-height: 1.5; color: var(--c-steel); }
.step--dark .step__d { color: rgba(255, 255, 255, .85); }
.step__faces { display: flex; margin-top: 14px; }
.step__faces img, .step__faces span {
width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
border: 2px solid #fff; margin-left: -10px;
background: var(--c-mist);
}
.step__faces > *:first-child { margin-left: 0; }
/* ---------------------------------------------------------------------
REVIEWS WALL
--------------------------------------------------------------------- */
.wall { position: relative; }
.tsl__grid { columns: 3; column-gap: 16px; max-height: 1240px; overflow: hidden; transition: max-height .5s ease; }
.wall.is-open .tsl__grid { max-height: none; }
.tsl-card {
break-inside: avoid;
background: #fff; border: 1px solid var(--c-cloud); border-radius: var(--r-card);
padding: 24px;
margin: 0 0 16px;
display: flex; flex-direction: column; gap: 14px;
}
.tsl-card__who { display: flex; align-items: center; gap: 12px; }
.tsl-card__ava {
width: 52px; height: 52px; flex: 0 0 auto; border-radius: 50%;
background: var(--c-graphite); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 15px; font-weight: 500; letter-spacing: .03em;
object-fit: cover; overflow: hidden;
}
.tsl-card__ava img { width: 100%; height: 100%; object-fit: cover; }
.tsl-card__name { font-size: 20px; font-weight: 600; color: var(--c-obsidian); line-height: 1.25; }
.tsl-card__role { font-size: 14px; color: var(--c-fog); line-height: 1.3; }
.tsl-card__stars { display: flex; gap: 3px; color: var(--c-graphite); }
.tsl-card__stars svg { width: 14px; height: 14px; }
.tsl-card__text { font-size: 15px; line-height: 1.55; color: var(--c-graphite); margin: 0; }
.tsl-card--badge { align-items: center; text-align: center; gap: 10px; padding: 30px 24px; }
.tsl-card--badge img { height: 34px; width: auto; }
.tsl-card--badge .b-note { font-size: 13px; color: var(--c-fog); }
.tsl-card--badge .b-score { font-size: 30px; font-weight: 500; color: var(--c-obsidian); letter-spacing: -0.01em; }
.wall__more { display: flex; justify-content: center; margin-top: 28px; }
/* ---------------------------------------------------------------------
FAQ — aside + rounded accordion rows
--------------------------------------------------------------------- */
.faq { display: grid; grid-template-columns: minmax(0, 380px) 1fr; gap: 56px; align-items: start; }
.faq__aside { position: sticky; top: calc(var(--hdr-h) + 24px); }
.faq__ai-label { font-size: 16px; color: var(--c-graphite); margin: 22px 0 14px; }
.faq__ai { display: flex; gap: 8px; }
.faq__ai a {
width: 46px; height: 46px; border-radius: 50%;
background: var(--c-paper); border: 1px solid var(--c-cloud);
display: flex; align-items: center; justify-content: center;
color: var(--c-graphite); font-size: 18px;
transition: background .2s ease, transform .2s ease;
}
.faq__ai a:hover { background: var(--c-cloud); transform: translateY(-2px); }
.faq__still {
margin-top: 48px;
background: var(--c-paper); border-radius: var(--r-card);
padding: 24px;
}
.faq__still p { margin: 0 0 16px; font-size: 15px; color: var(--c-graphite); font-weight: 400; }
.faq__list { display: flex; flex-direction: column; gap: 12px; }
.faq__item { background: var(--c-paper); border: 1px solid var(--c-cloud); border-radius: 36px; overflow: hidden; box-shadow: inset 0 1px #e4e4e7; }
.faq__q {
list-style: none; cursor: pointer;
display: flex; align-items: center; justify-content: space-between; gap: 18px;
padding: 24px 26px;
font-weight: 500; font-size: 20px; color: var(--c-obsidian); letter-spacing: -0.01em;
transition: color .2s ease;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__pm {
position: relative; flex: 0 0 auto; width: 34px; height: 34px;
border-radius: 50%; background: var(--c-fog);
transition: background .25s ease, transform .3s ease;
}
.faq__pm::before {
content: ""; position: absolute; left: 50%; top: 50%;
width: 9px; height: 9px;
border-right: 2px solid #fff; border-bottom: 2px solid #fff;
transform: translate(-50%, -65%) rotate(45deg);
}
.faq__item[open] .faq__pm { background: var(--c-obsidian); transform: rotate(180deg); }
.faq__a { padding: 0 26px 24px; font-size: 15px; line-height: 1.6; color: var(--c-steel); max-width: 62ch; }
.faq__a a { color: var(--c-obsidian); text-decoration: underline; }
/* ---------------------------------------------------------------------
BIG CTA — full-bleed hills + animated chevron button
--------------------------------------------------------------------- */
.bcta {
position: relative;
border-radius: var(--r-section);
overflow: hidden;
min-height: 560px;
}
.bcta--bleed {
border-radius: 36px 36px 0 0;
min-height: 596px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 36px;
padding: 80px var(--pad-x);
text-align: center;
}
.bcta::before {
content: ""; position: absolute; inset: 0;
background: url('https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=2000&q=80&auto=format&fit=crop') center/cover no-repeat;
}
.bcta::after { content: ""; position: absolute; inset: 0; background: rgba(9, 9, 11, .3); }
.bcta__t {
position: relative; z-index: 2;
font-size: var(--h1); line-height: var(--h1-lh);
color: #fff; max-width: 20ch;
text-shadow: 0 4px 30px rgba(0, 0, 0, .35);
}
.bcta__btn {
position: relative; z-index: 2;
display: inline-flex; align-items: center; gap: 14px;
height: 60px; padding: 0 26px;
border-radius: var(--r-btn);
background: rgba(9, 9, 11, .38);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, .28);
color: #fff; font-size: 16px; font-weight: 400;
transition: background .3s ease, transform .25s var(--ease-spring);
overflow: hidden;
}
.bcta__btn:hover { background: rgba(9, 9, 11, .6); transform: translateY(-2px); }
.bcta__chev { display: flex; }
.bcta__chev svg { width: 12px; height: 14px; opacity: 0; animation: chevPulse 1.6s ease-in-out infinite; }
.bcta__chev svg:nth-child(2) { animation-delay: .18s; }
.bcta__chev svg:nth-child(3) { animation-delay: .36s; }
.bcta__chev--l svg { transform: scaleX(-1); }
.bcta__chev--l svg:nth-child(1) { animation-delay: .36s; }
.bcta__chev--l svg:nth-child(3) { animation-delay: 0s; }
@keyframes chevPulse { 0%, 100% { opacity: .15; } 50% { opacity: .95; } }
/* ---------------------------------------------------------------------
FOOTER — gray panel: media block, contact card + columns, giant logo
--------------------------------------------------------------------- */
.ftr { color: var(--c-graphite); }
.ftr__media { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.ftr__video { border-radius: var(--r-card); overflow: hidden; aspect-ratio: 16 / 9; background: var(--c-graphite); position: relative; }
.ftr__video video, .ftr__video img { width: 100%; height: 100%; object-fit: cover; }
.ftr__posts { display: flex; flex-direction: column; }
.ftr__post { display: block; padding: 18px 2px; border-bottom: 1px solid var(--c-cloud); transition: padding-left .25s ease; }
.ftr__post:hover { padding-left: 8px; }
.ftr__post .ctag { margin-bottom: 10px; }
.ftr__post-t { font-size: 20px; font-weight: 500; color: var(--c-obsidian); letter-spacing: -0.01em; line-height: 1.4; }
.ftr__divider { height: 1px; background: var(--c-cloud); margin: 56px 0 48px; }
.ftr__menu { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, .6fr)); gap: 40px; align-items: start; }
.ftr__contact {
background: #fff; border-radius: var(--r-card);
padding: 28px;
}
.ftr__contact-t { font-size: 20px; font-weight: 500; color: var(--c-obsidian); margin: 0 0 12px; }
.ftr__contact-a { font-size: 15px; color: var(--c-steel); line-height: 1.5; margin: 0 0 44px; }
.ftr__contact-b { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ftr__contact-links { display: flex; flex-direction: column; gap: 2px; }
.ftr__contact-links a { font-size: 15px; font-weight: 500; color: var(--c-obsidian); padding: 5px 0; }
.ftr__soc { display: flex; gap: 8px; }
.ftr__soc a {
width: 44px; height: 44px;
border-radius: 14px; background: var(--c-paper); border: 1px solid var(--c-cloud);
display: flex; align-items: center; justify-content: center;
color: var(--c-graphite);
transition: background .2s ease, transform .2s ease;
}
.ftr__soc a:hover { background: var(--c-cloud); transform: translateY(-2px); }
.ftr__soc svg { width: 19px; height: 19px; }
.ftr__col h3 { font-size: 16px; font-weight: 500; color: var(--c-obsidian); margin: 4px 0 16px; }
.ftr__col a { display: block; font-size: 15px; color: var(--c-steel); padding: 6px 0; margin-bottom: 2px; transition: color .2s ease; }
.ftr__col a:hover { color: var(--c-obsidian); }
.ftr__col p { font-size: 15px; color: var(--c-fog); margin: 0 0 12px; }
.ftr__giant {
margin-top: 72px;
font-weight: 600; font-size: clamp(56px, 10.6vw, 148px); line-height: .94;
letter-spacing: -0.02em; color: var(--c-obsidian); text-align: center;
user-select: none;
}
.ftr__bottom {
display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
margin-top: 48px; padding-top: 24px;
border-top: 1px solid var(--c-cloud);
font-size: 13px; color: var(--c-fog);
}
.ftr__lang a { color: var(--c-fog); margin-left: 8px; padding: 9px 7px; display: inline-block; font-weight: 400; }
.ftr__lang a.is-cur, .ftr__lang a:hover { color: var(--c-obsidian); }
.ftr__admin {
display: inline-flex; align-items: center; padding: 7px 14px;
border: 1px solid var(--c-cloud); border-radius: var(--r-tag);
color: var(--c-fog); font-size: 12px; font-weight: 400;
transition: all .2s ease;
}
.ftr__admin:hover { background: var(--c-obsidian); border-color: var(--c-obsidian); color: #fff; }
/* inner-pages footer (chrome.js markup) */
.ftr__top { display: flex; flex-wrap: wrap; gap: 48px; justify-content: space-between; margin-bottom: 8px; }
.ftr__brand { max-width: 330px; }
.ftr__logo { display: inline-block; font-weight: 600; font-size: 20px; letter-spacing: .02em; color: var(--c-obsidian); padding: 8px 0; margin-bottom: 8px; }
.ftr__tag { color: var(--c-steel); font-size: 14px; line-height: 1.6; margin: 0 0 18px; }
.ftr__seo { margin: 32px 0 0; padding-top: 24px; border-top: 1px solid var(--c-cloud); color: var(--c-fog); font-size: 13px; line-height: 1.7; max-width: 1060px; }
.ftr__seo strong { color: var(--c-steel); font-weight: 500; }
/* floating chat bubble */
.chatb {
position: fixed; right: 22px; bottom: 22px; z-index: 350;
width: 56px; height: 56px; border-radius: 50%;
background: var(--c-graphite); color: #fff;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 12px 30px rgba(9, 9, 11, .3);
transition: transform .25s var(--ease-spring), background .2s ease;
}
.chatb:hover { transform: scale(1.06); background: var(--c-obsidian); }
.chatb svg { width: 24px; height: 24px; }
/* ---------------------------------------------------------------------
CONTACT FORM CARD (lead form on page)
--------------------------------------------------------------------- */
.contact__card {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: 56px;
background: #fff; border-radius: var(--r-card-lg);
border: 1px solid var(--c-cloud);
padding: 48px;
}
.contact__links { display: flex; flex-direction: column; gap: 10px; margin: 26px 0; }
.contact__links a { display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 16px; font-weight: 400; color: var(--c-graphite); width: fit-content; }
.contact__links a:hover { color: var(--c-obsidian); }
.contact__links svg { color: var(--c-fog); width: 18px; height: 18px; }
.contact__meta { font-size: 13px; color: var(--c-fog); line-height: 1.6; margin: 0 0 26px; }
.cform { display: flex; flex-direction: column; gap: 14px; }
.cform label, .cform .cform__label { display: block; font-size: 13px; font-weight: 400; color: var(--c-iron); }
.cf-input, .ls-in {
display: block; width: 100%; margin-top: 6px;
height: 50px; padding: 0 16px;
background: #fafafa; border: 1px solid var(--c-cloud); border-radius: var(--r-input);
font-size: 15px; color: var(--c-graphite); outline: none;
transition: border-color .2s ease, background .2s ease;
-webkit-appearance: none; appearance: none;
}
.cf-input::placeholder, .ls-in::placeholder { color: var(--c-ash); }
.cf-input:focus, .ls-in:focus { border-color: var(--c-iron); background: #fff; }
select.cf-input, select.ls-in {
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2352525b' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 16px center;
padding-right: 40px;
}
textarea.cf-input, textarea.ls-in { height: auto; min-height: 104px; padding: 12px 16px; line-height: 1.5; resize: vertical; }
.bpill {
display: inline-flex; align-items: center; justify-content: center;
height: 38px; padding: 0 14px;
border: 1px solid var(--c-cloud); border-radius: var(--r-tag);
background: #fff; color: var(--c-iron);
font-size: 13px; font-weight: 400; cursor: pointer;
position: relative; overflow: hidden; white-space: nowrap;
transition: all .2s ease;
}
.bpill input { position: absolute; opacity: 0; pointer-events: none; }
.bpill:hover { border-color: var(--c-mist); }
.bpill:has(input:checked) { background: var(--c-obsidian); border-color: var(--c-obsidian); color: #fff; }
.cform__pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cf-submit {
display: inline-flex; align-items: center; justify-content: center;
height: 54px; padding: 0 28px;
border: none; border-radius: var(--r-btn);
background: var(--c-obsidian); color: #fff;
font-size: 15px; font-weight: 400;
box-shadow: var(--shadow-btn);
margin-top: 6px;
transition: background .2s ease, transform .2s ease, opacity .2s ease;
}
.cf-submit { overflow: hidden; position: relative; }
.cf-submit::before {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .22) 50%, transparent 75%);
transform: translateX(-130%);
}
.cf-submit:hover { background: var(--c-slate); }
.cf-submit:hover::before { animation: btnSweep 1.5s ease-in-out; }
.cf-submit:disabled { opacity: .6; cursor: default; transform: none; }
/* ---------------------------------------------------------------------
PORTFOLIO MODAL (kept)
--------------------------------------------------------------------- */
.cmodal { position: fixed; inset: 0; z-index: 1100; display: none; }
.cmodal.is-open { display: block; }
.cmodal__bd { position: absolute; inset: 0; background: rgba(9, 9, 11, 0); transition: background .4s ease; }
.cmodal.is-shown .cmodal__bd { background: rgba(9, 9, 11, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.cmodal__panel {
position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto;
width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
background: #fff; border-radius: 28px 28px 0 0;
padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 24px);
transform: translateY(100%); transition: transform .44s cubic-bezier(.32, .72, 0, 1);
touch-action: pan-y;
}
.cmodal.is-shown .cmodal__panel { transform: translateY(0); }
.cmodal__grab { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 3; width: 44px; height: 5px; border-radius: 100px; background: rgba(255, 255, 255, .8); }
.cmodal__x {
position: absolute; top: 14px; right: 16px; z-index: 3; width: 36px; height: 36px;
border-radius: 50%; border: none;
background: rgba(9, 9, 11, .5); color: #fff; font-size: 14px;
display: flex; align-items: center; justify-content: center;
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.cmodal__media { width: 100%; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 28px 28px 0 0; background: var(--c-paper); }
.cmodal__media img { width: 100%; height: 100%; object-fit: cover; }
.cmodal__body { padding: 22px 24px 0; }
.cmodal__tag { display: inline-flex; padding: 5px 11px; margin-bottom: 12px; background: var(--c-ember); color: #fff; border-radius: var(--r-tag); font-size: 12px; font-weight: 400; }
.cmodal__title { font-size: 24px; font-weight: 500; letter-spacing: -0.01em; color: var(--c-obsidian); margin: 0 0 10px; line-height: 1.25; }
.cmodal__desc { font-size: 15px; line-height: 1.55; color: var(--c-steel); margin: 0 0 16px; }
.cmodal__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.cmodal__tags span { font-size: 12px; color: var(--c-graphite); border: 1px solid var(--c-cloud); padding: 5px 11px; border-radius: var(--r-tag); }
.cmodal__link {
display: inline-flex; align-items: center; justify-content: center;
height: 48px; padding: 0 24px; border-radius: var(--r-btn);
background: var(--c-obsidian); color: #fff; box-shadow: var(--shadow-btn);
font-weight: 400; font-size: 14px;
transition: transform .25s ease, background .2s ease;
}
.cmodal__link:hover { background: var(--c-slate); }
@media (min-width: 768px) {
.cmodal__panel {
bottom: auto; top: 50%; left: 50%; right: auto; margin: 0;
transform: translate(-50%, -46%) scale(.97); opacity: 0;
border-radius: 28px; max-height: 88vh; border: 1px solid var(--c-cloud);
transition: transform .4s cubic-bezier(.32, .72, 0, 1), opacity .3s ease;
}
.cmodal.is-shown .cmodal__panel { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.cmodal__grab { display: none; }
}
/* ---------------------------------------------------------------------
LEAD BOTTOM-SHEET (kept)
--------------------------------------------------------------------- */
.lsheet { position: fixed; inset: 0; z-index: 1000; display: none; }
.lsheet.is-open { display: block; }
.lsheet__bd { position: absolute; inset: 0; background: rgba(9, 9, 11, 0); transition: background .4s ease; }
.lsheet.is-shown .lsheet__bd { background: rgba(9, 9, 11, .5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.lsheet__panel {
position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto;
width: 100%; max-width: 600px; max-height: 94vh;
overflow-y: auto; -webkit-overflow-scrolling: touch;
background: #fff; border-radius: 28px 28px 0 0;
padding: 12px 22px calc(env(safe-area-inset-bottom, 0px) + 18px);
transform: translateY(100%);
transition: transform .44s cubic-bezier(.32, .72, 0, 1);
touch-action: pan-y; overscroll-behavior: contain;
}
.lsheet.is-shown .lsheet__panel { transform: translateY(0); }
.lsheet__grab { width: 44px; height: 5px; border-radius: 100px; background: var(--c-mist); margin: 4px auto 18px; cursor: grab; }
.lsheet__x {
position: absolute; top: 18px; right: 22px; width: 36px; height: 36px;
border-radius: 50%; border: 1px solid var(--c-cloud);
background: var(--c-paper); color: var(--c-obsidian); font-size: 15px; line-height: 1;
display: flex; align-items: center; justify-content: center;
}
.lsheet__title { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; color: var(--c-obsidian); margin: 0 0 5px; }
.lsheet__sub { font-size: 14px; color: var(--c-steel); margin: 0 0 16px; line-height: 1.45; }
.lsheet__form { display: flex; flex-direction: column; gap: 13px; }
.lsheet__form > label { display: block; font-weight: 400; font-size: 13px; color: var(--c-iron); }
.ls-bud .ls-budlabel { font-weight: 400; font-size: 13px; color: var(--c-iron); margin-bottom: 9px; }
.ls-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ls-submit { width: 100%; margin-top: 2px; }
/* ---------------------------------------------------------------------
REVEAL + COUNTERS
--------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-soft), transform .7s var(--ease-soft); will-change: opacity, transform; }
.reveal.is-in { opacity: 1; transform: none; will-change: auto; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.rot__inner, .marq__track, .bcta__chev svg { animation: none !important; }
.m-menu__panel, .lsheet__panel, .cmodal__panel { transition: none; }
}
.sec-anchor { display: block; height: 0; width: 0; overflow: hidden; scroll-margin-top: calc(var(--hdr-h) + 16px); }
section[id], .panel[id] { scroll-margin-top: calc(var(--hdr-h) + 8px); }
/* spacers */
.sp-16 { height: 16px; } .sp-24 { height: 24px; } .sp-32 { height: 32px; }
.sp-48 { height: 48px; } .sp-64 { height: 64px; } .sp-80 { height: 80px; } .sp-96 { height: 96px; } .sp-144 { height: 144px; }
/* =====================================================================
INNER PAGES (seo-page) — same visual system
===================================================================== */
body.seo-page { background: #fff; color: var(--c-graphite); }
.container { max-width: var(--w-mid); margin: 0 auto; padding: 0 var(--pad-x); }
.section { padding: 60px 0; }
/* header injected by chrome.js */
.ihero {
position: sticky; top: 0; z-index: 300;
display: flex; align-items: center; justify-content: space-between; gap: 16px;
height: var(--hdr-h); padding: 0 var(--pad-x);
background: #fff;
}
.ihero__logo { font-weight: 600; font-size: 18px; letter-spacing: .02em; color: var(--c-obsidian); line-height: 1; padding: 13px 0; }
.ihero__nav { position: relative; display: flex; align-items: center; gap: 2px; }
.ihero__hl {
position: absolute; top: 50%; left: 0; width: 0; height: 38px;
transform: translateY(-50%);
border-radius: var(--r-tag); background: var(--c-paper);
opacity: 0; pointer-events: none;
transition: left .35s var(--ease-spring), width .35s var(--ease-spring), opacity .25s ease;
}
.ihero__nav.is-hover .ihero__hl { opacity: 1; }
.ihero__link {
position: relative; z-index: 1;
display: inline-flex; align-items: center;
height: 38px; padding: 0 14px; border-radius: var(--r-tag);
color: var(--c-graphite); font-size: 15px; font-weight: 350;
transition: color .2s ease;
}
.ihero__link:hover, .ihero__link.is-active { color: var(--c-obsidian); }
.ihero__actions { display: flex; align-items: center; gap: 10px; }
.ihero__btn {
display: flex; align-items: center; justify-content: center;
width: 44px; height: 44px; border-radius: var(--r-btn);
background: #fff; border: 1px solid var(--c-cloud); color: var(--c-graphite);
padding: 0; transition: background .2s ease, transform .2s ease;
}
.ihero__btn:hover { background: var(--c-paper); }
.ihero__cta {
display: inline-flex; align-items: center;
height: 44px; padding: 0 20px; border-radius: var(--r-btn);
background: var(--c-obsidian); color: #fff;
font-size: 14px; font-weight: 400; box-shadow: var(--shadow-btn);
transition: background .2s ease, transform .2s ease;
}
.ihero__cta:hover { background: var(--c-slate); transform: translateY(-1px); }
@media (min-width: 861px) { .ihero__menu { display: none; } }
.shdr, .cnav { display: none !important; }
.seo-page__hero { padding: 64px 0 24px; text-align: center; background: var(--c-paper); border-radius: 0 0 var(--r-section) var(--r-section); padding-bottom: 72px; }
.seo-page__breadcrumbs { color: var(--c-fog); font-size: 13px; margin-bottom: 24px; }
.seo-page__breadcrumbs a { display: inline-block; padding: 7px 2px; }
.seo-page__breadcrumbs a:hover { color: var(--c-obsidian); }
.svc-badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 14px; border: 1px solid var(--c-cloud); border-radius: var(--r-tag);
background: #fff; color: var(--c-iron); font-weight: 400; font-size: 13px;
margin-bottom: 24px;
}
.seo-page__h1 { font-weight: 500; font-size: clamp(36px, 5vw, 56px); line-height: 1.15; margin: 0 0 18px; letter-spacing: -0.02em; color: var(--c-obsidian); text-wrap: balance; }
.seo-page__lead { color: var(--c-steel); font-size: 16px; line-height: 1.55; max-width: 620px; margin: 0 auto 28px; }
.seo-page__hero-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.svc-trust { display: flex; gap: 48px; justify-content: center; flex-wrap: wrap; margin-top: 44px; }
.svc-trust__item { display: flex; flex-direction: column; align-items: center; }
.svc-trust__num { font-weight: 500; font-size: 30px; color: var(--c-obsidian); letter-spacing: -0.01em; }
.svc-trust__label { color: var(--c-steel); font-size: 13px; margin-top: 4px; }
.seo-page__section { padding: 48px 0; }
.svc-head { text-align: center; margin-bottom: 40px; }
.svc-head h2 { font-weight: 500; font-size: clamp(26px, 4vw, 40px); line-height: 1.28; margin: 0 0 12px; letter-spacing: -0.01em; color: var(--c-obsidian); text-wrap: balance; }
.svc-sub { color: var(--c-steel); font-size: 15px; max-width: 620px; margin: 0 auto; line-height: 1.55; }
.seo-page__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.seo-page__card, .svc-card-i, .seo-page__cards .svc-card {
width: auto; background: var(--c-paper); border: none; border-radius: var(--r-card);
padding: 28px; transition: transform .25s ease;
display: block; overflow: visible;
}
.seo-page__card:hover, .seo-page__cards .svc-card:hover { transform: translateY(-3px); }
.svc-card__icon {
width: 48px; height: 48px; border-radius: 16px;
display: grid; place-items: center;
background: #fff; box-shadow: inset 0 0 0 1px var(--c-cloud);
color: var(--c-graphite); margin-bottom: 18px;
}
.svc-card__num { color: var(--c-ash); font-weight: 400; font-size: 13px; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.seo-page__card h3, .seo-page__cards .svc-card h3 { font-weight: 500; font-size: 18px; margin: 0 0 8px; color: var(--c-obsidian); letter-spacing: -0.01em; }
.seo-page__card p, .seo-page__cards .svc-card p { color: var(--c-steel); margin: 0; line-height: 1.55; font-size: 14px; }
.svc-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.svc-price { position: relative; background: #fff; border: 1px solid var(--c-cloud); border-radius: var(--r-card); padding: 28px; display: flex; flex-direction: column; }
.svc-price--featured { border-color: var(--c-graphite); }
.svc-price__tag { position: absolute; top: 24px; right: 24px; background: var(--c-ember); color: #fff; font-size: 12px; font-weight: 400; padding: 5px 11px; border-radius: var(--r-tag); }
.svc-price__name { color: var(--c-steel); font-weight: 400; font-size: 14px; }
.svc-price__amount { font-weight: 500; font-size: 36px; margin: 14px 0 22px; color: var(--c-obsidian); letter-spacing: -0.01em; }
.svc-price__list { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.svc-price__list li { display: flex; align-items: center; gap: 10px; color: var(--c-graphite); font-size: 14px; }
.svc-price__list li::before { content: '✓'; color: var(--c-obsidian); font-weight: 500; }
.svc-price .btn { margin-top: auto; }
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: 48px; padding: 0 22px; border: none; border-radius: var(--r-btn);
font-size: 14px; font-weight: 400; line-height: 1; white-space: nowrap;
transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--c-obsidian); color: #fff; box-shadow: var(--shadow-btn); }
.btn-primary:hover { background: var(--c-slate); }
.btn-outline { background: transparent; border: 1px solid var(--c-mist); color: var(--c-graphite); }
.btn-outline:hover { border-color: var(--c-ash); background: #fff; }
.btn-lg { height: 52px; padding: 0 28px; font-size: 15px; }
.btn-full { width: 100%; }
.seo-page__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.seo-page__list li { position: relative; padding: 16px 0 16px 30px; border-bottom: 1px solid var(--c-cloud); color: var(--c-graphite); font-size: 15px; line-height: 1.5; }
.seo-page__list li:first-child { border-top: 1px solid var(--c-cloud); }
.seo-page__list li::before { content: "→"; position: absolute; left: 0; top: 16px; color: var(--c-ash); }
.svc-faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.svc-faq details { background: var(--c-paper); border-radius: 22px; overflow: hidden; }
.svc-faq summary {
list-style: none; cursor: pointer; padding: 20px 24px;
font-weight: 500; font-size: 17px; color: var(--c-obsidian);
display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.svc-faq summary::-webkit-details-marker { display: none; }
.svc-faq summary::after { content: '+'; color: var(--c-steel); font-size: 22px; font-weight: 300; flex: 0 0 auto; }
.svc-faq details[open] summary::after { content: '−'; }
.svc-faq__a { color: var(--c-steel); padding: 0 24px 20px; line-height: 1.6; max-width: 720px; font-size: 14px; }
.seo-page__cta-box {
position: relative; overflow: hidden;
color: #fff; border-radius: var(--r-section);
padding: 72px 40px; text-align: center; margin: 48px 0;
}
.seo-page__cta-box::before { content: ""; position: absolute; inset: 0; background: url('https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=1600&q=75&auto=format&fit=crop') center/cover no-repeat; }
.seo-page__cta-box::after { content: ""; position: absolute; inset: 0; background: rgba(9, 9, 11, .45); }
.seo-page__cta-box > * { position: relative; z-index: 2; }
.seo-page__cta-box h2 { font-weight: 500; font-size: clamp(26px, 4vw, 40px); margin: 0 0 14px; letter-spacing: -0.01em; }
.seo-page__cta-box p { color: rgba(255, 255, 255, .85); max-width: 540px; margin: 0 auto 28px; font-size: 15px; line-height: 1.55; }
.seo-page__cta-box .btn { background: #fff; color: var(--c-obsidian); }
.svc-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.svc-related a { display: block; background: var(--c-paper); border-radius: 22px; padding: 22px 24px; transition: transform .2s ease; }
.svc-related a:hover { transform: translateY(-3px); }
.svc-related h3 { font-weight: 500; font-size: 16px; margin: 0 0 6px; color: var(--c-obsidian); }
.svc-related p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--c-steel); }
.svc-geo { padding-top: 24px; }
.svc-anim { opacity: 0; transform: translateY(20px); animation: svcIn .6s var(--ease-soft) forwards; }
.svc-anim--1 { animation-delay: .05s; } .svc-anim--2 { animation-delay: .1s; }
.svc-anim--3 { animation-delay: .15s; } .svc-anim--4 { animation-delay: .2s; }
.svc-anim--5 { animation-delay: .25s; } .svc-anim--6 { animation-delay: .3s; }
@keyframes svcIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .svc-anim { animation: none; opacity: 1; transform: none; } }
/* legacy homepage shims */
.dfx, .mfx, .dfx2, .mfx2, .dfx4, .mfx4, .dfx5, .mfx5, .dfx6, .mfx6 { display: none !important; }
/* =====================================================================
FIGMA BLOCK 1 — точные значения из макета (node 239:1657)
Шапка + баннер-пилюля + hero. Переопределяет базовые .anav/.aibn/.hero
===================================================================== */
.fw { width: 100%; max-width: none; margin: 0 auto; padding: 0 clamp(20px, 6.25vw, 100px); }
/* ---- Шапка ---- */
.anav { background: #fdfdfd; height: 80px; border-bottom: none; }
.anav__in { width: 100%; max-width: none; margin: 0 auto; height: 80px; padding: 0 clamp(20px, 6.25vw, 100px); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.anav__logo { font-family: 'Unbounded', sans-serif; font-weight: 400; font-size: 18px; line-height: 18px; letter-spacing: 0.36px; color: #09090b; padding: 10px 0; }
.anav__menu { gap: 0; }
.anav__link { font-family: 'Onest', sans-serif; font-weight: 400; font-size: 13px; line-height: 16.25px; color: #18181b; padding: 12px 14px; border-radius: 14px; }
.anav__link:hover { background: #f4f4f5; }
.anav__link svg.chev { width: 12px; height: 12px; color: #18181b; }
.anav__right { gap: 10px; }
.anav__phone { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 14px; font-family: 'Onest', sans-serif; font-weight: 500; font-size: 13px; line-height: 16.25px; color: #18181b; background: none; }
.anav__phone:hover { background: #f4f4f5; }
.anav__phone svg { width: 16px; height: 16px; }
.anav__cta {
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid #636363; padding: 10px 20px; border-radius: 100px;
background: linear-gradient(103.9deg, #000 4.8%, #666 97%);
color: #fff; font-family: 'Onest', sans-serif; font-weight: 400; font-size: 13px; line-height: 16.25px;
height: auto; box-shadow: none;
}
.anav__cta:hover { transform: translateY(-1px); background: linear-gradient(103.9deg, #111 4.8%, #777 97%); }
/* ---- Баннер-пилюля ---- */
.aibn { position: relative; height: 60px; border-radius: 100px; overflow: hidden; background: #d9d9d9; margin-top: 20px; padding: 0; min-height: 0; display: block; }
.aibn:hover { background: #d9d9d9; }
.aibn__bg { position: absolute; inset: 0; background: url('/assets/block1-fig/banner-mountains.jpg') center/cover no-repeat; }
.aibn__overlay { position: absolute; inset: 0; background: linear-gradient(87.5deg, rgba(246,246,246,0) 1.6%, #f6f6f6 31%, #f6f6f6 68%, rgba(246,246,246,0) 91.7%); }
.aibn__txt { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; font-family: 'Onest', sans-serif; font-weight: 500; font-size: 15px; line-height: 22.5px; color: #4b4b4b; white-space: nowrap; text-align: center; }
.aibn__btn { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 2; display: inline-flex; align-items: center; background: #f6f6f6; padding: 12px 20px; border-radius: 100px; font-family: 'Onest', sans-serif; font-weight: 400; font-size: 14px; line-height: 21px; color: #18181b; transition: background .2s ease; }
.aibn__btn:hover { background: #ececee; }
/* ---- Hero ---- */
.hero { background: #fff; padding: 0; }
.hero__in { width: 100%; max-width: none; margin: 0 auto; padding: 50px clamp(20px, 6.25vw, 100px) 0; }
.hero__wrap { max-width: 1260px; margin: 0 auto; display: flex; flex-direction: column; gap: 110px; }
.hero__row { display: flex; gap: 235px; align-items: flex-end; }
.hero__left { width: 570px; flex: 0 0 auto; display: flex; flex-direction: column; gap: 20px; }
.hero__chips { display: flex; gap: 10px; align-items: center; }
.hchip { display: inline-flex; align-items: center; gap: 10px; background: #fafafa; border: 1px solid #f4f4f5; padding: 5px 10px; border-radius: 100px; font-family: 'Onest', sans-serif; font-weight: 400; font-size: 13px; line-height: 19.5px; color: #18181b; white-space: nowrap; }
.hchip__g { display: inline-flex; align-items: center; gap: 5px; }
.hchip__g svg { width: 13px; height: 13px; }
.hchip__s { display: inline-flex; align-items: center; gap: 4px; }
.hchip__s svg { width: 15px; height: 13px; color: #22c55e; }
.hero__title { font-family: 'Onest', sans-serif; font-weight: 500; font-size: 64px; line-height: 71.68px; letter-spacing: -1.28px; color: #09090b; margin: 0; max-width: none; text-wrap: initial; }
.hero__title .g { color: #c6c6c6; }
.hero__right { width: 455px; flex: 0 0 auto; display: flex; flex-direction: column; gap: 30px; }
.hero__p { text-align: right; margin: 0; font-family: 'Onest', sans-serif; font-weight: 300; font-size: 17px; line-height: 27.2px; color: #52525b; }
.hero__hand { font-family: 'Caveat', cursive; font-weight: 400; font-size: 25px; line-height: 27.2px; color: #000; }
.hero__form { display: flex; align-items: center; gap: 8px; height: 78px; background: #fff; border: 1px solid #ececee; border-radius: 30px; padding: 11px 11px 11px 25px; box-shadow: 0 1px 0 rgba(9,9,11,.03); width: 100%; }
.hero__form input { flex: 1 1 auto; min-width: 0; border: none; outline: none; background: none; font-family: 'Onest', sans-serif; font-weight: 400; font-size: 17px; color: #18181b; }
.hero__form input::placeholder { color: #a1a1aa; }
.hero__form button { flex: 0 0 auto; height: 56px; border: none; border-radius: 20px; background: #262626; color: #fff; font-family: 'Onest', sans-serif; font-weight: 400; font-size: 15px; line-height: 18.75px; padding: 0 26px; box-shadow: inset 0 9px 14px 0 rgba(117,123,133,.4); cursor: pointer; transition: background .2s ease, transform .2s ease; }
.hero__form button:hover { background: #333; transform: translateY(-1px); }
.hero__row2 { display: flex; gap: 262px; align-items: flex-end; }
/* flex-direction обязателен: выше есть базовое правило с column, без сброса
цифры вставали друг под другом вместо одного ряда */
.hero__stats { display: flex; flex-direction: row; gap: 50px; align-items: flex-end; }
.hstat { display: flex; gap: 15px; align-items: flex-end; }
.hstat__n { font-family: 'Onest', sans-serif; font-weight: 500; font-size: 40px; line-height: 40px; letter-spacing: -0.8px; color: #09090b; }
.hstat__l { font-family: 'Onest', sans-serif; font-weight: 300; font-size: 15px; line-height: 20.25px; color: #52525b; max-width: 90px; }
.hero__logos { width: 575px; flex: 0 0 auto; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.hero__logos .marq__track { display: flex; gap: 40px; width: max-content; align-items: center; animation: marqX 40s linear infinite; }
.hero__logos .marq__logo { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 21px; line-height: 31.5px; letter-spacing: 0.42px; color: #a1a1aa; white-space: nowrap; }
/* burger hidden on desktop, header nav hides under 1080 handled by base rules */
/* =====================================================================
FIGMA BLOCK 2 — лента карточек услуг (node 239:1739)
Горизонтальный скролл: списочные + медиа-карточки. Высота 443, r28.
===================================================================== */
.cband { background: #fff; padding: 90px 0 0; }
.cband__scroll { width: 100%; max-width: none; margin: 0 auto; padding: 0 clamp(20px, 6.25vw, 100px); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab; }
.cband__scroll::-webkit-scrollbar { display: none; }
.cband__scroll.is-drag { cursor: grabbing; }
.cband__track { display: flex; gap: 15px; width: max-content; }
.ccard { flex: 0 0 auto; width: 327px; height: 443px; border-radius: 28px; overflow: hidden; background: #ececee; position: relative; }
.ccard--wide { width: 684px; }
/* списочная карточка */
.ccard--list { padding: 24px; display: flex; flex-direction: column; justify-content: space-between; }
.ccard__title { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 20px; line-height: 31.2px; color: #3f3f46; }
.cl-list { display: flex; flex-direction: column; gap: 16px; }
.cl-item { display: flex; gap: 12px; align-items: center; }
.cl-item svg { width: 20px; height: 20px; flex: 0 0 auto; }
.cl-item span { font-family: 'Onest', sans-serif; font-weight: 400; font-size: 15px; line-height: 21.75px; color: #3f3f46; }
/* медиа-карточка */
.ccard__media { position: absolute; inset: 0; }
.ccard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ccard__grad { position: absolute; inset: 0; z-index: 1; }
.ccard__mtitle { position: absolute; z-index: 2; font-family: 'Onest', sans-serif; font-weight: 600; font-size: 20px; line-height: 31.2px; color: #fff; margin: 0; }
.ccard__mtitle .med { font-weight: 500; }
.ctag-w { display: inline-flex; align-items: center; height: 30px; padding: 5px 9px; border: 1px solid #e4e4e7; border-radius: 100px; font-family: 'Onest', sans-serif; font-weight: 400; font-size: 13px; line-height: 19.5px; color: #fff; white-space: nowrap; background: rgba(0,0,0,.12); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.ctag-w--12 { border-radius: 12px; }
/* прогресс-бары каруселей */
.cprog { position: absolute; top: 16px; left: 0; right: 0; z-index: 3; display: flex; gap: 8px; padding: 0 28px; }
.cprog i { flex: 1 1 0; height: 4px; border-radius: 10000px; background: rgba(255,255,255,.2); overflow: hidden; }
.cprog i b { display: block; height: 100%; width: 0; background: #fff; }
.ccard--carousel .cslide { opacity: 0; transition: opacity .6s ease; }
.ccard--carousel .cslide.is-on { opacity: 1; }
/* кнопка play */
.cplay { width: 80px; height: 80px; border-radius: 56px; background: rgba(255,255,255,.1); box-shadow: 0 -0.5px 0 0 #fff; display: flex; align-items: center; justify-content: center; padding-left: 5px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.cplay svg { width: 17px; height: 20px; color: #fff; }
/* =====================================================================
FIGMA BLOCK 3 — «Создаем продукты, которые продают» (node 240:2548)
===================================================================== */
.b3 { position: relative; overflow: hidden; border-radius: 70px 70px 0 0; padding: 90px clamp(20px,6.25vw,100px); background: #f4f4f5; margin-top: 80px; min-height: 1019px; box-sizing: border-box; }
.b3__bg { position: absolute; inset: 0; z-index: 0; border-radius: 70px 70px 0 0; overflow: hidden; }
.b3__bg img { position: absolute; height: 131.67%; top: 14.23%; left: -13.13%; width: 129.42%; max-width: none; }
.b3__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #f4f4f5 52.794%, rgba(244,244,245,0) 76.368%); }
.b3__in { position: relative; z-index: 1; max-width: 1260px; margin: 0 auto; display: flex; flex-direction: column; gap: 90px; }
.b3__row { display: flex; gap: 108px; align-items: flex-start; }
.b3__left { width: 500px; flex: 0 0 auto; display: flex; flex-direction: column; height: 436px; justify-content: space-between; }
.b3__title { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 40px; line-height: 51.2px; color: #09090b; margin: 0; max-width: 496px; }
.b3__title .g { color: #c6c6c6; }
.b3-quote { background: #fff; border-radius: 36px; padding: 28px 0; overflow: hidden; margin: 0; }
.b3-quote__head { display: flex; gap: 16px; align-items: center; padding: 0 28px; }
.b3-quote__ava { width: 64px; height: 64px; border-radius: 64px; object-fit: cover; flex: 0 0 auto; }
.b3-quote__name { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 20px; line-height: 29.6px; color: #18181b; }
.b3-quote__role { display: flex; gap: 4px; align-items: center; font-family: 'Onest', sans-serif; font-size: 14px; line-height: 23.52px; color: #3f3f46; }
.b3-quote__role .lt { font-weight: 300; }
.b3-quote__role .sb { font-weight: 600; }
.b3-quote__badge { height: 20px; width: 49px; flex: 0 0 auto; margin-left: 2px; }
.b3-quote__text { padding: 24px 28px 0; margin: 0; font-family: 'Onest', sans-serif; font-weight: 400; font-size: 16px; line-height: 24px; color: #3f3f46; max-width: 500px; }
.b3-benf { width: 652px; flex: 0 0 auto; height: 436px; box-sizing: border-box; background: #27272a; border-radius: 36px; padding: 32px; display: flex; flex-direction: column; justify-content: space-between; }
.b3-benf__row { display: flex; gap: 16px; align-items: flex-start; padding-bottom: 17px; border-bottom: 1px solid #3f3f46; }
.b3-benf__row:last-child { padding-bottom: 0; border-bottom: none; }
.b3-benf__arr { width: 28px; height: 28px; flex: 0 0 auto; margin-top: 1px; }
.b3-benf__t { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 20px; line-height: 31.2px; color: #fff; }
.b3-benf__t .g { color: #a1a1aa; }
.b3__stats { display: flex; gap: 276px; align-items: center; }
.b3-stat { display: flex; gap: 16px; align-items: center; }
.b3-stat__n { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 40px; line-height: 51.2px; color: #3f3f3f; white-space: nowrap; }
.b3-stat__l { font-family: 'Onest', sans-serif; font-weight: 400; font-size: 15px; line-height: 21.75px; color: #3f3f3f; white-space: nowrap; }
/* =====================================================================
FIGMA BLOCK 4 — «Почему компании выбирают BACKSPACE» (node 240:2623)
===================================================================== */
.b4 { position: relative; z-index: 2; background: #fdfdfd; border-radius: 70px 70px 0 0; margin-top: -100px; padding: 100px clamp(20px,3.2vw,46px) 96px; }
.b4__in { max-width: 1349px; margin: 0 auto; display: flex; flex-direction: column; gap: 50px; align-items: center; }
.b4__title { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 40px; line-height: 51.2px; color: #09090b; text-align: center; margin: 0; }
.b4__grid { display: flex; gap: 12px; align-items: flex-start; width: 100%; justify-content: center; }
.b4col { display: flex; flex-direction: column; gap: 12px; }
.b4col--1 { width: 445px; flex: 0 0 auto; } .b4col--2 { width: 440px; flex: 0 0 auto; } .b4col--3 { width: 440px; flex: 0 0 auto; }
/* shared number/label typography */
.b4a__n, .b4c__n { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 32px; line-height: 48px; color: #09090b; }
.b4a__l, .b4c__l { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 20px; line-height: 31.2px; color: #18181b; margin-top: 4px; }
.b4a__ico, .b4c__ico, .b4sk__ico { width: 80px; height: 80px; flex: 0 0 auto; object-fit: contain; }
/* Card A — 430+ with client-logo marquee */
.b4a { background: #f4f4f5; border-radius: 36px; height: 207.5px; box-sizing: border-box; padding: 28px 0 32px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.b4a__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 0 28px; }
.b4a__marq { overflow: hidden; margin: 0 28px; position: relative; -webkit-mask-image: linear-gradient(90deg,#f4f4f5,transparent 6%,#000 12%,#000 88%,transparent 94%,#f4f4f5); mask-image: linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.b4a__track { display: flex; gap: 48px; width: max-content; align-items: center; animation: marqX 30s linear infinite; }
.b4a__track img { height: 24px; width: auto; display: block; }
/* Card B — hills + water */
.b4hw { display: flex; flex-direction: column; gap: 11px; }
.b4hills { position: relative; height: 495px; border-radius: 36px; overflow: hidden; }
.b4hills__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.b4hills__title { position: absolute; top: 28px; left: 107px; right: 107px; text-align: center; font-family: 'Onest', sans-serif; font-weight: 600; font-size: 20px; line-height: 31.2px; color: #18181b; }
.b4hills__ast { position: absolute; top: 201px; left: 50%; transform: translateX(-50%); width: 138px; height: 138px; background: url(/assets/block34-fig/face.jpg) center/cover; -webkit-mask: url(/assets/block34-fig/facemask.svg) center/contain no-repeat; mask: url(/assets/block34-fig/facemask.svg) center/contain no-repeat; }
.b4water { position: relative; height: 170px; border-radius: 36px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.b4water__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.b4water__t { position: relative; z-index: 1; width: 282px; text-align: center; font-family: 'Onest', sans-serif; font-weight: 600; font-size: 20px; line-height: 31.2px; color: #fff; }
/* Col 2 — Vasile portrait */
.b4port { position: relative; height: 895px; background: #f4f4f5; border-radius: 36px; overflow: hidden; }
.b4port__img { position: absolute; left: 0; top: 116px; width: 100%; height: 779px; object-fit: cover; object-position: 50% 18%; border-radius: 36px; }
.b4port__head { position: absolute; top: 23px; left: 20px; right: 20px; z-index: 2; display: flex; gap: 16px; align-items: center; }
.b4port__ava { width: 64px; height: 64px; border-radius: 64px; object-fit: cover; object-position: 50% 15%; flex: 0 0 auto; }
.b4port__name { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 20px; line-height: 29.6px; color: #18181b; }
.b4port__role { display: flex; gap: 4px; align-items: center; font-family: 'Onest', sans-serif; font-size: 14px; line-height: 23.52px; color: #3f3f46; }
.b4port__role .lt { font-weight: 300; } .b4port__role .sb { font-weight: 600; }
.b4port__play { position: absolute; left: 20px; bottom: 23px; z-index: 2; width: 80px; height: 80px; border-radius: 56px; border: none; background: rgba(255,255,255,.12); box-shadow: inset 0 .5px 0 0 #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding-left: 5px; cursor: pointer; }
.b4port__play img { width: 17px; height: 20px; display: block; }
/* Col 3 — Card C 100% */
.b4c { background: #f4f4f5; border-radius: 36px; padding: 28px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
/* Card D — skills */
.b4sk { background: #f4f4f5; border-radius: 36px; height: 404px; box-sizing: border-box; padding: 51px 0 28px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.b4sk__rows { display: flex; flex-direction: column; gap: 4px; }
.b4sk__row { overflow: hidden; -webkit-mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.b4sk__track { display: flex; gap: 6px; width: max-content; align-items: center; animation: marqX 48s linear infinite; padding: 0 28px; }
.b4sk__row--rev .b4sk__track { animation-direction: reverse; animation-duration: 56s; }
.btag { display: inline-flex; align-items: center; padding: 5px 9px; border: 1px solid #e4e4e7; border-radius: 12px; font-family: 'Onest', sans-serif; font-weight: 400; font-size: 13px; line-height: 19.5px; color: #3f3f46; white-space: nowrap; background: #f4f4f5; }
.btag--dark { background: #3f3f46; border-color: #3f3f46; color: #fafafa; }
.b4sk__foot { display: flex; align-items: flex-end; justify-content: space-between; padding: 0 28px; }
/* Card E — price / astronaut */
.b4pr { position: relative; height: 300px; box-sizing: border-box; background: #f4f4f5; border-radius: 36px; padding: 28px; overflow: hidden; }
.b4pr__head { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; }
.b4pr__t { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 20px; line-height: 31.2px; color: #18181b; text-align: center; }
.b4pr__tag { display: inline-flex; margin-top: 12px; background: #fff; border: 1px solid #e4e4e7; border-radius: 12px; padding: 5px 9px; font-family: 'Onest', sans-serif; font-weight: 400; font-size: 13px; line-height: 19.5px; color: #3f3f46; }
.b4pr__astro { position: absolute; left: 125px; top: 114px; width: 200px; height: auto; z-index: 1; }
/* =====================================================================
FIGMA BLOCK 5 — CTA «Превращаем идеи в успешные проекты» (node 240:2864)
===================================================================== */
.b5 { background: #fdfdfd; padding: 100px clamp(20px,3.2vw,46px) 0; }
.b5__card { position: relative; width: 1349px; margin: 0 auto; height: 420px; box-sizing: border-box; border-radius: 32px; overflow: hidden; padding: 88px 330px 88px 80px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
background: linear-gradient(82deg, #F4F4F5 54.05%, rgba(244,244,245,0.00) 76.78%), url(/assets/block34-fig/cta-fjord.jpg) lightgray -4.157px -298.015px / 106.622% 191.965% no-repeat;
background-origin: border-box; }
.b5__in { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 40px; width: 939px; }
.b5__title { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 56px; line-height: 71.68px; color: #09090b; margin: 0; white-space: nowrap; }
.b5__title .g { color: #8b8b8b; }
.b5__form { display: flex; gap: 12px; align-items: center; width: 100%; }
.b5__input { height: 60px; width: 305px; box-sizing: border-box; border-radius: 14px; border: 1px solid rgba(0,0,0,0); background: #fff; padding: 13px 13px 13px 21px; font-family: 'Onest', sans-serif; font-weight: 400; font-size: 17px; line-height: normal; color: #18181b; outline: none; }
.b5__input::placeholder { color: #a1a1aa; }
.b5__btn { height: 60px; width: 305px; box-sizing: border-box; border-radius: 14px; border: none; background: #272727; color: #fff; font-family: 'Onest', sans-serif; font-weight: 400; font-size: 15px; line-height: 18.75px; text-align: center; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.b5__btn:hover { background: #333; transform: translateY(-1px); }
/* =====================================================================
FIGMA BLOCK 5 — кейсы (800×600 карусель) + результаты (440×216) — node 241:3246
===================================================================== */
.b6 { background: #f4f4f5; border-radius: 70px 70px 0 0; padding: 50px 0 50px; margin-top: 90px; overflow: hidden; }
.b6__in { width: 1440px; margin: 0 auto; display: flex; flex-direction: column; gap: 90px; }
/* общие заголовки + стрелки */
.b6__head { width: 1280px; max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.b6__title { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 20px; line-height: 25.6px; color: #18181b; margin: 0; white-space: nowrap; }
.b6__nav { display: flex; gap: 12px; }
.b6__arw { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 14px; background: #fafafa; border: 1px solid #fff; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; transition: background .2s ease; }
.b6__arw:hover { background: #efeff1; }
.b6__arw img { width: 16px; height: 16px; display: block; }
/* верхний слайдер картинок */
.b6__top { display: flex; flex-direction: column; gap: 50px; }
.b6__imgwrap { width: 1440px; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scrollbar-width: none; }
.b6__imgwrap::-webkit-scrollbar { display: none; }
.b6__imgtrack { display: flex; gap: 12px; width: max-content; }
.b6__imgcard { width: 800px; height: 600px; flex: 0 0 auto; border-radius: 36px; overflow: hidden; }
.b6__imgcard img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* нижний слайдер результатов */
.b6__bot { display: flex; flex-direction: column; }
.b6__reswrap { width: 1344px; margin: 32px auto 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.b6__reswrap::-webkit-scrollbar { display: none; }
.b6__restrack { display: flex; gap: 12px; width: max-content; }
.b6__res { width: 440px; height: 216px; flex: 0 0 auto; box-sizing: border-box; border: 1px solid #d4d4d8; border-radius: 36px; padding: 25px; display: flex; flex-direction: column; gap: 32px; scroll-snap-align: start; }
.b6__restop { display: flex; flex-direction: column; }
.b6__resco { display: flex; gap: 12px; align-items: center; }
.b6__reslogo { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 12px; object-fit: cover; }
.b6__resname { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 20px; line-height: 29.6px; color: #18181b; white-space: nowrap; }
.b6__resdesc { font-family: 'Onest', sans-serif; font-weight: 300; font-size: 14px; line-height: 23.52px; color: #3f3f46; margin: 8px 0 0; white-space: nowrap; }
.b6__resbot { display: flex; flex-direction: column; }
.b6__reslabel { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 14px; line-height: 23.52px; color: #3f3f46; }
.b6__resval { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 32px; line-height: 48px; color: #09090b; }
/* =====================================================================
FIGMA BLOCK 6 — «Одна команда. Любая задача» (сайдбар + сетка категорий) node 243:3549
===================================================================== */
.b7 { background: #fdfdfd; border: 1px solid #ececee; border-bottom: 0; border-radius: 70px 70px 0 0; margin-top: 90px; position: relative; z-index: 2; padding: 90px 80px 0; }
.b7__in { width: 1280px; margin: 0 auto; display: flex; gap: 51px; align-items: flex-start; }
/* sidebar (sticky) */
.b7__side { width: 287px; flex: 0 0 auto; position: sticky; top: 24px; display: flex; flex-direction: column; gap: 51px; }
.b7__head { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 40px; line-height: 51.2px; color: #09090b; margin: 0; height: 205px; white-space: nowrap; }
.b7__head .g { color: #8b8b8b; }
.b7__tabs { position: relative; width: 270px; height: 416px; box-sizing: border-box; padding: 8px; border-radius: 24px 24px 36px 36px; box-shadow: 0 -1px 0 0 #e4e4e7; overflow: hidden; }
.b7__tabsbg { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; z-index: 0; }
.b7__tabsbg img { position: absolute; height: 142.06%; left: -88.06%; top: -39.7%; width: 276.16%; max-width: none; }
.b7__tabsbg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #f4f4f5 33.413%, rgba(244,244,245,0) 101.32%); }
.b7__tabslist { position: relative; z-index: 1; display: flex; flex-direction: column; }
.b7__tab { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 13px 17px; border-radius: 14px; border: 1px solid transparent; background: none; cursor: pointer; text-align: left; }
.b7__tab span { font-family: 'Onest', sans-serif; font-weight: 500; font-size: 13px; line-height: 16.25px; color: #222; white-space: nowrap; }
.b7__tab.is-active { background: rgba(255,255,255,0.9); border-color: #fff; }
.b7__tabico { width: 26px; height: 16px; flex: 0 0 auto; object-fit: contain; }
.b7__tab:not(.is-active) .b7__tabico { display: none; }
.b7__start { position: absolute; z-index: 2; left: 25px; bottom: 24px; width: 220px; height: 41px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: #09090b; border: 0.5px solid rgba(255,255,255,0.2); box-shadow: 0 0 0 1.5px #2c2e34, 0 4px 6px rgba(0,0,0,0.14), inset 0 0.5px 0 rgba(255,255,255,0.5), inset 0 9px 14px -5px rgba(117,123,133,0.4); font-family: 'Onest', sans-serif; font-weight: 500; font-size: 13px; line-height: 16.25px; color: #fff; text-decoration: none; }
/* cards grid */
.b7__grid { width: 942px; flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 12px; }
.b7__card { width: 306px; height: 403.703px; box-sizing: border-box; flex: 0 0 auto; border: 1px solid #ececee; border-radius: 36px; overflow: hidden; padding: 1px; display: flex; flex-direction: column; justify-content: space-between; background: #fff; }
.b7__card--wide { width: 465px; }
.b7__ctop { display: flex; flex-direction: column; }
.b7__cimg { height: 285px; border-radius: 36px; overflow: hidden; }
.b7__cimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.b7__ctitle { margin: 0; padding: 20px 24px 0; font-family: 'Onest', sans-serif; font-weight: 600; font-size: 20px; line-height: 31.2px; color: #18181b; white-space: nowrap; }
.b7__ctags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 24px 24px; }
.b7__tag { display: inline-flex; align-items: center; padding: 5px 9px; border: 1px solid #e4e4e7; border-radius: 12px; font-family: 'Onest', sans-serif; font-weight: 400; font-size: 13px; line-height: 19.5px; color: #3f3f46; white-space: nowrap; }
/* =====================================================================
FIGMA BLOCK 7 — CTA-баннер «Бесплатная консультация» (node 247:3748)
===================================================================== */
.b8 { margin-top: 90px; }
.b8__card { position: relative; height: 596px; border-radius: 70px 70px 0 0; overflow: hidden; }
.b8__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.b8__glow { position: absolute; left: 437.7px; top: 200.84px; width: 479px; height: 442px; z-index: 1; display: flex; align-items: center; justify-content: center; mix-blend-mode: overlay; pointer-events: none; }
.b8__glow::before { content: ""; width: 178px; height: 476px; background: #fe45e2; filter: blur(25px); transform: rotate(-50deg); }
.b8__inner { position: relative; z-index: 2; height: 100%; padding-top: 183.7px; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; }
.b8__title { width: 896px; max-width: 92%; margin: 0; font-family: 'Onest', sans-serif; font-weight: 600; font-size: 64px; line-height: 71.68px; color: #fff; text-align: center; }
.b8__btn { margin-top: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 16px; height: 49px; box-sizing: border-box; padding: 14.5px 18.5px; border-radius: 16px; background: rgba(255,255,255,0.1); border: 0.5px solid rgba(255,255,255,0.2); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); text-decoration: none; transition: background .2s ease; }
.b8__btn:hover { background: rgba(255,255,255,0.18); }
.b8__btn-t { font-family: 'Onest', sans-serif; font-weight: 500; font-size: 15px; line-height: 20.25px; color: #fff; white-space: nowrap; }
.b8__chevs { display: inline-flex; align-items: center; gap: 4px; }
.b8__chev { width: 5px; height: 10px; display: block; flex: 0 0 auto; }
/* =====================================================================
FIGMA BLOCK 8 — стена отзывов (node 247:4210) — рестайл существующей стены
===================================================================== */
.b9 { border-radius: 70px 70px 0 0; margin-top: -90px; position: relative; z-index: 2; }
.b9__badges { display: flex; justify-content: center; gap: 6px; }
.b9__badge { display: inline-flex; align-items: center; gap: 4px; background: #fafafa; border: 1px solid #f4f4f5; border-radius: 12px; padding: 5px 11px; font-family: 'Onest', sans-serif; font-weight: 500; font-size: 13px; line-height: 20.15px; color: #3f3f46; white-space: nowrap; }
.b9__badge svg { width: 16px; height: 16px; flex: 0 0 auto; }
.b9__title { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 40px; line-height: 51.2px; color: #09090b; text-align: center; margin: 0; }
/* карточки отзывов в стиле Figma */
.b9 .tsl__grid { columns: 3; column-gap: 12px; max-height: none; }
.b9 .tsl-card { background: #fff; border: none; border-radius: 36px; padding: 28px; margin: 0 0 12px; gap: 24px; }
.b9 .tsl-card__who { align-items: center; gap: 16px; }
.b9 .tsl-card__ava { width: 64px; height: 64px; border-radius: 50%; font-size: 18px; font-weight: 600; }
.b9 .tsl-card__name { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 20px; line-height: 29.6px; color: #18181b; }
.b9 .tsl-card__role { font-family: 'Onest', sans-serif; font-weight: 300; font-size: 14px; line-height: 23.52px; color: #3f3f46; }
.b9 .tsl-card__stars { display: none; }
.b9 .tsl-card__text { font-family: 'Onest', sans-serif; font-weight: 400; font-size: 16px; line-height: 24px; color: #3f3f46; }
/* Block 8 — видео-отзывы + затухание внизу обрезанной стены */
.b9 .tsl-card--video { padding: 28px 0 0; gap: 0; overflow: hidden; }
.b9 .tsl-card--video .tsl-card__who { padding: 0 28px; }
.b9 .tsl-video { position: relative; margin-top: 24px; overflow: hidden; }
.b9 .tsl-video img { width: 100%; aspect-ratio: 440 / 560; object-fit: cover; display: block; }
.b9 .tsl-video__play { position: absolute; left: 20px; bottom: 20px; width: 80px; height: 80px; border-radius: 50%; border: none; background: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 .5px 0 rgba(255,255,255,.6); display: flex; align-items: center; justify-content: center; padding-left: 5px; cursor: pointer; }
.b9 .tsl-video__play svg { width: 22px; height: 26px; display: block; }
.b9 .wall { position: relative; }
.b9 .wall__more { display: flex; justify-content: center; }
/* Block 8 — точная сетка отзывов: 3 фикс-колонки + видео-карточки */
.b9 .b8w__cols { display: flex; gap: 12px; align-items: flex-start; max-width: 1344px; margin: 0 auto; }
.b9 .b8w__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.b9 .b8w__col .tsl-card { margin: 0; break-inside: auto; }
.b9 .tsl-card__role .at { font-weight: 300; color: #3f3f46; }
.b9 .tsl-card__role b { font-weight: 600; color: #3f3f46; }
.b9 .tsl-card--video { padding: 28px 0 0; gap: 0; }
.b9 .tsl-card--video .tsl-card__who { padding: 0 28px; }
.b9 .tsl-video { position: relative; margin-top: 24px; overflow: hidden; border-radius: 28px 28px 0 0; width: 100%; }
.b9 .tsl-video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.b9 .tsl-video--dark { background: linear-gradient(180deg, #2c2c30, #131316); }
.b9 .tsl-video__play { position: absolute; left: 20px; bottom: 20px; width: 80px; height: 80px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.1); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 .5px 0 rgba(255,255,255,.8); display: flex; align-items: center; justify-content: center; padding-left: 8px; cursor: pointer; }
.b9 .tsl-video__play svg { width: 22px; height: 26px; display: block; }
.b8w__clip { position: relative; }
.b9 .wall:not(.is-open) .b8w__clip { max-height: 1458px; overflow: hidden; }
.b8w__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 190px; background: linear-gradient(to top, #f4f4f5 18%, rgba(244,244,245,0)); pointer-events: none; z-index: 2; }
.b9 .wall.is-open .b8w__fade { display: none; }
.b9 .b8w__col .tsl-card { overflow: hidden; }
.b9 .wall__more { position: relative; z-index: 3; margin-top: 28px; }
.b9__morebtn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; border-radius: 14px; border: 1px solid #e4e4e7; background: #fff; font-family: 'Onest', sans-serif; font-weight: 500; font-size: 14px; color: #18181b; cursor: pointer; transition: background .2s ease; }
.b9__morebtn:hover { background: #fafafa; }
/* ==========================================================================
FIGMA BLOCK 9 — «Как мы работаем» (node 250:4353) · class .b10
========================================================================== */
.b10{
background:#fdfdfd;
border:1px solid #ececee; border-bottom:0;
border-radius:70px 70px 0 0;
padding:50px 0 0;
margin-top:90px; /* 90px gap between blocks */
position:relative; z-index:3;
}
.b10__in{ width:1280px; max-width:1280px; margin:0 auto; }
.b10__title{
margin:0; text-align:center; white-space:nowrap;
font-family:'Onest',sans-serif; font-weight:600; font-size:40px; line-height:51.2px;
color:#09090b;
}
.b10__title-thin{ font-weight:400; }
.b10__sub{
margin:20px 0 0; text-align:center;
font-family:'Onest',sans-serif; font-weight:400; font-size:16px; line-height:24px;
color:#3f3f46;
}
.b10__main{
margin-top:48px; height:608px;
display:flex; gap:12px; align-items:flex-start;
}
/* ---- left accordion ---- */
.b10__tabs{ display:flex; flex-direction:column; gap:12px; width:479px; flex:0 0 479px; }
.b10tab{
width:479px; border-radius:36px;
background:#f4f4f5;
/* faint 1px frame via inset shadow so it never adds to box height/width */
box-shadow:inset 0 1px 0 0 #e4e4e7,
inset 0 -1px 0 0 rgba(228,228,231,.4),
inset 1px 0 0 0 rgba(228,228,231,.4),
inset -1px 0 0 0 rgba(228,228,231,.4);
padding:8px 9px 9px 9px;
}
.b10tab__card{
background:transparent; border:0; border-radius:28px;
padding:25px; height:80px;
}
.b10tab--open .b10tab__card{
background:#fff; border:1px solid #ececee;
box-shadow:0 4px 6px rgba(0,0,0,.04);
height:264px;
display:flex; flex-direction:column; justify-content:space-between;
}
.b10tab__head{ display:flex; align-items:center; justify-content:space-between; width:100%; appearance:none; -webkit-appearance:none; background:none; border:0; padding:0; margin:0; font:inherit; color:inherit; text-align:left; cursor:pointer; }
.b10tab__lead{ display:flex; align-items:center; gap:16px; }
.b10tab__num{
flex:0 0 auto; border:1px solid #e4e4e7; border-radius:12px; padding:5px 7px;
font-family:'Onest',sans-serif; font-weight:400; font-size:13px; line-height:19.5px; color:#222;
}
.b10tab__title{
font-family:'Onest',sans-serif; font-weight:600; font-size:20px; line-height:30px; color:#222; white-space:nowrap;
}
.b10tab__chev{ flex:0 0 28px; width:28px; height:28px; display:block; }
.b10tab__chev svg{ display:block; width:28px; height:28px; transition:transform .25s ease; }
.b10tab--open .b10tab__chev svg{ transform:rotate(-90deg); }
.b10tab__body{ display:none; flex-direction:column; }
.b10tab--open .b10tab__body{ display:flex; }
.b10tab__desc{
margin:0; width:313px;
font-family:'Onest',sans-serif; font-weight:400; font-size:15px; line-height:21.75px; color:#222;
}
.b10tab__foot{ display:flex; align-items:flex-end; justify-content:space-between; padding-top:20px; }
.b10tab__btn{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
width:154px; height:41px; border-radius:14px; padding:0 16px;
background:#09090b; color:#fff; text-decoration:none;
border:.5px solid rgba(255,255,255,.2);
box-shadow:0 0 0 1.5px #2c2e34, 0 4px 6px rgba(0,0,0,.14),
inset 0 .5px 0 0 rgba(255,255,255,.5),
inset 0 9px 14px -5px rgba(117,123,133,.4);
font-family:'Onest',sans-serif; font-weight:500; font-size:13px; line-height:16.25px;
}
.b10tab__btn svg{ display:block; width:16px; height:16px; }
.b10tab__prog{ flex:0 0 40px; width:40px; height:8px; border-radius:1000px; background:#d4d4d8; overflow:hidden; }
.b10tab__prog i{ display:block; height:8px; width:100%; background:#52525b; border-radius:1000px; }
/* ---- right media panel ---- */
.b10__media{
flex:0 0 789px; width:789px; height:608px; border-radius:36px;
position:relative; overflow:hidden;
display:flex; align-items:center; justify-content:center;
}
.b10__media-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.b10__panel{
position:relative; z-index:1; width:553px; height:487px; border-radius:16px;
background:rgba(255,255,255,.18);
-webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
border:1px solid rgba(255,255,255,.28);
}
/* ==========================================================================
FIGMA BLOCK 10 — «До релиза доходят только лучшие решения» (250:4415) · .b11
========================================================================== */
.b11{
background:#f4f4f5;
border-radius:70px 70px 0 0;
padding:50px 0 0;
margin-top:90px;
}
.b11__in{ width:1264px; max-width:1264px; margin:0 auto; }
.b11__title{
margin:0; text-align:center; white-space:nowrap;
font-family:'Onest',sans-serif; font-weight:500; font-size:40px; line-height:51.2px;
letter-spacing:-.4px; color:#09090b;
}
.b11__sub{
margin:16px auto 0; text-align:center; white-space:nowrap;
font-family:'Onest',sans-serif; font-weight:300; font-size:16px; line-height:21px; color:#52525b;
}
.b11__grid{
margin-top:48px; display:grid; grid-template-columns:repeat(4,305.5px);
gap:14px; justify-content:center;
}
.b11card{
min-height:320px; border-radius:36px; padding:27px 25px 25px;
display:flex; flex-direction:column; align-items:flex-start; gap:8px;
}
.b11card--dark{ background:#3f3f46; }
.b11card--bord{ background:transparent; border:1px solid #d4d4d8; }
.b11card--fill{ background:#fff; padding:26px 24px 24px; }
.b11card__tag{
margin-bottom:8px; padding:5px 9px; border-radius:12px;
background:#fff; border:1px solid #e4e4e7; color:#18181b;
font-family:'Onest',sans-serif; font-weight:300; font-size:13px; line-height:19.5px;
}
.b11card__tag--dark{ background:rgba(255,255,255,.12); border-color:transparent; color:#fff; }
.b11card__t{
font-family:'Onest',sans-serif; font-weight:500; font-size:20px; line-height:30px;
letter-spacing:-.2px; color:#3f3f46;
}
.b11card--dark .b11card__t{ color:#fff; }
.b11card__num{
margin-top:auto;
font-family:'Onest',sans-serif; font-weight:500; font-size:40px; line-height:60px;
letter-spacing:-.4px; color:#09090b;
}
.b11card--dark .b11card__num{ color:#fff; }
.b11card__d{
width:256px;
font-family:'Onest',sans-serif; font-weight:300; font-size:14px; line-height:21px; color:#52525b;
}
.b11card--dark .b11card__d{ color:rgba(255,255,255,.85); }
.b11card__faces{ display:flex; padding-top:14px; }
.b11card__faces i{ width:40px; height:40px; border-radius:20px; background:#d4d4d8; border:2px solid #fff; }
.b11card__faces i + i{ margin-left:-10px; }
/* ==========================================================================
FIGMA BLOCK 11 — «Есть идея? Давайте воплотим её вместе» (250:4486) · .b12
========================================================================== */
.b12{
position:relative; overflow:hidden; background:#fdfdfd;
border:1px solid #ececee; border-bottom:0;
border-radius:70px 70px 0 0;
margin-top:90px; z-index:5;
}
.b12__bg{ position:absolute; inset:0; border-radius:inherit; overflow:hidden; z-index:0; }
.b12__bg img{ position:absolute; left:-7.25%; top:22.53%; width:114.47%; height:100%; max-width:none; object-fit:cover; }
.b12__bg::after{ content:""; position:absolute; inset:0;
background:linear-gradient(179.42deg,#fdfdfd 25.365%,rgba(253,253,253,0) 86.443%); }
.b12__in{
position:relative; z-index:1; width:1280px; max-width:1280px; margin:0 auto;
padding:50px 0 297px;
display:flex; align-items:flex-start; justify-content:space-between;
}
/* ---- left info ---- */
.b12__info{ width:528px; }
.b12__title{ margin:0; font-family:'Onest',sans-serif; font-weight:500; font-size:40px; line-height:51.2px; letter-spacing:-.4px; color:#09090b; }
.b12__sub{ margin:16px 0 0; width:372px; font-family:'Onest',sans-serif; font-weight:300; font-size:16px; line-height:21px; color:#52525b; }
.b12__links{ margin-top:20px; display:flex; flex-direction:column; gap:10px; }
.b12__links a{ display:inline-flex; align-items:center; gap:10px; padding:6px 0; font-family:'Onest',sans-serif; font-weight:400; font-size:16px; line-height:24px; color:#18181b; text-decoration:none; }
.b12__licon{ width:18px; height:18px; display:block; flex:0 0 18px; }
.b12__meta{ margin:20px 0 0; font-family:'Onest',sans-serif; font-weight:300; font-size:13px; line-height:20.8px; color:#71717a; }
.b12__soc{ margin-top:20px; display:flex; gap:8px; }
.b12__soc a{ width:44px; height:44px; border-radius:14px; background:#f4f4f5; border:1px solid #ececee; display:flex; align-items:center; justify-content:center; }
.b12__soc img{ width:19px; height:19px; display:block; }
/* ---- right form ---- */
.b12form{ width:581px; display:flex; flex-direction:column; gap:14px; }
.b12field{ display:flex; flex-direction:column; }
.b12field__lb{ font-family:'Onest',sans-serif; font-weight:400; font-size:13px; line-height:19.5px; color:#3f3f46; }
.b12input{
margin-top:6px; width:100%; height:50px; border-radius:16px;
background:#fafafa; border:1px solid #ececee; padding:0 17px;
font-family:'Onest',sans-serif; font-weight:400; font-size:15px; color:#18181b;
outline:none; transition:border-color .15s ease;
}
.b12input::placeholder{ color:#a1a1aa; }
.b12input:focus{ border-color:#a1a1aa; }
.b12select{
appearance:none; -webkit-appearance:none; cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3.5 5.25 7 8.75l3.5-3.5' stroke='%2371717a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 17px center; background-size:14px; padding-right:44px;
}
.b12__pills{ margin-top:8px; display:flex; flex-wrap:wrap; gap:8px; width:581px; }
.b12pill{
position:relative; height:38px; padding:0 15px; border-radius:9999px;
background:#fff; border:1px solid #ececee; display:inline-flex; align-items:center;
font-family:'Onest',sans-serif; font-weight:400; font-size:13px; line-height:19.5px; color:#3f3f46;
cursor:pointer; white-space:nowrap; transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.b12pill input{ position:absolute; opacity:0; width:0; height:0; }
.b12pill:has(input:checked){ background:#09090b; border-color:#09090b; color:#fff; }
.b12submit{
margin-top:6px; width:581px; height:54px; border-radius:16px; border:0; cursor:pointer;
background:#09090b; color:#fff; text-align:center;
font-family:'Onest',sans-serif; font-weight:400; font-size:15px;
box-shadow:0 0 0 1.5px #2c2e34, 0 4px 6px rgba(0,0,0,.14),
inset 0 .5px 0 0 rgba(255,255,255,.5),
inset 0 9px 14px -5px rgba(117,123,133,.4);
}
/* ==========================================================================
FIGMA BLOCK 12 — FAQ (250:4601) · .b13
========================================================================== */
.b13{
background:#fdfdfd;
border:1px solid #ececee; border-bottom:0;
border-radius:70px 70px 0 0;
padding:50px 0 0;
margin-top:90px; position:relative; z-index:6;
}
.b13__grid{
width:1280px; max-width:1280px; margin:0 auto;
display:grid; grid-template-columns:460px 820px; align-items:stretch;
}
.b13__aside{ display:flex; flex-direction:column; justify-content:space-between; }
.b13__title{ margin:0; font-family:'Onest',sans-serif; font-weight:600; font-size:40px; line-height:51.2px; color:#09090b; }
.b13__ailabel{ margin:24px 0 0; font-family:'Onest',sans-serif; font-weight:400; font-size:16px; line-height:24px; color:#3f3f46; }
.b13__ai{ margin-top:16px; display:flex; gap:8px; }
.b13__ai a{ width:48px; height:48px; border-radius:14px; background:#f4f4f5; display:flex; align-items:center; justify-content:center; transition:background .15s ease; }
.b13__ai a:hover{ background:#ececee; }
.b13__ai img{ width:16px; height:16px; display:block; }
.b13__card{ width:275px; border:1px solid #d4d4d8; border-radius:36px; padding:29px; display:flex; flex-direction:column; gap:28px; }
.b13__card-t{ margin:0; font-family:'Onest',sans-serif; font-weight:600; font-size:20px; line-height:30px; color:#18181b; }
.b13__card-d{ margin:8px 0 0; width:217px; font-family:'Onest',sans-serif; font-weight:400; font-size:15px; line-height:21.75px; color:#3f3f46; }
.b13__card-btn{
align-self:flex-start; width:150px; height:45px; border-radius:14px; cursor:pointer;
background:#09090b; color:#fff; border:.5px solid rgba(255,255,255,.2);
box-shadow:0 0 0 1.5px #2c2e34, 0 4px 6px rgba(0,0,0,.14),
inset 0 .5px 0 0 rgba(255,255,255,.5),
inset 0 9px 14px -5px rgba(117,123,133,.4);
font-family:'Onest',sans-serif; font-weight:500; font-size:13px; line-height:16.25px;
}
/* ---- accordion ---- */
.b13__list{ display:flex; flex-direction:column; gap:12px; }
.b13item{
border-radius:36px; background:#f4f4f5; padding:8px 9px 9px;
box-shadow:inset 0 1px 0 0 #e4e4e7,
inset 0 -1px 0 0 #ececee,
inset 1px 0 0 0 #ececee,
inset -1px 0 0 0 #ececee;
}
.b13item__head{
list-style:none; cursor:pointer; padding:25px;
display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
}
.b13item__head::-webkit-details-marker{ display:none; }
.b13item__q{ font-family:'Onest',sans-serif; font-weight:600; font-size:20px; line-height:30px; color:#18181b; }
.b13item__chev{ flex:0 0 28px; width:28px; height:28px; }
.b13item__chev svg{ display:block; width:28px; height:28px; transition:transform .25s ease; }
.b13item[open] .b13item__chev svg{ transform:rotate(180deg); }
.b13item__a{
padding:2px 25px 25px; max-width:720px;
font-family:'Onest',sans-serif; font-weight:400; font-size:16px; line-height:24px; color:#3f3f46;
}
/* ==========================================================================
FIGMA BLOCK 13 — ФУТТЕР (250:4674) · .b14
========================================================================== */
.b14{
position:relative; overflow:hidden;
background:#f4f4f5; border-radius:70px 70px 0 0;
margin-top:90px;
padding:50px 0 0;
}
.b14__top{ width:1280px; max-width:1280px; margin:0 auto; display:flex; gap:326px; align-items:flex-start; }
/* ---- contact card ---- */
.b14__card{ width:525px; flex:0 0 525px; background:#fff; border-radius:28px; padding:28px; box-sizing:border-box; }
.b14__card-t{ margin:0; font-family:'Onest',sans-serif; font-weight:600; font-size:20px; line-height:31.2px; color:#18181b; }
.b14__card-addr{ margin:12px 0 0; font-family:'Onest',sans-serif; font-weight:400; font-size:15px; line-height:21.75px; color:#3f3f46; }
.b14__card-row{ margin-top:64px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.b14__contacts{ display:flex; flex-direction:column; gap:4px; }
.b14__phone{ font-family:'Onest',sans-serif; font-weight:600; font-size:15px; line-height:21.75px; color:#18181b; text-decoration:none; }
.b14__email{ font-family:'Onest',sans-serif; font-weight:600; font-size:15px; line-height:21.75px; color:#18181b; }
.b14__email a{ color:#18181b; text-decoration:underline; text-underline-offset:2px; }
.b14__soc{ display:flex; gap:8px; }
.b14__soc a{ width:48px; height:48px; border-radius:14px; background:#f4f4f5; display:flex; align-items:center; justify-content:center; transition:background .15s ease; }
.b14__soc a:hover{ background:#ececee; }
.b14__soc img{ width:16px; height:16px; display:block; }
/* ---- menu columns ---- */
.b14__menus{ display:flex; gap:120px; align-items:flex-start; }
.b14__col{ display:flex; flex-direction:column; gap:12px; }
.b14__col-h{ margin:0 0 4px; font-family:'Onest',sans-serif; font-weight:600; font-size:15px; line-height:21.75px; color:#18181b; opacity:.8; }
.b14__col a{ font-family:'Onest',sans-serif; font-weight:400; font-size:15px; line-height:21.75px; color:#3f3f46; text-decoration:none; white-space:nowrap; transition:color .15s ease; }
.b14__col a:hover{ color:#18181b; }
/* ---- slim legal / lang / admin strip ---- */
.b14__legal{ width:1280px; max-width:1280px; margin:0 auto; padding:32px 0 8px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-family:'Onest',sans-serif; font-size:12px; line-height:1.6; color:#a1a1aa; }
.b14__legal > span:first-child{ flex:1 1 460px; max-width:760px; }
.b14__legal a{ color:#a1a1aa; text-decoration:none; }
.b14__legal a:hover{ color:#71717a; }
.b14__lang{ display:inline-flex; gap:10px; }
.b14__lang a.is-cur{ color:#18181b; font-weight:600; }
.b14__admin{ opacity:.55; }
/* ---- giant watermark ---- */
.b14__watermark{ position:relative; overflow:hidden; margin-top:24px; line-height:0; }
.b14__watermark img{ display:block; width:100%; height:auto; }
/* ==========================================================================
SITE-WIDE SCROLL REVEAL + STAGGER ANIMATIONS
========================================================================== */
[data-reveal]{ opacity:0; transform:translateY(30px); transition:opacity .8s var(--ease-soft), transform .8s var(--ease-soft); will-change:opacity,transform; }
[data-reveal].is-in{ opacity:1; transform:none; will-change:auto; }
/* staggered direct children of a container */
[data-stagger] > *{ opacity:0; transform:translateY(24px); transition:opacity .62s var(--ease-soft), transform .62s var(--ease-soft); }
[data-stagger].is-in > *{ opacity:1; transform:none; }
[data-stagger].is-in > *:nth-child(1){ transition-delay:.05s }
[data-stagger].is-in > *:nth-child(2){ transition-delay:.11s }
[data-stagger].is-in > *:nth-child(3){ transition-delay:.17s }
[data-stagger].is-in > *:nth-child(4){ transition-delay:.23s }
[data-stagger].is-in > *:nth-child(5){ transition-delay:.29s }
[data-stagger].is-in > *:nth-child(6){ transition-delay:.35s }
[data-stagger].is-in > *:nth-child(7){ transition-delay:.41s }
[data-stagger].is-in > *:nth-child(8){ transition-delay:.47s }
[data-stagger].is-in > *:nth-child(9){ transition-delay:.53s }
[data-stagger].is-in > *:nth-child(n+10){ transition-delay:.58s }
/* gentle hover lift for cards */
.b11card, .b7cat, .svc-card, .case, .b13item{ transition:transform .3s var(--ease-soft), border-color .25s ease, box-shadow .3s ease; }
.b11card:hover, .b13item:hover{ transform:translateY(-3px); }
@media (prefers-reduced-motion: reduce){
[data-reveal], [data-reveal].is-in, [data-stagger] > *{ opacity:1 !important; transform:none !important; transition:none !important; }
.b11card:hover, .b13item:hover{ transform:none; }
html{ scroll-behavior:auto; }
}
/* ===== МОБ 2 — Категорийная лента: скрыта на десктопе (моб-only), keyframes ===== */
.m2b{ display:none; }
.m3b{ display:none; }
.m4b{ display:none; }
.m5b{ display:none; }
.m6b{ display:none; }
.m7b{ display:none; }
.m8b{ display:none; }
.m9b{ display:none; }
.m10b{ display:none; }
.m11b{ display:none; }
.m12b{ display:none; }
.m13b{ display:none; }
.m14b{ display:none; }
@keyframes m4logo{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes m4skill{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes m2i1{ 0%,31%{opacity:1} 35%,96%{opacity:0} 100%{opacity:1} }
@keyframes m2i2{ 0%,31%{opacity:0} 35%,64%{opacity:1} 68%,100%{opacity:0} }
@keyframes m2i3{ 0%,64%{opacity:0} 68%,96%{opacity:1} 100%{opacity:0} }
@keyframes m2p1{ 0%{width:0} 31%,100%{width:100%} }
@keyframes m2p2{ 0%,33%{width:0} 64%,100%{width:100%} }
@keyframes m2p3{ 0%,66%{width:0} 96%,100%{width:100%} }
/* ==========================================================================
MOBILE ADAPTATION — new blocks 9–13 (below fit-zoom cutoff of 1000px)
========================================================================== */
/* mobile navbar — hide phone + CTA so burger stays on-screen (must win cascade) */
/* ===== MOBILE m1 — promo banner as vertical fjord card ===== */
/* ===== MOBILE m3 — block 3 stack order: title → benefits → quote → stats ===== */
/* ===== MOBILE — strict to Figma: remove elements not in the mobile design ===== */
/* ==========================================================================
MOBILE — Figma 262:4732 «Моб1» (Hero, 390px) — pixel-perfect from Dev Mode
========================================================================== */
/* Мобильная вёрстка работает до 1023px включительно: с 1024px включается десктоп
с пропорциональным fit-zoom. Так между версиями не остаётся «мёртвой» зоны,
где десктопные блоки фиксированной ширины вылезали за экран. */
@media (max-width: 1023px){
/* ===== ЧИСТЫЙ ЛИСТ: на мобилке пока есть только блок 1 (hero) и блок 2 (m2b) ===== */
/* десктопная лента + все ещё не пересобранные блоки скрыты, пока не дам их макеты */
.cband,
.b3, .b4, .b5, .b6, .b7, .b8, .b9, .b10, .b11, .b12, .b13, .b14{ display:none !important; }
/* ===== МОБ 2 (Figma 262:4902) — своя моб-вёрстка ===== */
.m2b{ display:block; padding:90px 0 0; background:#fff; }
.m2b__scroll{ overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding:0 20px; }
.m2b__scroll::-webkit-scrollbar{ display:none; }
.m2b__track{ display:flex; gap:15px; width:max-content; }
.m2c{ position:relative; flex:0 0 auto; width:327px; height:443px; border-radius:28px; overflow:hidden; background:#ececee; }
.m2c--wide{ width:669px; }
/* list cards (1 · 6) */
.m2c--list{ display:flex; flex-direction:column; justify-content:space-between; padding:24px; }
.m2c__t{ margin:0; font-family:'Onest',sans-serif; font-weight:600; font-size:20px; line-height:31.2px; color:#3f3f46; }
.m2c__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.m2c__li{ display:flex; align-items:center; gap:12px; }
.m2ic{ width:20px; height:20px; flex:0 0 20px; display:block; }
.m2c__li span{ font-family:'Onest',sans-serif; font-weight:400; font-size:15px; line-height:21.75px; color:#3f3f46; white-space:nowrap; }
/* media + overlays */
.m2c__media{ position:absolute; inset:0; }
.m2c__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.m2c__grad{ position:absolute; inset:0; z-index:1; }
.m2c__grad--graf{ background:linear-gradient(180.68deg,#0c0c0c 5.95%,rgba(41,41,41,0) 37.09%,rgba(55,55,55,0) 52.45%,rgba(83,83,83,0) 68.21%,#898989 99.84%); }
.m2c__mt{ position:absolute; z-index:2; margin:0; font-family:'Onest',sans-serif; font-size:20px; line-height:31.2px; color:#fff; white-space:nowrap; }
.m2c__mt--web{ left:24px; top:346.4px; font-weight:500; }
.m2c__mt--web .m2c__mt-sb{ font-weight:600; }
.m2c__mt--graf{ left:24px; top:24.2px; font-weight:400; line-height:28px; }
.m2c__mt--snap{ position:static; font-weight:500; }
/* pills */
.m2c__tags{ position:absolute; z-index:2; display:flex; }
.m2tag{ display:inline-flex; align-items:center; height:30px; padding:5px 9px; border:1px solid #e4e4e7; border-radius:100px; box-sizing:border-box;
font-family:'Onest',sans-serif; font-weight:400; font-size:13px; line-height:19.5px; color:#fff; white-space:nowrap; }
.m2tag--r12{ border-radius:12px; }
.m2c__tags--web{ left:24px; top:389px; gap:6px; }
.m2c__tags--graf{ left:24px; top:283.75px; width:263px; flex-direction:column; gap:5px; }
.m2c__tags--graf .m2row{ display:flex; gap:5px; }
/* progress bars */
.m2prog{ position:absolute; top:16px; left:0; z-index:2; width:100%; display:flex; justify-content:space-between; align-items:center; padding:0 28px; box-sizing:border-box; }
.m2prog i{ display:block; width:74px; height:4px; border-radius:9999px; background:rgba(255,255,255,.2); overflow:hidden; }
.m2prog i b{ display:block; height:4px; background:#fff; width:0; }
/* card 2 carousel */
.m2c__media--anim img{ opacity:0; animation:9s infinite; }
.m2c__media--anim img:nth-child(1){ animation-name:m2i1; }
.m2c__media--anim img:nth-child(2){ animation-name:m2i2; }
.m2c__media--anim img:nth-child(3){ animation-name:m2i3; }
.m2prog--anim i:nth-child(1) b{ animation:m2p1 9s infinite; }
.m2prog--anim i:nth-child(2) b{ animation:m2p2 9s infinite; }
.m2prog--anim i:nth-child(3) b{ animation:m2p3 9s infinite; }
/* card 4 motion */
.m2c__motion{ position:absolute; left:26.5px; bottom:24px; z-index:2; width:616px; height:82.85px; }
.m2c__mt--motion{ left:10px; top:10px; font-weight:600; }
.m2c__tags--motion{ left:0; top:52.85px; gap:6px; }
.m2play{ position:absolute; right:0; top:2.6px; width:80px; height:80px; padding:0 0 0 5px; border:none; border-radius:56px;
background:rgba(255,255,255,.1); box-shadow:0 -0.5px 0 0 #fff; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.m2play svg{ width:17px; height:20px; display:block; }
/* card 5 snap */
.m2c__snap{ position:absolute; left:24px; top:346px; z-index:2; width:279px; display:flex; flex-direction:column; gap:11px; }
.m2c__tags--snap{ position:static; gap:6px; }
/* ===== МОБ 3 (Figma 262:4972) — «создаём продукты которые продают» ===== */
.m3b{ display:block; position:relative; overflow:hidden; margin-top:90px; padding:40px 20px 130px; border-radius:40px 40px 0 0; background:#f4f4f5; }
.m3b__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.m3b__bg img{ position:absolute; height:100%; width:514.98%; left:-24.7%; top:41.55%; max-width:none; }
.m3b__fade{ position:absolute; inset:0; z-index:0; background:linear-gradient(to bottom, #f4f4f5 73.755%, rgba(244,244,245,0) 89.419%); }
.m3b__in{ position:relative; z-index:1; display:flex; flex-direction:column; gap:40px; }
.m3b__top{ display:flex; flex-direction:column; gap:30px; align-items:center; }
/* title */
.m3b__title{ width:316px; max-width:100%; margin:0; text-align:center; font-family:'Onest',sans-serif; font-weight:400; font-size:28px; line-height:35px; color:#09090b; }
.m3b__title .g{ color:#c6c6c6; }
/* dark benefits card */
.m3b__benf{ width:100%; box-sizing:border-box; background:#27272a; border-radius:36px; padding:32px; display:flex; flex-direction:column; gap:15px; }
.m3b__brow{ display:flex; gap:16px; align-items:flex-start; padding-bottom:17px; border-bottom:1px solid #3f3f46; }
.m3b__brow:last-child{ padding-bottom:0; border-bottom:0; }
.m3b__arr{ width:28px; height:28px; flex:0 0 28px; display:block; }
.m3b__bt{ margin:0; font-family:'Onest',sans-serif; font-weight:400; font-size:17px; line-height:24px; color:#fff; white-space:nowrap; }
.m3b__bt .g{ color:#a1a1aa; }
/* white review card */
.m3b__bot{ display:flex; flex-direction:column; gap:40px; align-items:center; }
.m3b__rev{ width:100%; max-width:500px; box-sizing:border-box; margin:0; background:#fff; border-radius:36px; padding:28px 0; overflow:hidden; display:flex; flex-direction:column; gap:24px; }
.m3b__rev-head{ display:flex; gap:16px; align-items:center; padding:0 28px; }
.m3b__ava{ width:64px; height:64px; flex:0 0 64px; border-radius:64px; object-fit:cover; }
.m3b__rev-name{ font-family:'Onest',sans-serif; font-weight:700; font-size:20px; line-height:29.6px; color:#18181b; white-space:nowrap; }
.m3b__rev-role{ display:flex; gap:4px; align-items:center; }
.m3b__rev-role .lt{ font-family:'Onest',sans-serif; font-weight:300; font-size:14px; line-height:23.52px; color:#3f3f46; }
.m3b__rev-role .sb{ font-family:'Onest',sans-serif; font-weight:600; font-size:14px; line-height:23.52px; color:#3f3f46; }
.m3b__rev-txt{ width:272px; max-width:calc(100% - 56px); margin:0 auto; font-family:'Onest',sans-serif; font-weight:400; font-size:14px; line-height:21px; color:#3f3f46; }
/* stats (Unbounded, staggered ~126px between tops → gap 31) */
.m3b__stats{ display:flex; flex-direction:column; align-items:center; gap:31px; }
.m3b__stat{ display:flex; flex-direction:column; align-items:center; }
.m3b__sn{ font-family:'Unbounded',sans-serif; font-weight:300; font-size:40px; line-height:51.2px; color:#3f3f3f; }
.m3b__sl{ font-family:'Onest',sans-serif; font-weight:400; font-size:15px; line-height:21.75px; color:#3f3f3f; text-align:center; }
/* ===== МОБ 4 (Figma 262:5026) — «Почему компании выбирают нас» бенто ===== */
.m4b{ display:block; position:relative; z-index:2; margin-top:-90px; background:#fff; border-radius:40px 40px 0 0; padding:40px 0 14px; overflow:hidden; }
.m4b__in{ width:350px; max-width:calc(100% - 40px); margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.m4b__title{ margin:0 0 38px; text-align:center; font-family:'Onest',sans-serif; font-weight:400; font-size:28px; line-height:35px; color:#09090b; }
/* shared stat number/label */
.m4b__stat-n{ font-family:'Onest',sans-serif; font-weight:700; font-size:32px; line-height:48px; color:#09090b; }
.m4b__stat-l{ margin-top:4px; font-family:'Onest',sans-serif; font-weight:400; font-size:20px; line-height:31.2px; color:#18181b; }
.m4b__stat-l--sb{ font-weight:600; }
.m4b__stat-l--md{ font-weight:500; }
/* card 1 — 430+ + логотипы */
.m4b__c1{ box-sizing:border-box; height:207.49px; background:#f4f4f5; border-radius:36px; padding:28px 0 32px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; }
.m4b__c1-top{ display:flex; align-items:flex-start; justify-content:space-between; padding:0 28px; }
.m4b__c1-ico{ width:80px; height:80px; flex:0 0 80px; object-fit:contain; }
.m4b__marq{ position:relative; height:24px; overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 96px,#000 calc(100% - 96px),transparent); mask:linear-gradient(90deg,transparent,#000 96px,#000 calc(100% - 96px),transparent); }
.m4b__marq-track{ display:flex; gap:48px; align-items:center; width:max-content; padding-left:28px; animation:m4logo 24s linear infinite; }
.m4b__marq img{ height:24px; width:auto; display:block; }
/* card 2 — Топ-1% (union bg + звезда-маска + отвечаем) */
.m4b__c2{ position:relative; width:100%; height:676px; border-radius:36px; overflow:hidden; }
.m4b__c2-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.m4b__c2-in{ position:relative; z-index:1; height:100%; box-sizing:border-box; padding:28px 0; display:flex; flex-direction:column; justify-content:space-between; align-items:center; }
.m4b__c2-top{ display:flex; flex-direction:column; align-items:center; gap:111px; width:226px; }
.m4b__c2-title{ margin:0; text-align:center; font-family:'Onest',sans-serif; font-weight:500; font-size:20px; line-height:31.2px; color:#18181b; }
.m4b__star{ width:138px; height:138px; -webkit-mask:url(/assets/block34-fig/facemask.svg) center/contain no-repeat; mask:url(/assets/block34-fig/facemask.svg) center/contain no-repeat; }
.m4b__star img{ width:100%; height:100%; object-fit:cover; display:block; }
.m4b__otvet{ width:342px; max-width:100%; box-sizing:border-box; padding:30px; }
.m4b__otvet p{ margin:0 auto; width:282px; max-width:100%; text-align:center; font-family:'Onest',sans-serif; font-weight:400; font-size:20px; line-height:31.2px; color:#fff; }
/* card 3 — Vasile Tomuz видео-портрет */
.m4b__c3{ position:relative; width:100%; height:895px; box-sizing:border-box; background:#f4f4f5; border-radius:36px; padding-top:116px; overflow:hidden; }
.m4b__c3-img{ display:block; width:100%; height:779px; border-radius:36px; object-fit:cover; }
.m4b__c3-head{ position:absolute; top:22.5px; left:20px; width:234px; display:flex; gap:16px; align-items:center; z-index:2; }
.m4b__c3-ava{ width:64px; height:64px; flex:0 0 64px; border-radius:64px; object-fit:cover; }
.m4b__c3-name{ font-family:'Onest',sans-serif; font-weight:700; font-size:20px; line-height:29.6px; color:#18181b; white-space:nowrap; }
.m4b__c3-role{ display:flex; gap:4px; align-items:center; }
.m4b__c3-role .lt{ font-family:'Onest',sans-serif; font-weight:300; font-size:14px; line-height:23.52px; color:#3f3f46; }
.m4b__c3-role .sb{ font-family:'Onest',sans-serif; font-weight:600; font-size:14px; line-height:23.52px; color:#3f3f46; }
.m4b__c3-play{ position:absolute; left:20px; top:792.5px; width:80px; height:80px; z-index:2; padding:0 0 0 5px; border:none; border-radius:56px; background:rgba(255,255,255,.1); box-shadow:0 -0.5px 0 0 #fff; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.m4b__c3-play svg{ width:17px; height:20px; display:block; }
/* card 4 — 30+ навыков (лента) */
.m4b__c4{ box-sizing:border-box; height:345px; background:#f4f4f5; border-radius:36px; padding:51px 0 28px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; }
.m4b__sk{ height:132px; display:flex; flex-direction:column; gap:4px; overflow:hidden; }
.m4b__sk-row{ height:30px; overflow:hidden; }
.m4b__sk-track{ display:flex; gap:6px; align-items:center; width:max-content; animation:m4skill 34s linear infinite; }
.m4b__sk-row--rev .m4b__sk-track{ animation-direction:reverse; }
.m4tag{ display:inline-flex; align-items:center; height:30px; padding:5px 9px; box-sizing:border-box; border:1px solid #e4e4e7; border-radius:12px; background:#f4f4f5; font-family:'Onest',sans-serif; font-weight:400; font-size:13px; line-height:19.5px; color:#3f3f46; white-space:nowrap; }
.m4tag--dark{ background:#3f3f46; border-color:#3f3f46; color:#fafafa; }
.m4b__c4-foot{ display:flex; align-items:flex-end; justify-content:space-between; padding:0 28px; }
.m4b__c4-ico{ width:80px; height:80px; flex:0 0 80px; object-fit:contain; }
/* card 5 — 100% */
.m4b__c5{ box-sizing:border-box; background:#f4f4f5; border-radius:36px; padding:28px; display:flex; align-items:flex-start; justify-content:space-between; }
.m4b__c5-ico{ width:80px; height:80px; flex:0 0 80px; object-fit:contain; }
/* card 6 — без космических цен */
.m4b__c6{ position:relative; box-sizing:border-box; height:300px; background:#f4f4f5; border-radius:36px; padding:28px; overflow:hidden; }
.m4b__c6-head{ display:flex; flex-direction:column; align-items:center; }
.m4b__c6-t{ font-family:'Onest',sans-serif; font-weight:600; font-size:20px; line-height:31.2px; color:#18181b; text-align:center; }
.m4b__c6-tag{ margin-top:12px; display:inline-flex; align-items:center; height:30px; padding:5px 9px; box-sizing:border-box; border:1px solid #e4e4e7; border-radius:12px; background:#fff; font-family:'Onest',sans-serif; font-weight:400; font-size:13px; line-height:19.5px; color:#3f3f46; white-space:nowrap; }
.m4b__c6-astro{ position:absolute; left:50%; top:114px; transform:translateX(-50%); width:200px; height:186px; object-fit:cover; }
/* ===== МОБ 5 (Figma 267:5222) — CTA «Превращаем идеи» ===== */
.m5b{ display:block; margin-top:90px; padding:0 20px; background:#fff; }
.m5b__card{ position:relative; box-sizing:border-box; width:100%; max-width:350px; height:449px; margin:0 auto;
padding:20px; border-radius:32px; overflow:hidden;
display:flex; flex-direction:column; align-items:flex-start; gap:40px; }
.m5b__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; border-radius:32px; }
.m5b__bg img{ position:absolute; width:292.3%; height:127.72%; left:-140.23%; top:-11.09%; max-width:none; display:block; }
.m5b__grad{ position:absolute; inset:0; z-index:1; border-radius:32px;
background:linear-gradient(180deg, #f5f5f6 30.735%, rgba(243,243,244,0) 100%); }
.m5b__title{ position:relative; z-index:2; width:241px; margin:0;
font-family:'Onest',sans-serif; font-weight:400; font-size:36px; line-height:41px; color:#09090b; }
.m5b__tl{ display:block; }
.m5b__title .g{ color:#8b8b8b; }
.m5b__form{ position:relative; z-index:2; width:100%; display:flex; flex-direction:column; gap:12px; }
.m5b__input{ box-sizing:border-box; width:100%; height:60px; margin:0; padding:13px 13px 13px 21px;
border:1px solid transparent; border-radius:14px; background:#fff; -webkit-appearance:none; appearance:none; outline:none;
font-family:'Onest',sans-serif; font-weight:400; font-size:17px; line-height:normal; color:#18181b; }
.m5b__input::placeholder{ color:#a1a1aa; opacity:1; }
.m5b__btn{ box-sizing:border-box; width:100%; height:60px; margin:0; padding:13px;
border:1px solid transparent; border-radius:14px; background:#272727; cursor:pointer;
font-family:'Onest',sans-serif; font-weight:400; font-size:15px; line-height:18.75px; color:#fff; text-align:center; }
/* ===== МОБ 6 (Figma 267:5223) — кейсы + результаты ===== */
/* pb = 90px серого стыка + 40px, на которые сверху наезжает блок 7 своим скруглением */
.m6b{ display:block; margin-top:90px; padding:40px 0 130px; background:#f4f4f5; border-radius:40px 40px 0 0; }
.m6b__title{ width:274px; max-width:calc(100% - 40px); margin:0 auto; text-align:center;
font-family:'Onest',sans-serif; font-weight:400; font-size:20px; line-height:25.6px; color:#18181b; }
.m6b__title--2{ width:264px; margin-top:49.5px; }
/* верхняя карусель картинок: карточка 330x248, gap 12, боковые поля 30 */
.m6b__imgwrap{ margin-top:40px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
scroll-snap-type:x mandatory; }
.m6b__imgwrap::-webkit-scrollbar{ display:none; }
.m6b__imgtrack{ display:flex; gap:12px; width:max-content; padding:0 30px; }
.m6b__imgcard{ flex:0 0 330px; width:330px; height:248px; border-radius:36px; overflow:hidden; scroll-snap-align:center; }
.m6b__imgcard img{ width:100%; height:100%; object-fit:cover; display:block; }
/* стрелки 42x42 (только у верхней карусели) */
.m6b__nav{ margin-top:39.5px; display:flex; gap:12px; align-items:center; justify-content:center; }
.m6b__arw{ box-sizing:border-box; width:42px; height:42px; padding:13px; border:1px solid #fff; border-radius:14px;
background:#fafafa; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; }
.m6b__arw img{ width:16px; height:16px; display:block; }
/* нижняя карусель результатов: карточка 330x216, gap 12, левое поле 20 */
.m6b__reswrap{ margin-top:40.5px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
scroll-snap-type:x mandatory; }
.m6b__reswrap::-webkit-scrollbar{ display:none; }
.m6b__restrack{ display:flex; gap:12px; width:max-content; padding:0 20px; }
.m6b__res{ box-sizing:border-box; flex:0 0 330px; width:330px; height:216px; padding:25px;
border:1px solid #d4d4d8; border-radius:36px; background:transparent; scroll-snap-align:center;
display:flex; flex-direction:column; justify-content:space-between; }
.m6b__resco{ display:flex; gap:12px; align-items:center; }
.m6b__reslogo{ width:30px; height:30px; flex:0 0 30px; border-radius:12px; object-fit:cover; display:block; }
.m6b__reslogo--plain{ border-radius:0; object-fit:contain; }
.m6b__resname{ font-family:'Onest',sans-serif; font-weight:700; font-size:20px; line-height:29.6px; color:#18181b; white-space:nowrap; }
.m6b__resdesc{ width:280px; max-width:100%; margin:8px 0 0;
font-family:'Onest',sans-serif; font-weight:300; font-size:14px; line-height:23.52px; color:#3f3f46; }
.m6b__reslabel{ font-family:'Onest',sans-serif; font-weight:600; font-size:14px; line-height:23.52px; color:#3f3f46; }
.m6b__resval{ font-family:'Onest',sans-serif; font-weight:700; font-size:32px; line-height:48px; color:#09090b; white-space:nowrap; }
/* ===== МОБ 7 (Figma 267:5345) — «Одна команда. Любая задача» ===== */
/* наезжает на серый «хвост» блока 6 на 40px — скругление 40px ложится на #f4f4f5
и видно без рамки/тени; чистый зазор между контентом блоков = 90px */
.m7b{ display:block; position:relative; z-index:2; margin-top:-40px; padding:30px 0;
background:#fff; border-radius:40px 40px 0 0; }
.m7b__title{ margin:0; padding:10px 10px 10px 40px;
font-family:'Onest',sans-serif; font-weight:500; font-size:28px; line-height:35px; color:#09090b; }
.m7b__title .g{ color:#8b8b8b; }
/* список табов 350x182 */
.m7b__tabs{ box-sizing:border-box; width:350px; max-width:calc(100% - 40px); height:182px; margin:20px 0 0 20px;
padding:6px 7px 7px; border:1px solid #ececee; border-top-color:#e4e4e7; border-radius:20px; background:#f4f4f5;
display:flex; flex-direction:column; }
.m7b__tab{ box-sizing:border-box; flex:1 1 0; width:100%; margin:0; padding:0 15px;
display:flex; align-items:center; gap:0; cursor:pointer;
border:1px solid transparent; border-radius:14px; background:transparent; text-align:left;
font-family:'Onest',sans-serif; font-weight:500; font-size:13px; line-height:16.25px; color:#222; }
.m7b__tab.is-active{ background:rgba(255,255,255,.9); border-color:#fff; }
.m7b__tabico{ width:26px; height:16px; min-width:26px; display:block; object-fit:contain; }
/* карусель карточек категорий: 330x439, gap 20, левое поле 20 */
.m7b__cardswrap{ margin-top:50px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
scroll-snap-type:x mandatory; }
.m7b__cardswrap::-webkit-scrollbar{ display:none; }
.m7b__cards{ display:flex; gap:20px; width:max-content; padding:0 20px; align-items:center; }
.m7bcard{ box-sizing:border-box; flex:0 0 330px; width:330px; height:439px; padding:1px;
border:1px solid #ececee; border-radius:36px; overflow:hidden; scroll-snap-align:center;
display:flex; flex-direction:column; }
.m7bcard__img{ width:100%; height:285px; flex:0 0 285px; border-radius:36px; object-fit:cover; display:block; }
.m7bcard__body{ height:153px; box-sizing:border-box; padding:20px 0 24px;
display:flex; flex-direction:column; gap:15px; overflow:hidden; }
.m7bcard__title{ margin:0; padding:0 24px;
font-family:'Onest',sans-serif; font-weight:600; font-size:20px; line-height:31.2px; color:#18181b; }
.m7bcard__tags{ padding:0 20px; display:flex; flex-wrap:wrap; gap:6px; }
.m7btag{ box-sizing:border-box; display:inline-flex; align-items:center; height:30px; padding:5px 9px;
border:1px solid #e4e4e7; border-radius:12px;
font-family:'Onest',sans-serif; font-weight:400; font-size:13px; line-height:19.5px; color:#3f3f46; white-space:nowrap; }
/* тёмная кнопка снизу */
.m7b__btnwrap{ margin-top:40px; padding:10px; }
.m7b__btn{ box-sizing:border-box; display:flex; align-items:center; justify-content:center;
width:100%; height:60px; border:1px solid transparent; border-radius:14px; background:#272727; text-decoration:none;
font-family:'Onest',sans-serif; font-weight:400; font-size:15px; line-height:18.75px; color:#fff; }
/* ===== МОБ 8 (Figma 272:5441) — CTA «Бесплатная консультация» =====
блок тёмный (фото) → стык сверху БЕЛЫЙ (фон страницы), скругление видно по контрасту */
.m8b{ display:block; position:relative; height:390px; margin-top:90px;
border-radius:40px 40px 0 0; overflow:hidden; }
/* кроп 1:1 из Figma: картинка там растянута непропорционально (сверено с рендером) */
.m8b__bg{ position:absolute; z-index:0; width:465.44%; height:218.87%; left:-182.71%; top:-3.07%;
max-width:none; display:block; }
.m8b__glow{ position:absolute; z-index:1; left:437.7px; top:200.84px; width:479.053px; height:442.323px;
display:flex; align-items:center; justify-content:center; mix-blend-mode:overlay; pointer-events:none; }
.m8b__glow::before{ content:""; width:178px; height:476px; background:#fe45e2; filter:blur(25px); transform:rotate(-50deg); }
.m8b__title{ position:absolute; z-index:2; left:50%; transform:translateX(-50%); top:50px;
width:302px; margin:0; text-align:center;
font-family:'Onest',sans-serif; font-weight:500; font-size:28px; line-height:35px; color:#fff; }
.m8b__btn{ position:absolute; z-index:2; left:50%; transform:translateX(-50%); top:205px;
box-sizing:border-box; width:270px; height:49px; padding:14.5px 18.5px;
display:flex; align-items:center; justify-content:center; gap:16px; overflow:hidden; text-decoration:none;
background:rgba(255,255,255,.1); border:.5px solid rgba(255,255,255,.2); border-radius:16px; }
.m8b__chevs{ display:inline-flex; align-items:center; gap:4px; }
.m8b__chev{ width:5px; height:10px; flex:0 0 auto; display:block; }
.m8b__btn-t{ font-family:'Onest',sans-serif; font-weight:500; font-size:15px; line-height:20.25px;
color:#fff; white-space:nowrap; }
/* ===== МОБ 9 (Figma 272:5558) — отзывы =====
блок серый → стык сверху БЕЛЫЙ */
.m9b{ display:block; margin-top:90px; padding:50px 0 0; background:#f4f4f5; border-radius:40px 40px 0 0; }
/* шапка: бейджи рейтинга + заголовок (Card container 280px, gap 40) */
.m9b__head{ width:280px; max-width:calc(100% - 40px); margin:0 auto;
display:flex; flex-direction:column; align-items:center; gap:40px; }
.m9b__rates{ display:flex; align-items:center; gap:6px; }
.m9b__rate{ box-sizing:border-box; height:31px; padding:5px 11px; display:inline-flex; align-items:center; gap:4px;
background:#fafafa; border:1px solid #f4f4f5; border-radius:12px;
font-family:'Onest',sans-serif; font-weight:500; font-size:13px; line-height:20.15px; color:#3f3f46; }
.m9b__rate img{ width:16px; height:16px; display:block; }
.m9b__title{ margin:0; width:100%; text-align:center;
font-family:'Onest',sans-serif; font-weight:500; font-size:28px; line-height:35px; color:#09090b; }
/* карточки отзывов: 350 шириной, gap 12, высоты строго из макета */
.m9b__cards{ width:350px; max-width:calc(100% - 40px); margin:50px auto 0;
display:flex; flex-direction:column; gap:12px; }
.m9card{ box-sizing:border-box; width:100%; margin:0; padding:28px 0; overflow:hidden;
background:#fff; border-radius:36px; display:flex; flex-direction:column; }
.m9card:nth-of-type(1){ height:250px; }
.m9card:nth-of-type(3){ height:216px; }
.m9card:nth-of-type(4){ height:216px; }
.m9card:nth-of-type(5){ height:229px; }
.m9card__who{ display:flex; align-items:center; gap:16px; padding:0 28px; }
.m9card__ava{ width:64px; height:64px; flex:0 0 64px; border-radius:64px; object-fit:cover; display:block; }
.m9card__id{ display:flex; flex-direction:column; gap:2px; }
.m9card__name{ font-family:'Onest',sans-serif; font-weight:700; font-size:20px; line-height:29.6px; color:#18181b; white-space:nowrap; }
.m9card__role{ display:flex; align-items:center; gap:4px; }
.m9card__role .lt{ font-family:'Onest',sans-serif; font-weight:300; font-size:14px; line-height:23.52px; color:#3f3f46; white-space:nowrap; }
.m9card__role .sb{ font-family:'Onest',sans-serif; font-weight:600; font-size:14px; line-height:23.52px; color:#3f3f46; white-space:nowrap; }
.m9card__text{ margin:0; padding:24px 28px 0;
font-family:'Onest',sans-serif; font-weight:400; font-size:16px; line-height:24px; color:#3f3f46; }
/* карточка с видео: 700px, видео 778 обрезается рамкой карточки (как в макете) */
.m9card--video{ height:700px; padding:28px 0 0; }
.m9card__vidwrap{ height:608px; padding-top:24px; box-sizing:border-box; }
.m9card__vid{ position:relative; width:100%; height:778px; overflow:hidden; border-radius:28px 28px 0 0; }
.m9card__vid img{ position:absolute; left:0; top:-4.35%; width:100%; height:79.98%; max-width:none; object-fit:cover; display:block; }
.m9card__play{ position:absolute; left:20px; top:678px; width:80px; height:80px; box-sizing:border-box;
padding:0 1px 0 8px; display:flex; align-items:center; justify-content:center; cursor:pointer;
background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:80px;
box-shadow:inset 0 .5px 0 0 #fff; }
.m9card__play svg{ width:22.094px; height:26px; display:block; }
/* раскрытое состояние по кнопке «Больше»: снимаем обрезку и затухание */
.m9b--open .m9card:nth-of-type(5){ height:auto; }
.m9b--open .m9b__more{ margin-top:12px; height:auto; padding-top:0; background:none; }
/* «Больше» — градиентное затухание поверх низа карточек */
.m9b__more{ position:relative; z-index:2; margin-top:-202px; height:226px; box-sizing:border-box;
padding-top:160px; display:flex; align-items:center; justify-content:center;
background:linear-gradient(180deg, rgba(244,244,245,0) 0%, rgba(244,244,245,.67) 21%, #f4f4f5 44%); }
.m9b__morebtn{ box-sizing:border-box; width:127.398px; height:42.25px; padding:13px 17px;
display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; overflow:hidden;
background:#fafafa; border:1px solid #fff; border-radius:14px;
font-family:'Onest',sans-serif; font-weight:500; font-size:13px; line-height:16.25px; color:#18181b; }
.m9b__morebtn img{ width:16px; height:16px; display:block; }
/* ===== МОБ 10 (Figma 272:5559) — «Как мы работаем» =====
блок белый → стык СЕРЫЙ: блок 9 продлевает серый вниз, блок 10 наезжает на 40 */
.m9b{ padding-bottom:130px; } /* 90 стык + 40 под наезд блока 10 */
.m10b{ display:block; position:relative; z-index:2; margin-top:-40px; height:803px; box-sizing:border-box;
padding:50px 0 0; background:#fff; border-radius:40px 40px 0 0; }
.m10b__in{ width:350px; max-width:calc(100% - 40px); margin:0 auto; }
.m10b__head{ width:284px; max-width:100%; margin:0 auto;
display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center; }
.m10b__title{ margin:0; width:100%;
font-family:'Onest',sans-serif; font-weight:400; font-size:28px; line-height:35px; color:#09090b; }
.m10b__title b{ font-weight:600; }
.m10b__sub{ margin:0; width:100%;
font-family:'Onest',sans-serif; font-weight:400; font-size:13px; line-height:20px; color:#3f3f46; }
/* аккордеон */
.m10b__tabs{ margin-top:50px; display:flex; flex-direction:column; gap:12px; }
/* рамки — inset-тенями, чтобы не добавляли высоту (в Figma обводка внутри) */
.m10tab{ box-sizing:border-box; padding:8px 9px 9px; border-radius:36px; background:#f4f4f5;
box-shadow:inset 0 1px 0 0 #e4e4e7,
inset 1px 0 0 0 rgba(228,228,231,.4), inset -1px 0 0 0 rgba(228,228,231,.4),
inset 0 -1px 0 0 rgba(228,228,231,.4); }
.m10tab__card{ box-sizing:border-box; padding:25px; border-radius:28px; background:rgba(255,255,255,0); }
.m10tab--open .m10tab__card{ height:264px; background:#fff; border:1px solid #ececee;
filter:drop-shadow(0 4px 6px rgba(0,0,0,.04));
display:flex; flex-direction:column; justify-content:space-between; }
.m10tab__row{ display:flex; align-items:center; justify-content:space-between; width:100%;
margin:0; padding:0; background:none; border:0; cursor:pointer; text-align:left; font:inherit; color:inherit; }
.m10tab__left{ display:flex; align-items:center; gap:16px; }
/* тело раскрыто только у активного таба */
.m10tab__body{ display:none; }
.m10tab--open .m10tab__body{ display:block; }
.m10tab__n{ box-sizing:border-box; height:30px; padding:5px 7px; display:inline-flex; align-items:center;
border:1px solid #e4e4e7; border-radius:12px;
font-family:'Onest',sans-serif; font-weight:400; font-size:13px; line-height:19.5px; color:#222; }
.m10tab__t{ font-family:'Onest',sans-serif; font-weight:600; font-size:20px; line-height:30px; color:#222; white-space:nowrap; }
.m10tab__chev{ width:28px; height:28px; flex:0 0 28px; display:block; }
.m10tab--open .m10tab__chev{ transform:rotate(-90deg); }
.m10tab__desc{ margin:0; width:313px; max-width:100%;
font-family:'Onest',sans-serif; font-weight:400; font-size:15px; line-height:21.75px; color:#222; }
.m10tab__foot{ height:61px; box-sizing:border-box; padding-top:20px;
display:flex; align-items:flex-end; justify-content:space-between; }
.m10tab__btn{ box-sizing:border-box; width:154px; height:41px; padding:12.5px 16.5px;
display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; overflow:hidden;
background:#09090b; border:.5px solid rgba(255,255,255,.2); border-radius:14px;
box-shadow:0 0 0 1.5px #2c2e34, 0 4px 6px 0 rgba(0,0,0,.14),
inset 0 .5px 0 0 rgba(255,255,255,.5), inset 0 9px 14px -5px rgba(117,123,133,.4);
font-family:'Onest',sans-serif; font-weight:500; font-size:13px; line-height:16.25px; color:#fff; }
.m10tab__btn img{ width:16px; height:16px; display:block; }
.m10tab__prog{ display:block; width:40px; height:8px; border-radius:1000px; background:#d4d4d8; overflow:hidden; }
.m10tab__prog i{ display:block; width:39.984px; height:8px; border-radius:1000px; background:#52525b; }
/* ===== МОБ 11 (Figma 272:5621) — контроль качества =====
блок серый → стык сверху БЕЛЫЙ */
.m11b{ display:block; margin-top:90px; height:1669px; box-sizing:border-box; padding:50px 0 0;
background:#f4f4f5; border-radius:40px 40px 0 0; }
.m11b__head{ width:300px; max-width:calc(100% - 40px); margin:0 auto;
display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center; }
.m11b__title{ margin:0; width:100%;
font-family:'Onest',sans-serif; font-weight:500; font-size:28px; line-height:35px; letter-spacing:-0.4px; color:#09090b; }
.m11b__sub{ margin:0; width:254px; max-width:100%;
font-family:'Onest',sans-serif; font-weight:300; font-size:13px; line-height:21px; color:#52525b; }
.m11b__cards{ width:350px; max-width:calc(100% - 40px); margin:60px auto 0;
display:flex; flex-direction:column; gap:12px; }
.m11card{ box-sizing:border-box; height:auto; min-height:320px; padding:27px 25px 25px; border-radius:36px; overflow:hidden;
display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.m11card--dark{ background:#3f3f46; border:1px solid #3f3f46; }
.m11card--bord{ border:1px solid #d4d4d8; }
.m11card--white{ height:auto; min-height:396px; padding:26px 24px 24px; background:#fff; }
.m11card__badge{ box-sizing:border-box; margin-bottom:8px; padding:5px 9px; border-radius:12px;
display:inline-flex; align-items:center; gap:6px;
background:#fff; border:1px solid #e4e4e7;
font-family:'Onest',sans-serif; font-weight:300; font-size:13px; line-height:19.5px; color:#18181b; }
.m11card--dark .m11card__badge{ background:rgba(255,255,255,.12); border-color:transparent; color:#fff; }
.m11card__t{ width:100%; font-family:'Onest',sans-serif; font-weight:500; font-size:20px; line-height:30px;
letter-spacing:-0.2px; color:#3f3f46; white-space:nowrap; }
.m11card--dark .m11card__t{ color:#fff; }
/* flex:1 0 0 + min-height:0 давали нулевую высоту, как только текст
переставал помещаться в жёсткие 320px карточки. А justify-content:
flex-end при нулевой высоте выбрасывал число ВВЕРХ за границы блока —
ровно на строку заголовка. Число всегда занимает свою строку. */
.m11card__val{ flex:1 1 auto; min-height:60px; width:100%; display:flex; flex-direction:column; justify-content:flex-end; }
.m11card__val span{ font-family:'Onest',sans-serif; font-weight:500; font-size:40px; line-height:60px;
letter-spacing:-0.4px; color:#09090b; white-space:nowrap; }
.m11card--dark .m11card__val span{ color:#fff; }
.m11card__desc{ margin:0; width:256px; max-width:100%;
font-family:'Onest',sans-serif; font-weight:300; font-size:14px; line-height:21px; color:#52525b; }
.m11card--dark .m11card__desc{ color:rgba(255,255,255,.85); }
/* три перекрывающихся кружка (шаг 1) */
.m11card__avas{ height:54px; width:255.5px; max-width:100%; box-sizing:border-box; padding-top:14px; display:flex; align-items:flex-start; }
.m11card__avas i{ width:40px; height:40px; flex:0 0 40px; box-sizing:border-box;
background:#d4d4d8; border:2px solid #fff; border-radius:20px; display:block; }
.m11card__avas i + i{ margin-left:-10px; }
/* лицо в маске-звезде (шаг 4) */
.m11card__star{ width:138px; height:138px; flex:0 0 auto;
-webkit-mask:url(/assets/block34-fig/facemask.svg) center/contain no-repeat;
mask:url(/assets/block34-fig/facemask.svg) center/contain no-repeat; }
.m11card__star img{ width:100%; height:100%; object-fit:cover; display:block; }
/* ===== МОБ 12 (Figma 272:5686) — контактная форма =====
блок белый → стык СЕРЫЙ: блок 11 продлевает серый вниз, блок 12 наезжает на 40 */
.m11b{ height:auto; padding-bottom:130px; } /* 90 стык + 40 под наезд блока 12 */
.m12b{ display:block; position:relative; z-index:2; margin-top:-40px; height:779px; box-sizing:border-box;
padding:50px 20px 0; overflow:hidden; border-radius:40px 40px 0 0; background:#fff; }
.m12b__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; border-radius:40px 40px 0 0; }
.m12b__bg img{ position:absolute; width:644.26%; height:232.22%; left:-426.59%; top:-16.01%; max-width:none; display:block; }
.m12b__grad{ position:absolute; inset:0; z-index:1; border-radius:40px 40px 0 0;
background:linear-gradient(180deg, #fff 0%, rgba(255,255,255,0) 41.791%); }
.m12b__in{ position:relative; z-index:2; width:350px; max-width:100%; margin:0 auto;
display:flex; flex-direction:column; align-items:center; gap:40px; }
.m12b__head{ width:303px; max-width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:20px; }
.m12b__title{ margin:0; width:100%;
font-family:'Onest',sans-serif; font-weight:500; font-size:28px; line-height:35px; letter-spacing:-0.4px; color:#09090b; }
.m12b__title .g{ color:#aeaeae; }
.m12b__sub{ margin:0; width:219px; max-width:100%;
font-family:'Onest',sans-serif; font-weight:300; font-size:13px; line-height:21px; color:#52525b; }
.m12b__form{ width:100%; display:flex; flex-direction:column; gap:14px; }
.m12input{ box-sizing:border-box; width:100%; height:50px; margin:0; padding:1px 17px;
background:#fafafa; border:1px solid #ececee; border-radius:16px; -webkit-appearance:none; appearance:none; outline:none;
font-family:'Onest',sans-serif; font-weight:400; font-size:13px; line-height:19.5px; color:#3f3f46; }
.m12input::placeholder{ color:#3f3f46; opacity:1; }
.m12select{ position:relative; width:100%; }
/* шеврон стоит сразу за текстом «Выберите услугу» (в макете left 37%), не у края */
.m12select__chev{ position:absolute; left:37%; top:42.76%; width:2.06%; height:16%; pointer-events:none; }
.m12b__budget{ display:flex; flex-direction:column; }
.m12b__blabel{ font-family:'Onest',sans-serif; font-weight:400; font-size:13px; line-height:19.5px; color:#3f3f46; }
.m12b__pills{ margin-top:8px; display:flex; flex-wrap:wrap; gap:8px 8px; }
.m12pill{ box-sizing:border-box; height:38px; padding:1px 15px; display:inline-flex; align-items:center; justify-content:center;
background:#fff; border:1px solid #ececee; border-radius:10000px; cursor:pointer; overflow:hidden;
font-family:'Onest',sans-serif; font-weight:400; font-size:13px; line-height:19.5px; color:#3f3f46; white-space:nowrap; }
.m12pill input{ position:absolute; opacity:0; width:0; height:0; }
.m12pill:has(input:checked){ background:#09090b; border-color:#09090b; color:#fff; }
.m12b__submit{ box-sizing:border-box; width:100%; height:54px; margin-top:6px; padding:0 28px;
display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden;
background:#09090b; border:0; border-radius:16px;
box-shadow:0 0 0 1.5px #2c2e34, 0 4px 6px 0 rgba(0,0,0,.14),
inset 0 .5px 0 0 rgba(255,255,255,.5), inset 0 9px 14px -5px rgba(117,123,133,.4);
font-family:'Onest',sans-serif; font-weight:400; font-size:15px; color:#fff; }
.m12b__soc{ display:flex; align-items:center; gap:8px; }
.m12soc{ box-sizing:border-box; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
background:#f4f4f5; border:1px solid #ececee; border-radius:14px; }
.m12soc img{ width:19px; height:19px; display:block; }
/* ===== МОБ 13 — FAQ (контент с десктопа, токены моб) =====
блок серый → стык сверху БЕЛЫЙ */
.m13b{ display:block; position:relative; margin-top:90px; padding:50px 0 50px;
background:#f4f4f5; border-radius:40px 40px 0 0; }
.m13b__head{ width:350px; max-width:calc(100% - 40px); margin:0 auto;
display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.m13b__title{ margin:0; font-family:'Onest',sans-serif; font-weight:500; font-size:28px; line-height:35px;
letter-spacing:-0.4px; color:#09090b; }
.m13b__ailabel{ margin:0; font-family:'Onest',sans-serif; font-weight:300; font-size:13px; line-height:21px; color:#52525b; }
.m13b__ai{ display:flex; align-items:center; gap:8px; }
.m13b__ai a{ width:44px; height:44px; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center;
background:#fff; border:1px solid #ececee; border-radius:14px; }
.m13b__ai img{ width:18px; height:18px; display:block; }
.m13b__list{ width:350px; max-width:calc(100% - 40px); margin:40px auto 0;
display:flex; flex-direction:column; gap:12px; }
.m13item{ box-sizing:border-box; background:#fff; border-radius:36px; overflow:hidden; }
.m13item__head{ list-style:none; cursor:pointer; padding:25px;
display:flex; align-items:center; justify-content:space-between; gap:16px; }
.m13item__head::-webkit-details-marker{ display:none; }
.m13item__q{ font-family:'Onest',sans-serif; font-weight:500; font-size:17px; line-height:24px; color:#18181b; }
.m13item__chev{ width:28px; height:28px; flex:0 0 28px; display:block; transition:transform .25s ease; }
.m13item__chev svg{ width:28px; height:28px; display:block; }
.m13item[open] .m13item__chev{ transform:rotate(180deg); }
.m13item__a{ padding:0 25px 25px;
font-family:'Onest',sans-serif; font-weight:300; font-size:14px; line-height:21px; color:#52525b; }
.m13b__card{ width:350px; max-width:calc(100% - 40px); box-sizing:border-box; margin:12px auto 0; padding:25px;
background:#fff; border-radius:36px; display:flex; flex-direction:column; align-items:flex-start; }
.m13b__card-t{ margin:0; font-family:'Onest',sans-serif; font-weight:500; font-size:20px; line-height:30px; color:#18181b; }
.m13b__card-d{ margin:4px 0 0; font-family:'Onest',sans-serif; font-weight:300; font-size:14px; line-height:21px; color:#52525b; }
.m13b__card-btn{ margin-top:20px; box-sizing:border-box; width:100%; height:54px; padding:0 28px;
display:flex; align-items:center; justify-content:center; cursor:pointer;
background:#09090b; border:0; border-radius:16px;
box-shadow:0 0 0 1.5px #2c2e34, 0 4px 6px 0 rgba(0,0,0,.14),
inset 0 .5px 0 0 rgba(255,255,255,.5), inset 0 9px 14px -5px rgba(117,123,133,.4);
font-family:'Onest',sans-serif; font-weight:400; font-size:15px; color:#fff; }
/* ===== МОБ 14 — футер (контент с десктопа, токены моб) =====
блок белый → стык СЕРЫЙ: FAQ продлевает серый вниз, футер наезжает на 40 */
.m13b{ padding-bottom:180px; } /* 50 своих + 90 стык + 40 под наезд футера */
.m14b{ display:block; position:relative; z-index:2; margin-top:-40px; padding:50px 0 0;
background:#fff; border-radius:40px 40px 0 0; overflow:hidden; }
.m14b__card{ width:350px; max-width:calc(100% - 40px); box-sizing:border-box; margin:0 auto; padding:25px;
background:#f4f4f5; border-radius:36px; display:flex; flex-direction:column; align-items:flex-start; }
.m14b__card-t{ margin:0; font-family:'Onest',sans-serif; font-weight:500; font-size:20px; line-height:30px; color:#18181b; }
.m14b__addr{ margin:8px 0 0; font-family:'Onest',sans-serif; font-weight:300; font-size:13px; line-height:21px; color:#52525b; }
.m14b__phone{ margin-top:16px; font-family:'Onest',sans-serif; font-weight:500; font-size:15px; line-height:24px;
color:#18181b; text-decoration:none; }
.m14b__email{ margin-top:4px; font-family:'Onest',sans-serif; font-weight:300; font-size:14px; line-height:24px; color:#52525b; }
.m14b__email a{ color:#18181b; text-decoration:underline; }
.m14b__soc{ margin-top:20px; display:flex; align-items:center; gap:8px; }
.m14b__soc a{ width:44px; height:44px; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center;
background:#fff; border:1px solid #ececee; border-radius:14px; }
.m14b__soc img{ width:18px; height:18px; display:block; }
.m14b__menus{ width:350px; max-width:calc(100% - 40px); margin:40px auto 0; display:flex; gap:20px; }
.m14b__col{ flex:1 1 0; display:flex; flex-direction:column; }
.m14b__col-h{ margin:0 0 12px; font-family:'Onest',sans-serif; font-weight:600; font-size:13px; line-height:19.5px; color:#18181b; }
.m14b__col a{ padding:6px 0; font-family:'Onest',sans-serif; font-weight:300; font-size:14px; line-height:21px;
color:#52525b; text-decoration:none; }
.m14b__legal{ width:350px; max-width:calc(100% - 40px); margin:40px auto 0; padding-top:20px;
border-top:1px solid #ececee; display:flex; flex-direction:column; gap:10px;
font-family:'Onest',sans-serif; font-weight:300; font-size:12px; line-height:18px; color:#71717a; }
.m14b__lang{ display:flex; gap:12px; }
.m14b__lang a{ color:#52525b; text-decoration:none; }
.m14b__lang a.is-cur{ color:#18181b; font-weight:500; }
.m14b__admin{ color:#71717a; text-decoration:underline; }
/* giant.svg — белые буквы (рисовались на сером десктопном футере). На белом моб-футере
используем его как маску и заливаем серым, иначе водяного знака не видно. */
.m14b__watermark{ margin-top:30px; height:46px; overflow:hidden; }
.m14b__watermark img{ width:100%; height:auto; display:block; }
@supports ((-webkit-mask-image:url(#m)) or (mask-image:url(#m))){
.m14b__watermark{ background:#e4e4e7;
-webkit-mask:url(/assets/block13-fig/giant.svg) top center/100% auto no-repeat;
mask:url(/assets/block13-fig/giant.svg) top center/100% auto no-repeat; }
.m14b__watermark img{ display:none; }
}
/* видео-лайтбокс для кнопок play */
.mvbox{ display:none; }
.mvbox.is-open{ display:flex; position:fixed; inset:0; z-index:9999;
align-items:center; justify-content:center; padding:20px; background:rgba(9,9,11,.92); }
.mvbox__v{ width:100%; max-width:350px; max-height:80vh; border-radius:24px; background:#000; display:block; }
.mvbox__close{ position:absolute; top:14px; right:16px; width:40px; height:40px; padding:0; cursor:pointer;
display:flex; align-items:center; justify-content:center;
background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); border-radius:14px;
font-size:26px; line-height:1; color:#fff; }
/* ---------- NAVBAR (262:4675): h60, px20 ---------- */
.anav{ height:60px; }
.anav__in{ height:60px; padding:0 20px; gap:0; }
.anav__menu, .anav__phone, .anav__cta{ display:none; }
.anav__logo{ font-family:'Unbounded',sans-serif; font-weight:500; font-size:18px; line-height:18px; letter-spacing:0.36px; color:#09090b; }
.anav__right{ gap:0; }
.anav__burger{ display:inline-flex; width:40px; height:40px; padding:0; border-radius:14px; border:1px solid #ececee; background:#fff; align-items:center; justify-content:center; }
.anav__burger svg{ width:12.5px; height:12px; }
/* ---------- PROMO (262:4686): h128, r25, fjord + vertical gradient ---------- */
.fw{ padding:0; }
.aibn{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
width:calc(100% - 40px); max-width:350px; margin:21px auto 0; height:128px; min-height:0;
padding:14px 24px 14px 25px; border-radius:25px; border:0; overflow:hidden; box-sizing:border-box; }
.aibn .aibn__bg{ border-radius:25px; }
.aibn .aibn__overlay{ border-radius:25px; background:linear-gradient(180deg, #f6f6f6 7.42%, rgba(246,246,246,0) 119.53%); }
.aibn .aibn__txt{ position:relative; left:auto; right:auto; top:auto; bottom:auto; transform:none; z-index:3;
display:block; width:301px; max-width:100%; margin:0; text-align:center;
font-family:'Onest',sans-serif; font-weight:400; font-size:15px; line-height:22.5px; color:#4b4b4b; }
.aibn .aibn__btn{ position:relative; left:auto; right:auto; top:auto; bottom:auto; transform:none; z-index:3;
display:inline-flex; align-items:center; justify-content:center; margin:0; padding:10px 20px; border-radius:14px;
background:#f9fafa; border:1px solid #f2f2f2; font-family:'Onest',sans-serif; font-weight:400; font-size:14px; line-height:21px; color:#18181b; }
/* ---------- HERO container: content group w350, 20px gutters ---------- */
.hero{ margin-top:0; }
.hero__in{ padding:0; }
.hero__wrap{ width:calc(100% - 40px); max-width:350px; margin:0 auto; gap:0; }
.hero__row{ flex-direction:column; align-items:stretch; gap:0; }
.hero__left, .hero__right{ width:100%; gap:0; }
/* chips row (262:4694): 40px below promo, gap-10 */
.hero__chips{ margin:40px 0 0; display:flex; gap:10px; align-items:center; flex-wrap:nowrap; }
.hchip{ padding:5px 10px; border-radius:100px; background:#fafafa; border:1px solid #f4f4f5;
font-family:'Onest',sans-serif; font-weight:300; font-size:13px; line-height:19.5px; color:#18181b; }
/* title (262:4704): 40/42, tracking -1.28 */
.hero__title{ margin:20px 0 0; font-family:'Onest',sans-serif; font-weight:400; font-size:40px; line-height:42px; letter-spacing:-1.28px; color:#09090b; text-align:left; }
.hero__title .g{ color:#c6c6c6; }
/* subtitle (262:4706): 15/22, #52525b, last line Caveat 22 */
.hero__right{ margin-top:30px; }
.hero__p{ margin:0; text-align:left; width:100%; font-family:'Onest',sans-serif; font-weight:300; font-size:15px; line-height:22px; color:#52525b; }
.hero__hand{ font-family:'Caveat',cursive; font-weight:400; font-size:22px; line-height:22px; color:#000; }
/* form (262:4707): h130, r30, column gap-20 */
.hero__form{ margin-top:30px; flex-direction:column; align-items:flex-start; justify-content:center; gap:20px;
height:130px; padding:0 21px; border-radius:30px; background:#fff; border:1px solid #ececee; box-shadow:0 1px 0 rgba(9,9,11,.03); width:100%; box-sizing:border-box; }
.hero__form input{ flex:0 0 auto; height:23.5px; width:100%; border:none; outline:none; background:none; padding:0;
font-family:'Onest',sans-serif; font-weight:400; font-size:17px; color:#18181b; }
.hero__form input::placeholder{ color:#a1a1aa; }
/* было width:308px — это значение из макета на 390px, где 308 = вся ширина
контента формы. Записываем отношением: на 390 даёт те же 308, дальше растёт. */
.hero__form button{ height:56px; width:100%; border:none; border-radius:20px; background:#262626; color:#fff; padding:0;
font-family:'Onest',sans-serif; font-weight:400; font-size:15px; line-height:18.75px; box-shadow:inset 0 9px 14px 0 rgba(117,123,133,.4); }
/* stats block (262:4712): 60px below form; stats row then logos +41 */
.hero__row2{ margin-top:60px; flex-direction:column; align-items:flex-start; gap:41px; }
.hero__stats{ display:flex; flex-direction:row; gap:40px; align-items:flex-start; }
.hstat{ flex-direction:column; align-items:flex-start; gap:0; }
.hstat__n{ font-family:'Onest',sans-serif; font-weight:500; font-size:40px; line-height:40px; letter-spacing:-0.8px; color:#09090b; }
.hstat__l{ font-family:'Onest',sans-serif; font-weight:300; font-size:15px; line-height:20.25px; color:#52525b; white-space:nowrap; max-width:none; }
/* logos (262:4724): 3 logos LUCKY CAFE / MARCOV / GLASSFIX, 21px SemiBold, edge fade */
.hero__logos{ width:100%; -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.hero__logos .marq__track{ animation:none; gap:40px; justify-content:flex-start; }
.hero__logos .marq__logo{ font-family:'Onest',sans-serif; font-weight:600; font-size:21px; line-height:31.5px; letter-spacing:0.42px; color:#a1a1aa; }
.hero__logos .marq__logo:nth-child(n+4){ display:none; }
/* not in mobile Figma frames */
.chatb{ display:none !important; }
}
/* ==========================================================================
АДАПТАЦИЯ ПОД ВСЕ РАЗМЕРЫ
Дизайн 390 (моб) и 1440 (десктоп) не меняется — правила ниже включаются
только за их пределами и лишь предотвращают вылет за экран.
========================================================================== */
/* --- Десктопный навбар на узких десктопах: контент не помещается в 1024–1150 --- */
@media (min-width: 1024px) and (max-width: 1150px){
.anav__phone{ display:none; }
.anav__menu{ gap:0; }
}
/* --- Телефоны уже 390px (SE, старые Android): даём переносы вместо вылета --- */
@media (max-width: 389px){
.hero__chips{ flex-wrap:wrap; }
.hero__stats{ flex-wrap:wrap; }
.hstat, .hstat__l{ min-width:0; }
/* заголовки, которым на 390 хватает одной строки */
.m10tab__t,
.m9card__name,
.m6b__resname, .m6b__resval,
.m11card__t,
.m3b__bt{ white-space:normal; }
/* фиксированные высоты снимаем — контент выше из-за переносов */
.m10tab--open .m10tab__card,
.m9card:nth-of-type(1), .m9card:nth-of-type(3),
.m9card:nth-of-type(4), .m9card:nth-of-type(5),
.m11card, .m11card--white,
.m9b, .m10b, .m11b, .m12b{ height:auto; }
.m6b__res{ height:auto; min-height:216px; }
}
/* ==========================================================================
МИКРО-АНИМАЦИИ И СОСТОЯНИЯ (моб + десктоп)
========================================================================== */
/* убираем серую вспышку при тапе на iOS/Android */
button, a, summary, label, [role="button"]{ -webkit-tap-highlight-color: transparent; }
/* кнопки: мягкое нажатие */
.m5b__btn, .m7b__btn, .m8b__btn, .m10tab__btn, .m12b__submit, .m13b__card-btn,
.m6b__arw, .m9b__morebtn, .m7b__tab, .m12pill, .m2play, .m4b__c3-play, .m9card__play{
transition: transform .18s var(--ease-soft), background-color .22s ease,
border-color .22s ease, box-shadow .22s ease, opacity .22s ease;
}
.m5b__btn:active, .m7b__btn:active, .m8b__btn:active, .m10tab__btn:active,
.m12b__submit:active, .m13b__card-btn:active, .m9b__morebtn:active{ transform: scale(.97); }
.m6b__arw:active, .m2play:active, .m4b__c3-play:active, .m9card__play:active{ transform: scale(.92); }
/* стрелки каруселей и play — отклик на наведение */
@media (hover: hover){
.m6b__arw:hover{ background:#fff; border-color:#ececee; }
.m2play:hover, .m4b__c3-play:hover, .m9card__play:hover{ background:rgba(255,255,255,.22); }
.m13b__ai a:hover, .m14b__soc a:hover, .m12soc:hover{ transform: translateY(-2px); border-color:#d4d4d8; }
.m14b__col a:hover{ color:#18181b; }
.m6b__res:hover, .m7bcard:hover{ transform: translateY(-3px); }
}
.m13b__ai a, .m14b__soc a, .m12soc{ transition: transform .2s var(--ease-soft), border-color .2s ease; }
.m14b__col a{ transition: color .2s ease; }
.m6b__res, .m7bcard{ transition: transform .3s var(--ease-soft); }
/* табы услуг: плавная смена активного состояния */
.m7b__tab{ transition: background-color .25s ease, border-color .25s ease; }
.m7b__tabico{ transition: opacity .25s ease; }
/* аккордеоны: раскрытие тела и поворот шеврона */
.m10tab{ transition: background-color .25s ease; }
.m10tab__chev{ transition: transform .3s var(--ease-soft); }
.m10tab--open .m10tab__body{ animation: m-fade-in .38s var(--ease-soft) both; }
.m13item[open] .m13item__a{ animation: m-fade-in .32s var(--ease-soft) both; }
@keyframes m-fade-in{ from{ opacity:0; transform: translateY(-6px); } to{ opacity:1; transform:none; } }
/* карточки категорий: лёгкий зум картинки */
.m7bcard__img, .m6b__imgcard img{ transition: transform .5s var(--ease-soft); }
@media (hover: hover){
.m7bcard:hover .m7bcard__img, .m6b__imgcard:hover img{ transform: scale(1.04); }
}
/* поля форм: подсветка фокуса */
.m5b__input, .m12input{ transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.m5b__input:focus, .m12input:focus{ border-color:#a1a1aa; box-shadow:0 0 0 3px rgba(9,9,11,.06); }
.m12pill:has(input:focus-visible){ box-shadow:0 0 0 3px rgba(9,9,11,.10); }
/* видео-лайтбокс: появление */
.mvbox.is-open{ animation: m-fade-in .25s ease both; }
.mvbox.is-open .mvbox__v{ animation: m-pop .32s var(--ease-soft) both; }
@keyframes m-pop{ from{ opacity:0; transform: scale(.96); } to{ opacity:1; transform:none; } }
/* доступность: полностью отключаем движение по запросу системы */
@media (prefers-reduced-motion: reduce){
.m10tab--open .m10tab__body, .m13item[open] .m13item__a,
.mvbox.is-open, .mvbox.is-open .mvbox__v{ animation:none !important; }
.m5b__btn, .m7b__btn, .m8b__btn, .m10tab__btn, .m12b__submit, .m13b__card-btn,
.m6b__arw, .m9b__morebtn, .m2play, .m4b__c3-play, .m9card__play,
.m6b__res, .m7bcard, .m13b__ai a, .m14b__soc a, .m12soc,
.m7bcard__img, .m6b__imgcard img{ transition:none !important; transform:none !important; }
}
/* ==========================================================================
ТОКЕНЫ ДИЗАЙН-СИСТЕМЫ (имена из tokens.json / variables.css)
Значения совпадают с уже используемыми --c-* — это слой совместимости,
чтобы код и экспорт из Figma назывались одинаково. Визуально ничего не меняет.
========================================================================== */
:root{
/* Colors */
--color-obsidian: var(--c-obsidian);
--color-graphite: var(--c-graphite);
--color-slate: var(--c-slate);
--color-iron: var(--c-iron);
--color-steel: var(--c-steel);
--color-fog: var(--c-fog);
--color-ash: var(--c-ash);
--color-mist: var(--c-mist);
--color-cloud: var(--c-cloud);
--color-paper: var(--c-paper);
--color-snow: var(--c-snow);
--color-ember: var(--c-ember);
--color-magenta-spark: #fe45e2;
/* Surfaces */
--surface-canvas: #f4f4f5;
--surface-card: #ffffff;
--surface-subtle-card: #fafafa;
--surface-dark-surface:#18181b;
--surface-deep-dark: #27272a;
/* Typography — семейство подменено на Onest: в Cosmica нет кириллицы */
--font-cosmica: var(--font-sans);
--text-caption: 12px; --leading-caption: 1.64;
--text-body: 15px; --leading-body: 1.45;
--text-body-lg: 18px; --leading-body-lg: 1.45;
--text-subheading: 20px; --leading-subheading: 1.5;
--text-heading-sm: 32px; --leading-heading-sm: 1.5;
--text-heading: 40px; --leading-heading: 1.28;
--text-heading-lg: 56px; --leading-heading-lg: 1.28;
--text-display: 64px; --leading-display: 1.12;
--font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500;
--font-weight-semibold: 600; --font-weight-bold: 700;
/* Spacing */
--spacing-unit: 4px;
--spacing-4: 4px; --spacing-8: 8px; --spacing-12: 12px; --spacing-16: 16px;
--spacing-20: 20px; --spacing-24: 24px; --spacing-28: 28px; --spacing-32: 32px;
--spacing-36: 36px; --spacing-40: 40px; --spacing-48: 48px; --spacing-64: 64px;
--spacing-68: 68px; --spacing-80: 80px; --spacing-120: 120px;
/* Radius */
--radius-md: 6px; --radius-xl: 12px; --radius-2xl: 16px; --radius-2xl-2: 20px;
--radius-3xl: 24px; --radius-3xl-2: 28px; --radius-3xl-3: 36px; --radius-3xl-4: 40px;
--radius-full: 48px; --radius-full-2: 56px; --radius-full-3: 64px; --radius-full-4: 80px;
--radius-full-5: 1000px; --radius-full-6: 10000px;
--radius-cards: 36px; --radius-icons: 40px; --radius-pills: 10000px;
--radius-badges: 12px; --radius-inputs: 14px; --radius-buttons: 14px;
/* Shadows */
--shadow-subtle: rgba(255,255,255,.5) 0 .5px 0 0 inset, rgba(117,123,133,.4) 0 9px 14px -5px inset, rgb(44,46,52) 0 0 0 1.5px, rgba(0,0,0,.14) 0 4px 6px 0;
--shadow-subtle-2: rgb(228,228,231) 0 1px 0 0 inset;
--shadow-subtle-3: rgb(255,255,255) 0 .5px 0 0 inset;
--shadow-subtle-4: rgb(255,255,255) 0 -.5px 0 0;
--shadow-subtle-5: rgb(228,228,231) 0 -1px 0 0;
--shadow-md: rgba(0,0,0,.04) 0 4px 12px 0;
/* Layout */
--page-max-width: 1200px; --section-gap: 80px; --card-padding: 28px; --element-gap: 8px;
}
/* дропдаун «Услуги» должен раскрываться и при фокусе с клавиатуры */
.anav__item--drop:focus-within .anav__drop{ display:flex; }
/* видимый фокус для клавиатуры (мышью не показывается) */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
outline:2px solid var(--c-obsidian); outline-offset:2px; border-radius:4px;
}
/* ==========================================================================
ПРАВКИ ПО ЗАМЕЧАНИЯМ (моб)
========================================================================== */
@media (max-width: 1023px){
/* [1] Моушн-карточка теперь 327px (была широкой 669) — контент был свёрстан
под старую ширину и вылезал за границы. Переводим на поток внутри карточки. */
.m2c--motion .m2c__motion{
position:absolute; left:0; right:0; bottom:24px; top:auto;
width:auto; height:auto; padding:0 24px; box-sizing:border-box; }
.m2c--motion .m2c__mt--motion{
position:static; width:auto; font-size:17px; line-height:24px; font-weight:600; }
.m2c--motion .m2c__tags--motion{
position:static; margin-top:12px; display:flex; flex-wrap:wrap; gap:6px; width:auto; }
.m2c--motion .m2play{
right:24px; top:auto; bottom:calc(100% + 16px); width:56px; height:56px; }
/* [6] Лента логотипов в hero: должна ехать сама (раньше стояла) */
.hero__logos .marq__track{ animation: marqX 26s linear infinite; }
.hero__logos .marq__logo:nth-child(n+4){ display:inline-block; }
/* [3][5] Вращается САМА звезда (маска), а лицо внутри остаётся прямым:
контейнер крутим вперёд, картинку — на столько же назад.
Лучи звезды вписаны в окружность r=69 внутри квадрата 138, поэтому при
повороте они не выходят за неподвижную картинку — пустых мест не будет. */
.m4b__star, .m11card__star{ animation: m-spin 22s linear infinite; }
.m4b__star img, .m11card__star img{ animation: m-spin-rev 22s linear infinite; }
/* [4] Астронавт — плавно качается на 10px вверх-вниз */
.m4b__c6-astro{ animation: m-float 4.5s ease-in-out infinite; }
}
@keyframes m-spin{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }
@keyframes m-spin-rev{ from{ transform: rotate(0deg); } to{ transform: rotate(-360deg); } }
/* у астронавта уже есть translateX(-50%) для центрирования — сохраняем его */
@keyframes m-float{
0%, 100%{ transform: translateX(calc(-50% - 10px)) translateY(0); }
25% { transform: translateX(-50%) translateY(-10px); }
50% { transform: translateX(calc(-50% + 10px)) translateY(0); }
75% { transform: translateX(-50%) translateY(10px); }
}
/* [2] Секции, которые НАЕЗЖАЮТ на предыдущий блок, нельзя анимировать
прозрачностью — сквозь них просвечивает нижний блок. Анимируем содержимое. */
/* Сами моб-секции НИКОГДА не анимируются: у них свой фон и наезд на соседа,
поэтому сдвиг/прозрачность ломают стык и просвечивают нижний блок.
Анимируется только их содержимое ([data-stagger] и внутренние элементы). */
.m2b[data-reveal], .m3b[data-reveal], .m4b[data-reveal], .m5b[data-reveal],
.m6b[data-reveal], .m7b[data-reveal], .m8b[data-reveal], .m9b[data-reveal],
.m10b[data-reveal], .m11b[data-reveal], .m12b[data-reveal], .m13b[data-reveal],
.m14b[data-reveal],
.m2b[data-reveal].is-in, .m3b[data-reveal].is-in, .m4b[data-reveal].is-in,
.m5b[data-reveal].is-in, .m6b[data-reveal].is-in, .m7b[data-reveal].is-in,
.m8b[data-reveal].is-in, .m9b[data-reveal].is-in, .m10b[data-reveal].is-in,
.m11b[data-reveal].is-in, .m12b[data-reveal].is-in, .m13b[data-reveal].is-in,
.m14b[data-reveal].is-in{
opacity:1 !important; transform:none !important; }
@media (prefers-reduced-motion: reduce){
.m4b__star, .m11card__star, .m4b__star img, .m11card__star img,
.m4b__c6-astro, .hero__logos .marq__track{ animation:none !important; }
}
/* [7] Плавная подмена слова в заголовке hero */
.hero__title .g[data-words]{
display:inline-block;
transition: opacity .28s var(--ease-soft), transform .28s var(--ease-soft); }
.hero__title .g[data-words].is-swap{ opacity:0; transform: translateY(-8px); }
@media (prefers-reduced-motion: reduce){
.hero__title .g[data-words]{ transition:none; }
}
/* ==========================================================================
ПРАВКИ ПО ЗАМЕЧАНИЯМ (2)
========================================================================== */
@media (max-width: 1023px){
/* [1] Промо-баннер: у текста стоял white-space:nowrap, поэтому «за 24 часа»
обрезалось краем баннера. Разрешаем перенос на две строки. */
.aibn .aibn__txt{ white-space:normal; width:auto; max-width:301px; }
/* [2] «Сторис» на карточке «Фирменный стиль»: полоски шли, а кадр не менялся.
Кадры теперь перелистываются; пустые слоты — под будущие фото. */
.m2c__media--anim > *{ position:absolute; inset:0; width:100%; height:100%;
opacity:0; animation:9s infinite; }
.m2c__media--anim > *:nth-child(1){ animation-name:m2i1; }
.m2c__media--anim > *:nth-child(2){ animation-name:m2i2; }
.m2c__media--anim > *:nth-child(3){ animation-name:m2i3; }
.m2c__slot{ display:block; background:#ececee; } /* сюда добавишь фото */
/* [3][4] Блоки «Отзывы» и «FAQ» теперь НАЕЗЖАЮТ на предыдущий блок,
а не отделяются белым зазором. */
.m8b{ padding-bottom:40px; } /* место под наезд */
.m9b{ margin-top:-40px; position:relative; z-index:2; }
.m13b{ margin-top:-40px; position:relative; z-index:2; }
}
/* Пустые слайды-заглушки (десктоп) — под будущие фото */
.ccard--carousel .cslide--empty{ position:absolute; inset:0; display:block; background:#ececee; }
/* ==========================================================================
ПЛАНШЕТЫ И БОЛЬШИЕ ТЕЛЕФОНЫ (560–1023px)
Колонка контента растёт с 350 до 560px, размеры шрифта — как в макете.
Фоны секций остаются во всю ширину. Ниже 560px не меняется НИЧЕГО:
там колонка и так ограничена полями по 20px.
========================================================================== */
@media (min-width: 391px) and (max-width: 1023px){
/* контентные колонки блоков */
.hero__wrap, .aibn,
.m4b__in, .m5b__card, .m7b__in,
.m9b__cards, .m10b__in, .m11b__cards, .m12b__in,
.m13b__list, .m13b__card,
.m14b__card, .m14b__menus, .m14b__legal{
max-width:560px; width:calc(100% - 40px); margin-left:auto; margin-right:auto; }
/* заголовки-колонки чуть уже — как в макете относительно контента */
/* пропущенные в первой правке контейнеры — из-за них блоки 3, 7 и 9
растягивались на всю ширину и ломали композицию */
.m3b__in, .m7b__title, .m7b__btnwrap, .m9b__more{
max-width:560px; width:calc(100% - 40px); margin-left:auto; margin-right:auto; }
.m6b__title, .m9b__head, .m10b__head, .m11b__head, .m13b__head{
max-width:480px; width:calc(100% - 40px); margin-left:auto; margin-right:auto; }
/* фиксированные высоты сняты: текст перетекает по-другому в широкой колонке */
.m9b, .m10b, .m11b, .m12b,
.m9card, .m10tab--open .m10tab__card, .m11card, .m11card--white,
.m6b__res{ height:auto; }
.m9card{ min-height:216px; }
.m6b__res{ min-height:216px; }
.m9card--video{ height:auto; }
.m9card__vidwrap{ height:auto; }
.m9card__vid{ height:420px; }
.m9card__play{ top:auto; bottom:20px; }
/* горизонтальные карусели: поля по краям как у колонки */
.m2b__scroll, .m6b__imgwrap, .m6b__reswrap, .m7b__cardswrap{
padding-left:max(20px, calc((100% - 560px) / 2));
padding-right:max(20px, calc((100% - 560px) / 2)); }
.m2b__track, .m6b__imgtrack, .m6b__restrack, .m7b__cards{ padding-left:0; padding-right:0; }
/* блок 8 — карточка CTA во всю ширину колонки */
.m8b{ height:auto; min-height:390px; }
.m8b__title{ width:min(420px, calc(100% - 40px)); }
}
/* Инициалы вместо фото в мобильной карточке отзыва.
.m9card__ava в вёрстке — это ![]()
; когда в CMS у отзыва нет фото,
main.js рисует с тем же классом, и ему нужен вид кружка
с буквами — как у десктопного .tsl-card__ava. */
@media (max-width: 1023px){
.m9card__ava--ini{
display:flex; align-items:center; justify-content:center;
background:var(--c-graphite); color:#fff;
font-family:'Onest',sans-serif; font-weight:500; font-size:18px;
letter-spacing:.03em; overflow:hidden;
}
}
/* Пустое ключевое слово в панели = плашки нет вовсе. Через !important,
потому что у ленты услуг плашки показывает собственная анимация. */
.cms-off{display:none!important}
/* ─────────────────────────────────────────────────────────────────────
БОКОВЫЕ ОТСТУПЫ БЛОКОВ 8 и 10–14
Эти секции не имели боковых отступов вовсе, и их содержимое упиралось
в край экрана. Незаметно это было потому, что внутренние контейнеры
масштабируются скриптом (bindFitDesign) под ширину РОДИТЕЛЯ: нет
отступа у родителя — нет и зазора, на любой ширине экрана.
Значение то же, что у блока 3 и шапки, — единый отступ по всему сайту.
───────────────────────────────────────────────────────────────────── */
.b8, .b10, .b11, .b12, .b13, .b14 {
padding-left: clamp(20px, 6.25vw, 100px);
padding-right: clamp(20px, 6.25vw, 100px);
}
/* ─────────────────────────────────────────────────────────────────────
ШОВ МЕЖДУ БЛОКАМИ: полупрозрачная полоса при проявлении
Секции наложены друг на друга (margin-top: -90px) и имеют скруглённый
верх, а собственный фон рисует сама секция. Анимация проявления
ставила opacity:0 на ВСЮ секцию — вместе с фоном. Пока она шла, белый
фон был полупрозрачным, и сквозь него просвечивала картинка блока
снизу. На стыке это выглядело как разрезанный надвое фон.
Содержимое по-прежнему проявляется: [data-stagger] у детей не тронут.
Гасим по прозрачности только НЕ-секции.
───────────────────────────────────────────────────────────────────── */
section[data-reveal],
footer[data-reveal],
header[data-reveal] {
opacity: 1;
transform: none;
will-change: auto;
}
/* ─────────────────────────────────────────────────────────────────────
РАССТОЯНИЕ МЕЖДУ БЛОКАМИ — РОВНО 90px
Считается НЕ между секциями, а от нижнего края содержимого одного
блока до верхнего края следующего. Секция часто тянется ниже своих
карточек, поэтому «зазор 90» между секциями на экране выглядел то
впритык, то с широкой белой полосой.
Значения посчитаны замером на 1440: у каждого блока измерен «хвост» —
сколько секция продолжается ниже последнего видимого элемента, и
отступ следующего блока выставлен так, чтобы просвет вышел 90px.
блок хвост предыдущего отступ
b3 90 0
b5 82 8
b6 0 90
b7 50 40
b8 90 0
b10 0 90
b11 90 0
b12 90 0
Блоки 4, 9, 13, 14 не трогаем: у них сверху фоновая картинка во всю
ширину, она уходит за границы секции, и замер по ней смысла не имеет.
───────────────────────────────────────────────────────────────────── */
.b3 { margin-top: 90px; }
.b5 { margin-top: 8px; }
.b6 { margin-top: 90px; }
.b7 { margin-top: 40px; }
.b8 { margin-top: 90px; }
.b10 { margin-top: 90px; }
.b11 { margin-top: 90px; }
.b12 { margin-top: 90px; }
.b14 { margin-top: 88px; }
/* ── ПРАВКИ ПО СКРИНШОТАМ ─────────────────────────────────────────── */
/* 1. Зазор перед блоком 7 был белым, должен быть серым.
Переносим 90px из отступа блока 7 внутрь блока 6 — тогда просвет
закрашивается его собственным серым фоном, а расстояние то же. */
/* 2. Обводка блока 10 «Как мы работаем» */
.b10 { border: 0; }
/* 3. Обводка блока 12 «Есть идея» */
.b12 { border: 0; }
/* 4. Блок 13 (FAQ) должен наезжать на картинку сверху */
.b13 { margin-top: -190px; }
/* Разрывы перед блоком 10 и блоком 12 — тоже серые.
Тот же приём: 90px переносим из отступа следующего блока внутрь
предыдущего, и просвет закрашивает его собственный серый фон. */
/* ─────────────────────────────────────────────────────────────────────
БЕЛЫЕ УГОЛКИ НА СТЫКАХ
Скруглённый угол блока вырезает уголок, и сквозь него виден фон
СТРАНИЦЫ — он белый. Блок сверху почти белый, поэтому уголок с ним
сливался и скругление переставало читаться, а по краю оставались
белые кусочки.
Серый предыдущего блока заводим на 70px под скруглённый угол
следующего: угол теперь вырезает серое. Видимый просвет остаётся
ровно 90px — 160px отступа минус 70px захода.
───────────────────────────────────────────────────────────────────── */
.b6, .b9, .b11 { padding-bottom: 160px; }
.b7, .b10, .b12 { margin-top: -70px; position: relative; }
/* контур убираем, остаётся только скруглённый фон */
.b7, .b10, .b12 { border: 0; }
/* разрыв между блоком 4 и блоком 5 убран: блок 5 начинается сразу
после карточек блока 4 (было 82px отступа + 8px = 90px белого) */
.b5 { margin-top: -82px; }
/* Блок 5: у карточки нет рамки — «обводкой» читалась граница между её
серым фоном (#F4F4F5) и почти белым фоном секции (#fdfdfd).
Сравниваем фон, и рамка пропадает. Заодно снимаем белый разрыв
в 100px над карточкой. */
.b5 { background: #f4f4f5; padding-top: 0; }
/* Блок 4 на телефоне, надпись «Отвечаем на заявку…».
У неё была жёсткая ширина 342px внутри карточки, которая шире —
поэтому текст уезжал вбок и садился на стык двух картинок.
Ширину делаем по контейнеру, текст центрируем. Размеры и границы
самой карточки не трогаем. */
.m4b__otvet {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.m4b__otvet p {
width: 100%;
max-width: 282px;
margin: 0 auto;
text-align: center;
}
/* Видео в слайде «Моушн-дизайн». Пока видео не загружено, тега src нет
и элемент скрыт — на экране остаётся картинка-заглушка. Как только
в панели загрузят файл, видео появляется поверх неё. */
.ccard__vid, .m2c__vid { display: none; }
.ccard__vid[src], .m2c__vid[src] {
display: block; position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover; z-index: 1;
}