/*
Theme Name: Twenty Twenty-Five
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Five emphasizes simplicity and adaptability, customized for Hex DMA.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 1.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/* ========== WP BASE ========== */
a { text-decoration-thickness: 1px !important; text-underline-offset: .1em; }
:where(.wp-site-blocks *:focus) { outline-width: 2px; outline-style: solid; }
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) { margin-bottom: 3px; }
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content { outline-offset: 4px; }
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content { outline-offset: 0; }
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p { text-wrap: pretty; }
.more-link { display: block; }
:where(pre) { overflow-x: auto; }

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* ===========================================================
   ANIMATED BACKGROUND
   =========================================================== */
.bg-orbs {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}
.bg-orbs .orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(120px);
	opacity: 0.55;
	will-change: transform;
}
.bg-orbs .orb--blue {
	width: 620px; height: 620px;
	background: #009eff;
	top: -180px; left: -160px;
	animation: orb-drift-a 22s ease-in-out infinite alternate;
}
.bg-orbs .orb--pink {
	width: 520px; height: 520px;
	background: #e6005c;
	bottom: -160px; right: -120px;
	opacity: 0.32;
	animation: orb-drift-b 26s ease-in-out infinite alternate;
}
.bg-orbs .orb--violet {
	width: 460px; height: 460px;
	background: #6e3bff;
	top: 40%; left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0.22;
	animation: orb-drift-c 32s ease-in-out infinite alternate;
}
.bg-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 0%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 0%, transparent 75%);
}

@keyframes orb-drift-a {
	0%   { transform: translate(0, 0) scale(1); }
	100% { transform: translate(180px, 120px) scale(1.15); }
}
@keyframes orb-drift-b {
	0%   { transform: translate(0, 0) scale(1); }
	100% { transform: translate(-160px, -100px) scale(1.1); }
}
@keyframes orb-drift-c {
	0%   { transform: translate(-50%, -50%) scale(1); }
	100% { transform: translate(-30%, -65%) scale(1.2); }
}

/* Move the bg layer to a negative z-index so all content naturally sits
   above it without needing forced z-indexing — that way the fixed nav
   wins the stacking war cleanly. Body must be transparent so the orbs
   show through; the dark base color goes on html. */
html { background-color: #050505 !important; }
body { background-color: transparent !important; }
.bg-orbs { z-index: -1 !important; }

/* ===========================================================
   STICKY NAV (shrinks on scroll)
   =========================================================== */
/* Top of page: transparent, full-width spread (caruso-style) */
.site-nav,
.site-nav.alignfull {
	position: fixed !important;
	top: 16px !important;
	left: 50% !important;
	right: auto !important;
	bottom: auto !important;
	transform: translateX(-50%) !important;
	width: calc(100% - 40px) !important;
	max-width: 1320px !important;
	margin: 0 !important;
	padding: 14px 28px !important;
	background: transparent !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	border: 1px solid transparent !important;
	border-radius: 100px !important;
	box-shadow: none !important;
	z-index: 999999 !important;
	transform: translateX(-50%) !important;
	pointer-events: auto !important;
	transition: top 0.4s cubic-bezier(.4,0,.2,1),
				padding 0.4s cubic-bezier(.4,0,.2,1),
				width 0.4s cubic-bezier(.4,0,.2,1),
				max-width 0.4s cubic-bezier(.4,0,.2,1),
				background 0.35s ease,
				border-color 0.35s ease,
				box-shadow 0.4s ease,
				backdrop-filter 0.35s ease !important;
}

/* Scrolled: glass pill — translucent dark with heavy blur so anything
   behind it appears blurred (caruso-style). */
.site-nav.is-scrolled {
	top: 12px !important;
	width: calc(100% - 40px) !important;
	max-width: 1080px !important;
	padding: 8px 18px !important;
	background: rgba(10, 10, 12, 0.6) !important;
	backdrop-filter: blur(32px) saturate(180%) !important;
	-webkit-backdrop-filter: blur(32px) saturate(180%) !important;
	border-color: rgba(255, 255, 255, 0.08) !important;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55) !important;
}
/* Subtle inner highlight for that polished glass look. */
.site-nav.is-scrolled::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent 40%);
	pointer-events: none;
}

.site-nav .wp-block-site-title {
	font-size: 0.95rem !important;
	transition: font-size 0.3s ease;
}
.site-nav .wp-block-site-title a {
	text-decoration: none !important;
	color: #fff !important;
}
.site-nav .wp-block-site-logo img {
	transition: max-width 0.3s ease, height 0.3s ease;
	border-radius: 8px;
}
.site-nav.is-scrolled .wp-block-site-logo img {
	max-width: 26px;
	height: auto;
}

/* Brand text "HexDMA" — replaces the WordPress site-title so the user
   doesn't have to rename the site in Settings. */
.site-nav__brandname {
	margin: 0 !important;
	color: #fff !important;
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	letter-spacing: -0.5px !important;
	line-height: 1 !important;
	transition: font-size 0.3s ease;
}
.site-nav.is-scrolled .site-nav__brandname {
	font-size: 0.95rem !important;
}

/* Absolute-centered menu so the nav links sit on the page's vertical
   axis (centered with the hero heading), not just centered between the
   brand and login button. */
.site-nav__menu {
	position: absolute !important;
	left: 50% !important;
	top: 50% !important;
	transform: translate(-50%, -50%) !important;
	margin: 0 !important;
}
@media (max-width: 880px) {
	.site-nav__menu {
		position: static !important;
		transform: none !important;
		display: none !important;
	}
}

/* Push body content below the fixed nav */
.wp-site-blocks > *:not(.bg-orbs):not(.site-nav):first-of-type { margin-top: 0; }

/* Nav menu links */
.site-nav__menu .wp-block-navigation__container,
.site-nav__menu ul {
	gap: 4px !important;
	align-items: center !important;
}
.site-nav__menu .wp-block-navigation-item { position: relative; }

.site-nav__menu .wp-block-navigation-item__content,
.site-nav__menu a.wp-block-navigation-item__content {
	color: rgba(255, 255, 255, 0.82) !important;
	font-size: 0.85rem !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	letter-spacing: 0.2px !important;
	text-transform: none !important;
	padding: 8px 16px !important;
	border-radius: 8px !important;
	display: inline-block !important;
	line-height: 1.2 !important;
	pointer-events: auto !important;
	cursor: pointer !important;
	transition: color 0.2s ease, background 0.25s ease !important;
}
/* Ensure all interactive children of the nav respond to clicks. */
.site-nav a,
.site-nav button,
.site-nav .wp-block-button__link,
.site-nav .wp-block-social-link a {
	pointer-events: auto !important;
	position: relative;
	z-index: 1;
}
.site-nav__menu .wp-block-navigation-item__content:hover,
.site-nav__menu a.wp-block-navigation-item__content:hover {
	color: #fff !important;
	background: rgba(255, 255, 255, 0.07) !important;
}
.site-nav__menu .wp-block-navigation-item__content:focus {
	outline: none !important;
}

