/*
Theme Name: PostawHale
Theme URI: https://postawhale.pl
Author: Sadurski.pl
Author URI: https://sadurski.pl/
Description: Motyw dla PostawHale — konstrukcje stalowe. Treść edytowalna przez ACF Pro (menu „PostawHale”). Formularz przez shortcode (WPForms / CF7).
Version: 1.12.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: postawhale
*/

:root{
    --bg:#eaf0f7; --bg2:#dbe2ea; --panel:#ffffff; --panel-2:#f6f8fb;
    --ink:#13233a; --muted:#5c697a; --faint:#606d7e;
    --line:#ced5de; --line-2:#b2bbc6;
    --mapa-etykieta:#576476;   /* podpisy miast na mapie — czytelne na --bg2 */
    --red:#d8202f; --red-2:#c31b28; --red-deep:#a81521;
    --shadow:0 24px 50px -30px rgba(19,35,58,.26);
    --f-head:"Arial Black","Arial",system-ui,sans-serif;
    --f-sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --f-mono:ui-monospace,"Cascadia Code",Consolas,monospace;
  }
  *{box-sizing:border-box}
  body{margin:0}
  .page{background-color:var(--bg); color:var(--ink);
    background-image:
      linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,.28)),
      url(assets/chmury.webp);
    background-size:auto, cover;
    background-position:center;
    background-attachment:fixed;
    background-blend-mode:normal, soft-light; font-family:var(--f-sans); line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased}
  .wrap{max-width:1200px; margin:0 auto; padding:0 30px}
  a{color:inherit; text-decoration:none}
  h1,h2,h3{margin:0; text-wrap:balance; font-family:var(--f-head); font-weight:800; letter-spacing:-.01em; line-height:1.06}
  p{margin:0}
  /* --- polish / micro-interactions --- */
  html{scroll-behavior:smooth}
  section[id]{scroll-margin-top:108px}
  ::selection{background:var(--red); color:#fff}
  a:focus-visible, button:focus-visible{outline:2px solid var(--red-2); outline-offset:3px; border-radius:5px}
  .progress{position:fixed; top:0; left:0; height:3px; width:0; z-index:82; background:linear-gradient(90deg,var(--red-deep),var(--red-2)); box-shadow:0 0 12px rgba(225,45,59,.55)}
  .btn:active{transform:translateY(0) scale(.985)}
  .rcard:hover{box-shadow:0 26px 54px -30px rgba(0,0,0,.78)}
  .s-item{opacity:0; transform:translateY(18px); transition:opacity .6s ease var(--d,0ms), transform .6s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
  [data-stagger].in .s-item{opacity:1; transform:none}
  nav.main a.active{color:var(--ink)} nav.main a.active::after{width:100%}
  .stat .n{font-variant-numeric:tabular-nums} .stat .count{color:var(--red-2)}
  .ocSpec, .crow .v{font-variant-numeric:tabular-nums}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
  .scroll-tag{animation:bob 2.6s ease-in-out infinite}
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .s-item{opacity:1; transform:none; transition:none}
    .scroll-tag{animation:none}
    .dPanel,.dPanel .photo,.dBody{transition:none}
    .pRail b{transition:none; width:100%}
    .pRail i{transition:none}
    .ocCard .photo,.ocSlide,.ocTop .plus{transition:none}
  }
  .photo{background-size:cover; background-position:center; background-repeat:no-repeat}
  .ph-hero{background-image:url(__HERO__)}
  .ph-hale{background-image:url(__HALE__)}
  .ph-magazyn{background-image:url(__MAGAZYN__)}
  .ph-montaz{background-image:url(__MONTAZ__)}
  .ph-wymiar{background-image:url(__WYMIAR__)}
  .ph-dusk{background-image:url(__DUSK__)}

  .btn{display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-size:15px; font-weight:700;
    padding:15px 26px; border-radius:6px; border:1px solid transparent; transition:.2s; font-family:var(--f-sans)}
  .btn svg{width:16px;height:16px;transition:.2s}
  .btn:hover svg{transform:translateX(3px)}
  .btn-red{background:var(--red); color:#fff; box-shadow:0 14px 30px -14px var(--red)}
  .btn-red:hover{background:var(--red-deep); transform:translateY(-2px)}
  .btn-dark{background:transparent; color:var(--ink); border-color:var(--line-2)}
  .btn-dark:hover{border-color:var(--ink); background:var(--panel)}

  header.bar{position:fixed; top:0; left:0; right:0; z-index:70; background:transparent;
    backdrop-filter:none;
    border-bottom:1px solid transparent;
    transition:background .35s ease, border-color .35s ease, backdrop-filter .35s ease}
  header.bar.solid{background:color-mix(in srgb,var(--bg) 88%,transparent);
    border-bottom-color:var(--line)}
  body.menu-open{overflow:hidden}
  .bar-in{display:flex; align-items:center; justify-content:space-between; height:88px}
  /* nagłówek trzyma linię z hero, nie z siatką treści (1200px) */
  .bar .bar-in{max-width:1680px; padding-left:clamp(28px,5vw,84px); padding-right:clamp(28px,5vw,84px)}
  .brand svg{height:clamp(40px,3.2vw,54px); width:auto; display:block}
  .brand path,.brand polygon{fill:#fff}
  nav.main{display:flex; gap:30px}
  nav.main a{font-size:14.5px; color:var(--muted); transition:.18s; position:relative}
  nav.main a:hover{color:var(--ink)}
  nav.main a::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--red);transition:.22s}
  nav.main a:hover::after{width:100%}
  .bar .btn{padding:11px 20px; font-size:14px}
  .eyebrow{font-family:var(--f-mono); font-size:14.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--red-2); display:inline-flex; gap:11px; align-items:center}
  .eyebrow::before{content:"";width:30px;height:2px;background:var(--red)}

  .hero{position:relative; height:auto; min-height:100vh; padding:132px 0 0; display:flex; align-items:flex-end;
    overflow:hidden; border-bottom:0}
  .hero-bg{position:absolute; inset:0; transform:scale(1.06); animation:kb 20s ease-out forwards}
  @keyframes kb{to{transform:scale(1)}}
  @media(prefers-reduced-motion:reduce){.hero-bg{animation:none;transform:none}}
  .hero-scrim::after{content:""; position:absolute; left:0; right:0; top:0; height:210px;
    background:linear-gradient(180deg, rgba(6,12,20,.74) 0%, rgba(6,12,20,.4) 46%, transparent 100%)}
  .hero-scrim{position:absolute; inset:0;
    background:
      linear-gradient(92deg, rgba(8,16,28,.56) 0%, rgba(8,16,28,.34) 34%, rgba(8,16,28,.03) 66%, rgba(8,16,28,.05) 100%),
      linear-gradient(0deg, rgba(8,16,28,.36) 0%, transparent 55%)}
  .hero-inner{position:relative; z-index:3; max-width:720px; margin:0; padding:0 30px 84px clamp(28px,5vw,84px)}
  .hero .eyebrow{color:#ff5a66; text-shadow:0 2px 14px rgba(0,0,0,.85)}
  .hero h1{font-size:clamp(42px,6.6vw,82px); text-transform:uppercase; color:#fff}
  .hero h1 .red{color:var(--red-2)}
  .hero p.lead{margin-top:22px; max-width:48ch; color:rgba(241,243,245,.82); font-size:clamp(16px,1.7vw,19px)}
  .hero .cta{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap}
  .hero .btn-dark{color:#fff; border-color:rgba(255,255,255,.34)}
  .hero .btn-dark:hover{border-color:#fff; background:rgba(255,255,255,.06)}
  .hero .note{margin-top:26px; font-size:13.5px; color:rgba(241,243,245,.6); display:flex; align-items:center; gap:9px}
  .hero .note .pulse{width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(216,31,47,.5);animation:pulse 2.2s infinite}
  @keyframes pulse{70%{box-shadow:0 0 0 10px rgba(216,31,47,0)}100%{box-shadow:0 0 0 0 rgba(216,31,47,0)}}
  @media(prefers-reduced-motion:reduce){.hero .note .pulse{animation:none}}
  .hero .badge{position:absolute; right:30px; bottom:82px; z-index:3; background:rgba(20,22,26,.66); backdrop-filter:blur(6px); border:1px solid var(--line-2); border-radius:8px; padding:12px 16px}
  .hero .badge b{font-family:var(--f-head); font-size:15px; color:#fff} .hero .badge span{display:block; font-size:12px; color:var(--muted); font-family:var(--f-mono); letter-spacing:.05em}
  .scroll-tag{position:absolute; left:30px; bottom:34px; z-index:3; font-family:var(--f-mono); font-size:11px; letter-spacing:.25em; text-transform:uppercase; color:rgba(241,243,245,.6)}

  section{padding:132px 0}
  section.wrap{padding-top:132px; padding-bottom:132px}
  .sec-head{margin-bottom:72px}
  .sec-head.center{text-align:center; display:flex; flex-direction:column; align-items:center}
  .sec-head h2{font-size:clamp(30px,4vw,46px); text-transform:uppercase; margin-top:14px}
  .sec-head p{color:var(--muted); font-size:16px; max-width:60ch; margin-top:14px}
  .alt{background:color-mix(in srgb, var(--bg2) 74%, transparent); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}

  .reveal{opacity:0; transform:translateY(24px); transition:.8s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1; transform:none}
  @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

  /* OFERTA — karty z wysuwaną specyfikacją */
  .offer{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
  .ocCard{position:relative; height:470px; border-radius:16px; overflow:hidden; border:1px solid var(--line); cursor:pointer; box-shadow:var(--shadow)}
  .ocCard .photo{position:absolute; inset:0; transition:transform .6s}
  .ocCard:hover .photo,.ocCard.open .photo{transform:scale(1.06)}
  .ocCard::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(10,20,33,.94) 8%,rgba(10,20,33,.28) 58%)}
  .ocTop{position:absolute; top:16px; left:16px; right:16px; z-index:3; display:flex; justify-content:space-between; align-items:center}
  .ocTop .n{font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; color:rgba(255,255,255,.72)}
  .ocTop .plus{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.36);display:grid;place-items:center;color:#fff;transition:.32s}
  .ocCard:hover .plus,.ocCard.open .plus{background:var(--red); border-color:var(--red); transform:rotate(135deg)}
  .ocTop .plus svg{width:15px;height:15px}
  .ocBase{position:absolute; left:0; right:0; bottom:0; z-index:3; padding:24px}
  .ocBase h3{font-size:25px; text-transform:uppercase; color:#fff}
  .ocBase .sub{color:rgba(255,255,255,.74); font-size:14px; margin-top:8px}
  .ocSlide{max-height:0; overflow:hidden; transition:max-height .45s cubic-bezier(.3,.7,.2,1)}
  .ocCard:hover .ocSlide,.ocCard.open .ocSlide{max-height:280px}
  .ocSpec{margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.18); display:grid; gap:9px}
  .ocSpec .r{display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:12.5px}
  .ocSpec .r span:first-child{color:rgba(255,255,255,.6)}
  .ocSpec .r span:last-child{color:#fff}
  .ocSlide .btn{margin-top:18px; width:100%; justify-content:center}

  /* DLACZEGO MY */
  .why{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
  .wcell{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:26px 24px; transition:.25s}
  .wcell:hover{border-color:var(--red); transform:translateY(-4px)}
  .wcell .ic{width:48px;height:48px;border-radius:10px;background:var(--panel-2);display:grid;place-items:center;color:var(--red-2);margin-bottom:18px}
  .wcell .ic svg{width:24px;height:24px}
  .wcell h3{font-size:18px; text-transform:uppercase}
  .wcell p{color:var(--muted); font-size:14px; margin-top:10px}
  .stats{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:44px; padding-top:44px; border-top:1px solid var(--line)}
  .stat .n{font-family:var(--f-head); font-size:clamp(38px,5vw,60px); line-height:1}
  .stat .n em{color:var(--red-2); font-style:normal}
  .stat .l{margin-top:10px; color:var(--muted); font-size:14px}

  /* REALIZACJE */
  .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
  .rcard{background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden; transition:.28s}
  .rcard:hover{transform:translateY(-6px); border-color:var(--line-2)}
  .rcard .im{height:230px; position:relative; overflow:hidden}
  .rcard .im .photo{position:absolute; inset:0; transition:.55s}
  .rcard:hover .im .photo{transform:scale(1.07)}
  .rcard .im::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(20,22,26,.55),transparent 55%)}
  .rcard .tag{position:absolute; top:14px; left:14px; z-index:2; font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; background:var(--red); color:#fff; padding:5px 11px; border-radius:5px}
  .rcard .b{padding:22px 22px 26px}
  .rcard h3{font-size:21px; text-transform:uppercase}
  .rcard p{color:var(--muted); font-size:14px; margin-top:8px}
  .center-btn{display:flex; justify-content:center; margin-top:40px}

  /* REALIZACJE — mozaika */
  .gal{display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:210px; gap:16px}
  .g{position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--line)}
  .g .photo{position:absolute; inset:0; transition:.6s}
  .g:hover .photo{transform:scale(1.07)}
  .g .gtag{position:absolute; top:14px; left:14px; z-index:2; font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; background:var(--red); color:#fff; padding:5px 11px; border-radius:5px}
  .g .cap{position:absolute; left:0; right:0; bottom:0; padding:22px 20px 18px; z-index:2;
    background:linear-gradient(0deg,rgba(15,17,20,.88),transparent); color:#fff; transform:translateY(6px); opacity:.92; transition:.3s}
  .g:hover .cap{transform:none; opacity:1}
  .g .cap h4{font-family:var(--f-head); font-size:19px; text-transform:uppercase; margin:0}
  .g .cap span{font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; opacity:.85}
  .g-a{grid-column:span 4; grid-row:span 2}
  .g-b{grid-column:span 2}.g-c{grid-column:span 2}
  .g-d{grid-column:span 3}.g-e{grid-column:span 3}

  /* ZASIĘG */
  .zas{display:flex; gap:12px; flex-wrap:wrap}
  .chip{font-family:var(--f-mono); font-size:13px; padding:10px 16px; border:1px solid var(--line-2); border-radius:6px; background:var(--panel); transition:.2s}
  .chip:hover{border-color:var(--red); color:var(--ink); transform:translateY(-2px)}
  .chip.hot{border-color:var(--red); color:var(--red-2); background:color-mix(in srgb,var(--red) 12%,var(--panel))}
  .chip.soft{color:var(--faint)}

  /* PROCES — schody */
  .pRail{height:2px; background:var(--line); border-radius:2px; margin-bottom:28px; position:relative}
  .pRail b{position:absolute; left:0; top:0; height:2px; width:0; border-radius:2px;
    background:linear-gradient(90deg,var(--red-deep),var(--red-2)); box-shadow:0 0 12px rgba(225,45,59,.55);
    transition:width 1.5s cubic-bezier(.3,.7,.2,1) .15s}
  .pRail.in b{width:100%}
  .pRail i{position:absolute; top:-4px; width:10px; height:10px; border-radius:50%; background:var(--line-2);
    transition:background .35s ease, box-shadow .35s ease}
  .pRail.in i{background:var(--red); box-shadow:0 0 0 4px rgba(225,45,59,.18)}
  .pRail.in i:nth-of-type(1){transition-delay:.15s}
  .pRail.in i:nth-of-type(2){transition-delay:.6s}
  .pRail.in i:nth-of-type(3){transition-delay:1.02s}
  .pRail.in i:nth-of-type(4){transition-delay:1.4s}
  /* sterowanie kursorem: pasek dojezdza do najechanego kroku */
  .pRail.hovering b{transition:width .34s cubic-bezier(.3,.7,.2,1)}
  .pRail.in.hovering i{transition-delay:0s; background:var(--line-2); box-shadow:none}
  .pRail.in.hovering i.on{background:var(--red); box-shadow:0 0 0 4px rgba(225,45,59,.18)}
  .pstep.aktywny{border-color:var(--red)}
  .proc{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--proc-gap,18px); align-items:start}
  .pstep{position:relative; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:26px 22px 28px; transition:.28s}
  .pstep:nth-child(2){margin-top:44px}
  .pstep:nth-child(3){margin-top:88px}
  .pstep:nth-child(4){margin-top:132px}
  .pstep:hover{transform:translateY(-6px); border-color:var(--red)}
  .pstep .k{font-family:var(--f-head); font-size:62px; line-height:.9; color:transparent; -webkit-text-stroke:1.6px var(--line-2); transition:.28s}
  .pstep:hover .k{-webkit-text-stroke:1.6px var(--red)}
  .pstep h3{font-size:19px; text-transform:uppercase; margin:16px 0 10px}
  .pstep p{color:var(--muted); font-size:14px}
  .pstep .tag{margin-top:16px; display:inline-block; font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; color:var(--red-2); background:rgba(225,45,59,.14); border:1px solid rgba(242,73,90,.4); border-radius:100px; padding:5px 11px}

  /* ZASTOSOWANIA — rozsuwane panele */
  .dPanels{display:flex; gap:12px; height:470px}
  .dPanel{position:relative; flex:1; border-radius:14px; overflow:hidden; cursor:pointer; border:1px solid var(--line); transition:flex .55s cubic-bezier(.4,.1,.2,1)}
  .dPanel .photo{position:absolute; inset:0; transition:transform .6s, filter .5s; filter:saturate(.55) brightness(.6)}
  .dPanel.on .photo{filter:none; transform:scale(1.03)}
  .dPanel.on{flex:3.4}
  .dPanel::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(10,20,33,.92),rgba(10,20,33,.28) 62%)}
  .dNum{position:absolute; top:18px; left:0; right:0; text-align:center; z-index:3; font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; color:rgba(255,255,255,.6)}
  .dPanel.on .dNum{text-align:left; padding-left:28px; color:var(--red-2)}
  .dVert{position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:3; writing-mode:vertical-rl; text-orientation:mixed;
    font-family:var(--f-head); font-size:19px; text-transform:uppercase; color:#fff; white-space:nowrap; transition:opacity .3s}
  .dPanel.on .dVert{opacity:0}
  .dBody{position:absolute; left:28px; right:28px; bottom:28px; z-index:4; opacity:0; transform:translateY(14px); transition:.45s .12s}
  .dPanel.on .dBody{opacity:1; transform:none}
  .dBody h3{font-size:28px; text-transform:uppercase; color:#fff}
  .dBody p{color:rgba(255,255,255,.82); font-size:14.5px; margin-top:10px; max-width:40ch}
  .dTags{display:flex; gap:8px; margin-top:15px; flex-wrap:wrap}
  .dTags span{font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; padding:5px 11px; border-radius:100px; background:rgba(225,45,59,.22); border:1px solid rgba(242,73,90,.5); color:#ffd7db}

  /* KONTAKT */
  .contact{display:grid; grid-template-columns:1fr 1.1fr; gap:40px; align-items:stretch}
  .cinfo{display:flex; flex-direction:column; justify-content:center}
  .crow{display:flex; align-items:center; gap:16px; padding:16px 0; border-bottom:1px solid var(--line)}
  .crow:first-of-type{border-top:1px solid var(--line)}
  .crow .ic{width:44px;height:44px;flex:none;border-radius:10px;background:var(--panel);display:grid;place-items:center;color:var(--red-2)}
  .crow .ic svg{width:20px;height:20px}
  .crow .l{font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
  .crow .v{font-size:17px; font-weight:600}
  .crow .v a{color:inherit; text-decoration:none; border-bottom:1px solid transparent; transition:.18s}
  .crow .v a:hover, .crow .v a:focus-visible{color:var(--red-2); border-bottom-color:currentColor}
  .crow .v .sep{color:var(--line-2); font-weight:400; margin:0 2px}

  /* dane rejestrowe pod wierszami kontaktu */
  .kfirma{margin-top:22px; padding:22px 24px; border-radius:14px; background:var(--panel);
    border:1px solid var(--line); box-shadow:var(--shadow)}
  .kfirma .l{font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--faint); margin-bottom:10px}
  .kfirma .n{font-family:var(--f-head); font-size:19px; letter-spacing:.01em; color:var(--ink); line-height:1.25}
  .kfirma .nip{margin-top:8px; font-size:14.5px; color:var(--muted)}
  .kfirma .nip b{font-family:var(--f-mono); font-size:14px; color:var(--ink); font-variant-numeric:tabular-nums;
    letter-spacing:.04em}

  footer{border-top:1px solid var(--line); padding:40px 0}
  .fin{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap}
  footer .brand svg{height:44px}
  footer .fin{max-width:1680px; padding-left:clamp(28px,5vw,84px); padding-right:clamp(28px,5vw,84px)}
  .fnav{display:flex; gap:24px; flex-wrap:wrap}
  .fnav a{font-size:14px; color:var(--muted)} .fnav a:hover{color:var(--red-2)}
  .fin .cp{font-family:var(--f-mono); font-size:11.5px; color:var(--faint)}
  .fin .cp a{color:var(--muted); border-bottom:1px solid var(--line-2); transition:.18s}
  .fin .cp a:hover, .fin .cp a:focus-visible{color:var(--red-2); border-bottom-color:currentColor}

  @media (max-width:900px){
    .hero{min-height:560px}.hero .badge{display:none}.scroll-tag{display:none}
    .offer{grid-template-columns:1fr}.cards{grid-template-columns:1fr}
    .ocCard{height:420px}
    .ocCard:hover .ocSlide{max-height:0}
    .ocCard.open .ocSlide{max-height:300px}
    .gal{grid-template-columns:1fr 1fr; grid-auto-rows:160px}
    .g-a,.g-b,.g-c,.g-d,.g-e{grid-column:span 2}.g-a{grid-row:span 2}
    .why{grid-template-columns:repeat(2,minmax(0,1fr))}
    .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
    .proc{grid-template-columns:1fr 1fr; gap:14px}
    .pRail{display:none}
    .pstep:nth-child(2){margin-top:36px} .pstep:nth-child(3){margin-top:0} .pstep:nth-child(4){margin-top:36px}
    .dPanels{flex-direction:column; height:auto; gap:10px}
    .dPanel{height:94px; flex:none; transition:height .5s}
    .dPanel.on{height:340px; flex:none}
    .dVert{writing-mode:horizontal-tb; left:24px; transform:none; bottom:32px}
    .dNum{text-align:left; padding-left:24px}
    .contact{grid-template-columns:1fr}
    nav.main{display:none}
    section{padding:96px 0}
    section.wrap{padding-top:96px; padding-bottom:96px}
  }
  @media (max-width:640px){
    .hero{height:auto; min-height:100svh; padding:104px 0 0}
    .hero-bg{background-position:66% center}
    /* mocniejsze przyciemnienie w pasie, w którym leży nagłówek */
    .hero-scrim{
      background:
        linear-gradient(0deg, rgba(18,20,24,.97) 0%, rgba(18,20,24,.93) 30%, rgba(18,20,24,.74) 58%, rgba(18,20,24,.52) 80%, rgba(18,20,24,.72) 100%),
        radial-gradient(560px 280px at 78% 12%, rgba(216,31,47,.2), transparent 62%),
        linear-gradient(180deg, rgba(18,20,24,.62) 0%, transparent 20%)}
    .hero-inner{max-width:none; padding:0 22px 46px}
    .bar .bar-in{padding-left:22px; padding-right:22px; height:74px}
    .bar .bar-cta{display:none}   /* CTA mamy przypięte na dole ekranu */
    .brand svg{height:38px}
    footer .brand svg{height:38px}
    footer .fin{padding-left:22px; padding-right:22px}
    .hero h1{font-size:clamp(34px,10.5vw,52px); text-shadow:0 2px 20px rgba(6,12,20,.85)}
    .hero h1 .red{color:#ff5f6d}   /* jaśniejsza czerwień - lepszy kontrast na zdjęciu */
    .hero p.lead{text-shadow:0 1px 14px rgba(6,12,20,.7)}
    .hero .eyebrow{font-size:12.5px; letter-spacing:.2em}
    .hero p.lead{font-size:15.5px; max-width:40ch; margin-top:16px}
    .hero .cta{margin-top:26px; gap:10px}
    .hero .cta .btn{flex:1 1 auto; justify-content:center; padding:15px 18px}
    .hero .note{margin-top:20px; font-size:12.5px}
    section{padding:72px 0}
    section.wrap{padding-top:72px; padding-bottom:72px}
    .sec-head{margin-bottom:36px}
    .proc{grid-template-columns:1fr}
    .pstep{margin-top:0 !important}
  }
  /* ===== propozycja 10 — nowe komponenty ===== */
  /* trust strip */
  .trust{background:color-mix(in srgb, var(--bg2) 74%, transparent); border-bottom:1px solid var(--line)}
  .trust .row{display:flex; flex-wrap:wrap; gap:14px 40px; padding:20px 30px; justify-content:center; max-width:1200px; margin:0 auto}
  .trust .it{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--muted)}
  .trust .it svg{width:18px;height:18px;color:var(--red-2);flex:none}
  .trust .it b{color:var(--ink); font-weight:600}

  /* hamburger + mobile menu */
  .hamb{display:none; width:44px;height:44px; border:1px solid var(--line-2); background:transparent; border-radius:9px; cursor:pointer; padding:0; align-items:center; justify-content:center}
  .hamb i{display:block; width:20px; height:2px; background:var(--ink); position:relative; transition:.25s}
  .hamb i::before,.hamb i::after{content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink); transition:.25s}
  .hamb i::before{top:-6px} .hamb i::after{top:6px}
  .menu-open .hamb i{background:transparent}
  .menu-open .hamb i::before{top:0; transform:rotate(45deg)}
  .menu-open .hamb i::after{top:0; transform:rotate(-45deg)}
  .mobile-menu{position:fixed; inset:0; z-index:60; background:color-mix(in srgb,var(--bg) 97%,transparent); backdrop-filter:blur(10px); display:flex; flex-direction:column; justify-content:center; gap:2px; padding:40px 34px; transform:translateX(100%); transition:.34s cubic-bezier(.2,.7,.2,1); visibility:hidden}
  .menu-open .mobile-menu{transform:none; visibility:visible}
  .mobile-menu a{font-family:var(--f-head); font-size:25px; text-transform:uppercase; color:var(--ink); padding:15px 0; border-bottom:1px solid var(--line)}
  .mobile-menu a.mcta-line{color:#fff; background:var(--red); border:none; border-radius:8px; text-align:center; margin-top:22px; padding:16px}

  /* testimonials */
  .rate-badge{display:inline-flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--line); border-radius:100px; padding:9px 18px 9px 14px; margin-bottom:14px}
  .rate-badge .g{font-family:var(--f-head); font-size:16px}
  .rate-badge .stars{display:flex; gap:2px; color:#f2b01e}
  .rate-badge .stars svg{width:16px;height:16px}
  .rate-badge small{color:var(--muted); font-size:12.5px}
  .tst{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
  .tcard{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:28px 26px; display:flex; flex-direction:column; gap:16px; transition:.25s}
  .tcard:hover{border-color:var(--line-2); transform:translateY(-4px)}
  .tstars{display:flex; gap:3px; color:#f2b01e}
  .tstars svg{width:17px;height:17px}
  .tcard .q{color:var(--ink); font-size:15.5px; line-height:1.65}
  .tcard .who{margin-top:auto; display:flex; align-items:center; gap:12px}
  .tcard .av{width:44px;height:44px;border-radius:50%;background:var(--panel-2);display:grid;place-items:center;font-family:var(--f-head);color:var(--red-2);font-size:16px;flex:none}
  .tcard .who b{font-size:14.5px} .tcard .who span{display:block;font-size:12.5px;color:var(--muted)}

  /* FAQ */
  .faq{max-width:840px; margin:0 auto; display:grid; gap:12px}
  .faq details{background:var(--panel); border:1px solid var(--line); border-radius:11px; overflow:hidden; transition:.2s}
  .faq details[open]{border-color:var(--line-2)}
  .faq summary{cursor:pointer; list-style:none; padding:20px 24px; display:flex; justify-content:space-between; align-items:center; gap:18px; font-weight:600; font-size:16px; color:var(--ink)}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary .ico{width:22px;height:22px;flex:none;color:var(--red-2);transition:.28s}
  .faq details[open] summary .ico{transform:rotate(45deg)}
  .faq .a{padding:0 24px 22px; color:var(--muted); font-size:14.5px; line-height:1.65}

  /* zasięg — mapa */
  .zasieg{display:grid; grid-template-columns:1fr 1.12fr; gap:46px; align-items:center}
  .zas-info .zas-h{font-size:clamp(30px,4vw,46px); text-transform:uppercase; margin:14px 0 16px}
  .zas-info p{color:var(--muted); font-size:16px; max-width:44ch}
  .zas-list{display:grid; grid-template-columns:1fr 1fr; gap:12px 22px; margin:28px 0 24px; max-width:380px}
  .zc{display:flex; align-items:center; gap:11px; font-size:15px; color:var(--ink)}
  .zc i{width:8px;height:8px;border-radius:50%;background:var(--line-2);flex:none}
  .zc.hot{color:var(--red-2); font-weight:700}
  .zc.hot i{background:var(--red); box-shadow:0 0 0 4px rgba(225,45,59,.2)}
  .zas-note{display:flex; align-items:center; font-family:var(--f-mono); font-size:13px; color:var(--muted)}
  .zas-note b{color:var(--red-2); font-size:17px}
  .zas-map{border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); background:var(--panel); aspect-ratio:1/1}
  .zas-map svg{width:100%; height:100%; display:block}
  @keyframes zpulse{0%{r:8;opacity:.55}100%{r:34;opacity:0}}
  .zpulse{fill:#e12d3b; animation:zpulse 2.6s ease-out infinite}
  @media (prefers-reduced-motion:reduce){.zpulse{animation:none; opacity:0}}
  @media (max-width:900px){ .zasieg{grid-template-columns:1fr; gap:32px} .zas-map{aspect-ratio:4/3; max-width:460px; margin:0 auto} .zas-list{max-width:none} }

  /* =============== SEKCJA KONTAKT — split od krawędzi do krawędzi ===============
     Teksty na zdjęciu mają kolory wpisane wprost, nie z tokenów palety: tokeny są
     liczone pod jasne tło i na ciemnym zdjęciu dałyby ciemne na ciemnym. */
  section.kB{padding:0; display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
    border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
  .kB-lewa{position:relative; overflow:hidden; display:flex; align-items:center;
    padding:110px clamp(30px,4vw,64px) 110px clamp(30px,5vw,84px)}
  .kB-foto{position:absolute; inset:0; background-size:cover; background-position:center;
    background-repeat:no-repeat}
  .kB-scrim{position:absolute; inset:0}
  .kB-tresc{position:relative; z-index:2; max-width:520px; color:#fff}
  .kB-tresc .eyebrow{color:#fff}
  .kB-tresc .eyebrow::before{background:#ff5f6d; height:2px}
  .kB-tresc h2{font-size:clamp(30px,3.4vw,46px); text-transform:uppercase; margin:14px 0 16px; color:#fff}
  .kB-tresc > p{color:rgba(241,243,245,.8); font-size:16px; max-width:44ch}
  .kB-dane{margin-top:32px; display:flex; flex-direction:column}
  .kB-row{display:flex; align-items:center; gap:15px; padding:11px 0; color:#fff}
  .kB-row .ic{width:40px; height:40px; flex:none; border-radius:10px; display:grid; place-items:center;
    background:rgba(255,255,255,.1); color:#ff8a93}
  .kB-row .ic svg{width:19px; height:19px}
  .kB-row .l{display:block; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em;
    text-transform:uppercase; color:rgba(241,243,245,.62)}
  .kB-row .v{display:block; font-size:16.5px; font-weight:600; font-variant-numeric:tabular-nums}
  a.kB-row:hover .v{color:#ff8a93}
  .kB-firma{margin-top:34px}
  .kB-firma b{display:block; font-family:var(--f-head); font-size:17px; color:#fff}
  .kB-firma span{display:block; margin-top:5px; font-family:var(--f-mono); font-size:12.5px;
    color:rgba(241,243,245,.62); letter-spacing:.04em}
  .kB-prawa{background:var(--panel); display:flex; align-items:center;
    padding:96px clamp(30px,5vw,84px) 96px clamp(30px,4vw,64px)}
  .kB-formularz{width:100%}
  .kB-tytul{font-family:var(--f-head); font-size:21px; text-transform:uppercase; color:var(--ink);
    margin-bottom:20px}
  .kB-prawa .form{background:transparent; border:0; box-shadow:none; padding:0}
  /* bez karty formularza pola biały-na-białym gubią się — same ramki to za mało */
  .kB-prawa .form input, .kB-prawa .form select, .kB-prawa .form textarea{background:var(--panel-2)}
  .kB-odwrocone .kB-lewa{order:2; padding:110px clamp(30px,5vw,84px) 110px clamp(30px,4vw,64px)}
  .kB-odwrocone .kB-prawa{order:1; padding:96px clamp(30px,4vw,64px) 96px clamp(30px,5vw,84px)}

  /* form + kontakt */
  .kgrid{display:grid; grid-template-columns:1.15fr .85fr; gap:34px; align-items:start}
  .form{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:30px; box-shadow:var(--shadow)}
  .form .fr{display:grid; gap:6px; margin-bottom:16px}
  .form .two{display:grid; grid-template-columns:1fr 1fr; gap:16px}
  .form label{font-size:11.5px; color:var(--muted); font-family:var(--f-mono); letter-spacing:.06em; text-transform:uppercase}
  .form input,.form select,.form textarea{width:100%; background:var(--bg); border:1px solid var(--line-2); border-radius:8px; padding:13px 14px; color:var(--ink); font-family:inherit; font-size:15px; transition:.18s}
  .form input:focus,.form select:focus,.form textarea:focus{outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(225,45,59,.18)}
  .form textarea{min-height:110px; resize:vertical}
  .form .err{color:#f2495a; font-size:12px; display:none}
  .form .fr.invalid .err{display:block}
  .form .fr.invalid input,.form .fr.invalid select,.form .fr.invalid textarea{border-color:#f2495a}
  .consent{display:flex; gap:10px; font-size:13px; color:var(--muted); align-items:flex-start; margin-bottom:18px}
  .consent input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--red)}
  .consent .err{margin-left:4px} .consent.invalid{color:#f2495a} .consent.invalid .err{display:inline}
  /* pulapka na boty — poza ekranem, nie display:none (czesc botow to wykrywa) */
  .ph-pulapka{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
  .form-blad{margin:0 0 18px; padding:12px 14px; border-radius:9px; font-size:14.5px;
    background:rgba(216,32,47,.08); border:1px solid rgba(216,32,47,.35); color:var(--ink)}
  .form-blad a{color:var(--red-2); border-bottom:1px solid currentColor}
  .form button[type=submit][disabled]{opacity:.65; cursor:progress}
  .form .success{display:none; text-align:center; padding:30px 10px}
  .form.sent .fform{display:none} .form.sent .success{display:block}
  .form .success .ok{width:60px;height:60px;border-radius:50%;background:rgba(63,143,224,.15);color:var(--red-2);display:grid;place-items:center;margin:0 auto 18px}
  .form .success .ok svg{width:28px;height:28px}   /* ph_icon nie podaje rozmiaru, bez tego ptaszek rozpycha kółko */
  .form .success h3{font-family:var(--f-head); font-size:24px; text-transform:uppercase}
  .form .success p{color:var(--muted); margin-top:10px}
  .kside .crow:first-of-type{border-top:none}

  /* back to top */
  .totop{position:fixed; right:22px; bottom:22px; z-index:55; width:46px;height:46px;border-radius:50%; background:var(--red); color:#fff; border:none; cursor:pointer; display:grid; place-items:center; opacity:0; transform:translateY(12px); pointer-events:none; transition:.3s; box-shadow:0 12px 30px -10px rgba(225,45,59,.6)}
  .totop:hover{background:var(--red-deep)}
  .totop.show{opacity:1; transform:none; pointer-events:auto}
  .totop svg{width:20px;height:20px}

  /* sticky mobile CTA */
  .mcta{position:fixed; left:0; right:0; bottom:0; z-index:56; display:none; gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:color-mix(in srgb,var(--bg) 94%,transparent); backdrop-filter:blur(12px); border-top:1px solid var(--line)}
  .mcta a{flex:1; justify-content:center; padding:14px}
  /* pasek dubluje CTA z hero — chowamy go, dopoki przyciski hero sa na ekranie.
     Klasa chowa, a nie pokazuje: bez JS pasek zostaje widoczny jak dotad. */
  .mcta{transition:transform .28s cubic-bezier(.3,.7,.2,1)}
  .mcta.schowany{transform:translateY(105%); pointer-events:none}
  @media (prefers-reduced-motion:reduce){ .mcta{transition:none} }

  @media (max-width:900px){
    .hamb{display:inline-flex}
    .tst{grid-template-columns:1fr}
    .kgrid{grid-template-columns:1fr}
    .form .two{grid-template-columns:1fr 1fr}
    /* zdjęcie zawsze na górze — na wąskim ekranie odwracanie kolumn gubi kolejność czytania */
    section.kB{grid-template-columns:1fr}
    .kB-lewa, .kB-odwrocone .kB-lewa{order:1; padding:80px 30px}
    .kB-prawa, .kB-odwrocone .kB-prawa{order:2; padding:60px 30px 80px}
    .kB-tresc{max-width:none}
  }
  @media (max-width:640px){
    .mcta{display:flex}
    body{padding-bottom:70px}
    .totop{bottom:80px; right:16px}
    .form .two{grid-template-columns:1fr}

    /* karty „Dlaczego my" — przy dwoch kolumnach zostaje ~130px na tekst */
    .why{grid-template-columns:1fr}
    .wcell{padding:22px 20px}

    /* pasek zaufania: wysrodkowany flex lamal sie w rwana choinke */
    .trust .row{display:grid; grid-template-columns:1fr; gap:11px; justify-items:start;
      padding:18px 22px}
    .trust .it{font-size:14.5px}

    /* stopka: logo, nawigacja i nota jedno pod drugim, do srodka */
    footer{padding:32px 0}
    .fin{flex-direction:column; align-items:center; text-align:center; gap:18px}
    footer .brand svg{height:38px}
    .fnav{justify-content:center; gap:12px 18px}
    .fnav a{font-size:13.5px}
    .fin .cp{font-size:11px; line-height:1.7}
  }

/* ============ PODSTRONY (page.php / 404) ============ */
.subpage{padding:170px 0 100px}
.subpage .wrap{max-width:820px}
.subpage h1{font-size:clamp(30px,4vw,46px); text-transform:uppercase; margin-bottom:28px}
.subpage-content{font-size:16.5px; color:var(--muted)}
.subpage-content h2{font-size:26px; margin:34px 0 14px; color:var(--ink); text-transform:none}
.subpage-content h3{font-size:20px; margin:26px 0 12px; color:var(--ink); text-transform:none}
.subpage-content p{margin-bottom:16px}
.subpage-content a{color:var(--red-2); text-decoration:underline}
.subpage-content ul,.subpage-content ol{margin:0 0 18px 22px}
.subpage-content li{margin-bottom:8px}
.subpage-content img{max-width:100%; height:auto; border-radius:12px}
.subpage-content blockquote{border-left:3px solid var(--red); padding-left:18px; margin:22px 0; color:var(--ink)}
.subpage-content code{font-family:var(--f-mono); font-size:.9em; background:var(--panel); padding:2px 6px; border-radius:4px}
/* Odnośnik powrotny to nawigacja, nie akcja — ma być cichy i mały.
   ph_icon() zwraca svg bez width/height, więc bez tej reguły przeglądarka
   nadaje mu domyślne 300 × 150 px elementu zastąpionego. */
/* Okruszki na podstronie zamiast odnośnika powrotnego. Reguły .bcrumb niżej
   są pisane pod ciemne tło zdjęcia w hero oferty, więc na jasnym gruncie
   podstrony trzeba przestawić kolory. Struktura zostaje wspólna.

   Zdjęty wersalik i rozstrzelenie: na hero oferty okruszki są jedyną małą
   etykietą, a na podstronie stoją nad tytułem i tworzyłyby drugi rząd
   wersalików pod rząd. Tu mają być cichą nawigacją, nie drugim nagłówkiem. */
.subpage .bcrumb{margin:0 0 20px; font-size:12.5px; color:var(--muted);
  font-family:var(--f-sans); letter-spacing:normal; text-transform:none}
.subpage .bcrumb a{color:var(--muted); border-bottom:1px solid var(--line)}
.subpage .bcrumb a:hover{color:var(--red-2); border-bottom-color:var(--red-2)}
.subpage .bcrumb i{color:var(--line-2)}
.subpage .bcrumb span[aria-current]{color:var(--ink); font-weight:600}
.screen-reader-text{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap}

/* ============ PODSTRONA OFERTY ============ */
.ohero{position:relative; min-height:62vh; display:flex; align-items:flex-end; overflow:hidden; padding:130px 0 60px}
.ohero-bg{position:absolute; inset:0}
.ohero-scrim{position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(13,25,40,.96) 0%,rgba(13,25,40,.86) 34%,rgba(13,25,40,.42) 72%,rgba(13,25,40,.6) 100%),
             linear-gradient(0deg,rgba(13,25,40,.9) 0%,transparent 55%)}
.ohero-in{position:relative; z-index:3; max-width:760px; margin-inline:0}
.ohero .ohero-in{padding-left:clamp(28px,5vw,84px); padding-right:30px}
.ohero h1{font-size:clamp(34px,5.2vw,60px); text-transform:uppercase; color:#fff; margin-top:14px}
.ohero .lead{margin-top:18px; max-width:52ch; color:rgba(238,244,251,.84); font-size:clamp(15.5px,1.6vw,18px)}
.ohero .cta{display:flex; gap:12px; margin-top:28px; flex-wrap:wrap}
.ohero .btn-dark{color:#fff; border-color:rgba(255,255,255,.34)}
.ohero .btn-dark:hover{border-color:#fff; background:rgba(255,255,255,.06)}

.bcrumb{display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-family:var(--f-mono); font-size:11.5px;
  letter-spacing:.1em; text-transform:uppercase; color:rgba(238,244,251,.62); margin-bottom:6px}
.bcrumb a{color:rgba(238,244,251,.62); transition:.18s}
.bcrumb a:hover{color:var(--red-2)}
.bcrumb i{color:rgba(238,244,251,.32); font-style:normal}
.bcrumb span[aria-current]{color:var(--red-2)}

section.ospec-sec{padding-top:110px; padding-bottom:110px}
.ospec-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:48px; align-items:start}
.ospec-txt{font-size:16px}
.ospec-txt h2{font-size:clamp(24px,3vw,34px); text-transform:uppercase; color:var(--ink); margin:0 0 18px}
.ospec-txt h3{font-size:20px; color:var(--ink); margin:28px 0 12px}
.ospec{position:sticky; top:100px; background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:28px 26px 30px; box-shadow:var(--shadow)}
.ospec-h{font-size:19px; text-transform:uppercase; margin-bottom:18px}
.ospec dl{margin:0}
.ospec-r{display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:13px 0; border-bottom:1px dashed var(--line-2)}
.ospec-r:last-of-type{border-bottom:none}
.ospec dt{font-family:var(--f-mono); font-size:12.5px; color:var(--faint); margin:0}
.ospec dd{margin:0; font-size:15px; font-weight:600; text-align:right; font-variant-numeric:tabular-nums}
.ospec dd span{display:block; font-family:var(--f-mono); font-size:11px; font-weight:400; color:var(--faint)}
.ospec .btn{width:100%; justify-content:center; margin-top:22px}

.inne{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px}
.inne-k{position:relative; height:250px; border-radius:14px; overflow:hidden; border:1px solid var(--line); display:block}
.inne-k .photo{position:absolute; inset:0; transition:transform .55s; filter:brightness(.6)}
.inne-k:hover .photo{transform:scale(1.06); filter:brightness(.75)}
.inne-k::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(10,20,33,.92),transparent 62%)}
.inne-in{position:absolute; z-index:2; left:20px; right:20px; bottom:18px}
.inne-in h3{font-size:20px; text-transform:uppercase; color:#fff}
.inne-in span{display:inline-flex; align-items:center; gap:8px; margin-top:8px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--red-2)}
.inne-in span svg{width:14px; height:14px; transition:.25s}
.inne-k:hover .inne-in span svg{transform:translateX(4px)}

@media (max-width:900px){
  .ospec-grid{grid-template-columns:1fr; gap:32px}
  .ospec{position:static}
  .ohero{min-height:0; padding:110px 0 50px}
  section.ospec-sec{padding-top:72px; padding-bottom:72px}
}

/* karta oferty prowadząca do podstrony */
.ocCard.ma-link{cursor:pointer}
.ocCard.ma-link:focus-visible{outline:2px solid var(--red-2); outline-offset:3px}

/* Hero podstrony oferty na mobile: nakładka pionowa (pozioma zostawiała jasną prawą stronę) */
@media (max-width:640px){
  .ohero{padding:96px 0 44px}
  .ohero-scrim{
    background:
      linear-gradient(0deg, rgba(13,25,40,.96) 0%, rgba(13,25,40,.9) 34%, rgba(13,25,40,.7) 62%, rgba(13,25,40,.55) 82%, rgba(13,25,40,.72) 100%)}
  .ohero h1{text-shadow:0 2px 20px rgba(6,12,20,.85)}
  .ohero .lead{text-shadow:0 1px 14px rgba(6,12,20,.7)}
  .ohero .ohero-in{padding-left:22px; padding-right:22px}
  .ohero .cta{gap:10px}
  .ohero .cta .btn{flex:1 1 auto; justify-content:center}
}

/* =========================================================
   JASNY WARIANT — korekty komponentów zaprojektowanych pod ciemne tło
   ========================================================= */
.page .alt{background:color-mix(in srgb, var(--bg2) 55%, transparent)}
.page .trust{background:color-mix(in srgb, #ffffff 58%, transparent)}
header.bar.solid{background:color-mix(in srgb, var(--bg) 90%, transparent)}  /* blur robi warstwa ::before z maską */
header.bar.solid .brand path, header.bar.solid .brand polygon{fill:var(--ink)}
header.bar.solid nav.main a{color:var(--muted)}
footer .brand path, footer .brand polygon{fill:var(--ink)}
.btn-dark{color:var(--ink); border-color:var(--line-2)}
.trust .it{color:var(--muted)}
.pstep .k{-webkit-text-stroke:1.6px var(--line-2)}
.mcta{background:color-mix(in srgb, var(--bg) 94%, transparent)}
.form input, .form select, .form textarea{background:#fff; color:var(--ink)}
.tcard .q, .zc{color:var(--ink)}
.zas-map{border-color:var(--line)}

/* przyciski leżące na zdjęciu zostają białe — korekta wyżej ma wyższą specyficzność */
.hero .btn-dark, .ohero .btn-dark{color:#fff; border-color:rgba(255,255,255,.42)}
.hero .btn-dark:hover, .ohero .btn-dark:hover{border-color:#fff; background:rgba(255,255,255,.10)}

/* nagłówek przed przewinięciem leży na jasnym zdjęciu */
header.bar:not(.solid) nav.main a{color:#fff; text-shadow:0 1px 8px rgba(6,12,20,.9), 0 2px 22px rgba(6,12,20,.7)}
header.bar:not(.solid) .brand svg{filter:drop-shadow(0 2px 10px rgba(6,12,20,.85))}
header.bar:not(.solid) .hamb{border-color:rgba(255,255,255,.5)}
header.bar:not(.solid) .hamb i,
header.bar:not(.solid) .hamb i::before,
header.bar:not(.solid) .hamb i::after{background:#fff; box-shadow:0 1px 6px rgba(6,12,20,.8)}
/* Po otwarciu menu srodkowa kreska musi zniknac, inaczej z X robi sie gwiazdka.
   Regula wyzej (0-3-2) bila `.menu-open .hamb i` (0-2-1), wiec potrzebny jawny wyjatek. */
body.menu-open header.bar:not(.solid) .hamb i{background:transparent; box-shadow:none}

/* przy tak jasnym hero tekst potrzebuje własnych cieni */
.hero h1{text-shadow:0 2px 10px rgba(6,12,20,.55), 0 4px 34px rgba(6,12,20,.85)}
.hero p.lead{text-shadow:0 1px 6px rgba(6,12,20,.5), 0 2px 22px rgba(6,12,20,.8)}
.hero .eyebrow{text-shadow:0 1px 8px rgba(6,12,20,.7), 0 2px 18px rgba(6,12,20,.9)}
.hero .note{text-shadow:0 1px 12px rgba(6,12,20,.8)}
.hero .badge{background:rgba(8,16,28,.62)}

@media (max-width:640px){ .hero-scrim::after{height:170px} }
@media (max-width:900px){ .page{background-attachment:scroll} }

/* =========================================================
   Nagłówek: blur wygaszany ku dolnej krawędzi.
   backdrop-filter nie przyjmuje gradientu, więc kładziemy go na osobnej
   warstwie i wycinamy maską — u góry pełny, przy dolnej krawędzi zero.
   ========================================================= */
header.bar::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  backdrop-filter:blur(11px) saturate(1.06);
  -webkit-backdrop-filter:blur(11px) saturate(1.06);
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,.55) 86%, transparent 100%);
          mask-image:linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,.55) 86%, transparent 100%);
}
header.bar.solid::before{
  backdrop-filter:blur(15px) saturate(1.04);
  -webkit-backdrop-filter:blur(15px) saturate(1.04);
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 74%, rgba(0,0,0,.6) 92%, transparent 100%);
          mask-image:linear-gradient(180deg, #000 0%, #000 74%, rgba(0,0,0,.6) 92%, transparent 100%);
}
/* treść paska musi leżeć nad warstwą blura */
header.bar .bar-in{position:relative; z-index:1}

/* =========================================================
   Sygnałówka w hero leży na zdjęciu, nie na jasnym tle.
   Czerwień z jasnej palety (#c31b28) miała tam kontrast 1,07:1 na chmurach.
   Tekst idzie na biel, akcent marki zostaje w kresce.
   ========================================================= */
.hero .eyebrow{color:#fff}
.hero .eyebrow::before{background:#ff5f6d; height:2px}
.ohero .eyebrow{color:#fff}
.ohero .eyebrow::before{background:#ff5f6d; height:2px}

/* =====================================================================
   Prawa kolumna sekcji kontakt: wejście do konfiguratora zamiast formularza.
   Formularz wraca automatycznie, gdy w ACF podasz shortcode.
   ===================================================================== */
.kB-akcja{width:100%}
/* Na stronie głównej blok siedzi na białym .kB-prawa i tła nie potrzebuje.
   Na podstronie oferty zastępuje kartę .form na przyciemnionym tle sekcji,
   więc musi tę kartę odziedziczyć, inaczej leży nago obok danych kontaktowych. */
.kgrid .kB-akcja{background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:30px; box-shadow:var(--shadow)}
.kB-akcja-lead{color:var(--muted); font-size:16px; margin:0 0 26px; max-width:46ch}

.kB-zalety{list-style:none; margin:0 0 30px; padding:0; border-top:1px solid var(--line)}
.kB-zalety li{display:grid; grid-template-columns:22px 1fr; gap:13px; align-items:start;
  padding:14px 0; border-bottom:1px solid var(--line)}
.kB-zalety svg{width:17px; height:17px; color:var(--red); margin-top:4px}
.kB-zalety li > span{display:block; color:var(--muted); font-size:13.5px; line-height:1.5}
.kB-zalety li > span b{display:block; color:var(--ink); font-size:15px; font-weight:700; margin-bottom:2px}

.kB-btn{width:100%; justify-content:center}
.kB-btn svg{width:18px; height:18px}
.kB-mikro{font-size:12.5px; color:var(--faint); margin:13px 0 0; text-align:center}

@media(max-width:900px){
  .kB-akcja-lead{margin-bottom:22px}
  .kB-zalety{margin-bottom:24px}
}

/* =====================================================================
   Zakończenie podstrony kalkulatora (układ 02). Tekst SEO urywał się
   na ostatnim akapicie, bez żadnego wyjścia dalej.
   ===================================================================== */
.pas-cta{background:var(--ink); color:#fff; padding:34px 0}
.pas-cta-in{display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center}
.pas-cta h2{font-family:var(--f-head); font-size:clamp(20px,2.4vw,26px); text-transform:uppercase;
  margin:0 0 6px; color:#fff}
.pas-cta p{margin:0; color:#a8b6c5; font-size:14.5px; max-width:52ch}
.pas-cta-akcje{display:flex; gap:11px; flex-wrap:wrap}
.pas-cta .btn-dark{color:#fff; border-color:rgba(255,255,255,.42)}
.pas-cta .btn-dark:hover{border-color:#fff; background:rgba(255,255,255,.08)}
@media(max-width:760px){
  .pas-cta-in{grid-template-columns:1fr}
  .pas-cta-akcje .btn{flex:1; justify-content:center}
}