/* =========================================================
   Fonts
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800&display=swap');

/* =========================================================
   Global variables and base reset
========================================================= */
:root {
  --bg:#000000;
  --panel:#000000;
  --panel-2:#000000;
  --line:#4f4f4f;
  --line-soft:rgb(79,79,79);
  --text:#ffffff;
  --muted:#ffffff;
  --blue:#0048ff;
  --blue-hover:#0076fc;
  --max:1200px;
  --radius:20px
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:rgb(10,10,9);
  color:var(--text);
  font-family:Inter,
  sans-serif;
  font-size:16px;
  line-height:1.35
}

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

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

.container {
  width:min(var(--max),calc(100% - 42px));
  margin-left:auto;
  margin-right:auto
}

.blue {
  color:var(--blue)
}


/* =========================================================
   Header and navigation
========================================================= */
.site-header {
  position:relative;
  z-index:50;
  min-height:86px;
  padding:0;
  background:rgb(10,10,9)
}

.site-header::before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:14px;
  height:64px;
  background:rgb(0,5,10);
  border-top:1px solid rgba(37,102,232,.55);
  border-bottom:1px solid rgba(37,102,232,.55);
  box-shadow:0 0 3px rgba(37,102,232,1);
  pointer-events:none
}

.nav {
  position:relative;
  z-index:1;
  height:86px;
  display:block
}

.brand {
  position:absolute;
  left:9px;
  top:18px;
  display:flex;
  align-items:flex-start;
  gap:3px;
  width:330px;
  height:56px;
  color:#0048ff;
  font-family:Tahoma,
  Geneva,
  sans-serif;
  font-size:32px;
  font-weight:700;
  line-height:38px;
  letter-spacing:0
}

.brand img {
  flex:0 0 86px;
  width:86px;
  height:56px;
  object-fit:contain
}

.brand span {
  display:block;
  padding-top:4px
}

.menu {
  position:absolute;
  left:465px;
  top:26px;
  height:41px;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px
}

.menu a {
  min-width:0;
  height:41px;
  padding:0 30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:10px;
  background-color:rgba(28,28,28,0);
  opacity:.91;
  color:rgb(232,232,232);
  font-family:Tahoma,
  Geneva,
  sans-serif;
  font-size:15px;
  font-weight:700;
  line-height:18px;
  white-space:nowrap;
  transition:background-color 400ms ease,
  color 400ms ease
}

.menu a:hover,
.menu a:focus-visible {
  background-color:rgba(24,127,222,.12);
  color:#ffffff
}

.menu a.active {
  min-width:170px;
  background-color:rgba(0,136,255,.25);
  color:#ffffff
}

.menu-button {
  display:none;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#050505;
  color:#ffffff;
  font-weight:700
}


/* =========================================================
   Home page
========================================================= */
.hero-webwave {
  padding:50px 0 25px
}

.dmx-panel {
  width:100%;
  aspect-ratio:1200 / 281;
  min-height:0;
  margin-bottom:31px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#000000;
  border:1px solid var(--line-soft);
  border-radius:20px
}

.dmx-image {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center
}

.hero-panel {
  min-height:191px;
  padding:5px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:#000000;
  border:1px solid var(--line-soft);
  border-radius:20px;
  text-align:center
}

.hero-panel h1,
.page-title h1 {
  margin:0 0 26px;
  font-size:clamp(44px,6vw,76px);
  font-weight:700;
  line-height:1
}

.hero-panel p {
  max-width:1030px;
  margin:0 auto 24px;
  color:#ffffff;
  font-size:26px;
  font-weight:400
}

.hero-panel p:last-child {
  margin-bottom:0
}

.section {
  padding:29px 0 42px
}

.section-title {
  margin:0 0 28px;
  color:#ffffff;
  font-size:clamp(25px,3.2vw,40px);
  line-height:1.15;
  text-align:center
}

.lead {
  max-width:980px;
  margin:0 auto 28px;
  color:var(--muted);
  font-size:22px;
  text-align:center
}

.narrow {
  max-width:980px
}

.home-cards-section {
  padding-top:29px
}

.home-cards {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:75px;
  align-items:start
}

.home-card h2 {
  height:52px;
  min-height:52px;
  margin:0 0 12px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--panel);
  border:1px solid var(--line-soft);
  border-radius:10px;
  color:#0048ff;
  font-family:Inter,
  sans-serif;
  font-size:25px;
  font-weight:800;
  line-height:1;
  letter-spacing:.2px;
  text-align:center
}

.home-card-box {
  height:338px;
  padding:22px 25px 8px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  background:var(--panel);
  border:1px solid var(--line-soft);
  border-radius:20px
}

.home-card-img {
  margin:5px auto 24px;
  padding:0;
  object-fit:contain;
  background:transparent;
  border:0;
  border-radius:0;
  outline:0;
  box-shadow:none
}

.home-card:nth-child(1) .home-card-img,
.home-card:nth-child(2) .home-card-img {
  width:172px;
  height:96px
}

.home-card:nth-child(3) .home-card-img {
  width:205px;
  height:96px
}

.home-card p {
  width:100%;
  min-height:0;
  margin:0;
  padding:0;
  color:#ffffff;
  font-family:Tahoma,
  Geneva,
  sans-serif;
  font-size:17px;
  font-weight:400;
  line-height:24px;
  text-align:left
}

.button,
.home-card .button {
  width:100%;
  height:55px;
  margin-top:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:rgb(0,118,252) !important;
  border:1px solid rgb(4,0,252) !important;
  border-radius:10px;
  box-shadow:none;
  color:#ffffff !important;
  font-family:Tahoma,
  Geneva,
  sans-serif;
  font-size:17px;
  font-weight:700;
  line-height:24px;
  letter-spacing:0;
  text-align:center;
  transition:background-color 400ms ease,
  border-color 400ms ease,
  color 400ms ease
}

.button:hover,
.button:focus-visible,
.home-card .button:hover,
.home-card .button:focus-visible {
  background-color:rgb(0,0,0) !important;
  border-color:rgb(0,118,252) !important;
  color:#0076fc !important;
  box-shadow:none;
  filter:none
}


/* =========================================================
   Generic page sections
========================================================= */
.page-hero {
  padding:42px 0 20px
}

.page-title {
  min-height:220px;
  padding:38px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:0 0 var(--radius) var(--radius);
  text-align:center
}

.page-title p {
  margin:0;
  font-size:clamp(23px,3vw,34px)
}

.blue-list {
  max-width:620px;
  margin:0 auto;
  padding-left:32px;
  font-size:24px;
  line-height:1.55
}

.blue-list li::marker {
  color:var(--blue)
}

.list {
  margin:0;
  padding-left:22px
}

.gallery-section {
  padding-top:20px
}

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

.gallery-item {
  min-height:226px;
  display:block;
  overflow:hidden;
  background:#030303;
  border:1px solid var(--line);
  border-radius:16px
}

.gallery img {
  width:100%;
  height:226px;
  object-fit:cover
}

.gallery-item:hover {
  border-color:var(--blue)
}

.about-layout,
.cards-two,
.products-grid,
.contact-grid {
  display:grid;
  gap:28px
}

.about-layout,
.cards-two,
.products-grid {
  grid-template-columns:1fr 1fr
}

.contact-grid {
  grid-template-columns:repeat(3,1fr)
}

.box,
.product-card,
.contact-box {
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:20px
}

.box {
  padding:28px
}

.product-card {
  padding:22px
}

.contact-box {
  padding:36px 20px;
  text-align:center
}

.box h2,
.box h3,
.product-card h3,
.contact-box h2 {
  margin:0 0 18px;
  color:var(--blue)
}

.box h2,
.box h3 {
  font-size:27px
}

.box p,
.box li {
  font-size:19px
}

.product-card h3 {
  font-size:26px;
  text-align:center
}

.contact-box p {
  margin:0;
  font-size:22px
}

.box-image {
  height:190px;
  margin:18px auto 0;
  object-fit:contain;
  background:#000000;
  border:1px solid #333333;
  border-radius:12px
}

.product-card img {
  width:100%;
  height:180px;
  margin-bottom:17px;
  object-fit:cover;
  background:#000000;
  border:1px solid #333333;
  border-radius:12px
}


/* =========================================================
   Footer
========================================================= */
.footer {
  margin-top:0;
  padding:22px 0 26px;
  border-top:1px solid #111111
}

.footer-grid {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  align-items:center;
  gap:20px;
  text-align:center
}

.socials {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:30px
}

.socials span {
  min-width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#ffffff;
  border-radius:5px;
  color:#000000;
  font-size:24px;
  font-weight:800;
  line-height:.8
}

.socials span:nth-child(2) {
  font-size:11px
}


/* =========================================================
   Reveal animations
========================================================= */
.reveal {
  opacity:0;
  transition-property:opacity;
  transition-duration:4s;
  transition-timing-function:ease;
  transition-delay:0s;
  will-change:opacity
}

.reveal.visible {
  opacity:1
}

.reveal-button {
  transition-duration:1s
}

.lazy-img {
  opacity:1
}

.lazy-img.loaded {
  opacity:1
}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  .reveal,
  .lazy-img {
    opacity:1;
    transition:none
  }

  
}


/* =========================================================
   Lightbox
========================================================= */
.lightbox {
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,0,0,.92)
}

.lightbox.open {
  display:flex
}

.lightbox img {
  max-width:min(1150px,96vw);
  max-height:88vh;
  object-fit:contain
}

.lightbox button {
  position:absolute;
  top:18px;
  right:18px;
  padding:8px 14px;
  cursor:pointer;
  background:#111111;
  border:1px solid #666666;
  border-radius:8px;
  color:#ffffff;
  font-size:26px
}

@media (max-width:950px) {
  .site-header {
    min-height:72px;
    padding-top:0
  }

  .site-header::before {
    top:0;
    height:72px
  }

  .nav {
    height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between
  }

  .brand {
    position:static;
    width:auto;
    height:auto;
    align-items:center;
    font-size:26px;
    line-height:31px
  }

  .brand span {
    padding-top:0
  }

  .brand img {
    flex:0 0 62px;
    width:62px;
    height:41px
  }

  .menu-button {
    display:block
  }

  .menu {
    position:absolute;
    left:21px;
    right:21px;
    top:72px;
    height:auto;
    margin-top:0;
    display:none;
    flex-direction:column;
    gap:16px;
    padding:14px;
    background:#020202;
    border:1px solid var(--line);
    border-radius:12px
  }

  .menu.open {
    display:flex
  }

  .dmx-panel {
    min-height:210px;
    aspect-ratio:2170 / 725
  }

  .hero-panel {
    min-height:300px
  }

  .section {
    padding:24px 0 34px
  }

  .home-cards,
  .about-layout,
  .cards-two,
  .products-grid,
  .contact-grid,
  .footer-grid {
    grid-template-columns:1fr
  }

  .home-cards {
    max-width:360px;
    gap:28px;
    margin-left:auto;
    margin-right:auto
  }

  .home-card-box {
    height:auto;
    min-height:255px
  }

  .gallery {
    grid-template-columns:repeat(2,1fr)
  }

  
}

@media (max-width:560px) {
  body {
    font-size:16px
  }

  .container {
    width:min(var(--max),calc(100% - 28px))
  }

  .brand {
    font-size:22px
  }

  .brand span {
    display:none
  }

  .menu a {
    padding:10px 14px
  }

  .dmx-panel {
    min-height:150px;
    margin-bottom:20px
  }

  .hero-panel {
    padding:34px 18px
  }

  .hero-panel p {
    font-size:19px
  }

  .home-cards {
    max-width:100%;
    gap:34px
  }

  .home-card h2 {
    font-size:20px
  }

  .home-card-box {
    min-height:245px
  }

  .home-card .button {
    height:40px
  }

  .gallery {
    grid-template-columns:1fr
  }

  .gallery img {
    height:250px
  }

  .page-title {
    min-height:170px
  }

  .contact-box p {
    font-size:19px
  }

  
}

.home-card:nth-child(3) h2 {
  font-size:24px;
  line-height:28px
}

.home-card:nth-child(1) .home-card-img {
  width:191px;
  height:135px
}

.home-card:nth-child(2) .home-card-img {
  width:230px;
  height:135px
}

.home-card:nth-child(3) .home-card-img {
  width:262px;
  height:135px
}

.hero-panel p {
  color:#ffffff;
  line-height:31px;
  font-weight:400
}

.footer,
.footer a {
  color:#ffffff;
  font-size:16px;
  line-height:1.35
}

@media (max-width:1199px) {
  .hero-panel p {
    font-size:clamp(21px,3.2vw,26px);
    line-height:1.2
  }

  .home-card h2 {
    font-size:clamp(22px,3vw,25px)
  }

  .home-card p {
    font-size:11px;
    line-height:13px
  }

  
}

@media (max-width:767px) {
  .brand {
    font-size:22px
  }

  .home-card h2,
  .home-card:nth-child(3) h2 {
    font-size:22px;
    line-height:26px
  }

  .hero-panel p {
    font-size:20px;
    line-height:25px
  }

  
}

.real-video-link a {
  position:relative;
  display:block;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#000000
}

.real-video-link img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover
}

.real-youtube-play {
  position:absolute;
  left:50%;
  top:50%;
  width:78px;
  height:55px;
  transform:translate(-50%,-50%);
  border-radius:13px;
  background:rgba(0,0,0,.72);
  box-shadow:0 0 0 1px rgba(255,255,255,.18)
}

.real-youtube-play::after {
  content:'';
  position:absolute;
  left:31px;
  top:15px;
  width:0;
  height:0;
  border-top:12px solid transparent;
  border-bottom:12px solid transparent;
  border-left:20px solid #ffffff
}

.real-video-link a:hover .real-youtube-play {
  background:rgba(0,118,252,.85)
}

