@font-face {
  font-family:Roboto;
  src:url('assets/fonts/roboto-latin.woff2') format('woff2');
  font-style:normal;
  font-weight:100 900;
  font-display:swap
}

@font-face {
  font-family:Roboto;
  src:url('assets/fonts/roboto-latin-ext.woff2') format('woff2');
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF
}

:root {
  --paper:#f8f7f3;
  --ink:#202524;
  --muted:#62706a;
  --red:#fa203a;
  --red-button:#e81933;
  --red-ink:#d51029;
  --red-dark:#dc122a;
  --green:#173f39;
  --green-link:#315b54;
  --line:#dedfd9;
  --white:#fff;
  --container:1288px;
  --gutter:clamp(24px,5.25vw,76px);
  --font:Roboto,Arial,sans-serif;
  --font-accent:Georgia,'Times New Roman',serif;
  --h1:clamp(64px,6.5vw,94px);
  --h2:44px;
  --radius:12px;
  --pill:999px;
  --section-space:48px;
  --gap:20px;
  --shadow:0 5px 20px rgb(20 46 38 / 2%)
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:24px
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased
}

a {
  color:inherit;
  text-decoration:none
}

button,input,textarea {
  font:inherit
}

button,a,input,textarea,summary {
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer
}

img {
  display:block;
  max-width:100%
}

p,h1,h2,h3 {
  margin:0
}

ul,ol {
  margin:0;
  padding:0;
  list-style:none
}

h2 {
  font-size:var(--h2);
  font-weight:650;
  letter-spacing:-2px;
  line-height:1.06
}

h3 {
  font-size:24px;
  line-height:1.2;
  letter-spacing:-.6px;
  font-weight:600
}

a,button,summary {
  touch-action:manipulation
}

:focus-visible {
  outline:3px solid var(--green-link);
  outline-offset:5px
}

.nis2 :focus-visible,.site-footer :focus-visible {
  outline-color:#fff
}

.container {
  max-width:calc(var(--container) + 2 * var(--gutter));
  padding-inline:var(--gutter);
  margin-inline:auto
}

.eyebrow {
  color:var(--red-ink);
  font-size:12px;
  font-weight:650;
  letter-spacing:2px;
  line-height:1.5;
  margin-bottom:22px
}

.muted {
  color:var(--muted);
  line-height:1.55
}

.section {
  padding-block:var(--section-space);
  border-bottom:1px solid var(--line)
}

.arrow {
  font-family:Arial,sans-serif;
  font-size:22px;
  font-weight:400;
  line-height:1
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  min-height:52px;
  padding:13px 30px;
  background:var(--red-button);
  border:1px solid transparent;
  border-radius:var(--pill);
  color:var(--white);
  font-size:14px;
  font-weight:650;
  line-height:1.3;
  transition:background .18s,transform .18s;
  white-space:nowrap
}

.button:hover {
  background:var(--red-dark);
  transform:translateY(-2px)
}

.button-outline {
  border-color:#7e8586;
  color:var(--ink);
  background:transparent
}

.button-outline:hover {
  background:#eeeee8
}

.button-light {
  background:var(--paper);
  color:var(--green-link);
  padding-inline:20px;
  font-size:13px;
  min-height:44px
}

.button-light:hover {
  background:#fff
}

.skip-link {
  position:fixed;
  top:12px;
  left:12px;
  z-index:20;
  padding:12px 20px;
  background:#fff;
  transform:translateY(-160%)
}

.skip-link:focus {
  transform:none
}

.site-header {
  position:relative;
  z-index:5
}

.header-inner {
  min-height:84px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:36px;
  position:relative
}

.header-inner:after {
  content:'';
  height:1px;
  background:var(--line);
  position:absolute;
  bottom:0;
  left:var(--gutter);
  right:var(--gutter)
}

.logo {
  width:146px;
  flex-shrink:0
}

.logo img {
  width:146px;
  height:44px;
  object-fit:contain
}

.main-nav {
  display:flex;
  align-items:center;
  gap:35px;
  font-size:13px;
  font-weight:550
}

.main-nav>a:not(.button):hover {
  color:var(--red)
}

.nav-contact {
  margin-left:130px;
  font-size:13px;
  min-height:46px
}

.menu-toggle {
  display:none
}

.hero {
  overflow:hidden
}

.hero-inner {
  position:relative;
  min-height:593px;
  padding-top:32px;
  padding-bottom:30px;
  display:flex;
  align-items:flex-start
}

.hero-copy {
  position:relative;
  z-index:2;
  width:530px;
  flex-shrink:0;
  pointer-events:none
}

.hero-copy a {
  pointer-events:auto
}

.hero .eyebrow {
  color:#676d6b;
  margin-bottom:7px;
  font-size:12px;
  font-weight:750;
  letter-spacing:1.7px
}

h1 {
  font-size:var(--h1);
  font-weight:800;
  line-height:.91;
  letter-spacing:-5.7px;
  color:#070b0b
}

h1>span {
  display:block
}

h1 .italic {
  font-family:var(--font-accent);
  font-style:italic;
  font-weight:400;
  letter-spacing:-5.4px;
  font-size:1.04em;
  line-height:.99
}

