/* =============================================
   FONTS
   ============================================= */
@font-face {
	font-family: 'Oscar';
	src: url('../fonts/oscar/oscar-regular-fm.eot');
	src: url('../fonts/oscar/oscar-regular-fm.eot?#iefix') format('embedded-opentype'),
	     url('../fonts/oscar/oscar-regular-fm.woff2') format('woff2'),
	     url('../fonts/oscar/oscar-regular-fm.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Open Sans';
	src: url('../fonts/Open_Sans/OpenSans-VariableFont_wdth,wght.ttf') format('truetype');
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Open Sans';
	src: url('../fonts/Open_Sans/OpenSans-Italic-VariableFont_wdth,wght.ttf') format('truetype');
	font-weight: 300 800;
	font-style: italic;
	font-display: swap;
}

/* =============================================
   RESET
   ============================================= */
*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
	padding: 0;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	min-height: 100vh;
	line-height: 1.5;
	font-family: var(--font-family-base);
	background-color: #10152D;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
	background: none;
	border: none;
}

a {
	color: inherit;
	text-decoration: none;
}

ul,
ol {
	list-style: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

h1,
h2 {
	font-family: 'Oscar', sans-serif;
}

/* =============================================
   CSS CUSTOM PROPERTIES
   ============================================= */
:root {
	--font-family-base: 'Open Sans', sans-serif;
	--container-max: 1640px;
	--container-padding: clamp(60px, 10vw, 140px);
	--header-height: 80px;
}

/* =============================================
   LAYOUT — CONTAINER
   ============================================= */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.container--sm {
	--container-max: 640px;
}

.container--md {
	--container-max: 960px;
}

.container--lg {
	--container-max: 1200px;
}

.container--xl {
	--container-max: 1440px;
}

.container--fluid {
	max-width: none;
}

/* =============================================
   HEADER
   ============================================= */
#site-header {
	border-bottom: 1px solid #ffffff;
	max-width: unset!important;
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: #10152D;
}

#site-header .container {
	display: flex;
	justify-content: space-between;
}

.custom-logo-link img {
	width: min(127px,10vw);
}

#menu-header_menu {
	font-size: min(16px,1.3vw);
	position: relative;
	padding-left: min(50px,3.47vw);
}

.header-nav-menu {
	display: flex;
	flex-direction: row;
	align-items: center;
	
}

#header-download-btn {
	margin-right: min(40px,2.8vw);
	background: #ffffff;
	border-radius: 20px;
	padding: min(0.6vw,10px) min(2.6vw,37px);
	font-size: min(18px,1.25vw);
	width: min(124px,8.6vw);
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.25s ease, color 0.25s ease;
	cursor: pointer;
}

#header-download-btn:hover {
	background-color: #FF0B7C;
	color: #ffffff;
}

#menu-header_menu::before {
	content: '';
	display: block;
	width: 1px;
	height: 80%;
	background-color: #ffffff;
	position: absolute;
	transform: translateY(-50%);
	left: 0;
	top: 50%;
}

#menu-header_menu li a {
	color: #ffffff!important;
	background-color: unset!important;
	position: relative;
	padding-bottom: 2px;
	display: inline-block;
	transition: transform 0.2s ease;
}

#menu-header_menu li a:hover,
#menu-header_menu li.current-menu-item a {
	transform: scale(1.08);
}


#menu-header_menu li a::after {
	content: '';
	position: absolute;
	bottom: -10%;
	left: 50%;
	width: 0;
	height: 2px;
	background-color: #FF0B7C;
	transform: translateX(-50%);
	transition: width 0.3s ease;
}

#menu-header_menu li:nth-child(1) a::after , #menu-header_menu li:nth-child(4) a::after {
	background-color: #ffffff;
}

#menu-header_menu li:nth-child(3) a::after {
	background-color: #00DDC2;
}

#menu-header_menu li a:hover::after,
#menu-header_menu li.current-menu-item a::after {
	width: 75%;
}


#menu-header_menu::before {
	background-color: #FF0B7C;
	color: #ffffff;
}

.site-page .section {
	scroll-margin-top: var(--header-height);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: min(60px, 5vw);
}

/* =============================================
   UTILITIES — SCROLL REVEAL
   ============================================= */
/* ── Scroll reveal ───────────────────────────────────────────────────────── */
.scroll-reveal {
	opacity: 0;
	transform: translateY(40px);
	will-change: transform, opacity;
	transition:
		opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: 0ms;
}

.scroll-reveal.scroll-reveal--stagger {
	transition-delay: calc(var(--stagger-index, 0) * 120ms);
}

.scroll-reveal.is-revealed {
	opacity: 1;
	transform: translateY(0);
}



/* =============================================
   HOME — HERO SEQUENCE
   ============================================= */
.hero-sequence-scroll {
	position: relative;
	height: 230vh;
}


.hero-sequence-sticky {
	position: sticky;
	top: var(--header-height, 80px);
	width: 100%;
	height: calc(90vh - var(--header-height, 80px));
	background-color: #10152D;
	max-height: 900px;
}


.hero-sequence__video {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	pointer-events: none;
	z-index: 0;
	mix-blend-mode: ligthen;
}


#hero-canvas {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 1;
}

.hero-sequence-sticky::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: radial-gradient(
		ellipse 80% 70% at 50% 50%,
		transparent 35%,
		#10152D 85%
	);
	pointer-events: none;
	z-index: 2;
}

/* Hero content sits above the vignette */
.hero-sequence-content {
	position: relative;
	z-index: 3;
	height: 100%;
	display: flex;
	align-items: center;
}

/* Loading bar at bottom */
.hero-sequence-loader {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 10;
	transition: opacity 0.4s ease;
}

.hero-sequence-loader.is-hidden {
	opacity: 0;
	pointer-events: none;
}

.hero-sequence-loader__bar {
	height: 100%;
	background-color: #FF0B7C;
	transform: scaleX( 0 );
	transform-origin: left;
	transition: transform 0.2s linear;
}


.hero-scroll-arrow {
	position: absolute;
	bottom: -10px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	z-index: 10;
}

.hero-scroll-arrow svg {
	width: 30px;
	height: 18px;
	display: block;
	opacity: 0;
	animation: heroArrowFlow 2.1s ease-in-out infinite;
}

.hero-scroll-arrow svg:nth-child(1) { animation-delay: 0s;    }
.hero-scroll-arrow svg:nth-child(2) { animation-delay: 0.35s; }

@keyframes heroArrowFlow {
	0%   { opacity: 0;   transform: translateY(0);    }
	25%  { opacity: 0.4; transform: translateY(4px);  }
	50%  { opacity: 1;   transform: translateY(8px);  }
	75%  { opacity: 0.4; transform: translateY(12px); }
	100% { opacity: 0;   transform: translateY(16px); }
}

/* =============================================
   SHARED HERO — CONTENT & TYPOGRAPHY
   ============================================= */
.site-page .hero-section {
	position: relative;
	overflow: hidden;
	min-height: 600px;
	display: flex;
	align-items: center;
	padding-block: 0;
}

.site-page .hero-section__video {
	display: none;
}

.site-page .hero-content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	color: #ffffff;
}

.site-page .hero-title {
	font-size: min(46px,3.13vw);
	font-weight: 700;
	line-height: 1.1;
	/*text-align: center;*/
	display: flex;
	flex-direction: column;
	direction: rtl;
}

.site-page .section-subtitle {
	color: #ffffff;
	font-size: min(20px,1.4vw);
	font-weight: 300;
}

.site-page .norris {
	display: block;
	overflow: hidden;
	line-height: var(--font-size);
	font-size: inherit;
	letter-spacing: normal;
	direction: rtl;
	--c-primary: #ffffff;
	--c-secondary: #FF0B7C;
	--font-size: 1.1em;
	--animation-time: 25ms;
	cursor: default;
}

