/**
 * Pixel layout + adaptive breakpoints.
 * Design tokens: 8px grid, 44px tap, WCAG focus, 375 / 768 / 1024 / 1280.
 */

:root {
    --fw-container: 1360px;
    --fw-gutter: 24px;
    --fw-space-1: 8px;
    --fw-space-2: 16px;
    --fw-space-3: 24px;
    --fw-space-4: 32px;
    --fw-space-5: 48px;
    --fw-space-6: 64px;
    --fw-tap: 44px;
    --fw-header-offset: 88px;
    --fw-ease: 180ms ease;
    --fw-focus: #0ddbb3;
}

html {
    font-size: 16px;
    overflow-x: clip;
}

body {
    overflow-x: clip;
    min-width: 0;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
}

a,
button,
[type="button"],
[type="submit"] {
    touch-action: manipulation;
}

section {
    min-width: 0 !important;
    width: calc(100% - 48px);
    max-width: var(--fw-container);
    box-sizing: border-box;
}

.header-wrapper {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    min-width: 0 !important;
    width: min(var(--fw-container), calc(100% - (var(--fw-gutter) * 2)));
    max-width: var(--fw-container);
    box-sizing: border-box;
}

@media screen and (min-width: 769px) {
    .header-wrapper {
        min-height: 64px;
        padding: 8px 8px 8px 28px;
        gap: 16px;
        align-items: center;
    }

    .header-logo {
        flex-shrink: 0;
        width: auto;
    }

    .header-wrapper > .menu {
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        justify-content: center;
    }

    .header-wrapper .menu-list--primary {
        gap: clamp(16px, 2vw, 32px);
        justify-content: center;
    }

    .header-wrapper .menu-item {
        font-size: 15px;
        font-weight: 400;
        padding: 8px 0;
    }

    .header-telegram {
        width: 48px;
        height: 48px;
        margin: 0;
        flex-shrink: 0;
    }

    .header-button {
        max-height: none !important;
        min-height: 48px !important;
        height: 48px;
        padding: 0 20px 0 22px !important;
        flex-shrink: 0;
    }

    .header-button .text {
        font-size: 15px !important;
        font-weight: 500;
        line-height: 1.2 !important;
    }
}

@media screen and (max-width: 1100px) and (min-width: 769px) {
    .header-telegram {
        display: none;
    }

    .header-wrapper .menu-item {
        font-size: 14px;
    }

    .header-wrapper .menu-list--primary {
        gap: 14px;
    }

    .header-button .text {
        font-size: 14px !important;
    }
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--fw-focus);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Unlock 1360px min-width so tablets don't scroll sideways */
@media screen and (max-width: 1439px) {
    section,
    footer .footer_wrap,
    .blog,
    .faq,
    .cta-section,
    .service-page .service-hero {
        min-width: 0 !important;
        width: calc(100% - (var(--fw-gutter) * 2));
        max-width: var(--fw-container);
        margin-left: auto;
        margin-right: auto;
    }

    .header-wrapper {
        min-width: 0 !important;
        width: calc(100% - (var(--fw-gutter) * 2)) !important;
        max-width: var(--fw-container);
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }

    .hero,
    .hero-img,
    .advantages,
    .about-section,
    .work,
    .cases,
    .footer_wrap {
        min-width: 0 !important;
        max-width: 100%;
    }
}

@media screen and (max-width: 1024px) {
    :root {
        --fw-gutter: 20px;
    }

    .advantages-content {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

    .about-grid,
    .about-grid-bottom,
    .about-grid-top,
    .service-scope-grid,
    .work-steps-grid,
    .footer-menu-grid,
    #process.service-section .work-steps-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .hero {
        flex-wrap: wrap;
    }
}