h1 .red-dot {
  color:var(--red);
  font-weight:800
}

.hero-description {
  max-width:445px;
  margin-top:20px;
  line-height:1.44;
  font-size:17px
}

.hero-actions {
  display:flex;
  gap:16px;
  margin-top:24px
}

.hero-actions .button {
  padding-inline:28px;
  gap:20px
}

.hero-art {
  position:absolute;
  width:880px;
  right:0;
  top:0;
  z-index:1
}

.hero-art > img {
  width:100%;
  height:auto;
  /* Grafika ma własny kanał alfa i odsłania jednolite tło strony. */
}

.split-section {
  display:grid;
  grid-template-columns:340px minmax(0,1fr);
  gap:52px
}

.section-intro>.muted {
  max-width:290px;
  margin-top:20px
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:15px;
  font-size:15px;
  font-weight:650;
  color:var(--green-link);
  margin-top:28px;
  text-decoration:underline;
  text-underline-offset:5px
}

.brand-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:13px;
  align-content:center
}

.brand-card {
  background:var(--white);
  border:1px solid #e0e2dc;
  border-radius:var(--radius);
  min-height:129px;
  padding:21px 20px;
  position:relative;
  box-shadow:var(--shadow);
  transition:transform .2s,border-color .2s
}

.brand-card:hover {
  transform:translateY(-3px);
  border-color:#a6b9b1
}

.brand-logo {
  height:49px;
  display:flex;
  align-items:center;
  margin-bottom:10px
}

.brand-logo img {
  max-height:48px;
  max-width:100%;
  width:auto;
  height:auto;
  object-fit:contain
}

.brand-logo span {
  font-size:31px;
  font-weight:750;
  letter-spacing:-1.2px
}

.brand-card p {
  font-size:14px;
  color:var(--muted);
  padding-right:8px
}

.brand-card>.arrow {
  position:absolute;
  right:16px;
  bottom:16px;
  color:var(--green-link);
  font-size:19px
}

.multigps .brand-logo img {
  max-width:174px
}

.emonit .brand-logo img {
  max-width:140px
}

.awisped .brand-logo img {
  max-width:195px
}

.vm6 .brand-logo img {
  max-width:172px
}

.kasy .brand-logo img {
  max-width:176px
}

.services {
  padding-top:43px;
  padding-bottom:46px
}

.services-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:28px
}

.services-heading>.muted {
  width:390px;
  max-width:32%;
  font-size:16px
}

.services-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px
}

.services-grid article {
  position:relative;
  border-top:1px solid var(--line);
  padding:21px 26px 20px 0;
  min-height:180px
}

.services-grid article+article {
  border-left:1px solid var(--line);
  padding-left:25px
}

.service-kicker {
  color:var(--red-ink);
  font-size:14px;
  letter-spacing:1.3px;
  font-weight:550;
  margin-bottom:10px
}

.services-grid .muted {
  font-size:15px;
  margin-top:10px;
  max-width:325px
}

.service-link {
  position:absolute;
  right:12px;
  top:21px;
  color:var(--green-link);
  padding:4px
}

.service-link .arrow {
  font-size:21px
}

.nis2 {
  background:linear-gradient(110deg,#e81933,#df112a);
  color:#fff;
  padding-block:39px 42px
}

.nis2-inner {
  display:grid;
  grid-template-columns:315px minmax(0,1fr);
  gap:49px;
  align-items:center
}

.nis2 .eyebrow {
  color:#fff;
  font-size:12px;
  margin-bottom:22px;
  white-space:nowrap
}

.nis2 h2 {
  font-size:39px;
  letter-spacing:-1.4px;
  line-height:1.03
}

.nis2 h2>span {
  display:block;
  font-size:60px;
  letter-spacing:-2.5px;
  margin-bottom:5px
}

.nis2-intro>p:not(.eyebrow) {
  font-size:14px;
  line-height:1.5;
  max-width:250px;
  margin:18px 0
}

.nis2-steps {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:13px;
  padding-top:36px
}

.nis2-steps li {
  border:1px solid rgb(255 255 255 / 26%);
  border-radius:var(--radius);
  padding:19px 15px 22px;
  min-height:199px
}

.step-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:14px;
  color:#fff
}

.step-arrow {
  display:grid;
  place-items:center;
  width:33px;
  height:33px;
  border:1px solid rgb(255 255 255 / 45%);
  border-radius:50%;
  font-size:17px
}

.nis2-steps h3 {
  font-size:19px;
  line-height:1.2;
  letter-spacing:-.2px;
  margin-top:25px;
  max-width:145px
}

.nis2-steps p {
  font-size:13px;
  line-height:1.45;
  margin-top:12px;
  color:#fff
}

.faq {
  padding-block:44px 42px
}

.faq .section-intro h2 {
  font-size:39px
}

.faq .section-intro>.muted {
  font-size:15px
}

.faq-list {
  border-top:1px solid var(--line);
  align-self:start
}

.faq-list details {
  border-bottom:1px solid var(--line)
}

summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  cursor:pointer;
  list-style:none;
  min-height:68px;
  padding:16px 0;
  color:#41534d;
  font-size:16px;
  font-weight:650
}

summary::-webkit-details-marker {
  display:none
}

.faq-icon {
  display:grid;
  place-items:center;
  width:29px;
  height:29px;
  flex-shrink:0;
  border:1px solid #cdd4ce;
  border-radius:50%;
  position:relative
}

.faq-icon:before,.faq-icon:after {
  content:'';
  background:#50635c;
  position:absolute;
  width:10px;
  height:1px
}

.faq-icon:after {
  transform:rotate(90deg)
}

details[open] .faq-icon:after {
  transform:none
}

details[open] summary {
  color:var(--green)
}

.faq-list details>p {
  max-width:740px;
  color:var(--muted);
  padding:0 44px 22px 0;
  font-size:16px;
  line-height:1.65
}

.contact {
  padding-block:49px 50px
}

.contact-inner {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center
}

.contact h2 {
  font-size:56px;
  letter-spacing:-2.5px;
  line-height:1.04
}

.contact h2 span {
  color:var(--red)
}

.contact-copy>.muted {
  margin-top:22px
}

.contact-links {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  margin-top:32px;
  color:var(--green-link);
  font-weight:650
}

.contact-links a {
  display:inline-flex;
  align-items:center;
  gap:11px
}

.contact-links a:hover {
  text-decoration:underline;
  text-underline-offset:4px
}

.contact-icon {
  width:35px;
  height:35px;
  border:1px solid #d8e0d7;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--red);
  font-size:18px
}

.contact-form {
  background:var(--white);
  padding:28px;
  border:1px solid #e0e2dc;
  border-radius:16px;
  box-shadow:var(--shadow)
}

.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px
}

.field {
  min-width:0;
  margin-bottom:17px
}

.field label {
  font-size:11px;
  font-weight:650;
  color:#52655b;
  display:block;
  margin-bottom:8px
}

input,textarea {
  display:block;
  width:100%;
  border:1px solid #d7ddd3;
  border-radius:6px;
  padding:12px 14px;
  font-size:14px;
  color:var(--ink);
  background:#fcfcf9;
  line-height:1.45
}

input::placeholder,textarea::placeholder {
  color:#737d75
}

textarea {
  min-height:83px;
  resize:vertical
}

input[aria-invalid=true],textarea[aria-invalid=true] {
  border-color:#b51a30
}

.field-error {
  font-size:12px;
  color:#b51a30;
  margin-top:6px
}

.form-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px
}

.form-bottom>p {
  font-size:11px;
  color:var(--muted);
  max-width:235px
}

.form-bottom .button {
  font-size:12px;
  min-height:44px;
  padding:11px 20px;
  gap:21px
}

.form-status {
  font-size:12px;
  color:#52655b;
  line-height:1.5;
  margin-top:14px
}

.form-status:empty {
  display:none
}

