:root {
	--bg: #07080d;
	--overlay-dark: rgba(3, 5, 11, 0.58);
	--overlay-strong: rgba(2, 3, 8, 0.8);
	--text-main: #eef2ff;
	--text-subtle: #adb5cd;
	--accent: #7be7e0;
	--accent-2: #f7b37a;
	--scene-frame-width: min(92vw, calc(92dvh * 16 / 9));
}

* {
	box-sizing: border-box;
}

html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	background: var(--bg);
}

body {
	font-family: "Space Grotesk", sans-serif;
	color: var(--text-main);
}

body > header {
	position: fixed;
	top: 1rem;
	left: 0;
	width: 100%;
	height: 5rem;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	z-index: 20;
	/* background: linear-gradient(180deg, rgba(7, 8, 13, 0.82) 0%, rgba(7, 8, 13, 0.16) 100%); */
}

body > header .logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* width: 10rem; */
	height: 5rem;
	flex: 0 0 5rem;
    background: rgba(0,0,0,.5);
    padding:1rem .5rem 1rem 4rem;
}

body > header .logo img {
	width: 5rem;
	height: 5rem;
	display: block;
	object-fit: contain;
}

body > header .signup-link {
	margin-left: auto;
	margin-right: 1.25rem;
	padding: 0.48rem 1.3rem;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	/* background: linear-gradient(135deg, #2ca7ce 0%, #675bd5 52%, #c9648d 100%); */
	/* color: #ffffff; */
	text-decoration: none;
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
	white-space: nowrap;
	backdrop-filter: blur(8px);
	box-shadow: 0 8px 24px rgba(12, 18, 36, 0.4), 0 2px 8px rgba(83, 216, 255, 0.28);
	transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;

    color: var(--bg);
	background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
}

body > header .signup-link:hover,
body > header .signup-link:focus-visible {
	/* border-color: rgba(255, 255, 255, 0.38); */
	/* background: linear-gradient(135deg, #36b8df 0%, #7668e4 48%, #d9749c 100%); */
	/* box-shadow: 0 10px 28px rgba(12, 18, 36, 0.48), 0 4px 12px rgba(138, 125, 255, 0.32); */
	
	outline: none;

    transform: translateY(-2px);
	box-shadow: 0 10px 40px rgba(123, 231, 224, 0.35);
	filter: saturate(1.12);
}

.tour-root {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.opusonix-swiper,
.swiper-wrapper,
.swiper-slide {
	width: 100%;
	height: 100%;
}

.scene {
	position: relative;
	display: grid;
	place-items: center;
	padding: clamp(1.25rem, 3vw, 3rem);
	overflow: hidden;
}

.scene-bg {
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	width: var(--scene-frame-width);
	aspect-ratio: 16 / 9;
	z-index: 0;
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
	background-color: #000;
	border-radius: 1rem;
	will-change: transform;
}

.scene-bg-video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background-color: #000;
	border-radius: inherit;
}


    .swiper-slide:not(.swiper-slide-fully-visible) .scene-bg,
    .swiper-slide:not(.swiper-slide-fully-visible) .scene-bg-video {
        opacity: 0.6;
        /* filter:saturate(20%); */
        /* transform:scale3d(.8, .8, .8) */
    }


.scene-overlay {
    display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: var(--scene-frame-width);
	aspect-ratio: 16 / 9;
	z-index: 1;
	border-radius: 1rem;
	background:
		linear-gradient(130deg, rgba(7, 10, 20, 0.18) 0%, rgba(5, 8, 15, 0.56) 48%, rgba(2, 3, 8, 0.9) 100%),
		linear-gradient(0deg, var(--overlay-strong) 0%, transparent 42%);
}

.scene-content {
	position: absolute;
    bottom:0;
    left:0;
	z-index: 2;
	/* width: var(--scene-frame-width); */
    width:100%;
	/* aspect-ratio: 16 / 9; */
	padding: clamp(1rem, 2.5vw, 2.25rem);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;

    background:
		linear-gradient(180deg, rgba(0,0,0, 0) 0%, rgba(0,0,0, .8) 50%);
}

.scene-kicker {
	margin: 0 0 0.65rem;
	font-size: clamp(0.78rem, 1.2vw, 1rem);
	text-transform: uppercase;
	letter-spacing: 0.24em;
	color: var(--accent);
	font-weight: 700;
}

.scene-title {
	margin: 0;
	max-width: 80%;
	/* font-family: "Syne", sans-serif; */
	font-size: clamp(2.3rem, 9vw, 5.75rem);
	line-height: 0.96;
	/* text-transform: uppercase; */
	text-wrap: balance;
	text-shadow: 0 8px 25px rgba(0, 0, 0, 0.9);
}

