:root{color-scheme:dark;--bg:#0a0d0c;--card:#121716;--card2:#0e1312;--line:#232b29;--line2:#3a4744;--text:#e9f0ed;--mute:#8d9a96;--acc:#3dffa2;--on-acc:#04130c;--viz:#1bb06c;--vizmute:#56625e;
  --tint:#10221a;--tint-line:#1f5a3f;--bubble:#1c2422;--note-bg:#3a2d00;--note-fg:#ffd666;
  --ph-green:#15352a;--ph-olive:#2a2f18;--ph-blue:#1b2a3a;--ph-violet:#2c1f33;
  --page:linear-gradient(180deg,#090c0c 0%,#0c1a16 30%,#0b1420 68%,#090c0c 100%);--shadow:none;--scroll:rgba(61,255,162,.5);--scroll-track:rgba(255,255,255,.06);--hot:#ffc857;--hot-ink:#2a1c00}
/* tryb jasny: szaro-białe tło, białe karty, ciemniejsza zieleń (czytelna na jasnym) */
:root[data-theme="light"]{color-scheme:light;--bg:#f1f3f2;--card:#fff;--card2:#f5f7f6;--line:#d8dfdc;--line2:#aebab5;--text:#14201c;--mute:#5b6a65;--acc:#0a7f50;--on-acc:#fff;--viz:#0f8f58;--vizmute:#7f8b87;
  --tint:#e4f5ec;--tint-line:#a5d9c0;--bubble:#eef1f0;--note-bg:#fff1c7;--note-fg:#6b4c00;
  --ph-green:#cdeedd;--ph-olive:#ebe9c6;--ph-blue:#d3e2f3;--ph-violet:#e7d9ef;
  --page:linear-gradient(180deg,#f5f6f5 0%,#eaf2ee 30%,#e7edf3 68%,#f2f4f3 100%);--shadow:0 1px 2px rgba(20,32,28,.05),0 10px 28px rgba(20,32,28,.06);--scroll:rgba(10,127,80,.5);--scroll-track:rgba(20,32,28,.08);--hot:#a85800;--hot-ink:#fff}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font:17px/1.6 "Space Grotesk",system-ui,sans-serif}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
.wrap{max-width:1120px;margin:auto;padding:0 20px}
.mono{font-family:"JetBrains Mono",monospace;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--acc)}
.mute{color:var(--mute)}

nav{display:flex;justify-content:space-between;align-items:center;padding:22px 0;gap:16px}
nav .links{display:flex;gap:26px;color:var(--mute);font-size:15px}
nav .links a:hover,nav .links a.cur{color:var(--acc)}
.btn{display:inline-block;background:var(--acc);color:var(--on-acc);font-weight:700;padding:14px 24px;border-radius:10px;border:0;cursor:pointer;white-space:nowrap}
.btn.ghost{background:none;color:var(--text);border:1px solid var(--line)}
.btn.sm{padding:10px 16px;font-size:15px}

header{padding:60px 0 42px}
.hero2{display:grid;grid-template-columns:1.15fr 1fr;gap:44px;align-items:center}
h1{font-size:clamp(38px,6vw,76px);line-height:1;letter-spacing:-.03em;margin:18px 0 22px}
.hero2 h1{font-size:clamp(36px,4.6vw,60px)}
h1 em{font-style:normal;color:var(--acc)}
.lead{max-width:640px;color:var(--mute);font-size:20px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 22px}
.ticks{display:flex;gap:22px;flex-wrap:wrap;color:var(--mute);font-size:14px}
.ticks span::before{content:"✓ ";color:var(--acc)}

section{padding:38px 0}
section.first{padding-top:40px}
h2{font-size:clamp(28px,4vw,44px);letter-spacing:-.02em;line-height:1.1;margin:10px 0 14px}
.sub{color:var(--mute);font-size:19px;max-width:680px;margin-bottom:34px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px}
.card h3{font-size:19px;margin:8px 0}
.card p{color:var(--mute);font-size:15px}
.note{background:var(--note-bg);color:var(--note-fg);font-size:13px;padding:8px 12px;border-radius:8px;display:inline-block;margin-bottom:18px}

/* wybór problemu */
.pains{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.pains button{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;cursor:pointer;font-size:16px;line-height:1.4;display:flex;gap:12px;align-items:flex-start}
.pains button span{font-size:22px;line-height:1.2}
.pains button:hover{border-color:var(--line2)}
.pains button.on{border-color:var(--acc);background:var(--tint)}
.answer{display:grid;grid-template-columns:1.25fr 1fr;gap:24px;margin-top:16px;background:var(--card);border:1px solid var(--acc);border-radius:18px;padding:30px}
.answer h3{font-size:26px;line-height:1.2;margin:8px 0 10px}
.answer p{color:var(--mute);font-size:16px}
.answer ul{padding-left:18px;font-size:15px;margin:10px 0 22px}
.ex{background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:22px}
.big{font-size:44px;font-weight:700;line-height:1.1;letter-spacing:-.02em;margin:8px 0 2px}
.big small{font-size:17px;font-weight:500;color:var(--mute);letter-spacing:0}
.ex .means{font-size:14px;margin-top:6px}
.ex .did{font-size:13px;margin-top:14px}
.ex .did b{color:var(--text);font-weight:500}

/* infografiki */
.bars{display:grid;gap:10px;margin-top:16px}
.bar{display:grid;grid-template-columns:46px 1fr minmax(70px,max-content);gap:10px;align-items:center;font-size:13px;color:var(--mute)}
.bar div{height:16px}
.bar i{display:block;height:100%;min-width:6px;border-radius:0 4px 4px 0;background:var(--vizmute)}
.bar.after i{background:var(--viz)}
.bar b{white-space:nowrap;color:var(--text);font-weight:500;font-family:"JetBrains Mono",monospace}
.viz{background:var(--card2);border-bottom:1px solid var(--line);padding:22px 24px;min-height:150px;display:flex;flex-direction:column;justify-content:center}
.viz svg{width:100%;height:auto;display:block}
.viz .bars{margin:0}
.case{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.case .in{padding:22px 24px 24px}
.case p{color:var(--mute);font-size:15px}
.case ul{margin-top:12px;padding-left:18px;font-size:14px;color:var(--mute)}
.case ul b{color:var(--text);font-weight:500}

/* rozwiązania */
.sol{display:flex;flex-direction:column}
.sol .why{color:var(--text);font-size:14px;margin-top:10px}
.sol .why::before{content:"→ ";color:var(--acc)}
.sol a{margin-top:16px;color:var(--acc);font-weight:700;font-size:15px}

/* kalkulator */
.calc{display:grid;gap:20px;grid-template-columns:1fr 1fr}
.calc.one{grid-template-columns:1fr}
.calc label{display:block;color:var(--mute);font-size:14px;margin-bottom:16px}
.calc input{width:100%;accent-color:var(--acc)}
.calc output{float:right;color:var(--text);font-family:"JetBrains Mono",monospace}
.result{background:var(--acc);color:var(--on-acc);border-radius:14px;padding:26px}
.result b{display:block;font-size:48px;line-height:1.1}
.result .btn{background:var(--on-acc);color:var(--acc);margin-top:14px}

/* kroki */
.steps{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.step i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--acc);color:var(--on-acc);font-style:normal;font-weight:700;margin-bottom:14px}
.step b{font-size:18px}

/* start / voucher */
.start{background:var(--card);border:1px solid var(--acc);border-radius:18px;padding:40px;display:grid;grid-template-columns:1.4fr 1fr;gap:30px;align-items:center}
.price{font-size:84px;font-weight:700;line-height:1;color:var(--acc)}
.ticket{background:var(--card);border:1px dashed var(--acc);border-radius:18px;padding:30px;position:relative}
.ticket .v{font-size:76px;font-weight:700;line-height:1;color:var(--acc);margin:6px 0}
.form{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.form input{flex:1;min-width:180px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:13px 14px;color:var(--text);font:inherit}
.band{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}

/* faq */
.faq details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 22px;margin-bottom:10px}
.faq summary{font-weight:700;cursor:pointer}
.faq p{color:var(--mute);margin-top:8px;font-size:15px}

/* kafle w hero */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px}
.tile.w{grid-column:1/-1}
.tile b{display:block;font-size:40px;line-height:1.1;letter-spacing:-.02em}
.tile span{color:var(--mute);font-size:14px}

/* czat demo */
.chat{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:10px}
.chat .top{display:flex;justify-content:space-between;font-size:13px;color:var(--mute);padding-bottom:10px;border-bottom:1px solid var(--line)}
.msg{max-width:84%;padding:11px 14px;border-radius:14px;font-size:15px;line-height:1.45;opacity:0;animation:in .4s forwards}
.msg.c{background:var(--bubble);align-self:flex-start;border-bottom-left-radius:4px}
.msg.a{background:var(--tint);border:1px solid var(--tint-line);align-self:flex-end;border-bottom-right-radius:4px}
.msg:nth-child(2){animation-delay:.4s}.msg:nth-child(3){animation-delay:1.6s}.msg:nth-child(4){animation-delay:2.8s}.msg:nth-child(5){animation-delay:3.8s}
.chat .meta{font-size:13px;color:var(--mute);opacity:0;animation:in .4s 4.8s forwards}
@keyframes in{to{opacity:1}}

/* studio */
.reel{aspect-ratio:16/9;border-radius:18px;background:linear-gradient(135deg,var(--ph-green),var(--card) 65%);display:grid;place-items:center;border:1px solid var(--line);position:relative}
.play{width:76px;height:76px;border-radius:50%;background:var(--acc);display:grid;place-items:center;color:var(--on-acc);font-size:26px}
.reel span{position:absolute;left:16px;bottom:12px;font-size:13px;color:var(--mute)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.tabs button{background:none;border:1px solid var(--line);border-radius:999px;padding:9px 18px;cursor:pointer;font-size:15px;color:var(--mute)}
.tabs button.on{background:var(--acc);color:var(--on-acc);border-color:var(--acc);font-weight:700}
.works{columns:4 230px;column-gap:14px}
.work{break-inside:avoid;margin-bottom:14px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--card)}
.work .ph{display:grid;place-items:center;color:var(--mute);font-size:13px;background:linear-gradient(160deg,var(--ph-green),var(--card))}
.work.video .ph{aspect-ratio:9/16}.work.static .ph{aspect-ratio:4/5;background:linear-gradient(160deg,var(--ph-olive),var(--card))}
.work.brand .ph{aspect-ratio:4/3;background:linear-gradient(160deg,var(--ph-blue),var(--card))}.work.landing .ph{aspect-ratio:4/3;background:linear-gradient(160deg,var(--ph-violet),var(--card))}
.work .cap{padding:14px 16px;font-size:14px;color:var(--mute)}
.work .cap b{display:block;color:var(--text);font-size:16px}
.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.how div{padding:18px 14px;border-left:1px solid var(--line)}
.how i{font-style:normal;font-size:30px;font-weight:700;color:var(--acc)}
.how p{color:var(--mute);font-size:14px}

footer{padding:40px 0;color:var(--mute);font-size:14px}
@media(max-width:820px){.hero2,.answer,.calc,.start{grid-template-columns:1fr}nav .links{display:none}section{padding:30px 0}.price{font-size:64px}}

/* suwak z przykładami */
.slider{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:6px 0 14px;margin-top:-6px}
@supports not selector(::-webkit-scrollbar){.slider{scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}}
.slider::-webkit-scrollbar{height:3px;width:0}
.slider::-webkit-scrollbar-corner{background:transparent}
.slider::-webkit-scrollbar-track{background:var(--scroll-track);border-radius:2px}
.slider::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:2px}
.slider .case{flex:0 0 clamp(280px,31%,360px);scroll-snap-align:start}
.band+.slider{margin-top:14px}
.arrows{display:flex;gap:8px}
.arrows button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--card);cursor:pointer;font-size:18px}
.arrows button:hover{border-color:var(--acc);color:var(--acc)}

