/* ============ RESET ============ */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
margin:0;
background:var(–bg);
color:var(–ink);
font-family:var(–font-body) !important;
font-size:16px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
transition:background .4s var(–ease), color .4s var(–ease);
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{
font-family:var(–font-display) !important;
font-weight:600;
line-height:1.12;
letter-spacing:-.01em;
margin:0;
color:var(–ink) !important; /* zabezpieczenie: nadpisuje domyślny kolor nagłówków narzucany przez motyw WordPressa (Blocksy) */
}
p{margin:0;}
.mono{font-family:var(–font-mono) !important;}
:focus-visible{outline:2px solid var(–accent); outline-offset:3px; border-radius:4px;}
h1,h2,h3,h4,.eyebrow{overflow-wrap:break-word; word-break:normal; hyphens:none;}
p{overflow-wrap:break-word; word-break:normal; hyphens:auto;}

/* ============ LAYOUT HELPERS ============ */
.wrap{max-width:var(–maxw); margin:0 auto; padding-inline:var(–pad-inline);}
.eyebrow{
font-family:var(–font-mono) !important;
font-size:.78rem;
letter-spacing:.18em;
text-transform:uppercase;
color:var(–accent);
display:inline-flex;
flex-wrap:wrap;
row-gap:.4rem;
align-items:center;
gap:.6rem;
max-width:100%;
}
.eyebrow–punch{color:var(–punch);}
.eyebrow–on-dark{color:var(–punch);}
.eyebrow::before{
content:””;
width:1.4em; height:1px;
background:currentColor;
display:inline-block;
flex:none;
}
.btn{
font-family:var(–font-display) !important;
font-weight:600;
font-size:.98rem;
letter-spacing:.01em;
padding:.95rem 1.7rem;
border-radius:var(–radius-md);
border:1px solid transparent;
cursor:pointer;
display:inline-flex;
align-items:center;
gap:.55rem;
text-decoration:none;
transition:transform .25s var(–ease), box-shadow .25s var(–ease), background .25s var(–ease), color .25s var(–ease), border-color .25s var(–ease);
text-align:center; line-height:1.25;
}
.btn–primary{background:var(–accent); color:var(–accent-ink);}
.btn–primary:hover{transform:translateY(-2px); box-shadow:var(–shadow-soft);}
.btn–ghost{background:transparent; border-color:var(–stone-strong); color:var(–ink);}
.btn–ghost:hover{border-color:var(–ink); transform:translateY(-2px);}
.btn–punch{background:var(–punch); color:var(–punch-ink);}
.btn–punch:hover{transform:translateY(-2px); box-shadow:var(–shadow-soft);}

.section-head{
max-width:46rem;
display:flex;
flex-direction:column;
gap:1rem;
margin-bottom:clamp(2.5rem, 5vw, 4rem);
}
.section-head h2{font-size:clamp(1.9rem, 3.2vw, 3rem);}
.section-head p{color:var(–ink-soft); font-size:1.05rem; max-width:34rem;}

/* ============ REVEAL ============ */
/* Domyślnie treść jest WIDOCZNA — dzięki temu strona działa nawet bez JS
(np. w podglądzie pliku na telefonie). Ukrycie + animacja wjazdu włącza się
tylko, gdy JS dodał klasę .js na . */
.reveal{opacity:1; transform:none;}
.js .reveal{opacity:0; transform:translateY(18px); transition:opacity .7s var(–ease), transform .7s var(–ease);}
.js .reveal.is-visible{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
.js .reveal{opacity:1; transform:none; transition:none;}
html{scroll-behavior:auto;}
}

/* ============ PRECISION RAIL (signature element) ============ */
.rail{
position:fixed;
top:0; right:0; bottom:0;
width:54px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-end;
padding:88px 0 28px;
z-index:40;
pointer-events:none;
}
.rail__track{
position:relative;
width:2px;
flex:1;
background:var(–stone-strong);
border-radius:2px;
overflow:visible;
}
.rail__fill{
position:absolute;
bottom:0; left:0; width:100%;
height:0%;
background:var(–accent);
border-radius:2px;
transition:background .4s var(–ease);
}
.rail__ticks{
position:absolute; inset:0;
display:flex; flex-direction:column-reverse; justify-content:space-between;
}
.rail__tick{
width:10px; height:1px; background:var(–stone-strong);
transform:translateX(-4px);
}
.rail__value{
margin-top:14px;
font-size:.72rem;
color:var(–ink-soft);
writing-mode:vertical-rl;
text-orientation:mixed;
letter-spacing:.05em;
}
.rail__cap{
font-size:.65rem;
letter-spacing:.18em;
color:var(–ink-faint);
text-transform:uppercase;
writing-mode:vertical-rl;
margin-bottom:14px;
}
@media (max-width: 1100px){ .rail{display:none;} }

/* mobile top progress */
.progress-top{
position:fixed; top:0; left:0; right:0; height:3px;
background:var(–stone); z-index:60;
}
.progress-top__fill{height:100%; width:0%; background:var(–accent); transition:background .4s var(–ease);}
@media (min-width:1101px){ .progress-top{display:none;} }

