/* Narzędzia pod lupą — styl (wersja „mocna”, wzorowana na Wera) */
:root{
  --bg:#111214; --bg2:#0a0b0c; --panel:#1d1f22; --line:#2a2c30; --line2:#34373c;
  --ink:#ffffff; --text:#f2f2f0; --muted:#c4c6ca; --muted2:#a9acb1;
  --accent:#f06a1d; --accent-hi:#ff8a45;
  --wrap:1280px;
  --cond:'Barlow Condensed',Arial Narrow,sans-serif;
  --sans:'Barlow',Arial,sans-serif;
  --mono:'IBM Plex Mono',Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.6}
img{max-width:100%;display:block}
a{color:var(--accent)}a:hover{color:var(--accent-hi)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;background:#fff;color:#000;padding:8px 12px;z-index:10}

/* nagłówek */
.top{border-bottom:1px solid var(--line);background:var(--bg)}
.top .wrap{min-height:76px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 40px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);padding:12px 0}
.logo-mark{width:36px;height:36px;background:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
.logo-txt{font-family:var(--cond);font-weight:800;font-size:26px;letter-spacing:.02em;text-transform:uppercase;line-height:1}
.nav{display:flex;flex-wrap:wrap;gap:4px 28px;flex:1 1 auto;font-family:var(--cond);font-weight:700;font-size:18px;letter-spacing:.05em;text-transform:uppercase}
.nav a{color:var(--ink);text-decoration:none;padding:10px 0}
.nav a:hover,.nav a[aria-current]{color:var(--accent)}
.menu{display:none}
.menu summary{list-style:none;cursor:pointer;width:44px;height:44px;background:#2a2c30;display:flex;align-items:center;justify-content:center}
.menu summary::-webkit-details-marker{display:none}

/* przyciski */
.go{font-family:var(--cond);font-weight:700;font-size:18px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none}
.btn{display:inline-flex;align-items:center;height:52px;padding:0 26px}
.btn-fill{background:var(--accent);color:var(--bg)}.btn-fill:hover{background:var(--accent-hi);color:var(--bg)}
.btn-line{border:2px solid var(--ink);color:var(--ink)}.btn-line:hover{border-color:var(--accent);color:var(--accent)}

/* hero */
.hero{display:flex;flex-wrap:wrap}
.hero-txt{flex:1 1 420px;min-width:0;padding:72px 48px 64px max(24px,calc((100% - var(--wrap))/2 + 24px));display:flex;flex-direction:column;justify-content:center}
.eyebrow{font-family:var(--cond);font-weight:700;font-size:17px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.hero h1{margin:0 0 22px;font-family:var(--cond);font-weight:800;font-size:76px;line-height:.92;text-transform:uppercase;color:var(--ink)}
.dot{color:var(--accent)}
.hero p{margin:0 0 30px;font-size:18px;color:var(--muted);max-width:440px}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.hero-img{flex:1.4 1 520px;min-width:0;min-height:520px}
.hero-img img{width:100%;height:100%;min-height:520px;object-fit:cover;object-position:30% 60%}

/* pas z liczbami */
.band{background:var(--accent);color:var(--bg)}
.band .wrap{padding-top:22px;padding-bottom:22px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;font-family:var(--cond);text-transform:uppercase}
.band div{display:flex;align-items:baseline;gap:12px}
.band b{font-weight:800;font-size:44px;line-height:1}
.band span{font-weight:700;font-size:18px;letter-spacing:.04em}

/* sekcje */
.sec{padding-top:72px;padding-bottom:24px}
.h2{margin:0 0 28px;font-family:var(--cond);font-weight:800;font-size:48px;line-height:1;text-transform:uppercase;color:var(--ink)}
.spots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.spot{display:block;position:relative;overflow:hidden;text-decoration:none;aspect-ratio:16/10;background:var(--panel)}
.spot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.spot:hover img{transform:scale(1.05)}
.spot-cap{position:absolute;left:0;bottom:0;background:var(--bg);padding:16px 22px}
.spot-cap strong{display:block;font-family:var(--cond);font-weight:800;font-size:28px;text-transform:uppercase;color:var(--ink);line-height:1.05}
.spot-cap span{font-size:15px;color:var(--muted)}

.feats{display:flex;flex-direction:column;gap:64px}
.feat{display:flex;flex-wrap:wrap;gap:32px 56px;align-items:center}
.feat.rev{flex-wrap:wrap-reverse}
.feat-img{flex:1.2 1 480px;min-width:0}
.feat-img img{width:100%;aspect-ratio:4/3;object-fit:cover}
.feat-txt{flex:1 1 380px;min-width:0}
.feat h2{margin:0 0 16px;font-family:var(--cond);font-weight:800;font-size:46px;line-height:.98;text-transform:uppercase;color:var(--ink)}
.feat p{margin:0 0 22px;color:var(--muted)}
.codes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.codes span{font-family:var(--mono);font-size:14px;background:var(--panel);border:1px solid var(--line2);color:var(--ink);padding:6px 10px}

.manifest{padding-top:72px;padding-bottom:88px}
.manifest-in{border-top:2px solid var(--accent);padding-top:36px;display:flex;flex-wrap:wrap;gap:24px 48px;align-items:flex-end;justify-content:space-between}
.manifest h2{margin:0;font-family:var(--cond);font-weight:800;font-size:56px;line-height:.95;text-transform:uppercase;color:var(--ink);max-width:680px}
.manifest p{margin:0 0 18px;color:var(--muted);max-width:440px}

/* stopka */
.foot{background:var(--bg2);color:var(--muted2);border-top:1px solid var(--line);font-size:14px}
.foot .wrap{padding-top:40px;padding-bottom:40px;display:flex;flex-wrap:wrap;gap:24px 48px;justify-content:space-between}
.foot-name{font-family:var(--cond);font-weight:800;font-size:22px;text-transform:uppercase;color:var(--ink);margin-bottom:8px}
.foot-cols{display:flex;gap:48px;flex-wrap:wrap}
.foot-cols div{display:flex;flex-direction:column;gap:8px}
.foot-cols span{color:var(--ink);font-weight:700}
.foot a{color:var(--muted2)}.foot a:hover{color:var(--accent)}

/* telefon */
@media (max-width:860px){
  .nav{display:none}
  .menu{display:block;margin-left:auto;position:relative}
  .menu[open] .nav{display:flex;flex-direction:column;position:absolute;right:0;top:52px;background:var(--panel);padding:12px 20px;min-width:220px;z-index:5;gap:0}
  .hero h1{font-size:clamp(40px,12vw,58px)}
  .hero-txt{padding:48px 24px 40px}
  .hero-img,.hero-img img{min-height:300px}
  .band .wrap{grid-template-columns:1fr;gap:6px}
  .band b{font-size:34px}
  .spots{grid-template-columns:1fr}
  .h2{font-size:38px}
  .feat h2{font-size:36px}
  .manifest h2{font-size:42px}
}