/* index.html — style specyficzne dla tej strony (wspólne w css/common.css) */

/* ===== HERO — split layout ===== */
        .hero {
            padding: 130px 24px 80px;
            position: relative; overflow: hidden;
            background: var(--color-primary-light);
        }
        .hero::before {
            content: ''; position: absolute;
            top: -160px; left: -10%; width: 700px; height: 700px;
            background: none;
            pointer-events: none;
        }
        .hero-grid {
            max-width: var(--max-width); margin: 0 auto;
            display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
        }
        .hero-text { position: relative; }
        .hero-badge {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 6px 16px; background: var(--color-primary-light); color: var(--color-primary-text);
            border-radius: 100px; font-size: 14px; font-weight: 600;
            margin-bottom: 24px; letter-spacing: 0.02em;
        }
        .hero-badge svg { flex-shrink: 0; }
        .hero h1 {
            font-size: clamp(32px,4vw,45px); font-weight: 800;
            line-height: 1.18; letter-spacing: -1.2px; color: var(--color-text); margin-bottom: 20px;
        }
        .rotating-wrapper {
            display: inline-block; position: relative; vertical-align: bottom;
            overflow: hidden; height: 1.18em; min-width: 320px;
        }
        .rotating-word {
            display: block; position: absolute; left: 0; right: 0; top: 0;
            opacity: 0; transform: translateY(60%);
            transition: opacity 0.45s ease, transform 0.45s ease;
            white-space: nowrap;
            color: var(--color-primary-text);
        }
        .rotating-word.active { opacity: 1; transform: translateY(0); }
        .rotating-word.exit { opacity: 0; transform: translateY(-60%); }
        .hero-sub {
            font-size: 16px; line-height: 1.7; color: var(--color-text);
            max-width: 480px; margin-bottom: 36px;
        }

/* ===== ZDJĘCIE W HERO + LOGOTYPY NARZĘDZI =====
   Zdjęcie z zespołem u klienta, na jego krawędziach białe plakietki (elewacja 2)
   z logotypami narzędzi, które wdrażamy — z delikatnym unoszeniem. */
        .hero-photo { position: relative; margin: 24px 24px 24px 32px; }
        .hero-photo > img {
            display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
            object-fit: cover; object-position: 45% 40%;
            border-radius: var(--md-sys-shape-corner-extra-large, 28px);
        }
        .photo-chips { position: absolute; inset: 0; pointer-events: none; }
        .photo-chip {
            position: absolute; display: flex; align-items: center; justify-content: center;
            height: 60px; padding: 10px 18px; background: #fff;
            border-radius: var(--md-sys-shape-corner-large, 16px);
            box-shadow: var(--md-sys-elevation-2);
            animation: photo-chip-float 5s ease-in-out infinite;
        }
        .photo-chips .photo-chip img { display: block; width: auto; max-height: 34px; max-width: 132px; object-fit: contain; }
        .photo-chips .photo-chip--base img { max-height: 52px; max-width: 150px; }
        .photo-chips .photo-chip--comarch img { max-height: 38px; }
        .photo-chips .photo-chip--insert img { max-height: 24px; max-width: 104px; }
        .photo-chip--base    { top: -20px;  left: 8%;   animation-delay: 0s; }
        .photo-chip--apilo   { top: 18%;    right: -20px; animation-delay: -1.3s; }
        .photo-chip--sella   { top: 46%;    left: -28px;  animation-delay: -2.6s; }
        .photo-chip--insert  { bottom: 14%; right: -20px; animation-delay: -3.9s; }
        .photo-chip--comarch { bottom: -22px; left: 30%;  animation-delay: -5.2s; }
        @keyframes photo-chip-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
        @media (prefers-reduced-motion: reduce) { .photo-chip { animation: none; } }
        /* Telefon: plakietki w jednym rzędzie na dolnej krawędzi zdjęcia. */
        @media (max-width: 860px) {
            .hero-photo { margin: 0 0 32px; }
            .hero-photo > img { aspect-ratio: 3 / 2; border-radius: var(--md-sys-shape-corner-large, 16px); }
            .photo-chips { inset: auto 0 -26px 0; display: flex; justify-content: center; gap: 6px; flex-wrap: nowrap; }
            .photo-chip { position: static; height: 40px; padding: 6px 8px; border-radius: 12px; animation: none; }
            .photo-chips .photo-chip img { max-height: 18px; max-width: 48px; }
            .photo-chips .photo-chip--base img { max-height: 28px; max-width: 52px; }
            .photo-chips .photo-chip--insert img { max-height: 13px; max-width: 48px; }
        }


