@charset "utf-8";
/* CSS Document */

@font-face {
  font-family: 'skpn';
  src: url('skpn.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body{
  height: 100vh;
  width: 100vw;
  overflow-x:hidden;
	overflow-y: scroll;
  display: flex;
  background-color: #f5f5f5;
	    margin: 0;
}

#menu_bar
{
position: fixed;
background-color: #fff;
height: 75px;
  left: 50%;        
  transform: translateX(-50%);
bottom: 50px;
	    overflow: hidden;
	  transition: 0.5s ease-out;
		z-index: 10;
}


#menu_bar:hover
{
  filter: invert();
	cursor: pointer;
}

.menu_container {
    display: flex;
    justify-content: space-between;
    margin-top: 22px;
	padding-left: 20px;
	padding-right: 20px;
}
.menu_box {
    flex: 0 0 auto;
    padding: 5px 20px;
    text-align: center;
    font-family: 'skpn';
    font-size: 20px;
    white-space: nowrap;
}
	.hidden
	{
		width: 0px;
	}


	.expanded
	{
		width: 680px;
	}


#whitebox
{
position: absolute;
    left: 5%;

    width: 90%;
    height: 100%;
    background-color: #fff;
}

@media screen and (orientation:portrait) {

	#whitebox
{
	    width: 100%;
	left:0;
	background-color: #000;
	}
	
.menu_box {
    flex: 0 0 auto;
    padding: 5px 10px;
    text-align: center;
    font-family: 'skpn';
    font-size: 15px;
    white-space: nowrap;
}	
	#menu_bar
{
	z-index: 10;
position: fixed;
background-color: #fff;
height: 75px;
  left: 50%;        
  transform: translateX(-50%);
bottom: 0px;
	padding: 0;
	  transition: 0.5s ease-out;
}
	
	.expanded
	{
		width: 100vw;
	}
	
	}


svg {
  display: none;

    position: absolute;
    margin-left: 50%;
    transform: translateX(-50%);
	margin-top: 100px;
}





  #features-carousel {
    display: none;
  }

  @media screen and (min-width: 990px) {
    #features-carousel {
      display: block;
      background: #000;
      color: #fff;
      padding: 0 0 clamp(calc(92 * 0.82 * 1px), calc((92 / 900) * 100svh), calc(92 * 1.9 * 1px));
      overflow: hidden;
      --home-desktop-rem-scale: clamp(0.6, calc(100vw / 1440px), 2.667);
      --home-features-carousel-gap: clamp(26px, 3.9vw, 72px);
    }

    #features-carousel .home-features-desktop__inner {
      width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      padding: 0;
      box-sizing: border-box;
      display: grid;
      grid-template-columns: 50vw 50vw;
      gap: 0;
      align-items: center;
    }

    #features-carousel .home-features-desktop__title {
     top:0;
    font-family: 'skpn';
      font-weight: 400;
      font-size: calc(8.0rem * var(--home-desktop-rem-scale, 1));
      line-height: 0.96;
      letter-spacing: -0.04em;
      color: #f5f5f5;
	  position: absolute;
    }

    #features-carousel .home-features-desktop__left {
      min-width: 0;
      width: 100%;
      max-width: none;
      padding: clamp(calc(240 * 0.82 * 1px), calc((240 / 900) * 100svh), calc(240 * 1.9 * 1px))
                clamp(calc(40 * 0.85 * 1px), calc((40 / 1440) * 100vw), calc(40 * 1.8 * 1px))
                0
                clamp(calc(100 * 0.6 * 1px), calc((100 / 1440) * 100vw), calc(100 * 1.9 * 1px));
      box-sizing: border-box;
    }

    #features-carousel .home-features-desktop__list-wrap {
      position: relative;
      height: clamp(460px, 40vw, 680px);
      overflow: hidden;
		margin-top:10%;
      mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 84%, transparent 100%);
      -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 84%, transparent 100%);
    }

    #features-carousel .home-features-desktop__list {
      margin: 0;
      padding: 0;
      list-style: none;
      display: block;
      position: relative;
      height: 100%;
    }

    #features-carousel .home-features-desktop__item {
      border-radius: 20px;
      position: absolute;
      left: 0;
      width: 100%;
      transition: opacity 260ms ease, filter 260ms ease, transform 260ms ease, margin-bottom 260ms ease;
      will-change: transform, opacity, filter;
    }

    #features-carousel .home-features-desktop__item-btn {
      width: 100%;
      border: 0;
      background: transparent;
      padding: 0;
      margin: 0;
      text-align: left;
      color: #f2f2f2;
      cursor: pointer;
      font: inherit;
      position: relative;
    }

    #features-carousel .home-features-desktop__item-btn:focus-visible {
      outline: 2px solid #fff;
      outline-offset: 4px;
    }

    #features-carousel .home-features-desktop__item-title-row {
      display: flex;
      align-items: center;
      gap: 0;
    }

    #features-carousel .home-features-desktop__item-title {
      margin: 0;
    font-family: 'skpn';
      font-weight: 500;
      font-size: calc(3.4rem * var(--home-desktop-rem-scale, 1));
      line-height: 1.056;
      letter-spacing: -0.04em;
      color: #ececec;
      transition: color 220ms ease;
    }

    #features-carousel .home-features-desktop__item-body {
      margin: 0;
      position: absolute;
      left: 0;
      top: calc(100% + clamp(calc(10 * 0.82 * 1px), calc((10 / 900) * 100svh), calc(10 * 1.7 * 1px)));
      max-width: min(clamp(calc(760 * 0.88 * 1px), calc((760 / 1440) * 100vw), calc(760 * 2 * 1px)), 90%);
      font-family: 'lato';
      font-weight: 400;
      font-size: calc(1rem * var(--home-desktop-rem-scale, 1));
      line-height: 1.1;
      letter-spacing: -0.025em;
      color: #ddd;
      opacity: 0;
      transform: translateY(calc(0.6rem * var(--home-desktop-rem-scale, 1)));
      pointer-events: none;
      transition: opacity 220ms ease, transform 220ms ease;

    }

    #features-carousel .home-features-desktop__item.is-active .home-features-desktop__item-title {
      color: #fff;
    }

    #features-carousel .home-features-desktop__item.is-active .home-features-desktop__item-body {
      opacity: 1;
      transform: translateY(0);
    }

    #features-carousel .home-features-desktop__item.is-near,
    #features-carousel .home-features-desktop__item.is-mid,
    #features-carousel .home-features-desktop__item.is-far,
    #features-carousel .home-features-desktop__item.is-hidden {
      opacity: 0;
      filter: none;
    }

    #features-carousel .home-features-desktop__item.is-near .home-features-desktop__item-title {
      font-size: calc(2.8rem * var(--home-desktop-rem-scale, 1));
      color: #7A7A7A;
      line-height: 1.1;
      letter-spacing: -0.025em;
    }

    #features-carousel .home-features-desktop__item.is-mid .home-features-desktop__item-title {
      font-size: calc(2.8rem * var(--home-desktop-rem-scale, 1));
      color: #737373;
      line-height: 1.1;
      letter-spacing: -0.025em;
    }

    #features-carousel .home-features-desktop__item.is-far .home-features-desktop__item-title {
      font-size: calc(2.8rem * var(--home-desktop-rem-scale, 1));
      color: #6f6f6f;
      line-height: 1.1;
      letter-spacing: -0.025em;
    }

    #features-carousel .home-features-desktop__right {
      position: relative;
      min-height: clamp(860px, 60vw, 1240px);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--home-features-carousel-gap);
      width: 100%;
    }

    #features-carousel .home-features-desktop__stack {
      position: relative;
      width: min(
        clamp(calc(453 * 0.85 * 1px), calc((453 / 1440) * 100vw), calc(453 * 1.9 * 1px)),
        calc(100% - clamp(calc(89 * 0.85 * 1px), calc((89 / 1440) * 100vw), calc(89 * 1.8 * 1px)))
      );
      height: auto;
      aspect-ratio: 453 / 570;
      flex: 0 1 auto;
    }

    #features-carousel .home-features-desktop__card {
      position: absolute;
      left: 50%;
      top: 0;
		margin-top: -25%;
      width: var(--card-w, calc(45.3rem * var(--home-desktop-rem-scale, 1)));
      height: calc(var(--card-w, 453px) * 570 / 453);
      overflow: hidden;
      transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 280ms ease, filter 280ms ease,
                  width 420ms cubic-bezier(0.22, 0.61, 0.36, 1), height 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
      will-change: transform, opacity;
      box-shadow: 0 20px 44px rgba(0, 0, 0, 0.42);
      transform-origin: center center;
      background: #0d0d0d;
    }

    #features-carousel .home-features-desktop__card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    #features-carousel .home-features-desktop__controls {
      position: absolute;
      width: clamp(calc(52 * 0.85 * 1px), calc((52 / 1440) * 100vw), calc(52 * 1.8 * 1px));
      min-height: 0;
      height: auto;
