@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
[x-cloak]{display:none!important}
:root {
      --ink:#111111;
      --muted:#5f5a60;
      --paper:#fffdfd;
      --soft:#f7f4f7;
      --pink:#f35fa5;
      --pink-dark:#de3d8a;
      --blush:#f8dce8;
      --coral:#ff947f;
      --lav:#ddd8f3;
      --peach:#ffd8c8;
      --line:rgba(17,17,17,.12);
      --shadow:0 24px 60px rgba(41,18,32,.13);
      --radius:28px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55;overflow-x:hidden}
    img{max-width:100%;display:block}
    button,input,textarea,select{font:inherit}
    button,a{-webkit-tap-highlight-color:transparent}
    a{color:inherit;text-decoration:none}
    .container{width:min(1180px,calc(100% - 40px));margin-inline:auto}
    .section{padding:110px 0;position:relative}
    .section-head{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:end;margin-bottom:55px}
    .eyebrow{font-size:.78rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--pink-dark);display:flex;align-items:center;gap:10px}
    .eyebrow::before{content:"";width:34px;height:3px;border-radius:99px;background:linear-gradient(90deg,var(--pink),var(--coral))}
    h1,h2,h3{font-family:"Arial Black",Arial,Helvetica,sans-serif;line-height:1.02;letter-spacing:-.045em;margin:0}
    h1{font-size:clamp(3.2rem,7vw,7rem);max-width:820px}
    h2{font-size:clamp(2.5rem,5vw,5rem)}
    h3{font-size:1.45rem;letter-spacing:-.025em}
    .lead{font-size:clamp(1.05rem,1.6vw,1.35rem);color:var(--muted);max-width:720px}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:999px;padding:16px 24px;font-weight:800;cursor:pointer;transition:.25s ease}
    .btn-primary{background:var(--ink);color:#fff;box-shadow:0 12px 30px rgba(0,0,0,.16)}
    .btn-primary:hover{transform:translateY(-3px);background:var(--pink-dark)}
    .btn-soft{background:var(--blush);color:var(--ink)}
    .btn-soft:hover{transform:translateY(-3px);background:#f4cadd}
    .arrow{font-size:1.15em}

    /* Navigation */
    .nav-wrap{position:fixed;top:16px;left:0;right:0;z-index:40;pointer-events:none}
    .nav{pointer-events:auto;width:min(1220px,calc(100% - 28px));margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:13px 15px 13px 22px;border:1px solid rgba(255,255,255,.7);border-radius:999px;background:rgba(255,253,253,.82);backdrop-filter:blur(18px);box-shadow:0 12px 38px rgba(36,16,28,.1)}
    .logo{width:145px}
    .nav-links{display:flex;align-items:center;gap:23px;font-size:.91rem;font-weight:750}
    .nav-links a:not(.btn){position:relative}
    .nav-links a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:2px;background:var(--pink);transition:.2s}
    .nav-links a:hover::after{right:0}
    .menu-toggle{display:none;width:46px;height:46px;border:0;border-radius:50%;background:var(--ink);color:#fff;font-size:1.3rem;cursor:pointer}

    /* Hero */
    .hero{min-height:100svh;padding:150px 0 80px;display:flex;align-items:center;overflow:hidden}
    .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:55px;align-items:center}
    .hero-copy{position:relative;z-index:2}
    .hero h1 span{background:linear-gradient(100deg,var(--pink),var(--coral));-webkit-background-clip:text;background-clip:text;color:transparent}
    .hero-copy .lead{margin:28px 0 30px}
    .hero-actions{display:flex;flex-wrap:wrap;gap:13px}
    .coverage{margin-top:25px;font-size:.82rem;font-weight:700;color:var(--muted)}
    .hero-visual{position:relative;min-height:650px}
    /* HERO wizual: full-bleed (kierunek 4) — zdjęcie wychodzi do prawej krawędzi ekranu, bez łuku.
       right: min(0px, ...) samoogranicza się -> na desktopie bleed, poniżej 1180px flush (0). .hero{overflow:hidden} tnie nadmiar. */
    .hero-photo{position:absolute;top:0;left:38px;bottom:0;right:min(0px,calc((1180px - 100vw)/2));border-radius:40px 0 0 40px;overflow:hidden;box-shadow:var(--shadow);background:var(--blush)}
    .hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 48%}
    .hero-badge{position:absolute;left:calc(-30px + var(--bx,0px));bottom:calc(70px - var(--by,0px));background:#fff;border-radius:22px;padding:18px 22px;box-shadow:var(--shadow);font-weight:800;max-width:225px;transform:rotate(-3deg)}
    .hero-sticker{position:absolute;right:calc(-22px - var(--sx,0px));top:calc(80px + var(--sy,0px));width:120px;height:120px;border-radius:50%;background:linear-gradient(135deg,var(--pink),var(--coral),#ffd76d);display:grid;place-items:center;text-align:center;font-family:"Arial Black";font-size:.9rem;line-height:1.05;transform:rotate(10deg);box-shadow:var(--shadow)}
    @keyframes wxFloatSticker{0%,100%{transform:rotate(10deg) translateY(0)}50%{transform:rotate(10deg) translateY(-14px)}}
    @keyframes wxFloatBadge{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(-3deg) translateY(-10px)}}
    .wx-float--on .hero-sticker{animation:wxFloatSticker 6s ease-in-out infinite}
    .wx-float--on .hero-badge{animation:wxFloatBadge 7.5s ease-in-out infinite}
    @media(prefers-reduced-motion:reduce){.hero-sticker,.hero-badge{animation:none!important}}
    .scribble{position:absolute;pointer-events:none;opacity:.9}
    .scribble.one{width:220px;height:140px;left:-120px;top:130px;transform:rotate(-18deg)}
    .scribble.two{width:240px;height:150px;right:-130px;bottom:10px;transform:rotate(8deg)}
    .scribble i{position:absolute;display:block;height:7px;border-radius:99px;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.04)}
    .scribble i:nth-child(1){width:80%;top:8%;left:8%;transform:rotate(16deg)}
    .scribble i:nth-child(2){width:55%;top:32%;left:25%;transform:rotate(16deg)}
    .scribble i:nth-child(3){width:90%;top:56%;left:0;transform:rotate(16deg)}
    .scribble i:nth-child(4){width:60%;top:80%;left:22%;transform:rotate(16deg)}
    .orb{position:absolute;border-radius:50%;filter:blur(1px);opacity:.75;pointer-events:none}
    .orb.a{width:420px;height:420px;background:var(--blush);left:-240px;top:120px}
    .orb.b{width:260px;height:260px;background:var(--lav);right:-140px;bottom:40px}

    /* Ticker */
    .ticker{overflow:hidden;border-block:1px solid var(--line);background:#fff}
    .ticker-track{display:flex;width:max-content;animation:ticker 28s linear infinite;padding:16px 0}
    .ticker-item{font-family:"Arial Black";font-size:1rem;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;display:flex;align-items:center;gap:25px;margin-right:25px}
    .ticker-item::after{content:"✦";color:var(--pink)}
    @keyframes ticker{to{transform:translateX(-50%)}}

    /* Problem */
    .problem{background:linear-gradient(150deg,#fff 0%,#fbf0f6 50%,#f3efff 100%)}
    .problem-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:start}
    .problem-list{display:grid;gap:15px}
    .problem-item{display:flex;align-items:center;gap:17px;padding:19px 22px;background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.9);border-radius:18px;box-shadow:0 10px 30px rgba(66,33,52,.06);font-weight:700}
    .problem-item span{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;font-size:.85rem}
    .problem-note{margin-top:25px;padding:24px;border-radius:20px;background:var(--ink);color:#fff;font-size:1.15rem;font-weight:750}

    /* Services */
    .services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .service-card{position:relative;overflow:hidden;min-height:510px;border-radius:var(--radius);background:var(--soft);box-shadow:0 18px 45px rgba(42,26,37,.08);transition:.3s}
    .service-card:hover{transform:translateY(-8px)}
    .service-card img{height:260px;width:100%;object-fit:cover}
    .service-card:nth-child(1) img{object-position:center 66%}
    .service-card:nth-child(2) img{object-position:center 55%}
    .service-card:nth-child(3) img{object-position:center 58%}
    .service-body{padding:28px}
    .service-no{display:inline-grid;place-items:center;width:39px;height:39px;border-radius:50%;background:var(--pink);font-weight:900;margin-bottom:18px}
    .service-body p{color:var(--muted);margin:14px 0 0}

    /* Portfolio */
    .portfolio-section{background:var(--ink);color:#fff}
    .portfolio-section .lead{color:rgba(255,255,255,.68)}
    .portfolio-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
    .filter-btn{padding:11px 18px;border:1px solid rgba(255,255,255,.22);background:transparent;color:#fff;border-radius:999px;cursor:pointer;font-weight:800}
    .filter-btn.active,.filter-btn:hover{background:#fff;color:var(--ink)}
    .portfolio-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:230px;gap:14px;grid-auto-flow:dense}
    .portfolio-card{position:relative;padding:0;border:0;border-radius:22px;overflow:hidden;cursor:zoom-in;background:#222}
    .portfolio-card:nth-child(1),.portfolio-card:nth-child(6),.portfolio-card:nth-child(9){grid-row:span 2}
    .portfolio-card:nth-child(2),.portfolio-card:nth-child(8),.portfolio-card:nth-child(12){grid-column:span 2}
    .portfolio-card img{width:100%;height:100%;object-fit:cover;transition:.5s}
    .portfolio-card:hover img{transform:scale(1.055)}
    .portfolio-overlay{position:absolute;inset:auto 12px 12px 12px;padding:15px;border-radius:15px;background:rgba(17,17,17,.66);backdrop-filter:blur(12px);display:flex;justify-content:space-between;align-items:end;gap:12px;text-align:left;opacity:0;transform:translateY(10px);transition:.3s}
    .portfolio-card:hover .portfolio-overlay{opacity:1;transform:none}
    .portfolio-overlay small{color:#ffb2d4}

    /* Why */
    .why-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
    .why-image{position:relative}
    .why-image img{border-radius:34px;box-shadow:var(--shadow);width:100%;height:660px;object-fit:cover;object-position:center 55%}
    .why-image::after{content:"LUBIMY LUDZI\A BARDZIEJ NIŻ ALGORYTMY";white-space:pre;position:absolute;right:-25px;bottom:35px;background:var(--pink);padding:18px 22px;border-radius:18px;font-family:"Arial Black";line-height:1.08;transform:rotate(3deg);box-shadow:var(--shadow)}
    .why-list{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:34px}
    .why-item{padding:18px;border:1px solid var(--line);border-radius:17px;font-weight:750;background:#fff}
    .why-item b{display:block;color:var(--pink-dark);font-size:1.25rem;margin-bottom:7px}

    /* Process */
    .process{background:var(--soft)}
    .process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:steps}
    .process-card{counter-increment:steps;position:relative;padding:32px 25px 28px;border-radius:24px;background:#fff;border:1px solid var(--line);min-height:320px;overflow:hidden}
    .process-card::before{content:"0" counter(steps);font-family:"Arial Black";font-size:4.8rem;line-height:1;color:var(--blush);position:absolute;right:10px;top:5px}
    .process-icon{font-size:2rem;margin-bottom:75px}
    .process-card p{color:var(--muted);font-size:.95rem}

    /* Smart tools */
    .tools-wrap{position:relative}
    .tools-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:7px 2px 28px;scrollbar-width:none}
    .tools-track::-webkit-scrollbar{display:none}
    .tool-card{scroll-snap-align:start;flex:0 0 330px;min-height:350px;border-radius:25px;padding:28px;background:linear-gradient(145deg,#fff 0%,var(--blush) 100%);border:1px solid rgba(243,95,165,.2);position:relative;overflow:hidden}
    .tool-card:nth-child(3n+2){background:linear-gradient(145deg,#fff 0%,var(--lav) 100%)}
    .tool-card:nth-child(3n){background:linear-gradient(145deg,#fff 0%,var(--peach) 100%)}
    .tool-icon{width:62px;height:62px;border-radius:20px;background:var(--ink);display:grid;place-items:center;color:#fff;font-size:1.7rem;margin-bottom:55px;transform:rotate(-3deg)}
    .tool-card p{color:var(--muted)}
    .tool-card::after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.4);right:-40px;top:-40px}
    .tool-nav{display:flex;gap:10px;justify-content:flex-end;margin-top:10px}
    .tool-nav button{width:49px;height:49px;border:0;border-radius:50%;background:var(--ink);color:#fff;font-size:1.3rem;cursor:pointer}

    /* About */
    .about{background:linear-gradient(160deg,#fff 15%,#faf0f5 100%)}
    .about-intro{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-bottom:90px}
    .about-intro img{width:100%;height:660px;object-fit:cover;object-position:center 48%;border-radius:34px;box-shadow:var(--shadow)}
    .about-copy p{color:var(--muted);font-size:1.06rem}
    .people-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
    .person-card{display:grid;grid-template-columns:42% 58%;background:#fff;border-radius:28px;overflow:hidden;box-shadow:0 18px 50px rgba(54,30,44,.08)}
    .person-card img{width:100%;height:100%;min-height:630px;object-fit:cover}
    .person-card:first-child img{object-position:center 47%}
    .person-card:last-child img{object-position:center 44%}
    .person-content{padding:34px 30px}
    .person-content p{font-size:.94rem;color:var(--muted)}
    details{border-top:1px solid var(--line);padding-top:18px;margin-top:18px}
    summary{cursor:pointer;font-weight:850;color:var(--pink-dark)}

    /* Testimonials */
    .reviews{background:var(--ink);color:#fff;overflow:hidden}
    .reviews .lead{color:rgba(255,255,255,.65)}
    .review-shell{display:grid;grid-template-columns:120px 1fr 120px;gap:25px;align-items:center}
    .review-btn{width:70px;height:70px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;font-size:1.6rem;cursor:pointer;justify-self:center;transition:.2s}
    .review-btn:hover{background:#fff;color:var(--ink)}
    .review-card{min-height:420px;padding:55px;border-radius:32px;background:linear-gradient(135deg,#2a2026,#171417);display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 25px 70px rgba(0,0,0,.25)}
    .quote{font-size:clamp(1.22rem,2.4vw,2rem);line-height:1.42;letter-spacing:-.02em}
    .quote::before{content:"“";font-family:Georgia,serif;font-size:7rem;line-height:.4;color:var(--pink);display:block;margin-bottom:25px}
    .review-author{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:35px;padding-top:25px;border-top:1px solid rgba(255,255,255,.16)}
    .stars{color:#ff9fcc;letter-spacing:.16em}
    .review-count{color:rgba(255,255,255,.55);font-size:.85rem}

    /* CTA */
    .cta{padding:55px 0;background:#fff}
    .cta-box{min-height:500px;border-radius:38px;overflow:hidden;position:relative;display:grid;grid-template-columns:1fr 1fr;background:linear-gradient(130deg,var(--pink),var(--coral));box-shadow:var(--shadow)}
    .cta-copy{padding:65px;align-self:center;position:relative;z-index:2}
    .cta-copy h2{font-size:clamp(2.7rem,5vw,5.4rem)}
    .cta-copy p{font-size:1.15rem;max-width:500px}
    .cta-photo{position:relative}
    .cta-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%}
    .cta-photo::after{display:none}

    /* Contact */
    .contact-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:75px;align-items:start}
    .contact-data{position:sticky;top:130px}
    .contact-list{display:grid;gap:14px;margin-top:35px}
    .contact-link{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);font-weight:750}
    .contact-link span{display:grid;place-items:center;width:43px;height:43px;border-radius:50%;background:var(--blush)}
    .contact-form{padding:38px;border-radius:28px;background:var(--soft);border:1px solid var(--line)}
    .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
    .field{display:grid;gap:8px}
    .field.full{grid-column:1/-1}
    label{font-size:.85rem;font-weight:800}
    .field input,.field textarea,.field select,.contact-form input,.contact-form textarea,.contact-form select{width:100%;border:1px solid rgba(17,17,17,.15);border-radius:14px;padding:15px 16px;background:#fff;outline:none}
    .field input:focus,.field textarea:focus,.field select:focus,.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{border-color:var(--pink);box-shadow:0 0 0 4px rgba(243,95,165,.12)}
    textarea{min-height:150px;resize:vertical}
    .form-note{font-size:.8rem;color:var(--muted)}
    .form-success{display:none;margin-top:15px;padding:14px;border-radius:13px;background:#dff6e6;color:#1f6a37;font-weight:750}

    footer{padding:38px 0;border-top:1px solid var(--line)}
    .footer-grid{display:flex;align-items:center;justify-content:space-between;gap:30px}
    .footer-grid img{width:130px}
    .footer-grid p{font-size:.82rem;color:var(--muted)}

    /* Lightbox */
    .lightbox{position:fixed;inset:0;z-index:80;background:rgba(12,9,11,.93);display:none;place-items:center;padding:25px}
    .lightbox.open{display:grid}
    .lightbox img{max-width:min(1200px,94vw);max-height:90vh;border-radius:18px;box-shadow:0 30px 90px #000}
    .lightbox-close{position:absolute;right:24px;top:22px;width:50px;height:50px;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:transparent;color:#fff;font-size:1.6rem;cursor:pointer}

    .reveal{opacity:0;transform:translateY(25px);transition:opacity .7s ease,transform .7s ease}
    .reveal.visible{opacity:1;transform:none}

    @media(max-width:1000px){
      .nav-links{display:none;position:absolute;top:74px;left:14px;right:14px;padding:24px;background:#fff;border-radius:25px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}
      .nav-links.open{display:flex}
      .menu-toggle{display:block}
      .hero-grid,.problem-grid,.why-grid,.about-intro,.contact-grid{grid-template-columns:1fr}
      .hero{padding-top:130px}
      .hero-visual{min-height:610px}
      .hero-photo{left:0;border-radius:34px} /* stacked: pełen zaokrąglony prostokąt (bez bleed) */
      .section-head{grid-template-columns:1fr;gap:20px}
      .services-grid{grid-template-columns:1fr 1fr}
      .services-grid .service-card:last-child{grid-column:1/-1}
      .portfolio-grid{grid-template-columns:repeat(3,1fr)}
      .process-grid{grid-template-columns:1fr 1fr}
      .people-grid{grid-template-columns:1fr}
      .review-shell{grid-template-columns:75px 1fr 75px}
      .cta-box{grid-template-columns:1fr;min-height:850px}
      .cta-photo{min-height:430px}
      .contact-data{position:static}
    }
    @media(max-width:700px){
      .container{width:min(100% - 28px,1180px)}
      .section{padding:78px 0}
      .nav{padding-left:16px}
      .logo{width:125px}
      h1{font-size:clamp(2.85rem,15vw,4.6rem)}
      h2{font-size:clamp(2.3rem,12vw,3.8rem)}
      .hero-visual{min-height:530px}
      .hero-photo{inset:0;border-radius:34px}
      .hero-badge{left:12px;bottom:-15px;max-width:205px}
      .hero-sticker{width:95px;height:95px;right:-5px;top:25px;font-size:.73rem}
      .services-grid{grid-template-columns:1fr}
      .services-grid .service-card:last-child{grid-column:auto}
      .portfolio-grid{grid-template-columns:1fr 1fr;grid-auto-rows:210px;grid-auto-flow:dense}
      .portfolio-card:nth-child(n){grid-column:auto;grid-row:auto}
      .portfolio-card:nth-child(1),.portfolio-card:nth-child(6),.portfolio-card:nth-child(9){grid-row:span 2}
      .why-image img,.about-intro img{height:520px}
      .why-image::after{right:8px;bottom:15px;font-size:.75rem}
      .why-list{grid-template-columns:1fr}
      .process-grid{grid-template-columns:1fr}
      .tool-card{flex-basis:87vw}
      .person-card{grid-template-columns:1fr}
      .person-card img{min-height:460px;height:460px}
      .review-shell{grid-template-columns:1fr}
      .review-btn{position:absolute;z-index:2;width:52px;height:52px;background:rgba(0,0,0,.45)}
      .review-btn.prev{left:20px}
      .review-btn.next{right:20px}
      .review-card{padding:34px 24px;min-height:520px}
      .quote{font-size:1.12rem}
      .cta-copy{padding:38px 27px}
      .form-grid{grid-template-columns:1fr}
      .field.full{grid-column:auto}
      .contact-form{padding:24px}
      .footer-grid{flex-direction:column;align-items:flex-start}
    }

/* ===================== ELEMENTOR ADAPT — 1:1 z projektem ===================== */
[x-cloak]{display:none!important}
.elementor-widget-container{line-height:inherit}

/* --- szerokość kontenera = projekt --- */
.elementor-section > .elementor-container{max-width:1180px;width:min(1180px,calc(100% - 40px))}
.elementor-section.elementor-section-content-full > .elementor-container{max-width:100%;width:100%}

/* --- zeruj domyślne odstępy Elementora (spacing steruje projekt) --- */
.elementor-widget:not(:last-child){margin-bottom:0}
.elementor-column-gap-default > .elementor-column > .elementor-element-populated{padding:0}
.elementor-element .elementor-widget-container{margin:0}

/* --- padding sekcji (klasa .section nie renderuje się z importu) --- */
#start,#problem,#oferta,#realizacje,#dlaczego,#wspolpraca,#narzedzia,#onas,#opinie,#kontakt{padding:110px 0}
#start{padding:150px 0 80px}
#wspolpraca-cta{padding:55px 0}
@media(max-width:700px){#start,#problem,#oferta,#realizacje,#dlaczego,#wspolpraca,#narzedzia,#onas,#opinie,#kontakt{padding:78px 0}}

/* --- tła sekcji --- */
#problem{background:linear-gradient(150deg,#fff 0%,#fbf0f6 50%,#f3efff 100%)}
#realizacje{background:var(--ink);color:#fff}
#realizacje .lead{color:rgba(255,255,255,.68)}
#wspolpraca{background:var(--soft)}
#onas{background:linear-gradient(160deg,#fff 15%,#faf0f5 100%)}
#opinie{background:var(--ink);color:#fff}
#opinie .lead{color:rgba(255,255,255,.65)}

/* --- gridy 2-kolumnowe (Elementor container flex) --- */
#start > .elementor-container{gap:55px;align-items:center;flex-wrap:nowrap}
#problem > .elementor-container{gap:80px;align-items:flex-start;flex-wrap:nowrap}
#dlaczego > .elementor-container{gap:70px;align-items:center;flex-wrap:nowrap}
#kontakt > .elementor-container{gap:75px;align-items:flex-start;flex-wrap:nowrap}
@media(max-width:1000px){
  #start > .elementor-container,#problem > .elementor-container,#dlaczego > .elementor-container,#kontakt > .elementor-container{flex-wrap:wrap;gap:35px}
  #start > .elementor-container > .elementor-column,#problem > .elementor-container > .elementor-column,#dlaczego > .elementor-container > .elementor-column,#kontakt > .elementor-container > .elementor-column{width:100%!important}
}

/* --- section-head (natywne: oferta/proces/narzędzia) --- */
[id^="shead-"]{margin-bottom:55px}
[id^="shead-"] > .elementor-container{gap:60px;align-items:flex-end;flex-wrap:nowrap}
@media(max-width:1000px){[id^="shead-"] > .elementor-container{flex-wrap:wrap;gap:20px}
  [id^="shead-"] > .elementor-container > .elementor-column{width:100%!important}}

/* --- about-intro / people-grid --- */
#about-intro-row{margin-bottom:90px}
#about-intro-row > .elementor-container{gap:60px;align-items:center;flex-wrap:nowrap}
#people-row > .elementor-container{gap:22px;align-items:stretch;flex-wrap:nowrap}
@media(max-width:1000px){
  #about-intro-row > .elementor-container,#people-row > .elementor-container{flex-wrap:wrap;gap:22px}
  #about-intro-row > .elementor-container > .elementor-column,#people-row > .elementor-container > .elementor-column{width:100%!important}
}
#people-row .elementor-column > .elementor-element-populated{height:100%}

/* --- hero-copy: rytm pionowy natywnych widgetów --- */
#start > .elementor-container > .elementor-column:first-child .lead{margin:28px 0 30px}
#start > .elementor-container > .elementor-column:first-child .coverage{margin-top:25px}
#start .hero-actions{margin:0}

/* --- rytm nagłówków natywnych (eyebrow nad h2, lead pod) --- */
.elementor-widget-heading + .elementor-widget-text-editor{margin-top:0}
#problem .elementor-widget-text-editor .eyebrow,#oferta .eyebrow,#wspolpraca .eyebrow,#narzedzia .eyebrow{margin-bottom:14px}
#problem h2,#oferta h2,#wspolpraca h2,#narzedzia h2,#dlaczego h2,#onas h2{margin:0}

/* --- nagłówki na ciemnych sekcjach białe (kit Elementora daje #6ec1e4) --- */
#realizacje .elementor-heading-title,#opinie .elementor-heading-title{color:#fff}
.elementor-heading-title{color:inherit}

/* --- Form Pro (kontakt) ostylowany do projektu --- */
#kontakt .contact-form,#kontakt .elementor-widget-form{padding:38px;border-radius:28px;background:var(--soft);border:1px solid var(--line)}
#kontakt .elementor-field-group > label{font-size:.85rem;font-weight:800;margin-bottom:8px}
#kontakt .elementor-field-textual{border:1px solid rgba(17,17,17,.15)!important;border-radius:14px!important;padding:15px 16px!important;background:#fff!important;min-height:auto}
#kontakt textarea.elementor-field-textual{min-height:150px}
#kontakt .elementor-button{background:var(--ink);color:#fff;border-radius:999px;padding:16px 24px;font-weight:800;justify-content:center;width:100%}
#kontakt .elementor-button:hover{background:var(--pink-dark)}


/* ===== FIX: kolory nagłówków (kit Elementora wymusza #6ec1e4) ===== */
.elementor-widget-heading .elementor-heading-title{color:var(--ink)!important}
/* ciemne sekcje — białe nagłówki */
#realizacje .elementor-heading-title,#opinie .elementor-heading-title,
#realizacje h2,#opinie h2{color:#fff!important}
/* hero: gradientowe „czasu." (selektor .hero nie renderuje się z importu) */
#start .elementor-heading-title span{background:linear-gradient(100deg,var(--pink),var(--coral));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important}
/* tekst na ciemnych sekcjach biały (eyebrow zostaje różowy) */
#realizacje .lead,#opinie .lead{color:rgba(255,255,255,.68)!important}

/* ===== FIX: emoji WordPressa (👋) — inline 1em, nie 150px ===== */
img.emoji,img.wp-smiley{height:1em!important;width:1em!important;display:inline!important;vertical-align:-.1em;margin:0 .05em 0 .1em;padding:0!important;border:0!important;box-shadow:none!important;background:none!important}

/* ===== FIX: font Inter (kit Elementora wymusza Roboto) ===== */
body,.elementor,.elementor-widget-container,.elementor-widget-text-editor,
.elementor p,.elementor a,.elementor li,.elementor span,.elementor button,
.elementor input,.elementor textarea,.elementor select,.elementor label,
.lead,.eyebrow,.btn,.problem-item,.why-item,.tool-card,.process-card,.service-card,.person-content,.contact-link,.nav-links{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
/* nagłówki Arial Black jak w projekcie */
h1,h2,h3,.elementor-heading-title,.review-card .quote{font-family:"Arial Black",Arial,Helvetica,sans-serif!important}

/* FIX: span w nagłówku ma dziedziczyć Arial Black (nie Inter) — np. gradientowe „czasu." */
h1 span,h2 span,h3 span,.elementor-heading-title span{font-family:inherit!important;font-weight:inherit!important}

/* ===================== BRIDGE: natywne widgety -> wygląd projektu ===================== */
/* --- OFERTA: Image Box -> .service-card --- */
#oferta-cards{counter-reset:svc}
#oferta-cards > .elementor-container{gap:18px;align-items:stretch;flex-wrap:nowrap}
#oferta-cards > .elementor-container > .elementor-column > .elementor-widget-wrap{height:100%}
#oferta-cards .elementor-widget-image-box{height:100%}
.service-card{counter-increment:svc;position:relative;overflow:hidden;min-height:510px;border-radius:var(--radius);background:var(--soft);box-shadow:0 18px 45px rgba(42,26,37,.08);transition:.3s}
.service-card:hover{transform:translateY(-8px)}
.service-card .elementor-widget-container{height:100%}
.service-card .elementor-image-box-wrapper{display:flex;flex-direction:column;height:100%;text-align:left;gap:0}
.service-card .elementor-image-box-img{margin:0!important;width:100%}
.service-card .elementor-image-box-img img{width:100%;height:260px;object-fit:cover;border-radius:0;display:block}
.service-card .elementor-image-box-content{padding:28px;position:relative;flex:1}
.service-card .elementor-image-box-title{font-size:1.45rem;letter-spacing:-.025em;margin:0 0 0}
.service-card .elementor-image-box-description{color:var(--muted);margin:14px 0 0}
/* numerki 01/02/03 przy kartach usług — usunięte na życzenie klientki */
.service-card .elementor-image-box-content::before{display:none}
#oferta-cards > .elementor-container > .elementor-column:nth-child(1) .service-card img{object-position:center 66%}
#oferta-cards > .elementor-container > .elementor-column:nth-child(2) .service-card img{object-position:center 55%}
#oferta-cards > .elementor-container > .elementor-column:nth-child(3) .service-card img{object-position:center 58%}
@media(max-width:900px){#oferta-cards > .elementor-container{flex-wrap:wrap}#oferta-cards > .elementor-container > .elementor-column{width:50%!important}}
@media(max-width:600px){#oferta-cards > .elementor-container > .elementor-column{width:100%!important}}

/* --- OFERTA fixy: pełna szerokość obrazu, lewa, kolor tytułu --- */
.service-card .elementor-image-box-wrapper{text-align:left!important}
.service-card figure.elementor-image-box-img{width:100%!important;margin:0!important}
.service-card .elementor-image-box-img img{width:100%!important;max-width:100%!important;height:260px!important;object-fit:cover;border-radius:0;display:block}
.service-card .elementor-image-box-title{color:var(--ink)!important;font-size:1.45rem;margin:0}
.service-card .elementor-image-box-content{padding:28px!important;text-align:left!important}

/* ============ BRIDGE 2: natywne widgety -> projekt (problem/why/proces/tools/kontakt/cta/footer/btn) ============ */
/* --- BUTTONS (.btn na wrapperze Button) --- */
.btn .elementor-button{border:0;border-radius:999px;padding:16px 24px;font-weight:800;font-family:Inter,sans-serif;display:inline-flex;align-items:center;gap:10px;transition:.25s ease;box-shadow:none;line-height:1.2}
.btn-primary .elementor-button{background:var(--ink);color:#fff;box-shadow:0 12px 30px rgba(0,0,0,.16)}
.btn-primary .elementor-button:hover{transform:translateY(-3px);background:var(--pink-dark)}
.btn-soft .elementor-button{background:var(--blush);color:var(--ink)}
.btn-soft .elementor-button:hover{transform:translateY(-3px);background:#f4cadd}
#hero-actions{margin:28px 0 0}
#hero-actions > .elementor-container{gap:13px;flex-wrap:wrap;justify-content:flex-start}
#hero-actions > .elementor-container > .elementor-column{width:auto!important}
#hero-actions .elementor-widget-button,#hero-actions .elementor-widget-wrap{margin:0}

/* --- PROBLEM: Icon Box -> problem-item --- */
#problem-list .problem-item{margin-bottom:15px}
.problem-item{counter-increment:prob;background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.9);border-radius:18px;box-shadow:0 10px 30px rgba(66,33,52,.06)}
#problem-list{counter-reset:prob}
.problem-item .elementor-icon-box-icon{display:none!important}
.problem-item .elementor-icon-box-wrapper{display:flex;align-items:center;gap:17px;padding:19px 22px;text-align:left}
/* Znacznik = gradientowa kropka z logo (pink->coral), bez cyfry — nie sugeruje ilości/kolejności */
.problem-item .elementor-icon-box-wrapper::before{content:"?";flex:0 0 30px;height:30px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:1rem;line-height:1;border-radius:50%;background:linear-gradient(140deg,var(--pink),var(--coral));box-shadow:0 3px 10px rgba(243,95,165,.30)}
.problem-item .elementor-icon-box-content{margin:0;text-align:left}
.problem-item .elementor-icon-box-title{font-size:1rem;font-weight:700;margin:0;color:var(--ink)!important}
/* (Znak „?" dodaje klientka w treści każdego punktu — bez auto-CSS, żeby się nie dublował.) */
.problem-item .elementor-icon-box-description{display:none}
.problem-note{margin-top:25px!important;padding:24px;border-radius:20px;background:var(--ink);font-size:1.15rem;font-weight:750}
.problem-note,.problem-note *{color:#fff!important}

/* --- DLACZEGO --- */
.why-image{position:relative}
.why-image img{width:100%;height:660px;object-fit:cover;object-position:center 55%;border-radius:34px;box-shadow:var(--shadow)}
.why-image::after{content:"LUBIMY LUDZI\A BARDZIEJ NIŻ ALGORYTMY";white-space:pre;position:absolute;right:-25px;bottom:35px;background:var(--pink);padding:18px 22px;border-radius:18px;font-family:"Arial Black",Arial;line-height:1.08;transform:rotate(3deg);box-shadow:var(--shadow);color:var(--ink)}
#why-list{counter-reset:why;margin-top:34px}
#why-list .elementor-widget-wrap{display:grid;grid-template-columns:1fr 1fr;gap:13px;align-content:start}
.why-item{counter-increment:why;padding:18px;border:1px solid var(--line);border-radius:17px;background:#fff;text-align:left}
.why-item .elementor-icon-box-icon{display:none!important}
.why-item .elementor-icon-box-wrapper{display:block;text-align:left}
.why-item .elementor-icon-box-wrapper::before{content:"0" counter(why);display:block;color:var(--pink-dark);font-size:1.25rem;font-weight:900;margin-bottom:7px;font-family:"Arial Black",Arial}
.why-item .elementor-icon-box-title{font-size:1rem;font-weight:750;margin:0;color:var(--ink)!important}
.why-item .elementor-icon-box-description{display:none}
.about-img img{width:100%;height:660px;object-fit:cover;object-position:center 48%;border-radius:34px;box-shadow:var(--shadow)}

/* --- PROCES --- */
#proc-grid{counter-reset:steps;margin-top:0}
#proc-grid .elementor-widget-wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-content:start}
.process-card{counter-increment:steps;position:relative;padding:32px 25px 28px;border-radius:24px;background:#fff;border:1px solid var(--line);min-height:320px;overflow:hidden;text-align:left}
.process-card::before{content:"0" counter(steps);font-family:"Arial Black",Arial;font-size:4.8rem;line-height:1;color:var(--blush);position:absolute;right:10px;top:5px}
/* karta procesu — markup widgetu weblix-krok (.process-icon / h3 / p).
   Emoji jest teraz treścią widgetu (pole tekstowe edytowalne przez klienta),
   NIE wstrzykiwane przez CSS. Numer 01–04 nadal daje .process-card::before (licznik). */
.process-card .process-icon{font-size:2rem;margin-bottom:75px;line-height:1}
.process-card h3{font-size:1.45rem;margin:0;color:var(--ink)!important}
.process-card p{color:var(--muted);font-size:.95rem;margin-top:14px}
/* FALLBACK dla stanu Icon Box (gdyby zapis klienta cofnął swap na widget) — ikona przez CSS */
.process-card .elementor-icon-box-icon{display:none!important}
.process-card .elementor-icon-box-wrapper::before{font-size:2rem;margin-bottom:75px;display:block;line-height:1}
#proc-1 .elementor-icon-box-wrapper::before{content:"☕"}
#proc-2 .elementor-icon-box-wrapper::before{content:"↗"}
#proc-3 .elementor-icon-box-wrapper::before{content:"●"}
#proc-4 .elementor-icon-box-wrapper::before{content:"✦"}
.process-card .elementor-icon-box-title{font-size:1.45rem;margin:0;color:var(--ink)!important}
.process-card .elementor-icon-box-description{color:var(--muted);font-size:.95rem;margin-top:14px}

/* --- NARZĘDZIA (scroll) --- */
#toolsTrack{overflow-x:auto;scrollbar-width:none}
#toolsTrack::-webkit-scrollbar{display:none}
#toolsTrack > .elementor-widget-wrap{display:flex;gap:16px;width:max-content;padding:7px 2px 28px;align-items:stretch}
.tool-card{scroll-snap-align:start;flex:0 0 330px;min-height:350px;border-radius:25px;padding:28px;background:linear-gradient(145deg,#fff 0%,var(--blush) 100%);border:1px solid rgba(243,95,165,.2);position:relative;overflow:hidden;text-align:left}
/* karta narzędzia — markup widgetu weblix-narzedzie (.tool-icon / h3 / p).
   Emoji jest treścią widgetu (pole tekstowe edytowalne przez klienta), NIE wstrzykiwane CSS-em.
   Ciemny kwadrat ikony daje .tool-icon (wyżej). */
.tool-card h3{font-size:1.45rem;margin:0;color:var(--ink)!important}
.tool-card p{color:var(--muted);margin-top:14px}
/* Własny obrazek-ikona w kwadracie (opcja „Własny obrazek"). auto+max% => zachowuje proporcje
   (także dla nie-kwadratowych PNG) i jest wyśrodkowany przez grid .tool-icon (place-items:center). */
.tool-icon img{width:auto;height:auto;max-width:58%;max-height:58%;object-fit:contain;display:block}
/* Wyprostowane kafelki ikon (bez przechyłu -3deg z designu emoji) */
#toolsTrack .tool-icon{transform:none}
/* FALLBACK dla stanu Icon Box (gdyby zapis klienta cofnął swap na widget): ikona przez CSS,
   żeby sekcja NIGDY nie została bez ikon. Selektory .elementor-icon-box-* pasują tylko do Icon Box,
   więc nie kolidują z markupem widgetu (.tool-icon). */
.tool-card .elementor-icon-box-icon{display:none!important}
.tool-card .elementor-icon-box-wrapper{text-align:left}
.tool-card .elementor-icon-box-wrapper::before{width:62px;height:62px;border-radius:20px;background:var(--ink);display:grid;place-items:center;color:#fff;font-size:1.7rem;margin-bottom:55px;transform:rotate(-3deg)}
#tool-1 .elementor-icon-box-wrapper::before{content:"📷"}
#tool-2 .elementor-icon-box-wrapper::before{content:"▦"}
#tool-3 .elementor-icon-box-wrapper::before{content:"⌕"}
#tool-4 .elementor-icon-box-wrapper::before{content:"✈"}
#tool-5 .elementor-icon-box-wrapper::before{content:"▶"}
#tool-6 .elementor-icon-box-wrapper::before{content:"◉"}
#tool-7 .elementor-icon-box-wrapper::before{content:"◐"}
#tool-8 .elementor-icon-box-wrapper::before{content:"Aa"}
#tool-9 .elementor-icon-box-wrapper::before{content:"30"}
.tool-card .elementor-icon-box-title{font-size:1.45rem;margin:0;color:var(--ink)!important}
.tool-card .elementor-icon-box-description{color:var(--muted);margin-top:14px}
.tool-nav{display:flex;gap:10px;justify-content:flex-end;margin-top:10px}
.tool-nav button{width:49px;height:49px;border:0;border-radius:50%;background:var(--ink);color:#fff;font-size:1.3rem;cursor:pointer}

/* --- KONTAKT: Icon List --- */
.contact-list{margin-top:35px}
.contact-list .elementor-icon-list-items{display:block}
.contact-list .elementor-icon-list-item{margin:0!important;padding:16px 0!important;border-bottom:1px solid var(--line)}
.contact-list .elementor-icon-list-item a{display:flex;align-items:center;gap:14px;font-weight:750;color:var(--ink)}
.contact-list .elementor-icon-list-icon{display:grid!important;place-items:center;width:43px;height:43px;border-radius:50%;background:var(--blush);padding:0}
.contact-list .elementor-icon-list-icon svg,.contact-list .elementor-icon-list-icon i{width:18px;height:18px;color:var(--ink);font-size:1rem}
.contact-list .elementor-icon-list-text{font-weight:750;color:var(--ink)}
/* (Ukrywanie napisów social w #contact-list cofnięte — czekamy na decyzję A/B klienta.) */
/* Bez linii pod pozycjami głównej listy kontaktowej (kontakt + social) — na życzenie klientki.
   Obejmuje też poziomy rząd ikon social (.elementor-inline-item), NIE karty zespołu (pionowe). */
#contact-list .elementor-icon-list-item,
.contact-list .elementor-inline-item{border-bottom:0}

/* --- FORMULARZ: gwiazdka przy polach wymaganych --- */
/* Elementor rysuje własny znak wymagane TYLKO gdy w ustawieniach formularza włączysz
   „Znak wymagane" (globalnie). Klient zaznacza „Wymagane" na pojedynczym polu i oczekuje
   gwiazdki — dlatego dokładamy ją CSS-em na podstawie klasy .elementor-field-required,
   którą Elementor nadaje każdemu wymaganemu polu niezależnie od tego globalnego przełącznika. */
.elementor-widget-form .elementor-field-group.elementor-field-required > .elementor-field-label::after{
  content:" *";
  color:#e5484d;
  font-weight:800;
}

/* --- CTA --- */
#cta-box{min-height:500px;border-radius:38px;overflow:hidden;position:relative;background:linear-gradient(130deg,var(--pink),var(--coral));box-shadow:var(--shadow)}
#cta-box > .elementor-container{flex-wrap:nowrap;align-items:stretch}
#cta-copy > .elementor-widget-wrap{padding:65px;align-content:center;position:relative;z-index:2}
/* domyślny rozmiar przez :where() (specyficzność 0,1,0) -> klient MOŻE go nadpisać typografią w Elementorze (0,2,0) */
:where(#cta-copy) .elementor-heading-title{font-size:clamp(2.7rem,5vw,5.4rem)}
#cta-copy .lead,#cta-copy .elementor-widget-text-editor{font-size:1.15rem}
#cta-photo{position:relative;padding:0}
#cta-photo > .elementor-widget-wrap,#cta-photo .elementor-widget-image,#cta-photo .elementor-widget-container,#cta-photo .elementor-image-container{height:100%}
.cta-photo img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.cta-photo::after{display:none}

/* --- FOOTER --- */
#site-footer{padding:38px 0;border-top:1px solid var(--line)}
#footer-grid > .elementor-container{align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px}
#footer-grid .elementor-column{width:auto!important}
.footer-logo img{width:130px}
#site-footer p{font-size:.82rem;color:var(--muted);margin:0}
@media(max-width:900px){
  #why-list .elementor-widget-wrap{grid-template-columns:1fr}
  #proc-grid .elementor-widget-wrap{grid-template-columns:1fr 1fr}
  #cta-box > .elementor-container{flex-wrap:wrap}
  #cta-box .elementor-column{width:100%!important}
}

/* ============ FIXY natywnych widgetów ============ */
/* problem-item: wymuszony układ poziomy (numer-lewo, tekst-prawo) */
.problem-item .elementor-icon-box-wrapper{flex-direction:row!important;justify-content:flex-start!important;align-items:center!important}
.problem-item .elementor-icon-box-wrapper::before{width:30px!important;min-width:30px;height:30px!important;flex:0 0 30px}
.problem-item .elementor-icon-box-content{text-align:left!important;flex:1}
.problem-item .elementor-icon-box-title{background:none!important}
/* narzędzia: nie zawijaj (scroll poziomy) */
#toolsTrack > .elementor-widget-wrap{flex-wrap:nowrap!important}

/* ============ FIXY 2 ============ */
/* neutralizacja oryginalnej reguły .problem-item span (trafia w span tytułu Icon Boxa) */
.problem-item .elementor-icon-box-content span{display:inline!important;background:none!important;border-radius:0!important;width:auto!important;height:auto!important;flex:none!important;color:inherit!important;font-size:inherit!important;place-items:initial!important}
/* przyciski: wymuszony kolor (kit Elementora daje zielony) */
.btn-primary .elementor-button{background:var(--ink)!important;color:#fff!important}
.btn-primary .elementor-button:hover{background:var(--pink-dark)!important}
.btn-soft .elementor-button{background:var(--blush)!important;color:var(--ink)!important}
.btn-soft .elementor-button:hover{background:#f4cadd!important}

/* ===================== KONTENERY (Flexbox Container) ===================== */
/* szerokość treści w boxed = jak w projekcie (1180) */
.e-con-boxed > .e-con-inner{max-width:1180px;width:min(1180px,calc(100% - 40px))}
/* scroll narzędzi (kontener #toolsTrack) */
#toolsTrack{overflow-x:auto;scrollbar-width:none;padding-bottom:28px;scroll-snap-type:x mandatory;scroll-padding-left:2px}
#toolsTrack::-webkit-scrollbar{display:none}
#toolsTrack > *{flex-shrink:0!important}
/* karty przyklejają się do lewej krawędzi po przesunięciu (nie zostają w połowie) */
#toolsTrack .tool-card{scroll-snap-align:start}
/* karty w gridach mają wypełniać wysokość */
#oferta-cards > *,#proc-grid > *,#why-list > *{align-self:stretch}
#oferta-cards > * > .service-card,#proc-grid > * .process-card,#why-list > * .why-item{height:100%}
/* przyciski hero auto-szerokość w kontenerze flex */
#hero-actions{flex-wrap:wrap}
#hero-actions > .elementor-widget{width:auto!important}

/* ===================== KOLORY: paleta z globalnych kolorów kitu Elementora ===================== */
/* system_colors kitu (post 7): primary/secondary #111, text #5F5A60, accent #F35FA5.
   Opisy kart, tekst i ikony kontaktu dziedziczą je automatycznie — bez łatek per-element. */
/* wyjątek: etykiety formularza mają być ciemne (#111), a global 'text' to #5F5A60 */
#kontakt .elementor-field-group > label{color:var(--ink)}

/* ===================== CTA + nav hover (poprawki zgodne z projektem) ===================== */
/* CTA copy: padding jak w projekcie (65px), paragraf ciemny (#111), max-width */
#cta-copy{padding:65px}
#cta-copy p{color:var(--ink);max-width:500px}
/* Eyebrow w CTA domyślnie biały (czytelny na różowym panelu). Klientka może go zmienić
   sama: widget tekstowy „Porozmawiajmy" -> zaznacz słowo -> kolor tekstu w pasku (inline nadpisze). */
#cta-copy .eyebrow{color:#fff}

/* --- OPINIE: strzałki — feedback kliknięcia + wyłączanie na skrajach (widać koniec listy);
   selektory z prefiksem .reviews biją bazowe .review-btn niezależnie od kolejności plików --- */
.reviews .review-btn{transition:background .2s,color .2s,transform .12s,opacity .2s}
.reviews .review-btn:active{transform:scale(.9)}
.reviews .review-btn:disabled{opacity:.28;cursor:default;pointer-events:none}
.reviews .review-count{white-space:nowrap;flex:0 0 auto}
@media(max-width:700px){
  /* strzałki POD kartą (nie nachodzą na tekst), obok siebie */
  .reviews .review-shell{grid-template-columns:1fr 1fr;grid-template-areas:"card card" "prev next";gap:16px}
  .reviews .review-card{grid-area:card}
  .reviews .review-btn{position:static;grid-area:prev;justify-self:start;width:54px;height:54px;background:rgba(255,255,255,.08)}
  .reviews .review-btn.next{grid-area:next;justify-self:end}
}

/* --- NARZĘDZIA: strzałki jak w opiniach — feedback + wyłączanie na końcu/początku scrolla --- */
.tool-nav button{transition:background .2s,transform .12s,opacity .2s}
.tool-nav button:hover{background:var(--pink-dark)}
.tool-nav button:active{transform:scale(.9)}
.tool-nav button:disabled{opacity:.28;cursor:default;pointer-events:none}
@media(max-width:1000px){#cta-copy{padding:48px 40px}}
@media(max-width:700px){#cta-copy{padding:38px 27px}}
/* nav button hover -> różowy (pewność, wyższa specyficzność) */
.nav .btn.btn-primary:hover{background:var(--pink-dark);transform:translateY(-3px)}

/* === POPRAWKI MOBILE: zdjęcia „mocno w pionie" -> niższe/bardziej kwadratowe (dopisane na końcu -> wygrywa w kaskadzie) === */
@media(max-width:700px){
  /* realizacje: koniec wąskich, bardzo wysokich kafli — jednolita, niska siatka */
  .portfolio-grid{grid-auto-rows:172px}
  .portfolio-card:nth-child(1),.portfolio-card:nth-child(6),.portfolio-card:nth-child(9){grid-row:auto}
  /* zdjęcia osób (zespół): niższy kadr zamiast 630/460px */
  .person-card img{min-height:0;height:360px}
}