/* Oferta partnera w motywie strony głównej: piaskowa ściana, sofa Skoja i złoty neon jako jedyny mocny akcent. */
:root{
  --sciana:#f0e7d8;
  --podloga:#e0d4bf;
  --jasny:#fbf6ec;
  --tekst:#22282a;
  --szary:#5a584e;
  --zielen:#28524c;
  --zielen-j:#356a62;
  --krem:#f5ead6;
  --zloto:#e8bd4f;
  --linia:rgba(34,40,42,.2);
  --w:min(100%,780px);
  /* Wartości motywu: Skoja i piasek. Motyw morski nadpisuje je niżej. */
  --ciemny:#22282a;
  --guzik:#22282a;
  --guzik-t:#f5ead6;
  --logo:brightness(.2);
  --pole:#fbf6ec;
  --karta:#fbf6ec;
  --karta-p:#5a584e;
  --numer:#356a62;
  --pas-koszty:#28524c;
  --pas-demo:#e0d4bf;
  --kalendarz:#28524c;
  --kal-dzien:#356a62;
  --kal-hover:#437c73;
  --stopka:#28524c;
  --neon-t:#fff0b8;
  --neon-1:#ffc93c;
  --neon-2:#f0a000;
  --cien-kontakt:rgba(52,40,26,.62);
  --cien-podloga:rgba(92,72,46,.5);
  --cien-lezy:drop-shadow(0 6px 5px rgba(6,24,22,.45));
  --cien-wisi:drop-shadow(0 30px 24px rgba(70,55,35,.26));
  --prop:2.815;
  --klucz-l:71.5%;
  --klucz-d:55.5%;
  --napis-l:70.7%;
  --napis-g:23%;
  --napis-kat:0deg;
  --obrot:0deg;
}
[data-motyw=morski]{
  --sciana:#20444a;
  --podloga:#16323a;
  --tekst:#f5ead6;
  --szary:#c9d4d1;
  --linia:rgba(245,234,214,.24);
  --guzik:#f5ead6;
  --guzik-t:#22282a;
  --logo:brightness(0) invert(1);
  --pole:#fff;
  --karta:#16323a;
  --karta-p:#c9d4d1;
  --numer:#e8bd4f;
  --pas-koszty:#16323a;
  --pas-demo:#a4552c;
  --kalendarz:#16323a;
  --kal-dzien:#20444a;
  --kal-hover:#2d5a61;
  --stopka:#16323a;
  --neon-t:#fff3e4;
  --neon-1:#ff7ab0;
  --neon-2:#ff3e8a;
  --cien-kontakt:rgba(3,12,14,.72);
  --cien-podloga:rgba(3,12,14,.58);
  --cien-lezy:drop-shadow(0 2px 2px rgba(0,0,0,.2));
  --cien-wisi:drop-shadow(0 26px 22px rgba(4,14,16,.5));
  --prop:2.344;
  --klucz-l:75.7%;
  --klucz-d:56.8%;
  --napis-l:75.7%;
  --napis-g:22%;
  --napis-kat:2.5deg;
  --obrot:2.5deg;
}
/* Kolory z nagłówka sklepu, zmierzone na taniasofa.pl: tło #1d2523, logo i menu #d1bfa7. */
[data-motyw=naglowek]{
  --sciana:#1d2523;
  --podloga:#141a18;
  --tekst:#d1bfa7;
  --szary:#b8ad9c;
  --zielen-j:#d1bfa7;
  --linia:rgba(209,191,167,.28);
  --guzik:#d1bfa7;
  --guzik-t:#1d2523;
  --logo:none;
  --pole:#fff;
  --karta:#141a18;
  --karta-p:#b8ad9c;
  --numer:#d1bfa7;
  --pas-koszty:#141a18;
  --pas-demo:#d1bfa7;
  --kalendarz:#141a18;
  --kal-dzien:#2a3431;
  --kal-hover:#38453f;
  --stopka:#141a18;
  --neon-t:#fff0b8;
  --neon-1:#ffc93c;
  --neon-2:#f0a000;
  --cien-kontakt:rgba(0,0,0,.72);
  --cien-podloga:rgba(0,0,0,.58);
  --cien-lezy:drop-shadow(0 2px 2px rgba(0,0,0,.2));
  --cien-wisi:drop-shadow(0 26px 22px rgba(0,0,0,.5));
  --prop:2.344;
  --klucz-l:75.7%;
  --klucz-d:56.8%;
  --napis-l:75.7%;
  --napis-g:22%;
  --napis-kat:2.5deg;
  --obrot:2.5deg;
}
[data-motyw=naglowek] .koszty-pas,[data-motyw=naglowek] .rozmowa,[data-motyw=naglowek] .stopka{color:#d1bfa7}
[data-motyw=naglowek] .koszt p,[data-motyw=naglowek] .koszty-pas .dopisek,[data-motyw=naglowek] .rozmowa>p,[data-motyw=naglowek] .dni small{color:#b8ad9c}
/* Pas demo: odwrócony, jak beżowy przycisk koszyka w sklepie. */
[data-motyw=naglowek] .demo{--tekst:#1d2523;--szary:#3a3f3b;--linia:rgba(29,37,35,.28);--guzik:#1d2523;--guzik-t:#d1bfa7;--zielen-j:#1d2523;color:#1d2523}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{font-family:Lato,Verdana,Arial,sans-serif;font-size:18px;line-height:1.55;color:var(--tekst);background:var(--sciana)}
a{color:inherit}
h1,h2,h3{font-family:"Bricolage Grotesque",Georgia,sans-serif;font-weight:800;letter-spacing:-.015em;margin:0}
h2{font-size:clamp(34px,5vw,64px);line-height:1.02;margin-bottom:.45em;max-width:17ch}
h3{font-size:clamp(22px,2vw,27px);line-height:1.12;margin-bottom:.35em}
p{margin:0 0 1em;max-width:62ch}
.wnetrze{width:min(1180px,100%);margin:0 auto;padding:clamp(64px,9vw,120px) clamp(16px,3vw,40px)}
.brak{color:var(--ciemny);background:var(--zloto);padding:0 .3em;border-radius:3px;font-weight:700;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.guzik{display:inline-block;font-family:inherit;background:var(--guzik);color:var(--guzik-t);font-weight:700;font-size:17px;line-height:1.2;padding:.8em 1.35em;border:0;border-radius:999px;text-decoration:none;cursor:pointer;transition:opacity .2s}
.guzik:hover{opacity:.86}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--zielen-j);outline-offset:3px}

.gora{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px clamp(16px,3vw,40px)}
.gora img{display:block;height:clamp(44px,7vh,68px);width:auto;filter:var(--logo)}
.gora .kupno{font-size:16px;font-weight:700;text-underline-offset:3px}

/* Otwarcie: dalszy ciąg strony głównej, prawa poduszka wciąż wisi nad sofą, pod nią klucz. */
.start{position:relative;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:end;gap:clamp(16px,3vw,48px);padding:110px clamp(16px,3vw,40px) 0;overflow:hidden;background:linear-gradient(180deg,var(--sciana) 0,var(--sciana) calc(100% - 96px),var(--podloga) calc(100% - 96px))}
.start__tekst{align-self:center;padding-bottom:96px;max-width:560px;justify-self:end;width:100%}
.start h1{font-size:clamp(46px,6.3vw,92px);line-height:.98;margin-bottom:.35em}
.start__lead{font-size:clamp(18px,1.5vw,21px);margin-bottom:1.4em}
.miasto label{display:block;font-weight:700;margin-bottom:.45em}
.miasto__rzad{display:flex;flex-wrap:wrap;gap:8px}
.miasto input{flex:1 1 200px;min-width:0;font:inherit;padding:.72em 1.1em;border:1.5px solid var(--tekst);border-radius:999px;background:var(--pole);color:var(--ciemny)}
.miasto__nota{font-size:16px;color:var(--szary);margin:.75em 0 0;min-height:1.5em}

.scena{position:relative;justify-self:start;width:var(--w);aspect-ratio:var(--prop);margin-top:clamp(170px,30vh,300px);margin-bottom:64px}
.scena::before,.scena::after{content:"";position:absolute;z-index:0;pointer-events:none}
.scena::before{left:6%;right:6%;bottom:-.8%;height:3.2%;background:var(--cien-kontakt);filter:blur(5px);border-radius:40%}
.scena::after{left:-1%;right:-1%;bottom:-8%;height:15%;background:radial-gradient(50% 50% at 50% 42%,var(--cien-podloga),transparent);filter:blur(7px)}
.warstwa{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
.lezy{position:absolute;inset:0;z-index:3;filter:var(--cien-lezy);pointer-events:none}
.poduszka{position:absolute;inset:0;z-index:3;transform:translateY(-55%) rotate(var(--obrot));filter:var(--cien-wisi);pointer-events:none}
.poduszka img{animation:plywa 3.6s ease-in-out infinite alternate}
@keyframes plywa{to{transform:translateY(-9px)}}
.poduszka__napis{position:absolute;z-index:2;left:var(--napis-l);top:var(--napis-g);width:15%;transform:translate(-50%,-50%);color:var(--krem);font-family:"Bricolage Grotesque",Georgia,sans-serif;font-weight:800;font-size:clamp(11px,1.5vw,19px);line-height:1.06;text-align:center;text-shadow:0 1px 3px rgba(4,20,18,.6)}
.klucz{position:absolute;z-index:2;left:var(--klucz-l);bottom:var(--klucz-d);width:21%;transform:translateX(-50%);overflow:visible;filter:drop-shadow(0 3px 3px rgba(0,0,0,.45))}
.klucz text{font-family:"Bricolage Grotesque",Georgia,sans-serif;font-weight:800;fill:var(--ciemny)}

/* Sekcje */
.pas{background:var(--podloga)}
.dwie{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,88px)}
.lista{list-style:none;margin:0;padding:0}
.lista li{padding:.8em 0;border-top:1px solid var(--linia)}
.lista b{display:block;font-size:19px}
.lista span{color:var(--szary);font-size:17px}
.lista .brak{color:var(--ciemny)}

.sposoby{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px);margin-top:12px}
.sposob{background:var(--karta);border-radius:18px;padding:clamp(20px,2.4vw,30px)}
.sposob p{font-size:17px;margin:0;color:var(--karta-p)}

.droga{list-style:none;margin:16px 0 0;padding:0;counter-reset:d;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px)}
.droga li{counter-increment:d}
.droga li::before{content:counter(d);display:block;font-family:"Bricolage Grotesque",Georgia,sans-serif;font-weight:800;font-size:clamp(46px,5vw,72px);line-height:1;color:var(--numer);margin-bottom:.15em}
.droga p{font-size:17px;margin:0;color:var(--szary)}