@media screen and (max-width: 768px) {
    :root {
        --fw-gutter: 16px;
        --fw-header-offset: 72px;
    }

    h1,
    .hero-title,
    .hero-content h1.hero-title {
        font-size: var(--text-h1) !important;
        line-height: var(--lh-tight) !important;
        font-weight: 700;
        letter-spacing: -0.02em;
    }

    h2 {
        font-size: var(--text-h2) !important;
        line-height: var(--lh-snug) !important;
    }

    h3,
    #cases .blog_item.case-card h3,
    #cases .blog_item.case-card h3 a,
    .blog_item h3,
    .work-simple .work-step h3,
    .work-simple .work-step-cta h3 {
        font-size: var(--text-h3) !important;
        line-height: var(--lh-snug) !important;
    }

    h4 {
        font-size: var(--text-h4) !important;
        line-height: 1.35 !important;
    }

    body,
    p,
    a,
    button,
    .text,
    .subtitle,
    .w70t,
    .hero-content p.w70t,
    .hero-lead,
    .about-section-lead,
    .faq-subtitle,
    .hero-actions-alt,
    .hero-actions-note,
    .hero-geo,
    .cookie-banner-text,
    .case-article p,
    .blog-article p,
    input,
    textarea,
    select {
        font-size: var(--text-md) !important;
        line-height: var(--lh-body) !important;
    }

    .s-text,
    .s-text.m,
    .s-text.w70t.m,
    .hero-title-kicker,
    .about-section-kicker,
    .faq-section-kicker,
    .advantages-section-kicker {
        font-size: var(--text-sm) !important;
        line-height: 1.45 !important;
    }

    .header-wrapper {
        height: auto !important;
        min-height: var(--fw-tap);
        top: max(8px, env(safe-area-inset-top, 0px)) !important;
        padding: 8px 12px !important;
        border-radius: 20px !important;
        width: calc(100% - (var(--fw-gutter) * 2)) !important;
        transform: translateX(-50%);
        left: 50%;
        box-sizing: border-box;
    }

    .header-button,
    .header-button .text {
        min-height: var(--fw-tap);
        height: auto !important;
        max-height: none !important;
        font-size: 14px !important;
        padding: 10px 14px !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .burger,
    .burger.active,
    .burger-close,
    .burger-close.active {
        width: var(--fw-tap) !important;
        height: var(--fw-tap) !important;
        min-width: var(--fw-tap);
        min-height: var(--fw-tap);
        padding: 0;
        align-items: center;
        justify-content: center;
    }

    .burger svg,
    .burger-close svg {
        width: 28px;
        height: 16px;
    }

    section,
    section.hero,
    .hero {
        min-width: 0 !important;
        width: calc(100% - 32px) !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        height: auto !important;
    }

    section.hero,
    .hero {
        margin-top: calc(var(--fw-header-offset) + env(safe-area-inset-top, 0px));
        padding-left: 0;
        padding-right: 0;
        gap: 16px !important;
        border-radius: 20px;
    }

    .hero-content,
    .hero-img {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: 100% !important;
        padding-left: 16px;
        padding-right: 16px;
    }

    .hero-cta .hero-button,
    .hero-button,
    .hero-button.m,
    .service-step-cta-btn,
    .cta-section__primary,
    .blog-button,
    .cases-head-button {
        min-height: 48px !important;
        height: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 12px 20px !important;
        font-size: 16px !important;
        border-radius: 16px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    .hero-button .text,
    .hero-button .herobtn {
        font-size: 16px !important;
        line-height: 1.2 !important;
    }

    .advantages-content,
    .about-grid,
    .about-grid-bottom,
    .about-grid-top,
    .service-scope-grid,
    .work-steps-grid,
    .service-hero__stats,
    .footer-menu-grid,
    #process.service-section .work-steps-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .advantages-item {
        min-height: 0;
        height: auto;
    }

    .advantages-item,
    .about-card,
    .work-step,
    .faq-item {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .cookie-banner {
        left: 12px !important;
        right: 12px !important;
        bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
        padding: 12px 14px !important;
        gap: 10px !important;
        border-radius: 16px !important;
        flex-direction: column;
    }

    .cookie-banner-text {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }

    .cookie-banner-actions {
        display: flex;
        flex-direction: row;
        gap: 8px;
        width: 100%;
    }

    .cookie-btn-accept,
    .cookie-btn-decline,
    .cookie-btn {
        min-height: var(--fw-tap);
        flex: 1;
        width: auto !important;
        font-size: 15px !important;
    }

    .faq-question {
        min-height: var(--fw-tap);
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .footer_wrap {
        padding-left: 16px;
        padding-right: 16px;
        padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
        min-width: 0 !important;
        width: 100% !important;
    }

    .service-hero {
        margin-top: calc(var(--fw-header-offset) + 16px) !important;
        padding: 24px 16px !important;
        border-radius: 20px;
    }

    .service-hero__stats {
        gap: 8px !important;
    }

    .service-hero__stat {
        padding: 12px !important;
    }

    .service-hero__stat-value {
        font-size: 16px !important;
    }

    .overlay.active {
        padding-top: env(safe-area-inset-top, 0px);
    }
}

@media screen and (max-width: 640px) {
    .header-wrapper .header-button {
        display: none !important;
    }
}

@media screen and (max-width: 480px) {
    :root {
        --text-h1: 26px;
        --text-h2: 22px;
    }
}

/* Quiz: readable type + 44px close on phones */
@media screen and (max-width: 768px) {
    .fluxweb-quiz-popup {
        --quiz-close-size: 44px;
        --quiz-close-gap: 8px;
        padding: max(8px, env(safe-area-inset-top, 0px)) 12px max(8px, env(safe-area-inset-bottom, 0px));
    }

    .fluxweb-quiz-popup__panel,
    .fluxweb-quiz-popup__dialog {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100dvh - 72px);
    }

    .fluxweb-quiz-popup__close {
        width: 44px !important;
        height: 44px !important;
        font-size: 28px !important;
    }

    .fluxweb-quiz-popup .fluxweb-quiz-heading {
        font-size: var(--text-h2) !important;
        line-height: var(--lh-snug) !important;
    }

    .fluxweb-quiz-popup p,
    .fluxweb-quiz-popup .faq-subtitle,
    .fluxweb-quiz-popup .fluxweb-quiz-subtitle,
    .fluxweb-quiz-popup .fluxweb-quiz-hint,
    .fluxweb-quiz-popup label,
    .fluxweb-quiz-popup .text {
        font-size: var(--text-md) !important;
        line-height: 1.45 !important;
    }

    .fluxweb-quiz-popup .submit,
    .fluxweb-quiz-popup button {
        min-height: 48px;
    }
}

/* Type + spacing: content articles, section rhythm */
.blog-article p,
.case-article p,
.entry-content p {
    font-size: var(--text-lg);
    line-height: var(--lh-body);
    margin: 0 0 var(--space-2);
}

.blog-article h2,
.case-article h2,
.entry-content h2 {
    font-size: var(--text-h2);
    line-height: var(--lh-snug);
    margin-top: var(--space-5);
    margin-bottom: var(--space-2);
}

.blog-article h3,
.case-article h3,
.entry-content h3 {
    font-size: var(--text-h3);
    line-height: var(--lh-snug);
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
}

.blog-article h4,
.case-article h4,
.entry-content h4 {
    font-size: var(--text-h4);
    margin-top: var(--space-3);
    margin-bottom: var(--space-1);
}

.hero-content,
.about-section-head,
.advantages-section-head,
.cases-head,
.faq-head {
    gap: var(--space-2);
}

/* Full footer */
footer.site-footer {
    width: 100%;
    max-width: none !important;
    min-width: 0 !important;
    margin: var(--space-7) 0 0;
    padding: var(--space-6) var(--fw-gutter) max(var(--space-4), env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    background: var(--color-background);
    position: relative;
}

.site-footer__inner {
    width: 100%;
    max-width: var(--fw-container);
    margin: 0 auto;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: minmax(240px, 1.15fr) repeat(3, minmax(0, 1fr));
    column-gap: var(--space-5);
    row-gap: var(--space-5);
    align-items: start;
}

.site-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    min-width: 0;
}

.site-footer__logo {
    width: auto;
    max-width: 190px;
}

.site-footer__lead {
    margin: 0;
    max-width: 320px;
    font-size: var(--text-sm);
    line-height: var(--lh-body);
    color: var(--color-text-gray70);
    font-weight: 400;
}

.site-footer__contacts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.site-footer__contact {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    font-size: var(--text-md);
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-text);
}

.site-footer__contact:hover {
    color: var(--color-accent);
}

.site-footer .footer-messengers {
    gap: 8px;
    margin: 4px 0 0;
}

.site-footer .footer-messenger-link {
    width: var(--fw-tap);
    height: var(--fw-tap);
    min-width: var(--fw-tap);
    min-height: var(--fw-tap);
    color: var(--color-text-gray70);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
}

.site-footer .footer-messenger-link:hover {
    color: var(--color-accent);
    border-color: rgba(13, 219, 179, 0.45);
}

.site-footer__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--fw-tap);
    padding: 10px 20px;
    margin-top: 8px;
    border-radius: 16px;
    background: var(--color-button);
    color: var(--color-text);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
}