@media (min-width:1200px) {
  .container {
    width:1200px
  }

  .site-header {
    height:114px
  }

  .nav {
    height:114px;
    align-items:flex-end;
    padding-bottom:4px
  }

  .brand {
    align-items:center;
    margin-bottom:0;
    font-family:Inter,
    sans-serif;
    font-size:32px;
    line-height:38px
  }

  .brand img {
    width:86px;
    height:56px
  }

  .menu {
    width:689px;
    height:41px;
    justify-content:space-between;
    gap:0;
    margin-bottom:7px
  }

  .menu a {
    padding:13px 15px;
    font-family:Inter,
    sans-serif;
    font-size:14px;
    font-weight:700;
    line-height:15px
  }

  .hero-webwave {
    padding:31px 0 0
  }

  .dmx-panel {
    width:1200px;
    height:281px;
    aspect-ratio:auto;
    margin-bottom:31px
  }

  .hero-panel {
    width:1200px;
    height:291px;
    min-height:291px;
    padding:5px
  }

  .home-cards-section {
    padding:30px 0 20px
  }

  .home-cards {
    grid-template-columns:350px 350px 350px;
    gap:75px
  }

  .home-card h2 {
    width:350px;
    height:52px;
    margin-bottom:12px;
    padding:8px;
    font-family:Inter,
    sans-serif;
    font-size:25px;
    font-weight:800;
    line-height:30px;
    border-radius:10px
  }

  .home-card:nth-child(3) h2 {
    font-size:24px;
    line-height:28px
  }

  .home-card-box {
    width:350px;
    height:338px;
    padding:22px 25px 8px
  }

  .home-card-img {
    margin-bottom:24px
  }

  .home-card p {
    font-family:Inter,
    sans-serif;
    font-size:11px;
    line-height:13px;
    color:#ffffff
  }

  .home-card:nth-child(1) p,
  .home-card:nth-child(3) p {
    font-size:10px;
    line-height:12px
  }

  .home-card .button {
    width:350px;
    height:55px;
    margin-top:11px;
    font-family:Inter,
    sans-serif;
    font-size:16px;
    font-weight:800
  }

  
}

.home-card p,
.home-card:nth-child(1) p,
.home-card:nth-child(2) p,
.home-card:nth-child(3) p {
  font-family:Tahoma,
  Geneva,
  sans-serif;
  font-size:17px;
  line-height:24px;
  font-weight:400;
  color:#ffffff;
  letter-spacing:0;
  text-align:left
}

.home-card-img {
  margin-top:5px;
  margin-bottom:33px
}

@media (min-width:1200px) {
  .home-card p,
  .home-card:nth-child(1) p,
  .home-card:nth-child(2) p,
  .home-card:nth-child(3) p {
    font-family:Tahoma,
    Geneva,
    sans-serif;
    font-size:17px;
    line-height:24px;
    font-weight:400;
    color:#ffffff
  }

  .home-card-img {
    margin-top:5px;
    margin-bottom:33px
  }

  
}

@media (max-width:1199px) {
  .home-card p,
  .home-card:nth-child(1) p,
  .home-card:nth-child(2) p,
  .home-card:nth-child(3) p {
    font-family:Tahoma,
    Geneva,
    sans-serif;
    font-size:clamp(15px,2.6vw,17px);
    line-height:1.42
  }

  
}

.site-header {
  position:relative;
  top:auto;
  z-index:10
}

@media (min-width:1200px) {
  .site-header {
    height:114px
  }

  
}

.button,
.home-card .button,
.menu-button {
  cursor:pointer
}

.button,
.home-card .button {
  background:#0076fc;
  border-color:#0400fc;
  color:#ffffff;
  font-family:Tahoma,
  Geneva,
  sans-serif;
  font-size:16px;
  font-weight:700;
  line-height:19px;
  transition:background-color .22s ease,
  color .22s ease,
  border-color .22s ease,
  opacity .22s ease
}

.button:hover,
.button:focus-visible,
.home-card .button:hover,
.home-card .button:focus-visible {
  background:#ffffff;
  border-color:#0076fc;
  color:#0076fc
}

.button:active,
.home-card .button:active {
  background:#dfefff;
  color:#0048ff
}

.reveal {
  opacity:0;
  visibility:hidden;
  transform:translateY(34px);
  transition:opacity 1.15s ease,
  transform 1.15s ease,
  visibility 0s linear 1.15s;
  will-change:opacity,
  transform
}

.reveal.visible {
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:opacity 1.15s ease,
  transform 1.15s ease,
  visibility 0s linear 0s
}

.reveal.reveal-past {
  transform:translateY(-24px)
}

.reveal:nth-child(2) {
  transition-delay:.08s
}

.reveal:nth-child(3) {
  transition-delay:.16s
}

.reveal {
  opacity:0 !important;
  visibility:hidden !important;
  transform:none !important;
  transition-property:opacity,
  visibility !important;
  transition-duration:4s,
  0s !important;
  transition-timing-function:cubic-bezier(.02,.01,.47,1),
  linear !important;
  transition-delay:0s,
  4s !important;
  will-change:opacity !important
}

.reveal.visible {
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  transition-delay:0s,
  0s !important
}

.reveal-button {
  transition-duration:4s,
  0s !important
}

.button,
.home-card .button {
  background-color:rgb(0,118,252) !important;
  border:1px solid rgb(4,0,252) !important;
  color:#ffffff !important;
  font-family:Tahoma,
  Geneva,
  sans-serif !important;
  font-size:17px !important;
  font-weight:700 !important;
  line-height:24px !important;
  transition:background-color 400ms ease,
  border-color 400ms ease,
  color 400ms ease !important
}

.button:hover,
.button:focus-visible,
.home-card .button:hover,
.home-card .button:focus-visible {
  background-color:rgb(0,0,0) !important;
  border-color:rgb(0,118,252) !important;
  color:rgb(0,118,252) !important
}

.button:active,
.home-card .button:active {
  background-color:rgb(0,0,0) !important;
  border-color:rgb(0,118,252) !important;
  color:rgb(0,118,252) !important
}

@media (min-width:1200px) {
  .site-header {
    height:128px !important;
    min-height:128px !important;
    padding-top:50px !important;
    background:rgb(10,10,9) !important;
    overflow:visible !important
  }

  .site-header::before {
    top:50px !important;
    height:78px !important;
    background:#000000 !important;
    border-top:1px solid rgba(79,79,79,.75) !important;
    border-bottom:1px solid rgba(79,79,79,.75) !important
  }

  .site-header .container,
  .nav {
    width:1200px !important;
    height:78px !important;
    min-height:78px !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    overflow:visible !important
  }

  .brand {
    height:56px !important;
    min-height:56px !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    gap:3px !important;
    font-family:Inter,
    sans-serif !important;
    font-size:32px !important;
    font-weight:800 !important;
    line-height:38px !important;
    color:#0048ff !important
  }

  .brand img {
    width:86px !important;
    height:56px !important;
    object-fit:contain !important
  }

  .menu {
    width:689px !important;
    height:41px !important;
    min-height:41px !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:0 !important
  }

  .menu a {
    height:41px !important;
    min-height:41px !important;
    margin:0 !important;
    padding:0 15px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:7px !important;
    font-family:Inter,
    sans-serif !important;
    font-size:14px !important;
    font-weight:800 !important;
    line-height:17px !important;
    color:#ffffff !important
  }

  .menu a.active,
  .menu a:hover {
    background:rgba(0,100,250,.38) !important;
    color:#ffffff !important
  }

  
}

.button,
.home-card .button {
  height:55px !important;
  border-radius:7px !important;
  background-color:#0076fc !important;
  border:1px solid #0400fc !important;
  color:#ffffff !important;
  font-family:Inter,
  sans-serif !important;
  font-size:16px !important;
  font-weight:800 !important;
  line-height:19px !important;
  letter-spacing:0 !important;
  box-shadow:none !important;
  filter:none !important;
  cursor:pointer !important
}

.button:hover,
.button:focus-visible,
.home-card .button:hover,
.home-card .button:focus-visible {
  background-color:#000000 !important;
  border-color:#0076fc !important;
  color:#0076fc !important;
  box-shadow:none !important;
  filter:none !important
}

.reveal {
  opacity:0 !important;
  visibility:hidden !important;
  transform:none !important;
  transition-property:opacity,
  visibility !important;
  transition-duration:4s,
  0s !important;
  transition-timing-function:ease,
  linear !important;
  transition-delay:0s,
  4s !important
}

.reveal.visible {
  opacity:1 !important;
  visibility:visible !important;
  transition-delay:0s,
  0s !important
}

.reveal-button {
  transition-duration:1s,
  0s !important;
  transition-delay:0s,
  1s !important
}

.reveal-button.visible {
  transition-delay:0s,
  0s !important
}

@media (min-width:1200px) {
  .site-header {
    position:relative !important;
    height:64px !important;
    min-height:64px !important;
    padding:0 !important;
    margin:0 !important;
    background:rgb(0,5,10) !important;
    border-top:1px solid rgb(0,0,0) !important;
    border-bottom:1px solid rgb(0,0,0) !important;
    box-shadow:0 0 3px rgba(37,102,232,1) !important;
    overflow:visible !important
  }

  .site-header::before {
    display:none !important;
    content:none !important
  }

  .site-header .container,
  .site-header .nav,
  .nav {
    position:relative !important;
    width:1200px !important;
    height:64px !important;
    min-height:64px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding:0 !important;
    display:block !important;
    overflow:visible !important
  }

  .brand {
    position:absolute !important;
    left:9px !important;
    top:4px !important;
    width:330px !important;
    height:56px !important;
    min-height:56px !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:flex-start !important;
    gap:3px !important;
    color:#0048ff !important;
    font-family:Tahoma,
    Geneva,
    sans-serif !important;
    font-size:32px !important;
    font-weight:700 !important;
    line-height:38px !important;
    letter-spacing:0 !important
  }

  .brand img {
    width:86px !important;
    height:56px !important;
    min-width:86px !important;
    min-height:56px !important;
    flex:0 0 86px !important;
    object-fit:contain !important;
    object-position:50% 50% !important;
    margin:0 !important;
    padding:0 !important
  }

  .brand span {
    display:block !important;
    padding:4px 5px 0 5px !important;
    margin:0 !important;
    color:#0048ff !important;
    font-family:Tahoma,
    Geneva,
    sans-serif !important;
    font-size:32px !important;
    font-weight:700 !important;
    line-height:38px !important
  }

  .menu-button {
    display:none !important
  }

  .menu {
    position:absolute !important;
    left:465px !important;
    top:12px !important;
    width:auto !important;
    height:auto !important;
    min-height:35px !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    gap:5px !important;
    background:transparent !important;
    overflow:visible !important
  }

  .menu a {
    box-sizing:border-box !important;
    height:auto !important;
    min-height:35px !important;
    margin:0 !important;
    padding:9px 30px 8px 30px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:0 solid rgb(79,79,79) !important;
    border-radius:10px !important;
    background-color:rgba(28,28,28,0) !important;
    box-shadow:none !important;
    opacity:.91 !important;
    color:rgb(232,232,232) !important;
    font-family:Tahoma,
    Geneva,
    sans-serif !important;
    font-size:15px !important;
    font-weight:700 !important;
    line-height:18px !important;
    letter-spacing:0 !important;
    white-space:nowrap !important;
    transition:background-color 250ms ease,
    color 250ms ease !important
  }

  .menu a.active {
    background-color:rgba(0,136,255,0.25) !important;
    color:#0048ff !important;
    border-radius:10px !important
  }

  .menu a:hover,
  .menu a:focus-visible {
    background-color:rgba(24,127,222,0.12) !important;
    color:rgb(232,232,232) !important;
    border-radius:10px !important
  }

  main {
    margin-top:0 !important
  }

  
}

@media (min-width:1200px) {
  .site-header {
    position:relative !important;
    height:128px !important;
    min-height:128px !important;
    padding:0 !important;
    margin:0 !important;
    background:rgb(10,10,9) !important;
    border:0 !important;
    box-shadow:none !important;
    overflow:visible !important
  }

  .site-header::before {
    display:block !important;
    content:"" !important;
    position:absolute !important;
    left:50% !important;
    top:50px !important;
    width:100vw !important;
    height:64px !important;
    transform:translateX(-50%) !important;
    background:rgb(0,5,10) !important;
    border-top:1px solid rgb(0,0,0) !important;
    border-bottom:1px solid rgb(0,0,0) !important;
    box-shadow:0 0 3px rgba(37,102,232,1) !important;
    pointer-events:none !important
  }

  .site-header .container,
  .site-header .nav,
  .nav {
    position:relative !important;
    width:1200px !important;
    height:128px !important;
    min-height:128px !important;
    margin:0 auto !important;
    padding:0 !important;
    display:block !important;
    overflow:visible !important
  }

  .brand {
    position:absolute !important;
    left:9px !important;
    top:54px !important;
    width:330px !important;
    height:56px !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:flex-start !important;
    gap:3px !important;
    color:#0048ff !important;
    font-family:Tahoma,
    Geneva,
    sans-serif !important;
    font-size:32px !important;
    font-weight:700 !important;
    line-height:38px !important
  }

  .brand img {
    width:86px !important;
    height:56px !important;
    min-width:86px !important;
    min-height:56px !important;
    flex:0 0 86px !important;
    object-fit:contain !important;
    object-position:50% 50% !important;
    margin:0 !important;
    padding:0 !important
  }

  .brand span {
    display:block !important;
    padding:5px 5px 0 5px !important;
    margin:0 !important;
    color:#0048ff !important;
    font-family:Tahoma,
    Geneva,
    sans-serif !important;
    font-size:32px !important;
    font-weight:700 !important;
    line-height:38px !important
  }

  .menu-button {
    display:none !important
  }

  .menu {
    position:absolute !important;
    left:465px !important;
    top:62px !important;
    width:auto !important;
    height:auto !important;
    min-height:35px !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    gap:5px !important;
    background:transparent !important;
    overflow:visible !important
  }

  .menu a {
    box-sizing:border-box !important;
    height:auto !important;
    min-height:35px !important;
    margin:0 !important;
    padding:9px 30px 8px 30px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:0 !important;
    border-radius:10px !important;
    background-color:rgba(28,28,28,0) !important;
    box-shadow:none !important;
    opacity:.91 !important;
    color:rgb(232,232,232) !important;
    font-family:Tahoma,
    Geneva,
    sans-serif !important;
    font-size:15px !important;
    font-weight:700 !important;
    line-height:18px !important;
    letter-spacing:0 !important;
    white-space:nowrap !important;
    transition:background-color 250ms ease,
    color 250ms ease !important
  }

  .menu a.active {
    background-color:rgba(0,136,255,0.25) !important;
    color:rgb(232,232,232) !important;
    border-radius:10px !important
  }

  .menu a:hover,
  .menu a:focus-visible {
    background-color:rgba(24,127,222,0.12) !important;
    color:rgb(232,232,232) !important;
    border-radius:10px !important
  }

  main {
    margin-top:0 !important
  }

  .hero-webwave {
    padding-top:50px !important
  }

  
}

