/* Sticky Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: all 0.3s ease-in-out;
    background-color: transparent;
    padding: 15px 0;
}

.header.scrolled {
    background-color: #000 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
}

/* Adjust the main content to account for fixed header */
.main-content-wrapper {
    padding-top: 80px; /* Adjust this value based on your header height */
}

/* Global Typography */
body,
button,
input,
select,
textarea {
    font-family: 'Sansation', 'FKGroteskNeue', 'Times New Roman', sans-serif !important;
}

/* Ensure all text elements inherit the font */
* {
    font-family: 'Sansation', 'FKGroteskNeue', 'Times New Roman', sans-serif !important;
}

/* Specific elements that might need explicit font-family */
h1, h2, h3, h4, h5, h6,
p, a, span, div,
input, textarea, select, button,
li, td, th, label,
blockquote, cite, figcaption,
.btn, .heading-title, .lead, .text,
.navbar-nav .nav-link,
.footer-widget, .copyright {
    font-family: 'Sansation', 'FKGroteskNeue', 'Times New Roman', sans-serif !important;
}

/* Adjust font weights for Sansation */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700; /* Bold weight for headings */
}

body, p, a, li, span, div {
    font-weight: 400; /* Regular weight for body text */
}

strong, b, .bold {
    font-weight: 700 !important; /* Bold weight for emphasized text */
}

/* ===== Reveal on Scroll ===== */
:root {
  --reveal-duration: 2.5s;
  --reveal-distance: 34px;
  --reveal-ease: cubic-bezier(.2,.7,.2,1);
  --reveal-fade: 0.001; /* use near-zero to avoid rendering glitches */
}

/* Base state */
.reveal {
  opacity: var(--reveal-fade);
  transform: translate3d(0,0,0);
  will-change: transform, opacity;
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
}

/* Directions */
.reveal--left   { transform: translate3d(calc(-1 * var(--reveal-distance)), 0, 0); }
.reveal--right  { transform: translate3d(var(--reveal-distance), 0, 0); }
.reveal--up     { transform: translate3d(0, var(--reveal-distance), 0); }
.reveal--down   { transform: translate3d(0, calc(-1 * var(--reveal-distance)), 0); }

/* Visible state */
.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0,0,0);
}

/* Optional stagger via data-delay (set inline e.g. style="transition-delay:.15s") */
.reveal[style*="transition-delay"] { will-change: opacity, transform; }