/* voucher + kontakt */
.party{position:relative;overflow:hidden}
.party canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.duo{position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:20px;align-items:stretch}
.duo .ticket{display:flex;flex-direction:column;justify-content:center}
.duo #kontakt{scroll-margin-top:24px}
.form.col{flex-direction:column}
.form.col input{flex:none}
.form textarea{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:13px 14px;color:var(--text);font:inherit;resize:vertical}
@media(max-width:820px){.duo{grid-template-columns:1fr}}

/* tło: spokojny odcień bez poświaty, zmienia się wzdłuż strony */
body{background:var(--page)}

/* animacje przy przewijaniu */
.card,.case{transition:border-color .2s,transform .25s}
.sol:hover,.case:hover,.step:hover{transform:translateY(-4px);border-color:var(--line2)}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.answer{overflow:hidden;transition:height .5s cubic-bezier(.2,.7,.2,1)}
.answer>*{transition:opacity .5s ease,transform .5s ease}
.answer.out>*{opacity:0;transform:translateY(10px);transition-duration:.2s}
.reveal.brick{transform:translate3d(-26px,10px,0) scale(.97);transition:opacity .55s ease-out,transform .7s cubic-bezier(.16,1,.3,1);will-change:transform,opacity}
.reveal.brick.in{transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.answer,.answer>*{transition:none}}