@media (min-width:1200px) {
  .site-header {
    position:relative !important;
    height:114px !important;
    min-height:114px !important;
    max-height:114px !important;
    padding:0 !important;
    margin:0 !important;
    background:rgb(10,10,9) !important;
    border:0 !important;
    box-shadow:none !important;
    overflow:visible !important
  }

  .site-header::before {
    content:"" !important;
    display:block !important;
    position:absolute !important;
    left:50% !important;
    top:50px !important;
    width:100vw !important;
    height:64px !important;
    transform:translateX(-50%) !important;
    box-sizing:border-box !important;
    background:rgb(0,5,10) !important;
    border:1px solid rgb(0,0,0) !important;
    border-left:0 !important;
    border-right:0 !important;
    box-shadow:0 0 3px rgba(37,102,232,1) !important;
    pointer-events:none !important
  }

  .site-header .container,
  .site-header .nav,
  .nav {
    position:relative !important;
    width:1200px !important;
    height:114px !important;
    min-height:114px !important;
    max-height:114px !important;
    margin:0 auto !important;
    padding:0 !important;
    display:block !important;
    overflow:visible !important
  }

  .brand {
    position:absolute !important;
    left:9px !important;
    top:54px !important;
    width:330px !important;
    height:56px !important;
    min-height:56px !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:flex-start !important;
    gap:3px !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    text-decoration:none !important
  }

  .brand img {
    width:86px !important;
    height:56px !important;
    min-width:86px !important;
    max-width:86px !important;
    min-height:56px !important;
    max-height:56px !important;
    flex:0 0 86px !important;
    object-fit:contain !important;
    object-position:50% 50% !important;
    margin:0 !important;
    padding:0 !important
  }

  .brand span {
    display:block !important;
    width:241px !important;
    height:48px !important;
    margin:0 !important;
    padding:5px 5px 5px 5px !important;
    color:#0048ff !important;
    font-family:Tahoma,
    Geneva,
    sans-serif !important;
    font-size:32px !important;
    line-height:38px !important;
    font-weight:700 !important;
    letter-spacing:0 !important;
    white-space:nowrap !important;
    text-decoration:none !important
  }

  .menu-button {
    display:none !important
  }

  .menu {
    position:absolute !important;
    left:465px !important;
    top:62px !important;
    width:655px !important;
    height:40px !important;
    min-height:40px !important;
    max-height:40px !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    overflow:visible !important
  }

  .menu a,
  .menu a:link,
  .menu a:visited,
  .menu a:hover,
  .menu a:focus,
  .menu a:focus-visible,
  .menu a:active,
  .menu a.active,
  .menu a.active:hover,
  .menu a.active:focus,
  .menu a.active:active {
    box-sizing:border-box !important;
    height:35px !important;
    min-height:35px !important;
    max-height:35px !important;
    margin:0 !important;
    padding:9px 30px 8px 30px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:0 !important;
    outline:0 !important;
    border-radius:10px !important;
    box-shadow:none !important;
    font-family:Tahoma,
    Geneva,
    sans-serif !important;
    font-size:15px !important;
    line-height:18px !important;
    font-weight:700 !important;
    letter-spacing:0 !important;
    white-space:nowrap !important;
    text-decoration:none !important;
    transform:none !important;
    opacity:1 !important;
    transition:background-color 250ms ease,
    color 250ms ease !important
  }

  .menu a:nth-child(1) {
    width:170px !important
  }

  .menu a:nth-child(2) {
    width:128px !important
  }

  .menu a:nth-child(3) {
    width:138px !important
  }

  .menu a:nth-child(4) {
    width:114px !important
  }

  .menu a:nth-child(5) {
    width:115px !important
  }

  .menu a,
  .menu a:link,
  .menu a:visited {
    background-color:rgba(28,28,28,0) !important;
    color:rgb(232,232,232) !important
  }

  .menu a.active,
  .menu a.active:link,
  .menu a.active:visited,
  .menu a.active:focus,
  .menu a.active:focus-visible,
  .menu a.active:active {
    background-color:rgb(0,54,101) !important;
    color:rgb(232,232,232) !important
  }

  .menu a:hover,
  .menu a:focus-visible {
    background-color:rgba(0,54,101,.55) !important;
    color:rgb(232,232,232) !important
  }

  .menu a.active:hover {
    background-color:rgb(0,54,101) !important;
    color:rgb(232,232,232) !important
  }

  main {
    margin-top:0 !important
  }

  .hero-webwave {
    padding-top:30px !important
  }

  
}

@media (min-width:1200px) {
  .site-header {
    height:114px !important;
    min-height:114px !important;
    max-height:114px !important
  }

  .site-header::before {
    top:50px !important;
    height:64px !important;
    background:rgb(0,5,10) !important;
    border-top:1px solid rgb(0,0,0) !important;
    border-bottom:1px solid rgb(0,0,0) !important;
    box-shadow:0 0 3px rgba(37,102,232,1) !important
  }

  .site-header .container,
  .site-header .nav,
  .nav {
    height:114px !important;
    min-height:114px !important;
    max-height:114px !important
  }

  .brand {
    left:9px !important;
    top:54px !important;
    width:330px !important;
    height:56px !important;
    align-items:flex-start !important;
    gap:3px !important
  }

  .brand img {
    width:86px !important;
    height:56px !important;
    flex:0 0 86px !important
  }

  .brand span {
    width:241px !important;
    height:48px !important;
    padding:8px 5px 2px 5px !important;
    color:#0048ff !important;
    font-family:Tahoma,
    Geneva,
    sans-serif !important;
    font-size:32px !important;
    line-height:38px !important;
    font-weight:700 !important
  }

  .menu {
    position:absolute !important;
    left:465px !important;
    top:62px !important;
    width:689px !important;
    height:41px !important;
    min-height:41px !important;
    max-height:41px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    overflow:visible !important
  }

  .menu a,
  .menu a:link,
  .menu a:visited,
  .menu a:hover,
  .menu a:focus,
  .menu a:focus-visible,
  .menu a:active,
  .menu a.active,
  .menu a.active:link,
  .menu a.active:visited,
  .menu a.active:hover,
  .menu a.active:focus,
  .menu a.active:focus-visible,
  .menu a.active:active {
    box-sizing:border-box !important;
    height:41px !important;
    min-height:41px !important;
    max-height:41px !important;
    margin:0 !important;
    padding:9px 30px 8px 30px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:0 !important;
    outline:0 !important;
    border-radius:10px !important;
    box-shadow:none !important;
    font-family:Tahoma,
    Geneva,
    sans-serif !important;
    font-size:15px !important;
    line-height:18px !important;
    font-weight:700 !important;
    letter-spacing:0 !important;
    white-space:nowrap !important;
    text-align:center !important;
    text-decoration:none !important;
    vertical-align:middle !important;
    transform:none !important;
    filter:none !important;
    text-shadow:none !important;
    cursor:pointer !important;
    -webkit-tap-highlight-color:transparent !important;
    transition:background-color 250ms ease,
    color 250ms ease !important
  }

  .menu a:nth-child(1) {
    width:170px !important;
    min-width:170px !important;
    max-width:170px !important
  }

  .menu a:nth-child(2) {
    width:123px !important;
    min-width:123px !important;
    max-width:123px !important
  }

  .menu a:nth-child(3) {
    width:139px !important;
    min-width:139px !important;
    max-width:139px !important
  }

  .menu a:nth-child(4) {
    width:116px !important;
    min-width:116px !important;
    max-width:116px !important
  }

  .menu a:nth-child(5) {
    width:116px !important;
    min-width:116px !important;
    max-width:116px !important
  }

  .menu a,
  .menu a:link,
  .menu a:visited {
    background-color:rgba(28,28,28,0) !important;
    color:rgb(232,232,232) !important;
    opacity:.91 !important
  }

  .menu a:hover,
  .menu a:focus-visible {
    background-color:rgba(24,127,222,0.12) !important;
    color:rgb(255,255,255) !important;
    opacity:.91 !important
  }

  .menu a.active,
  .menu a.active:link,
  .menu a.active:visited,
  .menu a.active:hover,
  .menu a.active:focus,
  .menu a.active:focus-visible,
  .menu a.active:active {
    background-color:rgba(0,136,255,0.25) !important;
    color:rgb(255,255,255) !important;
    opacity:.91 !important
  }

  .menu a:active,
  .menu a:focus:not(:focus-visible) {
    background-color:rgba(28,28,28,0) !important;
    color:rgb(232,232,232) !important;
    opacity:.91 !important
  }

  .menu a.active:active,
  .menu a.active:focus:not(:focus-visible) {
    background-color:rgba(0,136,255,0.25) !important;
    color:rgb(255,255,255) !important;
    opacity:.91 !important
  }

  .hero-webwave {
    padding-top:30px !important
  }

  
}

