/* AS-PRO landing Neat Digital — prod (source: preview-neat-digital/index.html) */
/* ── Neat Digital design tokens (AS-PRO preview) ── */
        :root {
            --color--bg-primary: rgb(0, 0, 0);
            --color--bg-secondary: rgb(255, 255, 255);
            --color--text-primary: rgb(255, 255, 255);
            --color--text-secondary: rgb(208, 208, 208);
            --color--accent: rgb(237, 91, 43);
            --color--accent-hex: #ed5b2b;
            --color--text-dark: rgb(33, 33, 33);
            --color--gray-1: rgb(71, 68, 68);
            --color--gray-2: rgb(42, 42, 42);
            --color--gray-3: rgb(85, 85, 85);
            --color--border: rgba(255, 255, 255, 0.1);
            --font-main: "NeueHaasGroteskDisplayPro55Roman", "Helvetica Neue", "Neue Haas Grotesk Display", system-ui, sans-serif;
            --ease-neat: cubic-bezier(0.19, 1, 0.22, 1);
            --max-w: min(1440px, calc(100vw - 48px));
            --header-h: 72px;
        }

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

        html {
            font-size: 16px;
            scroll-behavior: smooth;
            -webkit-font-smoothing: antialiased;
        }

        body {
            margin: 0;
            font-family: var(--font-main);
            background: var(--color--bg-primary);
            color: var(--color--text-primary);
            line-height: 1.4;
            overflow-x: hidden;
        }

        a { color: inherit; text-decoration: none; }
        img { max-width: 100%; display: block; }
        button { font-family: inherit; cursor: pointer; border: none; background: none; }

        /* Preview ribbon */
        .preview-ribbon {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 10000;
            padding: 0.35rem 1rem;
            font-size: 0.65rem;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            text-align: center;
            color: var(--color--text-dark);
            background: var(--color--accent);
            pointer-events: none;
        }

        /* ── mask-wrap ── */
        .mask-wrap {
            position: relative;
            display: inline-flex;
            overflow: hidden;
            vertical-align: top;
        }
        .mask-wrap > * {
            transition: transform 1s var(--ease-neat);
            white-space: nowrap;
        }
        .mask-wrap > :nth-child(2) {
            position: absolute;
            top: 0;
            left: 0;
            transform: translateY(100%);
        }
        [data-mask-btn]:hover .mask-wrap > :nth-child(1) { transform: translateY(-100%); }
        [data-mask-btn]:hover .mask-wrap > :nth-child(2) { transform: translateY(0%); }
        [data-mask-btn]:hover .mask-wrap.is-horizontal > :nth-child(1) { transform: translateX(100%); }
        [data-mask-btn]:hover .mask-wrap.is-horizontal > :nth-child(2) { transform: translateX(0%); }

        /* ── Buttons ── */
        .button {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.85rem 1.75rem;
            font-size: 0.75rem;
            font-weight: 500;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            border: 1px solid var(--color--text-primary);
            color: var(--color--text-primary);
            overflow: hidden;
            z-index: 0;
            transition: color 1s var(--ease-neat), border-color 0.4s;
        }
        .button.is-fill::after {
            content: "";
            position: absolute;
            inset: 0;
            background-color: var(--color--bg-primary);
            transform: scaleY(0);
            transform-origin: center top;
            transition: transform 1s var(--ease-neat);
            z-index: -1;
        }
        .button.is-fill:hover { color: var(--color--text-primary); }
        .button.is-fill:hover::after {
            transform: scaleY(1);
            transform-origin: center bottom;
        }
        .button.is-secondary {
            background: var(--color--bg-secondary);
            color: var(--color--text-dark);
            border-color: var(--color--bg-secondary);
        }
        .button.is-secondary.is-fill::after {
            background-color: var(--color--accent);
        }
        .button.is-secondary.is-fill:hover {
            color: var(--color--text-primary);
            border-color: var(--color--accent);
        }
        .button.is-accent {
            background: var(--color--accent);
            border-color: var(--color--accent);
            color: var(--color--text-primary);
        }
        .button.is-accent.is-fill::after {
            background-color: var(--color--bg-primary);
        }
        .button.is-accent.is-fill:hover {
            color: var(--color--text-primary);
        }

        /* ── Dividers ── */
        .horizontal-divider {
            width: 100%;
            height: 1px;
            background: var(--color--border);
            border: none;
        }
        .vertical-divider {
            width: 1px;
            align-self: stretch;
            background: var(--color--border);
            flex-shrink: 0;
        }

        /* ── Header ── */
        .header {
            position: fixed;
            top: 28px;
            left: 0;
            right: 0;
            z-index: 900;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 clamp(16px, 3vw, 40px);
            height: var(--header-h);
            pointer-events: none;
        }
        .header > * { pointer-events: auto; }

        .header__logo {
            font-size: 0.8rem;
            font-weight: 600;
            letter-spacing: 0.18em;
            text-transform: uppercase;
        }
        .header__logo span { color: var(--color--accent); }

        .header__actions {
            display: flex;
            align-items: center;
            gap: clamp(12px, 2vw, 24px);
        }

        .menu-trigger {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            font-size: 0.75rem;
            font-weight: 500;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--color--text-primary);
            padding: 0.5rem 0;
        }
        .menu-trigger__burger {
            display: flex;
            flex-direction: column;
            gap: 5px;
            width: 22px;
        }
        .menu-trigger__burger span {
            display: block;
            height: 1px;
            background: var(--color--text-primary);
            transition: transform 0.5s var(--ease-neat), opacity 0.3s;
        }
        .menu-trigger.is-open .menu-trigger__burger span:nth-child(1) {
            transform: translateY(6px) rotate(45deg);
        }
        .menu-trigger.is-open .menu-trigger__burger span:nth-child(2) { opacity: 0; }
        .menu-trigger.is-open .menu-trigger__burger span:nth-child(3) {
            transform: translateY(-6px) rotate(-45deg);
        }

        .menu_dropdown {
            position: fixed;
            inset: 0;
            z-index: 850;
            display: flex;
            flex-direction: column;
            background: rgba(0, 0, 0, 0.92);
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.6s var(--ease-neat), visibility 0.6s;
            overflow: hidden;
            padding-top: calc(28px + var(--header-h));
        }
        .menu_dropdown.is-open {
            opacity: 1;
            visibility: visible;
        }
        .menu_dropdown__scroll {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            scrollbar-width: thin;
            scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
            display: flex;
            flex-direction: column;
        }
        .menu_dropdown__scroll::-webkit-scrollbar { width: 6px; }
        .menu_dropdown__scroll::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 3px;
        }
        .menu_dropdown__nav {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: clamp(24px, 4vw, 48px);
            margin-block: auto;
            flex-shrink: 0;
            padding: clamp(16px, 4vh, 32px) 24px clamp(48px, 8vh, 80px);
        }
        .menu_dropdown__scroll-btn {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            width: 36px;
            height: 36px;
            border: 1px solid var(--color--border);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--color--text-secondary);
            background: rgba(0, 0, 0, 0.65);
            backdrop-filter: blur(6px);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.3s var(--ease-neat), visibility 0.3s;
        }
        .menu_dropdown__scroll-btn.is-visible {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }
        .menu_dropdown__scroll-btn--down {
            bottom: clamp(24px, 5vh, 48px);
        }
        .menu_dropdown__scroll-btn--down.is-visible {
            animation: scrollBounce 2s ease-in-out infinite;
        }
        .menu_dropdown__scroll-btn--up {
            top: calc(28px + var(--header-h) + 8px);
        }
        .menu_dropdown__scroll-icon svg {
            width: 10px;
            height: 10px;
            fill: currentColor;
        }
        .menu_dropdown__nav a {
            font-size: clamp(2rem, 6vw, 4rem);
            font-weight: 400;
            letter-spacing: -0.02em;
            color: var(--color--text-secondary);
            transition: color 0.4s var(--ease-neat);
        }
        .menu_dropdown__nav a:hover { color: var(--color--accent); }
        .menu_dropdown__sep {
            font-size: clamp(1.5rem, 4vw, 2.5rem);
            color: var(--color--gray-3);
            user-select: none;
        }

        /* ── Global landing stripes (preview-wope → весь лендинг) ── */
        body {
            --landing-stripe: rgba(255, 255, 255, 0.28);
            --landing-stripe-accent: rgba(237, 91, 47, 0.45);
            --landing-ray: rgba(237, 91, 47, 0.35);
            --landing-sweep-soft: rgba(237, 91, 47, 0.15);
            --landing-sweep-mid: rgb(237, 91, 43);
            --landing-sweep-hi: rgba(255, 255, 255, 0.35);
            --landing-path-muted: rgba(255, 255, 255, 0.07);
            --landing-path-accent: rgba(237, 91, 47, 0.22);
            --landing-glow-a: rgba(237, 91, 47, 0.28);
            --landing-glow-b: rgba(237, 91, 47, 0.1);
            --landing-glow-c: rgba(255, 255, 255, 0.04);
            --landing-grid-opacity: 0.22;
            --landing-morph-opacity: 0.65;
        }

        body[data-landing-theme="light"] {
            --landing-stripe: rgba(0, 0, 0, 0.24);
            --landing-stripe-accent: rgba(237, 91, 47, 0.58);
            --landing-ray: rgba(0, 0, 0, 0.18);
            --landing-sweep-soft: rgba(0, 0, 0, 0.1);
            --landing-sweep-mid: rgba(0, 0, 0, 0.42);
            --landing-sweep-hi: rgba(237, 91, 47, 0.5);
            --landing-path-muted: rgba(0, 0, 0, 0.14);
            --landing-path-accent: rgba(237, 91, 47, 0.38);
            --landing-grid-opacity: 0.72;
            --landing-morph-opacity: 0.38;
        }

        @keyframes landingGridLineLight {
            0% { stroke-dashoffset: 1000; opacity: 0.28; }
            50% { stroke-dashoffset: 0; opacity: 0.82; }
            100% { stroke-dashoffset: -1000; opacity: 0.28; }
        }

        body[data-landing-theme="light"] .landing-bg__grid line {
            stroke-width: 1.25;
            animation-name: landingGridLineLight;
        }

        @keyframes landingTopFloat {
            0%, 100% { transform: translateX(-50%) translateY(0) scale(1); opacity: 0.55; }
            50% { transform: translateX(-50%) translateY(-18px) scale(1.04); opacity: 1; }
        }

        @keyframes landingLineSweep {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

        @keyframes landingGridLine {
            0% { stroke-dashoffset: 1000; opacity: 0.15; }
            50% { stroke-dashoffset: 0; opacity: 0.55; }
            100% { stroke-dashoffset: -1000; opacity: 0.15; }
        }

        @keyframes landingRaySway {
            0% { transform: translateX(-8%) rotate(-2deg); opacity: 0.25; }
            50% { transform: translateX(8%) rotate(2deg); opacity: 0.6; }
            100% { transform: translateX(-8%) rotate(-2deg); opacity: 0.25; }
        }

        .landing-bg {
            position: fixed;
            inset: 0;
            pointer-events: none;
            overflow: hidden;
            z-index: 1;
        }

        /* сетка только на белых section, НЕ на body (иначе баг при скролле) */
        section[data-landing-surface="light"] {
            position: relative;
        }

        section[data-landing-surface="light"]::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            background-image:
                radial-gradient(ellipse 90% 45% at 50% 0%, rgba(237, 91, 47, 0.14) 0%, rgba(0, 0, 0, 0.04) 45%, transparent 72%),
                linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.12) 45%, rgba(237, 91, 47, 0.28) 50%, rgba(0, 0, 0, 0.12) 55%, transparent 100%),
                repeating-linear-gradient(0deg, transparent, transparent 79px, rgba(0, 0, 0, 0.14) 80px, rgba(0, 0, 0, 0.14) 81px),
                repeating-linear-gradient(90deg, transparent, transparent 119px, rgba(0, 0, 0, 0.11) 120px, rgba(0, 0, 0, 0.11) 121px);
            background-size: 100% 100%, 200% 100%, 100% 80px, 120px 100%;
            animation: landingLightGridDrift 14s linear infinite;
            opacity: 1;
        }

        @keyframes landingLightGridDrift {
            0% { background-position: 0 0, -50% 0, 0 0, 0 0; }
            100% { background-position: 0 0, 150% 0, 0 80px, 120px 0; }
        }

        section[data-landing-surface="light"] > * {
            position: relative;
            z-index: 2;
        }

        .landing-bg__top {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 130%;
            height: 58%;
            animation: landingTopFloat 6s ease-in-out infinite;
        }

        .landing-bg__top svg {
            width: 100%;
            height: 100%;
        }

        .landing-bg__morph {
            transition: opacity 0.6s var(--ease-neat);
            opacity: var(--landing-morph-opacity);
        }

        .landing-glow-stop-a { stop-color: #ed5b2f; stop-opacity: 0.28; transition: stop-opacity 0.6s var(--ease-neat); }
        .landing-glow-stop-b { stop-color: #ed5b2f; stop-opacity: 0.1; }
        .landing-glow-stop-c { stop-color: #ffffff; stop-opacity: 0.04; }

        body[data-landing-theme="light"] .landing-glow-stop-a { stop-color: #000000; stop-opacity: 0.1; }
        body[data-landing-theme="light"] .landing-glow-stop-b { stop-color: #ed5b2f; stop-opacity: 0.16; }
        body[data-landing-theme="light"] .landing-glow-stop-c { stop-color: #474444; stop-opacity: 0.06; }

        body[data-landing-theme="light"] .landing-bg__sweep {
            height: 2px;
        }

        .landing-bg__path-muted {
            stroke: var(--landing-path-muted);
            transition: stroke 0.6s var(--ease-neat);
        }

        .landing-bg__path-accent {
            stroke: var(--landing-path-accent);
            transition: stroke 0.6s var(--ease-neat);
        }

        .landing-bg__grid {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            opacity: var(--landing-grid-opacity);
            transition: opacity 0.6s var(--ease-neat);
        }

        .landing-bg__grid line {
            stroke: var(--landing-stripe);
            stroke-width: 1;
            stroke-dasharray: 10 14;
            animation: landingGridLine 4.5s ease-in-out infinite;
            transition: stroke 0.6s var(--ease-neat);
        }

        .landing-bg__grid line:nth-child(1) { animation-delay: 0s; }
        .landing-bg__grid line:nth-child(2) { animation-delay: 0.6s; }
        .landing-bg__grid line:nth-child(3) { animation-delay: 1.2s; }
        .landing-bg__grid line:nth-child(4) { animation-delay: 0.3s; }
        .landing-bg__grid line:nth-child(5) { animation-delay: 0.9s; }
        .landing-bg__grid line:nth-child(6) { animation-delay: 1.5s; }
        .landing-bg__grid line:nth-child(7) { animation-delay: 0.45s; }
        .landing-bg__grid line:nth-child(8) { animation-delay: 1.05s; }

        .landing-bg__grid line.is-accent {
            stroke: var(--landing-stripe-accent);
        }

        .landing-bg__sweep {
            position: absolute;
            top: 22%;
            left: 0;
            right: 0;
            height: 1px;
            overflow: hidden;
        }

        .landing-bg__sweep::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(
                90deg,
                transparent,
                var(--landing-sweep-soft),
                var(--landing-sweep-mid),
                var(--landing-sweep-hi),
                transparent
            );
            animation: landingLineSweep 5s linear infinite;
            transition: background 0.6s var(--ease-neat);
        }

        .landing-bg__rays {
            position: absolute;
            top: 0;
            left: -8%;
            right: -8%;
            height: 52%;
            animation: landingRaySway 10s ease-in-out infinite;
        }

        .landing-bg__ray {
            position: absolute;
            top: 0;
            width: 1px;
            height: 100%;
            background: linear-gradient(to bottom, var(--landing-ray), transparent 72%);
            transform-origin: top center;
            transition: background 0.6s var(--ease-neat);
        }

        .landing-bg__ray:nth-child(1) { left: 12%; transform: rotate(-7deg); }
        .landing-bg__ray:nth-child(2) { left: 28%; transform: rotate(-2deg); }
        .landing-bg__ray:nth-child(3) { left: 48%; transform: rotate(1deg); }
        .landing-bg__ray:nth-child(4) { left: 68%; transform: rotate(4deg); }
        .landing-bg__ray:nth-child(5) { left: 86%; transform: rotate(8deg); }

        /* секции поверх глобального фона; на light — локальная сетка в ::after */
        body > section,
        body > footer,
        body > hr,
        body > .section_roles {
            position: relative;
            z-index: 2;
        }

        /* ── Hero ── */
        .section_home-hero {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: calc(28px + var(--header-h) + 40px) clamp(16px, 3vw, 40px) 120px;
            position: relative;
            overflow: hidden;
            background: transparent;
        }

        .home-hero_wrap {
            position: relative;
            z-index: 2;
            max-width: var(--max-w);
            margin: 0 auto;
            width: 100%;
        }

        .home-hero__eyebrow {
            font-size: clamp(0.85rem, 1.5vw, 1rem);
            color: var(--color--text-secondary);
            max-width: 32ch;
            margin-bottom: clamp(32px, 5vw, 64px);
            line-height: 1.5;
        }

        .home-hero__title {
            font-size: clamp(3.5rem, 11vw, 9.5rem);
            font-weight: 400;
            letter-spacing: -0.03em;
            line-height: 0.92;
            text-transform: lowercase;
        }

        /* line-mask */
        .line-mask {
            overflow: hidden;
        }
        .line-mask__line {
            display: block;
            transform: translateY(110%);
            opacity: 0;
        }
        .line-mask.is-visible .line-mask__line {
            transform: translateY(0);
            opacity: 1;
            transition: transform 1.2s var(--ease-neat), opacity 1s var(--ease-neat);
        }
        .line-mask.is-visible .line-mask__line:nth-child(1) { transition-delay: 0.05s; }
        .line-mask.is-visible .line-mask__line:nth-child(2) { transition-delay: 0.15s; }
        .line-mask.is-visible .line-mask__line:nth-child(3) { transition-delay: 0.25s; }
        .line-mask.is-visible .line-mask__line:nth-child(4) { transition-delay: 0.35s; }
        .line-mask.is-visible .line-mask__line:nth-child(5) { transition-delay: 0.45s; }

        .home-hero__lead {
            font-size: clamp(0.85rem, 1.4vw, 1rem);
            color: var(--color--text-secondary);
            max-width: 42ch;
            margin-top: clamp(28px, 4vw, 48px);
            line-height: 1.55;
        }
        .home-hero__title .hero-accent {
            color: var(--color--accent);
        }

        .home-hero__icon {
            display: inline-flex;
            vertical-align: middle;
            width: clamp(40px, 6vw, 72px);
            height: clamp(40px, 6vw, 72px);
            margin: 0 0.15em;
            transform: translateY(-0.05em);
        }
        .home-hero__icon svg { width: 100%; height: 100%; }

        .home-hero__scroll {
            position: absolute;
            z-index: 2;
            bottom: clamp(32px, 5vw, 64px);
            left: clamp(16px, 3vw, 40px);
        }
        .scroll-down {
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            font-size: 0.7rem;
            font-weight: 500;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--color--text-secondary);
        }
        .scroll-down__arrow {
            width: 24px;
            height: 24px;
            border: 1px solid var(--color--border);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: scrollBounce 2s ease-in-out infinite;
        }
        .scroll-down__arrow svg {
            width: 10px;
            height: 10px;
            stroke: var(--color--text-secondary);
        }
        @keyframes scrollBounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(4px); }
        }

        /* ── Scroll to top (страница) ── */
        .scroll-top {
            position: fixed;
            right: clamp(16px, 3vw, 40px);
            bottom: clamp(32px, 5vw, 64px);
            z-index: 800;
            width: 44px;
            height: 44px;
            border: 1px solid var(--color--border);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--color--text-secondary);
            background: rgba(0, 0, 0, 0.55);
            backdrop-filter: blur(6px);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.35s var(--ease-neat), visibility 0.35s, transform 0.35s var(--ease-neat);
            transform: translateY(10px);
        }
        .scroll-top.is-visible {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateY(0);
        }
        .scroll-top:hover {
            color: var(--color--accent);
            border-color: var(--color--accent);
        }
        .scroll-top__arrow svg {
            width: 12px;
            height: 12px;
            fill: currentColor;
        }
        body.is-overlay-open .scroll-top {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        /* ── Projects ── */
        .section_home-projects {
            padding: clamp(64px, 10vw, 120px) clamp(16px, 3vw, 40px);
        }
        .section_home-projects__inner {
            max-width: var(--max-w);
            margin: 0 auto;
        }
        .section__label {
            font-size: 0.7rem;
            font-weight: 500;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--color--text-secondary);
            margin-bottom: clamp(32px, 5vw, 56px);
        }

        .projects-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: clamp(16px, 2vw, 24px);
        }

        .project-card {
            position: relative;
            display: block;
            overflow: hidden;
            background: var(--color--gray-2);
            aspect-ratio: 4 / 3;
            color: var(--color--text-primary);
        }
        .project-card:nth-child(3) {
            grid-column: 1 / -1;
            aspect-ratio: 21 / 9;
        }
        .project-card__img {
            position: absolute;
            inset: 0;
            background-color: var(--color--gray-2);
            background-size: cover;
            background-position: center;
            transition: transform 1.2s var(--ease-neat);
        }
        .project-card__img--estimator {
            background-image:
                linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.2) 55%, transparent 100%),
                url("/static/images/landing/neat/roles/role-estimator.png");
        }
        .project-card__img--contractor {
            background-image:
                linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.2) 55%, transparent 100%),
                url("/static/images/landing/neat/roles/role-contractor.png");
        }
        .project-card__img--supplier {
            background-image:
                linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.2) 55%, transparent 100%),
                url("/static/images/landing/neat/roles/role-supplier.png");
        }
        .project-card:hover .project-card__img {
            transform: scale(1.04);
        }
        .project-card__img::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 45%);
            pointer-events: none;
        }
        .project-card__body {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: clamp(20px, 3vw, 32px);
            z-index: 1;
        }
        .project-card__title {
            font-size: clamp(1.5rem, 3vw, 2.25rem);
            font-weight: 400;
            letter-spacing: -0.02em;
            margin-bottom: 0.5rem;
        }
        .project-card__tag {
            font-size: 0.7rem;
            font-weight: 500;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--color--accent);
        }

        /* ── Services ── */
        .section_home-services {
            padding: clamp(64px, 10vw, 120px) clamp(16px, 3vw, 40px);
            background: var(--color--bg-secondary);
            color: var(--color--text-dark);
        }
        .section_home-services__inner {
            max-width: var(--max-w);
            margin: 0 auto;
        }
        .section_home-services .section__label { color: var(--color--gray-3); }

        .services-intro {
            font-size: clamp(1.75rem, 4vw, 3rem);
            font-weight: 400;
            letter-spacing: -0.02em;
            line-height: 1.15;
            max-width: 22ch;
            margin-bottom: clamp(48px, 8vw, 96px);
            color: var(--color--text-dark);
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0;
        }
        .service-block {
            padding: clamp(24px, 3vw, 40px);
            border-top: 1px solid rgba(0, 0, 0, 0.12);
            position: relative;
        }
        .service-block + .service-block {
            border-left: 1px solid rgba(0, 0, 0, 0.12);
        }
        .service-block__num {
            font-size: 0.7rem;
            font-weight: 500;
            letter-spacing: 0.08em;
            color: var(--color--gray-3);
            margin-bottom: clamp(24px, 4vw, 48px);
        }
        .service-block__title {
            font-size: clamp(1.25rem, 2vw, 1.75rem);
            font-weight: 500;
            letter-spacing: -0.01em;
            margin-bottom: 1rem;
            color: var(--color--text-dark);
        }
        .service-block__desc {
            font-size: 0.9rem;
            line-height: 1.55;
            color: var(--color--gray-3);
        }

        /* ── Marquee ── */
        .section-home_partners {
            padding: clamp(48px, 8vw, 80px) 0;
            overflow: hidden;
            border-top: 1px solid var(--color--border);
            border-bottom: 1px solid var(--color--border);
        }
        .section-home_partners__label {
            text-align: center;
            font-size: 0.7rem;
            font-weight: 500;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--color--text-secondary);
            margin-bottom: clamp(32px, 5vw, 48px);
            padding: 0 16px;
        }

        .marquee-stack {
            display: flex;
            flex-direction: column;
            gap: clamp(12px, 2vw, 20px);
        }
        .marquee {
            width: 100%;
            display: flex;
            overflow: hidden;
        }
        .marquee_track {
            display: flex;
            width: max-content;
            will-change: transform;
            animation: marqueeScroll 28s linear infinite;
        }
        .marquee_track--reverse {
            animation-direction: reverse;
            animation-duration: 32s;
        }
        .marquee_content {
            gap: 1.25rem;
            flex-flow: row;
            display: flex;
            flex-shrink: 0;
            padding-right: 1.25rem;
        }
        @keyframes marqueeScroll {
            0% { transform: translate(0); }
            100% { transform: translate(-50%); }
        }
        .marquee_logo,
        .marquee__item {
            flex-shrink: 0;
            padding: 0.75rem 2rem;
            font-size: clamp(1rem, 2vw, 1.5rem);
            font-weight: 500;
            letter-spacing: 0.04em;
            color: var(--color--text-secondary);
            white-space: nowrap;
            border: 1px solid var(--color--border);
            border-radius: 999px;
        }

        /* ── Footer ── */
        .footer {
            position: relative;
        }
        .footer_outer-wrap {
            background: var(--color--accent);
            color: var(--color--text-primary);
            padding: clamp(64px, 12vw, 140px) clamp(16px, 3vw, 40px) clamp(32px, 5vw, 48px);
        }
        .footer__cta-wrap {
            max-width: var(--max-w);
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            align-items: flex-end;
            justify-content: space-between;
            gap: clamp(24px, 4vw, 48px);
            margin-bottom: clamp(64px, 10vw, 120px);
        }
        .footer__headline {
            font-size: clamp(2rem, 6vw, 5rem);
            font-weight: 400;
            letter-spacing: -0.03em;
            line-height: 1.05;
            max-width: 14ch;
        }
        .footer .button {
            border-color: var(--color--text-primary);
            color: var(--color--text-primary);
        }
        .footer .button.is-fill::after {
            background-color: var(--color--bg-primary);
        }
        .footer__bottom {
            max-width: var(--max-w);
            margin: 0 auto;
            padding-top: clamp(24px, 4vw, 40px);
            border-top: 1px solid rgba(255, 255, 255, 0.25);
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            font-size: 0.75rem;
            letter-spacing: 0.04em;
            color: rgba(255, 255, 255, 0.85);
        }
        .footer__links {
            display: flex;
            flex-wrap: wrap;
            gap: clamp(12px, 2vw, 24px);
        }
        .footer__links a {
            transition: opacity 0.3s;
        }
        .footer__links a:hover { opacity: 0.7; }

        /* ── Modal ── */
        .modal-overlay {
            position: fixed;
            inset: 0;
            z-index: 9500;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.5s var(--ease-neat), visibility 0.5s;
        }
        .modal-overlay.is-open {
            opacity: 1;
            visibility: visible;
        }
        .modal {
            background: var(--color--bg-secondary);
            color: var(--color--text-dark);
            width: min(480px, 100%);
            padding: clamp(32px, 5vw, 48px);
            transform: translateY(24px);
            transition: transform 0.5s var(--ease-neat);
        }
        .modal-overlay.is-open .modal {
            transform: translateY(0);
        }
        .modal__close {
            position: absolute;
            top: 16px;
            right: 16px;
            width: 32px;
            height: 32px;
            font-size: 1.25rem;
            color: var(--color--gray-3);
        }
        .modal__title {
            font-size: 1.5rem;
            font-weight: 500;
            margin-bottom: 0.5rem;
        }
        .modal__sub {
            font-size: 0.85rem;
            color: var(--color--gray-3);
            margin-bottom: 2rem;
        }
        .modal__field {
            margin-bottom: 1.25rem;
        }
        .modal__field label {
            display: block;
            font-size: 0.7rem;
            font-weight: 500;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            margin-bottom: 0.5rem;
            color: var(--color--gray-3);
        }
        .modal__field input,
        .modal__field textarea {
            width: 100%;
            padding: 0.85rem 1rem;
            border: 1px solid rgba(0, 0, 0, 0.15);
            font-family: inherit;
            font-size: 0.95rem;
            background: var(--color--bg-secondary);
            color: var(--color--text-dark);
            transition: border-color 0.3s;
        }
        .modal__field input:focus,
        .modal__field textarea:focus {
            outline: none;
            border-color: var(--color--accent);
        }
        .modal__field textarea { min-height: 100px; resize: vertical; }
        .modal__submit { width: 100%; margin-top: 0.5rem; }

        /* ── Reveal on scroll ── */
        .reveal {
            opacity: 0;
            transform: translateY(32px);
            transition: opacity 0.9s var(--ease-neat), transform 0.9s var(--ease-neat);
        }
        .reveal.is-visible {
            opacity: 1;
            transform: none;
        }
        .reveal-d1 { transition-delay: 0.12s; }
        .reveal-d2 { transition-delay: 0.24s; }
        .reveal-d3 { transition-delay: 0.36s; }

        @font-face {
            font-family: NeueHaasGroteskDisplayPro55Roman;
            src: url("https://cdn.prod.website-files.com/672b3f3ac7724a681ad31371/677d203e6eb15d5e2b09c04f_font.woff2") format("woff2");
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }

        /* ── Workflow ── */
        .section_workflow {
            padding: clamp(64px, 10vw, 120px) clamp(16px, 3vw, 40px);
        }
        .section_workflow__inner {
            max-width: var(--max-w);
            margin: 0 auto;
        }
        .section_workflow__intro {
            font-size: clamp(1.75rem, 4vw, 3rem);
            font-weight: 400;
            letter-spacing: -0.02em;
            line-height: 1.12;
            max-width: 22ch;
            margin-bottom: clamp(16px, 2vw, 24px);
        }
        .section_workflow__note {
            font-size: 0.9rem;
            line-height: 1.55;
            color: var(--color--text-secondary);
            max-width: 42ch;
            margin-bottom: clamp(48px, 8vw, 80px);
        }
        .workflow-step__role {
            display: inline-block;
            font-size: 0.6rem;
            font-weight: 500;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--color--accent);
            margin-bottom: 0.5rem;
        }
        .workflow-step.is-shared .workflow-step__role {
            color: var(--color--text-secondary);
        }
        .workflow-steps {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 0;
            border-top: 1px solid var(--color--border);
        }
        .workflow-step {
            padding: clamp(24px, 3vw, 36px) clamp(16px, 2vw, 24px);
            border-right: 1px solid var(--color--border);
        }
        .workflow-step:last-child { border-right: none; }
        .workflow-step__num {
            font-size: 0.7rem;
            font-weight: 500;
            letter-spacing: 0.08em;
            color: var(--color--accent);
            margin-bottom: clamp(20px, 3vw, 32px);
        }
        .workflow-step__title {
            font-size: clamp(1rem, 1.5vw, 1.25rem);
            font-weight: 500;
            letter-spacing: -0.01em;
            margin-bottom: 0.75rem;
        }
        .workflow-step__desc {
            font-size: 0.85rem;
            line-height: 1.55;
            color: var(--color--text-secondary);
        }

        /* ── Role deep dives ── */
        .section_roles {
            border-top: 1px solid var(--color--border);
        }
        .role-strip {
            padding: clamp(64px, 10vw, 120px) clamp(16px, 3vw, 40px);
            border-bottom: 1px solid var(--color--border);
        }
        .role-strip__inner {
            max-width: var(--max-w);
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: clamp(32px, 6vw, 80px);
            align-items: center;
        }
        .role-strip--reverse .role-strip__inner {
            direction: rtl;
        }
        .role-strip--reverse .role-strip__inner > * {
            direction: ltr;
        }
        .role-strip__anchor {
            font-size: 0.7rem;
            font-weight: 500;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--color--accent);
            margin-bottom: 1rem;
        }
        .role-strip__title {
            font-size: clamp(2rem, 5vw, 3.5rem);
            font-weight: 400;
            letter-spacing: -0.03em;
            line-height: 1.05;
            margin-bottom: 1.25rem;
        }
        .role-strip__desc {
            font-size: 1rem;
            line-height: 1.6;
            color: var(--color--text-secondary);
            margin-bottom: clamp(24px, 4vw, 40px);
            max-width: 38ch;
        }
        .role-strip__features {
            display: grid;
            gap: 1rem;
            margin-bottom: clamp(24px, 4vw, 40px);
        }
        .role-strip__feature {
            padding-top: 1rem;
            border-top: 1px solid var(--color--border);
        }
        .role-strip__feature h4 {
            font-size: 0.85rem;
            font-weight: 500;
            margin-bottom: 0.35rem;
        }
        .role-strip__feature p {
            font-size: 0.85rem;
            color: var(--color--text-secondary);
            line-height: 1.5;
        }
        .role-strip__highlight {
            font-size: clamp(1.1rem, 2vw, 1.35rem);
            letter-spacing: -0.01em;
            margin-bottom: 1.5rem;
            color: var(--color--text-primary);
        }
        .role-panel {
            background-color: var(--color--gray-2);
            background-size: cover;
            background-position: center;
            border: 1px solid var(--color--border);
            padding: clamp(24px, 3vw, 36px);
            min-height: 280px;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            position: relative;
            overflow: hidden;
        }
        .role-panel::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.55) 100%);
            pointer-events: none;
        }
        .role-panel > * { position: relative; z-index: 1; }
        .role-panel--estimator {
            background-image: url("/static/images/landing/neat/roles/role-estimator.png");
        }
        .role-panel--contractor {
            background-image: url("/static/images/landing/neat/roles/role-contractor.png");
        }
        .role-panel--supplier {
            background-image: url("/static/images/landing/neat/roles/role-supplier.png");
        }
        .role-panel__label {
            font-size: 0.65rem;
            font-weight: 500;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--color--text-secondary);
        }
        .role-panel__value {
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 400;
            letter-spacing: -0.03em;
            line-height: 1;
        }
        .role-panel__value span { color: var(--color--accent); }
        .role-panel__meta {
            font-size: 0.8rem;
            color: var(--color--text-secondary);
        }
        .role-panel__rows {
            margin-top: auto;
            display: grid;
            gap: 0.5rem;
            font-size: 0.8rem;
        }
        .role-panel__row {
            display: flex;
            justify-content: space-between;
            padding-top: 0.5rem;
            border-top: 1px solid var(--color--border);
            color: var(--color--text-secondary);
        }
        .role-panel__row strong { color: var(--color--text-primary); font-weight: 500; }
        .role-panel__bars {
            display: flex;
            align-items: flex-end;
            gap: 4px;
            height: 48px;
            margin-top: 0.5rem;
        }
        .role-panel__bars span {
            flex: 1;
            background: var(--color--gray-3);
            border-radius: 2px 2px 0 0;
        }
        .role-panel__bars span:nth-child(1) { height: 35%; }
        .role-panel__bars span:nth-child(2) { height: 55%; }
        .role-panel__bars span:nth-child(3) { height: 45%; }
        .role-panel__bars span:nth-child(4) { height: 70%; }
        .role-panel__bars span:nth-child(5) { height: 90%; background: var(--color--accent); }
        .role-panel__bars span:nth-child(6) { height: 60%; }
        .role-panel__bars span:nth-child(7) { height: 75%; }

        /* ── Stats ── */
        .section_stats {
            padding: clamp(48px, 8vw, 72px) clamp(16px, 3vw, 40px);
            background: var(--color--gray-2);
            border-top: 1px solid var(--color--border);
            border-bottom: 1px solid var(--color--border);
        }
        .stats-grid {
            max-width: var(--max-w);
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: clamp(16px, 2vw, 32px);
        }
        .stat-item {
            text-align: center;
            padding: clamp(16px, 2vw, 24px);
        }
        .stat-item__num {
            font-size: clamp(2.5rem, 5vw, 4rem);
            font-weight: 400;
            letter-spacing: -0.03em;
            line-height: 1;
            color: var(--color--accent);
            margin-bottom: 0.5rem;
        }
        .stat-item__label {
            font-size: 0.75rem;
            font-weight: 500;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--color--text-secondary);
        }

        /* ── Cases ── */
        .section_cases {
            padding: clamp(64px, 10vw, 120px) clamp(16px, 3vw, 40px);
        }
        .section_cases__inner {
            max-width: var(--max-w);
            margin: 0 auto;
        }
        .section_cases__head {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-end;
            justify-content: space-between;
            gap: 24px;
            margin-bottom: clamp(40px, 6vw, 64px);
        }
        .section_cases__title {
            font-size: clamp(1.75rem, 4vw, 3rem);
            font-weight: 400;
            letter-spacing: -0.02em;
            line-height: 1.1;
            max-width: 16ch;
        }
        .cases-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: clamp(16px, 2vw, 24px);
        }
        .case-card {
            border: 1px solid var(--color--border);
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 0;
            overflow: hidden;
            transition: border-color 0.4s var(--ease-neat);
        }
        .case-card:hover { border-color: var(--color--accent); }
        .case-card__thumb {
            aspect-ratio: 16 / 9;
            width: 100%;
            background-color: var(--color--gray-2);
            background-size: cover;
            background-position: center;
        }
        .case-card__thumb--kac {
            background-image: url("/static/images/landing/neat/cases/case-kac.png");
        }
        .case-card__thumb--margin {
            background-image: url("/static/images/landing/neat/cases/case-margin.png");
        }
        .case-card__thumb--supplier {
            background-image: url("/static/images/landing/neat/cases/case-supplier.png");
        }
        .case-card__body {
            padding: clamp(24px, 3vw, 36px);
            display: flex;
            flex-direction: column;
            gap: 1rem;
            flex: 1;
        }
        .case-card__role {
            font-size: 0.7rem;
            font-weight: 500;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--color--accent);
        }
        .case-card__title {
            font-size: clamp(1.25rem, 2vw, 1.5rem);
            font-weight: 400;
            letter-spacing: -0.01em;
            line-height: 1.2;
        }
        .case-card__desc {
            font-size: 0.9rem;
            line-height: 1.55;
            color: var(--color--text-secondary);
            flex: 1;
        }
        .case-card__result {
            font-size: 0.8rem;
            padding-top: 1rem;
            border-top: 1px solid var(--color--border);
            color: var(--color--text-primary);
        }
        .case-card__result strong { color: var(--color--accent); }

        /* ── Testimonials ── */
        .section_testimonials {
            padding: clamp(64px, 10vw, 120px) clamp(16px, 3vw, 40px);
            background: var(--color--bg-secondary);
            color: var(--color--text-dark);
        }
        .section_testimonials__inner {
            max-width: var(--max-w);
            margin: 0 auto;
        }
        .section_testimonials .section__label { color: var(--color--gray-3); }
        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: clamp(16px, 2vw, 24px);
        }
        .testimonial {
            border-top: 2px solid var(--color--text-dark);
            padding-top: clamp(24px, 3vw, 32px);
        }
        .testimonial__mark {
            font-size: 3rem;
            line-height: 0.5;
            color: var(--color--accent);
            margin-bottom: 1rem;
        }
        .testimonial__quote {
            font-size: clamp(1.1rem, 2vw, 1.35rem);
            line-height: 1.45;
            letter-spacing: -0.01em;
            margin-bottom: clamp(24px, 4vw, 40px);
            color: var(--color--text-dark);
        }
        .testimonial__author {
            font-size: 0.85rem;
            font-weight: 500;
        }
        .testimonial__role {
            display: block;
            font-size: 0.7rem;
            font-weight: 500;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--color--gray-3);
            margin-top: 0.25rem;
        }

        /* ── Pricing ── */
        .section_pricing {
            padding: clamp(64px, 10vw, 120px) clamp(16px, 3vw, 40px);
            border-top: 1px solid var(--color--border);
        }
        .section_pricing__inner {
            max-width: var(--max-w);
            margin: 0 auto;
        }
        .section_pricing__intro {
            font-size: clamp(1.75rem, 4vw, 3rem);
            font-weight: 400;
            letter-spacing: -0.02em;
            line-height: 1.12;
            max-width: 22ch;
            margin-bottom: clamp(48px, 8vw, 80px);
        }
        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: clamp(16px, 2vw, 24px);
        }
        .pricing-card {
            border: 1px solid var(--color--border);
            padding: clamp(28px, 4vw, 40px);
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        .pricing-card--featured {
            border-color: var(--color--accent);
            background: linear-gradient(180deg, rgba(237, 91, 43, 0.08) 0%, transparent 60%);
        }
        .pricing-card__tag {
            font-size: 0.65rem;
            font-weight: 500;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--color--accent);
        }
        .pricing-card__name {
            font-size: 1.25rem;
            font-weight: 500;
        }
        .pricing-card__price {
            font-size: clamp(2rem, 3vw, 2.75rem);
            font-weight: 400;
            letter-spacing: -0.02em;
        }
        .pricing-card__period {
            font-size: 0.8rem;
            color: var(--color--text-secondary);
        }
        .pricing-card__features {
            list-style: none;
            flex: 1;
            display: grid;
            gap: 0.65rem;
            font-size: 0.85rem;
            color: var(--color--text-secondary);
            margin: 0.5rem 0 1rem;
        }
        .pricing-card__features li::before {
            content: "—";
            margin-right: 0.5rem;
            color: var(--color--accent);
        }
        .pricing-card .button { width: 100%; }

        /* ── FAQ ── */
        .section_faq {
            padding: clamp(64px, 10vw, 100px) clamp(16px, 3vw, 40px);
            border-top: 1px solid var(--color--border);
        }
        .section_faq__inner {
            max-width: min(800px, var(--max-w));
            margin: 0 auto;
        }
        .section_faq__title {
            font-size: clamp(1.75rem, 4vw, 2.5rem);
            font-weight: 400;
            letter-spacing: -0.02em;
            margin-bottom: clamp(32px, 5vw, 48px);
        }
        .faq-list { display: grid; gap: 0; }
        .faq-item { border-top: 1px solid var(--color--border); }
        .faq-item:last-child { border-bottom: 1px solid var(--color--border); }
        .faq-item__q {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: clamp(20px, 3vw, 28px) 0;
            font-size: clamp(1rem, 2vw, 1.15rem);
            font-weight: 400;
            letter-spacing: -0.01em;
            text-align: left;
            color: var(--color--text-primary);
        }
        .faq-item__icon {
            flex-shrink: 0;
            width: 24px;
            height: 24px;
            border: 1px solid var(--color--border);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            line-height: 1;
            transition: transform 0.4s var(--ease-neat), border-color 0.3s;
        }
        .faq-item.is-open .faq-item__icon {
            transform: rotate(45deg);
            border-color: var(--color--accent);
        }
        .faq-item__a {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s var(--ease-neat), opacity 0.4s;
            opacity: 0;
        }
        .faq-item.is-open .faq-item__a {
            opacity: 1;
        }
        .faq-item__a-inner {
            padding-bottom: clamp(20px, 3vw, 28px);
            font-size: 0.9rem;
            line-height: 1.6;
            color: var(--color--text-secondary);
            max-width: 60ch;
        }

        /* ── Responsive ── */
        @media (max-width: 991px) {
            .services-grid {
                grid-template-columns: 1fr;
            }
            .service-block + .service-block {
                border-left: none;
            }
            .project-card:nth-child(3) {
                aspect-ratio: 4 / 3;
            }
            .workflow-steps {
                grid-template-columns: repeat(2, 1fr);
            }
            .workflow-step:nth-child(2) { border-right: none; }
            .workflow-step:nth-child(3),
            .workflow-step:nth-child(5) { border-right: none; }
            .role-strip__inner {
                grid-template-columns: 1fr;
            }
            .role-strip--reverse .role-strip__inner { direction: ltr; }
            .stats-grid { grid-template-columns: repeat(2, 1fr); }
            .cases-grid { grid-template-columns: 1fr; }
            .testimonials-grid { grid-template-columns: 1fr; }
            .pricing-grid { grid-template-columns: 1fr; }
        }

        @media (max-width: 767px) {
            .header__cta-desktop { display: none; }
            .projects-grid {
                grid-template-columns: 1fr;
            }
            .project-card:nth-child(3) {
                grid-column: auto;
            }
            .workflow-steps { grid-template-columns: 1fr; }
            .workflow-step { border-right: none; }
            .stats-grid { grid-template-columns: 1fr; }
            .footer__cta-wrap {
                flex-direction: column;
                align-items: flex-start;
            }
            .footer__bottom {
                flex-direction: column;
                align-items: flex-start;
            }
        }

        @media (max-width: 479px) {
            :root { --header-h: 56px; }
            .header { top: 24px; }
            .home-hero__title {
                font-size: clamp(2.75rem, 14vw, 3.5rem);
            }
            .button {
                padding: 0.75rem 1.25rem;
                font-size: 0.65rem;
            }
            .menu_dropdown__nav a { font-size: 1.75rem; }
        }

        /* iPhone 12/13/14 width — без горизонтального скролла */
        @media (max-width: 390px) {
            :root {
                --max-w: min(1440px, calc(100vw - 32px));
            }
            html { overflow-x: clip; }
            .header {
                top: 16px;
                padding: 0 16px;
            }
            .section_home-hero,
            .section_home-projects,
            .section_home-services,
            .role-strip,
            .section_stats,
            .section_cases,
            .section_testimonials,
            .section_pricing,
            .section_faq,
            .footer_outer-wrap {
                padding-left: 16px;
                padding-right: 16px;
            }
            .home-hero__title {
                font-size: clamp(2.25rem, 11.5vw, 3rem);
                line-height: 0.95;
            }
            .home-hero__icon {
                width: clamp(28px, 8vw, 36px);
                height: clamp(28px, 8vw, 36px);
            }
            .home-hero__scroll {
                left: 16px;
                bottom: 24px;
            }
            .footer__headline {
                max-width: 100%;
                font-size: clamp(1.75rem, 9vw, 2.5rem);
            }
            .footer__links {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
            .marquee__item {
                padding: 0.55rem 1rem;
                font-size: 0.85rem;
            }
            .role-strip__title {
                font-size: clamp(1.75rem, 8vw, 2.25rem);
            }
            .section_cases__head {
                flex-direction: column;
                align-items: flex-start;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
            .marquee_track { animation: none; }
            .marquee_track--reverse { animation: none; }
            .landing-bg__top,
            .landing-bg__grid line,
            .landing-bg__sweep::after,
            .landing-bg__rays,
            .landing-bg__morph animate,
            section[data-landing-surface="light"]::after { animation: none; }
        }