/* ==========================================================================
   WK Digital — v3 „Modern Studio+"
   Warstwa dopracowań ładowana PO styles.css. Zachowuje DNA produkcji
   (krem, gradient fiolet→błękit, Space Grotesk + Sora, białe karty),
   a dokłada: pływający pasek, mocniejsze hero, pasek marek, ciemne panele
   „Przewaga AI" i CTA dla rytmu strony, siatkę 3×2 usług, masonry opinii,
   animacje pojawiania się.
   ========================================================================== */

:root{
    --v3-ink:#1c1730;            /* ciemny panel — chłodny atrament pasujący do gradientu */
    --v3-ink-2:#241e3d;
    --v3-on-ink:#efeaf9;
    --v3-on-ink-muted:#b9b1d3;
    --v3-grad-light:linear-gradient(115deg,#c9bfff 0%,#9fc0ff 45%,#86dcff 100%);
    --v3-ease:cubic-bezier(.2,.7,.2,1);
    --v3-shadow:0 26px 60px -30px rgba(74,56,30,.45);
}

/* ---------- 1. Pasek nawigacji: pływająca „belka" ---------- */
.navbar,
.navbar.scrolled{
    top:12px;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
.nav-container{
    width:min(1480px, calc(100% - 32px));
    margin:0 auto;
    padding:8px 10px 8px 14px;
    background:rgba(251,244,232,.86);
    -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3);
    border:1px solid var(--border);
    border-radius:20px;
    box-shadow:0 18px 44px -30px rgba(74,56,30,.55);
    transition:box-shadow .25s ease, background .25s ease;
}
.navbar.scrolled .nav-container{ box-shadow:0 24px 54px -28px rgba(74,56,30,.6); background:rgba(251,244,232,.94); }
.brand-logo{ width:42px; height:42px; border-radius:12px; }
.brand-name{ font-size:1.25rem; }
.nav-menu{ top:84px; right:24px; }
.nav-cta{ border-radius:14px; }
.hamburger,.nav-portfolio{ border-radius:14px; }
.lang-toggle{ border-radius:14px; }

/* ---------- 2. Hero ---------- */
.hero{
    padding:150px 0 90px;
    background:
        radial-gradient(1100px 620px at 82% 8%, rgba(106,92,192,.20), transparent 68%),
        radial-gradient(900px 520px at 8% 88%, rgba(42,166,216,.16), transparent 68%),
        radial-gradient(700px 400px at 55% 100%, rgba(52,112,204,.10), transparent 70%),
        var(--hero-bg-gradient);
}
.orb-1,.orb-2,.orb-3{ opacity:.10 !important; }
.hero-tag{
    display:inline-flex; align-items:center; gap:10px;
    margin:0 0 22px;
    padding:8px 16px 8px 12px;
    border-radius:999px;
    background:var(--review-bg);
    border:1px solid var(--border);
    box-shadow:0 12px 30px -22px rgba(74,56,30,.5);
    font-family:'Space Grotesk','Sora',sans-serif;
    font-size:.78rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
    color:var(--text-strong);
}
.hero-tag-dot{
    width:9px; height:9px; border-radius:50%;
    background:var(--gradient);
    box-shadow:0 0 0 4px rgba(106,92,192,.15);
    animation:pulse 1.8s ease-in-out infinite;
}
.hero h1{ margin-bottom:24px; }
.hero h1 .grad-text{ padding:4px 0; }
.hero-sub{ max-width:600px; }
.trust-row{ gap:10px; }
.trust-row li{
    background:var(--review-bg);
    border:1px solid var(--border);
    border-radius:999px;
    padding:9px 16px 9px 12px;
    font-size:.9rem; font-weight:600;
    box-shadow:0 12px 28px -22px rgba(74,56,30,.5);
}
.trust-row span{ font-size:1.05rem; }
.tax-badge{ margin-top:20px; box-shadow:0 14px 34px -24px rgba(74,56,30,.5); }

/* portret: przekręcona gradientowa płyta za kartą */
.hero-visual{ min-height:560px; }
.hero-visual::before{
    content:''; position:absolute; z-index:0;
    inset:10% 4% 6% 10%;
    border-radius:44px;
    background:var(--gradient);
    transform:rotate(-5deg);
    opacity:.85;
    box-shadow:0 40px 90px -30px rgba(106,92,192,.6);
}
.hero-visual::after{
    content:''; position:absolute; z-index:0;
    inset:16% -2% 2% 18%;
    border-radius:44px;
    background:linear-gradient(135deg,#2aa6d8,#6a5cc0);
    transform:rotate(7deg);
    opacity:.22;
}
.hero-portrait{
    z-index:1;
    max-width:440px;
    padding:12px 12px 62px;
    border-radius:30px;
    background:#fffaf1 !important;
    border:1px solid rgba(255,255,255,.7);
    box-shadow:0 0 0 1px var(--border), 0 44px 90px -30px rgba(33,28,20,.55) !important;
    transform:rotate(1.5deg);
    transition:transform .5s var(--v3-ease);
}
.hero-portrait:hover{ transform:rotate(0deg) scale(1.01); }
.hero-portrait img{ border-radius:22px; max-height:480px; object-fit:cover; }
.portrait-glow{ opacity:.35; }
.portrait-wa{ top:26px; right:26px; width:64px; height:64px; }
.portrait-wa svg{ width:26px; height:26px; }
.portrait-tag{ bottom:16px; background:#fffaf1 !important; color:var(--text-strong) !important; border-color:var(--border) !important; box-shadow:0 12px 30px -16px rgba(74,56,30,.5); }
.float-card{
    background:#fffaf1 !important;
    border:1px solid var(--border) !important;
    border-radius:18px;
    box-shadow:0 22px 50px -22px rgba(74,56,30,.55) !important;
    padding:12px 16px;
}
.float-card strong{ color:var(--text-strong) !important; font-family:'Space Grotesk','Sora',sans-serif; }
.float-card .emoji{
    width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
    font-size:1.2rem; background:var(--gradient-soft); border:1px solid var(--border);
}
.card-ai{ top:34px; left:-16px; }
.card-speed{ bottom:88px; left:auto; right:4px; }

/* ---------- 3. Pasek marek ---------- */
.marquee{
    overflow:hidden;
    background:var(--v3-ink);
    color:var(--v3-on-ink);
    padding:16px 0;
    border-top:1px solid rgba(255,255,255,.06);
    border-bottom:1px solid rgba(255,255,255,.06);
    position:relative; z-index:1;
}
.marquee-track{ display:flex; width:max-content; animation:v3marquee 48s linear infinite; }
.marquee-track span{
    font-family:'Space Grotesk','Sora',sans-serif; font-weight:600; font-size:.95rem; letter-spacing:.02em;
    padding:0 28px; white-space:nowrap; display:inline-flex; align-items:center; gap:28px;
}
.marquee-track span::after{ content:''; width:7px; height:7px; border-radius:50%; background:var(--v3-grad-light); }
@keyframes v3marquee{ to{ transform:translateX(-50%); } }
.marquee:hover .marquee-track{ animation-play-state:paused; }

/* ---------- 4. Nagłówki sekcji ---------- */
.eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--review-bg);
    border:1px solid rgba(106,92,192,.22);
    color:#52509e;
    box-shadow:0 10px 26px -22px rgba(74,56,30,.5);
}
.eyebrow::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--gradient); }
.section-head p{ max-width:720px; margin-inline:auto; }
.section{ padding:110px 0; }