/* Login button */
.login-btn .wp-block-button__link {
	background: linear-gradient(135deg, #009eff, #0070dd) !important;
	border: none !important;
	color: #fff !important;
	font-size: 0.82rem !important;
	font-weight: 600 !important;
	padding: 0.5rem 1.15rem !important;
	box-shadow: 0 4px 18px rgba(0, 158, 255, 0.35), inset 0 1px 0 rgba(255,255,255,0.18) !important;
	transition: transform 0.2s ease, box-shadow 0.25s ease !important;
}
.login-btn .wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 24px rgba(0, 158, 255, 0.55), inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

/* Social icons in nav */
.site-nav__socials .wp-block-social-link {
	transition: transform 0.2s ease;
}
.site-nav__socials .wp-block-social-link:hover {
	transform: translateY(-1px);
}

/* Hide nav menu on mobile (existing overlay handles it) */
@media (max-width: 880px) {
	.site-nav__menu { display: none !important; }
}

/* ===========================================================
   HERO
   =========================================================== */
.hero {
	min-height: 90vh;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	position: relative;
}

.hero__pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.3px;
	color: rgba(255, 255, 255, 0.7);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 100px;
	padding: 6px 14px;
	margin: 0 auto 28px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.hero__pill-dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: #00ff88;
	box-shadow: 0 0 10px #00ff88;
	animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.5; transform: scale(0.85); }
}

.hero__title {
	font-size: clamp(2.8rem, 8vw, 6.5rem) !important;
	font-weight: 800 !important;
	letter-spacing: -3px !important;
	line-height: 0.98 !important;
	margin: 0 0 24px !important;
	color: #fff !important;
	/* Don't let this huge heading's bounding box swallow clicks meant for
	   the floating nav above it. Re-enable on the visible text itself. */
	pointer-events: none;
}
.hero__title-grad,
.hero__title strong {
	pointer-events: auto;
}
.hero__title-grad {
	background: linear-gradient(135deg, #009eff 0%, #6e3bff 50%, #e6005c 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	background-size: 200% 200%;
	animation: grad-shift 8s ease-in-out infinite;
	display: inline-block;
}
@keyframes grad-shift {
	0%, 100% { background-position: 0% 50%; }
	50%      { background-position: 100% 50%; }
}

.hero__subtitle {
	font-size: clamp(1rem, 1.6vw, 1.15rem) !important;
	color: rgba(255, 255, 255, 0.55) !important;
	max-width: 560px;
	margin: 0 auto 40px !important;
	line-height: 1.7 !important;
}

.hero__ctas { gap: 14px !important; }

.btn-primary .wp-block-button__link {
	background: linear-gradient(135deg, #009eff 0%, #0070dd 100%) !important;
	border: none !important;
	color: #fff !important;
	font-weight: 600 !important;
	font-size: 0.95rem !important;
	padding: 0.95rem 2.2rem !important;
	box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 8px 32px rgba(0, 158, 255, 0.4) !important;
	transition: transform 0.25s ease, box-shadow 0.3s ease !important;
}
.btn-primary .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset, 0 12px 48px rgba(0, 158, 255, 0.6) !important;
}

.btn-ghost .wp-block-button__link {
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	color: rgba(255, 255, 255, 0.85) !important;
	font-weight: 600 !important;
	font-size: 0.95rem !important;
	padding: 0.95rem 2.2rem !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: all 0.25s ease !important;
}
.btn-ghost .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.08) !important;
	border-color: rgba(255, 255, 255, 0.25) !important;
	transform: translateY(-2px);
}

.hero__trust {
	display: flex;
	gap: 28px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 56px;
}
.hero__trust span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.82rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.4);
}
.hero__trust svg { color: #009eff; }

/* ===========================================================
   MARQUEE
   =========================================================== */
.marquee-section {
	border-top: 1px solid rgba(255, 255, 255, 0.05);
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	background: rgba(5, 5, 7, 0.4);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	overflow: hidden;
}
.marquee-label {
	font-size: 0.65rem !important;
	text-transform: uppercase;
	letter-spacing: 4px;
	color: rgba(255, 255, 255, 0.3);
	text-align: center;
	margin: 0 0 18px !important;
	font-weight: 600;
}
.marquee {
	overflow: hidden;
	mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
	-webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.marquee__track {
	display: flex;
	gap: 0;
	animation: marquee-scroll 35s linear infinite;
	width: max-content;
}
.marquee__track span {
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 3px;
	color: rgba(255, 255, 255, 0.22);
	white-space: nowrap;
	padding: 0 48px;
	position: relative;
	transition: color 0.4s;
}
.marquee__track span::after {
	content: '✕';
	position: absolute;
	right: -8px; top: 50%;
	transform: translateY(-50%);
	color: rgba(230, 0, 92, 0.45);
	font-size: 0.7rem;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee:hover .marquee__track span { color: rgba(255, 255, 255, 0.35); }
@keyframes marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ===========================================================
   SECTIONS
   =========================================================== */
.section { position: relative; }

.section__head {
	max-width: 640px;
	margin: 0 auto 64px;
	text-align: center;
}
.section__eyebrow {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: #009eff;
	margin-bottom: 16px;
}
.section__title {
	font-size: clamp(2rem, 5vw, 3.5rem) !important;
	font-weight: 800 !important;
	letter-spacing: -1.5px !important;
	line-height: 1.05 !important;
	margin: 0 0 18px !important;
	color: #fff !important;
}
.section__sub {
	font-size: 1rem !important;
	color: rgba(255, 255, 255, 0.5) !important;
	line-height: 1.7 !important;
	margin: 0 !important;
}
.text-grad {
	background: linear-gradient(135deg, #009eff, #6e3bff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Offset anchor scroll targets so the fixed nav pill doesn't cover
   the heading when "Get Started" jumps to #products. */
#products,
.section--products {
	scroll-margin-top: 90px;
}

/* ===========================================================
   PRODUCT CARDS (caruso-style)
   =========================================================== */
.product-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	max-width: 880px;
	margin: 0 auto;
}
@media (max-width: 768px) {
	.product-grid { grid-template-columns: 1fr; max-width: 440px; }
}

.product-card {
	position: relative;
	padding: 40px 36px 36px;
	border-radius: 20px;
	background:
		radial-gradient(ellipse 100% 80% at 50% 0%, rgba(0, 158, 255, 0.10) 0%, transparent 70%),
		linear-gradient(180deg, rgba(20, 22, 28, 0.85) 0%, rgba(12, 13, 17, 0.85) 100%);
	border: 1px solid rgba(255, 255, 255, 0.07);
	overflow: hidden;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	transition: transform 0.4s cubic-bezier(.2,.8,.2,1),
				border-color 0.3s ease,
				box-shadow 0.4s ease;
}
.product-card:hover {
	transform: translateY(-6px);
	border-color: rgba(0, 158, 255, 0.28);
	box-shadow: 0 20px 60px rgba(0, 158, 255, 0.18);
}

/* Soft glow that intensifies on hover */
.product-card__glow {
	position: absolute;
	top: -120px;
	left: 50%;
	transform: translateX(-50%);
	width: 360px;
	height: 240px;
	background: radial-gradient(ellipse, rgba(0, 158, 255, 0.18) 0%, transparent 65%);
	pointer-events: none;
	opacity: 0.7;
	transition: opacity 0.4s ease;
}
.product-card:hover .product-card__glow {
	opacity: 1;
}

.product-card__badge {
	display: inline-block;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #009eff;
	background: rgba(0, 158, 255, 0.1);
	border: 1px solid rgba(0, 158, 255, 0.3);
	padding: 4px 10px;
	border-radius: 100px;
	margin-bottom: 14px;
}
/* Neutral badge variant for the second card so its top section matches
   the first card's height (keeps badge → title → sub spacing identical). */
.product-card__badge--ghost {
	color: rgba(255, 255, 255, 0.55);
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.12);
}

.product-card__top {
	position: relative;
	z-index: 1;
	margin-bottom: 28px;
}

.product-card__title {
	font-size: 1.5rem;
	font-weight: 800;
	color: #fff;
	letter-spacing: -0.5px;
	margin: 0 0 6px;
}

.product-card__sub {
	font-size: 0.88rem;
	color: rgba(255, 255, 255, 0.5);
	margin: 0;
	line-height: 1.5;
}

.product-card__price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-bottom: 24px;
	position: relative;
	z-index: 1;
}
.product-card__price-value {
	font-size: 3rem;
	font-weight: 800;
	color: #fff;
	letter-spacing: -2px;
	line-height: 1;
	background: linear-gradient(135deg, #fff 0%, rgba(0, 158, 255, 0.85) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.product-card__price-unit {
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.45);
	font-weight: 500;
}
.product-card__price-prefix {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.45);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1px;
	align-self: center;
}

/* Three-tier strip under the price (Day / Week / Month) */
.product-card__tiers {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: -10px 0 22px;
}
.product-card__tiers span {
	flex: 1 1 0;
	min-width: 0;
	padding: 8px 6px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 8px;
	font-size: 0.7rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.55);
	text-align: center;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.product-card__tiers strong {
	color: #fff;
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: -0.3px;
	text-transform: none;
}

.product-card__features {
	list-style: none;
	padding: 0;
	margin: 0 0 28px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	position: relative;
	z-index: 1;
}
.product-card__features li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.7);
}
.product-card__features svg {
	color: #009eff;
	flex-shrink: 0;
}

