/* Diag4You: wspólne style dla wersji PL i EN */
/* Układ: ciemna petrolowa głębia jak w aplikacji, jeden świecący pierścień w hero, sekcje jako spokojne pasy, jeden limonkowy przycisk na sekcję */
:root{
  --bg-top:#0E3D47; --bg-mid:#071B20; --bg-bot:#050F12;
  --card:#0C2328; --card-hi:#123136; --chip:#16353C; --line:#1B3E45;
  --fg:#F2F7F8; --muted:#8FB3BA; --faint:#5E8086;
  --cyan:#38D6FF; --on-cyan:#052A33;
  --lime:#8CF55F; --on-lime:#0B2A0F;
  --orange:#FF9A2E; --red:#FF5C5C;
  --display:"Nunito",ui-rounded,"SF Pro Rounded","Segoe UI",system-ui,sans-serif;
  --body:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif;
  --r-card:22px; --r-tile:16px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
:root{padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  background-color:var(--bg-bot);
  background-image:linear-gradient(180deg,var(--bg-top) 0,var(--bg-mid) 900px,var(--bg-bot) 1800px);
  background-repeat:no-repeat;
  color:var(--fg); font-family:var(--body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--cyan); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:8px}
.wrap{max-width:1120px; margin:0 auto; padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display); font-weight:900; line-height:1.08; margin:0; text-wrap:balance; letter-spacing:-.01em}
h2{font-size:clamp(30px,4.4vw,46px)}
h3{font-size:21px; font-weight:800; letter-spacing:0}
p{margin:0}
.lead{color:var(--muted); font-size:clamp(17px,1.7vw,20px); max-width:58ch}
.eyebrow{font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan)}
section{padding-block:clamp(64px,9vw,112px)}
.sec-head{display:grid; gap:14px; margin-bottom:clamp(32px,4vw,52px); max-width:760px}


