.page { max-width: 1280px; margin: 0 auto; padding: 0 var(--s-8); overflow-x: clip; } html, body { overflow-x: clip; } @media (max-width: 640px) { .page { padding: 0 var(--s-4); } } .site-header { position: sticky; top: 0; z-index: 50; background: rgba(254, 252, 245, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--c-line); } .site-header__inner { max-width: 1280px; margin: 0 auto; padding: var(--s-4) var(--s-8); display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); } .site-header .header__brand { text-decoration: none; color: inherit; } .site-header .nav { gap: 0; } .header__burger { display: none; } @media (max-width: 1024px) { .site-header .nav { display: none; } .site-header .header__phone { display: none; } .header__burger { display: grid; } } @media (max-width: 640px) { .site-header__inner { padding: var(--s-4); } .site-header__cta { display: none; } } .mobile-menu { position: fixed; inset: 0; background: var(--c-bg); z-index: 100; padding: var(--s-6) var(--s-8); display: none; flex-direction: column; gap: var(--s-4); } .mobile-menu--open { display: flex; } .mobile-menu__top { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--s-5); border-bottom: 1px solid var(--c-line); } .mobile-menu__nav { display: grid; gap: var(--s-2); flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .mobile-menu__nav a { display: flex; align-items: center; justify-content: space-between; padding: var(--s-3) 0; font-family: var(--ff-display); font-size: 20px; font-weight: 500; text-decoration: none; color: var(--c-ink); border-bottom: 1px solid var(--c-line); } .mobile-menu__cta { flex: none; margin-top: var(--s-3); display: grid; gap: var(--s-3); } @media (max-height: 700px) { .mobile-menu { padding: var(--s-4) var(--s-8); gap: var(--s-3); } .mobile-menu__top { padding-bottom: var(--s-3); } .mobile-menu__nav a { padding: var(--s-2) 0; font-size: 18px; } .mobile-menu__phone { font-size: 18px; } } .mobile-menu__phone { font-family: var(--ff-display); font-size: 20px; text-decoration: none; color: var(--c-ink); font-weight: 600; } .hero { padding: var(--s-12) 0 var(--s-16); position: relative; } .hero__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s-12); align-items: end; } .hero__eyebrow { font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-orange); display: inline-flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-5); } .hero__eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--c-orange); } .hero__title { font-family: var(--ff-display); font-size: clamp(48px, 6.4vw, 92px); font-weight: 600; line-height: 0.96; letter-spacing: -0.03em; margin: 0 0 var(--s-6); text-wrap: balance; } .hero__title em { font-style: normal; color: var(--c-orange); } .hero__sub { font-size: 19px; line-height: 1.5; color: var(--c-ink-muted); margin: 0 0 var(--s-8); max-width: 44ch; } .hero__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; } .hero__side { display: grid; gap: var(--s-4); } .hero__card { background: var(--c-bg-elev); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--s-6); } .hero__card-eyebrow { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink-soft); } .hero__card-title { font-family: var(--ff-display); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin: var(--s-2) 0 var(--s-4); } .hero__card-list { display: grid; gap: var(--s-3); list-style: none; padding: 0; margin: 0; } .hero__card-list li { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--s-3); border-bottom: 1px solid var(--c-line); font-size: 14px; } .hero__card-list li:last-child { border-bottom: none; padding-bottom: 0; } .hero__card-list span:last-child { font-family: var(--ff-mono); font-size: 13px; color: var(--c-orange); font-weight: 500; } .hero__sla { background: var(--c-ink); color: var(--c-bg); border: none; } .hero__sla .hero__card-eyebrow { color: var(--c-orange); } .hero__sla-big { font-family: var(--ff-display); font-size: 64px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; margin: var(--s-2) 0 var(--s-2); } .hero__sla-text { font-size: 13px; color: rgba(254, 252, 245, 0.7); margin: 0; line-height: 1.45; } .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); padding: var(--s-8) 0; margin: 0 0 var(--s-12); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); } .stat { display: grid; gap: var(--s-1); } .stat__num { font-family: var(--ff-display); font-size: 56px; font-weight: 600; letter-spacing: -0.03em; line-height: 0.95; color: var(--c-ink); } .stat__num em { font-style: normal; color: var(--c-orange); } .stat__label { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink-soft); } .clients { padding: var(--s-12) 0; } .clients__title { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-ink-soft); text-align: center; margin: 0 0 var(--s-6); } .clients__list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; } .clients__item { background: var(--c-bg); aspect-ratio: 2 / 1; display: grid; place-items: center; font-family: var(--ff-display); font-weight: 500; font-size: 17px; color: var(--c-ink-soft); letter-spacing: -0.005em; transition: color var(--t-base) var(--ease), background var(--t-base) var(--ease); } .clients__item:hover { color: var(--c-ink); background: var(--c-bg-warm); } .section-page { padding: var(--s-16) 0; position: relative; } .section-page--tight { padding: var(--s-12) 0; } .section-page__head { display: grid; grid-template-columns: 1fr auto; gap: var(--s-6); align-items: end; margin-bottom: var(--s-10); } .section-page__eyebrow { font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-orange); display: inline-flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); } .section-page__eyebrow::before { content: ''; width: 20px; height: 1px; background: var(--c-orange); } .section-page__title { font-family: var(--ff-display); font-size: clamp(32px, 4vw, 52px); font-weight: 600; letter-spacing: -0.025em; line-height: 1; margin: 0; text-wrap: balance; max-width: 22ch; } .section-page__sub { font-size: 17px; color: var(--c-ink-muted); margin: var(--s-4) 0 0; max-width: 52ch; line-height: 1.5; } .section-page__actions { display: flex; gap: var(--s-3); align-items: end; } .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } .feature { background: var(--c-bg-elev); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--s-8); display: grid; gap: var(--s-3); position: relative; overflow: hidden; min-height: 280px; } .feature__num { font-family: var(--ff-display); font-size: 48px; font-weight: 600; color: var(--c-orange); line-height: 0.9; letter-spacing: -0.03em; margin-bottom: var(--s-3); } .feature__title { font-family: var(--ff-display); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin: 0; } .feature__text { font-size: 14px; color: var(--c-ink-muted); line-height: 1.55; margin: 0; } .feature--dark { background: var(--c-ink); color: var(--c-bg); border: none; } .feature--dark .feature__text { color: rgba(254, 252, 245, 0.7); } .feature--orange { background: var(--c-orange); color: var(--c-bg); border: none; } .feature--orange .feature__num { color: var(--c-ink); } .feature--orange .feature__text { color: rgba(255, 255, 255, 0.85); } .process { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-1); position: relative; } .process__step { background: var(--c-bg-elev); border: 1px solid var(--c-line); padding: var(--s-6); display: grid; gap: var(--s-3); align-content: start; position: relative; } .process__step:first-child { border-radius: var(--r-lg) 0 0 var(--r-lg); } .process__step:last-child { border-radius: 0 var(--r-lg) var(--r-lg) 0; } .process__step:not(:last-child) { border-right: none; } .process__num { font-family: var(--ff-mono); font-size: 11px; color: var(--c-orange); letter-spacing: 0.08em; } .process__title { font-family: var(--ff-display); font-size: 19px; font-weight: 600; margin: 0; line-height: 1.2; } .process__text { font-size: 14px; color: var(--c-ink-muted); line-height: 1.5; margin: 0; } .process__meta { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-ink-soft); margin-top: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--c-line); } .lead-block { background: var(--c-bg-warm); border-radius: var(--r-xl); padding: var(--s-12); display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s-8); align-items: center; } .lead-block__title { font-family: var(--ff-display); font-size: 32px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 var(--s-3); } .lead-block__text { font-size: 16px; color: var(--c-ink-muted); line-height: 1.55; margin: 0; max-width: 48ch; } .lead-block__stats { display: grid; gap: var(--s-4); } .lead-block__stat { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: center; padding: var(--s-4); background: var(--c-bg-elev); border-radius: var(--r-md); } .lead-block__stat-num { font-family: var(--ff-display); font-size: 36px; font-weight: 600; letter-spacing: -0.03em; color: var(--c-orange); line-height: 1; } .lead-block__stat-label { font-size: 13px; color: var(--c-ink-muted); line-height: 1.4; } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: start; } .contact-info { display: grid; gap: var(--s-6); } .contact-info__big { font-family: var(--ff-display); font-size: 40px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; margin: 0; } .contact-info__row { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: start; padding: var(--s-4) 0; border-bottom: 1px solid var(--c-line); } .contact-info__icon { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--c-bg-warm); display: grid; place-items: center; color: var(--c-ink); } .contact-info__icon svg { width: 18px; height: 18px; } .contact-info__label { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink-soft); margin-bottom: 2px; } .contact-info__val { font-size: 17px; font-weight: 500; color: var(--c-ink); text-decoration: none; } .contact-info__val a { color: inherit; text-decoration: none; } .map { margin-top: var(--s-8); aspect-ratio: 21 / 9; border-radius: var(--r-lg); background: var(--c-bg-warm-deep); position: relative; overflow: hidden; border: 1px solid var(--c-line); } @media (max-width: 640px) { .map { aspect-ratio: 4 / 3; margin-top: var(--s-4); } } .map__pattern { position: absolute; inset: 0; background-image: linear-gradient(to right, var(--c-line) 1px, transparent 1px), linear-gradient(to bottom, var(--c-line) 1px, transparent 1px); background-size: 40px 40px; opacity: 0.6; } .map__pin { position: absolute; left: 38%; top: 52%; width: 36px; height: 36px; background: var(--c-orange); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 4px 16px rgba(249, 115, 22, 0.4); } .map__pin::after { content: ''; position: absolute; inset: 8px; background: var(--c-bg); border-radius: 50%; } .map__placeholder { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--ff-mono); font-size: 11px; color: var(--c-ink-soft); letter-spacing: 0.06em; text-transform: uppercase; pointer-events: none; } .page-hero { padding: var(--s-10) 0 var(--s-12); border-bottom: 1px solid var(--c-line); margin-bottom: var(--s-8); } .page-hero__breadcrumbs { margin-bottom: var(--s-6); } .page-hero__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s-12); align-items: end; } .page-hero__title { font-family: var(--ff-display); font-size: clamp(40px, 5vw, 72px); font-weight: 600; letter-spacing: -0.03em; line-height: 0.96; margin: 0 0 var(--s-5); text-wrap: balance; } .page-hero__title em { font-style: normal; color: var(--c-orange); } .page-hero__sub { font-size: 18px; line-height: 1.5; color: var(--c-ink-muted); margin: 0; max-width: 52ch; } .page-hero__tags { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-5); } .page-hero__actions { margin-top: var(--s-8); display: flex; gap: var(--s-3); flex-wrap: wrap; } .page-hero__side { background: var(--c-bg-warm); border-radius: var(--r-lg); padding: var(--s-6); display: grid; gap: var(--s-4); } .page-hero__side h3 { font-family: var(--ff-display); font-size: 18px; margin: 0; font-weight: 600; } .page-hero__side-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); } .page-hero__side-list li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: 14px; color: var(--c-ink-muted); } .page-hero__side-list li::before { content: ''; width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cpath d='M3 8l3.5 3.5L13 4.5' stroke='%23F97316' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .included { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); } .included__item { background: var(--c-bg-elev); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: var(--s-6); display: grid; grid-template-columns: 40px 1fr; gap: var(--s-4); align-items: start; } .included__icon { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--c-orange-soft); color: var(--c-orange-deep); display: grid; place-items: center; } .included__icon svg { width: 20px; height: 20px; } .included__title { font-family: var(--ff-display); font-size: 17px; font-weight: 600; margin: 0 0 4px; line-height: 1.3; } .included__text { font-size: 14px; color: var(--c-ink-muted); line-height: 1.5; margin: 0; } .blog-hero { padding: var(--s-12) 0; } .blog-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: end; } .blog-filters { display: flex; gap: var(--s-2); flex-wrap: wrap; padding: var(--s-4) 0 var(--s-8); margin-bottom: var(--s-6); border-bottom: 1px solid var(--c-line); } .blog-filter { padding: 8px 16px; border-radius: var(--r-pill); border: 1.5px solid var(--c-line-strong); background: var(--c-bg); font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; color: var(--c-ink-muted); transition: all var(--t-fast) var(--ease); } .blog-filter:hover { color: var(--c-ink); border-color: var(--c-ink); } .blog-filter--active { background: var(--c-ink); color: var(--c-bg); border-color: var(--c-ink); } .blog-featured { background: var(--c-bg-warm); border-radius: var(--r-xl); padding: var(--s-8); display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s-8); margin-bottom: var(--s-10); align-items: center; } .blog-featured__media { aspect-ratio: 4/3; border-radius: var(--r-lg); background: var(--c-bg-warm-deep); position: relative; overflow: hidden; } .blog-featured__media::after { content: 'обложка · 1200×900'; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--ff-mono); font-size: 11px; color: var(--c-ink-soft); letter-spacing: 0.06em; text-transform: uppercase; } .blog-featured__tag { margin-bottom: var(--s-4); } .blog-featured__title { font-family: var(--ff-display); font-size: clamp(28px, 3.6vw, 40px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 var(--s-4); text-wrap: balance; } .blog-featured__excerpt { font-size: 16px; color: var(--c-ink-muted); line-height: 1.55; margin: 0 0 var(--s-6); } .blog-featured__meta { display: flex; gap: var(--s-4); font-family: var(--ff-mono); font-size: 12px; color: var(--c-ink-soft); letter-spacing: 0.04em; text-transform: uppercase; } .cases-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-6); } .cases-grid .case-card { transition: all var(--t-base) var(--ease); } .cases-grid .case-card:hover { transform: translateY(-2px); box-shadow: var(--sh-2); } .case-featured { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s-8); background: var(--c-ink); color: var(--c-bg); border-radius: var(--r-xl); padding: var(--s-10); margin-bottom: var(--s-10); align-items: center; } .case-featured__media { aspect-ratio: 4/3; border-radius: var(--r-lg); background: var(--c-bg-warm-deep); position: relative; overflow: hidden; } .case-featured__media::after { content: 'скриншот · 1200×900'; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--ff-mono); font-size: 11px; color: var(--c-ink-soft); letter-spacing: 0.06em; text-transform: uppercase; } .case-featured__title { font-family: var(--ff-display); font-size: clamp(28px, 3.6vw, 40px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 var(--s-5); } .case-featured__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); margin: var(--s-6) 0; } .case-featured__metric { border-top: 1px solid rgba(254, 252, 245, 0.15); padding-top: var(--s-4); } .case-featured__metric strong { display: block; font-family: var(--ff-display); font-size: 36px; font-weight: 600; letter-spacing: -0.03em; color: var(--c-orange); line-height: 1; margin-bottom: 4px; } .case-featured__metric span { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(254, 252, 245, 0.6); } .achievements { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); } .achievement { background: var(--c-bg-elev); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--s-6); display: grid; gap: var(--s-3); align-content: start; position: relative; min-height: 220px; } .achievement--dark { background: var(--c-ink); color: var(--c-bg); border: none; } .achievement--orange { background: var(--c-orange); color: white; border: none; } .achievement__label { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-orange); } .achievement--dark .achievement__label { color: var(--c-orange); } .achievement--orange .achievement__label { color: var(--c-ink); } .achievement__big { font-family: var(--ff-display); font-size: 56px; font-weight: 600; letter-spacing: -0.03em; line-height: 0.95; margin: var(--s-2) 0 var(--s-1); } .achievement__title { font-family: var(--ff-display); font-size: 17px; font-weight: 600; margin: 0; line-height: 1.3; } .achievement__text { font-size: 13px; color: var(--c-ink-muted); line-height: 1.5; margin: 0; } .achievement--dark .achievement__text { color: rgba(254, 252, 245, 0.7); } .achievement--orange .achievement__text { color: rgba(255, 255, 255, 0.85); } .achievement__badge { display: inline-flex; align-items: center; gap: var(--s-2); padding: 4px 10px; border-radius: var(--r-pill); background: var(--c-bg-warm); font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-ink-muted); align-self: flex-start; } .achievement--dark .achievement__badge { background: rgba(254, 252, 245, 0.1); color: var(--c-bg); } .achievement--orange .achievement__badge { background: rgba(255, 255, 255, 0.2); color: white; } .process-vert { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); } .process-vert--3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 1024px) { .process-vert--3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .process-vert, .process-vert--3 { grid-template-columns: 1fr; } } .process-vert__step { background: var(--c-bg-elev); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: var(--s-5) var(--s-6); display: grid; grid-template-columns: 48px 1fr; gap: var(--s-4); align-items: start; } .process-vert__num { font-family: var(--ff-display); font-size: 32px; font-weight: 600; color: var(--c-orange); letter-spacing: -0.02em; line-height: 0.9; } .process-vert__body { display: grid; gap: 4px; } .process-vert__title { font-family: var(--ff-display); font-size: 17px; font-weight: 600; margin: 0; line-height: 1.3; } .process-vert__text { font-size: 13px; color: var(--c-ink-muted); line-height: 1.5; margin: 0; } .process-vert__meta { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink-soft); margin-top: 2px; } .integration { background: var(--c-bg-warm); border-radius: var(--r-xl); padding: var(--s-12); display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--s-10); align-items: start; } .integration__title { font-family: var(--ff-display); font-size: 32px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 var(--s-4); } .integration__text { font-size: 15px; color: var(--c-ink-muted); line-height: 1.6; margin: 0 0 var(--s-5); } .integration__features { display: grid; gap: var(--s-4); } .integration__feature { background: var(--c-bg-elev); border-radius: var(--r-md); padding: var(--s-5); display: grid; grid-template-columns: 40px 1fr; gap: var(--s-4); } .integration__feature-icon { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--c-orange-soft); color: var(--c-orange-deep); display: grid; place-items: center; } .integration__feature-icon svg { width: 20px; height: 20px; } .integration__feature h4 { font-family: var(--ff-display); font-size: 16px; font-weight: 600; margin: 0 0 2px; } .integration__feature p { font-size: 13px; color: var(--c-ink-muted); line-height: 1.5; margin: 0; } [data-slide] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: stretch; } .review-result { background: var(--c-ink); color: var(--c-bg); border-radius: var(--r-xl); padding: var(--s-8); display: grid; gap: var(--s-5); align-content: space-between; height: 100%; min-height: 280px; position: relative; overflow: hidden; } .review-result__label { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-orange); } .review-result__metric { font-family: var(--ff-display); font-size: 84px; font-weight: 700; letter-spacing: -0.03em; line-height: 0.95; margin: 0; color: var(--c-bg); } .review-result__metric em { font-style: normal; color: var(--c-orange); } .review-result__text { font-size: 14px; line-height: 1.5; color: rgba(254, 252, 245, 0.7); margin: 0; } .review-result__project { display: flex; justify-content: space-between; font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(254, 252, 245, 0.5); padding-top: var(--s-4); border-top: 1px solid rgba(254, 252, 245, 0.15); } @media (max-width: 1024px) { .review-result { min-height: auto; padding: var(--s-6); } .review-result__metric { font-size: 56px; } } @media (max-width: 640px) { [data-slide] { grid-template-columns: 1fr !important; } } .page-cta { margin: var(--s-16) 0 var(--s-20); } [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } [data-reveal].is-revealed { opacity: 1; transform: translateY(0); } .modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(26, 24, 20, 0.5); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; padding: var(--s-6); } .modal-overlay--open { display: flex; } .modal-overlay .modal { max-width: 480px; width: 100%; } @media (max-width: 1024px) { .hero__grid { grid-template-columns: 1fr; gap: var(--s-8); } .stats { grid-template-columns: 1fr 1fr; } .clients__list { grid-template-columns: repeat(3, 1fr); } .features { grid-template-columns: 1fr 1fr; } .process { grid-template-columns: 1fr 1fr; } .process__step:nth-child(1) { border-radius: var(--r-lg) 0 0 0; } .process__step:nth-child(2) { border-radius: 0 var(--r-lg) 0 0; border-right: 1px solid var(--c-line) !important; } .process__step:nth-child(3) { border-radius: 0 0 0 var(--r-lg); } .process__step:nth-child(4) { border-radius: 0 0 var(--r-lg) 0; border-right: 1px solid var(--c-line) !important; } .process__step:not(:last-child) { border-right: none; } .lead-block { grid-template-columns: 1fr; } .contact-grid { grid-template-columns: 1fr; } .page-hero__grid { grid-template-columns: 1fr; gap: var(--s-8); } .blog-featured { grid-template-columns: 1fr; } .blog-hero__grid { grid-template-columns: 1fr; } .case-featured { grid-template-columns: 1fr; } .case-featured__metrics { grid-template-columns: repeat(3, 1fr); } .included { grid-template-columns: 1fr; } .achievements { grid-template-columns: repeat(2, 1fr); } .integration { grid-template-columns: 1fr; gap: var(--s-6); padding: var(--s-8); } } @media (max-width: 640px) { .hero { padding: var(--s-8) 0 var(--s-10); } .section-page { padding: var(--s-10) 0; } .section-page__head { grid-template-columns: 1fr; } .section-page__actions { justify-content: flex-start; } .stats { grid-template-columns: 1fr 1fr; } .stat__num { font-size: 40px; } .clients__list { grid-template-columns: repeat(2, 1fr); } .features { grid-template-columns: 1fr; } .process { grid-template-columns: 1fr; } .process__step { border-radius: 0 !important; border-right: 1px solid var(--c-line) !important; } .process__step:first-child { border-radius: var(--r-lg) var(--r-lg) 0 0 !important; } .process__step:last-child { border-radius: 0 0 var(--r-lg) var(--r-lg) !important; } .lead-block { padding: var(--s-6); } .case-featured { padding: var(--s-6); } .case-featured__metrics { grid-template-columns: 1fr; gap: var(--s-3); } .cases-grid { grid-template-columns: 1fr; } .page-hero__title { font-size: 36px; } .blog-featured { padding: var(--s-5); } .achievements { grid-template-columns: 1fr; } .achievement { min-height: auto; padding: var(--s-5); } .achievement__big { font-size: 44px; } .integration { padding: var(--s-6); } .integration__title { font-size: 24px; } .integration__feature { grid-template-columns: 32px 1fr; padding: var(--s-4); } .integration__feature-icon { width: 32px; height: 32px; } .process-vert, .process-vert--3 { grid-template-columns: 1fr; } .process-vert__step { padding: var(--s-4) var(--s-5); } .process-vert__num { font-size: 24px; } [data-slide] { grid-template-columns: 1fr !important; } .review-result__metric { font-size: 48px; } } .site-header--static { position: static; } .site-header--hide-on-scroll, .site-header--appear-on-scroll-up { transition: transform 0.25s ease; } .site-header--hidden { transform: translateY(-100%); } .site-header--bottom-bar { top: auto; bottom: 0; position: fixed; left: 0; right: 0; border-top: 1px solid var(--c-line); border-bottom: none; } .site-header--bottom-bar.site-header--hidden { transform: translateY(100%); } .nav__group { position: relative; display: inline-flex; } .nav__group > .dropdown { display: none; position: absolute; left: 0; top: 100%; z-index: 60; min-width: 260px; } .nav__group:hover > .dropdown, .nav__group:focus-within > .dropdown { display: block; } .mobile-menu__subitem { padding-left: var(--s-8); opacity: 0.85; } .map-embed { position: relative; margin: var(--s-6) 0; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--c-line); } .map-embed iframe { display: block; width: 100%; height: 400px; border: 0; } .map-embed__veil { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } .map-embed__veil span { padding: 8px 16px; background: rgba(26, 24, 20, 0.72); color: #fff; border-radius: var(--r-pill); font-size: 13px; font-weight: 500; opacity: 0; transition: opacity var(--t-fast) var(--ease); } .map-embed__veil:hover span, .map-embed__veil:focus-visible span { opacity: 1; } @media (hover: none) { .map-embed__veil span { opacity: 0.92; } } .map-embed--active .map-embed__veil { display: none; } .cookie-banner { position: fixed; left: var(--s-4); right: var(--s-4); bottom: var(--s-4); z-index: 80; max-width: 720px; margin: 0 auto; display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); } .cookie-banner[hidden] { display: none; } .cookie-banner__text { margin: 0; font-size: 13px; color: var(--c-ink-muted); line-height: 1.5; } .cookie-banner__btn { flex: none; white-space: nowrap; } @media (max-width: 560px) { .cookie-banner { flex-direction: column; align-items: stretch; text-align: center; } } .requisites { width: 100%; border-collapse: collapse; margin: var(--s-4) 0; } .requisites th, .requisites td { text-align: left; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-line); vertical-align: top; } .requisites th { width: 40%; color: var(--c-ink-muted); font-weight: 600; }