.page{
  position: relative;
  width: 100%;
}

/* Start - SKIP LINK (a11y) */
.skip-link{
  position: absolute;
  left: var(--padX);
  top: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #fff;
  color: #000;
  transform: translateY(-160%);
  transition: transform .2s ease;
  z-index: 9999;
}
.skip-link:focus{
  transform: translateY(0);
  outline: none;
}
/* end - SKIP LINK */

/* global button class .btn */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 180px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition:
    transform .25s var(--ease),
    background .25s var(--ease),
    border-color .25s var(--ease),
    box-shadow .25s var(--ease),
    color .25s var(--ease);
}

.btn:hover{
  transform: translateY(-2px);
}

.btn-primary,
.btn{
  background: var(--accent-grad);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 12px 34px var(--glow);
  color: rgba(255,255,255,.96);
}

.btn-primary:hover,
.btn:hover{
  box-shadow: 0 16px 45px rgba(255,45,85,.25);
}

.btn-secondary{
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.10);
  color: #f0f0f0;
  box-shadow: none;
}

.btn-secondary:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}

.btn2{
  position: relative;
  display: inline-block;
  font-size: 1.25rem;
  max-width: 200px;
  background-color: gray;
  color: #efefef;
  text-align: center;
  padding: 15px 30px;
  font-weight: 500;
  letter-spacing: .05rem;
  text-decoration: none;
  border-radius: 10px;
}

/* global title blocks */
.text-content{
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.gradient-text{
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: rgba(124,58,237,.84);
}

.text-content h2{
  font-size: clamp(2rem, 3vw, 3rem);
  color: var(--accent);
  text-align: center;
  /* line-height: 1.1; */
}

.text-content p{
  max-width: 760px;
  text-align: center;
  color: var(--text-soft);
  font-size: 1.05rem;
  line-height: 1.75;
  margin-top: .75rem;
}

/* global class .center */
.center{
  width: 100%;
  text-align: center;
  margin-top: .5rem;
}

/* header */
header.hide{
  visibility: hidden;
}

.site-header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 5px var(--padX);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10000;
  backdrop-filter: blur(20px);
  background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.15));
  border-bottom: 1px solid rgba(255,255,255,.03);
}

.site-header .box-logo{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

header .box-logo .logo{
  /* position: relative;
  display: flex;
  justify-content: center; */
  align-items: center;
  width: 40px;
  height: 40px;
  /* overflow: hidden; */
  cursor: pointer;
}

header .box-logo .logo_crypt{
  position: relative;
  width: 32px;
  height: 32px;
  overflow: hidden;
  cursor: pointer;
}

header .box-logo .logo img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

header .menuToggle{
  display: none;
}

.site-nav{
  position: relative;
}

header ul{
  position: relative;
  display: flex;
  gap: 32px;
}

header ul li{
  list-style: none;
}

header ul li a{
  text-decoration: none;
  color: gray;
  font-weight: 500;
  font-size: var(--base-size);
  transition: .25s ease;
}

header ul li.active a,
header ul li:hover a{
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: rgba(124,58,237,.84);
}

header .box-lang{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* kontajner s jazykmi */
header .box-lang .lang{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  width: 100%;
  height: 50px;
}

/* BUTTON reset -> nech je to ako link */
header .box-lang .lang button{
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: var(--base-size);
  letter-spacing: 1px;
  line-height: 1;
  cursor: pointer;
  color: gray;
}

header .box-lang .lang button:hover{
  /* color: rgba(255,45,85,.92); */
  color: #f7f7f7
}

header .box-lang .lang button.active{
  color: rgba(255,45,85,.92);
}

header .box-lang .lang button:focus-visible{
  outline: 2px solid rgba(255,45,85,.55);
  outline-offset: 6px;
  border-radius: 6px;
}

/* all sections basic sets */
.section{
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--sectionY) var(--padX);
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor:default;
}

.section-inner{
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

/* hero */
#home .bg-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  z-index: -2;
  /* transform: translateZ(0); */
  /* will-change: transform; */
  /* backface-visibility: hidden; */
}

#home::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.76), rgba(0,0,0,.34) 48%, rgba(0,0,0,.18)),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.58));
  pointer-events: none;
  z-index: -1;
}

#home .section-inner{
  min-height: calc(100vh - 120px);
  min-height: calc(100svh - 120px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4rem;
}

#home .content{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  max-width: 720px;
}

#home .content .eyebrow{
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: #d6d6d6;
  margin: 0;
}

#home .content .eyebrow-row{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