/* ============================================================
   WSPÓLNE ELEMENTY SEKCJI
   Zasada: nagłówki są wyrównane do lewej i mieszczą się
   w kolumnie ok. 62 znaków. Nic nie jest wyśrodkowane
   „domyślnie” — wyśrodkowana jest wyłącznie sekcja kontaktu.
   ============================================================ */
        .section-header { max-width: 760px; margin-bottom: 44px; }
        .section-header h2 { font-size: clamp(28px,3.6vw,36px); font-weight: 800; letter-spacing: -0.8px; line-height: 1.22; margin-bottom: 12px; }
        .section-header p { font-size: 16px; color: var(--color-text); line-height: 1.7; max-width: 62ch; }
        .section-label {
            display: block; font-size: 14px; font-weight: 700;
            color: var(--color-text-muted); text-transform: none;
            letter-spacing: 0; margin-bottom: 10px;
        }

/* ===== PASEK KLIENTÓW — logotypy pod nagłówkiem =====
   Rząd jest statyczny, bo przy kilku logotypach przewijanie wygląda
   na próbę ukrycia, że jest ich mało. Gdy uzbiera się osiem lub więcej,
   dopisz do .clients-track:
        width: max-content; flex-wrap: nowrap;
        animation: clients-scroll 45s linear infinite;
   i zduplikuj komplet <img> w treści (drugi zestaw z aria-hidden="true"),
   bo bez kopii pętla przeskoczy w połowie. */
        .clients {
            padding: 24px; background: var(--color-surface);
            border-top: 1px solid var(--color-border);
            border-bottom: 1px solid var(--color-border);
        }
        .clients-inner {
            max-width: var(--max-width); margin: 0 auto;
            display: grid; grid-template-columns: auto minmax(0, 1fr);
            gap: 36px; align-items: center;
        }
        .clients-label {
            font-size: 14px; font-weight: 700; text-transform: none;
            letter-spacing: 0; color: var(--color-text-muted); white-space: nowrap;
        }
        .clients-viewport {
            overflow: hidden;
        }
        /* Pasek przewija się w pętli. W treści jest TYLKO JEDEN komplet
           logotypów — kopię potrzebną do bezszwowej pętli dokłada skrypt
           w js/index.js. Dzięki temu przy podmianie pliku edytujesz jedno
           miejsce, a nie dwa. */
        .clients-track {
            display: flex; flex-wrap: nowrap; align-items: center;
            gap: 46px; width: max-content;
            animation: clients-scroll 48s linear infinite;
        }
        .clients-viewport:hover .clients-track { animation-play-state: paused; }
        @keyframes clients-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

        .clients-track img {
            height: 40px; width: auto;
            max-width: 138px; object-fit: contain; object-position: left center;
            flex-shrink: 0;
            /* Logotypy klientów w skali szarości — jednolity pas, który nie konkuruje
               z przyciskami. Kolor wraca po najechaniu. */
            filter: grayscale(1); opacity: 0.6;
            transition: filter 0.2s, opacity 0.2s;
        }
        /* Logotyp dwuwierszowy przy tej samej wysokości robi się nieczytelny —
           dostaje więcej wysokości, żeby optycznie ważyć tyle samo co napis
           jednowierszowy. Dopisz tę klasę każdemu logotypowi „na dwa piętra". */
        .clients-track img.is-stacked { height: 58px; }
        .clients-track img:hover { filter: none; opacity: 1; }

        @media (prefers-reduced-motion: reduce) {
            .clients-track { animation: none; flex-wrap: wrap; width: auto; gap: 24px 40px; }
        }
        @media (max-width: 720px) {
            .clients-inner { grid-template-columns: minmax(0, 1fr); gap: 14px; }
            .clients-track { gap: 34px; }
            .clients-track img { height: 34px; max-width: 112px; }
            .clients-track img.is-stacked { height: 48px; }
        }

