* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
.safari-clip-fix { overflow: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); }
.no-scroll { overflow: hidden; height: 100vh; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.justify-long { text-align: justify; text-justify: inter-character; -webkit-hyphens: none !important; -ms-hyphens: none !important; hyphens: none !important; }

/* Skonsolidowany system nav-light / nav-dark z oryginalnymi kolorami hover */
.nav-logo { transition: filter 0.4s ease-in-out, transform 0.4s ease-in-out; }
.nav-text { transition: color 0.4s ease-in-out, transform 0.4s ease-in-out; }
.nav-light .nav-text { color: #ffffff; }
.nav-light .nav-text-hover:hover { color: #3399ff; }
.nav-light .nav-logo { filter: brightness(0) invert(1); }
.nav-dark .nav-text { color: #000000; }
.nav-dark .nav-text-hover:hover { color: #0166cc; }
.nav-dark .nav-logo { filter: brightness(0); }

.fade-in-scale { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; }
.fade-in-scale.is-visible { opacity: 1; transform: translateY(0); }
noscript .fade-in-scale { opacity: 1; transform: none; }

/* Wjazd z boku (kafelki branż) — wariant fade-in-scale używany przez ten sam
   IntersectionObserver (js/main.js: observeAnimations), tylko z translateX. */
.branze-reveal { opacity: 0; transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; }
.branze-reveal.reveal-left { transform: translateX(-60px); }
.branze-reveal.reveal-right { transform: translateX(60px); }
.branze-reveal.is-visible { opacity: 1; transform: translateX(0); }
noscript .branze-reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .fade-in-scale, .branze-reveal { transition: none !important; transform: none !important; opacity: 1 !important; }
    .success-anim-svg * { animation: none !important; transition: none !important; }
}

.success-anim-svg .envelope-group { transform-origin: center; animation: envelopeShrink 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.success-anim-svg .check-group { animation: showCheckGroup 0.1s forwards 0.5s; }
.success-anim-svg .circle-path { animation: drawPath 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.5s; }
.success-anim-svg .check-path { animation: drawPath 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.8s; }
@keyframes envelopeShrink { 0% { transform: scale(1); opacity: 1; stroke-dasharray: 200; stroke-dashoffset: 0; } 50% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(0.5); opacity: 0; stroke-dasharray: 200; stroke-dashoffset: 200; } }
@keyframes showCheckGroup { to { opacity: 1; } }
@keyframes drawPath { to { stroke-dashoffset: 0; } }
.is-success #contactForm, .is-error #contactForm { opacity: 0; pointer-events: none; transform: scale(0.95); }
.is-success #successState { opacity: 1; pointer-events: auto; }
.is-success #successTitle, .is-success #successDesc { transform: scale(1); opacity: 1; }
/* Etykieta selecta zostaje uniesiona po wyborze opcji — spójnie z polami tekstowymi (peer-valid nie istnieje w przyciętym buildzie) */
#service:valid ~ label { top: 0.5rem; font-size: 0.75rem; line-height: 1rem; }

.is-error #errorState { opacity: 1; pointer-events: auto; }
.is-error #errorTitle, .is-error #errorDesc, .is-error #retryBtn { transform: scale(1); opacity: 1; }

@media (max-width: 767px) {
    .justify-long {
        text-align: left !important;
        text-justify: auto !important;
        letter-spacing: normal !important;
    }
    .mobile-justify {
        text-align: justify !important;
        text-justify: inter-character !important;
        letter-spacing: 0.015em !important;
    }
    #successDesc, #errorDesc {
        text-align: center !important;
        text-justify: auto !important;
        letter-spacing: normal;
    }
}

.group.is-highlighted > div.bg-white {
    transform: scale(1.02);
    box-shadow: 0 0 0 2px #0166cc; 
}
.group.is-highlighted h3 {
    color: #0166cc;
}
.group.is-highlighted .rounded-full.bg-\[\#0166cc\] {
    transform: scale(1.1);
}

/* Klasy Tailwind użyte w sekcji „Wybrane oferty" i na kartach usług, których brakuje
   w statycznie zbudowanym (niegenerowanym) /css/style.css. Wartości = domyślna skala Tailwind. */
.scroll-mt-32 { scroll-margin-top: 8rem; }
.mt-12 { margin-top: 3rem; }
.mb-5 { margin-bottom: 1.25rem; }

/* Placeholder w miejscu grafiki — sekcja/usługa w trakcie budowy (tymczasowo, zamiast zdjęcia) */
.img-placeholder {
    width: 100%;
    min-height: 18rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.75rem;
    padding: 2rem;
    background-color: #ffffff;
    color: #9ca3af;
}
@media (min-width: 1024px) {
    .img-placeholder { position: absolute; inset: 0; min-height: 0; }
}
.img-placeholder svg { width: 2.5rem; height: 2.5rem; }
.img-placeholder .ph-title { font-size: 0.9375rem; font-weight: 500; color: #6b7280; }
.img-placeholder .ph-sub { font-size: 0.8125rem; color: #9ca3af; }

.toc-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #e5e7eb transparent;
}
.toc-scrollbar::-webkit-scrollbar {
    width: 4px;
}
.toc-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.toc-scrollbar::-webkit-scrollbar-thumb {
    background: #e5e7eb;
    border-radius: 4px;
}
.toc-scrollbar:hover::-webkit-scrollbar-thumb {
    background: #d1d5db;
}

/* Smart Sticky Header */
#nav-container {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.4s ease-in-out;
}
.nav-sticky.nav-dark {
    background-color: #ffffff;
}
.nav-sticky.nav-light {
    background-color: #000000;
}

/* Menu w stopce — kopia nawigacji w wersji szarej (logo + tekst), hover 1:1 jak w nav */
.footer-nav .nav-text { color: #374151; }
.footer-nav .nav-text-hover:hover { color: #0166cc; }
.footer-nav .nav-logo { filter: brightness(0) invert(0.26); }

/* Połowiczny górny padding paska z małymi kafelkami w kartach usług.
   Tailwind-equivalent (te warianty pt-* nie są w skompilowanym style.css);
   custom.css ładuje się po style.css, więc nadpisuje górę z p-8/md:p-12/lg:p-16. */
.pt-4 { padding-top: 1rem; }
@media (min-width: 768px)  { .md\:pt-6 { padding-top: 1.5rem; } }
@media (min-width: 1024px) { .lg\:pt-8 { padding-top: 2rem; } }

/* Przycisk pod grafiką w kartach usług na stronie głównej (te warianty też brakują
   w skompilowanym style.css). */
@media (min-width: 768px)  { .md\:p-8 { padding: 2rem; } }
@media (min-width: 1024px) {
    .lg\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
    .lg\:pb-10 { padding-bottom: 2.5rem; }
    .lg\:pt-4 { padding-top: 1rem; }
    .lg\:w-auto { width: auto; }
    .lg\:justify-end { justify-content: flex-end; }
}

/* Przycisk "Darmowa wycena" w karcie usługi wyrównany do ostatniego małego kafelka.
   Przycisk leży w gridzie identycznym z kafelkami i startuje w ostatniej kolumnie. */
@media (min-width: 640px)  { .sm\:col-start-2 { grid-column-start: 2; } }
@media (min-width: 1024px) { .lg\:col-start-4 { grid-column-start: 4; } }

/* Minimalne cele dotykowe 44×44 px (Apple HIG). Tailwind-equivalent — gdyby kiedyś
   przebudować style.css, Tailwind wygeneruje identyczne reguły. */
.min-h-\[44px\] { min-height: 44px; }
.min-w-\[44px\] { min-width: 44px; }

/* ============================================================
   INTERAKTYWNA SIATKA WEKTOROWA (hero canvas)
   JS wstrzykuje <canvas id="hero-canvas"> zamiast video.
   Canvas wypełnia cały kontener (100% × 100%); rysowanie w JS.
   Crosshair tylko na desktopie z myszą; linki/przyciski wracają
   do pointer żeby nie gubić UX. Brak animacji przy reduced-motion.
   ============================================================ */
#hero-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
}

@media (hover: hover) and (pointer: fine) {
    #hero { cursor: crosshair; }
    #hero a, #hero button { cursor: pointer; }
}

/* ============================================================
   WARSTWA MIKROINTERAKCJI
   Całość żyje tu (custom.css) + w js/main.js — bez zmian w markupie.
   Zasady: tylko transform/opacity (GPU), efekty kursorowe wyłącznie
   na desktopie z myszą (@media hover+fine), pełne poszanowanie
   prefers-reduced-motion. Nic nie obciąża telefonów ani tabletów.
   ============================================================ */

/* 1. Zoom obrazka w ramce — tylko karty artykułów (rozróżnione po href, bez
   zmian w markupie). Karty projektów portfolio mają zamiast tego tilt 3D
   (patrz niżej) — to ich jedyny hover, bez zoomu obrazka. */
a.project-card[href^="/artykuly"] img { transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }

@media (hover: hover) and (pointer: fine) {
    a.project-card[href^="/artykuly"]:hover img { transform: scale(1.06); }

    /* 2. Tilt 3D — płynny powrót karty po zejściu kursorem (transform ustawia JS) */
    .tilt-3d { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); transform-style: preserve-3d; }

    /* 3. Magnetyczne przyciski (CTA: rounded-full + px-8) — subtelny cień + unos.
       Cień daje CSS na hover; subtelne przesunięcie dokłada JS (efekt magnetyczny). */
    a[class*="rounded-full"][class*="px-8"]:hover,
    button[class*="rounded-full"][class*="px-8"]:hover {
        box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.38);
    }
}

/* 4. Scroll cue — wskaźnik „przewiń niżej" wstrzykiwany do hero na stronie głównej */
.scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 1.75rem;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    min-height: 44px;
    min-width: 44px;
    background: transparent;
    border: 0;
    color: #ffffff;
    cursor: pointer;
    transition: opacity 0.3s ease-in-out;
}
.scroll-cue__label {
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
    opacity: 0.8;
}
.scroll-cue__chevron {
    width: 22px;
    height: 22px;
    animation: scrollCueBounce 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes scrollCueBounce {
    0%, 100% { transform: translateY(0); opacity: 0.85; }
    50%      { transform: translateY(6px); opacity: 1; }
}

/* ============================================================
   WARSTWA MOBILE (dotyk)
   Tap feedback + kropki pozycji. Zoom obrazków przy scrollu robi JS.
   ============================================================ */

/* Tap feedback — wciśnięcie palcem na kartach i CTA (tylko urządzenia dotykowe) */
@media (hover: none) {
    .project-card:active {
        transform: scale(0.97);
        transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
    }
    a[class*="rounded-full"][class*="px-8"]:active,
    button[class*="rounded-full"][class*="px-8"]:active {
        transform: scale(0.96);
        transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
    }
}

/* Kropki pozycji pod karuzelami (projekty + artykuły) — JS wstrzykuje je między
   strzałki; widoczne tylko na mobile (na desktopie pozycję pokazują strzałki). */
.carousel-dots { display: flex; flex: 1; align-items: center; justify-content: center; gap: 2px; }
@media (min-width: 768px) { .carousel-dots { display: none; } }
.carousel-dot {
    -webkit-tap-highlight-color: transparent;
    background: transparent; border: 0; padding: 0;
    width: 26px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.carousel-dot::before {
    content: ""; width: 7px; height: 7px; border-radius: 999px;
    background: #c2c8d0; transition: width 0.25s ease, background 0.25s ease;
}
.carousel-dot.is-active::before { width: 18px; background: #0166cc; }

@media (prefers-reduced-motion: reduce) {
    a.project-card[href^="/artykuly"] img { transition: none !important; }
    .tilt-3d { transition: none !important; transform: none !important; }
    .scroll-cue__chevron { animation: none !important; }
    .project-card:active,
    a[class*="rounded-full"][class*="px-8"]:active,
    button[class*="rounded-full"][class*="px-8"]:active { transform: none !important; }
    .carousel-dot::before { transition: none !important; }
}
/* ============================================================
   SEKCJA OPINIE — przewijana ścianka (marquee)
   Auto-przewijanie w lewo, pauza po najechaniu (desktop), karty
   linkują do powiązanej realizacji. Komponent własny, bo mechanizm
   marquee i wewnętrzna stylistyka kart nie istnieją w przyciętym
   buildzie Tailwinda. Tylko transform (GPU). Pełne poszanowanie
   prefers-reduced-motion (zatrzymanie ruchu + ręczne przewijanie).
   ============================================================ */
.opinie-mask {
    overflow: hidden;
    /* Pionowy padding = odstęp paska od nagłówka/treści + zapas na skalowanie kart
       przy hover. Maska gradientowa działa tylko w poziomie. */
    padding: 3.5rem 0 2.5rem;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.opinie-track {
    display: flex;
    gap: 1.5rem;
    width: max-content;
    animation: opinieScroll 30s linear infinite;
    will-change: transform;
}
@keyframes opinieScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.opinie-card {
    position: relative;
    overflow: hidden;
    width: 340px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    border-radius: 2rem;
    background: #ffffff;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Treść nad dekoracyjnym cudzysłowem */
.opinie-card > * { position: relative; z-index: 1; }
/* Duży cudzysłów w tle (lewy górny róg) — klasyczny „pełny" glif z fontu
   szeryfowego (zaokrąglone kulki z ogonkami), jasny, z niskim opacity. */
.opinie-card:not(.opinie-card--cta)::before {
    content: "\201C";
    position: absolute;
    top: -4rem;
    left: 0.25rem;
    z-index: 0;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 24rem;
    line-height: 1;
    color: #1d1d1f;
    opacity: 0.06;
    pointer-events: none;
}
/* Etykieta projektu w lewym górnym rogu — niebieski monospace nad cytatem.
   Link do strony realizacji; klikalny tylko na szerokości tekstu. */
.opinie-card__tag {
    align-self: flex-start;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: #0166cc;
    line-height: 1.3;
    margin-bottom: 0.85rem;
    text-decoration: none;
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) and (pointer: fine) {
    .opinie-card__tag:hover { text-decoration: underline; text-underline-offset: 2px; }
}
/* Stanowisko/funkcja pod imieniem — szare. */
.opinie-card__role {
    font-size: 0.875rem;
    font-weight: 500;
    color: #9aa3af;
    line-height: 1.25;
    margin-top: 0.125rem;
}
.opinie-card blockquote {
    margin: 0;
    flex-grow: 1;
    font-size: 1.05rem;
    line-height: 1.65;
    color: #000000;
}
/* Stopka = link do strony osoby udzielającej opinii. */
.opinie-card__foot {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #f0f0f0;
    text-decoration: none;
    color: inherit;
}
@media (hover: hover) and (pointer: fine) {
    .opinie-card__foot:hover .opinie-card__name { color: #0166cc; }
}
.opinie-card__avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    overflow: hidden;
    background: #eef1f5;
    color: #9aa3af;
    display: flex;
    align-items: center;
    justify-content: center;
}
.opinie-card__avatar svg { width: 24px; height: 24px; }
.opinie-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.opinie-card__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: #000000;
    line-height: 1.25;
    transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Wersja robocza opinii (placeholder do podmiany na prawdziwą treść) */
.opinie-card--draft blockquote { color: #9aa3af; font-style: italic; }

/* Pojedynczy cytat klienta osadzony w białym kafelku projektu (nie w karuzeli) —
   pełna szerokość rodzica zamiast stałych 340/290px, a dekoracyjny cudzysłów
   w tle wolno wychodzić poza obrys karty zamiast być przycięty. */
.opinie-card.opinie-card--inline { width: 100%; flex-shrink: 1; overflow: visible; }

/* Niebieski kafelek CTA „Twój projekt może być następny" */
.opinie-card--cta { background: #0166cc; justify-content: flex-start; }
.opinie-card--cta .opinie-card__cta-title {
    font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em;
    line-height: 1.15; color: #ffffff;
}
.opinie-card--cta p { margin: 0.5rem 0 1.25rem; color: rgba(255, 255, 255, 0.82); line-height: 1.6; }
.opinie-btn {
    display: inline-flex; align-items: center; gap: 0.5rem; width: fit-content;
    height: 48px; padding: 0 1.5rem; border-radius: 999px;
    background: #ffffff; color: #0166cc; font-weight: 500;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.opinie-card--cta .opinie-btn { margin-top: auto; align-self: flex-end; }
.opinie-btn svg { width: 1rem; height: 1rem; }

@media (hover: hover) and (pointer: fine) {
    .opinie-mask:hover .opinie-track { animation-play-state: paused; }
    /* Hover jak na kartach projektów/artykułów: tylko skala, bez cienia */
    .opinie-card:hover { transform: scale(1.02); }
}
@media (hover: none) {
    .opinie-card:active { transform: scale(0.98); transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1); }
    /* Na dotyku CSS-owy marquee uniemożliwia ręczne przewijanie (transform, nie
       scroll). Zamiast tego natywny scroll w poziomie, a auto-przewijanie +
       pauzę przy dotyku obsługuje JS (setupOpinieMarquee). */
    .opinie-mask { overflow-x: auto; scrollbar-width: none; touch-action: pan-x; }
    .opinie-mask::-webkit-scrollbar { display: none; }
    .opinie-track { animation: none; }
}
@media (max-width: 480px) {
    .opinie-card { width: 290px; padding: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .opinie-track { animation: none; }
    .opinie-mask { overflow-x: auto; }
    .opinie-card, .opinie-card__name, .opinie-btn { transition: none !important; }
}

/* Sekcja kontakt — utility brakujące w spurgowanym buildzie Tailwinda
   (select rodzaju usługi + biały przycisk „Dodaj plik"). */
.appearance-none { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.top-2 { top: 0.5rem; }
.right-5 { right: 1.25rem; }
.text-gray-500 { color: #6b7280; }
.hover\:bg-gray-100:hover { background-color: #f3f4f6; }
#service option { background: #1a1a1a; color: #fff; }
.pt-16 { padding-top: 4rem; }

/* Sekcja „Dla kogo pracuję" (strona główna) — kafelki branż 3:1,
   nagłówek/CTA po lewej, ikona na tle z białym gradientem po prawej. */
.branze-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .branze-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }

/* Mobile-first: tekst + przycisk pełnej szerokości na górze, zdjęcie pod spodem
   (kolejność wynika z normalnego flow — body jest przed media w markupie). */
.branze-card { position: relative; display: block; border-radius: 2rem; overflow: hidden; background: #ffffff; text-decoration: none; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.branze-card__media { position: relative; width: 100%; aspect-ratio: 16 / 9; z-index: 1; background: #f5f5f7; }
.branze-card__media-fill { position: absolute; inset: 0; overflow: hidden; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.branze-card__media-fill img { width: 100%; height: 100%; object-fit: cover; display: block; }
.branze-card__body { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem 1.25rem; }
.branze-card__cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; width: 100%; height: 2.75rem; padding: 0 2rem; border-radius: 999px; background: #0166cc; color: #ffffff; font-size: 0.875rem; font-weight: 500; transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.branze-card__cta svg { width: 0.875rem; height: 0.875rem; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }

/* Desktop (≥768px, branze-grid robi się 2-kolumnowy): powrót do układu
   poziomego 2,5:1 — tekst po lewej (60%), kwadratowe zdjęcie po prawej (40%). */
@media (min-width: 768px) {
    .branze-card { aspect-ratio: 2.5 / 1; }
    .branze-card__media { position: absolute; inset: 0; left: auto; width: 40%; aspect-ratio: auto; }
    .branze-card__body { position: absolute; inset: 0; width: 60%; height: 100%; justify-content: space-between; gap: 0; padding: 1.25rem 0.5rem 1.25rem 1.5rem; }
    .branze-card__cta { width: fit-content; height: 2.25rem; padding: 0 2rem; font-size: 0.8125rem; }
}

@media (hover: hover) and (pointer: fine) {
    .branze-card:hover { transform: scale(1.02); }
    .branze-card:hover .branze-card__media-fill { transform: scale(1.08); }
    .branze-card:hover .branze-card__cta { background: #015bb5; }
    .branze-card:hover .branze-card__cta svg { transform: translateX(2px); }
}
@media (hover: none) {
    .branze-card:active { transform: scale(0.98); transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1); }
}
@media (prefers-reduced-motion: reduce) {
    .branze-card, .branze-card__media-fill, .branze-card__cta, .branze-card__cta svg { transition: none !important; }
}