#home .content .hero-line{
  display: inline-block;
  width: 100%;
  max-width: 140px;
  height: 1px;
  background: linear-gradient(135deg, rgba(255,45,85,.92), rgba(124,58,237,.84));
  opacity: .8;
}

#home .content h1{
  position: relative;
  font-size: clamp(2.8rem, 5vw, 4.8rem);
  color: #f7f7f7;
  line-height: 1.02;
  letter-spacing: -0.03em;
  /* max-width: 11ch; */
  text-wrap: balance;
  text-shadow: 0 8px 30px rgba(0,0,0,.28);
}

#home .content p{
  position: relative;
  color: #c9c9c9;
  font-size: 1.08rem;
  line-height: 1.85;
  text-align: left;
}

#home .content .lead{
  max-width: 640px;
}

#home .content .hero-note{
  color: #9a9a9a;
  font-size: .95rem;
  margin-top: .35rem;
  max-width: 640px;
}

#home .hero-btns{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 1rem;
}

#home .box-foto{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform .35s ease, filter .35s ease;

  display: none;
}

#home .box-foto:hover{
  transform: scale(1.04) translateX(-30px) rotate(2deg);
  /* filter: drop-shadow(10px 10px 20px rgba(0,0,0,.45)); */
  /* filter: drop-shadow(10px 10px 20px rgb(147, 8, 8)); */
  filter: drop-shadow(5px 5px 10px rgb(147, 8, 8));
}

#home .box-foto .foto{
  width: min(440px, 36vw);
  /* width: 440px; */
  height: auto;
  border: 1px solid rgba(255,255,255,.08);
  border-right: 1px solid rgba(255,255,255,.16);
  border-radius: 28px;
  overflow: hidden;
  box-shadow:
    0 30px 60px rgba(0,0,0,.36),
    0 0 0 1px rgba(255,255,255,.03) inset;
}

#home .box-foto .ratio-1-1{
  aspect-ratio: 1 / 1;
}

#home .box-foto .ratio-259-86{
  aspect-ratio: 259 / 86;
}

#home .box-foto .coder{
  position: relative;
  border-radius: 50%;
  translate: 20px 0px;
  rotate: -15deg;
}

/* body:has(#home .hero-btns a:hover) #home .box-foto{
  transform: scale(1.04) translateX(-10px) rotate(2deg);
  filter: drop-shadow(10px 10px 20px rgba(0,0,0,.45));
} */

body:has(#home .hero-btns a:nth-child(1):hover) #home .box-foto{
  transform: scale(1.1) translateX(-10px) rotate(2deg);
  filter: drop-shadow(5px 5px 10px rgb(147, 8, 8));
}

body:has(#home .hero-btns a:nth-child(2):hover) #home .box-foto{
  transform: scale(1.1) translateX(-10px) rotate(-3deg);
  filter: drop-shadow(-5px -5px 10px rgb(147, 8, 8));
}

/* section backgrounds */
#services{
  background-color: #18191c;
}

#packages{
  background-color: #101114;
}

#specialties{
  background-color: #18191c;
}

#projects{
  background-color: #101114;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#about{
  background-color: #18191c;
}

#zendashboard{
  background-color: #101114;
}

#contact{
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,.72), rgba(32,32,32,.3)),
    var(--contact-bg, url("../img/contact_bg.avif"));
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* generic content grids */
#services .content,
#packages .content,
#specialties .content{
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 30px;
  margin: 40px 0 0;
  text-align: center;
}

.specialties-note{
  margin-top: 28px;
  text-align: center;
  color: #a9a9a9;
  font-size: 0.95rem;
  line-height: 1.6;
}

#projects .content{
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 30px;
  margin: 40px 0 0;
  text-align: center;
}

#about .content{
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 30px;
  margin: 40px 0 0;
  text-align: center;
  margin-bottom: 20px;
  margin-top: 30px;
}

#about .text-content{
  margin-bottom: 20px;
}

#zendashboard .content,
#contact .content{
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 30px;
  margin: 40px 0 0;
  text-align: center;
}

/* shared cards */
.servicesBx,
.portfolioBx{
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)),
    var(--bg-card);
  padding: 38px 26px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--line);
  border-top-right-radius: 30px;
  border-bottom-left-radius: 30px;
  box-shadow:
    0 10px 30px rgba(0,0,0,.18),
    0 1px 0 rgba(255,255,255,.02) inset;
  transition:
    transform .3s ease,
    filter .3s ease,
    border-color .3s ease,
    background-color .3s ease,
    box-shadow .3s ease;
}