/* ===== ZNASZ TO Z WŁASNEGO PODWÓRKA — lista, nie kafle ===== */
        .pain-section { padding: 84px 24px 72px; }
        .pain-inner {
            max-width: var(--max-width); margin: 0 auto;
            display: grid; grid-template-columns: minmax(240px, 350px) 1fr;
            gap: 56px; align-items: start;
        }
        .pain-lead h2 { font-size: clamp(28px,3.4vw,36px); font-weight: 800; letter-spacing: -0.8px; line-height: 1.2; margin-bottom: 14px; }
        .pain-lead p { font-size: 16px; color: var(--color-text); line-height: 1.75; }
        .pain-list { list-style: none; counter-reset: pain; border-top: 1px solid var(--color-border); }
        .pain-list li {
            counter-increment: pain; position: relative;
            padding: 24px 0 24px 48px; border-bottom: 1px solid var(--color-border);
        }
        .pain-list li::before {
            content: "0" counter(pain); position: absolute; left: 0; top: 27px;
            font-size: 14px; font-weight: 700; letter-spacing: 0.06em; color: var(--color-text-muted);
        }
        .pain-said { font-size: 16px; font-weight: 700; color: var(--color-text); line-height: 1.5; margin-bottom: 7px; }
        .pain-cost { font-size: 16px; color: var(--color-text); line-height: 1.75; max-width: 60ch; }
        @media (max-width: 880px) {
            .pain-inner { grid-template-columns: 1fr; gap: 28px; }
        }

/* ===== NA JAKIM JESTEŚ ETAPIE — rozgałęzienie na trzy ścieżki ===== */
        .stage-section { padding: 76px 24px; background: var(--color-surface); }
        .stage-inner { max-width: var(--max-width); margin: 0 auto; }
        .stage-inner .section-header { margin-bottom: 32px; }
        .stage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
        .stage-card {
            display: flex; flex-direction: column;
            border: 1px solid var(--color-border); border-radius: var(--radius-lg);
            background: var(--color-bg); padding: 30px 26px; text-decoration: none; color: inherit;
            transition: border-color 0.25s, box-shadow 0.25s;
        }
        .stage-card:hover { border-color: var(--color-primary); }
        .stage-quote {
            font-size: 16px; font-style: italic; color: var(--color-text); line-height: 1.6;
            padding-left: 14px; border-left: 3px solid var(--color-primary); margin-bottom: 18px;
        }
        .stage-card h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; margin-bottom: 8px; }
        .stage-card p { font-size: 16px; color: var(--color-text); line-height: 1.65; margin-bottom: 20px; }
        .stage-go {
            margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
            font-size: 14px; font-weight: 700; color: var(--color-primary-text); text-decoration: none;
        }
        .stage-card:hover .stage-go svg { transform: translateX(4px); }
        .stage-go svg { transition: transform 0.2s; }
        .stage-note {
            margin-top: 26px; padding-left: 16px; border-left: 2px solid var(--color-border);
            display: flex; align-items: center; gap: 10px;
            font-size: 16px; color: var(--color-text-secondary);
        }
        .stage-note svg { color: var(--color-text-muted); flex-shrink: 0; }
        @media (max-width: 900px) { .stage-grid { grid-template-columns: 1fr; } }

/* ===== PASEK WEZWANIA — cichy, bez wypełnienia ===== */
        .midcta { padding: 0 24px; background: var(--color-surface); }
        .midcta-inner {
            max-width: var(--max-width); margin: 0 auto; padding: 32px 0;
            border-top: 1px solid var(--color-border);
            display: grid; grid-template-columns: 1fr minmax(300px, 400px);
            gap: 40px; align-items: center;
        }
        .midcta-text h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; margin-bottom: 5px; }
        .midcta-text p { font-size: 16px; color: var(--color-text); line-height: 1.65; max-width: 54ch; }
        .midcta-fields { display: flex; flex-wrap: wrap; gap: 8px; }
        .midcta-form input {
            flex: 1 1 150px; min-width: 0; font-family: inherit; font-size: 16px;
            padding: 11px 14px; border: 1px solid var(--color-border); border-radius: 9px;
            background: var(--color-bg); color: var(--color-text); transition: border-color 0.2s;
        }
        .midcta-form input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(59,139,219,0.12); }
        .midcta-form button {
            flex: 1 1 100%; padding: 12px 22px; background: var(--color-primary-text); color: #fff;
            border: none; border-radius: 9px; font-family: inherit; font-size: 16px;
            font-weight: 700; cursor: pointer; transition: background 0.2s;
        }
        .midcta-form button:hover { background: var(--color-primary-hover); }
        .midcta-note { margin-top: 9px; font-size: 14px; color: var(--color-text-muted); line-height: 1.5; }
        .midcta-note a { color: var(--color-text-secondary); }
        @media (max-width: 880px) { .midcta-inner { grid-template-columns: 1fr; gap: 22px; } }