@media (min-width:1200px) {
  .button,
  .button:link,
  .button:visited,
  .home-card .button,
  .home-card .button:link,
  .home-card .button:visited,
  .home-card .button:hover,
  .home-card .button:focus,
  .home-card .button:focus-visible,
  .home-card .button:active {
    box-sizing:border-box !important;
    width:350px !important;
    height:55px !important;
    min-height:55px !important;
    max-height:55px !important;
    margin:11px 0 0 0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:10px !important;
    border-width:1px !important;
    border-style:solid !important;
    box-shadow:none !important;
    outline:0 !important;
    font-family:Tahoma,
    Geneva,
    sans-serif !important;
    font-size:17px !important;
    line-height:24px !important;
    font-weight:700 !important;
    letter-spacing:0 !important;
    text-align:center !important;
    text-decoration:none !important;
    white-space:nowrap !important;
    transform:none !important;
    filter:none !important;
    text-shadow:none !important
  }

  .button,
  .button:link,
  .button:visited,
  .home-card .button,
  .home-card .button:link,
  .home-card .button:visited,
  .button:active,
  .home-card .button:active {
    background-color:rgb(0,118,252) !important;
    border-color:rgb(4,0,252) !important;
    color:#ffffff !important
  }

  .button:hover,
  .button:focus-visible,
  .home-card .button:hover,
  .home-card .button:focus-visible {
    background-color:rgb(0,0,0) !important;
    border-color:rgb(0,118,252) !important;
    color:#0076fc !important
  }

  .footer {
    height:71px !important;
    min-height:71px !important;
    max-height:71px !important;
    margin-top:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    overflow:visible !important
  }

  .footer .container,
  .footer-grid {
    position:relative !important;
    width:1200px !important;
    height:71px !important;
    min-height:71px !important;
    max-height:71px !important;
    margin:0 auto !important;
    padding:0 !important;
    display:block !important;
    text-align:left !important;
    overflow:visible !important
  }

  .footer-grid>div:nth-child(1),
  .footer-grid>div:nth-child(2) {
    position:absolute !important;
    height:auto !important;
    padding:5px !important;
    margin:0 !important;
    background:none !important;
    border:0 !important;
    box-shadow:none !important;
    color:#ffffff !important;
    font-family:Tahoma,
    Geneva,
    sans-serif !important;
    font-size:17px !important;
    line-height:24px !important;
    font-weight:400 !important;
    text-align:left !important;
    letter-spacing:0 !important
  }

  .footer-grid>div:nth-child(1) {
    left:207px !important;
    top:0 !important;
    width:231px !important;
    min-height:58px !important
  }

  .footer-grid>div:nth-child(2) {
    left:503px !important;
    top:0 !important;
    width:222px !important;
    min-height:71px !important
  }

  .footer,
  .footer a,
  .footer a:link,
  .footer a:visited,
  .footer a:hover,
  .footer a:active {
    color:#ffffff !important;
    font-family:Tahoma,
    Geneva,
    sans-serif !important;
    font-size:17px !important;
    line-height:24px !important;
    font-weight:400 !important;
    text-decoration:none !important
  }

  .footer .blue {
    color:#0064fa !important;
    font-family:Tahoma,
    Geneva,
    sans-serif !important;
    font-size:17px !important;
    line-height:24px !important;
    font-weight:400 !important
  }

  .socials {
    position:absolute !important;
    left:790px !important;
    top:8px !important;
    width:204px !important;
    height:40px !important;
    margin:0 !important;
    padding:0 !important;
    display:block !important;
    background:none !important;
    border:0 !important;
    box-shadow:none !important;
    overflow:visible !important
  }

  .socials span {
    position:absolute !important;
    top:0 !important;
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    margin:0 !important;
    padding:0 !important;
    display:block !important;
    background-color:transparent !important;
    background-repeat:no-repeat !important;
    background-position:50% 50% !important;
    background-size:contain !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    color:transparent !important;
    font-size:0 !important;
    line-height:0 !important;
    overflow:hidden !important
  }

  .socials span:nth-child(1) {
    left:0 !important;
    background-image:url('data:image/svg+xml,%3Csvg%20fill%3D%27rgb%28255%2C%20255%2C%20255%29%27%20id%3D%27ww-facebook-square%27%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20viewBox%3D%270%200%2012%2014%27%3E%3Cpath%20d%3D%27M9.75%201q0.93%200%201.59%200.66t0.66%201.59v7.5q0%200.93-0.66%201.59t-1.59%200.66h-1.469v-4.648h1.555l0.234-1.812h-1.789v-1.156q0-0.438%200.184-0.656t0.715-0.219l0.953-0.008v-1.617q-0.492-0.070-1.391-0.070-1.062%200-1.699%200.625t-0.637%201.766v1.336h-1.563v1.812h1.563v4.648h-4.156q-0.93%200-1.59-0.66t-0.66-1.59v-7.5q0-0.93%200.66-1.59t1.59-0.66h7.5z%27%3E%3C%2Fpath%3E%3C%2Fsvg%3E') !important
  }

  .socials span:nth-child(2) {
    left:82px !important;
    background-image:url('data:image/svg+xml,%3Csvg%20fill%3D%27rgb%28255%2C%20255%2C%20255%29%27%20id%3D%27ww-youtube-square%27%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20viewBox%3D%270%200%2012%2014%27%3E%3Cpath%20d%3D%27M7.18%2010.18v-1.227q0-0.391-0.227-0.391-0.133%200-0.258%200.125v1.75q0.125%200.125%200.258%200.125%200.227%200%200.227-0.383zM8.617%209.227h0.516v-0.266q0-0.398-0.258-0.398t-0.258%200.398v0.266zM4.156%207.148v0.547h-0.625v3.305h-0.578v-3.305h-0.609v-0.547h1.812zM5.727%208.133v2.867h-0.523v-0.312q-0.305%200.352-0.594%200.352-0.258%200-0.328-0.219-0.047-0.125-0.047-0.422v-2.266h0.516v2.109q0%200.187%200.008%200.203%200.008%200.117%200.117%200.117%200.156%200%200.328-0.242v-2.188h0.523zM7.695%209v1.141q0%200.406-0.055%200.57-0.094%200.328-0.414%200.328-0.273%200-0.531-0.32v0.281h-0.523v-3.852h0.523v1.258q0.25-0.312%200.531-0.312%200.32%200%200.414%200.328%200.055%200.164%200.055%200.578zM9.656%2010.008v0.070q0%200.227-0.016%200.336-0.023%200.172-0.117%200.312-0.211%200.312-0.625%200.312-0.406%200-0.633-0.297-0.164-0.211-0.164-0.672v-1.008q0-0.461%200.156-0.672%200.227-0.297%200.625-0.297t0.609%200.297q0.164%200.219%200.164%200.672v0.594h-1.039v0.508q0%200.398%200.266%200.398%200.187%200%200.234-0.203%200-0.008%200.004-0.055t0.004-0.129v-0.168h0.531zM6.133%203.57v1.219q0%200.398-0.25%200.398t-0.25-0.398v-1.219q0-0.406%200.25-0.406t0.25%200.406zM10.297%209.141q0-1.383-0.148-2.031-0.078-0.344-0.336-0.574t-0.594-0.27q-1.062-0.117-3.219-0.117-2.148%200-3.211%200.117-0.344%200.039-0.598%200.27t-0.332%200.574q-0.156%200.68-0.156%202.031%200%201.375%200.156%202.031%200.078%200.336%200.332%200.57t0.59%200.273q1.070%200.117%203.219%200.117t3.219-0.117q0.336-0.039%200.59-0.273t0.332-0.57q0.156-0.656%200.156-2.031zM4.398%204.055l0.703-2.313h-0.586l-0.398%201.523-0.414-1.523h-0.609l0.187%200.539t0.18%200.539q0.273%200.805%200.359%201.234v1.57h0.578v-1.57zM6.656%204.687v-1.016q0-0.453-0.164-0.68-0.227-0.297-0.609-0.297-0.398%200-0.609%200.297-0.164%200.227-0.164%200.68v1.016q0%200.453%200.164%200.68%200.211%200.297%200.609%200.297%200.383%200%200.609-0.297%200.164-0.211%200.164-0.68zM8.070%205.625h0.523v-2.891h-0.523v2.211q-0.172%200.242-0.328%200.242-0.117%200-0.125-0.125-0.008-0.016-0.008-0.203v-2.125h-0.523v2.289q0%200.289%200.047%200.43%200.086%200.211%200.336%200.211%200.281%200%200.602-0.352v0.312zM12%203.25v7.5q0%200.93-0.66%201.59t-1.59%200.66h-7.5q-0.93%200-1.59-0.66t-0.66-1.59v-7.5q0-0.93%200.66-1.59t1.59-0.66h7.5q0.93%200%201.59%200.66t0.66%201.59z%27%3E%3C%2Fpath%3E%3C%2Fsvg%3E') !important
  }

  .socials span:nth-child(3) {
    left:164px !important;
    top:-3px !important;
    background-image:url('data:image/svg+xml,%3Csvg%20fill%3D%27rgb%28255%2C%20255%2C%20255%29%27%20id%3D%27ww-linkedin-square%27%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20viewBox%3D%270%200%2012%2014%27%3E%3Cpath%20d%3D%27M1.852%2011.047h1.805v-5.422h-1.805v5.422zM3.773%203.953q-0.008-0.406-0.281-0.672t-0.727-0.266-0.738%200.266-0.285%200.672q0%200.398%200.277%200.668t0.723%200.27h0.008q0.461%200%200.742-0.27t0.281-0.668zM8.344%2011.047h1.805v-3.109q0-1.203-0.57-1.82t-1.508-0.617q-1.062%200-1.633%200.914h0.016v-0.789h-1.805q0.023%200.516%200%205.422h1.805v-3.031q0-0.297%200.055-0.438%200.117-0.273%200.352-0.465t0.578-0.191q0.906%200%200.906%201.227v2.898zM12%203.25v7.5q0%200.93-0.66%201.59t-1.59%200.66h-7.5q-0.93%200-1.59-0.66t-0.66-1.59v-7.5q0-0.93%200.66-1.59t1.59-0.66h7.5q0.93%200%201.59%200.66t0.66%201.59z%27%3E%3C%2Fpath%3E%3C%2Fsvg%3E') !important
  }

  
}

@media (min-width:1200px) {
  .footer {
    margin-top:0 !important
  }

  
}

.reveal.reveal-button,
a.button.reveal.reveal-button,
.home-card a.button.reveal.reveal-button,
.home-card .button.reveal.reveal-button {
  opacity:0 !important;
  visibility:visible !important;
  transform:none !important;
  transition-property:opacity !important;
  transition-duration:1s !important;
  transition-timing-function:ease !important;
  transition-delay:0s !important
}

.reveal.reveal-button.visible,
a.button.reveal.reveal-button.visible,
.home-card a.button.reveal.reveal-button.visible,
.home-card .button.reveal.reveal-button.visible {
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  transition-property:opacity !important;
  transition-duration:1s !important;
  transition-timing-function:ease !important;
  transition-delay:0s !important
}

.reveal.reveal-button,
a.button.reveal.reveal-button,
.home-card a.button.reveal.reveal-button,
.home-card .button.reveal.reveal-button,
.reveal.reveal-button.visible,
a.button.reveal.reveal-button.visible,
.home-card a.button.reveal.reveal-button.visible,
.home-card .button.reveal.reveal-button.visible {
  transition-property:opacity,
  background-color,
  border-color,
  color !important;
  transition-duration:1s,
  400ms,
  400ms,
  400ms !important;
  transition-timing-function:ease,
  ease,
  ease,
  ease !important;
  transition-delay:0s,
  0s,
  0s,
  0s !important
}

.button.reveal.reveal-button:hover,
.button.reveal.reveal-button:focus-visible,
.home-card .button.reveal.reveal-button:hover,
.home-card .button.reveal.reveal-button:focus-visible {
  background-color:rgb(0,0,0) !important;
  border-color:rgb(0,118,252) !important;
  color:#0076fc !important
}

.button.reveal.reveal-button:active,
.home-card .button.reveal.reveal-button:active {
  width:350px !important;
  height:55px !important;
  min-height:55px !important;
  max-height:55px !important;
  padding:0 !important;
  transform:none !important
}

.button.reveal.reveal-button,
.button.reveal.reveal-button:link,
.button.reveal.reveal-button:visited,
.home-card .button.reveal.reveal-button,
.home-card .button.reveal.reveal-button:link,
.home-card .button.reveal.reveal-button:visited,
.button.reveal.reveal-button.visible,
.home-card .button.reveal.reveal-button.visible {
  transition-property:opacity,
  background-color,
  border-color,
  color !important;
  transition-duration:1s,
  400ms,
  400ms,
  400ms !important;
  transition-timing-function:ease,
  ease,
  ease,
  ease !important;
  transition-delay:0s,
  0s,
  0s,
  0s !important;
  width:350px !important;
  height:55px !important;
  min-height:55px !important;
  max-height:55px !important;
  padding:0 !important;
  transform:none !important
}

.button.reveal.reveal-button:hover,
.button.reveal.reveal-button:focus-visible,
.home-card .button.reveal.reveal-button:hover,
.home-card .button.reveal.reveal-button:focus-visible {
  transition-property:opacity,
  background-color,
  border-color,
  color !important;
  transition-duration:1s,
  400ms,
  400ms,
  400ms !important;
  transition-timing-function:ease,
  ease,
  ease,
  ease !important;
  transition-delay:0s,
  0s,
  0s,
  0s !important;
  background-color:rgb(0,0,0) !important;
  border-color:rgb(0,118,252) !important;
  color:#0076fc !important;
  width:350px !important;
  height:55px !important;
  min-height:55px !important;
  max-height:55px !important;
  padding:0 !important;
  transform:none !important
}

.button.reveal.reveal-button:active,
.home-card .button.reveal.reveal-button:active,
.button.reveal.reveal-button:focus,
.home-card .button.reveal.reveal-button:focus {
  transition-property:opacity,
  background-color,
  border-color,
  color !important;
  transition-duration:1s,
  400ms,
  400ms,
  400ms !important;
  transition-delay:0s,
  0s,
  0s,
  0s !important;
  width:350px !important;
  height:55px !important;
  min-height:55px !important;
  max-height:55px !important;
  padding:0 !important;
  transform:none !important
}


/* =========================================================
   Realizacje page
========================================================= */
.realizacje-page {
  background:rgb(10,10,9);
  padding-bottom:11px
}

.realizacje-canvas {
  position:relative
}

.real-webwave-section,
.real-media-panel,
.real-title-box,
.real-banner,
.real-description,
.real-video,
.real-gallery {
  box-sizing:border-box
}

.real-title-box {
  background-color:rgb(0,0,0);
  border:1px solid rgb(79,79,79);
  border-radius:20px;
  box-shadow:none;
  color:#ffffff;
  font-family:Tahoma,
  Geneva,
  sans-serif;
  font-size:26px;
  font-weight:700;
  line-height:31px;
  text-align:center
}

.real-description {
  margin:0;
  background:none;
  border:0;
  box-shadow:none;
  color:#ffffff;
  font-family:Tahoma,
  Geneva,
  sans-serif;
  font-size:17px;
  font-weight:400;
  line-height:24px;
  text-align:center
}

.real-banner {
  overflow:hidden;
  background-color:rgb(0,0,0);
  background-repeat:repeat;
  background-position:50% 50%;
  border:1px solid rgb(79,79,79);
  border-radius:20px;
  box-shadow:none
}

.real-banner-automation {
  background-image:url('/assets/img/realizacje-bg/sterowanie-bg.webp');
  background-size:cover
}

.real-banner-security {
  background-image:url('/assets/img/realizacje-bg/cctv-bg.webp');
  background-size:auto
}

.real-banner-electrical {
  background-image:url('/assets/img/realizacje-bg/instalacje-bg.webp');
  background-size:cover
}

.real-banner-label {
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:rgb(0,0,0);
  border:1px solid rgb(79,79,79);
  border-radius:20px;
  color:#ffffff;
  font-family:Tahoma,
  Geneva,
  sans-serif;
  font-size:26px;
  font-weight:700;
  line-height:31px;
  text-align:center
}

.real-media-panel {
  position:relative;
  background-color:rgb(0,0,0);
  border:1px solid rgb(79,79,79);
  border-radius:20px;
  box-shadow:none
}

.real-video {
  overflow:hidden;
  background:#000000;
  border:1px solid rgb(79,79,79);
  border-radius:0;
  box-shadow:none
}

.real-video iframe {
  display:block;
  width:100%;
  height:100%;
  border:0
}

.real-gallery {
  overflow:hidden;
  background-color:rgba(101,121,220,0.07);
  border:1px solid rgb(79,79,79);
  border-radius:0;
  box-shadow:none
}

.ww-gallery {
  position:relative
}

.ww-gallery-stage,
.ww-gallery-slide {
  position:absolute;
  inset:0
}

.ww-gallery-slide {
  padding:0;
  cursor:pointer;
  border:0;
  opacity:0;
  background:#000000;
  transition:opacity 600ms ease
}

.ww-gallery-slide.active {
  opacity:1;
  z-index:1
}

.ww-gallery-slide img {
  width:100%;
  height:100%;
  object-fit:contain;
  background:#000000
}

.ww-gallery-nav {
  position:absolute;
  top:50%;
  z-index:3;
  width:34px;
  height:54px;
  transform:translateY(-50%);
  cursor:pointer;
  border:0;
  border-radius:0;
  background:rgba(34,34,34,.85);
  color:#ffffff;
  font-family:Tahoma,
  Geneva,
  sans-serif;
  font-size:42px;
  line-height:42px
}

.ww-gallery-prev {
  left:28px
}

.ww-gallery-next {
  right:28px
}

.ww-gallery-dots {
  position:absolute;
  left:0;
  right:0;
  bottom:13px;
  z-index:3;
  display:flex;
  justify-content:center;
  gap:7px;
  pointer-events:none
}

.ww-gallery-dots button {
  width:8px;
  height:8px;
  padding:0;
  border:1px solid rgba(255,255,255,.85);
  border-radius:50%;
  background:rgba(34,34,34,.85);
  pointer-events:auto
}

.ww-gallery-dots button.active {
  background:#ffffff
}

.realizacje-page .reveal {
  opacity:0 !important;
  visibility:visible !important;
  transform:none !important;
  transition-property:opacity !important;
  transition-duration:4s !important;
  transition-timing-function:ease !important;
  transition-delay:0s !important;
  will-change:opacity !important
}

.realizacje-page .reveal.visible {
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  transition-delay:0s !important
}