.site-page .norris .norris-ltr {
	display: inline;
	unicode-bidi: isolate;
	direction: ltr;
}

.site-page .norris .norris-char {
	position: relative;
	color: transparent;
}

.site-page .norris .norris-char::before,
.site-page .norris .norris-char::after {
	position: absolute;
	left: 0;
	top: 0;
	content: attr(data-char);
	color: var(--c-primary);
	transition: all ease-in-out calc(var(--animation-time) * 10);
	/* transition-delay comes from the inline style set by JS (transitionDelay),
	   which overrides this fallback for browsers that support CSS variables. */
	transition-delay: calc(var(--index, 0) * var(--animation-time));
}

.site-page .norris .norris-char::before {
	transform: translateY(0);
}

.site-page .norris .norris-char::after {
	transform: translateY(var(--font-size));
	opacity: 0;
}

.site-page .norris:hover .norris-char::before,
.site-page .norris:hover .norris-char::after {
	color: var(--c-secondary);
}

.site-page .norris:hover .norris-char::before {
	transform: translateY(calc(-1 * var(--font-size)));
	opacity: 0;
}

.site-page .norris:hover .norris-char::after {
	transform: translateY(0);
	opacity: 1;
}


.site-page .hero-subtitle {
	font-size: min(20px,1.39vw);
	font-weight: 400;
	line-height: 1.5;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	max-width: min(400px,27.2vw);
	white-space: nowrap;
}

.site-page .hero-btns {
	display: flex;
	gap: min(14px,0.9vw);
	margin-top: 34px;
}

.site-page .hero-btns .hero-btn {
	display: inline-flex;
	background-color: #ffffff;
	align-items: center;
	white-space: nowrap;   
	flex-shrink: 0; 
	color: #000;
	gap: 10px;
	border-radius: 30px;
	padding:min(10px, 0.7vw) min(25px,1.8vw);
	font-size: min(18px,1.25vw);
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.site-page .hero-btns .hero-btn:hover {
	background-color: #FF0B7C;
	color: #ffffff;
	transform: translateY(-2px);
}

.site-page .hero-btns .hero-btn:hover img {
	filter: brightness(0) invert(1);
}
/* =============================================
   SECTION — FEATURES GRID
   ============================================= */
.features-items-section.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.site-page .features-items {
	display: grid;
	gap: min(50px, 3.5vw) min(40px, 2.8vw);
	margin-top: 54px;
	overflow: visible;
	width: 100%;
}

.site-page#home .features-items-section .section-title {
	font-size: min(60px,4.1vw);
}

.site-page .features-items-section .section-title {
	color: #fff;
	font-size: min(48px,3.4vw);
	margin-bottom: min(70px,4.8vw);
}

.site-page .features-items--cols-4 {
	grid-template-columns: repeat(4, 1fr);
}

.site-page .features-items--cols-5 {
	grid-template-columns: repeat(4, 1fr);
}

.site-page .features-items--cols-3 {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
	.site-page .features-items--cols-5,
	.site-page .features-items--cols-4,
	.site-page .features-items--cols-3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.site-page .features-items--cols-5,
	.site-page .features-items--cols-4,
	.site-page .features-items--cols-3 {
		grid-template-columns: 1fr;
	}
}

.site-page .features-items .features-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	will-change: transform;
	transition: transform 0.1s linear;
}


.site-page .features-items .features-item .item-icon {
	width: min(112px,7.7vw);
}

.site-page .features-items .features-item .item-title {
	color: #00DDC2;
	font-size: min(20px, 1.39vw);
	font-weight: bold;
}

.site-page .features-items .features-item .item-description {
	color: #ffffff;
	text-align: center;
	font-size: min(17px,1.19vw);
	font-weight: 300;
	white-space: nowrap;
}

.site-page .features-items .features-item .item-description strong {
	font-weight: bold;
}

.site-page .section-title {
	font-size: min(60px,4.1vw);
	color: #ffffff;
	font-weight: 400;
}

.site-page .section-title.norris {
	--font-size: 1.1em;
	line-height: var(--font-size);
}

/* solid-row-effect: curtain wipe reveal, no Norris letter animation */
.site-page .section-title.solid-row-effect.norris .norris-char {
	color: #ffffff;
}

.site-page .section-title.solid-row-effect.norris .norris-char::before,
.site-page .section-title.solid-row-effect.norris .norris-char::after {
	display: none;
}

.site-page .section-title.solid-row-effect {
	position: relative;
}

.site-page .section-title.solid-row-effect .curtain-line {
	position: relative;
	overflow: hidden;
	display: block;
}

.site-page .section-title.solid-row-effect .curtain-line::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: #FF0B7C;
	transform: translateX(0);
	transition: transform 1.4s cubic-bezier(0.77, 0, 0.175, 1);
	/* transition-delay is also set inline by JS for browsers that don't
	   support CSS custom properties in calc() */
	transition-delay: calc(var(--line-index, 0) * 200ms);
	transform-origin: right center;
}

.site-page#business-on .section-title.solid-row-effect .curtain-line::after {
	background-color: #ffffff;
}

.site-page .section-title.solid-row-effect.curtain--revealed .curtain-line::after {
	transform: translateX(-101%);
}


.site-page #connect-to-us-section .connect-to-us-content .section-title.norris,
.site-page #infinity-wallet-section .section-title.norris,
.site-page #what-are-you-waiting-for-section .section-title.norris {
	line-height: var(--font-size);
}
/* =============================================
   SECTION — HOW IT WORKS
   ============================================= */
.site-page .how-does-it-works-section {
	margin-top: 100px;
}

.site-page .how-does-it-works-section .container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.site-page .how-does-it-works-section .section-subtitle {
	color: #ffffff;
	font-size: min(20px,1.4vw);
	font-weight: 300;
	max-width: 100%;
	text-align: center;
}


.site-page .how-does-it-works-section .how-it-works-flow {
	margin-top: 80px;
}

.site-page .how-does-it-works-section .how-it-works-flow .swiper-wrapper {
	display: flex;
	flex-direction: row;
	align-items: stretch;
}

.site-page .how-does-it-works-section .how-it-works-flow .flow-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: baseline;
	flex: 1;
	gap: min(20px,1.4vw);
}

.site-page .how-does-it-works-section .how-it-works-flow .flow-item .flow-item-number {
	background-color: #FF0B7C;
	color: #ffffff;
	font-size: min(64px, 4.44vw);
	border-radius: 20px;
	font-weight: bold;
	padding: min(20px,1.4vw) min(14px,0.9vw);
	line-height: 1;
	min-width: min(106px,7.3vw);
	display: flex;
	align-items: center;
	justify-content: center;
}

.site-page .how-does-it-works-section .how-it-works-flow .flow-item .flow-item-title {
	color: #ffffff;
	font-size: min(24px,1.7vw);
	font-weight: bold;
	text-align: center;
	white-space: nowrap;
}

.site-page .how-does-it-works-section .how-it-works-flow .flow-item .flow-item-subtitle {
	color: #ffffff;
	font-size: min(16px,1.11vw);
	text-align: center;
	max-width: min(289px,19.6vw);
	white-space: nowrap;
}

.site-page .how-does-it-works-section .how-it-works-flow .flow-separator {
	width: min(354px,22vw);
	margin-left: max(-75px,-6vw);
	margin-right: max(-75px,-6vw);
}

/* =============================================
   SECTION — CONNECT TO US
   ============================================= */
.site-page .connect-to-us-section {
	margin-top: 100px;
	
	width: 100%;
}

#home .connect-to-us-section {
	margin-bottom: 100px;
}

.site-page .connect-to-us-section .container {
	/*max-width: 1320px;*/
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.site-page .connect-to-us-section .connect-to-us-content {
	max-width: 60%;
}

.site-page#home .connect-to-us-section .connect-to-us-content {
	max-width: 60%;
}

.site-page .connect-to-us-section .connect-to-us-image {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}


