/* ==========================================================================
   Aerank - arkusz stylów
   Paleta: powietrze i przyrządy pokładowe. Jasny błękit jako tło i linie,
   nasycony błękit tylko jako akcent.
   ========================================================================== */

:root{
  --ground:#EDF2F6; --surface:#FFFFFF; --surface-2:#F6FAFC; --line:#D2DEE7;
  --ink:#0C1A24; --ink-2:#3D5261; --ink-3:#6B8494;
  --sky:#1B82C4; --sky-deep:#0D5A8E; --haze:#A6DAEE; --marker:#DE5C2B;
  --onsky:#FFFFFF;
  --shadow:0 1px 2px rgba(12,26,36,.05), 0 12px 32px -18px rgba(12,26,36,.28);
  --r:3px;
  --f-disp:"Archivo","Arial Narrow",system-ui,sans-serif;
  --f-body:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#071219; --surface:#0D1E29; --surface-2:#122734; --line:#1E3C4E;
    --ink:#E9F3F8; --ink-2:#A7C1CF; --ink-3:#7290A3;
    --sky:#45B2EB; --sky-deep:#8CD4F4; --haze:#2A6885; --marker:#FF7F51;
    --onsky:#03151F;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 40px -20px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --ground:#071219; --surface:#0D1E29; --surface-2:#122734; --line:#1E3C4E;
  --ink:#E9F3F8; --ink-2:#A7C1CF; --ink-3:#7290A3;
  --sky:#45B2EB; --sky-deep:#8CD4F4; --haze:#2A6885; --marker:#FF7F51;
  --onsky:#03151F;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 40px -20px rgba(0,0,0,.7);
}

/* --------------------------------------------------------------- podstawy */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--f-body); font-weight:300; font-size:16.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,canvas{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--f-disp); font-weight:700; font-variation-settings:"wdth" 112;
  margin:0; line-height:1.07; letter-spacing:-.018em; text-wrap:balance}
h1{font-size:clamp(2.5rem,6vw,4.9rem); font-variation-settings:"wdth" 118; letter-spacing:-.03em}
h2{font-size:clamp(1.8rem,3.3vw,2.8rem)}
h3{font-size:1.14rem; font-weight:600; letter-spacing:-.008em}
p,ul,ol,dl,figure{margin:0}
:focus-visible{outline:2px solid var(--sky); outline-offset:3px; border-radius:2px}

.wrap{width:100%; max-width:1180px; margin-inline:auto; padding-inline:26px}
.mono{font-family:var(--f-mono); font-size:.685rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-3)}
.lead{font-size:clamp(1.02rem,1.5vw,1.19rem); color:var(--ink-2); line-height:1.62; max-width:60ch}
.mb{margin-bottom:14px}
.mt{margin-top:18px}
.mt2{margin-top:28px}
.pt0{padding-top:0}

.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink);
  color:var(--ground); padding:12px 18px; text-decoration:none; border-radius:0 0 var(--r) 0}
.skip:focus{left:0}

/* ------------------------------------------------------------- nagłówek */

header.top{position:sticky; top:0; z-index:60; border-bottom:1px solid var(--line);
  background:var(--ground)}
@supports (backdrop-filter:blur(4px)){
  header.top{background:color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter:blur(14px)}
}
.topin{display:flex; align-items:center; gap:26px; min-height:66px}
.brand{display:flex; align-items:center; gap:9px; text-decoration:none; flex:0 0 auto}
.brand b{font-family:var(--f-disp); font-weight:800; font-variation-settings:"wdth" 125;
  font-size:1.26rem; letter-spacing:-.035em}
.brand b i{font-style:normal; color:var(--sky)}

nav.main{display:flex; gap:2px; margin-left:auto}
nav.main a{font-size:.845rem; text-decoration:none; color:var(--ink-2);
  padding:7px 10px; border-radius:var(--r); white-space:nowrap}
nav.main a:hover{color:var(--ink); background:var(--surface)}
nav.main a[aria-current="page"]{color:var(--ink); font-weight:500; box-shadow:inset 0 -2px 0 var(--sky)}

.tgl{background:none; border:1px solid var(--line); color:var(--ink-3);
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.1em; padding:7px 8px;
  border-radius:var(--r); cursor:pointer; text-transform:uppercase}
.tgl:hover{color:var(--ink); border-color:var(--ink-3)}
.navcta{font-size:.845rem; text-decoration:none; padding:8px 15px; background:var(--ink);
  color:var(--ground); border-radius:var(--r); font-weight:500; white-space:nowrap}
.navcta:hover{background:var(--sky); color:var(--onsky)}

.burger{display:none; align-items:center; gap:8px; margin-left:auto; background:none;
  border:1px solid var(--line); border-radius:var(--r); padding:9px 12px; cursor:pointer; color:var(--ink)}
