/* ==========================================================================
   AMPsilo 3.0 — system designu
   Szata graficzna z pierwszej wersji serwisu (granat, cyjan, miękkie karty
   z poświatą) połączona z liniowymi ikonami i animowanym schematem z wersji
   drugiej. Jeden plik, zero zależności zewnętrznych.
   ========================================================================== */

:root{
  /* ---------- kolory bazowe ---------- */
  --bg:           #080F1C;
  --bg-2:         #0C1526;
  --surface:      #111D33;
  --surface-2:    #16253E;
  --surface-3:    #1C2F4C;
  --line:         #1E3352;
  --line-soft:    #16263F;

  --text:         #E8F0FA;
  --text-2:       #9AAEC8;
  --text-3:       #6D82A0;

  --accent:       #22D3EE;        /* cyjan — energia elektryczna */
  --accent-2:     #3B82F6;        /* niebieski — sieć */
  --accent-ink:   #04121B;        /* tekst na akcencie */
  --accent-dim:   rgba(34,211,238,.12);
  --accent-line:  rgba(34,211,238,.42);

  /* ---------- kolory funkcyjne diagramu ---------- */
  --grid-c:       #3B82F6;   /* sieć */
  --bess-c:       #22D3EE;   /* magazyn */
  --pv-c:         #34D399;   /* fotowoltaika */
  --chp-c:        #F59E0B;   /* kogeneracja */
  --load-c:       #E8F0FA;   /* odbiorniki */
  --warn:         #F87171;
  --heat:         #F59E0B;
  --heat-dim:     rgba(245,158,11,.12);
  --green:        #34D399;
  --green-dim:    rgba(52,211,153,.12);

  /* ---------- geometria ---------- */
  --r:            11px;
  --r-sm:         9px;
  --r-lg:         18px;
  --maxw:         1200px;
  --gutter:       clamp(18px, 4vw, 36px);
  --hdr:          68px;

  --shadow:       0 18px 40px -18px rgba(0,0,0,.75);
  --shadow-soft:  0 10px 26px -16px rgba(0,0,0,.7);
  --glow:         0 10px 26px -12px rgba(34,211,238,.8);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  color-scheme: dark;
}

/* ------------------------------------------------------------- reset */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr) + 16px); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
}