/* ============ HEADER ============ */
header{
position:sticky; top:0; z-index:50;
backdrop-filter:blur(14px) saturate(160%);
background:color-mix(in srgb, var(–bg) 78%, transparent);
border-bottom:1px solid var(–stone);
}
.nav{
display:flex; align-items:center; justify-content:space-between;
padding-block:1.05rem;
gap:1.5rem;
}
.logo{
display:flex; align-items:center; gap:.65rem;
font-family:var(–font-display) !important; font-weight:700; font-size:1.15rem;
text-decoration:none; letter-spacing:.01em;
}
.logo__mark{
width:34px; height:34px; border-radius:9px;
background:var(–ink); color:var(–bg);
display:flex; align-items:center; justify-content:center;
font-size:.78rem; font-weight:700; position:relative; flex:none;
font-family:var(–font-mono) !important;
}
.logo__mark::after{
content:””; position:absolute; top:-3px; right:-3px;
width:9px; height:9px; border-radius:50%;
background:var(–accent); border:2px solid var(–bg);
}
.nav__links{
display:flex; gap:2.1rem; list-style:none; margin:0; padding:0;
font-size:.96rem; font-weight:500;
}
.nav__links a{text-decoration:none; color:var(–ink-soft); transition:color .2s;}
.nav__links a:hover{color:var(–ink);}
.nav__right{display:flex; align-items:center; gap:.6rem;}
.icon-btn{
width:42px; height:42px; border-radius:var(–radius-sm);
border:1px solid var(–stone-strong); background:transparent;
color:var(–ink); display:flex; align-items:center; justify-content:center;
cursor:pointer; transition:border-color .2s, transform .2s;
flex:none; position:relative; text-decoration:none;
}
.cart-btn__count{
position:absolute; top:-6px; right:-6px;
min-width:18px; height:18px; padding:0 4px;
border-radius:999px; background:var(–accent); color:var(–accent-ink);
font-family:var(–font-mono) !important; font-size:.68rem; font-weight:700;
display:flex; align-items:center; justify-content:center;
line-height:1;
}
.icon-btn:hover{transform:translateY(-2px); border-color:var(–ink);}
.icon-btn svg{width:18px; height:18px;}
@media (max-width:860px){
.nav__links{display:none;}
}
@media (max-width:600px){
.nav{gap:.5rem; padding-block:.85rem;}
.logo{font-size:.92rem; gap:.5rem; white-space:nowrap;}
.logo__mark{width:30px; height:30px; font-size:.68rem;}
.nav__right{gap:.4rem;}
.nav__right .btn{padding:.6rem .85rem; font-size:.82rem;}
.cart-btn{display:none;}
.icon-btn{width:38px; height:38px;}
}
@media (max-width:360px){
.logo__text{display:none;}
.nav__right .btn{padding:.55rem .7rem; font-size:.78rem;}
.icon-btn{width:36px; height:36px;}
}

/* ============ HERO ============ */
.hero{
padding-top:clamp(3rem, 7vw, 6rem);
padding-bottom:var(–sec-pad);
position:relative;
overflow:hidden;
}
.hero::before{
content:””;
position:absolute; inset:-20% -10% auto auto;
width:50vw; height:50vw; max-width:760px; max-height:760px;
background:radial-gradient(circle at 50% 50%, var(–accent-soft), transparent 70%);
filter:blur(10px);
z-index:0;
pointer-events:none;
}
.hero::after{
content:””;
position:absolute;
left:-10%; bottom:-25%;
width:40vw; height:40vw; max-width:600px; max-height:600px;
background:radial-gradient(circle at 50% 50%, var(–punch-soft), transparent 70%);
z-index:0; pointer-events:none;
}
.hero__grid{
position:relative; z-index:1;
display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(2rem,5vw,4rem);
align-items:center;
}
.hero h1{font-size:clamp(2.6rem, 6vw, 4.6rem); margin-top:1.1rem;}
.hero__lead{
margin-top:1.3rem; font-size:1.12rem; color:var(–ink-soft); max-width:32rem;
}
.hero__lead b{color:var(–ink); font-weight:600;}
.hero__pricing{
display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.8rem;
}
.price-chip{
border:1px solid var(–stone-strong); border-radius:999px;
padding:.5rem 1.1rem; font-size:.9rem; display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
background:var(–surface);
}
.price-chip strong{font-family:var(–font-mono) !important; font-size:.95rem; white-space:nowrap;}
.price-chip–bundle{
border-color:transparent; background:var(–punch-soft); color:var(–punch-ink);
padding:.4rem 1.15rem .4rem .45rem; gap:.75rem;
}
html[data-theme=”dark”] .price-chip–bundle{color:var(–punch);}
.price-chip__icon{
width:32px; height:32px; border-radius:50%; background:var(–punch); color:#fff;
display:flex; align-items:center; justify-content:center; flex:none;
}
html[data-theme=”dark”] .price-chip__icon{color:var(–punch-ink);}
.price-chip__icon svg{width:15px; height:15px;}
.price-chip__text{display:flex; flex-direction:column; gap:.1rem; line-height:1.25;}
.price-chip__text strong{font-family:var(–font-mono) !important; font-size:.92rem; font-weight:600; white-space:nowrap;}
.price-chip__tag{font-size:.74rem; opacity:.78; letter-spacing:.02em;}
.hero__ctas{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.1rem;}
.hero__delivery{
margin-top:1.6rem;
display:flex; flex-wrap:wrap; align-items:center; gap:.6rem .7rem;
font-size:.88rem; color:var(–ink-soft);
border-top:1px solid var(–stone); padding-top:1rem;
}
.hero__delivery .dot{width:8px; height:8px; border-radius:50%; background:var(–accent); flex:none; box-shadow:0 0 0 4px var(–accent-soft);}
#countdown{font-family:var(–font-mono) !important; color:var(–ink); font-weight:500; white-space:nowrap;}