/* Koszty: jedyna ciemna scena, kwoty świecą jak cena pod poduszką. */
.koszty-pas{background:var(--pas-koszty);color:var(--krem)}
.koszty{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px);margin:10px 0 30px}
.koszt{border-top:1px solid rgba(245,234,214,.3);padding-top:18px}
.koszt strong{display:block;font-family:"Tilt Neon",Lato,sans-serif;font-weight:400;font-size:clamp(34px,4.4vw,58px);line-height:1.1;margin-bottom:.3em;color:var(--neon-t);text-shadow:0 0 2px #fff,0 0 7px var(--neon-1),0 0 16px var(--neon-2),0 0 30px var(--neon-2)}
.koszt p{font-size:17px;margin:0;color:#dfe5d8}
.koszty-pas .dopisek{color:#dfe5d8;font-size:17px;margin:0}

.demo{background:var(--pas-demo)}
.demo .wnetrze{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;padding-top:clamp(48px,6vw,80px);padding-bottom:clamp(48px,6vw,80px)}
.demo h2{margin:0 0 .2em;font-size:clamp(30px,4vw,52px);max-width:20ch}
.demo p{margin:0}

.faq details{border-top:1px solid var(--linia);padding:18px 0}
.faq details:last-child{border-bottom:1px solid var(--linia)}
.faq summary{cursor:pointer;font-weight:700;font-size:19px;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:"Bricolage Grotesque",sans-serif;font-size:26px;line-height:1;flex:none;color:var(--numer)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:.7em 0 0;color:var(--szary)}

.zgloszenie{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,5vw,72px);align-items:start}
.zgloszenie form{background:#fbf6ec;color:var(--ciemny);border-radius:18px;padding:clamp(20px,3vw,36px);display:grid;grid-template-columns:1fr 1fr;gap:16px}
.zgloszenie label{display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:700}
.zgloszenie input,.zgloszenie select,.zgloszenie textarea{font:inherit;font-weight:400;font-size:17px;padding:.65em .8em;border:1px solid #8c8676;border-radius:10px;background:#fff;color:var(--ciemny);width:100%}
.zgloszenie .cala{grid-column:1/-1}
.zgloszenie .zgoda{flex-direction:row;align-items:flex-start;gap:10px;font-weight:400;font-size:14px;line-height:1.4}
.zgloszenie .zgoda input{width:auto;margin-top:3px;flex:none}
.zgloszenie input.swiezy{animation:swiezy 1.4s}
@keyframes swiezy{0%{background:var(--zloto)}100%{background:#fff}}
.zgloszenie form .guzik{background:var(--ciemny);color:var(--krem)}
.komunikat{margin:0;font-size:15px;font-weight:700}
.rozmowa{margin-top:28px;background:var(--kalendarz);color:var(--krem);border-radius:18px;padding:clamp(16px,2vw,24px)}
.rozmowa h3{margin-bottom:.15em}
.rozmowa>p{font-size:16px;color:#dfe5d8;margin-bottom:14px}
.rozmowa a:focus-visible,.rozmowa button:focus-visible{outline-color:var(--zloto)}
.miesiac{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;font-weight:700}
.miesiac span::first-letter{text-transform:uppercase}
.miesiac button{width:40px;height:40px;border-radius:50%;border:1px solid rgba(245,234,214,.5);background:none;color:var(--krem);font:inherit;font-size:20px;line-height:1;cursor:pointer}
.miesiac button:disabled{opacity:.3;cursor:default}
.dni{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}
.dni small{font-size:13px;color:#dfe5d8;padding-bottom:4px}
.dni button{aspect-ratio:1;min-height:36px;padding:0;border:0;border-radius:10px;background:var(--kal-dzien);color:var(--krem);font:inherit;font-size:16px;font-weight:700;cursor:pointer;transition:background .15s}
.dni button:hover:not(:disabled){background:var(--kal-hover)}
.dni button:disabled{background:none;color:rgba(245,234,214,.35);font-weight:400;cursor:default}
.dni button[aria-pressed=true],.godziny button[aria-pressed=true]{background:var(--zloto);color:var(--ciemny)}
.godziny{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.godziny[hidden]{display:none}
.godziny button{min-height:40px;padding:0 .9em;border:1px solid rgba(245,234,214,.5);border-radius:999px;background:none;color:var(--krem);font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.godziny.dokladne:not([hidden]){display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.godziny.dokladne button{padding:0;font-size:15px}
.dokladniej{display:block;margin-top:10px;padding:.2em 0;background:none;border:0;color:var(--krem);font:inherit;font-size:16px;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.dokladniej[hidden]{display:none}
.rozmowa__stan{font-size:16px;margin:12px 0 0;min-height:1.5em}
.rozmowa__tel{font-size:16px;margin:12px 0 0}

.stopka{background:var(--stopka);color:var(--krem);padding:28px clamp(16px,3vw,40px);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:16px}
.makieta{position:fixed;bottom:8px;left:8px;z-index:9;background:#000;color:#fff;font-size:12px;padding:5px 9px;border-radius:4px}

@media (max-width:980px){
  .start{grid-template-columns:1fr;align-items:start;padding-top:96px}
  .start__tekst{justify-self:start;padding-bottom:0;max-width:640px}
  .scena{justify-self:center;margin-top:clamp(110px,27vw,220px);width:min(100%,680px)}
  .sposoby,.koszty{grid-template-columns:1fr}
  .droga{grid-template-columns:1fr 1fr}
  .dwie,.zgloszenie{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:17px}
  .gora img{height:40px}
  .droga{grid-template-columns:1fr}
  .zgloszenie form{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .poduszka img,.zgloszenie input.swiezy{animation:none}
}