/* HEMS CoreInfra — strona główna (ładowana tylko na /) */
.home { --wrap: 1240px; overflow-x: clip; }
.home-nav { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(14px); background: color-mix(in srgb, var(--bg) 72%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); max-width: none; padding-left: max(var(--sp-6), calc((100% - var(--wrap)) / 2)); padding-right: max(var(--sp-6), calc((100% - var(--wrap)) / 2)); }
.home-nav__links { display: flex; align-items: center; gap: var(--sp-4) var(--sp-5); font-size: var(--fs-sm); }
.home-nav__links a { white-space: nowrap; }
.home-nav__links a { color: var(--text-2); } .home-nav__links a:hover { color: var(--text); text-decoration: none; }
.home-status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid var(--border); font-size: var(--fs-xs); color: var(--text-2); background: var(--surface); }
.home-status-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--off); box-shadow: 0 0 0 0 currentColor; }
.home-status-pill[data-state="ok"] i { background: var(--ok); animation: hs-pulse 2.4s ease-out infinite; color: var(--ok); }
.home-status-pill[data-state="warning"] i { background: var(--warn); } .home-status-pill[data-state="error"] i { background: var(--err); }
@keyframes hs-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }

/* hero */
.home-hero { max-width: var(--wrap); margin: 0 auto; padding: var(--sp-7) var(--sp-6) var(--sp-6); display: grid; grid-template-columns: 1fr 1.08fr; gap: var(--sp-7); align-items: center; position: relative; }
.home-hero::before { content: ""; position: absolute; inset: -120px -20% auto; height: 620px; z-index: -1; pointer-events: none;
  background: radial-gradient(420px 260px at 72% 40%, color-mix(in srgb, var(--e-pv) 18%, transparent), transparent 70%),
              radial-gradient(380px 260px at 88% 70%, color-mix(in srgb, var(--e-battery) 16%, transparent), transparent 70%),
              radial-gradient(500px 300px at 20% 20%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%); filter: blur(10px); }