/* gwiazdy w tle: dwie warstwy drobnych punktów, druga lekko migocze */
body::before,body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none}
body::before{background-size:430px 430px;background-image:
  radial-gradient(circle at 38px 62px,rgba(233,240,237,.55) 0 .8px,transparent 1.5px),
  radial-gradient(circle at 131px 301px,rgba(233,240,237,.35) 0 .7px,transparent 1.4px),
  radial-gradient(circle at 214px 118px,rgba(140,255,200,.45) 0 .8px,transparent 1.5px),
  radial-gradient(circle at 287px 372px,rgba(233,240,237,.4) 0 .7px,transparent 1.4px),
  radial-gradient(circle at 342px 44px,rgba(150,200,255,.45) 0 .8px,transparent 1.5px),
  radial-gradient(circle at 396px 233px,rgba(233,240,237,.3) 0 .7px,transparent 1.4px),
  radial-gradient(circle at 76px 196px,rgba(233,240,237,.3) 0 .6px,transparent 1.3px),
  radial-gradient(circle at 182px 408px,rgba(140,255,200,.3) 0 .6px,transparent 1.3px)}
body::after{background-size:610px 610px;animation:twinkle 5s ease-in-out infinite alternate;background-image:
  radial-gradient(circle at 92px 140px,rgba(233,240,237,.8) 0 1px,transparent 2px),
  radial-gradient(circle at 318px 71px,rgba(140,255,200,.7) 0 1px,transparent 2px),
  radial-gradient(circle at 505px 322px,rgba(233,240,237,.7) 0 1.1px,transparent 2.1px),
  radial-gradient(circle at 233px 467px,rgba(150,200,255,.7) 0 1px,transparent 2px),
  radial-gradient(circle at 566px 548px,rgba(233,240,237,.6) 0 .9px,transparent 1.9px),
  radial-gradient(circle at 421px 205px,rgba(233,240,237,.5) 0 .9px,transparent 1.9px)}