/* ===== USŁUGI — wiersze rozdzielone kreską, nie trzy identyczne kafle ===== */
        .services { padding: 92px 24px; }
        .services-inner { max-width: var(--max-width); margin: 0 auto; }
        .service-rows { border-top: 1px solid var(--color-border); }
        .service-row {
            display: grid; grid-template-columns: minmax(220px, 300px) 1fr;
            gap: 48px; padding: 34px 0; border-bottom: 1px solid var(--color-border);
            align-items: start;
        }
        .service-row-head h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; line-height: 1.25; margin-bottom: 12px; }
        .service-row-body p { font-size: 16px; color: var(--color-text); line-height: 1.75; max-width: 64ch; }
        .service-row-eff {
            margin-top: 14px; padding-left: 14px; border-left: 2px solid var(--color-secondary);
            font-size: 16px; font-weight: 600; color: var(--color-text) !important;
        }
        @media (max-width: 880px) { .service-row { grid-template-columns: 1fr; gap: 14px; } }

/* ===== GDZIE UCIEKA CZAS — jedno zdanie zamiast dwunastu pigułek ===== */
        .timeleak { padding: 0 24px; background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
        .timeleak-inner {
            max-width: 900px; margin: 0 auto; padding: 30px 0;
            font-size: 16px; line-height: 1.8; color: var(--color-text);
        }
        .timeleak-inner b { color: var(--color-text); font-weight: 700; }

/* ===== BRANŻE — spis treści, nie karuzela kafli z emoji ===== */
        .industries { padding: 76px 24px; }
        .industries-inner { max-width: var(--max-width); margin: 0 auto; }
        .industries-header { max-width: 760px; margin-bottom: 36px; }
        .industries-header h2 { font-size: clamp(28px,3.6vw,36px); font-weight: 800; letter-spacing: -0.8px; line-height: 1.22; margin-bottom: 12px; }
        .industries-header p { font-size: 16px; color: var(--color-text); line-height: 1.7; max-width: 62ch; }
        .ind-index {
            list-style: none; display: grid; grid-template-columns: 1fr 1fr;
            gap: 0 56px; border-top: 1px solid var(--color-border);
        }
        .ind-index li {
            display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 12px;
            padding: 15px 0; border-bottom: 1px solid var(--color-border);
        }
        .ind-index a { font-size: 16px; font-weight: 700; color: var(--color-text); text-decoration: none; }
        .ind-index a:hover { color: var(--color-primary-text); text-decoration: underline; }
        .ind-index span { font-size: 16px; color: var(--color-text); line-height: 1.55; }
        .industries-note { margin-top: 22px; font-size: 16px; color: var(--color-text-secondary); }
        .industries-note a { color: var(--color-primary-text); font-weight: 600; }
        @media (max-width: 780px) { .ind-index { grid-template-columns: 1fr; } }

/* ===== PROCES — oś pionowa, nie cztery kółka w rzędzie ===== */
        .process { padding: 88px 24px; background: var(--color-surface); }
        .process-inner { max-width: var(--max-width); margin: 0 auto; }
        .process-steps { list-style: none; counter-reset: step; max-width: 720px; position: relative; }
        .process-steps::before {
            content: ''; position: absolute; left: 16px; top: 12px; bottom: 16px;
            width: 2px; background: var(--color-border);
        }
        .process-step { counter-increment: step; position: relative; padding: 0 0 32px 58px; }
        .process-step:last-child { padding-bottom: 0; }
        .process-step::before {
            content: counter(step); position: absolute; left: 0; top: 0;
            width: 34px; height: 34px; border-radius: 50%;
            background: var(--color-surface); border: 2px solid var(--color-primary);
            color: var(--color-primary-text); display: flex; align-items: center; justify-content: center;
            font-size: 16px; font-weight: 800;
        }
        .process-step h3 { font-size: 16px; font-weight: 700; line-height: 1.4; margin-bottom: 6px; padding-top: 4px; }
        .process-step p { font-size: 16px; color: var(--color-text); line-height: 1.75; max-width: 60ch; }

/* ===== LICZBY — zdania z liczbą, nie trzy pudełka ===== */
        .cases { padding: 80px 24px; }
        .cases-inner { max-width: var(--max-width); margin: 0 auto; }
        .case-numbers { border-top: 1px solid var(--color-border); margin-bottom: 32px; }
        .case-number {
            /* Stała szerokość kolumny z liczbami — wszystkie opisy zaczynają się na tej samej linii. */
            display: grid; grid-template-columns: 300px minmax(0, 1fr);
            gap: 48px; align-items: baseline;
            padding: 26px 0; border-bottom: 1px solid var(--color-border);
        }
        .cn-value { font-size: clamp(28px,4vw,36px); font-weight: 800; letter-spacing: -1.4px; line-height: 1.05; color: var(--color-primary-text); white-space: nowrap; }
        .cn-value .arrow { color: var(--color-text); font-weight: 500; margin: 0 4px; }
        .cn-value .to { color: var(--color-secondary-text); }
        .case-number dd { font-size: 16px; color: var(--color-text); line-height: 1.75; max-width: 62ch; }
        .case-number dd b { color: var(--color-text); font-weight: 700; }
        @media (max-width: 780px) { .case-number { grid-template-columns: 1fr; gap: 6px; } }

/* ===== STACJONARNIE — akapit zamiast dwunastu kafelków z miastami ===== */
        .onsite { padding: 88px 24px; background: var(--color-surface); position: relative; overflow: hidden; }
        /* Kontur Polski z miastami z listy obok (Wrocław wyróżniony) — w tle, za prawą kolumną. */
        .onsite::after {
            content: ''; position: absolute; top: 50%; transform: translateY(-50%);
            right: max(-40px, calc((100% - var(--max-width)) / 2 - 80px));
            width: 500px; aspect-ratio: 1024 / 971;
            background: url('../polska-kontur.svg') center / contain no-repeat;
            opacity: 0.24; pointer-events: none;
        }
        .onsite-inner { max-width: var(--max-width); margin: 0 auto; position: relative; z-index: 1; }
        .onsite-content { display: grid; grid-template-columns: 1.6fr 1fr; gap: 56px; align-items: start; }
        .onsite-text > p { font-size: 16px; color: var(--color-text); line-height: 1.75; margin-bottom: 14px; max-width: 62ch; }
        .onsite-text > p strong { color: var(--color-text); }
        .onsite-perks { list-style: none; margin-top: 22px; border-top: 1px solid var(--color-border); }
        .onsite-perks li {
            display: flex; align-items: flex-start; gap: 12px;
            padding: 12px 0; border-bottom: 1px solid var(--color-border);
            font-size: 16px; color: var(--color-text);
        }
        .onsite-perks li svg { flex-shrink: 0; margin-top: 3px; }
        .onsite-where { border-left: 2px solid var(--color-border); padding-left: 26px; }
        .onsite-where h3 { font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--color-text-muted); margin-bottom: 12px; }
        .onsite-cities { font-size: 16px; line-height: 1.7; color: var(--color-text); margin-bottom: 18px; }
        .onsite-anywhere { font-size: 16px; color: var(--color-text); line-height: 1.7; }
        .onsite-anywhere strong { color: var(--color-text); }
        @media (max-width: 880px) {
            .onsite-content { grid-template-columns: 1fr; gap: 32px; }
            .onsite-where { border-left: none; border-top: 2px solid var(--color-border); padding-left: 0; padding-top: 22px; }
            /* Na wąskim ekranie kontur schodzi pod listę miast, przy prawej krawędzi. */
            .onsite::after { width: 340px; top: auto; bottom: -24px; right: -64px; transform: none; opacity: 0.18; }
        }