body{
  margin:0;
  background:var(--bg);
  background-image:
    radial-gradient(900px 500px at 15% -10%, rgba(34,211,238,.10), transparent 60%),
    radial-gradient(800px 480px at 100% 0%, rgba(59,130,246,.10), transparent 55%);
  background-attachment:fixed;
  color:var(--text);
  font-family:var(--font);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
button{ font:inherit; color:inherit; }
hr{ border:0; border-top:1px solid var(--line); margin:36px 0; }

h1,h2,h3,h4{ color:var(--text); font-weight:700; line-height:1.2; letter-spacing:-.02em; margin:0 0 .5em; }
h1{ font-size:clamp(2rem, 1.3rem + 3.2vw, 3.35rem); }
h2{ font-size:clamp(1.55rem, 1.15rem + 1.8vw, 2.35rem); }
h3{ font-size:clamp(1.15rem, 1rem + .7vw, 1.4rem); }
h4{ font-size:1.02rem; }
p{ margin:0 0 1em; }
strong,b{ color:#fff; font-weight:650; }
small{ font-size:.85rem; }

::selection{ background:rgba(34,211,238,.28); color:#fff; }
:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:6px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--accent); color:var(--accent-ink);
  padding:12px 20px; font-weight:650; border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{ left:0; }
.vh{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ------------------------------------------------------------- layout */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.sec{ padding-block:clamp(48px, 7vw, 92px); }
.sec--sm{ padding-block:clamp(32px, 4.5vw, 56px); }
.sec--line{ border-top:1px solid var(--line-soft); }
.sec--panel{
  background:linear-gradient(180deg, transparent, rgba(17,29,51,.55) 10%, rgba(17,29,51,.55) 90%, transparent);
}

/* Bez min-width:0 element siatki nie skurczy się poniżej szerokości swojej
   zawartości (np. tabeli) i wypycha stronę w poziomie na wąskich ekranach. */
.grid{ display:grid; gap:22px; }
.grid > *, .calc > *, .hero__in > *{ min-width:0; }
@media (min-width:640px){ .g2{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:640px){ .g3{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .g3{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:640px){ .g4{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .g4{ grid-template-columns:repeat(4,1fr); } }
.gap{ gap:20px; }
.gap-lg{ gap:32px; }

/* ------------------------------------------------- etykiety sekcji */
.tag{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 15px; border-radius:999px;
  background:var(--accent-dim); border:1px solid var(--accent-line);
  font-size:.74rem; font-weight:650;
  letter-spacing:.11em; text-transform:uppercase; color:var(--accent);
  margin-bottom:18px;
}
.tag--mute{ color:var(--text-2); background:var(--surface); border-color:var(--line); }

.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

.head{ max-width:66ch; margin-bottom:clamp(26px,3.4vw,44px); }
.head p{ color:var(--text-2); font-size:1.04rem; margin-bottom:0; }
.lead{ font-size:clamp(1.04rem,.98rem + .34vw,1.2rem); color:var(--text-2); }

/* ------------------------------------------------------------- header */
.hdr{
  position:sticky; top:0; z-index:120;
  background:rgba(8,15,28,.82);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.hdr__in{ display:flex; align-items:center; gap:18px; min-height:var(--hdr); }
.logo{ display:flex; align-items:center; gap:11px; color:var(--text); }
.logo:hover{ text-decoration:none; }
.logo svg{ width:30px; height:30px; flex:0 0 auto; color:var(--accent); }
.logo__t{ font-size:1.12rem; font-weight:800; letter-spacing:-.02em; }
.logo__t span{ color:var(--accent); }

.nav{ margin-left:auto; }
.nav__l{ display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0; }
/* :not(.btn) jest konieczne — bez tego reguła nawigacji ma wyższą swoistość niż
   .btn--pri i przycisk w nagłówku dostaje szary tekst zamiast ciemnego na akcencie. */
.nav__l > li > a:not(.btn){
  display:block; padding:9px 13px; border-radius:var(--r-sm);
  color:var(--text-2); font-size:.94rem; font-weight:550;
}
.nav__l > li > a:not(.btn):hover{ color:var(--text); background:var(--surface-2); text-decoration:none; }
.nav__l > li > a:not(.btn)[aria-current="page"]{ color:var(--accent); background:var(--accent-dim); }

.burger{
  margin-left:auto; display:none; align-items:center; gap:9px;
  background:var(--surface); border:1px solid var(--line); color:var(--text);
  border-radius:var(--r-sm); padding:9px 13px; cursor:pointer; font-size:.88rem;
}
.burger svg{ width:16px; height:16px; }
@media (max-width:1060px){
  .burger{ display:inline-flex; }
  .nav{
    position:fixed; inset:var(--hdr) 0 auto 0; margin:0;
    background:var(--bg-2); border-bottom:1px solid var(--line);
    padding:14px var(--gutter) 24px;
    max-height:calc(100dvh - var(--hdr)); overflow-y:auto;
    box-shadow:var(--shadow);
  }
  .nav[hidden]{ display:none; }
  .nav__l{ flex-direction:column; align-items:stretch; gap:2px; }
  .nav__l > li > a:not(.btn){ padding:13px 12px; font-size:1rem; border-bottom:1px solid var(--line-soft); border-radius:0; }
  .nav .btn{ margin-top:16px; justify-content:center; width:100%; }
}

/* ------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 22px; border-radius:var(--r);
  font-size:.97rem; font-weight:650; line-height:1.2; letter-spacing:-.01em;
  border:1px solid transparent; cursor:pointer; text-align:center;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover{ text-decoration:none; transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn svg{ width:16px; height:16px; flex:0 0 auto; }
.btn--pri{
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:var(--accent-ink); box-shadow:var(--glow);
}
.btn--pri:hover{ box-shadow:0 14px 32px -12px rgba(34,211,238,1); }
.btn--sec{ background:var(--surface); color:var(--text); border-color:var(--line); }
.btn--sec:hover{ border-color:var(--accent); color:var(--accent); }
.btn--heat{ background:linear-gradient(135deg,var(--heat),#EA580C); color:#1B0F02; box-shadow:0 10px 26px -12px rgba(245,158,11,.8); }
.btn--sm{ padding:9px 16px; font-size:.9rem; border-radius:var(--r-sm); }
.btn--blk{ width:100%; }
.btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }

.lnk{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.92rem; font-weight:600; color:var(--accent);
}
.lnk svg{ width:14px; height:14px; transition:transform .15s; }
.lnk:hover{ text-decoration:none; }
.lnk:hover svg{ transform:translateX(3px); }

/* ------------------------------------------------------------- karty */
.cards{ display:grid; gap:22px; }
.card{
  padding:clamp(20px,2.4vw,28px);
  background:linear-gradient(180deg, var(--surface), var(--bg-2));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-soft);
  display:flex; flex-direction:column;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.card__ico{
  width:46px; height:46px; border-radius:13px; margin-bottom:17px;
  display:grid; place-items:center; flex:0 0 auto;
  background:var(--accent-dim); border:1px solid var(--accent-line);
  color:var(--accent);
}
.card__ico svg{ width:23px; height:23px; }
.card__ico--heat{ background:var(--heat-dim); border-color:rgba(245,158,11,.32); color:var(--heat); }
.card__ico--green{ background:var(--green-dim); border-color:rgba(52,211,153,.32); color:var(--green); }
.card h3{ margin-bottom:.45em; }
.card p{ color:var(--text-2); font-size:.95rem; }
.card p:last-child{ margin-bottom:0; }
.card .lnk{ margin-top:auto; padding-top:18px; }
a.card:hover{ text-decoration:none; border-color:var(--accent-line); transform:translateY(-3px); box-shadow:var(--shadow); }

.card__idx{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.12em;
  color:var(--accent); margin-bottom:13px; display:block;
}

.box{
  border:1px solid var(--line);
  background:linear-gradient(180deg, var(--surface), var(--bg-2));
  padding:clamp(20px,2.4vw,28px); border-radius:var(--r-lg);
  box-shadow:var(--shadow-soft);
}
.box h3{ margin-bottom:.5em; }
.box p{ color:var(--text-2); }
.box p:last-child{ margin-bottom:0; }
.box--accent{
  border-color:var(--accent-line);
  background:linear-gradient(180deg, rgba(34,211,238,.10), rgba(12,21,38,.6) 72%);
}

/* ------------------------------------------------------------- hero */
.hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--line-soft); }
.hero__in{ display:grid; gap:clamp(30px,4vw,52px); padding-block:clamp(44px,6vw,86px) clamp(38px,5vw,70px); }
@media (min-width:1020px){ .hero__in{ grid-template-columns:1.02fr .98fr; align-items:center; } }
.hero h1{ margin-bottom:.35em; }
.hero h1 em{ font-style:normal; display:block; color:var(--accent); }
.hero .lead{ max-width:52ch; }

.hero__eq{
  display:flex; align-items:center; gap:clamp(14px,2vw,26px); flex-wrap:wrap;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(135deg, var(--surface), var(--bg-2));
  box-shadow:var(--shadow-soft);
  padding:20px 24px; margin:30px 0 6px;
}
.hero__eq b{ font-family:var(--mono); font-size:clamp(1.25rem,1rem + 1vw,1.7rem); color:var(--text); letter-spacing:-.02em; }
.hero__eq b.is-a{ color:var(--accent); }
.hero__eq span{ font-size:.76rem; color:var(--text-3); display:block; letter-spacing:.08em; text-transform:uppercase; margin-top:3px; }
.hero__eq i{ font-style:normal; color:var(--text-3); font-size:1.3rem; }

.specline{
  display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:16px;
  font-size:.82rem; color:var(--text-2); letter-spacing:.02em;
}
.specline span{ display:inline-flex; align-items:center; gap:9px; }
.specline span::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--accent-dim); border:1px solid var(--accent-line); flex:0 0 auto;
}

.fineprint{ font-size:.82rem; color:var(--text-3); margin-top:22px; max-width:60ch; }

/* ------------------------------------------------------------- „W skrócie” */
.tldr{
  border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--r-sm);
  background:linear-gradient(90deg, var(--accent-dim), rgba(17,29,51,.5) 34%);
  padding:22px 26px; margin-bottom:clamp(26px,3.4vw,42px);
}
.tldr h2{
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin-bottom:.9em; font-weight:700;
}
.tldr p{ color:var(--text-2); font-size:.97rem; margin-bottom:0; }
.tldr p + p{ margin-top:.7em; }

/* ------------------------------------------------------------- liczby */
.kpis{ display:grid; gap:14px; grid-template-columns:repeat(2,1fr); }
@media (min-width:900px){ .kpis{ grid-template-columns:repeat(4,1fr); } }
.kpi{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:17px 19px;
}
.kpi b{ display:block; font-family:var(--mono); font-size:1.5rem; color:var(--text); letter-spacing:-.03em; line-height:1.15; }
.kpi b.is-a{ color:var(--accent); }
.kpi span{ display:block; font-size:.84rem; color:var(--text-2); margin-top:5px; }

/* ------------------------------------------------- równanie 40+110=150 */
.eq{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:760px){ .eq{ grid-template-columns:1fr auto 1fr auto 1fr; align-items:stretch; } }
.eq__c{
  background:linear-gradient(180deg, var(--surface), var(--bg-2));
  border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-soft);
  padding:clamp(22px,3vw,34px); text-align:center;
}
.eq__c b{ display:block; font-family:var(--mono); font-size:clamp(1.9rem,1.3rem + 2.2vw,3rem); letter-spacing:-.035em; color:var(--text); line-height:1; }
.eq__c.is-a{ border-color:var(--accent-line); }
.eq__c.is-a b{ color:var(--accent); }
.eq__c span{ display:block; font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; color:var(--text-3); margin-top:12px; }
.eq__op{ display:grid; place-items:center; padding:4px 10px; font-family:var(--mono); font-size:1.6rem; color:var(--text-3); }

/* ------------------------------------------------------------- tabele */
.tbl{
  border:1px solid var(--line); background:var(--surface);
  border-radius:var(--r); overflow-x:auto; max-width:100%;
  -webkit-overflow-scrolling:touch; box-shadow:var(--shadow-soft);
}
table{ width:100%; border-collapse:collapse; min-width:480px; font-size:.94rem; }
.tbl--narrow table{ min-width:0; }
caption{ text-align:left; padding:18px 20px 4px; color:var(--text-2); font-size:.86rem; }
th,td{ padding:13px 20px; text-align:left; border-bottom:1px solid var(--line-soft); vertical-align:top; }
thead th{
  background:var(--surface-2); color:var(--text);
  font-size:.78rem; letter-spacing:.07em; text-transform:uppercase; font-weight:650;
}
tbody th{ color:var(--text-2); font-weight:550; }
tbody tr:last-child td, tbody tr:last-child th{ border-bottom:0; }
td b{ color:#fff; }
td .num{ color:var(--accent); }

/* ------------------------------------------------------------- listy */
.chk{ list-style:none; padding:0; margin:0 0 1em; display:grid; gap:11px; }
.chk li{ position:relative; padding-left:30px; color:var(--text-2); font-size:.95rem; }
.chk li::before{
  content:""; position:absolute; left:0; top:.48em;
  width:17px; height:17px; border-radius:50%;
  background:var(--accent-dim); border:1px solid var(--accent-line);
  box-shadow:inset 0 0 0 3px var(--bg);
}
.chk--warn li::before{ background:rgba(248,113,113,.14); border-color:rgba(248,113,113,.5); }
.chk--heat li::before{ background:var(--heat-dim); border-color:rgba(245,158,11,.5); }

/* proces 01..10 */
.steps{ display:grid; gap:14px; }
@media (min-width:640px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .steps{ grid-template-columns:repeat(5,1fr); } }
.step{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:20px;
}
.step b{ display:block; font-family:var(--mono); font-size:.76rem; letter-spacing:.12em; color:var(--accent); margin-bottom:10px; }
.step h3{ font-size:.98rem; margin-bottom:.4em; }
.step p{ font-size:.87rem; color:var(--text-2); margin:0; }

/* ------------------------------------------------------------- FAQ */
.faq{ display:grid; gap:12px; }
.faq details{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden;
}
.faq details[open]{ border-color:var(--accent-line); }
.faq summary{
  cursor:pointer; padding:17px 54px 17px 21px; position:relative;
  list-style:none; color:var(--text); font-weight:600; font-size:.99rem;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:22px; top:50%; width:11px; height:11px;
  border-right:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:translateY(-70%) rotate(45deg); transition:transform .18s;
}
.faq details[open] summary::after{ transform:translateY(-30%) rotate(-135deg); }
.faq summary:hover{ background:var(--surface-2); }
.faq .a{ padding:0 54px 19px 21px; color:var(--text-2); font-size:.95rem; }
.faq .a p:last-child{ margin-bottom:0; }

/* ------------------------------------------------------------- diagram */
.diag{
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(180deg, var(--surface), var(--bg-2));
  box-shadow:var(--shadow); overflow:hidden;
}
.diag__bar{
  display:flex; flex-wrap:wrap; gap:10px; padding:16px clamp(14px,2vw,22px) 0;
}
.mode{
  flex:1 1 150px;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r); cursor:pointer;
  padding:12px 15px; text-align:left; color:var(--text-2);
  font-size:.8rem; font-weight:650; letter-spacing:.09em; text-transform:uppercase;
  transition:background .15s, color .15s, border-color .15s;
}
.mode:hover{ color:var(--text); border-color:var(--text-3); }
.mode[aria-pressed="true"]{ background:var(--accent-dim); border-color:var(--accent-line); color:var(--accent); }
.mode small{ display:block; font-size:.76rem; letter-spacing:0; text-transform:none; color:var(--text-3); margin-top:4px; font-weight:400; }
.mode[aria-pressed="true"] small{ color:var(--text-2); }

.diag__stage{ padding:clamp(14px,2vw,26px); }
.diag__svg{ width:100%; height:auto; display:block; }
.diag__legend{
  display:flex; flex-wrap:wrap; gap:10px 22px; padding:0 clamp(14px,2vw,26px) 18px;
  font-size:.82rem; color:var(--text-2); letter-spacing:.02em;
}
.diag__legend span{ display:inline-flex; align-items:center; gap:8px; }
.diag__legend i{ width:20px; height:3px; border-radius:2px; display:inline-block; }

.diag__out{
  display:grid; gap:12px; grid-template-columns:repeat(2,1fr);
  padding:0 clamp(14px,2vw,26px) clamp(14px,2vw,22px);
}
@media (min-width:1000px){ .diag__out{ grid-template-columns:repeat(4,1fr); } }
.ro{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r); padding:14px 17px; }
.ro span{ display:block; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); }
.ro b{ display:block; font-family:var(--mono); font-size:1.3rem; color:var(--text); letter-spacing:-.02em; margin-top:5px; }
.ro b.is-a{ color:var(--accent); }
.ro b.is-g{ color:var(--grid-c); }
.diag__note{
  padding:14px clamp(14px,2vw,26px); border-top:1px solid var(--line-soft);
  font-size:.84rem; color:var(--text-3); margin:0;
}

