/* ============================================================
   SELTOM — silnik graficzny (styl: stoisko targowe)
   Paleta: granat #1B212D · limonka #8DC63F · niebieski #3B52C4
   ============================================================ */
@import url("fonts.css");

:root{
  --bg:#1B212D; --bg2:#141924; --panel:#222A39; --panel2:#1E2532;
  --line:#2E3848; --line2:#3D4A5E;
  --green:#8DC63F; --green-l:#A6D95E; --green-d:#6FA52C;
  --blue:#3B52C4; --blue-d:#2A3A96; --blue-l:#5A73E8;
  --ink:#F2F6FB; --mut:#A7B2C3; --mut2:#8391A5;
  --hd-h:74px;
  color-scheme: only dark;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  font-family:'Barlow',system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--ink);
  font-size:17px; line-height:1.65;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:var(--green); text-decoration:none}
a:hover{color:var(--green-l)}
h1,h2,h3,h4,.disp{font-family:'Exo 2',sans-serif; line-height:1.18; font-weight:800; letter-spacing:.02em}
strong{font-weight:600; color:var(--ink)}
::selection{background:var(--green); color:#13200a}

.wrap{max-width:1180px; margin:0 auto; padding:0 22px}
.wrap-narrow{max-width:880px; margin:0 auto; padding:0 22px}

/* Heksagonowe tło (jak front lady na stoisku) */
.hexbg{position:relative; background:var(--bg2)}
.hexbg::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='194' viewBox='0 0 112 194'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1.6'%3E%3Cpath d='M56 1 L110 32 L110 96 L56 127 L2 96 L2 32 Z'/%3E%3Cpath d='M0 98 L54 129 L54 193 L0 224 L-54 193 L-54 129 Z'/%3E%3Cpath d='M112 98 L166 129 L166 193 L112 224 L58 193 L58 129 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:112px 194px;
}
.hexbg > *{position:relative}

/* ---------- Pasek górny ---------- */
.tbar{background:var(--bg2); border-bottom:1px solid var(--line); font-size:14px}
.tbar .wrap{display:flex; gap:22px; align-items:center; min-height:38px; color:var(--mut)}
.tbar a{color:var(--mut); display:inline-flex; gap:7px; align-items:center; font-weight:500}
.tbar a:hover{color:var(--green)}
.tbar .ic svg{width:15px;height:15px}
.tbar-sp{margin-left:auto}
@media(max-width:640px){ .tbar .t-hide{display:none} }