.site-footer__cta:hover {
    color: var(--color-background);
    background: var(--color-accent);
}

.site-footer__col {
    min-width: 0;
}

.site-footer__title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text);
}

.site-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.site-footer__link {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    font-size: var(--text-sm);
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-text-gray70);
}

.site-footer__link:hover,
.site-footer__link.is-active {
    color: var(--color-text);
}

.site-footer__link.is-active::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--color-accent);
    flex-shrink: 0;
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 24px;
    margin-top: var(--space-5);
    padding-top: var(--space-3);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer__copy,
.site-footer__meta {
    margin: 0;
    font-size: var(--text-xs);
    line-height: 1.45;
    color: var(--color-text-gray70);
    font-weight: 400;
}

@media screen and (max-width: 1024px) {
    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
    }

    .site-footer__brand {
        grid-column: 1 / -1;
        max-width: 520px;
    }
}

@media screen and (max-width: 640px) {
    footer.site-footer {
        padding-top: var(--space-5);
        padding-left: var(--fw-gutter);
        padding-right: var(--fw-gutter);
    }

    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
        row-gap: var(--space-4);
        column-gap: var(--space-3);
    }

    .site-footer__cta {
        width: 100%;
    }

    .site-footer__bottom {
        flex-direction: column;
        gap: 4px;
    }
}