@media (min-width:1200px) {
  .realizacje-page {
    padding-top:46px
  }

  .realizacje-canvas {
    width:1200px !important;
    min-height:4676px
  }

  .real-webwave-section {
    position:relative;
    width:1200px
  }

  .real-title-box {
    width:1200px;
    height:92px;
    padding:20px;
    display:flex;
    align-items:center;
    justify-content:center
  }

  .real-banner {
    width:1200px;
    height:306px;
    margin-top:11px
  }

  .real-media-panel {
    width:1200px;
    margin-top:11px
  }

  .real-description {
    position:absolute;
    left:0;
    top:0;
    z-index:5;
    width:1200px;
    min-height:64px;
    padding:20px
  }

  .real-video {
    position:absolute;
    left:201px;
    width:798px;
    height:450px
  }

  .real-gallery {
    position:absolute;
    left:201px;
    width:798px;
    height:506px
  }

  .real-section-automation {
    height:1531px
  }

  .real-section-automation .real-media-panel {
    height:1079px
  }

  .real-section-automation .real-video-1 {
    top:94px
  }

  .real-section-automation .real-video-2 {
    top:592px
  }

  .real-section-security {
    height:2237px
  }

  .real-section-security .real-media-panel {
    height:1633px
  }

  .real-section-security .real-video-1 {
    top:94px
  }

  .real-section-security .real-video-2 {
    top:592px
  }

  .real-section-security .real-gallery {
    top:1090px
  }

  .real-section-security .real-banner {
    position:relative
  }

  .real-section-security .real-banner-label {
    position:relative;
    left:24px;
    top:auto;
    width:1137px;
    min-height:142px;
    margin-top:11px;
    padding:20px
  }

  .real-section-electrical {
    height:1076px
  }

  .real-section-electrical .real-media-panel {
    height:625px
  }

  .real-section-electrical .real-gallery {
    top:91px
  }

  
}

@media (max-width:1199px) {
  .realizacje-page {
    padding:30px 0 20px
  }

  .real-webwave-section {
    margin-bottom:34px
  }

  .real-title-box {
    min-height:76px;
    padding:18px;
    font-size:clamp(22px,4.2vw,26px);
    line-height:1.2
  }

  .real-banner {
    height:clamp(180px,30vw,306px);
    margin-top:12px
  }

  .real-banner-label {
    position:static;
    min-height:92px;
    margin:56px 20px 0;
    padding:16px;
    font-size:clamp(22px,4.2vw,26px);
    line-height:1.2
  }

  .real-media-panel {
    margin-top:12px;
    padding:20px
  }

  .real-description {
    margin-bottom:20px;
    font-size:17px;
    line-height:24px
  }

  .real-video {
    width:100%;
    aspect-ratio:16 / 9;
    margin-bottom:20px
  }

  .real-gallery {
    width:100%;
    aspect-ratio:798 / 506;
    min-height:260px
  }

  .real-gallery+.real-gallery {
    margin-top:20px
  }

  
}

.real-banner-label-below {
  position:relative;
  margin-top:11px
}

.realizacje-page .real-title-box,
.realizacje-page .real-banner-label {
  color:#0064fa !important
}

.realizacje-page .real-youtube-play {
  background-color:#ff0000 !important;
  border-radius:13px !important;
  box-shadow:none !important;
  transition:background-color 400ms ease,
  opacity 400ms ease !important
}

.realizacje-page .real-video-link a:hover .real-youtube-play,
.realizacje-page .real-video-link a:focus-visible .real-youtube-play {
  background-color:#ff0000 !important;
  opacity:.86 !important
}

.realizacje-page .real-youtube-play::after {
  border-left-color:#ffffff !important
}

.realizacje-page+.footer,
.realizacje-page+.footer .footer-grid {
  margin-top:0 !important
}

.realizacje-page {
  padding-bottom:0 !important
}

@media (min-width:1200px) {
  .realizacje-canvas {
    min-height:4717px !important
  }

  .real-section-security {
    position:relative !important
  }

  .real-section-security .real-banner {
    position:relative !important;
    z-index:23 !important
  }

  .real-section-security .real-banner-label,
  .real-section-security .real-banner-label-below {
    position:absolute !important;
    z-index:21 !important;
    left:24px !important;
    top:160px !important;
    width:1137px !important;
    height:142px !important;
    min-height:142px !important;
    margin:0 !important;
    padding:20px !important
  }

  .real-section-security .real-media-panel {
    margin-top:11px !important
  }

  
}

@media (min-width:1200px) {
  .real-section-security {
    height:2076px !important
  }

  .realizacje-page .real-title-box,
  .realizacje-page .real-banner-label {
    font-family:Tahoma,
    Geneva,
    sans-serif !important;
    font-size:30px !important;
    line-height:36px !important;
    font-weight:700 !important;
    color:#0064fa !important
  }

  
}

@media (max-width:1199px) {
  .realizacje-page .real-title-box,
  .realizacje-page .real-banner-label {
    font-size:clamp(24px,4.8vw,30px) !important;
    line-height:1.2 !important
  }

  
}

@media (min-width:1200px) {
  .realizacje-page {
    padding-top:46px !important;
    padding-bottom:0 !important
  }

  .realizacje-canvas {
    width:1200px !important;
    min-height:4671px !important
  }

  .realizacje-page .real-title-box,
  .realizacje-page .real-banner-label {
    font-family:Tahoma,
    Geneva,
    sans-serif !important;
    font-size:42px !important;
    line-height:50px !important;
    font-weight:700 !important;
    color:#0064fa !important;
    text-align:center !important
  }

  .realizacje-page .real-title-box {
    width:1200px !important;
    height:92px !important;
    padding:20px !important
  }

  .real-section-automation {
    height:1531px !important
  }

  .real-section-security {
    height:2084px !important;
    position:relative !important
  }

  .real-section-electrical {
    height:1056px !important
  }

  .real-section-electrical .real-media-panel {
    height:625px !important
  }

  .real-section-electrical .real-gallery {
    top:91px !important
  }

  .real-section-security .real-banner {
    position:relative !important;
    z-index:30 !important
  }

  .real-section-security .real-banner-label,
  .real-section-security .real-banner-label-below {
    position:absolute !important;
    z-index:1 !important;
    left:24px !important;
    top:160px !important;
    width:1137px !important;
    height:142px !important;
    min-height:142px !important;
    margin:0 !important;
    padding:20px !important;
    opacity:1 !important;
    visibility:visible !important;
    transition:none !important;
    will-change:auto !important;
    pointer-events:none !important
  }

  .real-section-security .real-banner-label.visible,
  .real-section-security .real-banner-label-below.visible {
    opacity:1 !important;
    visibility:visible !important;
    transition:none !important
  }

  .real-section-security .real-media-panel {
    margin-top:11px !important
  }

  
}

@media (max-width:1199px) {
  .realizacje-page .real-title-box,
  .realizacje-page .real-banner-label {
    font-size:clamp(28px,5vw,42px) !important;
    line-height:1.2 !important;
    color:#0064fa !important
  }

  
}

.realizacje-page .real-description {
  text-align:left !important
}

.realizacje-page .real-banner-label-below {
  display:none !important
}

@media (min-width:1200px) {
  .realizacje-page .real-description {
    width:1200px !important;
    max-width:1200px !important;
    min-height:64px !important;
    padding:20px !important;
    text-align:left !important
  }

  
}

.realizacje-page .real-banner-automation,
.realizacje-page .real-banner-security,
.realizacje-page .real-banner-electrical {
  background-position:55% 50% !important
}

@media (min-width:1200px) {
  .realizacje-page .real-banner-automation,
  .realizacje-page .real-banner-security,
  .realizacje-page .real-banner-electrical {
    background-position:55% 50% !important
  }

  
}

.realizacje-page .real-banner-automation,
.realizacje-page .real-banner-security,
.realizacje-page .real-banner-electrical {
  background-position:50% 50% !important
}

@media (min-width:1200px) {
  .realizacje-page .real-description {
    left:74px !important;
    width:1052px !important;
    max-width:1052px !important;
    padding:20px !important;
    text-align:left !important
  }

  
}

@media (min-width:1200px) {
  .realizacje-page .real-description {
    left:137px !important;
    width:989px !important;
    max-width:989px !important;
    padding:20px !important;
    text-align:left !important
  }

  
}

@media (min-width:1200px) {
  .realizacje-page .real-description {
    left:11px !important;
    width:1115px !important;
    max-width:1115px !important;
    padding:20px !important;
    text-align:left !important
  }

  
}

@media (min-width:1200px) {
  .realizacje-page .real-description {
    left:20px !important;
    width:1106px !important;
    max-width:1106px !important;
    padding:20px !important;
    text-align:left !important
  }

  
}


/* =========================================================
   Products and product detail pages
========================================================= */
.products-page,
.product-detail-page {
  background:rgb(10,10,9);
  padding-bottom:0 !important
}

.products-page .products-canvas,
.product-detail-page .product-detail-canvas {
  width:1200px;
  margin-left:auto;
  margin-right:auto;
  position:relative
}

.products-title-box,
.product-detail-title-box {
  width:1200px;
  height:92px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:#000;
  border:1px solid rgb(79,79,79);
  border-radius:20px;
  color:#0064fa;
  font-family:Tahoma,
  Geneva,
  sans-serif;
  font-size:42px;
  line-height:50px;
  font-weight:700;
  text-align:center
}

.products-panel,
.product-detail-panel {
  position:relative;
  box-sizing:border-box;
  width:1200px;
  margin-top:12px;
  padding:20px;
  background:#000;
  border:1px solid rgb(79,79,79);
  border-radius:20px
}

.products-panel {
  height:2334px
}

.product-detail-panel {
  height:916px
}

.product-row {
  position:absolute;
  left:0;
  width:1200px;
  height:180px
}

.product-row:nth-child(1) {
  top:65px
}

.product-row:nth-child(2) {
  top:294px
}

.product-row:nth-child(3) {
  top:529px
}

.product-row:nth-child(4) {
  top:758px
}

.product-row:nth-child(5) {
  top:991px
}

.product-row:nth-child(6) {
  top:1220px
}

.product-row:nth-child(7) {
  top:1453px
}

.product-row:nth-child(8) {
  top:1682px
}

.product-row:nth-child(9) {
  top:1915px
}

.product-row:nth-child(10) {
  top:2144px
}

.product-row-image {
  position:absolute;
  left:42px;
  top:2px;
  width:227px;
  height:152px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:transparent
}

.product-row-image img {
  display:block;
  width:227px;
  height:152px;
  object-fit:contain
}

.product-row-text {
  position:absolute;
  left:335px;
  top:0;
  width:835px;
  min-height:156px;
  box-sizing:border-box;
  padding:5px;
  background:rgba(34,0,255,0.05);
  border:1px solid rgb(79,79,79);
  border-radius:10px;
  color:#fff;
  font-family:Tahoma,
  Geneva,
  sans-serif;
  font-size:17px;
  line-height:24px;
  font-weight:400
}

.product-row-text h2 {
  margin:0 0 12px 0;
  color:#fff;
  font-family:Tahoma,
  Geneva,
  sans-serif;
  font-size:17px;
  line-height:24px;
  font-weight:700
}

.product-row-text p {
  margin:0;
  color:#fff;
  font-family:Tahoma,
  Geneva,
  sans-serif;
  font-size:17px;
  line-height:24px;
  font-weight:400
}

.product-row-button,
.product-back-button {
  position:absolute;
  width:139px;
  height:38px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  background:rgb(0,118,252);
  border:1px solid rgb(4,0,252);
  border-radius:10px;
  color:#fff;
  font-family:Tahoma,
  Geneva,
  sans-serif;
  font-size:17px;
  line-height:24px;
  font-weight:700;
  text-decoration:none;
  text-align:center;
  transition:background-color 400ms ease,
  border-color 400ms ease,
  color 400ms ease,
  opacity 1s ease !important
}

.product-row-button {
  left:1022px;
  top:109px
}

.product-row-button:hover,
.product-row-button:focus-visible,
.product-back-button:hover,
.product-back-button:focus-visible {
  background:#000 !important;
  border-color:rgb(0,118,252) !important;
  color:#0076fc !important
}

.product-detail-image {
  position:absolute;
  left:51px;
  top:50px;
  width:381px;
  height:225px;
  display:flex;
  align-items:center;
  justify-content:center
}

.product-detail-image img {
  display:block;
  width:381px;
  height:225px;
  object-fit:contain
}

.product-detail-text {
  position:absolute;
  left:464px;
  top:50px;
  width:688px;
  height:380px;
  box-sizing:border-box;
  padding:5px;
  color:#fff;
  font-family:Tahoma,
  Geneva,
  sans-serif;
  font-size:17px;
  line-height:24px
}

.product-detail-text h2 {
  margin:0 0 14px;
  color:#fff;
  font-size:24px;
  line-height:29px;
  font-weight:700
}

.product-detail-text p,
.product-detail-text li {
  color:#fff;
  font-size:17px;
  line-height:24px
}

.product-detail-text ul {
  margin:14px 0 0 20px;
  padding:0
}

.product-detail-video {
  position:absolute;
  left:201px;
  top:431px;
  width:798px;
  height:450px;
  overflow:hidden;
  background:#000;
  border:1px solid rgb(79,79,79);
  box-sizing:border-box
}

.product-detail-video iframe {
  display:block;
  width:100%;
  height:100%;
  border:0
}

.product-back-button {
  right:48px;
  bottom:35px
}

.products-page .reveal,
.product-detail-page .reveal {
  opacity:0 !important;
  visibility:visible !important;
  transform:none !important;
  transition-property:opacity !important;
  transition-duration:4s !important;
  transition-timing-function:ease !important;
  transition-delay:0s !important
}

.products-page .product-row-button.reveal {
  transition-property:opacity,
  background-color,
  border-color,
  color !important;
  transition-duration:1s,
  400ms,
  400ms,
  400ms !important
}

.products-page .reveal.visible,
.product-detail-page .reveal.visible {
  opacity:1 !important
}

.products-page+.footer,
.product-detail-page+.footer {
  margin-top:0 !important
}

@media (min-width:1200px) {
  .products-page {
    padding-top:30px !important
  }

  .product-detail-page {
    padding-top:30px !important
  }

  .products-canvas {
    min-height:2438px
  }

  .product-detail-canvas {
    min-height:1020px
  }

  
}