.site-page#home .connect-to-us-section .connect-to-us-image::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: radial-gradient(
		ellipse 70% 65% at 50% 50%,
		transparent 40%,
		#10152D 80%
	);
	pointer-events: none;
	z-index: 1;
}

.site-page .connect-to-us-section .connect-to-us-image video {
	height: auto;
	display: block;
	position: relative;
	z-index: 0;
	width: 100%;
}

.site-page .connect-to-us-section .connect-to-us-content .section-title {
	line-height: 1;
	margin-bottom: 35px;
	display: flex;
	flex-direction: column;
}

.site-page .connect-to-us-section .connect-to-us-content .section-description {
	color: #ffffff;
	font-size: min(17px,1.2vw);
}

.site-page .connect-to-us-section .connect-to-us-content .section-title > .norris {
	line-height: var(--font-size);
}

.site-page .connect-to-us-section .connect-to-us-content .connect-to-us-button {
	background-color: #ffffff;
	width: min(212px,14.7vw);
	display: flex;
	border-radius: 30px;
	justify-content: center;
	align-items: center;
	padding: min(15px,1.2vw) min(38px,2.6vw);
	font-size: min(14px,1.0vw);
	gap: min(10px,0.7vw);
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.site-page .connect-to-us-section .connect-to-us-content .connect-to-us-button:hover {
	background-color: #FF0B7C;
	color: #ffffff;
	transform: translateY(-2px);
}

.site-page .connect-to-us-section .connect-to-us-content .connect-to-us-button:hover img {
	filter: brightness(0) invert(1);
}


#friends-on .connect-to-us-section .connect-to-us-content .connect-to-us-button:hover img {
	filter: unset;
}

#friends-on .connect-to-us-section .connect-to-us-content .connect-to-us-button,#business-on .connect-to-us-section .connect-to-us-content .connect-to-us-button {
	color: #000000!important;
}



.site-page  .connect-to-us-section .connect-to-us-content .section-subtitle {
	color: #ffffff;
	font-size: min(17px,1.2vw);
	white-space: nowrap;
}
/* =============================================
   SECTION — INFINITY WALLET
   ============================================= */
.site-page .infinity-wallet-section {
	margin-top: 100px;
}

.site-page .infinity-wallet-section .container{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.site-page .infinity-wallet-section .section-title {
	line-height: 1;
	margin-bottom: 20px;
	
}

.site-page .infinity-wallet-section .section-subtitle {
	color: #ffffff;
	font-size: min(20px,1.4vw);
	text-align: center;
	max-width: min(917px,63vw);
	font-weight: 300;
}

.site-page .infinity-wallet-section .infinity-wallet-content {
	display: flex;
	flex-direction: row-reverse;
	margin-top: 50px;
	align-items: center;
}

.site-page .infinity-wallet-section .infinity-wallet-features {
	display: flex;
	flex-direction: column;
	gap: min(30px,2.08vw);
	flex: 1;
}

.infinity-wallet-feature-item {
	display: flex;
	flex-direction: row-reverse;
	gap: min(22px,1.6vw);
	justify-content: flex-end;
}

.infinity-wallet-feature-item .item-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}

.infinity-wallet-feature-item .item-content .item-title {
	color: #ffffff;
	font-size: min(24px,1.7vw);
	font-weight: bold;
}

.infinity-wallet-feature-item .item-content .item-description {
	color: #ffffff;
	font-size: min(19px,1.3vw);
}

.infinity-wallet-feature-item .item-number {
	background-color: #FF0B7C;
	color: #ffffff;
	font-size: min(35px, 2.44vw);
	border-radius: 10px;
	font-weight: bold;
	line-height: 1;
	min-width: min(51px,3.4vw);
	height: min(51px,3.4vw);
	display: flex;
	align-items: center;
	justify-content: center;
}

.site-page .infinity-wallet-section .inifinity-wallet-image {
	width: 55%;
}

.site-page .infinity-wallet-section .inifinity-wallet-image img {
	object-fit: contain;
}

/* =============================================
   SECTION — WHAT ARE YOU WAITING FOR
   ============================================= */
/* What are you waiting for section */

.site-page #what-are-you-waiting-for-section {
	margin-top: 100px;
	position: relative;
	overflow: hidden;
}

.site-page #what-are-you-waiting-for-section .container {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.site-page #what-are-you-waiting-for-section .section-title {
	line-height: 1;
	margin-bottom: 20px;
}

.site-page #what-are-you-waiting-for-section .section-subtitle {
	color: #ffffff;
	font-size: min(20px,1.4vw);
	text-align: center;
	max-width: min(566px,39vw);
	font-weight: 300;

}	


.site-page #what-are-you-waiting-for-section .what-are-you-waiting-for-content {
	display: flex;
	position: relative;
	z-index: 1;
}

.site-page #what-are-you-waiting-for-section .download-area-inner {
	display: flex;
	flex-direction: column;
}

.site-page #what-are-you-waiting-for-section .download-image {
	min-width: 300px;
	position: relative;
}

.site-page #what-are-you-waiting-for-section .download-image .phone-glow {
	position: absolute;
	top: 20%;
	left: 60%;
	transform: translate( -50%, -50% );
	width: 320%;
	height: 130%;
	background: radial-gradient(
		ellipse at center,
		rgba(4, 6, 18, 1) 0%,
		rgba(6, 9, 24, 1) 18%,
		rgba(8, 12, 30, 0.92) 32%,
		rgba(12, 17, 38, 0.7) 46%,
		rgba(16, 21, 45, 0.2) 56%,
		transparent 64%
	);
	pointer-events: none;
	border-radius: 50%;
	z-index: 0;
}

.site-page #what-are-you-waiting-for-section .download-image img {
	position: relative;
	z-index: 1;
}

.site-page #what-are-you-waiting-for-section .download-buttons {
	position: relative;
	z-index: 1;
}

.site-page #what-are-you-waiting-for-section .arrow-down-icon {
	z-index: 1;
}

.site-page #what-are-you-waiting-for-section .arrow-down-icon.left-arrow {
	width: min(83px,5.7vw);
	height: min(161px,11.2vw);
	position: absolute;
	right: 140%;
	top: 0;
	object-fit: cover;
}

.site-page #what-are-you-waiting-for-section .arrow-down-icon.arrow-revert {
	width: min(123px,8.5vw);
	height: min(190px,13.2vw);
	position: absolute;
	left: 110%;
	top: 15%;
	object-fit: cover;
}

.site-page #what-are-you-waiting-for-section .download-buttons {
	display: flex;
	flex-direction: row;
	gap: min(20px,1.4vw);
	justify-content: center;
	align-items: center;
	margin: 40px 0;
}

.site-page #what-are-you-waiting-for-section .download-button {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: center;
}


.site-page #what-are-you-waiting-for-section .wrwf-section-download-area {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}


.site-page #what-are-you-waiting-for-section canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
}

#friends-on #what-are-you-waiting-for-section .section-title {
	color: #FF0B7C;
}


#friends-on #what-are-you-waiting-for-section .arrow-down-icon path {
	fill: #FF0B7C;
  }

/* End What are you waiting for section */



/* =============================================
   FOOTER
   ============================================= */
/* Footer section */
#site-footer {
	padding-top: 80px;
	padding-bottom: 60px;
}

#site-footer .container{
	display: flex;
	justify-content: space-between;
	/*max-width: 100%!important;*/
}

#site-footer .footer-items{
	display: flex;
	flex-direction: row-reverse;
	gap: min(90px,4.2vw);
	color: #ffffff;
}

#site-footer .footer-items .footer-items-item-icon-string{
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	align-items: flex-center;
	gap: min(10px,0.7vw);
	margin-bottom: 12px;
}

#site-footer .footer-items .footer-items-item-icon-string:last-child{
	margin-bottom: 0;
}

