:root{
  --bg:#FAFAF9; --card:#FFFFFF; --ink:#131318; --muted:#6B7280; --line:#E7E7E9;
  --music:#4C1D95; --music-bg:#E9D5FF;
  --dive:#0C4A6E; --dive-bg:#E0F2FE;
  --diverse:#3F6212; --diverse-bg:#ECFCCB;
  --radius:16px; --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif; line-height:1.6;
}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif; letter-spacing:-.02em; line-height:1.15; margin:0 0 .5rem}
p{margin:0 0 1rem}
a{color:inherit}
.wrap{max-width:var(--max); margin:0 auto; padding:0 20px}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
section[id="demo"],main[id="demo"]{scroll-margin-top:76px}
#kontakt{scroll-margin-top:76px}
/* topbar */
.topbar{position:sticky; top:0; z-index:50; background:rgba(250,250,249,.92); backdrop-filter:saturate(1.2); border-bottom:1px solid var(--line)}
.topbar-in{display:flex; align-items:center; justify-content:space-between; height:60px}
.logo{font-family:Georgia,serif; font-weight:700; font-size:1.25rem; text-decoration:none}
.logo span{color:var(--muted); font-weight:400}
/* buttons */
.btn{display:inline-block; padding:.7rem 1.2rem; border-radius:999px; text-decoration:none; font-weight:600; border:1px solid var(--ink); transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease; cursor:pointer}
.btn:active{transform:scale(.97)}
.btn-dark{background:#111; color:#fff; border-color:#111}
.btn-ghost{background:#fff; color:var(--ink)}
.btn:hover{transform:translateY(-1px)}
.btn-small{padding:.5rem .9rem; font-size:.9rem}
/* hero */
.hero{text-align:center; padding:96px 0 0; position:relative; overflow:hidden}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(#d8d8dc 1px, transparent 1px);
  background-size:22px 22px; opacity:.5;
  mask-image:linear-gradient(to bottom, black 55%, transparent 100%);
}
.hero h1{font-size:clamp(2.4rem,6vw,4rem); max-width:16ch; margin:0 auto .75rem}
.hero p.sub{color:var(--muted); font-size:1.15rem; max-width:620px; margin:0 auto 1.8rem}
.hero-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; position:relative}
.hero-wave{display:block; width:calc(100% + 24px); height:70px; margin:56px 0 0 -12px; animation:wavedrift 9s ease-in-out infinite alternate}
@keyframes wavedrift{from{transform:translateX(-9px)}to{transform:translateX(9px)}}
.subhero-art{animation:floaty 6s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.usp{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:44px 0 8px; text-align:left}
.usp div{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; display:flex; gap:12px; align-items:center; box-shadow:0 1px 2px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.06)}
.usp svg{flex:0 0 28px; color:var(--ink)}
.usp strong{font-weight:650; display:block}
.usp em{font-style:normal; color:var(--muted); font-size:.9rem; line-height:1.4; display:block}
/* grid */
.section-title{margin:64px 0 6px; font-size:2rem}
.section-title:first-child{margin-top:8px}
.section-sub{color:var(--muted); margin-bottom:22px; font-size:1.02rem}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  text-decoration:none; display:flex; flex-direction:column;
  box-shadow:0 1px 2px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.06);
  transition:transform .18s ease, box-shadow .18s ease;
}
.js .card{opacity:0; transform:translateY(16px)}
.js .card.visible{opacity:1; transform:none}
.card:hover{transform:translateY(-4px); box-shadow:0 2px 4px rgba(0,0,0,.06),0 16px 36px rgba(0,0,0,.1)}
.card:focus-visible{transform:translateY(-4px)}
.card-photo{aspect-ratio:16/10; overflow:hidden; border-bottom:1px solid var(--line); background:#e9e9ec}
.card-photo img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.92) contrast(1.02); transition:transform .6s cubic-bezier(.22,.61,.36,1), filter .4s ease}
.card:hover .card-photo img,.card:focus-visible .card-photo img{transform:scale(1.06); filter:none}
.photo-credits{font-size:.78rem; color:var(--muted); padding-top:12px}
.card-accent{height:4px}
.card-accent.music{background:var(--music)} .card-accent.dive{background:var(--dive)} .card-accent.diverse{background:var(--diverse)}
.card-body{padding:18px 18px 20px; display:flex; flex-direction:column; gap:8px; flex:1}
.tag{align-self:flex-start; font-size:.72rem; letter-spacing:.08em; font-weight:700; padding:.25rem .6rem; border-radius:999px; border:1px solid var(--line); color:var(--muted)}
.tag.music{background:var(--music-bg); color:var(--music); border-color:transparent}
.tag.dive{background:var(--dive-bg); color:var(--dive); border-color:transparent}
.tag.diverse{background:var(--diverse-bg); color:var(--diverse); border-color:transparent}
.card-body h3{font-size:1.3rem; margin:0}
.card-body p{color:var(--muted); font-size:.95rem; flex:1; margin:0}
.more{font-weight:700; font-size:.95rem; margin-top:2px; transition:color .15s ease}
.card.music:hover .more,.card.music:focus-visible .more{color:var(--music)}
.card.dive:hover .more,.card.dive:focus-visible .more{color:var(--dive)}
.card.diverse:hover .more,.card.diverse:focus-visible .more{color:var(--diverse)}
/* meanings */
.meanings{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:16px}
.meaning{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:0 1px 2px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.06)}
.meaning .num{font-family:Georgia,serif; font-size:2.1rem; color:var(--muted); line-height:1; margin-bottom:.5rem}
.meaning h3{font-size:1.15rem}
.meaning p{font-size:.95rem; color:var(--muted); margin:0}
/* contact */
.contact{background:#111; color:#fff; border-radius:22px; padding:52px 28px; margin:72px 0 56px; text-align:center; position:relative; overflow:hidden}
.contact::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
  background-size:20px 20px;
  mask-image:linear-gradient(to bottom, black, transparent 85%);
}
.contact > *{position:relative}
.contact h2{font-size:2rem}
.contact p{color:#c9c9cf; max-width:560px; margin:0 auto 1.2rem}
.contact .btn-dark{background:#fff; color:#111; border-color:#fff}
.contact .btn-ghost{background:transparent; color:#fff; border-color:#555}
footer{border-top:1px solid var(--line); padding:22px 0 40px; color:var(--muted); font-size:.9rem}
footer .wrap{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
:focus-visible{outline:2px solid #111; outline-offset:2px}
.gauge span,[data-count],.stat-n,.amount,.scoreboard strong,.slider-scale{font-variant-numeric:tabular-nums}
/* reveal – animowane tylko gdy JS działa, inaczej treść jest widoczna od razu */
.js .reveal{opacity:0; transform:translateY(22px); transition:opacity .65s cubic-bezier(.22,.61,.36,1), transform .65s cubic-bezier(.22,.61,.36,1)}
.js .reveal.visible{opacity:1; transform:none}
/* wejscie hero przy ladowaniu: kaskada rise, bez JS tresci widoczne od razu */
.js .hero h1,.js .hero .sub,.js .hero-cta,.js .subhero-in>div:first-child>*{animation:rise .7s cubic-bezier(.22,.61,.36,1) both}
.js .hero .sub,.js .subhero-in>div:first-child>*:nth-child(2){animation-delay:.07s}
.js .hero-cta,.js .subhero-in>div:first-child>*:nth-child(3){animation-delay:.14s}
.js .subhero-in>div:first-child>*:nth-child(4){animation-delay:.21s}
@keyframes rise{from{opacity:0; transform:translateY(22px)}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal,.js .card{opacity:1; transform:none; transition:none}
  .card:hover{transform:none}
}
@media(max-width:900px){.grid,.meanings,.usp{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.grid,.meanings,.usp{grid-template-columns:1fr}.hero{padding-top:52px}}

/* --- podstrony --- */
.muted{color:var(--muted)}
.subhero{background:var(--bg); padding:40px 0 0; overflow:hidden}
.subhero-in{display:flex; gap:24px; align-items:center; justify-content:space-between}
.subhero h1{font-size:clamp(2rem,5vw,3rem)}
.subhero .sub{color:var(--muted); font-size:1.05rem}
.subhero-art{display:flex; flex-direction:column; align-items:center; gap:14px}
.eq{display:flex; gap:4px; align-items:flex-end; height:36px}
.eq span{width:5px; height:20%; background:#c9c2d8; border-radius:2px}
.eq.live span{animation:eq .7s ease-in-out infinite alternate}
.eq.live span:nth-child(2n){animation-duration:.55s}
.eq.live span:nth-child(3n){animation-duration:.9s}
.eq.live span:nth-child(3n+1){animation-delay:.12s}
.eq.live span:nth-child(3n+2){animation-delay:.28s}
.eq.live span:nth-child(4n){animation-duration:.48s}
.eq.live span{background:var(--music)}
@keyframes eq{from{height:15%}to{height:100%}}
.demo-card{background:var(--card); border:1px solid var(--line); border-radius:20px; padding:28px; margin-top:18px; box-shadow:0 1px 2px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.06)}
.demo-row{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.demo-row h2{font-size:1.3rem}
.chip{font-family:Georgia,serif; font-size:1.5rem; text-align:center; border:1px dashed var(--line); border-radius:14px; padding:18px; margin:14px 0 26px; background:var(--bg); transition:transform .15s ease}
.chip.pop{transform:scale(.96)}
.timer-row{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 0; margin-bottom:22px}
.timer{display:flex; align-items:center}
.fighters{display:flex; gap:16px; align-items:stretch; margin:14px 0}
.fighter{flex:1; border:1px solid var(--line); border-radius:var(--radius); padding:20px; text-align:center; background:var(--bg)}
.avatar{width:56px; height:56px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; margin-bottom:8px}
.avatar.music-bg{background:var(--music-bg); color:var(--music)}
.vs{align-self:center; font-family:Georgia,serif; font-size:1.4rem; border:1px solid var(--line); border-radius:50%; width:56px; height:56px; display:flex; align-items:center; justify-content:center; background:#fff; flex:0 0 56px}
.vote-track{height:14px; border-radius:999px; background:var(--line); overflow:hidden; margin-top:14px}
.vote-a{height:100%; background:var(--music); width:50%; transition:width .4s ease}
.rows{border:1px solid var(--line); border-radius:var(--radius); background:#fff; overflow:hidden}
.row{display:flex; gap:12px; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.row:last-child{border-bottom:0}
.salesbox{border:1px solid var(--line); border-radius:20px; padding:28px; margin:40px 0; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.06)}
.salesbox ul{margin:0 0 1rem 1.1rem; padding:0}
.stickybar{display:none}
@media(max-width:700px){
  .subhero-in{flex-direction:column; text-align:center}
  .fighters{flex-direction:column}
  .vs{align-self:center}
  .stickybar{display:flex; position:sticky; bottom:0; z-index:40; background:#fff; border-top:1px solid var(--line); padding:10px 16px; align-items:center; justify-content:space-between; gap:10px}
}
@media (prefers-reduced-motion:reduce){.eq.live span{animation:none}}
/* 02 wers-vs-wers */
.versus-wrap{display:flex; gap:16px; align-items:stretch; margin:14px 0}
.verse-col{flex:1; border:1px solid var(--line); border-radius:var(--radius); padding:20px; background:var(--bg); text-align:center; transition:opacity .25s ease, transform .25s ease}
.verse-col.swap{opacity:0; transform:translateY(8px)}
.verse{font-family:Georgia,serif; font-size:1.05rem; line-height:1.9; white-space:pre-line; margin:12px 0 16px}
@media(max-width:700px){.versus-wrap{flex-direction:column}}
/* 03 quiz */
@keyframes spin{to{transform:rotate(360deg)}}
/* sheen: statyczny refleks nad krecacym sie winylem (obrot kreceniem JS z bezwladnoscia) */
.p-quiz .deck::after{content:""; position:absolute; inset:0; border-radius:50%; background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,0) 42%); pointer-events:none}
.player{display:flex; gap:20px; align-items:center; flex-wrap:wrap; margin-bottom:18px}
.player-info{flex:1; min-width:240px}
.player-info h2{font-size:1.4rem}
.progress{height:8px; border-radius:999px; background:var(--line); overflow:hidden; margin:10px 0 14px}
.progress-fill{height:100%; width:0%; background:var(--music); transition:width .2s linear}
.answers{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.ans{padding:.9rem 1rem}
.ans.ok{border-color:#15803d; background:#dcfce7; color:#14532d}
.ans.err{border-color:#b91c1c; background:#fee2e2; color:#7f1d1d}
.ans:disabled{opacity:.85; cursor:default}
@media(max-width:600px){.answers{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.vinyl.spin{animation:none}}
/* 04 wersja-vs-wersja */
.versions{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:16px 0 20px}
.version{border:1px solid var(--line); border-radius:var(--radius); padding:18px; background:var(--bg); text-align:center}
.version h3{margin:.6rem 0 .2rem}
.wave{width:100%; height:60px; background:#fff; border:1px solid var(--line); border-radius:10px}
.wave.playing path{stroke-dasharray:6 4; animation:dash 1s linear infinite}
@keyframes dash{to{stroke-dashoffset:-20}}
.stacked{display:flex; border-radius:999px; overflow:hidden; border:1px solid var(--line); font-size:.8rem; font-weight:700}
.blind-reveal{border-top:1px solid var(--line); margin-top:18px; padding-top:16px}
.blind-btns{display:flex; gap:8px; flex-wrap:wrap}
.seg{padding:.5rem .6rem; white-space:nowrap; overflow:hidden; transition:width .4s ease}
.s-orig{background:var(--music); color:#fff}
.s-ai{background:var(--music-bg); color:var(--music)}
.s-slow{background:#e2e8f0; color:#334155}
@media(max-width:700px){.versions{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.wave.playing path{animation:none}}
/* 05 dive-club */
.bubbles{position:relative}
.bubble{position:absolute; border:1.5px solid #7dd3fc; border-radius:50%; opacity:.7; animation:bubbleRise 4s ease-in infinite}
.b1{width:8px;height:8px;left:20%;bottom:0}
.b2{width:12px;height:12px;left:40%;bottom:0;animation-delay:1s}
.b3{width:6px;height:6px;left:60%;bottom:0;animation-delay:.5s}
.b4{width:14px;height:14px;left:75%;bottom:0;animation-delay:2s}
.b5{width:9px;height:9px;left:30%;bottom:0;animation-delay:3s}
.b6{width:7px;height:7px;left:55%;bottom:0;animation-delay:2.5s}
@keyframes bubbleRise{from{transform:translateY(0);opacity:0}20%{opacity:.7}to{transform:translateY(-110px);opacity:0}}
.bubbles span:nth-of-type(odd){animation-name:riseB}
@keyframes riseB{from{transform:translateY(0);translate:0 0;opacity:0}25%{opacity:.7}50%{translate:9px 0}to{transform:translateY(-110px);translate:-5px 0;opacity:0}}
.pricing{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.price{border:1px solid var(--line); border-radius:var(--radius); background:#fff; padding:22px; text-align:center; box-shadow:0 1px 2px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.06)}
.price.featured{border:2px solid #111}
.price .amount{font-family:Georgia,serif; font-size:1.8rem; margin:.4rem 0}
.avatar.dive-bg{background:var(--dive-bg); color:var(--dive); width:56px; height:56px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700}
.inline-form{display:flex; gap:10px; flex-wrap:wrap}
.inline-form input{flex:1; min-width:200px; padding:.7rem 1rem; border:1px solid var(--line); border-radius:999px; font:inherit}
@media(max-width:700px){.pricing{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.bubble{animation:none; display:none}}
/* 06 logbook */
.profile{display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin-bottom:18px}
.avatar.big{width:64px; height:64px; font-size:1.2rem}
.goal{flex:1; min-width:220px}
.dive-fill{background:var(--dive)}
.stats3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.stat{border:1px solid var(--line); border-radius:var(--radius); background:var(--bg); padding:16px; text-align:center}
.stat-n{font-family:Georgia,serif; font-size:1.7rem; display:block}
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:#fff}
.dive-table{width:100%; border-collapse:collapse; font-size:.95rem}
.dive-table th,.dive-table td{padding:12px 14px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap}
.dive-table thead th{background:var(--bg); font-size:.8rem; letter-spacing:.06em; color:var(--muted)}
.dive-table tbody tr:nth-child(even){background:#fafafa}
.dive-table tbody tr:last-child td{border-bottom:0}
@media(max-width:700px){.stats3{grid-template-columns:1fr}}
/* 07 mapa */
.filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.pill{border:1px solid var(--line); background:#fff; border-radius:999px; padding:.45rem 1rem; font:inherit; font-size:.9rem; cursor:pointer}
.pill.on{background:#111; color:#fff; border-color:#111}
.spots{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:8px}
.spot{border:1px solid var(--line); background:#fff; border-radius:var(--radius); padding:14px 16px; text-align:left; font:inherit; cursor:pointer; display:flex; flex-direction:column; gap:2px; box-shadow:0 1px 2px rgba(0,0,0,.05)}
.spot.on{border:2px solid #111}
.spot.hidden{display:none}
.depth-zone{background:#DCEEF9; margin:28px 0 0}
.depth-sticky{background:transparent; border:0; border-radius:0; padding:56px 0 64px; color:var(--ink); transition:color .45s ease}
.depth-sticky.deep{color:#eef4fa}
.depth-sticky.deep .muted{color:#94a3b8}
.depth-head{display:flex; gap:18px; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; margin-bottom:10px}
.gauges{display:flex; gap:10px; flex-wrap:wrap}
.gauge{border:0; background:none; padding:0 20px 0 0; text-align:left}
.gauge + .gauge{border-left:1px solid color-mix(in srgb, currentColor 22%, transparent); padding-left:20px}
.gauge span{font-family:Georgia,serif; font-size:1.5rem; display:block; line-height:1.1}
.gauge label{font-size:.7rem; color:var(--muted); letter-spacing:.08em; text-transform:uppercase}
.slider-label{display:block; margin:14px 0 6px}
.slider-rail{position:relative; padding:6px 0}
#depthSlider{display:block; width:100%; height:28px; margin:0; cursor:pointer; -webkit-appearance:none; appearance:none; background:transparent}
#depthSlider::-webkit-slider-runnable-track{height:14px; border-radius:999px; border:1px solid color-mix(in srgb, currentColor 30%, transparent); background:linear-gradient(90deg,#DCEEF9,#8FBDDD 30%,#0E5A86 65%,#020617)}
#depthSlider::-webkit-slider-thumb{-webkit-appearance:none; width:0; height:0; border:0; background:transparent; box-shadow:none}
#depthSlider::-moz-range-track{height:14px; border-radius:999px; border:1px solid color-mix(in srgb, currentColor 30%, transparent); background:linear-gradient(90deg,#DCEEF9,#8FBDDD 30%,#0E5A86 65%,#020617)}
#depthSlider::-moz-range-thumb{width:0; height:0; border:0; background:transparent; box-shadow:none}
#depthSlider:focus-visible{outline:2px solid currentColor; outline-offset:4px; border-radius:999px}
#sliderMark{position:absolute; top:2px; bottom:2px; left:0; width:3px; margin-left:-1.5px; border-radius:2px; background:#fff; border:1px solid rgba(0,0,0,.4); box-shadow:0 1px 2px rgba(0,0,0,.35); pointer-events:none}
.slider-scale{display:flex; justify-content:space-between; color:var(--muted); font-size:.8rem; margin-top:-4px}
.depth-body{display:grid; grid-template-columns:minmax(0, 1.8fr) minmax(260px, 1fr); gap:26px; align-items:start; margin-top:14px}
.depth-viewport{position:relative; width:100%; border-radius:14px; overflow:hidden; background:#070d18; box-shadow:0 20px 50px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08); line-height:0}
#depthCanvas{display:block; width:100%; height:auto; aspect-ratio:16/11; background:#070d18; border-radius:14px}
.viewport-hud{position:absolute; top:12px; left:14px; right:14px; display:flex; justify-content:space-between; align-items:center; pointer-events:none; font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.08em; z-index:2}
.hud-tag{background:rgba(8,18,32,.75); backdrop-filter:blur(6px); color:#7dd3fc; padding:4px 10px; border-radius:999px; border:1px solid rgba(125,211,252,.25)}
.hud-depth{background:rgba(8,18,32,.85); backdrop-filter:blur(6px); color:#f8fafc; font-weight:600; padding:4px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.2)}
.depth-side{display:flex; flex-direction:column; gap:16px; min-width:0}
.zone-legend{display:grid; gap:2px; margin-top:4px}
.zone{border:0; border-left:2px solid transparent; background:none; border-radius:0; padding:8px 0 8px 16px; font-size:.92rem; opacity:1; transition:opacity .3s ease, border-color .3s ease}
.zone span{display:block; color:var(--muted); font-size:.82rem; opacity:.95}
.zone:not(.on) strong{opacity:.65}
.zone.on{border-left-color:currentColor; opacity:1}
.spot-card{border:0; background:none; padding:0; position:sticky; top:80px}
.spot-card h3{font-size:1.6rem}
@media(min-width:721px){
  .depth-zone{height:200vh; position:relative}
  .depth-sticky{position:sticky; top:76px}
}
@media(max-width:860px){.depth-body{grid-template-columns:1fr}#depthCanvas{aspect-ratio:4/3}}
@media(max-width:720px){.spots{grid-template-columns:1fr}.spot-card{position:static}.js .depth-controls{position:sticky; top:60px; z-index:30; margin:0 -20px; padding:10px 20px 12px}.js .depth-controls h2{font-size:1.25rem}.js .depth-head{margin-bottom:2px}.js .depth-controls .gauge span{font-size:1.1rem}.js .depth-controls .gauge{padding-right:12px}.js .depth-controls .gauge + .gauge{padding-left:12px}.js .depth-controls .slider-label{margin:8px 0 2px}}
/* 08 jobs + 09 food */
.search{flex:1; min-width:220px; padding:.7rem 1rem; border:1px solid var(--line); border-radius:999px; font:inherit; background:#fff}
.offers{display:grid; gap:12px; margin-top:14px}
.offer{display:flex; gap:14px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; padding:16px; transition:opacity .2s ease, transform .2s ease}
.offer.hide{display:none}
.firm-logo{width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.2rem; flex:0 0 48px}
.firm-logo.div-bg{background:var(--diverse-bg); color:var(--diverse)}
.offer h3{margin:0 0 .2rem; font-size:1.1rem}
.ptag{display:inline-block; font-size:.75rem; background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:.15rem .6rem; margin:.15rem .15rem 0 0}
.ptag b{background:#FEF08A; border-radius:3px; padding:0 2px}
.dishes{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px}
.dish{border:1px solid var(--line); border-radius:var(--radius); background:#fff; padding:16px; display:flex; gap:12px; transition:opacity .2s ease, transform .2s ease}
.dish.hide{display:none}
.dish-thumb{width:52px; height:52px; border-radius:50%; background:var(--diverse-bg); color:var(--diverse); display:flex; align-items:center; justify-content:center; font-family:Georgia,serif; font-size:1.3rem; flex:0 0 52px}
.dish h3{margin:0 0 .2rem; font-size:1.05rem}
.hit{display:inline-block; font-size:.7rem; font-weight:700; background:#111; color:#fff; border-radius:999px; padding:.15rem .6rem; margin-left:.4rem}
.cartbar{display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-top:6px}
@media(max-width:700px){.dishes{grid-template-columns:1fr}.offer{flex-direction:column}}

/* === TOZSAMOSC STRON: wspolny szkielet, indywidualny charakter (body.p-*) === */
.p-freestyle .salesbox,.p-versus .salesbox,.p-quiz .salesbox,.p-studio .salesbox{border-left:5px solid var(--music)}
.p-diveclub .salesbox,.p-logbook .salesbox,.p-mapa .salesbox{border-left:5px solid var(--dive)}
.p-jobs .salesbox,.p-food .salesbox{border-left:5px solid var(--diverse)}

/* 01 FREESTYLE – arena noca */
.p-freestyle .subhero{background:#16121f; color:#f4f2fa}
.p-freestyle .subhero .sub{color:#b7b1c9}
.p-freestyle .subhero .tag{background:#2b2342; color:#d6c9ff; border-color:transparent}
.p-freestyle .subhero .btn-dark{background:#f4f2fa; color:#16121f; border-color:#f4f2fa}
.p-freestyle .subhero .btn-ghost{background:transparent; color:#fff; border-color:#4a4458}
.p-freestyle .subhero-art svg{stroke:#a78bfa}
.p-freestyle .eq span{background:#3d3654}
.p-freestyle .eq.live span{background:#a78bfa}
.p-freestyle .chip{background:#1e1830; border:1px dashed #6d5aa8; color:#f4f2fa}
.p-freestyle .scoreboard{background:#16121f; border-color:#16121f}
.p-freestyle .scoreboard .row{border-color:#2a2438; color:#e8e6f0}
.p-freestyle .scoreboard .muted{color:#a09ab2}
.p-freestyle .scoreboard strong{color:#fff}
.p-freestyle .fighter{transition:border-color .2s ease, transform .2s ease}
.p-freestyle .fighter:hover{border-color:var(--music)}
.p-freestyle .meaning.quote p:first-child::before{content:"\201C"; display:block; font-family:Georgia,serif; font-size:2.6rem; line-height:1; color:var(--music)}

/* 02 VERSUS – pojedynek, dwa obozy */
.p-versus .subhero{background:linear-gradient(100deg,#f3f0ff 0 50%,#fafaf9 50% 100%)}
.p-versus .verse-col:first-of-type{text-align:left; border-left:4px solid var(--music)}
.p-versus .verse-col:last-of-type{text-align:right; border-right:4px solid #c9c2d8}
.p-versus .vs{position:relative; background:#111; color:#fff; border-color:#111}
.p-versus .vs::after{content:""; position:absolute; inset:-9px; border:1.5px dashed #7c5cd6; border-radius:50%; animation:spin 16s linear infinite}
.p-versus .row strong{color:var(--music)}
@media(max-width:700px){.p-versus .verse-col:last-of-type{text-align:left; border-right:0; border-left:4px solid #c9c2d8}}

/* 03 QUIZ – konsola odsluchowa */
.p-quiz #vinylHero{animation:spin 9s linear infinite}
.p-quiz .demo-card{background:#141318; border-color:#141318; color:#f1f0f5}
.p-quiz .demo-card h2{color:#fff}
.p-quiz .demo-card .muted{color:#a7a3b5}
.p-quiz .deck{position:relative; flex:0 0 96px; width:96px; height:96px}
.p-quiz .tonearm{position:absolute; top:-8px; right:0; width:36px; height:56px; border-top:3px solid #8e8e96; border-right:3px solid #8e8e96; border-top-right-radius:22px; transform-origin:top right; transform:rotate(-20deg); transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.p-quiz .tonearm::after{content:""; position:absolute; right:-5px; bottom:-4px; width:8px; height:8px; border-radius:50%; background:#c9c9cf}
.p-quiz .tonearm.on{transform:rotate(10deg)}
.p-quiz .progress{background:#2c2b34}
.p-quiz .ans{background:#1e1d24; border-color:#3a3844; color:#fff}
.p-quiz .ans:hover{border-color:#7c5cd6}
.p-quiz .meaning .num{color:var(--music)}

/* 04 STUDIO – pulpit miksera */
.p-studio .subhero{background-color:#fafaf9; background-image:linear-gradient(#ebeaf0 1px,transparent 1px),linear-gradient(90deg,#ebeaf0 1px,transparent 1px); background-size:28px 28px}
.p-studio .subhero .tag{background:#111; color:#fff; border-color:#111; letter-spacing:.14em}
.p-studio .versions{counter-reset:ch}
.p-studio .version{position:relative; background:#17161c; border-color:#17161c; color:#eceaf2; padding-top:32px}
.p-studio .version::before{content:""; position:absolute; top:13px; left:50%; transform:translateX(-50%); width:9px; height:9px; border-radius:50%; background:#3a3844; transition:background-color .3s ease}
.p-studio .version:has(.wave.playing)::before{background:#4ade80}
.p-studio .version::after{counter-increment:ch; content:"CH-0" counter(ch); position:absolute; top:9px; left:12px; font-size:.7rem; letter-spacing:.12em; color:#8e8ea0}
.p-studio .version h3{color:#fff}
.p-studio .version .muted{color:#a7a3b5}
.p-studio .wave{background:#0c0b10; border-color:#2c2b34}
.p-studio .wave path{stroke:#a78bfa}
.p-studio .wvv-play{border-color:#3a3844; color:#fff; background:transparent}

/* 05 DIVECLUB – pod woda */
.p-diveclub .subhero{position:relative; background:linear-gradient(180deg,#0d4c72,#082f49); color:#fff}
.p-diveclub .subhero::before,.p-diveclub .subhero::after{content:""; position:absolute; top:-10%; bottom:0; width:110px; background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,0) 85%); transform:skewX(-12deg); pointer-events:none; animation:sway 7s ease-in-out infinite alternate}
.p-diveclub .subhero::before{left:6%}
.p-diveclub .subhero::after{right:10%; animation-delay:-3.5s; width:70px}
@keyframes sway{from{transform:skewX(-12deg) translateX(-16px)}to{transform:skewX(-12deg) translateX(16px)}}
.p-diveclub .subhero-in{position:relative; z-index:1}
.p-diveclub .subhero .sub{color:#bae6fd}
.p-diveclub .subhero .tag{background:rgba(255,255,255,.12); color:#e0f2fe; border-color:transparent}
.p-diveclub .subhero .btn-dark{background:#fff; color:#082f49; border-color:#fff}
.p-diveclub .subhero .btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.45)}
.p-diveclub .subhero-art svg{stroke:#7dd3fc}
.p-diveclub .bubble{border-color:#7dd3fc}
.p-diveclub .price.featured{background:#0C4A6E; border-color:#0C4A6E; color:#fff}
.p-diveclub .price.featured .muted{color:#bae6fd}
.p-diveclub .price.featured .amount{color:#fff}

/* 06 LOGBOOK – dziennik pokladowy */
.p-logbook .subhero{background-image:repeating-linear-gradient(180deg,transparent 0 30px,#edf0f3 30px 31px)}
.p-logbook .stat{border-top:3px solid var(--dive)}
.p-logbook .stat-n{color:var(--dive)}
.p-logbook .dive-table tbody tr{transition:background-color .15s ease}
.p-logbook .dive-table tbody tr:hover{background:#f0f9ff}
.p-logbook .goal .vote-track{background:#dcebf5}

/* 07 MAPA – ekspedycja */
.p-mapa .subhero{background-image:radial-gradient(#d3dde2 1px,transparent 1px); background-size:20px 20px}
.p-mapa .spot{border-left:4px solid var(--dive); transition:border-color .2s ease, background-color .2s ease, transform .2s ease}
.p-mapa .spot:hover{transform:translateY(-2px)}
.p-mapa .spot.on{border-color:#0C4A6E; border-width:1px 1px 1px 4px; background:#f0f9ff}
.p-mapa .spot strong{font-family:Georgia,serif; font-size:1.15rem}
/* brzeg + tafla: fala dryfuje, plusk po zanurzeniu */
#surfWave{animation:surfDrift 5s ease-in-out infinite alternate}
@keyframes surfDrift{from{transform:translateX(-8px)}to{transform:translateX(8px)}}
#splash{opacity:0; transform-box:fill-box; transform-origin:center}
#splash.go{animation:splashOut .7s ease-out}
@keyframes splashOut{0%{opacity:.9; transform:scale(.5,.7)}100%{opacity:0; transform:scale(2.4,1.6)}}

/* 08 JOBS – tablica ogloszen */
.p-jobs .subhero{background:#f3f6ea}
.p-jobs .search{border-width:2px}
.p-jobs .search:focus{outline:none; border-color:var(--diverse)}
.p-jobs .offer{border-left:4px solid var(--diverse); transition:transform .18s ease, box-shadow .18s ease}
.p-jobs .offer:hover{transform:translateY(-2px); box-shadow:0 2px 4px rgba(0,0,0,.06),0 12px 28px rgba(0,0,0,.08)}
.p-jobs .demo-card.b2b{background:#22380c; border-color:#22380c; color:#f2f6e6}
.p-jobs .b2b h2{color:#fff}
.p-jobs .b2b .meaning{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16)}
.p-jobs .b2b h3{color:#fff}
.p-jobs .b2b .muted{color:#c9d6ae}

/* 09 FOOD – karta menu */
.p-food .subhero{background:#faf5ec}
.p-food .dishes{grid-template-columns:1fr; gap:0}
.p-food .dish{background:transparent; border:0; border-bottom:1px dashed #d9cfba; border-radius:0; padding:20px 4px}
.p-food .dish:first-child{border-top:1px dashed #d9cfba}
.p-food .dish h3{font-size:1.25rem}
.p-food .dish-thumb{border:2px solid var(--diverse)}
.p-food .receipt{background:#fffdf7; border-style:dashed}

/* przycisk dzwieku w topbarze (wstrzykiwany przez JS) */
.top-actions{display:flex; align-items:center; gap:10px}
.sfx-btn{width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:#fff; font-size:1rem; line-height:1; cursor:pointer; color:var(--ink); transition:opacity .15s ease, border-color .15s ease, transform .15s ease}
.sfx-btn:hover{border-color:var(--ink)}
.sfx-btn:active{transform:scale(.93)}
.sfx-btn.off{opacity:.4; text-decoration:line-through}

@media (prefers-reduced-motion:reduce){
  .js .hero h1,.js .hero .sub,.js .hero-cta,.js .subhero-in>div:first-child>*{animation:none}
  .card-photo img{transition:none}
  .card:hover .card-photo img,.card:focus-visible .card-photo img{transform:none}
  .p-versus .vs::after,.p-quiz #vinylHero,.p-diveclub .subhero::before,.p-diveclub .subhero::after,.hero-wave,.subhero-art{animation:none}
  .p-diveclub .subhero::before,.p-diveclub .subhero::after{display:none}
  .p-quiz .tonearm{transition:none}
}

/* ============================================================
   HOME-CINE — motion-first experience dla dajwers.pl
   Motion language:
   - ease: cubic-bezier(.16,1,.3,1) (expo-out), 1.1s wejścia
   - maski linii zamiast fade-up; scrub parallax; magnetic CTA
   - tylko transform/opacity; will-change selektywnie
   ============================================================ */
.home-cine{
  --cine-bg:#0B0B0F; --cine-paper:#F4F1EA; --cine-ink:#131318;
  --cine-violet:#7C5CD6; --cine-dive:#38BDF8; --cine-lime:#D9F99D;
  --ease:cubic-bezier(.16,1,.3,1);
  background:var(--cine-paper); color:var(--cine-ink);
}
.home-cine .wrap{max-width:1200px}
.scroll-progress{position:fixed; top:0; left:0; right:0; height:3px; z-index:99; background:transparent}
.scroll-progress span{display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:0 50%; background:linear-gradient(90deg,var(--cine-violet),var(--cine-dive))}
.topbar-cine{background:rgba(11,11,15,.82); backdrop-filter:blur(14px); border-bottom:1px solid rgba(255,255,255,.08); color:#fff}
.topbar-cine .logo span{color:#9a97a8}
.topbar-note{font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:#9a97a8; border:1px solid rgba(255,255,255,.14); padding:.3rem .7rem; border-radius:999px}
@media(max-width:700px){.topbar-note{display:none}}

/* HERO */
.hero-cine{position:relative; background:var(--cine-bg); color:#F4F1EA; overflow:hidden; min-height:96svh; display:flex; align-items:center; padding:120px 0 90px}
#dust{position:absolute; inset:0; width:100%; height:100%; opacity:.55}
.hero-bg{position:absolute; inset:0; pointer-events:none}
.orb{position:absolute; border-radius:50%; filter:none; opacity:.5; will-change:transform}
.orb-a{width:640px; height:640px; left:-180px; top:-200px; background:radial-gradient(circle at 40% 40%, rgba(124,92,214,.55), transparent 62%)}
.orb-b{width:720px; height:720px; right:-220px; bottom:-260px; background:radial-gradient(circle at 60% 60%, rgba(56,189,248,.38), transparent 62%)}
.hero-grid{position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px); background-size:56px 56px; mask-image:radial-gradient(70% 60% at 50% 40%, black, transparent 78%)}
.hero-grain{position:absolute; inset:0; opacity:.09; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E")}
.hero-cine-in{position:relative; z-index:2}
.eyebrow span{display:inline-block; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:#c9c5d6; border:1px solid rgba(255,255,255,.16); padding:.45rem .9rem; border-radius:999px; background:rgba(255,255,255,.05)}
.mega{font-family:Georgia,serif; font-weight:700; line-height:.94; letter-spacing:-.04em; font-size:clamp(2.5rem,11vw,10rem); margin:22px 0 8px; text-transform:uppercase; white-space:nowrap}
.mega-line{display:block; overflow:hidden; padding-bottom:.06em; background:linear-gradient(90deg,#F4F1EA 0%,#a5a0b8 40%,#4a4658 70%,#000 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-stroke:1.5px #F4F1EA}
.mega-word{display:inline-block}
.tagline{font-family:Georgia,serif; font-style:italic; font-size:clamp(1.3rem,2.8vw,1.9rem); color:#F4F1EA; margin:10px 0 6px}
.js .mega{animation:megaIn 1s var(--ease) backwards; animation-delay:.3s}
@keyframes megaIn{from{opacity:0; transform:translateY(26px)}to{opacity:1; transform:translateY(0)}}
.mega-dot{color:var(--cine-dive); -webkit-text-stroke:0}
.morph{font-size:clamp(1.15rem,2.6vw,1.7rem); color:#d8d4e4; margin:6px 0 10px}
.morph strong{color:#fff; border-bottom:2px solid var(--cine-violet); min-width:9ch; display:inline-block; text-align:left}
.caret{display:inline-block; width:2px; height:1.1em; background:var(--cine-dive); vertical-align:-.15em; margin-left:3px; animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.hero-sub{max-width:60ch; color:#b9b4c9; font-size:1.06rem}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin:26px 0 30px}
.btn-light{background:#F4F1EA; color:#0B0B0F; border-color:#F4F1EA; position:relative; overflow:hidden}
.btn-ghost-dark{background:transparent; color:#F4F1EA; border-color:rgba(255,255,255,.35)}
.btn-ghost-dark:hover{border-color:#F4F1EA}
.magnetic{will-change:transform; transition:transform .25s var(--ease), box-shadow .25s ease, background-color .2s ease}
.btn .btn-fill{position:absolute; inset:0; background:var(--cine-lime); transform:scaleY(0); transform-origin:50% 100%; transition:transform .35s var(--ease)}
.btn-light:hover .btn-fill{transform:scaleY(1)}
.btn-light .btn-label{position:relative}
.hero-meta{display:grid; grid-template-columns:repeat(3,minmax(0,180px)); gap:18px; margin:0; border-top:1px solid rgba(255,255,255,.12); padding-top:22px; max-width:640px}
.hero-meta div{display:flex; flex-direction:column}
.hero-meta dt{font-family:Georgia,serif; font-size:2.2rem; line-height:1}
.hero-meta dd{margin:2px 0 0; color:#9a97a8; font-size:.9rem}
.scroll-hint{position:absolute; bottom:18px; left:50%; transform:translateX(-50%); font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:#8b87a0; display:flex; align-items:center; gap:10px; z-index:2}
.scroll-hint span{width:1px; height:34px; background:linear-gradient(#F4F1EA,transparent); display:block; animation:hintDrop 1.8s var(--ease) infinite}
@keyframes hintDrop{0%{transform:scaleY(0); transform-origin:top}45%{transform:scaleY(1); transform-origin:top}55%{transform:scaleY(1); transform-origin:bottom}100%{transform:scaleY(0); transform-origin:bottom}}

/* maski linii — bazowy system wejść */
.mask-line{display:block; overflow:hidden}
.mask-line>span{display:block; transform:translateY(110%); opacity:0}
.js .mask-line.in>span{animation:lineIn 1s var(--ease) forwards}
@keyframes lineIn{to{transform:none; opacity:1}}

/* MARQUEE */
.marquee{background:#0B0B0F; color:#F4F1EA; border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); overflow:hidden; white-space:nowrap}
.marquee-track{display:inline-flex; padding:14px 0; font-family:Georgia,serif; font-size:1.25rem; letter-spacing:.02em; animation:marquee 26s linear infinite; will-change:transform}
@keyframes marquee{to{transform:translateX(-50%)}}

/* SCENY */
.scene-kicker{margin:90px 0 8px; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:#7c7589}
.scene-kicker span{border-bottom:2px solid var(--cine-violet); padding-bottom:4px}
.scene-title{font-size:clamp(2rem,5vw,3.4rem); max-width:20ch; margin-bottom:10px}
.scene-title .thin{font-weight:400; color:#5b5769}
.scene-sub{color:#6B7280; max-width:62ch}
.reveal-line{display:block; overflow:hidden}
.reveal-line>span,.reveal-line{display:block}
.js .reveal-line{opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.js .reveal-line.in{opacity:1; transform:none}

/* znaczenia */
.mrows{display:grid; gap:16px; margin:28px 0 10px}
.mrow{position:relative; display:grid; grid-template-columns:90px 1fr auto; gap:20px; align-items:center; background:#fff; border:1px solid #E7E7E9; border-radius:20px; padding:28px; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.05),0 12px 32px rgba(0,0,0,.06); transition:transform .5s var(--ease)}
.mrow::after{content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--cine-violet)}
.mrow[data-accent="studio"]::after{background:#4C1D95}
.mrow[data-accent="dive"]::after{background:#0C4A6E}
.mrow[data-accent="social"]::after{background:#E11D48}
.mrow[data-accent="finanse"]::after{background:#92400E}
.mrow[data-accent="slowo"]::after{background:#1E3A8A}
.mnum{font-family:Georgia,serif; font-size:3rem; color:#d9d5e2; line-height:1}
.mbody h3{font-size:1.6rem; margin-bottom:6px}
.mbody h3 em{font-style:normal; border-bottom:3px solid var(--cine-lime)}
.mbody p{color:#6B7280; margin:0 0 8px; max-width:52ch}
.mgoto{display:flex; gap:14px; flex-wrap:wrap}
.mgoto a{font-weight:700; text-decoration:none; border-bottom:1px solid currentColor}
.mword{font-family:Georgia,serif; font-size:clamp(2.6rem,6vw,4.4rem); color:transparent; -webkit-text-stroke:1.5px #d9d5e2; text-transform:lowercase; line-height:1}
.js .mrow{opacity:0; transform:translateY(44px) scale(.985)}
.js .mrow.in{opacity:1; transform:none; transition:opacity .9s var(--ease), transform .9s var(--ease)}

/* pozioma scena — karuzela bez hijacku scrolla (wszystkie karty zawsze dostępne) */
.scene-h{padding-bottom:20px; overflow:hidden}
.scene-h-head{margin-bottom:6px}
.hviewport{overflow:hidden; margin-top:18px; position:relative}
.htrack{display:flex; gap:18px; padding:10px 20px 20px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; cursor:grab; will-change:auto}
.htrack::-webkit-scrollbar{display:none}
.htrack.dragging{cursor:grabbing; scroll-snap-type:none}
.js .hcard{opacity:0; transform:translateY(36px) scale(.98); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.js .hcard.in{opacity:1; transform:none}
.hcontrols{display:flex; align-items:center; gap:14px; margin-top:6px; flex-wrap:wrap}
.hbtns{display:flex; gap:8px}
.hbtn{width:44px; height:44px; border-radius:50%; border:1px solid #131318; background:#fff; font-size:1.1rem; cursor:pointer; transition:background-color .2s ease, color .2s ease, transform .15s ease}
.hbtn:hover{background:#131318; color:#fff}
.hbtn:active{transform:scale(.93)}
.hprogress{flex:1; min-width:120px; height:3px; border-radius:999px; background:#E7E7E9; overflow:hidden}
.hprogress span{display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--cine-violet),var(--cine-dive))}
.hcounter{font-variant-numeric:tabular-nums; font-size:.85rem; color:#6B7280; letter-spacing:.06em}
.hhint{color:#9a97a8; font-size:.85rem; letter-spacing:.08em}
.hcard{flex:0 0 min(400px,82vw); scroll-snap-align:start; background:#0B0B0F; color:#F4F1EA; border-radius:20px; overflow:hidden; text-decoration:none; display:flex; flex-direction:column; border:1px solid rgba(255,255,255,.1); transition:transform .45s var(--ease)}
.hcard:hover{transform:translateY(-6px)}
.hphoto{display:block; aspect-ratio:16/10; overflow:hidden; background:#1a1a22}
.hphoto img{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.12); transition:transform .8s var(--ease); filter:saturate(.95)}
.hcard:hover .hphoto img{transform:scale(1.02)}
.htag{align-self:flex-start; margin:16px 18px 0; font-size:.7rem; letter-spacing:.12em; font-weight:700; background:#E9D5FF; color:#4C1D95; padding:.3rem .7rem; border-radius:999px}
.htag-dive{background:#E0F2FE; color:#0C4A6E}
.htag-diverse{background:#ECFCCB; color:#3F6212}
.hname{font-family:Georgia,serif; font-size:1.7rem; margin:10px 18px 2px}
.hdesc{color:#b9b4c9; margin:0 18px 18px; font-size:.95rem}
.hcard-cta{background:var(--cine-lime); color:#131318; border-color:var(--cine-lime); justify-content:center; padding:34px 28px; gap:10px}
.hcard-cta .hname{margin:0}
.hcard-cta .hdesc{color:#3d4a1f; margin:0}
.hcard-cta .btn{align-self:flex-start; margin-top:12px}

/* stats */
.scene-stats{background:#0B0B0F; color:#F4F1EA; margin-top:70px; padding:20px 0 90px; position:relative; overflow:hidden}
.scene-stats::before{content:""; position:absolute; inset:0; background:radial-gradient(60% 50% at 80% 20%, rgba(124,92,214,.35), transparent 65%), radial-gradient(50% 40% at 10% 90%, rgba(56,189,248,.25), transparent 60%)}
.scene-stats .scene-kicker{color:#b9b4c9}
.scene-stats .scene-title .thin{color:#b9b4c9}
.stats-in{position:relative}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:26px 0}
.stat{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:22px}
.stat span{display:flex; align-items:baseline; gap:8px}
.stat strong{font-family:Georgia,serif; font-size:2.6rem; line-height:1}
.stat i{font-style:normal; color:#b9b4c9}
.stat p{color:#b9b4c9; font-size:.92rem; margin:8px 0 0}
.food-note span{display:inline-block; background:rgba(217,249,157,.12); border:1px solid rgba(217,249,157,.35); padding:.7rem 1rem; border-radius:999px; font-size:.92rem}
.food-note a{color:var(--cine-lime); font-weight:700}

/* kontakt finał */
.contact-cine{background:#131318; color:#fff; border-radius:28px; padding:clamp(36px,6vw,72px); margin:80px 0 30px; text-align:center; position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.1)}
.contact-cine::before{content:""; position:absolute; inset:-40%; background:conic-gradient(from 0deg, transparent 0 70%, rgba(124,92,214,.35), transparent 82%, transparent 0 92%, rgba(56,189,248,.3), transparent 100%); animation:spinSlow 14s linear infinite}
.contact-cine::after{content:""; position:absolute; inset:2px; background:#131318; border-radius:26px}
.contact-cine>*{position:relative; z-index:1}
@keyframes spinSlow{to{transform:rotate(360deg)}}
.contact-cine .scene-kicker{margin-top:0}
.contact-mega{font-size:clamp(2.2rem,6vw,4.2rem); max-width:16ch; margin:0 auto 10px}
.contact-mega span{background:linear-gradient(90deg,#fff,#D9F99D); -webkit-background-clip:text; background-clip:text; color:transparent}
.contact-sub{color:#b9b4c9; max-width:52ch; margin:0 auto 22px}
.contact-btns{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.btn-ghost-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.35)}
.contact-tiny{color:#8b87a0; font-size:.85rem; margin:16px 0 0}
.js .reveal-scale{opacity:0; transform:scale(.96) translateY(24px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.js .reveal-scale.in{opacity:1; transform:none}
.footer-cine{border-top:1px solid var(--line); padding:22px 0 40px; color:var(--muted); font-size:.9rem}
.footer-cine .wrap{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}

/* responsywność: smoothness > complexity */
@media(max-width:900px){
  .mrow{grid-template-columns:1fr; gap:8px}
  .mword{display:none}
  .stats-grid{grid-template-columns:1fr 1fr}
  .hero-cine{min-height:auto; padding:110px 0 70px}
}
@media(max-width:600px){
  .stats-grid{grid-template-columns:1fr}
  .hero-meta{grid-template-columns:repeat(3,1fr); gap:10px}
  .hero-meta dt{font-size:1.6rem}
}
@media (prefers-reduced-motion:reduce){
  .js .mega,.js .mask-line>span{animation:none; transform:none; opacity:1}
  .marquee-track,.scroll-hint span,.caret,.contact-cine::before{animation:none}
  .js .reveal-line,.js .mrow,.js .reveal-scale{opacity:1; transform:none; transition:none}
  .htrack{scroll-snap-type:none}
  #dust{display:none}
}

/* ============================================================
   SUBPAGES — wspólny system kinowy + indywidualny charakter
   Zasada: nic nie usuwamy, tylko dokładamy (addytywne).
   Wspólne: progress, hero-wejście, parallax art, reveal-ease.
   ============================================================ */
.sub-progress{position:fixed; top:0; left:0; right:0; height:3px; z-index:99}
.sub-progress span{display:block; height:100%; transform:scaleX(0); transform-origin:0 50%}
.p-freestyle .sub-progress span{background:#4C1D95}
.p-versus .sub-progress span{background:linear-gradient(90deg,#4C1D95,#c9c2d8)}
.p-quiz .sub-progress span{background:#7c5cd6}
.p-studio .sub-progress span{background:#a78bfa}
.p-diveclub .sub-progress span,.p-logbook .sub-progress span,.p-mapa .sub-progress span{background:#0C4A6E}
.p-jobs .sub-progress span,.p-food .sub-progress span{background:#3F6212}
.p-social .sub-progress span{background:#E11D48}
.p-finanse .sub-progress span{background:#92400E}
.p-slowo .sub-progress span{background:#1E3A8A}
/* hero: tag-pop + wolniejszy, głębszy art */
.subhero .tag{display:inline-block; animation:tagPop .7s cubic-bezier(.16,1,.3,1) both .1s}
@keyframes tagPop{from{opacity:0; transform:translateY(10px) scale(.92)}}
.subhero-art{will-change:transform}
/* reveal: wspólna expo-krzywa zamiast bazowej */
.js .reveal{transition-timing-function:cubic-bezier(.16,1,.3,1)}
/* --- indywidualne wejścia reveal per strona (ten sam mechanizm .visible) --- */
.js .p-freestyle .demo-card.reveal{transform:translateY(26px) rotate(-.4deg)}
.js .p-versus .demo-card.reveal{transform:translateY(26px) scale(.985)}
.js .p-quiz .demo-card.reveal{transform:translateY(26px) scale(.97)}
.js .p-studio .demo-card.reveal{transform:translateY(30px)}
.js .p-diveclub .demo-card.reveal{transform:translateY(30px)}
.js .p-logbook .demo-card.reveal{transform:translateY(22px)}
.js .p-mapa .demo-card.reveal{transform:translateY(22px)}
.js .p-jobs .demo-card.reveal{transform:translateX(-18px)}
.js .p-food .demo-card.reveal{transform:translateY(22px) rotate(.3deg)}
.js .p-freestyle .demo-card.reveal.visible,.js .p-versus .demo-card.reveal.visible,.js .p-quiz .demo-card.reveal.visible,.js .p-studio .demo-card.reveal.visible,.js .p-diveclub .demo-card.reveal.visible,.js .p-logbook .demo-card.reveal.visible,.js .p-mapa .demo-card.reveal.visible,.js .p-jobs .demo-card.reveal.visible,.js .p-food .demo-card.reveal.visible{transform:none}
/* --- 01 FREESTYLE: bit — chip z caret, wiersze sceny wchodzą na zmianę --- */
.p-freestyle .chip{position:relative}
.p-freestyle .chip::after{content:""; display:inline-block; width:2px; height:1.1em; background:#4C1D95; vertical-align:-.15em; margin-left:4px; animation:blink 1s steps(2) infinite}
.p-freestyle .scoreboard .row{animation:rowIn .6s cubic-bezier(.16,1,.3,1) both}
.p-freestyle .scoreboard .row:nth-child(2){animation-delay:.08s}
.p-freestyle .scoreboard .row:nth-child(3){animation-delay:.16s}
@keyframes rowIn{from{opacity:0; transform:translateX(-16px)}}
.p-freestyle .fighter:first-child:hover{transform:translateX(3px)}
.p-freestyle .fighter:last-child:hover{transform:translateX(-3px)}
/* --- 02 VERSUS: pojedynek — kolumny ciągną do środka, VS pulsuje po głosie --- */
.p-versus .verse-col:first-of-type:hover{transform:translateX(4px)}
.p-versus .verse-col:last-of-type:hover{transform:translateX(-4px)}
.p-versus .vs.voted{animation:vsPop .45s cubic-bezier(.16,1,.3,1)}
@keyframes vsPop{30%{transform:scale(1.18) rotate(-6deg)}}
/* --- 03 QUIZ: konsola — odpowiedzi wchodzą kaskadą, deck unosi się na hover --- */
.p-quiz #qAnswers .ans{transition:transform .18s ease, border-color .18s ease, background-color .18s ease}
.p-quiz #qAnswers .ans:hover:not(:disabled){transform:translateY(-2px)}
.p-quiz #qAnswers .ans.ok{animation:ansOk .4s cubic-bezier(.16,1,.3,1)}
@keyframes ansOk{30%{transform:scale(1.03)}}
.p-quiz .deck:hover{transform:translateY(-3px)}
.p-quiz .deck{transition:transform .3s cubic-bezier(.16,1,.3,1)}
/* --- 04 STUDIO: mikser — kanały wchodzą kolejno, fala rysuje się po odsłuchu --- */
.p-studio .versions .version:nth-child(2){transition-delay:.06s}
.p-studio .versions .version:nth-child(3){transition-delay:.12s}
.p-studio .wvv-play:active{transform:scale(.93)}
.p-studio .wvv-play{transition:transform .15s ease}
/* --- 05 DIVECLUB: zejście — karty cenowe dryfują z różnym rytmem --- */
.p-diveclub .price{transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease}
.p-diveclub .price:hover{transform:translateY(-4px)}
.p-diveclub .price.featured:hover{transform:translateY(-4px) scale(1.01)}
/* --- 06 LOGBOOK: dziennik — wiersze wbijają pieczątkę --- */
.p-logbook .dive-table tbody tr:first-child td{animation:stampIn .45s cubic-bezier(.16,1,.3,1)}
@keyframes stampIn{from{opacity:0; transform:scale(.985)}}
/* --- 07 MAPA: ekspedycja — miejscówki wchodzą kaskadą, marker pulsuje --- */
.p-mapa .spot{animation:rowIn .5s cubic-bezier(.16,1,.3,1) both}
.p-mapa .spot:nth-child(2){animation-delay:.07s}
.p-mapa .spot:nth-child(3){animation-delay:.14s}
#sliderMark{animation:markPulse 2s ease-in-out infinite}
@keyframes markPulse{50%{box-shadow:0 0 0 5px rgba(12,74,110,.18)}}
/* --- 08 JOBS: tablica — oferty przypinają się na zmianę z boków --- */
.p-jobs .offer{animation:rowIn .5s cubic-bezier(.16,1,.3,1) both}
.p-jobs .offer:nth-child(even){animation-name:rowInR}
@keyframes rowInR{from{opacity:0; transform:translateX(16px)}}
/* --- 09 FOOD: karta — dania wjeżdżają miękko, przycisk dobija --- */
.p-food .dish{animation:dishIn .55s cubic-bezier(.16,1,.3,1) both}
.p-food .dish:nth-child(2){animation-delay:.06s}
.p-food .dish:nth-child(3){animation-delay:.12s}
.p-food .dish:nth-child(4){animation-delay:.18s}
@keyframes dishIn{from{opacity:0; transform:translateY(14px)}}
.p-food .addBtn:active{transform:scale(.93)}
.p-food .addBtn{transition:transform .15s ease}
@media (prefers-reduced-motion:reduce){
  .subhero .tag{animation:none}
  .p-freestyle .chip::after{animation:none; display:none}
  .p-freestyle .scoreboard .row,.p-mapa .spot,.p-jobs .offer,.p-food .dish{animation:none}
  #sliderMark{animation:none}
  .subhero-art{transform:none !important}
  #surfWave,#splash.go{animation:none}
  #splash{opacity:0}
}

/* ============================================================
   9 BRANDS — 9 odrębnych tożsamości (doklejone, wygrywają kaskadą).
   Wspólne zostaje tylko: index/homepage, app.js (ID), statyki.
   Każde body.p-* to osobny system: tło, krój, topbar, buttony,
   hero, demo, salesbox, stopka, ruch. Celowo ZERO wspólnego języka.
   ============================================================ */

/* ---------- 01 FREESTYLE: uliczny plakat / brutalist battle ----------
   DNA: nocna arena, beton + kwasowa żółć, krzykliwe kondensowane typo,
   twarde cięcia, zero grzeczności. Ruch: szybkie popy, shake, ticker. */
body.p-freestyle{background:#0E0E11; color:#F5F2EA;
  font-family:"Space Grotesk",Inter,"Segoe UI",Roboto,Arial,sans-serif}
body.p-freestyle h1,body.p-freestyle h2,body.p-freestyle h3,
body.p-freestyle .amount,body.p-freestyle .stat-n{font-family:"Archivo Black",Impact,"Arial Black",sans-serif;
  letter-spacing:-.01em; line-height:1.02; text-transform:uppercase}
body.p-freestyle ::selection{background:#E8FF47; color:#0E0E11}
.p-freestyle .wrap{max-width:1160px}
.p-freestyle .topbar{background:#0E0E11; border-bottom:3px solid #E8FF47}
.p-freestyle .topbar-in{height:64px}
.p-freestyle .logo{font-family:"Archivo Black",Impact,sans-serif; text-transform:uppercase; font-size:1.05rem; color:#F5F2EA}
.p-freestyle .logo span{color:#E8FF47}
.p-freestyle .btn{border-radius:0; border:2px solid #F5F2EA; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; font-size:.85rem; padding:.8rem 1.3rem;
  transition:transform .12s steps(2), background-color .12s steps(2), color .12s steps(2)}
.p-freestyle .btn-dark{background:#E8FF47; border-color:#E8FF47; color:#0E0E11}
.p-freestyle .btn-dark:hover{background:#F5F2EA; border-color:#F5F2EA; transform:translate(-2px,-2px); box-shadow:4px 4px 0 #7C5CD6}
.p-freestyle .btn-ghost{background:transparent; color:#F5F2EA}
.p-freestyle .btn-ghost:hover{border-color:#E8FF47; color:#E8FF47; transform:translate(-2px,-2px); box-shadow:4px 4px 0 rgba(232,255,71,.35)}
.p-freestyle .subhero{background:#0E0E11; color:#F5F2EA; padding:0 0 34px; overflow:hidden; position:relative}
.p-freestyle .subhero::before{content:"DAJ WERS"; position:absolute; top:6px; left:50%; transform:translateX(-50%);
  font-family:"Archivo Black",Impact,sans-serif; font-size:clamp(4rem,17vw,15rem); line-height:1; white-space:nowrap;
  color:transparent; -webkit-text-stroke:1.5px #26262e; opacity:.9; pointer-events:none}
.p-freestyle .subhero-in{position:relative; z-index:1; display:block; padding-top:150px}
.p-freestyle .subhero .tag{background:#E8FF47; color:#0E0E11; border:0; border-radius:0; font-family:"Archivo Black",Impact,sans-serif;
  font-size:.75rem; letter-spacing:.1em; padding:.4rem .8rem; transform:rotate(-2deg); display:inline-block}
.p-freestyle .subhero h1{font-size:clamp(2.6rem,7.5vw,5.2rem); margin:.6rem 0 .4rem; max-width:14ch}
.p-freestyle .subhero h1::after{content:" ///"; color:#E8FF47}
.p-freestyle .subhero .sub{color:#B9B6A8; font-size:1.05rem; max-width:46ch}
.p-freestyle .subhero-art{display:none}
.p-freestyle .hero-wave{display:none}
.p-freestyle .ticker{background:#E8FF47; color:#0E0E11; overflow:hidden; white-space:nowrap; border-top:3px solid #0E0E11; border-bottom:3px solid #0E0E11}
.p-freestyle .ticker-track{display:inline-flex; gap:0; padding:.5rem 0; font-family:"Archivo Black",Impact,sans-serif;
  font-size:.85rem; letter-spacing:.08em; animation:tickSlide 18s linear infinite}
@keyframes tickSlide{to{transform:translateX(-50%)}}
.p-freestyle .demo-card{background:#16161B; border:2px solid #2A2A32; border-radius:0; color:#F5F2EA;
  padding:0; margin-top:26px; box-shadow:8px 8px 0 #7C5CD6}
.p-freestyle .demo-card .demo-row,.p-freestyle .demo-card>h2,.p-freestyle .demo-card>.fighters,
.p-freestyle .demo-card>.vote-track,.p-freestyle .demo-card>p{padding-left:24px; padding-right:24px}
.p-freestyle .demo-card .demo-row{padding-top:24px}
.p-freestyle .demo-card h2{font-size:1.15rem}
.p-freestyle .demo-card .muted{color:#A7A396}
.p-freestyle .chip{background:#0E0E11; border:2px dashed #E8FF47; color:#E8FF47; border-radius:0;
  font-family:"Archivo Black",Impact,sans-serif; font-size:clamp(1.2rem,3.4vw,1.9rem); text-transform:uppercase; margin:18px 24px 8px}
.p-freestyle .chip.pop{animation:chipSlam .22s steps(2)}
@keyframes chipSlam{40%{transform:scale(1.03) rotate(-.6deg)}}
.p-freestyle .timer-row{border-top:2px solid #2A2A32; border-bottom:2px solid #2A2A32; padding-bottom:22px}
.p-freestyle .fighter{background:#0E0E11; border:2px solid #2A2A32; border-radius:0}
.p-freestyle .fighter:first-child{border-left:6px solid #E8FF47}
.p-freestyle .fighter:last-child{border-right:6px solid #7C5CD6}
.p-freestyle .fighter h3{font-size:1.05rem}
.p-freestyle .vs{background:#E8FF47; color:#0E0E11; border:0; border-radius:0; font-family:"Archivo Black",Impact,sans-serif; transform:rotate(3deg)}
.p-freestyle .vote-track{background:#2A2A32; border-radius:0; height:18px; border:2px solid #2A2A32}
.p-freestyle .vote-a{background:repeating-linear-gradient(-45deg,#E8FF47 0 10px,#cde83a 10px 20px)}
.p-freestyle .fighters .btn:active{animation:btnShake .25s steps(3)}
@keyframes btnShake{25%{transform:translateX(3px)}50%{transform:translateX(-3px)}75%{transform:translateX(2px)}}
.p-freestyle .section-title{font-size:clamp(1.6rem,4vw,2.4rem); margin-top:56px}
.p-freestyle .section-title::before{content:"# "; color:#E8FF47}
.p-freestyle .rows{background:#16161B; border:2px solid #2A2A32; border-radius:0}
.p-freestyle .row{border-bottom:2px solid #2A2A32}
.p-freestyle .row strong{color:#E8FF47; font-family:"Archivo Black",Impact,sans-serif; font-size:.9rem}
.p-freestyle .meanings{display:grid; grid-template-columns:repeat(3,1fr)}
.p-freestyle .meaning{background:#16161B; border:2px solid #2A2A32; border-radius:0; box-shadow:none}
.p-freestyle .meaning .num{font-family:"Archivo Black",Impact,sans-serif; color:#E8FF47; font-size:2.4rem}
.p-freestyle .meaning h3{font-size:.95rem}
.p-freestyle .meaning p{color:#A7A396}
.p-freestyle .meaning.quote p:first-child::before{color:#E8FF47}
.p-freestyle .salesbox{background:#E8FF47; color:#0E0E11; border:0; border-radius:0; box-shadow:8px 8px 0 #7C5CD6; margin:48px 0}
.p-freestyle .salesbox h2{font-family:"Archivo Black",Impact,sans-serif; text-transform:uppercase}
.p-freestyle .salesbox .btn-dark{background:#0E0E11; border-color:#0E0E11; color:#E8FF47}
.p-freestyle .salesbox .btn-ghost{border-color:#0E0E11; color:#0E0E11}
.p-freestyle .stickybar{background:#0E0E11; color:#F5F2EA; border-top:3px solid #E8FF47}
.p-freestyle footer{border-top:3px solid #E8FF47; color:#8E8B80}
.p-freestyle :focus-visible{outline:3px solid #E8FF47; outline-offset:2px}
.js .p-freestyle .reveal,.js .p-freestyle .demo-card.reveal{opacity:0; transform:translateY(26px) rotate(-.5deg);
  transition:opacity .35s steps(4), transform .35s cubic-bezier(.2,.9,.25,1.2)}
.js .p-freestyle .reveal.visible,.js .p-freestyle .demo-card.reveal.visible{opacity:1; transform:none}

/* ---------- 02 VERSUS: pojedynek / editorial split ----------
   DNA: gazeta bokserska — krem vs atrament, wielka szeryfowa kpina,
   medalion VS, mechaniczne dosuwanie kolumn. Ruch: precyzyjny, twardy. */
body.p-versus{background:#F6F1E7; color:#171310;
  font-family:Georgia,"Times New Roman",serif}
body.p-versus h1,body.p-versus h2,body.p-versus h3{font-family:Fraunces,Georgia,"Times New Roman",serif;
  font-weight:900; letter-spacing:-.02em; line-height:1.02}
body.p-versus p,body.p-versus li,body.p-versus span,body.p-versus .muted{font-family:Georgia,"Times New Roman",serif}
.p-versus .wrap{max-width:1180px}
.p-versus .topbar{background:#F6F1E7; border-bottom:1px solid #171310}
.p-versus .topbar-in{height:58px}
.p-versus .logo{font-style:italic; font-weight:900}
.p-versus .logo span{color:#8C1D18}
.p-versus .btn{border-radius:999px; border:1.5px solid #171310; font-family:Georgia,serif; font-style:italic;
  font-weight:700; text-transform:none; letter-spacing:0; transition:background-color .18s ease, color .18s ease, transform .18s ease}
.p-versus .btn-dark{background:#171310; color:#F6F1E7}
.p-versus .btn-dark:hover{background:#8C1D18; border-color:#8C1D18; transform:none; box-shadow:none}
.p-versus .btn-ghost{background:transparent}
.p-versus .btn-ghost:hover{border-color:#8C1D18; color:#8C1D18; transform:none}
.p-versus .subhero{background:linear-gradient(90deg,#171310 0 50%,#F6F1E7 50% 100%); padding:0; overflow:hidden}
.p-versus .subhero-in{display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch; max-width:none; padding:0}
.p-versus .subhero-in>div:first-child{background:#171310; color:#F6F1E7; padding:64px 40px 64px calc(max(20px,(100vw - 1180px)/2))}
.p-versus .subhero-in>div:first-child .tag{background:transparent; color:#E4B04A; border:1px solid #E4B04A; border-radius:999px;
  font-size:.7rem; letter-spacing:.22em; font-family:Georgia,serif}
.p-versus .subhero h1{font-size:clamp(2.8rem,6.5vw,5rem); font-style:italic}
.p-versus .subhero h1::after{content:" — kto lepszy?"; display:block; font-size:.42em; font-style:normal; color:#E4B04A; margin-top:.4rem}
.p-versus .subhero .sub{color:#C9BFAE}
.p-versus .subhero-art{display:flex; align-items:center; justify-content:center; background:#F6F1E7; padding:40px; min-height:280px}
.p-versus .subhero-art svg{width:150px; height:150px; stroke:#8C1D18}
.p-versus .hero-wave{display:none}
.p-versus .duel-kicker{background:#8C1D18; color:#F6F1E7; text-align:center; font-style:italic; padding:.45rem;
  font-size:.9rem; letter-spacing:.04em}
.p-versus .demo-card{background:transparent; border:0; border-radius:0; box-shadow:none; padding:0; margin-top:0}
.p-versus .demo-card>h2{text-align:center; font-style:italic; font-size:clamp(1.5rem,3.5vw,2.2rem); margin:44px 0 4px}
.p-versus .demo-card>.muted,.p-versus .demo-card>p{text-align:center}
.p-versus .versus-wrap{display:grid; grid-template-columns:1fr 110px 1fr; gap:0; align-items:stretch; margin:26px 0 0;
  border-top:3px double #171310; border-bottom:3px double #171310}
.p-versus .verse-col{background:transparent; border:0; border-radius:0; padding:38px 34px; text-align:left}
.p-versus .verse-col:first-of-type{background:#FBF8F1}
.p-versus .verse-col:last-of-type{background:#171310; color:#F6F1E7; text-align:right}
.p-versus .verse-col:last-of-type .muted{color:#C9BFAE}
.p-versus .verse{font-style:italic; font-size:1.2rem; line-height:2}
.p-versus .verse-col .avatar{display:none}
.p-versus .verse-col h3{font-size:1.6rem}
.p-versus .verse-col:first-of-type h3::before{content:"A — "}
.p-versus .verse-col:last-of-type h3::after{content:" — B"}
.p-versus .vs{align-self:center; justify-self:center; width:88px; height:88px; flex-basis:88px; border-radius:50%;
  background:#8C1D18; color:#F6F1E7; border:3px double #F6F1E7; font-style:italic; font-size:1.5rem; z-index:2}
.p-versus .vs::after{display:none}
.p-versus .vs.voted{animation:vsStamp .4s cubic-bezier(.2,1.4,.4,1)}
@keyframes vsStamp{0%{transform:scale(1.4) rotate(-10deg)}100%{transform:scale(1) rotate(0)}}
.p-versus .vote-track{height:10px; border-radius:0; background:#D8CFBC; border:1px solid #171310; margin:0}
.p-versus .vote-a{background:#8C1D18}
.p-versus .demo-card>p .btn-ghost{margin-top:14px}
.p-versus .rows{border:0; background:transparent}
.p-versus .row{border-bottom:1px solid #171310; padding:14px 4px; font-size:1.05rem}
.p-versus .row strong{color:#8C1D18; font-style:italic}
.p-versus .salesbox{background:#171310; color:#F6F1E7; border:0; border-radius:0; box-shadow:none; text-align:left;
  display:grid; grid-template-columns:1.2fr 1fr; gap:24px; align-items:center}
.p-versus .salesbox h2{font-style:italic; font-size:2rem}
.p-versus .salesbox .btn-dark{background:#F6F1E7; color:#171310; border-color:#F6F1E7}
.p-versus .salesbox .btn-ghost{background:transparent; color:#F6F1E7; border-color:rgba(246,241,231,.6)}
.p-versus .salesbox .btn-ghost:hover{border-color:#E4B04A; color:#E4B04A}
.p-versus .stickybar{background:#F6F1E7; border-top:1px solid #171310}
.p-versus footer{border-top:1px solid #171310; color:#6E6257}
.p-versus :focus-visible{outline:2px solid #8C1D18; outline-offset:3px}
.js .p-versus .demo-card.reveal{transform:none}
.js .p-versus .reveal{opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s cubic-bezier(.3,.7,.3,1)}
.js .p-versus .reveal.visible{opacity:1; transform:none}
.js .p-versus .verse-col{transition:transform .3s cubic-bezier(.3,.7,.3,1)}
.p-versus .verse-col:first-of-type:hover{transform:translateX(6px)}
.p-versus .verse-col:last-of-type:hover{transform:translateX(-6px)}

/* ---------- 03 QUIZ: nocna konsola odsłuchowa ----------
   DNA: bar winylowy po północy — czerń, bursztyn, mono-etykiety,
   deck + konsola poziomo. Ruch: lampowy puls, bezwładność winyla. */
body.p-quiz{background:#101014; color:#EDE8DC;
  font-family:"Space Grotesk",Inter,"Segoe UI",sans-serif}
body.p-quiz h1,body.p-quiz h2,body.p-quiz h3{font-family:"Space Grotesk",Inter,sans-serif; font-weight:700;
  letter-spacing:-.02em; line-height:1.1}
body.p-quiz .mono,body.p-quiz .muted{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace}
.p-quiz .wrap{max-width:1060px}
.p-quiz .topbar{background:#0B0B0E; border-bottom:1px solid #2A2A33; color:#EDE8DC}
.p-quiz .logo{color:#EDE8DC; font-family:"IBM Plex Mono",monospace; font-size:1rem; letter-spacing:.02em}
.p-quiz .logo span{color:#FFB224}
.p-quiz .btn{border-radius:10px; font-family:"IBM Plex Mono",monospace; font-size:.82rem; letter-spacing:.05em;
  text-transform:uppercase; border:1.5px solid #3A3A46; transition:border-color .2s ease, background-color .2s ease, transform .15s ease}
.p-quiz .btn-dark{background:#FFB224; border-color:#FFB224; color:#101014; font-weight:600}
.p-quiz .btn-dark:hover{background:#FFC95C; transform:translateY(-1px); box-shadow:0 4px 18px rgba(255,178,36,.35)}
.p-quiz .btn-ghost{background:#17171D; color:#EDE8DC}
.p-quiz .btn-ghost:hover{border-color:#FFB224}
.p-quiz .subhero{background:#101014; padding:34px 0 10px; overflow:hidden}
.p-quiz .subhero-in{display:grid; grid-template-columns:1fr auto; gap:36px; align-items:center}
.p-quiz .subhero .tag{background:#1D1D24; color:#FFB224; border:1px solid #3A3A46; border-radius:6px;
  font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.2em}
.p-quiz .subhero h1{font-size:clamp(2.4rem,6vw,4.4rem); color:#fff}
.p-quiz .subhero h1 .qmark{color:#FFB224}
.p-quiz .subhero .sub{color:#A39E93; font-family:"IBM Plex Mono",monospace; font-size:.92rem}
.p-quiz .subhero-art{flex-direction:row}
.p-quiz .console-lights{display:flex; gap:8px; margin-top:14px}
.p-quiz .console-lights i{width:10px; height:10px; border-radius:50%; background:#2A2A33}
.p-quiz .console-lights i.on{background:#FFB224; animation:lampPulse 2.2s ease-in-out infinite}
.p-quiz .console-lights i.on:last-child{animation-delay:1.1s; background:#4ADE80}
@keyframes lampPulse{50%{opacity:.35}}
.p-quiz .hero-wave{display:none}
.p-quiz .demo-card{background:#17171D; border:1px solid #2E2E38; border-radius:16px; color:#EDE8DC;
  box-shadow:0 24px 60px rgba(0,0,0,.5); margin-top:22px}
.p-quiz .demo-card h2{color:#fff; font-size:1.25rem}
.p-quiz .demo-card .muted{color:#8E8A7E; font-size:.85rem}
.p-quiz .player{display:grid; grid-template-columns:150px 1fr; gap:26px; align-items:center}
.p-quiz .deck{width:150px; height:150px; background:#0B0B0E; border:1px solid #2E2E38; border-radius:14px;
  display:flex; align-items:center; justify-content:center}
.p-quiz .progress{background:#0B0B0E; border:1px solid #2E2E38; height:10px}
.p-quiz .progress-fill{background:linear-gradient(90deg,#FFB224,#FF7847)}
.p-quiz .answers{grid-template-columns:repeat(4,1fr); gap:10px; margin-top:20px}
.p-quiz .ans{background:#1E1E26; border:1.5px solid #34343F; border-radius:10px; padding:1rem .5rem;
  font-family:"IBM Plex Mono",monospace; text-transform:uppercase; font-size:.8rem; letter-spacing:.06em}
.p-quiz .ans small{display:block; opacity:.55; font-size:.68rem; margin-top:4px}
.p-quiz .ans:hover:not(:disabled){border-color:#FFB224; transform:translateY(-2px)}
.p-quiz .ans.ok{border-color:#4ADE80; background:rgba(74,222,128,.12); color:#BBF7D0; animation:ansGlow .5s ease}
@keyframes ansGlow{0%{box-shadow:0 0 0 0 rgba(74,222,128,.6)}100%{box-shadow:0 0 0 14px transparent}}
.p-quiz .meaning{background:#17171D; border:1px solid #2E2E38; border-radius:12px; box-shadow:none}
.p-quiz .meaning .num{font-family:"IBM Plex Mono",monospace; color:#FFB224}
.p-quiz .meaning h3{color:#fff}
.p-quiz .meaning p{color:#8E8A7E}
.p-quiz .salesbox{background:linear-gradient(180deg,#1E1A10,#17171D); border:1px solid #4A3A17; border-radius:16px; color:#EDE8DC; box-shadow:none}
.p-quiz .salesbox h2{color:#FFB224}
.p-quiz .stickybar{background:#0B0B0E; border-top:1px solid #2A2A33; color:#EDE8DC}
.p-quiz footer{border-top:1px solid #2A2A33; color:#6E6A5E}
.p-quiz :focus-visible{outline:2px solid #FFB224; outline-offset:2px}
.js .p-quiz .reveal,.js .p-quiz .demo-card.reveal{opacity:0; transform:translateY(20px) scale(.985);
  transition:opacity .55s ease, transform .55s cubic-bezier(.3,.9,.3,1)}
.js .p-quiz .reveal.visible,.js .p-quiz .demo-card.reveal.visible{opacity:1; transform:none}

/* ---------- 04 STUDIO: laboratorium wersji / pulpit miksera ----------
   DNA: jasne techniczne labo — siatka milimetrowa, kanały CH-01..03,
   diody, mono-etykiety. Ruch: diodowy blink, suwakowy ease. */
body.p-studio{background:#E9EAEE; color:#14161A;
  font-family:"Space Grotesk",Inter,"Segoe UI",sans-serif}
body.p-studio h1,body.p-studio h2,body.p-studio h3{font-family:"Space Grotesk",Inter,sans-serif; font-weight:700;
  letter-spacing:-.025em; line-height:1.05}
.p-studio .wrap{max-width:1140px}
.p-studio .topbar{background:rgba(233,234,238,.94); border-bottom:1px solid #C9CBD2}
.p-studio .logo{font-family:"IBM Plex Mono",monospace; font-size:.95rem; letter-spacing:.04em}
.p-studio .logo::after{content:" ●REC"; color:#D92626; font-size:.68rem; animation:lampPulse 1.6s steps(2) infinite}
.p-studio .btn{border-radius:8px; font-family:"IBM Plex Mono",monospace; font-size:.78rem; letter-spacing:.08em;
  text-transform:uppercase; transition:transform .15s ease, background-color .15s ease}
.p-studio .btn-dark{background:#14161A; border-color:#14161A}
.p-studio .btn-dark:hover{background:#4C1D95; border-color:#4C1D95; transform:translateY(-1px)}
.p-studio .btn-ghost{background:#fff}
.p-studio .subhero{background-color:#E9EAEE;
  background-image:linear-gradient(#D6D8DE 1px,transparent 1px),linear-gradient(90deg,#D6D8DE 1px,transparent 1px);
  background-size:26px 26px; padding:44px 0 0}
.p-studio .subhero-in{display:grid; grid-template-columns:1.1fr .9fr; gap:30px; align-items:end}
.p-studio .subhero .tag{background:#14161A; color:#fff; border:0; border-radius:4px; font-family:"IBM Plex Mono",monospace;
  font-size:.68rem; letter-spacing:.24em}
.p-studio .subhero h1{font-size:clamp(2.4rem,5.6vw,4.2rem)}
.p-studio .subhero h1 .ver{color:#4C1D95}
.p-studio .lab-strip{display:flex; gap:8px; margin-top:16px; font-family:"IBM Plex Mono",monospace; font-size:.7rem}
.p-studio .lab-strip span{border:1px solid #14161A; border-radius:4px; padding:.3rem .6rem; background:#fff}
.p-studio .lab-strip span.hot{background:#14161A; color:#7CFC9A}
.p-studio .subhero-art{align-items:flex-end}
.p-studio .hero-wave{display:none}
.p-studio .demo-card{background:#14161A; border:0; border-radius:18px; color:#ECEAF2; margin-top:26px;
  box-shadow:0 30px 70px rgba(20,22,26,.35)}
.p-studio .demo-card h2{color:#fff; font-size:1.3rem}
.p-studio .demo-card h2 .live-dot{display:inline-block; width:10px; height:10px; border-radius:50%; background:#7CFC9A; margin-right:8px; animation:lampPulse 1.4s steps(2) infinite}
.p-studio .demo-card .muted{color:#8E8EA0}
.p-studio .versions{counter-reset:ch; gap:12px}
.p-studio .version{background:#1D1F26; border:1px solid #33363F; border-radius:12px; padding-top:38px; position:relative;
  transition:border-color .25s ease, transform .25s ease}
.p-studio .version:hover{transform:translateY(-3px); border-color:#7C5CD6}
.p-studio .version::before{content:""; position:absolute; top:15px; left:50%; transform:translateX(-50%);
  width:9px; height:9px; border-radius:50%; background:#3A3D47; transition:background-color .3s}
.p-studio .version:has(.wave.playing)::before{background:#7CFC9A; box-shadow:0 0 10px #7CFC9A}
.p-studio .version::after{counter-increment:ch; content:"CH-0" counter(ch); position:absolute; top:10px; left:12px;
  font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.14em; color:#8E8EA0}
.p-studio .version .ch-fader{width:34px; height:74px; border-radius:6px; background:#0C0D11; border:1px solid #33363F;
  margin:10px auto 4px; position:relative}
.p-studio .version .ch-fader::after{content:""; position:absolute; left:4px; right:4px; height:10px; border-radius:3px; background:#E9EAEE}
.p-studio .version:nth-child(1) .ch-fader::after{top:12px}
.p-studio .version:nth-child(2) .ch-fader::after{top:32px}
.p-studio .version:nth-child(3) .ch-fader::after{top:48px}
.p-studio .version h3{color:#fff}
.p-studio .wave{background:#0C0D11; border-color:#33363F}
.p-studio .wave path{stroke:#B9A7FF}
.p-studio .stacked{border-radius:8px; border:1px solid #33363F; overflow:hidden}
.p-studio .s-orig{background:#7C5CD6}
.p-studio .s-ai{background:#E9EAEE; color:#14161A}
.p-studio .s-slow{background:#33363F; color:#C9CAD2}
.p-studio .meanings .meaning{background:#fff; border:1px solid #C9CBD2; border-radius:10px; box-shadow:none;
  border-top:4px solid #14161A}
.p-studio .meaning .num{font-family:"IBM Plex Mono",monospace; color:#4C1D95}
.p-studio .salesbox{background:#fff; border:1px solid #14161A; border-left:8px solid #4C1D95; border-radius:0 12px 12px 0;
  box-shadow:6px 6px 0 #14161A}
.p-studio .stickybar{background:#fff; border-top:2px solid #14161A}
.p-studio footer{border-top:1px solid #C9CBD2; color:#6B6E77}
.p-studio :focus-visible{outline:2px solid #4C1D95; outline-offset:2px}
.js .p-studio .reveal,.js .p-studio .demo-card.reveal{opacity:0; transform:translateY(24px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.3,.8,.3,1)}
.js .p-studio .reveal.visible,.js .p-studio .demo-card.reveal.visible{opacity:1; transform:none}

/* ---------- 05 DIVECLUB: kinowe zejście / ocean editorial ----------
   DNA: głębia i spokój — atramentowy ocean, wielka jasna szeryfa,
   jedna wąska kolumna, cennik jak strefy głębokości.
   Ruch: powolny, filmowy dryf + bąbelki. */
body.p-diveclub{background:#031622; color:#EAF6FD;
  font-family:Inter,"Segoe UI",Roboto,sans-serif}
body.p-diveclub h1,body.p-diveclub h2,body.p-diveclub h3{font-family:Fraunces,Georgia,serif; font-weight:400;
  letter-spacing:-.015em; line-height:1.08}
body.p-diveclub h1 em,body.p-diveclub h2 em{font-style:italic; color:#7DD3FC}
.p-diveclub .wrap{max-width:880px}
.p-diveclub .topbar{background:rgba(3,22,34,.85); backdrop-filter:blur(10px); border-bottom:1px solid rgba(125,211,252,.18); color:#EAF6FD}
.p-diveclub .logo{color:#EAF6FD; font-family:Fraunces,Georgia,serif; font-style:italic}
.p-diveclub .logo span{color:#7DD3FC}
.p-diveclub .btn{border-radius:999px; font-weight:600; transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease, background-color .3s ease}
.p-diveclub .btn-dark{background:#EAF6FD; border-color:#EAF6FD; color:#031622}
.p-diveclub .btn-dark:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(125,211,252,.35)}
.p-diveclub .btn-ghost{background:transparent; color:#EAF6FD; border-color:rgba(234,246,253,.4)}
.p-diveclub .btn-ghost:hover{border-color:#7DD3FC}
.p-diveclub .subhero{background:linear-gradient(180deg,#0A4A73 0%,#062A44 45%,#031622 100%); color:#fff;
  min-height:92svh; display:flex; flex-direction:column; justify-content:flex-end; padding:120px 0 0; position:relative; overflow:hidden}
.p-diveclub .subhero::before,.p-diveclub .subhero::after{content:""; position:absolute; top:-10%; bottom:0; width:110px;
  background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 85%); transform:skewX(-12deg); pointer-events:none; animation:sway 8s ease-in-out infinite alternate}
.p-diveclub .subhero::before{left:8%}
.p-diveclub .subhero::after{right:12%; animation-delay:-4s; width:70px}
.p-diveclub .subhero-in{position:relative; z-index:1; display:block; text-align:center; max-width:800px}
.p-diveclub .subhero .tag{background:rgba(125,211,252,.14); color:#BAE6FD; border:1px solid rgba(125,211,252,.35);
  border-radius:999px; letter-spacing:.28em; font-size:.68rem}
.p-diveclub .subhero h1{font-size:clamp(3rem,9vw,6.4rem); font-style:italic}
.p-diveclub .subhero .sub{color:#A9CDE3; font-size:1.15rem; max-width:52ch; margin:0 auto 1.6rem}
.p-diveclub .subhero .depth-line{display:flex; align-items:center; gap:12px; justify-content:center; color:#5E87A3;
  font-size:.75rem; letter-spacing:.3em; margin:26px 0 0}
.p-diveclub .subhero .depth-line::before,.p-diveclub .subhero .depth-line::after{content:""; height:1px; width:min(180px,30vw); background:linear-gradient(90deg,transparent,rgba(125,211,252,.5))}
.p-diveclub .subhero .depth-line::after{background:linear-gradient(90deg,rgba(125,211,252,.5),transparent)}
.p-diveclub .subhero-art{justify-content:center}
.p-diveclub .subhero-art svg{stroke:#7DD3FC}
.p-diveclub .hero-wave{display:block; width:100%; height:90px; margin:40px 0 0}
.p-diveclub main.wrap{padding-top:10px}
.p-diveclub .section-title{text-align:center; font-style:italic; font-size:clamp(1.9rem,4.5vw,2.8rem); margin-top:70px}
.p-diveclub .section-sub{text-align:center; color:#8FB4CC}
.p-diveclub .pricing{grid-template-columns:1fr; max-width:620px; margin:0 auto; gap:0}
.p-diveclub .price{background:rgba(234,246,253,.04); border:1px solid rgba(125,211,252,.22); border-radius:18px; color:#EAF6FD;
  box-shadow:none; margin-bottom:-1px; padding:30px; transition:background-color .4s ease, transform .4s cubic-bezier(.2,.8,.3,1)}
.p-diveclub .price:hover{background:rgba(125,211,252,.09); transform:translateY(-3px)}
.p-diveclub .price .muted{color:#8FB4CC}
.p-diveclub .price .amount{color:#fff; font-size:2.2rem}
.p-diveclub .price.featured{background:linear-gradient(180deg,rgba(125,211,252,.16),rgba(125,211,252,.05)); border-color:#7DD3FC}
.p-diveclub .rows{background:transparent; border:1px solid rgba(125,211,252,.22); border-radius:18px; overflow:hidden}
.p-diveclub .row{border-bottom:1px solid rgba(125,211,252,.14)}
.p-diveclub .row strong{color:#7DD3FC}
.p-diveclub .meanings{grid-template-columns:repeat(3,1fr)}
.p-diveclub .meaning{background:transparent; border:1px solid rgba(125,211,252,.22); border-radius:16px; box-shadow:none; text-align:center}
.p-diveclub .meaning h3{color:#fff}
.p-diveclub .meaning p{color:#8FB4CC}
.p-diveclub .demo-card{background:rgba(234,246,253,.05); border:1px solid rgba(125,211,252,.25); border-radius:18px; box-shadow:none; color:#EAF6FD}
.p-diveclub .demo-card h2{color:#fff}
.p-diveclub .demo-card .muted{color:#8FB4CC}
.p-diveclub .inline-form input{background:rgba(3,22,34,.6); border:1px solid rgba(125,211,252,.35); color:#fff; border-radius:999px}
.p-diveclub .inline-form input::placeholder{color:#5E87A3}
.p-diveclub .salesbox{background:#EAF6FD; color:#031622; border:0; border-radius:24px; box-shadow:none; text-align:center}
.p-diveclub .salesbox h2{font-style:italic}
.p-diveclub .salesbox ul{list-style:none; margin-left:0}
.p-diveclub .salesbox .btn-dark{background:#031622; border-color:#031622}
.p-diveclub .salesbox .btn-ghost{background:transparent; color:#031622; border-color:#031622}
.p-diveclub .stickybar{background:#031622; border-top:1px solid rgba(125,211,252,.2); color:#EAF6FD}
.p-diveclub footer{border-top:1px solid rgba(125,211,252,.18); color:#5E87A3}
.p-diveclub :focus-visible{outline:2px solid #7DD3FC; outline-offset:2px}
.js .p-diveclub .reveal,.js .p-diveclub .demo-card.reveal{opacity:0; transform:translateY(34px);
  transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1)}
.js .p-diveclub .reveal.visible,.js .p-diveclub .demo-card.reveal.visible{opacity:1; transform:none}

/* ---------- 06 LOGBOOK: analogowy dziennik / papier + pieczątki ----------
   DNA: papierowy logbook — kremowy papier, linie zeszytu, mono maszynowe,
   pieczątki i odręczne notatki. Ruch: prawie żaden — pieczątka i koniec. */
body.p-logbook{background:#EFE9D8; color:#23201A;
  font-family:"Courier New",Courier,monospace}
body.p-logbook h1,body.p-logbook h2,body.p-logbook h3{font-family:"Courier New",Courier,monospace; font-weight:700;
  text-transform:uppercase; letter-spacing:.02em; line-height:1.2}
.p-logbook .wrap{max-width:980px}
.p-logbook .topbar{background:#F5F0E4; border-bottom:2px solid #23201A}
.p-logbook .logo{font-family:"Courier New",monospace; font-weight:700; text-transform:uppercase; font-size:1rem}
.p-logbook .logo::before{content:"№ ";}
.p-logbook .logo span{color:#6B6555}
.p-logbook .btn{border-radius:3px; border:2px solid #23201A; font-family:"Courier New",monospace; font-weight:700;
  text-transform:uppercase; font-size:.8rem; letter-spacing:.06em; transition:none}
.p-logbook .btn-dark{background:#23201A; color:#F5F0E4}
.p-logbook .btn-dark:hover{background:#1D4ED8; border-color:#1D4ED8; transform:none; box-shadow:none}
.p-logbook .btn-ghost{background:transparent}
.p-logbook .btn-ghost:hover{border-color:#1D4ED8; color:#1D4ED8; transform:none}
.p-logbook .subhero{background:#F5F0E4; background-image:repeating-linear-gradient(180deg,transparent 0 30px,#E2DCC8 30px 31px);
  padding:44px 0 0; border-bottom:2px solid #23201A}
.p-logbook .subhero-in{display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center}
.p-logbook .subhero .tag{background:transparent; color:#1D4ED8; border:2px solid #1D4ED8; border-radius:3px;
  font-family:"Courier New",monospace; font-weight:700; transform:rotate(-3deg); display:inline-block}
.p-logbook .subhero h1{font-size:clamp(2rem,5.4vw,3.6rem); text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:8px}
.p-logbook .subhero .sub{font-size:.95rem; max-width:52ch}
.p-logbook .log-stamp{border:3px double #B91C1C; color:#B91C1C; border-radius:6px; padding:14px 18px; text-align:center;
  transform:rotate(4deg); font-weight:700; text-transform:uppercase; font-size:.8rem; line-height:1.7; max-width:230px}
.p-logbook .log-stamp strong{display:block; font-size:1.5rem}
.p-logbook .hand{font-family:Caveat,"Segoe Script",cursive; font-size:1.35rem; color:#1D4ED8; transform:rotate(-2deg); display:inline-block}
.p-logbook .subhero-art{display:none}
.p-logbook .hero-wave{display:none}
.p-logbook .demo-card{background:#FDFBF3; border:2px solid #23201A; border-radius:4px; box-shadow:5px 5px 0 rgba(35,32,26,.18); margin-top:28px}
.p-logbook .demo-card h2{font-size:1.05rem; border-bottom:2px solid #23201A; padding-bottom:10px}
.p-logbook .profile{border-bottom:1px dashed #B9B09A; padding-bottom:16px}
.p-logbook .avatar.big{border-radius:4px; border:2px solid #23201A; background:#23201A; color:#F5F0E4; font-family:"Courier New",monospace}
.p-logbook .stats3 .stat{background:#FDFBF3; border:2px solid #23201A; border-radius:4px; border-top:6px solid #1D4ED8; box-shadow:none}
.p-logbook .stat-n{font-family:"Courier New",monospace; color:#23201A}
.p-logbook .goal .vote-track{background:#E2DCC8; border:1px solid #23201A; border-radius:0}
.p-logbook .dive-fill{background:#1D4ED8}
.p-logbook .table-wrap{border:2px solid #23201A; border-radius:4px; background:#FDFBF3; box-shadow:5px 5px 0 rgba(35,32,26,.18)}
.p-logbook .dive-table thead th{background:#23201A; color:#F5F0E4; letter-spacing:.14em; font-size:.72rem}
.p-logbook .dive-table tbody tr{transition:none}
.p-logbook .dive-table tbody tr:hover{background:#F0EAD6}
.p-logbook .dive-table tbody tr:first-child td{animation:stampIn .3s steps(2)}
.p-logbook .salesbox{background:#FDFBF3; border:2px dashed #B91C1C; border-radius:4px; box-shadow:none}
.p-logbook .salesbox h2{color:#B91C1C}
.p-logbook .stickybar{background:#F5F0E4; border-top:2px solid #23201A}
.p-logbook footer{border-top:2px solid #23201A; color:#6B6555}
.p-logbook :focus-visible{outline:3px solid #1D4ED8; outline-offset:2px}
.js .p-logbook .reveal,.js .p-logbook .demo-card.reveal{opacity:0; transform:none; transition:opacity .3s steps(3)}
.js .p-logbook .reveal.visible,.js .p-logbook .demo-card.reveal.visible{opacity:1; transform:none}

/* ---------- 07 MAPA: ekspedycja / dashboard kartograficzny ----------
   DNA: mapa topograficzna — pergamin, poziomice, pomarańcz sygnałowy,
   współrzędne mono, panel boczny. Ruch: puls markera, morf dna (JS). */
body.p-mapa{background:#EFEDE4; color:#1A241F;
  font-family:"Space Grotesk",Inter,"Segoe UI",sans-serif}
body.p-mapa h1,body.p-mapa h2,body.p-mapa h3{font-family:"Space Grotesk",Inter,sans-serif; font-weight:700;
  letter-spacing:-.02em; line-height:1.05}
body.p-mapa .coords{font-family:"IBM Plex Mono",monospace}
.p-mapa .wrap{max-width:1180px}
.p-mapa .topbar{background:#1A241F; border-bottom:3px solid #E85D2A; color:#EFEDE4}
.p-mapa .logo{color:#EFEDE4; font-family:"IBM Plex Mono",monospace; font-size:.95rem}
.p-mapa .logo span{color:#E85D2A}
.p-mapa .exp-note{font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.18em; color:#9DB4A6;
  border:1px solid #3A4A42; padding:.35rem .8rem; border-radius:4px}
.p-mapa .btn{border-radius:6px; font-weight:700; transition:transform .2s cubic-bezier(.3,.8,.3,1), background-color .2s ease}
.p-mapa .btn-dark{background:#E85D2A; border-color:#E85D2A; color:#1A241F}
.p-mapa .btn-dark:hover{background:#1A241F; border-color:#1A241F; color:#EFEDE4; transform:translateY(-2px)}
.p-mapa .btn-ghost{background:transparent; color:#1A241F; border-color:#1A241F}
.p-mapa .topbar .btn-dark{background:#E85D2A; border-color:#E85D2A; color:#1A241F}
.p-mapa .topbar .btn-ghost{color:#EFEDE4; border-color:#3A4A42}
.p-mapa .subhero{background-color:#E7E3D3;
  background-image:repeating-radial-gradient(circle at 78% 30%, transparent 0 14px, rgba(26,36,31,.10) 14px 15px),
  radial-gradient(rgba(26,36,31,.14) 1px, transparent 1px); background-size:auto, 22px 22px;
  padding:46px 0 0; border-bottom:3px solid #1A241F}
.p-mapa .subhero-in{display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center}
.p-mapa .subhero .tag{background:#1A241F; color:#EFEDE4; border:0; border-radius:4px; font-family:"IBM Plex Mono",monospace;
  font-size:.68rem; letter-spacing:.24em}
.p-mapa .subhero h1{font-size:clamp(2.4rem,5.6vw,4.4rem)}
.p-mapa .subhero h1 .pin{color:#E85D2A}
.p-mapa .subhero .sub{color:#4A5A51}
.p-mapa .subhero .coords{font-size:.78rem; color:#1E4D3B; letter-spacing:.08em; margin-top:10px}
.p-mapa .subhero-art{background:#1A241F; border-radius:12px 12px 0 0; padding:18px; border:3px solid #1A241F; border-bottom:0}
.p-mapa .subhero-art svg{stroke:#EFEDE4}
.p-mapa .hero-wave{display:none}
.p-mapa .filters .pill{border-radius:6px; font-family:"IBM Plex Mono",monospace; font-size:.75rem; letter-spacing:.06em;
  text-transform:uppercase; border:1.5px solid #1A241F; background:transparent; transition:background-color .2s ease, color .2s ease}
.p-mapa .filters .pill.on{background:#1A241F; color:#EFEDE4}
.p-mapa .spots{grid-template-columns:repeat(3,1fr)}
.p-mapa .spot{border:1.5px solid #1A241F; border-left:8px solid #1E4D3B; border-radius:8px; background:#F7F5EC;
  font-family:"Space Grotesk",sans-serif; transition:transform .2s cubic-bezier(.3,.8,.3,1), background-color .2s ease}
.p-mapa .spot:hover{transform:translateY(-3px)}
.p-mapa .spot.on{border-color:#E85D2A; border-width:1.5px 1.5px 1.5px 8px; background:#fff; box-shadow:5px 5px 0 #E85D2A}
.p-mapa .spot strong{font-size:1.2rem}
.p-mapa .depth-zone{border-top:3px solid #1A241F; margin-top:34px}
.p-mapa .spot-card{background:#1A241F; color:#EFEDE4; border-radius:10px; padding:22px; position:sticky; top:80px}
.p-mapa .spot-card h3{color:#fff}
.p-mapa .spot-card .muted{color:#9DB4A6}
.p-mapa .spot-card .btn-ghost{background:transparent; color:#EFEDE4; border-color:rgba(239,237,228,.55)}
.p-mapa .spot-card .btn-ghost:hover{border-color:#E85D2A; color:#fff}
.p-mapa .salesbox{background:#1A241F; color:#EFEDE4; border:0; border-left:8px solid #E85D2A; border-radius:0 12px 12px 0; box-shadow:none}
.p-mapa .salesbox .btn-dark{background:#E85D2A; border-color:#E85D2A}
.p-mapa .salesbox .btn-ghost{color:#EFEDE4; border-color:#3A4A42}
.p-mapa .stickybar{background:#1A241F; color:#EFEDE4; border-top:3px solid #E85D2A}
.p-mapa footer{background:#1A241F; color:#9DB4A6; border:0}
.p-mapa :focus-visible{outline:3px solid #E85D2A; outline-offset:2px}
.js .p-mapa .reveal{opacity:0; transform:translateY(20px); transition:opacity .5s ease, transform .5s cubic-bezier(.3,.8,.3,1)}
.js .p-mapa .reveal.visible{opacity:1; transform:none}

/* ---------- 08 JOBS: instytucja / szwajcarska siatka ----------
   DNA: urząd pracy przyszłości — biel, czerń, jeden głęboki zielony,
   ostre krawędzie, małe kapsloki, gęsta informacja.
   Ruch: wyłącznie mikro (120 ms), zero ozdobników. */
body.p-jobs{background:#fff; color:#0A0A0A;
  font-family:Inter,Helvetica,Arial,"Segoe UI",sans-serif}
body.p-jobs h1,body.p-jobs h2,body.p-jobs h3{font-family:Inter,Helvetica,Arial,sans-serif; font-weight:800;
  letter-spacing:-.03em; line-height:1.04}
.p-jobs .wrap{max-width:1020px}
.p-jobs .topbar{background:#fff; border-bottom:2px solid #0A0A0A}
.p-jobs .topbar-in{height:56px}
.p-jobs .logo{font-weight:800; letter-spacing:-.02em}
.p-jobs .logo span{color:#1F5C2E}
.p-jobs .micro-label{font-size:.68rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:#6B6B6B}
.p-jobs .btn{border-radius:4px; font-weight:700; font-size:.85rem; letter-spacing:.01em; transition:background-color .12s ease, color .12s ease}
.p-jobs .btn-dark{background:#0A0A0A; border-color:#0A0A0A}
.p-jobs .btn-dark:hover{background:#1F5C2E; border-color:#1F5C2E; transform:none; box-shadow:none}
.p-jobs .btn-ghost{background:#fff}
.p-jobs .btn-ghost:hover{border-color:#1F5C2E; color:#1F5C2E; transform:none}
.p-jobs .subhero{background:#fff; padding:56px 0 0; border-bottom:2px solid #0A0A0A}
.p-jobs .subhero-in{display:block; max-width:1020px}
.p-jobs .subhero .tag{background:#EAF3EA; color:#1F5C2E; border:1px solid #1F5C2E; border-radius:4px;
  font-size:.68rem; letter-spacing:.22em; font-weight:700}
.p-jobs .subhero h1{font-size:clamp(2.6rem,6vw,4.6rem); max-width:16ch}
.p-jobs .subhero h1 .u{color:#1F5C2E}
.p-jobs .subhero .sub{color:#4A4A4A; max-width:60ch}
.p-jobs .subhero-art{display:none}
.p-jobs .hero-wave{display:none}
.p-jobs .rule{border:0; border-top:2px solid #0A0A0A; margin:0}
.p-jobs .demo-card{background:#fff; border:2px solid #0A0A0A; border-radius:4px; box-shadow:none; margin-top:24px; padding:0; overflow:hidden}
.p-jobs .filterbar{position:sticky; top:56px; z-index:20; background:#fff; border-bottom:2px solid #0A0A0A; padding:14px 24px;
  display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.p-jobs .search{border:2px solid #0A0A0A; border-radius:4px; font-size:.9rem}
.p-jobs .search:focus{outline:none; border-color:#1F5C2E; box-shadow:3px 3px 0 #1F5C2E}
.p-jobs .filters{margin:0}
.p-jobs .pill{border-radius:4px; border:1.5px solid #0A0A0A; background:#fff; font-size:.78rem; font-weight:700; transition:background-color .12s ease, color .12s ease}
.p-jobs .pill.on{background:#0A0A0A; color:#fff}
.p-jobs .offers{gap:0; margin:0; padding:0 24px 24px}
.p-jobs .offer{border:0; border-top:1px solid #E2E2E2; border-radius:0; padding:18px 4px; animation:none; transition:background-color .12s ease}
.p-jobs .offer:first-child{border-top:0}
.p-jobs .offer:hover{background:#F5F8F4; transform:none; box-shadow:none}
.p-jobs .offer h3{font-size:1.02rem}
.p-jobs .firm-logo{border-radius:4px; width:44px; height:44px; flex-basis:44px}
.p-jobs .firm-logo.div-bg{background:#0A0A0A; color:#fff}
.p-jobs .ptag{border-radius:4px; background:#F1F1F1; border:1px solid #E2E2E2; font-size:.72rem}
.p-jobs .demo-card.b2b{background:#0A0A0A; border:2px solid #0A0A0A; border-radius:4px; color:#fff}
.p-jobs .b2b .meaning{background:#161616; border:1px solid #333}
.p-jobs .salesbox{border:2px solid #0A0A0A; border-radius:4px; box-shadow:6px 6px 0 #1F5C2E; background:#fff}
.p-jobs .salesbox h2{font-size:1.5rem}
.p-jobs .stickybar{background:#0A0A0A; color:#fff; border:0}
.p-jobs .stickybar .btn-dark{background:#fff; color:#0A0A0A; border-color:#fff}
.p-jobs footer{border-top:2px solid #0A0A0A; color:#6B6B6B}
.p-jobs :focus-visible{outline:3px solid #1F5C2E; outline-offset:2px}
.js .p-jobs .reveal,.js .p-jobs .demo-card.reveal{opacity:0; transform:none; transition:opacity .25s ease}
.js .p-jobs .reveal.visible,.js .p-jobs .demo-card.reveal.visible{opacity:1}
.p-jobs .offer{animation:none !important}

/* ---------- 09 FOOD: bistro editorial / ciepła karta ----------
   DNA: sąsiedzkie bistro — krem, pomidor, bazylia, menu jak w ramce,
   odręczne dopiski, paragon. Ruch: miękka sprężyna, hover-uniesienia. */
body.p-food{background:#FBF6EC; color:#2A1E17;
  font-family:Georgia,"Times New Roman",serif}
body.p-food h1,body.p-food h2,body.p-food h3{font-family:Fraunces,Georgia,serif; font-weight:600;
  letter-spacing:-.015em; line-height:1.1}
.p-food .wrap{max-width:1080px}
.p-food .topbar{background:#2A1E17; border-bottom:3px solid #C93A22; color:#FBF6EC}
.p-food .logo{color:#FBF6EC; font-style:italic}
.p-food .logo span{color:#E8A33D}
.p-food .topbar .btn-dark{background:#C93A22; border-color:#C93A22}
.p-food .btn{border-radius:999px; font-family:Fraunces,Georgia,serif; font-weight:600; transition:transform .25s cubic-bezier(.34,1.56,.64,1), background-color .2s ease, box-shadow .2s ease}
.p-food .btn-dark{background:#2A1E17; border-color:#2A1E17; color:#FBF6EC}
.p-food .btn-dark:hover{background:#C93A22; border-color:#C93A22; transform:translateY(-2px); box-shadow:0 10px 22px rgba(201,58,34,.3)}
.p-food .btn-ghost{background:transparent; border-color:#C9B99A; color:#2A1E17}
.p-food .btn-ghost:hover{border-color:#2A1E17; transform:translateY(-2px)}
.p-food .subhero{background:#FBF6EC; padding:40px 0 0; overflow:hidden; position:relative}
.p-food .subhero::before{content:""; position:absolute; inset:0 0 auto 0; height:10px;
  background:repeating-linear-gradient(90deg,#C93A22 0 26px,#FBF6EC 26px 34px,#2A1E17 34px 60px,#FBF6EC 60px 68px)}
.p-food .subhero-in{display:grid; grid-template-columns:1.15fr .85fr; gap:34px; align-items:center; padding-top:26px}
.p-food .subhero .tag{background:#EAF0DA; color:#3F6212; border:1px solid #3F6212; border-radius:999px;
  font-family:Georgia,serif; font-style:italic}
.p-food .subhero h1{font-size:clamp(2.6rem,6vw,4.6rem)}
.p-food .subhero h1 em{font-style:italic; color:#C93A22}
.p-food .subhero .sub{font-style:italic; color:#6E5B4C; font-size:1.1rem}
.p-food .today-card{background:#fffdf7; border:2px solid #2A1E17; border-radius:14px; padding:22px; transform:rotate(1.5deg);
  box-shadow:6px 6px 0 rgba(42,30,23,.14); position:relative}
.p-food .today-card::before{content:""; position:absolute; top:-12px; left:50%; transform:translateX(-50%) rotate(-2deg);
  width:92px; height:24px; background:rgba(232,163,61,.5); border:1px solid rgba(42,30,23,.2)}
.p-food .today-card h3{font-size:1.05rem}
.p-food .today-card .hand{font-family:Caveat,"Segoe Script",cursive; font-size:1.5rem; color:#C93A22}
.p-food .subhero-art{display:none}
.p-food .hero-wave{display:none}
.p-food .demo-card{background:#fffdf7; border:2px solid #2A1E17; border-radius:14px; box-shadow:6px 6px 0 rgba(42,30,23,.14); margin-top:30px}
.p-food .cartbar{border-bottom:2px dashed #D9CFBA; padding-bottom:14px}
.p-food .pill{border-radius:999px; border:1.5px solid #2A1E17; background:transparent; font-family:Georgia,serif; font-style:italic; transition:all .2s cubic-bezier(.34,1.56,.64,1)}
.p-food .pill.on{background:#2A1E17; color:#FBF6EC}
.p-food .pill:hover{transform:translateY(-2px)}
.p-food .dishes{grid-template-columns:1fr 1fr; gap:0 28px}
.p-food .dish{background:transparent; border:0; border-bottom:1px dashed #D9CFBA; border-radius:0; padding:22px 4px; transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.p-food .dish:hover{transform:translateX(4px)}
.p-food .dish:first-child{border-top:1px dashed #D9CFBA}
.p-food .dish h3{font-size:1.3rem}
.p-food .dish h3 .hit{background:#C93A22; font-family:Georgia,serif; font-style:italic}
.p-food .dish-thumb{border:2px solid #3F6212; background:#EAF0DA; font-style:italic}
.p-food .demo-card.receipt{background:#fffdf7; border-style:dashed; font-size:.95rem}
.p-food .salesbox{background:#2A1E17; color:#FBF6EC; border:0; border-radius:18px; box-shadow:none}
.p-food .salesbox h2{font-style:italic}
.p-food .salesbox h2 .smak{color:#E8A33D}
.p-food .salesbox .btn-dark{background:#C93A22; border-color:#C93A22}
.p-food .salesbox .btn-ghost{color:#FBF6EC; border-color:#6E5B4C}
.p-food .stickybar{background:#2A1E17; color:#FBF6EC; border-top:3px solid #C93A22}
.p-food footer{border-top:2px solid #2A1E17; color:#6E5B4C}
.p-food :focus-visible{outline:3px solid #C93A22; outline-offset:2px}
.js .p-food .reveal,.js .p-food .demo-card.reveal{opacity:0; transform:translateY(22px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.34,1.4,.64,1)}
.js .p-food .reveal.visible,.js .p-food .demo-card.reveal.visible{opacity:1; transform:none}
.js .p-food .dish{animation:dishIn .55s cubic-bezier(.34,1.4,.64,1) both}

/* ---------- poprawki kompozycyjne po przebudowie HTML ---------- */
.p-diveclub .hero-wave{display:none}
.p-freestyle .demo-card .eq{margin:12px 24px 4px}
.p-freestyle .demo-card .eq span{background:#3A3A44}
.p-freestyle .demo-card .eq.live span{background:#E8FF47}
/* fadery kanałów rysowane tłem (bez zmian w HTML): tor + gałka na stronę */
.p-studio .version{background-color:#1D1F26;
  background-image:linear-gradient(#E9EAEE,#E9EAEE),linear-gradient(#33363F,#33363F);
  background-size:26px 10px,6px 80px;
  background-position:right 14px top 66px,right 24px top 56px;
  background-repeat:no-repeat; padding-right:60px}
.p-studio .version:nth-child(2){background-position:right 14px top 94px,right 24px top 56px}
.p-studio .version:nth-child(3){background-position:right 14px top 114px,right 24px top 56px}
.js .p-food .dish:nth-child(2){animation-delay:.06s}
.js .p-food .dish:nth-child(3){animation-delay:.12s}
.js .p-food .dish:nth-child(4){animation-delay:.18s}
.js .p-food .dish:nth-child(5){animation-delay:.24s}
.js .p-food .dish:nth-child(6){animation-delay:.3s}

/* ---------- responsywność 9 marek ---------- */
@media(max-width:900px){
  .p-versus .subhero-in{grid-template-columns:1fr}
  .p-versus .subhero-in>div:first-child{padding:48px 20px}
  .p-versus .salesbox{grid-template-columns:1fr}
  .p-studio .subhero-in,.p-food .subhero-in,.p-mapa .subhero-in,.p-logbook .subhero-in,.p-quiz .subhero-in{grid-template-columns:1fr}
  .p-versus .versus-wrap{grid-template-columns:1fr}
  .p-versus .vs{margin:0 auto}
  .p-versus .verse-col:last-of-type{text-align:left}
  .p-quiz .player{grid-template-columns:1fr; justify-items:center; text-align:center}
  .p-quiz .answers{grid-template-columns:1fr 1fr}
  .p-mapa .exp-note{display:none}
  .p-freestyle .meanings,.p-diveclub .meanings{grid-template-columns:1fr}
  .p-food .dishes{grid-template-columns:1fr}
  .p-jobs .filterbar{position:static}
}
@media(max-width:600px){
  .p-freestyle .subhero-in{padding-top:110px}
  .p-quiz .answers{grid-template-columns:1fr}
  .p-diveclub .subhero{min-height:auto}
  .p-logbook .log-stamp{transform:rotate(0); max-width:none}
  .p-food .today-card{transform:rotate(0)}
}

/* ---------- reduced motion: jedna zasada dla 9 języków ---------- */
@media (prefers-reduced-motion:reduce){
  .p-freestyle .ticker-track,.p-freestyle .chip::after,.p-quiz .console-lights i.on,
  .p-diveclub .subhero::before,.p-diveclub .subhero::after,.p-studio .logo::after,
  .p-studio .demo-card h2 .live-dot{animation:none}
  .p-diveclub .subhero::before,.p-diveclub .subhero::after{display:none}
  .js .p-freestyle .reveal,.js .p-versus .reveal,.js .p-quiz .reveal,.js .p-studio .reveal,
  .js .p-diveclub .reveal,.js .p-logbook .reveal,.js .p-mapa .reveal,.js .p-jobs .reveal,.js .p-food .reveal,
  .js .p-social .reveal,.js .p-finanse .reveal,.js .p-slowo .reveal,
  .js .p-freestyle .demo-card.reveal,.js .p-versus .demo-card.reveal,.js .p-quiz .demo-card.reveal,
  .js .p-studio .demo-card.reveal,.js .p-diveclub .demo-card.reveal,.js .p-logbook .demo-card.reveal,
  .js .p-mapa .demo-card.reveal,.js .p-jobs .demo-card.reveal,.js .p-food .demo-card.reveal,
  .js .p-social .demo-card.reveal,.js .p-finanse .demo-card.reveal,.js .p-slowo .demo-card.reveal{opacity:1; transform:none; transition:none}
}

/* ============================================================
   10–12 NOWE MARKI + karty-art na homepage (bez zdjęć)
   ============================================================ */
/* tagi i avatary */
.tag.social{background:#FFE4E6; color:#9F1239; border-color:transparent}
.tag.finance{background:#FEF3C7; color:#92400E; border-color:transparent}
.tag.word{background:#DBEAFE; color:#1E3A8A; border-color:transparent}
.avatar.social-bg{background:#FFE4E6; color:#9F1239; width:56px; height:56px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700}
/* karty-art na homepage zamiast zdjęć */
.hphoto-art{display:flex; align-items:center; justify-content:center; aspect-ratio:16/10; overflow:hidden; background:#1a1a22}
.hphoto-art span{font-family:Georgia,serif; font-size:3.2rem; font-style:italic; color:rgba(255,255,255,.92)}
.hphoto-social{background:linear-gradient(135deg,#881337,#E11D48 60%,#FB7185)}
.hphoto-finanse{background:linear-gradient(135deg,#451A03,#92400E 60%,#F59E0B)}
.hphoto-slowo{background:linear-gradient(135deg,#172554,#1E3A8A 60%,#93C5FD)}
/* AI Lab: papier laboratoryjny w kratkę + odręczny szkic sieci (nie startupowy gradient) */
.hphoto-ai{position:relative; background-color:#FAFAF7; background-image:linear-gradient(#E5E0D2 1px,transparent 1px),linear-gradient(90deg,#E5E0D2 1px,transparent 1px),linear-gradient(#EFEAD9 1px,transparent 1px),linear-gradient(90deg,#EFEAD9 1px,transparent 1px); background-size:88px 88px,88px 88px,22px 22px,22px 22px; border-bottom:1px solid #E5E0D2}
.hphoto-ai .hphoto-ai-net{position:absolute; inset:0; width:100%; height:100%; display:block}
.hphoto-ai .hphoto-ai-formula{position:absolute; left:10px; top:8px; font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace; font-style:normal; font-size:.68rem; letter-spacing:.04em; color:#16150F; background:#fff; border:1px solid #16150F; border-radius:6px; padding:.2rem .5rem; box-shadow:2px 2px 0 #16150F; transform:rotate(-1.5deg)}
.hphoto-ai .hphoto-ai-sig{position:absolute; right:12px; bottom:4px; font-size:2rem; line-height:1.1; color:#16150F; transform:rotate(-5deg); border-bottom:2px solid #0F766E; padding:0 .12em}
.htag-social{background:#FFE4E6; color:#9F1239}
.htag-ai{background:#FAFAF7; color:#16150F; border:1px solid #16150F; font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace; letter-spacing:.14em}
.htag-finanse{background:#FEF3C7; color:#92400E}
.htag-slowo{background:#DBEAFE; color:#1E3A8A}
/* karuzela: focus + disabled na końcach */
.htrack:focus-visible{outline:2px solid #131318; outline-offset:3px}
.hbtn:disabled{opacity:.35; cursor:default; transform:none}
.hbtn:disabled:hover{background:#fff; color:#131318}

/* ---------- 10 SOCIAL: sticker-wall / plakat-kolaż ----------
   DNA: szkolny zeszyt spotyka festiwal — kremowy papier, róż, limonka,
   fiolet; naklejki krzywo, twarde cienie, odręczne dopiski.
   Krój: Archivo Black (krzyk) + Caveat (szept) + Space Grotesk (UI).
   Ruch: sprężysty pop, wiggle, taśma, slam. ZERO grzeczności. */
body.p-social{background:#FFF4E8; color:#2A0714; font-family:"Space Grotesk",Inter,"Segoe UI",Roboto,sans-serif}
body.p-social h1,body.p-social h2,body.p-social h3{font-family:"Archivo Black",Impact,"Arial Black",sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:-.01em; line-height:1.02}
body.p-social ::selection{background:#D7F452; color:#2A0714}
.p-social .wrap{max-width:1120px}
.p-social .topbar{background:#FFF4E8; border-bottom:3px solid #2A0714}
.p-social .logo{font-family:"Archivo Black",Impact,sans-serif; text-transform:uppercase; font-size:1rem}
.p-social .logo span{color:#E11D48}
.p-social .btn{border-radius:10px; border:2.5px solid #2A0714; font-weight:700; box-shadow:4px 4px 0 #2A0714; transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s cubic-bezier(.34,1.56,.64,1), background-color .15s ease}
.p-social .btn:hover{transform:translate(-2px,-2px) rotate(-.5deg); box-shadow:6px 6px 0 #2A0714}
.p-social .btn:active{transform:translate(2px,2px); box-shadow:1px 1px 0 #2A0714}
.p-social .btn-dark{background:#E11D48; border-color:#2A0714; color:#fff}
.p-social .btn-ghost{background:#fff; color:#2A0714}
/* hero-kolaż */
.wall-hero{position:relative; overflow:hidden; padding:92px 0 110px; background:#FFF4E8}
.wall-hero::before{content:""; position:absolute; width:min(560px,80vw); aspect-ratio:1; right:-140px; top:-120px; background:#D7F452; border:3px solid #2A0714; border-radius:46% 54% 52% 48%/48% 46% 54% 52%; transform:rotate(12deg)}
.wall-hero::after{content:""; position:absolute; width:220px; height:220px; left:-70px; bottom:-60px; border:26px solid #E11D48; border-radius:50%}
.wall-hero-in{position:relative; z-index:1}
.wall-eyebrow{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:0 0 14px}
.stick{display:inline-block; font-family:"Archivo Black",Impact,sans-serif; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; padding:.45rem .9rem; border:2.5px solid #2A0714; border-radius:999px}
.stick-pink{background:#E11D48; color:#fff; transform:rotate(-3deg); box-shadow:3px 3px 0 #2A0714}
.stick-line{background:#fff; transform:rotate(1.5deg)}
.wall-title{font-size:clamp(3.2rem,12vw,8.6rem); margin:0}
.wall-line{display:block}
.wall-line-b{color:#E11D48}
.wall-line-b .wall-star{color:#2A0714; font-size:.5em; vertical-align:.5em}
.wall-sub{font-size:1.12rem; max-width:44ch; margin:14px 0 0}
.wall-cta{display:flex; gap:12px; flex-wrap:wrap; margin:24px 0 0}
.wall-cta .btn{transform:rotate(-1deg)}
.wall-cta .btn + .btn{transform:rotate(1deg)}
.wall-hand{font-family:Caveat,"Segoe Script",cursive; font-size:1.7rem; color:#E11D48; transform:rotate(-2deg); margin:18px 0 0}
.wall-chip{position:absolute; z-index:1; font-weight:700; font-size:.85rem; background:#fff; border:2.5px solid #2A0714; border-radius:12px; padding:.5rem .9rem; box-shadow:4px 4px 0 #2A0714}
.wall-chip-a{top:96px; right:8%; transform:rotate(6deg); background:#7C3AED; color:#fff}
.wall-chip-b{top:220px; right:22%; transform:rotate(-5deg)}
.wall-chip-c{bottom:120px; right:6%; transform:rotate(3deg); background:#D7F452}
/* taśma */
.p-social .ticker{background:#2A0714; color:#FFF4E8; overflow:hidden; white-space:nowrap; transform:rotate(-1deg) scale(1.02); border-top:3px solid #2A0714; border-bottom:3px solid #2A0714}
.p-social .ticker-track{display:inline-flex; padding:.6rem 0; font-family:"Archivo Black",Impact,sans-serif; font-size:.9rem; letter-spacing:.06em; animation:wallSlide 20s linear infinite}
.p-social .ticker-track span{padding-right:.5rem}
@keyframes wallSlide{to{transform:translateX(-50%)}}
/* kompozytor: przyklejona kartka */
.wall-main{padding-top:8px}
.composer-card{position:relative; background:#fff; border:2.5px solid #2A0714; border-radius:16px; box-shadow:7px 7px 0 #2A0714; padding:30px 28px 24px; max-width:760px; margin:-64px auto 0; transform:rotate(-.6deg)}
.composer-card .tape{position:absolute; top:-16px; left:50%; transform:translateX(-50%) rotate(-2deg); width:130px; height:30px; background:rgba(215,244,82,.85); border:2px solid rgba(42,7,20,.25); margin:0}
.composer-card h2{font-size:1.3rem; margin:0 0 2px}
.composer-note{font-family:Caveat,"Segoe Script",cursive; font-size:1.35rem; color:#8A4A58; margin:0 0 12px}
.p-social .composer textarea{width:100%; font:inherit; font-size:1rem; padding:.9rem 1rem; border:2.5px solid #2A0714; border-radius:12px; background:#FFFDF8; resize:vertical}
.p-social .composer textarea:focus{outline:none; border-color:#E11D48; box-shadow:4px 4px 0 #E11D48}
.composer-bar{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:10px}
.char-left{font-family:"IBM Plex Mono",monospace; font-size:.85rem; font-weight:600}
/* feed: rozrzucone naklejki */
.p-social .feed{display:grid; gap:20px; max-width:760px; margin:26px auto 0}
.p-social .post{background:#fff; border:2.5px solid #2A0714; border-radius:14px; box-shadow:6px 6px 0 #2A0714; padding:20px 20px 14px; animation:slam .5s cubic-bezier(.34,1.56,.64,1) both; transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.p-social .feed .post:nth-child(2){animation-delay:.08s}
.p-social .feed .post:nth-child(3){animation-delay:.16s}
@keyframes slam{from{opacity:0; transform:scale(.92) rotate(2deg) translateY(14px)}}
.post-a{transform:rotate(-.8deg)}
.post-b{transform:rotate(.7deg)}
.post-c{transform:rotate(-.4deg)}
.p-social .post:hover{transform:rotate(0) translateY(-3px)}
.post-head{display:flex; gap:12px; align-items:center}
.post-head>div{flex:1}
.post-meta{margin:0; font-size:.8rem; color:#8A4A58}
.avatar.social-bg{width:48px; height:48px; flex:0 0 48px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; font-weight:700; background:#E11D48; color:#fff; border:2.5px solid #2A0714; transform:rotate(-4deg)}
.post-b .avatar.social-bg{background:#7C3AED; transform:rotate(3deg)}
.post-c .avatar.social-bg{background:#D7F452; color:#2A0714; transform:rotate(-2deg)}
.post-text{font-size:1.06rem; margin:.7rem 0 .4rem}
.post-foot{margin:0}
.p-social .likeBtn{transition:transform .15s cubic-bezier(.34,1.56,.64,1)}
.p-social .likeBtn:active{transform:scale(1.25) rotate(-6deg)}
.p-social .likeBtn[aria-pressed="true"]{border-color:#E11D48; color:#E11D48; background:#FFE4E6}
.p-social .followBtn[aria-pressed="true"]{background:#2A0714; color:#fff; border-color:#2A0714}
.feed-msg{font-family:Caveat,"Segoe Script",cursive; font-size:1.4rem; color:#E11D48; text-align:center; min-height:1.6em; margin:10px 0 0}
/* liczby: pasek naklejek */
.stick-strip{display:flex; gap:14px; flex-wrap:wrap; margin:44px 0 8px}
.stick-stat{flex:1 1 220px; border:2.5px solid #2A0714; border-radius:14px; padding:18px; box-shadow:5px 5px 0 #2A0714}
.stick-stat:nth-child(1){background:#D7F452; transform:rotate(-1.2deg)}
.stick-stat:nth-child(2){background:#fff; transform:rotate(.8deg)}
.stick-stat:nth-child(3){background:#E11D48; color:#fff; transform:rotate(-.6deg); border-color:#2A0714}
.stick-stat strong{display:block; font-family:"Archivo Black",Impact,sans-serif; font-size:2.1rem; line-height:1}
.stick-stat span{font-size:.9rem}
/* głosy: marginesowe notatki */
.margin-notes{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:26px 0 8px}
.note-note{margin:0; padding:22px 22px 18px; background:repeating-linear-gradient(180deg,#fff 0 30px,#F3E9D2 30px 31px); border:2.5px solid #2A0714; border-radius:6px 18px 6px 18px; box-shadow:5px 5px 0 rgba(42,7,20,.85)}
.note-note:nth-child(odd){transform:rotate(-1deg)}
.note-note:nth-child(even){transform:rotate(1deg)}
.note-note blockquote{margin:0 0 8px; font-family:Caveat,"Segoe Script",cursive; font-size:1.65rem; line-height:1.35}
.note-note figcaption{font-size:.82rem; font-weight:700; letter-spacing:.04em}
/* sprzedaż: limonkowy baner */
.p-social .sales-lime{background:#D7F452; color:#2A0714; border:3px solid #2A0714; border-radius:20px; box-shadow:8px 8px 0 #E11D48; margin:48px 0}
.p-social .sales-lime h2{font-size:clamp(1.5rem,4vw,2.2rem)}
.p-social .sales-lime .btn-dark{background:#2A0714; border-color:#2A0714; color:#D7F452}
.p-social .sales-lime .btn-ghost{background:transparent; color:#2A0714}
.p-social .stickybar{background:#2A0714; color:#FFF4E8; border-top:3px solid #E11D48}
.p-social .stickybar .btn-dark{background:#E11D48; border-color:#E11D48; box-shadow:none}
.p-social footer{border-top:3px solid #2A0714; color:#8A4A58}
.p-social :focus-visible{outline:3px solid #7C3AED; outline-offset:2px}
.js .p-social .reveal{opacity:0; transform:translateY(26px) rotate(-.6deg); transition:opacity .4s ease, transform .55s cubic-bezier(.34,1.56,.64,1)}
.js .p-social .reveal.visible{opacity:1; transform:none}
.js .p-social .composer-card.reveal.visible{transform:rotate(-.6deg)}
@media(max-width:900px){
  .wall-chip{display:none}
  .wall-hero{padding:70px 0 90px}
  .margin-notes{grid-template-columns:1fr}
  .post-head{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  .ticker-track,.p-social .post{animation:none}
  .post-a,.post-b,.post-c,.wall-cta .btn,.composer-card,.note-note,.stick-stat{transform:none}
  .js .p-social .reveal{opacity:1; transform:none; transition:none}
}

/* ---------- 11 FINANSE: księga / wyciąg instytucjonalny ----------
   DNA: zaufanie przez precyzję — papier, atrament, jedna głęboka zieleń,
   włosowe linie, liczby tabularne. Ani jednego serifa, ani jednego
   zaokrąglenia powyżej 3px, ani jednej sprężyny. Ruch: wyłącznie
   mikro 120 ms. Cisza zamiast animacji. */
body.p-finanse{background:#F7F6F1; color:#181510; font-family:Inter,Helvetica,Arial,"Segoe UI",sans-serif}
body.p-finanse h1,body.p-finanse h2,body.p-finanse h3{font-family:Inter,Helvetica,Arial,sans-serif; font-weight:800; letter-spacing:-.03em; line-height:1.04}
body.p-finanse ::selection{background:#1D4D2E; color:#fff}
.p-finanse .micro-label,.p-finanse .ledger-facts dd,.p-finanse .alloc-val,.p-finanse .sheet-table,.p-finanse .sheet-risk,.p-finanse .fig-num,.p-finanse .book-status,.p-finanse .ledger-no,.p-finanse .char-left{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace}
.p-finanse .micro-label{font-size:.68rem; font-weight:600; letter-spacing:.22em; color:#1D4D2E; margin:0 0 12px}
.p-finanse .topbar{background:#F7F6F1; border-bottom:2px solid #181510}
.p-finanse .topbar-in{height:58px}
.p-finanse .logo{font-weight:800; letter-spacing:-.02em}
.p-finanse .logo span{color:#1D4D2E}
.p-finanse .ledger-no{font-size:.68rem; letter-spacing:.2em; color:#6B675C; border:1px solid #C9C5B8; padding:.35rem .7rem}
.p-finanse .btn{border-radius:3px; font-weight:700; font-size:.88rem; transition:background-color .12s ease, color .12s ease, border-color .12s ease}
.p-finanse .btn-dark{background:#1D4D2E; border-color:#1D4D2E}
.p-finanse .btn-dark:hover{background:#181510; border-color:#181510; transform:none; box-shadow:none}
.p-finanse .btn-ghost{background:transparent}
.p-finanse .btn-ghost:hover{border-color:#1D4D2E; color:#1D4D2E; transform:none}
/* wyciąg: tytuł + żywy odczyt */
.ledger-hero{border-bottom:2px solid #181510; padding:60px 0 52px; background:#F7F6F1}
.ledger-hero-in{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:start}
.ledger-hero h1{font-size:clamp(2.6rem,6vw,4.4rem); margin:0 0 10px}
.ledger-sub{color:#4A463C; font-size:1.08rem; max-width:46ch; margin:0}
.ledger-facts{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:26px 0 0; border-top:1px solid #181510; border-bottom:1px solid #181510}
.ledger-facts div{padding:12px 16px 12px 0}
.ledger-facts div + div{padding-left:16px; border-left:1px solid #D8D4C6}
.ledger-facts dt{font-size:.64rem; letter-spacing:.2em; color:#6B675C; font-family:"IBM Plex Mono",monospace}
.ledger-facts dd{margin:4px 0 0; font-size:1.02rem; font-weight:600}
.ledger-cta{display:flex; gap:10px; flex-wrap:wrap; margin:26px 0 0}
/* arkusz: lustro suwaków */
.ledger-sheet{background:#fff; border:2px solid #181510; padding:0; margin:0}
.ledger-sheet h2{font-size:.7rem; letter-spacing:.22em; font-weight:700; margin:0; padding:14px 20px; border-bottom:2px solid #181510; font-family:"IBM Plex Mono",monospace}
.sheet-table{width:100%; border-collapse:collapse; font-size:.95rem}
.sheet-table th,.sheet-table td{padding:12px 20px; text-align:left; border-bottom:1px solid #E4E1D4}
.sheet-table th{font-weight:400; color:#4A463C}
.sheet-table td{text-align:right; font-weight:600; font-variant-numeric:tabular-nums}
.sheet-table tfoot th,.sheet-table tfoot td{border-bottom:0; border-top:2px solid #181510; font-weight:600}
.sheet-risk{margin:0; padding:14px 20px 18px; font-size:.78rem; letter-spacing:.1em}
.sheet-risk strong{display:inline-block; border:2px solid #1D4D2E; color:#1D4D2E; padding:.3rem .8rem; margin-left:6px; letter-spacing:.06em}
/* księga: wiersze alokacji */
.ledger-main{padding-top:0}
.ledger-book{background:#fff; border:2px solid #181510; margin-top:36px; padding:0}
.book-head{padding:26px 30px 22px; border-bottom:1px solid #E4E1D4}
.book-head h2{font-size:1.4rem; margin:0 0 4px}
.book-note{margin:0; font-size:.85rem; color:#6B675C}
.p-finanse .alloc{display:grid; margin:0}
.p-finanse .alloc-row{display:grid; grid-template-columns:52px 190px 1fr 90px; gap:18px; align-items:center; padding:20px 30px; border-bottom:1px solid #E4E1D4; transition:background-color .12s ease}
.p-finanse .alloc-row:hover,.p-finanse .alloc-row:focus-within{background:#F2F0E7}
.alloc-idx{font-family:"IBM Plex Mono",monospace; font-size:.78rem; color:#6B675C}
.p-finanse .alloc-row label{font-weight:700; font-size:.98rem}
.p-finanse .alloc-row input{width:100%; accent-color:#1D4D2E; cursor:pointer; height:28px}
.alloc-val{font-size:1.05rem; font-weight:600; text-align:right; font-variant-numeric:tabular-nums}
.p-finanse .stacked{display:flex; border:0; border-bottom:1px solid #E4E1D4; border-radius:0; font-family:"IBM Plex Mono",monospace; font-size:.78rem; font-weight:600}
.p-finanse .f-stocks{background:#1D4D2E; color:#fff}
.p-finanse .f-bonds{background:#E7E2CE; color:#181510; border-left:1px solid #181510; border-right:1px solid #181510}
.p-finanse .f-gold{background:#181510; color:#F2EBD2}
.book-foot{padding:22px 30px 26px}
.book-foot .risk{margin:0 0 6px; font-family:"IBM Plex Mono",monospace; font-size:.85rem; letter-spacing:.08em}
.book-foot .risk strong{color:#1D4D2E}
.book-status{margin:0 0 14px; font-size:.82rem; color:#6B675C}
/* dane: tabela, nie karty */
.ledger-figures{margin-top:52px}
.figures-title{font-family:"IBM Plex Mono",monospace; font-size:.7rem; font-weight:600; letter-spacing:.22em; color:#1D4D2E; margin:0 0 6px}
.figures-table{width:100%; border-collapse:collapse; border-top:2px solid #181510}
.figures-table td{padding:18px 8px; border-bottom:1px solid #D8D4C6; vertical-align:baseline}
.fig-num{font-size:1.9rem; font-weight:600; width:150px; font-variant-numeric:tabular-nums}
.fig-name{font-weight:800; letter-spacing:-.01em; width:280px}
.fig-desc{color:#6B675C; font-size:.92rem}
/* przypisy testerów */
.ledger-notes{margin-top:44px}
.notes-list{margin:8px 0 0; padding:0; list-style:none; display:grid; gap:0; border-top:1px solid #D8D4C6}
.notes-list li{display:grid; grid-template-columns:44px 1fr; gap:14px; padding:16px 4px; border-bottom:1px solid #D8D4C6; counter-increment:note}
.notes-list li::before{content:"(" counter(note,decimal-leading-zero) ")"; font-family:"IBM Plex Mono",monospace; font-size:.78rem; color:#1D4D2E; padding-top:4px}
.notes-list p{margin:0}
.notes-list p:first-child{font-size:1.02rem}
.note-src{color:#6B675C; font-size:.85rem; margin-top:4px}
/* sprzedaż: certyfikat w podwójnej ramie */
.p-finanse .sales-cert{background:#fff; border:4px double #1D4D2E; border-radius:0; box-shadow:8px 8px 0 #1D4D2E; margin:52px 0}
.p-finanse .sales-cert h2{font-size:1.5rem}
.p-finanse .sales-cert .btn-dark{background:#1D4D2E; border-color:#1D4D2E}
.p-finanse .stickybar{background:#0F2E1C; color:#F7F6F1; border-top:2px solid #1D4D2E}
.p-finanse .stickybar .btn-dark{background:#F7F6F1; color:#0F2E1C; border-color:#F7F6F1}
.p-finanse footer{border-top:2px solid #181510; color:#6B675C}
.p-finanse :focus-visible{outline:3px solid #1D4D2E; outline-offset:2px}
.js .p-finanse .reveal{opacity:0; transition:opacity .25s ease}
.js .p-finanse .reveal.visible{opacity:1}
@media(max-width:900px){
  .ledger-hero-in{grid-template-columns:1fr}
  .ledger-no{display:none}
  .p-finanse .alloc-row{grid-template-columns:44px 1fr 76px; grid-template-areas:"idx label val" "idx slider slider"; row-gap:6px}
  .alloc-idx{grid-area:idx}
  .p-finanse .alloc-row label{grid-area:label}
  .p-finanse .alloc-row input{grid-area:slider}
  .alloc-val{grid-area:val}
  .figures-table td{display:block; padding:6px 4px; border-bottom:0}
  .figures-table tr{display:block; padding:12px 0; border-bottom:1px solid #D8D4C6}
  .fig-num{width:auto}
  .notes-list li{grid-template-columns:1fr}
  .notes-list li::before{padding-top:0}
}
@media (prefers-reduced-motion:reduce){
  .js .p-finanse .reveal{opacity:1; transition:none}
}

/* ---------- 12 SŁOWO: czytelnia o świcie ----------
   DNA: cisza, papier czerpany, granat i złota włosowa linia.
   Jedna wąska kolumna (680px), ogromny oddech, zero pośpiechu.
   Krój: Fraunces light italic (kontemplacja) + Georgia (ciało).
   Na tej stronie nie ma ani jednego piksela mono ani sprężyny.
   Ruch: powolny 1.1 s expo, werset rozkwita z rozmycia, płomień drży. */
body.p-slowo{background:#F4EFE2; color:#221B10; font-family:Georgia,"Times New Roman",serif}
body.p-slowo h1,body.p-slowo h2,body.p-slowo h3{font-family:Fraunces,Georgia,serif; font-weight:340; letter-spacing:0; line-height:1.12}
body.p-slowo ::selection{background:#1E3A8A; color:#F4EFE2}
.p-slowo .topbar{background:rgba(244,239,226,.94); border-bottom:1px solid #C9A94E}
.p-slowo .logo{font-family:Fraunces,Georgia,serif; font-style:italic}
.p-slowo .logo span{color:#1E3A8A}
.p-slowo .btn{border-radius:999px; font-family:Fraunces,Georgia,serif; font-size:.95rem; transition:background-color .4s ease, color .4s ease, border-color .4s ease}
.p-slowo .btn-dark{background:#1E3A8A; border-color:#1E3A8A}
.p-slowo .btn-dark:hover{background:#221B10; border-color:#221B10; transform:none; box-shadow:none}
.p-slowo .btn-ghost{background:transparent; border-color:#B9B09A; color:#221B10}
.p-slowo .btn-ghost:hover{border-color:#1E3A8A; color:#1E3A8A; transform:none}
/* świt: pełny ekran, środek, oddech */
.dawn{position:relative; min-height:94svh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden;
  background:radial-gradient(58% 42% at 50% 0%, #FBF7E8 0%, rgba(251,247,232,0) 70%), linear-gradient(180deg,#E9E3CF 0%, #F4EFE2 60%, #F4EFE2 100%)}
.dawn-in{max-width:800px; padding:120px 20px 100px}
.dawn-kicker{font-size:.72rem; letter-spacing:.38em; color:#8A6D2B; margin:0 0 26px}
.dawn-title{font-size:clamp(2.9rem,7.4vw,5.4rem); margin:0}
.dawn-title em{color:#1E3A8A}
.dawn-sub{font-style:italic; font-size:1.2rem; color:#6B6257; margin:22px 0 0}
.dawn-links{margin:30px 0 0; font-size:1rem}
.dawn-links a{color:#221B10; text-decoration:underline; text-underline-offset:6px; text-decoration-color:#C9A94E; text-decoration-thickness:1px; transition:color .4s ease}
.dawn-links a:hover{color:#1E3A8A}
.dawn-links span{margin:0 12px; color:#C9A94E}
.dawn-candle{position:absolute; left:50%; bottom:64px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px}
.dawn-candle::before{content:""; width:1px; height:56px; background:linear-gradient(#C9A94E,transparent)}
.dawn-candle i{width:7px; height:7px; border-radius:50%; background:#C9A94E; animation:flicker 3.2s ease-in-out infinite}
@keyframes flicker{0%,100%{opacity:1; transform:scale(1)}30%{opacity:.55; transform:scale(.8)}55%{opacity:.9; transform:scale(1.1)}70%{opacity:.65}}
.dawn-scroll{position:absolute; bottom:18px; left:0; right:0; margin:0; font-size:.66rem; letter-spacing:.3em; color:#A89B7E; animation:bob 4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(5px)}}
/* czytelnia: wąska kolumna */
.p-slowo .reading{max-width:680px}
.verse-day{padding:88px 0 30px}
.verse-kicker{font-size:.68rem; letter-spacing:.34em; color:#8A6D2B; margin:0 0 20px}
.verse-box{margin:0}
.verse-box.bloom{animation:bloom 1.15s cubic-bezier(.16,1,.3,1)}
@keyframes bloom{from{opacity:0; filter:blur(9px)}to{opacity:1; filter:blur(0)}}
.verse-text{font-family:Fraunces,Georgia,serif; font-weight:340; font-style:italic; font-size:clamp(1.7rem,4.4vw,2.5rem); line-height:1.55; margin:0}
.verse-text::first-letter{font-style:normal; font-size:1.9em; line-height:1; color:#1E3A8A; padding-right:.08em}
.verse-ref{margin:16px 0 0; font-size:.8rem; letter-spacing:.28em; color:#8A6D2B}
.verse-ref::before{content:"— "}
.verse-cta{margin:30px 0 0}
.reading-rule{border:0; height:1px; width:96px; background:#C9A94E; margin:64px auto}
/* rytuał: lista bez pudełek */
.rite h2{font-style:italic; font-size:2.2rem; margin:0 0 6px}
.rite-note{font-style:italic; color:#6B6257; margin:0}
.rite-progress{height:2px; background:#D9D2BE; border-radius:999px; margin:28px 0 10px; overflow:hidden}
.rite-progress span{display:block; height:100%; background:#1E3A8A; transition:width 1s cubic-bezier(.16,1,.3,1)}
.rite-count{font-size:.75rem; letter-spacing:.24em; color:#8A6D2B; margin:0 0 8px}
.p-slowo .plan{display:grid; margin-top:6px}
.p-slowo .plan-row{display:grid; grid-template-columns:28px 92px 1fr; gap:12px; align-items:baseline; padding:17px 4px; border-bottom:1px solid #D9D2BE; cursor:pointer; font-size:1.08rem; transition:background-color .5s ease}
.p-slowo .plan-row:hover{background:rgba(201,169,78,.1)}
.p-slowo .plan-row input{appearance:none; width:19px; height:19px; border:1.5px solid #221B10; border-radius:50%; margin:0; padding:0; cursor:pointer; align-self:center; transition:background-color .5s ease, border-color .5s ease; background:transparent}
.p-slowo .plan-row input:checked{background:#1E3A8A; border-color:#1E3A8A}
.plan-day{font-size:.78rem; letter-spacing:.2em; color:#8A6D2B}
.p-slowo .plan-row:has(input:checked) .plan-what{color:#A89B7E; text-decoration:line-through; text-decoration-color:#C9A94E}
/* liczby: jedna cicha linijka */
.quiet-figures{text-align:center; padding:20px 0 8px}
.quiet-figures p{font-style:italic; font-size:1.12rem; line-height:2.1; margin:0; color:#4A4438}
.quiet-figures strong{font-family:Fraunces,Georgia,serif; font-weight:500; font-style:normal; font-size:1.35rem; color:#1E3A8A}
.q-sep{color:#C9A94E; margin:0 10px}
/* głosy: dwa głosy w ciszy */
.voices{display:grid; gap:44px; text-align:center; padding:44px 0 12px}
.voices figure{margin:0}
.voices figure::before{content:"„"; display:block; font-family:Fraunces,Georgia,serif; font-size:3.4rem; line-height:1; color:#C9A94E}
.voices blockquote{margin:6px 0 12px; font-family:Fraunces,Georgia,serif; font-style:italic; font-weight:340; font-size:1.55rem; line-height:1.5}
.voices figcaption{font-size:.75rem; letter-spacing:.26em; color:#8A6D2B}
/* sprzedaż: zaproszenie w granatowej ramie */
.p-slowo .sales-invite{background:#1B2A5B; color:#F4EFE2; border:1px solid #C9A94E; border-radius:6px; box-shadow:0 0 0 7px #1B2A5B, 0 0 0 8px #C9A94E; text-align:center; margin:72px 0 64px; padding:44px 34px}
.p-slowo .sales-invite h2{font-style:italic}
.p-slowo .sales-invite ul{list-style:none; margin:0 0 1.2rem; padding:0}
.p-slowo .sales-invite li{margin:0 0 .5rem}
.p-slowo .sales-invite .btn-dark{background:#F4EFE2; color:#1B2A5B; border-color:#F4EFE2}
.p-slowo .sales-invite .btn-ghost{color:#F4EFE2; border-color:rgba(244,239,226,.5)}
.p-slowo .stickybar{background:#1B2A5B; color:#F4EFE2; border-top:1px solid #C9A94E}
.p-slowo .stickybar .btn-dark{background:#F4EFE2; color:#1B2A5B; border-color:#F4EFE2}
.p-slowo footer{border-top:1px solid #C9A94E; color:#6B6257}
.p-slowo :focus-visible{outline:2px solid #1E3A8A; outline-offset:3px}
.js .p-slowo .reveal{opacity:0; transform:translateY(28px); transition:opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1)}
.js .p-slowo .reveal.visible{opacity:1; transform:none}
@media(max-width:900px){
  .dawn{min-height:88svh}
  .dawn-in{padding:100px 20px 90px}
  .p-slowo .plan-row{grid-template-columns:28px 1fr; grid-template-areas:"box day" "box what"}
  .p-slowo .plan-row input{grid-area:box}
  .plan-day{grid-area:day}
  .plan-what{grid-area:what}
}
@media (prefers-reduced-motion:reduce){
  .dawn-candle i,.dawn-scroll{animation:none}
  .verse-box.bloom{animation:none}
  .js .p-slowo .reveal{opacity:1; transform:none; transition:none}
  .rite-progress span{transition:none}
}
/* ============================================================
   AI LAB — protokół laboratoryjny, nie startupowy slop.
   Papier, tusz, jedna linia siatki. Zero glow, zero gradientów.
   Scalone 2026-10-03: jeden spójny blok (starszy + doklejka).
   Nowsza wersja wygrywa, unikatowe zasady starszej zachowane.
   ::after "LAB № 13" to dekoracja (content CSS, pointer-events:none).
   ============================================================ */
.p-ai{--ai-bg:#FAFAF7; --ai-ink:#16150F; --ai-muted:#6E685A; --ai-line:#E5E0D2; --ai-teal:#0F766E; --ai-amber:#B45309; background:var(--ai-bg); color:var(--ai-ink)}
.p-ai .micro-label{font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.22em; color:var(--ai-muted)}
.p-ai h1,.p-ai h2,.p-ai h3{font-family:Fraunces,Georgia,serif; letter-spacing:-.01em}
.p-ai :focus-visible{outline:3px solid #0F766E; outline-offset:2px}
.p-ai .topbar{border-bottom:2px solid var(--ai-ink)}
.p-ai .topbar-in{gap:10px}
.p-ai .ledger-no{font:600 .68rem 'IBM Plex Mono',monospace; letter-spacing:.18em; color:var(--ai-muted); border:1px solid var(--ai-line); padding:.35rem .7rem; border-radius:4px; background:#fff}
.p-ai section[id],.p-ai .fig-block{scroll-margin-top:76px}
.p-ai [id^="flow-"]{scroll-margin-top:144px}
.p-ai [id^="flow-"]:focus{outline:none}
.p-ai [id^="flow-"]:focus-visible{outline:3px solid #0F766E; outline-offset:2px}
.p-ai .lab-hero{background-color:var(--ai-bg); background-image:linear-gradient(#E5E0D2 1px,transparent 1px),linear-gradient(90deg,#E5E0D2 1px,transparent 1px),radial-gradient(#D8D2BE 1.1px,transparent 1.1px); background-size:88px 88px,88px 88px,22px 22px; border-bottom:1px solid var(--ai-line); padding:44px 0 0; position:relative; overflow:hidden}
.p-ai .lab-hero::after{content:"LAB № 13"; position:absolute; top:8px; right:12px; font-family:Fraunces,Georgia,serif; font-size:clamp(3rem,9vw,6rem); color:transparent; -webkit-text-stroke:1px #D8D2BE; pointer-events:none; letter-spacing:-.02em}
.p-ai .lab-hero-slim{padding-top:34px}
.p-ai .lab-hero-in{display:grid; grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr); gap:28px; align-items:start}
.p-ai .lab-hero h1{font-size:clamp(2.4rem,5.4vw,3.6rem); margin:.2rem 0 .6rem; border-bottom:4px solid var(--ai-ink); display:inline-block; padding-bottom:.15em}
.p-ai .lab-hero h1::after{content:""; display:block; height:4px; background:var(--ai-teal); margin-top:6px}
.p-ai .lab-sub{color:#3E3A30; font-size:1.08rem; max-width:58ch}
.p-ai .ledger-facts{display:flex; gap:0; border:1px solid var(--ai-line); border-radius:12px; background:#fff; overflow:hidden; margin:16px 0}
.p-ai .ledger-facts div{flex:1; padding:10px 14px; border-left:1px solid var(--ai-line)}
.p-ai .ledger-facts div:first-child{border-left:0}
.p-ai .ledger-facts dt{font-family:'IBM Plex Mono',monospace; font-size:.68rem; letter-spacing:.16em; color:var(--ai-muted)}
.p-ai .ledger-facts dd{margin:2px 0 0; font-size:.92rem}
.p-ai .lab-sheet{background:#fff; border:2px solid var(--ai-ink); border-radius:6px; padding:16px 18px; box-shadow:5px 5px 0 var(--ai-ink)}
.p-ai .lab-sheet h2{font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.2em; margin:0 0 8px; border-bottom:2px solid var(--ai-ink); padding-bottom:8px}
.p-ai .sheet-stamp{display:inline-block; border:2px solid var(--ai-amber); color:var(--ai-amber); font:600 .68rem 'IBM Plex Mono',monospace; letter-spacing:.14em; padding:.25rem .6rem; transform:rotate(-2deg); margin:8px 0}
.p-ai .lab-nav{display:flex; gap:8px; flex-wrap:wrap; position:sticky; top:60px; z-index:30; background:rgba(250,250,247,.96); border-top:1px solid var(--ai-line); border-bottom:2px solid var(--ai-ink); padding:10px 20px}
.p-ai .lab-nav a,.p-ai .lab-nav span{font-family:'IBM Plex Mono',monospace; font-size:.8rem; border:1px solid var(--ai-line); background:#fff; border-radius:999px; padding:.4rem .9rem; text-decoration:none; color:var(--ai-ink); min-height:44px; display:inline-flex; align-items:center}
.p-ai .lab-nav a b{font-weight:600; color:var(--ai-teal); margin-right:.35em}
.p-ai .lab-nav a.on{background:var(--ai-ink); color:#fff; border-color:var(--ai-ink)}
.p-ai .lab-nav a.on b{color:#7DE3D3}
.p-ai .lab-nav a:hover{border-color:var(--ai-ink); transform:translateY(-1px)}
.p-ai .lab-main{padding-bottom:20px}
.p-ai .lab-main h2{font-size:1.9rem; margin:.2rem 0 .4rem}
.p-ai .book-note{color:var(--ai-muted)}
.p-ai .lab-table .fig-num{font-family:'IBM Plex Mono',monospace; color:var(--ai-teal)}
.p-ai .formula{font-family:'IBM Plex Mono',monospace; background:#fff; border:1px solid var(--ai-line); border-radius:10px; padding:.7rem 1rem; overflow-x:auto}
.p-ai .arch-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px}
.p-ai .arch-card{background:#fff; border:1.5px solid var(--ai-ink); border-top:5px solid var(--ai-teal); border-radius:14px; padding:16px; text-decoration:none; display:flex; flex-direction:column; gap:4px; transition:transform .18s ease, box-shadow .18s ease}
.p-ai .arch-card:nth-child(3n){border-top-color:var(--ai-amber)}
.p-ai .arch-card:hover{border-color:var(--ai-ink); transform:translateY(-3px); box-shadow:4px 4px 0 var(--ai-ink)}
.p-ai .arch-card .fig-cap{font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.18em; color:#fff; margin:0; background:var(--ai-ink); align-self:flex-start; padding:.15rem .5rem; border-radius:4px}
.p-ai .arch-card h3{margin:0; font-size:1.2rem}
.p-ai .arch-card .mono{font-family:'IBM Plex Mono',monospace; font-size:.85rem; background:var(--ai-bg); border:1px solid var(--ai-line); border-left:3px solid var(--ai-teal); border-radius:8px; padding:.3rem .6rem}
.p-ai .arch-card p:last-child{color:var(--ai-muted); font-size:.92rem; margin:0}
.p-ai .method{background:#fff; border:1px solid var(--ai-line); border-left:5px solid var(--ai-teal); border-radius:12px; padding:18px 22px}
.p-ai .method ol{margin:0; padding-left:1.2rem}
.p-ai .fig-block{border-top:2px solid var(--ai-ink); padding:34px 0 8px; margin-top:26px}
.p-ai .fig-grid{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,1fr); gap:20px; align-items:start}
.p-ai .fig-svg{background:#fff; border:1px solid var(--ai-line); border-radius:14px; padding:18px; box-shadow:4px 4px 0 #E5E0D2}
.p-ai .fig-svg svg{width:100%; height:auto; display:block; background-image:linear-gradient(#EFEAD9 1px,transparent 1px),linear-gradient(90deg,#EFEAD9 1px,transparent 1px); background-size:11px 11px; border:1px solid var(--ai-line); border-radius:8px}
.p-ai .fig-svg figcaption{font-family:'IBM Plex Mono',monospace; font-size:.82rem; color:#3E3A30; border-top:1px dashed var(--ai-line); margin-top:10px; padding-top:8px}
.p-ai .fig-spec .formula{margin:0 0 10px}
.p-ai .trap{font-size:.9rem; border-left:3px solid var(--ai-amber); padding-left:10px; color:#3E3A30}
.p-ai .alloc{display:grid; margin:14px 0 6px; background:#fff; border:1px solid var(--ai-line); border-radius:12px; overflow:hidden}
.p-ai .alloc-row{display:grid; grid-template-columns:52px 190px 1fr 90px; gap:18px; align-items:center; padding:14px 18px; border-bottom:1px solid var(--ai-line)}
.p-ai .alloc-row:last-child{border-bottom:0}
.p-ai .alloc-row label{font-weight:700}
.p-ai .alloc-row input{width:100%; accent-color:var(--ai-teal); height:26px}
.p-ai .alloc-row:focus-within{background:#F2F0E7}
.p-ai .table-wrap{overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch; border:1px solid var(--ai-line); border-radius:12px; background:#fff}
.p-ai .table-wrap:focus-visible,.p-ai .formula:focus-visible{outline:3px solid #0F766E}
.p-ai .dive-table{width:100%; border-collapse:collapse; font-size:.92rem}
.p-ai .dive-table th,.p-ai .dive-table td{padding:10px 12px; border-bottom:1px solid var(--ai-line); text-align:left; white-space:nowrap}
.p-ai .dive-table thead th{background:var(--ai-bg); font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.1em; color:var(--ai-muted)}
.p-ai .dive-table td[data-wrap],.p-ai .dive-table td.fig-desc{white-space:normal; min-width:220px; vertical-align:top}
.p-ai .dive-table td:first-child,.p-ai .dive-table th:first-child{position:sticky; left:0; background:#fff}
.p-ai .figures-table.lab-table tr:hover,.p-ai .dive-table tbody tr:hover{background:#FFFDF4}
.p-ai .dive-table tbody tr:hover td:first-child{background:#FFFDF4}
.p-ai .btn-small,.p-ai .pill{min-height:44px; min-width:44px; display:inline-flex; align-items:center; justify-content:center}
.p-ai input[type="range"]{height:44px}
.p-ai .stickybar{background:#FAFAF7; border-top:2px solid var(--ai-ink); padding-bottom:calc(10px + env(safe-area-inset-bottom))}
.p-ai .stickybar span{font-family:'IBM Plex Mono',monospace; font-size:.8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.p-ai footer{border-top:2px solid var(--ai-ink)}
.p-ai .model-tags{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0}
.p-ai .tag{font:500 .68rem 'IBM Plex Mono',monospace; letter-spacing:.08em; border:1px solid var(--ai-line); border-radius:999px; padding:.25rem .6rem; background:#fff; color:var(--ai-ink)}
.p-ai .tag[data-kind="arch"],.p-ai .tag[data-kind="attn"]{border-color:var(--ai-teal); color:var(--ai-teal)}
.p-ai .tag[data-kind="ctx"],.p-ai .tag[data-kind="quant"]{border-color:var(--ai-amber); color:var(--ai-amber)}
.p-ai .tag[data-kind="lic"]{color:var(--ai-muted)}
.p-ai .model-card .fig-cap{display:flex; justify-content:space-between; gap:8px}
.p-ai .model-card h3{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.p-ai .model-src{font-size:.82rem; color:var(--ai-muted)}
.p-ai .flow-steps{list-style:none; display:flex; gap:8px; flex-wrap:wrap; padding:0; margin:12px 0}
.p-ai .flow-steps a{font-family:'IBM Plex Mono',monospace; font-size:.8rem; border:1.5px solid var(--ai-ink); background:#fff; border-radius:999px; padding:.45rem .9rem; text-decoration:none; color:var(--ai-ink); min-height:44px; display:inline-flex; align-items:center}
.p-ai .flow-steps a[aria-current="step"]{background:var(--ai-ink); color:#fff}
.p-ai .flow-more{border:1px solid var(--ai-line); border-left:5px solid var(--ai-teal); border-radius:12px; background:#fff; padding:10px 14px; margin-top:10px}
.p-ai .flow-more summary{cursor:pointer; font-weight:700; min-height:44px; display:flex; align-items:center}
.p-ai .tok-demo{display:flex; flex-wrap:wrap; gap:4px; margin:10px 0}
.p-ai .tok-demo span{border:1px solid var(--ai-ink); border-radius:6px; padding:.2rem .5rem; font-family:'IBM Plex Mono',monospace; font-size:.82rem; background:var(--ai-bg)}
.p-ai .tok-demo span.alt{border-color:var(--ai-amber); color:var(--ai-amber)}
.p-ai .hub-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:14px}
.p-ai .prevnext{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:34px 0 8px; border-top:2px solid var(--ai-ink); padding-top:14px}
.p-ai .tok-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.p-ai .tok-row textarea{flex:1; min-width:220px; font:inherit; font-size:.92rem; padding:.7rem .9rem; border:1.5px solid var(--ai-ink); border-radius:10px; background:#fff}
@media(max-width:900px){
  .p-ai .lab-hero-in,.p-ai .fig-grid{grid-template-columns:1fr}
  .p-ai .arch-grid{grid-template-columns:1fr 1fr}
  .p-ai .ledger-no{display:none}
  .p-ai .ledger-facts{flex-direction:column}
  .p-ai .ledger-facts div{border-left:0; border-top:1px solid var(--ai-line)}
  .p-ai .ledger-facts div:first-child{border-top:0}
  .p-ai .alloc-row{grid-template-columns:44px 1fr 76px; grid-template-areas:"idx label val" "idx slider slider"; row-gap:6px}
  .p-ai .alloc-row .alloc-idx{grid-area:idx}
  .p-ai .alloc-row label{grid-area:label}
  .p-ai .alloc-row input{grid-area:slider}
  .p-ai .alloc-row .alloc-val{grid-area:val}
}
@media(max-width:600px){
  .p-ai .arch-grid{grid-template-columns:1fr}
  .p-ai .hub-grid{grid-template-columns:1fr}
  .p-ai .lab-hero::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .js .p-ai .reveal{opacity:1; transform:none; transition:none}
  .p-ai .lab-hero::after{display:none}
  .p-ai .arch-card:hover,.p-ai .lab-nav a:hover,.p-ai .flow-steps a:hover{transform:none}
  .p-ai .arch-card,.p-ai .lab-nav a,.p-ai .flow-steps a{transition:none}
}