@charset "UTF-8";
/*
Theme Name: FESI.sk
Version: 99999999.7
*/

html {
    box-sizing: border-box;
}

body {
    font-size: 18px;
    color: #231C2E;
    /* background-color: black; */
    color: #faf5ee;
    background-color:#342ee8;
    width: 100vw;
    overflow-x: hidden;
    display: block;
}

a {color:#e8ff44}


body.single {
    /* background-color: black; */
}

*, * :before, * :after {
    box-sizing: inherit;
}

ol, ul {
    padding: 0;
}


body, label, input, textarea, h1, h2, h3, h4, h5, h6, p, ol, li, ul, dl, dd, blockquote, figure, body {
    padding: 0;
    margin: 0;
    /* color: #27BFDA; */
    /* font-family: 'Open Sans', sans-serif; */
    /* font-family: 'Marcellus', serif; */
    /* font-family: 'Playfair Display', serif; */
    /* font-family: 'Montserrat', sans-serif; */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 700;
   font-family:"Helvetica Neue LT Pro", Helvetica, Arial, sans-serif;


  font-weight: 700;
  font-style: normal;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
}



 .anim-container {
      position: relative;
      width: 360px;
      /* height: 40%; */
      margin: 0 auto;
      overflow: hidden;
      /* transform: scale(.3); */
      /* display: block; */
      /* display: flex; */
      /* max-width: 250px; */
      /* margin-left: 0; */
      /* margin: 20px; */
      z-index: 1;
      /* margin-left: -16%; */
      /* margin-top: -30%; */
      /* min-width: 230px; */
      min-height: 190px;
      overflow: hidden;
      margin-bottom: 0;
      margin-top: 20px;
    }


.anim-container:after {content:"";display:block;width: 200px;height: 63px;background-image:url(https://fesi.sk/wp-content/uploads/2025/10/fesi.svg);background-repeat: no-repeat;/* background-color: red; */position: absolute;left: 0;top: 71px;left: 95px;background-position: right;transition: all .3s;opacity: 1;/* opacity: 0; */}
.anim-container:before {content:"";display:block;width: 200px;height: 63px;background-image:url(https://fesi.sk/wp-content/uploads/2025/10/fesi-2.svg);background-repeat: no-repeat;/* background-color: red; */position: absolute;left: 0;top: 71px;left: 95px;background-position: right;transition: all .3s;opacity: 0;}

.anim-container:hover:before {opacity:1;}
.anim-container:hover:after {opacity:0;}
  .frame {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      /* height: 100%; */
      display: none;
      z-index: 1;
      /* margin-left: -12px; */
      max-width: 210px;
    }

    .frame.active {
      display: block;
    }

form {margin:20px auto;display:block;max-width:500px;padding: 20px;}

input, textarea, select {
    width: 100%;
    font-family: inherit;
    /* padding: 15px 15px; */
    border-radius: 0;
    font-size: 1rem;
    margin-bottom: 2px;
    max-width: 500px;
    -webkit-appearance: none;
    appearance: none;
    color: white;
    background-color: transparent;
    outline: 0px;
    /* border: 0; */
    border: 2px solid #fff;
    /* box-shadow: rgba(0, 0, 0, 0.05) 1px 1px 8px; */
    /* font-weight: bold; */
    transition: all 0.3s ease 0s;
    -webkit-transition: all .3s ease-in-out;
    display: inline;
    box-sizing: border-box;
    line-height: 1.5rem;
    /* font-size: 1rem; */
    padding: 10px 5px;
    border-radius: 0px;
    /* background-color: black; */
}
::placeholder {color:#fff}
input[type=submit] {
    padding: 10px 22px;
    background-color: #e8ff44;
    color: white;
    color: #342ee8;
    margin-top: 24px;
    text-transform: uppercase;
    border-radius: 30px;
    border-color: #e8ff44;
    /* font-family: 'Mona-Sans', sans-serif; */
    font-weight: bold;
    font-size: 1.3rem;
}

body .wpcf7-not-valid-tip {
    font-size: .57rem;
    line-height: 1rem
}

body .wpcf7 form .wpcf7-response-output {
    margin-bottom: 30px;
    font-size: 1rem;
    font-weight: bold;
    padding: 20px;
}

body .wpcf7-not-valid-tip {color:white; font-size:.8rem; margin:0px auto 10px;}


#colophon {text-align:center; padding:20px; font-size:.8rem}


.ele {position:absolute;/* height: 60px; *//* background-color:red; *//* width: 20%; *//* display:block; *//* top: 90px; *//* left: -23px; */background-repeat: no-repeat;/* transition: all 3.3s; */max-width: 170px;min-width: 170px;/* z-index: 1; */}
.ele.e-1 {background-image:url(https://fesi.sk/wp-content/uploads/2025/10/10-el.svg);background-size:contain;width: 40%;height: 24%;top: 10px;left: -1%;transform-origin: top left;transition: all .1s;max-width: 300px;}
.ele.e-2 {background-image: url(https://fesi.sk/wp-content/uploads/2025/10/01-el.svg);background-size:contain;top: 20%;right: 0;left: initial;background-position: right;right: 10%;transform-origin: right;width: 20%;height: 10%;background-position: 140px 0px;transition: all .6s;}
.ele.e-3 {background-image: url(https://fesi.sk/wp-content/uploads/2025/10/02-el.svg);background-size:contain;bottom: 5%;/* right: 0; */left: 0;background-position: right;right: -40px;transform-origin: right;width: 38%;height: 21%;position: fixed;}
.ele.e-4 {background-image: url(https://fesi.sk/wp-content/uploads/2025/10/03-el.svg);background-size:contain;top: 140px;/* right: 0; *//* left: 0; */background-position: right;right: 30%;transform-origin: center;width: 40%;height: 30%;position: absolute;transform: scale(.5);}
.ele.e-5 {background-image: url(https://fesi.sk/wp-content/uploads/2025/10/04-el.svg);background-size:contain;top: 50%;/* right: 0; *//* left: 0; */background-position: right;right: 10%;transform-origin: center;width: 40%;height: 30%;position: absolute;transform: scale(.5);transition: all .1s;}
.ele.e-6 {background-image: url(https://fesi.sk/wp-content/uploads/2025/10/05-el.svg);background-size:contain;top: 30%;/* right: 0; */left: -230px;background-position: left;/* right: 0%; */transform-origin: center;width: 60%;height: 30%;position: absolute;transform: scale(.5);transition: all .1s;max-width: 320px;}


body:hover .e-1111 {left:-20px;transform-origin: left;transform: scale(1.85);}
body:hover .e-2 {background-position:10px 0px}
body:hover .e-3 {right: -50px;transform: scale(1.2);}
body:hover .e-4 {transform: scale(.2);}
body:hover .e-5 {transform: rotate(45deg);}

body:hover .e-6 {left: -110px;}

.ele.e-1:hover {background-image:url(https://fesi.sk/wp-content/uploads/2025/10/09-el.svg)}
/* optional: hide the source words; the script adds a single visible span */
.rotate > span { display: none; color:#e8ff44 }




.copy h1 {text-align:center;max-width: 460px;20px:auto;20px:auto;20px:aut;20px:au;20px:initial;20px:initial;20px:a;margin: 10px auto;line-height: 2.1rem;font-size: 2rem;margin-bottom: 30px;margin-top: 90px;}
.copy h2 {text-align:center;max-width: 670px;20px:auto;20px:auto;20px:aut;20px:au;20px:initial;20px:initial;20px:a;margin: 0px auto;line-height: 1.53rem;font-size: 1.352rem;}
.copy p {text-align:center;/* max-width: 670px; */20px:auto;20px:auto;20px:aut;20px:au;20px:initial;20px:initial;20px:a;margin: 0px auto;line-height: 1.3rem;font-size: 1rem;display: block;}

.rotate {white-space:nowrap;display:block;/* width:200px; */text-align:center;margin: 5px auto;font-size: 2.7rem;line-height: 2.8rem;}





.anim-container {opacity: 0;
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
    -webkit-animation: contactTop 520ms ease-out .3s forwards;
    -moz-animation: contactTop 520ms ease-out .3s forwards;
    -ms-animation: contactTop 520ms ease-out .3s forwards;
    animation: contactTop 520ms ease-out .3s forwards;
}

h1 {opacity: 0;
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
    -webkit-animation: contactTop 520ms ease-out .4s forwards;
    -moz-animation: contactTop 520ms ease-out .4s forwards;
    -ms-animation: contactTop 520ms ease-out .4s forwards;
    animation: contactTop 520ms ease-out .4s forwards;
}

.rotate {opacity: 0;
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
    -webkit-animation: contactTop 520ms ease-out .5s forwards;
    -moz-animation: contactTop 520ms ease-out .5s forwards;
    -ms-animation: contactTop 520ms ease-out .5s forwards;
    animation: contactTop 520ms ease-out .5s forwards;
}

h2 {opacity: 0;
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
    -webkit-animation: contactTop 520ms ease-out .6s forwards;
    -moz-animation: contactTop 520ms ease-out .6s forwards;
    -ms-animation: contactTop 520ms ease-out .6s forwards;
    animation: contactTop 520ms ease-out .6s forwards;
}

.copy p {opacity: 0;
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
    -webkit-animation: contactTop 520ms ease-out .7s forwards;
    -moz-animation: contactTop 520ms ease-out .7s forwards;
    -ms-animation: contactTop 520ms ease-out .7s forwards;
    animation: contactTop 520ms ease-out .7s forwards;
}


form {opacity: 0;
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
    -webkit-animation: contactTop 520ms ease-out .8s forwards;
    -moz-animation: contactTop 520ms ease-out .8s forwards;
    -ms-animation: contactTop 520ms ease-out .8s forwards;
    animation: contactTop 520ms ease-out .8s forwards;
}







/* ==================================================
   FONT SETUP
================================================== */

@font-face {
  font-family: "Helvetica Neue LT Pro";
  src:     url("https://fesi.sk/wp-content/uploads/fonts/HelveticaNeueLTPro-BdEx.woff2") format("woff2"),
    url("https://fesi.sk/wp-content/uploads/fonts/HelveticaNeueLTPro-BdEx.woff") format("woff");   
  font-weight: 700;    font-style: normal;
  font-display: swap;}


@font-face {   
  font-family: "Helvetica Neue LT Pro";   
  src:       url("https://fesi.sk/wp-content/uploads/fonts/HelveticaNeueLTPro-BlkEx.woff2") format("woff2"),
    url("https://fesi.sk/wp-content/uploads/fonts/HelveticaNeueLTPro-BlkEx.woff") format("woff");
  font-weight: 900;   font-style: normal;   font-display: swap;
}


:root {
  --brand-blue: #3430f4;
  --brand-yellow: #dfff00;
  --brand-light: #f1f1f3;
  --brand-white: #ffffff;

  --font-main:
    "Helvetica Neue LT Pro", Helvetica, Arial, sans-serif;



   

  --page-width: 1920px;
}


/* ==================================================
   BASE
================================================== */







.site-header{
    /* background:#3430f4; */
    padding:28px 0;
}

.site-header .container{
    width:min(1400px, calc(100% - 60px));
    margin:0 auto;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
}

.logo{
    display:block;
    flex-shrink:0;
}

.logo img{
    display:block;
    width:220px;
    height:auto;
}

.main-nav ul{
    margin:0;
    padding:0;

    display:flex;
    align-items:center;
    gap:48px;

    list-style:none;
}

.main-nav a{
    color:#fff;
    font-family:
        "Helvetica Neue LT Pro",
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;
    font-size:20px;
    font-weight:900;
    text-decoration:none;
    text-transform:uppercase;
    transition:color .25s ease;
    padding-top: 10px;
    line-height: 1rem;
}

.main-nav a:hover,
.main-nav a.active{
    color:#e5ff18;
}

/* Mobile */

@media (max-width:900px){

    .site-header{
        padding:20px 0;
    }

    .site-header .container{
        flex-direction:column;
        gap:24px;
    }

    .logo img{
        width:180px;
    }

    .main-nav ul{
        flex-wrap:wrap;
        justify-content:center;
        gap:20px 30px;
    }

    .main-nav a{
        font-size:16px;
    }

}





.brand-page,
.brand-page * {
  box-sizing: border-box;
}

.brand-page {
  margin: 0;
  color: var(--brand-blue);
  background: var(--brand-white);
  font-family: var(--font-main);
}

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

.brand-container {
  width: min(calc(100% - 40px), var(--page-width));
  margin: 0 auto;
}


/* ==================================================
   TYPOGRAPHY
================================================== */

.brand-page h1,
.brand-page h2 {
  margin: 0;
  font-family: var(--font-main);
  font-weight: 900;
  font-stretch: expanded;
  text-transform: uppercase;
  letter-spacing: -0.035em;
  line-height: 1;
}

.brand-page p {
  margin: 0;
  font-family: var(--font-main);
  font-weight: 500;
  font-stretch: expanded;
  line-height: 1.505;
}


/* ==================================================
   BUTTON
================================================== */

.brand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 8px 22px;
  border-radius: 15px;
  border-top-left-radius: 0;
  color: var(--brand-blue);
  background: var(--brand-yellow);
  font-family: var(--font-main);
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 2;
  padding-top: 14px;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.brand-btn:hover,
.brand-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(52, 48, 244, 0.18);
}

.brand-btn:focus-visible {
  outline: 3px solid #111;
  outline-offset: 3px;
}


/* ==================================================
   HERO
================================================== */

.brand-hero {
  display: flex;
  align-items: center;
  height: 80vh;
  min-height: 560px;
  background: var(--brand-blue);
}

.brand-hero__inner {
  text-align: center;
}

.brand-hero h1 {
  margin-bottom: 22px;
  color: var(--brand-white);
  font-size: clamp(52px, 7vw, 98px);
  line-height: 1;
}


.brand-hero h1 {
  margin-bottom: 22px;
  color: var(--brand-white);
  font-size: clamp(52px, 7vw, 98px);
  line-height: 1;

  opacity: 0;
  filter: blur(18px);
  transform: translateY(35px) scale(0.94);

  animation: heroTitleReveal 1.15s cubic-bezier(.16, 1, .3, 1) forwards;
  animation-delay: 0.15s;

  will-change: opacity, transform, filter;
}

@keyframes heroTitleReveal {
  0% {
    opacity: 0;
    filter: blur(18px);
    transform: translateY(35px) scale(0.94);
  }

  60% {
    opacity: 1;
    filter: blur(2px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}
.brand-hero .brand-btn {
  opacity: 0;
  transform: translateY(18px) scale(0.96);

  animation: heroButtonReveal .75s cubic-bezier(.16, 1, .3, 1) forwards;
  animation-delay: .75s;
}

@keyframes heroButtonReveal {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/* ==================================================
   INTRO
================================================== */

.brand-section {
  padding: 64px 0 54px;
}

.brand-intro {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  align-items: center;
  min-height: 350px;
  padding: 50px 70px;

  background: var(--brand-light);
  border-radius: 10px;
}

.brand-intro__content {
  position: relative;
  z-index: 2;
}

.brand-intro h2 {
  margin-bottom: 14px;
  font-size: clamp(42px, 5vw, 72px);
}

.brand-intro p {
  margin-bottom: 18px;
  font-size: clamp(18px, 2vw, 27px);
}

.brand-intro__icons {
  min-width: 0;
}


/* ==================================================
   WATCH ICON AREA
   Keep your existing icon positioning rules below
================================================== */

.watch-icons {
  position: relative;
  width: 100%;
  height: 290px;
  margin: 0 auto;
  overflow: visible;
}


/* ==================================================
   REPEATABLE SERVICES
================================================== */

.brand-services {
  width: min(calc(100% - 40px), 1400px);
  margin: 0 auto;
  padding-bottom: 100px;
}

.brand-service-row {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  align-items: center;
  gap: 70px;
  margin-bottom: 90px;
}

/*
Automatically switches layout:
1st row image left
2nd row image right
3rd row image left
etc.
*/

.brand-service-row:nth-child(even) .brand-service-row__media {
  order: 2;
}

.brand-service-row:nth-child(even) .brand-service-row__content {
  order: 1;
}

.brand-service-row__media {
  position: relative;
  min-width: 0;
}

.brand-service-row__media > img:first-child {
  width: 100%;
  aspect-ratio: 1.75 / 1;
  object-fit: cover;
  background: var(--brand-blue);
  border-radius: 15px;
  border-top-left-radius: 0;
}

.brand-service-row__badge {
  position: absolute;
  top: 50%;
  width: 98px;
  height: 98px;
  transform: translateY(-50%);
  border-radius: 50%;
}

.brand-service-row__badge--right {
  right: -49px;
}

.brand-service-row__badge--left {
  left: -48px;
}

.brand-service-row__content h2 {
  margin-bottom: 12px;
  font-size: clamp(32px, 4vw, 53px);
}

.brand-service-row__content p {
  margin-bottom: 18px;
  font-size: clamp(16px, 1.8vw, 23px);
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 900px) {
  .brand-hero {
    min-height: 480px;
  }

  .brand-intro {
    grid-template-columns: 1fr 1fr;
    padding: 45px 42px;
  }

  .brand-service-row {
    gap: 45px;
  }
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 700px) {
  .brand-container,
  .brand-services {
    width: min(calc(100% - 28px), var(--page-width));
  }

  .brand-hero {
    min-height: 430px;
  }

  .brand-hero h1 {
    font-size: clamp(46px, 14vw, 72px);
  }

  .brand-section {
    padding: 34px 0 50px;
  }

  .brand-intro {
    grid-template-columns: 1fr;
    padding: 34px 24px 20px;
  }

  .brand-intro__icons {
    order: -1;
    margin-bottom: 20px;
  }

  .watch-icons {
    height: 280px;
  }

  .brand-service-row,
  .brand-service-row:nth-child(even) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    margin-bottom: 70px;
  }

  /*
  Image always first on mobile
  */

  .brand-service-row__media,
  .brand-service-row:nth-child(even) .brand-service-row__media {
    order: 1;
    width: 100%;
  }

  .brand-service-row__content,
  .brand-service-row:nth-child(even) .brand-service-row__content {
    order: 2;
    width: 100%;
  }

  .brand-service-row__media > img:first-child {
    aspect-ratio: 1.4 / 1;
  }

  .brand-service-row__badge {
    top: auto;
    right: 20px;
    bottom: -35px;
    left: auto;
    width: 70px;
    height: 70px;
    transform: none;
  }

  .brand-service-row__content h2 {
    font-size: clamp(34px, 10vw, 48px);
  }

  .brand-service-row__content p {
    font-size: 18px;
  }
}





.detail-section {
  width: min(calc(100% - 40px), 1400px);
  margin: 0 auto;
  padding: 100px 0;
  color: var(--brand-blue, #3430f4);
}

.detail-section__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
  min-height: 430px;
  margin-bottom: 70px;
}

.detail-section__content h2 {
  margin: 0 0 22px;
  font-family:
    "Helvetica Neue LT Pro",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;
  font-size: clamp(42px, 5vw, 72px);
  font-weight: 900;
  font-stretch: expanded;
  line-height: 1;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.detail-section__content p {
  margin: 0;
  font-family:
    "Helvetica Neue LT Pro",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;
  font-size: clamp(18px, 2vw, 27px);
  font-weight: 500;
  font-stretch: expanded;
  line-height: 1.5;
  letter-spacing: -0.025em;
}


/* ICON CLOUD */

.detail-section__icons {
  position: relative;
  width: 100%;
  min-height: 390px;
}

.detail-icon {
  position: absolute;
  display: block;
  width: var(--icon-size);
  height: var(--icon-size);
  object-fit: contain;
}

.detail-icon--1 {
  --icon-size: 92px;
  top: 0;
  left: 8%;
}

.detail-icon--2 {
  --icon-size: 118px;
  top: -10px;
  right: 15%;
}

.detail-icon--3 {
  --icon-size: 80px;
  top: 85px;
  left: 29%;
}

.detail-icon--4 {
  --icon-size: 94px;
  top: 145px;
  right: 20%;
}

.detail-icon--5 {
  --icon-size: 78px;
  top: 190px;
  left: 26%;
}

.detail-icon--6 {
  --icon-size: 112px;
  top: 205px;
  right: 0;
}

.detail-icon--7 {
  --icon-size: 112px;
  bottom: 0;
  left: 44%;
}


/* BENEFIT CARDS */

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

.benefit-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  min-height: 420px;
  padding: 52px 30px 42px;

  text-align: center;
  background: var(--brand-yellow, #dfff00);
  border-radius: 14px;
}


.benefit-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;

    min-height:420px;
    padding:52px 30px 42px;

    text-align:center;

    background:var(--brand-yellow,#dfff00);
    border-radius:14px;

    transition:
        transform .35s cubic-bezier(.22,1,.36,1),
        background-color .35s ease,
        box-shadow .35s ease;

    transform-origin:center;
}

.benefit-card:hover{
    background:#fff;

    transform:
        translateY(-12px)
        scale(1.05);

    box-shadow:
        0 20px 60px rgba(52,48,244,.18);

    z-index:10;
}

.benefit-card h3,
.benefit-card p{
    transition:color .35s ease;
}

.benefit-card:hover h3,
.benefit-card:hover p{
    color:var(--brand-blue,#3430f4);
}

.benefit-card__icon{
    transition:
        transform .35s cubic-bezier(.22,1,.36,1);
}

.benefit-card:hover .benefit-card__icon{
    transform:rotate(-6deg) scale(1.08);
}


.benefit-card__icon {
  width: 108px;
  height: 108px;
  margin-bottom: 28px;
  object-fit: contain;
}

.benefit-card h3 {
  margin: 0 0 18px;
  font-family:
    "Helvetica Neue LT Pro",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;
  font-size: clamp(24px, 1.98vw, 35px);
  font-weight: 900;
  font-weight: 900;
  font-stretch: expanded;
  line-height: 1.3;
  letter-spacing: -0.035em;
}

.benefit-card p {
  margin: 0;
  font-family:
    "Helvetica Neue LT Pro",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;
  font-size: clamp(18px, 1.65vw, 25px);
  font-weight: 500;
  font-stretch: expanded;
  line-height: 1.5;
  letter-spacing: -0.02em;
}


/* TABLET */

@media (max-width: 980px) {
  .detail-section {
    padding: 80px 0;
  }

  .detail-section__top {
    grid-template-columns: 1fr 0.9fr;
    gap: 40px;
  }

  .detail-section__icons {
    min-height: 340px;
    transform: scale(0.9);
    transform-origin: center;
  }

  .benefit-grid {
    gap: 20px;
  }

  .benefit-card {
    min-height: 380px;
    padding: 42px 24px 34px;
  }
}


/* MOBILE */

@media (max-width: 700px) {
  .detail-section {
    width: min(calc(100% - 28px), 1200px);
    padding: 60px 0;
  }

  .detail-section__top {
    grid-template-columns: 1fr;
    gap: 30px;
    min-height: 0;
    margin-bottom: 45px;
  }

  .detail-section__content h2 {
    font-size: clamp(34px, 10vw, 48px);
  }

  .detail-section__content p {
    font-size: clamp(20px, 5.6vw, 28px);
  }

  .detail-section__content p br {
    display: none;
  }

  .detail-section__icons {
    min-height: 320px;
    transform: none;
  }

  .detail-icon--1 {
    --icon-size: 72px;
    left: 4%;
  }

  .detail-icon--2 {
    --icon-size: 92px;
    right: 8%;
  }

  .detail-icon--3 {
    --icon-size: 64px;
    left: 32%;
  }

  .detail-icon--4 {
    --icon-size: 76px;
    right: 21%;
  }

  .detail-icon--5 {
    --icon-size: 62px;
    left: 23%;
  }

  .detail-icon--6 {
    --icon-size: 90px;
    right: 0;
  }

  .detail-icon--7 {
    --icon-size: 92px;
    left: 44%;
  }

  .benefit-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .benefit-card {
    min-height: 0;
    padding: 38px 24px;
  }

  .benefit-card__icon {
    width: 96px;
    height: 96px;
    margin-bottom: 22px;
  }

  .benefit-card h3 {
    font-size: clamp(32px, 9vw, 44px);
  }

  .benefit-card p {
    font-size: 20px;
  }
}
























.watch-icon::after{
    content: attr(aria-label);
    position:absolute;
    left:50%;
    bottom: -24px;
    transform:translateX(-50%) translateY(8px);
    padding: 11px 11px 8px 11px;
    background:#17151d;
    color:#fff;
    border-radius:8px;
    font-size:13px;
    line-height:1;
    white-space:nowrap;
    opacity:0;
    visibility:hidden;
    transition:.2s;
    pointer-events:none;
    /* padding-top: 1px; */
}

.watch-icon:hover::after,
.watch-icon:focus-visible::after{
    opacity:1;
    visibility:visible;
    transform: translateX(-50%) translateY(2px);
    bottom: -39px;
}
.watch-icon::before{
    content:"";
    position:absolute;
    left:50%;
    bottom: -20px;
    width:10px;
    height:10px;
    background:#17151d;
    transform:translateX(-50%) rotate(45deg);
    opacity:0;
    visibility:hidden;
    transition:.2s;
    pointer-events:none;
}

.watch-icon:hover::before,
.watch-icon:focus-visible::before{
    opacity:1;
    visibility:visible;
    bottom: -15px;
}

.watch-icon {
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.08));
}

.watch-icons {
  position: relative;
  width: min(100%, 1000px);
  height: 700px;
  margin: 0 auto;
  overflow: visible;
}

.watch-icon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;

  width: var(--size);
  height: var(--size);

  left: var(--left);
  top: var(--top);

  border-radius: 50%;
  text-decoration: none;

  transform: translate(-50%, -50%) scale(1);
  transform-origin: center;

  transition: transform 0.16s ease-out;
  will-change: transform;

  z-index: 1;
}

.watch-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;

  backface-visibility: hidden;
  transform: translateZ(0);
}

.watch-icon:hover,
.watch-icon:focus-visible {
  z-index: 100;
}

.watch-icon:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 5px;
}

/* Individual icon positions and sizes */

.icon-1 {
  --size: 145px;
  --left: 6%;
  --top: 47%;
}

.icon-2 {
  --size: 130px;
  --left: 37%;
  --top: 16%;
}

.icon-3 {
  --size: 155px;
  --left: 72%;
  --top: 16%;
}

.icon-4 {
  --size: 95px;
  --left: 49%;
  --top: 30%;
}

.icon-5 {
  --size: 145px;
  --left: 45%;
  --top: 48%;
}

.icon-6 {
  --size: 82px;
  --left: 24%;
  --top: 83%;
}

.icon-7 {
  --size: 120px;
  --left: 26%;
  --top: 55%;
}

.icon-8 {
  --size: 132px;
  --left: 72%;
  --top: 71%;
}

.icon-9 {
  --size: 88px;
  --left: 57%;
  --top: 62%;
}

.icon-10 {
  --size: 165px;
  --left: 41%;
  --top: 74%;
}

.icon-11 {
  --size: 88px;
  --left: 29%;
  --top: 38%;
}

.icon-12 {
  --size: 150px;
  --left: 84%;
  --top: 48%;
}

.icon-13 {
  --size: 120px;
  --left: 64%;
  --top: 37%;
}

/* Tablet */

@media (max-width: 800px) {
  .watch-icons {
    height: 600px;
  }

  .watch-icon {
    width: calc(var(--size) * 0.82);
    height: calc(var(--size) * 0.82);
  }
}

/* Mobile */

@media (max-width: 600px) {
  .watch-icons {
    width: 100%;
    height: 500px;
  }

  .watch-icon {
    width: calc(var(--size) * 0.56);
    height: calc(var(--size) * 0.56);
  }

  .icon-1 {
    --left: 13%;
    --top: 50%;
  }

  .icon-2 {
    --left: 38%;
    --top: 15%;
  }

  .icon-3 {
    --left: 73%;
    --top: 15%;
  }

  .icon-4 {
    --left: 55%;
    --top: 28%;
  }

  .icon-5 {
    --left: 43%;
    --top: 47%;
  }

  .icon-6 {
    --left: 24%;
    --top: 84%;
  }

  .icon-7 {
    --left: 27%;
    --top: 57%;
  }

  .icon-8 {
    --left: 73%;
    --top: 73%;
  }

  .icon-9 {
    --left: 57%;
    --top: 66%;
  }

  .icon-10 {
    --left: 42%;
    --top: 80%;
  }

  .icon-11 {
    --left: 26%;
    --top: 30%;
  }

  .icon-12 {
    --left: 85%;
    --top: 49%;
  }

  .icon-13 {
    --left: 67%;
    --top: 47%;
  }
}

/* Very small screens */

@media (max-width: 390px) {
  .watch-icons {
    height: 440px;
  }

  .watch-icon {
    width: calc(var(--size) * 0.48);
    height: calc(var(--size) * 0.48);
  }
}

@media (prefers-reduced-motion: reduce) {
  .watch-icon {
    transition: none;
  }
}












.site-header{
    position:relative;
    /* background:#3430f4; */
    padding:28px 0;
    overflow:hidden;
}

.site-header .container{
    width:min(1400px, calc(100% - 60px));
    margin:0 auto;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
}

/* --------------------
   LOGO
-------------------- */

.logo{
    display:block;
    flex-shrink:0;

    opacity:0;
    filter:blur(10px);
    transform:translateX(-25px) scale(.9);

    animation:logoReveal .9s cubic-bezier(.16,1,.3,1) forwards;
}

.logo img{
    display:block;
    width:220px;
    height:auto;

    transition:
        transform .35s cubic-bezier(.22,1,.36,1),
        filter .35s ease;
}

.logo:hover img{
    transform:scale(1.04);
    filter:drop-shadow(0 8px 24px rgba(255,255,255,.18));
}

@keyframes logoReveal{

    0%{
        opacity:0;
        filter:blur(10px);
        transform:translateX(-25px) scale(.9);
    }

    100%{
        opacity:1;
        filter:blur(0);
        transform:none;
    }

}


/* --------------------
   MENU
-------------------- */

.main-nav ul{
    margin:0;
    padding:0;

    display:flex;
    align-items:center;
    gap:48px;

    list-style:none;
}

.main-nav li{
    opacity:0;
    transform:translateY(-18px);

    animation:menuReveal .55s cubic-bezier(.16,1,.3,1) forwards;
}

/* stagger */

.main-nav li:nth-child(1){animation-delay:.35s;}
.main-nav li:nth-child(2){animation-delay:.42s;}
.main-nav li:nth-child(3){animation-delay:.49s;}
.main-nav li:nth-child(4){animation-delay:.56s;}
.main-nav li:nth-child(5){animation-delay:.63s;}

.main-nav a{


    transition:
        color .25s ease,
        transform .25s ease;
}

.main-nav a:hover{
    color:#e5ff18;
    transform:translateY(-2px);
}

.main-nav a.active{
    color:#e5ff18;
}

/* underline animation */

.main-nav a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:100%;
    height:3px;

    background:#e5ff18;

    border-radius:10px;

    transform:scaleX(0);
    transform-origin:left;

    transition:transform .3s cubic-bezier(.22,1,.36,1);

}

.main-nav a:hover::after,
.main-nav a.active::after{

    transform:scaleX(1);

}


@keyframes menuReveal{

    from{
        opacity:0;
        transform:translateY(-18px);
    }

    to{
        opacity:1;
        transform:none;
    }

}


/* --------------------
   MOBILE
-------------------- */

@media (max-width:900px){

    .site-header{
        padding:22px 0;
    }

    .site-header .container{
        flex-direction:column;
        gap:26px;
    }

    .logo img{
        width:180px;
    }

    .main-nav ul{
        flex-wrap:wrap;
        justify-content:center;
        gap:18px 30px;
    }

    .main-nav a{
        font-size:16px;
    }

}


/* --------------------
   ACCESSIBILITY
-------------------- */

@media (prefers-reduced-motion:reduce){

    .logo,
    .main-nav li{

        animation:none;

        opacity:1;
        transform:none;
        filter:none;

    }

}


.site-header{
    position:sticky;
    top:0;
    z-index:9999;
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    background: rgba(52,48,244,.992);
    /* border-bottom:1px solid rgba(255,255,255,.08); */
}









@-webkit-keyframes contactTop{
	0%{
		opacity:0;
		-webkit-transform:translateY(-19px)
}
	100%{
		opacity:1;
		-webkit-transform:translateY(0)
}
}
@-moz-keyframes contactTop{
	0%{
		opacity:0;
		-moz-transform:translateY(-19px)
}
	100%{
		opacity:1;
		-moz-transform:translateY(0)
}
}

@keyframes contactTop{
	0%{
		opacity:0;
		transform:translateY(-19px)
}
	100%{
		opacity:1;
		transform:translateY(0)
}
}




@media only screen and (min-width: 221px) and (max-width: 880px) { 



    

}