/* Plenum — strona produktu (plenum.events). Tokens and components from the Claude Design layout "Plenum — strona główna" (v0.1).
   Dark is the default; light follows the visitor's system setting. The app preview (.app) stays dark in both. */
:root{
  --bg:#13151a; --surface:#1e2028; --surface-2:#262934; --line:#2f3340; --line-strong:#454a59;
  --text:#eef0f4; --muted:#a6aebb; --accent:#33b5d8; --accent-text:#5cc8e6; --on-accent:#081418;
  --live:#22c55e; --on-live:#05210f;
  --t-lecture:#33b5d8; --t-panel:#a78bfa; --t-video:#f472b6; --t-break:#7a8394;
  --error:#f87171; --success:#4ade80; --focus:#7dd8f0; --ph:#5a6172; --ph-text:#e7c76b;
  --hdr-bg:rgba(19,21,26,.86);
  --f-display:'Archivo',Inter,system-ui,sans-serif; --f-text:Inter,system-ui,sans-serif; --f-mono:'JetBrains Mono',ui-monospace,monospace;
  color-scheme:dark}
html{scroll-behavior:smooth}
body{margin:0; font-family:var(--f-text); background:var(--bg); color:var(--text); font-size:17px; line-height:28px; -webkit-font-smoothing:antialiased}
@media (prefers-color-scheme: light){:root{
  --bg:#f2f3f0; --surface:#ffffff; --surface-2:#e8eae6; --line:#d7dad3; --line-strong:#b9bdb4;
  --text:#13151a; --muted:#4b5262; --accent:#33b5d8; --accent-text:#0b7491; --on-accent:#081418;
  --live:#146c32; --on-live:#ffffff;
  --t-lecture:#1d9bc0; --t-panel:#8b5cf6; --t-video:#db2777; --t-break:#8a93a3;
  --error:#c62828; --success:#146c32; --focus:#0b7491; --ph:#9aa0ab; --ph-text:#7a5a00;
  --hdr-bg:rgba(242,243,240,.9);
color-scheme:light}}
/* Podgląd aplikacji zawsze w jej ciemnym motywie */
.app{
  --bg:#13151a; --surface:#1e2028; --surface-2:#262934; --line:#2f3340; --text:#eef0f4; --muted:#a6aebb;
  --live:#22c55e; --on-live:#05210f; --t-lecture:#33b5d8; --t-panel:#a78bfa; --t-video:#f472b6; --t-break:#7a8394;
  background:#181a20; color:#eef0f4; border:1px solid #2f3340; border-radius:20px; font-family:var(--f-text);
}
*,*::before,*::after{box-sizing:border-box}
a{color:var(--accent-text)} a:hover{color:var(--text)}
:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:6px}
.wrap{max-width:1280px; margin:0 auto; padding:0 48px}
.mono{font-family:var(--f-mono); font-size:12px; line-height:16px; letter-spacing:.08em; text-transform:uppercase}
.muted{color:var(--muted)}
.display{font-family:var(--f-display); font-stretch:118%; font-weight:800; letter-spacing:-.01em}
.h1{font-family:var(--f-display); font-stretch:118%; font-weight:800; font-size:64px; line-height:68px; letter-spacing:-.02em; margin:0}
.h2{font-family:var(--f-display); font-stretch:115%; font-weight:750; font-size:44px; line-height:50px; letter-spacing:-.015em; margin:0}
.h3{font-family:var(--f-display); font-stretch:108%; font-weight:700; font-size:20px; line-height:28px; margin:0}
.lead{font-size:20px; line-height:32px; color:var(--muted); margin:0}
.small{font-size:15px; line-height:24px}
p{margin:0}
.section{padding:112px 0}
.eyebrow{display:flex; align-items:center; gap:10px; color:var(--accent-text)}
.eyebrow::before{content:""; width:24px; height:2px; background:currentColor}