/* Accessibility: disable animation for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-visible {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


		/* ===========================
		Premium Titanium Card Styles
		=========================== */
		:root {
			--ti-black: rgba(0,0,0,0.75);           /* semi-transparent */
			--ti-border: rgba(255,255,255,0.12);    /* subtle border */
			--ti-text: rgba(255,255,255,0.92);
			--ti-muted: rgba(255,255,255,0.65);
			--ti-accent: #ac8e4b;                   /* gold accent */
			--ti-accent-ghost: rgba(172,142,75,0.25);
		}

		.product-card {
			position: relative;
			border-radius: 18px;
			padding: 22px 22px;
			background: linear-gradient(180deg, rgba(0,0,0,0.82), rgba(0,0,0,0.68));
			backdrop-filter: blur(6px);
			-webkit-backdrop-filter: blur(6px);
			border: 1px solid var(--ti-border);
			box-shadow: 0 10px 30px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.04);
			color: var(--ti-text);
			overflow: hidden;
		}

		.product-card--titanium::before {
			content: "";
			position: absolute;
			inset: 0;
			pointer-events: none;
			background:
				radial-gradient(800px 200px at -10% -10%, var(--ti-accent-ghost), transparent 60%),
				radial-gradient(500px 150px at 110% 110%, rgba(255,255,255,0.08), transparent 60%);
			mix-blend-mode: screen;
		}

		/* Header: badge left, price right */
		.product-card__header {
			display: grid;
			grid-template-columns: 1fr auto;
			align-items: start;
			gap: 16px;
			margin-bottom: 10px;
		}

		.product-card__badge {
			display: inline-block;
			padding: 6px 12px;
			border-radius: 999px;
			font-size: 12px;
			letter-spacing: 0.06em;
			text-transform: uppercase;
			font-weight: 700;
			color: #fff;
			background:
				linear-gradient(90deg, #1a1a1a, #2a2a2a);
			border: 1px solid rgba(255,255,255,0.14);
			box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
		}

		/* Price stack on right */
		.product-card__price {
			text-align: right;
		}
		.product-card__price-old {
			color: var(--ti-muted);
			font-size: 18px;
			line-height: 1;
			margin-bottom: 4px;
		}
		.product-card__price-now {
			color: #ac8e4b;
			font-weight: 800;
			font-size: clamp(34px, 5vw, 48px); /* responsive big */
			line-height: 1;
		}

		/* Title + subtitle */
		.product-card__title {
			margin: 6px 0 2px;
			font-size: clamp(22px, 2.2vw, 28px);
			font-weight: 800;
			color: #fff;
			letter-spacing: 0.2px;
		}
		.product-card__subtitle {
			margin: 0 0 10px;
			font-size: clamp(14px, 1.6vw, 16px);
			color: var(--ti-muted);
		}

		/* Lead text */
		.product-card__lead {
			font-size: clamp(16px, 1.8vw, 18px);
			line-height: 1.6;
			color: var(--ti-text);
			margin: 10px 0 14px;
		}

		/* Feature list */
		.product-card__features {
			list-style: none;
			padding: 12px 0 0;
			margin: 0 0 14px;
			display: grid;
			gap: 8px;
			border-top: 1px dashed rgba(255,255,255,0.12);
		}
		.product-card__features li {
			display: grid;
			grid-template-columns: 20px 1fr;
			align-items: center;
			gap: 10px;
			font-size: 15px;
			color: var(--ti-text);
		}
		.product-card__features svg {
			width: 18px;
			height: 18px;
			fill: var(--ti-accent);
			opacity: 0.9;
		}

		/* CTA row */
		.product-card__cta {
			display: grid;
			grid-template-columns: auto 1fr;
			align-items: center;
			gap: 14px;
		}
		.preorder-btn {
			display: inline-block;
			padding: 12px 22px;
			border-radius: 10px;
			background: var(--ti-accent);
			border: 1px solid var(--ti-accent);
			color: #fff !important;
			font-weight: 700;
			font-size: 16px;
			letter-spacing: 0.2px;
			transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
			box-shadow: 0 8px 18px rgba(172,142,75,0.35);
			text-decoration: none;
		}
		.preorder-btn:hover {
			transform: translateY(-1px);
			box-shadow: 0 10px 24px rgba(172,142,75,0.45);
		}
		.product-card__note {
			color: var(--ti-muted);
			font-size: 12px;
		}

		/* Tighten on very small screens */
		@media (max-width: 576px) {
			.product-card {
				padding: 18px;
				border-radius: 14px;
			}
			.product-card__cta {
				grid-template-columns: 1fr;
			}
			.product-card__note {
				text-align: center;
			}
		}

	/* Section (no background) */
	.testimonial-section {
		background: transparent;
		color: #333;
	}

	/* Testimonial box (light version) */
	.testimonial-box {
		background: transparent;
		border: none;
		border-radius: 14px;
		padding: 36px 28px;
		box-shadow: 0 6px 18px rgba(0,0,0,0.08);
	}
	.testimonial-quote {
		font-size: clamp(28px, 2vw, 22px);
		line-height: 1.6;
		font-style: italic;
		color: #fff;
		margin-bottom: 24px;
	}

	/* Author */
	.testimonial-author {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 14px;
	}
	.author-photo {
		width: 100px;
		height: 100px;
		border-radius: 50%;
		object-fit: cover;
		box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	}
	.author-info {
		text-align: left;
	}
	.author-name {
		margin: 0;
		font-size: 18px;
		font-weight: 700;
		color: #fff;
	}
	.author-title {
		font-size: 14px;
		color: #777;
	}

	/* Ecosystem */
	.ecosystem-box {
		margin-top: 40px;
	}
	.ecosystem-img {
		width: 100%;
		max-width: 820px;
		border-radius: 12px;
		box-shadow: 0 4px 16px rgba(0,0,0,0.1);
	}

	features-section {
		background: #0e0e0e;
		color: #fff;
	}
	.feature-card {
		background: rgba(255,255,255,0.05);
		border: 1px solid rgba(255,255,255,0.1);
		border-radius: 12px;
		overflow: hidden;
		transition: all 0.3s ease;
	}
	.feature-card:hover {
		box-shadow: 0 8px 24px rgba(0,0,0,0.4);
	}
	.feature-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 18px 20px;
		cursor: pointer;
		font-weight: 600;
		font-size: 18px;
	}
	.feature-header h4 {
		margin: 0;
		color: #fff;
	}
	.feature-header .arrow {
		font-size: 18px;
		transition: transform 0.3s ease;
	}
	.feature-body {
		padding: 0 20px 20px;
		font-size: 15px;
		color: rgba(255,255,255,0.85);
	}
	.feature-body ul {
		padding-left: 18px;
		margin: 10px 0 0;
	}
	.feature-body li {
		margin-bottom: 6px;
	}
	.collapse.show + .arrow,
	.feature-header[aria-expanded="true"] .arrow {
		transform: rotate(180deg);
	}

	/* ====== Layout & Theme ====== */
	.qa-section {
	background: #0f0f12; /* dark background */
	color: #e9ecf1;
	position: relative;
	}

	.qa-heading h2 {
	font-weight: 800;
	font-size: clamp(26px, 3vw, 36px);
	color: #fff;
	margin-bottom: 18px;
	}
	.qa-heading .muted { color: rgba(255,255,255,0.7); font-weight: 500; }

	.answer-group {
	margin-bottom: 40px;
	scroll-margin-top: 100px;
	border-left: 2px solid rgba(255,255,255,0.08);
	padding-left: 14px;
	}
	.answer-group-title {
	color: rgba(255,255,255,0.6);
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-bottom: 12px;
	}

	/* ====== Cards ====== */
	.qa-card {
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 14px;
	padding: 18px;
	height: 100%;
	box-shadow: 0 8px 24px rgba(0,0,0,0.25);
	}
	.qa-card-title {
	margin: 0 0 8px;
	color: #fff;
	font-weight: 700;
	font-size: 18px;
	}
	.qa-card-text {
	margin: 0;
	color: rgba(255,255,255,0.9);
	font-size: 15px;
	line-height: 1.6;
	}
	.qa-link {
	display: inline-block;
	margin-top: 8px;
	color: #ac8e4b;
	text-decoration: none;
	font-weight: 700;
	}
	.qa-link:hover { text-decoration: underline; }

	/* Media cards */
	.qa-card-media {
	padding: 0;
	overflow: hidden;
	}
	.qa-card-media .qa-media img,
	.qa-card-media .qa-media video {
	display: block;
	width: 100%;
	height: auto;
	}
	.qa-card-media .qa-card-body {
	padding: 14px 16px 16px;
	}

	/* ====== Questions (Right) ====== */
	.qa-questions {
	display: grid;
	gap: 12px;
	}
	.qa-question {
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 14px;
	padding: 16px 18px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
	}
	.qa-question:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 28px rgba(0,0,0,0.35);
	}
	.qa-q-text {
	display: grid;
	grid-template-columns: 44px 1fr;
	align-items: center;
	gap: 12px;
	}
	.qa-q-label {
	width: 44px; height: 44px; display: grid; place-items: center;
	border-radius: 10px;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.12);
	color: #fff; font-weight: 800;
	}
	.qa-q-title {
	margin: 0; color: #fff; font-weight: 700; font-size: 18px; line-height: 1.35;
	}
	.qa-q-arrow { font-size: 18px; color: rgba(255,255,255,0.8); transition: transform .2s ease; }

	.qa-question.active { background: rgba(255,255,255,0.08); }
	.qa-question.active .qa-q-arrow { transform: rotate(180deg); }

	/* Sticky on large */
	.sticky-lg-top {
	position: sticky;
	top: 100px;
	}

	/* Gutters */
	.gx-5 { --bs-gutter-x: 3rem; }
	.gy-4 { --bs-gutter-y: 1.5rem; }

	/* Small screens */
	@media (max-width: 991.98px) {
	.sticky-lg-top { position: static; top: auto; }
	}


	/* Make video card larger */
	.qa-card-video {
	grid-column: span 2; /* for grid layouts */
	}

	.qa-card-video video {
	width: 100%;
	height: auto;
	border-radius: 12px;
	max-height: 360px; /* adjust for bigger look */
	object-fit: cover;
	}

	.ecosystem-section {
	position: relative;
	}

	.ecosystem-circle {
	position: relative;
	width: 950px;
	height: 950px;
	margin: 100px auto;
	/* NEW: control ring radius via a variable */
	--radius: 400px;
	--item-size: 280px;
	}

	/* Center */
	.ecosystem-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #111;
	text-align: center;
	font-size: 30px;
	font-weight: bold;
	}

	/* Item (now fully clickable if used on <a class="ecosystem-item">) */
	.ecosystem-item {
	position: absolute;
	width: var(--item-size);
	height: var(--item-size);
	background: #ac8e4b;
	border-radius: 50%;
	text-align: center;
	padding: 30px;
	box-shadow: 0 8px 18px rgba(0,0,0,0.3);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #fff;

	/* Start all items in the center */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/* Clickable+accessible polish */
	cursor: pointer;
	text-decoration: none; /* if the item is an <a> */
	outline: none;
	}
	.ecosystem-item:focus-visible {
	box-shadow: 0 0 0 3px rgba(76,111,255,.35), 0 8px 18px rgba(0,0,0,0.3);
	}

	/* Text inside each item */
	.ecosystem-item h4 {
	font-size: 20px;
	margin-bottom: 10px;
	color: #fff;
	}
	.ecosystem-item p {
	font-size: 15px;
	line-height: 1.4;
	color: #fff;
	}

	/* If legacy inner links still exist, inherit styles (no underline) */
	.ecosystem-item a {
	font-size: 14px;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	}

	/* Position items around the circle using transform (kept exactly the same angles) */
	.ecosystem-circle .ecosystem-item:nth-child(2) {
	transform: translate(-50%, -50%) rotate(0deg)   translateY(calc(-1 * var(--radius))) rotate(0deg);
	}
	.ecosystem-circle .ecosystem-item:nth-child(3) {
	transform: translate(-50%, -50%) rotate(51deg)  translateY(calc(-1 * var(--radius))) rotate(-51deg);
	}
	.ecosystem-circle .ecosystem-item:nth-child(4) {
	transform: translate(-50%, -50%) rotate(102deg) translateY(calc(-1 * var(--radius))) rotate(-102deg);
	}
	.ecosystem-circle .ecosystem-item:nth-child(5) {
	transform: translate(-50%, -50%) rotate(154deg) translateY(calc(-1 * var(--radius))) rotate(-154deg);
	}
	.ecosystem-circle .ecosystem-item:nth-child(6) {
	transform: translate(-50%, -50%) rotate(205deg) translateY(calc(-1 * var(--radius))) rotate(-205deg);
	}
	.ecosystem-circle .ecosystem-item:nth-child(7) {
	transform: translate(-50%, -50%) rotate(257deg) translateY(calc(-1 * var(--radius))) rotate(-257deg);
	}
	.ecosystem-circle .ecosystem-item:nth-child(8) {
	transform: translate(-50%, -50%) rotate(308deg) translateY(calc(-1 * var(--radius))) rotate(-308deg);
	}

	/* ------------------ Responsive scaling (no layout logic changed) ------------------ */
	@media (max-width: 1200px) {
	.ecosystem-circle { width: 780px; height: 780px; --radius: 320px; --item-size: 240px; }
	.ecosystem-center { font-size: 26px; }
	}

	@media (max-width: 992px) {
	.ecosystem-circle { width: 620px; height: 620px; --radius: 250px; --item-size: 210px; }
	.ecosystem-center { font-size: 24px; }
	.ecosystem-item h4 { font-size: 18px; }
	.ecosystem-item p  { font-size: 14px; }
	}

	@media (max-width: 768px) {
	.ecosystem-circle { width: 480px; height: 480px; --radius: 190px; --item-size: 170px; margin: 60px auto; }
	.ecosystem-center { font-size: 20px; }
	.ecosystem-item { padding: 20px; }
	.ecosystem-item h4 { font-size: 16px; }
	.ecosystem-item p  { font-size: 13px; }
	}

	@media (max-width: 540px) {
	.ecosystem-circle { width: 360px; height: 360px; --radius: 140px; --item-size: 140px; margin: 40px auto; }
	.ecosystem-center { font-size: 18px; }
	.ecosystem-item { padding: 14px; }
	.ecosystem-item h4 { font-size: 15px; margin-bottom: 6px; }
	.ecosystem-item p  { font-size: 12px; }
	}



	/* Section base */
	.features-section.bg-light-gray {
	background: transparent;
	}
	.section-subtitle {
	margin-top: 8px;
	color: #6c757d;
	}

	/* Feature cards */
	.feature-card {
	background: rgba(255,255,255,0.05);
	border: 1px solid #ececf1;
	border-radius: 18px;
	padding: 24px;
	box-shadow: 0 6px 22px rgba(0,0,0,0.06);
	transition: transform .2s ease, box-shadow .2s ease;
	height: 100%;
	}
	.feature-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 26px rgba(0,0,0,0.08);
	}
	.feature-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
	}
	.feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: rgba(172, 142, 75, .12); /* #ac8e4b with alpha */
	color: #ac8e4b;
	}
	.feature-title {
	font-size: 20px;
	margin: 0;
	}

	/* Feature list */
	.feature-list {
	list-style: none;
	padding: 0;
	margin: 0;
	}
	.feature-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px dashed #eee;
	font-size: 15px;
	}
	.feature-list li:last-child {
	border-bottom: none;
	}

	/* Gold check bullet */
	.check {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #ac8e4b;
	position: relative;
	margin-top: 2px;
	}
	.check::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 4px;
	border: 2px solid #fff;
	border-top: 0; border-right: 0;
	transform: translate(-50%, -65%) rotate(-45deg);
	}

	/* Download row */
	.download-title {
	font-size: 24px;
	margin-bottom: 6px;
	opacity: 0;
	transform: translateX(-30px);
	transition: all 0.6s ease;
	}
	.download-subtitle {
	color: #6c757d;
	margin-bottom: 16px;
	}
	.store-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	}
	.store-badge {
	display: inline-flex;
	align-items: center;
	padding: 12px 16px;
	border-radius: 12px;
	font-weight: 600;
	text-decoration: none;
	border: 2px solid #ac8e4b;
	color: #ac8e4b;
	transition: all .2s ease;
	}
	.store-badge:hover {
	background: #ac8e4b;
	color: #fff;
	}
	.store-badge.ios::before,
	.store-badge.android::before {
	content: "";
	display: inline-block;
	width: 16px; height: 16px;
	margin-right: 8px;
	mask-size: cover; -webkit-mask-size: cover;
	background: currentColor;
	}
	.store-badge.ios::before {
	mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='%23000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.365 1.43c.08 1.02-.3 2.06-.95 2.81-.66.76-1.74 1.35-2.75 1.27-.09-1.03.33-2.07.96-2.8.69-.79 1.85-1.37 2.74-1.28zM20.25 17.16c-.5 1.19-.74 1.71-1.39 2.76-.9 1.39-2.18 3.13-3.76 3.15-1.41.03-1.78-.9-3.31-.9-1.54 0-1.95.87-3.37.93-1.57.06-2.77-1.51-3.68-2.9-2.01-3.09-2.23-6.73-.99-8.63 1.38-2.12 3.57-2.26 3.88-2.29 1.63-.13 3.19 1 4.03 1 .83 0 2.51-1.23 4.23-1.05.72.03 2.75.29 4.05 2.18-.1.06-2.42 1.42-2.4 4.17.02 3.32 2.95 4.43 3 4.46z'/%3E%3C/svg%3E") no-repeat center;
	-webkit-mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='%23000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.365 1.43c.08 1.02-.3 2.06-.95 2.81-.66.76-1.74 1.35-2.75 1.27-.09-1.03.33-2.07.96-2.8.69-.79 1.85-1.37 2.74-1.28zM20.25 17.16c-.5 1.19-.74 1.71-1.39 2.76-.9 1.39-2.18 3.13-3.76 3.15-1.41.03-1.78-.9-3.31-.9-1.54 0-1.95.87-3.37.93-1.57.06-2.77-1.51-3.68-2.9-2.01-3.09-2.23-6.73-.99-8.63 1.38-2.12 3.57-2.26 3.88-2.29 1.63-.13 3.19 1 4.03 1 .83 0 2.51-1.23 4.23-1.05.72.03 2.75.29 4.05 2.18-.1.06-2.42 1.42-2.4 4.17.02 3.32 2.95 4.43 3 4.46z'/%3E%3C/svg%3E") no-repeat center;
	}
	.store-badge.android::before {
	mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='%23000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.6 9.48l2.4-4.15a.5.5 0 00-.43-.75H4.43a.5.5 0 00-.43.75l2.4 4.15L12 6.5l5.6 2.98zM4 9.83V18.5c0 .28.22.5.5.5h1c.28 0 .5-.22.5-.5V10.5H4zm3 0V19c0 .28.22.5.5.5h1c.28 0 .5-.22.5-.5v-9.2L7 9.83zM12 8.5l-2 1.06V19c0 .28.22.5.5.5h3c.28 0 .5-.22.5-.5V9.56L12 8.5zm3 1.34V19c0 .28.22.5.5.5h1c.28 0 .5-.22.5-.5V9.83l-2-1.06zM19 10.5V19c0 .28.22.5.5.5h1c.28 0 .5-.22.5-.5v-8.67h-2z'/%3E%3C/svg%3E") no-repeat center;
	-webkit-mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='%23000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.6 9.48l2.4-4.15a.5.5 0 00-.43-.75H4.43a.5.5 0 00-.43.75l2.4 4.15L12 6.5l5.6 2.98zM4 9.83V18.5c0 .28.22.5.5.5h1c.28 0 .5-.22.5-.5V10.5H4zm3 0V19c0 .28.22.5.5.5h1c.28 0 .5-.22.5-.5v-9.2L7 9.83zM12 8.5l-2 1.06V19c0 .28.22.5.5.5h3c.28 0 .5-.22.5-.5V9.56L12 8.5zm3 1.34V19c0 .28.22.5.5.5h1c.28 0 .5-.22.5-.5V9.83l-2-1.06zM19 10.5V19c0 .28.22.5.5.5h1c.28 0 .5-.22.5-.5v-8.67h-2z'/%3E%3C/svg%3E") no-repeat center;
	}

	/* Phone frames (image wrappers) */
	.phone-frame {
	background: transparent;
	border: 1px solid transparent;
	border-radius: 24px;
	padding: 18px;
	box-shadow: 0 8px 26px rgba(0,0,0,0.07);
	}
	.phone-frame.revealed {
	opacity: 1;
	transform: scale(1);
	}
	.phone-frame img {
	width: 100%;
	height: auto;
	max-height: 400px;
	object-fit: contain;
	border-radius: 16px;
	}
	@media (max-width: 991px) {
	.feature-card { padding: 20px; }
	.store-row { justify-content: center; }
	.phone-frame img {
		max-height: 350px;
	}
	}

	/* FAQ styling */
	/* Category title */
	.faq-section {
	background: #0f0f12;
	}
	.faq-category {
	font-size: 22px;
	font-weight: 700;
	border-left: 4px solid #ac8e4b;
	padding-left: 12px;
	}

	/* Feature-card look on dark */
	.faq-card {
	background: #1e1e1e;
	color: #fff;
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 6px 22px rgba(0,0,0,0.25);
	}
	.faq-card .feature-header {
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px;
	font-weight: 600;
	color: #fff;
	transition: background .2s ease;
	}
	.faq-card .feature-header:hover { background: #212121; }

	.faq-card .feature-body {
	max-height: 0;
	overflow: hidden;
	transition: max-height .3s ease;
	}

	/* When opened via JS */
	.faq-card .feature-body.is-open {
	/* max-height is set inline by JS to the content height */
	}

	/* Arrow rotation */
	.faq-card .arrow {
	font-size: 18px;
	line-height: 1;
	transition: transform .3s ease;
	}
	/* Arrow rotation driven by .expanded class on header */
	.faq-card .feature-header.expanded .arrow {
	transform: rotate(180deg);
	}

	/* CTA under FAQ */
	.faq-cta {
	background: #0f0f12;
	padding: 28px 22px;
	color: #fff;
	}

	.faq-cta h4 {
	font-weight: 700;
	letter-spacing: .2px;
	margin: 0 0 10px;
	}

	.btn-faq-cta {
	display: inline-block;
	padding: 12px 22px;
	background: #ac8e4b;
	color: #0b0b0b !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .3px;
	transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
	}

	.btn-faq-cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 28px rgba(172,142,75,0.35);
	opacity: .95;
	}

	/* Image styling */
	.payment-img {
		width: 40px;
		height: 24px;
		object-fit: contain;
		filter: grayscale(20%);
		transition: filter 0.3s ease;
	}

	.payments-list li:hover .payment-img {
		filter: grayscale(0%);
	}



	/* Footer refresh with animation background */
	/* ===== Footer: Telegram (gold outline) ===== */
	.footer-eic {
	position: relative; /* Add this to the parent */
	}

	.footer-eic .btn-telegram-outline{
	display:inline-flex;align-items:center;gap:10px;
	padding:10px 22px;border-radius:30px;
	background:transparent;border:2px solid #ac8e4b;
	color:#ac8e4b!important;font-weight:700;
	transition:background .25s ease, box-shadow .25s ease, transform .15s ease;
	}
	.footer-eic .btn-telegram-outline:hover{
	background:#ac8e4b;color:#000!important;
	box-shadow:0 8px 20px rgba(172,142,75,.45);
	transform:translateY(-1px);
	}

	/* ===== Footer: Payment methods (Font Awesome icons) ===== */
	.footer-eic .payments-list{
	display:flex;flex-wrap:wrap;gap:14px 18px;
	list-style:none;margin:0;padding:0;justify-content:flex-end;
	}
	@media (max-width:991px){ .footer-eic .payments-list{ justify-content:flex-start; } }

	.footer-eic .payments-list li i{
	font-size:38px;           /* bigger by default */
	color:gray;            /* light grey */
	opacity:.95;
	transition:color .2s ease, opacity .2s ease, filter .2s ease;
	filter:drop-shadow(0 4px 10px rgba(0,0,0,.25));
	}
	.footer-eic .payments-list li i:hover{
	color:#ac8e4b;            /* gold on hover */
	opacity:1;                /* no scaling */
	}

	/* If you ever use image logos instead of <i>, keep them steady too */
	.footer-eic .payments-list li img{
	height: 46px;
	width: auto;
	opacity: .95;
	transition: opacity .2s ease, filter .2s ease;
	filter: grayscale(100%) drop-shadow(0 4px 10px rgba(0,0,0,.25));
	}

	.footer-eic .payments-list li img:hover{
	opacity: 1;
	filter: grayscale(0%) drop-shadow(0 6px 14px rgba(172,142,75,.55));
	}

	/* Keep the canvas animation layer behavior */
	.footer-eic{ background:transparent; color:#cfcfcf; position:relative; overflow:hidden; z-index:1; }
	.footer-eic #can{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
	.footer-eic .footer-main,.footer-eic .footer-bottom{ position:relative; z-index:1; }

	/* Minor bits */
	.footer-eic .payments-title{ display:inline-block; margin-bottom:10px; font-weight:700; color:#fff; }
	.footer-eic .footer-sep{ border-color:rgba(255,255,255,.08); margin:14px 0 20px; }
	.footer-eic .footer-links{ display:flex; flex-wrap:wrap; gap:12px 18px; padding:0; margin:0; list-style:none; }
	.footer-eic .footer-links a{ color:#cfcfcf; text-decoration:none; }
	.footer-eic .footer-links a:hover{ color:#ac8e4b; }
	.footer-eic .footer-copy{ color:#9a9a9a; }
	.footer-eic .back-to-top{
	background:#ac8e4b;border-radius:50%;width:42px;height:42px;
	display:flex;align-items:center;justify-content:center;
	position:absolute;right:22px;bottom:42px;z-index:2;
	}
	.footer-eic .back-to-top:hover{ opacity:.95; }

/* Layout - Enhanced for mobile */
#site-header .header-content-wrapper{
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  gap: 12px;
  min-height: 64px;
  position: relative;
  width: 100%;
}

/* Logo - Enhanced for mobile */
.site-logo{ 
  display: flex; 
  align-items: center; 
  min-width: 0; 
  flex-shrink: 0;
  z-index: 1001;
}
.site-logo img{
  display: block;
  width: auto;           /* keep aspect ratio */
  height: auto;
  max-height: 50px;      /* desktop/tablet */
  filter: brightness(0) invert(1); /* keep your white logo look */
  object-fit: contain;
}

/* Enhanced Gold Pre-Order Button with Existing Font */
#pre-order-button {
  --gold: #ac8e4b;
  --gold-light: #c8a35a;
  --gold-lighter: #d4b873;
  --gold-dark: #8c743c;
  --gold-darker: #6a572d;
  --text: #0b0b0b;
  --shadow: rgba(172, 142, 75, 0.25);
  --glow: rgba(172, 142, 75, 0.35);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 14px 32px;
  border-radius: 999px;
  background: 
    linear-gradient(135deg, 
      var(--gold) 0%, 
      var(--gold-light) 25%, 
      var(--gold-lighter) 50%, 
      var(--gold-light) 75%, 
      var(--gold) 100%);
  color: var(--text);
  border: 2px solid var(--gold-dark);
  /* Using existing font family from your theme */
  font-family: inherit;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.2px;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 
    0 8px 20px var(--shadow),
    0 2px 4px rgba(0, 0, 0, 0.1) inset;
  transition: 
    transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    filter 0.3s ease,
    background-position 0.6s ease,
    border-color 0.3s ease;
  background-size: 200% 200%;
  background-position: 0% 50%;
  isolation: isolate;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  z-index: 1001;
}

/* Hover State - Enhanced Effects */
#pre-order-button:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 
    0 16px 40px var(--glow),
    0 8px 20px rgba(0, 0, 0, 0.15),
    0 0 0 3px rgba(172, 142, 75, 0.2) inset;
  background-position: 100% 50%;
  filter: saturate(1.1) brightness(1.05);
  border-color: var(--gold-lighter);
}

/* Active/Pressed State */
#pre-order-button:active {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 
    0 8px 25px var(--shadow),
    0 0 0 2px rgba(172, 142, 75, 0.3) inset;
  transition-duration: 0.1s;
}

/* Focus State - Accessibility */
#pre-order-button:focus-visible {
  outline: none;
  box-shadow: 
    0 0 0 4px rgba(76, 111, 255, 0.5),
    0 12px 30px var(--glow),
    0 0 0 2px rgba(172, 142, 75, 0.3) inset;
}

