/* ==========================================================
   CodeDK Studio — Premium UI/UX layer (Faza 4)
   Dołączany WYŁĄCZNIE na stronach marketingowych (przez $extraCss).
   Bazuje na zmiennych z assets/css/style.css — niczego tam nie nadpisuje
   globalnie, tylko dogrywa komponenty i animacje warstwy premium.
   ========================================================== */

.visually-hidden{
    position:absolute !important;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

/* ---------- Dostępność ---------- */
.skip-link{
    position:fixed;
    top:-60px;
    left:16px;
    z-index:9999;
    background:var(--primary);
    color:#fff;
    padding:12px 20px;
    border-radius:10px;
    font-weight:600;
    font-size:.9rem;
    transition:top .25s ease;
}
.skip-link:focus{
    top:16px;
}

@media (prefers-reduced-motion: reduce){
    *{
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
        scroll-behavior:auto !important;
    }
}

:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:3px;
    border-radius:4px;
}

/* ---------- Scroll reveal (IntersectionObserver w script.js) ---------- */
.reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.reveal.in-view{
    opacity:1;
    transform:translateY(0);
}
.reveal-scale{
    opacity:0;
    transform:scale(.92);
    transition:opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
.reveal-scale.in-view{
    opacity:1;
    transform:scale(1);
}
/* Stagger dzieci sekcji — kolejne elementy wjeżdżają z niewielkim opóźnieniem */
.reveal-group > *{ transition-delay:calc(var(--stagger-i, 0) * 80ms); }

@keyframes floatY{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-7px); }
}
@keyframes spinSlow{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(360deg); }
}
@keyframes pulseGlow{
    0%,100%{ opacity:.55; }
    50%{ opacity:1; }
}
@keyframes shimmer{
    0%{ background-position:-200% 0; }
    100%{ background-position:200% 0; }
}

/* ---------- Navbar premium (sticky + blur + scrolled state) ---------- */
.header{
    transition:background .35s ease, box-shadow .35s ease, padding .35s ease, border-color .35s ease;
    background:rgba(11,17,32,.35);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
}
.header.is-scrolled{
    background:rgba(11,17,32,.82);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    box-shadow:0 10px 30px rgba(0,0,0,.35);
    border-bottom-color:var(--border);
}
.nav-links a{
    position:relative;
}
.mobile-menu-btn{
    transition:transform .3s ease;
}
.mobile-menu-btn[aria-expanded="true"]{
    transform:rotate(90deg);
}

.mobile-only-nav-actions{ display:none; }

@media (max-width:1100px){
    .navbar.mobile-open{
        display:block !important;
    }
    .nav-links{
        position:fixed;
        inset:78px 16px auto 16px;
        flex-direction:column;
        background:rgba(17,24,39,.97);
        backdrop-filter:blur(18px);
        border:1px solid var(--border);
        border-radius:var(--radius);
        padding:18px;
        gap:4px !important;
        box-shadow:var(--shadow);
        transform:translateY(-16px);
        opacity:0;
        pointer-events:none;
        transition:transform .3s ease, opacity .3s ease;
        z-index:70;
        max-height:calc(100vh - 100px);
        overflow-y:auto;
    }
    .nav-links.is-open{
        transform:translateY(0);
        opacity:1;
        pointer-events:auto;
    }
    .nav-links li{ width:100%; }
    .nav-links a{
        display:block;
        padding:12px 14px;
        border-radius:10px;
    }
    .nav-links a:hover{ background:rgba(255,255,255,.06); }

    .mobile-only-nav-actions{
        display:flex;
        flex-direction:column;
        gap:8px;
        margin-top:10px;
        padding-top:14px;
        border-top:1px solid var(--border);
    }
    .mobile-only-nav-actions a{
        display:flex;
        align-items:center;
        gap:8px;
    }
    .mobile-only-nav-actions .mobile-cta{
        background:linear-gradient(135deg,var(--primary),var(--secondary));
        color:#fff;
        justify-content:center;
        font-weight:600;
    }
}

/* ---------- Hero: badge z pulsem, rating, licznik lat ---------- */
.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
}
.hero-badge .dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--success);
    animation:pulseGlow 2s ease-in-out infinite;
}

.hero-rating{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:22px;
    font-size:.85rem;
    color:var(--text2);
}
.hero-rating .stars{ color:#facc15; letter-spacing:2px; }
.hero-rating strong{ color:var(--text); }

.hero-stats .stat-card{
    position:relative;
    overflow:hidden;
}

/* Dekoracyjne, subtelnie unoszące się kształty w tle hero */
.hero-blob{
    position:absolute;
    border-radius:50%;
    filter:blur(60px);
    opacity:.35;
    animation:floatY 9s ease-in-out infinite;
    pointer-events:none;
}
.hero-blob.b1{ width:220px; height:220px; background:var(--primary); top:8%; right:8%; }
.hero-blob.b2{ width:160px; height:160px; background:var(--accent); bottom:10%; left:4%; animation-delay:2s; }

.hero-grid-pattern{
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:42px 42px;
    -webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 30%,#000 40%,transparent 90%);
    mask-image:radial-gradient(ellipse 60% 60% at 50% 30%,#000 40%,transparent 90%);
    pointer-events:none;
}

/* ---------- Glass utility ---------- */
.glass{
    background:rgba(24,34,53,.55);
    border:1px solid rgba(255,255,255,.09);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

/* ---------- Karty z hover-lift (uniwersalne dla całej strony) ---------- */
.lift{
    transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease;
}
.lift:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 45px rgba(0,0,0,.4);
    border-color:rgba(124,58,237,.35);
}

/* ---------- Section eyebrow z ikoną ---------- */
.section-title span{
    display:inline-flex;
    align-items:center;
    gap:8px;
}
.section-title span i{ color:var(--primary); font-size:.8rem; }

/* ---------- ICON TILES (jednolity styl ikon w całym serwisie) ---------- */
.icon-tile{
    width:48px;
    height:48px;
    border-radius:14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,rgba(79,70,229,.22),rgba(6,182,212,.15));
    color:#a9b6ff;
    font-size:1.1rem;
    flex-shrink:0;
}

/* ---------- Feature checklist z ikoną FA zamiast emoji ---------- */
.check-list{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:10px;
}
.check-list li{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--text2);
    font-size:.92rem;
}
.check-list li i{
    color:var(--success);
    font-size:.85rem;
    width:16px;
}

/* ==========================================================
   PORTFOLIO — filtry, karty z placeholderem graficznym, case study
   ========================================================== */
.portfolio-filters{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:center;
    margin-bottom:40px;
}
.portfolio-filter-btn{
    padding:10px 20px;
    border-radius:999px;
    border:1px solid var(--border);
    background:var(--card);
    color:var(--text2);
    font-family:inherit;
    font-size:.85rem;
    font-weight:500;
    cursor:pointer;
    transition:var(--transition);
}
.portfolio-filter-btn:hover{
    border-color:var(--primary);
    color:var(--text);
}
.portfolio-filter-btn.active{
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    border-color:transparent;
    color:#fff;
}

.portfolio-card{
    position:relative;
    overflow:hidden;
}
.portfolio-card[hidden]{ display:none; }

.portfolio-cover{
    position:relative;
    height:220px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:
        radial-gradient(circle at 30% 20%, rgba(79,70,229,.5), transparent 55%),
        radial-gradient(circle at 80% 80%, rgba(6,182,212,.45), transparent 55%),
        linear-gradient(135deg,#141b2e,#0c1120);
}
.portfolio-cover i{
    font-size:2.6rem;
    color:rgba(255,255,255,.85);
    transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.portfolio-card:hover .portfolio-cover i{
    transform:scale(1.15) rotate(-4deg);
}
.portfolio-cover::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
    background-size:26px 26px;
}

.portfolio-overlay-link{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(11,17,32,.72);
    opacity:0;
    transition:opacity .35s ease;
    color:#fff;
    font-weight:600;
    gap:8px;
}
.portfolio-card:hover .portfolio-overlay-link{ opacity:1; }

/* ==========================================================
   TEMPLATES — placeholder graficzny zamiast <img>
   ========================================================== */
.template-cover{
    height:180px;
    border-radius:14px 14px 0 0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,rgba(79,70,229,.35),rgba(124,58,237,.25));
    position:relative;
    overflow:hidden;
}
.template-cover i{ font-size:2.2rem; color:#fff; }
.template-cover::before{
    content:"";
    position:absolute;
    width:140%;
    height:140%;
    background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.12) 50%,transparent 70%);
    animation:shimmer 3.5s linear infinite;
    background-size:200% 100%;
}