.home-hero h1 { font-size: clamp(2.4rem, 5.2vw, 4.1rem); letter-spacing: -.04em; font-weight: 780; line-height: 1.02; margin: 18px 0 var(--sp-4); }
.home-hero h1 em { font-style: normal; background: linear-gradient(90deg, var(--e-pv), var(--e-battery) 50%, var(--accent), var(--e-pv)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: hs-shine 9s linear infinite; }
@keyframes hs-shine { to { background-position: 300% 0; } }
.home-hero .lead { font-size: var(--fs-lg); color: var(--text-2); max-width: 54ch; }
.home-hero .lead strong { color: var(--text); }
.home-hero__cta { margin-top: var(--sp-5); }
.btn--lg { padding: 12px 20px; font-size: var(--fs-md); border-radius: var(--r-md); }
.home-chips { list-style: none; padding: 0; margin: var(--sp-5) 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: var(--fs-sm); color: var(--text-2); }
.home-chips li { display: inline-flex; align-items: center; gap: 6px; } .home-chips .ico { width: 16px; height: 16px; color: var(--accent-2); }

/* scena — animowany schemat */
.scene { margin: 0; padding: var(--sp-4); position: relative; border-radius: 22px; background: linear-gradient(160deg, color-mix(in srgb, var(--surface) 92%, var(--accent) 8%), var(--surface)); box-shadow: var(--shadow-2), 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); overflow: hidden; }
.scene::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(115deg, transparent 40%, color-mix(in srgb, #fff 6%, transparent) 50%, transparent 60%); background-size: 250% 100%; animation: hs-sweep 7s ease-in-out infinite; }
@keyframes hs-sweep { 0%, 60% { background-position: 150% 0; } 100% { background-position: -100% 0; } }
.scene__top { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.scene__clock { display: flex; align-items: center; gap: 10px; font-size: 1.35rem; font-weight: 650; }
.scene__sky { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fff7c2, var(--e-pv)); box-shadow: 0 0 18px var(--e-pv); transition: background .8s, box-shadow .8s; }
.scene__sky.is-night { background: radial-gradient(circle at 65% 35%, transparent 38%, #cfd8ea 40%); box-shadow: 0 0 12px rgba(180, 200, 255, .35); }
.scene__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.scene__chip { font-size: var(--fs-xs); padding: 5px 10px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); transition: border-color .4s, color .4s; }
.scene__chip--price b { color: var(--e-price); }
.scene__chip--mode { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.scene__svg { width: 100%; height: auto; display: block; margin: var(--sp-2) 0; }
.scene__link { fill: none; stroke: var(--border-strong); stroke-width: 2; stroke-dasharray: 3 7; transition: stroke .5s, stroke-width .5s, opacity .5s; opacity: .7; }
.scene__link.is-on { stroke: var(--c); stroke-dasharray: none; stroke-width: var(--w, 3); opacity: .55; filter: drop-shadow(0 0 6px var(--c)); }
.scene__particles circle { filter: drop-shadow(0 0 4px var(--c)); }
.scene__hub-ring { fill: none; stroke: color-mix(in srgb, var(--accent) 60%, transparent); stroke-width: 1.5; stroke-dasharray: 4 10; transform-origin: center; animation: hs-spin 18s linear infinite; }
.scene__hub-glow { animation: hs-breathe 3.6s ease-in-out infinite; transform-origin: center; }
@keyframes hs-spin { to { transform: rotate(360deg); } }
@keyframes hs-breathe { 50% { transform: scale(1.12); opacity: .7; } }
.scene__hub-lbl { fill: var(--text-2); font: 700 12px var(--font-ui); letter-spacing: .24em; }
.scene__card { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 1.2; transition: stroke .4s; }
.scene__node.is-on .scene__card { stroke: color-mix(in srgb, var(--c) 70%, var(--border-strong)); }
.scene__node.is-on { filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--c) 28%, transparent)); }
.scene__glyph { fill: none; stroke: var(--c); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.scene__lbl { fill: var(--muted); font: 650 10.5px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.scene__val { fill: var(--text); font: 650 17px var(--font-num); }
.scene__soc { fill: var(--e-battery); transition: width .7s ease; }
.scene__bottom { display: grid; gap: var(--sp-2); }
.scene__timeline { position: relative; height: 34px; border-radius: 8px; background: var(--surface-3); overflow: hidden; }
.scene__timeline span { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 2px; padding: 4px; }
.scene__timeline span b { flex: 1; background: color-mix(in srgb, var(--e-price) 55%, transparent); border-radius: 2px 2px 0 0; min-height: 2px; transition: opacity .3s; }
.scene__timeline span b.is-now { background: var(--e-price); box-shadow: 0 0 10px var(--e-price); }
.scene__timeline i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 22%, transparent)); border-right: 2px solid var(--accent); transition: width .25s linear; }
.scene__feed { min-height: 2.8em; font-size: var(--fs-sm); color: var(--text-2); }
.scene__feed span { font-family: var(--font-num); color: var(--accent-2); margin-right: 6px; }
.scene__feed.is-new { animation: hs-in .5s ease; }
@keyframes hs-in { from { opacity: 0; transform: translateY(4px); } }
.scene__savings { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--sp-2); border-top: 1px dashed var(--border); font-size: var(--fs-sm); color: var(--muted); }
.scene__savings b { font-size: 1.25rem; color: var(--ok); }
.scene__note { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--sp-2); }
/* scena 0.17.1: wiatrak, agregat, awaria sieci, niebo, fale z mózgu */
.scene__sky-layer rect { transition: opacity 1.6s ease; }
.scene__sky-night, .scene__stars { opacity: 0; transition: opacity 1.6s ease; }
.scene.is-night .scene__sky-day { opacity: 0; }
.scene.is-night .scene__sky-night, .scene.is-night .scene__stars { opacity: 1; }
.scene__stars circle { fill: #fff; animation: hs-twinkle 3.2s ease-in-out infinite; animation-delay: var(--d, 0s); }
:root[data-theme="light"] .scene__stars circle { fill: #6b7cc9; }
@keyframes hs-twinkle { 50% { opacity: .15; } }
.scene__blade { fill: color-mix(in srgb, var(--c) 35%, transparent); stroke: var(--c); stroke-width: 1.2; stroke-linejoin: round; }
.scene__hubcap { fill: var(--c); }
.scene__node[data-node="wind"].is-on .scene__rotor { filter: drop-shadow(0 0 4px var(--c)); }
.scene__node[data-node="gen"].is-on .scene__shake { animation: hs-shake .12s linear infinite; }
@keyframes hs-shake { 25% { transform: translate(.5px, -.4px); } 75% { transform: translate(-.5px, .4px); } }
.scene__smoke circle { fill: color-mix(in srgb, var(--muted) 60%, transparent); opacity: 0; }
.scene__node[data-node="gen"].is-on .scene__smoke circle { animation: hs-smoke 1.5s ease-out infinite; }
.scene__node[data-node="gen"].is-on .scene__smoke circle:nth-child(2) { animation-delay: .5s; }
.scene__node[data-node="gen"].is-on .scene__smoke circle:nth-child(3) { animation-delay: 1s; }
@keyframes hs-smoke { 0% { opacity: .7; transform: translate(0, 0) scale(.6); } 100% { opacity: 0; transform: translate(4px, -12px) scale(1.8); } }
.scene__node[data-node="gen"].is-on .scene__card { animation: hs-alarm 1.2s ease-in-out infinite; }
.scene__node.is-down .scene__card { stroke: var(--err); stroke-dasharray: 5 4; animation: hs-alarm 1s ease-in-out infinite; }
.scene__node.is-down .scene__val { fill: var(--err); }
.scene__link.is-down { stroke: var(--err); stroke-dasharray: 2 8; opacity: .8; animation: hs-dash 1s linear infinite; }
@keyframes hs-dash { to { stroke-dashoffset: -20; } }
@keyframes hs-alarm { 50% { filter: drop-shadow(0 0 10px var(--err)); } }
.scene__val.is-bump { animation: hs-bump .45s ease; }
@keyframes hs-bump { 40% { opacity: .35; } }
.scene__hub-ring--2 { stroke-dasharray: 1 12; animation-duration: 26s; animation-direction: reverse; opacity: .7; }
.scene__ripple { fill: none; stroke: var(--accent); stroke-width: 2; animation: hs-ripple 1.6s ease-out forwards; transform-box: fill-box; transform-origin: center; }
.scene__ripple--alert { stroke: var(--err); }
@keyframes hs-ripple { from { transform: scale(.75); opacity: .85; } to { transform: scale(3.2); opacity: 0; } }
.scene__particles .is-tail { filter: none; }
.scene.is-island { box-shadow: var(--shadow-2), 0 0 0 1px color-mix(in srgb, var(--err) 55%, transparent), 0 0 42px -8px color-mix(in srgb, var(--err) 55%, transparent); transition: box-shadow .6s; }
.scene__alert { font: 700 var(--fs-xs) var(--font-ui); text-transform: uppercase; letter-spacing: .08em; color: #fff; background: var(--err); padding: 3px 8px; border-radius: var(--r-pill); animation: hs-alarm 1s ease-in-out infinite; }
.scene__alert[hidden] { display: none; }

/* liczby */
.home-stats { max-width: var(--wrap); margin: 0 auto; padding: var(--sp-5) var(--sp-6); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.home-stats div, .home-stats__link { display: block; color: inherit; text-decoration: none; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); }
.home-stats b { display: block; font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 700; background: linear-gradient(90deg, var(--text), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home-stats span { color: var(--muted); font-size: var(--fs-sm); }

/* sekcje */
.home-section { max-width: var(--wrap); margin: 0 auto; padding: var(--sp-7) var(--sp-6); }
.home-section__head { text-align: center; max-width: 720px; margin: 0 auto var(--sp-6); }
.home-section__head h2, .home-trust h2, .home-final h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -.025em; font-weight: 720; }
.home-section__head p { color: var(--text-2); font-size: var(--fs-lg); }
.home-eyebrow { display: inline-block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-2); margin-bottom: var(--sp-2); }
.home-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: var(--sp-5); }
.home-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font: 600 var(--fs-sm) var(--font-ui); cursor: pointer; transition: all .2s; }
.home-tab .ico { width: 16px; height: 16px; }
.home-tab:hover { color: var(--text); border-color: var(--border-strong); }
.home-tab.is-active { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 35%, transparent); }
.home-panel__lead { text-align: center; color: var(--text-2); margin-bottom: var(--sp-5); }
.home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-4); }
.home-card { padding: var(--sp-5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); position: relative; overflow: hidden; transition: transform .25s, border-color .25s, box-shadow .25s; }
.home-card::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--accent), var(--e-battery)); transform: scaleX(0); transform-origin: left; transition: transform .35s; }
.home-card:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow-1); } .home-card:hover::before { transform: scaleX(1); }
.home-card h3 { font-size: var(--fs-md); margin-bottom: 6px; } .home-card p { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
.home-panel.is-active .home-card { animation: hs-up .5s both; animation-delay: var(--d); }
@keyframes hs-up { from { opacity: 0; transform: translateY(12px); } }
.home-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); counter-reset: s; }
.home-steps li { padding: var(--sp-5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); position: relative; }
.home-steps__n { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; margin-bottom: var(--sp-3); font: 700 1rem var(--font-num); color: #fff; background: linear-gradient(135deg, var(--accent), #1747a6); box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 40%, transparent); }
.home-steps p { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
.home-trust { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--sp-7); align-items: center; }
.home-trust p { color: var(--text-2); }
.home-trust__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.home-trust__list li { display: flex; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); }
.home-trust__list .ico { width: 20px; height: 20px; color: var(--ok); flex: 0 0 auto; margin-top: 2px; }
.home-trust__list strong { display: block; } .home-trust__list span { color: var(--muted); font-size: var(--fs-sm); }
.home-final { max-width: 980px; margin: 0 auto var(--sp-7); padding: var(--sp-7) var(--sp-6); text-align: center; border-radius: 28px;
  background: radial-gradient(500px 200px at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent), var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); }