.servicesBx:hover,
.portfolioBx:hover{
  /* filter: drop-shadow(5px 5px 10px rgba(0,0,0,.35)); */
  filter: drop-shadow(0 0 5px gray);
  /* filter: drop-shadow(0 0 10px rgba(124,58,237,.84)); */
  /* filter: drop-shadow(0 0 10px rgba(255,45,85,.92)); */
  /* transform: rotate(35deg); */
  border-color: rgba(255,45,85,.92);
  box-shadow:
    0 18px 40px rgba(0,0,0,.22),
    0 1px 0 rgba(255,255,255,.03) inset;
}

/* transform efects */
/* ---------------------------------- */
.card-inner,
.card-inner-zoom{
  transition: transform .3s ease;
}

/* balíky */
.card-zoom{
  transition: .5s;
}

.card-zoom:hover{
  scale: 1.02;
}

.servicesBx:hover .card-inner,
.portfolioBx:hover .card-inner{
  transform: rotate(2deg);
}

.servicesBx:hover .card-inner-zoom,
.portfolioBx:hover .card-inner-zoom{
  transform: scale(1.05);
}

.servicesBx:hover .card-inner-notransform,
.portfolioBx:hover .card-inner-notransform{
  transform: none;
}

.servicesBx:hover .card-inner-rotateright,
.portfolioBx:hover .card-inner-rotateright{
  transform: rotate(1deg);
}

.servicesBx:hover .card-inner-rotateleft,
.portfolioBx:hover .card-inner-rotateleft{
  transform: rotate(-1deg);
}
/* ---------------------------------- */

.servicesBx h3,
.portfolioBx h3{
  font-weight: 600;
  color: var(--accent);
  line-height: 1.3;
}

.servicesBx h4,
.portfolioBx h4{
  font-weight: 600;
  color: #f0f0f0;
  line-height: 1.3;
}

.servicesBx p,
.portfolioBx p{
  color: #b4b4b4;
  /* color: var(--text-soft); */
  line-height: 1.75;
  font-size: 0.98rem;
}

.servicesBx strong,
.portfolioBx strong{
  color: #f0f0f0;
}

/* -------------------------------------- */
/* process */

#process{
  padding-bottom: 0;
}

/* wrapper */
.process-wrap{
  position: relative;
  margin-top: 80px;
  min-height: 1800px;
}

/* SVG vlna */
.process-line{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 520px;
  max-width: 48vw;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* layout krokov */
.process-items{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 120px;
  padding-bottom: 240px;
}

/* jednotlivé kroky */
.process-step{
  width: 100%;
  display: flex;
  /* background-color: red; */
}

.process-step.left{
  justify-content: flex-start;
}

.process-step.right{
  justify-content: flex-end;
}

/* karta */
.process-card{
  position: relative;
  width: min(340px, 100%);
  padding: 28px 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)),
    rgba(20,20,24,.94);
  border: 1px solid rgba(255,255,255,.08);
  border-top-right-radius: 24px;
  border-bottom-left-radius: 24px;
  box-shadow:
    0 16px 40px rgba(0,0,0,.22),
    0 1px 0 rgba(255,255,255,.02) inset;
  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease,
    filter .3s ease;
}

.process-card:hover{
  /* border-color: rgba(255,45,85,.92); */
  border-color: var(--brc);
  box-shadow:
    0 22px 46px rgba(0,0,0,.26),
    0 0 24px rgba(124,58,237,.08),
    0 1px 0 rgba(255,255,255,.03) inset;
  filter: drop-shadow(0 0 5px gray);
  transition: .3s ease;
}