/* nagłówek */
header.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:rgba(9,36,42,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
header.top .wrap{display:flex; align-items:center; gap:20px; height:64px}
.brand{display:flex; align-items:center; gap:10px; color:var(--fg); font-family:var(--display); font-weight:900; font-size:22px; letter-spacing:-.01em}
.brand:hover{text-decoration:none}
.brand i{width:26px; height:26px; border-radius:50%; background:conic-gradient(var(--cyan) 0 25%,transparent 25% 27%,var(--lime) 27% 50%,transparent 50% 52%,var(--orange) 52% 75%,transparent 75% 77%,var(--red) 77% 98%,transparent 98%); -webkit-mask:radial-gradient(circle,transparent 7px,#000 8px); mask:radial-gradient(circle,transparent 7px,#000 8px)}
.brand b{color:var(--cyan); font-weight:900}
nav.links{display:flex; gap:22px; margin-left:auto; font-size:15px; font-weight:600}
nav.links a{color:var(--muted)}
nav.links a:hover{color:var(--fg); text-decoration:none}
.langsw{margin-left:8px; font-size:13px; font-weight:700; color:var(--fg); background:var(--chip); padding:7px 14px; border-radius:999px}
.langsw:hover{text-decoration:none; background:var(--card-hi)}
@media (max-width:860px){nav.links{display:none} .langsw{margin-left:auto}}

/* przyciski */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; height:58px; padding:0 28px; border-radius:999px; font-family:var(--display); font-weight:800; font-size:18px; border:0; cursor:pointer; white-space:nowrap}
.btn:hover{text-decoration:none}
.btn-lime{background:var(--lime); color:var(--on-lime); box-shadow:0 10px 40px -12px rgba(140,245,95,.55)}
.btn-ghost{background:var(--chip); color:var(--fg)}

/* hero */
.hero{padding-block:clamp(40px,7vw,96px) clamp(56px,8vw,104px)}
.hero .wrap{display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(32px,5vw,72px); align-items:center}
.hero-copy{display:grid; gap:22px; min-width:0}
.hero h1{font-size:clamp(44px,6.6vw,78px)}
.hero h1 .accent{color:var(--cyan)}
.pos{font-size:clamp(19px,2vw,23px); color:var(--fg); font-weight:500; max-width:30ch}
.pos span{color:var(--muted)}
.signup{display:flex; gap:10px; flex-wrap:wrap; max-width:520px}
.signup input{flex:1 1 220px; min-width:0; height:58px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--fg); padding:0 22px; font:inherit; font-size:16px}
.signup input::placeholder{color:var(--faint)}
.signup input:focus{outline:2px solid var(--cyan); outline-offset:1px}
.form-note{font-size:14px; color:var(--faint)}
.form-note.ok{color:var(--lime)}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{display:inline-flex; align-items:center; gap:7px; background:var(--chip); color:var(--lime); font-weight:700; font-size:14px; padding:8px 14px; border-radius:999px}
.chip svg{flex:none}

.stage{position:relative; display:grid; place-items:center; min-width:0}
.halo{position:absolute; width:min(118%,560px); aspect-ratio:1; max-width:100%; border-radius:50%;
  background:conic-gradient(from -90deg,var(--lime) 0 74%,rgba(140,245,95,.10) 74% 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 22px),#000 calc(100% - 21px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 22px),#000 calc(100% - 21px));
  filter:drop-shadow(0 0 28px rgba(140,245,95,.55)); opacity:.9}
.phone{position:relative; width:min(300px,72vw); max-width:100%; aspect-ratio:600/1304; border-radius:46px; overflow:hidden; border:7px solid #0A1A1E; box-shadow:0 40px 90px -30px rgba(0,0,0,.8),0 0 0 1px #22454C}
.phone img{display:block; width:100%; height:100%; object-fit:cover; object-position:top}
.phone.crop{aspect-ratio:600/1000}

/* kroki */
.steps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.step{background:var(--card); border-radius:var(--r-card); padding:26px 24px 28px; display:grid; gap:10px; align-content:start}
.num{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-family:var(--display); font-weight:900; font-size:21px; margin-bottom:6px}
.n1{background:var(--cyan); color:var(--on-cyan)} .n2{background:var(--lime); color:var(--on-lime)}
.n3{background:var(--orange); color:#2A1600} .n4{background:var(--red); color:#2A0707}
.step p{color:var(--muted); font-size:16px}
.step .meta{margin-top:6px; font-family:var(--display); font-weight:800; font-size:15px; color:var(--fg)}
.screens{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,3vw,40px); margin-top:clamp(36px,5vw,64px); align-items:start}
.screens figure{margin:0; display:grid; gap:14px; justify-items:center}
.screens .phone{width:min(250px,100%)}
.screens figcaption{color:var(--muted); font-size:15px; text-align:center; max-width:26ch}
.screens figcaption b{color:var(--fg); display:block; font-family:var(--display); font-weight:800; font-size:17px}
@media (max-width:960px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.hero .wrap{grid-template-columns:1fr} .stage{order:-1; margin-bottom:8px} .phone{width:min(250px,64vw)}
  .screens{grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:68%; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px} .screens figure{scroll-snap-align:center}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* co dostajesz */
.gets{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px}
.card{background:var(--card); border-radius:var(--r-card); padding:28px; display:grid; gap:12px; align-content:start; min-width:0}
.card p{color:var(--muted); font-size:16px}
.verdict{grid-column:span 6; grid-template-columns:minmax(0,1fr) auto; gap:28px; align-items:center; background:linear-gradient(135deg,var(--card-hi),var(--card))}
.verdict h3{font-size:clamp(24px,2.6vw,30px)}
.c3{grid-column:span 3} .c2{grid-column:span 2}
.systems{display:flex; gap:18px; flex-wrap:wrap}
.sys{display:grid; justify-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--muted); width:72px; text-align:center}
.ring{width:60px; height:60px; border-radius:50%; display:grid; place-items:center; border:6px solid var(--lime); box-shadow:0 0 18px -4px rgba(140,245,95,.6)}
.ring.warn{border-color:var(--orange); box-shadow:0 0 18px -4px rgba(255,154,46,.6)}
.ring svg{display:block}
.sys .st{font-size:12px; font-weight:700}
.st.ok{color:var(--lime)} .st.warn{color:var(--orange)}
.mini{background:var(--card-hi); border-radius:var(--r-tile); padding:14px 16px; display:grid; gap:6px}
.mini .lbl{font-size:13px; color:var(--faint); font-weight:600}
.spark{display:block; width:100%; height:auto}
.badge{justify-self:start; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); background:var(--chip); padding:4px 10px; border-radius:999px}
.ba{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.ba div{background:var(--card-hi); border-radius:var(--r-tile); padding:12px 14px; font-size:14px; color:var(--muted)}
.ba b{display:block; font-family:var(--display); font-size:15px; font-weight:800}
.ba .before b{color:var(--orange)} .ba .after b{color:var(--lime)}
.numbers{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:16px}
.stat{border-top:1px solid var(--line); padding-top:18px; display:grid; gap:4px}
.stat strong{font-family:var(--display); font-weight:900; font-size:clamp(34px,4vw,48px); line-height:1; font-variant-numeric:tabular-nums}
.stat span{color:var(--muted); font-size:15px}
@media (max-width:960px){.c2{grid-column:span 3} .verdict{grid-template-columns:1fr}}
@media (max-width:640px){.gets{grid-template-columns:1fr} .c3,.c2,.verdict{grid-column:auto} .numbers{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* marki */
.band{background:rgba(12,35,40,.55); border-block:1px solid var(--line)}
.brands-grid{display:grid; grid-template-columns:1.25fr .75fr; gap:16px}
.brandlist{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.brandlist span{background:var(--chip); border-radius:999px; padding:8px 14px; font-weight:600; font-size:15px}
.note{display:flex; gap:10px; align-items:flex-start; font-size:15px; color:var(--muted)}
.note svg{flex:none; margin-top:3px}
.adapter{display:grid; gap:4px; background:var(--card-hi); border-radius:var(--r-tile); padding:14px 16px}
.adapter b{font-family:var(--display); font-weight:800; font-size:17px}
.adapter span{font-size:14px; color:var(--muted)}
@media (max-width:860px){.brands-grid{grid-template-columns:1fr}}

/* warsztat */
.shop{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:center}
.shop ul{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.shop li{display:grid; grid-template-columns:28px 1fr; gap:12px; color:var(--muted)}
.shop li b{color:var(--fg); font-weight:700}
.ticket{background:var(--card); border-radius:var(--r-card); padding:22px; display:grid; gap:14px; box-shadow:0 30px 70px -40px rgba(0,0,0,.9)}
.ticket header{display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap}
.ticket .id{font-family:var(--display); font-weight:800; font-size:17px}
.pill{font-size:13px; font-weight:700; border-radius:999px; padding:5px 12px; background:var(--chip)}
.pill.warn{color:var(--orange)} .pill.ok{color:var(--lime)} .pill.cy{color:var(--cyan)}
.trow{display:flex; justify-content:space-between; gap:12px; background:var(--card-hi); border-radius:var(--r-tile); padding:12px 14px; font-size:15px; flex-wrap:wrap}
.trow span:first-child{color:var(--muted)}
.reply{border-left:3px solid var(--cyan); padding:4px 0 4px 14px; color:var(--fg); font-size:15px}
.reply small{display:block; color:var(--faint); font-size:13px}
.mail{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.mail code{font-family:var(--body); font-weight:700; background:var(--chip); padding:10px 16px; border-radius:999px; user-select:all}
@media (max-width:860px){.shop{grid-template-columns:1fr}}

/* prywatność */
.privacy{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.priv{display:grid; gap:8px; padding:24px; border:1px solid var(--line); border-radius:var(--r-card)}
.priv svg{margin-bottom:4px}
.priv p{color:var(--muted); font-size:16px}
@media (max-width:860px){.privacy{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.privacy{grid-template-columns:1fr}}

/* dlaczego dokładniej */
.why{display:grid; gap:20px}
.panel{background:var(--card); border-radius:var(--r-card); padding:clamp(20px,3vw,32px); display:grid; gap:18px; min-width:0}
.panel-head{display:flex; justify-content:space-between; align-items:baseline; gap:10px 16px; flex-wrap:wrap}
.panel-head p{color:var(--muted); font-size:15px; max-width:60ch}

.flow{display:grid; grid-template-columns:minmax(0,1.1fr) 48px minmax(0,1fr) 48px minmax(0,1fr); align-items:center}
.flow-in{display:grid; gap:10px}
.fin{background:var(--card-hi); border-radius:var(--r-tile); padding:14px 16px; display:grid; grid-template-columns:34px 1fr; gap:2px 12px; align-items:center}
.fin svg{grid-row:span 2}
.fin b{font-family:var(--display); font-weight:800; font-size:16px}
.fin small{grid-column:2; color:var(--muted); font-size:13.5px; line-height:1.4}
.arrow{height:2px; margin:0 8px; background:linear-gradient(90deg,var(--line),var(--cyan)); position:relative}
.arrow::after{content:""; position:absolute; right:-4px; top:-6px; border:7px solid transparent; border-left:9px solid var(--cyan); border-right:0}
.core{border:1px solid rgba(56,214,255,.35); background:radial-gradient(120% 100% at 50% 0%,rgba(56,214,255,.12),transparent 65%),var(--card-hi); border-radius:var(--r-card); padding:22px; display:grid; gap:12px; box-shadow:0 0 50px -22px rgba(56,214,255,.7)}
.core b{font-family:var(--display); font-weight:900; font-size:20px}
.core ul{margin:0; padding:0; list-style:none; display:grid; gap:8px; color:var(--muted); font-size:15px}
.core li{display:grid; grid-template-columns:14px 1fr; gap:8px}
.core li::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--cyan); margin-top:9px}
.core small{color:var(--faint); font-size:13px}
.out{background:var(--card-hi); border-radius:var(--r-card); padding:18px; display:grid; gap:10px}
.out .fh{display:grid; grid-template-columns:36px 1fr; gap:12px; align-items:start}
.out .fh i{width:36px; height:36px; border-radius:50%; background:rgba(255,154,46,.16); color:var(--orange); display:grid; place-items:center; font-style:normal; font-weight:900; font-family:var(--display)}
.out b{font-family:var(--display); font-weight:800; font-size:16px; line-height:1.3}
.out p{color:var(--muted); font-size:14px}
.out .tag{justify-self:start; font-size:12px; font-weight:700; color:var(--orange); background:var(--chip); padding:4px 10px; border-radius:999px}
@media (max-width:980px){
  .flow{grid-template-columns:1fr}
  .arrow{width:2px; height:30px; margin:8px auto; background:linear-gradient(180deg,var(--line),var(--cyan))}
  .arrow::after{right:auto; top:auto; left:-6px; bottom:-6px; border:7px solid transparent; border-top:9px solid var(--cyan); border-bottom:0}
}

.legend3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; list-style:none; margin:0; padding:0}
.legend3 li{display:grid; grid-template-columns:30px 1fr; gap:12px; align-items:start; color:var(--muted); font-size:15px}
.legend3 li b{display:block; color:var(--fg); font-family:var(--display); font-weight:800; font-size:16px}
.dot{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-family:var(--display); font-weight:900; font-size:15px}
.dot.o{background:var(--orange); color:#2A1600} .dot.r{background:var(--red); color:#2A0707}
@media (max-width:760px){.legend3{grid-template-columns:1fr}}

.compare{background:var(--card); border-radius:var(--r-card); padding:8px clamp(16px,3vw,28px)}
.crow{display:grid; grid-template-columns:minmax(0,1fr) 96px 96px; gap:12px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); font-size:16px}
.crow:last-child{border-bottom:0}
.crow.h{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint)}
.crow.h span:last-child{color:var(--cyan)}
.crow span:nth-child(n+2){text-align:center}
.crow small{display:block; color:var(--faint); font-size:14px}
.yes{color:var(--lime); font-weight:800} .no{color:var(--faint)}
@media (max-width:520px){.crow{grid-template-columns:minmax(0,1fr) 64px 64px; font-size:15px}}

/* wykresy */
.chart-host{min-height:200px}
.ch{display:block; max-width:100%; height:auto}
.ch .grid{stroke:var(--line); stroke-width:1}
.ch .axis{stroke:#2E555C; stroke-width:1.2}
.ch .tick{fill:var(--faint); font:500 12px var(--body); font-variant-numeric:tabular-nums}
.ch .alab{fill:var(--muted); font:600 12px var(--body)}
.ch .ln{fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
.ch .ln.dash{stroke-dasharray:7 6; stroke-width:2.2}
.ch .ln.thin{stroke-width:1.3; stroke-dasharray:4 4}
.ch .hl{stroke-width:1.6; stroke-dasharray:6 5; fill:none}
.ch .hlab,.ch .blab,.ch .note{font:700 12px var(--body)}
.ch .mk{font:900 13px var(--display)}
.s-cyan{stroke:var(--cyan)} .s-orange{stroke:var(--orange)} .s-lime{stroke:var(--lime)} .s-faint{stroke:var(--faint)} .s-red{stroke:var(--red)} .s-fg{stroke:var(--fg)}
.t-cyan{fill:var(--cyan)} .t-orange{fill:var(--orange)} .t-lime{fill:var(--lime)} .t-red{fill:var(--red)} .t-muted{fill:var(--muted)} .t-fg{fill:var(--fg)}
.f-warn{fill:rgba(255,154,46,.20)} .f-ok{fill:rgba(140,245,95,.09)} .f-bad{fill:rgba(255,92,92,.10)} .f-cyan{fill:rgba(56,214,255,.08)} .f-env{fill:rgba(143,179,186,.14)}
.f-bar{fill:#2E555C} .f-orange{fill:var(--orange)} .f-red{fill:var(--red)} .f-card{fill:var(--card)}

.tabs{display:flex; gap:8px; overflow-x:auto; padding:2px 2px 6px; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{all:unset; cursor:pointer; white-space:nowrap; padding:10px 16px; border-radius:999px; background:var(--chip); color:var(--muted); font-weight:700; font-size:15px}
.tabs button[aria-selected="true"]{background:var(--cyan); color:var(--on-cyan)}
.tabs button:focus-visible{outline:2px solid var(--cyan); outline-offset:2px}
.case{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:16px}
.chart-card{background:var(--card); border-radius:var(--r-card); padding:20px 20px 12px; display:grid; gap:12px; min-width:0}
.chart-card header{display:flex; justify-content:space-between; gap:8px 16px; flex-wrap:wrap; align-items:baseline}
.chart-card h4{margin:0; font-family:var(--display); font-weight:800; font-size:18px}
.lg{display:flex; gap:8px 16px; flex-wrap:wrap; font-size:13px; color:var(--muted)}
.lg span{display:inline-flex; align-items:center; gap:7px}
.lg i{width:22px; height:0; border-top:3px solid var(--orange); border-radius:2px}
.lg i.d{border-top:3px dashed var(--cyan)}
.lg i.f{border:0; width:14px; height:12px; background:rgba(143,179,186,.3); border-radius:3px}
.lg i.b{border:0; width:14px; height:12px; background:rgba(140,245,95,.28); border-radius:3px}
.lg i.w{border:0; width:14px; height:12px; background:rgba(255,154,46,.35); border-radius:3px}
.lg i.c{border:0; width:14px; height:12px; background:rgba(56,214,255,.22); border-radius:3px}
.lg i.r{border-top:2px dashed var(--red)}
.finding{background:var(--card); border-radius:var(--r-card); padding:22px; display:grid; gap:14px; align-content:start; min-width:0}
.finding .fhd{display:flex; justify-content:space-between; gap:10px; align-items:center; flex-wrap:wrap}
.finding .fhd b{font-family:var(--display); font-weight:800; font-size:17px}
.pill-warn{font-size:12px; font-weight:700; color:var(--orange); background:var(--chip); padding:5px 11px; border-radius:999px; white-space:nowrap}
.finding dl{margin:0; display:grid}
.finding dl div{display:grid; grid-template-columns:104px minmax(0,1fr); gap:12px; padding:9px 0; border-bottom:1px solid var(--line); font-size:15px}
.finding dt{color:var(--faint); font-weight:600}
.finding dd{margin:0}
.finding dd.nocode{font-weight:700}
.finding h5{margin:4px 0 0; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
.finding ol{margin:0; padding-left:20px; color:var(--muted); font-size:15px; display:grid; gap:6px}
@media (max-width:900px){.case{grid-template-columns:1fr}}
@media (max-width:420px){.finding dl div{grid-template-columns:1fr; gap:2px}}

/* FAQ */
.faq{display:grid; gap:10px; max-width:820px}
.faq details{background:var(--card); border-radius:var(--r-tile); padding:0 22px}
.faq summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center; padding:20px 0; font-family:var(--display); font-weight:800; font-size:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--cyan); font-size:26px; line-height:1; font-weight:700; flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--muted); padding:0 0 20px; max-width:65ch}

/* zakończenie i stopka */
.final{text-align:center}
.final .wrap{display:grid; justify-items:center; gap:22px}
.final .signup{justify-content:center; margin-inline:auto}
footer{border-top:1px solid var(--line); padding-block:40px 56px; color:var(--faint); font-size:14px}
footer .wrap{display:grid; grid-template-columns:1.4fr 1fr; gap:28px}
footer h4{margin:0 0 10px; color:var(--muted); font-size:13px; letter-spacing:.1em; text-transform:uppercase}
footer ul{list-style:none; margin:0; padding:0; display:grid; gap:6px}
footer a{color:var(--muted)}
@media (max-width:720px){footer .wrap{grid-template-columns:1fr}}