.product-card__btn {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	background: linear-gradient(135deg, #009eff 0%, #0070dd 100%);
	color: #fff !important;
	font-weight: 700;
	font-size: 0.95rem;
	padding: 0.95rem 1.5rem;
	border-radius: 10px;
	text-decoration: none !important;
	box-shadow: 0 8px 28px rgba(0, 158, 255, 0.32);
	transition: transform 0.25s ease, box-shadow 0.3s ease;
	position: relative;
	z-index: 1;
	margin-top: auto; /* push button to bottom so both cards align */
}
.product-card__btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 40px rgba(0, 158, 255, 0.5);
}

/* ===========================================================
   PRODUCT DETAIL PAGE  (e.g. /r6-dma, /tarkov)
   =========================================================== */
.product-page { max-width: 1200px; margin: 0 auto; }

.product-detail {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 56px;
	align-items: start;
	max-width: 1200px;
	margin: 0 auto;
}
@media (max-width: 880px) {
	.product-detail { grid-template-columns: 1fr; gap: 32px; }
}

/* Image / placeholder slot */
.product-detail__media {
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.07);
	background:
		repeating-linear-gradient(45deg, rgba(255,255,255,0.015) 0 12px, transparent 12px 24px),
		linear-gradient(180deg, rgba(20, 22, 28, 0.85), rgba(12, 13, 17, 0.85));
	aspect-ratio: 16 / 10;
	display: flex;
	align-items: center;
	justify-content: center;
}
.product-detail__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	color: rgba(255, 255, 255, 0.25);
	font-size: 0.85rem;
	letter-spacing: 0.5px;
}
.product-detail__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Price prefix ("From") on product detail pages */
.product-detail__price-prefix {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.5);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1px;
	align-self: center;
	margin-right: 4px;
}
.product-detail__price-hint {
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.4);
	margin: -8px 0 0;
	letter-spacing: 0.3px;
}

/* ===========================================================
   CAROUSEL (product image gallery with auto-advance)
   =========================================================== */
.carousel {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 18px;
	overflow: hidden;
	background: #0a0a0c;
}

.carousel__track {
	position: relative;
	width: 100%;
	height: 100%;
}

.carousel__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s cubic-bezier(.4,0,.2,1);
	display: flex;
	align-items: center;
	justify-content: center;
	background: #0a0a0c;
}
.carousel__slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 1;
}
.carousel__slide img,
.carousel__slide video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Video gets a black letterbox feel — show the whole frame */
.carousel__slide[data-type="video"] video {
	object-fit: contain;
	background: #000;
}

/* Background-image slides: paths resolve relative to style.css, so they
   work no matter what folder the theme is installed under. */
.carousel__slide--bg {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.carousel__slide--r6-1 {
	background-image: url('assets/images/products/r6-1.jpg');
}
.carousel__slide--r6-2 {
	background-image: url('assets/images/products/r6-2.jpg');
}
.carousel__slide--tarkov-1 {
	background-image: url('assets/images/products/tarkov-1.jpg');
}
.carousel__slide--tarkov-2 {
	background-image: url('assets/images/products/tarkov-2.jpg');
}
.carousel__slide--tarkov-3 {
	background-image: url('assets/images/products/tarkov-3.jpg');
}
.carousel__slide--tarkov-4 {
	background-image: url('assets/images/products/tarkov-4.jpg');
}

/* Nav arrows */
.carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 40px; height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease, opacity 0.3s ease;
	opacity: 0;
}
.carousel:hover .carousel__arrow,
.carousel:focus-within .carousel__arrow {
	opacity: 1;
}
.carousel__arrow:hover {
	background: rgba(0, 158, 255, 0.4);
	border-color: rgba(0, 158, 255, 0.5);
}
.carousel__arrow--prev { left: 14px; }
.carousel__arrow--next { right: 14px; }
.carousel__arrow:active { transform: translateY(-50%) scale(0.94); }