/* ------------------------------------------------------------- formularze */
.field{ margin-bottom:18px; }
.field > label{ display:block; font-size:.88rem; font-weight:600; color:var(--text); margin-bottom:7px; }
.field .u{ font-family:var(--mono); font-size:.78rem; color:var(--text-3); font-weight:400; }
.field .hint{ display:block; font-size:.8rem; color:var(--text-3); margin-top:7px; }
.req{ color:var(--accent); }

input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
  width:100%; padding:12px 14px;
  background:var(--bg); color:var(--text);
  border:1px solid var(--line); border-radius:var(--r-sm);
  font-family:inherit; font-size:1rem;
  transition:border-color .15s, box-shadow .15s;
}
input[type=number]{ font-family:var(--mono); }
input:hover,select:hover,textarea:hover{ border-color:var(--surface-3); }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }
textarea{ min-height:140px; resize:vertical; }
select{
  appearance:none; padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%239AAEC8' stroke-width='1.5' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}

.cb{ display:flex; gap:11px; align-items:flex-start; margin-bottom:16px; font-size:.86rem; color:var(--text-2); }
.cb input{ margin-top:.25em; width:16px; height:16px; accent-color:var(--accent); flex:0 0 auto; }
.cb a{ text-decoration:underline; }

.field--err input,.field--err select,.field--err textarea{ border-color:var(--warn); }
.err{ display:block; color:var(--warn); font-size:.82rem; margin-top:6px; }

.status{ margin-top:18px; padding:14px 16px; border-radius:var(--r-sm); font-size:.92rem; display:none; }
.status.ok{ display:block; background:var(--accent-dim); border:1px solid var(--accent-line); color:var(--text); }
.status.bad{ display:block; background:rgba(248,113,113,.1); border:1px solid rgba(248,113,113,.4); color:#FBD5D5; }
.hp{ position:absolute!important; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ------------------------------------------------------------- kalkulator */
.calc{
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(180deg, var(--surface), var(--bg-2));
  box-shadow:var(--shadow); overflow:hidden;
}
.calc__steps{ display:flex; gap:10px; padding:16px clamp(16px,2.4vw,26px) 0; flex-wrap:wrap; }
.calc__steps div{
  flex:1 1 150px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--r);
  padding:11px 15px;
  font-size:.78rem; font-weight:650; letter-spacing:.08em; text-transform:uppercase; color:var(--text-2);
}
.calc__steps div[data-on]{ background:var(--accent-dim); border-color:var(--accent-line); color:var(--accent); }
.calc__steps b{ font-weight:650; }
.calc__body{ padding:clamp(22px,3vw,34px); }
.calc__panel[hidden]{ display:none; }
.calc__nav{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }

.calc__res{ display:grid; gap:14px; margin-bottom:26px; }
@media (min-width:700px){ .calc__res{ grid-template-columns:1.2fr 1fr 1fr; } }
.calc__res > div{
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r); padding:20px 22px;
}
.calc__res > div.is-a{ border-color:var(--accent-line); background:linear-gradient(180deg, var(--accent-dim), var(--surface-2) 70%); }
.calc__res span{ display:block; font-size:.74rem; letter-spacing:.09em; text-transform:uppercase; color:var(--text-3); margin-bottom:8px; }
.calc__res b{ display:block; font-family:var(--mono); font-size:clamp(1.5rem,1.1rem + 1.4vw,2.1rem); letter-spacing:-.03em; color:var(--text); line-height:1.05; }
.calc__res .is-a b{ color:var(--accent); }
.calc__res em{ font-style:normal; font-size:.82rem; color:var(--text-3); display:block; margin-top:8px; }
/* Nazwa konfiguracji bywa długa (np. AMPsilo 1000 / 2000) — mniejszy stopień,
   żeby mieściła się w jednej linii. */
.calc__res .cfg b{ font-size:clamp(1.2rem, .95rem + .75vw, 1.6rem); }
.calc__res .cfg em{ font-family:var(--mono); color:var(--text-2); font-size:.8rem; white-space:nowrap; }
.calc__res .cfg em b{ display:inline; font-size:.8rem; color:var(--accent); }

.opts{ display:grid; gap:12px; }
@media (min-width:640px){ .opts{ grid-template-columns:repeat(2,1fr); } }
.opt{
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r);
  padding:15px 17px; display:flex; gap:12px; align-items:flex-start; cursor:pointer;
  font-size:.93rem; color:var(--text-2);
  transition:border-color .15s ease, background .15s ease;
}
.opt:hover{ border-color:var(--accent-line); }
.opt:has(input:checked){ border-color:var(--accent-line); background:linear-gradient(180deg, var(--accent-dim), var(--surface-2) 70%); }
.opt input{ margin-top:.25em; width:16px; height:16px; accent-color:var(--accent); flex:0 0 auto; }
.opt b{ display:block; color:var(--text); font-weight:650; }
.opt small{ display:block; color:var(--text-3); font-size:.82rem; margin-top:3px; }