.process-card[data-step="1"] { --brc: #EB2D62; }
.process-card[data-step="2"] { --brc: #DB2E71; }
.process-card[data-step="3"] { --brc: #D12F7D; }
.process-card[data-step="4"] { --brc: #BF3090; }
.process-card[data-step="5"] { --brc: #AD33A7; }
.process-card[data-step="6"] { --brc: #9D34B9; }
.process-card[data-step="7"] { --brc: #9236C8; }
.process-card[data-step="8"] { --brc: #8537D7; }

.process-step.left .process-card,
.process-step.right .process-card{
  transition: .3s ease;
}

.process-step.left .process-card:hover{
  translate: 10px;
  rotate: 1deg;
  scale: 1.05;
}

.process-step.right .process-card:hover{
  translate: -10px;
  rotate: -1deg;
  scale: 1.05;
}

.process-connector{
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #ff2d55 38%, #7c3aed 100%);
  box-shadow:
    0 0 0 5px rgba(255,45,85,.06),
    0 0 16px rgba(255,45,85,.16),
    0 0 24px rgba(124,58,237,.12);
  transform: translateY(-50%) scale(.35);
  backdrop-filter: blur(2px);
  filter: drop-shadow(0 0 6px rgba(255,255,255,.45));
  opacity: 0;
}

.process-connector::before{
  content: "";
  position: absolute;
  top: 50%;
  height: 1px;
  width: clamp(72px, 9vw, 132px);
  transform: translateY(-50%) scaleX(0);
  background: linear-gradient(135deg, rgba(255,45,85,.55), rgba(124,58,237,.45));
  opacity: .72;
  box-shadow: 0 0 10px rgba(124,58,237,.10);
}

.process-step.left .process-connector{
  right: -34px;
}

.process-step.left .process-connector::before{
  left: 100%;
  transform-origin: left center;
}

.process-step.right .process-connector{
  left: -34px;
}

.process-step.right .process-connector::before{
  right: 100%;
  transform-origin: right center;
}

.process-card.is-linked .process-connector{
  animation: processConnectorNodeIn .85s cubic-bezier(.22,.61,.36,1) forwards;
}

.process-card.is-linked .process-connector::before{
  animation: processConnectorLineIn .8s cubic-bezier(.22,.61,.36,1) forwards;
}

@keyframes processConnectorNodeIn{
  0%{
    opacity: 0;
    transform: translateY(-50%) scale(.35);
  }
  65%{
    opacity: 1;
    transform: translateY(-50%) scale(1.12);
  }
  100%{
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

@keyframes processConnectorLineIn{
  from{
    transform: translateY(-50%) scaleX(0);
    opacity: 0;
  }
  to{
    transform: translateY(-50%) scaleX(1);
    opacity: .72;
  }
}

.process-card h3{
  margin: 0 0 12px;
  font-size: 1.18rem;
  line-height: 1.2;
  color: #f3f3f3;
}

.process-card p{
  margin: 0;
  color: #bdbdbd;
  line-height: 1.8;
  font-size: .98rem;
}

/* číslo kroku */
.step-number{
  display: inline-block;
  margin-bottom: 10px;
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #9f9f9f;
}

/* animácia kreslenia */
.process-wave{
  stroke-dasharray: 2200;
  stroke-dashoffset: 2200;
  transition: opacity .8s ease, filter .8s ease;
}

.process-wave--main{
  opacity: .78;
}

.process-wave--glow{
  opacity: .10;
}

.process-wave--main.is-drawn{
  animation: drawProcessWave 15s cubic-bezier(.22,.61,.36,1) forwards;
}

.process-wave--glow.is-drawn{
  animation: drawProcessWave 15s cubic-bezier(.22,.61,.36,1) forwards;
}

.process-wave--main.is-lit{
  opacity: .96;
  filter: drop-shadow(0 0 10px rgba(255,45,85,.20))
          drop-shadow(0 0 22px rgba(124,58,237,.18));
  mask-image: linear-gradient(to bottom, black 98%, transparent 100%);
}

.process-wave--glow.is-lit{
  opacity: .22;
  filter: drop-shadow(0 0 18px rgba(255,45,85,.18))
          drop-shadow(0 0 34px rgba(124,58,237,.16));
}

@keyframes drawProcessWave{
  to{
    stroke-dashoffset: 0;
  }
}

/* -------------------------------------- */

/* packages accent on 2nd card */
#packages .content .servicesBx:nth-child(2){
  background:
    linear-gradient(180deg, rgba(255,45,85,.10), rgba(124,58,237,.06)),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)),
    var(--bg-card);
  border-color: rgba(255,45,85,.24);
  transform: scale(1.02);
  box-shadow:
    0 18px 42px rgba(255,45,85,.10),
    0 1px 0 rgba(255,255,255,.03) inset;
}

#packages .content .servicesBx:nth-child(2):hover{
  /* transform: scale(1.02) translateY(-4px); */
  border-color: var(--accent);
  border-width: 2px;
}

/* #packages .content .servicesBx:nth-child(4):hover{
  border-width: 1px;
} */

/* projects */
#projects .content .portfolioBx{
  min-height: 290px;
  align-items: center;
  text-align: center;
  padding: 34px 28px;

  position: relative;
  overflow: hidden;
}

/* #projects .content .portfolioBx:hover{
  border: none;
} */

/* #projects .content .portfolioBx::after{
  content: "";
  position: absolute;
  top: 90px;
  left: 50%;
  bottom: 0;
  width: 0%;
  height: 2px;
  transform: translateX(-50%);
  background: var(--accent-grad);
  transition: width .35s ease;
  opacity: .9;
} */

/* #projects .content .portfolioBx:hover::after{
  width: 60%;
} */

#projects .content .portfolioBx .card-inner{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.project-kicker{
  display: inline-block;
  margin-bottom: 12px;
  font-size: 0.78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #9d9d9d;
}

#projects .content .portfolioBx h3{
  margin-bottom: 12px;
  /* transition: .3s ease; */
  transition: transform .3s ease, color .3s ease;
}

#projects .content .portfolioBx p{
  text-align: center;
}

#projects .content .portfolioBx p strong{
  color: #f2f2f2;
}

#projects .content .portfolioBx:hover h3{
  transform: scale(1.03);
  /* color: #ffffff; */
}

