/* ====================================================
   AI WEB STUDIO — GLOBAL DESIGN SYSTEM v7
   Używany przez:branze/*.html, omniseo.html
   Aktualizacja: 22.04.2026
==================================================== */

/* ===== AKCENT (indygo, spójny ze strona glowna) ===== */
:root {
    --accent:#8C5A0F;      /* tla, obramowania, elementy nietekstowe */
    --accent-rgb:140,90,15;
    --accent2:#8C5A0F;     /* tekst/ikony na ciemnym tle - jasniejszy odcien, kontrast AA */
    --accent2-rgb:140,90,15;
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
::selection { background: var(--accent); color: #fff; }

/* ===== BASE ===== */
body {
    background:#F7F5F2;
    color:#1A1D23;
    font-family:'Outfit', sans-serif;
    /* clip, NIE hidden (11.08.2026). `overflow-x:hidden` na body tworzy kontener
       przewijania i UNIEWAŻNIA `position:sticky` w całym drzewie — dlatego przypięte
       sceny działały wyłącznie na index.html, który nadpisywał to u siebie na `clip`.
       Podstrony miały poprawny CSS sticky i zerowy efekt. `clip` przycina tak samo,
       ale nie tworzy kontenera, więc sticky działa. Fallback niżej dla starych silników. */
    overflow-x:clip;
    cursor:none;
    -webkit-font-smoothing:antialiased;
}
@supports not (overflow:clip) { body { overflow-x:hidden; } }

@media (max-width:768px) {
    body { cursor:auto; }
    #custom-cursor { display:none !important; }
}

/* ===== GRAIN TEXTURE ===== */
body::after {
    content:'';
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:9999;
    opacity:0.028;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:#F7F5F2; }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 99px; }

/* ===== PROGRESS BAR ===== */
#progress-bar {
    position: fixed; top: 0; left: 0; height: 2px;
    background: var(--accent); width: 0%; z-index: 9998;
    transition: width 0.08s linear;
}

/* ===== CUSTOM CURSOR ===== */
#custom-cursor {
    position:fixed; top:0; left:0;
    width:20px; height:20px;
    background:white; border-radius:50%;
    pointer-events:none;
    mix-blend-mode:difference;
    z-index:10000;
    transform:translate(-50%, -50%);
    transition:width 0.25s ease, height 0.25s ease;
}
body.cursor-hover #custom-cursor { width:52px; height:52px; }

/* ===== GRID BACKGROUND ===== */
.bg-grid {
    background-color:#F7F5F2;
    background-image:radial-gradient(ellipse 80% 60% at 60% 0%, rgba(var(--accent-rgb),0.14) 0%, transparent 65%),
        linear-gradient(rgba(var(--accent-rgb),0.22) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--accent-rgb),0.22) 1px, transparent 1px);
    background-size:100% 100%, 64px 64px, 64px 64px;
}

/* ===== MARQUEE ===== */
@keyframes marquee-left {
    0% { transform:translateX(0); }
    100% { transform:translateX(-50%); }
}
.marquee-track { display:inline-flex; animation:marquee-left 30s linear infinite; white-space:nowrap; will-change:transform; }
.marquee-wrap { overflow:hidden; }