@keyframes twinkle{from{opacity:.35}to{opacity:1}}
@media(prefers-reduced-motion:reduce){body::after{animation:none}}

/* telefon */
.burger{display:none;width:44px;height:44px;border-radius:10px;border:1px solid var(--line);background:var(--card);font-size:20px;cursor:pointer;flex:none}
.only-m{display:none}
@media(hover:none){.sol:hover,.case:hover,.step:hover{transform:none}}
@media(max-width:820px){
  nav{position:relative;gap:10px;padding:14px 0}
  nav>a:first-child{margin-right:auto}
  .burger{display:block}
  .hide-m{display:none}.only-m{display:inline}
  nav .links{position:absolute;top:100%;left:0;right:0;z-index:20;flex-direction:column;gap:0;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px;font-size:17px;color:var(--text)}
  nav.open .links{display:flex}
  nav .links a{padding:13px 14px;border-radius:8px}
  header{padding:28px 0 20px}
  .lead{font-size:18px}
  .cta .btn{flex:1 1 100%;text-align:center}
  .sub{font-size:17px;margin-bottom:22px}
  .pains{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:0 20px 4px;scrollbar-width:none}
  .pains::-webkit-scrollbar{display:none}
  .pains button{flex:0 0 78%;scroll-snap-align:center}
  .answer{padding:22px}
  .answer h3{font-size:22px}
  .big{font-size:38px}
  .big small{display:block;margin-top:2px}
  .arrows{display:none}
  .slider{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px}
  .slider .case{flex-basis:82%}
  .ticket{padding:24px}
  .ticket .v{font-size:64px}
  .form .btn{flex:1 1 100%}
  .works{columns:2;column-gap:10px}
  .work{margin-bottom:10px}
  .work .cap{padding:10px 12px;font-size:13px}
  .work .cap b{font-size:14px}
  .how{grid-template-columns:1fr 1fr}
}