.scene-subtitle {
	margin: 1rem 0 0;
	max-width: 60ch;
	font-size: clamp(1rem, 2.2vw, 1.55rem);
	line-height: 1.4;
	color: var(--text-subtle);
}

.cta-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	margin-top: 1.6rem;
	padding: 0.95rem 1.45rem;
	border: 1px solid rgba(238, 242, 255, 0.35);
	border-radius: 999px;
	text-decoration: none;
	font-weight: 700;
    font-size:1.4rem;
	letter-spacing: 0.04em;
    width:20rem;
	color: var(--bg);
	background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
	transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
}

.cta-button:hover,
.cta-button:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 40px rgba(123, 231, 224, 0.35);
	filter: saturate(1.12);
}

.tour-controls {
	position: fixed;
	right: clamp(1rem, 2vw, 2rem);
	bottom: clamp(1rem, 3vh, 2rem);
	z-index: 9;
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.tour-page-indicator {
	margin: 0;
	padding: 0.35rem 0.85rem;
	border: 1px solid rgba(238, 242, 255, 0.22);
	border-radius: 999px;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--text-subtle);
	background: rgba(7, 8, 13, 0.5);
	backdrop-filter: blur(10px);
	white-space: nowrap;
}

.tour-page-indicator .tour-page-current,
.tour-page-indicator .tour-page-total {
	color: var(--text-main);
}

.tour-nav-button {
	width: 3rem;
	height: 3rem;
	border: 1px solid rgba(238, 242, 255, 0.26);
	border-radius: 999px;
	font-size: 1.15rem;
	color: var(--text-main);
	background: rgba(7, 8, 13, 0.5);
	backdrop-filter: blur(10px);
	cursor: pointer;
	transition: background-color 180ms ease, transform 180ms ease, border-color 180ms ease;
}

.tour-nav-button.next-button {
	border-color: rgba(123, 231, 224, 0.72);
	color: #06131e;
	background: linear-gradient(120deg, #7be7e0 0%, #4aa9f3 100%);
	box-shadow: 0 0 0 0 rgba(74, 169, 243, 0.36), 0 8px 22px rgba(74, 169, 243, 0.25);
	animation: next-button-pulse 2.2s ease-out infinite;
}

.tour-nav-button.next-button:hover,
.tour-nav-button.next-button:focus-visible {
	background: linear-gradient(120deg, #8bf1ea 0%, #5fb6f5 100%);
	border-color: rgba(123, 231, 224, 0.92);
	box-shadow: 0 0 0 0 rgba(74, 169, 243, 0.42), 0 10px 28px rgba(74, 169, 243, 0.34);
}

.tour-nav-button.next-button.swiper-button-disabled {
	animation: none;
	box-shadow: none;
	filter: grayscale(0.15);
}

@keyframes next-button-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(74, 169, 243, 0.32), 0 8px 22px rgba(74, 169, 243, 0.25);
	}
	70% {
		box-shadow: 0 0 0 12px rgba(74, 169, 243, 0), 0 8px 22px rgba(74, 169, 243, 0.25);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(74, 169, 243, 0), 0 8px 22px rgba(74, 169, 243, 0.25);
	}
}

.tour-nav-button:hover,
.tour-nav-button:focus-visible {
	background: rgba(17, 20, 33, 0.84);
	border-color: rgba(123, 231, 224, 0.6);
	transform: translateY(-1px);
}
.tour-nav-button:active {
    background: #ccc;
    color:#111;
    box-shadow:0 0 .3rem rgba(255, 255,255, .5)
}

.tour-progress {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 0.5rem;
	background: rgba(255, 255, 255, 0.08);
	z-index: 10;
}

.tour-progress-fill {
	width: 0;
	height: 100%;
	background: #3498db;
	transition: width 260ms ease;
}

@media (prefers-reduced-motion: reduce) {
	.tour-nav-button.next-button {
		animation: none;
	}
}

@media (max-width: 768px) {
	body > header {
		height: 4.5rem;
		padding: 0.75rem 1rem;
	}

	body > header .signup-link {
		margin-right: 0;
		padding: 0.44rem 0.7rem;
		font-size: 0.74rem;
	}

	.scene {
		padding: 1rem 1rem 5.75rem;
	}

	.scene-content {
		width: min(100%, var(--scene-frame-width));
	}

	.scene-title {
		font-size: clamp(2.1rem, 12vw, 4.25rem);
		max-width: 13ch;
	}

	.scene-subtitle {
		font-size: clamp(0.95rem, 4vw, 1.16rem);
		max-width: 95%;
	}
}