@media screen and (max-width: 480px) {
    .site-footer__grid {
        grid-template-columns: 1fr;
    }
}

/* Homepage UI/UX: 1360 container, 8px rhythm, readable measure, Fitts CTA */
@media screen and (min-width: 769px) {
    :root {
        --fw-measure: 42rem;
    }

    section {
        margin-bottom: var(--space-7);
    }

    .hero-title-kicker,
    .advantages-section-kicker,
    .about-section-kicker,
    .faq-section-kicker,
    .cases-section-kicker {
        color: var(--color-accent);
    }

    .advantages-section-head,
    .about-section-head,
    .cases-head-text,
    .work-head-simple,
    .service-bridge__head-text {
        max-width: var(--fw-measure);
        gap: var(--space-2);
    }

    .advantages-section-lead,
    .cases-section-lead,
    .about-section-lead,
    .faq-subtitle,
    .advantages-bridge,
    .about-bridge,
    .cases-bridge,
    .service-bridge__footer {
        max-width: 40rem;
        line-height: var(--lh-body);
    }

    .advantages-content,
    .work-steps-grid,
    .about-grid,
    .about-grid-bottom,
    #blog .blog_content,
    .service-bridge__cards .work-steps-grid {
        gap: var(--space-3) !important;
    }

    #cases .blog_content {
        gap: var(--space-3);
    }

    .advantages-item,
    .about-card,
    .work-step,
    .work-step-cta {
        padding: 28px;
        min-height: 0;
        transition: border-color 200ms ease, background 200ms ease;
    }

    .advantages-item {
        min-height: 228px;
    }

    .hero-button,
    .hero-cta .hero-button:not(.hero-button-telegram),
    .cases-head-button,
    .cta-section__primary,
    .blog-button {
        min-height: 48px;
        height: auto;
        box-sizing: border-box;
    }

    .faq-question {
        min-height: 48px;
        gap: 16px;
        text-align: left;
    }

    .faq-question h3 {
        font-weight: 500;
        line-height: 1.35;
    }

    .faq-item {
        padding: 8px 24px 20px;
        gap: 8px;
    }

    .work-inner,
    .form-section-inner,
    .service-bridge.work-simple .work-inner {
        padding: 56px 48px 64px;
    }
}

@media screen and (min-width: 1100px) {
    .hero {
        min-height: 520px;
        gap: 40px;
        align-items: center;
        justify-content: flex-start;
        padding-right: 80px;
        box-sizing: border-box;
    }

    .hero-content {
        flex: 1 1 auto;
        width: auto;
        max-width: 680px;
        padding: 56px 0 56px 56px;
        gap: 20px;
    }

    .hero-head {
        gap: 8px;
    }

    .hero-img {
        flex: 0 0 436px;
        width: 436px;
        max-width: 436px;
        height: 428px;
        min-height: 428px;
        max-height: 428px;
        margin: 0;
        scale: 0.95;
        align-self: center;
    }

    .hero-button {
        width: auto;
        min-width: 280px;
        max-width: 100%;
        height: 48px;
        padding: 12px 32px;
    }

    .faq-content {
        display: grid;
        grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
        gap: 48px 64px;
        align-items: start;
        width: 100%;
        justify-content: stretch;
    }

    .faq-head {
        max-width: none;
        position: sticky;
        top: calc(var(--fw-header-offset) + 16px);
    }

    .faq-list {
        max-width: none;
        width: 100%;
    }

    .cta-section__grid {
        grid-template-columns: minmax(0, 1.2fr) minmax(320px, 480px);
        gap: 48px;
    }

    .cta-section__shell {
        padding: 64px 56px;
    }

    .about-grid-top {
        grid-template-columns: 1.4fr 1fr;
        gap: var(--space-3);
    }
}

@media screen and (min-width: 1360px) {
    :root {
        --text-h1: 44px;
    }

    .hero-content h1.hero-title {
        font-size: var(--text-h1);
    }
}