#site-footer .footer-items .footer-items-item-title{
	margin-bottom: 12px;
	font-size: min(20px,1.4vw);
}


#site-footer .footer-items .footer-items-item-content li , #site-footer .footer-items .footer-items-item-content p {
	margin-bottom: 6px;
}

#site-footer .footer-items .footer-items-item-content li {
	font-size: min(16px,1.1vw);
}

/* Sliding underline for footer nav links — 80% width, centred */
#site-footer .footer-items .footer-items-item-content li a {
	position: relative;
	padding-bottom: 2px;
	transition: color 0.25s ease, transform 0.2s ease;
	width: fit-content;
	display: flex;
}

#site-footer .footer-items .footer-items-item-content li a::after {
	content: '';
	position: absolute;
	bottom: -10%;
	left: 50%;
	width: 0;
	height: 1px;
	background-color: #FF0B7C;
	transform: translateX(-50%);
	transition: width 0.3s ease;
}

#site-footer .footer-items .footer-items-item-content li a:hover {
	transform: scale(1.06);
}

#site-footer .footer-items .footer-items-item-content li a:hover::after {
	width: 90%;
}

#site-footer .footer-items .footer-items-item-content li:last-child , #site-footer .footer-items .footer-items-item-content p:last-child {
	margin-bottom: 0;
}

#site-footer .footer-items .footer-items-item-content li:first-child , #site-footer .footer-items .footer-items-item-content p:first-child {
	margin-top: 0;
}


#site-footer #footer-download-buttons {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	gap: min(12px,1.4vw);
}

#site-footer #footer-download-buttons .hero-btn {
	display: inline-flex;
	background-color: #ffffff;
	align-items: center;
	white-space: nowrap;   
	flex-shrink: 0; 
	color: #000;
	gap: 10px;
	border-radius: 30px;
	padding:min(10px, 0.7vw) min(25px,1.8vw);
	font-size: min(18px,1.25vw);
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

#site-footer #footer-download-buttons .hero-btn:hover {
	background-color: #FF0B7C;
	color: #ffffff;
	transform: translateY(-2px);
}

#site-footer #footer-download-buttons .hero-btn:hover img {
	filter: brightness(0) invert(1);
}

/* End Footer section */




/* =============================================
   SHARED HERO — VIDEO PANEL
   ============================================= */
/* Hero section general*/

.site-page #hero-section .hero-section-inner {
	position: relative;
	width: 100%;
	height: calc(80vh - var(--header-height, 80px));
	overflow: hidden;
	background-color: #10152D;
}

.site-page #hero-section .hero-video {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left;
	pointer-events: none;
	z-index: 0;
}


.site-page #hero-section .hero-content-wrap {
	position: relative;
	z-index: 3;
	height: calc(80vh - var(--header-height, 80px));
	display: flex;
	align-items: center;
}

/* End hero section general */

.site-page .media-placeholder {
	flex: 1;
	min-height: min(360px, 35vw);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.site-page .cta-button {
	background-color: #FF0B7C;
	color: #ffffff;
	display: inline-flex;
	border-radius: 30px;
	justify-content: center;
	align-items: center;
	padding: min(15px, 1.2vw) min(38px, 2.6vw);
	font-size: min(14px, 1.0vw);
	gap: min(10px, 0.7vw);
	text-decoration: none;
	margin-top: min(24px, 2vw);
	transition: background-color 0.25s ease, transform 0.2s ease;
}

.site-page .cta-button img {
	filter: brightness(0) invert(1);
}

.site-page .cta-button:hover {
	background-color: #d4005f;
	transform: translateY(-2px);
}


/* Pink buttons on friends page — hover to white */
#friends-on .cta-button:hover {
	background-color: #ffffff;
	color: #000000;
	transform: translateY(-2px);
}

#friends-on .cta-button:hover img {
	filter: unset;
}
/* End buttons on friends page */


/*  Join us section */

#friends-on .connect-to-us-section .connect-to-us-image {
	position: relative;
	max-width: min(560px,37vw);
	aspect-ratio: 1 / 1.1;  
    flex-shrink: 0;
}


#friends-on .connect-to-us-section .connect-to-us-image .small-img {
	width: min(211px,14vw);
	position: absolute;
	bottom: 20%;
	left: 15%;
	transform: rotate(10deg);
	transform-origin: center center;	
}

#friends-on .connect-to-us-section .connect-to-us-image .big-img {
	width: min(316px,21vw);
	position: absolute;
	right: 0;
	top: 5%;
	transform: rotate(-15deg);
	transform-origin: center center;
}
/* End join us section */


/* =============================================
   SECTION — FAQ
   ============================================= */
/*  FAQ section */
.site-page .faq-section .container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.site-page .faq-section .section-title {
	margin-bottom: min(40px, 3vw);
	text-align: center;
	color: #FF0B7C;
}

.site-page .faq-list {
	width: 100%;
	max-width: min(900px, 90vw);
}

.site-page .faq-item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.site-page .faq-item__question {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: min(24px, 2vw) 0;
	background: none;
	border: none;
	color: #ffffff;
	font-size: min(18px, 1.25vw);
	font-weight: 400;
	text-align: right;
	cursor: pointer;
	font-family: inherit;
}

.site-page .faq-item__icon {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	border-right: 2px solid #ffffff;
	border-bottom: 2px solid #ffffff;
	transform: rotate(45deg);
	transition: transform 0.3s ease;
	margin-top: -4px;
}

.site-page .faq-item.is-open .faq-item__icon {
	transform: rotate(-135deg);
	margin-top: 4px;
}

.site-page .faq-item__answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease;
}

.site-page .faq-item.is-open .faq-item__answer {
	max-height: 300px;
}

.site-page .faq-item__answer-inner {
	padding: 0 0 min(24px, 2vw);
	color: rgba(255, 255, 255, 0.75);
	font-size: min(16px, 1.1vw);
	font-weight: 300;
	line-height: 1.6;
}
/* End FAQ section */


/* =============================================
   PAGE — FRIENDS ON
   ============================================= */
/* Features section Friends on page*/
#friends-on .features-items-section {
	margin-top: 60px;
}

#friends-on .features-items-section .section-title {
	color: #FF0B7C;
}

#friends-on .features-items-section .item-title {
	color: #FF0B7C;
}

#friends-on .features-items-section .item-icon {
	width:min(130px, 9.1vw);
}
/* End Features section Friends on page*/

/* Join us section Friends on page*/
#friends-on .connect-to-us-section .connect-to-us-content .section-title {
	margin-bottom: 0;
}

#friends-on .connect-to-us-section .connect-to-us-content .connect-to-us-button {
	margin-top: min(35px, 2.6vw);
	background-color: #FF0B7C;
	/*color: #ffffff;*/
}

#friends-on .connect-to-us-section .connect-to-us-content .connect-to-us-button img {
	filter: unset;
}

#friends-on .connect-to-us-section .connect-to-us-content .connect-to-us-button:hover {
	background-color: #ffffff;
	color: #000000;
	transform: translateY(-2px);
}

#friends-on #connect-to-us-section .connect-to-us-content .connect-to-us-button:hover img {
	filter: none;
}
/* End Join us section Friends on page*/



/* =============================================
   PAGE — BUSINESS ON
   ============================================= */
/*Business on page*/
.site-page .business-hero {
	padding-block: 0;
}

.site-page .business-hero__panel {
	position: relative;
	width: 100%;
	height: calc(80vh - var(--header-height, 80px));
	overflow: hidden;
	background-color: #10152D;
}

.site-page .business-hero__video {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center top;
	pointer-events: none;
	z-index: 0;
}

.site-page .business-hero__panel::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: radial-gradient(
			ellipse 80% 70% at 50% 50%,
			transparent 35%,
			#10152D 85%
	);
	pointer-events: none;
	z-index: 2;
}

.site-page .business-hero__content {
	position: relative;
	z-index: 3;
	height: calc(80vh - var(--header-height, 80px));
	display: flex;
	align-items: center;
}