/* ===== HERO — mikrokopia pod CTA ===== */
        .hero-cta-note { margin-top: 12px; font-size: 14px; color: var(--color-text-muted); display: flex; flex-wrap: wrap; gap: 6px 14px; }
        .hero-cta-note span { display: inline-flex; align-items: center; gap: 6px; }
        .hero-cta-note svg { color: var(--color-secondary-text); flex-shrink: 0; }

/* ===== SEKCJA KONTAKTU — jedyne wyśrodkowane miejsce ===== */
        .cta-section { padding: 96px 24px; }
        .cta-inner {
            max-width: 800px; margin: 0 auto;
            background: var(--color-primary-text);
            border-radius: 28px; padding: 56px 48px 48px; text-align: center;
            position: relative; overflow: hidden;
        }
        .cta-inner::before { content:''; position:absolute; top:-60px; right:-60px; width:240px; height:240px; background:rgba(255,255,255,0.08); border-radius:50%; }
        .cta-inner h2 { font-size:clamp(24px,4vw,32px); font-weight:800; color:#fff; margin-bottom:12px; letter-spacing:-0.5px; position:relative; }
        .cta-inner > p { font-size:16px; color:rgba(255,255,255,0.92); margin-bottom:36px; max-width:480px; margin-left:auto; margin-right:auto; position:relative; }
        .cta-note { margin-top:20px; font-size:14px; color:rgba(255,255,255,0.7); position:relative; }
        .btn-white {
            display:inline-flex; align-items:center; gap:10px;
            padding:16px 36px; background:#fff; color: var(--color-primary-text);
            border:none; border-radius:var(--radius); font-size:16px; font-weight:700;
            cursor:pointer; text-decoration:none;
            transition:box-shadow 0.2s; position:relative;
        }

/* ===== FORMULARZ W SEKCJI KONTAKTU ===== */
        .cta-form-card {
            background: #fff; border-radius: var(--radius-lg); padding: 36px 32px;
            max-width: 520px; margin: 0 auto; text-align: left;
            position: relative;
        }
        .form-row { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:16px; }
        .form-group { margin-bottom:16px; }
        .form-group label { display:block; font-size:14px; font-weight:600; color:var(--color-text); margin-bottom:6px; }
        .form-group input, .form-group textarea, .form-group select {
            width:100%; padding:12px 16px; border:1.5px solid var(--color-border);
            border-radius:10px; font-size:16px; font-family:inherit;
            color:var(--color-text); background:var(--color-bg);
            transition:border-color 0.2s, box-shadow 0.2s; outline:none;
        }
        .form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(59,139,219,0.1); }
        .form-group textarea { resize:vertical; min-height:90px; }
        .form-submit { width:100%; margin-top:4px; }
        .form-privacy { font-size: 14px; color: var(--color-text-muted); text-align: center; margin-top: 12px; line-height: 1.5; }
        .form-privacy a { color: var(--color-text); text-decoration: underline; }

        .cta-person { display: flex; align-items: center; gap: 14px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 18px; }
        .cta-person-avatar { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; background: var(--color-primary-light); color: var(--color-primary-text); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; overflow: hidden; }
        .cta-person-avatar img { width: 100%; height: 100%; object-fit: cover; }
        .cta-person b { display: block; font-size: 16px; font-weight: 700; }
        .cta-person span { font-size: 16px; color: var(--color-text); }
        .cta-contacts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 18px; }
        .cta-contacts li { display: flex; align-items: center; gap: 9px; font-size: 16px; }
        .cta-contacts a { color: var(--color-text); text-decoration: none; font-weight: 600; }
        .cta-contacts a:hover { color: var(--color-primary-text); }
        .cta-contacts svg { color: var(--color-primary-text); flex-shrink: 0; }
        .form-reassure { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; }
        .form-reassure li { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--color-text-muted); }
        .form-reassure svg { color: var(--color-secondary-text); flex-shrink: 0; }
        .form-consents { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 4px; }
        .form-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--color-text-secondary); line-height: 1.55; }
        .form-consent input { margin-top: 2px; accent-color: var(--color-primary); width: 16px; height: 16px; flex-shrink: 0; }
        .form-consent a { color: var(--color-primary-text); }