.home-final p { color: var(--text-2); } .home-final .btn-row { justify-content: center; margin-top: var(--sp-4); }

/* stopka */
.pub-foot__row { max-width: var(--wrap, 1240px); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: center; }
.pub-foot__ver { display: inline-flex; align-items: center; gap: 6px; } .pub-foot__ver strong { color: var(--text-2); }
.pub-foot__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.pub-foot__links a { color: var(--muted); } .pub-foot__links a:hover { color: var(--text); }

/* pojawianie przy przewijaniu */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (max-width: 1000px) {
  .home-hero, .home-trust { grid-template-columns: 1fr; padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .home-stats { grid-template-columns: repeat(2, 1fr); padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .home-steps { grid-template-columns: 1fr; } .home-section { padding: var(--sp-6) var(--sp-4); }
  .home-nav__links { display: none; } .home-nav { padding-left: var(--sp-4); padding-right: var(--sp-4); }
}
@media (max-width: 520px) { .home-stats { grid-template-columns: 1fr 1fr; } .home-nav .btn-row .btn:not(.btn--primary):not(.btn--icon) { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .home *, .home *::before, .home *::after { animation: none !important; transition: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* publiczna strona statusu */
.status-hero { max-width: 980px; margin: var(--sp-6) auto var(--sp-5); padding: var(--sp-5) var(--sp-6); display: flex; gap: var(--sp-4); align-items: center; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); --s: var(--off); }
.status-hero--ok { --s: var(--ok); } .status-hero--warning { --s: var(--warn); } .status-hero--error { --s: var(--err); }
.status-hero { background: linear-gradient(120deg, color-mix(in srgb, var(--s) 14%, var(--surface)), var(--surface) 60%); border-color: color-mix(in srgb, var(--s) 40%, var(--border)); }
.status-hero h1 { margin: 0 0 4px; font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -.02em; }
.status-hero p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.status-hero__dot { width: 18px; height: 18px; border-radius: 50%; background: var(--s); flex: 0 0 auto; color: var(--s); animation: hs-pulse 2.4s ease-out infinite; }
.status-wrap { max-width: 980px; margin: 0 auto var(--sp-6); padding: 0 var(--sp-4); }
.status-wrap h2 { font-size: var(--fs-lg); margin: var(--sp-5) 0 var(--sp-3); }
.status-group { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); padding: var(--sp-2) var(--sp-5) var(--sp-4); margin-bottom: var(--sp-4); }
.status-group h2 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin: var(--sp-3) 0 var(--sp-2); }
.status-comp { padding: var(--sp-3) 0; border-top: 1px solid var(--border); } .status-group h2 + .status-comp { border-top: 0; }
.status-comp__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: 8px; }
.status-comp__name { flex: 1; font-weight: 600; } .status-comp__uptime { font: 600 var(--fs-sm) var(--font-num); color: var(--muted); }
.status-dot { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-2); --s: var(--off); }
.status-dot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--s); }
.status-dot--ok { --s: var(--ok); } .status-dot--warning { --s: var(--warn); } .status-dot--error { --s: var(--err); }
.status-bars { display: flex; gap: 3px; height: 30px; }
.status-bars span, .status-bars button { flex: 1; min-width: 0; padding: 0; border: 0; border-radius: 3px; background: var(--surface-3); transition: transform .15s; cursor: pointer; }
.status-bars button:hover, .status-bars button:focus-visible, .status-bars button[aria-pressed="true"] { transform: scaleY(1.15); outline: 2px solid color-mix(in srgb, var(--text) 35%, transparent); outline-offset: 1px; }
.s-ok { background: var(--ok) !important; } .s-warning { background: var(--warn) !important; } .s-error { background: var(--err) !important; } .s-unknown { background: var(--off) !important; } .s-none { background: var(--surface-3) !important; }
.status-legend { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--fs-xs); color: var(--muted); margin-bottom: var(--sp-3); }
.status-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.status-inc { border: 1px solid var(--border); border-left: 4px solid var(--warn); border-radius: var(--r-md); background: var(--surface); padding: var(--sp-4); margin-bottom: var(--sp-3); }
.status-inc--major { border-left-color: var(--err); } .status-inc--maintenance { border-left-color: var(--accent); } .status-inc--resolved { border-left-color: var(--ok); }
.status-inc header { display: flex; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: 6px; }
.status-inc__state { font-size: var(--fs-xs); color: var(--muted); }
.status-inc p { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--text-2); } .status-inc time { font-family: var(--font-num); color: var(--muted); }
@media (max-width: 640px) { .status-bars span:nth-child(-n+14), .status-bars button:nth-child(-n+14) { display: none; } .status-hero { margin-left: var(--sp-4); margin-right: var(--sp-4); } }