/* Dot indicators */
.carousel__dots {
	position: absolute;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	display: flex;
	gap: 8px;
	padding: 8px 12px;
	background: rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: 100px;
}
.carousel__dot {
	width: 8px; height: 8px;
	border: none;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	cursor: pointer;
	padding: 0;
	transition: background 0.25s ease, width 0.3s ease;
	position: relative;
	overflow: hidden;
}
.carousel__dot.is-active {
	background: #009eff;
	width: 28px;
	border-radius: 100px;
}
.carousel__dot::after {
	content: '';
	position: absolute;
	left: 0; top: 0;
	width: 0; height: 100%;
	background: rgba(255, 255, 255, 0.55);
	transition: none;
}
.carousel__dot.is-active.is-progressing::after {
	animation: carousel-progress var(--carousel-duration, 5s) linear forwards;
}
@keyframes carousel-progress {
	from { width: 0; }
	to   { width: 100%; }
}

/* Hide dot progress when paused (e.g. while video is playing) */
.carousel.is-paused .carousel__dot.is-active::after {
	animation-play-state: paused !important;
	background: transparent;
}

@media (max-width: 480px) {
	.carousel__arrow { width: 34px; height: 34px; }
	.carousel__arrow--prev { left: 8px; }
	.carousel__arrow--next { right: 8px; }
}

.product-detail__info {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.product-detail__status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: fit-content;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #22c55e;
	background: rgba(34, 197, 94, 0.1);
	border: 1px solid rgba(34, 197, 94, 0.3);
	padding: 5px 12px;
	border-radius: 100px;
}

.product-detail__title {
	font-size: clamp(1.8rem, 4vw, 2.6rem) !important;
	font-weight: 800 !important;
	letter-spacing: -1px !important;
	line-height: 1.1 !important;
	color: #fff !important;
	margin: 4px 0 0 !important;
}

.product-detail__lead {
	font-size: 1rem;
	color: rgba(255, 255, 255, 0.55);
	line-height: 1.7;
	margin: 0;
	max-width: 540px;
}

.product-detail__price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin: 4px 0;
}
.product-detail__price-value {
	font-size: 2.4rem;
	font-weight: 800;
	letter-spacing: -1.5px;
	background: linear-gradient(135deg, #fff 0%, rgba(0, 158, 255, 0.85) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.product-detail__price-unit {
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.45);
	font-weight: 500;
}

.product-detail__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: fit-content;
	min-width: 220px;
	background: linear-gradient(135deg, #009eff 0%, #0070dd 100%);
	color: #fff !important;
	font-weight: 700;
	font-size: 0.95rem;
	padding: 0.95rem 1.8rem;
	border-radius: 12px;
	text-decoration: none !important;
	box-shadow: 0 8px 28px rgba(0, 158, 255, 0.32);
	transition: transform 0.25s ease, box-shadow 0.3s ease;
	margin-top: 8px;
}
.product-detail__btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 40px rgba(0, 158, 255, 0.5);
}

/* Disabled "Coming Soon" variant */
.product-detail__btn--soon,
.product-detail__btn[disabled] {
	background: rgba(255, 255, 255, 0.05) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	color: rgba(255, 255, 255, 0.55) !important;
	box-shadow: none !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
}
.product-detail__btn--soon:hover,
.product-detail__btn[disabled]:hover {
	transform: none !important;
	box-shadow: none !important;
}

/* "In Development" status badge variant (replaces the green Operational pill) */
.product-detail__status--dev {
	color: #f59e0b !important;
	background: rgba(245, 158, 11, 0.1) !important;
	border-color: rgba(245, 158, 11, 0.3) !important;
}

/* ----- Details block ----- */
.section--details { max-width: 1200px; margin: 0 auto; }

.detail-block {
	max-width: 880px;
	margin: 0 auto;
}
.detail-block__title {
	font-size: 1.5rem;
	font-weight: 800;
	color: #fff;
	letter-spacing: -0.5px;
	margin: 0 0 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.detail-block__notice {
	display: inline-block;
	background: rgba(0, 158, 255, 0.08);
	border-left: 3px solid #009eff;
	color: rgba(255, 255, 255, 0.85);
	padding: 12px 16px;
	border-radius: 6px;
	font-size: 0.92rem;
	font-weight: 600;
	margin-bottom: 22px;
}
.detail-block__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.detail-block__list li {
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.65);
	line-height: 1.7;
	padding-left: 22px;
	position: relative;
}
.detail-block__list li::before {
	content: '';
	position: absolute;
	left: 0; top: 0.7em;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: #009eff;
	box-shadow: 0 0 12px rgba(0, 158, 255, 0.6);
}
.detail-block__list strong { color: #fff; font-weight: 600; }

/* ----- Features section ----- */
.section--feature-list { max-width: 1200px; margin: 0 auto; }

.feature-list { max-width: 1100px; margin: 0 auto; }
.feature-list__title {
	font-size: 1.5rem;
	font-weight: 800;
	color: #fff;
	letter-spacing: -0.5px;
	margin: 0 0 28px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.feature-list__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px;
}

.feature-group {
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 14px;
	padding: 24px;
	transition: border-color 0.3s ease, background 0.3s ease;
}
.feature-group:hover {
	border-color: rgba(0, 158, 255, 0.22);
	background: rgba(0, 158, 255, 0.03);
}
.feature-group h3 {
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
	letter-spacing: -0.2px;
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.feature-group ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.feature-group li {
	font-size: 0.88rem;
	color: rgba(255, 255, 255, 0.6);
	line-height: 1.55;
	padding-left: 18px;
	position: relative;
}
.feature-group li::before {
	content: '';
	position: absolute;
	left: 0; top: 0.55em;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: rgba(0, 158, 255, 0.55);
}
.feature-group li strong {
	color: rgba(255, 255, 255, 0.92);
	font-weight: 600;
}

.feature-list__notes {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	font-size: 0.88rem;
	color: rgba(255, 255, 255, 0.55);
	line-height: 1.7;
}
.feature-list__notes p { margin: 0 0 4px; }
.feature-list__notes strong { color: #fff; font-weight: 600; }

/* Trust row below the cards */
.product-trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 32px;
	margin-top: 48px;
}
.product-trust span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.85rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.55);
}

/* ===========================================================
   PRODUCT CARDS
   =========================================================== */