/* telefon: zwarta karta z rozwiązaniem, bez czatu w nagłówku */
@media(max-width:820px){
  header .chat{display:none}
  .pains{overflow-y:hidden;touch-action:pan-x pan-y}
  .answer{padding:18px;gap:14px;margin-top:12px}
  .answer h3{font-size:20px;margin:6px 0}
  .answer p{font-size:15px}
  .answer ul{display:none}
  .answer .btn{display:block;text-align:center;padding:12px;margin-top:14px;white-space:normal}
  .ex{padding:14px}
  .ex .big{font-size:30px}
  .ex .big small{display:inline;font-size:15px}
  .ex .bars{margin-top:10px}
  .ex .means{margin-top:4px}
  .ex .did{margin-top:10px}
}

/* przełącznik trybu jasny / ciemny */
.card,.case,.pains button,.answer,.ticket,.chat,.work,.faq details{box-shadow:var(--shadow)}
:root[data-theme="light"] body::before,:root[data-theme="light"] body::after{display:none}
:root[data-theme="light"] .btn.ghost{border-color:var(--line2)}
.mode{width:44px;height:44px;border-radius:10px;border:1px solid var(--line);background:var(--card);cursor:pointer;flex:none;display:grid;place-items:center}
.mode:hover{border-color:var(--acc);color:var(--acc)}
[data-mode] svg{width:20px;height:20px;flex:none}
[data-mode] .sun,[data-mode] .moon{display:inline-flex;align-items:center;gap:10px}
[data-mode] .moon,:root[data-theme="light"] [data-mode] .sun{display:none}
:root[data-theme="light"] [data-mode] .moon{display:inline-flex}
nav .links{margin:0 auto}
.mode-row,.tools-m{display:none}
/* przełącznik języka PL / EN */
.lang{display:flex;flex:none;height:44px;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.lang button{border:0;background:none;border-radius:7px;padding:0 10px;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--mute);cursor:pointer}
.lang button:hover{color:var(--text)}
.lang button.on{background:var(--tint);color:var(--acc);cursor:default}
html.en-wait body{visibility:hidden}
@media(max-width:820px){
  nav>.mode{display:none}
  nav .links{margin:0}
  nav>.lang{display:none}
  .tools-m{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);margin-top:6px;padding:10px 6px 4px}
  .mode-row{display:block;background:none;border:0;padding:10px 8px;font-size:17px;cursor:pointer}
}

