/* =========================================
   Cascade layers — predictable overrides
========================================= */
@layer reset, base, components, utilities, responsive;

/* =========================================
   RESET
========================================= */
@layer reset {
    *,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
    img,video { max-width: 100%; height: auto; display: block; }
    ul[role="list"],ol[role="list"] { list-style: none; }
    :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: 6px; }
    :focus:not(:focus-visible) { outline: none; }

    .sr-only {
        position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
    }
    .sr-only-focusable:focus { position: static!important; width:auto; height:auto; margin:8px; clip:auto; }
}

/* =========================================
   BASE TOKENS
========================================= */
@layer base {
    :root {
        /* Colors */
        --color-dark:#101014;
        --color-light:#ffffff;
        --color-accent:#28282c;
        --color-text-primary:#101014;
        --color-text-secondary:#6b7280;
        --color-text-light:#d0d1db;
        --color-bg:#ffffff;
        --color-bg-soft:#f9f9fb;
        --color-bg-mid:#e9ecf2;
        --color-border:#d0d1db;
        --color-focus:#4f46e5;
        --color-dot:#4ade80;
        --color-stars:#f59e0b;

        /* Layout */
        --max-width:1360px;
        --gutter:40px;
        --section-pad:100px;

        /* Radii */
        --r-sm:6px; --r-md:12px; --r-lg:20px; --r-xl:30px; --r-pill:50px;

        /* Motion */
        --t-fast:.2s cubic-bezier(.25,.46,.45,.94);
        --t-med:.4s cubic-bezier(.25,.46,.45,.94);
        --t-slow:.6s cubic-bezier(.25,.46,.45,.94);

        /* Header / hero dynamics */
        --header-h: 88px;                     /* JS updates this on load/scroll/resize */
        --hero-offset: clamp(8px, 2vh, 16px); /* visible gap under fixed header */

        /* Ticker theming (new) */
        --ticker-gap: 28px;
        --ticker-speed: 70s;                  /* fallback */
        --ticker-duration: var(--ticker-speed);
        --ticker-direction: normal;
        --ticker-edge-fade: 16%;              /* edge fade width for mask */
        --ticker-rail-bg: radial-gradient(160% 100% at 50% -10%, #eef1f7 0%, #e6e9f1 40%, #f6f7fb 100%);
        --ticker-rail-border: #e4e8f0;
        --ticker-card-bg: linear-gradient(180deg, #ffffff 0%, #f2f4f8 100%);
        --ticker-card-border: #e7e9f0;
        --ticker-shadow: 0 14px 32px rgb(16 16 20 / 10%);
        --ticker-inner-shadow: inset 0 0 0 1px rgb(255 255 255 / 60%);
        --ticker-sheen: linear-gradient(100deg, transparent 0%, rgb(255 255 255 / 55%) 40%, transparent 60%);
    }

    html { scroll-behavior: smooth; scrollbar-gutter: stable both-edges; }
    html.has-lenis { scroll-behavior: auto; }
    body {
        font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        background: var(--color-bg);
        color: var(--color-text-secondary);
        font-size: 18px; line-height: 1.65;
        -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
        overflow-x: hidden;
    }
    body.nav-open { overflow: hidden; }

    .js [data-section] { content-visibility: auto; contain-intrinsic-size: 800px 800px; }

    h1,h2,h3,h4 {
        color: var(--color-text-primary); font-weight: 600; line-height: 1.2; margin-bottom: .5em; letter-spacing: -0.02em;
    }
    h1 { font-size: clamp(2.4rem,4.5vw,3.5rem); }
    h2 { font-size: clamp(2rem,4vw,3rem); }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.25rem; }
    p  { margin-bottom: 1.25rem; max-width: 65ch; }
    a  { color: inherit; text-decoration: none; transition: color var(--t-fast); }

    section { padding-block: var(--section-pad); }
    .container, section { max-width: var(--max-width); margin-inline: auto; padding-inline: var(--gutter); }

    /* Save-Data mode (set by JS) — tone down visuals */
    .save-data .ticker__track,
    .save-data .animate-on-scroll { animation: none!important; transition: none!important; }
    .save-data .ticker__item img { animation: none!important; }
    .save-data .project-card { box-shadow: none; }

    @media (prefers-reduced-motion: reduce) {
        * { animation: none!important; transition: none!important; scroll-behavior: auto!important; }
    }
}

/* =========================================
   COMPONENTS
========================================= */
@layer components {
    /* Header */
    .header {
        position: fixed; inset-inline: 0; top:0; z-index:1000;
        padding-block: calc(20px + env(safe-area-inset-top));
        transition: background-color .4s, backdrop-filter .4s, padding .4s, color .2s;
        color: var(--color-text-secondary);
        will-change: background-color, backdrop-filter, padding;
    }
    .header .container {
        display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
    }
    .header__logo img { height:50px; width:auto; }
    .header__nav { display:flex; gap:10px; }
    .header__nav a { font-weight:500; padding:10px 15px; border-radius:8px; }
    .header__nav a[aria-current="page"] { background:#eef1f7; color:#101014; }
    .header__nav a:hover { color: var(--color-text-primary); }

    .header.scrolled {
        background-color: rgb(255 255 255 / .8);
        backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 2px 10px rgb(0 0 0 / 5%);
        padding-block: 15px;
        color: var(--color-text-primary);
    }

    .header__hamburger {
        display:none; position:relative; z-index:1001; width:40px; height:24px; background:none; border:none; cursor:pointer; color: currentColor;
    }
    .header__hamburger span {
        position:absolute; left:0; width:100%; height:2px; background: currentColor;
        transition: all .4s cubic-bezier(.76,0,.24,1);
    }
    .header__hamburger span:nth-child(1){ top:0; }
    .header__hamburger span:nth-child(2){ top:50%; transform:translateY(-50%); }
    .header__hamburger span:nth-child(3){ bottom:0; }
    body.nav-open .header__hamburger span:nth-child(1){ top:50%; transform:translateY(-50%) rotate(45deg); }
    body.nav-open .header__hamburger span:nth-child(2){ opacity:0; transform:translateX(-20px); }
    body.nav-open .header__hamburger span:nth-child(3){ top:50%; transform:translateY(-50%) rotate(-45deg); }

    /* Mobile nav */
    .mobile-nav {
        position:fixed; inset:0; background: radial-gradient(120% 120% at 50% 0%, #101014 0%, #0b0b0e 60%, #070709 100%);
        display:flex; flex-direction:column; justify-content:center; align-items:center; gap:20px;
        transform: translateX(100%); transition: transform .5s cubic-bezier(.76,0,.24,1);
        z-index:999; visibility:hidden; padding-top: env(safe-area-inset-top);
    }
    .mobile-nav a {
        color: var(--color-light);
        font-size: clamp(1.8rem,5vw,2.5rem);
        font-weight:500; opacity:0; transform: translateY(20px);
        transition: opacity .4s, transform .4s;
        padding: 6px 8px;
    }
    .mobile-nav.nav-open { transform: translateX(0); visibility: visible; }
    .mobile-nav.nav-open a { opacity:1; transform:translateY(0); transition-delay: calc(.2s + var(--i,0) * .05s); }

    /* Badge */
    .badge {
        display: inline-flex;            /* shrink-wrap horizontally */
        align-items: center;             /* vertical centering */
        gap: 8px;
        padding: 6px 14px;               /* pill padding — this intentionally changes size */
        background: var(--color-accent);
        color: var(--color-light);
        border-radius: var(--r-pill);
        font-size: 15px;
        font-weight: 500;
        line-height: 1;                  /* reduces extra leading */
        white-space: nowrap;             /* keep one-line badge */
        box-sizing: border-box;
        vertical-align: middle;          /* align nicely inside surrounding text */
        width: -moz-fit-content;
        width: fit-content;              /* explicit fit-content fallback (optional) */
    }
    .badge__dot { inline-size:8px; block-size:8px; background: var(--color-dot); border-radius:50%; box-shadow:0 0 8px var(--color-dot); }

    /* Button */
    .button {
        display:inline-flex; align-items:center; justify-content:center; gap:12px;
        padding:14px 20px 14px 32px; border-radius: var(--r-pill); font-weight:500;
        background: var(--color-dark); color: var(--color-light); border:0; cursor:pointer;
        transition: transform var(--t-fast), box-shadow var(--t-fast);
        will-change: transform;
    }
    .button:hover { transform: translateY(-1px) scale(1.02); box-shadow: 0 10px 20px rgb(0 0 0 / 10%); }
    .button--full { inline-size:100%; padding:18px 24px; }
    .button--light {
        background: rgb(255 255 255 / 15%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
        border:1px solid rgb(255 255 255 / 20%); color: var(--color-light);
    }
    .button__arrow {
        display:grid; place-items:center; inline-size:44px; block-size:44px;
        background: var(--color-light); border-radius: 50%; transition: transform var(--t-med);
    }
    .button:hover .button__arrow { transform: rotate(45deg); }

    /* Section header */
    .section-header { text-align:center; max-width: 60%; margin-inline:auto; margin-bottom: 80px; }
    .section-header p { margin-inline:auto; }

    /* ===== HERO ===== */
    #banner, section[id], [data-section] { scroll-margin-top: calc(var(--header-h) + var(--hero-offset)); }

    .hero{
        display:grid;
        grid-template-columns: minmax(420px, 2fr) 2fr;
        align-items:stretch;
        gap:clamp(16px,3vw,32px);
        padding-block: 0;
        padding-top: calc(var(--header-h) + var(--hero-offset));
        min-block-size: calc(100vh - (var(--header-h) + var(--hero-offset)));
        min-height:     calc(100vh - (var(--header-h) + var(--hero-offset)));
        width:100%;
        overflow:hidden;
        background: var(--color-light);
        position: relative; z-index: 0;
        isolation: isolate;
    }
    @supports (height: 100dvh) {
        .hero{
            min-block-size: calc(100dvh - (var(--header-h) + var(--hero-offset)));
            min-height:     calc(100dvh - (var(--header-h) + var(--hero-offset)));
        }
    }
    @supports (height: 100svh) {
        .hero{
            min-block-size: calc(100svh - (var(--header-h) + var(--hero-offset)));
            min-height:     calc(100svh - (var(--header-h) + var(--hero-offset)));
        }
    }

    .hero__content{
        padding:clamp(24px,3vw,48px);
        display:flex; flex-direction:column; justify-content:center;
        animation: fadeInContent 1.2s var(--t-med) backwards;
        position: relative; z-index: 2;
    }
    @keyframes fadeInContent { from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:translateY(0)} }
    .hero__content h1{
        text-wrap: balance;
        line-height:1.12; letter-spacing:-0.015em;
        margin:0 0 .3em;
        color: var(--color-text-primary);
    }
    .hero__content p{
        font-size: clamp(.95rem,1.5vw,1.05rem);
        color: var(--color-text-secondary);
        max-width: 60ch;
        margin-block:14px 24px;
    }
    :lang(ru) .hero__content h1{ font-size:clamp(2rem,3.2vw,3.1rem); line-height:1.1; }
    :lang(ru) .hero__content p { max-width: 58ch; }

    .hero__panel{
        block-size: 100%;
        position:relative;
        border-radius: var(--r-xl);
        overflow:hidden;
        min-block-size: 540px;
        animation: slideInFromRight var(--t-slow);
        z-index: 1;
        contain: paint;
        padding: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    .hero__panel video{
        position:absolute; inset:0; width:100%; height:100%;
        object-fit:cover; object-position:center 62%; z-index:0;
        background:#000; transform: scaleX(1.20) scaleY(1.06);
        transform-origin: center bottom; will-change: transform;
    }
    @keyframes slideInFromRight { from{ transform:translateX(50%); clip-path: inset(0 100% 0 0)} to{ transform:none; clip-path: inset(0)} }

    .hero__testimonial{
        position:absolute; inset-block-end:32px; inset-inline-end:32px; z-index:3;
        background: rgb(16 16 20 / 65%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
        border:1px solid rgb(255 255 255 / 10%); border-radius: var(--r-lg); padding:14px 16px; max-inline-size:380px;
        box-shadow: 0 10px 24px rgb(0 0 0 / 20%); animation: fadeInUp 1s ease-out .8s backwards;
    }
    @keyframes fadeInUp { from{opacity:0; transform:translateY(30px)} to{opacity:1; transform:none} }
    .hero__testimonial .stars { color: var(--color-stars); font-size:1rem; letter-spacing:2px; margin-bottom:8px; }
    .hero__testimonial p { color: var(--color-light); margin:0; font-size:.92rem; }

    /* ===== ABOUT ===== */
    .about-intro { display:flex; justify-content:space-between; gap:100px; margin-bottom:100px; }
    .about-intro__title { width:35%; flex-shrink:0; }
    .about-intro__content { width:65%; }

    /* ====== TICKER (reworked) ====== */
    .ticker {
        position: relative;
        width:100%;
        overflow:hidden;
        box-shadow: 0 20px 60px rgb(8 10 16 / 8%);
        isolation: isolate;

        -webkit-mask-image: linear-gradient(to right, transparent 0, black var(--ticker-edge-fade), black calc(100% - var(--ticker-edge-fade)), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, black var(--ticker-edge-fade), black calc(100% - var(--ticker-edge-fade)), transparent 100%);
    }
    .ticker::before {
        content:"";
        position:absolute; inset:0;
        background: var(--ticker-sheen);
        mix-blend-mode: overlay;
        opacity:.15;
        transform: translateX(-40%);
        animation: tickerSheen 14s linear infinite;
        pointer-events:none;
    }
    @keyframes tickerSheen { to { transform: translateX(140%); } }
    .ticker::after{
        content:"";
        position:absolute; inset:0;
        background:
                radial-gradient(120% 140% at 50% 0%, transparent 50%, rgb(16 18 24 / 6%) 100%),
                radial-gradient(120% 140% at 50% 100%, transparent 50%, rgb(16 18 24 / 6%) 100%);
        pointer-events:none;
        z-index:0;
    }
    .ticker__track {
        position: relative;
        z-index:1;
        display:flex; gap: var(--ticker-gap);
        will-change: transform;
        animation: tickerScroll var(--ticker-duration) linear infinite;
        animation-direction: var(--ticker-direction);
        transform: translateZ(0);
        perspective: 1000px;
    }
    .ticker:hover .ticker__track { animation-play-state: paused; }

    .ticker__item {
        flex-shrink:0;
        inline-size:400px; block-size:500px;
        border-radius: clamp(16px, 2vw, var(--r-lg));
        overflow:hidden;
        background: var(--ticker-card-bg);
        border: 1px solid var(--ticker-card-border);
        /*box-shadow: var(--ticker-shadow);*/
        position: relative;
        transition: transform .6s cubic-bezier(.25,.8,.25,1), box-shadow var(--t-med), filter var(--t-med);
        transform-style: preserve-3d;
        contain: content;
    }
    .ticker__item::after{
        content:"";
        position:absolute; inset:0;
        box-shadow: var(--ticker-inner-shadow);
        pointer-events:none;
    }
    .ticker__item img {
        width:100%; height:100%; object-fit:cover;
        transform-origin: center center;
        transition: transform .8s cubic-bezier(.16,1,.3,1), filter var(--t-med);
        animation: kenBurns 12s ease-in-out infinite alternate;
        filter: saturate(1.02) contrast(1.02);
    }
    .ticker--media {
        background: var(--color-light);
        box-shadow: none;
        -webkit-mask-image: none;
        mask-image: none;
        padding-bottom: 10px;
        padding-top: 10px;
    }
    .ticker--media::before,
    .ticker--media::after {
        content: none !important;
    }
    .ticker--media .ticker__item { padding: 0; }
    .ticker--media .media-card { position: relative; height: 100%; block-size: 100%; }
    .ticker--media .media-card > img {
        position: absolute; inset: 0; width: 100%; height: 100%; block-size: 100%; object-fit: cover;
    }
    .ticker--media .media-card::after {
        content: "";
        position: absolute; inset-inline: 0; inset-block-end: 0;
        height: 40%;
        pointer-events: none;
    }
    .ticker--media .media-card > figcaption {
        position: absolute; inset-inline: 12px; inset-block-end: 10px;
        color: #fff;
        font-weight: 600; font-size: 14px; line-height: 1.2;
        text-shadow: 0 1px 2px rgba(0,0,0,.5);
        z-index: 1;
        margin: 0;
    }

    .ticker__item:hover { transform: translateY(-8px) rotateX(1.2deg); box-shadow: 0 24px 50px rgb(8 10 16 / 20%); }
    .ticker__item:hover img { transform: scale(1.06); }

    @keyframes tickerScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
    @keyframes kenBurns { 0%{ transform: scale(1) translateY(0);} 100%{ transform: scale(1.035) translateY(-4px);} }
    .ticker__item:nth-child(3n) img   { animation-duration: 13.5s; }
    .ticker__item:nth-child(4n) img   { animation-duration: 15s; }
    .ticker__item:nth-child(5n) img   { animation-duration: 11.5s; }
    .ticker__item:nth-child(even) img { animation-direction: alternate-reverse; }

    @media (prefers-reduced-motion: reduce) {
        .ticker__track { animation: none!important; }
        .ticker::before { animation: none!important; opacity:.08; }
        .ticker__item img { animation: none!important; }
    }

    /* ===== WHY US ===== */
    .whyus-section { content-visibility: auto; contain-intrinsic-size: 600px 600px; }
    .whyus-grid    { max-width: var(--max-width); margin-inline:auto; padding-inline: var(--gutter); }

    .whyus-list{
        display:grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px 32px;
        list-style: none;
    }

    .whyus-item{
        display:flex; align-items:flex-start; gap:14px;
        background: var(--color-bg-soft);
        border: 1px solid var(--color-border);
        border-radius: var(--r-md);
        padding:16px 18px;
        transition: transform var(--t-fast), border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast);
        will-change: transform;
    }
    .whyus-item:hover{
        transform: translateY(-2px);
        border-color: color-mix(in oklab, var(--color-text-secondary) 30%, var(--color-border));
        box-shadow: 0 8px 20px rgb(0 0 0 / 6%);
    }

    .whyus-icon{
        display:grid; place-items:center;
        inline-size:36px; block-size:36px;
        border-radius:50%;
        background: var(--color-bg-mid);
        color: var(--color-text-primary);
        box-shadow: inset 0 0 0 1px var(--color-border);
        flex-shrink:0;
    }
    .whyus-icon i{ font-size: .95rem; line-height: 1; }

    .whyus-text{ color: var(--color-text-primary); }

    /* Stats */
    .stats-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:40px; text-align:center; padding-top:100px; }
    .stats-grid__item h4 { font-size: clamp(2.8rem,6vw,4.5rem); font-weight:400; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
    .stats-grid__item p { font-size:1.1rem; font-weight:600; max-width:20ch; margin-inline:auto; }
    .stats-grid__item span { display:block; font-weight:400; font-size:1rem; color: var(--color-text-secondary); margin-top:8px; }

    /* ===== SERVICES ===== */
    #services { background: var(--color-bg-soft); }
    .services-layout { display:grid; grid-template-columns: 1fr 1fr; gap:80px; align-items:flex-start; position:relative; }
    .services-layout__image {
        position: sticky; top: 120px; border-radius: var(--r-lg); overflow:hidden; height:600px;
        box-shadow: 0 20px 40px rgb(0 0 0 / 10%); isolation:isolate;
        z-index:0;
        contain: paint;
    }
    .services-layout__image img {
        position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform: scale(1.05);
        transition: opacity .4s ease-in-out, transform .4s ease-in-out;
    }
    .services-layout__image img.active { opacity:1; transform: none; }

    .accordion__item {
        width:100%; padding:0; background:none; border:0; cursor:pointer;
        border-bottom:1px solid var(--color-border);
    }
    .accordion__item:first-child { border-top:1px solid var(--color-border); }
    .accordion__header { display:flex; justify-content:space-between; align-items:center; padding-block:24px; gap:20px; }
    .accordion__header h4 { margin:0; font-size:1.4rem; font-weight:500; transition: color var(--t-fast); }
    .accordion__item.active .accordion__header h4, .accordion__item:hover .accordion__header h4 { color: var(--color-text-primary); }
    .accordion__icon { inline-size:28px; block-size:28px; transition: transform var(--t-med); flex-shrink:0; }
    .accordion__content-wrapper { display:grid; grid-template-rows:0fr; transition: grid-template-rows var(--t-med); will-change: grid-template-rows; }
    .accordion__content { overflow:hidden; }
    .accordion__item.active .accordion__content-wrapper { grid-template-rows:1fr; }
    .accordion__content p { padding-block-end:30px; max-width:55ch; }
    .accordion__item.active .accordion__icon { transform: rotate(45deg); }
    .service-badge{
        display:inline-grid; place-items:center;
        inline-size:42px; block-size:42px; border-radius:50%;
        background: var(--color-bg-mid);
        color: var(--color-text-primary);
        box-shadow: inset 0 0 0 1px var(--color-border);
        flex-shrink:0;
        transition: transform var(--t-fast), background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
        padding: 5px;
    }
    .service-badge i{ font-size:1.05rem; line-height:1; }

    .accordion__header{ gap:16px; } /* a bit wider to breathe next to the icon */

    .accordion__item:hover .service-badge{
        box-shadow: inset 0 0 0 1px var(--color-text-secondary);
    }
    .accordion__item.active .service-badge{
        transform: scale(1.05);
    }

    /* FAQ section reuses accordion visuals; keep badges readable there too */
    .faq-layout .service-badge{
        background: var(--color-bg-mid);
    }
    .faq-layout .accordion__item.active .service-badge{
        background: var(--color-dark);
        color: var(--color-light);
    }

    /* ===== OUR WORK ===== */
    .sticky-wrapper { position:relative; min-height:250vh; }
    .project-card {
        display:grid; grid-template-columns: 4fr 5fr; gap:80px; align-items:center;
        padding:60px; border-radius: var(--r-lg); margin-bottom:32px; position:sticky; top:120px;
        transform-origin:center top; will-change: transform, opacity;
        transform: scale(calc(.9 + var(--scroll-progress,0) * .1));
        transition: transform .1s linear, opacity .1s linear;
        content-visibility: auto; contain-intrinsic-size: 800px 600px;
    }
    .project-card--light { background: var(--color-bg-mid); }
    .project-card--dark { background: var(--color-dark); color: var(--color-text-light); }
    .project-card--dark h4 { color: var(--color-light); }
    .project-card--dark .project-card__quote-icon { color: var(--color-light); }
    .project-card--dark .project-card__tags span { background: rgb(255 255 255 / 10%); }
    .project-card__image { width:100%; aspect-ratio: 4 / 5; border-radius: var(--r-md); overflow:hidden; box-shadow: 0 15px 30px rgb(0 0 0 / 10%); }
    .project-card__image img { width:100%; height:100%; object-fit:cover; }
    .project-card__content h4 { font-size: clamp(1.8rem,3.2vw,2.8rem); text-align:left; }
    .project-card__tags { display:flex; flex-wrap:wrap; gap:12px; margin-block:30px; }
    .project-card__tags span { padding:6px 14px; font-size:14px; font-weight:500; border-radius: var(--r-pill); background: var(--color-accent); color: var(--color-light); }
    .project-card__quote { position:relative; padding-inline-start:40px; font-size:1.1rem; line-height:1.5; font-style:italic; }
    .project-card__quote-icon { position:absolute; inset-block-start:-5px; inset-inline-start:0; inline-size:28px; block-size:28px; color: var(--color-dark); }
    .project-card__citation { display:flex; align-items:center; gap:15px; margin-top:25px; }
    .project-card__citation img { inline-size:50px; block-size:50px; border-radius:50%; object-fit:cover; border:2px solid var(--color-border); }
    .project-card__citation p { margin:0; font-weight:500; font-style:normal; }

    /* ===== TESTIMONIALS ===== */
    .testimonial-ticker { padding-block:80px; background: var(--color-bg-soft); }
    .testimonial-ticker .ticker {
        padding-block:48px;
        background: linear-gradient(180deg, #fafbfc 0%, #f3f5f8 100%);
        border: 1px solid #e9edf4;
        box-shadow: 0 10px 30px rgb(0 0 0 / 5%);
        -webkit-mask-image:none; mask-image:none;
    }
    .testimonial-ticker .ticker::before { opacity:.08; }
    .testimonial-ticker .ticker__track { animation-duration: var(--ticker-duration); }
    .testimonial-ticker .ticker__item {
        inline-size:420px; block-size:auto; padding:32px;
        border:1px solid var(--color-border);
        background: var(--color-light);
        /*box-shadow: 0 5px 15px rgb(0 0 0 / 3%);*/
        transition: transform var(--t-fast), box-shadow var(--t-fast);
    }
    .testimonial-ticker .ticker__item:hover { transform: translateY(-6px); box-shadow: 0 15px 30px rgb(0 0 0 / 7%); }
    .testimonial-ticker .stars { font-size:1.25rem; color: var(--color-stars); }
    .testimonial-ticker .author { display:flex; align-items:center; gap:15px; margin-top:20px; }
    .testimonial-ticker .author img { inline-size:40px; block-size:40px; border-radius:50%; object-fit:cover; border:1px solid var(--color-border); }

    /* ===== FAQS ===== */
    .faq-layout { display:grid; grid-template-columns: 1fr 1.5fr; gap:100px; align-items:start; }
    .faq-layout__intro { position:sticky; top:120px; }
    .faq-layout .button { background: var(--color-dark); color: var(--color-light); }
    .faq-layout .button .button__arrow { background: var(--color-light); }
    .faq-layout .accordion__item {
        background: var(--color-bg-soft); padding-inline:30px; border:1px solid var(--color-border);
        border-radius: var(--r-md); margin-bottom:20px; transition: background-color var(--t-fast), border-color var(--t-fast);
    }
    .faq-layout .accordion__item:hover { background: var(--color-bg-mid); border-color: var(--color-text-secondary); }
    .faq-layout .accordion__item.active { background: var(--color-light); border-color: var(--color-text-primary); }
    .faq-layout .accordion__header { padding-block:25px; }
    .faq-layout .accordion__content p { padding-inline-end:30px; }

    /* ===== CONTACT + FOOTER ===== */
    .contact-footer-wrapper { padding:80px 20px 0; background: var(--color-light); }
    .contact-section {
        background: var(--color-dark); color: var(--color-light); border-radius: var(--r-lg);
        padding: 100px; max-width: var(--max-width); margin-inline:auto;
    }
    .contact-grid { display:grid; grid-template-columns: 1fr 1fr; gap:100px; align-items:flex-start; }
    .contact-info h2 { color: var(--color-light); }
    .contact-info__line {
        display:flex; justify-content:space-between; padding-block:20px; border-bottom:1px solid var(--color-accent);
    }
    .contact-info__line p { margin:0; }
    .contact-info__line .label { font-weight:600; }
    .contact-info__line .value { color: var(--color-text-light); }
    .contact-info__line .value a:hover { color: var(--color-light); }
    .contact-socials { margin-top:40px; }
    .contact-socials__links { display:flex; gap:20px; margin-top:15px; }
    .contact-socials__links a { display:block; inline-size:24px; block-size:24px; color: var(--color-text-light); transition: transform var(--t-fast), color var(--t-fast); }
    .contact-socials__links a:hover { transform: scale(1.2); color: var(--color-light); }

    .contact-form {
        background: var(--color-accent); border-radius: var(--r-md); padding:18px; color: var(--color-light);
    }
    .contact-form .form-group { margin-bottom:20px; }
    .contact-form label { display:block; margin-bottom:10px; font-weight:500; color: var(--color-text-light); }
    .contact-form label span { color:#ff5577; }
    .contact-form input, .contact-form textarea {
        inline-size:100%; padding:16px; border-radius: var(--r-sm);
        border:1px solid var(--color-text-secondary); background: var(--color-dark); color: var(--color-light); font: inherit;
        transition: border-color var(--t-fast);
    }
    .contact-form input:focus, .contact-form textarea:focus { border-color: var(--color-light); outline: none; }
    .contact-form textarea { resize: vertical; }
    .contact-form .button { background: var(--color-light); color: var(--color-dark); }
    .contact-form .button .button__arrow svg path { stroke: var(--color-dark); }

    .footer {
        background: var(--color-dark); padding:80px 40px 40px; border-radius: var(--r-lg) var(--r-lg) 0 0; margin-top:20px; position:relative;
    }
    .footer__top { display:flex; justify-content:space-between; align-items:flex-start; }
    .footer__logo { font-size:1.8rem; font-weight:700; color: var(--color-light); }
    .footer__links { display:flex; gap:80px; }
    .footer__links ul { list-style:none; }
    .footer__links li { margin-bottom:15px; }
    .footer__links a { color: var(--color-text-light); transition: color var(--t-fast); padding:6px 8px; border-radius:8px; }
    .footer__links a:hover { color: var(--color-light); background:#1a1a20; }
    .footer__bottom {
        margin-top:60px; padding-top:40px; border-top:1px solid var(--color-accent);
        display:flex; justify-content:space-between; color: var(--color-text-light); font-size:15px;
    }

    /* On-scroll animation */
    .animate-on-scroll { opacity:0; transform: translateY(40px); transition: opacity var(--t-slow), transform var(--t-slow); transition-delay: var(--animation-delay,0s); will-change: opacity, transform; }
    .animate-on-scroll.is-visible { opacity:1; transform:none; }
}

/* =========================================
   UTILITIES
========================================= */
@layer utilities {
    [data-scroll-container] { overscroll-behavior: contain; }
    @media (pointer:coarse) {
        .footer__links a, .mobile-nav a { min-height:44px; display:inline-flex; align-items:center; }
    }
}

/* =========================================
   RESPONSIVE
========================================= */
@layer responsive {
    @media (max-width:1200px) {
        :root { --section-pad: 90px; }
        .section-header { max-width: 70%; }
        .sticky-wrapper { min-height:auto; }
        .project-card {
            grid-template-columns:1fr; position:static; margin-bottom:40px; padding:40px;
            transform:none; opacity:1;
        }
        .faq-layout { grid-template-columns:1fr; }
        .faq-layout__intro { position:static; text-align:center; margin-bottom:60px; }
        .faq-layout__intro p { margin-inline:auto; }
        .contact-section { padding: 80px 60px; }
        .hero{
            grid-template-columns: minmax(420px, 1.6fr) 1.2fr;
        }
    }

    @media (max-width:992px) {
        :root { --gutter:32px; --section-pad:80px; }
        h1 { font-size: 2.8rem; }
        h2 { font-size: 2.5rem; }
        .header__nav { display:none; }
        .header__hamburger { display:block; }

        .hero{
            grid-template-columns:1fr;
            padding-top: calc(var(--header-h) + var(--hero-offset));
            min-block-size: calc(100vh - (var(--header-h) + var(--hero-offset)));
            min-height: calc(100vh - (var(--header-h) + var(--hero-offset)));
            row-gap:12px;
        }
        @supports (height: 100dvh) {.hero{ min-block-size: calc(100dvh - (var(--header-h) + var(--hero-offset))); min-height: calc(100dvh - (var(--header-h) + var(--hero-offset))); }}
        @supports (height: 100svh) {.hero{ min-block-size: calc(100svh - (var(--header-h) + var(--hero-offset))); min-height: calc(100svh - (var(--header-h) + var(--hero-offset))); }}

        .hero__content{ padding: 16px var(--gutter) 28px; max-inline-size: 48rem; margin-inline:auto; text-align:center; }
        .hero__panel{ min-block-size:42vh; border-radius: var(--r-xl) var(--r-xl) 0 0; display:block; padding:0; }
        .hero__testimonial{
            position:static; margin:10px auto 0; max-inline-size:min(560px, 92vw);
            background:color-mix(in oklab, #101014 85%, transparent);
            box-shadow:0 6px 16px rgb(0 0 0 / 18%); border-radius:var(--r-md); padding:10px 12px;
        }

        .about-intro { flex-direction:column; gap:40px; text-align:center; }
        .about-intro__title, .about-intro__content { width:100%; }
        .about-intro__content p { margin-inline:auto; }
        .stats-grid { grid-template-columns: 1fr 1fr; gap:30px; }

        .whyus-list{ grid-template-columns: 1fr; }

        .services-layout { grid-template-columns:1fr; gap:40px; position:relative; }
        .services-layout__image{
            position: relative !important; top:auto !important; height:500px; overflow:hidden; isolation:isolate; contain: paint; z-index:0; margin-block-end: 16px;
        }
        .services-layout__image img{ position: absolute !important; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: none !important; }
        .services-layout__accordion{ position: relative; z-index: 1; }

        .contact-grid { grid-template-columns:1fr; gap:60px; }
        .contact-section { padding: 60px 40px; }
        .footer__top, .footer__bottom { flex-direction:column; gap:40px; align-items:center; text-align:center; }
        .footer__links { gap:60px; }
    }

    @media (max-width:768px) {
        :root { --gutter:24px; --section-pad:64px; }

        /* Phone ticker: snap carousel */
        .ticker {
            padding-block: 24px;
            border-radius: var(--r-lg);
            -webkit-mask-image:none; mask-image:none;
        }
        .ticker__track {
            animation: none!important;
            display:grid;
            grid-auto-flow:column;
            grid-auto-columns: 80%;
            gap: 16px;
            overflow-x:auto;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling:touch;
            padding-inline: 4px;
        }
        .ticker__track::-webkit-scrollbar { height:8px; }
        .ticker__track::-webkit-scrollbar-thumb { background: #cfd5e2; border-radius: 8px; }
        .ticker__item { inline-size:auto; block-size:360px; scroll-snap-align:center; }
        .project-card { gap:28px; }
        .project-card__content h4 { font-size: clamp(1.4rem,5.2vw,2rem); }
    }

    @media (max-width:576px) {
        :root { --gutter:16px; --section-pad:56px; }

        .hero{
            row-gap:8px;
            padding-top: calc(var(--header-h) + var(--hero-offset));
            min-block-size: calc(100vh - (var(--header-h) + var(--hero-offset)));
            min-height: calc(100vh - (var(--header-h) + var(--hero-offset)));
        }
        @supports (height: 100dvh) {.hero{ min-block-size: calc(100dvh - (var(--header-h) + var(--hero-offset))); min-height: calc(100dvh - (var(--header-h) + var(--hero-offset))); }}
        @supports (height: 100svh) {.hero{ min-block-size: calc(100svh - (var(--header-h) + var(--hero-offset))); min-height: calc(100svh - (var(--header-h) + var(--hero-offset))); }}

        .hero__content { padding: 12px var(--gutter) 20px; }
        .hero__panel   { min-block-size:38vh; border-radius: var(--r-xl) var(--r-xl) 0 0; padding:0; }
        .hero__testimonial{ max-inline-size:92vw; padding:10px 12px; font-size:0.92rem; }

        :lang(ru) .hero__content h1{ font-size:clamp(1.7rem, 5.6vw, 2.2rem); line-height:1.12; }
        :lang(ru) .hero__content p { margin-block:10px 18px; }

        .whyus-item{ padding:14px 16px; }
        .whyus-icon{ inline-size:32px; block-size:32px; }

        .section-header { max-width:100%; margin-bottom:60px; }
        .stats-grid { grid-template-columns:1fr; gap:40px; }
        .ticker__item { inline-size:300px; block-size:400px; }
        .testimonial-ticker .ticker__item { inline-size:320px; }
        .project-card { padding:30px 20px; }
        .services-layout__image { height:320px; }
        .accordion__header { padding-block:18px; }
        .accordion__content p { padding-block-end:20px; }
        .service-badge{ inline-size:38px; block-size:38px; }
        .service-badge i{ font-size:1rem; }

        .contact-footer-wrapper { padding-inline:0!important; }
        .contact-section { max-width:none!important; margin:0!important; border-radius:0!important; padding:48px var(--gutter); }
        .footer { border-radius:0!important; margin-top:0; padding-inline:var(--gutter); }
    }
}