/* Przyciski */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 22px; border-radius:10px; font:600 16px/20px var(--f-text); text-decoration:none; cursor:pointer; border:1px solid transparent; white-space:nowrap}
.btn-primary{background:var(--accent); color:var(--on-accent)!important}
.btn-primary:hover{background:#5cc8e6}
.btn-secondary{background:transparent; color:var(--text)!important; border-color:var(--line-strong)}
.btn-secondary:hover{background:var(--surface-2)}
.btn-sm{min-height:40px; padding:0 16px; font-size:15px}
.btn[disabled]{opacity:.45; cursor:not-allowed}

/* Nagłówek */
.hdr{position:sticky; top:0; z-index:20; background:var(--hdr-bg); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.hdr-in{display:flex; align-items:center; gap:32px; height:72px}
.logo{display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--text)!important}
.logo-dot{width:13px; height:13px; border-radius:50%; background:var(--accent); flex:none; box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent)}
.logo-word{font-family:var(--f-text); font-weight:800; font-size:24px; line-height:24px; letter-spacing:-.035em}
/* Znak Plenum — litera p z tally (koncepcja 2) */
:root{--logo-tile:#1e2028; --logo-stroke:#2d3340; --logo-ink:#e5e7eb}
@media (prefers-color-scheme: light){:root{--logo-tile:#ffffff; --logo-stroke:#d8dce3; --logo-ink:#13151a}}
.logo-ico{display:block; flex:none}
.lg-tile{fill:var(--logo-tile); stroke:var(--logo-stroke); stroke-width:1.5}
.lg-ink{fill:none; stroke:var(--logo-ink); stroke-width:6}
.lg-dot{fill:#33b5d8}
.nav{display:flex; gap:28px; margin-right:auto}
.nav a{color:var(--text); text-decoration:none; font-size:15px; font-weight:500}
.nav a:hover{color:var(--accent-text)}
.hdr-act{display:flex; align-items:center; gap:20px}
.lang{display:inline-flex; border:1px solid var(--line-strong); border-radius:8px; padding:2px}
.lang a{text-decoration:none; cursor:pointer; font:600 12px/16px var(--f-mono); letter-spacing:.06em; padding:6px 9px; border-radius:6px; color:var(--muted)}
.lang a[aria-current="true"]{background:var(--surface-2); color:var(--text)}
.login{font-size:15px; font-weight:500; text-decoration:none}
.menu-btn{all:unset; display:none; cursor:pointer; width:44px; height:44px; border-radius:10px; border:1px solid var(--line-strong); align-items:center; justify-content:center; color:var(--text)}
.mnav{border-top:1px solid var(--line); background:var(--bg); padding:8px 20px 20px}
.mnav a{display:flex; align-items:center; min-height:52px; border-bottom:1px solid var(--line); color:var(--text); text-decoration:none; font-size:18px; font-weight:500}
.mnav-row{display:flex; align-items:center; justify-content:space-between; padding-top:16px}

/* Hero */
.hero{padding:88px 0 96px}
.hero-grid{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:32px; align-items:center}
.hero-copy{grid-column:span 5; display:flex; flex-direction:column; gap:28px}
.hero-viz{grid-column:span 7}
.h1 .soft{color:var(--muted)}
.cta-row{display:flex; gap:16px; flex-wrap:wrap; align-items:center}

/* Podgląd aplikacji */
.app-top{display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid #2f3340}
.chip{display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 8px; border-radius:6px; font:700 11px/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase}
.chip-live{background:var(--live); color:var(--on-live)}
.chip-next{border:1px solid #6b7282; color:#eef0f4}
.chip-dot{width:6px; height:6px; border-radius:50%; background:currentColor}
.now{display:grid; grid-template-columns:1.35fr 1fr; gap:12px; padding:16px 18px}
.now-card{background:#1e2028; border:1px solid #2f3340; border-radius:12px; padding:14px 16px; display:flex; flex-direction:column; gap:8px}
.now-card.onair{border-color:#22c55e; box-shadow:inset 3px 0 0 #22c55e}
.count{font:600 44px/44px var(--f-mono); letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.rd{display:grid; grid-template-columns:52px minmax(0,1fr) minmax(0,1fr); gap:10px; padding:4px 18px 18px; position:relative}
.rd-axis{display:flex; flex-direction:column; font:500 11px/1 var(--f-mono); color:#8a93a3}
.rd-axis span{height:80px}
.lane{display:flex; flex-direction:column; gap:2px; min-width:0}
.lane-h{font:600 11px/16px var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:#a6aebb; padding:0 0 8px}
.seg{border-radius:6px; padding:5px 9px; font-size:12px; line-height:16px; background:#22252e; border-left:3px solid var(--c); overflow:hidden; color:#e4e7ec}
.seg b{font-weight:600; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.seg .t{font-family:var(--f-mono); font-size:10px; color:#a6aebb}
.seg.on{background:color-mix(in srgb, #22c55e 18%, #1e2028); border-left-color:#22c55e}
.nowline{position:absolute; left:18px; right:18px; height:0; border-top:2px solid #22c55e}
.nowline span{position:absolute; left:0; top:-10px; background:#22c55e; color:#05210f; font:700 10px/1 var(--f-mono); padding:4px 5px; border-radius:4px}
.legend{display:flex; gap:16px; flex-wrap:wrap; padding:12px 18px; border-top:1px solid #2f3340; font-size:12px; color:#a6aebb}
.legend i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px}

/* Pasek zaufania */
.trust{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:40px 0}
.trust-in{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:32px; align-items:center}
.stats{grid-column:span 6; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
.stat-n{font-family:var(--f-display); font-stretch:118%; font-weight:800; font-size:36px; line-height:40px}
.logos{grid-column:span 6; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.ph{border:1px dashed var(--ph); border-radius:8px; color:var(--ph-text)}
.ph-logo{height:56px; display:flex; align-items:center; justify-content:center; font:600 11px/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase}
.ph-inline{padding:0 6px; border:1px dashed var(--ph); border-radius:6px; color:var(--ph-text)}

/* Funkcje */
.sec-head{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:32px; margin-bottom:64px}
.sec-head > div{grid-column:span 7; display:flex; flex-direction:column; gap:20px}
.sec-head > p{grid-column:9 / span 4; align-self:end; color:var(--muted)}
.group{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:32px; padding:48px 0; border-top:1px solid var(--line)}
.group-meta{grid-column:span 4; display:flex; flex-direction:column; gap:12px; align-self:start; position:sticky; top:96px}
.group-code{font-family:var(--f-display); font-stretch:125%; font-weight:800; font-size:56px; line-height:56px; color:var(--accent-text)}
.status{display:inline-flex; align-items:center; gap:8px; font:600 12px/16px var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.status i{width:8px; height:8px; border-radius:50%; background:var(--live)}
.cards{grid-column:span 8; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:24px; display:flex; flex-direction:column; gap:12px}
.card.wide{grid-column:span 2}
.card.quiet{background:transparent}
.card p{color:var(--muted); font-size:15px; line-height:24px}
.card-top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.ico{width:40px; height:40px; border-radius:10px; background:var(--surface-2); display:flex; align-items:center; justify-content:center; color:var(--accent-text); flex:none}
.soon{display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:6px; border:1px solid var(--line-strong); font:600 11px/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.mini{background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:12px; font-size:12px; line-height:16px; display:flex; flex-direction:column; gap:8px}
.mini-row{display:flex; align-items:center; gap:8px}
.bar{height:8px; border-radius:3px; background:var(--c)}
.lt{background:#0d0f12; border-radius:8px; padding:10px 12px; display:flex; flex-direction:column; gap:2px; color:#fff}
.lt-name{font-weight:700; font-size:14px} .lt-role{font-size:11px; color:#c4cad4}
.key{width:34px; height:34px; border-radius:7px; background:#0d0f12; border:1px solid #3a3f4c; display:flex; align-items:center; justify-content:center; font:700 9px/1 var(--f-mono); color:#eef0f4}
.prog{height:6px; border-radius:3px; background:var(--surface-2); overflow:hidden}
.prog > span{display:block; height:100%; background:var(--accent)}
.ok{color:var(--success); display:inline-flex; align-items:center; gap:6px; font-weight:600}
.thumbs{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px}
.thumb{aspect-ratio:16/9; border-radius:4px; background:var(--surface-2); border:1px solid var(--line)}
.urlbar{display:flex; align-items:center; gap:8px; background:var(--surface-2); border-radius:6px; padding:6px 10px; font-family:var(--f-mono); font-size:11px}

/* Jak to działa */
.steps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; position:relative}
.step{padding:0 28px 0 0; display:flex; flex-direction:column; gap:14px}
.step-mark{display:flex; align-items:center; gap:12px; height:40px; position:relative}
.step-mark::after{content:""; flex:1; height:2px; background:var(--line-strong)}
.step:last-child .step-mark::after{background:linear-gradient(90deg,var(--line-strong),transparent)}
.step-n{width:40px; height:40px; border-radius:50%; border:2px solid var(--accent); display:flex; align-items:center; justify-content:center; font:700 14px/1 var(--f-mono); color:var(--accent-text); flex:none; background:var(--bg)}
.step.day .step-n{background:var(--live); border-color:var(--live); color:var(--on-live)}
.step p{color:var(--muted); font-size:15px; line-height:24px}

/* Dwa panele */
.panels{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:32px; display:flex; flex-direction:column; gap:20px}
.panel ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px}
.panel li{display:flex; gap:10px; align-items:flex-start; font-size:16px; line-height:24px}
.panel li svg{flex:none; margin-top:4px; color:var(--accent-text)}
.shared{display:flex; align-items:center; gap:16px; justify-content:center; padding:16px 0 0; color:var(--muted)}
.shared::before,.shared::after{content:""; flex:1; height:1px; background:var(--line)}

/* Bezpieczeństwo */
.sec4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px}
.sec4 > div{display:flex; flex-direction:column; gap:10px; padding-top:20px; border-top:2px solid var(--line-strong)}
.sec4 p{color:var(--muted); font-size:15px; line-height:24px}

/* CTA + formularz */
.cta{background:var(--surface); border-top:1px solid var(--line)}
.cta-grid{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:32px}
.cta-copy{grid-column:span 5; display:flex; flex-direction:column; gap:24px}
.form{grid-column:7 / span 6; background:var(--bg); border:1px solid var(--line); border-radius:20px; padding:32px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}
.field{display:flex; flex-direction:column; gap:8px}
.field.full{grid-column:span 2}
.field label{font-size:14px; line-height:20px; font-weight:600}
.field label span{font-weight:400; color:var(--muted)}
.input{font:400 16px/24px var(--f-text); color:var(--text); background:var(--surface); border:1px solid var(--line-strong); border-radius:10px; padding:11px 14px; min-height:48px; width:100%}
.input::placeholder{color:var(--muted)}
.input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent)}
.input.is-focus{border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent)}
.input.is-error{border-color:var(--error); box-shadow:0 0 0 1px var(--error)}
.input.is-sent{background:var(--surface-2); border-color:var(--line); color:var(--muted)}
.help{font-size:13px; line-height:18px; color:var(--muted)}
.err{font-size:13px; line-height:18px; color:var(--error); display:flex; gap:6px; align-items:center; font-weight:500}
textarea.input{min-height:112px; resize:vertical}
.check{display:flex; gap:12px; align-items:flex-start; font-size:14px; line-height:21px; color:var(--muted)}
.check input{width:22px; height:22px; margin:0; accent-color:var(--accent); flex:none}
.thanks{grid-column:span 2; display:flex; flex-direction:column; gap:14px; padding:24px 0}

/* Stopka */
.ftr{padding:48px 0 40px; border-top:1px solid var(--line)}
.ftr-in{display:flex; flex-wrap:wrap; gap:24px 48px; align-items:center; justify-content:space-between}
.ftr-links{display:flex; gap:24px; flex-wrap:wrap; font-size:15px}

/* Telefon */
@media (max-width:760px){
  body{font-size:16px; line-height:26px}
  .wrap{padding:0 20px}
  .nav,.login,.hdr-act > .lang{display:none}
  .menu-btn{display:inline-flex}
  .hdr-in{height:64px; gap:12px; justify-content:space-between}
  .hdr-act{gap:10px}
  .btn-sm{min-height:44px}
  .btn{min-height:52px}
  .h1{font-size:40px; line-height:44px}
  .h2{font-size:30px; line-height:36px}
  .lead{font-size:18px; line-height:28px}
  .section{padding:72px 0}
  .hero{padding:40px 0 56px}
  .hero-grid,.trust-in,.sec-head,.group,.cta-grid{grid-template-columns:minmax(0,1fr); gap:24px}
  .hero-copy,.hero-viz,.stats,.logos,.sec-head > div,.sec-head > p,.group-meta,.cards,.cta-copy,.form{grid-column:auto}
  .cta-row .btn{flex:1 1 100%}
  .now{grid-template-columns:minmax(0,1fr)}
  .count{font-size:36px; line-height:36px}
  .rd{grid-template-columns:40px minmax(0,1fr) minmax(0,1fr); padding:4px 12px 14px; gap:6px}
  .app-top,.now,.legend{padding-left:12px; padding-right:12px}
  .nowline{left:12px; right:12px}
  .stats{grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
  .stat-n{font-size:26px; line-height:30px}
  .logos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sec-head{margin-bottom:32px}
  .group{padding:32px 0}
  .group-meta{position:static}
  .group-code{font-size:40px; line-height:40px}
  .cards{grid-template-columns:minmax(0,1fr)}
  .card.wide{grid-column:auto}
  .steps{grid-template-columns:minmax(0,1fr); gap:28px}
  .step{padding:0 0 0 56px; position:relative}
  .step-mark{position:absolute; left:0; top:0}
  .step-mark::after{display:none}
  .panels,.sec4{grid-template-columns:minmax(0,1fr); gap:16px}
  .panel{padding:24px; border-radius:20px}
  .form{grid-template-columns:minmax(0,1fr); padding:20px}
  .field.full,.thanks{grid-column:auto}
  .ftr-in{flex-direction:column; align-items:flex-start}
}

/* --- Implementation additions (not in the layout file) --- */
[hidden]{display:none!important}
img{max-width:100%}
.wrap{padding-left:max(48px, env(safe-area-inset-left, 0px)); padding-right:max(48px, env(safe-area-inset-right, 0px))}
.skip{position:absolute; left:-9999px; top:8px; z-index:50; background:var(--accent); color:var(--on-accent)!important; padding:10px 16px; border-radius:8px; font-weight:600}
.skip:focus{left:16px}
section[id]{scroll-margin-top:88px}
.hdr{top:env(safe-area-inset-top, 0px)}
/* Mobile menu without JavaScript: <details> */
.mmenu{display:none}
.mmenu > summary{list-style:none}
.mmenu > summary::-webkit-details-marker{display:none}
.mmenu .i-close{display:none}
.mmenu[open] .i-close{display:block}
.mmenu[open] .i-open{display:none}
.mmenu .mnav{position:absolute; left:0; right:0; top:100%}
.hdr-in{position:relative}
.hdr{position:sticky}
/* Spam trap: visually hidden, still in the form for bots */
.hp{position:absolute!important; left:-10000px; width:1px; height:1px; overflow:hidden}
.err-box{grid-column:1 / -1; border:1px solid var(--error); border-radius:10px; padding:12px 14px; color:var(--error); font-size:14px; line-height:21px}
.lang a:hover{color:var(--text)}
@media (max-width:760px){
  .wrap{padding-left:max(20px, env(safe-area-inset-left, 0px)); padding-right:max(20px, env(safe-area-inset-right, 0px))}
  .mmenu{display:block}
  .hdr-in{position:static}
  section[id]{scroll-margin-top:72px}
}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}