.section--products .wp-block-woocommerce-product-collection .wc-block-product-template,
.section--products .wp-block-woocommerce-product-collection .products-block-post-template {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 22px !important;
}
@media (max-width: 1024px) {
	.section--products .wp-block-woocommerce-product-collection .wc-block-product-template,
	.section--products .wp-block-woocommerce-product-collection .products-block-post-template {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
@media (max-width: 640px) {
	.section--products .wp-block-woocommerce-product-collection .wc-block-product-template,
	.section--products .wp-block-woocommerce-product-collection .products-block-post-template {
		grid-template-columns: 1fr !important;
	}
}

.section--products .wp-block-woocommerce-product-collection li.product,
.section--products .wp-block-woocommerce-product-collection .wc-block-product {
	background: rgba(255, 255, 255, 0.025) !important;
	border: 1px solid rgba(255, 255, 255, 0.06) !important;
	border-radius: 16px !important;
	padding: 28px 24px !important;
	list-style: none !important;
	transition: transform 0.4s cubic-bezier(.2,.8,.2,1),
				border-color 0.3s ease,
				background 0.3s ease,
				box-shadow 0.4s ease !important;
}
.section--products .wp-block-woocommerce-product-collection li.product:hover,
.section--products .wp-block-woocommerce-product-collection .wc-block-product:hover {
	transform: translateY(-6px);
	border-color: rgba(0, 158, 255, 0.3) !important;
	background: rgba(0, 158, 255, 0.04) !important;
	box-shadow: 0 16px 56px rgba(0, 158, 255, 0.14) !important;
}

/* Add-to-cart buttons inside products */
.action-button .wp-block-button__link,
.section--products .wp-block-button .wp-block-button__link,
.section--products .wp-element-button {
	background: linear-gradient(135deg, #009eff 0%, #0070dd 100%) !important;
	border: none !important;
	color: #fff !important;
	font-weight: 600 !important;
	border-radius: 8px !important;
	padding: 0.7rem 1.4rem !important;
	box-shadow: 0 4px 20px rgba(0, 158, 255, 0.28) !important;
	transition: transform 0.2s ease, box-shadow 0.3s ease !important;
}
.action-button .wp-block-button__link:hover,
.section--products .wp-block-button .wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 30px rgba(0, 158, 255, 0.5) !important;
}

/* ===========================================================
   FEATURES
   =========================================================== */
.features-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	max-width: 1080px;
	margin: 0 auto;
}
@media (max-width: 1024px) {
	.features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.features-grid { grid-template-columns: 1fr; }
}

.feature-card {
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 16px;
	padding: 32px 28px;
	position: relative;
	overflow: hidden;
	transition: transform 0.4s cubic-bezier(.2,.8,.2,1),
				border-color 0.3s ease,
				background 0.3s ease,
				box-shadow 0.4s ease;
}
.feature-card::before {
	content: '';
	position: absolute;
	inset: -1px;
	border-radius: 16px;
	padding: 1px;
	background: linear-gradient(135deg, rgba(0, 158, 255, 0.5), transparent 50%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}
.feature-card:hover {
	transform: translateY(-6px);
	background: rgba(0, 158, 255, 0.04);
	border-color: rgba(0, 158, 255, 0.2);
	box-shadow: 0 16px 56px rgba(0, 158, 255, 0.14);
}
.feature-card:hover::before { opacity: 1; }

.feature-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	border-radius: 11px;
	background: rgba(0, 158, 255, 0.1);
	border: 1px solid rgba(0, 158, 255, 0.22);
	color: #009eff;
	margin-bottom: 18px;
	transition: transform 0.3s ease;
}
.feature-card:hover .feature-card__icon {
	transform: scale(1.08) rotate(-3deg);
}
.feature-card h3 {
	font-size: 1.05rem;
	font-weight: 700;
	color: #fff;
	margin: 0 0 8px;
	letter-spacing: -0.3px;
}
.feature-card p {
	font-size: 0.88rem;
	color: rgba(255, 255, 255, 0.5);
	line-height: 1.7;
	margin: 0;
}

/* ===========================================================
   DISCORD CTA
   =========================================================== */
.discord-card {
	max-width: 720px;
	margin: 0 auto;
	padding: 64px 48px;
	border-radius: 24px;
	background:
		linear-gradient(135deg, rgba(88, 101, 242, 0.18) 0%, rgba(0, 158, 255, 0.08) 100%),
		rgba(15, 15, 18, 0.6);
	border: 1px solid rgba(88, 101, 242, 0.28);
	text-align: center;
	position: relative;
	overflow: hidden;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.discord-card__glow {
	position: absolute;
	top: -120px; left: 50%;
	transform: translateX(-50%);
	width: 360px; height: 360px;
	background: radial-gradient(circle, rgba(88, 101, 242, 0.35) 0%, transparent 65%);
	pointer-events: none;
	animation: glow-pulse 6s ease-in-out infinite;
}
@keyframes glow-pulse {
	0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
	50%      { opacity: 1; transform: translateX(-50%) scale(1.1); }
}
.discord-card__logo {
	margin: 0 auto 18px;
	display: block;
	position: relative;
	z-index: 1;
}
.discord-card h3 {
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	font-weight: 800;
	color: #fff;
	margin: 0 0 12px;
	letter-spacing: -0.5px;
	position: relative;
	z-index: 1;
}
.discord-card p {
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.6);
	max-width: 460px;
	margin: 0 auto 28px;
	line-height: 1.7;
	position: relative;
	z-index: 1;
}
.discord-card__btn {
	display: inline-block;
	background: #5865F2;
	color: #fff !important;
	font-weight: 600;
	font-size: 0.95rem;
	padding: 0.85rem 2rem;
	border-radius: 10px;
	text-decoration: none !important;
	box-shadow: 0 8px 28px rgba(88, 101, 242, 0.45);
	transition: transform 0.25s ease, box-shadow 0.3s ease;
	position: relative;
	z-index: 1;
}
.discord-card__btn:hover {
	background: #4752c4;
	transform: translateY(-2px);
	box-shadow: 0 12px 42px rgba(88, 101, 242, 0.6);
}

/* ===========================================================
   BUY MODAL (duration + payment method picker)
   =========================================================== */
.buy-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.buy-modal.is-open {
	display: flex;
	animation: buy-modal-fade 0.25s ease both;
}
@keyframes buy-modal-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.buy-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.buy-modal__card {
	position: relative;
	width: 100%;
	max-width: 880px;
	background:
		radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 158, 255, 0.10) 0%, transparent 70%),
		linear-gradient(180deg, rgba(20, 22, 28, 0.96) 0%, rgba(12, 13, 17, 0.98) 100%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 20px;
	padding: 40px 44px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
	color: #fff;
	max-height: 90vh;
	overflow-y: auto;
	animation: buy-modal-pop 0.28s cubic-bezier(.2,.9,.3,1.1) both;
}
@keyframes buy-modal-pop {
	from { opacity: 0; transform: translateY(20px) scale(0.97); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

.buy-modal__close {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.buy-modal__close:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	transform: rotate(90deg);
}

.buy-modal__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
}
@media (max-width: 720px) {
	.buy-modal__card { padding: 28px 24px; }
	.buy-modal__grid { grid-template-columns: 1fr; gap: 24px; }
}

/* Single-column compact layout (used after removing email + payment) */
.buy-modal__single {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 460px;
	margin: 0 auto;
}
.buy-modal__single .buy-modal__title {
	text-align: center;
}
.buy-modal__single .buy-modal__sub {
	text-align: center;
	margin-bottom: 12px;
}
.buy-modal__single .buy-modal__total {
	font-size: 1.05rem;
}
.buy-modal__single .buy-modal__total-value {
	font-size: 1.6rem;
}

.buy-modal__col {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.buy-modal__title {
	font-size: 1.6rem;
	font-weight: 800;
	color: #fff;
	letter-spacing: -0.5px;
	margin: 0;
}
.buy-modal__sub {
	font-size: 0.92rem;
	color: rgba(255, 255, 255, 0.55);
	margin: 0 0 12px;
	line-height: 1.6;
}

.buy-modal__label {
	display: block;
	font-size: 0.78rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.7);
	letter-spacing: 0.3px;
	margin-bottom: 4px;
	margin-top: 6px;
}

.buy-modal__input {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	color: #fff;
	font-size: 0.95rem;
	font-family: inherit;
	transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
	margin-bottom: 8px;
}
.buy-modal__input:focus {
	outline: none;
	border-color: rgba(0, 158, 255, 0.5);
	background: rgba(0, 158, 255, 0.04);
	box-shadow: 0 0 0 3px rgba(0, 158, 255, 0.12);
}
.buy-modal__input::placeholder {
	color: rgba(255, 255, 255, 0.3);
}

.buy-modal__options,
.buy-modal__methods {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.buy-modal__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	color: rgba(255, 255, 255, 0.85);
	font-family: inherit;
	font-size: 0.95rem;
	cursor: pointer;
	transition: all 0.2s ease;
	text-align: left;
}
.buy-modal__option:hover {
	border-color: rgba(0, 158, 255, 0.3);
	background: rgba(0, 158, 255, 0.05);
}
.buy-modal__option.is-selected {
	background: #fff;
	color: #0a0a0c;
	border-color: #fff;
}
.buy-modal__option-name {
	font-weight: 700;
}
.buy-modal__option-price {
	font-weight: 700;
	color: #009eff;
}
.buy-modal__option.is-selected .buy-modal__option-price {
	color: #0a0a0c;
}
.buy-modal__option:not(.is-selected) .buy-modal__option-price {
	color: rgba(255, 255, 255, 0.5);
}

.buy-modal__method {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	color: rgba(255, 255, 255, 0.7);
	font-family: inherit;
	font-size: 0.9rem;
	cursor: pointer;
	transition: all 0.2s ease;
	text-align: left;
}
.buy-modal__method:hover {
	border-color: rgba(0, 158, 255, 0.3);
	background: rgba(0, 158, 255, 0.05);
	color: #fff;
}
.buy-modal__method.is-selected {
	background: #fff;
	color: #0a0a0c;
	border-color: #fff;
}
.buy-modal__method-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	color: rgba(255, 255, 255, 0.85);
	flex-shrink: 0;
}
.buy-modal__method-icon--btc {
	color: #f7931a;
	font-size: 1.4rem;
	font-weight: 700;
}
.buy-modal__method.is-selected .buy-modal__method-icon,
.buy-modal__method.is-selected .buy-modal__method-name {
	color: #0a0a0c;
}
.buy-modal__method.is-selected .buy-modal__method-icon--btc {
	color: #f7931a;
}
.buy-modal__method-name {
	font-weight: 600;
}