/* wykres mocy before/after */
.chart{
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(180deg, var(--surface), var(--bg-2));
  box-shadow:var(--shadow-soft);
  padding:clamp(18px,2.4vw,26px);
}
.chart svg{ width:100%; height:auto; }
.chart figcaption{ font-size:.82rem; color:var(--text-3); margin-top:14px; }

/* ------------------------------------------- wizualizacja urządzenia */
.shot{ margin:0; }
.shot img{
  width:100%; display:block;
  border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow); background:var(--bg-2);
}
.shot figcaption{ font-size:.84rem; color:var(--text-3); margin-top:14px; max-width:64ch; }
.shot--split{ display:grid; gap:clamp(24px,3vw,40px); align-items:center; }
@media (min-width:900px){ .shot--split{ grid-template-columns:1.15fr .85fr; } }
.shot--split figcaption{ margin-top:0; }

/* ------------------------------------------------------------- CTA pas */
.cta{
  border:1px solid var(--accent-line); border-radius:var(--r-lg);
  background:
    radial-gradient(600px 300px at 12% 0%, rgba(34,211,238,.16), transparent 62%),
    linear-gradient(135deg, var(--surface), var(--bg-2));
  box-shadow:var(--shadow);
  padding:clamp(28px,4vw,52px);
}
.cta h2{ max-width:22ch; }
.cta p{ max-width:60ch; color:var(--text-2); }
.cta .btns{ margin-bottom:0; }