.burger span{display:block; width:16px; height:1.5px; background:currentColor}
.burger span+span{margin-top:4px}
.burger em{font-style:normal; font-family:var(--f-mono); font-size:.62rem;
  letter-spacing:.12em; text-transform:uppercase; margin-left:2px}

@media(max-width:1090px){
  .topin{flex-wrap:wrap; padding-block:12px; gap:10px}
  .burger{display:flex; order:2}
  .tgl{order:3}
  .navcta{order:4}
  nav.main{order:5; width:100%; margin-left:0; flex-direction:column; gap:0; display:none;
    border-top:1px solid var(--line); padding-top:8px; margin-top:4px}
  nav.main.open{display:flex}
  nav.main a{padding:11px 4px; border-bottom:1px solid var(--line)}
  nav.main a:last-child{border-bottom:0}
  nav.main a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--sky); padding-left:12px}
}

/* ------------------------------------------------------------------ hero */

.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.hero canvas{position:absolute; inset:0; width:100%; height:100%}
.hero .wrap{position:relative; padding-top:clamp(50px,7.5vw,100px); padding-bottom:clamp(42px,6vw,82px)}
.hero h1{margin-top:16px}
.hero .lead{margin-top:24px}
.eyebrow{display:inline-flex; align-items:center; gap:10px}
.eyebrow s{width:34px; height:1px; background:var(--sky); text-decoration:none; display:block}

.btns{display:flex; gap:12px; flex-wrap:wrap; margin-top:34px}
.btn{display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-size:.92rem;
  font-weight:500; font-family:var(--f-body); padding:12px 22px; border-radius:var(--r);
  border:1px solid transparent; cursor:pointer}
.btn.p{background:var(--sky); color:var(--onsky)}
.btn.p:hover{background:var(--sky-deep)}
.btn.s{border-color:var(--line); color:var(--ink); background:var(--surface)}
.btn.s:hover{border-color:var(--ink-3)}

/* ------------------------------------------------------------- okruszki */

.crumbs{border-bottom:1px solid var(--line); font-family:var(--f-mono); font-size:.66rem;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3)}
.crumbs .wrap{padding-block:12px}
.crumbs a{text-decoration:none; color:var(--ink-3)}
.crumbs a:hover{color:var(--sky)}
.crumbs span[aria-hidden]{margin-inline:6px; color:var(--line)}

/* ----------------------------------------------------------- pasek liczb */

.strip{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border-bottom:1px solid var(--line)}
.strip div{background:var(--ground); padding:22px 20px}
.strip b{display:block; font-family:var(--f-disp); font-weight:700;
  font-variation-settings:"wdth" 112; font-size:1.42rem; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.strip span{font-size:.82rem; color:var(--ink-3); display:block; margin-top:5px}
@media(max-width:760px){.strip{grid-template-columns:repeat(2,1fr)}}

/* --------------------------------------------------------------- sekcje */

section.blk{padding-block:clamp(50px,6.5vw,88px)}
section.blk.pt0{padding-top:0}

.railhead{display:grid; grid-template-columns:120px 1fr; gap:26px; align-items:start;
  border-top:1px solid var(--line); padding-top:22px; padding-bottom:34px}
.railhead .mono{padding-top:.55em}
.railhead .lead{margin-top:14px}
@media(max-width:720px){.railhead{grid-template-columns:1fr; gap:10px}}

.grid{display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.cell{background:var(--surface); padding:26px 24px; display:flex; flex-direction:column; gap:9px}
.cell p{color:var(--ink-2); font-size:.93rem}
@media(max-width:900px){.grid.c3{grid-template-columns:1fr}}
@media(max-width:560px){.grid.c2{grid-template-columns:1fr}}

/* karty usług */
a.svc{background:var(--surface); padding:30px 26px 26px; text-decoration:none;
  display:flex; flex-direction:column; gap:12px; transition:background .18s}
a.svc:hover{background:var(--surface-2)}
a.svc .idx{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em; color:var(--sky)}
a.svc p{color:var(--ink-2); font-size:.93rem; flex:1}
a.svc .go{font-size:.82rem; font-weight:500; color:var(--sky); display:inline-flex; gap:7px; align-items:center}
a.svc .go span{transition:transform .18s; display:inline-block}
a.svc:hover .go span{transform:translateX(4px)}
a.svc.wide{grid-column:1 / -1}
a.svc.wide p{max-width:74ch}

.tags{display:flex; flex-wrap:wrap; gap:6px}
.tag{font-family:var(--f-mono); font-size:.63rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); border:1px solid var(--line); padding:3px 7px; border-radius:2px}

/* proces */
ol.climb{list-style:none; padding:0}
ol.climb li{display:grid; grid-template-columns:56px 1fr; gap:22px; padding-block:22px;
  border-top:1px solid var(--line); align-items:start}
ol.climb li:last-child{border-bottom:1px solid var(--line)}
ol.climb .n{font-family:var(--f-mono); font-size:.72rem; color:var(--sky);
  padding-top:.35em; letter-spacing:.1em}
ol.climb p{color:var(--ink-2); font-size:.93rem; margin-top:6px; max-width:70ch}

/* listy z ptaszkiem */
ul.chk{list-style:none; padding:0; display:grid; gap:11px}
ul.chk li{display:grid; grid-template-columns:16px 1fr; gap:12px; font-size:.95rem;
  color:var(--ink-2); align-items:start}
ul.chk li::before{content:""; width:9px; height:9px; margin-top:.5em;
  border-left:1.5px solid var(--sky); border-bottom:1.5px solid var(--sky); transform:rotate(-45deg)}

.two{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,66px); align-items:start}
.two.wide{grid-template-columns:1fr 1.25fr}
@media(max-width:840px){.two,.two.wide{grid-template-columns:1fr}}