@media(max-width:820px){nav .links{box-shadow:0 18px 40px rgba(0,0,0,.28)}}

/* blog */
.blog-top h1{font-size:clamp(34px,5vw,60px)}
.post .ph{aspect-ratio:16/9;display:grid;place-items:center;color:var(--mute);font-size:13px;background:linear-gradient(160deg,var(--ph-green),var(--card))}
.post .ph.olive{background:linear-gradient(160deg,var(--ph-olive),var(--card))}
.post .ph.blue{background:linear-gradient(160deg,var(--ph-blue),var(--card))}
.post .ph.violet{background:linear-gradient(160deg,var(--ph-violet),var(--card))}
.post h3{font-size:19px;line-height:1.3;margin:8px 0}
.post .meta{font-size:13px;color:var(--mute);margin-top:14px}

/* tablet i telefon: menu chowa się pod przyciskiem ☰ (sześć pozycji + przełączniki nie mieszczą się w jednym rzędzie) */
nav a,nav b{white-space:nowrap}
/* logo MindPilots: znak + nazwa, druga część w kolorze akcentu */
.logo{display:inline-flex;align-items:center;gap:10px;font-size:22px;font-weight:700;letter-spacing:-.025em;line-height:1;color:var(--text)}
.logo svg{width:30px;height:30px;flex:none;display:block}
.logo i{font-style:normal;color:var(--acc)}
@media(max-width:820px){.logo{font-size:20px;gap:8px}.logo svg{width:28px;height:28px}}
@media(max-width:1060px){
  nav{position:relative;gap:10px;padding:14px 0}
  nav>a:first-child{margin-right:auto}
  .burger{display:block}
  .hide-m{display:none}.only-m{display:inline}
  nav>.mode,nav>.lang{display:none}
  nav .links{display:none;position:absolute;top:100%;left:0;right:0;z-index:20;flex-direction:column;gap:0;margin:0;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px;font-size:17px;color:var(--text);box-shadow:0 18px 40px rgba(0,0,0,.28)}
  nav.open .links{display:flex}
  nav .links a{padding:13px 14px;border-radius:8px}
  .tools-m{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);margin-top:6px;padding:10px 6px 4px}
  .mode-row{display:block;background:none;border:0;padding:10px 8px;font-size:17px;cursor:pointer}
}

/* AI Studio wyróżnione: inny kolor w menu i w module 03, nad napisem pochylona etykieta z kamerą */
nav .links a.hot,.sol a.hot{color:var(--hot)}
nav .links a.hot:hover{text-decoration:underline;text-underline-offset:5px}
.hot>span{position:relative;display:inline-block}
.camtag{position:absolute;left:100%;top:-7px;margin-left:-6px;display:grid;place-items:center;width:22px;height:16px;border-radius:5px;background:var(--hot);color:var(--hot-ink);transform:rotate(14deg);box-shadow:0 2px 6px rgba(0,0,0,.25)}
.camtag svg{width:12px;height:12px}
nav .links a.hot{margin-right:6px}
.sol a.hot{display:inline-flex;align-items:center;gap:8px}
.sol a.hot svg{width:18px;height:18px;flex:none}
.sol a.hot+a{margin-top:8px}

/* telefon: problemy w dwóch rzędach, przesuwane w bok */
@media(max-width:820px){
  .pains{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-template-rows:repeat(2,1fr);grid-auto-columns:66%;gap:10px;scroll-padding-left:20px}
  .pains button{scroll-snap-align:start;padding:14px;font-size:15px;gap:10px}
  .pains button span{font-size:20px}
}

/* telefon: mały półprzezroczysty pasek pod problemami pokazuje, jak daleko przesunięta jest lista */
.painbar{display:none}
@media(max-width:820px){
  .painbar{display:block;position:relative;width:72px;height:3px;margin:12px auto 0;border-radius:2px;background:var(--line);overflow:hidden}
  .painbar i{position:absolute;top:0;bottom:0;border-radius:2px;background:var(--scroll)}
}