:root {
	--primary: rgba(61, 75, 71, 0.5);
	--secondary: rgba(58, 62, 108, 0.5);
	--third: rgba(79, 49, 72, 0.5);
}

@font-face { font-family: 'Gellix'; font-weight: 500; src: url("/static/f/Gellix-Medium.otf") format("opentype"); }

* { padding:0; margin:0; outline:none; box-sizing:border-box; }
html, body { background:#050718; color:#fff; }
body { font-family:'Gellix', monospace;  font-weight:400; font-size:18px; line-height:24px; letter-spacing:-0.02em; padding:10px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h2 { font-weight: 500; font-size: 51.2174px; line-height: 61px; letter-spacing: -0.02em; }

*::-moz-selection { color:#fff; background:rgb(224, 108, 117); }
*::selection { color:#fff; background:rgb(224, 108, 117); }

.app { display:flex; flex-wrap:wrap; align-items:stretch; padding:0; }

.app .header { position:fixed; z-index:10; width:100%; height:130px; top:0; left:0; background:linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%); }

.app .dots-wrapper { overflow-x:hidden; width:100%; height:100vh; position:absolute; top:0; left:0; z-index:1; }
.app .dots { width:105%; height:100vh; }
.app .dots span { color:rgb(36, 42, 63); }

.app .text { width:620px; position:absolute; top:calc(50% - 30px); left:50%; transform: translate(-50%,-50%); z-index:3; }
.app .text h2 { text-align:center; background: linear-gradient(129.04deg, rgba(255, 255, 255, 0.8) 35.56%, rgba(5, 8, 30, 0.8) 98.13%), #FFFFFF; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.app .bottom { position:absolute; top:0; left:0; width:100%; height:100vh; z-index:2; background: linear-gradient(360deg, #010314 0%, rgba(2, 4, 21, 0) 100%); }
.app .logo { position:absolute; top:36px; left:64px; z-index:4; }
.app .social { position:absolute; top:44px; right:54px; z-index:4; }
.app .social a { display:inline-block; margin:0 10px; }

.app .menu { position:fixed; top:52px; left:50%; transform: translate(-50%,-50%); z-index:5; }
.app .menu a { display:inline-block; color:#fff; text-decoration:none; opacity:0.5; margin:0 16px; font-size: 21px; font-style: normal; font-weight: 400; }
.app .menu a.active { opacity:1; }

.app .cards { width:100%; padding:120px; background:rgb(1, 3, 20); }
.app .cards .card { color:#fff; padding:32px; background: linear-gradient(360deg, rgba(83, 39, 138, 0.166) 0%, rgba(255, 255, 255, 0) 100%), #09071C; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 32px; }

.app .scroll { width:50px; height:50px; position:absolute; top:85%; left:50%; transform: translate(-50%,-50%); z-index:4;  }
.app .scroll a { display:block; }
.app .scroll img { position:absolute; top:0; left:0; }

.app .scroll-portfolio { width:100%; height:50px; position:relative; margin-top:120px; }
.app .scroll-portfolio a { display:block; position:absolute; top:0; left:50%; z-index:4; margin-left:-25px; }
.app .scroll-portfolio img { position:absolute; top:0; left:0; }

.app .info { width:100%; padding:120px; background:rgb(1, 3, 20); }
.app .info h2 { margin-bottom:25px; text-align:center; background: linear-gradient(129.04deg, rgba(255, 255, 255, 0.8) 35.56%, rgba(5, 8, 30, 0.8) 98.13%), #FFFFFF; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.app .info .card { color:#fff; padding:32px; border-radius: 32px; border: 1px solid rgba(255, 255, 255, 0.10); background: linear-gradient(0deg, rgba(219, 176, 67, 0.17) 0%, rgba(255, 255, 255, 0.00) 100%), #09071C; }
.app .info .card h3 { font-size: 51.217px; font-weight: 500; line-height: normal; }
.app .info .card .desc { opacity: 0.5; margin-bottom:60px; }

.app .portfolio { width:100%; padding:120px; background:rgb(1, 3, 20); }
.app .portfolio h2 { text-align:center; background: linear-gradient(129.04deg, rgba(255, 255, 255, 0.8) 35.56%, rgba(5, 8, 30, 0.8) 98.13%), #FFFFFF; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.app .things { width:100%; padding:120px; background:rgb(1, 3, 20); }
.app .things h2 { margin-bottom:110px; text-align:center; background: linear-gradient(129.04deg, rgba(255, 255, 255, 0.8) 35.56%, rgba(5, 8, 30, 0.8) 98.13%), #FFFFFF; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.app .things .line { background:url('icon/things-line.svg') no-repeat  center center; }
.app .things .card { margin:0 auto; margin-bottom:90px; max-width:640px; padding: 32px; border-radius: 32px; border: 1px solid rgba(255, 255, 255, 0.10); background: linear-gradient(0deg, rgba(83, 39, 138, 0.17) 0%, rgba(255, 255, 255, 0.00) 100%), #09071C; }
.app .things .card h3 { margin-bottom:19px; color:#fff; font-size: 32px; font-style: normal; font-weight: 500; line-height: normal; }
.app .things .card p { margin-bottom:0; color:#fff; font-size: 21px; font-style: normal; font-weight: 400; line-height: 140%; /* 29.4px */ letter-spacing: 0.42px; opacity:0.5; }
.app .things .card .step { text-align:center; }
.app .things .card .step span { display:inline-block; position:relative; top:15px; text-align:center; color:#fff; opacity: 0.2; font-size: 64px; font-style: normal; font-weight: 300; line-height: normal; letter-spacing: -1.92px; }
.app .things .go-medium { padding-top:200px; padding-bottom:100px; text-align:center; }

.app .portfolio { overflow-x: hidden; }
.app .portfolio .swiper { max-width: 500px; margin-top:30px;; }
.app .portfolio .swiper-slide { bottom:-1; color:#fff; padding:32px; border-radius: 32px; border: 1px solid rgba(255, 255, 255, 0.1); }

.swiper-slide { min-height:600px; background: linear-gradient(0deg, rgba(83, 39, 138, 0.08) 0%, rgba(255, 255, 255, 0.00) 100%), rgba(9, 7, 28, 0.90); /*background-blend-mode: normal, lighten; backdrop-filter: blur(25px);*/ }
.swiper-slide-active { /*filter: blur(0px);*/ background: linear-gradient(0deg, rgba(83, 39, 138, 0.17) 0%, rgba(255, 255, 255, 0.00) 100%), #09071C; /*backdrop-filter: blur(0px);*/ }
/* .swiper-slide-active ~ .swiper-slide ~ .swiper-slide { filter:blur(4px); } */

.swiper-slide h3, .swiper-slide p, .swiper-slide div { opacity: 0.4; }
.swiper-slide-active h3, .swiper-slide-active p, .swiper-slide-active div { opacity:1; }
.swiper-button-prev { left:75px; margin-top:30px; transform:rotate(180deg); }
.swiper-button-next { right:75px; margin-top:30px; }
.swiper-button-prev::after, .swiper-button-next::after { content:''!important; }
.swiper-slide h3 { font-weight: 500; font-size: 32px; line-height: 38px; margin-bottom:15px; }
.swiper-slide p { font-weight: 400; font-size: 21px; line-height: 140%; letter-spacing: 0.42px; color: #B8BDD7; margin-bottom:32px; }
.swiper-slide div a { display:inline-block; transition: background 250ms; padding:10px 20px; background: rgba(255, 255, 255, 0.05); border-radius: 48px; text-decoration: none; font-weight: 400; font-size: 18px; line-height: 22px; letter-spacing: 0.72px; color: #778CFD; }
.swiper-slide div a:hover { background: rgba(255, 255, 255, 0.1); }
.swiper-slide div.tag { font-family: 'JetBrains Mono', monospace; margin-bottom:60px; display:inline-block; padding: 8px 16px; border-radius: 8px; background: rgba(255, 255, 255, 0.11); font-size: 16px; font-style: normal; font-weight: 400; line-height: 140%; letter-spacing: 0.16px; text-transform: uppercase; }

.typed-cursor { display:none!important; }

.border-secondary { border-color:rgba(255, 255, 255, .1)!important; }



#circle { width: 6px; height: 6px; background: white; box-shadow: 0px 0px 10px 3px rgba(255, 255, 255, 0.25); border-radius: 50%; position: absolute; top: 75px; left: 0; z-index:11; transform: translateX(0); visibility: hidden; }
.circle-transition { transition: transform 0.3s ease; }

.fancy { position: absolute; top:-5px; left:-5px; height: 60px; width: 60px; transition: all 4s ease-in-out; }
.fancy:nth-child(1) { 
  background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 100%);
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  animation: morph1 4s ease-in-out infinite;
  z-index: 5; 
}
.fancy:nth-child(2) { 
  background: linear-gradient(45deg, var(--secondary) 0%, var(--primary) 100%);
  border-radius: 45% 55% 62% 38% / 53% 51% 49% 47%;
  animation: morph2 4s ease-in-out infinite;
  z-index: 6; 
}
.fancy:nth-child(3) {
  background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 100%);
  border-radius: 45% 55% 49% 51% / 36% 51% 49% 64%;
  animation: morph3 4s ease-in-out infinite;
  z-index: 7; 
}


@media(min-width:986px) {
  .app .things .step-2 { position:relative; left:-220px; }
  .app .things .step-3 { position:relative; right:-220px; }
  .app .things .step-4 { position:relative; left:-220px; }
  .app .things .step-5 { position:relative; right:-220px; }
}

@media(max-width:986px) {
    h2 { font-size:30px; line-height:40px; }

    .app .logo { left:22px; top:26px; }
    .app .logo img { width:auto; height:35px; }

    .app .social { right:12px; top:30px; }
    .app .social img { width:auto; height:25px; }

    .app .menu { display:none; }

    .app .text { max-width:80%; }

    .app .cards { padding:16px; }

    .app .info { padding:16px; }
    .app .info .card { display:flex; flex-direction: row; justify-content: space-between; }
    .app .info .col-12 { margin-bottom:30px; }
    .app .info .card h3 { font-size: 30px; }
    .app .info .card .desc { font-size: 16px; line-height: 140%; margin-bottom:0; }
    .app .info .card img { height:80px; }

    .app .scroll-portfolio { margin-top:20px; }

    .app .portfolio { padding:16px; padding-top:120px; overflow-x: hidden; }
    .app .portfolio .swiper-slide h3 { font-size: 27px; line-height: 32px; }
    .app .portfolio .swiper-slide p {  font-size: 16px; line-height: 140%; }
    .app .portfolio .swiper-slide .tag {  font-size: 14px; line-height: 140%; }
    .app .portfolio .swiper-slide a {  font-size: 14px; line-height: 140%; }
    .app .portfolio .swiper { width: 100%; }

    .swiper-slide { min-height:auto; background-blend-mode: normal, lighten; backdrop-filter: blur(25px); filter:blur(4px); }
    .swiper-slide-active { filter: blur(0px); backdrop-filter: blur(0px); }
    .swiper-button-prev, .swiper-button-next { top:90px; }
    .swiper-button-next { right:30px; }
    .swiper-button-prev { left:30px; }

    .app .things { padding:16px; padding-top:50px; }
    .app .things h2 { margin-bottom:50px; }
    .app .things .card h3 { font-size: 27px; line-height: 32px; }
    .app .things .card p { font-size: 16px; line-height: 140%; }
    .app .things .card .step span { font-size:45px; top:20px; left:-5px; } 
  
    .card h3 { font-size:30px; line-height:40px; }
    .card p { font-size:18px; line-height:24px; }
    .card div a { font-size:18px; line-height:24px; }

    #circle { display:none; }
}

/* .sbtn img { position:relative; top:22px; left:28px; } */

@keyframes vawe {
    20% {
      border-radius: 45% 55% 62% 38% / 53% 51% 49% 47%;
    }
    40% {
      border-radius: 45% 55% 49% 51% / 36% 51% 49% 64%;
    }
    60% {
      border-radius: 60% 40% 57% 43% / 47% 62% 38% 53%;
    }
    80% {
      border-radius: 60% 40% 32% 68% / 38% 36% 64% 62%;
    }
  }
  

@keyframes morph1 {
  0% {
			border-radius:  60% 40% 30% 70% / 60% 30% 70% 40%;
			background: linear-gradient(45deg, var(--secondary) 0%, var(--primary) 100%);
	} 
	
	40% {
			border-radius:  30% 60% 70% 40% / 50% 60% 30% 60%;
			background: linear-gradient(45deg, var(--third) 0%, var(--primary) 100%);
	}
  
	80% {
		border-radius:  60% 40% 30% 70% / 60% 30% 70% 40%;
		background: linear-gradient(45deg, var(--third) 0%, var(--secondary) 100%);
	} 

  100% {
			border-radius:  60% 40% 30% 70% / 60% 30% 70% 40%;
			background: linear-gradient(45deg, var(--secondary) 0%, var(--primary) 100%);
	} 
}

@keyframes morph2 {
  0% {
    border-radius:  30% 60% 70% 40% / 50% 60% 30% 60%;
			background: linear-gradient(45deg, var(--secondary) 0%, var(--third) 100%);
	} 
	
	40% {
    border-radius:  60% 40% 30% 70% / 60% 30% 70% 40%;
			background: linear-gradient(45deg, var(--third) 0%, var(--secondary) 100%);
	}
  
	80% {
		border-radius:  60% 40% 30% 70% / 60% 30% 70% 40%;
		background: linear-gradient(45deg, var(--primary) 0%, var(--third) 100%);
	} 

  100% {
    border-radius:  30% 60% 70% 40% / 50% 60% 30% 60%;
			background: linear-gradient(45deg, var(--secondary) 0%, var(--third) 100%);
	} 
}

@keyframes morph3 {
  0% {
		border-radius:  60% 40% 30% 70% / 60% 30% 70% 40%;
			background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 100%);
	} 
	
	40% {
			border-radius:  30% 60% 70% 40% / 50% 60% 30% 60%;
			background: linear-gradient(45deg, var(--third) 0%, var(--secondary) 100%);
	}
  
	80% {
    border-radius:  60% 40% 30% 70% / 60% 30% 70% 40%;
		background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 100%);
	} 

  100% {
		border-radius:  60% 40% 30% 70% / 60% 30% 70% 40%;
			background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 100%);
	} 
}