/* Shine Sweep Effect */
#pre-order-button::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  transform: rotate(25deg);
  background: linear-gradient(
    90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.8) 50%, 
    transparent 100%
  );
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

#pre-order-button:hover::before {
  animation: shineSweep 1s cubic-bezier(0.215, 0.610, 0.355, 1) forwards;
}

/* Pulse Halo Effect */
#pre-order-button::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  box-shadow: 0 0 0 0 var(--glow);
  opacity: 0;
  pointer-events: none;
  animation: none;
}

#pre-order-button:hover::after {
  animation: pulseHalo 1.2s cubic-bezier(0.455, 0.030, 0.515, 0.955) forwards;
}

/* Particle Sparkles */
#pre-order-button .sparkle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

#pre-order-button:hover .sparkle {
  animation: sparklePop 0.6s ease-out forwards;
}

/* Sparkle positions */
.sparkle-1 { top: 20%; left: 15%; animation-delay: 0.1s; }
.sparkle-2 { top: 60%; left: 25%; animation-delay: 0.2s; }
.sparkle-3 { top: 30%; right: 20%; animation-delay: 0.3s; }
.sparkle-4 { bottom: 25%; right: 30%; animation-delay: 0.4s; }

/* Enhanced Keyframes */
@keyframes shineSweep {
  0% { 
    transform: translateX(-100%) rotate(25deg); 
    opacity: 0; 
  }
  20% { 
    opacity: 0.6; 
  }
  100% { 
    transform: translateX(400%) rotate(25deg); 
    opacity: 0; 
  }
}