/* ── 0.14 — strona cen energii (/ceny-energii) ─────────────────────────── */
.pp-hero { max-width: var(--wrap); margin: 0 auto; padding: var(--sp-7) var(--sp-6) var(--sp-4); display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-6); align-items: center; position: relative; }
.pp-hero::before { content: ""; position: absolute; inset: -80px -10% auto; height: 420px; z-index: -1; pointer-events: none;
  background: radial-gradient(380px 220px at 80% 50%, color-mix(in srgb, var(--e-price) 22%, transparent), transparent 70%),
              radial-gradient(420px 240px at 15% 30%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%); filter: blur(8px); }
.pp-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); letter-spacing: -.035em; font-weight: 780; line-height: 1.05; margin: 14px 0 var(--sp-3); }
.pp-hero h1 em { font-style: normal; background: linear-gradient(90deg, var(--e-price), var(--err), var(--e-pv), var(--e-price)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: hs-shine 8s linear infinite; }
.pp-hero .lead { color: var(--text-2); font-size: var(--fs-lg); max-width: 60ch; }
.pp-now { display: grid; gap: 4px; justify-items: start; padding: var(--sp-5) var(--sp-6); border-radius: 24px; background: linear-gradient(150deg, color-mix(in srgb, var(--surface) 88%, var(--e-price) 12%), var(--surface));
  box-shadow: var(--shadow-2), 0 0 0 1px color-mix(in srgb, var(--e-price) 30%, transparent); position: relative; overflow: hidden; }
.pp-now::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--e-price) 35%, transparent), transparent 70%); animation: pp-glow 4s ease-in-out infinite alternate; }
@keyframes pp-glow { to { transform: scale(1.25); opacity: .6; } }
.pp-now__label { font-size: var(--fs-sm); color: var(--text-2); }
.pp-now__value { font-size: clamp(2.6rem, 6vw, 4rem); font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--e-price); line-height: 1; }
.pp-now__value--none { color: var(--text-3, var(--text-2)); }
.pp-now__unit { font-size: var(--fs-sm); color: var(--text-2); }
.pp { display: grid; gap: var(--sp-4); padding-top: var(--sp-4); }
.pp-toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); position: sticky; top: 64px; z-index: 5; backdrop-filter: blur(12px); background: color-mix(in srgb, var(--surface) 86%, transparent); }
.pp-seg { display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--border); }
.pp-seg button { border: 0; background: transparent; color: var(--text-2); padding: 7px 16px; border-radius: var(--r-pill); font: inherit; font-weight: 600; cursor: pointer; transition: background .25s, color .25s; }
.pp-seg--sm button { padding: 5px 11px; font-size: var(--fs-xs); }
.pp-seg button[aria-selected="true"], .pp-seg button[aria-pressed="true"] { background: var(--accent); color: #fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent); }
.pp-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pp-nav .btn--icon { font-size: 1.3rem; line-height: 1; }
.pp-date { width: auto; padding: 6px 10px; }
.pp-label { min-width: 9ch; text-align: center; font-variant-numeric: tabular-nums; }
.pp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.pp-stat { padding: var(--sp-4); border-radius: 18px; border: 1px solid var(--border); background: var(--surface); display: grid; gap: 2px; position: relative; overflow: hidden; }
.pp-stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); }
.pp-stat--cheap::before { background: var(--ok); } .pp-stat--exp::before { background: var(--err); }
.pp-stat span { font-size: var(--fs-xs); color: var(--text-2); text-transform: uppercase; letter-spacing: .08em; font-weight: 650; }
.pp-stat strong { font-size: 1.7rem; font-weight: 760; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pp-stat small { color: var(--text-2); font-size: var(--fs-xs); min-height: 1.2em; }
.pp-chart { padding: var(--sp-5); }
.pp-chart__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.pp-chart__head h2 { font-size: 1.15rem; margin: 0; }
.pp-legend { display: flex; gap: 14px; font-size: var(--fs-xs); color: var(--text-2); }
.pp-lg::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.pp-lg--cheap::before { background: #10b981; } .pp-lg--mid::before { background: #f59e0b; } .pp-lg--exp::before { background: #ef4444; }
.pp-canvas { position: relative; height: 380px; } .pp-canvas--sm { height: 260px; }
.pp-msg { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--text-2); padding: var(--sp-5); background: color-mix(in srgb, var(--surface) 70%, transparent); border-radius: 12px; }
.pp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.pp-win { padding: var(--sp-4); display: grid; gap: 4px; align-content: start; }
.pp-win__k { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--text-2); }
.pp-win strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.pp-win--cheap strong { color: var(--ok); } .pp-win--exp strong { color: var(--err); }
.pp-win [data-win-delta] { color: var(--accent); }
.pp-heat { padding: var(--sp-5); }
.pp-heat__wrap { display: grid; grid-template-columns: 54px repeat(24, 1fr); gap: 2px; font-size: 10px; color: var(--text-2); }
.pp-heat__wrap span { display: block; height: 18px; border-radius: 3px; opacity: 0; transform: scale(.6); animation: pp-pop .5s cubic-bezier(.2,.8,.2,1.2) forwards; }
.pp-heat__wrap .pp-heat__lbl { opacity: 1; transform: none; animation: none; height: auto; line-height: 18px; text-align: right; padding-right: 6px; font-variant-numeric: tabular-nums; }
.pp-heat__wrap .pp-heat__none { background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 3px, transparent 3px, transparent 6px); }
@keyframes pp-pop { to { opacity: 1; transform: none; } }
.pp-table { padding: var(--sp-4); } .pp-table summary { cursor: pointer; font-weight: 650; }
.pp-table table { margin-top: var(--sp-3); font-variant-numeric: tabular-nums; }
.pp-table td.pp-c--cheap { color: var(--ok); } .pp-table td.pp-c--exp { color: var(--err); }
.pp-empty { padding: var(--sp-6); text-align: center; }
.pp-info__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
.pp-info h3 { font-size: 1.05rem; margin-bottom: 6px; }
.pp-cta { justify-content: center; margin-top: var(--sp-6); }
.home-nav__links a[aria-current="page"] { color: var(--text); font-weight: 650; }
@media (max-width: 900px) {
  .pp-hero { grid-template-columns: 1fr; padding: var(--sp-5) var(--sp-4) 0; }
  .pp-stats { grid-template-columns: repeat(2, 1fr); } .pp-grid, .pp-info__grid { grid-template-columns: 1fr; }
  .pp-canvas { height: 300px; } .pp-toolbar { position: static; }
  .pp-heat__wrap { grid-template-columns: 40px repeat(24, 1fr); } .pp-heat__wrap span { height: 12px; }
}
@media (prefers-reduced-motion: reduce) { .pp-now::after, .pp-hero h1 em { animation: none; } .pp-heat__wrap span { animation: none; opacity: 1; transform: none; } }

