/* relo.pl — jedyny arkusz stylów strony (bez Bootstrapa i czcionek zewnętrznych) */
:root {
    --tlo: #f4f5f7; --karta: #ffffff; --tekst: #1c2430; --tekst2: #5b6675;
    --granat: #14213d; --granat2: #1f3157; --akcent: #f59e0b; --akcent-ciemny: #b45309;
    --linia: #dfe3ea; --ok: #15803d; --blad: #b91c1c; --r: 10px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--tlo); color: var(--tekst); font: 16px/1.55 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
a { color: var(--granat2); }
[hidden] { display: none !important; }
.w { max-width: 1040px; margin: 0 auto; padding: 0 16px; }

/* góra */
.gora { background: var(--granat); color: #fff; }
.gora .w { display: flex; align-items: center; justify-content: space-between; height: 56px; }
.logo { font-weight: 800; font-size: 22px; letter-spacing: 3px; color: #fff; text-decoration: none; }
.logo span { color: var(--akcent); }
.gora small { color: #b8c2d6; font-size: 13px; }

/* hero */
.hero { background: linear-gradient(160deg, var(--granat) 0%, var(--granat2) 100%); color: #fff; padding: 36px 0 84px; }
.hero h1 { margin: 0 0 8px; font-size: 30px; line-height: 1.2; }
.hero p { margin: 0; color: #c9d2e3; max-width: 640px; }
.hero-maly { padding-bottom: 36px; }
.hero-maly p { max-width: 760px; }

/* trzy ścieżki */
.sciezki { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: -56px; }
.sciezka { display: flex; gap: 14px; align-items: flex-start; text-align: left; width: 100%; background: var(--karta); border: 2px solid transparent; border-radius: var(--r); padding: 18px; cursor: pointer; font: inherit; color: inherit; box-shadow: 0 4px 14px rgba(20,33,61,.12); transition: border-color .15s, transform .15s; }
.sciezka:hover { transform: translateY(-2px); }
.sciezka[aria-selected=true] { border-color: var(--akcent); }
.sciezka svg { flex: 0 0 40px; width: 40px; height: 40px; padding: 8px; border-radius: 8px; background: #fff4dc; stroke: var(--akcent-ciemny); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sciezka b { display: block; font-size: 17px; margin-bottom: 2px; }
.sciezka span { color: var(--tekst2); font-size: 14px; }

/* panel formularza */
.panel { background: var(--karta); border-radius: var(--r); padding: 22px 18px; margin: 16px 0 32px; box-shadow: 0 2px 8px rgba(20,33,61,.07); scroll-margin-top: 12px; }
.panel h2 { margin: 0 0 6px; font-size: 22px; }
.panel .lead { color: var(--tekst2); margin: 0 0 16px; }
.info { background: #fff8e6; border-left: 4px solid var(--akcent); padding: 10px 12px; border-radius: 6px; font-size: 14px; margin: 0 0 16px; }
.bonus { display: inline-block; background: var(--granat); color: #fff; border-radius: 999px; padding: 4px 12px; font-size: 13px; margin-bottom: 10px; }
.bonus b { color: var(--akcent); }

.przel { display: inline-flex; background: var(--tlo); border-radius: 999px; padding: 4px; margin-bottom: 16px; }
.przel button { border: 0; background: transparent; font: inherit; font-size: 14px; padding: 8px 14px; border-radius: 999px; cursor: pointer; color: var(--tekst2); }
.przel button.akt { background: var(--granat); color: #fff; }

.pola { display: grid; grid-template-columns: 1fr; gap: 12px; }
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
input[type=text], input[type=email], input[type=date], select, textarea { width: 100%; padding: 11px 12px; font: inherit; border: 1px solid var(--linia); border-radius: 8px; background: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--akcent); outline-offset: 1px; border-color: var(--akcent); }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; font-weight: 400; margin-top: 10px; }
.check input { margin-top: 4px; }
.radia label { display: inline-flex; gap: 6px; font-weight: 400; font-size: 15px; margin-right: 16px; }
.radia .pytanie { display: block; font-weight: 600; font-size: 13px; margin: 0 0 6px; }
.btn { display: inline-block; border: 0; background: var(--akcent); color: #1c1300; font: inherit; font-weight: 700; padding: 13px 22px; border-radius: 8px; cursor: pointer; margin-top: 16px; width: 100%; }
.btn:hover { background: #e08e06; }
.btn:disabled { opacity: .6; cursor: default; }
.maly { font-size: 13px; color: var(--tekst2); }
.zgoda-tytul { font-weight: 700; margin: 18px 0 0; }
form .maly { margin: 8px 0 0; }
.pulapka { position: absolute; left: -5000px; }
.druga-szansa { margin-top: 16px; padding: 16px; border: 1px dashed var(--linia); border-radius: 8px; }
.druga-szansa .zgoda-tytul { margin-top: 0; }
.druga-szansa .maly { margin: 6px 0 0; }
.btn-2 { background: var(--granat); color: #fff; margin-top: 12px; }
.btn-2:hover { background: var(--granat2); }

.relo-odp { font-weight: 700; margin-top: 16px; padding: 12px 14px; border-radius: 8px; }
.relo-odp.ok { color: var(--ok); background: #e9f7ee; }
.relo-odp.blad { color: var(--blad); background: #fdecec; }

.kroki { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; counter-reset: k; }
.kroki li { counter-increment: k; background: var(--tlo); border-radius: 8px; padding: 10px; font-size: 14px; }
.kroki li::before { content: counter(k); display: inline-block; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 50%; background: var(--granat); color: #fff; font-size: 12px; font-weight: 700; margin-right: 6px; }

/* sklepy, o firmie, stopka */
.sklepy { background: var(--granat); color: #fff; border-radius: var(--r); padding: 20px 18px; margin-bottom: 32px; }
.sklepy h2 { margin: 0 0 10px; font-size: 20px; }
.sklepy a { display: inline-block; background: #fff; color: var(--granat); font-weight: 700; text-decoration: none; padding: 10px 16px; border-radius: 8px; margin: 4px 6px 4px 0; }
.ofirmie { padding: 8px 0 32px; }
.stopka { background: var(--granat); color: #b8c2d6; font-size: 13px; padding: 22px 0; }
.stopka a { color: #fff; }

/* podstrony tekstowe */
.tresc { background: var(--karta); border-radius: var(--r); padding: 22px 18px; margin: 24px 0 32px; }
.tresc h1 { font-size: 24px; margin: 0 0 16px; }
.tresc h2 { font-size: 17px; margin: 22px 0 6px; }
.tresc li { margin-bottom: 8px; }

@media (min-width: 760px) {
    .hero { padding: 56px 0 100px; }
    .hero h1 { font-size: 40px; }
    .hero-maly { padding-bottom: 56px; }
    .sciezki { grid-template-columns: repeat(3, 1fr); }
    .sciezka { flex-direction: column; padding: 22px; }
    .panel, .tresc { padding: 30px; }
    .pola { grid-template-columns: repeat(6, 1fr); }
    .p2 { grid-column: span 2; } .p3 { grid-column: span 3; } .p4 { grid-column: span 4; } .p6 { grid-column: span 6; }
    .btn { width: auto; }
    .kroki { grid-template-columns: repeat(5, 1fr); }
}

/* =========================================================
   RELO — zachowawczy lifting wizualny (propozycja ChatGPT 2026-09-18, bez zmiany układu)
   Do doklejenia na końcu arkusza relo-vN.css.
   Poprawki Adama względem oryginału: usunięta reguła .w (podwajała marginesy boczne),
   checkboxy i radio wyłączone z min-height pól, stopka bez podwójnego paddingu.
   ========================================================= */
:root{--cien-karta:0 5px 16px rgba(20,33,61,.07);--cien-hover:0 8px 22px rgba(20,33,61,.10);--focus:#2563eb;--akcent-jasny:#fff6e7;--granat-jasny:#eef2f7;}

/* baza / typografia */
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
a{text-underline-offset:3px;text-decoration-thickness:1px;}
a:hover{text-decoration-thickness:2px;}
h1,h2,.sciezka b,.zgoda-tytul{letter-spacing:-.018em;}
.logo{letter-spacing:.15em;}

/* hero */
.hero{padding-top:44px;padding-bottom:92px;}
.hero h1{max-width:650px;margin-bottom:10px;font-size:clamp(34px,4vw,46px);line-height:1.08;letter-spacing:-.035em;}
.hero p{max-width:620px;margin-bottom:0;color:rgba(255,255,255,.86);font-size:16px;line-height:1.55;}

/* 3 ścieżki */
.sciezki{gap:12px;}
.sciezka{min-height:154px;padding:22px;border:1px solid var(--linia);border-radius:12px;background:var(--karta);box-shadow:var(--cien-karta);color:var(--tekst);transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease,transform .16s ease;}
.sciezka:hover{border-color:#c7ced8;box-shadow:var(--cien-hover);transform:translateY(-1px);}
.sciezka[aria-selected="true"]{border-color:var(--akcent);background:#fffdf9;box-shadow:0 5px 16px rgba(20,33,61,.07),inset 0 0 0 1px var(--akcent);}
.sciezka svg{width:39px;height:39px;padding:9px;border-radius:9px;background:var(--akcent-jasny);stroke:var(--akcent-ciemny);flex-basis:39px;}
.sciezka[aria-selected="true"] svg{background:#ffefd2;}
.sciezka b{display:block;margin-bottom:4px;font-size:17px;line-height:1.25;}
.sciezka span{display:block;color:var(--tekst2);font-size:13.5px;line-height:1.5;}

/* główny panel */
.panel{margin-top:14px;padding:28px 30px 30px;border:1px solid #e4e7ec;border-radius:12px;background:var(--karta);box-shadow:0 3px 12px rgba(20,33,61,.055);}
.panel h2{margin-top:0;margin-bottom:8px;font-size:24px;line-height:1.2;letter-spacing:-.025em;}
.panel .lead{max-width:900px;margin-bottom:14px;color:var(--tekst2);font-size:15.5px;line-height:1.65;}

/* plakietka gwarancji — jasna, informacyjna */
.bonus{display:inline-block;margin-bottom:15px;padding:6px 11px;border:1px solid #f1d29d;border-radius:999px;background:var(--akcent-jasny);color:var(--granat);font-size:12.5px;font-weight:600;line-height:1.3;}
.bonus b{color:var(--akcent-ciemny);font-weight:800;}

/* przełącznik rejestracja / problem */
.przel{display:inline-flex;gap:2px;margin:3px 0 18px;padding:3px;border-radius:999px;background:#f0f2f5;}
.przel button{min-height:38px;padding:7px 15px;border:0;border-radius:999px;background:transparent;color:#596579;font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background-color .15s ease,color .15s ease,box-shadow .15s ease;}
.przel button:hover{color:var(--granat);}
.przel button.akt{background:var(--granat);color:#fff;box-shadow:0 2px 6px rgba(20,33,61,.18);}

/* formularz */
.pola{gap:12px;}
label{color:var(--tekst);font-size:13px;font-weight:600;}
input,select,textarea{min-height:50px;border:1px solid #ccd3dd;border-radius:9px;background:#fff;color:var(--tekst);font:inherit;font-size:15px;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;}
input[type=checkbox],input[type=radio]{min-height:0;}
textarea{min-height:108px;resize:vertical;}
input:hover,select:hover,textarea:hover{border-color:#aeb8c5;}
input:focus,select:focus,textarea:focus{border-color:var(--focus);outline:0;box-shadow:0 0 0 3px rgba(37,99,235,.14);}

/* zgoda marketingowa */
.zgoda-tytul{margin-top:18px;margin-bottom:8px;font-size:15px;font-weight:750;line-height:1.4;}
.zgoda-tytul + .check{margin-top:0;padding:13px 14px;border:1px solid #e2e6eb;border-radius:9px;background:#f8f9fb;}
.check{align-items:flex-start;color:#394457;font-size:13px;line-height:1.5;}
.check input[type="checkbox"]{width:17px;height:17px;margin-top:2px;accent-color:var(--granat);flex:0 0 17px;}
.check:hover{color:var(--tekst);}

/* drobny druk */
.maly{color:#667285;font-size:13px;line-height:1.55;}
.panel > .maly,form > .maly{margin-top:10px;}

/* przyciski */
.btn,.btn-2{min-height:50px;padding:11px 21px;border-radius:8px;border:1px solid transparent;font-weight:750;font-size:14px;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .08s ease;}
.btn{background:var(--akcent);color:#171717;box-shadow:0 2px 5px rgba(180,83,9,.12);}
.btn:hover{background:#eba009;box-shadow:0 4px 10px rgba(180,83,9,.16);}
.btn-2{background:var(--granat);color:#fff;}
.btn-2:hover{background:var(--granat2);}
.btn:active,.btn-2:active{transform:translateY(1px);}

/* focus dostępności */
.sciezka:focus-visible,.przel button:focus-visible,.btn:focus-visible,.btn-2:focus-visible,a:focus-visible,.check:focus-within{outline:3px solid rgba(37,99,235,.28);outline-offset:3px;}

/* komunikaty / info */
.info{padding:12px 14px;border:1px solid #edcf8f;border-left:3px solid var(--akcent);border-radius:8px;background:#fff9ed;color:#4d5665;font-size:13.5px;line-height:1.55;}
.relo-odp.ok,.relo-odp.blad{margin-top:16px;padding:14px 16px;border-radius:9px;font-size:14px;line-height:1.5;}
.relo-odp.ok{border:1px solid #b9dbc6;background:#f1faf4;color:#245d38;}
.relo-odp.blad{border:1px solid #e9bcbc;background:#fff5f5;color:#8a2929;}
.druga-szansa{margin-top:14px;padding:15px;border:1px solid #d9dee6;border-radius:9px;background:#fafbfc;}

/* kroki white label */
.kroki{gap:8px;margin-block:18px;}
.kroki li{border:1px solid #e2e6eb;border-radius:8px;background:#fafbfc;color:#394457;}

/* o firmie */
.ofirmie{margin-top:44px;padding-top:30px;padding-bottom:42px;border-top:1px solid #d9dee5;}
.ofirmie h2{margin-bottom:14px;font-size:25px;line-height:1.25;letter-spacing:-.025em;}
.ofirmie p{max-width:850px;color:#485468;line-height:1.65;}

/* stopka */
.stopka{border-top:0;background:var(--granat);color:#d7deea;font-size:12.5px;line-height:1.6;padding:20px 0;}
.stopka a{color:#fff;text-decoration-color:rgba(255,255,255,.45);}
.stopka a:hover{text-decoration-color:#fff;}

/* MOBILE */
@media (max-width:759px){
    /* krótsze hero i niższe kafelki = formularz szybciej pojawia się na ekranie */
    .hero{padding-top:30px;padding-bottom:70px;}
    .hero h1{margin-bottom:9px;font-size:31px;line-height:1.1;}
    .hero p{font-size:15px;line-height:1.55;}
    .sciezki{gap:10px;}
    .sciezka{min-height:0;padding:14px 16px;column-gap:12px;row-gap:2px;}
    .sciezka svg{width:38px;height:38px;padding:9px;flex-basis:38px;}
    .sciezka b{margin-bottom:3px;font-size:16px;}
    .sciezka span{font-size:13.5px;line-height:1.45;}
    .panel{margin-top:12px;padding:21px 18px 22px;border-radius:11px;}
    .panel h2{font-size:22px;}
    .panel .lead{font-size:14.5px;line-height:1.6;}
    .bonus{margin-bottom:13px;padding:6px 9px;font-size:11.5px;}
    .przel{width:auto;max-width:100%;margin-bottom:16px;}
    .przel button{min-height:40px;padding-inline:13px;font-size:13px;}
    /* 16 px zapobiega automatycznemu powiększaniu formularza w Safari na iPhone */
    input,select,textarea{min-height:52px;font-size:16px;}
    input[type=checkbox],input[type=radio]{min-height:0;}
    .zgoda-tytul{margin-top:19px;font-size:15px;}
    .zgoda-tytul + .check{padding:13px;}
    .maly{font-size:12.75px;}
    .btn,.btn-2{width:100%;min-height:52px;font-size:15px;}
    .ofirmie{margin-top:34px;padding-top:27px;padding-bottom:34px;}
    .ofirmie h2{font-size:23px;}
}

/* DESKTOP: mniej pustej przestrzeni pod tekstem hero, kafelki nadal nachodzą na granat */
@media (min-width:760px){
    .hero{padding-top:50px;padding-bottom:82px;}
    .sciezki{margin-top:-50px;}
    .sciezka b{margin-top:13px;}
}

@media (prefers-reduced-motion:reduce){
    .sciezka,.btn,.btn-2,input,select,textarea,.przel button{transition:none;}
}

/* podstrony z krótkim hero (np. import-z-chin-pod-wlasna-marka): lifting nie może go rozdmuchać */
.hero-maly{padding-bottom:34px;}
@media (min-width:760px){.hero-maly{padding-bottom:52px;}}