#business-on .features-items-section {
	margin-top: 60px;
}

.site-page#business-on .features-items-section .section-title {
	color: #00DDC2;
	font-size: min(48px,3.4vw);
	margin-bottom: min(70px,4.8vw);
}

#business-on .features-items-section .item-title {
	color: #00DDC2;
}

.site-page #business-on .features-items-section .item-icon {
	width:min(130px, 9.1vw);
}


#business-on .connect-to-us-section .connect-to-us-content .section-title {
	margin-bottom: 0;
}

#business-on .connect-to-us-section .connect-to-us-content .connect-to-us-button {
	margin-top: min(35px, 2.6vw);
	background-color: #00DDC2;
	color: #ffffff;
}

#business-on .connect-to-us-section .connect-to-us-content .connect-to-us-button img {
	filter: none;
}

#business-on .connect-to-us-section .connect-to-us-content .connect-to-us-button:hover {
	background-color: #ffffff;
	color: #000000;
	transform: translateY(-2px);
}

#business-on .connect-to-us-section .connect-to-us-content .connect-to-us-button:hover img {
	filter: none;
}

#business-on .cta-button {
	background-color: #00DDC2;
}

/* Business on buttons — hover to white */
#business-on .cta-button:hover {
	background-color: #ffffff;
	color: #000000;
	transform: translateY(-2px);
}

#business-on .cta-button:hover img {
	filter: none;
}


#business-on .faq-section .section-title {
	color: #00DDC2;
}

#business-on #what-are-you-waiting-for-section .section-title {
	color: #00DDC2;
}


#business-on #what-are-you-waiting-for-section .arrow-down-icon path {
	fill: #00DDC2;
  }

.mobile-nav-backdrop {
	display: none;
}


#business-on .connect-to-us-section .connect-to-us-image {
	position: relative;
	max-width: min(560px,37vw);
	aspect-ratio: 1;  
	flex-shrink: 0;
}

#business-on .connect-to-us-section .connect-to-us-image .small-img {
	width: min(211px,14vw);
	position: absolute;
	bottom: 15%;
	right: 5%;
	transform: rotate(10deg);
	transform-origin: center center;
}

#business-on .connect-to-us-section .connect-to-us-image .big-img {
	width: min(400px,27vw);
	position: absolute;
	left: 10%;
	top: 0%;
	transform: rotate(-30deg);
	transform-origin: center center;
}

/* =============================================
   PAGE — CONTACT
   ============================================= */
#contact-page .section-title {
	font-size: min(45px,3.3vw);
}

#contact-page .contact-hero {
	width: 100%;
}

#contact-page .contact-hero__panel {
	width: 100%;
}

#contact-page .contact-hero__image {
	display: block;
	width: 100%;
	height: auto;
	max-height: 500px;
	object-fit: cover;
}

#contact-page .contact-intro {
	text-align: right;
	font-size: min(20px,1.42vw);
}

#contact-page .contact-intro__text {
	font-size: min(16px,1.3vw);
	color: #ffffff;
	white-space: nowrap;
}

#contact-page .contact-team {
	display: flex;
	flex-direction: row;
	gap: min(100px,6.9vw);
	align-items: flex-end;
}

#contact-page .contact-team__content {
	flex: 1 1 0;
	max-width: 540px;
}

#contact-page .contact-team__content .section-title {
	margin-bottom: 10px;
	font-weight: 400;
	font-size: min(45px,3,2vw);
	color: rgba(0, 221, 194, 1);
}

#contact-page .contact-team__content .section-title.norris {
	--c-primary: rgba(0, 221, 194, 1);
}

#contact-page .contact-team__content .section-description {
	font-size: min(16px,1.3vw);
	line-height: 1.8;
	color: rgba(255,255,255,0.75);
	white-space: nowrap;
}

#contact-page .contact-team__photos {
	display: flex;
	flex-direction: row;
	gap: min(50px,4vw);
	flex-shrink: 0;
}

#contact-page .contact-team__photo {
	width: min(220px,16vw);
	height: min(220px,16vw);
	border-radius: 16px;
	background: rgba(255,255,255,0.05);
	overflow: hidden;
}

#contact-page .contact-team__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#contact-page .contact-join {
	max-width: 600px;
	text-align: right;
}

#contact-page .contact-join .section-title {
	font-size: min(45px,3.3vw);
	margin-bottom: 16px;
}

#contact-page .contact-join .section-description {
	font-size: min(16px,1.3vw);
	line-height: 1.8;
	color: rgba(255,255,255,0.75);
	/*max-width: 450px;*/
}

#contact-page .contact-form-wrap {
	display: flex;
	flex-direction: row;
	gap: min(215px,14.9vw);
	align-items: flex-start;
}

#contact-page .contact-form-wrap__form {
	flex: 1 1 0;
	max-width: 540px;
}

#contact-page .contact-form-wrap__form .section-description {
		font-size: 16px;
		font-weight: 300;
		color: rgba(255,255,255,0.75);
		margin-bottom: 28px;
		margin-top: 20px;
}

#contact-page .contact-form-wrap__form .section-title {
	margin-bottom: 28px;
}


#contact-page .contact-form-wrap__form .section-title.norris{
	--c-primary: rgba(0, 221, 194, 1);
}

#contact-page .contact-form-wrap__info {
	flex: 0 0 220px;
	padding-top: 72px;
}

#contact-page .contact-details {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

#contact-page .contact-details__item {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: min(24px,1.66vw);
	text-align: center;

}

#contact-page .contact-details__item .contact-details__content {
	text-align: right;
}

#contact-page .contact-details__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 10%;
	background: #C4C4C4;
	flex-shrink: 0;
}

#contact-page .contact-details__icon img {
	width: auto;
	height: auto;
	object-fit: contain;
	max-width: 33px;
	filter: brightness(10);
}

#contact-page .contact-details__label {
	font-size: min(24px,1.66vw);
	color: #fff;
	display: block;
	font-weight: bold;
}

#contact-page .contact-details__value {
	font-size: min(20px,1.4vw);
	font-weight: 300;
	color: #fff;
	text-decoration: none;
}

#contact-page .contact-details__value:hover {
	color: #FF0B7C;
}

/* CF7 styling */
#contact-page .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

#contact-page .wpcf7-form p {
	margin: 0;
}

#contact-page .wpcf7 input[type="text"],
#contact-page .wpcf7 input[type="email"],
#contact-page .wpcf7 input[type="tel"],
#contact-page .wpcf7 select,
#contact-page .wpcf7 textarea {
	width: 100%;
	background: rgba(255,255,255,0.06);
	border: 1px solid #ffffff;
	border-radius: 10px;
	padding: 14px 18px;
	color: #fff;
	font-size: 15px;
	font-family: inherit;
	outline: none;
	transition: border-color 0.2s;
	box-sizing: border-box;
	text-align: right;
}

#contact-page .wpcf7 input[type="text"]::placeholder,
#contact-page .wpcf7 input[type="email"]::placeholder,
#contact-page .wpcf7 input[type="tel"]::placeholder,
#contact-page .wpcf7 textarea::placeholder {
	color: #ffffff;
}

#contact-page .wpcf7 input[type="text"]:focus,
#contact-page .wpcf7 input[type="email"]:focus,
#contact-page .wpcf7 input[type="tel"]:focus,
#contact-page .wpcf7 select:focus,
#contact-page .wpcf7 textarea:focus {
	border-color: #FF0B7C;
}

#contact-page .wpcf7 select {
	appearance: none;
	cursor: pointer;
}

#contact-page .wpcf7 textarea {
	min-height: 120px;
	resize: vertical;
}

#contact-page .wpcf7 input[type="submit"] {
	background: #FF0B7C;
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 14px 36px;
	font-size: 15px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	transition: opacity 0.2s;
	align-self: flex-start;
	width: 100%;
}