/* ---------- Nagłówek ---------- */
.hd{position:sticky; top:0; z-index:90; background:rgba(20,25,36,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.hd .wrap{display:flex; align-items:center; gap:26px; height:var(--hd-h)}
.brand{display:flex; align-items:center; gap:12px; color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand svg{width:46px; height:46px; flex:none}
.brand-t{line-height:1.05}
.brand-t b{font-family:'Exo 2'; font-weight:800; font-size:25px; letter-spacing:.08em}
.brand-t span{display:block; font-size:9.5px; letter-spacing:.14em; color:var(--mut); font-weight:600; margin-top:3px; white-space:nowrap}
nav.nv{margin-left:auto; display:flex; align-items:center; gap:4px}
.nv a.nl{font-family:'Exo 2'; font-weight:600; font-size:14px; letter-spacing:.05em; text-transform:uppercase; color:var(--mut); padding:9px 12px; border-radius:9px}
.nv a.nl:hover{color:var(--ink); background:var(--panel)}
.nv a.nl.on{color:var(--green)}
.nv .drop{position:relative}
.nv .drop > a.nl::after{content:"▾"; font-size:10px; margin-left:6px; opacity:.7}
.nv .dmenu{position:absolute; top:calc(100% + 8px); left:0; min-width:270px; background:var(--panel); border:1px solid var(--line2); border-radius:14px; padding:8px; display:none; box-shadow:0 18px 44px rgba(0,0,0,.45)}
.nv .drop:hover .dmenu, .nv .drop:focus-within .dmenu{display:block}
.nv .dmenu a{display:block; padding:10px 14px; border-radius:9px; color:var(--ink); font-size:15px; font-weight:500}
.nv .dmenu a:hover{background:var(--bg2); color:var(--green)}
.nv .dmenu a small{display:block; color:var(--mut2); font-size:12.5px; font-weight:400}
.hd .btn{margin-left:8px}
.burger{display:none; margin-left:auto; background:none; border:1px solid var(--line2); border-radius:10px; width:46px; height:42px; cursor:pointer; color:var(--ink); font-size:20px; line-height:1}
@media(max-width:1024px){
  nav.nv{position:fixed; inset:calc(var(--hd-h) + 39px) 0 auto 0; margin:0; background:var(--bg2); border-bottom:1px solid var(--line2); flex-direction:column; align-items:stretch; gap:2px; padding:14px 18px 20px; display:none; max-height:calc(100vh - var(--hd-h)); overflow:auto; box-shadow:0 30px 50px rgba(0,0,0,.5)}
  nav.nv.open{display:flex}
  .nv a.nl{padding:12px 10px; font-size:15px}
  .nv .dmenu{display:block; position:static; box-shadow:none; border:none; background:transparent; padding:0 0 6px 14px; min-width:0}
  .nv .drop > a.nl::after{content:""}
  .burger{display:block}
  .hd .btn{display:none}
  .brand-t span{display:none}
}

/* ---------- Przyciski ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:'Exo 2'; font-weight:700; font-size:14.5px; letter-spacing:.06em; text-transform:uppercase; padding:13px 24px; border-radius:11px; border:1px solid transparent; cursor:pointer; transition:.18s}
.btn-green{background:var(--green); color:#13200a}
.btn-green:hover{background:var(--green-l); color:#13200a; transform:translateY(-1px)}
.btn-ghost{border-color:var(--line2); color:var(--ink); background:transparent}
.btn-ghost:hover{border-color:var(--green); color:var(--green)}
.btn-blue{background:var(--blue); color:#fff}
.btn-blue:hover{background:var(--blue-l); color:#fff}
.btn .ic svg{width:17px;height:17px}
.btn-big{font-size:16px; padding:16px 30px}

/* ---------- Sekcje ---------- */
.sec{padding:78px 0}
.sec-alt{background:var(--bg2)}
.sec-head{max-width:820px; margin:0 auto 46px; text-align:center}
.kicker{font-family:'Exo 2'; font-weight:600; font-size:13px; letter-spacing:.24em; text-transform:uppercase; color:var(--green); margin-bottom:14px}
.sec-title{font-size:clamp(26px,4vw,40px); text-transform:uppercase; letter-spacing:.03em}
.sec-sub{color:var(--mut); margin-top:16px; font-size:18px}
.gline{width:76px; height:3px; background:var(--green); border-radius:2px; margin:20px auto 0}
.sec-head.left{margin-left:0; text-align:left}
.sec-head.left .gline{margin-left:0}

/* ---------- Siatki i karty ---------- */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:26px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.grid2>*,.grid3>*,.grid4>*{min-width:0}
@media(max-width:960px){ .grid3,.grid4{grid-template-columns:1fr 1fr} }
@media(max-width:640px){ .grid2,.grid3,.grid4{grid-template-columns:1fr} }

.card{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:28px; transition:.2s}
.card:hover{border-color:var(--green); transform:translateY(-3px)}
.card h3{font-size:19px; text-transform:uppercase; letter-spacing:.04em; margin:16px 0 10px; font-weight:700}
.card p{color:var(--mut); font-size:15.5px}
.card .more{display:inline-flex; align-items:center; gap:7px; margin-top:16px; font-family:'Exo 2'; font-weight:600; font-size:13.5px; letter-spacing:.08em; text-transform:uppercase}
.card .more::after{content:"→"}
a.card{display:block; color:var(--ink)}

/* Ikony liniowe (zielone, jak na stoisku) */
.ic{display:inline-flex}
.ic svg{width:26px; height:26px; stroke:var(--green); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.ic-big svg{width:52px; height:52px; stroke-width:1.7}
.ic-med svg{width:38px; height:38px; stroke-width:1.8}

/* Filary (hero — jak boczne kolumny stoiska) */
.pillar{text-align:center; padding:10px 6px}
.pillar .ic svg{width:56px; height:56px; stroke-width:1.6; margin:0 auto 12px}
.pillar b{display:block; font-family:'Exo 2'; font-weight:700; font-size:14.5px; letter-spacing:.07em; text-transform:uppercase}
.pillar span{display:block; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--mut); margin-top:5px; line-height:1.5}

/* Lista „ptaszków" */
.checks{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:13px 30px}
.checks li{display:flex; gap:12px; align-items:flex-start; color:var(--ink); font-size:16.5px}
.checks li::before{content:""; flex:none; width:22px; height:22px; margin-top:2px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238DC63F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
@media(max-width:760px){ .checks{grid-template-columns:1fr} }
.checks.one{grid-template-columns:1fr}

/* Liczby / statystyki */
.stat{text-align:center}
.stat b{font-family:'Exo 2'; font-weight:800; font-size:clamp(34px,5vw,52px); color:var(--green); display:block; line-height:1}
.stat span{display:block; margin-top:10px; color:var(--mut); font-size:14.5px; letter-spacing:.08em; text-transform:uppercase; font-family:'Exo 2'; font-weight:600}

/* Kroki procesu */
.steps{counter-reset:st; display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
@media(max-width:960px){ .steps{grid-template-columns:1fr 1fr} }
@media(max-width:600px){ .steps{grid-template-columns:1fr} }
.step{counter-increment:st; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:26px 24px; position:relative}
.step::before{content:"0" counter(st); font-family:'Exo 2'; font-weight:800; font-size:38px; color:transparent; -webkit-text-stroke:1.5px var(--green); display:block; margin-bottom:12px}
.step h3{font-size:17px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px}
.step p{color:var(--mut); font-size:15px}

/* Tabele (normy, częstotliwości) */
.tblwrap{overflow-x:auto; border:1px solid var(--line); border-radius:14px}
table.tbl{width:100%; border-collapse:collapse; font-size:15.5px; min-width:560px}
.tbl th{font-family:'Exo 2'; font-weight:700; font-size:13px; letter-spacing:.09em; text-transform:uppercase; text-align:left; color:var(--green); background:var(--bg2); padding:14px 18px; border-bottom:2px solid var(--green)}
.tbl td{padding:13px 18px; border-bottom:1px solid var(--line); color:var(--ink); vertical-align:top}
.tbl tr:last-child td{border-bottom:none}
.tbl td small{color:var(--mut2)}
.tbl tbody tr:hover td{background:rgba(141,198,63,.05)}

/* Akordeon (FAQ) */
details.acc{background:var(--panel); border:1px solid var(--line); border-radius:14px; margin-bottom:12px; overflow:hidden}
details.acc summary{cursor:pointer; list-style:none; padding:19px 54px 19px 22px; font-family:'Exo 2'; font-weight:600; font-size:16.5px; position:relative}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary::after{content:"+"; position:absolute; right:20px; top:50%; transform:translateY(-50%); font-size:24px; color:var(--green); font-weight:400}
details.acc[open] summary::after{content:"–"}
details.acc[open] summary{color:var(--green)}
details.acc .acc-b{padding:0 22px 20px; color:var(--mut); font-size:15.5px}
details.acc .acc-b p+p{margin-top:10px}

/* Ramka informacyjna */
.notice{background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--green); border-radius:12px; padding:20px 24px; color:var(--mut); font-size:15.5px}
.notice b{color:var(--ink)}
.notice.blue{border-left-color:var(--blue-l)}

/* Znaczniki klientów */
.badges{display:flex; flex-wrap:wrap; gap:14px; justify-content:center}
.badge{font-family:'Exo 2'; font-weight:700; font-size:16px; letter-spacing:.12em; text-transform:uppercase; color:var(--mut); border:1px solid var(--line2); border-radius:12px; padding:14px 28px; background:var(--panel2)}

/* Nagłówek podstrony */
.page-hero{padding:64px 0 56px; border-bottom:1px solid var(--line)}
.page-hero h1{font-size:clamp(28px,4.6vw,44px); text-transform:uppercase; letter-spacing:.03em; max-width:900px}
.page-hero .lead{color:var(--mut); font-size:19px; margin-top:18px; max-width:780px}
.crumbs{font-size:13.5px; color:var(--mut2); margin-bottom:18px; letter-spacing:.04em}
.crumbs a{color:var(--mut2)} .crumbs a:hover{color:var(--green)}
.crumbs span{color:var(--green)}

/* Treść artykułowa */
.art h2{font-size:clamp(22px,3vw,30px); text-transform:uppercase; letter-spacing:.03em; margin:46px 0 18px}
.art h3{font-size:19px; margin:30px 0 12px; letter-spacing:.03em}
.art p{color:var(--mut); margin-bottom:14px}
.art ul,.art ol{margin:0 0 16px 22px; color:var(--mut)}
.art li{margin-bottom:8px}
.art li::marker{color:var(--green)}

/* Pasek CTA */
.ctab{border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.ctab .in{display:flex; align-items:center; gap:28px; flex-wrap:wrap; padding:44px 0}
.ctab h2{font-size:clamp(22px,3vw,30px); text-transform:uppercase}
.ctab p{color:var(--mut); margin-top:8px}
.ctab .bts{margin-left:auto; display:flex; gap:14px; flex-wrap:wrap}
@media(max-width:860px){ .ctab .bts{margin-left:0} }

/* ---------- Stopka ---------- */
.ft{border-top:2px solid var(--green)}
.ft-main{display:grid; grid-template-columns:1.35fr 1fr 1fr 1.1fr; gap:34px; padding:56px 0 44px}
@media(max-width:960px){ .ft-main{grid-template-columns:1fr 1fr} }
@media(max-width:600px){ .ft-main{grid-template-columns:1fr} }
.ft h4{font-size:13.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--green); margin-bottom:16px; font-weight:700}
.ft ul{list-style:none}
.ft li{margin-bottom:9px}
.ft a{color:var(--mut); font-size:15px}
.ft a:hover{color:var(--green)}
.ft .fbrand{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.ft .fbrand svg{width:44px;height:44px}
.ft .fbrand b{font-family:'Exo 2'; font-weight:800; font-size:22px; letter-spacing:.08em}
.ft .fdesc{color:var(--mut); font-size:14.5px; max-width:300px}
.ft .fc{color:var(--mut); font-size:15px; display:flex; gap:10px; margin-bottom:10px; align-items:flex-start}
.ft .fc .ic svg{width:17px; height:17px; margin-top:4px}
.ft-bot{border-top:1px solid var(--line); padding:18px 0; font-size:13.5px; color:var(--mut2)}
.ft-bot .wrap{display:flex; gap:18px; flex-wrap:wrap; align-items:center}
.ft-bot a{color:var(--mut2)} .ft-bot a:hover{color:var(--green)}
.ft-bot .sp{margin-left:auto}
.ft .fsite{font-family:'Exo 2'; font-weight:700; letter-spacing:.22em; color:var(--green); font-size:14px}

/* Pływający telefon (mobile) */
.fab-tel{position:fixed; right:18px; bottom:18px; z-index:80; width:56px; height:56px; border-radius:50%; background:var(--green); display:none; align-items:center; justify-content:center; box-shadow:0 10px 26px rgba(141,198,63,.4)}
.fab-tel svg{width:24px; height:24px; stroke:#13200a; fill:none; stroke-width:2}
@media(max-width:1024px){ .fab-tel{display:flex} }

/* Animacja wejścia */
.rv{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.rv.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){ .rv{opacity:1; transform:none; transition:none} html{scroll-behavior:auto} }

/* Formularz */
.frm{display:grid; gap:16px}
.frm label{font-family:'Exo 2'; font-weight:600; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--mut); display:block; margin-bottom:7px}
.frm input,.frm textarea,.frm select{width:100%; background:var(--bg2); border:1px solid var(--line2); border-radius:11px; color:var(--ink); font:inherit; font-size:16px; padding:13px 15px; outline:none}
.frm input:focus,.frm textarea:focus,.frm select:focus{border-color:var(--green)}
.frm .row2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:600px){ .frm .row2{grid-template-columns:1fr} }

/* Drobiazgi */
.mt10{margin-top:10px}.mt20{margin-top:20px}.mt30{margin-top:30px}.mt40{margin-top:40px}.mt50{margin-top:50px}
.center{text-align:center}
.gtx{color:var(--green)}
.skip{position:absolute; left:-9999px; top:0; background:var(--green); color:#13200a; padding:10px 16px; z-index:200; border-radius:0 0 10px 0; font-weight:600}
.skip:focus{left:0}