/* #projects .content .portfolioBx:hover p{
  color: #ffffff;
} */

#projects .content .portfolioBx:hover .project-cta{
  opacity: 1;
}

.projects-note{
  margin-top: 28px;
  text-align: center;
  color: #a9a9a9;
  font-size: 0.95rem;
  line-height: 1.7;
}

.project-cta{
  margin-top: 16px;
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: .04em;
  position: relative;
  color: #cfcfcf;
  opacity: .7;
  transition: color .25s ease;
}

.project-cta::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: var(--accent-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}

.project-cta:hover{
  color: #ffffff;
}

.project-cta:hover::after{
  transform: scaleX(1);
}

/* about extra blocks */
.team-wrap,
.faq-wrap{
  margin-top: 72px;
}
/* ------------ */
.team-grid{
  margin-top: 22px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.team-card{
  /* text-align: left; */
  text-align: center;
}

.team-card .card-inner{
  width: 100%;
  display: flex;
  flex-direction: column;
  /* align-items: flex-start; */
  align-items: center;
  gap: 20px;
}

.team-photo{
  width: 100%;
  max-width: 120px;
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 14px 34px rgba(0,0,0,.24),
    0 1px 0 rgba(255,255,255,.03) inset;
  transition: .5s;
}

.team-photo:hover{
  transform: scale(1.1);
  /* filter: drop-shadow(5px 5px 10px rgb(147, 8, 8)); */
  box-shadow:
    0 0 1px #f7f7f7;
    /* 0 1px 0 rgba(255,255,255,.03) inset; */
}

.team-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.team-body{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.team-head h4{
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.2;
  color: #f2f2f2;
  font-weight: 700;
}

.team-role{
  margin: 8px 0 0;
  color: rgba(124,58,237,.84);
  font-size: 0.95rem;
  line-height: 1.5;
  font-weight: 600;
}

.team-links{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.team-link{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: #f2f2f2;
  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}

.team-link:hover{
  transform: translateY(-2px);
  border-color: rgba(124,58,237,.28);
  background: rgba(255,255,255,.06);
  box-shadow:
    0 12px 24px rgba(0,0,0,.18),
    0 0 18px rgba(124,58,237,.12);
  cursor: pointer;
}

.team-link svg{
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.team-text{
  margin: 0;
  color: #b9b9b9;
  line-height: 1.8;
  font-size: 0.98rem;
}

.team-note{
  margin-top: 24px;
  padding: 16px 18px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)),
    rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.08);
  color: #c8c8c8;
  line-height: 1.75;
  font-size: 0.96rem;
  text-align: center;
}

/* ------------ */

.team-wrap h3,
.faq-wrap h3{
  color: var(--accent);
  font-size: clamp(1.6rem, 2vw, 2rem);
  text-align: center;
  margin-bottom: 18px;
}

.team-wrap .content{
  margin-top: 24px;
}

.faq-wrap details{
  background-color: rgba(46,47,52,.92);
  border: 1px solid var(--line);
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  padding: 18px 20px;
  margin-top: 14px;
  transition: border-color .25s ease, background-color .25s ease;
}

.faq-wrap details + details{
  margin-top: 14px;
}

.faq-wrap details:hover{
  border-color: rgba(245,134,53,.28);
}

.faq-wrap summary{
  cursor: pointer;
  list-style: none;
  color: #f0f0f0;
  font-weight: 600;
  position: relative;
  padding-right: 26px;
}

.faq-wrap summary::-webkit-details-marker{
  display: none;
}

.faq-wrap summary::after{
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  color: var(--accent);
  font-size: 1.2rem;
  transition: transform .25s ease;
}

.faq-wrap details[open] summary::after{
  transform: rotate(45deg);
}

.faq-wrap details p{
  color: var(--text-soft);
  margin-top: 14px;
  line-height: 1.7;
}

/* zendashboard */
#zendashboard .content .servicesBx:last-child{
  justify-content: center;
}