@keyframes pulseHalo {
  0% { 
    box-shadow: 0 0 0 0 var(--glow); 
    opacity: 0.8; 
  }
  50% { 
    box-shadow: 0 0 0 12px rgba(172, 142, 75, 0.3); 
    opacity: 0.4; 
  }
  100% { 
    box-shadow: 0 0 0 20px rgba(172, 142, 75, 0); 
    opacity: 0; 
  }
}

@keyframes sparklePop {
  0% { 
    transform: scale(0) rotate(0deg); 
    opacity: 0; 
  }
  50% { 
    transform: scale(1.2) rotate(180deg); 
    opacity: 1; 
  }
  100% { 
    transform: scale(0) rotate(360deg); 
    opacity: 0; 
  }
}

/* Subtle background shimmer */
@keyframes backgroundShimmer {
  0% { background-position: -200% 50%; }
  100% { background-position: 200% 50%; }
}

#pre-order-button:hover {
  animation: backgroundShimmer 2s ease-in-out infinite;
}

/* Loading state for when processing order */
#pre-order-button.loading {
  pointer-events: none;
  opacity: 0.8;
}

#pre-order-button.loading::before {
  animation: none;
  opacity: 0.3;
}

/* Success state */
#pre-order-button.success {
  background: linear-gradient(135deg, #10b981 0%, #34d399 50%, #10b981 100%);
  border-color: #059669;
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
}