/* ---------- 5. Usługi: siatka 3×2, karty z gradientową krawędzią ---------- */
.services-grid{ grid-template-columns:repeat(3,1fr) !important; gap:22px; }
.card{
    border-radius:24px;
    background:var(--review-bg);
    padding:36px 30px 32px;
    overflow:hidden;
    transition:transform .3s var(--v3-ease), box-shadow .3s var(--v3-ease), border-color .3s var(--v3-ease);
}
.card::before{
    content:''; position:absolute; left:0; right:0; top:0; height:4px;
    background:var(--gradient);
    transform:scaleX(0); transform-origin:left;
    transition:transform .4s var(--v3-ease);
}
.card:hover{ transform:translateY(-6px); border-color:rgba(106,92,192,.35); }
.card:hover::before{ transform:scaleX(1); }
.icon-wrap{
    width:58px; height:58px; border-radius:16px;
    display:grid; place-items:center;
    background:var(--gradient-soft); border:1px solid var(--border);
    margin-bottom:20px; transform:none;
}
.icon-wrap span{ font-size:1.5rem; }
.card h3{ font-size:1.32rem; }

/* ---------- 6. Przewaga AI: ciemny panel ---------- */
.section-ai{
    width:min(1500px, calc(100% - 32px));
    margin:0 auto;
    border-radius:36px;
    padding:100px 0;
    background:
        radial-gradient(900px 520px at 88% 0%, rgba(106,92,192,.45), transparent 62%),
        radial-gradient(800px 500px at 0% 100%, rgba(42,166,216,.28), transparent 62%),
        var(--v3-ink);
    color:var(--v3-on-ink);
    position:relative; overflow:hidden;
}
.section-ai .eyebrow{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:#d6ccff; box-shadow:none; }
.section-ai .section-head h2{ color:#fff; }
.section-ai .section-head p,.section-ai .section-head.light p{ color:var(--v3-on-ink-muted); }
.section-ai .section-head p strong{ color:#fff; }
.section-ai .grad-text{ background:var(--v3-grad-light); -webkit-background-clip:text; background-clip:text; filter:none; }
.benefits-grid{ grid-template-columns:repeat(4,1fr); gap:16px; }
.benefit{
    background:rgba(255,255,255,.05) !important;
    border:1px solid rgba(255,255,255,.10) !important;
    border-radius:22px;
    box-shadow:none !important;
    padding:28px 24px;
}
.benefit:hover{ background:rgba(255,255,255,.09) !important; border-color:rgba(201,191,255,.45) !important; transform:translateY(-5px); }
.benefit h3{ color:#fff; font-size:1.1rem; }
.benefit p{ color:var(--v3-on-ink-muted); font-size:.95rem; }
.benefit p strong{ color:#fff; }
.benefit-num{ background:var(--v3-grad-light); -webkit-background-clip:text; background-clip:text; font-size:2.2rem !important; }

/* ---------- 7. Know-how: dwie kolumny ---------- */
.glossary{ max-width:1240px; display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.glossary-item{ border-radius:20px; background:var(--review-bg); }
.glossary-item[open]{ border-color:rgba(106,92,192,.45); box-shadow:0 26px 60px -30px rgba(106,92,255,.5); }
.glossary-item summary{ padding:20px 22px; font-size:1.02rem; gap:12px; }
.glossary-item .g-icon{
    width:42px; height:42px; border-radius:12px; display:grid; place-items:center; flex:none;
    background:var(--gradient-soft); border:1px solid var(--border); font-size:1.15rem;
}
.glossary-item .g-arrow{
    width:28px; height:28px; border-radius:50%; display:grid; place-items:center; flex:none;
    background:var(--surface); color:var(--accent-1); font-size:.8rem;
}
.glossary-item[open] .g-arrow{ background:var(--gradient); color:#fff; }
.glossary-item .g-body{ padding:0 22px 22px 22px; font-size:.97rem; }

/* ---------- 8. O mnie ---------- */
.about-list li{ background:var(--review-bg); border-radius:14px; box-shadow:0 12px 28px -24px rgba(74,56,30,.5); }
.stat{ background:var(--review-bg); border-radius:16px; }
.stat strong{ background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- 9. Realizacje ---------- */
.work{ border-radius:24px; }
.work-body h3{ font-size:1.22rem; }
.work-link{ font-size:.92rem; }

/* ---------- 10. Dema ---------- */
.demo-card{ border-radius:22px; }
.price-note-band{ border-radius:24px; }

/* ---------- 11. Opinie: masonry ---------- */
.rating-strip{ background:var(--review-bg); box-shadow:var(--v3-shadow); }
.reviews-grid{ display:block; columns:3; column-gap:22px; }
.review{ display:block; break-inside:avoid; margin-bottom:22px; border-radius:22px; }
.review > * + *{ margin-top:14px; }
.review-text{ font-size:1.02rem; line-height:1.65; }

/* ---------- 12. Pas CTA: ciemny panel ---------- */
.cta-band{
    width:min(1500px, calc(100% - 32px));
    margin:0 auto;
    border:0;
    border-radius:36px;
    padding:80px 0;
    background:
        radial-gradient(800px 460px at 90% 0%, rgba(106,92,192,.55), transparent 60%),
        radial-gradient(700px 420px at 0% 100%, rgba(42,166,216,.35), transparent 60%),
        var(--v3-ink);
    position:relative; overflow:hidden;
}
.cta-band::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background-image:radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px);
    background-size:22px 22px;
    -webkit-mask-image:linear-gradient(to left,#000,transparent 55%); mask-image:linear-gradient(to left,#000,transparent 55%);
}
.cta-inner{ position:relative; z-index:1; }
.cta-inner h2{ color:#fff; font-size:clamp(1.8rem,3.4vw,2.7rem); }
.cta-band .grad-text{ background:var(--v3-grad-light); -webkit-background-clip:text; background-clip:text; filter:none; }
.cta-inner p{ color:var(--v3-on-ink-muted); }

/* ---------- 13. Kontakt ---------- */
.section-contact{ padding-bottom:120px; }
.contact-form{ border-radius:28px; position:relative; overflow:hidden; }
.contact-form::before{ content:''; position:absolute; left:0; right:0; top:0; height:5px; background:var(--gradient); }
.contact-form input,.contact-form textarea{ border-radius:14px !important; transition:border-color .2s ease, box-shadow .2s ease; }
.contact-form input:focus,.contact-form textarea:focus{ outline:0; border-color:rgba(106,92,192,.6) !important; box-shadow:0 0 0 4px rgba(106,92,192,.14); }
.contact-list li{ background:var(--review-bg); border-radius:16px; box-shadow:0 12px 28px -24px rgba(74,56,30,.5); }

/* ---------- 14. Stopka ---------- */
.footer{ padding-top:80px; }

/* ---------- 15. Ruch: pasek postępu + pojawianie się ---------- */
#v3Progress{ position:fixed; top:0; left:0; height:3px; width:0; background:var(--gradient); z-index:200; pointer-events:none; }
.rv{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--v3-ease), transform .7s var(--v3-ease); }
.rv.in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.06s } .rv-d2{ transition-delay:.12s } .rv-d3{ transition-delay:.18s }

/* ---------- 16. Responsywność ---------- */
@media (max-width:1100px){
    .benefits-grid{ grid-template-columns:repeat(2,1fr); }
    .services-grid{ grid-template-columns:repeat(2,1fr) !important; }
    .reviews-grid{ columns:2; }
}
@media (max-width:1000px){
    .hero-visual{ min-height:0; margin-top:24px; }
    .hero-visual::before{ inset:6% 6% 4% 6%; }
    .card-ai{ left:0; }
    .card-speed{ right:0; }
}
@media (max-width:820px){
    .glossary{ grid-template-columns:1fr; }
    .section-ai,.cta-band{ width:calc(100% - 20px); border-radius:26px; }
}
@media (max-width:720px){
    .section{ padding:84px 0; }
    .section-ai{ padding:72px 0; }
    .services-grid{ grid-template-columns:1fr !important; }
    .benefits-grid{ grid-template-columns:1fr; }
    .reviews-grid{ columns:1; }
    .hero{ padding-top:120px; }
    .hero-tag{ font-size:.7rem; letter-spacing:.08em; }
    .float-card{ display:none; }
    .hero-portrait{ transform:none; }
    .marquee-track span{ font-size:.85rem; padding:0 16px; gap:16px; }
    .nav-container{ width:calc(100% - 20px); }
}
@media (prefers-reduced-motion:reduce){
    .rv{ opacity:1; transform:none; transition:none; }
    .marquee-track{ animation:none; }
    .hero-portrait{ transition:none; }
}