/* ------------------------------------------------------------- crumbs */
.crumbs{ padding-top:20px; font-size:.83rem; }
.crumbs ol{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; color:var(--text-3); }
.crumbs li + li::before{ content:"/"; margin-right:8px; color:var(--line); }
.crumbs a{ color:var(--text-3); }
.crumbs a:hover{ color:var(--accent); }

/* ------------------------------------------------------------- proza */
.prose{ max-width:74ch; }
.prose h2{ margin-top:1.9em; }
.prose h3{ margin-top:1.5em; }
.prose p{ color:var(--text-2); }
.prose ul,.prose ol{ padding-left:20px; color:var(--text-2); }
.prose li{ margin-bottom:.45em; }
.prose .tbl{ margin:1.6em 0; }
.prose .box{ margin:1.7em 0; }
.prose code{ font-family:var(--mono); font-size:.88em; background:var(--surface-2); padding:2px 6px; border-radius:5px; color:var(--text); }

/* ------------------------------------------------------------- footer */
.ftr{
  border-top:1px solid var(--line); background:var(--bg-2);
  padding-block:clamp(40px,5vw,64px) 24px; margin-top:clamp(48px,6vw,88px);
}
.ftr__g{ display:grid; gap:32px; }
@media (min-width:800px){ .ftr__g{ grid-template-columns:1.7fr 1fr 1fr 1.1fr; } }
.ftr h4{ font-size:.76rem; letter-spacing:.13em; text-transform:uppercase; color:var(--text-3); margin-bottom:16px; font-weight:700; }
.ftr ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.ftr a{ color:var(--text-2); font-size:.92rem; }
.ftr a:hover{ color:var(--accent); }
.ftr p{ color:var(--text-2); }
.ftr address{ font-style:normal; color:var(--text-2); font-size:.92rem; line-height:1.8; }
.ftr__legal{
  border-top:1px solid var(--line-soft); margin-top:36px; padding-top:22px;
  display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:space-between;
  font-size:.8rem; color:var(--text-3);
}
.ftr__legal p{ margin:0; max-width:74ch; color:var(--text-3); }

