/* Style specyficzne: blog */
:root{--noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.6'/></svg>")}
p{color:var(--muted);max-width:60ch}
h1,h2,h3{line-height:1.1;letter-spacing:-.02em}
.btn.ghost{color:var(--text);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--green)}
.panel .btn{margin:6px}
.hero{position:relative;padding:88px 0 80px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(45% 55% at 85% 30%,rgba(155,41,174,.3),transparent 70%),radial-gradient(50% 50% at 10% 100%,rgba(58,141,159,.3),transparent 70%)}
.hero-fade{position:absolute;bottom:0;left:0;right:0;height:120px;background:linear-gradient(to bottom,transparent,var(--bg));pointer-events:none;z-index:5}
.hero-grid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
h1{font-weight:800;font-size:clamp(38px,5.4vw,68px);letter-spacing:-.03em;text-wrap:balance}
.hero p{margin-top:24px;font-size:19px;color:var(--text);opacity:.85}
.rise{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.d2{animation-delay:.12s}
.d3{animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.orbit{position:relative;width:min(100%,430px);aspect-ratio:1;margin:0 auto}
.orbit svg{width:100%;height:100%;overflow:visible}
.ring{fill:none;stroke:rgba(128,134,150,.3);stroke-dasharray:3 9}
.spin{transform-origin:200px 200px;animation:spin 26s linear infinite}
.spin.r{animation-duration:38s;animation-direction:reverse}
.counter{transform-box:fill-box;transform-origin:center;animation:spin 26s linear infinite reverse}
.spin.r .counter{animation-duration:38s;animation-direction:normal}
@keyframes spin{to{transform:rotate(360deg)}}
.core-pulse{transform-box:fill-box;transform-origin:center;animation:pulse 3s ease-out infinite}
@keyframes pulse{from{transform:scale(1);opacity:.6}to{transform:scale(2.3);opacity:0}}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.12;mix-blend-mode:overlay;background-image:var(--noise)}
.net{isolation:isolate}
.net::before{content:"";position:absolute;inset:-26%;z-index:-1;pointer-events:none; background:radial-gradient(38% 38% at 30% 30%,rgba(155,102,255,.75),transparent 72%),radial-gradient(36% 36% at 72% 38%,rgba(58,141,159,.7),transparent 72%),radial-gradient(40% 40% at 52% 78%,rgba(89,190,152,.55),transparent 72%),radial-gradient(30% 30% at 84% 82%,rgba(247,198,76,.4),transparent 72%); background-size:135% 135%;-webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent);mask-image:radial-gradient(closest-side,#000 40%,transparent);animation:aur 16s ease-in-out infinite alternate}
@keyframes aur{from{background-position:0% 0%}to{background-position:100% 100%}}
.net>svg{position:absolute;inset:0;width:100%;height:100%}
.hlogo{position:absolute;inset:0;display:grid;place-items:center;z-index:1}
.hlogo img{width:68%;height:auto;max-height:60%;object-fit:contain;filter:drop-shadow(0 10px 40px rgba(10,6,40,.45))}
.hlogo svg{width:92px;height:92px}
.hlogo.has .fbk{display:none}
.bar{position:sticky;top:calc(env(safe-area-inset-top,0px) + 73px);z-index:10;padding:14px 0;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(10px)}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{font:500 14px/1 'Montserrat',sans-serif;padding:12px 19px;border-radius:999px;border:none;box-shadow:inset 0 0 0 1px var(--line);background:var(--surface);color:var(--text);cursor:pointer;transition:box-shadow .2s,background .3s,color .3s}
.chip:hover{box-shadow:inset 0 0 0 1px var(--green)}
.chip[aria-pressed="true"]{background:var(--g-bright);color:#000;box-shadow:none}
.chip small{opacity:.7;margin-left:6px;font-size:12px}
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;padding:32px 0 96px}
.post{position:relative;grid-column:span 2;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:24px;background:var(--surface);overflow:hidden;text-decoration:none;isolation:isolate;transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .3s}
.post.feat{grid-column:span 6;flex-direction:row}
.post:hover{transform:translateY(-6px);border-color:transparent;box-shadow:0 26px 60px -22px var(--cs)}
.post[hidden]{display:none}
.art{position:relative;aspect-ratio:400/220;background:var(--ag);overflow:hidden}
.feat .art{flex:1.1;aspect-ratio:auto;min-height:300px}
.art svg{position:absolute;inset:0;width:100%;height:100%}
.art::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.6'/></svg>")}
.body{display:flex;flex-direction:column;gap:12px;padding:26px 26px 28px;flex:1}
.feat .body{flex:.9;justify-content:center;padding:44px}
.tag{align-self:flex-start;font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.post h2{font-size:21px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.feat h2{font-size:clamp(26px,3vw,38px);font-weight:800}
.meta{font-size:13px;color:var(--muted)}
.read{margin-top:auto;padding-top:8px;font-weight:600;font-size:14px;display:inline-flex;gap:8px;align-items:center}
.read i{display:block;width:22px;height:2px;background:var(--g-bright);transition:width .35s}
.post:hover .read i{width:44px}
.blink{animation:blink 1.1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.flow{stroke-dasharray:6 10;animation:flow 1.6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-32}}
.sn{stroke-dasharray:140 400;animation:snk 5s linear infinite}
@keyframes snk{to{stroke-dashoffset:-540}}
.hand{transform-box:view-box;transform-origin:200px 110px;animation:spin 6s linear infinite}
.rew{transform-box:view-box;transform-origin:200px 110px;animation:spin 7s linear infinite reverse}
.sw1{animation:sw 4s ease-in-out infinite alternate}
@keyframes sw{from{opacity:.25}to{opacity:1}}
.rowa{animation:rowa 5s ease-in-out infinite alternate}
@keyframes rowa{to{transform:translateY(-22px)}}
.swap1{animation:sa 6s infinite}
.swap2{animation:sb 6s infinite}
@keyframes sa{0%,40%{opacity:1}50%,90%{opacity:0}100%{opacity:1}}
@keyframes sb{0%,40%{opacity:0}50%,90%{opacity:1}100%{opacity:0}}
.dotm{animation:blink2 1.4s infinite}
@keyframes blink2{0%,60%,100%{opacity:.25}30%{opacity:1}}
.panel h2{font-size:clamp(28px,3.8vw,46px);font-weight:800;max-width:16em;margin:0 auto}
@media (max-width:900px){.hero{padding-top:48px} .hero-grid{grid-template-columns:1fr} .orbit{width:min(100%,320px)} .grid{grid-template-columns:1fr} .post,.post.feat{grid-column:auto;flex-direction:column} .feat .art{min-height:220px;flex:none;aspect-ratio:400/220} .feat .body{padding:26px} .fg{grid-template-columns:1fr 1fr} .fg>:first-child{grid-column:1/-1} .panel{padding:48px 24px} .bar{top:calc(env(safe-area-inset-top,0px) + 73px)} .chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px} .chip{flex:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important} html{scroll-behavior:auto}}