/* Mobile adjustments */
/* Comprehensive Mobile Header Fix */
@media (max-width: 460px) {
    #site-header {
        position: relative !important;
        height: auto !important;
        min-height: 70px !important;
    }
    
    .header-content-wrapper {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding: 0 10px !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
    }
    
    .site-logo {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: 100px !important;
        height: auto !important;
    }
    
    .site-logo img {
        max-height: 30px !important;
        width: auto !important;
    }
    
    #pre-order-button {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        padding: 8px 12px !important;
        font-size: 14px !important;
        min-width: max-content !important;
    }
    
    /* Prevent any absolute positioning issues */
    .site-logo,
    #pre-order-button {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
    }
}

/* Very small devices */
@media (max-width: 360px){
  #site-header .header-content-wrapper {
    min-height: 52px;
    gap: 6px;
    padding: 0 8px;
  }
  .site-logo img{ 
    max-height: 32px; 
  }
  #pre-order-button{ 
    padding: 8px 16px; 
    font-size: 13px; 
    min-height: 40px;
  }
}

/* Mobile optimizations */
@media (max-width: 768px) {
  #pre-order-button {
    padding: 12px 24px;
    font-size: 0.95rem;
    min-height: 44px; /* Better touch target */
  }
  
  #pre-order-button:hover {
    transform: translateY(-2px) scale(1.02);
  }
}