/* ------------------------------------------------------------- cookie */
.ck{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:200;
  background:linear-gradient(180deg, var(--surface), var(--bg-2));
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:22px; max-width:540px; box-shadow:0 24px 60px -20px #000;
}
.ck[hidden]{ display:none; }
@media (min-width:640px){ .ck{ left:auto; right:24px; bottom:24px; } }
.ck h2{ font-size:1.05rem; margin-bottom:.45em; }
.ck p{ font-size:.87rem; color:var(--text-2); margin-bottom:16px; }
.ck__b{ display:flex; flex-wrap:wrap; gap:9px; }
.ck__p{ border-top:1px solid var(--line); margin-top:18px; padding-top:16px; display:grid; gap:14px; }
.ck__p[hidden]{ display:none; }
.ck__o{ display:flex; gap:11px; align-items:flex-start; font-size:.85rem; color:var(--text-2); }
.ck__o input{ margin-top:.2em; width:16px; height:16px; accent-color:var(--accent); }
.ck__o b{ display:block; color:var(--text); font-size:.9rem; font-weight:650; }

/* ------------------------------------------------------------- asystent */
.as-fab{
  position:fixed; right:18px; bottom:18px; z-index:150;
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 18px; border:1px solid var(--accent-line); cursor:pointer;
  background:linear-gradient(135deg, rgba(34,211,238,.18), rgba(59,130,246,.16));
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:var(--text);
  font-size:.88rem; font-weight:600; border-radius:999px;
  box-shadow:0 12px 30px -12px rgba(34,211,238,.6);
  transition:transform .15s ease, box-shadow .15s ease;
}
.as-fab:hover{ transform:translateY(-2px); box-shadow:0 16px 36px -12px rgba(34,211,238,.8); }
.as-fab svg{ width:16px; height:16px; color:var(--accent); }
.as-fab[hidden]{ display:none; }
/* UWAGA: baner cookie i okno asystenta nie mogą być widoczne jednocześnie —
   na telefonie zasłaniają się nawzajem. */