#contact-page .wpcf7 input[type="submit"]:hover {
	opacity: 0.85;
}

/* Choices.js custom dark theme */
#contact-page .contact-choices {
	font-family: inherit;
	font-size: 15px;
}

#contact-page .contact-choices .choices__inner {
	background: rgba(255,255,255,0.06);
	border: 1px solid #ffffff;
	border-radius: 10px;
	padding: 12px 18px 12px 40px;
	min-height: unset;
	color: #fff;
	transition: border-color 0.2s;
	display: flex;
	align-items: center;
}

#contact-page .contact-choices.is-open .choices__inner {
	border-color: #FF0B7C;
	border-radius: 10px 10px 0 0;
}

#contact-page .contact-choices .choices__list--single {
	padding: 0;
}

#contact-page .contact-choices .choices__list--single .choices__item {
	color: #fff;
	text-align: end;
}

#contact-page .contact-choices .choices__item--selectable.is-selected {
	background-color: #FF0B7C;
}

#contact-page .contact-choices[data-type*="select-one"]::after {
	border: none;
	border-right: 2px solid rgba(255,255,255,0.5);
	border-bottom: 2px solid rgba(255,255,255,0.5);
	width: 7px;
	height: 7px;
	right: auto;
	left: 16px;
	top: 50%;
	margin-top: -6px;
	transform: rotate(45deg);
	transition: transform 0.25s ease, border-color 0.25s ease;
}

#contact-page .contact-choices[data-type*="select-one"].is-open::after {
	transform: rotate(225deg);
	border-color: #FF0B7C;
	margin-top: -2px;
}

#contact-page .contact-join-section {
	padding-block-start: 0;
}

#contact-page .contact-choices .choices__list--dropdown,
#contact-page .contact-choices .choices__list[aria-expanded] {
	background: #161b38;
	border: 1px solid #FF0B7C;
	border-top: none;
	border-radius: 0 0 10px 10px;
	z-index: 100;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}

#contact-page .contact-choices .choices__list--dropdown.is-active,
#contact-page .contact-choices .choices__list[aria-expanded="true"] {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

#contact-page .contact-choices .choices__list--dropdown .choices__item,
#contact-page .contact-choices .choices__list[aria-expanded] .choices__item {
	color: rgba(255,255,255,0.75);
	padding: 12px 18px;
	font-size: 15px;
	transition: background 0.15s, color 0.15s;
	text-align: end;
}

#contact-page .contact-choices .choices__list--dropdown .choices__item--selectable.is-highlighted,
#contact-page .contact-choices .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
	background: rgba(255,11,124,0.15);
	color: #FF0B7C;
}

#contact-page .contact-choices .choices__placeholder {
	color: rgba(255,255,255,0.4);
	opacity: 1;
	text-align: end;
}





.site-page#business-on #hero-section .hero-video,
.site-page#friends-on #hero-section .hero-video {
	position: absolute;
	top: 0;
	right: unset;
	bottom: 0;
	left: 5%;
	width: 80%;
	height: unset;
	object-fit: contain;
	pointer-events: none;
	z-index: 0;
	max-height: min(480px,33vw);
	mix-blend-mode: screen;
}


.site-page#business-on #hero-section .hero-content-wrap,
.site-page#friends-on #hero-section .hero-content-wrap {
	max-height: min(480px,33vw);
}

.site-page#business-on #hero-section .hero-section-inner,
.site-page#friends-on #hero-section .hero-section-inner {
	height: 100%;
}

/* =============================================
   RESPONSIVE — min-width: 769px
   ============================================= */
@media (min-width: 769px) {
	#mobile-menu-toggle {
		display: none;
	}
}

/* =============================================
   RESPONSIVE — max-width: 768px  (MOBILE)
   ============================================= */