/* ==========================================================
   PRICING — 4 pakiety, ikony, badge popularności
   ========================================================== */
.pricing-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
}
@media (max-width:1180px){ .pricing-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .pricing-grid{ grid-template-columns:1fr; } }

.price-card .plan-icon{
    width:46px;
    height:46px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.06);
    color:var(--accent);
    font-size:1.1rem;
    margin-bottom:14px;
}
.price-card.featured .plan-icon{
    background:rgba(255,255,255,.15);
    color:#fff;
}
.price-card .plan-tagline{
    color:var(--text2);
    font-size:.85rem;
    margin:6px 0 18px;
    min-height:36px;
}

/* ==========================================================
   TESTIMONIALS — avatar inicjały + ocena aria
   ========================================================== */
.testimonial-avatar{
    width:44px;
    height:44px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--primary),var(--accent));
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:.9rem;
    color:#fff;
}
.client-row{
    display:flex;
    align-items:center;
    gap:12px;
}

/* ==========================================================
   FOOTER — mega footer premium
   ========================================================== */
.footer{
    position:relative;
}
.footer-newsletter{
    max-width:var(--container);
    margin:0 auto 64px;
    padding:38px;
    border-radius:var(--radius);
    background:linear-gradient(135deg,rgba(79,70,229,.18),rgba(6,182,212,.12));
    border:1px solid var(--border);
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}
.footer-newsletter h3{ font-size:1.3rem; margin-bottom:6px; }
.footer-newsletter p{ color:var(--text2); font-size:.9rem; }
.newsletter-form{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}
.newsletter-form input{
    padding:13px 18px;
    border-radius:12px;
    border:1px solid var(--border);
    background:var(--background2);
    color:var(--text);
    font-family:inherit;
    min-width:240px;
}
.newsletter-form input:focus{ outline:none; border-color:var(--primary); }
.newsletter-note{
    font-size:.75rem;
    color:var(--text2);
    margin-top:8px;
}

.footer-social{
    display:flex;
    gap:10px;
    margin-top:16px;
}
.footer-social a{
    width:38px;
    height:38px;
    border-radius:10px;
    border:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text2);
    transition:var(--transition);
}
.footer-social a:hover{
    color:#fff;
    border-color:var(--primary);
    background:rgba(79,70,229,.15);
}

.footer-legal{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    font-size:.82rem;
}
.footer-legal a{ color:var(--text2); }
.footer-legal a:hover{ color:var(--text); }

.footer-bottom{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    gap:12px;
}

/* ==========================================================
   BACK TO TOP
   ========================================================== */
.back-to-top{
    position:fixed;
    right:26px;
    bottom:26px;
    width:48px;
    height:48px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 10px 30px rgba(79,70,229,.45);
    opacity:0;
    transform:translateY(12px);
    pointer-events:none;
    transition:opacity .3s ease, transform .3s ease;
    z-index:60;
    border:none;
    cursor:pointer;
}
.back-to-top.visible{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
}

/* ==========================================================
   CALCULATOR CTA banner (Faza 4 — sekcja uprzednio pusta)
   ========================================================== */
.calc-cta{
    position:relative;
    max-width:var(--container);
    margin:0 auto;
    padding:56px 48px;
    border-radius:var(--radius);
    background:linear-gradient(135deg,rgba(79,70,229,.22),rgba(124,58,237,.16));
    border:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
    flex-wrap:wrap;
    overflow:hidden;
}
.calc-cta::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 85% 20%,rgba(6,182,212,.25),transparent 55%);
    pointer-events:none;
}
.calc-cta h2{ font-size:clamp(1.5rem,3vw,2rem); margin-bottom:10px; }
.calc-cta p{ color:var(--text2); max-width:480px; }
.calc-cta-actions{ display:flex; gap:12px; flex-wrap:wrap; position:relative; z-index:1; }

/* ==========================================================
   TECHNOLOGIE — siatka kart stacku
   ========================================================== */
.tech-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:16px;
}
@media (max-width:900px){ .tech-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .tech-grid{ grid-template-columns:repeat(2,1fr); } }

.tech-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:16px;
    padding:22px 16px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    text-align:center;
}
.tech-card span{
    font-size:.85rem;
    font-weight:600;
    color:var(--text2);
}
.tech-card:hover span{ color:var(--text); }
.tech-card .icon-tile{ font-size:1.3rem; }

/* ==========================================================
   PROCES WSPÓŁPRACY — oś czasu
   ========================================================== */
.process-timeline{
    position:relative;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px 20px;
}
@media (max-width:900px){ .process-timeline{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .process-timeline{ grid-template-columns:1fr; } }

.process-step{
    position:relative;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:16px;
    padding:26px 22px;
}
.process-step .step-number{
    width:38px;
    height:38px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:.9rem;
    margin-bottom:14px;
}
.process-step h4{ font-size:1.02rem; margin-bottom:6px; }
.process-step p{ color:var(--text2); font-size:.85rem; }

/* ==========================================================
   AI CHAT WIDGET (Faza 5)
   ========================================================== */
.ai-chat-widget{
    position:fixed;
    left:26px;
    bottom:26px;
    z-index:80;
}

.ai-chat-toggle{
    position:relative;
    width:58px;
    height:58px;
    border-radius:50%;
    border:none;
    cursor:pointer;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#fff;
    font-size:1.35rem;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 12px 32px rgba(79,70,229,.5);
    transition:var(--transition);
}
.ai-chat-toggle:hover{ transform:translateY(-3px); }

.ai-chat-toggle-badge{
    position:absolute;
    top:-4px;
    right:-4px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#ef4444;
    color:#fff;
    font-size:.68rem;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px solid var(--background);
    animation:pulseGlow 1.6s ease-in-out infinite;
}

.ai-chat-panel{
    position:absolute;
    bottom:72px;
    left:0;
    width:360px;
    max-width:calc(100vw - 40px);
    max-height:min(560px, 75vh);
    display:flex;
    flex-direction:column;
    background:rgba(17,24,39,.98);
    backdrop-filter:blur(20px);
    border:1px solid var(--border);
    border-radius:20px;
    box-shadow:0 30px 70px rgba(0,0,0,.55);
    overflow:hidden;
    animation:aiPanelIn .25s cubic-bezier(.16,1,.3,1);
}
/* FINAL RELEASE fix: atrybut [hidden] musi wygrywać z .ai-chat-panel{display:flex} —
   bez tej reguły specyficzność obu selektorów jest równa i "hidden" bywa ignorowany. */
.ai-chat-panel[hidden]{ display:none !important; }
@keyframes aiPanelIn{
    from{ opacity:0; transform:translateY(14px) scale(.97); }
    to{ opacity:1; transform:translateY(0) scale(1); }
}

.ai-chat-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 18px;
    border-bottom:1px solid var(--border);
    background:linear-gradient(135deg,rgba(79,70,229,.18),rgba(6,182,212,.1));
}
.ai-chat-header-info{ display:flex; align-items:center; gap:10px; }
.ai-chat-avatar{
    width:38px; height:38px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--primary),var(--accent));
    display:flex; align-items:center; justify-content:center;
    color:#fff;
}
.ai-chat-header-info h3{ font-size:.95rem; margin:0; }
.ai-chat-status{
    font-size:.72rem;
    color:var(--text2);
    display:flex; align-items:center; gap:5px;
}
.ai-chat-status .dot{
    width:7px; height:7px; border-radius:50%;
    background:var(--success);
}
.ai-chat-close{
    background:none; border:none; color:var(--text2);
    cursor:pointer; font-size:1rem; padding:6px;
}
.ai-chat-close:hover{ color:var(--text); }

.ai-chat-messages{
    flex:1;
    overflow-y:auto;
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:10px;
    min-height:220px;
}

