/* Linia Mety: strona trenerska. Jasny motyw z jednym akcentem (kobalt #2337FF). */
:root{
  color-scheme:light;
  --bg:#FFFFFF; --soft:#F4F5F7; --ink:#0B0C0E; --body:#3A3D44; --muted:#6B7079; --line:#E3E5E9;
  --accent:#2337FF; --accent-dark:#1626C9; --on-accent:#FFFFFF;
  --night:#0B0C0E; --on-night:#F4F5F7; --night-muted:#A3A9B3;
  --f-display:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --f-body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--body);font-family:var(--f-body);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
picture{display:contents}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-display);color:var(--ink);margin:0;text-wrap:balance;letter-spacing:-.03em}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;z-index:20;background:#fff;color:var(--ink);padding:10px 16px;border-radius:8px}
.skip:focus{left:12px}
.label{font-family:var(--f-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 17px var(--f-body);padding:17px 28px;border-radius:999px;text-decoration:none;border:0;cursor:pointer;transition:background .2s}
.btn.pri{background:var(--accent);color:var(--on-accent)}
.btn.pri:hover{background:var(--accent-dark)}
.btn.ghost{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
.btn.ghost:hover{background:rgba(255,255,255,.12)}
.btn.sec{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.sec:hover{background:var(--soft)}
section{padding-block:clamp(80px,10vw,136px)}
.sec-head{display:grid;gap:16px;max-width:720px;margin-bottom:clamp(40px,5vw,60px)}
.sec-head h2{font-size:clamp(38px,5vw,64px);font-weight:900;line-height:1}

/* nawigacja */
nav.site{position:absolute;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:5}
nav.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:84px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.mark{width:32px;height:32px;border-radius:50%;background:currentColor;position:relative;flex:none}
.mark::after{content:"";position:absolute;left:5px;right:5px;top:14.5px;height:3px;background:var(--mk,var(--night))}
.logo b{font-family:var(--f-display);font-weight:900;font-size:19px;letter-spacing:.05em;white-space:nowrap}
.navlinks{display:flex;gap:32px;font-size:16px;font-weight:500;color:rgba(255,255,255,.85)}
.navlinks a{text-decoration:none}
.navlinks a:hover{color:#fff}
nav.site .btn{padding:12px 22px;font-size:15px;background:#fff;color:var(--ink)}
nav.site.solid{position:static;border-bottom:1px solid var(--line)}
nav.site.solid .logo{color:var(--ink)}
nav.site.solid .mark{--mk:#fff}
nav.site.solid .btn{background:var(--accent);color:#fff}

/* hero */
.hero{position:relative;min-height:min(880px,100svh);display:flex;align-items:flex-end;color:#fff;background:#1a2340;overflow:hidden}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 6%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,10,16,.62) 0%,rgba(8,10,16,.2) 50%,rgba(8,10,16,0) 70%),linear-gradient(180deg,rgba(8,10,16,.5) 0%,rgba(8,10,16,0) 26%,rgba(8,10,16,.15) 50%,rgba(8,10,16,.85) 100%)}
.hero .wrap{position:relative;z-index:2;width:100%;padding-block:150px 64px}
.hero .label{color:rgba(255,255,255,.75)}
.hero h1{color:#fff;font-size:clamp(50px,8vw,112px);font-weight:900;line-height:.92;letter-spacing:-.045em;max-width:11ch;margin-top:20px}
.hero .sub{font-size:21px;margin-top:24px;max-width:36ch;color:rgba(255,255,255,.88)}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}

/* treningi */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tile{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:3/4;max-width:100%;color:#fff;display:flex;align-items:flex-end;text-decoration:none;background:#222}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.tile:hover img{transform:scale(1.04)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.85))}
.tile div{position:relative;z-index:1;padding:28px;display:grid;gap:8px}
.tile .label{color:rgba(255,255,255,.75)}
.tile h3{color:#fff;font-size:32px;font-weight:900}
.tile p{font-size:16px;color:rgba(255,255,255,.88);max-width:30ch}

/* jak pracuję */
.data{background:var(--night);color:var(--on-night)}
.data .grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(36px,6vw,88px);align-items:center}
.data .label{color:var(--night-muted)}
.data h2{color:#fff;font-size:clamp(38px,5vw,64px);font-weight:900;line-height:1;margin-top:16px}
.data .lead{font-size:20px;color:var(--night-muted);margin-top:22px;max-width:40ch}
.figure{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:3/2;max-width:100%;background:#222}
.figure img{width:100%;height:100%;object-fit:cover}
.points{display:grid;margin-top:36px}
.points > div{display:grid;grid-template-columns:44px 1fr;gap:14px;padding-block:20px;border-top:1px solid #24272D}
.points b{font-family:var(--f-display);font-size:15px;color:#8C98FF;font-weight:800}
.points h3{color:#fff;font-size:21px;font-weight:800}
.points p{font-size:16px;color:var(--night-muted);margin-top:4px}

/* cennik */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.price{border:1.5px solid var(--line);border-radius:24px;padding:36px 32px;display:flex;flex-direction:column;gap:20px}
.price.hl{background:var(--accent);border-color:var(--accent);color:#fff}
.price h3{font-size:26px;font-weight:800}
.price.hl h3,.price.hl .amount{color:#fff}
.price .small{font-size:15px;color:var(--muted);margin-top:10px}
.price.hl .small{color:#D5DAFF}
.amount{font-family:var(--f-display);font-weight:900;font-size:62px;line-height:1;color:var(--ink);letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.amount small{font:500 18px var(--f-body);letter-spacing:0;color:var(--muted);margin-left:4px}
.price.hl .amount small{color:#D5DAFF}
.amount.text{font-size:36px;line-height:1.05}
.badge{align-self:flex-start;background:#fff;color:var(--accent);font:700 13px var(--f-body);padding:6px 12px;border-radius:999px}
.price ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;font-size:16px}
.price li{display:flex;gap:12px}
.price li::before{content:"";flex:none;width:7px;height:7px;margin-top:9px;border-radius:50%;background:var(--accent)}
.price.hl li::before{background:#fff}
.price .btn{margin-top:auto}
.price.hl .btn{background:#fff;color:var(--accent)}
.price-note{margin-top:24px;font-size:15px;color:var(--muted)}

/* FAQ */
.faq{background:var(--soft)}
.faq .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(36px,6vw,96px);align-items:start}
.faq h2{font-size:clamp(38px,5vw,64px);font-weight:900;line-height:1;margin-top:16px}
.faq-list{display:grid;border-top:1px solid #D7DAE0}
.faq details{border-bottom:1px solid #D7DAE0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:center;padding:24px 0;font:700 20px var(--f-body);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(var(--accent),var(--accent)) center/100% 2.5px no-repeat,linear-gradient(var(--accent),var(--accent)) center/2.5px 100% no-repeat;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 40px 24px 0;font-size:17px;max-width:62ch}

/* zapis */
.final{position:relative;color:#fff;overflow:hidden;background:#2a2014}
.final img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.final::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,10,16,.82) 0%,rgba(8,10,16,.55) 55%,rgba(8,10,16,.25) 100%)}
.final .wrap{position:relative;z-index:1;padding-block:clamp(96px,12vw,160px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:48px;align-items:center}
.final h2{color:#fff;font-size:clamp(42px,6vw,80px);font-weight:900;line-height:.95}
.final .intro p{font-size:20px;margin-top:20px;color:rgba(255,255,255,.85);max-width:34ch}
form.lead{background:#fff;color:var(--ink);border-radius:24px;padding:28px;display:grid;gap:14px}
form.lead label{display:grid;gap:6px;font-size:14px;font-weight:600;color:var(--body)}
form.lead input,form.lead select,form.lead textarea{width:100%;font:500 17px var(--f-body);padding:13px 16px;border-radius:12px;border:1.5px solid var(--line);background:#fff;color:var(--ink)}
form.lead textarea{resize:vertical;min-height:84px}
form.lead input:focus,form.lead select:focus,form.lead textarea:focus{border-color:var(--accent);outline:none}
form.lead .row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
form.lead .opt{font-weight:400;color:var(--muted)}
form.lead label.consent{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:13px;line-height:1.5;color:var(--muted)}
form.lead label.consent input{width:18px;height:18px;flex:none;margin:2px 0 0;accent-color:var(--accent)}
form.lead .hp{position:absolute;left:-9999px}
form.lead .btn{width:100%}

/* stopka */
footer.site{padding-block:40px;border-top:1px solid var(--line)}
footer.site .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 32px;font-size:15px;color:var(--muted)}
footer .logo{color:var(--ink)}
footer .logo .mark{--mk:#fff}
footer .links{display:flex;flex-wrap:wrap;gap:8px 24px}
footer .links a{text-decoration:none}
footer .links a:hover{color:var(--ink)}

/* podstrony: regulamin, polityka, podziękowanie */
.doc{padding-block:clamp(56px,8vw,96px)}
.doc .wrap{max-width:780px}
.doc h1{font-size:clamp(36px,5vw,56px);font-weight:900;line-height:1.02;margin-top:14px}
.doc h2{font-size:24px;font-weight:800;margin-top:44px;letter-spacing:-.02em}
.doc p,.doc li{font-size:17px}
.doc p{margin-top:14px}
.doc ol,.doc ul{padding-left:22px;margin:14px 0 0;display:grid;gap:8px}
.doc .meta{color:var(--muted);font-size:15px;margin-top:16px}
.fill{background:#FFF1B8;border-radius:4px;padding:0 4px;color:var(--ink)}
.thanks{min-height:70vh;display:grid;place-items:center;text-align:center}
.thanks .mark{width:64px;height:64px;margin:0 auto 28px;color:var(--accent)}
.thanks .mark::after{left:10px;right:10px;top:29px;height:6px;--mk:#fff}
.thanks h1{font-size:clamp(40px,6vw,72px);font-weight:900;line-height:1}
.thanks p{font-size:20px;margin:20px auto 36px;max-width:36ch}

@media (max-width:980px){
  .navlinks{display:none}
  .tiles{grid-template-columns:minmax(0,1fr)}
  .tile{aspect-ratio:4/3}
  .data .grid,.final .wrap,.faq .grid{grid-template-columns:minmax(0,1fr)}
  .prices{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  body{font-size:17px}
  nav.site .btn{padding:10px 16px;font-size:14px}
  .logo b{font-size:16px}
  .hero{min-height:760px}
  .hero .wrap{padding-block:120px 40px}
  .hero .sub{font-size:19px}
  .price{padding:30px 24px}
  .faq summary{font-size:18px}
  form.lead{padding:22px}
  form.lead .row2{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.tile img,.btn,.faq summary::after{transition:none}}