@media (max-width: 768px) {

	:root {
		--container-padding: 20px;
		--header-height: 60px;
	}

	/* Reset section top margins on mobile */
	.site-page .how-does-it-works-section,
	.site-page .connect-to-us-section,
	.site-page .infinity-wallet-section,
	.site-page #what-are-you-waiting-for-section,
	.site-page .faq-section,
	#friends-on .features-items-section,
	#business-on .features-items-section {
		margin-top: 0;
	}

	#site-header .container {
		position: relative;
		height: auto;
		align-items: center;
		padding-block: 0;
		padding-right: calc(40px + 20px);
	}

	.site-branding {
		margin-inline-start: auto;
	}

	#site-header {
		padding-block-end: 0.5rem;
  		padding-block-start: 0.5rem;
	}

	.custom-logo-link img {
		width: 66px;
	}

	#mobile-menu-toggle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 5px;
		width: 40px;
		height: 40px;
		background: none;
		border: none;
		padding: 4px;
		cursor: pointer;
		flex-shrink: 0;
		position: fixed;
		top: calc((var(--header-height) - 40px) / 2);
		right: 20px;
		z-index: 310;
		transition: right 0.38s cubic-bezier(0.23, 1, 0.32, 1);
	}

	#mobile-menu-toggle span {
		display: block;
		height: 2px;
		background: #ffffff;
		border-radius: 2px;
		transition: width 0.3s ease, transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.25s ease;
		transform-origin: center;
	}

	#mobile-menu-toggle span:nth-child(1) { width: 22px; }
	#mobile-menu-toggle span:nth-child(2) { width: 16px; }
	#mobile-menu-toggle span:nth-child(3) { width: 22px; }

	#mobile-menu-toggle.is-open span:nth-child(1) {
		width: 22px;
		transform: translateY(7px) rotate(45deg);
	}
	#mobile-menu-toggle.is-open span:nth-child(2) {
		opacity: 0;
		width: 0;
	}
	#mobile-menu-toggle.is-open span:nth-child(3) {
		width: 22px;
		transform: translateY(-7px) rotate(-45deg);
	}

	#mobile-menu-toggle.is-open {
		right: 14px;
	}

	.mobile-nav-backdrop {
		display: none;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 290;
		backdrop-filter: blur(2px);
		-webkit-backdrop-filter: blur(2px);
		opacity: 0;
		transition: opacity 0.35s ease;
	}

	.mobile-nav-backdrop.is-open {
		display: block;
		opacity: 1;
	}

	.header-nav-menu {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(300px, 82vw);
		background: linear-gradient(160deg, #161c3a 0%, #10152D 60%);
		border-left: 1px solid rgba(255, 255, 255, 0.08);
		padding: 0 0 32px;
		z-index: 300;
		align-items: stretch;
		transform: translateX(100%);
		transition: transform 0.38s cubic-bezier(0.23, 1, 0.32, 1);
		box-shadow: -12px 0 48px rgba(0, 0, 0, 0.5);
		overflow-y: auto;
	}

	.header-nav-menu.is-open {
		transform: translateX(0);
	}

	.header-nav-menu::before {
		content: '';
		display: block;
		height: var(--header-height);
		flex-shrink: 0;
		margin-bottom: 8px;
	}

	#menu-header_menu {
		display: flex;
		flex-direction: column;
		padding: 8px 0 0;
		margin: 0;
		flex: 1;
	}

	#menu-header_menu::before {
		display: none;
	}

	#menu-header_menu li {
		list-style: none;
		opacity: 0;
		transform: translateX(24px);
		transition: opacity 0.32s ease, transform 0.32s ease;
	}

	.header-nav-menu.is-open #menu-header_menu li {
		opacity: 1;
		transform: translateX(0);
	}

	.header-nav-menu.is-open #menu-header_menu li:nth-child(1) { transition-delay: 0.07s; }
	.header-nav-menu.is-open #menu-header_menu li:nth-child(2) { transition-delay: 0.13s; }
	.header-nav-menu.is-open #menu-header_menu li:nth-child(3) { transition-delay: 0.19s; }
	.header-nav-menu.is-open #menu-header_menu li:nth-child(4) { transition-delay: 0.25s; }
	.header-nav-menu.is-open #menu-header_menu li:nth-child(5) { transition-delay: 0.31s; }
	.header-nav-menu.is-open #menu-header_menu li:nth-child(6) { transition-delay: 0.37s; }

	#menu-header_menu li a {
		display: block;
		padding: 15px 14px;
		font-size: 17px;
		font-weight: 500;
		color: rgba(255, 255, 255, 0.8);
		letter-spacing: 0.02em;
		text-align: right;
		transition: color 0.2s ease, background-color 0.2s ease, padding-right 0.2s ease;
	}

	#menu-header_menu li a:hover {
		color: #ffffff;
		background-color: rgba(255, 255, 255, 0.05);
		padding-right: 32px;
	}

	#menu-header_menu li {
		border-bottom: 1px solid #FF0B7C;
	}

	#menu-header_menu li:last-child {
		border-bottom: none;
	}

	#menu-header_menu li a::after {
		display: none;
	}

	#header-download-btn {
		margin: auto 28px 0;
		width: calc(100% - 56px);
		justify-content: center;
		font-size: 15px;
		height: 48px;
		border-radius: 24px;
		opacity: 0;
		transform: translateY(10px);
		transition: opacity 0.3s ease 0.4s, transform 0.3s ease 0.4s, background-color 0.2s, color 0.2s;
	}

	.header-nav-menu.is-open #header-download-btn {
		opacity: 1;
		transform: translateY(0);
	}

	.site-page .section {
		padding-block: 30px;
	}

	.hero-sequence-scroll {
		height: 180vh;
	}

	.hero-scroll-arrow {
		display: none;
	}

	

	.hero-sequence-sticky {
		top: calc(var(--header-height) + 40px);
		height: calc(100vh - var(--header-height) - 40px);
		display: flex;
		flex-direction: column;
	}

	.hero-media-zone {
		position: relative;
		height: 46vh;
		flex-shrink: 0;
		overflow: hidden;
		margin-top: -40px;
		margin-bottom: -20px;
	}

	.hero-media-zone #hero-canvas{
		right: auto;
		bottom: auto;
		width: 100%;
		height: 100%;
	}

	.hero-sequence-sticky::after {
		bottom: auto;
		height: 100%;
		background: radial-gradient(
			ellipse 95% 88% at 63% 42%,
			transparent 32%,
			rgba(16, 21, 45, 0.7) 62%,
			#10152D 85%
		);
	}

	.hero-sequence-content {
		position: relative;
		z-index: 4;
		height: auto;
		width: 100%;
		flex-shrink: 0;
		background-color: #10152D;
		padding: 24px 0 0px;
		align-items: center;
	}

	.hero-sequence-content .hero-content {
		width: 100%;
		align-items: center;
		text-align: center;
	}

	.hero-sequence__video {
		object-fit: unset;
		width: 150%;
		height: auto;
		top: 50%;
		left: 70%;
		right: auto;
		bottom: auto;
		transform: translate(-50%, -50%);
		max-width: 200%;
		
	}

	.site-page .hero-title {
		font-size: 38px;
		align-items: center;
	}

	.site-page .hero-subtitle {
		font-size: 15px;
		text-align: center;
		align-items: center;
		margin-top: 14px;
		max-width: 80%;
	}

	.site-page .hero-btns {
		flex-direction: row;
		align-items: center;
		gap: 12px;
		margin-top: 30px;
		justify-content: center;
		width: 100%;

	}

	.site-page .hero-btns .hero-btn {
		font-size: 16px;
		padding: 12px 32px;
		width: 160px;
		justify-content: center;
		
		border-radius: 24px 24px;
	}

	.site-page .features-items{
		margin-top: 40px;
		gap: 40px;
	}

	.site-page .features-items .features-item .item-icon {
		width: 100%;
		max-width: 110px;
	}

	.site-page .features-items .features-item .item-title {
		font-size: 20px;
		margin-top: 10px;
	}

	.site-page .features-items .features-item .item-description {
		font-size: 15px;
		margin-top: 6px;
		max-width: 100%;
	}

	.site-page .section-title {
		font-size: 30px;
		text-align: center;
		line-height: 1.1;
	}

	.site-page .how-does-it-works-section {
		overflow: hidden;
	}

	.site-page .how-does-it-works-section .section-subtitle {
		font-size: min(14px, 3.6vw);
		text-align: center;
	}

	.site-page .how-does-it-works-section .how-it-works-flow {
		margin-top: 40px;
		overflow: visible;
		margin: 30px -270px 0 -270px;
	}

	.site-page .how-does-it-works-section .how-it-works-flow .flow-separator {
		display: none;
	}

	.site-page .how-does-it-works-section .how-it-works-flow .swiper-wrapper {
		align-items: stretch;
	}

	.site-page .how-does-it-works-section .flow-item {
		width: 100%;
		flex: 0 0 calc(100% - 48px)!important;
		height: auto;
		align-items: center;
		justify-content: flex-start;
		gap: 16px;
		padding: 24px;
		max-width: none;
		box-sizing: border-box;
		border-radius: 20px;
		background: rgba(255, 255, 255, 0.05);
		border: 1px solid rgba(255, 255, 255, 0.08);
		max-width: 320px!important;

	}

	.site-page .how-does-it-works-section .how-it-works-flow .flow-item .flow-item-number {
		font-size: 48px;
		padding: 14px;
		min-width: 84px;
		border-radius: 16px;
	}

	.site-page .how-does-it-works-section .how-it-works-flow .flow-item .flow-item-title {
		font-size: 20px;
		text-align: center;
		
	}

	.site-page .how-does-it-works-section .how-it-works-flow .flow-item .flow-item-subtitle {
		font-size: 15px;
		text-align: center;
		width: 100%;
		max-width: 100%;
	}

	.how-it-works-flow .swiper-pagination {
		position: static;
		margin-top: 24px;
	}

	.how-it-works-flow .swiper-pagination-bullet {
		background: rgba(255, 255, 255, 0.3);
		opacity: 1;
		width: 8px;
		height: 8px;
		transition: background 0.25s, transform 0.25s;
	}

	.how-it-works-flow .swiper-pagination-bullet-active {
		background: #FF0B7C;
		transform: scale(1.35);
	}

	.site-page .connect-to-us-section {
		margin-top: 0;
		margin-bottom: 0;
	}

	#home .connect-to-us-section {
		margin-bottom: 40px;
	}

	.site-page .connect-to-us-section .container {
		flex-direction: column;
		align-items: center;
	}

	.site-page .connect-to-us-section .connect-to-us-content {
		max-width: 100%!important;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		order: 2;
		gap: 10px;
    	margin-top: 30px;
	}

	.site-page .connect-to-us-section .connect-to-us-content .section-title {
		align-items: center;
	}

	.site-page .connect-to-us-section .connect-to-us-content .connect-to-us-button {
		font-size: 15px;
		padding: 13px 30px;
		width: auto;
		gap: 8px;
	}

	.site-page .connect-to-us-section .connect-to-us-image {
		order: 1;
		width: 100%;
		max-width: 380px;
		min-height: auto;
	}

	.site-page#business-on .connect-to-us-section .connect-to-us-image , .site-page#friends-on .connect-to-us-section .connect-to-us-image {
		order: 1;
		width: 100%;
		max-width: 280px!important;
		min-height: auto;
	}

	.site-page .connect-to-us-section .connect-to-us-image video {
		width: 100%;
		max-width: 100%;
	}


	#friends-on .features-items-section .item-icon  {
		width: unset;
	}

	.site-page .features-items-section .section-title {
		font-size: 30px !important;
	}

	.site-page .infinity-wallet-section {
		overflow: hidden;
		padding-bottom: 60px;
		padding-top: 60px;
	}

	.site-page .infinity-wallet-section .section-subtitle {
		font-size: 15px;
		max-width: 100%;
		text-align: center;
	}

	.site-page .infinity-wallet-section .infinity-wallet-content {
		flex-direction: column-reverse;
		margin-top: 36px;
		align-items: center;
		gap: 32px;
		overflow: hidden;
	}

	.site-page .infinity-wallet-section .inifinity-wallet-image {
		width: 140%;
		max-width: 300%;
	}

	.site-page .infinity-wallet-section .infinity-wallet-features {
		width: 100%;
		gap: 20px;
	}

	.infinity-wallet-feature-item .item-content .item-title {
		font-size: 17px;
	}

	.infinity-wallet-feature-item .item-content .item-description {
		font-size: 14px;
	}

	.infinity-wallet-feature-item .item-content .item-description br {
		display: none;
	}

	.infinity-wallet-feature-item .item-number {
		font-size: 22px;
		min-width: 38px;
		height: 38px;
		border-radius: 8px;
	}

	.site-page #what-are-you-waiting-for-section .section-subtitle {
		font-size: 15px;
		max-width: 100%;
	}

	.site-page #what-are-you-waiting-for-section .section-subtitle br {
		display: none;
	}

	.site-page .section-subtitle {
		font-size: 15px;
		max-width: 100%;
	}

	.site-page #what-are-you-waiting-for-section .arrow-down-icon {
		display: none;
	}

	.site-page #what-are-you-waiting-for-section .download-buttons {
		gap: 12px;
		margin: 20px 0 28px;
	}

	#site-footer {
		padding-top: 48px;
		padding-bottom: 36px;
	}

	#site-footer .container {
		flex-direction: column;
		align-items: stretch;
		gap: 36px;
	}

	#site-footer .footer-items {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 32px 20px;
		text-align: right;
	}

	#site-footer .footer-items .footer-items-item-icon-string {
		justify-content: flex-end;
	}

	#site-footer #footer-download-buttons {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 12px;
		padding-top: 8px;
		border-top: 1px solid rgba(255, 255, 255, 0.1);
	}

	#site-footer #footer-download-buttons .hero-btn {
		font-size: 15px;
		padding: 10px 22px;
	}

	#site-footer .footer-items .footer-items-item-title {
		font-size: 18px;
	}

	#site-footer .footer-items .footer-items-item-content li {
		font-size: 14px;
	}

	#site-footer .footer-items .footer-items-item-content li a {
		font-size: 16px;
	}

	

	.site-page#business-on .features-items-section .section-title , .site-page#friends-on .features-items-section .section-title {
		font-size: 30px!important;
	}

	/* ── cta-button (friends-on / business-on pages) ── */
	.site-page .cta-button {
		font-size: 15px;
		padding: 13px 28px;
		gap: 8px;
		margin-top: 20px;
	}

	/* ── Friends hero ── */
	.site-page .hero-section-inner {
		height: auto!important;
		display: flex;
		flex-direction: column;
	}

	.site-page #hero-section .hero-content-wrap {
		height: auto!important;
		display: flex;
		flex-direction: column;
		max-height: unset!important;
		padding-top: 10px!important;
	}

	.site-page#friends-on #hero-section .hero-video {
		position: relative;
		top: auto;
		right: -120px;
		bottom: auto;
		left: auto;
		width: 160%;
		height: auto;
		object-fit: unset;
		object-position: center center;
		z-index: 1;
		max-width: 300%;
		min-height: 230px;
	}

	.site-page .hero-section-inner::after {
		display: none;
	}

	.site-page .hero-content-wrap {
		position: relative;
		height: auto!important;
		align-items: center;
		justify-content: center;
		padding: 36px 0;
		text-align: center;
		z-index: 2;
	}

	.site-page .hero-content-wrap .hero-content {
		align-items: center;
		text-align: center;
		width: 100%;
	}

	/* ── Business hero ── */
	.site-page#business-on #hero-section .hero-video {
		position: relative;
		top: auto;
		right: -100px;
		bottom: auto;
		left: auto;
		width: 145%;
		height: auto;
		object-fit: unset;
		object-position: center center;
		z-index: 1;
		max-width: 300%;
		min-height: 230px;
	}

	/* ── FAQ section ── */
	.site-page .faq-section .section-title {
		margin-bottom: 28px;
	}

	.site-page .faq-item__question {
		font-size: 16px;
		padding: 16px 0;
	}

	.site-page .faq-item__answer-inner {
		font-size: 14px;
		padding-bottom: 16px;
	}

	.site-page .why-join-section .section-title {
		font-size: 30px;
	}

	.download-image {
		display: none;
	}

	#contact-page .contact-hero {
		width: 100%;
	}

	#contact-page .contact-intro {
		padding: 28px 0 12px;
		text-align: right;
	}

	#contact-page .contact-team {
		flex-direction: column-reverse;
		gap: 28px;
	}

	#contact-page .contact-team__photos {
		justify-content: center;
		gap: 30px;
		margin: 0 auto;
	}

	#contact-page .contact-team__photo {
		width: 120px;
		height: 160px;
	}

	#contact-page .contact-join {
		margin: 0;
	}

	#contact-page .contact-form-wrap {
		flex-direction: column;
		gap: 5px;
	}


	#contact-page .contact-form-wrap__form .section-description {
		font-size: 16px;
		font-weight: 300;
		color: #fff;
		text-align: center;
	}

	#contact-page .contact-form-wrap__info {
		flex: unset;
		padding-top: 0;
		width: 100%;
	}

	#contact-page .contact-details {
		flex-direction: row;
		justify-content: space-between;
		gap: 5px;
	}

	#contact-page .contact-details__label {
		font-size: 12px;
	}

	#contact-page .contact-details__value {
		font-size: 13px;
	}

	#contact-page .contact-intro__text {
		font-size: 16px;
		white-space: normal;
		overflow-wrap: break-word;
		word-break: normal;
	}

	#contact-page .contact-intro__text br {
		display: none;
	}

	#contact-page .section-title {
		font-size: 30px!important;
	}

	#contact-page .contact-team__content .section-description {
		font-size: 15px;
		text-align: center;
		white-space: normal;
		overflow-wrap: break-word;
		word-break: normal;
	}

	#contact-page .section-description br{
		display: none;
	}

	#contact-page .contact-join .section-description {
		font-size: 15px;
	}

	#contact-page .contact-details__item {
		flex-direction: column;
		align-items: center;

	}

	#contact-page .contact-details__item .contact-details__content {
		max-width: 100px;
		display: flex;
		flex-direction: column;

		align-items: center;
		white-space: wrap;
	}

	#friends-on .connect-to-us-section .connect-to-us-image .big-img { 
		width: 180px;
	}


	#friends-on .connect-to-us-section .connect-to-us-image .small-img {
		width: 90px;
		position: absolute;
		bottom: 10%;
		left: 10%;
		transform: rotate(10deg);
		transform-origin: center center;
	  }

	  .site-page .connect-to-us-section .connect-to-us-content .section-subtitle {
		font-size: 15px;
		white-space: unset;
	  }

	  .site-page#friends-on  .connect-to-us-section .connect-to-us-content .section-subtitle br {
		display: none;
	  }

	#business-on .connect-to-us-section .connect-to-us-image .big-img {
		width: 180px;
	}


	#business-on .connect-to-us-section .connect-to-us-image .small-img {
		width: 90px;
		position: absolute;
		bottom: 10%;
		/*left: 10%;*/
		transform: rotate(10deg);
		transform-origin: center center;
	}
}


@media (min-width: 768px) {

	.site-page#business-on #hero-section .hero-video,
	.site-page#friends-on #hero-section .hero-video {
		-webkit-mask-image: radial-gradient(
				ellipse 80% 85% at 50% 40%,
				black 40%,
				transparent 72%
		);
		mask-image: radial-gradient(
				ellipse 80% 85% at 50% 40%,
				black 40%,
				transparent 72%
		);
	}
}