@media (max-width:1199px) {
  .products-page,
  .product-detail-page {
    padding:30px 16px 0 !important
  }

  .products-page .products-canvas,
  .product-detail-page .product-detail-canvas,
  .products-title-box,
  .product-detail-title-box,
  .products-panel,
  .product-detail-panel {
    width:100% !important
  }

  .products-title-box,
  .product-detail-title-box {
    height:auto;
    min-height:76px;
    font-size:clamp(28px,5vw,42px);
    line-height:1.2
  }

  .products-panel,
  .product-detail-panel {
    height:auto;
    padding:18px
  }

  .product-row,
  .product-row-image,
  .product-row-text,
  .product-row-button,
  .product-detail-image,
  .product-detail-text,
  .product-detail-video,
  .product-back-button {
    position:static;
    width:100% !important;
    height:auto !important
  }

  .product-row {
    display:grid;
    grid-template-columns:minmax(180px,227px) 1fr;
    gap:18px;
    margin-bottom:28px
  }

  .product-row-image img {
    width:227px;
    height:152px;
    max-width:100%
  }

  .product-row-button,
  .product-back-button {
    margin-top:12px;
    max-width:160px;
    height:38px !important
  }

  .product-detail-image {
    margin:20px auto
  }

  .product-detail-image img {
    max-width:100%;
    height:auto
  }

  .product-detail-text {
    margin-bottom:20px
  }

  .product-detail-video {
    aspect-ratio:16 / 9
  }

  
}

@media (min-width:1200px) {
  .products-page {
    padding-top:39px !important;
    padding-bottom:0 !important
  }

  .products-page .products-canvas {
    width:1200px !important;
    min-height:2438px !important
  }

  .products-page .products-title-box {
    width:1200px !important;
    height:92px !important;
    padding:20px !important;
    font-family:Tahoma,
    Geneva,
    sans-serif !important;
    font-size:42px !important;
    line-height:50px !important;
    font-weight:700 !important;
    color:#0064fa !important
  }

  .products-page .products-panel {
    margin-top:12px !important;
    height:2334px !important;
    padding:20px !important
  }

  .products-page .product-row-image {
    left:42px !important;
    top:2px !important;
    width:227px !important;
    height:152px !important
  }

  .products-page .product-row-image img {
    width:227px !important;
    height:152px !important;
    object-fit:contain !important
  }

  .products-page .product-row-text {
    left:335px !important;
    top:0 !important;
    width:835px !important;
    min-height:156px !important;
    height:156px !important;
    padding:8px 10px !important;
    font-family:Tahoma,
    Geneva,
    sans-serif !important;
    font-size:17px !important;
    line-height:24px !important;
    font-weight:400 !important;
    color:#ffffff !important
  }

  .products-page .product-row-text h2 {
    margin:0 0 11px 0 !important;
    font-family:Tahoma,
    Geneva,
    sans-serif !important;
    font-size:17px !important;
    line-height:24px !important;
    font-weight:700 !important;
    color:#ffffff !important
  }

  .products-page .product-row-text p {
    margin:0 !important;
    font-family:Tahoma,
    Geneva,
    sans-serif !important;
    font-size:17px !important;
    line-height:24px !important;
    font-weight:400 !important;
    color:#ffffff !important
  }

  .products-page .product-row-button {
    left:1022px !important;
    top:109px !important;
    width:139px !important;
    height:38px !important;
    font-family:Tahoma,
    Geneva,
    sans-serif !important;
    font-size:17px !important;
    line-height:24px !important;
    font-weight:700 !important
  }

  .products-page+.footer {
    margin-top:0 !important
  }

  
}

@media (min-width:1200px) {
  .products-page {
    padding-top:30px !important;
    padding-bottom:0 !important
  }

  .products-page .products-canvas {
    width:1200px !important;
    min-height:2452px !important
  }

  .products-page .products-title-box {
    width:1200px !important;
    height:92px !important;
    padding:20px !important
  }

  .products-page .products-panel {
    margin-top:12px !important;
    width:1200px !important;
    height:2334px !important;
    padding:20px !important
  }

  .products-page .product-row-text {
    left:335px !important;
    top:0 !important;
    width:835px !important;
    height:156px !important;
    min-height:156px !important;
    padding:5px !important;
    font-family:Tahoma,
    Geneva,
    sans-serif !important;
    font-size:17px !important;
    line-height:24px !important;
    font-weight:400 !important;
    color:#ffffff !important
  }

  .products-page .product-row-text h2 {
    margin:0 0 24px 0 !important;
    padding:0 !important;
    font-family:Tahoma,
    Geneva,
    sans-serif !important;
    font-size:17px !important;
    line-height:24px !important;
    font-weight:400 !important;
    color:#ffffff !important
  }

  .products-page .product-row-text p {
    margin:0 !important;
    padding:0 !important;
    font-family:Tahoma,
    Geneva,
    sans-serif !important;
    font-size:17px !important;
    line-height:24px !important;
    font-weight:400 !important;
    color:#ffffff !important
  }

  .products-page .product-row-button {
    left:1022px !important;
    top:109px !important;
    width:139px !important;
    height:38px !important
  }

  .products-page .product-row.reveal,
  .products-page .product-row-button.reveal,
  .products-page .products-panel.reveal {
    transition-delay:0s !important
  }

  
}

@media (min-width:1200px) {
  .products-page .product-row:nth-child(n+6):nth-child(-n+10) .product-row-text {
    padding:5px !important;
    overflow:hidden !important
  }

  .products-page .product-row:nth-child(n+6):nth-child(-n+10) .product-row-text h2 {
    margin:0 !important;
    padding:0 !important;
    font-weight:400 !important;
    line-height:24px !important
  }

  .products-page .product-row:nth-child(n+6):nth-child(-n+10) .product-row-text p {
    margin:0 !important;
    padding:0 !important;
    line-height:24px !important
  }

  
}


/* =========================================================
   About page
========================================================= */
.about-page {
  background:#000;
  padding-top:30px;
  padding-bottom:0
}

.about-canvas {
  position:relative;
  width:min(1200px,calc(100vw - 40px));
  margin:0 auto
}

.about-title-box,
.about-section-title,
.about-small-title,
.about-feature,
.about-description-box {
  box-sizing:border-box;
  background-color:rgb(0,0,0);
  border:1px solid rgb(79,79,79);
  border-radius:20px;
  box-shadow:none;
  color:#fff;
  font-family:Tahoma,
  Geneva,
  sans-serif
}

.about-title-box,
.about-section-title {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:92px;
  padding:20px
}

.about-title-box h1,
.about-section-title h2 {
  margin:0;
  color:#0064fa;
  font-family:Tahoma,
  Geneva,
  sans-serif;
  font-size:42px;
  line-height:50px;
  font-weight:700;
  text-align:center
}

.about-hero-banner {
  width:100%;
  height:306px;
  margin-top:13px;
  background-color:#000;
  background-image:url('/assets/img/stm32.webp');
  background-size:100% 100%;
  background-position:50% 50%;
  background-repeat:repeat;
  border:1px solid rgb(79,79,79);
  border-radius:20px;
  overflow:hidden
}

.about-row {
  display:grid;
  grid-template-columns:570px 570px;
  column-gap:59px
}

.about-small-title {
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  width:570px;
  height:78px;
  padding:20px
}

.about-small-title h2 {
  margin:0;
  color:#0064fa;
  font-family:Tahoma,
  Geneva,
  sans-serif;
  font-size:26px;
  line-height:31px;
  font-weight:700;
  text-align:center
}

.about-logo-stm {
  position:absolute;
  left:456px;
  top:0;
  width:99px;
  height:78px;
  object-fit:contain
}

.about-esp-icon,
.about-win-icon,
.about-kicad-logo {
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-family:Tahoma,
  Geneva,
  sans-serif;
  font-weight:700;
  pointer-events:none
}

.about-esp-icon {
  right:18px;
  top:11px;
  width:58px;
  height:55px;
  border-radius:8px;
  color:#ff3333;
  font-size:14px
}

.about-win-icon {
  right:68px;
  top:11px;
  width:52px;
  height:55px;
  color:#0088ff;
  font-size:42px
}

.about-kicad-logo {
  right:18px;
  top:15px;
  width:128px;
  height:48px;
  color:#fff;
  font-size:20px;
  letter-spacing:.5px
}

.about-feature {
  width:570px;
  position:relative;
  overflow:hidden;
  padding:20px
}

.about-feature-image {
  height:247px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow:hidden
}

.about-feature-image img {
  display:block;
  width:100%;
  max-width:450px;
  height:auto;
  object-fit:contain
}

.about-feature-text {
  position:absolute;
  left:8px;
  right:8px;
  top:267px;
  bottom:8px;
  padding:0;
  color:#fff;
  font-family:Tahoma,
  Geneva,
  sans-serif;
  font-size:17px;
  line-height:24px;
  font-weight:400;
  text-align:left
}

.about-feature-text p {
  margin:0 0 0 0;
  font-size:17px;
  line-height:24px;
  font-weight:400
}

.about-feature-text ul,
.about-description-box ul {
  margin:0;
  padding-left:30px;
  list-style-type:disc
}

.about-feature-text li,
.about-description-box li {
  margin:0;
  padding:0;
  color:#fff;
  font-size:17px;
  line-height:24px;
  font-weight:400
}

.about-description-box {
  width:1167px;
  min-height:352px;
  margin-left:19px;
  padding:8px;
  border:0;
  border-radius:0;
  color:#fff;
  font-size:17px;
  line-height:24px
}

.about-description-box h2,
.about-description-box p {
  margin:0;
  color:#fff;
  font-family:Tahoma,
  Geneva,
  sans-serif;
  font-size:17px;
  line-height:24px;
  font-weight:400
}

.about-page .reveal {
  opacity:0 !important;
  visibility:visible !important;
  transform:none !important;
  transition-property:opacity !important;
  transition-duration:4s !important;
  transition-timing-function:ease !important;
  transition-delay:0s !important;
  will-change:opacity !important
}

.about-page .reveal.visible {
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important
}

.about-page+.footer {
  margin-top:0 !important
}

@media (min-width:1200px) {
  .about-canvas {
    width:1200px !important;
    min-height:2324px !important
  }

  .about-title-box {
    margin-top:0
  }

  .about-hero-banner {
    margin-top:13px
  }

  .about-title-stm,
  .about-title-esp {
    margin-top:31px;
    display:inline-flex;
    vertical-align:top
  }

  .about-title-stm {
    margin-left:0
  }

  .about-title-esp {
    margin-left:55px
  }

  .about-feature-stm,
  .about-feature-esp {
    height:657px;
    margin-top:12px;
    display:inline-block;
    vertical-align:top
  }

  .about-feature-stm {
    margin-left:0
  }

  .about-feature-esp {
    margin-left:55px
  }

  .about-title-win,
  .about-title-pcb {
    margin-top:31px;
    display:inline-flex;
    vertical-align:top
  }

  .about-title-win {
    margin-left:0
  }

  .about-title-pcb {
    margin-left:55px
  }

  .about-feature-win,
  .about-feature-pcb {
    height:500px;
    margin-top:12px;
    display:inline-block;
    vertical-align:top
  }

  .about-feature-win {
    margin-left:0
  }

  .about-feature-pcb {
    margin-left:55px
  }

  .about-feature-win .about-feature-text,
  .about-feature-pcb .about-feature-text {
    top:254px
  }

  .about-section-title {
    margin-top:31px
  }

  .about-description-box {
    margin-top:12px
  }

  
}

@media (max-width:1199px) {
  .about-page {
    padding-top:30px
  }

  .about-title-box,
  .about-section-title {
    height:auto;
    min-height:76px
  }

  .about-title-box h1,
  .about-section-title h2 {
    font-size:clamp(30px,6vw,42px);
    line-height:1.2
  }

  .about-hero-banner {
    height:clamp(180px,30vw,306px);
    margin-top:12px
  }

  .about-small-title {
    width:100%;
    height:78px;
    margin-top:24px
  }

  .about-feature {
    width:100%;
    min-height:560px;
    margin-top:12px
  }

  .about-feature-text {
    position:static;
    margin-top:20px
  }

  .about-description-box {
    width:100%;
    margin:12px 0 0
  }

  .about-logo-stm {
    right:18px;
    left:auto
  }

  
}

.about-hero-banner {
  background-image:url('/assets/img/about/electronics-workbench-hero.webp') !important;
  background-size:100% 100% !important;
  background-position:50% 50% !important
}

.about-logo-stm,
.about-esp-icon,
.about-win-icon,
.about-kicad-logo {
  object-fit:contain !important;
  pointer-events:none !important
}

.about-esp-icon,
.about-win-icon,
.about-kicad-logo {
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  font-size:0 !important;
  line-height:0 !important
}

@media (min-width:1200px) {
  .about-logo-stm {
    left:456px !important;
    top:0 !important;
    width:99px !important;
    height:78px !important
  }

  .about-esp-icon {
    right:18px !important;
    top:11px !important;
    width:55px !important;
    height:55px !important
  }

  .about-win-icon {
    right:68px !important;
    top:11px !important;
    width:56px !important;
    height:55px !important
  }

  .about-kicad-logo {
    right:18px !important;
    top:13px !important;
    width:127px !important;
    height:52px !important
  }

  .about-feature-stm .about-feature-image img {
    width:450px !important;
    max-width:450px !important;
    height:auto !important
  }

  .about-feature-esp .about-feature-image img {
    width:450px !important;
    max-width:450px !important;
    height:auto !important
  }

  .about-feature-win .about-feature-image img {
    width:450px !important;
    max-width:450px !important;
    height:auto !important
  }

  .about-feature-pcb .about-feature-image img {
    width:450px !important;
    max-width:450px !important;
    height:auto !important
  }

  .about-feature-image {
    height:247px !important;
    align-items:flex-start !important
  }

  
}

.about-page .about-feature-text,
.about-page .about-description-box {
  font-family:Tahoma,
  Geneva,
  sans-serif !important;
  font-size:17px !important;
  line-height:24px !important;
  font-weight:400 !important;
  color:#ffffff !important;
  text-align:left !important
}

.about-page .about-feature-text p,
.about-page .about-feature-text ul,
.about-page .about-feature-text li,
.about-page .about-description-box p,
.about-page .about-description-box h2,
.about-page .about-description-box ul,
.about-page .about-description-box li {
  font-family:Tahoma,
  Geneva,
  sans-serif !important;
  font-size:17px !important;
  line-height:24px !important;
  color:#ffffff !important;
  font-weight:400 !important
}