.form-availability { margin:0 0 20px; padding:12px 14px; border-radius:7px; background:#edf0e9; color:var(--green); font-size:13px; line-height:1.55; }
.form-privacy { margin:16px 0 0; font-size:12px; line-height:1.6; color:var(--muted); }
.form-privacy a { color:var(--green-link); text-decoration:underline; text-underline-offset:3px; }
.contact-form :disabled { cursor:not-allowed; opacity:.65; }

.consent-field { margin:4px 0 24px; padding-top:6px; }
.contact-form .consent-label { display:flex; align-items:flex-start; gap:12px; font-size:13px; font-weight:400; line-height:1.65; color:var(--ink); cursor:pointer; }
.contact-form .consent-label>span { min-width:0; }
.contact-form .consent-label input { appearance:auto; display:block; width:20px; height:20px; min-height:20px; flex:0 0 20px; padding:0; margin:2px 0 0; accent-color:var(--red-button); cursor:pointer; }
.contact-form .consent-label input[aria-invalid="true"] { outline:2px solid #b51a30; outline-offset:2px; }
.consent-required { margin:8px 0 0 32px; font-size:12px; font-weight:650; color:var(--muted); }
.consent-field .field-error { margin-left:32px; line-height:1.5; }

.button:disabled {
  cursor:wait;
  opacity:.65;
  transform:none
}

.site-footer {
  background:var(--green);
  color:#c6d9d2;
  padding-block:42px 28px;
  font-size:14px
}

.footer-top {
  display:flex;
  align-items:center;
  gap:26px;
  padding-bottom:28px;
  border-bottom:1px solid #33564e
}

.footer-logo {
  background:#fff;
  border-radius:5px;
  width:154px;
  padding:5px 9px;
  flex-shrink:0
}

.footer-logo img {
  width:136px;
  height:40px;
  object-fit:contain
}

.footer-top>p {
  font-size:18px;
  font-weight:550;
  color:#edf1ec
}

.footer-motto {
  margin-left:auto;
  font-size:12px;
  color:#b1c9bf
}

.footer-motto:before {
  content:'';
  display:inline-block;
  width:7px;
  height:7px;
  background:var(--red);
  border-radius:50%;
  margin-right:10px
}

.footer-grid {
  display:grid;
  grid-template-columns:1.1fr .85fr 1.07fr .85fr;
  gap:50px;
  padding:31px 0 35px
}

.footer-grid h2 {
  font-size:12px;
  letter-spacing:1.7px;
  line-height:1.4;
  margin-bottom:19px;
  font-weight:650;
  color:#b1c9bf
}

.footer-grid address {
  font-style:normal;
  line-height:1.8
}

.opening-hours {
  margin: 18px 0 0;
  line-height: 1.7;
}

.address-contact {
  margin-top:15px
}

.address-contact a {
  min-height:28px;
  display:block
}

.footer-grid li {
  margin-bottom:10px;
  line-height:1.4
}

.footer-grid small {
  display:block;
  font-size:10px;
  color:#aac2b8;
  margin-top:3px
}

.site-footer a:hover {
  color:#fff;
  text-decoration:underline;
  text-underline-offset:4px
}

.technical {
  margin-top:19px
}

.technical span {
  display:block;
  color:#adc5bc;
  font-size:12px
}

.footer-bottom {
  border-top:1px solid #33564e;
  padding-top:22px;
  display:flex;
  justify-content:space-between;
  gap:25px;
  font-size:11px;
  color:#adc5bc
}

.legal {
  display:flex;
  flex-wrap:wrap;
  gap:10px 24px;
  max-width:400px;
  justify-content:flex-end
}

.legal small {
  flex-basis:100%;
  font-size:10px;
  text-align:right
}

@media(min-width:1500px) {
  .hero-art {
    right:calc((100% - var(--container))/2 - 76px)
  }
}

@media(max-width:1200px) {
  :root {
    --h1:clamp(64px,6.5vw,90px);
    --h2:38px;
    --gutter:40px
  }
  .main-nav {
    gap:24px
  }
  .nav-contact {
    margin-left:30px
  }
  .hero-inner {
    min-height:550px
  }
  .hero-copy {
    width:470px
  }
  .hero-art {
    width:760px;
    right:-55px;
    top:14px
  }
  .hero-description {
    max-width:395px
  }
  .hero-actions {
    gap:10px
  }
  .hero-actions .button {
    padding-inline:19px;
    font-size:13px;
    gap:14px
  }
  .split-section {
    grid-template-columns:285px minmax(0,1fr);
    gap:28px
  }
  .brand-card {
    padding:17px 15px
  }
  .brand-logo img {
    max-width:100%!important;
    max-height:43px
  }
  .brand-logo span {
    font-size:27px
  }
  .brand-card p {
    font-size:12px
  }
  .nis2-inner {
    grid-template-columns:260px minmax(0,1fr);
    gap:28px
  }
  .nis2-steps li {
    padding:16px 12px
  }
  .nis2-steps h3 {
    font-size:18px
  }
  .contact h2 {
    font-size:49px
  }
  .contact-inner {
    gap:30px
  }
  .contact-links {
    gap:15px;
    font-size:14px
  }
  .contact-form {
    padding:22px
  }
  .footer-grid {
    gap:30px
  }
}

@media(max-width:900px) {
  :root {
    --gutter:32px;
    --h2:36px;
    --section-space:42px
  }
  .header-inner {
    min-height:78px;
    flex-wrap:wrap
  }
  .logo {
    width:130px
  }
  .logo img {
    width:130px
  }
  .main-nav {
    width:100%;
    display:flex;
    flex-wrap:wrap;
    padding-bottom:20px;
    gap:18px 26px
  }
  .nav-contact {
    margin-left:0
  }
  .js .main-nav {
    display:none;
    position:absolute;
    top:78px;
    left:var(--gutter);
    right:var(--gutter);
    width:auto;
    background:var(--paper);
    padding:22px;
    border:1px solid var(--line);
    border-radius:0 0 12px 12px;
    box-shadow:0 12px 24px #173f3912
  }
  .js .main-nav.is-open {
    display:grid;
    grid-template-columns:1fr 1fr
  }
  .js .menu-toggle {
    display:inline-flex;
    align-items:center;
    gap:10px;
    border:1px solid var(--line);
    border-radius:var(--pill);
    padding:10px 16px;
    background:transparent;
    font-size:14px;
    color:var(--green);
    min-height:44px
  }
  .menu-icon {
    width:17px;
    height:12px;
    border-top:1px solid currentColor;
    border-bottom:1px solid currentColor;
    position:relative
  }
  .menu-icon:after {
    content:'';
    position:absolute;
    top:5px;
    left:0;
    right:0;
    border-top:1px solid currentColor
  }
  .hero-inner {
    min-height:535px;
    padding-top:30px
  }
  .hero-copy {
    width:395px
  }
  h1 {
    font-size:70px;
    letter-spacing:-4.4px
  }
  h1 .italic {
    letter-spacing:-3.5px
  }
  .hero .eyebrow {
    font-size:10px;
    letter-spacing:1.25px
  }
  .hero-description {
    font-size:15px;
    max-width:320px
  }
  .hero-art {
    width:54%;
    right:0;
    top:105px
  }
  .hero-actions {
    gap:12px;
    flex-direction:column;
    align-items:flex-start;
    margin-top:20px
  }
  .hero-actions .button {
    min-height:45px;
    padding-inline:23px
  }
  .split-section {
    grid-template-columns:220px minmax(0,1fr);
    gap:30px
  }
  .brand-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px
  }
  .brand-card {
    min-height:119px
  }
  .brand-logo {
    height:42px
  }
  .section-intro>.muted {
    font-size:15px
  }
  .eyebrow {
    font-size:11px;
    letter-spacing:1.5px
  }
  .text-link {
    font-size:13px;
    gap:8px
  }
  .services-heading {
    align-items:flex-start;
    gap:28px
  }
  .services-heading h2 {
    font-size:34px
  }
  .services-heading>.muted {
    font-size:14px;
    max-width:32%
  }
  .services-grid {
    gap:14px
  }
  .services-grid article {
    padding-right:10px
  }
  .services-grid article+article {
    padding-left:15px
  }
  .services-grid h3 {
    font-size:21px
  }
  .service-kicker {
    font-size:11px;
    letter-spacing:1px
  }
  .services-grid .muted {
    font-size:14px
  }
  .service-link {
    right:0;
    top:15px
  }
  .nis2-inner {
    grid-template-columns:220px minmax(0,1fr);
    gap:30px
  }
  .nis2 .eyebrow {
    font-size:10px;
    letter-spacing:1.1px
  }
  .nis2 h2 {
    font-size:35px
  }
  .nis2 h2>span {
    font-size:55px
  }
  .nis2-steps {
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding-top:0
  }
  .nis2-steps li {
    min-height:175px
  }
  .nis2-steps h3 {
    margin-top:16px
  }
  .nis2-steps p {
    font-size:12px
  }
  .nis2-intro .button {
    font-size:12px;
    gap:10px;
    padding-inline:16px
  }
  .faq .section-intro h2 {
    font-size:34px
  }
  summary {
    font-size:14px;
    line-height:1.4
  }
  .contact-inner {
    grid-template-columns:1fr;
    gap:28px
  }
  .contact-copy {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 20px
  }
  .contact-copy .eyebrow {
    grid-column:1/-1
  }
  .contact-copy h2 {
    font-size:47px
  }
  .contact-copy>.muted {
    align-self:center;
    margin-top:0;
    font-size:15px
  }
  .contact-links {
    grid-column:1/-1;
    margin-top:23px;
    gap:26px
  }
  .contact-form {
    padding:26px
  }
  .footer-top {
    gap:20px;
    flex-wrap:wrap
  }
  .footer-top>p {
    font-size:16px
  }
  .footer-motto {
    display:none
  }
  .footer-grid {
    grid-template-columns:1fr 1fr;
    gap:30px 45px
  }
  .footer-bottom {
    font-size:10px
  }
}

@media(max-width:700px) {
  :root {
    --gutter:24px;
    --h2:36px;
    --section-space:37px
  }
  .header-inner {
    min-height:74px;
    gap:14px
  }
  .logo,.logo img {
    width:124px
  }
  .js .main-nav {
    top:74px;
    grid-template-columns:1fr
  }
  .js .main-nav.is-open {
    grid-template-columns:1fr
  }
  .main-nav>a {
    padding:6px
  }
  .main-nav>.button {
    padding:13px 22px
  }
  .hero-inner {
    display:block;
    min-height:0;
    padding-top:30px;
    padding-bottom:0
  }
  .hero-copy {
    width:100%
  }
  .hero .eyebrow {
    font-size:9.5px;
    letter-spacing:1.35px;
    margin-bottom:14px
  }
  h1 {
    font-size:clamp(55px,14.65vw,80px);
    line-height:.95;
    letter-spacing:-3.6px
  }
  h1 .italic {
    letter-spacing:-3px;
    line-height:1.03
  }
  .hero-description {
    max-width:360px;
    font-size:16px;
    margin-top:22px;
    line-height:1.5
  }
  .hero-actions {
    flex-direction:row;
    flex-wrap:wrap;
    gap:10px;
    margin-top:22px
  }
  .hero-actions .button {
    font-size:12px;
    min-height:45px;
    padding-inline:19px;
    gap:15px
  }
  .hero-art {
    position:relative;
    top:auto;
    right:auto;
    width:calc(100% + 48px);
    max-width:none;
    margin:19px -24px 0
  }
  .hero-art img {
    width:100%
  }
  .split-section {
    grid-template-columns:1fr;
    gap:26px
  }
  .section-intro>.muted {
    max-width:320px;
    margin-top:15px
  }
  .eyebrow {
    margin-bottom:18px;
    font-size:10px;
    letter-spacing:1.7px
  }
  .text-link {
    margin-top:18px;
    font-size:14px
  }
  .brand-grid {
    gap:10px
  }
  .brand-card {
    padding:15px 12px;
    min-height:120px
  }
  .brand-logo {
    height:42px;
    margin-bottom:8px
  }
  .brand-logo img {
    max-height:39px
  }
  .brand-logo span {
    font-size:25px
  }
  .brand-card p {
    font-size:12px;
    line-height:1.4;
    padding-right:10px
  }
  .brand-card>.arrow {
    font-size:17px;
    right:10px;
    bottom:12px
  }
  .services-heading {
    display:block;
    margin-bottom:25px
  }
  .services-heading h2 {
    font-size:33px;
    letter-spacing:-1.6px
  }
  .services-heading>.muted {
    max-width:320px;
    width:auto;
    font-size:15px;
    margin-top:18px
  }
  .services-grid {
    grid-template-columns:1fr;
    gap:0
  }
  .services-grid article,.services-grid article+article {
    border-left:0;
    padding:21px 27px 24px 0;
    min-height:0
  }
  .services-grid h3 {
    font-size:24px
  }
  .service-kicker {
    font-size:12px;
    margin-bottom:10px
  }
  .services-grid .muted {
    font-size:15px;
    margin-top:9px;
    max-width:310px
  }
  .service-link {
    right:2px;
    top:19px
  }
  .services {
    padding-bottom:14px
  }
  .nis2 {
    padding-block:36px
  }
  .nis2-inner {
    grid-template-columns:1fr;
    gap:28px
  }
  .nis2 .eyebrow {
    font-size:10px;
    letter-spacing:1.6px
  }
  .nis2 h2 {
    font-size:38px
  }
  .nis2 h2>span {
    font-size:59px
  }
  .nis2-intro>p:not(.eyebrow) {
    font-size:15px;
    max-width:290px
  }
  .nis2-intro .button {
    font-size:13px;
    gap:24px;
    padding-inline:22px
  }
  .nis2-steps {
    gap:10px
  }
  .nis2-steps li {
    padding:16px 14px;
    min-height:191px
  }
  .nis2-steps h3 {
    font-size:18px;
    margin-top:20px
  }
  .nis2-steps p {
    font-size:13px
  }
  .faq .section-intro h2 {
    font-size:36px
  }
  .faq-list details>p {
    font-size:15px;
    padding-right:10px
  }
  .faq-list summary {
    font-size:15px;
    min-height:78px;
    gap:14px
  }
  .contact-copy {
    display:block
  }
  .contact-copy h2 {
    font-size:43px;
    letter-spacing:-2px
  }
  .contact-copy>.muted {
    margin-top:18px;
    font-size:16px
  }
  .contact-links {
    gap:14px;
    margin-top:24px;
    flex-direction:column;
    font-size:16px
  }
  .contact-form {
    padding:22px 18px
  }
  .form-row {
    grid-template-columns:1fr;
    gap:0
  }
  .field {
    margin-bottom:16px
  }
  .field label {
    font-size:12px
  }
  input,textarea {
    font-size:16px;
    padding:12px
  }
  textarea {
    min-height:115px
  }
  .form-bottom {
    align-items:flex-start;
    flex-direction:column;
    gap:17px
  }
  .form-bottom>p {
    font-size:12px;
    max-width:none
  }
  .form-bottom .button {
    width:100%;
    font-size:14px;
    min-height:48px
  }
  .form-status {
    font-size:12px
  }
  .site-footer {
    padding-block:30px 24px
  }
  .footer-top {
    align-items:flex-start;
    gap:16px;
    flex-direction:column;
    padding-bottom:26px
  }
  .footer-top>p {
    font-size:16px
  }
  .footer-logo {
    width:143px
  }
  .footer-grid {
    gap:30px 22px;
    padding-block:28px
  }
  .footer-grid h2 {
    font-size:10px;
    letter-spacing:1.1px;
    margin-bottom:15px
  }
  .footer-grid address,.footer-grid li,.technical {
    font-size:12px;
    overflow-wrap:anywhere
  }
  .footer-grid li {
    margin-bottom:12px
  }
  .footer-grid small {
    font-size:10px
  }
  .footer-bottom {
    flex-direction:column;
    gap:18px;
    font-size:10px
  }
  .legal {
    justify-content:flex-start;
    gap:8px 20px
  }
  .legal small {
    text-align:left
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    transition:none!important;
    animation:none!important
  }
  .button:hover,.brand-card:hover {
    transform:none
  }
}

/* Jasne oryginalne warianty logo wymagają ciemnego podłoża. */
.emonit .brand-logo img {
  background:#111;
  padding:5px 8px;
  border-radius:2px;
  max-height:42px
}

.awisped .brand-logo img {
  background:#344740;
  padding:7px 9px;
  border-radius:3px;
  max-height:45px
}

@media(min-width:701px) and (max-width:900px) {
  h1 {
    font-size:62px;
    letter-spacing:-3.8px
  }
  .hero-copy {
    width:340px
  }
  .hero-description {
    max-width:300px
  }
  .hero-inner {
    min-height:540px
  }
  .hero-art {
    top:125px
  }
}

@media(min-width:1201px) {
  .main-nav {
    flex:1;
    margin-left:140px
  }
  .nav-contact {
    margin-left:auto
  }
  h1 {
    line-height:.88
  }
  h1 .italic {
    line-height:.95
  }
  h1>span {
    transform:scaleX(1.05);
    transform-origin:left
  }
  .site-header:before {
    content:'';
    position:absolute;
    top:0;
    left:calc(50% + 135px);
    width:255px;
    height:84px;
    background:url(assets/ribbon-top.webp) center/100% 100% no-repeat;
    /* Zostawiamy tylko wstęgę, bez tła wycinka w nagłówku. */
    clip-path:path('M 88 0 H 239 C 199 23 164 51 135 84 H 30 C 44 51 64 23 88 0 Z');
    pointer-events:none;
    z-index:-1
  }
}

@media (min-width:901px) and (max-width:1200px) {
  .hero-art {
    width:60%;
    right:0;
    top:45px;
  }
  .hero-description {
    max-width:340px;
  }
}

/* Niezależna, skalowalna warstwa ruchu; etykiety pozostają nad SVG. */
.hero-motion {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
/* Wspólny harmonogram wszystkich etapów: generowany hero-animation.css. */
.vehicle-travel { transform: translate(140px, 470px); animation: truck-drive var(--scene-cycle) var(--vehicle-easing, linear) infinite; }

.vehicle-telemetry { opacity: 0; animation: vehicle-telemetry var(--scene-cycle) linear infinite; }
.vehicle-telemetry-card { filter: drop-shadow(0 2px 3px #173f3914); font-variant-numeric: tabular-nums; }
.vehicle-speed-line.is-speeding { fill:#d51029; }
.temperature-readout { opacity:0; animation:sensor-stage var(--scene-cycle) linear infinite; }
.temperature-readout.is-alarm .sensor-card-surface { fill:#fff0f0; stroke:#e81933; }
.temperature-readout.is-alarm [data-sensor-temperature] { fill:#c41732; }
.parked-truck-lights { opacity:0; animation:parked-truck-blink var(--scene-cycle) linear infinite; }
.sensor-sms { opacity:0; animation:sms-stage var(--scene-cycle) linear infinite; }
html:not(.js) .sensor-sms { display:none; }
.sensor-sms-card { filter:drop-shadow(0 2px 3px #173f3914); }
.sms-envelope { opacity:0; animation:sms-envelope var(--scene-cycle) ease-out infinite; }
.sms-sending { opacity:0; animation:sms-sending var(--scene-cycle) steps(1) infinite; }
.sms-delivered { opacity:0; animation:sms-delivered var(--scene-cycle) linear infinite; }
.retail-activity { opacity:0; animation:retail-stage var(--scene-cycle) linear infinite; filter:drop-shadow(0 0 3px #ffd37a); }

.sensor-activity { opacity: 0; animation: sensor-stage var(--scene-cycle) linear infinite; }

.sensor-wave {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: sensor-pulse var(--scene-cycle) ease-out infinite;
}
.sensor-wave-two { animation-delay: .8s; }

.thermometer-level { stroke-dasharray: 15; animation: temperature-sample var(--scene-cycle) ease-in-out infinite; }

/* Trzy pary w trzech cyklach sceny; odczyty zmieniają się tylko w etapie czujnika. */
.sensor-reading { opacity: 0; animation: sensor-temperature var(--readings-cycle) steps(1) infinite; }
.sensor-reading--humidity { animation-name: sensor-humidity; }


.multiflow-activity { opacity: 0; animation: multiflow-stage var(--scene-cycle) linear infinite; }

.multiflow-link { animation: flow-dashes 2s linear infinite; }
@keyframes flow-dashes { to { stroke-dashoffset: -40; } }
.document-packet {
  offset-path: path('M331 149C394 112 505 141 581 226');
  offset-rotate: 0deg;
  opacity: 0;
  filter: drop-shadow(0 3px 3px #173f3926);
  animation: document-delivery var(--scene-cycle) ease-in-out infinite;
}

.document-received { opacity: 0; animation: document-received var(--scene-cycle) linear infinite; }

.server-activity { opacity: 0; animation: server-stage var(--scene-cycle) linear infinite; }

.server-face-glow { animation: server-glow 1.8s ease-in-out infinite; }
@keyframes server-glow { 0%, 100% { opacity: .08; } 50% { opacity: .24; } }
.server-scan { animation: server-scan 2s ease-in-out infinite; filter: drop-shadow(0 0 3px #8afad0); }
@keyframes server-scan {
  0% { transform: translateY(0); opacity: 0; }
  15%, 75% { opacity: .75; }
  100% { transform: translateY(46px); opacity: 0; }
}
.rack-leds { animation: rack-activity 1.4s ease-in-out infinite; filter: drop-shadow(0 0 3px #55ddaa); }
.rack-leds-1 { animation-delay: .3s; }
.rack-leds-2 { animation-delay: .6s; }
@keyframes rack-activity { 0%, 100% { opacity: .35; } 40%, 60% { opacity: 1; } }
.server-link { animation: flow-dashes 2s linear infinite; }
.server-packet {
  offset-path: path('M509 232C520 182 569 173 611 195S676 242 642 273');
  offset-rotate: 0deg;
  opacity: 0;
  filter: drop-shadow(0 1px 2px #173f3933);
  animation: server-transfer var(--scene-cycle) linear infinite;
}
.server-packet-1 { animation-delay: .65s; }
.server-packet-2 { animation-name: server-transfer-return; animation-delay: 1.3s; }


@container (max-width: 560px) {
  .vehicle-telemetry-card { transform: scale(1.6); transform-origin: 0 -40px; }
  .temperature-readout { transform:translate(137px,605px) scale(2.1); }
  .sensor-sms { transform:translate(351px,599px) scale(2.1); }
}
@media (max-width:700px) { .hero-art { margin-bottom:85px; } }
.hero-art.is-offscreen .hero-motion *, .hero-art.is-offscreen .hero-brand { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .hero-motion *, .hero-brand { animation: none !important; }
  .vehicle-travel { transform: translate(410px, 324px); }
  .vehicle-telemetry { opacity: 1; }
  .sensor-activity, .server-activity, .multiflow-activity, .retail-activity, .parked-truck-lights, .sensor-sms { display: none; }
  .temperature-readout { opacity:1; }
  .sensor-reading { opacity: 0; }
  .sensor-reading[data-reading-index="0"] { opacity: 1; }
}

/* Prawdziwe tekstowe odnośniki przykrywają rastrowe etykiety referencji. */
.hero-art {
  container-type: inline-size;
}
.hero-brand {
  position: absolute;
  display: flex;
  align-items: flex-start;
  gap: clamp(5px, .9cqw, 8px);
  min-height: 44px;
  height: 12.2%;
  padding: clamp(7px, 1.5cqw, 13px) clamp(6px, 1.6cqw, 14px);
  border: 1px solid #eeeeea;
  border-radius: clamp(5px, 1.2cqw, 10px);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 5px 18px #173f390b;
  transition: box-shadow .18s, border-color .18s;
}
.hero-brand:hover {
  border-color: var(--red);
  box-shadow: 0 5px 20px #173f3920;
}
.hero-brand:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
  z-index: 3;
}
.hero-brand-dot {
  flex: 0 0 clamp(4px, .8cqw, 7px);
  height: clamp(4px, .8cqw, 7px);
  margin-top: clamp(4px, .55cqw, 5px);
  background: var(--red);
  border-radius: 50%;
}
.hero-brand-copy {
  min-width: 0;
  flex: 1;
}
.hero-brand strong {
  display: block;
  font-size: clamp(11px, 1.82cqw, 16px);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.5px;
}
.hero-brand-description {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: clamp(8px, 1.3cqw, 11.5px);
  line-height: 1.25;
}
.hero-brand .arrow {
  font-size: clamp(10px, 1.6cqw, 14px);
  margin-top: 2px;
}
.hero-brand--multiflow { left: 17.6%; top: 11.5%; width: 21.5%; }
.hero-brand--multigps { left: 8.2%; top: 72.2%; width: 20%; }
.hero-brand--awisped { left: 4.3%; top: 40.2%; width: 23.4%; }
.hero-brand--vm6 { left: 69.9%; top: 18.1%; width: 18.8%; }
.hero-brand--emonit { left: 66.9%; top: 52.9%; width: 19%; }
.hero-brand--kasy { left: 56.5%; top: 75.9%; width: 23%; }
.hero-brand--kasy strong { font-size: clamp(10px, 1.75cqw, 15.4px); }
@container (max-width: 560px) {
  .hero-brand { align-items: center; padding: 5px; gap: 4px; }
  .hero-brand strong { overflow-wrap: anywhere; letter-spacing: -.3px; }
  .hero-brand-description { display: none; }
  .hero-brand-dot { margin-top: 0; }
  .hero-brand .arrow { display:none; }
  .hero-brand--multigps { width:24%; }
  .hero-brand--multiflow { width:25%; }
  .hero-brand--emonit { width:22%; }
  .hero-brand--kasy { width:26%; }
  .hero-brand:not(.hero-brand--kasy) strong { white-space:nowrap; }
}



/* Wspólne wejścia do podstron oferty. */
.nav-disclosure { position:relative; }
.nav-disclosure>summary { min-height:44px; padding:0; gap:6px; color:inherit; font-size:13px; font-weight:550; }
.nav-disclosure>summary>span { font-size:14px; color:var(--muted); }
.nav-disclosure[open]>summary { color:var(--red-ink); }
.nav-submenu { position:absolute; top:calc(100% + 8px); left:-20px; min-width:240px; padding:10px; border:1px solid var(--line); border-radius:12px; background:var(--paper); box-shadow:0 12px 30px #173f3917; }
.nav-submenu a { display:block; padding:12px; border-radius:6px; line-height:1.4; }
.nav-submenu a:hover { background:#eeeee6; color:var(--red-ink); }
.service-details-links { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:22px; }
.service-details-links a { display:flex; align-items:center; justify-content:space-between; gap:20px; border:1px solid var(--line); border-radius:10px; padding:18px 21px; font-size:15px; font-weight:550; color:var(--green-link); }
.service-details-links a:hover { border-color:var(--green-link); }
@media(max-width:900px) {
  .nav-disclosure { grid-column:1 / -1; }
  .nav-submenu { position:static; margin-top:8px; min-width:0; box-shadow:none; }
}
@media(max-width:600px) {
  .service-details-links { grid-template-columns:1fr; gap:10px; }
  .service-details-links a { padding:16px; font-size:14px; }
}