:root {
    --green-100: #EDF9F1;
    --green-200: #C2F6DA;
    --green-300: #98E5BB;
    --green-400: #6CD79C;
    --green-500: #00C67F;
    --green-600: #029761;
    --green-700: #036743;
    --green-800: #234D41;
    --green-900: #000C08;

    --blue-100: #E8EFF7;
    --blue-200: #CBD9ED;
    --blue-300: #98B6E2;
    --blue-400: #679DD5;
    --blue-500: #007EC4;
    --blue-600: #185F9E;
    --blue-700: #0D3A62;
    --blue-800: #1F3144;
    --blue-900: #00050A;

    --red-100: #EFE4E8;
    --red-200: #F2C9D6;
    --red-300: #FB9BB2;
    --red-400: #FE4873;
    --red-500: #E50A3E;
    --red-600: #AE1136;
    --red-700: #750721;
    --red-800: #4C1A28;
    --red-900: #110208;

    --yellow-100: #EFEBDC;
    --yellow-200: #EBE3C1;
    --yellow-300: #E8DAA0;
    --yellow-400: #E3CA65;
    --yellow-500: #D9AE00;
    --yellow-600: #A68607;
    --yellow-700: #655207;
    --yellow-800: #353114;
    --yellow-900: #191500;

    --neutral-100: #F9FAFB;
    --neutral-200: #F3F4F6;
    --neutral-300: #DDDFE4;
    --neutral-400: #A4A9B2;
    --neutral-500: #868C98;
    --neutral-600: #676E79;
    --neutral-700: #4E555F;
    --neutral-800: #363C45;
    --neutral-900: #14161A;

    --green-dark-100: #C4F6DB;
    --green-dark-200: #A4F9CA;
    --green-dark-300: #00E090;
    --green-dark-400: #048F5D;
    --green-dark-500: #074F35;

    --blue-dark-100: #AAD7FF;
    --blue-dark-200: #71BDFF;
    --blue-dark-300: #0091E1;
    --blue-dark-400: #00659D;
    --blue-dark-500: #003F62;

    --red-dark-100: #F7BECB;
    --red-dark-200: #F65C80;
    --red-dark-300: #FF0D47;
    --red-dark-400: #B80F37;
    --red-dark-500: #7F0A26;

    --yellow-dark-100: #F5E39D;
    --yellow-dark-200: #E8CA51;
    --yellow-dark-300: #E8BA01;
    --yellow-dark-400: #A98700;
    --yellow-dark-500: #765F00;

    --header-height: 12rem;
}

* {
  box-sizing: border-box;
  font-size: 62.5%;
  margin: 0;
  padding: 0;
  border: 0;
}

body {
    font-family: 'Mona Sans';
}