.ai-chat-bubble{
    max-width:85%;
    padding:10px 14px;
    border-radius:14px;
    font-size:.86rem;
    line-height:1.55;
    white-space:pre-line;
}
.ai-chat-bubble.bot{
    align-self:flex-start;
    background:var(--background2);
    border:1px solid var(--border);
    border-bottom-left-radius:4px;
}
.ai-chat-bubble.user{
    align-self:flex-end;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#fff;
    border-bottom-right-radius:4px;
}

.ai-chat-bubble.typing{
    display:flex;
    gap:4px;
    align-items:center;
    padding:14px;
}
.ai-chat-bubble.typing span{
    width:6px; height:6px;
    border-radius:50%;
    background:var(--text2);
    animation:aiTypingDot 1.2s infinite ease-in-out;
}
.ai-chat-bubble.typing span:nth-child(2){ animation-delay:.15s; }
.ai-chat-bubble.typing span:nth-child(3){ animation-delay:.3s; }
@keyframes aiTypingDot{
    0%,60%,100%{ transform:translateY(0); opacity:.5; }
    30%{ transform:translateY(-4px); opacity:1; }
}

.ai-chat-suggestions{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    padding:0 16px 12px;
}
.ai-chip{
    padding:7px 12px;
    border-radius:999px;
    border:1px solid var(--border);
    background:var(--background2);
    color:var(--text2);
    font-size:.75rem;
    cursor:pointer;
    transition:var(--transition);
}
.ai-chip:hover{ border-color:var(--primary); color:var(--text); }

.ai-chat-form{
    display:flex;
    align-items:flex-end;
    gap:8px;
    padding:12px 14px;
    border-top:1px solid var(--border);
}
.ai-chat-form textarea{
    flex:1;
    resize:none;
    max-height:120px;
    padding:10px 14px;
    border-radius:14px;
    border:1px solid var(--border);
    background:var(--background2);
    color:var(--text);
    font-family:inherit;
    font-size:.85rem;
}
.ai-chat-form textarea:focus{ outline:none; border-color:var(--primary); }
.ai-chat-send{
    width:40px; height:40px;
    border-radius:50%;
    border:none;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#fff;
    cursor:pointer;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
}
.ai-chat-send:hover{ opacity:.9; }

@media (max-width:520px){
    .ai-chat-widget{ left:16px; bottom:16px; }
    .ai-chat-panel{ width:calc(100vw - 32px); }
}

/* ==========================================================
   RESPONSYWNOŚĆ — dopięcia dla pricing/portfolio/footer
   ========================================================== */
@media (max-width:860px){
    .footer-newsletter{ flex-direction:column; align-items:flex-start; }
    .calc-cta{ padding:36px 26px; text-align:center; justify-content:center; }
    .calc-cta p{ margin:0 auto; }
}

/* ==========================================================
   FAZA 6 — Premium UI/UX rebuild: loader, magnetic buttons,
   parallax, floating enhancements, refined sections
   ========================================================== */

/* ---------- PAGE LOADER ---------- */
.page-loader{
    position:fixed;
    inset:0;
    z-index:9999;
    background:var(--background);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:18px;
    pointer-events:none;
    transition:opacity .25s ease, visibility .25s ease;
}
.page-loader.loaded{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}
.page-loader-mark{
    font-size:1.6rem;
    font-weight:700;
    letter-spacing:-.02em;
    animation:pulseGlow 1.6s ease-in-out infinite;
}
.page-loader-mark span{ color:var(--primary); }
.page-loader-bar{
    width:160px;
    height:3px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    overflow:hidden;
}
.page-loader-bar span{
    display:block;
    height:100%;
    width:40%;
    border-radius:999px;
    background:linear-gradient(90deg,var(--primary),var(--accent));
    animation:loaderSlide 1.1s ease-in-out infinite;
}
@keyframes loaderSlide{
    0%{ transform:translateX(-100%); }
    100%{ transform:translateX(350%); }
}
@media (prefers-reduced-motion: reduce){
    .page-loader{ display:none; }
}

/* ---------- MAGNETIC BUTTONS ---------- */
.magnetic{
    position:relative;
    transition:transform .25s cubic-bezier(.16,1,.3,1);
    will-change:transform;
}

/* ---------- PARALLAX (hero, dowiązywane przez JS do transform translate) ---------- */
[data-parallax]{
    will-change:transform;
}

/* ---------- Ulepszony cursor-glow (większy, kolorowy, premium) ---------- */
.cursor-glow{
    width:280px;
    height:280px;
    background:radial-gradient(circle,rgba(79,70,229,.08),transparent 70%);
}

/* ---------- Section reveal — bardziej premium gradient dla nagłówków sekcji ---------- */
.section-title h2{
    background:linear-gradient(180deg,#fff,rgba(255,255,255,.75));
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

/* ---------- CONTACT — godziny pracy + karta glass ---------- */
.contact-hours{
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:18px 20px;
    border-radius:14px;
    background:var(--card);
    border:1px solid var(--border);
    font-size:.85rem;
}
.contact-hours .hours-row{
    display:flex;
    justify-content:space-between;
    color:var(--text2);
}
.contact-hours .hours-row strong{ color:var(--text); font-weight:500; }
.contact-hours .hours-row.today strong,
.contact-hours .hours-row.today span{ color:#9aa8ff; }

.contact-form.glass{
    padding:34px;
    border-radius:var(--radius);
}

/* ---------- PORTFOLIO — mockup przeglądarki ---------- */
.portfolio-cover .mock-browser-bar,
.portfolio-v2-cover .mock-browser-bar{
    position:absolute;
    top:0; left:0; right:0;
    height:26px;
    background:rgba(255,255,255,.06);
    display:flex;
    align-items:center;
    gap:6px;
    padding:0 10px;
    z-index:1;
}
.mock-browser-bar span{
    width:7px; height:7px; border-radius:50%;
    background:rgba(255,255,255,.35);
}

/* ---------- FOOTER — subtelna linia świetlna na górze ---------- */
.footer{ position:relative; }
.footer::before{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(124,58,237,.5),transparent);
}

/* ---------- Smooth scroll globalny ---------- */
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
}

.hero-v2-bg{
    transform:translateY(var(--scroll-offset, 0px));
    transition:transform .05s linear;
}

/* ==========================================================
   HERO v2 — ETAP 8: prosty, biznesowy layout (bez dashboardu)
   ========================================================== */
.hero-v2{
    position:relative;
    padding:150px 0 100px;
    overflow:hidden;
}

.hero-v2-bg{ position:absolute; inset:0; pointer-events:none; }
.hero-v2-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(120px);
    opacity:.14;
}
.hero-v2-glow.g1{
    width:520px; height:520px;
    background:radial-gradient(circle,var(--primary),transparent 70%);
    top:-160px; right:-120px;
}

.hero-v2-layout{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:60px;
    align-items:center;
}
@media (max-width:960px){
    .hero-v2-layout{ grid-template-columns:1fr; gap:48px; text-align:center; }
}

.hero-v2-headline h1{
    font-size:clamp(2.2rem,4.4vw,3.2rem);
    line-height:1.18;
    letter-spacing:-.02em;
    font-weight:700;
    margin-bottom:22px;
}
.hero-v2-headline p{
    font-size:1.08rem;
    color:var(--text2);
    max-width:480px;
    line-height:1.7;
    margin-bottom:34px;
}
@media (max-width:960px){
    .hero-v2-headline p{ margin-left:auto; margin-right:auto; }
}

.hero-v2-cta{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
}
@media (max-width:960px){ .hero-v2-cta{ justify-content:center; } }

/* ---------- Prosty mockup przeglądarki (bez statystyk/wykresów) ---------- */
.hero-v2-stage{ position:relative; }

.stage-card.main-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:0 30px 60px rgba(0,0,0,.35);
    overflow:hidden;
}

.hero-mockup-body{ padding:26px 24px; }
.hero-mockup-line{
    height:12px;
    border-radius:6px;
    background:rgba(255,255,255,.08);
    margin-bottom:12px;
}
.hero-mockup-line.w60{ width:60%; }
.hero-mockup-line.w40{ width:40%; }
.hero-mockup-block{
    height:120px;
    border-radius:10px;
    background:linear-gradient(135deg,rgba(79,70,229,.14),rgba(6,182,212,.08));
    border:1px solid var(--border);
    margin:18px 0;
}
.hero-mockup-row{ display:flex; gap:10px; }
.hero-mockup-chip{
    flex:1;
    height:34px;
    border-radius:8px;
    background:rgba(255,255,255,.05);
    border:1px solid var(--border);
}