/* Fix for mobile browser specific issues */
@supports (-webkit-touch-callout: none) {
  /* iOS Safari specific fixes */
  #site-header .header-content-wrapper {
    -webkit-align-items: center;
    align-items: center;
  }
  
  .site-logo img {
    -webkit-user-select: none;
    user-select: none;
  }
  
  #pre-order-button {
    -webkit-tap-highlight-color: transparent;
  }
}

/* Ensure proper touch targets on mobile */
@media (max-width: 768px) {
  .site-logo,
  #pre-order-button {
    min-height: 44px; /* Minimum touch target size */
    display: flex;
    align-items: center;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #pre-order-button { 
    transition: opacity 0.3s ease, background-color 0.3s ease; 
  }
  #pre-order-button:hover { 
    transform: none; 
    animation: none;
  }
  #pre-order-button::before,
  #pre-order-button::after,
  #pre-order-button .sparkle { 
    animation: none !important; 
    display: none;
  }
}

/* Link styles - unchanged */
.link-regis{
  color: inherit;
  text-decoration: none;
  text-underline-offset: 2px;
  transition: color .2s ease;
}
.link-regis:hover{
  color: #ac8e4b;
  text-decoration: none;
}

/* Preloader styles - unchanged */
#hellopreloader{
  background: #0f1116;            /* Dark backdrop */
  opacity: 1;
  visibility: visible;
  transition: opacity .45s ease .2s, visibility .45s ease .2s;
}