left: -50px;
        margin-top: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: clamp(calc(6 * 0.85 * 1px), calc((6 / 1440) * 100vw), calc(6 * 1.8 * 1px));
      padding: clamp(calc(10 * 0.85 * 1px), calc((10 / 900) * 100svh), calc(10 * 1.8 * 1px)) 0
               clamp(calc(12 * 0.85 * 1px), calc((12 / 900) * 100svh), calc(12 * 1.8 * 1px));
      box-sizing: border-box;
      background: rgba(5, 5, 5, 0.4);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);

      flex: 0 0 clamp(calc(52 * 0.85 * 1px), calc((52 / 1440) * 100vw), calc(52 * 1.8 * 1px));
    }

    #features-carousel .home-features-desktop__arrow {
      width: clamp(calc(46 * 0.85 * 1px), calc((46 / 1440) * 100vw), calc(46 * 1.8 * 1px));
      height: clamp(calc(46 * 0.85 * 1px), calc((46 / 1440) * 100vw), calc(46 * 1.8 * 1px));
      border-radius: 50%;
      border: 0;
      background: rgba(10, 10, 10, 0.88);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      cursor: pointer;
      padding: 0;
    }

    #features-carousel .home-features-desktop__arrow:focus-visible {
      outline: 2px solid #fff;
      outline-offset: 2px;
    }

    #features-carousel .home-features-desktop__arrow-icon {
      width: clamp(calc(22 * 0.85 * 1px), calc((22 / 1440) * 100vw), calc(22 * 1.8 * 1px));
      height: auto;
      display: block;
      object-fit: contain;
    }

    #features-carousel .home-features-desktop__count {
    font-family: 'skpn';
      font-size: calc(1.3rem * var(--home-desktop-rem-scale, 1));
      line-height: 1;
      letter-spacing: -0.01em;
      color: #fff;
      white-space: nowrap;
      width: 100%;
      text-align: center;
      margin-top: clamp(calc(2 * 0.85 * 1px), calc((2 / 900) * 100svh), calc(2 * 1.8 * 1px));
    }
  }

  @media screen and (min-width: 990px) and (max-width: 1366px), screen and (min-width: 990px) and (max-height: 820px) {
    #features-carousel {
      padding-bottom: calc(6.8rem * var(--home-desktop-rem-scale, 1));
    }

    #features-carousel .home-features-desktop__left {
      padding: calc(14.4rem * var(--home-desktop-rem-scale, 1)) calc(2.4rem * var(--home-desktop-rem-scale, 1)) 0
                clamp(calc(100 * 0.6 * 1px), calc((100 / 1440) * 100vw), calc(100 * 1.9 * 1px));
    }

    #features-carousel .home-features-desktop__title {
      margin-bottom: calc(2.4rem * var(--home-desktop-rem-scale, 1));
    }

    #features-carousel .home-features-desktop__list-wrap {
      height: clamp(390px, 36vw, 520px);
    }

    #features-carousel .home-features-desktop__right {
      min-height: clamp(560px, 44vw, 760px);
    }

    #features-carousel .home-features-desktop__stack {
      width: min(clamp(280px, 28vw, 332px), calc(100% - 82px));
    }

    #features-carousel .home-features-desktop__controls {
      width: calc(4.6rem * var(--home-desktop-rem-scale, 1));
      min-height: 0;
      height: auto;
      border-radius: 23px;
      flex-basis: calc(4.6rem * var(--home-desktop-rem-scale, 1));
      padding-top: calc(0.8rem * var(--home-desktop-rem-scale, 1));
      padding-bottom: calc(1.0rem * var(--home-desktop-rem-scale, 1));
    }

    #features-carousel .home-features-desktop__arrow {
      width: calc(4.0rem * var(--home-desktop-rem-scale, 1));
      height: calc(4.0rem * var(--home-desktop-rem-scale, 1));
    }

    #features-carousel .home-features-desktop__arrow-icon {
      width: calc(1.8rem * var(--home-desktop-rem-scale, 1));
    }
  }

  /* ============================================================
     MOBILE / PORTRAIT CAROUSEL (<990px) — new
     ============================================================ */
  .features-mobile {
    display: block;
    background: #000;
    color: #fff;
    padding: 48px 20px 56px;
    box-sizing: border-box;
  }

  @media screen and (min-width: 990px) {
    .features-mobile { display: none; }
  }

  .features-mobile__title {
    margin: 0 0 24px;
    font-family: 'skpn';
    font-weight: 400;
    font-size: 2.6rem;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #f5f5f5;
    text-align: center;
  }

  .features-mobile__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px;
    margin: 0 -20px;
    padding: 0 20px;
  }

  .features-mobile__track::-webkit-scrollbar { display: none; }

  .features-mobile__track:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
  }

  .features-mobile__slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    overflow: hidden;
    aspect-ratio: 453 / 570;
    background: #0d0d0d;
  }

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

  .features-mobile__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 16px 0 0;
  }

  .features-mobile__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.32);
    padding: 0;
    cursor: pointer;
    transition: background 200ms ease, transform 200ms ease;
  }

  .features-mobile__dot.is-active {
    background: #fff;
    transform: scale(1.25);
  }

  .features-mobile__dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
  }

  .features-mobile__text {
    margin-top: 24px;
    text-align: center;
    min-height: 96px;
  }

  .features-mobile__text h3 {
    margin: 0 0 8px;
    font-family: 'skpn';
    font-weight: 500;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    color: #fff;
    transition: opacity 160ms ease;
  }

  .features-mobile__text p {
    margin: 0;
    font-family: 'lato';
    font-size: 1.05rem;
    line-height: 1.5;
    color: #ccc;
    transition: opacity 160ms ease;
  }

  @media (prefers-reduced-motion: reduce) {
    #features-carousel .home-features-desktop__item,
    #features-carousel .home-features-desktop__card,
    .features-mobile__text h3,
    .features-mobile__text p,
    .features-mobile__dot {
      transition-duration: 0.01ms !important;
    }
  }