/* ===== RESPONSIVE ===== */
        @media (max-width: 860px) {
            .hero-grid { grid-template-columns:1fr; gap:40px; }
        }
        @media (max-width: 640px) {
            .hero { padding:110px 20px 50px; }
            .hero h1 { font-size: 28px; letter-spacing: -0.8px; }
            .rotating-wrapper { min-width: 200px; }
            .btn-primary, .btn-white { width:100%; justify-content:center; }
            .cta-inner { padding:48px 24px; }
            .cta-form-card { padding: 28px 20px; }
            .form-row { grid-template-columns:minmax(0, 1fr); }
            .pain-section, .services, .process, .onsite, .industries, .cases, .cta-section { padding-left: 20px; padding-right: 20px; }
        }
        @media (max-width: 400px) {
            .hero h1 { font-size: 24px; }
            .rotating-wrapper { min-width: 160px; }
            .hero { padding: 100px 16px 40px; }
        }

/* ===== DROBIAZGI ===== */
        .hero::after {
            content: ''; position: absolute; bottom: -80px; right: 10%;
            width: 500px; height: 500px;
            background: none;
            pointer-events: none;
        }
        .btn-white:focus-visible { outline-offset: 4px; box-shadow: 0 0 0 4px rgba(59,139,219,0.2); }