.about-page .about-feature-text p,
.about-page .about-description-box p,
.about-page .about-description-box h2 {
  margin:0 !important;
  padding:0 !important
}

.about-page .about-feature-text ul,
.about-page .about-description-box ul {
  margin:0 !important;
  padding-left:20px !important;
  list-style-position:outside !important
}

.about-page .about-feature-text li,
.about-page .about-description-box li {
  margin:0 !important;
  padding:0 !important
}

.about-page .about-description-box strong {
  font-weight:700 !important
}

@media (min-width:1200px) {
  .about-page {
    padding-top:34px !important
  }

  .about-canvas {
    min-height:2360px !important
  }

  .about-feature-text {
    left:8px !important;
    right:8px !important;
    top:267px !important;
    bottom:auto !important;
    height:390px !important;
    padding:0 !important;
    overflow:visible !important
  }

  .about-feature-win .about-feature-text,
  .about-feature-pcb .about-feature-text {
    top:254px !important;
    height:232px !important
  }

  .about-description-box {
    width:1167px !important;
    min-height:352px !important;
    margin-left:19px !important;
    padding:8px !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important
  }

  
}

.about-page .about-feature-text .about-subline {
  margin:0 0 0 30px !important;
  padding:0 !important;
  font-family:Tahoma,
  Geneva,
  sans-serif !important;
  font-size:17px !important;
  line-height:24px !important;
  font-weight:400 !important;
  color:#ffffff !important
}

.about-page .about-feature-text ul {
  padding-left:30px !important
}

.about-body {
  background:rgb(0,0,0) !important
}

.about-page {
  background:rgb(0,0,0) !important
}

.about-page .reveal,
.about-page .reveal.reveal-bottom,
.about-page .reveal.reveal-top {
  transition-duration:4s !important
}

@media (min-width:1200px) {
  .about-canvas {
    min-height:2395px !important
  }

  .about-description-box {
    width:1200px !important;
    min-height:352px !important;
    margin-left:0 !important;
    padding:20px !important;
    box-sizing:border-box !important;
    border:1px solid rgb(79,79,79) !important;
    border-radius:20px !important;
    background:rgb(0,0,0) !important;
    overflow:hidden !important
  }

  .about-feature-stm .about-feature-image img {
    width:450px !important;
    height:auto !important;
    max-height:234px !important;
    object-fit:contain !important
  }

  .about-feature-esp .about-feature-image img {
    width:auto !important;
    height:234px !important;
    max-width:450px !important;
    object-fit:contain !important
  }

  .about-feature-win .about-feature-image img {
    width:450px !important;
    height:auto !important;
    max-height:221px !important;
    object-fit:contain !important
  }

  .about-feature-pcb .about-feature-image img {
    width:auto !important;
    height:221px !important;
    max-width:450px !important;
    object-fit:contain !important
  }

  
}

@media (max-width:1199px) {
  .about-description-box {
    padding:20px !important;
    border:1px solid rgb(79,79,79) !important;
    border-radius:20px !important;
    background:rgb(0,0,0) !important
  }

  .about-feature-esp .about-feature-image img,
  .about-feature-pcb .about-feature-image img {
    max-height:230px !important;
    width:auto !important;
    margin-left:auto !important;
    margin-right:auto !important;
    object-fit:contain !important
  }

  
}

body.about-body,
.about-body,
.about-page {
  background:#0A0A09 !important
}

@media (min-width:1200px) {
  .about-canvas {
    min-height:auto !important;
    padding-bottom:0 !important;
    margin-bottom:0 !important
  }

  .about-page {
    padding-bottom:0 !important
  }

  .about-page+.footer {
    margin-top:0 !important
  }

  .about-win-icon {
    right:18px !important
  }

  
}

@media (min-width:1200px) {
  .products-page,
  .realizacje-page,
  .about-page,
  .product-detail-page {
    padding-top:30px !important
  }

  .products-page .products-canvas,
  .realizacje-page .realizacje-canvas,
  .about-page .about-canvas,
  .product-detail-page .product-detail-canvas {
    width:1200px !important;
    margin-left:auto !important;
    margin-right:auto !important
  }

  .products-page .products-title-box,
  .realizacje-page .real-title-box,
  .about-page .about-title-box,
  .product-detail-page .product-detail-title-box {
    width:1200px !important;
    height:92px !important;
    min-height:92px !important;
    margin-top:0 !important;
    box-sizing:border-box !important;
    padding:20px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background-color:#000000 !important;
    border:1px solid rgb(79,79,79) !important;
    border-radius:20px !important
  }

  .about-page .about-title-box h1,
  .products-page .products-title-box,
  .realizacje-page .real-title-box,
  .product-detail-page .product-detail-title-box {
    font-family:Tahoma,
    Geneva,
    sans-serif !important;
    font-size:42px !important;
    line-height:50px !important;
    font-weight:700 !important;
    color:#0064fa !important;
    text-align:center !important
  }

  
}

@media (min-width:1200px) {
  .realizacje-page,
  .products-page,
  .about-page,
  .product-detail-page {
    padding-bottom:20px !important
  }

  .realizacje-page+.footer,
  .products-page+.footer,
  .about-page+.footer,
  .product-detail-page+.footer {
    margin-top:0 !important
  }

  
}

@media (max-width:1199px) {
  .realizacje-page,
  .products-page,
  .about-page,
  .product-detail-page {
    padding-bottom:20px !important
  }

  
}

@media (min-width:1200px) {
  .products-page,
  .realizacje-page,
  .about-page,
  .product-detail-page {
    padding-bottom:31px !important
  }

  .products-page .products-canvas {
    min-height:2438px !important
  }

  .product-detail-page .product-detail-canvas {
    min-height:1020px !important
  }

  .realizacje-page .realizacje-canvas {
    min-height:4671px !important
  }

  .about-page .about-canvas {
    min-height:0 !important;
    padding-bottom:0 !important;
    margin-bottom:0 !important
  }

  .realizacje-page+.footer,
  .products-page+.footer,
  .about-page+.footer,
  .product-detail-page+.footer {
    margin-top:0 !important
  }

  
}

@media (min-width:1200px) {
  .realizacje-page,
  .products-page,
  .about-page,
  .product-detail-page {
    padding-bottom:20px !important
  }

  .realizacje-page+.footer,
  .products-page+.footer,
  .about-page+.footer,
  .product-detail-page+.footer {
    margin-top:0 !important
  }

  
}

@media (max-width:1199px) {
  .realizacje-page,
  .products-page,
  .about-page,
  .product-detail-page {
    padding-bottom:20px !important
  }

  
}

@media (min-width:1200px) {
  .realizacje-page .realizacje-canvas {
    min-height:4660px !important
  }

  
}

@media (min-width:1200px) {
  body .realizacje-page+footer.footer,
  body .realizacje-page+.footer {
    margin-top:-11px !important;
    position:relative !important;
    z-index:2 !important
  }

  
}


/* Lightweight YouTube embeds - thumbnails first, iframe only after click */
.youtube-lite {
  position:relative;
  display:block;
  width:100%;
  height:100%;
  padding:0;
  overflow:hidden;
  cursor:pointer;
  background:#000000;
  border:0;
}
.youtube-lite img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.youtube-lite:hover .real-youtube-play,
.youtube-lite:focus-visible .real-youtube-play {
  background:rgba(0,118,252,.85);
}
.real-video iframe,
.product-detail-video iframe,
.youtube-lite iframe {
  display:block;
  width:100%;
  height:100%;
  border:0;
}




/* Local YouTube thumbnail: preserve original video box layout */
.youtube-lite {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 0 !important;
  padding: 0 !important;
  margin: 0;
  background: #000 !important;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none !important;
  cursor: pointer;
}

.youtube-lite img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.youtube-lite::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* =========================================================
   MOBILE HOME FINAL — scalable, isolated from desktop
   Desktop styles above are untouched.