.buy-modal__divider {
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(0, 158, 255, 0.4), transparent);
	margin: 8px 0;
}

.buy-modal__total {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 8px;
	font-size: 1.15rem;
	font-weight: 700;
	color: #fff;
	margin-bottom: 4px;
}
.buy-modal__total-value {
	font-size: 1.4rem;
	font-weight: 800;
	background: linear-gradient(135deg, #fff 0%, rgba(0, 158, 255, 0.85) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.buy-modal__cta {
	width: 100%;
	padding: 14px 18px;
	background: linear-gradient(135deg, #009eff 0%, #0070dd 100%);
	color: #fff;
	font-family: inherit;
	font-weight: 700;
	font-size: 0.98rem;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	box-shadow: 0 8px 28px rgba(0, 158, 255, 0.32);
	transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.buy-modal__cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 40px rgba(0, 158, 255, 0.5);
}
.buy-modal__cta:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

.buy-modal__terms {
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.45);
	text-align: center;
	margin: 8px 0 0;
	line-height: 1.5;
}
.buy-modal__terms a {
	color: rgba(0, 158, 255, 0.85);
	text-decoration: none;
}
.buy-modal__terms a:hover {
	color: #009eff;
	text-decoration: underline;
}

.buy-modal__security {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.45);
	line-height: 1.5;
	margin: 14px 0 0;
}
.buy-modal__security svg {
	flex-shrink: 0;
	color: rgba(255, 255, 255, 0.4);
}

/* Lock body scroll while modal is open */
body.has-modal-open { overflow: hidden; }

/* ===========================================================
   HIDE CART (buy-now flow only — no separate cart step)
   =========================================================== */
/* WP admin bar cart link */
#wp-admin-bar-shopping-cart,
#wp-admin-bar-edit-shop_order,
li[id*="shopping_cart"] {
	display: none !important;
}
/* Header cart icons / mini-cart widgets */
.wc-block-mini-cart,
.wp-block-woocommerce-mini-cart,
.woocommerce-mini-cart,
a[href$="/cart/"],
a[href*="/cart/?"],
.cart-contents,
.cart-customlocation,
.site-header-cart,
.menu-item-type-woocommerce-cart,
li.cart,
.header-cart {
	display: none !important;
}
/* Cart fragment notifications + toast */
.woocommerce-message,
.added_to_cart {
	display: none !important;
}
/* Coupon panel on the FunnelKit checkout (since we want a clean buy-now feel) */
.wfacp-coupon-form,
.wfacp_coupon,
.wfacp-coupon-toggle,
.show-coupon-form,
.checkout_coupon,
.woocommerce-form-coupon-toggle {
	display: none !important;
}

/* ===========================================================
   WOOCOMMERCE CHECKOUT — themed to match the dark site
   Targets both legacy WooCommerce shortcode markup and the new
   block-based checkout (.wc-block-checkout / .wp-block-woocommerce-checkout).
   =========================================================== */

/* Animated gradient background for checkout/cart pages so they match
   the rest of the site (no need to inject the bg-orbs markup into
   WooCommerce's own templates). */