/* pytania */
details.q{border-top:1px solid var(--line)}
details.q:last-of-type{border-bottom:1px solid var(--line)}
details.q summary{cursor:pointer; padding-block:19px; font-weight:500; font-size:1rem;
  display:flex; gap:16px; align-items:baseline; list-style:none}
details.q summary::-webkit-details-marker{display:none}
details.q summary::after{content:"+"; margin-left:auto; color:var(--sky);
  font-family:var(--f-mono); font-size:1.05rem}
details.q[open] summary::after{content:"\2212"}
details.q p{padding-bottom:20px; color:var(--ink-2); font-size:.94rem; max-width:72ch}

.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(26px,4vw,42px); box-shadow:var(--shadow)}

.band{display:flex; flex-wrap:wrap; gap:0 34px; border-block:1px solid var(--line); padding-block:18px}
.band span{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-2); display:inline-flex; align-items:center; gap:10px; padding-block:4px}
.band span::before{content:""; width:5px; height:5px; background:var(--sky);
  border-radius:50%; flex:0 0 auto}

.cta{background:var(--ink); color:var(--ground); border-radius:var(--r);
  padding:clamp(30px,5vw,54px); display:grid; grid-template-columns:1.4fr 1fr; gap:32px; align-items:center}
.cta h2{color:var(--ground)}
.cta p{color:color-mix(in srgb, var(--ground) 74%, var(--ink)); margin-top:12px; font-size:1rem}
.cta .btns{margin-top:0}
.cta .btn.s{background:transparent; border-color:color-mix(in srgb,var(--ground) 34%, transparent);
  color:var(--ground)}
.cta .btn.s:hover{border-color:var(--ground)}
@media(max-width:780px){.cta{grid-template-columns:1fr}}

.plat{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
.plat span{display:inline-block; font-family:var(--f-disp); font-variation-settings:"wdth" 100;
  font-weight:500; font-size:.95rem; color:var(--ink-2); border:1px solid var(--line);
  background:var(--surface); padding:8px 14px; border-radius:var(--r)}
.plat a{text-decoration:none}
.plat a:hover span{border-color:var(--sky); color:var(--sky)}

/* ---------------------------------------------------------------- kontakt */

.bigc{display:grid; gap:20px}
.bigc .mono{margin-bottom:5px}
.bigc a{display:inline-block; font-family:var(--f-disp); font-variation-settings:"wdth" 112;
  font-weight:700; font-size:clamp(1.3rem,2.7vw,1.85rem); letter-spacing:-.025em;
  text-decoration:none; color:var(--ink); line-height:1.15; word-break:break-word}
.bigc a:hover{color:var(--sky)}
.mini{font-size:.78rem; color:var(--ink-3); margin-top:22px; line-height:1.6}

dl.dl div{display:grid; grid-template-columns:128px 1fr; gap:16px; padding-block:11px;
  border-top:1px solid var(--line); font-size:.93rem}
dl.dl dt{color:var(--ink-3); font-family:var(--f-mono); font-size:.67rem; letter-spacing:.1em;
  text-transform:uppercase; padding-top:.3em}
dl.dl dd{margin:0; color:var(--ink-2)}
dl.dl a{color:var(--sky); text-decoration:none}
dl.dl a:hover{text-decoration:underline}
@media(max-width:480px){dl.dl div{grid-template-columns:1fr; gap:2px}}

/* --------------------------------------------------------------- stopka */

footer{border-top:1px solid var(--line); padding:44px 0 32px}
.fgrid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:30px}
footer h2{margin-bottom:12px; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); font-weight:400}
footer a{display:block; text-decoration:none; color:var(--ink-2); font-size:.9rem; padding-block:3px}
footer a:hover{color:var(--sky)}
footer .brand{display:inline-flex; padding:0}
footer .small{font-size:.8rem; color:var(--ink-3); line-height:1.7; margin-top:12px; max-width:34ch}
.fbot{margin-top:32px; padding-top:20px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:.78rem; color:var(--ink-3)}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important}
}