/* ── 0.14 — publiczna mapa instalacji ─────────────────────────────────── */
.map-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
.map-wrap { display: grid; grid-template-columns: 1fr 300px; gap: var(--sp-4); align-items: start; padding-top: var(--sp-3); }
.map-card { padding: var(--sp-3); position: relative; }
.map-empty { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); background: var(--surface); padding: 10px 16px; border-radius: 12px; box-shadow: var(--shadow-2); text-align: center; }
.map-side { display: grid; gap: var(--sp-3); }
.map-side .card { padding: var(--sp-4); } .map-side h3 { font-size: 1rem; margin-bottom: 8px; }
.map-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.map-rank li { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; font-size: var(--fs-sm); padding-bottom: 6px; border-bottom: 1px dashed var(--border); }
.map-rank b { font-variant-numeric: tabular-nums; } .map-rank small { grid-column: 1 / -1; color: var(--text-2); font-size: var(--fs-xs); }
@media (max-width: 900px) { .map-wrap { grid-template-columns: 1fr; } }
.home [hidden] { display: none !important; }

/* ── 0.14 — sekcja „Na żywo” na stronie głównej ───────────────────────── */
.home-live__grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: var(--sp-4); }
.home-live__card { display: flex; flex-direction: column; gap: 6px; padding: var(--sp-5); color: inherit; text-decoration: none; position: relative; overflow: hidden; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.home-live__card:hover { text-decoration: none; transform: translateY(-4px); box-shadow: var(--shadow-2), 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.home-live__k { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--text-2); }
.home-live__k .ico { width: 16px; height: 16px; color: var(--accent-2); }
.home-live__big { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.05; }
.home-live__big small { font-size: .9rem; font-weight: 600; color: var(--text-2); }
.home-live__card--price .home-live__big { color: var(--e-price); }
.home-live__bars { width: 100%; height: 110px; margin: var(--sp-2) 0 4px; }
.home-live__bars rect { transform-box: fill-box; transform-origin: bottom; }
.js .home-live__card.is-in .home-live__bars rect { animation: hl-grow .8s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 9ms); }
.home-live__bars .b-cheap { fill: #10b981; } .home-live__bars .b-mid { fill: #f59e0b; } .home-live__bars .b-exp { fill: #ef4444; }
@keyframes hl-grow { from { transform: scaleY(0); } }
.home-live__row { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--text-2); }
.home-live__row b { color: var(--text); }
.home-live__map { width: 100%; height: 170px; margin: var(--sp-2) 0; }
.home-live__map path { fill: var(--surface-2); stroke: var(--border); stroke-width: 2; }
.home-live__map path.has { fill: color-mix(in srgb, var(--accent) 22%, var(--surface-2)); }
.home-live__map > circle { fill: var(--accent); fill-opacity: .8; stroke: #fff; stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: hl-ping 2.8s ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes hl-ping { 0% { transform: scale(.7); } 30% { transform: scale(1.15); } 60%, 100% { transform: scale(1); } }
.home-live__status { display: inline-flex; align-items: center; gap: 12px; font-size: 1.35rem; color: var(--text); padding: 6px 0; }
.home-live__status i { width: 14px; height: 14px; border-radius: 50%; background: var(--off); flex: none; }
.home-live__status[data-state="ok"] i { background: var(--ok); color: var(--ok); animation: hs-pulse 2.4s ease-out infinite; }
.home-live__status[data-state="warning"] i { background: var(--warn); } .home-live__status[data-state="error"] i { background: var(--err); }
.home-live__list { list-style: none; padding: 0; margin: var(--sp-2) 0; display: grid; gap: 6px; font-size: var(--fs-sm); color: var(--text-2); }
.home-live__list .ico { width: 14px; height: 14px; color: var(--ok); vertical-align: -2px; }
.home-live__go { margin-top: auto; padding-top: var(--sp-2); font-size: var(--fs-sm); font-weight: 650; color: var(--accent-2); }
@media (max-width: 980px) { .home-live__grid { grid-template-columns: 1fr; } }
/* 0.40.1: instalacje z małych miejscowości — pulsujący punkt w środku województwa */
.hl-area__core { fill: var(--e-pv, #f5a524); stroke: #fff; stroke-width: 3; }
.hl-area__ring { fill: none; stroke: var(--e-pv, #f5a524); stroke-width: 4; transform-box: fill-box; transform-origin: center; animation: hl-area 2.6s ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes hl-area { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.5); } }
@media (prefers-reduced-motion: reduce) { .home-live__bars rect, .home-live__map circle { animation: none !important; } }

/* ── Wspierane urządzenia ─────────────────────────────────────────────── */
.dev-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.dev-steps li { display: flex; gap: 14px; align-items: flex-start; padding: 18px; }
.dev-steps h3 { margin: 0 0 6px; font-size: 1rem; }
.dev-steps p { margin: 0; font-size: .9rem; }
.dev-steps__n { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.dev-methods { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
.dev-method { padding: 0; }
.dev-method summary { cursor: pointer; list-style: none; padding: 16px 18px; display: grid; gap: 4px; }
.dev-method summary::-webkit-details-marker { display: none; }
.dev-method summary strong::after { content: '+'; float: right; color: var(--muted); font-weight: 400; }
.dev-method[open] summary strong::after { content: '−'; }
.dev-method ol { margin: 0; padding: 0 18px 0 38px; display: grid; gap: 8px; }
.dev-method__note { margin: 12px 18px 18px; padding: 10px 12px; border-radius: var(--r-md, 10px); background: var(--surface-2, rgba(128,128,128,.08)); }
.dev-filter { display: grid; gap: 12px; margin-bottom: 14px; }
.dev-filter .btn-row { flex-wrap: wrap; }
.dev-filter [aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.dev-table td { vertical-align: top; }
.dev-table .chip { margin: 0 4px 4px 0; }
.dev-empty { padding: 18px; margin: 0; }
.dev-boards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.dev-boards .card { padding: 16px; }
.dev-boards h3 { margin: 10px 0 6px; font-size: 1rem; }
.devices-page [hidden], .legal-page [hidden] { display: none !important; }
.home-stats__link:hover { border-color: var(--accent); }

/* ── Regulamin i polityka prywatności ─────────────────────────────────── */
.legal { max-width: 860px; }
.legal__head h1 { margin: 6px 0 12px; }
.legal__warn { padding: 12px 14px; border-radius: var(--r-md, 10px); border: 1px solid var(--warning, #c98a00); background: rgba(201, 138, 0, .08); }
.legal__sec { margin-top: 28px; }
.legal__sec h2 { font-size: 1.15rem; margin: 0 0 10px; }
.legal__sec p, .legal__sec li { line-height: 1.65; }
.legal__table td { vertical-align: top; min-width: 120px; }

/* ── Słońce dziś i jutro ─────────────────────────────────────────────── */
.home-sun { margin-top: var(--sp-4); padding: var(--sp-5); display: grid; gap: 14px; }
.home-sun__head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; justify-content: space-between; }
.home-sun__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-5); align-items: start; }
.home-sun__days { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.home-sun__day { display: flex; flex-direction: column; gap: 4px; }
.home-sun__day .home-live__big { color: var(--e-pv, #e8a317); }
.home-sun__curve { grid-column: 1 / -1; width: 100%; height: 124px; }
.home-sun__area { fill: color-mix(in srgb, var(--e-pv, #e8a317) 22%, transparent); }
.home-sun__line { fill: none; stroke: var(--e-pv, #e8a317); stroke-width: 2; vector-effect: non-scaling-stroke; }
.home-sun__split { stroke: var(--border); stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.home-sun__now { stroke: var(--text); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.home-sun__axis { grid-column: 1 / -1; display: flex; justify-content: space-between; }
.home-sun__cities { width: 100%; border-collapse: collapse; font-size: .9rem; }
.home-sun__cities th { text-align: left; font-weight: 600; color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; padding: 4px 6px; }
.home-sun__cities td { padding: 5px 6px; border-top: 1px solid var(--border); position: relative; }
.home-sun__cities td b { position: relative; }
.home-sun__bar { position: absolute; left: 0; top: 50%; height: 60%; transform: translateY(-50%); width: var(--w); border-radius: 4px; background: color-mix(in srgb, var(--e-pv, #e8a317) 25%, transparent); }
.home-sun__note { margin: 0; }
@media (max-width: 980px) { .home-sun__grid { grid-template-columns: 1fr; } }

/* ===== Strona statusu — wskaźniki, wykresy 30 dni / 24 h, animacje ===== */
.status-hero { position: relative; overflow: hidden; flex-wrap: wrap; justify-content: space-between; padding: var(--sp-6); isolation: isolate; }
.status-hero__main { display: flex; gap: var(--sp-5); align-items: center; min-width: 0; flex: 1 1 320px; }
.status-hero__aura { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.status-hero__aura i { position: absolute; width: 360px; height: 360px; border-radius: 50%; filter: blur(60px); opacity: .28; background: var(--s); animation: st-drift 16s ease-in-out infinite alternate; }
.status-hero__aura i:nth-child(1) { left: -120px; top: -160px; }
.status-hero__aura i:nth-child(2) { right: -140px; bottom: -200px; background: var(--accent); opacity: .16; animation-duration: 21s; animation-delay: -6s; }
.status-hero__aura i:nth-child(3) { left: 40%; top: -220px; width: 240px; height: 240px; opacity: .12; animation-duration: 25s; animation-delay: -11s; }
@keyframes st-drift { to { transform: translate(60px, 40px) scale(1.15); } }
.status-orb { position: relative; width: 54px; height: 54px; flex: 0 0 auto; display: grid; place-items: center; }
.status-orb b { width: 22px; height: 22px; border-radius: 50%; background: var(--s); box-shadow: 0 0 24px var(--s), 0 0 0 6px color-mix(in srgb, var(--s) 22%, transparent); }
.status-orb i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--s); opacity: 0; animation: st-ripple 2.8s cubic-bezier(.2,.6,.3,1) infinite; }
.status-orb i:nth-child(2) { animation-delay: 1.4s; }
@keyframes st-ripple { 0% { transform: scale(.4); opacity: .7; } 100% { transform: scale(1.35); opacity: 0; } }
.status-hero__dot { display: none; }
.status-next b { font-family: var(--font-num); color: var(--text-2); }

.status-uptime { display: flex; gap: var(--sp-3); margin: 0; }
.status-ring { position: relative; width: 96px; height: 96px; display: grid; place-content: center; text-align: center; --s: var(--muted); }
.status-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.status-ring__bg { fill: color-mix(in srgb, var(--surface) 70%, transparent); stroke: color-mix(in srgb, var(--s) 16%, var(--border)); stroke-width: 6; }
.status-ring__fg { fill: none; stroke: var(--s); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0)); animation: st-ring 1.6s cubic-bezier(.2,.7,.2,1) .2s both; }
@keyframes st-ring { from { stroke-dashoffset: 100; } }
.status-ring dt { position: relative; font-size: 11px; color: var(--muted); }
.status-ring dd { position: relative; margin: 0; font: 700 14px var(--font-num); color: var(--s); white-space: nowrap; }
.status-ring--ok { --s: var(--ok); } .status-ring--warning { --s: var(--warn); } .status-ring--error { --s: var(--err); }

.status-group { transition: box-shadow .3s, transform .3s, border-color .3s; }
.status-group:hover { box-shadow: var(--shadow-2); border-color: color-mix(in srgb, var(--accent) 25%, var(--border)); }
.status-comp__uptime { display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; font: 600 var(--fs-sm) var(--font-num); }
.status-pct { white-space: nowrap; --s: var(--muted); color: var(--s); } .status-pct small { color: var(--muted); font-weight: 500; }
.status-pct--ok { --s: var(--text-2); } .status-pct--warning { --s: var(--warn); } .status-pct--error { --s: var(--err); }

.status-charts { display: grid; grid-template-columns: 3fr 2fr; gap: var(--sp-4); align-items: end; }
.status-chart { min-width: 0; }
.status-chart__lbl { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; letter-spacing: .02em; }
.status-chart__lbl b { font-family: var(--font-num); color: var(--text-2); font-weight: 600; }
.status-bars, .status-hours { display: flex; gap: 3px; height: 40px; align-items: flex-end; }
.status-bars button, .status-hours button { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 3px; background: var(--surface-3); cursor: pointer;
  transform-origin: bottom; animation: st-grow .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 16ms + .15s); transition: transform .15s, filter .15s; }
.status-hours { position: relative; gap: 2px; }
.status-hours button { height: var(--h, 100%); opacity: .82; animation-delay: calc(var(--i, 0) * 22ms + .3s); }
.status-bars button:hover, .status-hours button:hover, .status-bars button:focus-visible, .status-hours button:focus-visible, [data-status-bars] button[aria-pressed="true"] { transform: scaleY(1.12); filter: brightness(1.12); outline: 2px solid color-mix(in srgb, var(--text) 35%, transparent); outline-offset: 1px; opacity: 1; }
@keyframes st-grow { from { transform: scaleY(0); opacity: 0; } }
.status-bars .s-ok, .status-hours .s-ok { background: linear-gradient(180deg, color-mix(in srgb, var(--ok) 80%, white), var(--ok)); }
.status-bars .s-warning, .status-hours .s-warning { background: linear-gradient(180deg, color-mix(in srgb, var(--warn) 80%, white), var(--warn)); }
.status-bars .s-error, .status-hours .s-error { background: linear-gradient(180deg, color-mix(in srgb, var(--err) 80%, white), var(--err)); }
.status-hours__line { position: absolute; inset: 0 0 4px; width: 100%; height: calc(100% - 4px); pointer-events: none; overflow: visible; }
.status-hours__line polyline { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round;
  filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--accent) 60%, transparent)); }
.status-hours__line { animation: st-draw 1.8s cubic-bezier(.3,.6,.2,1) .7s both; }
@keyframes st-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.status-hours__axis { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); margin-top: 3px; }
.status-day { margin: 8px 0 0; font-family: var(--font-num); padding: 6px 10px; border-radius: var(--r-md); background: var(--surface-2); display: inline-block; }
.status-day.is-new { animation: hs-in .25s ease both; }

/* wejście sekcji: przy przewijaniu (gdzie przeglądarka obsługuje), inaczej przy załadowaniu */
.status-page [data-reveal] { animation: st-rise .8s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--d, 0) * 70ms); }
@keyframes st-rise { from { opacity: 0; transform: translateY(18px) scale(.985); } }
@supports (animation-timeline: view()) {
  .status-page .status-group[data-reveal], .status-page .status-comp[data-reveal] { animation-timeline: view(); animation-range: entry 0% entry 40%; animation-delay: 0s; }
}
@media (max-width: 760px) {
  .status-charts { grid-template-columns: 1fr; gap: var(--sp-3); }
  .status-hero { padding: var(--sp-5); }
  .status-uptime { width: 100%; justify-content: space-between; }
  .status-ring { width: 88px; height: 88px; }
  .status-comp__head { flex-wrap: wrap; } .status-comp__uptime { order: 3; width: 100%; justify-content: flex-start; }
}
@media (max-width: 640px) { .status-bars button:nth-child(-n+14), .status-page .only-wide { display: none; } }
@media (min-width: 641px) { .status-page .only-narrow { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .status-page *, .status-page *::before, .status-page *::after { animation: none !important; transition: none !important; }
}

/* kontakt */
.contact { max-width: 760px; margin: 0 auto; }
.contact__head h1 { margin: 6px 0 8px; font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -.02em; }
.contact__form { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
.contact__form textarea { resize: vertical; min-height: 160px; }
.contact__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact__done { display: flex; gap: var(--sp-3); align-items: flex-start; margin-top: var(--sp-4); border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); }
.contact__done .ico { color: var(--ok); width: 28px; height: 28px; flex: 0 0 auto; }

/* panel „Ceny na jutro” (strona cen i strona główna) */
.po { margin: 0 0 var(--sp-4); display: grid; gap: var(--sp-3); border-color: color-mix(in srgb, var(--e-price) 35%, var(--border)); background: linear-gradient(150deg, color-mix(in srgb, var(--e-price) 7%, var(--surface)), var(--surface) 55%); }
.home-live .po { margin-top: var(--sp-4); }
.po-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.po-head h2 { margin: 0; font-size: 1.2rem; display: flex; align-items: center; gap: 8px; }
.po-head h2 .ico { color: var(--e-price); }
.po-date { font-weight: 500; color: var(--text-2); }
.po-vs { font: 600 var(--fs-xs) var(--font-num); padding: 3px 8px; border-radius: var(--r-pill); border: 1px solid var(--border); }
.po-vs--up { color: var(--err); border-color: color-mix(in srgb, var(--err) 40%, var(--border)); }
.po-vs--down { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); }
.po-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--sp-4); align-items: center; }
.po-figs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.po-fig { display: grid; gap: 2px; }
.po-fig span { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.po-fig strong { font-size: 1.35rem; line-height: 1.15; }
.po-fig small { color: var(--text-2); font-size: var(--fs-xs); }
.po-fig--cheap strong { color: var(--ok); } .po-fig--exp strong { color: var(--err); }
.po-bars { width: 100%; height: 150px; display: block; overflow: visible; }
.po-bars--sm { height: 70px; }
.po-bars rect { transform-box: fill-box; transform-origin: bottom; }
.po-bars .b-cheap { fill: #10b981; } .po-bars .b-mid { fill: #f59e0b; } .po-bars .b-exp { fill: #ef4444; }
.po-bars rect.is-neg { fill: #6366f1; transform-origin: top; }
.po-bars .po-win { fill: color-mix(in srgb, #10b981 14%, transparent); stroke: color-mix(in srgb, #10b981 55%, transparent); stroke-dasharray: 3 3; }
.po-bars.is-forecast rect:not(.po-win) { opacity: .55; }
.po-axis { display: flex; justify-content: space-between; font: 600 10px var(--font-num); color: var(--muted); margin-top: 4px; }
.js .po.is-in .po-bars rect:not(.po-win) { animation: hl-grow .8s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 22ms); }
.po-alert { margin: 0; display: flex; gap: 8px; align-items: center; color: #6366f1; font-size: var(--fs-sm); }
.po-after { border-top: 1px dashed var(--border); padding-top: var(--sp-3); display: grid; gap: 6px; }
.po-after__head { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.po .btn-row { margin: 0; }
@media (max-width: 760px) { .po-body { grid-template-columns: 1fr; } .po-bars { height: 120px; } }
@media (prefers-reduced-motion: reduce) { .po-bars rect { animation: none !important; } }

/* ── Statystyki na żywo (/statystyki) ── */
.st-live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); margin-right: 4px; vertical-align: middle; box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); animation: st-pulse 2s infinite; }
@keyframes st-pulse { 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.st-value { background: linear-gradient(150deg, color-mix(in srgb, var(--surface) 84%, var(--e-cheap) 16%), var(--surface)); }
.st-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--sp-4); }
.st-card { --st: var(--accent); display: grid; gap: 6px; align-content: start; position: relative; overflow: hidden; }
.st-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--st); }
.st-card--pv { --st: var(--e-pv); }
.st-card--export { --st: var(--e-export); }
.st-card--bat { --st: var(--e-battery); }
.st-card--money { --st: var(--e-cheap); }
.st-label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--fs-sm); }
.st-label .ico { color: var(--st); }
.st-big { font-family: var(--font-num); font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.1; font-variant-numeric: tabular-nums; }
.st-big small { font-size: var(--fs-md); color: var(--muted); font-weight: 500; }
.st-sub { color: var(--muted); font-size: var(--fs-sm); }
.st-bar { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--e-battery) 14%, transparent); overflow: hidden; }
.st-bar i { display: block; height: 100%; background: var(--e-battery); border-radius: inherit; transition: width .9s ease; }
.st-method ul { margin: 0 0 var(--sp-3); padding-left: 1.2em; display: grid; gap: 6px; }
@media (prefers-reduced-motion: reduce) { .st-live { animation: none; } .st-bar i { transition: none; } }
@media (max-width: 1360px) and (min-width: 1001px) { .home-nav__links { gap: var(--sp-4); } }
.pub-foot__status { text-decoration: none; } .pub-foot__status:hover { color: var(--text); text-decoration: none; }

/* 0.42: podstrony funkcji /funkcje (D-148) */
.fx-crumbs { max-width: var(--wrap); margin: var(--sp-4) auto 0; padding: 0 var(--sp-6); display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--fs-sm); color: var(--muted); }
.fx-crumbs a { color: var(--muted); text-decoration: none; } .fx-crumbs a:hover { color: var(--text); text-decoration: underline; }
.fx-crumbs [aria-current] { color: var(--text-2); }
.fx-hero { grid-template-columns: 1fr; padding-top: var(--sp-5); }
.fx-hero h1 { font-size: clamp(2rem, 4vw, 3.1rem); max-width: 22ch; }
.fx-eyebrow { display: inline-flex; align-items: center; gap: 8px; } .fx-eyebrow .ico { width: 18px; height: 18px; }
.fx-hero__cta { margin-top: var(--sp-4); }
.fx-card { display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; }
.fx-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.fx-card__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; margin-bottom: var(--sp-2); color: var(--accent-2); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.fx-card__ico .ico { width: 20px; height: 20px; }
.fx-card__h { font-size: var(--fs-md); margin: 0 0 6px; letter-spacing: -.01em; }
.fx-card__more { margin-top: auto; padding-top: var(--sp-3); font-size: var(--fs-sm); font-weight: 650; color: var(--accent-2); }
.fx-card:hover .fx-card__more { text-decoration: underline; }
.fx-all { text-align: center; margin: var(--sp-5) 0 0; }
.fx-steps { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.fx-steps p { color: var(--text-2); }
.fx-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.fx-split h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); letter-spacing: -.02em; margin-bottom: var(--sp-3); }
.fx-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.fx-list li { display: flex; gap: 12px; align-items: flex-start; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md, 12px); background: var(--surface); border: 1px solid var(--border); color: var(--text-2); font-size: var(--fs-sm); }
.fx-list .ico { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--ok, var(--accent-2)); }
.fx-list--needs .ico { color: var(--accent-2); }
.fx-faq { max-width: 860px; margin: 0 auto; display: grid; gap: var(--sp-3); }
.fx-faq__item { border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); padding: 0 var(--sp-5); }
.fx-faq__item summary { cursor: pointer; padding: var(--sp-4) 0; font-weight: 650; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.fx-faq__item summary::-webkit-details-marker { display: none; }
.fx-faq__item summary::after { content: "+"; color: var(--accent-2); font-weight: 700; transition: transform .2s; }
.fx-faq__item[open] summary::after { transform: rotate(45deg); }
.fx-faq__item p { color: var(--text-2); margin: 0 0 var(--sp-4); }
@media (max-width: 760px) {
  .fx-split { grid-template-columns: 1fr; }
  .fx-crumbs { padding: 0 16px; }
}
.fx-grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.ic-tabs { flex-wrap: wrap; }
.ic-count { font: 600 .72rem var(--font-num); opacity: .75; margin-left: 2px; }
.ic-table td:last-child { min-width: 260px; }

/* 0.45: publiczna Pomoc — te same karty co w panelu, w szerokości stron publicznych */
.help-public { max-width: 1180px; margin: 0 auto; padding: 8px 16px 48px; }
.help-public h1 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); line-height: 1.2; }
.help-public .help-hero, .help-public .help-head { margin-top: 8px; }