/* ===== REVEAL ANIMATION ===== */
.reveal {
    opacity:0; transform:translateY(22px);
    transition:opacity 0.5s cubic-bezier(0.16,1,0.3,1), transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.reveal.on { opacity:1; transform:none; }
.reveal.delay-1 { transition-delay:0.06s; }
.reveal.delay-2 { transition-delay:0.12s; }
.reveal.delay-3 { transition-delay:0.18s; }

/* ===== TEXT STROKE ===== */
.text-stroke {
    color:transparent;
    -webkit-text-stroke:1.5px #585D66;
    transition:color 0.4s, -webkit-text-stroke-color 0.4s;
}
.text-stroke:hover { color:var(--accent2); -webkit-text-stroke-color:var(--accent2); }
.text-stroke-dark {
    color:transparent;
    -webkit-text-stroke:1.5px #585D66;
}

/* ===== SECTION LABEL ===== */
.label {
    display:inline-block;
    font-size:0.68rem; font-weight:700;
    letter-spacing:0.16em; text-transform:uppercase;
    color:var(--accent2);
    /* 18.08.2026: etykieta bez pigułki - jak w scenach (spojnosc.css) */
    border:0; padding:0; border-radius:0;
    margin-bottom:1.5rem;
}

/* ===== PULSE DOT ===== */
@keyframes pulse {
    0%, 100% { opacity:1; transform:scale(1); }
    50% { opacity:0.4; transform:scale(0.75); }
}

/* ===== BUTTONS ===== */
.btn {
    display:inline-flex; align-items:center; gap:0.5rem;
    font-family:'Space Grotesk', sans-serif; font-weight:700;
    font-size:0.86rem; letter-spacing:0.04em; text-transform:none;   /* 18.08.2026: pigułka, bez wersalików (spojnosc.css) */
    padding:15px 30px; border-radius:999px;
    text-decoration:none; cursor:none;
    transition:all 0.25s;
}
.btn-acid { background: var(--accent); color: #fff; }
.btn-acid:hover { background:#6E4709; color:#FFFFFF; }
.btn-ghost { border:1px solid rgba(26,29,35,0.25); color:#1A1D23; }
.btn-ghost:hover { border-color:var(--accent2); color:var(--accent2); }
.btn:focus-visible, .btn-accent:focus-visible, .g-nav-links a:focus-visible, .drop-link:focus-visible {
    outline:2px solid var(--accent2);
    outline-offset:3px;
}

/* ===== CARDS ===== */
.card {
    background:rgba(26,29,35,0.035);
    border:1px solid rgba(26,29,35,0.08);
    border-top:1px solid rgba(26,29,35,0.14);
    border-radius:16px;   /* 18.08.2026: jeden promień kart w serwisie (spojnosc.css) */
    transition:border-color 0.3s, border-top-color 0.3s, transform 0.3s;
}
.card:hover { border-color:rgba(var(--accent-rgb),0.25); border-top-color:var(--accent); transform:translateY(-3px); }

/* ===== NAV ===== */
.g-nav {
    position:fixed; top:0; left:0; right:0; z-index:150;
    padding:1.4rem 3rem;
    display:flex; justify-content:space-between; align-items:center;
    background:rgba(26,29,35,0.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid rgba(26,29,35,0.05); color:white;
}
.g-nav-logo {
    font-family:'Space Grotesk', sans-serif; font-weight:800;
    font-size:1.25rem; letter-spacing:-0.02em;
    text-decoration:none; color:inherit;
    display:flex; align-items:center; gap:0.5rem;
}
.g-nav-logo .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent); animation: pulse 2s infinite; flex-shrink: 0;
}
.g-nav-links {
    display:flex; gap:2.5rem; align-items:center;
    font-size:0.78rem; font-weight:700;
    letter-spacing:0.1em; text-transform:uppercase;
}
.g-nav-links a {
    color:inherit; text-decoration:none;
    opacity:0.65; transition:opacity 0.2s;
}
.g-nav-links a:hover { opacity:1; }
/* "jestes tutaj" — do 11.08 menu nie pokazywalo aktywnej strony na zadnej z 21 podstron.
   Znacznik aria-current ustawia global.js wg adresu, wiec dziala tez dla wpisow inline. */
.g-nav-links a[aria-current="page"],
.g-nav-links a[aria-current="true"] {
    opacity:1 !important; position:relative;
}
.g-nav-links a[aria-current="page"]::after,
.g-nav-links a[aria-current="true"]::after {
    content:""; position:absolute; left:0; right:0; bottom:-7px; height:2px;
    background:var(--accent2); border-radius:2px;
}
/* galaz ("jestes w tej sekcji") slabiej niz konkretna strona — inaczej oba
   wskazniki wygladalyby identycznie i znowu nie byloby wiadomo, gdzie sie jest */
.g-nav-links a[aria-current="true"]::after { opacity:0.45; }
.g-nav-btns { display:flex; gap:0.75rem; align-items:center; }

/* ===== NAV MOBILE (31.07) — .g-nav-links znika pod 768px bez zamiennika,
   z telefonu nie dalo sie przejsc na zadna podstrone z tych 16 stron. Ten sam
   sprawdzony wzorzec co index.html (29.07): burger + wysuwany panel na cala
   szerokosc, zamyka sie po kliknieciu linku / Esc / kliknieciu poza panelem. */
/* 44x44 (nie 40) — minimalne pole dotyku wg WCAG 2.5.8; zmierzone 11.08 na 390px.
   position+z-index: panel menu jest DZIECKIEM <nav> i ma z-index 149, wiec bez tego
   przykrywal burgera i logo — po otwarciu menu na telefonie nie bylo widac X. */
.g-nav-burger { display:none; align-items:center; justify-content:center; gap:4px;
    flex-direction:column; width:44px; height:44px; padding:0; border:0; cursor:pointer;
    background:transparent; border-radius:8px; flex:none;
    position:relative; z-index:151; }
.g-nav-burger span { display:block; width:20px; height:2px; border-radius:2px;
    background:#FFFFFF; transition:transform .28s cubic-bezier(.2,.7,.2,1), opacity .2s ease; }
.g-nav-burger[aria-expanded="true"] span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.g-nav-burger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.g-nav-burger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
.g-nav-burger:focus-visible { outline:2px solid var(--accent2); outline-offset:2px; }
/* logo tez musi zostac nad panelem menu — inaczej po otwarciu znika cala gora paska */
.g-nav-logo, nav > a:first-of-type { position:relative; z-index:151; }

.g-nav-mobile { display:flex; flex-direction:column; gap:2px;
    position:fixed; top:0; left:0; right:0; z-index:149;
    padding:6.5rem 1.5rem 1.5rem; background:rgba(26,29,35,0.98);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(26,29,35,0.08);
    max-height:100vh; overflow-y:auto; }
.g-nav-mobile[hidden] { display:none; }
.g-nav-mobile a { padding:14px 10px; text-decoration:none; color:#1A1D23;
    font-family:'Space Grotesk', sans-serif; font-size:1.05rem; font-weight:700;
    text-transform:uppercase; letter-spacing:0.04em;
    border-radius:8px; transition:background .2s ease; }
.g-nav-mobile a:hover, .g-nav-mobile a:focus-visible { background: rgba(var(--accent-rgb),0.1); }
.g-nav-mobile a[aria-current="page"] { background: rgba(var(--accent-rgb),0.14);
    box-shadow: inset 3px 0 0 var(--accent2); }
.g-nav-mobile .g-nav-mobile-cta { margin-top: 10px; text-align: center; color: #fff;
    background: var(--accent); font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .g-nav-burger span { transition:none; } }

/* ===== NAV DROPDOWN ===== */
.nav-item { position:relative; }
.nav-dropdown {
    position:absolute; top:100%; left:0;
    margin-top:12px;
    background:#F7F5F2; border:1px solid rgba(26,29,35,0.12);
    border-radius:8px; padding:0.6rem; min-width:260px;
    opacity:0; pointer-events:none;
    transition:opacity 0.2s ease;
    transition-delay:0.15s;
    z-index:200;
    box-shadow:0 12px 40px rgba(26,29,35,0.85);
    mix-blend-mode:normal;
    isolation:isolate;
}
/* Mega-menu: 2 karty kategorii u gory + siatka 9 obszarow pod kreska (14.08).
   left:0 zamiast wysrodkowania pod triggerem - przy szerokosci ~640px
   wysrodkowanie wypychalo panel poza lewa krawedz okna na wezszych desktopach
   (zmierzone przy 1024px, progu przelaczenia na menu mobilne). */
.nav-dropdown--mega { min-width:640px; max-width:calc(100vw - 3rem); padding:0.85rem; }
.nav-dropdown-dzial { display:flex; flex-direction:column; gap:0.15rem; }
.nav-dropdown-obszary {
    display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
    margin-top:0.6rem; padding-top:0.7rem;
    border-top:1px solid rgba(26,29,35,0.10);
}
.nav-dropdown-etykieta {
    font-family:'Space Grotesk',sans-serif; font-size:0.64rem; font-weight:700;
    letter-spacing:0.12em; text-transform:uppercase; color:#585D66;
    padding:0.4rem 0.75rem 0.3rem;
}
.drop-link-mini {
    display:flex; gap:0.55rem; align-items:center;
    padding:0.55rem 0.7rem; border-radius:4px;
    text-decoration:none; color:rgba(26,29,35,0.78);
    font-size:0.78rem; font-weight:600; transition:background 0.2s, color 0.2s;
}
.drop-link-mini:hover, .drop-link-mini:focus-visible { background:rgba(26,29,35,0.06); color:var(--accent2); }
.drop-link-mini i { font-size:15px; color:var(--accent2); flex-shrink:0; }
.nav-dropdown, .nav-dropdown * { mix-blend-mode:normal !important; }
/* Niewidzialny most między triggerem a dropdownem — łapie hover w gap */
.nav-dropdown::before {
    content:""; position:absolute; top:-16px; left:0; right:0; height:16px;
}
/* focus-within — bez tego rozwijane menu otwieral WYLACZNIE hover myszy.
   Zmierzone 11.08: focus klawiatura na "Oferta" dawal opacity 0 / pointer-events none,
   czyli z klawiatury (i czesci czytnikow ekranu) podmenu bylo nieosiagalne. WCAG 2.1.1. */
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown,
.nav-dropdown:hover { opacity:1; pointer-events:all; transition-delay:0s; }
.drop-link {
    display:flex; gap:0.75rem; align-items:center;
    padding:0.7rem 0.75rem; border-radius:2px;
    text-decoration:none; color:rgba(26,29,35,0.85);
    font-size:0.82rem; transition:background 0.2s, color 0.2s;
}
.drop-link:hover { background:rgba(26,29,35,0.05); color:var(--accent2); }
.drop-link svg { width:16px; height:16px; flex-shrink:0; color:var(--accent2); }
.drop-link strong { display:block; color:#1A1D23; font-size:0.82rem; font-weight:700; }
.drop-link small { font-size:0.72rem; color:#585D66; }

/* ===== FAQ ===== */
.faq-item { border-bottom:1px solid rgba(26,29,35,0.07); }
.faq-btn {
    width:100%; background:none; border:none;
    color:#1A1D23; font-family:'Space Grotesk', sans-serif;
    font-size:1rem; font-weight:700;
    text-align:left; padding:1.4rem 0;
    display:flex; justify-content:space-between; align-items:center;
    cursor:none; gap:1rem;
}
.faq-icon { color:var(--accent2); flex-shrink:0; font-size:1.4rem; transition:transform 0.3s; }
.faq-btn.open .faq-icon { transform:rotate(45deg); }
.faq-body {
    max-height:0; overflow:hidden;
    transition:max-height 0.4s cubic-bezier(0.16,1,0.3,1), padding 0.3s;
    font-size:0.88rem; line-height:1.75; color:#585D66;
}
.faq-body.open { max-height:500px; padding-bottom:1.5rem; }

/* ===== FORM ===== */
.form-label { display:block; font-size:0.7rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:rgba(26,29,35,0.85); margin-bottom:0.5rem; }
.form-input, .form-textarea {
    width:100%;
    background:rgba(26,29,35,0.04);
    border:1px solid rgba(26,29,35,0.1);
    border-radius:8px; padding:13px 16px;   /* 18.08.2026: 2px → 8px (spojnosc.css) */
    color:#1A1D23; font-family:'Outfit', sans-serif; font-size:0.9rem;
    outline:none; transition:border-color 0.25s;
}
.form-input:focus, .form-textarea:focus { border-color:var(--accent); }
.form-input::placeholder, .form-textarea::placeholder { color:#585D66; }
.form-textarea { resize:vertical; min-height:110px; }

/* ===== SECTION LAYOUT ===== */
section + section { border-top:1px solid rgba(var(--accent-rgb),0.12); }

/* ===== TYPOGRAPHY ===== */
section h2 {
    /* 18.08.2026 - tokeny z assets/css/spojnosc.css: waga 500, bez wersalików (było 800 WERSALIKI 4.5rem) */
    font-family:'Space Grotesk', sans-serif;
    font-size:clamp(2rem, 4.2vw, 3.6rem);
    font-weight:500;
    text-transform:none;
    letter-spacing:-0.03em;
    line-height:1.05;
    margin-bottom:2rem;
}
section h3 {
    font-family:'Space Grotesk', sans-serif;
    font-size:1.1rem; font-weight:700;
    letter-spacing:-0.01em; line-height:1.35;
}
section p { font-size:0.95rem; line-height:1.9; }

/* ===== HERO ===== */
.page-hero {
    position:relative; width:100%; min-height:100svh;
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:6rem 4rem; overflow:hidden;
}

/* ===== STICKY MOBILE BAR ===== */
.sticky-bar {
    position:fixed; bottom:0; left:0; right:0; z-index:200;
    display:none;
    background:#F7F5F2;
    border-top:1px solid rgba(26,29,35,0.08);
    padding:10px 12px; gap:10px;
}
@media (max-width:768px) { .sticky-bar { display:flex; } }

/* ===== IMG HOVER ===== */
.img-wrap { overflow:hidden; }
.img-wrap img {
    transition:transform 0.8s cubic-bezier(0.16,1,0.3,1), filter 0.6s;
    filter:grayscale(50%);
}
.img-wrap:hover img { transform:scale(1.06); filter:grayscale(0%); }

/* ===== STAT BOX ===== */
.stat-box {
    border-left:2px solid rgba(var(--accent-rgb),0.3);
    padding-left:1.5rem;
}
.stat-num {
    font-family:'Space Grotesk', sans-serif;
    font-size:2.8rem; font-weight:800; color:#1A1D23; line-height:1;
}
.stat-label { font-size:0.72rem; color:#585D66; text-transform:uppercase; letter-spacing:0.14em; margin-top:0.3rem; }

/* ===== STEP LIST ===== */
.step-item {
    display:flex; gap:2rem; align-items:flex-start;
    padding:2rem 0; border-bottom:1px solid rgba(26,29,35,0.06);
}
.step-num {
    font-family:'Space Grotesk', sans-serif;
    font-size:0.72rem; font-weight:700;
    letter-spacing:0.14em; color:#585D66;
    flex-shrink:0; padding-top:0.25rem;
}
.step-content h3 { color:#1A1D23; margin-bottom:0.5rem; }
.step-content p { color:#585D66; font-size:0.88rem; }

/* ===== BRANŻE ROW ===== */
.branze-row {
    display:grid;
    grid-template-columns:80px 1fr 1fr 48px;
    align-items:center; gap:2rem;
    padding:2.5rem 0;
    border-top:1px solid rgba(26,29,35,0.08);
    text-decoration:none; color:#1A1D23;
    transition:background 0.22s;
}
.branze-row:last-child { border-bottom:1px solid rgba(26,29,35,0.08); }
.branze-row:hover { background: rgba(var(--accent-rgb),0.04); }
.branze-row:hover .branze-num { color:var(--accent2); }
.branze-row:hover .branze-arrow { color:var(--accent2); transform:translate(3px,-3px); }
.branze-num { font-family:'Space Grotesk', sans-serif; font-size:0.72rem; font-weight:700; letter-spacing:0.14em; color:#585D66; transition:color 0.22s; }
.branze-name { font-family:'Space Grotesk', sans-serif; font-size:clamp(1.4rem,3vw,2.4rem); font-weight:700; letter-spacing:-0.03em; line-height:1; }
.branze-desc { font-size:0.85rem; color:#585D66; line-height:1.7; max-width:360px; }
.branze-arrow { font-size:1.4rem; transition:color 0.22s, transform 0.22s; color:#585D66; justify-self:end; }

/* ===== RESPONSIVE ===== */
@media (max-width:1024px) {
    .g-nav { padding:1.2rem 2rem; }
    .g-nav-links { gap:1.5rem; }
    .page-hero { padding:5rem 2rem; }
}
@media (max-width:768px) {
    .g-nav-links { display:none; }
    .g-nav-btns { display:none; }
    .g-nav-burger { display:inline-flex; }
    .branze-row { grid-template-columns:48px 1fr 32px; gap:1rem; }
    .branze-desc { display:none; }
    .page-hero { padding:5rem 1.5rem; }
}
@media (max-width:640px) {
    section { padding:5rem 1.5rem !important; }
}

/* 18.08.2026 - stopka na telefonie: JEDNA reguła dla wszystkich stron (wcześniej każda strona miała ją w swoim <style>,
   a 404, wizytówka, reklamy i cennik nie miały - siatka 4 kolumn wystawała poza ekran i rozpychała stronę do 651 px). */
@media (max-width:900px){
  footer [style*="grid-template-columns:2fr 1fr 1fr 1fr"],
  footer [style*="grid-template-columns:1.5fr 1fr 1fr 1fr"]{grid-template-columns:1fr 1fr !important;gap:2.5rem 2rem !important}
}
@media (max-width:560px){
  footer [style*="grid-template-columns:2fr 1fr 1fr 1fr"],
  footer [style*="grid-template-columns:1.5fr 1fr 1fr 1fr"]{grid-template-columns:1fr !important;gap:2.5rem !important}
}