p,
span,
strong,
em,
a,
ul,
li,
ol,
b,
figcaption,
div {
  font-size: 1.4rem;
  line-height: 1.55;

  &.t-big {
    font-size: 1.6rem;
    line-height: 1.65;
    letter-spacing: .5px;
  }

  &.t-small {
    font-size: 1.2rem;
    line-height: 1.3;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 4rem;
  align-self: baseline;
  font-weight: 500;

  strong,
  span {
    font: inherit;
  }
}

h1 {
    font-size: 9.6rem;
    letter-spacing: -2px;
    line-height: 1.2;
}

h2 {
    font-size: 7.2rem;;
}

h3 {
    font-size: 4.8rem;
}

h4 {
    font-size: 2.8rem;
}

h2, h3 {
    font-family: 'Mona Sans Condensed Medium';
}

section {
  padding-block: 8rem;

  @media(max-width: 991px) {
    padding-block: 6rem;
  }
}

a {
  text-decoration: none;
  color: var(--blue-900);
}

.header-container,
.section-container {
  max-width: 157.2rem;
  padding-inline: 3.2rem;

  &.section-container-compact {
    max-width: 148rem;
  }
}

.section-container,
.header-container {
  margin-inline: auto;

  &.container-relative {
    position: relative;
  }
}

.home-landing {
  background-color: var(--blue-900);
  /* overflow: hidden; */
  color: white;
  padding-top: 14.2rem;
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow-x: clip;

  h1 {
    text-transform: uppercase;
    pointer-events: none;
    font-size: 9.7vh;
  }

  .heading-secondary {
    text-align: right;
    margin-left: auto;
    margin-bottom: -4rem;
  }

  p {
    max-width: 53.5rem;
  }

  h1, p {
    color: white;
  }

  &::before {
      content: '';
      position: absolute;
      position: absolute;
      width: 190vw;
      height: 100vh;
      background: radial-gradient(35.61% 41.17% at 50% 50%, rgba(221, 239, 226, 0) 50.1%, rgba(166, 211, 221, 0.089748) 59.69%, rgba(117, 186, 217, 0.170635) 69.12%, rgba(87, 170, 214, 0.220774) 75.84%, rgba(76, 165, 214, 0.24) 79.22%, rgba(69, 168, 205, 0.24) 83.04%, rgba(49, 176, 184, 0.24) 88.96%, rgba(18, 189, 148, 0.24) 96.22%, rgba(0, 198, 127, 0.24) 100%);
      filter: blur(72.1px);
      transform: rotate(-1.31deg);
      z-index: -1;
      left: -47%;
      top: -36%;
      opacity: .6;
      background-repeat: no-repeat;
  }

  .row {
    position: relative;
  }

  .btn {
    margin-top: 4rem;
    margin-bottom: 6.6rem;
  }

  .img-shield {
    position: absolute;
    top: -21%;
    right: 16%;
    z-index: -2;
  }

  .img-cloud {
    position: absolute;
    left: 0;
    bottom: 26vh;
    z-index: -2;
  }

  .img-ai {
      position: absolute;
      bottom: 6.4rem;
      right: 20%;
      max-height: 20vh;
      z-index: -2;
  }
}

.header {
  display: flex;
  align-items: center;
  height: var(--header-height);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 20;
  transition: all .2s ease-out;

  .header-left,
  .header-right {
    flex-basis: 100%;
    display: flex;
    align-items: center;
  }

  .header-right {
    justify-content: flex-end;
  }

  .nav {
    a {
      text-transform: uppercase;
    }
  }
}

.announcement-ticker {
  overflow: hidden;
  width: 100%;
  background: linear-gradient(90deg, #CBD9ED 0%, #C2F6DA 49.52%, #CBD9ED 100%);
  height: 6.4rem;
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 0;
  z-index: -2;
}

.ticker-track {
  display: flex;
  width: max-content;
}

.ticker-set {
  display: flex;
  align-items: center;
  gap: 48px;
  padding-right: 48px;
  white-space: nowrap;
  color: var(--neutral-900);
}

@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.tech-line {
  width: 7.2rem;
  height: .1rem;
  background-color: var(--neutral-900);
  display: flex;
  align-items: center;
}

.tech-word {
  font-size: 1.8rem;
}

.header-container {
  display: flex;
  align-items: center;
  width: 100%;
}

.language-select {
  display: flex;
  gap: .8rem;

  a {
     &:not(.active) {
      color: var(--neutral-500)!important;
      pointer-events: none;
    }
  }
}

.logo {
  transition: all .2s ease-out;
}

.header-light {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(16px);

  .language-select, .nav {
    a, span {
      color: var(--blue-900);
    }
  }

  .logo {
    filter: invert(1) sepia(1) saturate(0.2) hue-rotate(200deg) brightness(0.1);
  }

  .menu-switch {
    &::before,
    &::after {
      background-color: var(--neutral-900);
    }
  }
}

.header-dark {
  .language-select, .nav {

    a, span {
      color: white;
    }
  }

  .logo {
    filter: brightness(1);
  }

}

.nav {
  display: flex;
  align-items: center;
  gap: 8rem;
}

.menu-switch {
  width: 3.6rem;
  height: 3.6rem;
  display: flex;
  flex-shrink: 0;
  align-items: flex-end;
  flex-direction: column;
  color: white;
  justify-content: space-between;
  padding: 1rem .2rem;
  cursor: pointer;

  &::before,
  &::after {
    content: "";
    background-color: white;
    height: .2rem;
    border-radius: .5rem;
    transition: all .2s ease-out;
  }

  &::before {
    width: 100%;
  }

  &::after {
    width: 55%;
    transition: width .2s ease-out;
  }

  &:hover {
    &::after {
      width: 100%;
    }
  }
}

/* button - start */

.btn {
  box-shadow: none;
  outline: none;
  padding: 1.13rem 2.4rem;
  font-weight: 500;
  font-size: 1.8rem;
  border-radius: .4rem;
  transition: all .2s ease-out;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  background: none;
  gap: 1.2rem;

  &.btn-primary-light {
    background: linear-gradient(273.11deg, #00E090 0%, #A4F9CA 100%);
    color: var(--neutral-900);

    &:hover {
      background: linear-gradient(93.11deg, #FFFFFF 0%, #C4F6DB 100%);
    }

    &:active {
      background: linear-gradient(93.11deg, #C4F6DB 0%, #C4F6DB 100%);
    }

    &[disabled],
    &.disabled,
    &[disabled]:hover,
    &.disabled:hover {
      background: var(--neutral-400)!important;
      color: #14161ABF;
    }
  }

  &.btn-outline-light {
    color: white;
    border: 1px solid transparent;
    background:
      linear-gradient(var(--blue-900), var(--blue-900)) padding-box,
      linear-gradient(
        90deg,
        #00E090 0%,
        #C4F6DB 25%,
        #C4F6DB 75%,
        #00E090 100%
      ) border-box;
    background-size:
      100% 100%,
      200% 100%;

    background-position:
      0 0,
      0% 0%;
    transition: background-position 0.5s ease-out;

    &:hover {
        background-position:
          0 0,
          100% 0%;
      }

    &:active {
      background: 
        linear-gradient(var(--blue-900), var(--blue-900)) padding-box,
        linear-gradient(270deg, #00E090 0%, #C4F6DB 100%) border-box;
    }

    &[disabled],
    &.disabled,
    &[disabled]:hover,
    &.disabled:hover {
      background: #FFFFFF29!important;
      border: 1px solid #A4A9B2!important;
    }
  }

  &[disabled],
  &.disabled,
  &[disabled]:hover,
  &.disabled:hover {
    pointer-events: none;
    user-select: none;
  }

  .lnc {
    font-size: inherit;
  }

  &:hover {
    .arrow-animation {
      .animation-container {
        left: 0%;
      }
    }
  }
}

.arrow-animation {
  width: 2.3rem;
  height: 2.3rem;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;

  .animation-container {
    display: flex;
    gap: .6rem;
    position: absolute;
    width: fit-content;
    left: -100%;
    transition: all .5s ease-out;

    .lnc {
      font-size: 2rem;
    }
  }
}

.animation-stage {
  height: 140vh;
  position: absolute;
  right: 0;
  top: 71vh;
  left: 0;
  z-index: -1;
  max-width: 148rem;
  margin-inline: auto;
}

.video-sticky {
    position: sticky;
    top: 16%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    margin-top: -25%;

    video {
      max-width: 25%;
      max-height: 80vh;
    }
}

.video-spaceholder {
  height: 115vh;
}

.main-features-section {
  background: #E8EFF7;
  z-index: 0;
}

/* button - send */

/* ── Vertical Slider Click ─────────────────────────────── */

.vsc-inner {
    display: flex;
    gap: 80px;
    align-items: flex-start;
}

/* ── Left: accordion ─────────────────────────────────── */
.vsc-left {
    flex: 0 0 42%;
    display: flex;
    flex-direction: column;

    .vsc-item {
      &:first-of-type {
        padding-top: 0;
      }
    }
}

  .vsc-divider {
    height: .1rem;
    background: #c8d8d5;
    position: relative;
    overflow: hidden;
  }


.vsc-item {
    cursor: pointer;
    padding: 24px 0;
    position: relative;

  .vsc-title {
    margin-bottom: 2.2rem;
    line-height: 1;
    display: flex;

    &::before {
        content: '';
        display: inline-flex;
        width: 0;
        transition: all .2s ease-out;
    }
  }

  .vsc-body {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease;

    p {
      strong {
        font: inherit;
        font-weight: 500;
      }
    }
  }

  &.active {
    .vsc-title {
      color: #0d2b26;

      &::before {
        width: .6rem;
        min-height: 0;
        background-color: var(--green-600);
        border-radius: .1rem;
        margin-right: 1.4rem;
      }
    }

    .vsc-body {
        max-height: 20rem;
        opacity: 1;
    }
  }

  &:not(.active) {
    .vsc-title {
      color: var(--neutral-500);
    }
  }
}

/* ── Right: swiper ───────────────────────────────────── */
.vsc-right {
    flex: 1;
    border-radius: 16px;
    position: relative;

    .vsc-badge {
      position: absolute;
      background: linear-gradient(270deg, rgba(0, 126, 196, 0.6) 0%, rgba(0, 198, 127, 0.6) 100%);
      color: #fff;
      font-size: 2rem;
      padding: .4rem 1.4rem;
      border-radius: .8rem;
      letter-spacing: 0.01em;
      white-space: nowrap;
      box-shadow: 0px 4px 6.8px 0px rgba(0, 0, 0, 0.161);
      backdrop-filter: blur(8px);
      z-index: 5;
      display: flex;
      align-items: center;
      gap: .8rem;

      strong {
        font-size: 4rem;
        font-weight: 500;
      }

    &.vsc-badge--top-right {
      top: 1.6rem;
      right: 1.6rem;
    }

    &.vsc-badge--mid-left {
      top: 40%;
      left: 0;
      transform: translateX(-50%);
    }
  }
}

.vsc-swiper {
    width: 100%;
    height: 52rem;; /* fiksna visina containera */
    border-radius: .4rem;

  .swiper-slide {
    height: auto !important; /* swiper ne forsiraj punu visinu */

    .vsc-slide-img-wrap {
        position: relative;
        border-radius: .4rem;
        overflow: hidden;
        aspect-ratio: 16/10;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
      }
    }
  }
}
@media (max-width: 768px) {
    .vsc-inner {
        flex-direction: column;
        gap: 4rem;
    }
    .vsc-left { flex: none; width: 100%; }
}

.horizontal-cards {
  display: flex;
  flex-direction: column;
  gap: 6.4rem;

  .horizontal-card {
    display: flex;
    min-height: 36rem;
    gap: 2.4rem;

    .horizontal-card-img {
      width: 51rem;
      flex-shrink: 0;
      border-radius: .4rem;
      position: relative;
      overflow: hidden;

      @media(max-width: 1136px) {
        width: 100%;
        max-height: 40rem;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        border-radius: .4rem;
        display: flex;

        @media(min-width: 1137px) {
          position: absolute;
        }
      }
    }

    .horizontal-card-body {
      flex-grow: 1;
      padding: 5.6rem 20% 5.6rem 5.6rem;
      position: relative;
      border-radius: .4rem;
      isolation: isolate;

      h3 {
        line-height: 1;
      }

      p {
        font-size: 1.8rem;
      }

      img {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 25%;
        z-index: -1;

        @media(max-width: 728px) {
          width: 80%;
        }
      }

      @media(max-width: 1136px) {
        padding: 5.6rem 30% 5.6rem 5.6rem;
        order: 1;
      }

      @media(max-width: 728px) {
        padding: 5.6rem 5.6rem 40% 5.6rem;
      }
    }

    @media(max-width: 1136px) {
      flex-direction: column;
    }
  }
}

.cybersecurity-horizontal-card {
  .horizontal-card-body {
    background: linear-gradient(293.36deg, #C2F6DA 20.06%, #EDF9F1 49.82%);

    img {
      width: 30%!important;
      max-height: 90%;
    }
  }
}

.cloud-horizontal-card {
  .horizontal-card-body {
    background: linear-gradient(115.52deg, #E8EFF7 46.88%, #CBD9ED 75.43%);

    img {
      width: 30%!important;
      max-height: 90%;
    }
  }
}

.ai-horizontal-card {
  .horizontal-card-body {
    background: linear-gradient(117.13deg, #EFE4E8 42.6%, #F2C9D6 73.62%);

    img {
      width: 40%!important;
      max-height: 90%;

      @media(max-width: 728px) {
        width: 55%!important;
      }
    }
  }
}

.dark-section {
  background-color: var(--blue-900);
  color: white;
}

.row {
  display: flex;
  gap: 4.5rem;

  .column {
    flex-basis: 100%;
  }

  @media(max-width: 991px) {
    flex-direction: column;
  }

  @media(min-width: 992px) {
    &.row-align-center {
      align-items: center;
    }
  }
}

.lh-1 {
  line-height: 1;
}

.previous-speaker-section {
  .previous-speaker-desc {
    margin-bottom: 3.8rem;
  }
}

.swiper-speakers {
  .swiper-wrapper {
    gap: 3.2rem;
    transition: all .3s ease-out;
    transition-timing-function: linear !important;

    &:hover {
      .swiper-slide {
        &:not(:hover) {
          filter: blur(2px) brightness(0.5);
          opacity: 0.6;
        }

        &:hover {
          flex: 0 0 40%;
        }
      }
    }
  }
  .swiper-slide {
    transition: flex 0.4s ease, filter 0.4s ease, opacity 0.4s ease;
    position: relative;
    height: 50rem;
    transition: all .3s ease-out;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 0 0 33.3rem;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    &::before {
      content: "";
      background: linear-gradient(180deg, rgba(0, 5, 10, 0) 0%, rgba(0, 5, 10, 0.75) 100%);
      position: absolute;
      bottom: 0;
      right: 0;
      left: 0;
      height: 12rem;
    }

    .social-bar {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      padding: 4rem 2.4rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2.4rem;

      &::after {
        content: '';
        width: .1rem;
        height: 100%;
        background-color: white;
        border-radius: .4rem;
      }

      img {
        width: 2.8rem;
        height: 2.8rem;
      }
    }

    .speaker-details {
      padding: 2.4rem 4rem 2.4rem 2.4rem;
      position: absolute;

      h5 {
        margin-bottom: .4rem;
        font-size: 2.4rem;
        font-weight: 500;
        font-family: 'Mona Sans Condensed Medium';
        letter-spacing: 2px;
      }

      p {
        font-size: 1.6rem;
      }
    }
  }
}