/* ==========================================================
   Wspólny nagłówek sekcji v2 (Faza 6) — eyebrow + duży tytuł
   ========================================================== */
.section-head{
    max-width:680px;
    margin:0 auto 64px;
    text-align:center;
}
.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 16px;
    border-radius:999px;
    background:rgba(79,70,229,.12);
    border:1px solid rgba(79,70,229,.25);
    color:#a9b6ff;
    font-size:.78rem;
    font-weight:600;
    letter-spacing:.02em;
    margin-bottom:20px;
}
.section-head h2{
    font-size:clamp(2rem,4vw,2.7rem);
    line-height:1.15;
    letter-spacing:-.02em;
    margin-bottom:18px;
}
.section-head p{
    color:var(--text2);
    font-size:1.08rem;
    line-height:1.7;
}

/* ==========================================================
   SERVICES v2 (Faza 6)
   ========================================================== */
.services-v2{ padding:110px 0; }

.services-v2-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
}
@media (max-width:1024px){ .services-v2-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .services-v2-grid{ grid-template-columns:1fr; } }

.service-v2-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:16px;
    padding:32px 28px;
    display:flex;
    flex-direction:column;
    transition:border-color .25s ease;
}
.service-v2-card:hover{ border-color:rgba(79,70,229,.35); }
.service-v2-number{
    display:block;
    font-size:.82rem;
    font-weight:700;
    color:var(--text2);
    letter-spacing:.04em;
    margin-bottom:18px;
}
.service-v2-card h3{ font-size:1.1rem; margin-bottom:10px; letter-spacing:-.01em; }
.service-v2-card > p{ color:var(--text2); font-size:.88rem; line-height:1.6; margin-bottom:20px; flex:1; }
.service-v2-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:.85rem;
    font-weight:600;
    color:#9aa8ff;
    transition:gap .25s ease;
}
.service-v2-card:hover .service-v2-link{ gap:12px; }

/* ==========================================================
   PORTFOLIO v2 (Faza 6)
   ========================================================== */
.portfolio-v2{ padding:130px 0; }

.portfolio-v2-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px;
}
@media (max-width:1024px){ .portfolio-v2-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .portfolio-v2-grid{ grid-template-columns:1fr; } }

.portfolio-v2-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:20px;
    overflow:hidden;
}
.portfolio-v2-card[hidden]{ display:none; }

.portfolio-v2-cover{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    height:230px;
    padding-top:26px;
    background:
        radial-gradient(circle at 25% 20%, rgba(79,70,229,.5), transparent 55%),
        radial-gradient(circle at 80% 85%, rgba(6,182,212,.4), transparent 55%),
        linear-gradient(135deg,#141b2e,#0c1120);
    overflow:hidden;
}
.portfolio-v2-cover i{
    font-size:2.8rem;
    color:rgba(255,255,255,.9);
    transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.portfolio-v2-card:hover .portfolio-v2-cover i{ transform:scale(1.15) rotate(-4deg); }
.portfolio-v2-cover::after{
    content:"";
    position:absolute;
    inset:26px 0 0;
    background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
    background-size:26px 26px;
}

.portfolio-v2-overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(11,17,32,.82);
    opacity:0;
    transition:opacity .35s ease;
}
.portfolio-v2-overlay span{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:11px 20px;
    border-radius:999px;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#fff;
    font-weight:600;
    font-size:.85rem;
}
.portfolio-v2-card:hover .portfolio-v2-overlay{ opacity:1; }

.portfolio-v2-content{ padding:26px 28px 30px; }
.portfolio-v2-tag{
    display:inline-block;
    font-size:.72rem;
    font-weight:600;
    color:#9aa8ff;
    text-transform:uppercase;
    letter-spacing:.04em;
    margin-bottom:10px;
}
.portfolio-v2-content h3{ font-size:1.2rem; margin-bottom:8px; }
.portfolio-v2-content p{ color:var(--text2); font-size:.88rem; line-height:1.6; }

/* ==========================================================
   PRICING v2 (Faza 6)
   ========================================================== */
.pricing-v2{ padding:130px 0; }

.pricing-v2-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
    align-items:stretch;
}
@media (max-width:1180px){ .pricing-v2-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .pricing-v2-grid{ grid-template-columns:1fr; } }

.pricing-v2-card{
    position:relative;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:22px;
    padding:36px 30px;
    display:flex;
    flex-direction:column;
}
.pricing-v2-card.featured{
    background:linear-gradient(180deg,rgba(79,70,229,.14),var(--card) 40%);
    border-color:rgba(124,58,237,.4);
    transform:scale(1.03);
}
.pricing-v2-card.featured::before{
    content:"";
    position:absolute; inset:-1px;
    border-radius:inherit;
    padding:1px;
    background:linear-gradient(135deg,var(--primary),var(--accent),var(--secondary));
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
}
.pricing-v2-badge{
    position:absolute;
    top:-14px; left:50%;
    transform:translateX(-50%);
    padding:6px 18px;
    border-radius:999px;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#fff;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.03em;
    white-space:nowrap;
}
.pricing-v2-icon{
    width:50px; height:50px;
    border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.06);
    color:var(--accent);
    font-size:1.2rem;
    margin-bottom:18px;
}
.pricing-v2-card.featured .pricing-v2-icon{ background:rgba(255,255,255,.16); color:#fff; }
.pricing-v2-card h3{ font-size:1.3rem; margin-bottom:6px; }
.pricing-v2-tagline{ color:var(--text2); font-size:.84rem; min-height:38px; margin-bottom:18px; }
.pricing-v2-price{ margin-bottom:26px; }
.pricing-v2-price .old-price{ display:block; color:var(--text2); text-decoration:line-through; font-size:.85rem; margin-bottom:2px; }
.pricing-v2-price strong{ font-size:2rem; font-weight:700; letter-spacing:-.02em; }
.pricing-v2-features{ flex:1; margin-bottom:28px; }

/* ==========================================================
   TECHNOLOGIES v2 (Faza 6)
   ========================================================== */
.tech-v2{ padding:100px 0; }
.tech-v2-groups{ display:flex; flex-direction:column; gap:26px; max-width:820px; margin:0 auto; }
.tech-v2-group{ display:flex; align-items:baseline; gap:20px; flex-wrap:wrap; padding:16px 0; border-bottom:1px solid var(--border); }
.tech-v2-group:last-child{ border-bottom:none; }
.tech-v2-group h3{ font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text2); width:110px; flex-shrink:0; }
.tech-v2-row{ display:flex; flex-wrap:wrap; gap:10px; flex:1; }
.tech-v2-chip{ padding:6px 14px; border-radius:8px; background:var(--background2); border:1px solid var(--border); font-size:.85rem; color:var(--text); }
@media (max-width:560px){
    .tech-v2-group{ flex-direction:column; align-items:flex-start; gap:10px; }
    .tech-v2-group h3{ width:auto; }
}

/* ==========================================================
   PROCESS v2 (Faza 6)
   ========================================================== */
.process-v2{ padding:110px 0; }
.process-v2-line{ position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:32px 20px; }
.process-v2-line::before{
    content:"";
    position:absolute; top:12px; left:4%; right:4%; height:1px;
    background:var(--border);
    z-index:0;
}
@media (max-width:900px){ .process-v2-line{ grid-template-columns:repeat(2,1fr); } .process-v2-line::before{ display:none; } }
@media (max-width:560px){ .process-v2-line{ grid-template-columns:1fr; } }
.process-v2-step{ position:relative; z-index:1; text-align:left; }
.process-v2-index{ display:block; font-size:1.2rem; color:var(--text2); font-weight:700; margin-bottom:12px; }
.process-v2-step h4{ font-size:1rem; margin-bottom:6px; }
.process-v2-step p{ color:var(--text2); font-size:.85rem; line-height:1.6; }

/* ==========================================================
   TESTIMONIALS v2 (Faza 6)
   ========================================================== */