/* contact */
#contact .text-content h2,
#contact .text-content p{
  color: #f0f0f0;
}

#contact .text-content p{
  color: #d3d3d3;
}

#contact .content .servicesBx{
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(8px);
  border-color: rgba(255,255,255,.10);
}

#contact .content .servicesBx a{
  margin-top: 10px;
}

/* -------------------------------------- */
#contact .content{
  align-items: stretch;
  grid-template-columns: 1fr 1.15fr;
  gap: 28px;
}

#contact .content .servicesBx{
  text-align: left;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 100%;
  height: 100%;
  padding: 42px 30px;
  background: rgba(12,12,14,.42);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 18px 40px rgba(0,0,0,.22),
    0 1px 0 rgba(255,255,255,.03) inset;
}

#contact .content .servicesBx h3{
  margin-bottom: 6px;
}

#contact .content .servicesBx p{
  text-align: left;
}

.contact-form{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 10px;
}

.form-row{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-row label{
  font-size: 0.95rem;
  font-weight: 600;
  color: #f3f3f3;
  letter-spacing: .01em;
}

.contact-form input,
.contact-form textarea{
  width: 100%;
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.18);
  color: #f4f4f4;
  padding: 14px 16px;
  border-radius: 14px;
  outline: none;
  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    background .25s ease,
    transform .25s ease;
}

.contact-form input:hover,
.contact-form textarea:hover{
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.09);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{
  color: #9a9a9a;
}

.contact-form input:focus,
.contact-form textarea:focus{
  border-color: rgba(124,58,237,.75);
  box-shadow:
    0 0 0 4px rgba(124,58,237,.14),
    0 10px 24px rgba(0,0,0,.12);
  background: rgba(255,255,255,.11);
}
/* ------------------------------ */
.req{
  color: rgba(255,45,85,.92);
  font-weight: 700;
  margin-right: 4px;
}

/* .contact-form input:invalid,
.contact-form textarea:invalid{
  border-color: rgba(255,45,85,.45);
} */

.contact-form input:valid,
.contact-form textarea:valid{
  border-color: rgba(124,58,237,.35);
}
/* ------------------------------ */

.contact-form textarea{
  min-height: 160px;
  line-height: 1.7;
}

.form-check{
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  margin-top: 2px;
}

.form-check input{
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin-top: 3px;
  accent-color: rgba(124,58,237,.84);
  cursor: pointer;
}

.form-check label{
  font-size: 0.92rem;
  font-weight: 400;
  color: #c0c0c0;
  line-height: 1.6;
}

.contact-form .btn{
  margin-top: 8px;
  align-self: flex-start;
  min-width: 170px;
}
/* ----------------- */
.contact-submit{
  position: relative;
  min-width: 180px;
}

.contact-submit .btn-label{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.contact-submit .btn-spinner{
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,.28);
  border-top-color: rgba(255,255,255,.95);
  border-radius: 50%;
  animation: contactSpin .75s linear infinite;
}

.contact-submit.is-loading{
  pointer-events: none;
  opacity: 1;
  transform: none !important;
  box-shadow:
    0 16px 34px rgba(255,45,85,.18),
    0 0 0 1px rgba(255,255,255,.04) inset;
}

.contact-submit.is-loading .btn-spinner{
  display: inline-block;
}

.contact-submit:disabled{
  cursor: not-allowed;
}

@keyframes contactSpin{
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
}
/* ----------------- */
#contact .text-content{
  margin-bottom: 20px;
}

#contact .text-content p{
  max-width: 760px;
}

#contact .content .servicesBx:first-child p + p{
  margin-top: 2px;
}
/* -------------------------------------- */
.contact-extra{
  margin-top: 3rem;
  padding-top: 22px;
  border-top: 1px solid var(--accent);
  width: 100%;
}

.contact-extra h4{
  font-size: 1rem;
  font-weight: 600;
  color: #f1f1f1;
  margin-bottom: 14px;
}

.contact-extra ul{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  margin: 0;
}

.contact-extra li{
  color: #b9b9b9;
  line-height: 1.65;
  position: relative;
  padding-left: 18px;
}

.contact-extra li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(124,58,237,.84);
}
/* -------------------------------------- */

#contact .team-wrap{
  margin-top: 60px;
}

#contact .team-wrap h3{
  color: var(--accent);
  font-size: clamp(1.6rem, 2vw, 2rem);
  text-align: center;
  margin-bottom: 18px;
}