========================================================= */
@media screen and (max-width:767px) {
  :root {
    --mto-mobile-w: min(318px, calc(100vw - 54px));
    --mto-gap-main: clamp(14px, 3.8vw, 28px);
    --mto-gap-inner: clamp(10px, 2.7vw, 12px);
    --mto-radius-big: 20px;
    --mto-radius-small: 10px;
  }

  html,
  body {
    width:100%;
    min-width:0;
    overflow-x:hidden;
    background:rgb(10,10,9);
  }

  body main,
  body main .hero,
  body main .hero-webwave,
  body main .section,
  body main .home-cards-section {
    width:100%;
    max-width:100%;
    margin-left:0;
    margin-right:0;
    padding-left:0;
    padding-right:0;
    overflow-x:hidden;
  }

  body .container,
  body main .hero-webwave > .container,
  body main .home-cards-section > .container {
    box-sizing:border-box;
    width:var(--mto-mobile-w);
    max-width:var(--mto-mobile-w);
    margin-left:auto;
    margin-right:auto;
    padding-left:0;
    padding-right:0;
  }

  /* Header mobile */
  body .site-header {
    height:76px;
    min-height:76px;
    max-height:76px;
    padding:0;
    background:rgb(10,10,9);
    overflow:visible;
  }

  body .site-header::before {
    top:9px;
    height:54px;
    background:rgb(0,5,10);
    border-top:1px solid rgba(37,102,232,.55);
    border-bottom:1px solid rgba(37,102,232,.55);
    box-shadow:0 0 3px rgba(37,102,232,1);
  }

  body .nav {
    position:relative;
    display:block;
    width:var(--mto-mobile-w);
    max-width:var(--mto-mobile-w);
    height:76px;
    min-height:76px;
    max-height:76px;
    margin-left:auto;
    margin-right:auto;
    padding:0;
  }

  body .brand {
    position:absolute;
    left:-5px;
    top:50%;
    transform:translateY(-50%);
    width:clamp(190px, 58vw, 218px);
    max-width:clamp(190px, 58vw, 218px);
    height:48px;
    min-height:48px;
    max-height:48px;
    margin:0;
    padding:0;
    display:flex;
    align-items:center;
    gap:4px;
    color:#0048ff;
    background:transparent;
    font-family:Tahoma,Geneva,sans-serif;
    font-size:clamp(18px, 5.1vw, 20px);
    font-weight:700;
    line-height:1.2;
    overflow:visible;
  }

  body .brand img {
    display:none;
  }

  body .brand::before {
    content:"";
    display:block;
    flex:0 0 clamp(54px, 16vw, 62px);
    width:clamp(54px, 16vw, 62px);
    height:clamp(39px, 11.8vw, 45px);
    min-width:clamp(54px, 16vw, 62px);
    min-height:clamp(39px, 11.8vw, 45px);
    background-image:url("/assets/img/logo-webwave-header.webp");
    background-repeat:no-repeat;
    background-position:center center;
    background-size:contain;
  }

  body .brand span {
    display:block;
    width:auto;
    height:auto;
    margin:0;
    padding:0;
    color:#0048ff;
    font-family:Tahoma,Geneva,sans-serif;
    font-size:clamp(18px, 5.1vw, 20px);
    font-weight:700;
    line-height:1.2;
    white-space:nowrap;
  }

  body .menu-button {
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    width:clamp(72px, 22vw, 82px);
    height:35px;
    margin:0;
    padding:0;
    border:0;
    border-radius:7px;
    background:rgba(0,54,101,.75);
    color:#ffffff;
    font-family:Inter,Tahoma,Geneva,sans-serif;
    font-size:14px;
    font-weight:800;
    line-height:17px;
  }

  body .menu {
    position:absolute;
    left:50%;
    right:auto;
    top:68px;
    transform:translateX(-50%);
    z-index:100;
    width:var(--mto-mobile-w);
    max-width:var(--mto-mobile-w);
    height:auto;
    min-height:0;
    margin:0;
    padding:8px 0;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:5px;
    background:rgb(0,5,10);
    border:1px solid rgba(37,102,232,.55);
    border-radius:10px;
    box-shadow:0 0 3px rgba(37,102,232,1);
  }

  body .menu.open {
    display:flex;
  }

  body .menu a,
  body .menu a:link,
  body .menu a:visited,
  body .menu a:hover,
  body .menu a:focus,
  body .menu a:focus-visible,
  body .menu a:active,
  body .menu a.active {
    box-sizing:border-box;
    width:auto;
    min-width:0;
    max-width:none;
    height:35px;
    min-height:35px;
    max-height:35px;
    margin:0 8px;
    padding:0 14px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:7px;
    color:rgb(232,232,232);
    font-family:Inter,Tahoma,Geneva,sans-serif;
    font-size:14px;
    font-weight:700;
    line-height:17px;
    opacity:.91;
    background:rgba(28,28,28,0);
  }

  body .menu a.active {
    background-color:rgba(0,136,255,0.25);
    color:#ffffff;
  }

  /* Homepage mobile blocks */
  body main .hero-webwave {
    padding:var(--mto-gap-main) 0 0;
  }

  body main .dmx-panel {
    box-sizing:border-box;
    width:var(--mto-mobile-w);
    max-width:var(--mto-mobile-w);
    aspect-ratio:318 / 148;
    height:auto;
    min-height:0;
    max-height:none;
    margin:0 auto var(--mto-gap-main) auto;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgb(79,79,79);
    border-radius:var(--mto-radius-big);
    background:#000000;
    overflow:hidden;
  }

  body main .dmx-panel .dmx-image,
  body main .dmx-image {
    display:block;
    width:106%;
    max-width:106%;
    height:auto;
    max-height:96%;
    margin:auto;
    padding:0;
    object-fit:contain;
    object-position:center center;
  }

  body main .hero.hero-webwave .container .hero-panel.home-mobile-text-panel {
    box-sizing:border-box;
    width:var(--mto-mobile-w);
    max-width:var(--mto-mobile-w);
    height:auto;
    min-height:0;
    max-height:none;
    margin:0 auto;
    padding:clamp(10px, 3vw, 13px) 9px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:#000000;
    border:1px solid rgb(79,79,79);
    border-radius:var(--mto-radius-big);
    overflow:hidden;
    text-align:center;
  }

  body main .hero.hero-webwave .container .hero-panel.home-mobile-text-panel p {
    width:100%;
    max-width:100%;
    margin:0 auto clamp(6px, 1.8vw, 8px) auto;
    padding:0;
    white-space:nowrap;
    color:#ffffff;
    font-family:Tahoma,Geneva,sans-serif;
    font-size:clamp(11px, 3.35vw, 12.8px);
    font-weight:400;
    line-height:1.35;
    letter-spacing:0;
    text-align:center;
  }

  body main .hero.hero-webwave .container .hero-panel.home-mobile-text-panel p.hero-cctv-line {
    white-space:normal;
  }

  body main .hero.hero-webwave .container .hero-panel.home-mobile-text-panel .hero-cctv-line span {
    display:inline;
  }

  body main .hero.hero-webwave .container .hero-panel.home-mobile-text-panel .hero-cctv-line .hero-cctv-second {
    display:block;
    text-align:center;
  }

  body main .hero.hero-webwave .container .hero-panel.home-mobile-text-panel p:last-child {
    margin-bottom:0;
  }

  body main .home-cards-section,
  body main .section.home-cards-section {
    width:100%;
    margin:0;
    padding:var(--mto-gap-main) 0 20px 0;
  }

  body main .home-cards {
    width:100%;
    max-width:100%;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:var(--mto-gap-main);
    row-gap:var(--mto-gap-main);
  }

  body main .home-card {
    box-sizing:border-box;
    width:100%;
    max-width:100%;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
  }

  body main .home-card h2,
  body main .home-card:nth-child(1) h2,
  body main .home-card:nth-child(2) h2,
  body main .home-card:nth-child(3) h2 {
    box-sizing:border-box;
    width:var(--mto-mobile-w);
    max-width:var(--mto-mobile-w);
    height:52px;
    min-height:52px;
    max-height:52px;
    margin:0 auto var(--mto-gap-inner) auto;
    padding:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#000000;
    border:1px solid rgb(79,79,79);
    border-radius:var(--mto-radius-small);
    color:#0048ff;
    font-family:Inter,Tahoma,Geneva,sans-serif;
    font-size:25px;
    font-weight:800;
    line-height:30px;
    letter-spacing:.2px;
    text-align:center;
  }

  body main .home-card-box,
  body main .home-card:nth-child(1) .home-card-box,
  body main .home-card:nth-child(2) .home-card-box,
  body main .home-card:nth-child(3) .home-card-box {
    box-sizing:border-box;
    width:var(--mto-mobile-w);
    max-width:var(--mto-mobile-w);
    height:auto;
    min-height:0;
    max-height:none;
    margin:0 auto var(--mto-gap-inner) auto;
    padding:22px 25px 12px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    background:#000000;
    border:1px solid rgb(79,79,79);
    border-radius:var(--mto-radius-big);
    overflow:hidden;
  }

  body main .home-card-img,
  body main .home-card:nth-child(1) .home-card-img,
  body main .home-card:nth-child(2) .home-card-img,
  body main .home-card:nth-child(3) .home-card-img {
    display:block;
    height:auto;
    max-height:none;
    margin:5px auto 18px auto;
    object-fit:contain;
    object-position:center center;
    align-self:center;
  }

  body main .home-card:nth-child(1) .home-card-img {
    width:min(172px, 58%);
    max-width:min(172px, 58%);
  }

  body main .home-card:nth-child(2) .home-card-img {
    width:min(172px, 58%);
    max-width:min(172px, 58%);
  }

  body main .home-card:nth-child(3) .home-card-img {
    width:min(205px, 68%);
    max-width:min(205px, 68%);
  }

  body main .home-card p,
  body main .home-card:nth-child(1) p,
  body main .home-card:nth-child(2) p,
  body main .home-card:nth-child(3) p {
    width:100%;
    min-height:0;
    margin:0;
    padding:0;
    color:#ffffff;
    font-family:Tahoma,Geneva,sans-serif;
    font-size:clamp(15px, 4.3vw, 17px);
    font-weight:400;
    line-height:1.42;
    letter-spacing:0;
    text-align:left;
  }

  body main .home-card .button,
  body main .home-card .button:link,
  body main .home-card .button:visited,
  body main .home-card .button:hover,
  body main .home-card .button:focus,
  body main .home-card .button:focus-visible,
  body main .home-card .button:active {
    box-sizing:border-box;
    width:var(--mto-mobile-w);
    max-width:var(--mto-mobile-w);
    height:55px;
    min-height:55px;
    max-height:55px;
    margin:0 auto;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgb(4,0,252);
    border-radius:7px;
    color:#ffffff;
    background-color:rgb(0,118,252);
    font-family:Inter,Tahoma,Geneva,sans-serif;
    font-size:16px;
    font-weight:800;
    line-height:19px;
    letter-spacing:0;
    text-align:center;
    box-shadow:none;
    filter:none;
    transform:none;
  }

  body main .home-card .button:hover,
  body main .home-card .button:focus-visible {
    background-color:#000000;
    border-color:#0076fc;
    color:#0076fc;
  }

  /* Reveal: top edge only, no bottom-edge waiting */
  body main .home-card-box.reveal:not(.visible),
  body main .home-card h2.reveal:not(.visible),
  body main .home-card .button.reveal:not(.visible),
  body main .home-card-box.reveal:not(.is-visible),
  body main .home-card h2.reveal:not(.is-visible),
  body main .home-card .button.reveal:not(.is-visible) {
    opacity:0;
    transform:translateY(18px);
  }

  body main .home-card-box.reveal.visible,
  body main .home-card h2.reveal.visible,
  body main .home-card .button.reveal.visible,
  body main .home-card-box.reveal.is-visible,
  body main .home-card h2.reveal.is-visible,
  body main .home-card .button.reveal.is-visible {
    opacity:1;
    transform:translateY(0);
  }

  /* Footer mobile */
  body .footer {
    height:auto;
    min-height:0;
    max-height:none;
    margin-top:0;
    padding:20px 0 24px;
    border-top:1px solid #111111;
    background:transparent;
    overflow:visible;
  }

  body .footer .container,
  body .footer-grid {
    position:relative;
    width:var(--mto-mobile-w);
    max-width:var(--mto-mobile-w);
    height:auto;
    min-height:0;
    max-height:none;
    margin:0 auto;
    padding:0;
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    text-align:center;
    overflow:visible;
  }

  body .footer-grid > div,
  body .footer-grid > div:nth-child(1),
  body .footer-grid > div:nth-child(2),
  body .footer-grid > div:nth-child(3) {
    position:static;
    width:auto;
    min-height:0;
    height:auto;
    margin:0;
    padding:0;
    text-align:center;
  }

  body .footer,
  body .footer a,
  body .footer a:link,
  body .footer a:visited,
  body .footer a:hover,
  body .footer a:active {
    color:#ffffff;
    font-family:Tahoma,Geneva,sans-serif;
    font-size:16px;
    line-height:23px;
    font-weight:400;
    text-decoration:none;
  }
}


/* =========================================================
   MOBILE ONLY — unified width for all homepage blocks
   Makes lower cards scale exactly like the first two hero cards.
========================================================= */
@media screen and (max-width:767px) {
  :root {
    --mto-mobile-w: min(318px, calc(100vw - 54px));
  }

  body main .hero-webwave > .container,
  body main .home-cards-section > .container,
  body main .home-cards,
  body main .home-card {
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  body main .dmx-panel,
  body main .hero.hero-webwave .container .hero-panel.home-mobile-text-panel,
  body main .home-card h2,
  body main .home-card:nth-child(1) h2,
  body main .home-card:nth-child(2) h2,
  body main .home-card:nth-child(3) h2,
  body main .home-card-box,
  body main .home-card:nth-child(1) .home-card-box,
  body main .home-card:nth-child(2) .home-card-box,
  body main .home-card:nth-child(3) .home-card-box,
  body main .home-card .button,
  body main .home-card .button:link,
  body main .home-card .button:visited,
  body main .home-card .button:hover,
  body main .home-card .button:focus,
  body main .home-card .button:focus-visible,
  body main .home-card .button:active {
    box-sizing:border-box !important;
    width:var(--mto-mobile-w) !important;
    max-width:var(--mto-mobile-w) !important;
    min-width:0 !important;
    margin-left:auto !important;
    margin-right:auto !important;
    left:auto !important;
    right:auto !important;
    transform:none;
  }

  body main .home-cards {
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
  }

  body main .home-card {
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
  }
}


/* =========================================================
   MOBILE ONLY — equal marked vertical gaps
   The same gap is used for:
   header -> DMX, DMX -> text card, text card -> Produkty banner,
   WIĘCEJ button -> next banner, and all following section starts.
========================================================= */
@media screen and (max-width:767px) {
  :root {
    --mto-mobile-w: min(318px, calc(100vw - 54px)) !important;
    --mto-equal-gap: clamp(14px, 3.8vw, 28px) !important;
    --mto-inner-gap: clamp(10px, 2.7vw, 12px) !important;
  }

  body main .hero-webwave {
    padding-top:var(--mto-equal-gap) !important;
    padding-bottom:0 !important;
    margin-bottom:0 !important;
  }

  body main .hero-webwave > .container {
    padding-top:0 !important;
    padding-bottom:0 !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
  }

  body main .dmx-panel {
    width:var(--mto-mobile-w) !important;
    max-width:var(--mto-mobile-w) !important;
    margin-top:0 !important;
    margin-bottom:var(--mto-equal-gap) !important;
  }

  body main .hero.hero-webwave .container .hero-panel.home-mobile-text-panel {
    width:var(--mto-mobile-w) !important;
    max-width:var(--mto-mobile-w) !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
  }

  body main .home-cards-section,
  body main .section.home-cards-section {
    margin-top:0 !important;
    margin-bottom:0 !important;
    padding-top:var(--mto-equal-gap) !important;
    padding-bottom:20px !important;
  }

  body main .home-cards-section > .container,
  body main .home-cards {
    width:100% !important;
    max-width:100% !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
  }

  body main .home-cards {
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:var(--mto-equal-gap) !important;
    row-gap:var(--mto-equal-gap) !important;
  }

  body main .home-card {
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
  }

  body main .home-card h2,
  body main .home-card:nth-child(1) h2,
  body main .home-card:nth-child(2) h2,
  body main .home-card:nth-child(3) h2 {
    width:var(--mto-mobile-w) !important;
    max-width:var(--mto-mobile-w) !important;
    margin-top:0 !important;
    margin-bottom:var(--mto-inner-gap) !important;
  }

  body main .home-card-box,
  body main .home-card:nth-child(1) .home-card-box,
  body main .home-card:nth-child(2) .home-card-box,
  body main .home-card:nth-child(3) .home-card-box {
    width:var(--mto-mobile-w) !important;
    max-width:var(--mto-mobile-w) !important;
    margin-top:0 !important;
    margin-bottom:var(--mto-inner-gap) !important;
  }

  body main .home-card .button,
  body main .home-card .button:link,
  body main .home-card .button:visited,
  body main .home-card .button:hover,
  body main .home-card .button:focus,
  body main .home-card .button:focus-visible,
  body main .home-card .button:active {
    width:var(--mto-mobile-w) !important;
    max-width:var(--mto-mobile-w) !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
  }
}


/* Mobile only: make header bottom line -> first card gap equal to other corrected gaps */
@media screen and (max-width:767px) {
  body .site-header {
    margin-bottom:0 !important;
    padding-bottom:0 !important;
  }

  body main .hero-webwave {
    margin-top:0 !important;
    padding-top:var(--mto-equal-gap) !important;
  }

  body main .hero-webwave > .container {
    margin-top:0 !important;
    padding-top:0 !important;
  }

  body main .dmx-panel {
    margin-top:0 !important;
  }
}


/* =========================================================
   MOBILE ONLY — hard fix for header -> first card gap
   Removes inherited/desktop top spacing and uses the same gap as the rest.
========================================================= */
@media screen and (max-width:767px) {
  body .site-header {
    margin-bottom:0 !important;
  }

  body main {
    margin-top:0 !important;
    padding-top:0 !important;
  }

  body main .hero,
  body main .hero-webwave,
  body main section.hero.hero-webwave {
    margin-top:0 !important;
    padding-top:14px !important;
  }

  body main .hero-webwave > .container,
  body main section.hero.hero-webwave > .container {
    margin-top:0 !important;
    padding-top:0 !important;
  }

  body main .dmx-panel {
    margin-top:0 !important;
  }
}


/* =========================================================
   MOBILE ONLY — FORCE first card position under header
   This bypasses inherited hero/section spacing.
========================================================= */
@media screen and (max-width:767px) {
  body main,
  body main > .hero,
  body main > .hero.hero-webwave,
  body main > section.hero.hero-webwave,
  body main .hero-webwave,
  body main section.hero-webwave {
    margin-top:0 !important;
    padding-top:0 !important;
  }

  body main .hero-webwave > .container,
  body main section.hero.hero-webwave > .container {
    margin-top:0 !important;
    padding-top:0 !important;
    transform:none !important;
  }

  body main .dmx-panel {
    margin-top:14px !important;
    margin-bottom:14px !important;
  }

  body main .hero.hero-webwave .container .hero-panel.home-mobile-text-panel {
    margin-top:0 !important;
    margin-bottom:0 !important;
  }

  body main .home-cards-section,
  body main .section.home-cards-section {
    padding-top:14px !important;
  }

  body main .home-cards {
    gap:14px !important;
    row-gap:14px !important;
  }
}


/* MOBILE ONLY — move first card and the whole following flow 8px up */
@media screen and (max-width:767px) {
  body main .dmx-panel {
    margin-top:6px !important;
  }
}


/* MOBILE ONLY — increase the marked equal gaps by 2px */
@media screen and (max-width:767px) {
  /* global equal gap used between the marked blocks */
  :root {
    --mto-equal-gap: 16px !important;
  }

  /* 1) gap between DMX block and text block */
  body main .dmx-panel {
    margin-bottom:16px !important;
  }

  /* 2) gap after the intro text card before the first banner */
  body main .home-cards-section,
  body main .section.home-cards-section {
    padding-top:16px !important;
  }

  /* 3) identical gap between all following groups:
        banner -> image card, image card -> button, button -> next banner
        and the same repeated lower on the page */
  body main .home-cards {
    gap:16px !important;
    row-gap:16px !important;
  }
}