.testimonials-v2{ padding:130px 0; }
.testimonial-v2-slider{ display:flex; align-items:center; gap:20px; max-width:820px; margin:0 auto; }
.testimonial-v2-track{ position:relative; flex:1; min-height:280px; }
.testimonial-v2-slide{
    position:absolute; inset:0;
    background:var(--card); border:1px solid var(--border); border-radius:24px;
    padding:52px 56px; text-align:center;
    opacity:0; transform:translateY(14px); pointer-events:none;
    transition:opacity .5s ease, transform .5s ease;
}
.testimonial-v2-slide.active{ opacity:1; transform:translateY(0); pointer-events:auto; position:relative; }
.testimonial-v2-quote-icon{ font-size:1.6rem; color:rgba(124,58,237,.35); margin-bottom:18px; }
.testimonial-v2-slide p{ font-size:clamp(1.1rem,2vw,1.4rem); line-height:1.6; font-weight:500; margin-bottom:30px; }
.testimonial-v2-slide footer{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }
.testimonial-v2-slide footer > div:nth-child(2){ text-align:left; }
.testimonial-v2-slide cite{ font-style:normal; font-weight:600; display:block; }
.testimonial-v2-slide footer span{ color:var(--text2); font-size:.82rem; }
.testimonial-v2-slide .stars{ color:#facc15; letter-spacing:1px; margin-left:8px; }
.testimonial-v2-arrow{
    width:46px; height:46px; flex-shrink:0; border-radius:50%;
    border:1px solid var(--border); background:var(--card); color:var(--text2);
    cursor:pointer; transition:var(--transition);
}
.testimonial-v2-arrow:hover{ border-color:var(--primary); color:#fff; background:linear-gradient(135deg,var(--primary),var(--secondary)); }
.testimonial-v2-dots{ display:flex; justify-content:center; gap:8px; margin-top:28px; }
.testimonial-v2-dots button{ width:8px; height:8px; border-radius:50%; border:none; background:rgba(255,255,255,.15); cursor:pointer; padding:0; transition:var(--transition); }
.testimonial-v2-dots button.active{ width:24px; border-radius:4px; background:linear-gradient(90deg,var(--primary),var(--accent)); }
@media (max-width:680px){
    .testimonial-v2-slide{ padding:36px 24px; }
    .testimonial-v2-arrow{ display:none; }
}

/* ==========================================================
   FAQ v2 (Faza 6)
   ========================================================== */
.faq-v2{ padding:130px 0; }

.faq-v2-container{
    max-width:760px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:14px;
}

.faq-v2-item{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:16px;
    overflow:hidden;
    transition:border-color .3s ease;
}
.faq-v2-item:has(.faq-v2-question[aria-expanded="true"]){
    border-color:rgba(124,58,237,.4);
}

.faq-v2-question{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:22px 26px;
    background:none;
    border:none;
    color:var(--text);
    font-family:inherit;
    font-size:1rem;
    font-weight:600;
    text-align:left;
    cursor:pointer;
}

.faq-v2-icon{
    flex-shrink:0;
    width:30px; height:30px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.06);
    color:var(--text2);
    font-size:.8rem;
    transition:transform .35s cubic-bezier(.16,1,.3,1), background .3s ease, color .3s ease;
}
.faq-v2-question[aria-expanded="true"] .faq-v2-icon{
    transform:rotate(135deg);
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#fff;
}

.faq-v2-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .4s cubic-bezier(.16,1,.3,1);
}
.faq-v2-answer p{
    padding:0 26px 24px;
    color:var(--text2);
    font-size:.92rem;
    line-height:1.7;
}

.faq-v2-cta{
    text-align:center;
    margin-top:48px;
}
.faq-v2-cta p{
    color:var(--text2);
    margin-bottom:16px;
    font-size:.95rem;
}

/* ==========================================================
   CONTACT v2 — pełny redesign (Faza 6)
   ========================================================== */
.contact-v2{ padding:130px 0; }

.contact-v2-grid{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:48px;
    align-items:start;
    max-width:1080px;
    margin:0 auto;
}
@media (max-width:900px){ .contact-v2-grid{ grid-template-columns:1fr; } }

.contact-v2-info{ padding-top:8px; }
.contact-v2-info h2{ font-size:1.9rem; margin:16px 0 14px; letter-spacing:-.01em; }
.contact-v2-info > p{ color:var(--text2); line-height:1.7; margin-bottom:28px; }

.contact-v2-form{
    padding:40px;
    border-radius:24px;
    display:flex;
    flex-direction:column;
    gap:20px;
}
.contact-v2-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}
@media (max-width:560px){ .contact-v2-row{ grid-template-columns:1fr; } }

.contact-v2-form .input-group label{
    display:block;
    font-size:.82rem;
    color:var(--text2);
    margin-bottom:8px;
    font-weight:500;
}

.input-icon-wrap{
    position:relative;
    display:flex;
    align-items:center;
}
.input-icon-wrap > i{
    position:absolute;
    left:16px;
    color:var(--text2);
    font-size:.9rem;
    pointer-events:none;
    transition:color .25s ease;
}
.input-icon-wrap.textarea-wrap > i{ top:16px; }
.input-icon-wrap input,
.input-icon-wrap select,
.input-icon-wrap textarea{
    width:100%;
    padding:13px 16px 13px 44px;
    border-radius:12px;
    border:1px solid var(--border);
    background:var(--background2);
    color:var(--text);
    font-family:inherit;
    font-size:.92rem;
    transition:border-color .25s ease, box-shadow .25s ease;
}
.input-icon-wrap textarea{ resize:vertical; min-height:120px; }
.input-icon-wrap input:focus,
.input-icon-wrap select:focus,
.input-icon-wrap textarea:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(79,70,229,.2);
}
.input-icon-wrap input:focus ~ i,
.input-icon-wrap select:focus ~ i,
.input-icon-wrap textarea:focus ~ i{ color:var(--primary); }

.contact-v2-submit{
    width:100%;
    justify-content:center;
    font-size:1rem;
    padding:16px;
}
.contact-v2-note{
    text-align:center;
    color:var(--text2);
    font-size:.78rem;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
}

/* ---------- INFO COLUMN ---------- */
.contact-v2-info{
    display:flex;
    flex-direction:column;
    gap:18px;
}
.contact-v2-card-main{
    padding:32px;
    border-radius:20px;
}
.contact-v2-card-main h3{ font-size:1.3rem; margin-bottom:10px; }
.contact-v2-card-main > p{ color:var(--text2); font-size:.9rem; line-height:1.6; margin-bottom:24px; }