#contact .team-wrap .content{
  margin-top: 24px;
}
/* -------------------------------------- */
/* Hlášky */
.form-message{
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 10px;
}

.form-message.error{
  background: rgba(255,45,85,.12);
  border: 1px solid rgba(255,45,85,.25);
  color: #ffd4dd;
}

.form-message.success{
  background: rgba(124,58,237,.14);
  border: 1px solid rgba(124,58,237,.28);
  color: #e7ddff;
}

/* .hp-field{
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
} */

.hp-field{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0px;
}
/* -------------------------------------- */

/* footer */
.site-footer{
  padding: 42px var(--padX) 24px;
  background: #0a0a0b;
  border-top: 1px solid rgba(255,255,255,.05);
}

.footer-inner{
  max-width: 1440px;
  margin: 0 auto;
}

.footer-top{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  align-items: start;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.footer-brand h3{
  font-size: 1.4rem;
  font-weight: 700;
  color: #f4f4f4;
  margin-bottom: 8px;
}

.footer-subtitle{
  font-size: 0.95rem;
  color: var(--accent);
  margin-bottom: 14px;
}

.footer-description{
  max-width: 320px;
  color: #9f9f9f;
  line-height: 1.75;
  font-size: 0.95rem;
}

.footer-column h4{
  font-size: 1rem;
  font-weight: 600;
  color: #f1f1f1;
  margin-bottom: 14px;
}

.footer-column ul{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  margin: 0;
}

.footer-column ul li a,
.footer-link-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: #9d9d9d;
  font-size: 0.95rem;
  line-height: 1.6;
  transition: color .25s ease, opacity .25s ease;
}

.footer-column ul li a::after,
.footer-link-btn::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: var(--accent-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
  opacity: .9;
}

.footer-column ul li a:hover,
.footer-link-btn:hover{
  color: #f1f1f1;
}

.footer-column ul li a:hover::after,
.footer-link-btn:hover::after,
.footer-column ul li a:focus-visible::after,
.footer-link-btn:focus-visible::after,
.footer-column ul li a.is-current::after,
.footer-link-btn.is-current::after{
  transform: scaleX(1);
}

.footer-column ul li a:focus-visible,
.footer-link-btn:focus-visible{
  color: #ffffff;
  outline: none;
}

.footer-column ul li a.is-current,
.footer-link-btn.is-current{
  color: #ffffff;
}

.footer-bottom{
  padding-top: 18px;
  text-align: center;
}

.footer-bottom small{
  color: var(--text-muted);
  letter-spacing: .02em;
}

.footer-link-btn{
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
}

/* -------------------------------------- */
/* back to top */
.back-to-top{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 10020;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
    rgba(16,17,20,.92);
  color: #f3f3f3;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow:
    0 16px 34px rgba(0,0,0,.30),
    0 1px 0 rgba(255,255,255,.03) inset;
  backdrop-filter: blur(12px);
  font-size: 1.45rem;
  line-height: 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(.96);
  transition:
    opacity .25s ease,
    visibility .25s ease,
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}

.back-to-top.is-visible{
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.back-to-top:hover{
  transform: translateY(-2px) scale(1.03);
  border-color: rgba(124,58,237,.35);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025)),
    rgba(16,17,20,.95);
  box-shadow:
    0 20px 38px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 0 18px rgba(124,58,237,.16),
    0 0 28px rgba(255,45,85,.10);
}

.back-to-top:active{
  transform: translateY(0) scale(.98);
  box-shadow:
    0 10px 22px rgba(0,0,0,.26),
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 0 14px rgba(124,58,237,.14);
}

.back-to-top:focus-visible{
  outline: 2px solid rgba(124,58,237,.55);
  outline-offset: 4px;
}

/* -------------------------------------- */
.waves{
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100vw;
  height: 0;
  background-color: rgba(133,55,215,.38);
  pointer-events: none;
}
.wave{
  position: absolute;
  top: -72px;
  width: 100%;
  height: 72px;
  /* background: rgba(255, 0, 0, 0.358); */
  background: url(../img/wave.png);
  background-size: 1000px 72px;
}

.wave#wave1{
  z-index: 1000;
  opacity: .32;
  bottom: 0;
  animation: animatewave 4s linear infinite;
}

.wave#wave3{
  z-index: 999;
  opacity: .16;
  bottom: 12px;
  animation: animatewave 3s linear infinite;
}

.wave#wave2{
  z-index: 998;
  opacity: .10;
  bottom: 8px;
  animation: animatewave2 4s linear infinite;
}