body.woocommerce-checkout,
body.woocommerce-cart,
body.woocommerce-order-received {
	position: relative;
	background-color: #050505 !important;
}
body.woocommerce-checkout::before,
body.woocommerce-cart::before,
body.woocommerce-order-received::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(circle 600px at 15% 20%, rgba(0, 158, 255, 0.18), transparent 70%),
		radial-gradient(circle 500px at 85% 80%, rgba(110, 59, 255, 0.14), transparent 70%),
		radial-gradient(circle 400px at 50% 50%, rgba(230, 0, 92, 0.06), transparent 70%);
	pointer-events: none;
}
body.woocommerce-checkout::after,
body.woocommerce-cart::after,
body.woocommerce-order-received::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 0%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 0%, transparent 75%);
	pointer-events: none;
}

/* Push checkout below the fixed nav pill */
.woocommerce-checkout,
.wp-block-woocommerce-checkout,
.woocommerce-cart {
	padding-top: 130px !important;
	padding-bottom: 100px;
	color: rgba(255, 255, 255, 0.85);
	max-width: 1200px;
	margin: 0 auto;
}

/* Section headings used by FunnelKit / Block checkout (Contact info,
   Billing address, Payment options, Order summary) */
.woocommerce-checkout h2,
.woocommerce-checkout h3,
.wp-block-woocommerce-checkout h2,
.wp-block-woocommerce-checkout h3,
.wfacp_main_form h2, .wfacp_main_form h3,
[class*="wfacp"] h2, [class*="wfacp"] h3 {
	font-weight: 800 !important;
	letter-spacing: -0.4px !important;
	color: #fff !important;
	font-size: 1.15rem !important;
	margin-bottom: 18px !important;
	position: relative;
	padding-bottom: 10px;
}
.woocommerce-checkout h2::after,
.woocommerce-checkout h3::after,
.wp-block-woocommerce-checkout h2::after,
.wp-block-woocommerce-checkout h3::after {
	content: '';
	position: absolute;
	left: 0; bottom: 0;
	width: 36px; height: 2px;
	background: linear-gradient(90deg, #009eff, transparent);
	border-radius: 2px;
}

/* Page heading on cart/checkout */
.woocommerce-checkout h1,
.woocommerce-checkout h2,
.woocommerce-checkout h3,
.wp-block-woocommerce-checkout h1,
.wp-block-woocommerce-checkout h2,
.wp-block-woocommerce-checkout h3,
.woocommerce-cart h1,
.woocommerce-cart h2 {
	color: #fff !important;
	font-weight: 800;
	letter-spacing: -0.5px;
}

/* Notice banners */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-NoticeGroup .woocommerce-error li {
	background: rgba(0, 158, 255, 0.08) !important;
	border-left: 3px solid #009eff !important;
	color: rgba(255, 255, 255, 0.85) !important;
	border-radius: 8px !important;
	padding: 14px 18px !important;
}
.woocommerce-message { border-left-color: #22c55e !important; }
.woocommerce-error  { border-left-color: #ef4444 !important; }

/* Form fields */
.woocommerce form .form-row label,
.wc-block-components-text-input label,
.wc-block-components-checkout-step__heading {
	color: rgba(255, 255, 255, 0.78) !important;
	font-weight: 500;
	font-size: 0.88rem;
	letter-spacing: 0.2px;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.wc-block-components-text-input input,
.wc-block-components-textarea {
	background: rgba(255, 255, 255, 0.03) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	color: #fff !important;
	border-radius: 10px !important;
	padding: 12px 14px !important;
	font-size: 0.95rem !important;
	transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease !important;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus {
	outline: none !important;
	border-color: rgba(0, 158, 255, 0.5) !important;
	background: rgba(0, 158, 255, 0.04) !important;
	box-shadow: 0 0 0 3px rgba(0, 158, 255, 0.12) !important;
}

/* Select / dropdowns */
.woocommerce form .form-row .select2-container--default .select2-selection--single,
.wc-block-components-select__select,
.woocommerce form .form-row select {
	background: rgba(255, 255, 255, 0.03) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	color: #fff !important;
	border-radius: 10px !important;
	height: 46px !important;
	padding: 8px 12px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: #fff !important;
	line-height: 30px !important;
}
.select2-dropdown {
	background: #15161b !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	color: #fff !important;
}
.select2-results__option--highlighted[aria-selected] {
	background: rgba(0, 158, 255, 0.2) !important;
}

/* Primary action buttons (Place Order, Update Cart, etc.) */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #payment #place_order,
.wc-block-components-button:not(.is-link),
.wc-block-components-checkout-place-order-button {
	background: linear-gradient(135deg, #009eff 0%, #0070dd 100%) !important;
	color: #fff !important;
	border: none !important;
	font-weight: 700 !important;
	font-size: 0.95rem !important;
	padding: 0.95rem 1.8rem !important;
	border-radius: 10px !important;
	box-shadow: 0 8px 28px rgba(0, 158, 255, 0.3) !important;
	transition: transform 0.2s ease, box-shadow 0.3s ease !important;
	text-decoration: none !important;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #payment #place_order:hover,
.wc-block-components-button:not(.is-link):hover,
.wc-block-components-checkout-place-order-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 40px rgba(0, 158, 255, 0.5) !important;
}

/* Order review / summary box */
.woocommerce-checkout-review-order,
.wc-block-components-totals-wrapper,
.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-components-sidebar-layout .wc-block-components-sidebar {
	background: rgba(255, 255, 255, 0.025) !important;
	border: 1px solid rgba(255, 255, 255, 0.06) !important;
	border-radius: 16px !important;
	padding: 28px !important;
}

/* Cart / order summary tables */
.woocommerce-checkout-review-order-table,
.shop_table {
	background: transparent !important;
	border: none !important;
	width: 100%;
	color: rgba(255, 255, 255, 0.85);
}
.woocommerce-checkout-review-order-table th,
.shop_table th {
	color: rgba(255, 255, 255, 0.6) !important;
	background: transparent !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
	padding: 14px 12px !important;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 0.72rem;
}
.woocommerce-checkout-review-order-table td,
.shop_table td {
	background: transparent !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
	padding: 14px 12px !important;
	color: rgba(255, 255, 255, 0.82) !important;
}
.woocommerce-checkout-review-order-table tr.order-total td,
.shop_table tr.order-total td {
	font-size: 1.15rem;
	color: #fff !important;
	border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
	padding-top: 18px !important;
}
.woocommerce-Price-amount,
.woocommerce-Price-amount bdi {
	color: #fff;
	font-weight: 600;
}
.woocommerce-checkout-review-order-table tr.order-total .woocommerce-Price-amount {
	background: linear-gradient(135deg, #fff 0%, rgba(0, 158, 255, 0.85) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	font-size: 1.5rem;
	font-weight: 800;
}

/* Payment methods */
#payment,
.wc-block-components-payment-method-options {
	background: transparent !important;
	border: none !important;
	margin-top: 24px;
}
#payment ul.payment_methods {
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
}
#payment ul.payment_methods li {
	background: rgba(255, 255, 255, 0.025) !important;
	border: 1px solid rgba(255, 255, 255, 0.07) !important;
	border-radius: 12px !important;
	padding: 14px 16px !important;
	margin-bottom: 10px !important;
	transition: border-color 0.25s ease, background 0.25s ease;
}
#payment ul.payment_methods li:hover {
	border-color: rgba(0, 158, 255, 0.3) !important;
	background: rgba(0, 158, 255, 0.04) !important;
}
#payment ul.payment_methods li input[type="radio"] {
	accent-color: #009eff;
	margin-right: 8px;
}
#payment ul.payment_methods li label {
	color: rgba(255, 255, 255, 0.85) !important;
	font-weight: 600;
	cursor: pointer;
}
#payment div.payment_box {
	background: rgba(0, 158, 255, 0.06) !important;
	border: 1px solid rgba(0, 158, 255, 0.18) !important;
	border-radius: 10px !important;
	color: rgba(255, 255, 255, 0.7) !important;
	margin-top: 10px !important;
	padding: 14px 16px !important;
}
#payment div.payment_box::before { display: none !important; }

/* Coupon / login expandable rows at the top of the checkout */
.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-form-login-toggle .woocommerce-info {
	background: rgba(255, 255, 255, 0.03) !important;
	border: 1px solid rgba(255, 255, 255, 0.07) !important;
	border-left: 3px solid #009eff !important;
}
.woocommerce-form-coupon-toggle .woocommerce-info a,
.woocommerce-form-login-toggle .woocommerce-info a {
	color: #009eff !important;
}

/* Cart page buttons row */
.woocommerce-cart .cart_totals,
.woocommerce-cart .cart-collaterals {
	background: rgba(255, 255, 255, 0.025) !important;
	border: 1px solid rgba(255, 255, 255, 0.06) !important;
	border-radius: 16px !important;
	padding: 24px !important;
}

/* Checkbox / radio appearance fix */
.woocommerce form .form-row input[type="checkbox"],
.woocommerce form .form-row input[type="radio"] {
	accent-color: #009eff;
}

/* Block checkout (newer) — extra polish */
.wc-block-components-form .wc-block-components-text-input.is-active label,
.wc-block-components-form .wc-block-components-text-input label {
	color: rgba(255, 255, 255, 0.7) !important;
}

/* ===========================================================
   FUNNELKIT / Custom checkout — minimal, targeted styling.
   Avoid broad [class*="..."] selectors because FunnelKit nests
   wrappers and they all match, creating a nested-cards mess.
   =========================================================== */

/* Form field inputs only — leave layout/wrappers alone */
.wfacp_main_form input[type="text"],
.wfacp_main_form input[type="email"],
.wfacp_main_form input[type="tel"],
.wfacp_main_form input[type="number"],
.wfacp_main_form select,
.wfacp_main_form textarea {
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 10px !important;
	color: #fff !important;
	font-size: 0.95rem !important;
}
.wfacp_main_form input:focus,
.wfacp_main_form select:focus,
.wfacp_main_form textarea:focus {
	outline: none !important;
	border-color: rgba(0, 158, 255, 0.5) !important;
	background: rgba(0, 158, 255, 0.04) !important;
	box-shadow: 0 0 0 3px rgba(0, 158, 255, 0.12) !important;
}

/* Place Order / Pay button only */
button[name="woocommerce_checkout_place_order"],
.wfacp_order_button,
.wfacp-pay-button {
	background: linear-gradient(135deg, #009eff 0%, #0070dd 100%) !important;
	border: none !important;
	color: #fff !important;
	font-weight: 700 !important;
	font-size: 1rem !important;
	padding: 16px 24px !important;
	border-radius: 12px !important;
	width: 100% !important;
	box-shadow: 0 8px 32px rgba(0, 158, 255, 0.35) !important;
	transition: transform 0.2s ease, box-shadow 0.3s ease !important;
}
button[name="woocommerce_checkout_place_order"]:hover,
.wfacp_order_button:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 44px rgba(0, 158, 255, 0.55) !important;
}

/* Hide any auto-injected "stripe" wordmark next to Credit/Debit Card */
.payment_method_stripe label > img[alt*="Stripe" i],
.wc_payment_method[class*="stripe"] label > img[alt*="stripe" i],
[id*="stripe"] label img[alt*="stripe" i] {
	display: none !important;
}

/* ===========================================================
   FOOTER
   =========================================================== */
.site-footer {
	border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
	background: rgba(5, 5, 7, 0.4);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.site-footer p,
.site-footer a {
	font-size: 0.82rem !important;
	color: rgba(255, 255, 255, 0.35) !important;
}
.site-footer a:hover { color: rgba(255, 255, 255, 0.75) !important; }

/* ===========================================================
   REVEAL ON SCROLL
   =========================================================== */
/* Default: content always visible. Only when JS confirms it's running
   (by adding .has-reveal-js to <html>) do we hide reveal items
   so they can fade in via the IntersectionObserver. */
.reveal {
	transition: opacity 0.8s cubic-bezier(.2,.8,.2,1),
				transform 0.8s cubic-bezier(.2,.8,.2,1);
	will-change: opacity, transform;
}
html.has-reveal-js .reveal {
	opacity: 0;
	transform: translateY(28px);
}
html.has-reveal-js .reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Stagger children when a parent has reveal--stagger */
.reveal--stagger.is-visible .feature-card,
.reveal--stagger.is-visible li.product,
.reveal--stagger.is-visible .wc-block-product {
	animation: card-rise 0.7s cubic-bezier(.2,.8,.2,1) both;
}
.reveal--stagger.is-visible :nth-child(1) { animation-delay: 0.05s; }
.reveal--stagger.is-visible :nth-child(2) { animation-delay: 0.12s; }
.reveal--stagger.is-visible :nth-child(3) { animation-delay: 0.19s; }
.reveal--stagger.is-visible :nth-child(4) { animation-delay: 0.26s; }
.reveal--stagger.is-visible :nth-child(5) { animation-delay: 0.33s; }
.reveal--stagger.is-visible :nth-child(6) { animation-delay: 0.40s; }

@keyframes card-rise {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; }
	.bg-orbs .orb { animation: none; }
	.hero__title-grad { animation: none; }
	.discord-card__glow { animation: none; }
	.marquee__track { animation: none; }
}

/* ===========================================================
   MOBILE
   =========================================================== */
@media (max-width: 640px) {
	.hero { min-height: 80vh; padding-top: 130px !important; padding-bottom: 80px !important; }
	.hero__title { letter-spacing: -1.5px !important; }
	.hero__trust { gap: 18px; }
	.discord-card { padding: 48px 28px; }
}