.contact-v2-details{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-bottom:26px;
}
.contact-v2-details li{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:.9rem;
}
.contact-v2-details a{ color:var(--text); }
.contact-v2-details a:hover{ color:#9aa8ff; }
.detail-icon{
    width:38px; height:38px;
    flex-shrink:0;
    border-radius:11px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(79,70,229,.15);
    color:#a9b6ff;
}

.contact-v2-map{
    border-radius:20px;
    overflow:hidden;
    padding:0;
}
.contact-v2-map iframe{ border-radius:20px; }

/* ==========================================================
   FOOTER v2 — pełny redesign (Faza 6)
   ========================================================== */
.footer-v2{
    padding-top:56px;
    border-top:1px solid var(--border);
}

.footer-v2-top{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding-bottom:36px;
}

.footer-v2-logo{ display:inline-flex; font-size:1.2rem; margin-bottom:6px; }
.footer-v2-brand p{ color:var(--text2); font-size:.85rem; }

.footer-v2-links{
    display:flex;
    flex-wrap:wrap;
    gap:24px;
}
.footer-v2-links a{
    color:var(--text2);
    font-size:.88rem;
    transition:color .2s ease;
}
.footer-v2-links a:hover{ color:var(--text); }

.footer-v2-bottom{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    padding:22px 0;
    border-top:1px solid var(--border);
    font-size:.8rem;
    color:var(--text2);
}
.footer-legal{ display:flex; gap:18px; }
.footer-legal a{ color:var(--text2); }
.footer-legal a:hover{ color:var(--text); }

/* ==========================================================
   CALCULATOR PAGE (odtworzone w Fazie 6 po utracie oryginalnego pliku)
   ========================================================== */
.calculator-page{ padding:170px 0 120px; }

.calculator-box{
    max-width:640px;
    margin:0 auto;
    padding:44px;
    border-radius:24px;
}

.calc-field{ margin-bottom:28px; }
.calc-field label{
    display:block;
    font-size:.88rem;
    font-weight:600;
    margin-bottom:12px;
}
.calc-field select{
    width:100%;
    padding:14px 16px;
    border-radius:12px;
    border:1px solid var(--border);
    background:var(--background2);
    color:var(--text);
    font-family:inherit;
    font-size:.92rem;
}
.calc-field input[type="range"]{
    width:100%;
    accent-color:var(--primary);
}

.option-chip{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:12px 16px;
    border-radius:12px;
    border:1px solid var(--border);
    background:var(--background2);
    font-size:.85rem;
    cursor:pointer;
    transition:var(--transition);
}
.option-chip:has(input:checked){
    border-color:var(--primary);
    background:rgba(79,70,229,.12);
}
.option-chip span{ color:var(--text2); font-size:.78rem; }

.calc-result{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:22px 24px;
    border-radius:16px;
    background:linear-gradient(135deg,rgba(79,70,229,.18),rgba(6,182,212,.1));
    border:1px solid var(--border);
    margin-bottom:24px;
}
.calc-result span{ color:var(--text2); font-size:.88rem; }
.calc-result strong{ font-size:1.7rem; }

.calc-cta-btn{ width:100%; justify-content:center; margin-bottom:16px; }
.calc-note{ text-align:center; color:var(--text2); font-size:.78rem; }

/* ==========================================================
   AUTH v2 — logowanie/rejestracja premium (Faza 6.1)
   Split-screen: panel brandowy + karta formularza.
   Logika PHP bez zmian — wyłącznie nowa warstwa wizualna.
   ========================================================== */
.auth-v2{
    width:min(100% - 48px, 980px);
    min-height:0;
    margin:110px auto 90px;
    display:grid;
    grid-template-columns:.78fr 1.22fr;
    border:1px solid var(--border);
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 26px 70px rgba(2,6,23,.24);
}
@media (max-width:960px){
    .auth-v2{ grid-template-columns:1fr; margin:80px auto 70px; }
}

.auth-v2-panel{
    position:relative;
    padding:42px 38px;
    background:
        radial-gradient(circle at 20% 20%, rgba(79,70,229,.35), transparent 55%),
        radial-gradient(circle at 80% 80%, rgba(6,182,212,.25), transparent 55%),
        var(--background2);
    border-right:1px solid var(--border);
    display:flex;
    flex-direction:column;
    justify-content:center;
}
@media (max-width:960px){
    .auth-v2-panel{ padding:130px 32px 50px; border-right:none; border-bottom:1px solid var(--border); }
}

.auth-v2-logo{ font-size:1.3rem; margin-bottom:40px; }
.auth-v2-panel h1{
    font-size:clamp(1.55rem,2.5vw,2rem);
    line-height:1.2;
    letter-spacing:-.02em;
    margin-bottom:18px;
    max-width:440px;
}
.auth-v2-panel > p{
    color:var(--text2);
    font-size:1rem;
    line-height:1.7;
    max-width:420px;
    margin-bottom:24px;
}
.auth-v2-features{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:11px;
}
.auth-v2-features li{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--text);
    font-size:.92rem;
}
.auth-v2-features li i{ color:var(--success); }

.auth-v2-form-wrap{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:34px;
    background:rgba(15,23,42,.2);
}
@media (max-width:960px){ .auth-v2-form-wrap{ padding:34px 24px 42px; } }

.auth-v2-box{
    width:100%;
    max-width:440px;
    padding:34px;
    border-radius:24px;
}

.auth-v2-head{ margin-bottom:28px; }
.auth-v2-head h2{ font-size:1.5rem; margin-bottom:8px; }
.auth-v2-head p{ color:var(--text2); font-size:.9rem; }

.auth-v2-form{ display:flex; flex-direction:column; gap:18px; }
.auth-v2-form .contact-v2-row{ gap:14px; }
.auth-v2-form .password-hint{
    font-size:.76rem;
    color:var(--text2);
    margin-top:-8px;
}
.auth-v2-form .checkbox-row{
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:.83rem;
    color:var(--text2);
    line-height:1.5;
}
.auth-v2-form .checkbox-row input{ margin-top:3px; }