.preloader-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0f1116;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.45s ease 0.2s, visibility 0.45s ease 0.2s;
}

.preloader-container.is-loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader {
  text-align: center;
}

.preloader svg {
  width: clamp(120px, 30vw, 180px);
  height: auto;
  display: block;
  margin: 0 auto 1rem;
}

.preloader rect {
  fill: #ac8e4b;
  /* filter: drop-shadow(0 3px 10px rgba(172, 142, 75, 0.35)); */
}

.loading-text {
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ac8e4b;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  opacity: 0.95;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .preloader svg {
    display: none;
  }
  
  .loading-text {
    animation: none !important;
  }
  
  .preloader rect {
    animation: none !important;
  }
}

/* Video styles - unchanged */
.video-container {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.video-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.video-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.video-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 75%; /* 4:3 aspect ratio */
  overflow: hidden;
}

.video-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent 70%, rgba(0, 0, 0, 0.3));
  pointer-events: none;
}

.video-caption {
  padding: 20px;
  text-align: center;
  background: rgba(255, 255, 255, 0.03);
}

.video-caption p {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #ac8e4b;
  line-height: 1.5;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .video-caption {
    padding: 15px;
  }
  
  .video-caption p {
    font-size: 14px;
  }
}

/* Modal Styles - unchanged */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  animation: fadeIn 0.3s;
}

.modal-content {
  background-color: #fff;
  margin: 10% auto;
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  animation: slideIn 0.3s;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #eee;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.5rem;
  color: #333;
}

.close {
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.2s;
}

.close:hover {
  color: #333;
}

.modal-body {
  padding: 24px;
}

/* Payment Options - unchanged */
.payment-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.payment-option {
  display: flex;
  align-items: center;
  padding: 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  background: #fff;
}

.payment-option:hover {
  border-color: #ac8e4b;
  background-color: #f8f9ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(172, 142, 75, 0.1);
}

.payment-icon {
  margin-right: 16px;
  color: #ac8e4b;
  display: flex;
  align-items: center;
  justify-content: center;
}

.payment-info {
  flex: 1;
}

.payment-info h3 {
  margin: 0 0 4px 0;
  font-size: 1.1rem;
  color: #333;
}

.payment-info p {
  margin: 0;
  font-size: 0.9rem;
  color: #666;
}

.payment-arrow {
  color: #999;
  transition: color 0.2s;
}

.payment-option:hover .payment-arrow {
  color: #ac8e4b;
}

/* Animations - unchanged */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from { transform: translateY(-50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}