:root{--accent:#ff7c09;--accent-hi:#ff8c26;--accent-rgb:255,124,9;--accent-soft:#ffa552}
/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  color:#1d1d1f;background:#fff;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-size:17px;line-height:1.47;letter-spacing:-.022em;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{max-width:1040px;margin:0 auto;padding:0 22px}
.wrap-wide{max-width:1440px;margin:0 auto;padding:0 22px}

/* ---------- type ---------- */
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.015em}
.hero-title{font-size:clamp(40px,7.4vw,88px);line-height:1.04;letter-spacing:-.03em;font-weight:600}
.h-xl{font-size:clamp(34px,5.2vw,60px);line-height:1.06;letter-spacing:-.028em;font-weight:600}
.h-lg{font-size:clamp(28px,3.6vw,44px);line-height:1.1;letter-spacing:-.022em;font-weight:600}
.h-md{font-size:clamp(22px,2.4vw,28px);line-height:1.15;letter-spacing:-.02em;font-weight:600}
.lead{font-size:clamp(19px,2.1vw,25px);line-height:1.35;letter-spacing:-.014em;font-weight:400;color:#1d1d1f}
.sub{color:#6e6e73}
.eyebrow{font-size:19px;font-weight:600;letter-spacing:-.01em;color:#6e6e73}
.tiny{font-size:12px;line-height:1.35;color:#6e6e73;letter-spacing:-.01em}
.center{text-align:center}

/* ---------- product name: logo + model ---------- */
.pname{display:inline-flex;align-items:baseline;gap:.3em;white-space:nowrap}
.pmark{height:.91em;width:auto;flex:0 0 auto;transform:translateY(.16em)}
.pmodel{font-weight:400;letter-spacing:.005em;color:#6e6e73}
.tile.dark .pmodel,.cc-card.hi .pmodel,.bg-black .pmodel{color:#a1a1a6}

/* ---------- buttons / links ---------- */
.btn{
  display:inline-block;background:var(--accent);color:#fff;border:0;cursor:pointer;
  font:inherit;font-size:17px;font-weight:400;letter-spacing:-.01em;
  padding:12px 22px;border-radius:980px;text-decoration:none;
  transition:background .2s ease,transform .2s ease;
}
.btn:hover{background:var(--accent-hi);text-decoration:none}
.btn:active{transform:scale(.97)}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--accent)}
.btn.ghost:hover{background:var(--accent);color:#fff}
.btn.on-dark{background:var(--accent)}
.btn.ghost.on-dark{color:var(--accent);border-color:var(--accent);background:transparent}
.btn.ghost.on-dark:hover{background:var(--accent);color:#000}
.btn.sm{font-size:14px;padding:7px 15px}
.arrow{white-space:nowrap;font-size:clamp(17px,1.6vw,21px)}
.arrow::after{content:" \203A";display:inline-block;transition:transform .2s ease}
.arrow:hover{text-decoration:none}
.arrow:hover::after{transform:translateX(3px)}
.links-row{display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:center;margin-top:20px}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:9000;height:48px;
  background:rgba(251,251,253,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.12);
}
.nav-in{max-width:1040px;margin:0 auto;height:48px;padding:0 22px;display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:baseline;gap:7px;flex:0 0 auto}
.brand img{height:25px;width:auto;opacity:.9}
.brand span{font-size:13px;color:#6e6e73;letter-spacing:-.01em;font-weight:400}
.nav ul{list-style:none;display:flex;gap:0;margin:0 auto;padding:0}
.nav ul a{color:#1d1d1f;font-size:12px;letter-spacing:-.01em;opacity:.88;padding:0 11px;line-height:48px;display:block}
.nav ul a:hover{opacity:1;text-decoration:none}
.nav-cta{flex:0 0 auto}
.burger{display:none;background:none;border:0;padding:6px;cursor:pointer;margin-left:auto}
.burger span{display:block;width:17px;height:1px;background:#1d1d1f;margin:4px 0;transition:transform .3s,opacity .3s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
@media(max-width:833px){
  .nav ul{display:none;position:fixed;top:48px;left:0;right:0;background:rgba(251,251,253,.96);
    -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
    flex-direction:column;padding:8px 22px 26px;border-bottom:1px solid rgba(0,0,0,.1);margin:0}
  .nav ul.open{display:flex}
  .nav ul a{font-size:17px;line-height:1;padding:14px 0;border-bottom:1px solid rgba(0,0,0,.07)}
  .burger{display:block}
  .nav-cta{display:none}
}

/* ---------- sections ---------- */
section{position:relative}
.pad{padding:96px 0}
.pad-sm{padding:64px 0}
.bg-grey{background:#f5f5f7}
.bg-offwhite{background:#fbfbfd}
.bg-black{background:#000;color:#f5f5f7}
.bg-black .sub,.bg-black .tiny{color:#86868b}
.bg-black .lead{color:#f5f5f7}
.bg-black a{color:var(--accent)}

/* ---------- hero ---------- */
.hero{background:#fbfbfd;padding:70px 0 0;overflow:hidden;text-align:center}
.hero .lead{max-width:640px;margin:18px auto 0}
.hero-stage{position:relative;margin:44px auto 0;max-width:900px}
.hero-glow{
  position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  width:min(150%,620px);aspect-ratio:1.6/1;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(var(--accent-rgb),.20),rgba(var(--accent-rgb),0) 62%);
  filter:blur(12px);
}
.hero-device{position:relative;width:min(100%,560px);margin:0 auto}
.hero-scroll{margin:38px 0 0;padding-bottom:60px}

/* zdjęcie produktu */
.device{width:100%;height:auto;display:block;border-radius:16px}
.tile-art img{width:100%;max-width:262px;height:auto;display:block;margin:0 auto;border-radius:12px}
/* na czarnym kaflu czarny spód obudowy zlewa się z tłem — podświetlamy go od tyłu */
.tile.dark .tile-art{position:relative}
.tile.dark .tile-art::before{
  content:"";position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);
  width:66%;aspect-ratio:2.1/1;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.30),rgba(255,255,255,0) 68%);
  filter:blur(8px);
}
.tile.dark .tile-art img{position:relative}

/* ---------- tiles ---------- */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:833px){.tiles{grid-template-columns:1fr}}
.tile{
  border-radius:20px;padding:52px 32px 46px;text-align:center;overflow:hidden;
  display:flex;flex-direction:column;min-height:460px;
}
.tile.light{background:#f5f5f7}
.tile.dark{background:#000;color:#f5f5f7}
.tile.dark .sub{color:#86868b}
.tile h3{font-size:clamp(30px,3.4vw,40px);letter-spacing:-.02em;line-height:1.08}
.tile p{margin:10px auto 0;max-width:340px;font-size:19px;letter-spacing:-.012em}
.tile .links-row{margin-top:18px}
.tile-art{margin-top:auto;padding-top:30px}
.tile-art svg{width:100%;height:auto;display:block}
.price-note{font-size:14px;color:#6e6e73;margin-top:12px}
.tile.dark .price-note{color:#86868b}
/* lista tego, co klient dostaje w cenie — zastapila linijke ze specyfikacja */
.tile-gratis{margin-top:16px;align-self:stretch}
.tile-gratis .naglowek{margin:0 0 9px;font-size:12px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:#6e6e73;text-align:center}
/* punkty w jednym rzedzie; przy waskim ekranie zawijaja sie same */
.tile-gratis ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;gap:7px 20px}
.tile-gratis li{position:relative;padding-left:20px;font-size:14px;letter-spacing:-.01em;white-space:nowrap}
.tile-gratis li::before{content:"";position:absolute;left:1px;top:7px;width:10px;height:5px;
  border-left:1.6px solid var(--accent);border-bottom:1.6px solid var(--accent);transform:rotate(-45deg)}
.tile.dark .tile-gratis .naglowek{color:#86868b}

/* ---------- feature grid ---------- */
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(0,0,0,.09);border:1px solid rgba(0,0,0,.09);border-radius:18px;overflow:hidden}
@media(max-width:1100px){.fgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.fgrid{grid-template-columns:1fr}}
.fgrid .cell{background:#fff;padding:34px 28px 38px}
.fgrid .cell h4{font-size:19px;letter-spacing:-.014em;margin-bottom:7px}
.fgrid .cell p{margin:0;font-size:15px;line-height:1.45;color:#6e6e73;letter-spacing:-.008em}
.ico{width:30px;height:30px;margin-bottom:16px;stroke:#1d1d1f;stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ---------- ui mock ---------- */
.mock{
  border-radius:14px;overflow:hidden;background:#fff;
  box-shadow:0 30px 70px rgba(0,0,0,.20),0 2px 8px rgba(0,0,0,.08);
  border:1px solid rgba(0,0,0,.08);max-width:940px;margin:0 auto;
}
.mock-bar{height:34px;background:#f5f5f7;border-bottom:1px solid rgba(0,0,0,.08);display:flex;align-items:center;padding:0 13px;gap:7px}
.dot{width:10px;height:10px;border-radius:50%}
.mock-url{margin-left:12px;font-size:11px;color:#86868b;background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:5px;padding:3px 12px;letter-spacing:0}
.mock-body{display:grid;grid-template-columns:180px 1fr;min-height:330px}
@media(max-width:640px){.mock-body{grid-template-columns:1fr}.mock-side{display:none}}
.mock-side{background:#fafafa;border-right:1px solid rgba(0,0,0,.07);padding:16px 12px}
.mock-side b{display:block;font-size:11px;color:#86868b;letter-spacing:.04em;text-transform:uppercase;margin:12px 8px 8px;font-weight:600}
.mi{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:7px;font-size:13px;color:#1d1d1f;letter-spacing:-.005em}
.mi.on{background:var(--accent);color:#fff}
.mi i{width:6px;height:6px;border-radius:2px;background:currentColor;opacity:.55;flex:0 0 auto}
.mock-main{padding:20px 22px}
.mock-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.mock-h strong{font-size:16px;letter-spacing:-.015em}
.pill{font-size:11px;background:rgba(var(--accent-rgb),.12);color:var(--accent);border-radius:99px;padding:4px 11px;font-weight:500}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.kpi{border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:11px 13px}
.kpi small{display:block;font-size:10px;color:#86868b;letter-spacing:.02em;text-transform:uppercase}
.kpi b{font-size:19px;letter-spacing:-.02em;display:block;margin-top:3px}
.bars{display:flex;align-items:flex-end;gap:7px;height:96px;padding:0 2px;border-bottom:1px solid rgba(0,0,0,.08);margin-bottom:14px}
.bars i{flex:1;background:linear-gradient(180deg,var(--accent),var(--accent-soft));border-radius:4px 4px 0 0;display:block}
.rows{display:flex;flex-direction:column;gap:7px}
.row{display:flex;align-items:center;gap:10px;font-size:12.5px;color:#424245;letter-spacing:-.005em}
.row u{flex:1;height:6px;background:#ececf0;border-radius:99px;text-decoration:none;overflow:hidden;display:block}
.row u b{display:block;height:100%;background:#1d1d1f;border-radius:99px}
.row span{width:44px;text-align:right;color:#86868b;font-variant-numeric:tabular-nums}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:44px 24px;margin-top:56px}
.stat b{display:block;font-size:clamp(44px,5vw,68px);line-height:1;letter-spacing:-.03em;font-weight:600}
.stat p{margin:12px 0 0;font-size:16px;color:#86868b;letter-spacing:-.01em;max-width:230px}

/* ---------- cost compare ---------- */
.cc{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:44px}
@media(max-width:700px){.cc{grid-template-columns:1fr}}
.cc-card{background:#fff;border-radius:18px;padding:28px 26px 26px;border:1px solid rgba(0,0,0,.08)}
.cc-card.hi{background:#000;color:#f5f5f7;border-color:#000}
.cc-card h4{font-size:17px;letter-spacing:-.01em}
.cc-card .amount{font-size:clamp(34px,4vw,46px);letter-spacing:-.028em;font-weight:600;margin:14px 0 2px;line-height:1}
.cc-bar{height:9px;border-radius:99px;background:#e8e8ed;overflow:hidden;margin:18px 0 10px}
.cc-card.hi .cc-bar{background:#2a2a2c}
.cc-bar i{display:block;height:100%;border-radius:99px;background:#86868b}
.cc-card.hi .cc-bar i{background:var(--accent)}
.cc-list{list-style:none;margin:14px 0 0;padding:0;font-size:14px;color:#6e6e73;letter-spacing:-.006em}
.cc-card.hi .cc-list{color:#86868b}
.cc-list li{padding:5px 0 5px 20px;position:relative}
.cc-list li::before{content:"";position:absolute;left:2px;top:12px;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5}

/* ---------- spec table ---------- */
.spec-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:44px}
table.spec{width:100%;border-collapse:collapse;min-width:660px;font-size:15px;letter-spacing:-.008em}
table.spec th,table.spec td{padding:16px 14px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(0,0,0,.09)}
table.spec thead th{font-size:19px;letter-spacing:-.016em;padding-bottom:8px;border-bottom:1px solid rgba(0,0,0,.16)}
table.spec thead th small{display:block;font-size:13px;font-weight:400;color:#6e6e73;margin-top:4px}
table.spec tbody th{font-weight:400;color:#6e6e73;width:180px}
table.spec td b{font-weight:600}

/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px}
@media(max-width:900px){.plans{grid-template-columns:1fr}}
.plan{background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:20px;padding:32px 28px;display:flex;flex-direction:column}
.plan.featured{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.plan .tag{font-size:12px;font-weight:600;color:var(--accent);letter-spacing:.01em;text-transform:uppercase;margin-bottom:10px;min-height:16px}
.plan h3{font-size:26px;letter-spacing:-.02em}
.plan .p{font-size:36px;letter-spacing:-.028em;font-weight:600;margin:16px 0 2px;line-height:1}
.plan ul{list-style:none;margin:22px 0 26px;padding:0;font-size:15px;color:#424245;letter-spacing:-.008em}
.plan ul li{padding:7px 0 7px 24px;position:relative}
.plan ul li::before{content:"";position:absolute;left:1px;top:13px;width:11px;height:6px;border-left:1.6px solid var(--accent);border-bottom:1.6px solid var(--accent);transform:rotate(-45deg)}
.plan .btn{margin-top:auto;text-align:center}

/* ---------- faq ---------- */
.faq{max-width:820px;margin:40px auto 0;border-top:1px solid rgba(0,0,0,.14)}
.faq details{border-bottom:1px solid rgba(0,0,0,.14)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 40px 22px 0;position:relative;
  font-size:19px;letter-spacing:-.014em;font-weight:400;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:31px;width:10px;height:10px;
  border-right:1.6px solid #6e6e73;border-bottom:1.6px solid #6e6e73;
  transform:rotate(45deg) translateY(-3px);transition:transform .25s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq .a{padding:0 34px 26px 0;color:#6e6e73;font-size:16px;letter-spacing:-.008em;max-width:700px}
.faq .a p{margin:0 0 12px}
.faq .a p:last-child{margin:0}

/* ---------- cta ---------- */
.cta{padding:110px 0;text-align:center;background:#fbfbfd}

/* ---------- footer ---------- */
footer{background:#f5f5f7;color:#6e6e73;font-size:12px;line-height:1.6;padding:40px 0 26px}
.fnote{border-bottom:1px solid rgba(0,0,0,.12);padding-bottom:18px;margin-bottom:20px;max-width:920px}
.fnote p{margin:0 0 8px}
.fcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:26px;padding-bottom:22px;border-bottom:1px solid rgba(0,0,0,.12)}
.fcols h5{margin:0 0 9px;font-size:12px;color:#1d1d1f;font-weight:600}
.fcols ul{list-style:none;margin:0;padding:0}
.fcols li{margin-bottom:7px}
.fcols a{color:#424245;text-decoration:none}
.fcols a:hover{text-decoration:underline;color:#1d1d1f}
.fbot{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;padding-top:18px}
.fbot .brand img{height:12px;opacity:.55}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  *{animation:none!important}
}
.led{animation:pulse 3.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* =========================================================
   WERSJE BRANŻOWE — dodatki
   Kolor akcentu ustawia każda strona przez :root{--accent}
   ========================================================= */

/* --- 3 kafle modeli zamiast 2 --- */
.tiles-3{grid-template-columns:repeat(3,1fr)}
.tiles-3 .tile{min-height:430px;padding:44px 26px 40px}
.tiles-3 .tile h3{font-size:clamp(26px,2.6vw,34px)}
.tiles-3 .tile p{font-size:17px;max-width:300px}
@media(max-width:1100px){.tiles-3{grid-template-columns:1fr}}

/* --- przełącznik branż w nawigacji --- */
.switch{position:relative}
.switch-btn{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font:inherit;font-size:13px;letter-spacing:-.01em;color:#1d1d1f;
  background:rgba(0,0,0,.055);border:0;border-radius:980px;padding:6px 13px;
  transition:background .2s ease;
}
.switch-btn:hover{background:rgba(0,0,0,.09)}
.caret{width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;
  border-top:4px solid #6e6e73;transition:transform .2s ease}
.switch-btn[aria-expanded="true"] .caret{transform:rotate(180deg)}
.switch-list{
  display:none;position:absolute;top:calc(100% + 8px);right:0;z-index:9500;
  list-style:none;margin:0;padding:6px;min-width:172px;
  background:rgba(251,251,253,.97);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border:1px solid rgba(0,0,0,.1);border-radius:14px;
  box-shadow:0 12px 34px rgba(0,0,0,.14);
}
.switch-list.open{display:block}
.switch-list a{
  display:block;padding:8px 12px;border-radius:9px;line-height:1.3;
  font-size:14px;color:#1d1d1f;letter-spacing:-.01em;
}
.switch-list a:hover{background:rgba(0,0,0,.055);text-decoration:none}
.switch-list a.on{color:var(--accent);font-weight:600}
@media(max-width:833px){
  .nav-cta{order:2;margin-left:auto}
  .burger{order:3;margin-left:6px}
}

/* --- trzy kroki uruchomienia --- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:52px;counter-reset:krok}
@media(max-width:833px){.steps{grid-template-columns:1fr}}
.step{
  position:relative;background:#fff;border-radius:18px;padding:34px 28px 32px;
  border:1px solid rgba(0,0,0,.07);
}
.step-n{
  position:absolute;top:26px;right:26px;
  font-size:13px;font-weight:600;letter-spacing:-.01em;color:#fff;
  width:24px;height:24px;border-radius:50%;background:var(--accent);
  display:flex;align-items:center;justify-content:center;
}
.step .ico{stroke:var(--accent);width:32px;height:32px}
.step h4{font-size:21px;letter-spacing:-.016em;margin-bottom:8px}
.step p{margin:0;font-size:15px;line-height:1.45;color:#6e6e73;letter-spacing:-.008em}

/* --- sekcja agenta AI --- */
.agent{
  display:grid;grid-template-columns:1.05fr .95fr;gap:0;
  background:#000;color:#f5f5f7;border-radius:24px;overflow:hidden;
}
@media(max-width:900px){.agent{grid-template-columns:1fr}}
.agent-txt{padding:56px 48px 52px}
@media(max-width:620px){.agent-txt{padding:40px 26px 36px}}
.agent-txt .lead{color:#86868b;font-size:19px}
.agent-list{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.agent-list li{
  background:rgba(255,255,255,.07);border-radius:12px;padding:11px 15px;
  font-size:15px;line-height:1.4;letter-spacing:-.008em;color:#f5f5f7;
}
.agent-vis{
  padding:48px 44px;display:flex;align-items:center;
  background:radial-gradient(120% 90% at 70% 20%,rgba(255,255,255,.09),transparent 62%);
  border-left:1px solid rgba(255,255,255,.1);
}
@media(max-width:900px){.agent-vis{border-left:0;border-top:1px solid rgba(255,255,255,.1);padding:34px 26px 42px}}
.chat{display:flex;flex-direction:column;gap:12px;width:100%}
.msg{
  border-radius:16px;padding:13px 17px;font-size:15px;line-height:1.45;
  letter-spacing:-.008em;max-width:92%;
}
.msg.you{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:5px}
.msg.bot{align-self:flex-start;background:rgba(255,255,255,.1);color:#f5f5f7;border-bottom-left-radius:5px}
.typing{display:inline-flex;gap:3px;margin-right:8px;vertical-align:middle}
.typing i{width:5px;height:5px;border-radius:50%;background:#86868b;display:block;
  animation:kropka 1.3s infinite ease-in-out}
.typing i:nth-child(2){animation-delay:.18s}
.typing i:nth-child(3){animation-delay:.36s}
@keyframes kropka{0%,60%,100%{opacity:.3}30%{opacity:1}}
@media(prefers-reduced-motion:reduce){.typing i{animation:none;opacity:.6}}

/* --- hub: siatka branż --- */
.hgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:1100px){.hgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.hgrid{grid-template-columns:1fr}}
.hcard{
  display:flex;flex-direction:column;background:#f5f5f7;border-radius:20px;
  padding:34px 30px 30px;color:#1d1d1f;border:1px solid transparent;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease;
}
.hcard:hover{
  text-decoration:none;background:#fff;transform:translateY(-3px);
  border-color:rgba(0,0,0,.08);box-shadow:0 16px 40px rgba(0,0,0,.09);
}
.hcard-mark{
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:13px;margin-bottom:20px;
  background:var(--accent);
}
.hcard-mark .ico{width:26px;height:26px;margin:0;stroke:#fff;stroke-width:1.5}
.hcard h3{font-size:26px;letter-spacing:-.02em;line-height:1.1}
.hcard p.sub{margin:8px 0 0;font-size:15px;line-height:1.45;letter-spacing:-.008em}
.hcard ul{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.hcard li{
  font-size:12.5px;letter-spacing:-.006em;color:#6e6e73;
  background:rgba(0,0,0,.05);border-radius:980px;padding:4px 11px;
}
.hcard-go{margin-top:auto;padding-top:24px;font-size:16px;color:var(--accent);letter-spacing:-.01em}
.hcard:hover .hcard-go span{display:inline-block;transform:translateX(3px)}
.hcard-go span{transition:transform .2s ease}

/* --- czytelność akcentu na czarnym tle --- */
.bg-black a,.agent a{color:var(--accent-hi)}
.bg-black .stat b{color:#f5f5f7}

/* --- punkty "za darmo w pakiecie" nie mogą rozpychać strony na mobile --- */
@media(max-width:833px){
  .tile-gratis ul{flex-direction:column;align-items:center;gap:9px}
  .tile-gratis li{white-space:normal;text-align:left;max-width:290px}
}

/* --- jeden produkt, jedna cena --- */
.tiles-1{grid-template-columns:1fr}
.tiles-1 .tile{min-height:0;padding:56px 32px 52px}
.tiles-1 .tile p.sub{max-width:440px}
.tiles-1 .tile-art{max-width:620px;margin-left:auto;margin-right:auto}
.tiles-1 .tile-art img{max-width:460px}
/* .tile p jest bardziej szczegolowe niz .tile-cena — stad p.tile-cena */
.tile p.tile-cena{
  margin:24px auto 0;max-width:none;
  font-size:clamp(34px,4.4vw,52px);line-height:1;
  letter-spacing:-.028em;font-weight:600;color:#f5f5f7;
}
.tile p.tile-cena span{
  display:block;margin-top:10px;font-size:13px;font-weight:400;
  letter-spacing:-.01em;color:#86868b;
}
/* naglowek listy ma wlasny margines, wiec bez auto nie wysrodkuje sie w szerokim kaflu */
.tiles-1 .tile-gratis .naglowek{margin-left:auto;margin-right:auto}
.plans-1{grid-template-columns:minmax(0,420px);justify-content:center}
@media(max-width:900px){.plans-1{grid-template-columns:1fr}}
table.spec-1{min-width:0}
table.spec-1 td{text-align:left}

/* --- Trzy kroki: postep chodzacy w kolko -----------------------------------
   Karty wstaja raz, przy wjezdzie w ekran (na przejsciu). Potem juz w kolko
   chodzi po nich fala: pasek nad karta wypelnia sie, chwile stoi, gasnie —
   i tak samo w nastepnej karcie, z opoznieniem. Cykl trwa 6 s, wiec sekcja
   zyje, ale nie miga w oczy. Wszystko rusza dopiero od klasy .in, ktora
   .rv dostaje od skryptu strony. */
.steps{position:relative}

/* jednorazowe wejscie kart */
.steps .step{
  opacity:0;transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),
             transform .6s cubic-bezier(.22,.61,.36,1);
}
.steps.in .step{opacity:1;transform:none}
.steps.in .step:nth-child(2){transition-delay:.16s}
.steps.in .step:nth-child(3){transition-delay:.32s}

/* slad paska — widac, ze cos jeszcze zostalo do wypelnienia */
.steps .step::before{
  content:"";position:absolute;left:18px;right:18px;top:14px;height:4px;
  border-radius:99px;background:rgba(0,0,0,.07);
}
/* pasek wsuniety o promien zaokraglenia, zeby nie wystawal za rog karty */
.steps .step::after{
  content:"";position:absolute;left:18px;right:18px;top:14px;height:4px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--accent-soft));
  transform:scaleX(0);transform-origin:left center;
}

@keyframes krok-pasek{
  0%{transform:scaleX(0);opacity:1}
  12%{transform:scaleX(1);opacity:1}
  72%{transform:scaleX(1);opacity:1}
  82%{transform:scaleX(1);opacity:0}
  83%{transform:scaleX(0);opacity:0}
  100%{transform:scaleX(0);opacity:1}
}
@keyframes krok-podswietlenie{
  0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0);border-color:rgba(0,0,0,.07)}
  6%{box-shadow:0 14px 34px -14px rgba(var(--accent-rgb),.6);
     border-color:rgba(var(--accent-rgb),.45)}
  20%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0);border-color:rgba(0,0,0,.07)}
  100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0);border-color:rgba(0,0,0,.07)}
}
@keyframes krok-pierscien{
  0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.6)}
  14%{box-shadow:0 0 0 14px rgba(var(--accent-rgb),0)}
  100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}
}

/* Ten sam cykl dla wszystkich trzech, przesuniety o pol sekundy — stad fala. */
.steps.in .step::after{animation:krok-pasek 6s linear infinite}
.steps.in .step{animation:krok-podswietlenie 6s ease-out infinite}
.steps.in .step-n{animation:krok-pierscien 6s ease-out infinite}

.steps.in .step:nth-child(2)::after,
.steps.in .step:nth-child(2),
.steps.in .step:nth-child(2) .step-n{animation-delay:.55s}
.steps.in .step:nth-child(3)::after,
.steps.in .step:nth-child(3),
.steps.in .step:nth-child(3) .step-n{animation-delay:1.10s}

/* Ikona podnosi sie razem z karta, pol kroku pozniej — tylko raz. */
.steps .step .ico{
  opacity:0;transform:translateY(6px);
  transition:opacity .5s linear,transform .5s cubic-bezier(.22,.61,.36,1);
}
.steps.in .step .ico{opacity:1;transform:none}
.steps.in .step:nth-child(1) .ico{transition-delay:.20s}
.steps.in .step:nth-child(2) .ico{transition-delay:.36s}
.steps.in .step:nth-child(3) .ico{transition-delay:.52s}

/* Kto prosi o mniej ruchu, dostaje gotowy obrazek: paski pelne, bez petli. */
@media(prefers-reduced-motion:reduce){
  .steps .step,.steps .step-n,.steps .step .ico,.steps .step::after{
    animation:none;transition:none;opacity:1;
  }
  .steps .step,.steps .step-n,.steps .step .ico{transform:none}
  .steps .step::after{transform:scaleX(1)}
}

/* --- Porownanie kosztow pod hero -------------------------------------------
   Trzy karty: dwie kwoty, ktore dzis placisz, i Spark posrodku. Boczne kwoty
   sa przekreslone, bo to one znikaja z rachunku. Srodkowa karta jest odrobine
   szersza i wyzsza — wzrok ma na niej siadac pierwszy. */
.cc-porownanie{margin-top:30px}
@media(min-width:900px){
  .cc-porownanie{grid-template-columns:1fr 1.16fr 1fr;align-items:center}
  /* Karta trzyma wysokosc sama z siebie — wczesniej rozpychalo ja zdjecie
     wstawione pod lista, a teraz zdjecie jest tlem i nic nie zajmuje miejsca. */
  .cc-porownanie .cc-card.hi{padding:38px 30px 34px;min-height:500px}
}
@media(max-width:899px){.cc-porownanie{grid-template-columns:1fr}}

.cc-porownanie .cc-card:not(.hi) .amount{
  text-decoration:line-through;
  text-decoration-thickness:2px;
  text-decoration-color:rgba(0,0,0,.32);
}

/* Srodkowa karta dostaje to samo zdjecie co czarna sekcja nizej. Kadr jest
   z natury ciemny (urzadzenie wychodzi z cienia), wiec siedzi na osobnej
   warstwie i idzie przez rozjasnienie — inaczej na dole karty widac tylko
   zarys. Na wierzchu gradient do czerni, zeby kwota i lista byly czytelne. */
.cc-card.cc-foto{position:relative;overflow:hidden}
.cc-card.cc-foto::before{
  content:"";position:absolute;inset:0;
  background:var(--foto) center bottom / cover no-repeat;
  filter:brightness(1.55) contrast(1.04);
}
.cc-card.cc-foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.86) 34%,
                             rgba(0,0,0,.4) 58%,rgba(0,0,0,0) 100%);
}
.cc-card.cc-foto > *{position:relative;z-index:1}

/* --- Hero: ciepla poswiata u gory ------------------------------------------
   Bardzo lekki gradient od koloru branzy do tla strony (#fbfbfd). Ma tylko
   ocieplic gorna krawedz i zejsc do zera zanim zacznie sie nastepna sekcja,
   zeby nie bylo widac szwu. Kolor bierze sie z --accent-rgb, wiec kazda
   branza dostaje swoj odcien bez dopisywania czegokolwiek. */
.hero{
  background:
    linear-gradient(180deg,
      rgba(var(--accent-rgb),.085) 0%,
      rgba(var(--accent-rgb),.045) 22%,
      rgba(var(--accent-rgb),.014) 48%,
      rgba(var(--accent-rgb),0) 68%),
    #fbfbfd;
}

/* --- Gradient na wyroznionym fragmencie naglowka ---------------------------
   Kolor wlewa sie w same litery (background-clip:text). Starsze przegladarki
   nie umieja tej sztuczki i pokazalyby przezroczysty, czyli niewidoczny tekst
   — dlatego kolor akcentu jest ustawiony normalnie, a przezroczystosc wchodzi
   dopiero w @supports. */
.tecza{color:var(--accent)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .tecza{
    /* Zaczyna sie kolorem zwyklego naglowka i dopiero na koncu ociepla —
       ma byc ledwie zauwazalne, jak u Apple, a nie pomaranczowy napis. */
    background:linear-gradient(100deg,#1d1d1f 0%,#1d1d1f 34%,#8a5a2f 68%,#ff9a3c 100%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
  }
}

/* --- Zdjecie jako tlo czarnej sekcji ---------------------------------------
   Kadr jest ciemny, wiec kladziemy go na cala szerokosc i przykrywamy
   gradientem od lewej: tekst siedzi na czerni, urzadzenie wychodzi z cienia
   po prawej. Adres pliku podaje sam szablon, bo sciezki roznia sie miedzy
   strona glowna a podstronami. */
.dane-foto{
  position:relative;overflow:hidden;
  background-color:#000;background-size:cover;
  background-position:center right;background-repeat:no-repeat;
}
.dane-foto::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.94) 34%,
                             rgba(0,0,0,.55) 68%,rgba(0,0,0,.2) 100%);
}
.dane-foto > .wrap{position:relative;z-index:1}
@media(max-width:833px){
  .dane-foto{background-position:center bottom}
  .dane-foto::before{background:linear-gradient(180deg,rgba(0,0,0,.92),rgba(0,0,0,.7))}
}

/* --- Kod plynacy w tle sekcji o agencie ------------------------------------
   Dekoracja, nie tresc: linijki wolno plyna do gory i zawijaja sie w kolko.
   Sa aria-hidden, wiec czytnik ekranu ich nie czyta, i maja niska krycie,
   zeby nie przeszkadzaly w czytaniu tego, co na wierzchu. */
.kod-scena{position:relative;overflow:hidden}
.kod-scena > .wrap{position:relative;z-index:1}

.kod-tlo{
  position:absolute;inset:0;pointer-events:none;user-select:none;z-index:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px;letter-spacing:-.01em;white-space:pre;
  color:var(--accent);opacity:.30;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
}
.kod-tlo span{
  position:absolute;
  animation-name:kod-plynie;animation-timing-function:linear;
  animation-iteration-count:infinite;
}
/* Ruch idzie po "top", nie po transform: procenty w transform licza sie od
   wysokosci samej linijki (czyli okolo 24 px), a nam chodzi o przejscie przez
   cala karte — a te procenty bierze wlasnie "top". */
@keyframes kod-plynie{
  from{top:100%}
  to{top:-12%}
}

/* Na waskim ekranie tresci jest malo miejsca — kod tylko przeszkadza. */
@media(max-width:833px){.kod-tlo{display:none}}
@media(prefers-reduced-motion:reduce){.kod-tlo span{animation:none;opacity:.5}}

/* --- Wybor branzy: najazd przemalowuje cala sekcje ------------------------
   Kafel oddaje swoj kolor sekcji (--akcent-sekcji) i zapala swoje zdjecie
   w tle. Zdjecia leza jedno na drugim i przelaczaja sie kryciem, wiec nie ma
   przeskoku ani doladowywania w trakcie. Bez najazdu wszystko wyglada jak
   dotad — to dodatek, nie warunek czytelnosci. */
.wersje-scena{position:relative;overflow:hidden;transition:background-color .45s ease}
.wersje-scena > .wrap-wide{position:relative;z-index:1}
.wersje-scena[data-branza]{background-color:#0b0b0c;color:#f5f5f7}

.wersje-tla{position:absolute;inset:0;z-index:0;pointer-events:none}
.wersje-tla i{
  position:absolute;inset:0;opacity:0;transition:opacity .55s ease;
  background:var(--foto) center right / cover no-repeat;
}
.wersje-scena[data-branza="hotel"] .wersje-tla i[data-b="hotel"]{opacity:1}
.wersje-scena[data-branza="warsztat"] .wersje-tla i[data-b="warsztat"]{opacity:1}
.wersje-scena[data-branza="rehabilitacja"] .wersje-tla i[data-b="rehabilitacja"]{opacity:1}
.wersje-scena[data-branza="beauty"] .wersje-tla i[data-b="beauty"]{opacity:1}
.wersje-scena[data-branza="restauracja"] .wersje-tla i[data-b="restauracja"]{opacity:1}

/* Przyciemnienie od lewej — tam stoi naglowek i akapit. */
.wersje-tla::after{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .55s ease;
  background:linear-gradient(180deg,rgba(11,11,12,.9) 0%,rgba(11,11,12,.72) 40%,
                             rgba(11,11,12,.86) 100%);
}
.wersje-scena[data-branza] .wersje-tla::after{opacity:1}

.wersje-scena h2,.wersje-scena .lead{transition:color .45s ease}
.wersje-scena[data-branza] h2{color:#f5f5f7}
.wersje-scena[data-branza] .lead.sub{color:#b9b9bd}

/* Kafle poza najechanym przygasaja, zeby wybor byl widoczny. */
.wersje-scena .hcard{transition:opacity .35s ease,transform .35s ease,box-shadow .35s ease}
.wersje-scena[data-branza] .hcard{
  opacity:.5;background:rgba(18,18,20,.62);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-color:rgba(255,255,255,.14);
}
.wersje-scena[data-branza] .hcard h3,
.wersje-scena[data-branza] .hcard li{color:#f5f5f7}
.wersje-scena[data-branza] .hcard p.sub{color:#b9b9bd}
.wersje-scena[data-branza] .hcard li{background:rgba(255,255,255,.09)}
.wersje-scena[data-branza] .hcard:hover,
.wersje-scena[data-branza] .hcard:focus-visible{
  opacity:1;transform:translateY(-4px);background:rgba(18,18,20,.82);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.8),
             0 0 0 2px var(--akcent-sekcji,var(--accent));
}

@media(prefers-reduced-motion:reduce){
  .wersje-scena,.wersje-tla i,.wersje-tla::after,.wersje-scena .hcard{transition:none}
}

/* Skreslenie w naglowkach zostaje widoczne od razu — probowalismy je
   dorysowywac po chwili, ale wlasciciel wolal wersje statyczna. */
.h-xl s,.h-lg s{text-decoration:line-through;text-decoration-thickness:.06em}

/* --- Filtry branz pod cena -------------------------------------------------
   Pigulki podmieniaja kafel produktu bez przeladowania strony. Aktywna bierze
   kolor swojej branzy z --accent ustawionego na samym przycisku, wiec dolozenie
   kolejnej wersji nie wymaga ruszania tego pliku. */
.branza-filtry{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:36px;
}
.branza-chip{
  font:inherit;font-size:15px;letter-spacing:-.012em;line-height:1.2;
  padding:10px 19px;border-radius:980px;cursor:pointer;
  background:#fff;color:#1d1d1f;border:1px solid rgba(0,0,0,.13);
  transition:background .25s,border-color .25s,color .25s;
}
.branza-chip:hover{border-color:rgba(0,0,0,.3)}
.branza-chip[aria-selected="true"]{
  background:var(--accent);border-color:var(--accent);color:#fff;
}
/* Podmiana kafla ma wjechac miekko, inaczej tresc mruga w miejscu. Klase
   dokleja skrypt przy kliknieciu, wiec przy pierwszym wyswietleniu sekcji
   dziala samo .rv i animacje sie nie nakladaja. */
.tile.zmiana{animation:branza-wejscie .45s cubic-bezier(.22,.61,.36,1)}
@keyframes branza-wejscie{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.tile.zmiana{animation:none}}
@media(max-width:520px){
  .branza-chip{font-size:14px;padding:9px 15px}
}
/* .tile ma display:flex, ktore bije domyslne [hidden]{display:none} z przegladarki —
   bez tej linijki wszystkie panele stoja jeden pod drugim zamiast sie przelaczac. */
.tile[hidden]{display:none}

/* --- Hero na pelny ekran ----------------------------------------------------
   Pasek nawigacji jest sticky, czyli stoi w normalnym ukladzie i zabiera swoje
   48 px u gory. Zeby pierwszy ekran konczyl sie dokladnie na dole okna, hero
   dostaje 100svh MINUS te 48 px — inaczej strona zaczyna sie od razu z paskiem
   przewijania.
   svh zamiast vh, bo na telefonach vh liczy sie do okna BEZ paska adresu:
   hero bylby wyzszy niz widoczny obszar. Pierwsza deklaracja (vh) zostaje dla
   przegladarek, ktore svh nie znaja — nowsze nadpisza ja druga linijka.
   min-height, nie height, bo przy bardzo niskim oknie tresc ma sie rozepchnac,
   a nie zostac przycieta przez overflow:hidden. */
.hero{
  min-height:calc(100vh - 48px);
  min-height:calc(100svh - 48px);
  display:flex;flex-direction:column;justify-content:center;
  padding-top:clamp(24px,4vh,56px);
  padding-bottom:clamp(24px,4vh,56px);
}
/* Cala grupa — naglowek, urzadzenie, linijka na dole — jedzie razem na srodek
   wolnej wysokosci. Odstepy MIEDZY blokami zostaja te same co przed zmiana
   (44 px nad zdjeciem, 38 px nad linijka), wiec kompozycja wyglada jak dotad,
   tylko siedzi w pionie posrodku ekranu zamiast byc rozepchnieta do krawedzi.
   Wlasny dolny padding linijki znika, bo przy centrowaniu przesuwalby cala
   grupe do gory — gorny i dolny oddech daje teraz symetryczny padding hero. */
.hero-scroll{padding-bottom:0}

/* Zdjecie ma stale proporcje 3:2, wiec zamiast kombinowac z max-height
   (co przy width:100% splaszcza obrazek) ograniczamy SZEROKOSC kontenera:
   66vh szerokosci to rowno 44vh wysokosci. Na monitorze wygrywa 560 px i
   urzadzenie zostaje tak duze jak dotad, na niskim laptopie zjezdza samo,
   zeby caly hero zmiescil sie na ekranie. */
.hero-device{width:min(100%,560px,66vh)}
.hero-device{width:min(100%,560px,66svh)}

/* --- Wtopienie zdjecia w czarny kafel ---------------------------------------
   Dolna krawedz obudowy konczyla sie ostro na czerni i produkt wygladal jak
   wyciety nozyczkami. Gradient od dolu wygasza te krawedz.
   Warstwa jest szersza niz samo zdjecie, ale poza nim czern klada sie na
   czern kafla, wiec nie widac zadnego pasa. pointer-events:none, zeby nie
   zabierala klikniec linkom pod spodem. */
.tile.dark .tile-art::after{
  content:"";position:absolute;left:0;right:0;bottom:0;z-index:2;
  height:45%;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.42) 45%,
    rgba(0,0,0,.88) 72%,
    #000 100%);
}

/* --- Hero: zdjecie przyciete do samego urzadzenia ---------------------------
   spark-urzadzenie-hero.png to ten sam render, tylko bez przezroczystej ramki
   — oryginal mial 32% pustego pola w poziomie i 38% w pionie. Przy tej samej
   szerokosci kontenera produkt jest przez to okolo 45% wiekszy, a caly kadr
   NIZSZY niz wczesniej, wiec hero nadal miesci sie na jednym ekranie.
   Kafle i podstrona hotel-1-5i zostaja na starym, nieprzycietym pliku. */
.hero .device{border-radius:0}   /* kadr dotyka obudowy — zaokraglenie scieloby jej rogi */

/* Odstepy wokol zdjecia robila wczesniej w duzej mierze pustka w samym PNG
   (65 px nad urzadzeniem i 77 px pod nim). Po przycieciu trzeba je oddac
   marginesami, inaczej naglowek siada urzadzeniu na glowie. Wartosci sa
   plynne, bo hero ma stala wysokosc 100svh i na niskim oknie musi ustapic. */
.hero-stage{margin-top:clamp(40px,10vh,106px)}
.hero-scroll{margin-top:clamp(36px,10vh,112px)}

/* Dolna krawedz obudowy konczy sie teraz dokladnie na dole kadru i wygladala
   jak odcieta. To samo lekarstwo co w czarnych kaflach, tylko tu wygaszamy
   w biel, a nie w czern. Biel jest o wlos jasniejsza od tla hero (#fbfbfd),
   wiec sam dol kadru delikatnie sie rozjasnia. */
.hero-device::after{
  content:"";position:absolute;left:0;right:0;bottom:0;z-index:2;
  height:26%;pointer-events:none;
  /* Duzo przystankow, bo gradient o czterech punktach widac jako pas w poprzek
     obudowy — te wartosci ida lagodna krzywa (wolno na starcie, szybciej przy
     dole), wiec przejscie jest niewidoczne. */
  background:linear-gradient(180deg,
    rgba(255,255,255,0)    0%,
    rgba(255,255,255,.04) 20%,
    rgba(255,255,255,.11) 36%,
    rgba(255,255,255,.22) 50%,
    rgba(255,255,255,.36) 62%,
    rgba(255,255,255,.52) 73%,
    rgba(255,255,255,.70) 83%,
    rgba(255,255,255,.87) 92%,
    #fff              100%);
}

/* --- Pomaranczowy gradient na fragmencie naglowka --------------------------
   Ten sam mechanizm co .tecza — kolor wlewa sie w same litery przez
   background-clip:text — ale caly w cieplych barwach, bo napis siedzi na
   czarnym panelu i ma sie od niego odkleic.
   Starsze przegladarki tej sztuczki nie umieja i pokazalyby przezroczysty,
   czyli niewidoczny tekst, dlatego zwykly kolor stoi normalnie, a
   przezroczystosc wchodzi dopiero w @supports. */
.pomarancz{color:#ff9a3c}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .pomarancz{
    background:linear-gradient(100deg,#ff6a00 0%,#ff9a3c 46%,#ffc46b 100%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
  }
}

/* --- Plakietka KSeF w kaflu "Program ksiegowy" -----------------------------
   Znak jest zlozony tekstem, nie obrazkiem: zostaje ostry w kazdej skali i
   nie dokłada pliku do pobrania.
   Niebieski to #0071e3, czyli ten sam, ktorego strona uzywa jako akcentu
   wersji warsztatowej — zamiast ciemniejszego granatu z oryginalu.
   Wielkosc jest podana w pikselach, nie w em: naglowek kafla ma tylko 19 px,
   wiec plakietka liczona od jego wielkosci zrobilaby sie nieczytelna. */
.fgrid .cell{position:relative}   /* kotwica dla plakietki w rogu */
.ksef-znak{
  position:absolute;top:16px;right:16px;
  display:inline-block;white-space:nowrap;
  font-size:11px;font-weight:700;line-height:1;letter-spacing:.02em;
  padding:5px 7px;border-radius:6px;
  background:#0071e3;color:#fff;
  box-shadow:0 1px 6px rgba(0,113,227,.28);
}
/* Czerwone "e" jak w oryginale, tylko jasniejsze — ceglasty odcien znaku
   na tym niebieskim robil sie brudny i litera ginela. */
.ksef-znak span{color:#ff3b30}

/* --- Niebieski gradient na fragmencie naglowka -----------------------------
   Ten sam mechanizm co .tecza i .pomarancz — kolor wlewa sie w same litery
   przez background-clip:text. Odcienie sa te, ktorych strona juz uzywa:
   #0071e3 to akcent wersji warsztatowej, #3d94f6 jego jasniejszy wariant
   (--accent-hi), a ciemniejszy poczatek pilnuje kontrastu na bialym tle.
   Starsze przegladarki tej sztuczki nie umieja i pokazalyby przezroczysty,
   czyli niewidoczny tekst, dlatego zwykly kolor stoi normalnie, a
   przezroczystosc wchodzi dopiero w @supports. */
.niebieski{color:#0071e3}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .niebieski{
    background:linear-gradient(100deg,#0057b8 0%,#0071e3 42%,#3d94f6 100%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
  }
}

/* --- Przejazd swiatla po naglowku hero -------------------------------------
   Litery dostaja gradient przez background-clip:text, tak jak .tecza, tylko
   ten gradient jest DUZO szerszy od napisu (320%) i wolno sie po nim przesuwa.
   Efekt: przez ciemny tekst raz na kilka sekund przechodzi cieply rozblysk.
   Wszystko dzieje sie na background-position, wiec przegladarka nie przelicza
   ukladu strony — animacja nie rusza niczego poza malowaniem.
   Pasmo swiatla zajmuje okolo jednej trzeciej szerokosci napisu: wezsze gubi
   sie w literach, szersze rozjasnia caly wyraz naraz i przestaje wygladac
   jak przejazd. */
.swiatlo{color:#1d1d1f}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .swiatlo{
    background:linear-gradient(100deg,
      #1d1d1f  0%,
      #1d1d1f 39%,
      #6b4526 45%,
      #ff9a3c 50%,
      #6b4526 55%,
      #1d1d1f 61%,
      #1d1d1f 100%);
    background-size:320% 100%;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
    animation:swiatlo-przejazd 4.5s linear infinite;
  }
}
/* Rozblysk jedzie tylko przez pierwsze 60% cyklu, reszta to postoj — inaczej
   swiatlo lata bez przerwy i zamiast subtelnosci robi sie migotanie.
   Na obu koncach pasmo jest poza napisem, wiec skok do poczatku jest
   niewidoczny. */
@keyframes swiatlo-przejazd{
  0%   {background-position:88% 0}
  60%  {background-position:12% 0}
  100% {background-position:12% 0}
}
@media(prefers-reduced-motion:reduce){
  .swiatlo{animation:none;background-position:12% 0}
}