.auth-v2-submit{ width:100%; justify-content:center; margin-top:4px; }
.auth-v2-switch{
    text-align:center;
    margin-top:24px;
    font-size:.88rem;
    color:var(--text2);
}
.auth-v2-switch a{ color:#9aa8ff; font-weight:600; }
.auth-v2-kicker{
    display:inline-block;
    margin-bottom:10px;
    color:#a5b4fc;
    font-size:.76rem;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.auth-v2-field{ position:relative; display:flex; align-items:center; }
.auth-v2-field > i{
    position:absolute;
    left:15px;
    z-index:1;
    color:var(--text2);
    pointer-events:none;
}
.auth-v2-form input{
    width:100%;
    padding:14px 15px 14px 43px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--background2);
    color:var(--text);
    font:inherit;
    transition:border-color .25s ease, box-shadow .25s ease;
}
.auth-v2-form .password-input-wrap input{ padding-right:46px; }
.auth-v2-form input::placeholder{ color:#64748b; }
.auth-v2-form input:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(79,70,229,.2);
}
.auth-v2-form .password-input-wrap{ position:relative; }
.auth-v2-form .password-input-wrap .password-toggle-btn{ right:10px; }
.auth-v2-form .contact-v2-row{ grid-template-columns:1fr 1fr; }
.auth-v2-form .input-group label{ display:block; margin-bottom:7px; font-size:.82rem; color:var(--text2); }
.auth-v2-form .auth-alert{ text-align:left; }
@media (max-width:560px){
    .auth-v2-form .contact-v2-row{ grid-template-columns:1fr; }
    .auth-v2-box{ padding:28px 22px; }
}

/* ==========================================================
   REVIEW FORM — dodawanie opinii (Faza 6.1)
   ========================================================== */
.review-form-wrap{
    max-width:520px;
    margin:48px auto 0;
    text-align:center;
}
.review-form{
    margin-top:20px;
    padding:32px;
    border-radius:20px;
    text-align:left;
    display:flex;
    flex-direction:column;
    gap:18px;
}
.review-form[hidden]{ display:none !important; }
.review-stars-input{
    display:flex;
    gap:8px;
}
.star-btn{
    background:none;
    border:none;
    font-size:1.4rem;
    color:rgba(255,255,255,.18);
    cursor:pointer;
    transition:transform .15s ease, color .15s ease;
}
.star-btn.active{ color:#facc15; }
.star-btn:hover{ transform:scale(1.15); }
.review-form-msg{
    font-size:.85rem;
    text-align:center;
    min-height:1.2em;
}
.review-form-msg.success{ color:#4ade80; }
.review-form-msg.error{ color:#fca5a5; }

/* ==========================================================
   ORDER PACKAGE — proces zamawiania pakietu (Faza 6.1)
   ========================================================== */
.order-v2{ padding:170px 0 120px; min-height:70vh; }

.order-v2-grid{
    display:grid;
    grid-template-columns:1fr 1.6fr;
    gap:28px;
    max-width:980px;
    margin:0 auto;
    align-items:start;
}
@media (max-width:860px){ .order-v2-grid{ grid-template-columns:1fr; } }

.order-v2-summary{
    padding:30px;
    border-radius:20px;
    position:sticky;
    top:110px;
}
.order-v2-summary h3{ font-size:1.1rem; margin-bottom:18px; }
.order-v2-plan-row{
    display:flex;
    justify-content:space-between;
    padding:12px 0;
    border-bottom:1px solid var(--border);
    font-size:.9rem;
}
.order-v2-plan-switch{ margin-top:20px; }
.order-v2-plan-switch p{ color:var(--text2); font-size:.78rem; margin-bottom:10px; }
.order-v2-plan-switch{ display:flex; flex-wrap:wrap; gap:8px; }
.order-v2-plan-switch a{
    padding:7px 14px;
    border-radius:999px;
    border:1px solid var(--border);
    font-size:.78rem;
    color:var(--text2);
}
.order-v2-plan-switch a.active{
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#fff;
    border-color:transparent;
}
.order-v2-note{
    margin-top:22px;
    font-size:.78rem;
    color:var(--text2);
    display:flex;
    align-items:flex-start;
    gap:8px;
    line-height:1.5;
}

.order-v2-form{ padding:36px; border-radius:20px; display:flex; flex-direction:column; gap:18px; }

.order-v2-success{
    max-width:560px;
    margin:60px auto;
    padding:52px 44px;
    border-radius:24px;
    text-align:center;
}
.order-v2-success-icon{
    width:64px; height:64px;
    margin:0 auto 22px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,var(--success),#16a34a);
    color:#fff;
    font-size:1.6rem;
}
.order-v2-success h2{ font-size:1.5rem; margin-bottom:14px; }
.order-v2-success p{ color:var(--text2); line-height:1.7; margin-bottom:26px; }

/* ==========================================================
   SERVICE FINDER — quiz doboru usługi (Faza 6.1)
   ========================================================== */
.finder-v2{ padding:100px 0; }
.finder-v2-box{
    max-width:680px;
    margin:0 auto;
    padding:48px;
    border-radius:26px;
    text-align:center;
}
.finder-v2-intro h2{ font-size:1.6rem; margin:16px 0; letter-spacing:-.01em; }
.finder-v2-intro p{ color:var(--text2); margin-bottom:26px; }

.finder-v2-progress{
    height:4px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    margin-bottom:30px;
    overflow:hidden;
}
.finder-v2-progress span{
    display:block;
    height:100%;
    width:0%;
    background:linear-gradient(90deg,var(--primary),var(--accent));
    transition:width .35s ease;
}

.finder-v2-step{ display:none; text-align:left; }
.finder-v2-step.active{ display:block; animation:fadeIn .4s ease; }
.finder-v2-step h3{ font-size:1.15rem; margin-bottom:18px; text-align:center; }

.finder-v2-options{ display:flex; flex-direction:column; gap:10px; }
.finder-v2-option{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 18px;
    border-radius:14px;
    border:1px solid var(--border);
    background:var(--background2);
    cursor:pointer;
    transition:var(--transition);
    font-size:.9rem;
}
.finder-v2-option:has(input:checked){
    border-color:var(--primary);
    background:rgba(79,70,229,.12);
}
.finder-v2-option input{ accent-color:var(--primary); }

.finder-v2-nav{
    display:flex;
    justify-content:space-between;
    margin-top:26px;
}

.finder-v2-result-icon{
    width:56px; height:56px;
    margin:0 auto 16px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#fff;
    font-size:1.3rem;
}
.finder-v2-result h3{ font-size:1.5rem; margin:10px 0 12px; }
.finder-v2-result p{ color:var(--text2); margin-bottom:26px; }
.finder-v2-result-actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
}

/* ==========================================================
   CONSULTATION — Darmowa konsultacja (Faza 6.1)
   ========================================================== */
.consultation-v2{ padding:100px 0; }
.consultation-v2-box{
    max-width:1020px;
    margin:0 auto;
    display:grid;
    grid-template-columns:.82fr 1.18fr;
    overflow:hidden;
    border-radius:30px;
    border:1px solid rgba(148,163,184,.18);
    background:
        radial-gradient(circle at 0 0, rgba(99,102,241,.32), transparent 46%),
        linear-gradient(135deg, rgba(30,41,91,.98), rgba(15,23,42,.98));
    box-shadow:0 28px 80px rgba(2,6,23,.3);
}
.consultation-v2-text{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:48px 42px;
    border-right:1px solid rgba(255,255,255,.1);
}
.consultation-v2-text h2{ font-size:2rem; line-height:1.15; margin:18px 0 14px; letter-spacing:-.03em; }
.consultation-v2-text p{ color:#c4cbed; line-height:1.7; }
.consultation-v2-benefits{ display:flex; flex-direction:column; gap:13px; margin-top:28px; color:#e5e7ff; font-size:.86rem; }
.consultation-v2-benefits span{ display:flex; align-items:center; gap:10px; }
.consultation-v2-benefits i{ color:#a5b4fc; }
.consultation-v2-form{
    display:flex;
    flex-direction:column;
    gap:18px;
    padding:42px;
    background:rgba(8,15,35,.42);
}
.consultation-v2-form .input-group label{
    display:block;
    font-size:.8rem;
    color:var(--text2);
    margin-bottom:8px;
    font-weight:500;
}
.consultation-v2-field{
    position:relative;
    display:flex;
    align-items:center;
}
.consultation-v2-field > i{
    position:absolute;
    left:16px;
    z-index:1;
    color:var(--text2);
    pointer-events:none;
    transition:color .25s ease;
}
.consultation-v2-field input,
.consultation-v2-field select,
.consultation-v2-field textarea{
    width:100%;
    padding:14px 16px 14px 44px;
    border-radius:12px;
    border:1px solid var(--border);
    background:var(--background2);
    color:var(--text);
    font-family:inherit;
    font-size:.9rem;
    transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.consultation-v2-field select{
    color-scheme:dark;
}
.consultation-v2-field select option{
    background:#111827;
    color:#f3f4f6;
}
.consultation-v2-field select option[value=""]{
    color:#9ca3af;
}
.consultation-v2-field textarea{
    resize:vertical;
    min-height:104px;
}
.consultation-v2-field input:focus,
.consultation-v2-field select:focus,
.consultation-v2-field textarea:focus{
    outline:none;
    border-color:var(--primary);
    background:rgba(79,70,229,.06);
    box-shadow:0 0 0 3px rgba(79,70,229,.18);
}
.consultation-v2-field:focus-within > i{ color:var(--primary); }
.consultation-v2-field:has(select)::after{
    content:"\f078";
    position:absolute;
    right:16px;
    color:var(--text2);
    font:900 .7rem/1 "Font Awesome 6 Free";
    pointer-events:none;
}
.consultation-v2-textarea{ align-items:flex-start; }
.consultation-v2-textarea > i{ top:16px; }
.consultation-v2-form select{
    appearance:none;
    cursor:pointer;
}
.consultation-v2-contact-method{ display:flex; gap:10px; }
.consultation-v2-contact-method .finder-v2-option{
    flex:1;
    justify-content:center;
    background:rgba(15,23,42,.58);
}
.consultation-v2-submit{ width:100%; justify-content:center; margin-top:4px; }
@media (max-width:560px){
    .consultation-v2-box{ grid-template-columns:1fr; border-radius:22px; }
    .consultation-v2-text{ padding:32px 24px; border-right:0; border-bottom:1px solid rgba(255,255,255,.1); }
    .consultation-v2-text h2{ font-size:1.65rem; }
    .consultation-v2-form{ padding:26px 20px; }
    .consultation-v2-contact-method{ flex-direction:column; }
}

/* ==========================================================
   AI CHAT — retry button (Audyt CODE DK)
   ========================================================== */
.ai-chat-retry-wrap{ display:flex; justify-content:flex-start; margin-top:-4px; }
.ai-chat-retry-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 12px;
    border-radius:999px;
    border:1px solid var(--border);
    background:var(--background2);
    color:var(--text2);
    font-size:.75rem;
    cursor:pointer;
    transition:var(--transition);
}
.ai-chat-retry-btn:hover{ border-color:var(--primary); color:var(--text); }

/* ==========================================================
   PORTFOLIO — technologie + etykieta demo (Audyt CODE DK)
   ========================================================== */
.portfolio-v2-tags-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.portfolio-v2-demo-badge{
    font-size:.66rem;
    font-weight:600;
    padding:3px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.06);
    color:var(--text2);
    border:1px solid var(--border);
}
.portfolio-v2-tech{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.portfolio-v2-tech span{
    font-size:.7rem;
    padding:4px 10px;
    border-radius:999px;
    background:var(--background2);
    border:1px solid var(--border);
    color:var(--text2);
}

/* ==========================================================
   FOUNDERS — sekcja założycieli (Audyt CODE DK)
   ========================================================== */
.founders-v2{ margin-top:70px; }
.founders-v2-head{ text-align:center; margin-bottom:32px; }
.founders-v2-head h3{ font-size:1.4rem; margin-top:14px; }
.founders-v2-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    max-width:680px;
    margin:0 auto;
}
@media (max-width:640px){ .founders-v2-grid{ grid-template-columns:1fr; } }
.founder-v2-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:20px;
    padding:32px 26px;
    text-align:center;
}
.founder-v2-photo{
    width:88px; height:88px;
    margin:0 auto 18px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,rgba(79,70,229,.18),rgba(6,182,212,.12));
    color:var(--text2);
    font-size:2rem;
    border:1px solid var(--border);
}
.founder-v2-card h4{ font-size:1.1rem; margin-bottom:4px; }
.founder-v2-role{ display:block; color:#9aa8ff; font-size:.78rem; font-weight:600; margin-bottom:12px; }
.founder-v2-card p{ color:var(--text2); font-size:.85rem; line-height:1.6; }

/* ==========================================================
   TRUST — pasek zaufania pod Hero (ETAP 8)
   ========================================================== */
.trust-v2{ padding:36px 0; border-bottom:1px solid var(--border); }
.trust-v2-row{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:32px 48px;
}
.trust-v2-item{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--text2);
    font-size:.88rem;
    font-weight:500;
}
.trust-v2-item i{ color:var(--accent); font-size:.95rem; }

/* ==========================================================
   AUTH MINIMAL — logowanie/rejestracja (ETAP 8)
   Pojedyncza wyśrodkowana karta zamiast split-screen.
   Logika PHP bez zmian.
   ========================================================== */
.auth-min{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:140px 24px 60px;
}

.auth-min-box{
    width:100%;
    max-width:400px;
    text-align:center;
}

.auth-min-mark{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:56px; height:56px;
    margin:0 auto 24px;
    border-radius:50%;
    background:var(--card);
    border:1px solid var(--border);
    color:var(--text);
    font-weight:700;
    font-size:1.1rem;
    letter-spacing:.02em;
}

.auth-min-box h1{
    font-size:1.5rem;
    margin-bottom:28px;
    letter-spacing:-.01em;
}

.auth-min-form{
    display:flex;
    flex-direction:column;
    gap:16px;
    text-align:left;
}
.auth-min-form .input-group label{
    display:block;
    font-size:.82rem;
    color:var(--text2);
    margin-bottom:7px;
}
.auth-min-form input{
    width:100%;
    padding:12px 14px;
    border-radius:10px;
    border:1px solid var(--border);
    background:var(--background2);
    color:var(--text);
    font-family:inherit;
    font-size:.9rem;
}
.auth-min-form input:focus{
    outline:none;
    border-color:var(--primary);
}
.auth-min-form .password-hint{ font-size:.76rem; color:var(--text2); margin-top:-6px; }
.auth-min-form .checkbox-row{
    display:flex;
    align-items:flex-start;
    gap:8px;
    font-size:.82rem;
    color:var(--text2);
    line-height:1.5;
}

.auth-min-submit{ width:100%; justify-content:center; margin-top:4px; }
.auth-min-switch{
    text-align:center;
    margin-top:22px;
    font-size:.86rem;
    color:var(--text2);
}
.auth-min-switch a{ color:var(--text); font-weight:600; }

/* ==========================================================
   TEMPLATES v3 — spójne z nowym designem (dokończenie ETAP 8)
   ========================================================== */
.templates-v3{ padding:100px 0; }
.templates-v3-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}
@media (max-width:900px){ .templates-v3-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .templates-v3-grid{ grid-template-columns:1fr; } }

.templates-v3-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:16px;
    overflow:hidden;
}
.templates-v3-cover{
    position:relative;
    height:150px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding-top:26px;
    background:var(--background2);
}
.templates-v3-cover i{ font-size:2rem; color:var(--text2); }
.templates-v3-content{ padding:20px 22px 24px; }
.templates-v3-content h3{ font-size:1.05rem; margin-bottom:6px; }
.templates-v3-content p{ color:var(--text2); font-size:.85rem; margin-bottom:14px; }
.templates-v3-price{ display:block; font-size:1.25rem; font-weight:700; margin-bottom:16px; }
.templates-v3-actions{ display:flex; gap:10px; }
.templates-v3-actions .btn-outline-sm{ flex:1; text-align:center; }
.templates-v3-actions .btn{ flex:1; justify-content:center; }

/* ==========================================================
   ABOUT — notatka o zespole (dokończenie ETAP 8)
   ========================================================== */
.about-team-note{
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid var(--border);
    color:var(--text2);
    font-size:.92rem;
    font-style:italic;
}

/* ==========================================================
   FINAL RELEASE — telefon założyciela, e-mail w stopce
   ========================================================== */
.founder-v2-phone{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:14px;
    font-size:.82rem;
    color:#9aa8ff;
}
.founder-v2-phone:hover{ color:var(--text); }

.footer-v2-email{
    color:var(--text2);
    font-size:.88rem;
}
.footer-v2-email:hover{ color:var(--text); }

/* ==========================================================
   FINAL RELEASE — stan wysyłania formularzy (disabled + spinner)
   ========================================================== */
.btn:disabled,
.btn.is-loading{
    opacity:.7;
    cursor:not-allowed;
    pointer-events:none;
}
.btn.is-loading .btn-label::after{
    content:"";
    display:inline-block;
    width:12px; height:12px;
    margin-left:8px;
    border:2px solid rgba(255,255,255,.4);
    border-top-color:#fff;
    border-radius:50%;
    vertical-align:middle;
    animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
    .btn.is-loading .btn-label::after{ animation:none; }
}

/* ==========================================================
   FINAL RELEASE — pokaż/ukryj hasło (login/register)
   ========================================================== */
.password-input-wrap{ position:relative; }
.password-input-wrap input{ padding-right:42px; }
.password-toggle-btn{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    background:none;
    border:none;
    color:var(--text2);
    cursor:pointer;
    padding:6px;
    font-size:.9rem;
}
.password-toggle-btn:hover{ color:var(--text); }

/* ==========================================================
   FINALNY ETAP — Instagram (footer)
   ========================================================== */
.footer-v2-social{
    width:34px; height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    border:1px solid var(--border);
    color:var(--text2);
    margin-left:10px;
    transition:var(--transition);
}
.footer-v2-social:hover{ color:var(--text); border-color:var(--primary); }

/* ==========================================================
   FINALNY ETAP — notatka o statusie płatności
   ========================================================== */
.order-v2-payment-note{
    max-width:460px;
    margin:24px auto;
    padding:16px 20px;
    border-radius:12px;
    background:rgba(217,119,6,.1);
    border:1px solid rgba(217,119,6,.3);
    color:#fbbf24;
    font-size:.85rem;
    text-align:left;
    display:flex;
    gap:10px;
    align-items:flex-start;
    line-height:1.6;
}

/* ==========================================================
   CASE STUDY — strona portfolio/case-study.php
   ========================================================== */
.cs-page{ padding:150px 0 100px; }
.cs-back{
    display:inline-flex; align-items:center; gap:8px;
    color:var(--text2); font-size:.88rem; margin-bottom:30px;
}
.cs-back:hover{ color:var(--text); }

.cs-header{ max-width:700px; margin-bottom:40px; }
.cs-header h1{ font-size:clamp(1.8rem,3.5vw,2.5rem); letter-spacing:-.01em; }

.cs-grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:40px; align-items:start; }
@media (max-width:900px){ .cs-grid{ grid-template-columns:1fr; } }

.cs-block{ margin-bottom:34px; }
.cs-block h2{ font-size:1.15rem; margin-bottom:12px; }
.cs-block p{ color:var(--text2); line-height:1.75; }

.cs-process{ list-style:none; counter-reset:step; display:flex; flex-direction:column; gap:14px; }
.cs-process li{ display:flex; align-items:center; gap:14px; color:var(--text2); font-size:.92rem; }
.cs-process li span{
    width:28px; height:28px; flex-shrink:0;
    border-radius:50%;
    background:var(--card); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    font-size:.78rem; font-weight:700; color:var(--text);
}

.cs-side-card{
    background:var(--card); border:1px solid var(--border); border-radius:18px;
    padding:26px; position:sticky; top:110px;
}
.cs-cta-box{
    margin-top:20px; padding:22px;
    background:var(--card); border:1px solid var(--border); border-radius:18px;
    text-align:center;
}
.cs-cta-box p{ color:var(--text2); font-size:.88rem; margin-bottom:10px; }
.cs-cta-box a{ color:#9aa8ff; font-weight:600; font-size:.9rem; }