/* ============ 3D PRODUCT MOCKUP ============ */
.mock3d{
–mock-w:168px; –mock-h:360px;
position:relative; width:100%; height:100%;
display:flex; align-items:center; justify-content:center;
}
.mock3d__scene{
width:var(–mock-w); height:var(–mock-h);
perspective:1100px;
}
.mock3d__body{
position:relative; width:100%; height:100%;
transform-style:preserve-3d;
transform:rotateX(10deg) rotateY(0deg);
animation:mock3d-spin 18s linear infinite;
}
@keyframes mock3d-spin{
from{ transform:rotateX(10deg) rotateY(0deg); }
to{ transform:rotateX(10deg) rotateY(360deg); }
}
.mock3d__facet{
position:absolute; top:0; left:50%;
width:calc(var(–mock-w) * .46);
height:100%;
margin-left:calc(var(–mock-w) * -.23);
transform-origin:center;
transform:rotateY(calc(var(–i) * 45deg)) translateZ(calc(var(–mock-w) * .555));
background:linear-gradient(180deg,
#ffffff 0%, #ffffff 36%,
var(–product-color) 36%, var(–product-color) 54%,
#ffffff 54%, #ffffff 100%);
border-left:1px solid rgba(20,23,26,.06);
border-right:1px solid rgba(20,23,26,.06);
transition:background .5s var(–ease);
}
html[data-theme=”dark”] .mock3d__facet{
background:linear-gradient(180deg,
#2A313A 0%, #2A313A 36%,
var(–product-color) 36%, var(–product-color) 54%,
#2A313A 54%, #2A313A 100%);
border-color:rgba(255,255,255,.05);
}
.mock3d__cap{
position:absolute; left:50%; top:50%;
width:calc(var(–mock-w) * .64); height:calc(var(–mock-w) * .64);
margin:calc(var(–mock-w) * -.32) 0 0 calc(var(–mock-w) * -.32);
border-radius:50%;
background:radial-gradient(circle at 35% 32%, #ffffff, #E4DFD4 75%);
}
html[data-theme=”dark”] .mock3d__cap{
background:radial-gradient(circle at 35% 32%, #3A4350, #1A1F25 75%);
}
.mock3d__cap–top{ transform:rotateX(90deg) translateZ(calc(var(–mock-h) * .5)); }
.mock3d__cap–bottom{
transform:rotateX(90deg) translateZ(calc(var(–mock-h) * -.5));
background:radial-gradient(circle at 50% 50%, var(–product-color), color-mix(in srgb, var(–product-color) 55%, #000) 85%);
transition:background .5s var(–ease);
}
.mock3d__glow{
position:absolute; left:50%; bottom:6%;
width:calc(var(–mock-w) * 2.6); height:calc(var(–mock-w) * 1.05);
transform:translateX(-50%);
background:radial-gradient(ellipse at center, var(–product-color) 0%, transparent 72%);
filter:blur(26px);
opacity:.55;
border-radius:50%;
z-index:0;
transition:background .5s var(–ease);
animation:mock3d-pulse 5s ease-in-out infinite;
}
@keyframes mock3d-pulse{
0%,100%{ opacity:.42; transform:translateX(-50%) scale(1); }
50%{ opacity:.68; transform:translateX(-50%) scale(1.07); }
}
.mock3d–sm{ –mock-w:104px; –mock-h:224px; }
@media (prefers-reduced-motion: reduce){
.mock3d__body{animation:none; transform:rotateX(10deg) rotateY(28deg);}
.mock3d__glow{animation:none;}
}

/* ============ FLOATING PRODUCT PHOTO (real product) ============ */
.float3d{
position:relative; width:100%; height:100%;
display:flex; align-items:center; justify-content:center;
}
.float3d__glow{
position:absolute; left:50%; bottom:10%;
width:72%; height:30%;
transform:translateX(-50%);
background:radial-gradient(ellipse at center, var(–product-color) 0%, transparent 72%);
filter:blur(32px);
opacity:.5;
border-radius:50%;
z-index:0;
transition:background .5s var(–ease);
animation:mock3d-pulse 5s ease-in-out infinite;
}
html[data-theme=”dark”] .float3d__glow{ opacity:.7; }
.float3d__stage{
position:relative; z-index:1;
width:62%;
animation:float3d-bob 6s ease-in-out infinite;
filter:
drop-shadow(0 26px 26px rgba(20,23,26,.22))
drop-shadow(0 0 34px var(–product-color-soft));
transition:filter .5s var(–ease);
}
html[data-theme=”dark”] .float3d__stage{
filter:
drop-shadow(0 26px 30px rgba(0,0,0,.55))
drop-shadow(0 0 46px var(–product-color-soft))
drop-shadow(0 0 90px var(–product-color-soft));
}
.float3d__stage img{
width:100%; display:block;
transition:opacity .3s var(–ease), transform .35s var(–ease), filter .35s var(–ease);
}
.float3d__stage img.is-swapping{
opacity:0;
transform:scale(.92);
filter:blur(10px);
}
@keyframes float3d-bob{
0%,100%{ transform:translateY(0); }
50%{ transform:translateY(-14px); }
}
@media (prefers-reduced-motion: reduce){
.float3d__stage{animation:none;}
.float3d__glow{animation:none;}
.float3d__stage img{transition:opacity .3s var(–ease);}
.float3d__stage img.is-swapping{transform:none; filter:none;}
}
.float3d–sm .float3d__stage{
width:92%;
filter:
drop-shadow(0 14px 14px rgba(20,23,26,.22))
drop-shadow(0 0 18px var(–product-color-soft));
}
html[data-theme=”dark”] .float3d–sm .float3d__stage{
filter:
drop-shadow(0 14px 16px rgba(0,0,0,.55))
drop-shadow(0 0 24px var(–product-color-soft))
drop-shadow(0 0 46px var(–product-color-soft));
}
.float3d–sm .float3d__glow{ width:88%; height:36%; filter:blur(18px); }

.hero__media{position:relative;}
.hero__media-frame{
border-radius:var(–radius-lg);
overflow:hidden;
aspect-ratio:4/5;
background:var(–surface-2);
border:1px solid var(–stone);
position:relative;
}
.hero__media-frame–photo{
aspect-ratio:16/11;
border:none;
border-radius:var(–radius-lg);
overflow:hidden;
position:relative;
/* żółta poświata — delikatny box-shadow */
box-shadow:
0 0 0 1px rgba(224,168,0,.12),
0 8px 32px -8px rgba(0,0,0,.18),
0 0 56px -8px rgba(224,168,0,.22),
0 0 110px -20px rgba(224,168,0,.14);
animation:hero-photo-float 7s ease-in-out infinite;
}
html[data-theme=”dark”] .hero__media-frame–photo{
box-shadow:
0 0 0 1px rgba(224,168,0,.15),
0 8px 40px -8px rgba(0,0,0,.55),
0 0 70px -8px rgba(224,168,0,.32),
0 0 140px -24px rgba(224,168,0,.18);
}
@keyframes hero-photo-float{
0%,100%{ transform:translateY(0) scale(1); }
50%{ transform:translateY(-7px) scale(1.006); }
}
@media (prefers-reduced-motion: reduce){
.hero__media-frame–photo{ animation:none; }
}
.hero__photo{
width:100%; height:100%; object-fit:cover; display:block;
}
.hero__badge{
position:absolute; bottom:1.1rem; left:1.1rem; right:1.1rem;
background:var(–surface); border:1px solid var(–stone);
border-radius:var(–radius-md);
padding:.85rem 1.1rem;
display:flex; align-items:center; gap:.8rem;
box-shadow:var(–shadow-soft);
backdrop-filter:blur(6px);
z-index:2;
}
.hero__badge .num{
font-family:var(–font-mono) !important; font-size:1.3rem; font-weight:600; color:var(–accent);
line-height:1; flex:none;
}
.hero__badge .lbl{font-size:.74rem; color:var(–ink-soft); line-height:1.3;}

/* ============ STYLISTA SECTION ============ */
/* sekcja stylista: czarny blok identyczny z .precision / .demo */
.stylista{
padding-block:var(–sec-pad);
background:var(–block-bg);
color:var(–block-ink);
}
.stylista__text p{ color:rgba(255,255,255,.70); }
html[data-theme=’dark’] .stylista__text p{ color:rgba(243,241,236,.65); }
/* kontener zdjęcia: złote tło z pliku — patrz niżej w .stylista__img */
.stylista__grid{
display:grid;
grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
gap:clamp(2.5rem,5vw,5rem);
align-items:center;
}
.stylista__img{
border-radius:var(–radius-lg);
overflow:hidden;
aspect-ratio:3/4;
background:#ffffff;
background-size:cover;
background-position:center;
}
.stylista__img img{
width:100%; height:100%; object-fit:cover; display:block;
object-position:center top;
mix-blend-mode:normal;
}
html[data-theme=”dark”] .stylista__img img{
mix-blend-mode:normal;
}
.stylista__text{display:flex; flex-direction:column; gap:1.2rem;}
.stylista__text h2{font-size:clamp(1.7rem,3vw,2.6rem); color:var(–block-ink);}
.stylista__text p{font-size:1.02rem; line-height:1.72; max-width:32rem;}
@media (max-width:860px){
.stylista__grid{grid-template-columns:minmax(0,1fr);}
.stylista__img{aspect-ratio:4/3; order:-1;}
}

/* ============ CLEANING / COMFORT SECTION ============ */
.cleaning{
padding-block:var(–sec-pad);
background:var(–block-bg);
color:var(–block-ink);
}
.cleaning__grid{
display:grid;
grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
gap:clamp(2.5rem,5vw,5rem);
align-items:center;
}
.cleaning__img{
border-radius:var(–radius-lg);
overflow:hidden;
position:relative;
}
.cleaning__img img{
width:100%; display:block; border-radius:var(–radius-lg);
filter:brightness(.96) contrast(1.04);
}
.cleaning__text{display:flex; flex-direction:column; gap:1.4rem;}
.cleaning__text h2{font-size:clamp(1.7rem,3vw,2.6rem); color:var(–block-ink);}
.cleaning__points{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:1rem;}
.cleaning__points li{
display:flex; gap:.85rem; align-items:flex-start;
font-size:.98rem; color:rgba(255,255,255,.78);
}
.cleaning__points svg{width:19px; height:19px; flex:none; margin-top:.15rem; color:var(–punch);}
@media (max-width:860px){
.cleaning__grid{grid-template-columns:minmax(0,1fr);}
}

/* ============ DEMO STRIP ============ */
.demo{
background:var(–block-bg); color:var(–block-ink);
padding-block:var(–sec-pad);
}
.demo__head{
max-width:42rem; margin:0 auto clamp(2rem,4vw,3rem);
text-align:center;
display:flex; flex-direction:column; gap:1rem; align-items:center;
}
.demo h3{font-size:clamp(1.6rem,3vw,2.4rem); color:var(–block-ink);}
.demo p{color:rgba(255,255,255,.64); max-width:34rem;}
html[data-theme=”dark”] .demo p{color:rgba(243,241,236,.6);}
.demo__video-frame{
border-radius:var(–radius-lg); overflow:hidden;
border:1px solid var(–block-soft);
box-shadow:0 30px 80px -40px rgba(0,0,0,.6);
}
.demo video{
width:100%; display:block;
background:#000; aspect-ratio:16/9; object-fit:cover;
}

/* ============ BENEFITS ============ */
.benefits{padding-block:var(–sec-pad);}
.benefits__grid{
display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.25rem;
}
.b-card{
background:var(–surface); border:1px solid var(–stone);
border-radius:var(–radius-lg); padding:1.9rem;
display:flex; flex-direction:column; gap:1.1rem;
transition:transform .3s var(–ease), border-color .3s var(–ease);
}
.b-card:hover{transform:translateY(-4px); border-color:var(–accent);}
.b-card__icon{
width:46px; height:46px; border-radius:12px;
background:var(–accent-soft); color:var(–accent-ink);
display:flex; align-items:center; justify-content:center;
}
html[data-theme=”dark”] .b-card__icon{color:var(–accent);}
.b-card__icon svg{width:22px; height:22px;}
.b-card h3{font-size:1.08rem;}
.b-card p{color:var(–ink-soft); font-size:.92rem;}
@media (max-width:1020px){ .benefits__grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .benefits__grid{grid-template-columns:minmax(0,1fr);} }

/* ============ PRECISION BAND ============ */
.precision{
position:relative; padding-block:clamp(5rem,12vw,11rem);
background:var(–block-bg); color:var(–block-ink);
overflow:hidden;
}
.precision__bg{
position:absolute; inset:0; z-index:0;
background-size:cover; background-position:center;
opacity:.34;
}
.precision::after{
content:””; position:absolute; inset:0; z-index:1;
background:linear-gradient(180deg, color-mix(in srgb, var(–block-bg) 18%, transparent), color-mix(in srgb, var(–block-bg) 94%, transparent));
}
.precision__content{position:relative; z-index:2; max-width:46rem;}
.precision h2{font-size:clamp(1.9rem,4vw,3.2rem); color:#fff;}
.precision__list{
margin-top:2.6rem; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 2.5rem;
list-style:none; padding:0;
}
.precision__list li{
display:flex; gap:.7rem; align-items:flex-start;
font-size:.95rem; color:rgba(255,255,255,.78);
}
.precision__list svg{width:18px; height:18px; flex:none; margin-top:.15rem; color:var(–accent);}
.precision__cap{margin-top:2.6rem; font-family:var(–font-mono) !important; font-size:.85rem; color:var(–punch); letter-spacing:.04em;}
@media (max-width:640px){ .precision__list{grid-template-columns:minmax(0,1fr);} }

/* ============ AUDIENCE ============ */
.audience{padding-block:var(–sec-pad);}
.audience__grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem;}
.a-card{
border:1px solid var(–stone); border-radius:var(–radius-lg);
padding:2rem; background:var(–surface-2);
display:flex; flex-direction:column; gap:1rem;
}
.a-card__top{display:flex; align-items:center; gap:1rem;}
.a-card__icon{
width:48px; height:48px; border-radius:12px; flex:none;
background:var(–surface); border:1px solid var(–stone);
display:flex; align-items:center; justify-content:center; color:var(–punch);
}
.a-card__icon svg{width:22px; height:22px;}
.a-card h3{font-size:1.1rem;}
.a-card p{color:var(–ink-soft); font-size:.93rem;}
@media (max-width:760px){ .audience__grid{grid-template-columns:minmax(0,1fr);} }

/* ============ TOOLKIT / CTA ============ */
.toolkit{padding-block:var(–sec-pad); border-top:1px solid var(–stone);}
.toolkit__top{
display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(2rem,5vw,4rem); align-items:start;
}
.toolkit h2{font-size:clamp(1.9rem,3.4vw,3rem);}
.toolkit__lead{color:var(–ink-soft); margin-top:1rem; max-width:30rem; font-size:1.02rem;}
.checklist{list-style:none; margin:2.2rem 0 0; padding:0; display:flex; flex-direction:column; gap:1rem;}
.checklist li{display:flex; gap:.85rem; align-items:flex-start; font-size:1rem;}
.checklist svg{width:20px; height:20px; flex:none; color:var(–accent); margin-top:.1rem;}

.picker{
background:var(–block-bg); color:var(–block-ink);
border-radius:var(–radius-lg);
padding:2rem;
display:flex; flex-direction:column; gap:1.6rem;
position:relative; overflow:hidden;
}
/* Poświata zewnętrzna — reaguje na –product-color przez CSS var */
.picker::after{
content:””; pointer-events:none;
position:absolute; inset:-4px; border-radius:calc(var(–radius-lg) + 4px);
box-shadow:
0 0 0 1px var(–product-color-soft),
0 0 55px -8px var(–product-color),
0 0 110px -18px var(–product-color);
opacity:.45;
transition:opacity .5s var(–ease);
z-index:0;
}
html[data-theme=”dark”] .picker::after{ opacity:.72; }
.picker.is-recoloring::after{ opacity:0; transition:opacity .15s var(–ease); }
.picker::before{
content:””; position:absolute; inset:-30%;
background:radial-gradient(circle at 72% 18%, var(–product-color-soft), transparent 60%);
opacity:.6; pointer-events:none;
transition:background .5s var(–ease);
}
.picker__head{position:relative; z-index:1; display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap;}
.picker__head h3{font-size:1.05rem; color:var(–block-ink);}
.picker__label{font-family:var(–font-mono) !important; font-size:.85rem; color:rgba(255,255,255,.5);}
#color-label{color:var(–punch); font-weight:500;}

/* —- Orbit color picker —- */
.orbit{position:relative; z-index:1; width:100%; max-width:300px; aspect-ratio:1; margin:0 auto;}
.orbit__track{position:absolute; inset:10%; border:1px dashed var(–block-soft); border-radius:50%;}
.orbit__indicator{
position:absolute; top:50%; left:50%; width:14px; height:14px; border-radius:50%; margin:-7px;
background:var(–product-color);
box-shadow:0 0 0 6px var(–product-color-soft), 0 0 22px var(–product-color);
transform:rotate(var(–active-angle,0deg)) translateY(-120px);
transition:transform .7s var(–ease), background .5s var(–ease), box-shadow .5s var(–ease);
z-index:2;
}
.orbit__product{position:absolute; inset:16%; z-index:1;}
.orbit__swatches{position:absolute; inset:0;}
.orbit__swatch{
position:absolute; top:50%; left:50%; width:38px; height:38px; border-radius:50%;
margin:-19px; padding:0; cursor:pointer; background:var(–sw-color);
border:3px solid var(–block-bg);
box-shadow:0 4px 14px rgba(0,0,0,.4);
transform:rotate(var(–angle)) translateY(-120px) rotate(calc(-1 * var(–angle)));
transition:transform .3s var(–ease), box-shadow .3s var(–ease);
z-index:3;
}
.orbit__swatch:hover{transform:rotate(var(–angle)) translateY(-120px) rotate(calc(-1 * var(–angle))) scale(1.12);}
.orbit__swatch.is-active{
box-shadow:0 0 0 3px var(–block-bg), 0 0 0 6px var(–sw-color), 0 6px 18px rgba(0,0,0,.45);
transform:rotate(var(–angle)) translateY(-120px) rotate(calc(-1 * var(–angle))) scale(1.18);
}
.orbit__readout{position:relative; z-index:1; text-align:center; display:flex; flex-direction:column; gap:.3rem;}
.orbit__readout .eyebrow{justify-content:center; color:rgba(255,255,255,.45);}
.orbit__readout .eyebrow::before{background:rgba(255,255,255,.28);}
.orbit__readout strong{font-family:var(–font-display) !important; font-size:1.2rem; color:var(–block-ink);}

.picker__cta{
position:relative; z-index:1;
border-top:1px solid var(–block-soft); padding-top:1.4rem;
display:flex; flex-direction:column; gap:1rem;
}
.picker__price{display:flex; align-items:baseline; gap:.6rem; color:var(–block-ink); flex-wrap:wrap;}
.picker__price .now{font-family:var(–font-mono) !important; font-size:1.9rem; font-weight:600; white-space:nowrap;}
.picker__price .unit{color:rgba(255,255,255,.5); font-size:.9rem;}
.picker__bundle{
display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
background:var(–block-soft); border-radius:var(–radius-md);
padding:.75rem .95rem;
}
.picker__bundle-icon{
width:32px; height:32px; border-radius:50%; background:var(–punch); color:var(–punch-ink);
display:flex; align-items:center; justify-content:center; flex:none;
}
.picker__bundle-icon svg{width:15px; height:15px;}
.picker__bundle-text{font-size:.88rem; color:rgba(255,255,255,.8); line-height:1.4;}
.picker__bundle-text b{color:var(–block-ink); font-family:var(–font-mono) !important;}
.picker .btn{width:100%; justify-content:center;}
.picker .btn–ghost{border-color:var(–block-soft); color:var(–block-ink);}
.picker .btn–ghost:hover{border-color:rgba(255,255,255,.45);}

@media (max-width:900px){
.toolkit__top{grid-template-columns:minmax(0,1fr);}
}

/* ============ FAQ ============ */
.faq{padding-block:var(–sec-pad); border-top:1px solid var(–stone);}
.faq__list{display:flex; flex-direction:column; gap:.8rem; max-width:48rem;}
.faq__item{
border:1px solid var(–stone); border-radius:var(–radius-md);
background:var(–surface); overflow:hidden;
}
.faq__item summary{
cursor:pointer; list-style:none;
display:flex; justify-content:space-between; align-items:center; gap:1rem;
padding:1.2rem 1.4rem; font-family:var(–font-display) !important; font-weight:600; font-size:1rem;
}
.faq__item summary::-webkit-details-marker{display:none;}
.faq__item summary .chev{
width:20px; height:20px; flex:none; color:var(–ink-soft);
transition:transform .3s var(–ease);
}
.faq__item[open] summary .chev{transform:rotate(180deg); color:var(–accent);}
.faq__item p{
padding:0 1.4rem 1.3rem; color:var(–ink-soft); font-size:.95rem; max-width:40rem;
}

/* ============ DISTRIBUTOR ============ */
.distributor{padding-block:var(–sec-pad);}
.dist__card{
background:linear-gradient(135deg, var(–block-bg), color-mix(in srgb, var(–block-bg) 78%, var(–punch) 22%));
color:#fff;
border-radius:var(–radius-lg);
padding:clamp(2.2rem,5vw,4rem);
display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:2rem;
}
.dist__card h2{font-size:clamp(1.6rem,3vw,2.4rem); color:#fff; max-width:28rem;}
.dist__card p{margin-top:.9rem; color:rgba(255,255,255,.7); max-width:30rem; font-size:.98rem;}
.dist__card .btn–punch{flex:none;}

/* ============ FOOTER ============ */
footer{border-top:1px solid var(–stone); padding-block:clamp(3rem,6vw,5rem); background:var(–surface-2);}
.footer__grid{
display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr); gap:2.5rem;
}
.footer__brand p{margin-top:1rem; color:var(–ink-soft); font-size:.9rem; max-width:22rem;}
footer h4{font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:var(–ink-faint); margin-bottom:1.1rem; font-family:var(–font-mono) !important; font-weight:500;}
footer ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.7rem;}
footer a{text-decoration:none; color:var(–ink-soft); font-size:.92rem; transition:color .2s;}
footer a:hover{color:var(–accent);}
.footer__note{font-size:.78rem; color:var(–ink-faint);}
.newsletter{display:flex; gap:.5rem; margin-top:.4rem;}
.newsletter input{
flex:1; min-width:0; padding:.7rem .9rem; border-radius:var(–radius-sm);
border:1px solid var(–stone-strong); background:var(–surface); color:var(–ink); font-family:var(–font-body) !important;
}
.footer__bottom{
margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(–stone);
display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
font-size:.82rem; color:var(–ink-faint);
}
.social{display:flex; gap:.6rem;}
@media (max-width:900px){ .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .footer__grid{grid-template-columns:minmax(0,1fr);} }

@media (max-width:860px){
.hero__grid{grid-template-columns:minmax(0,1fr);}
.hero__media{order:-1;}
}

/* ============ LEGAL MODALS ============ */
.legal-modal{
display:none; position:fixed; inset:0; z-index:9999;
background:rgba(0,0,0,.75); backdrop-filter:blur(6px);
overflow-y:auto; padding:2rem 1rem;
}
.legal-modal.is-open{ display:flex; align-items:flex-start; justify-content:center; }
.legal-modal__inner{
position:relative; width:100%; max-width:780px; margin:auto;
background:#0D1014; border-radius:var(–radius-lg);
border:1px solid rgba(255,255,255,.1);
box-shadow:0 0 80px rgba(0,194,176,.12), 0 0 120px rgba(204,158,53,.06);
padding:clamp(2rem,5vw,4rem);
color:#F7F6F2;
}
.legal-modal__close{
position:absolute; top:1.2rem; right:1.2rem;
background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
border-radius:50%; width:40px; height:40px; cursor:pointer;
font-size:1.2rem; color:#F7F6F2; display:flex; align-items:center; justify-content:center;
transition:background .2s; line-height:1;
}
.legal-modal__close:hover{ background:rgba(255,255,255,.15); }
.legal-modal__glow{
position:absolute; inset:-40px; border-radius:inherit;
background:radial-gradient(ellipse at 50% 0%, rgba(204,158,53,.09) 0%, transparent 70%);
pointer-events:none; z-index:-1;
}
.legal-modal h1{ font-size:clamp(1.5rem,3vw,2rem); margin-bottom:2rem; color:#F7F6F2; }
.legal-modal h2{ font-size:1.0rem; margin-top:2rem; margin-bottom:.6rem; color:var(–accent); font-family:var(–font-mono) !important; text-transform:uppercase; letter-spacing:.08em; }
.legal-modal p, .legal-modal li{ font-size:.95rem; line-height:1.75; color:rgba(247,246,242,.75); margin-bottom:.5rem; }
.legal-modal ul, .legal-modal ol{ padding-left:1.3rem; margin-bottom:1rem; }
.legal-modal a{ color:var(–accent); text-decoration:underline; }
.legal-modal strong{ color:#F7F6F2; font-weight:600; }

/* ============ INSTAGRAM SECTION ============ */
.ig-section{
padding-block:var(–sec-pad);
background:var(–block-bg);
}
.ig-head{
text-align:center;
max-width:42rem;
margin:0 auto clamp(2.5rem,5vw,4rem);
}
.ig-head h2{
font-size:clamp(1.8rem,3.2vw,2.6rem);
color:var(–block-ink);
margin-bottom:.75rem;
}
.ig-head p{
font-size:1.02rem;
line-height:1.72;
color:rgba(247,246,242,.60);
}
.ig-handle{
display:inline-flex;
align-items:center;
gap:.45rem;
margin-top:1.25rem;
font-family:var(–font-mono) !important;
font-size:.82rem;
letter-spacing:.06em;
color:var(–accent);
text-decoration:none;
transition:color .25s;
}
.ig-handle:hover{ color:var(–gold-light); }
.ig-handle svg{ flex:none; }

/* GRID */
.ig-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:.85rem;
margin-bottom:clamp(2.5rem,5vw,3.5rem);
}
@media(max-width:680px){
.ig-grid{grid-template-columns:repeat(2,1fr);}
}

/* TILE */
.ig-tile{
position:relative;
aspect-ratio:1/1; /* zdjęcia z Behold SĄ kwadratowe (potwierdzone: squareLarge, 1000×1000) — kafelek musi być kwadratowy, żeby „zmieść całość” nie dokładało własnego przycięcia */
border-radius:var(–radius-md);
overflow:hidden;
display:block;
text-decoration:none;
}
.ig-tile__bg{
position:absolute;
inset:0;
transition:transform .65s cubic-bezier(.22,.68,0,1.15);
}
.ig-tile:hover .ig-tile__bg{ transform:scale(1.07); }

/* 6 distinct brand-toned gradient images */
.ig-tile:nth-child(1) .ig-tile__bg{
background:
radial-gradient(ellipse 85% 75% at 38% 78%, rgba(204,158,53,.58) 0%, transparent 58%),
radial-gradient(ellipse 45% 40% at 88% 14%, rgba(168,120,40,.32) 0%, transparent 52%),
#110e06;
}
.ig-tile:nth-child(2) .ig-tile__bg{
background:
radial-gradient(ellipse 65% 55% at 18% 22%, rgba(195,145,48,.44) 0%, transparent 58%),
radial-gradient(ellipse 55% 50% at 82% 82%, rgba(204,158,53,.38) 0%, transparent 52%),
#090e0a;
}
.ig-tile:nth-child(3) .ig-tile__bg{
background:
linear-gradient(128deg, rgba(204,158,53,.52) 0%, transparent 50%),
radial-gradient(ellipse 55% 55% at 82% 82%, rgba(180,130,40,.32) 0%, transparent 60%),
#0e0b07;
}
.ig-tile:nth-child(4) .ig-tile__bg{
background:
radial-gradient(ellipse 90% 55% at 50% 0%, rgba(204,152,50,.52) 0%, transparent 60%),
radial-gradient(ellipse 42% 42% at 12% 92%, rgba(160,115,35,.22) 0%, transparent 52%),
#0b0d0c;
}
.ig-tile:nth-child(5) .ig-tile__bg{
background:
radial-gradient(ellipse 55% 55% at 50% 50%, rgba(204,158,53,.44) 0%, transparent 68%),
radial-gradient(ellipse 28% 28% at 92% 8%, rgba(180,130,40,.22) 0%, transparent 52%),
#0d0b07;
}
.ig-tile:nth-child(6) .ig-tile__bg{
background:
radial-gradient(circle 10px at 22% 28%, rgba(204,158,53,.72) 0%, transparent 100%),
radial-gradient(circle 14px at 68% 18%, rgba(204,158,53,.55) 0%, transparent 100%),
radial-gradient(circle 8px at 82% 68%, rgba(204,158,53,.62) 0%, transparent 100%),
radial-gradient(circle 12px at 32% 78%, rgba(204,158,53,.45) 0%, transparent 100%),
radial-gradient(circle 18px at 52% 52%, rgba(204,158,53,.28) 0%, transparent 100%),
radial-gradient(ellipse 70% 70% at 68% 82%, rgba(168,120,40,.32) 0%, transparent 62%),
#070a0d;
}

/* reveal stagger */
.ig-tile:nth-child(1){ transition-delay:.05s; }
.ig-tile:nth-child(2){ transition-delay:.10s; }
.ig-tile:nth-child(3){ transition-delay:.15s; }
.ig-tile:nth-child(4){ transition-delay:.20s; }
.ig-tile:nth-child(5){ transition-delay:.25s; }
.ig-tile:nth-child(6){ transition-delay:.30s; }

/* HOVER OVERLAY */
.ig-tile__overlay{
position:absolute;
inset:0;
background:transparent;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:.55rem;
transition:background .32s var(–ease), box-shadow .32s var(–ease);
border-radius:var(–radius-md);
}
.ig-tile:hover .ig-tile__overlay{
background:rgba(13,16,20,.54);
box-shadow:inset 0 0 0 2px rgba(204,158,53,.42),
inset 0 0 24px rgba(204,158,53,.08);
}
.ig-tile__icon,
.ig-tile__label{
opacity:0;
transform:translateY(9px);
pointer-events:none;
transition:opacity .28s var(–ease), transform .28s var(–ease);
}
.ig-tile__icon{ color:#fff; transition-delay:.04s; }
.ig-tile__label{
font-family:var(–font-mono) !important;
font-size:.68rem;
letter-spacing:.12em;
text-transform:uppercase;
color:rgba(247,246,242,.75);
transition-delay:.09s;
}
.ig-tile:hover .ig-tile__icon,
.ig-tile:hover .ig-tile__label{
opacity:1;
transform:translateY(0);
}

/* CTA */
.ig-cta{ text-align:center; }
.btn–ig{
display:inline-flex;
align-items:center;
gap:.6rem;
background:transparent;
border:1.5px solid rgba(204,158,53,.45);
color:var(–accent);
font-family:var(–font-mono) !important;
font-size:.80rem;
letter-spacing:.08em;
text-transform:uppercase;
text-decoration:none;
padding:.9rem 2rem;
border-radius:var(–radius-sm);
transition:border-color .25s, color .25s, background .25s, transform .25s var(–ease);
}
.btn–ig:hover{
border-color:var(–accent);
color:var(–accent-ink);
background:var(–accent);
transform:translateY(-2px);
}
.btn–ig svg{ flex:none; }

/* —- LIVE INSTAGRAM (realne posty) —- */
/* Kafelek z realnym zdjęciem: tło ustawiane inline przez JS.
Gradienty z nth-child zostają jako placeholder/fallback, gdy feed nie działa. */
.ig-tile–live .ig-tile__bg{
background-color:var(–block-bg) !important; /* wypełnia ewentualne puste pasy przy zdjęciu */
background-image:var(–ig-live-img) !important; /* JS ustawia tę zmienną — wygrywa z gradientową zaślepką poniżej */
background-size:cover !important; /* wypełnij kwadratowy kafelek całkowicie — akceptujemy drobne przycięcie tam, gdzie zdjęcie nie jest idealnie kwadratowe. !important nadal potrzebne: reguły gradientowych zaślepek (nth-child) mają wyższą specyficzność i inaczej po cichu nadpiszą to ustawienie */
background-position:center 65% !important; /* lekko w dół — w kadrach „od tyłu głowy” ważna treść zwykle jest niżej niż geometryczny środek zdjęcia */
background-repeat:no-repeat !important;
opacity:0;
transition:opacity .6s var(–ease), transform .65s cubic-bezier(.22,.68,0,1.15);
}
.ig-tile–live.is-loaded .ig-tile__bg{ opacity:1; }
.ig-tile–live:hover .ig-tile__bg{ transform:none !important; } /* bez powiększania na hover — kłóciłoby się z „zmieść całość” */
/* delikatny licznik / data w rogu kafelka (opcjonalnie wypełniane przez JS) */
.ig-tile__meta{
position:absolute;
left:.55rem; bottom:.55rem;
display:none;
align-items:center;
gap:.35rem;
font-family:var(–font-mono) !important;
font-size:.62rem;
letter-spacing:.04em;
color:#fff;
background:rgba(13,16,20,.55);
padding:.22rem .5rem;
border-radius:999px;
z-index:2;
pointer-events:none;
opacity:0;
transform:translateY(4px);
transition:opacity .3s var(–ease), transform .3s var(–ease);
}
.ig-tile–live .ig-tile__meta{ display:inline-flex; }
.ig-tile–live.is-loaded:hover .ig-tile__meta{ opacity:1; transform:translateY(0); }
/* Na ekranach dotykowych nie ma stanu :hover — licznik polubień pokazujemy
więc od razu, zamiast czekać na najechanie, którego tam nie będzie. */
@media (hover: none){
.ig-tile–live .ig-tile__meta{ opacity:1; transform:translateY(0); }
}
.ig-tile__meta svg{ width:11px; height:11px; }

Twoja dawka uwagi

0,0 g

Aplikator DS · Kolekcja 2026

Uwolnij swoją kreatywność.

Pracuj szybciej, czyściej i z pełną kontrolą.
DS APLI to precyzyjny aplikator do farb Goldwell — odmierza od 0,1 g, dla fryzjerów i stylistów, którzy nie idą na kompromisy w pracy z kolorem.

Aplikator DS APLI40,00 zł



Pakiet 3 szt. — 99 zł
Darmowa wysyłka

Zamawiam
Zobacz aplikator w akcji

Zamów do 14:00 — dostawa już jutro
00:00:00