.wave#wave4{
  z-index: 999;
  opacity: .07;
  bottom: 16px;
  animation: animatewave2 3s linear infinite;
}

@keyframes animatewave{
  0%{
    background-position: 1000px;
  }
  100%{
    background-position: 0;
  }
}

@keyframes animatewave2{
  0%{
    background-position: 0;
  }
  100%{
    background-position: 1000px;
  }
}


/* -------------------------------------- */
/* Cursor Comet */
/* viac wow, opacity .92 */
.cursor-comet{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* z-index: 8; */
  z-index: 10030;
  opacity: .72;
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce){
  .cursor-comet{
    display: none;
  }
}

/* =========================================================
FIXED BACKGROUND: SEKČNÉ STATICKÉ / JEMNE ANIMOVANÉ POZADIA
---------------------------------------------------------
Tento blok rieši efekt pevne ukotveného pozadia v konkrétnych
sekciách webu.

Ako to funguje:
- .fixed-showcase-section nastavuje spoločné správanie pozadia,
- konkrétny obrázok sa nastavuje cez modifikačné triedy:
  .fixed-bg-process, .fixed-bg-showcase, .fixed-bg-final,
- background-attachment: fixed vytvára efekt, že obrázok pri
  scrollovaní zostáva vizuálne stáť na mieste,
- veľmi pomalá animácia background-position vytvorí jemný živý efekt.

Prečo nepoužívame ::before s position: fixed:
- fixed pseudo-element by sa viazal na celý viewport,
- mohol by zasahovať aj do hero sekcie alebo iných častí webu,
- takto zostáva efekt bezpečne naviazaný iba na konkrétnu sekciu.

Použitie:
<section class="section fixed-showcase-section fixed-bg-process">...</section>
<section class="section fixed-showcase-section fixed-bg-showcase">...</section>
<section class="section fixed-showcase-section fixed-bg-final">...</section>
========================================================= */
.fixed-showcase-section{
  background-size: 108% auto;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;

  overflow: hidden;
  isolation: isolate;

  animation: fixedBgDrift 32s ease-in-out infinite alternate;
}

/* Background pre sekciu Process. */
.fixed-bg-process{
  background-image: var(--fixed-bg, url("../img/cryptotech-fixed-bg-01.avif"));
  animation-duration: 34s;
}

/* Background pre samostatnú showcase sekciu. */
.fixed-bg-showcase{
  background-image: var(--fixed-bg, url("../img/cryptotech-fixed-bg-02.avif"));
  animation-duration: 30s;
}

/* Background pre tretiu sekciu s fixed efektom. */
.fixed-bg-final{
  background-image: var(--fixed-bg, url("../img/cryptotech-fixed-bg-03.avif"));
  animation-duration: 36s;
}

/* Jemný pohyb pozadia.
   Pohyb je zámerne veľmi pomalý, aby nepôsobil rušivo ako video. */
@keyframes fixedBgDrift{
  0%{
    background-position: 42% 48%;
    background-size: 122% auto;
  }

  50%{
    background-position: 58% 52%;
    background-size: 132% auto;
  }

  100%{
    background-position: 46% 56%;
    background-size: 126% auto;
  }
}

/* Textový blok v samostatnej showcase sekcii.
   Ak sa .fixed-showcase-section použije aj na inú sekciu,
   napríklad process, tento obsahový blok ju neovplyvní. */
.fixed-showcase-content{
  max-width: 1440px;
}

.fixed-showcase-content h2{
  margin: 0 0 18px;
  max-width: 760px;
  font-size: clamp(2.2rem, 5vw, 4.6rem);
  line-height: .98;
  color: var(--text-main);
}

.fixed-showcase-content p{
  margin: 0;
  max-width: 58ch;
  color: var(--text-soft);
  line-height: 1.8;
}

.fixed-showcase-content .section-kicker{
  display: inline-block;
  margin-bottom: 18px;
  color: var(--accent);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .82rem;
}

/* Na mobiloch je background-attachment: fixed často problematický,
   hlavne v Safari/iOS. Preto efekt vypneme a obrázok sa bude
   správať ako bežné pozadie sekcie. */
@media (max-width: 900px){
  .fixed-showcase-section{
    background-attachment: scroll;
    background-size: cover;
    background-position: center;
    animation: none;
  }
}

/* Rešpektovanie používateľského nastavenia zníženého pohybu. */
@media (prefers-reduced-motion: reduce){
  .fixed-showcase-section{
    animation: none;
  }
}