:root[data-ck-visible] .as-fab, :root[data-ck-visible] .as{ display:none!important; }

.as{
  position:fixed; z-index:155; inset:16px;
  display:flex; flex-direction:column;
  background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:0 34px 80px -20px #000;
}
.as[hidden]{ display:none; }
@media (min-width:640px){ .as{ inset:auto 20px 20px auto; width:390px; height:min(600px, calc(100dvh - 40px)); } }
.as__h{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); background:var(--surface); }
.as__h svg{ width:22px; height:22px; color:var(--accent); flex:0 0 auto; }
.as__h b{ display:block; font-size:.95rem; color:var(--text); font-weight:700; }
.as__h span{ font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:var(--text-3); }
.as__x{ margin-left:auto; background:none; border:0; color:var(--text-3); cursor:pointer; padding:6px 8px; line-height:1; font-size:1.3rem; }
.as__x:hover{ color:var(--text); }
.as__log{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; }
.m{ max-width:90%; padding:11px 14px; font-size:.9rem; line-height:1.55; border-radius:var(--r); }
.m--b{ align-self:flex-start; background:var(--surface); border:1px solid var(--line); color:var(--text-2); }
.m--u{ align-self:flex-end; background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:var(--accent-ink); font-weight:600; }
.m p{ margin:0 0 .6em; }
.m p:last-child{ margin-bottom:0; }
.m a{ text-decoration:underline; }
.m--u a{ color:var(--accent-ink); }
.m--t{ display:flex; gap:5px; align-items:center; }
.m--t i{ width:6px; height:6px; border-radius:50%; background:var(--text-3); animation:bl 1.2s infinite; }
.m--t i:nth-child(2){ animation-delay:.2s }
.m--t i:nth-child(3){ animation-delay:.4s }
@keyframes bl{ 0%,60%,100%{opacity:.25} 30%{opacity:1} }
.as__chips{ display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 12px; }
.as__chips button{
  background:var(--surface); border:1px solid var(--line); color:var(--text-2);
  padding:7px 13px; font-size:.8rem; cursor:pointer; border-radius:999px;
}
.as__chips button:hover{ border-color:var(--accent); color:var(--accent); }
.as__f{ display:flex; gap:9px; padding:12px 14px; border-top:1px solid var(--line); background:var(--surface); }
.as__f input{ flex:1; padding:10px 12px; font-size:.92rem; }
.as__f button{
  background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:var(--accent-ink);
  border:0; padding:0 17px; font-weight:650; cursor:pointer; border-radius:var(--r-sm);
}
.as__n{ padding:0 16px 10px; font-size:.72rem; color:var(--text-3); text-align:center; background:var(--surface); margin:0; }

/* sticky CTA na telefonie */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:145;
  background:rgba(8,15,28,.94); backdrop-filter:blur(10px);
  border-top:1px solid var(--line); padding:10px var(--gutter);
  display:none;
}
@media (max-width:640px){
  .sticky-cta{ display:block; }
  .as-fab{ bottom:72px; }
  .ck{ bottom:72px; }
  body{ padding-bottom:64px; }
}

/* ------------------------------------------------------------- 404 */
.err-p{ text-align:center; padding-block:clamp(60px,10vw,120px); }
.err-p .c{ font-family:var(--mono); font-size:clamp(3.5rem,2.5rem + 7vw,7rem); color:var(--accent); line-height:1; letter-spacing:-.05em; }

@media print{
  .hdr,.ftr,.ck,.as,.as-fab,.sticky-cta,.btns,.cta{ display:none!important; }
  body{ background:#fff; color:#000; background-image:none; }
}