@font-face {
	font-family: 'RobloxFont';
	src: url('../fonts/roblox-font.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

.title {
	font-family: 'Inter', sans-serif !important;
	letter-spacing: 1px;
}

		body {
			font-family: 'Inter', 'Noto Color Emoji', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
			background-color: #0c0d0f;
			/* Premium Dark Tech Background (Instantly loads, never breaks) */
			background-image: 
				radial-gradient(circle at 15% 20%, rgba(0, 176, 111, 0.08), transparent 40%),
				radial-gradient(circle at 85% 80%, rgba(0, 176, 111, 0.05), transparent 40%),
				linear-gradient(180deg, #16181b 0%, #0c0d0f 100%);
			background-attachment: fixed;
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
		}

		/* Mobile: optimize background for performance */
		@media (max-width: 600px) {
			body {
				background-attachment: scroll; /* Prevents GPU repaint lag on mobile */
			}
		}

		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			font-family: 'Inter', 'Noto Color Emoji', -apple-system, BlinkMacSystemFont, sans-serif;
			font-weight: 500;
		}

		.analytics-banner {
			width: 100%;
			background: rgba(10, 10, 10, 0.85);
			backdrop-filter: blur(6px);
			-webkit-backdrop-filter: blur(6px);
			color: #a0a0a0;
			display: flex;
			justify-content: space-around;
			padding: 12px 0;
			font-size: 12px;
			border-bottom: 1px solid rgba(0, 176, 111, 0.2);
			position: relative;
			z-index: 100;
			box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
		}

		.analytics-item {
			display: flex;
			align-items: center;
			gap: 6px;
			font-weight: 500;
			text-transform: uppercase;
			font-size: 11px;
			letter-spacing: 0.5px;
		}

		.pulse-dot {
			width: 8px;
			height: 8px;
			background-color: #00b06f;
			border-radius: 50%;
			display: inline-block;
			box-shadow: 0 0 10px #00b06f;
			animation: pulse-green 1.5s infinite;
		}

		@keyframes pulse-green {
			0% {
				transform: scale(0.95);
				box-shadow: 0 0 0 0 rgba(0, 176, 111, 0.7);
			}

			70% {
				transform: scale(1);
				box-shadow: 0 0 0 6px rgba(0, 176, 111, 0);
			}

			100% {
				transform: scale(0.95);
				box-shadow: 0 0 0 0 rgba(0, 176, 111, 0);
			}
		}

		.navbar {
			width: 100%;
			height: 80px;
			background-color: rgba(26, 27, 29, 0.5);
			backdrop-filter: blur(6px);
			-webkit-backdrop-filter: blur(6px);
			border-bottom: 1px solid rgba(255, 255, 255, 0.05);
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			color: #fff;
		}

		.profile {
			display: flex;
		}

		.profileimg {
			width: 60px;
			border-radius: 50%;
			margin-right: 5px;
			margin-top: 5px;
		}

		.profileimg img {
			width: 100%;
			border-radius: 50%;
		}

		.navbar button {
			background-color: #00b06f;
			border: none;
			outline: none;
			border-radius: 5px;
			padding: 10px 40px;
			cursor: pointer;
			color: #fff;
			font-size: 15px;
		}



		.profile .text p {
			font-size: 14px;
			color: rgb(180 180 180);
			margin-left: 8px;
			margin-top: 0px;
		}

		.profile .text h4 {
			font-weight: bold;
			margin-left: 8px;
			margin-top: 3px;
			font-size: 18px;
			font-family: 'RobloxFont', sans-serif;
			letter-spacing: 1px;
		}

		.rainbow-text {
			background: linear-gradient(90deg, #ff007f, #7f00ff, #00d4ff, #00ff00, #ffea00);
			background-size: 300% 300%;
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent;
			animation: rainbow-anim 4s ease infinite;
		}

		@keyframes rainbow-anim {
			0% {
				background-position: 0% 50%
			}

			50% {
				background-position: 100% 50%
			}

			100% {
				background-position: 0% 50%
			}
		}

		.partner {
			display: flex;
			margin-top: 6px;
		}

		.badge {
			width: 13px;
			margin-left: 5px;
		}

		.badge img {
			width: 100%;
			margin-top: 9px;
		}

		.container {
			width: 100%;
			position: relative;
		}

		.boxholder {
			padding-top: 60px;
			padding-bottom: 40px;
			position: relative;
			width: 100%;
		}

		.box1 {
			width: 550px;
			background-color: rgba(35, 37, 39, 0.9);
			backdrop-filter: blur(8px);
			-webkit-backdrop-filter: blur(8px);
			border: 1px solid #393B3D;
			margin: 0 auto;
			border-radius: 8px;
			box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
			display: flex;
			align-items: center;
			flex-direction: column;
			padding: 25px 20px;
			text-align: center;
			color: #fff;
			min-height: 440px;
		}

		.logo {
			width: 180px;
			margin-top: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.logo img {
			width: 100%;
			height: auto;
			object-fit: contain;
		}

		img {
			width: 100%;
		}

		.box1 .maintxt {
			line-height: 1.7;
			font-size: 16px;
			margin-top: 14px;
			color: #b7b1b1;
			margin-bottom: 10px;
		}

		.box1 .title {
			margin-top: 16px;
			font-size: 18px;
			font-family: 'Inter', sans-serif;
			letter-spacing: 1px;
		}

		.box3 .title {
			font-family: 'Inter', sans-serif;
			font-size: 22px;
			color: #fff;
			letter-spacing: 1px;
		}

		.box1 input {
			width: 85%;
			padding: 14px 18px;
			border: 1px solid #393B3D;
			border-radius: 8px;
			outline: none;
			background-color: #111214;
			color: #fff;
			margin-top: 8px;
			font-size: 16px;
			transition: border 0.2s, background-color 0.2s;
		}

		.box1 input:focus {
			border-color: #FFFFFF;
			background-color: #232527;
		}

		.box1 button.getrbx {
			width: 85%;
			border-radius: 8px;
			outline: none;
			background-color: #FFFFFF;
			border: 1px solid #FFFFFF;
			padding: 14px 15px;
			margin-top: 18px;
			font-weight: 600;
			color: #111214;
			cursor: pointer;
			font-size: 16px;
			transition: 0.2s;
		}

		.box1 button.getrbx:hover {
			background-color: #EBEBEB;
			border-color: #EBEBEB;
		}

		.fade-image {
			width: 120px;
			padding-bottom: 20px;
			opacity: 0;
			animation: fadeInOut 2s infinite;
		}

		@keyframes fadeInOut {
			0% {
				opacity: 0;
			}

			25% {
				opacity: 1;
			}

			75% {
				opacity: 1;
			}

			100% {
				opacity: 0;
			}
		}

		.boxanimation {
			display: none;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			padding-bottom: 40px;
		}

		.animationtxt {
			line-height: 1.7;
			margin-top: 14px;
			color: #00b06f;
			font-size: 17px;
			font-weight: bold;
		}

		.queue-text {
			font-size: 14px;
			color: #ffb800;
			margin-top: 10px;
			font-weight: bold;
		}

		/* Processing Step Items */
		.step-list {
			width: 80%;
			margin-top: 20px;
			text-align: left;
			max-height: 160px;
			overflow-y: auto;
			overflow-x: hidden;
		}

		.step-item {
			font-size: 14px;
			color: #b7b1b1;
			margin: 8px 0;
			display: flex;
			align-items: center;
			gap: 10px;
		}

		.step-item i {
			font-style: normal;
			font-size: 12px;
		}

		.step-item.active {
			color: #fff;
			font-weight: bold;
		}

		.step-item.done {
			color: #00b06f;
		}

		.box3 {
			display: none;
			justify-content: center;
			flex-direction: column;
			border-radius: 8px;
		}

		.row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 70px;
			padding: 0 20px;
			width: 100%;
		}

		.row:not(.row:last-child) {
			border-bottom: 1px solid #333435;
		}

		.price {
			font-size: 16px;
			color: #fff;
			flex: 1;
			text-align: left;
		}

		.details {
			background-color: #00b06f;
			border-radius: 8px;
			padding: 6px 8px;
			width: 190px;
			display: flex;
			justify-content: center;
			cursor: pointer;
			transition: 0.3s;
			font-weight: 600;
			text-align: right;
		}

		.robux_total {
			display: flex;
			align-items: center;
		}

		.pic {
			width: 30px;
			margin-right: 10px;
			pointer-events: none;
			margin-top: 2px;
		}

		.details:hover {
			background-color: #068657;
			scale: 1.05;
		}

		.box4 {
			display: none;
			height: auto;
			min-height: auto;
			padding-bottom: 20px;
			padding-top: 20px;
		}

		.maintxt2 {
			line-height: 1.7;
			font-size: 16px;
			margin-top: 14px;
			color: #b7b1b1;
			margin-bottom: 10px;
		}

		#verify-btn {
			width: 85%;
			border-radius: 8px;
			outline: none;
			background-color: #FFFFFF;
			border: 1px solid #FFFFFF;
			padding: 15px 15px;
			margin-top: 15px;
			font-weight: 600;
			color: #111214;
			cursor: pointer;
			font-size: 16px;
			transition: 0.2s;
		}
		#verify-btn:hover {
			background-color: #EBEBEB;
			border-color: #EBEBEB;
		}

		/* Timer & Counter */
		.timer-box {
			font-size: 22px;
			font-weight: bold;
			margin: 10px 0;
			color: #fff;
			background: #222;
			padding: 5px 15px;
			border-radius: 5px;
			border: 1px solid #444;
		}

		.timer-box.red {
			color: #ff4747;
			border-color: #ff4747;
			animation: pulse 1s infinite;
		}

		.rewards-left {
			font-size: 13px;
			font-weight: bold;
			color: #ffb800;
			margin-top: 10px;
			background: rgba(255, 184, 0, 0.1);
			padding: 8px;
			border-radius: 5px;
			width: 90%;
			margin-left: 5%;
			text-align: center;
		}

		/* ═══════════════════════════════════════════════════════════════════
		   📱 PAGE: OFFERS SECTION  —  Mobile-First Responsive Design
		   ═══════════════════════════════════════════════════════════════════
		   ARCHITECTURE:
		     1. .offers-header      — Section subtitle / instructions row
		     2. .offers-wrap        — Flex column container for all cards
		     3. .offer-card         — Individual tappable card (anchor tag)
		        ├── .recommended    — Modifier: highlighted first/best card
		        ├── .offer-body     — Inner flex row (thumbnail + details + CTA)
		        │   ├── img         — Offer network thumbnail
		        │   ├── .offer-details — Text column (title + badges)
		        │   └── .offer-btn  — Green CTA button
		        └── .offer-hidden / .offer-visible — Toggle classes for
		                                              progressive disclosure
		     4. #see-more-btn      — Tap button shown below 1st 3 cards
		     5. .sticky-progress   — Fixed bottom progress bar
		   ─────────────────────────────────────────────────────────────────
		   RESPONSIVE STRATEGY:
		     • Mobile-first base styles target ≤ 480 px (TikTok / phones)
		     • clamp() scales typography fluidly between breakpoints
		     • min-height ≥ 50 px on all interactive elements (WCAG tap target)
		     • overflow:hidden on html/body prevents horizontal scroll
		   ═══════════════════════════════════════════════════════════════════ */

		/* ── [OFFERS] Section header text ─────────────────────────────────── */
		.offers-header {
			text-align: center;
			margin: 16px 0 10px;
			font-size: clamp(11px, 3vw, 14px);
			color: #a0a0a0;
			font-weight: 500;
			letter-spacing: 0.4px;
			padding: 0 10px;
		}

		.offers-header strong {
			color: #00ff87;
		}

		/* ── [OFFERS] Outer wrapper — flex column, full width ─────────────── */
		.offers-wrap {
			width: 100%;
			margin: 0 0 80px;
			/* bottom gap keeps sticky footer clear */
			display: flex;
			flex-direction: column;
			/* stack cards vertically */
			gap: 10px;
			/* even spacing between cards */
			padding: 0 2px;
			box-sizing: border-box;
		}

		/* ── [OFFERS] Individual card ─────────────────────────────────────── */
		.offer-card {
			display: flex;
			align-items: center;
			gap: 12px;
			background: #141a1f;
			border: 1px solid rgba(255, 255, 255, 0.07);
			border-radius: 14px;
			padding: 12px 14px;
			text-decoration: none;
			color: #fff;
			width: 100%;
			/* full column width — no overflow */
			box-sizing: border-box;
			-webkit-tap-highlight-color: transparent;
			/* remove iOS blue flash */
			transition: border-color 0.2s, box-shadow 0.2s;
			position: relative;
			overflow: hidden;
			/* clip the recommended top-label */
			min-height: 72px;
			/* ≥ 44 px WCAG touch target */
		}

		/* Hover lift — desktop only (mobile :hover can be sticky) */
		@media (hover: hover) {
			.offer-card:hover {
				border-color: rgba(0, 176, 111, 0.5);
				box-shadow: 0 4px 20px rgba(0, 176, 111, 0.12);
			}
		}

		.offer-card:active {
			transform: scale(0.99);
		}

		/* subtle press feedback */

		/* ── [OFFERS] Progressive Disclosure ──────────────────────────────── */
		.offer-hidden {
			display: none !important;
		}

		.offer-visible {
			display: flex !important;
			animation: fadeInCard 0.4s ease forwards;
			opacity: 0;
		}

		@keyframes fadeInCard {
			from { opacity: 0; transform: translateY(10px); }
			to { opacity: 1; transform: translateY(0); }
		}

		/* ── [OFFERS] Modifier: first/recommended card ────────────────────── */
		.offer-card.recommended {
			border: 2px solid #00b06f;
			box-shadow: 0 0 15px rgba(0, 176, 111, .35);
			background: linear-gradient(135deg, #0c1e14 0%, #111d15 100%);
		}

		/* Green label banner pinned to top of recommended card */
		.offer-recommended-label {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			background: linear-gradient(90deg, #00b06f, #00ff87);
			color: #002a15;
			font-size: 10px;
			font-weight: 900;
			text-align: center;
			padding: 4px 0;
			letter-spacing: 0.8px;
			text-transform: uppercase;
		}

		/* Push offer-body below the label banner */
		.offer-card.recommended .offer-body {
			margin-top: 22px;
		}

		/* ── [OFFERS] Inner horizontal row (image + text + CTA) ───────────── */
		.offer-body {
			display: flex;
			align-items: center;
			gap: 12px;
			width: 100%;
		}

		/* ── [OFFERS] Network thumbnail ───────────────────────────────────── */
		.offer-card img {
			width: clamp(44px, 11vw, 58px);
			/* fluid: 44 → 58 px */
			height: clamp(44px, 11vw, 58px);
			border-radius: 12px;
			object-fit: cover;
			flex-shrink: 0;
			/* never shrink below min-width */
			border: 1.5px solid rgba(0, 176, 111, 0.3);
			background: #1a1a1a;
			/* placeholder while image loads */
			margin: 0;
		}

		/* ── [OFFERS] Text area (title + badges) ──────────────────────────── */
		.offer-details {
			flex: 1;
			/* fill available space */
			min-width: 0;
			/* allow text-overflow: ellipsis */
			display: flex;
			flex-direction: column;
			gap: 4px;
			text-align: left;
		}

		.offer-title {
			font-size: clamp(12px, 3vw, 15px);
			font-weight: 700;
			color: #f0f0f0;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			/* long titles → "..." on small screens */
			line-height: 1.25;
		}

		.offer-meta {
			font-size: clamp(10px, 2.2vw, 11px);
			color: #6a8a80;
		}

		/* ── [OFFERS] Offer description — what the user must do ───────────── */
		.offer-desc {
			font-size: clamp(11px, 2.5vw, 12px);
			color: #b0b0b0;
			line-height: 1.4;
			margin-top: 4px;
			margin-bottom: 2px;
			white-space: normal;
			overflow: visible;
			font-weight: 400;
		}

		/* ── [OFFERS] Badge pills row ─────────────────────────────────────── */
		.offer-badges {
			display: flex;
			gap: 5px;
			flex-wrap: wrap;
			/* wrap on very narrow screens */
		}

		.easy-fast-badge {
			display: inline-flex;
			align-items: center;
			background: rgba(0, 176, 111, 0.12);
			border: 1px solid rgba(0, 176, 111, 0.28);
			color: #00c97e;
			font-size: clamp(8px, 2vw, 9px);
			font-weight: 700;
			padding: 2px 7px;
			border-radius: 20px;
			text-transform: uppercase;
			white-space: nowrap;
		}

		/* Alternate badge colour (gold) */
		.easy-fast-badge.alt {
			background: rgba(255, 184, 0, 0.10);
			border-color: rgba(255, 184, 0, 0.28);
			color: #ffb800;
		}

		/* ── [OFFERS] CTA button ──────────────────────────────────────────── */
		.offer-btn {
			background: linear-gradient(135deg, #00c97e, #00ff87);
			color: #002a15;
			font-size: clamp(11px, 2.8vw, 13px);
			font-weight: 900;
			border-radius: 10px;
			white-space: nowrap;
			flex-shrink: 0;
			height: 44px;
			/* WCAG 2.5.8 touch target ≥ 24 px */
			width: clamp(66px, 18vw, 82px);
			display: flex;
			align-items: center;
			justify-content: center;
			transition: transform 0.15s, box-shadow 0.15s;
			box-shadow: 0 3px 16px rgba(0, 255, 135, 0.35);
			animation: btn-glow 2.5s ease-in-out infinite;
			text-transform: uppercase;
			letter-spacing: 0.5px;
			padding: 0;
		}

		/* Pulsing green glow on the CTA */
		@keyframes btn-glow {

			0%,
			100% {
				box-shadow: 0 3px 14px rgba(0, 255, 135, 0.3);
			}

			50% {
				box-shadow: 0 5px 22px rgba(0, 255, 135, 0.6);
			}
		}

		.offer-btn:hover {
			transform: scale(1.04);
		}

		.offer-btn:active {
			transform: scale(0.96);
		}

		/* ── [STICKY] Bottom progress bar ────────────────────────────────── */
		.sticky-progress {
			display: none;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 9000;
			background: rgba(10, 16, 12, 0.97);
			border-top: 1px solid rgba(0, 176, 111, 0.3);
			padding: 10px 20px 14px;
			box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
			backdrop-filter: blur(10px);
		}

		.sticky-progress.show {
			display: block;
		}

		.sp-label {
			display: flex;
			justify-content: space-between;
			font-size: 12px;
			color: #aaa;
			margin-bottom: 6px;
		}

		.sp-label strong {
			color: #fff;
		}

		.sp-bar-bg {
			width: 100%;
			height: 6px;
			background: rgba(255, 255, 255, 0.08);
			border-radius: 20px;
			overflow: hidden;
		}

		.sp-bar-fill {
			height: 100%;
			width: 66%;
			background: linear-gradient(90deg, #00b06f, #00ff87);
			border-radius: 20px;
			transition: width 0.8s ease;
		}

		/* ── [FOOTER] Keep above sticky bar ──────────────────────────────── */
		.footer {
			width: 100%;
			height: auto;
			background-color: rgba(26, 27, 29, 0.7);
			backdrop-filter: blur(4px);
			-webkit-backdrop-filter: blur(4px);
			border-top: 1px solid rgba(255, 255, 255, 0.05);
			color: #fff;
			text-align: center;
			padding: 20px 15px;
		}

		.footer p {
			line-height: 1.7;
			font-size: 10px;
			font-weight: 500;
			margin-top: 14px;
			color: #b7b1b1;
			margin-bottom: 10px;
		}

		.ad-wrapper {
			display: flex;
			flex-direction: column;
			gap: 20px;
			justify-content: center;
			align-items: center;
			padding: 15px 0;
			background-color: #111;
			width: 100%;
		}

		.ad-native-wrap {
			width: 100%;
			max-width: 600px;
			margin: 0 auto;
			padding: 0 10px;
			text-align: center;
			display: block;
			min-height: 100px;
		}

		.ad-banner-wrap {
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: hidden;
			width: 100%;
		}

		.ad-small {
			display: none; /* مخفي في الحاسوب */
		}

		.ad-large {
			display: flex; /* مرئي في الحاسوب */
		}

		/* ════════════════════════════════════════════════════════════════════
		   📱 MOBILE RESPONSIVE  —  screens ≤ 480 px
		   Optimised for TikTok traffic, small phones, one-handed use
		   ════════════════════════════════════════════════════════════════════
		   INDEX OF SECTIONS:
		     [1]  Global overflow prevention
		     [2]  Analytics banner
		     [3]  Navbar
		     [4]  Main card box
		     [5]  Logo
		     [6]  Main text
		     [7]  Input fields
		     [8]  Buttons
		     [9]  Amount selection
		     [10] Row-based layout
		     [11] Step list
		     [12] Live Robux counter
		     [13] Timer box
		     [14] Demand / rewards text
		     [15] Offer cards
		     [16] Ownership & Upsell screens
		     [17] Comments section
		     [18] Live notifications
		     [19] Trust badges
		     [20] Modals
		     [21] Footer
		     [22] Ads
		     [23] Boxholder spacing
		     [24] Animation text
		   ════════════════════════════════════════════════════════════════════ */
		@media (max-width: 480px) {
			.ad-large { display: none !important; }
			.ad-small { display: flex !important; }

			/* [1] Prevent horizontal scroll globally and add padding for sticky CTAs */
			html,
			body {
				overflow-x: hidden;
				width: 100%;
				padding-bottom: 10px; /* Minimal buffer */
			}

			/* [2] Analytics Banner: perfectly centered on mobile */
			.analytics-banner {
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
				padding: 10px 10px;
				gap: 8px;
			}

			.analytics-item {
				font-size: 10px;
				text-align: center;
				justify-content: center;
				min-width: 30%;
				flex: 1 1 30%;
			}

			/* [3] Navbar: compact, no overflow */
			.navbar {
				height: auto;
				min-height: 65px;
				padding: 8px 12px;
				justify-content: space-between;
				flex-wrap: wrap;
				gap: 5px;
			}

			.navbar button {
				padding: 8px 14px;
				font-size: 12px;
				border-radius: 6px;
				min-height: 36px;
				/* finger-tap friendly */
			}

			.profileimg {
				width: 42px;
				margin-top: 6px;
			}

			.profile .text h4 {
				font-size: 14px;
				margin-top: 2px;
			}

			.profile .text p {
				font-size: 10px;
			}

			/* [4] Main card box: full width with internal padding */
			.box1 {
				width: 96%;
				padding: 18px 12px;
				min-height: auto;
				margin: 10px auto;
				border-radius: 10px;
			}

			/* [5] Logo: scale proportionally */
			.logo {
				width: 150px;
				margin-top: 15px;
			}

			/* [6] Main text: readable on small screens */
			.box1 .maintxt {
				font-size: 14px;
				line-height: 1.6;
				padding: 0 5px;
			}

			.box1 .title {
				font-size: 16px;
				font-family: 'RobloxFont', 'Inter', sans-serif;
			}

			/* [7] Input fields: full width, large enough to prevent iOS zoom */
			.box1 input {
				width: 95%;
				font-size: 16px;
				/* prevents iOS auto-zoom on focus */
				padding: 13px 14px;
			}

			/* [8] Buttons: full width, finger-friendly tap target ≥ 50 px */
			.box1 button.getrbx,
			#verify-btn,
			#ownership-btn {
				width: 95%;
				font-size: 15px;
				padding: 15px 10px;
				border-radius: 8px;
				min-height: 50px;
			}

			/* [9] Amount selection cards: full width, stacked */
			.amts-grid {
				grid-template-columns: 1fr;
				gap: 10px;
				width: 100%;
			}

			.amt-card {
				padding: 14px 12px;
				border-radius: 10px;
			}

			.amt-badge {
				font-size: 9px;
				padding: 2px 7px;
				top: -9px;
			}

			.robux_total span {
				font-size: 16px;
			}

			.price {
				font-size: 13px;
			}

			/* [10] Row-based layout adjustments */
			.row {
				padding: 0 10px;
				height: 60px;
			}

			.details {
				width: 140px;
				padding: 6px;
				border-radius: 6px;
			}

			/* [11] Step processing list */
			.step-list {
				width: 95%;
				margin-top: 12px;
				max-height: 180px;
				overflow-y: auto;
			}

			.step-item {
				font-size: 12px;
				gap: 8px;
			}

			/* [12] Live Robux balance counter */
			.live-balance-anim {
				width: 95%;
				padding: 10px;
				margin: 10px auto;
				border-radius: 8px;
			}

			.rbx-number {
				font-size: 26px;
			}

			.rbx-currency {
				font-size: 20px;
			}

			/* [13] Timer box */
			.timer-box {
				font-size: 20px;
				padding: 4px 12px;
			}

			/* [14] Rewards-left / demand text */
			.rewards-left {
				width: 95%;
				font-size: 12px;
				padding: 7px;
			}

			/* [15] Offer cards — full-width, stacked, comfortable thumbs */
			.offers-wrap {
				width: 100%;
				/* no side overflow */
				padding: 0;
				/* card padding handles spacing */
				gap: 10px;
			}

			.offer-card {
				padding: 12px 10px;
				border-radius: 12px;
				min-height: auto;
				/* let content determine height */
			}

			/* On mobile: row becomes a flex wrap so button drops below */
			.offer-body {
				flex-wrap: wrap;
				align-items: flex-start;
				gap: 10px;
			}

			.offer-card img {
				width: 42px;
				height: 42px;
				border-radius: 8px;
				flex-shrink: 0;
			}

			/* Details take full remaining width next to image */
			.offer-details {
				flex: 1;
				min-width: 0;
			}

			.offer-title {
				font-size: 13px;
				white-space: normal;
				/* allow wrapping so full title shows */
				line-height: 1.3;
			}

			/* Description: full width, clearly readable */
			.offer-desc {
				font-size: 11.5px;
				line-height: 1.45;
				color: #c0c0c0;
				white-space: normal;
				max-height: none;
				overflow: visible;
				margin-top: 3px;
			}

			/* Button drops to its own full-width row */
			.offer-btn {
				width: 100%;
				height: 42px;
				font-size: 13px;
				border-radius: 8px;
				flex-shrink: 0;
				order: 10;
				/* push to bottom row */
				margin-top: 2px;
			}

			/* [16] Ownership & Upsell screens */
			#box-ownership h2 {
				font-size: 20px;
			}

			#box-upsell h2 {
				font-size: 22px;
			}

			#box-upsell p {
				font-size: 14px;
			}

			/* [17] Comments Section — extra top margin to separate from offers, remove backdrop filter for performance */
			.comments-section {
				width: 96%;
				padding: 14px 10px;
				margin: 35px auto 15px;
				border-radius: 10px;
				backdrop-filter: none !important;
				-webkit-backdrop-filter: none !important;
			}

			.comments-header {
				font-size: 14px;
			}

			.comment-avatar {
				width: 34px;
				height: 34px;
			}

			.comment-author {
				font-size: 13px;
			}

			.comment-text {
				font-size: 12px;
				line-height: 1.4;
			}

			.comment-time {
				font-size: 10px;
			}

			.comment-actions {
				font-size: 10px;
			}

			/* [18] Live Notifications — full width at bottom */
			.live-notifications {
				left: 5px;
				bottom: 8px;
				width: calc(100% - 10px);
			}

			.notification-item {
				width: 100%;
				font-size: 11px;
				padding: 10px;
				box-sizing: border-box;
				border-radius: 6px;
			}

			.notif-img {
				width: 28px;
				border-radius: 4px;
			}

			/* [19] Trust Badges */
			.global-trust-badges {
				width: 95%;
				padding: 12px 10px;
				margin: 12px auto;
				border-radius: 10px;
				backdrop-filter: none !important;
				-webkit-backdrop-filter: none !important;
			}

			.trust-badge-row {
				gap: 6px;
			}

			.t-badge {
				font-size: 10px;
				padding: 4px 8px;
			}

			.t-stars {
				font-size: 13px;
			}

			.t-users {
				font-size: 10px;
			}

			/* [20] Modals */
			.modal-content {
				width: 92%;
				margin: 15% auto;
				padding: 15px;
				border-radius: 10px;
			}

			.exit-title {
				font-size: 17px;
				line-height: 1.3;
			}

			.exit-btn {
				font-size: 14px;
				padding: 14px;
				border-radius: 8px;
				min-height: 50px;
			}

			.badges-container {
				padding: 10px;
				gap: 6px;
			}

			.badge-item {
				font-size: 11px;
			}

			.stats-text {
				font-size: 11px;
				padding: 6px;
				border-radius: 4px;
			}

			/* [21] Footer */
			.footer {
				height: auto;
				padding: 15px 10px;
			}

			.footer p {
				font-size: 9px;
				line-height: 1.6;
			}

			/* [22] Ads: hide large banner on mobile */
			.ad-large {
				display: none;
			}

			.ad-wrapper {
				padding: 10px 0;
				flex-direction: column;
				gap: 10px;
			}

			/* [23] Boxholder spacing from top */
			.boxholder {
				padding-top: 30px;
			}

			/* [24] Animation text */
			.animationtxt {
				font-size: 15px;
			}

			.queue-text {
				font-size: 12px;
			}
		}

		/* ── Tablet zone: minor tweaks 481–600px ──────────────────────────── */
		@media (min-width: 481px) and (max-width: 600px) {
			.box1 {
				width: 90%;
			}

			.analytics-item {
				font-size: 11px;
			}

			.amts-grid {
				grid-template-columns: 1fr;
			}
		}

		/* Modal styling */
		.modal {
			display: none;
			position: fixed;
			z-index: 1000;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			overflow: auto;
			background-color: rgba(0, 0, 0, 0.85);
			backdrop-filter: blur(5px);
		}
		
		@media (max-width: 480px) {
			.modal {
				backdrop-filter: none !important;
				-webkit-backdrop-filter: none !important;
			}
		}

		.modal-content {
			background-color: #1a1b1d;
			margin: 10% auto;
			padding: 25px;
			border-radius: 10px;
			color: #fff;
			width: 85%;
			max-width: 450px;
			text-align: left;
			box-shadow: rgba(0, 0, 0, 0.5) 0px 10px 15px;
			position: relative;
			border: 1px solid #333;
		}

		.close-btn {
			color: #fff;
			float: right;
			font-size: 20px;
			font-weight: bold;
			cursor: pointer;
		}

		.close-btn:hover {
			color: #00b06f;
		}

		/* Exit Intent Popup specifics */
		#exit-intent-modal .modal-content {
			text-align: center;
			border: 2px solid #00b06f;
			box-shadow: 0 0 25px rgba(0, 176, 111, 0.4);
		}

		.exit-title {
			color: #ff4747;
			font-weight: bold;
			font-size: 20px;
			margin-bottom: 10px;
			line-height: 1.4;
		}

		.exit-btn {
			background-color: #00b06f;
			color: white;
			border: none;
			padding: 15px;
			width: 100%;
			font-size: 16px;
			font-weight: bold;
			border-radius: 8px;
			cursor: pointer;
			margin: 15px 0;
			text-transform: uppercase;
			animation: pulse 1.5s infinite;
			transition: 0.3s;
		}

		.exit-btn:hover {
			background-color: #068657;
		}

		@keyframes pulse {
			0% {
				transform: scale(1);
			}

			50% {
				transform: scale(1.03);
			}

			100% {
				transform: scale(1);
			}
		}

		.badges-container {
			display: flex;
			flex-direction: column;
			gap: 8px;
			text-align: left;
			background: #111;
			padding: 15px;
			border-radius: 8px;
			margin-bottom: 10px;
		}

		.badge-item {
			font-size: 13px;
			color: #b7b1b1;
		}

		.badge-item span {
			color: #00b06f;
			font-weight: bold;
			margin-right: 8px;
			font-size: 15px;
		}

		.stats-text {
			font-size: 13px;
			color: #fff;
			padding: 8px;
			border-radius: 4px;
			background: #222;
		}

		/* Live Notifications */
		.live-notifications {
			position: fixed;
			bottom: 20px;
			left: 20px;
			z-index: 9999;
			display: flex;
			flex-direction: column;
			gap: 10px;
			pointer-events: none;
		}

		.notification-item {
			background: rgba(26, 27, 29, 0.95);
			border-left: 4px solid #00b06f;
			color: #fff;
			padding: 12px 15px;
			border-radius: 6px;
			display: flex;
			align-items: center;
			gap: 12px;
			box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
			font-size: 13px;
			width: 300px;
			animation: slideIn 0.5s ease-out, fadeOut 0.5s ease-in 4.5s forwards;
		}

		@keyframes slideIn {
			from {
				transform: translateX(-120%);
				opacity: 0;
			}

			to {
				transform: translateX(0);
				opacity: 1;
			}
		}

		@keyframes fadeOut {
			from {
				opacity: 1;
			}

			to {
				opacity: 0;
			}
		}

		.notif-img {
			width: 35px;
			border-radius: 5px;
		}

		/* Processing Focus Modal */
		#processing-modal .modal-content {
			text-align: center;
		}

		.progress-container {
			width: 100%;
			background: #222;
			border-radius: 10px;
			height: 18px;
			margin: 20px 0;
			overflow: hidden;
			border: 1px solid #444;
		}

		.progress-bar {
			width: 0%;
			height: 100%;
			background: #00b06f;
			transition: width 0.4s ease;
			border-radius: 10px;
		}

		.progress-val {
			font-size: 12px;
			font-weight: bold;
			position: absolute;
			right: 5px;
			color: #fff;
			top: 1px;
		}

		.p-rel {
			position: relative;
		}

		.fake-steps {
			text-align: left;
			margin-top: 15px;
		}

		.f-step {
			font-size: 13px;
			color: #777;
			margin: 8px 0;
			display: flex;
			align-items: center;
			gap: 8px;
		}

		.f-step.active {
			color: #fff;
			font-weight: bold;
		}

		.f-step.done {
			color: #00b06f;
		}

		.f-step i {
			font-style: normal;
			font-size: 12px;
		}

		/* Fake Comments Section redesigned (Modern Social Layout) */
		.comments-section {
			width: 95%;
			max-width: 600px;
			margin: 55px auto 30px;
			background: rgba(22, 24, 28, 0.85);
			backdrop-filter: blur(20px);
			-webkit-backdrop-filter: blur(20px);
			border: 1px solid rgba(255, 255, 255, 0.08);
			padding: 25px;
			border-radius: 16px;
			box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
			text-align: left;
		}

		.comments-header-premium {
			margin-bottom: 25px;
			position: relative;
		}

		.cp-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 5px 0 15px 0;
		}

		.cp-title-wrap {
			display: flex;
			align-items: center;
			gap: 10px;
		}

		.verify-shield {
			width: 22px;
			height: 22px;
			filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.5));
		}

		.cp-title {
			background: linear-gradient(90deg, #FFD700, #FFA500);
			-webkit-background-clip: text;
			background-clip: text;
			-webkit-text-fill-color: transparent;
			font-weight: 900;
			font-size: 16px;
			letter-spacing: 1.5px;
			text-transform: uppercase;
		}

		.cp-count {
			background: rgba(255, 215, 0, 0.1);
			color: #FFD700;
			border: 1px solid rgba(255, 215, 0, 0.3);
			font-size: 11.5px;
			font-weight: bold;
			padding: 6px 14px;
			border-radius: 30px;
			letter-spacing: 0.5px;
			box-shadow: 0 0 10px rgba(255, 215, 0, 0.1) inset;
		}

		.cp-glow-line {
			height: 1px;
			width: 100%;
			background: rgba(255, 255, 255, 0.1);
			position: relative;
		}

		.cp-glow-line::after {
			content: '';
			position: absolute;
			left: 0;
			top: -1px;
			width: 60px;
			height: 3px;
			background: #FFD700;
			border-radius: 5px;
			box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
		}

		.comment-list {
			display: flex;
			flex-direction: column;
			gap: 22px;
			margin-top: 20px;
		}

		.comment {
			display: flex;
			gap: 14px;
			position: relative;
			align-items: flex-start;
			animation: commentFadeIn 0.5s ease-out;
		}

		@keyframes commentFadeIn {
			from { opacity: 0; transform: translateY(12px); }
			to { opacity: 1; transform: translateY(0); }
		}

		.comment.reply {
			margin-left: 56px;
			margin-top: -8px;
			position: relative;
		}
		
		/* Adds a curved thread line for replies */
		.comment.reply::before {
			content: '';
			position: absolute;
			left: -28px;
			top: -24px;
			width: 20px;
			height: 40px;
			border-left: 2px solid rgba(255,255,255,0.08);
			border-bottom: 2px solid rgba(255,255,255,0.08);
			border-bottom-left-radius: 12px;
		}

		.comment.reply .comment-avatar {
			width: 32px;
			height: 32px;
		}

		.comment-avatar {
			width: 42px;
			height: 42px;
			border-radius: 50%;
			object-fit: cover;
			background-color: #2a2d32;
			border: 1px solid rgba(255, 255, 255, 0.08);
			flex-shrink: 0;
			box-shadow: 0 2px 6px rgba(0,0,0,0.3);
		}

		.comment-container {
			flex: 1;
			display: flex;
			flex-direction: column;
			min-width: 0; /* Prevents overflow */
		}

		.comment-bubble {
			background: transparent;
			padding: 0;
			border: none;
			box-shadow: none;
		}

		.comment-author {
			font-weight: 700;
			font-size: 14px;
			color: #e4e6eb;
			display: inline-flex;
			align-items: center;
			margin-bottom: 4px;
			letter-spacing: 0.2px;
		}
		
		.verified-badge {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			background: #00b06f;
			color: #111;
			width: 14px;
			height: 14px;
			border-radius: 50%;
			font-size: 9px;
			margin-left: 6px;
			box-shadow: 0 0 5px rgba(0, 176, 111, 0.5);
		}

		.comment-text {
			font-size: 14.5px;
			color: #d1d5db;
			line-height: 1.5;
			font-weight: 400;
			word-wrap: break-word;
		}

		.comment-actions {
			font-size: 12px;
			color: #898d92;
			margin-top: 8px;
			font-weight: 600;
			display: flex;
			gap: 18px;
			align-items: center;
		}

		.action-time {
			font-weight: 400;
		}

		.action-btn {
			cursor: pointer;
			transition: color 0.2s;
			display: inline-flex;
			align-items: center;
			gap: 4px;
		}

		.action-btn:hover {
			color: #e4e6eb;
		}

		.action-likes {
			display: inline-flex;
			align-items: center;
			gap: 4px;
			color: #898d92;
			font-weight: 600;
		}

		/* Live Robux Counter Box */
		.live-balance-anim {
			display: none;
			align-items: center;
			justify-content: center;
			background: #111;
			padding: 15px;
			border-radius: 10px;
			border: 2px solid #00b06f;
			margin: 15px auto;
			width: 90%;
			box-shadow: 0 0 15px rgba(0, 176, 111, 0.3);
		}

		.rbx-number {
			font-size: 32px;
			font-weight: bold;
			color: #fff;
			margin: 0 10px;
			letter-spacing: 2px;
		}

		.rbx-currency {
			color: #00b06f;
			font-weight: bold;
			font-size: 24px;
		}

		.amts-grid {
			display: grid;
			gap: 15px;
			margin-top: 15px;
			width: 100%;
		}

		.amt-card {
			background: rgba(0, 0, 0, 0.4);
			border: 2px solid rgba(255, 255, 255, 0.1);
			border-radius: 12px;
			padding: 12px;
			cursor: pointer;
			transition: 0.3s;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.amt-card:hover {
			transform: scale(1.02);
			background: rgba(0, 176, 111, 0.2);
			border-color: #00b06f;
			box-shadow: 0 0 15px rgba(0, 176, 111, 0.5);
		}

		.amt-card.popular {
			border-color: #ffb800;
			background: rgba(255, 184, 0, 0.1);
			box-shadow: 0 0 10px rgba(255, 184, 0, 0.3);
		}

		.amt-card.popular:hover {
			border-color: #ffb800;
			background: rgba(255, 184, 0, 0.2);
		}

		.amt-badge {
			position: absolute;
			top: -10px;
			right: 10px;
			background: #ffb800;
			color: #000;
			font-size: 10px;
			font-weight: bold;
			padding: 3px 8px;
			border-radius: 10px;
			text-transform: uppercase;
		}

		.amt-badge.bonus {
			background: #ff4747;
			color: #fff;
		}

		#box-ownership,
		#box-upsell {
			display: none;
		}

		.global-trust-badges {
			text-align: center;
			padding: 15px;
			margin: 15px auto;
			width: 90%;
			max-width: 550px;
			background: rgba(26, 27, 29, 0.65);
			backdrop-filter: blur(15px);
			-webkit-backdrop-filter: blur(15px);
			border: 1px solid rgba(255, 255, 255, 0.08);
			border-radius: 12px;
			box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
			position: relative;
			z-index: 100;
		}

		.trust-badge-row {
			display: flex;
			justify-content: center;
			gap: 10px;
			margin-bottom: 8px;
			flex-wrap: wrap;
		}

		.t-badge {
			background: rgba(0, 176, 111, 0.1);
			border: 1px solid rgba(0, 176, 111, 0.3);
			padding: 5px 10px;
			border-radius: 6px;
			color: #00b06f;
			font-size: 11px;
			font-weight: bold;
			display: flex;
			align-items: center;
			gap: 4px;
		}

		.t-stars {
			color: #ffb800;
			font-size: 15px;
			letter-spacing: 2px;
		}

		.t-users {
			color: #888;
			font-size: 11px;
			font-weight: normal;
			margin-left: 5px;
		}

		/* ── Momentum Funnel Steps ────────────────────── */
		.momentum-steps {
			width: 90%;
			margin: 0 auto 14px;
			background: rgba(0, 0, 0, 0.35);
			border: 1px solid rgba(0, 176, 111, 0.15);
			border-radius: 10px;
			padding: 12px 16px;
			display: flex;
			flex-direction: column;
			gap: 7px;
		}

		.ms-step {
			display: flex;
			align-items: center;
			gap: 10px;
			font-size: 13px;
			font-weight: 600;
		}

		.ms-step.done {
			color: #00c97e;
		}

		.ms-step.pending {
			color: #ffb800;
		}

		.ms-icon {
			font-size: 15px;
			flex-shrink: 0;
		}

		/* ── CTA Glow on primary buttons ────────────── */
		.box1 button.getrbx,
		#verify-btn,
		#ownership-btn {
			box-shadow: 0 0 20px rgba(0, 176, 111, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3);
			transition: box-shadow 0.3s, background-color 0.3s;
		}

		.box1 button.getrbx:hover,
		#verify-btn:hover,
		#ownership-btn:hover {
			box-shadow: 0 0 30px rgba(0, 176, 111, 0.65), 0 6px 18px rgba(0, 0, 0, 0.4);
		}

		/* ── Sticky CTA button on offers screen ───────── */
		.sticky-claim {
			display: none;
			position: fixed;
			bottom: 70px;
			/* above progress bar */
			left: 10px;
			right: 10px;
			z-index: 9998;
			max-width: 560px;
			margin: 0 auto;
		}

		.sticky-claim.show {
			display: block;
		}

		.sticky-claim-btn {
			width: 100%;
			padding: 15px;
			border-radius: 12px;
			background: linear-gradient(135deg, #00b06f, #00ff87);
			color: #002a15;
			font-size: 16px;
			font-weight: 900;
			border: none;
			cursor: pointer;
			text-transform: uppercase;
			letter-spacing: 1px;
			box-shadow: 0 0 24px rgba(0, 176, 111, 0.5), 0 6px 20px rgba(0, 0, 0, 0.4);
			animation: btn-glow 2s infinite;
		}

		/* --- Premium Personalization Card (Gamer Styled - Mobile Optimized) --- */
		.personal-card {
			width: 95%;
			margin: 0 auto 16px;
			background: rgba(10, 16, 12, 0.4);
			backdrop-filter: blur(12px);
			-webkit-backdrop-filter: blur(12px);
			border: 1px solid rgba(0, 255, 135, 0.15);
			border-radius: 16px;
			padding: 14px;
			display: flex;
			flex-direction: column;
			gap: 10px;
			box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(0, 255, 135, 0.05);
			animation: pcSlideDownFade 0.5s ease-out;
		}

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

		.pc-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 8px;
		}

		.pc-item {
			background: rgba(255, 255, 255, 0.03);
			border: 1px solid rgba(255, 255, 255, 0.05);
			border-radius: 10px;
			padding: 10px 6px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 4px;
			transition: background 0.2s;
			min-width: 0;
		}

		.pc-label {
			font-size: 9px;
			text-transform: uppercase;
			color: #888;
			font-weight: 800;
			letter-spacing: 0.5px;
			text-align: center;
		}

		.pc-value {
			font-size: 11px;
			color: #fff;
			font-weight: 700;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			max-width: 100%;
			text-align: center;
		}

		.pc-status-tag {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			background: rgba(0, 255, 135, 0.1);
			border: 1px solid rgba(0, 255, 135, 0.2);
			border-radius: 8px;
			padding: 8px 12px;
			font-size: 11px;
			color: #00ff87;
			font-weight: bold;
		}

		.live-dot-pulse {
			width: 8px;
			height: 8px;
			background-color: #00ff87;
			border-radius: 50%;
			box-shadow: 0 0 8px #00ff87;
			animation: dotPulse 1.5s infinite;
		}

		@keyframes dotPulse {
			0% { transform: scale(0.95); opacity: 1; }
			50% { transform: scale(1.2); opacity: 0.6; }
			100% { transform: scale(0.95); opacity: 1; }
		}

		/* Improved Mobile Fluidity (Targeting smaller devices and narrow viewports) */
		@media (max-width: 600px) {
			.personal-card { padding: 12px; border-radius: 12px; }
			.pc-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
			.pc-item { padding: 8px 5px; }
			.pc-item:last-child { grid-column: span 2; flex-direction: row; gap: 10px; padding: 10px; }
			.pc-label { font-size: 8px; }
			.pc-value { font-size: 10px; }
		}

		@media (max-width: 360px) {
			.pc-grid { grid-template-columns: 1fr; }
			.pc-item:last-child { grid-column: span 1; }
			.pc-item { flex-direction: row; justify-content: flex-start; padding: 10px 14px; gap: 12px; }
			.pc-icon { font-size: 14px; }
			.pc-label { text-align: left; }
			.pc-value { text-align: left; }
		}



		/* ══════════════════════════════════════════════════════════════════════
		   📱 OFFERS SECTION — Progressive Disclosure ("See More")
		   ══════════════════════════════════════════════════════════════════════
		   HOW IT WORKS:
		     • On page load only the FIRST 3 offer cards are visible
		     • Cards from index 3 onward receive .offer-hidden → display:none
		     • A "See More" button (#see-more-btn) is injected after the wrap
		     • On tap the hidden cards get .offer-visible added (display:flex)
		       and play the offerFadeIn keyframe with a staggered delay so they
		       cascade in like a waterfall rather than all at once
		     • The button then fades out and removes itself from the DOM
		     • smooth scrollIntoView brings the first new card into view
		   ══════════════════════════════════════════════════════════════════════ */

		/* Hidden state ────────────────────────────────────────────────────────
		   display:none collapses the element so it takes zero layout space,
		   preventing a tall invisible gap below the 3rd visible card. */
		.offer-card.offer-hidden {
			display: none;
			opacity: 0;
			transform: translateY(16px);
		}

		/* Revealed state ───────────────────────────────────────────────────────
		   JS sets animationDelay via inline style before adding this class,
		   creating the stagger cascade effect (0ms, 80ms, 160ms, …). */
		.offer-card.offer-visible {
			display: flex !important;
			/* override the display:none from offer-hidden */
			animation: offerFadeIn 0.45s ease forwards;
		}

		/* Fade-in + upward-slide keyframe ──────────────────────────────────── */
		@keyframes offerFadeIn {
			from {
				opacity: 0;
				transform: translateY(16px);
			}

			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		/* ── "See More" button ──────────────────────────────────────────────
		   • Width: 100% → stretches full card-column width on all screens
		   • min-height ≥ 50px → comfortable thumb-tap target
		   • Design matches site palette (green border, dark bg, #00ff87 text)
		   • Transitions: subtle background brighten + border lighten on hover
		   ─────────────────────────────────────────────────────────────────── */
		#see-more-btn {
			/* Layout */
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			width: 100%;
			min-height: 52px;
			/* WCAG 2.5.8 tap-target minimum */
			margin: 14px 0 8px;
			padding: 14px 20px;
			box-sizing: border-box;

			/* Appearance: matches card palette */
			background: linear-gradient(135deg,
					rgba(0, 176, 111, 0.13),
					rgba(0, 255, 135, 0.06));
			border: 1.5px dashed rgba(0, 176, 111, 0.45);
			border-radius: 12px;
			color: #00ff87;
			font-family: 'Poppins', sans-serif;
			font-size: 15px;
			font-weight: 700;
			letter-spacing: 0.4px;
			cursor: pointer;

			/* Interaction */
			-webkit-tap-highlight-color: transparent;
			transition: background 0.25s, border-color 0.25s, transform 0.15s, opacity 0.3s;
		}

		#see-more-btn:hover {
			background: linear-gradient(135deg,
					rgba(0, 176, 111, 0.25),
					rgba(0, 255, 135, 0.14));
			border-color: rgba(0, 255, 135, 0.6);
		}

		#see-more-btn:active {
			transform: scale(0.97);
			/* subtle press-down feel */
		}

		/* Animated chevron arrow inside the button */
		#see-more-btn .smb-arrow {
			font-size: 13px;
			display: inline-block;
			animation: arrowBounce 1.4s ease-in-out infinite;
		}

		/* Subtle vertical bounce to hint "more below" */
		@keyframes arrowBounce {

			0%,
			100% {
				transform: translateY(0);
			}

			50% {
				transform: translateY(3px);
			}
		}

		/* ── Mobile-specific overrides for #see-more-btn (≤ 480px) ────────── */
		@media (max-width: 480px) {
			#see-more-btn {
				font-size: 14px;
				min-height: 50px;
				/* equal to other primary CTAs on mobile */
				border-radius: 10px;
				margin: 12px 0 6px;
			}
		}

		/* ── CRO: Device Selector ── */
		.device-btn {
			background: #393B3D; border: 1px solid #393B3D; border-radius: 8px;
			color: #fff; font-size: 15px; font-weight: 500; padding: 16px; width: 100%; text-align: left;
			cursor: pointer; transition: 0.2s;
			display: flex; align-items: center; gap: 12px;
		}
		.device-btn:hover {
			background: #505254; border-color: #505254;
		}

		/* ── CRO: Modern FAQ Accordion ── */
		.faq-section {
			width: 95%; margin: 25px auto; text-align: left;
		}
		.faq-details {
			background: #111214; border-radius: 8px; border: 1px solid #393B3D; cursor: pointer; transition: 0.2s; margin-bottom: 10px;
		}
		.faq-details:hover { border-color: #505254; }
		.faq-summary {
			font-size: 14px; font-weight: 500; color: #FFFFFF; list-style: none; display: flex; justify-content: space-between; padding: 16px; outline: none;
		}
		.faq-summary::-webkit-details-marker { display: none; }
		.faq-content { padding: 0 16px 16px; font-size: 13px; color: #BDC1C6; line-height: 1.6; }

		/* ── CRO: Post Click Modal ── */
		.post-click-overlay {
			position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
			z-index: 10000; display: none; align-items: center; justify-content: center;
		}
		.post-click-box {
			background: #232527; border: 1px solid #393B3D; border-radius: 8px;
			padding: 24px; width: 85%; max-width: 400px; text-align: center; box-shadow: 0 12px 28px rgba(0,0,0,0.4);
			animation: slideUp 0.3s ease-out;
		}
		@keyframes slideUp { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; }}
	

		/* ── Social Media Jobs Banner ── */
		.smj-banner {
			width: 100%;
			max-width: 600px;
			margin: 0 auto 30px;
			padding: 0 12px;
			box-sizing: border-box;
		}
		.smj-inner {
			background: linear-gradient(145deg, #0a0e1a 0%, #0f1525 40%, #0a0e1a 100%);
			border: 1px solid rgba(99,102,241,0.35);
			border-radius: 18px;
			padding: 26px 22px;
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			position: relative;
			overflow: hidden;
			box-shadow: 0 0 40px rgba(99,102,241,0.12), 0 12px 40px rgba(0,0,0,0.6);
		}
		.smj-inner::before {
			content: '';
			position: absolute;
			top: 0; left: 0; right: 0;
			height: 2px;
			background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899, #3b82f6, #6366f1);
			background-size: 300%;
			animation: smj-border-flow 4s linear infinite;
		}
		@keyframes smj-border-flow {
			0% { background-position: 0% 50%; }
			100% { background-position: 300% 50%; }
		}
		.smj-inner::after {
			content: '';
			position: absolute;
			bottom: -60px; left: -60px;
			width: 200px; height: 200px;
			background: radial-gradient(circle, rgba(99,102,241,0.1) 0%, transparent 70%);
			border-radius: 50%;
			pointer-events: none;
		}
		.smj-platforms {
			display: flex;
			gap: 10px;
			margin-bottom: 16px;
			align-items: center;
			justify-content: center;
			flex-wrap: wrap;
		}
		.smj-platform-pill {
			display: flex;
			align-items: center;
			gap: 5px;
			background: rgba(255,255,255,0.06);
			border: 1px solid rgba(255,255,255,0.1);
			border-radius: 50px;
			padding: 5px 12px;
			font-size: 11px;
			font-weight: 700;
			color: #ccc;
			white-space: nowrap;
		}
		.smj-live-badge {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(168,85,247,0.1));
			border: 1px solid rgba(99,102,241,0.4);
			border-radius: 20px;
			padding: 5px 14px 5px 10px;
			margin-bottom: 16px;
		}
		.smj-live-dot {
			width: 7px; height: 7px;
			background: #22c55e;
			border-radius: 50%;
			animation: smj-live-pulse 1.2s infinite;
			flex-shrink: 0;
		}
		@keyframes smj-live-pulse {
			0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.7); transform: scale(1); }
			50% { box-shadow: 0 0 0 5px rgba(34,197,94,0); transform: scale(1.1); }
		}
		.smj-live-badge span {
			font-size: 10px;
			font-weight: 800;
			color: #a5b4fc;
			letter-spacing: 0.5px;
			text-transform: uppercase;
		}
		.smj-sponsored-label {
			font-size: 9px;
			font-weight: 700;
			letter-spacing: 1.5px;
			text-transform: uppercase;
			color: #555;
			margin-bottom: 12px;
			display: flex;
			align-items: center;
			gap: 6px;
			width: 100%;
		}
		.smj-sponsored-label::before,
		.smj-sponsored-label::after {
			content: '';
			flex: 1;
			height: 1px;
			background: rgba(255,255,255,0.06);
		}
		.smj-headline {
			font-size: clamp(17px, 4.5vw, 22px);
			font-weight: 900;
			color: #fff;
			line-height: 1.35;
			margin-bottom: 10px;
			letter-spacing: -0.3px;
		}
		.smj-hl {
			background: linear-gradient(90deg, #818cf8, #c084fc, #f472b6, #818cf8);
			background-size: 250%;
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent;
			animation: smj-hl-flow 3s linear infinite;
		}
		@keyframes smj-hl-flow {
			0% { background-position: 0% 50%; }
			100% { background-position: 250% 50%; }
		}
		.smj-subtext {
			font-size: clamp(12px, 3vw, 13px);
			color: #8892a4;
			line-height: 1.65;
			margin-bottom: 20px;
			max-width: 380px;
		}
		.smj-proof-row {
			display: flex;
			gap: 10px;
			margin-bottom: 20px;
			justify-content: center;
			flex-wrap: wrap;
		}
		.smj-proof-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			background: rgba(255,255,255,0.04);
			border: 1px solid rgba(99,102,241,0.2);
			border-radius: 12px;
			padding: 10px 16px;
			min-width: 72px;
		}
		.smj-proof-num {
			font-size: 17px;
			font-weight: 900;
			background: linear-gradient(135deg, #818cf8, #c084fc);
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent;
		}
		.smj-proof-label {
			font-size: 9px;
			color: #4a5568;
			text-transform: uppercase;
			letter-spacing: 0.5px;
			margin-top: 3px;
			font-weight: 700;
		}
		.smj-earning-strip {
			background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(168,85,247,0.08));
			border: 1px dashed rgba(99,102,241,0.35);
			border-radius: 10px;
			padding: 10px 18px;
			margin-bottom: 20px;
			font-size: 13px;
			color: #c7d2fe;
			font-weight: 600;
			width: 100%;
			box-sizing: border-box;
		}
		.smj-earning-strip strong { color: #22c55e; }
		.smj-cta {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 9px;
			width: 100%;
			max-width: 380px;
			padding: 16px 24px;
			border-radius: 14px;
			background: linear-gradient(135deg, #6366f1, #8b5cf6, #a855f7);
			color: #fff;
			font-size: clamp(14px, 3.5vw, 16px);
			font-weight: 900;
			text-decoration: none;
			text-transform: uppercase;
			letter-spacing: 0.7px;
			border: none;
			cursor: pointer;
			animation: smj-cta-glow 2.5s ease-in-out infinite;
			transition: transform 0.2s;
			box-sizing: border-box;
		}

		@keyframes smj-cta-glow {
			0%, 100% { box-shadow: 0 6px 22px rgba(99,102,241,0.45); }
			50% { box-shadow: 0 10px 36px rgba(168,85,247,0.7); }
		}

		.smj-cta:hover { transform: translateY(-2px) scale(1.02); }
		.smj-cta:active { transform: scale(0.97); }

		.smj-cta-arrow {
			font-size: 16px;
			animation: smj-arrow-bounce 1.5s ease-in-out infinite;
			display: inline-block;
		}

		@keyframes smj-arrow-bounce {
			0%, 100% { transform: translateX(0); }
			50% { transform: translateX(4px); }
		}

		.smj-disclaimer {
			font-size: 9px;
			color: #2d3748;
			margin-top: 14px;
			line-height: 1.5;
		}

		/* ── Native Banner: mobile-safe ── */
		.native-banner-wrap {
			width: 100%;
			max-width: 600px;
			margin: 0 auto 20px;
			padding: 0 12px;
			box-sizing: border-box;
			overflow: hidden;
			text-align: center;
		}

		@media (max-width: 480px) {
			.smj-inner { padding: 20px 16px; }
			.smj-headline { font-size: 17px; }
			.smj-proof-item { padding: 8px 12px; min-width: 60px; }
			.smj-cta { font-size: 14px; padding: 15px 18px; }
			.smj-platforms { gap: 6px; }
			.smj-platform-pill { font-size: 10px; padding: 4px 10px; }
			.native-banner-wrap { padding: 0 8px; }
		}

/* --- Added Fixes --- */
.amts-grid { 
	display: grid; 
	grid-template-columns: 1fr; 
	gap: 15px; 
}
@media (min-width: 480px) {
	.amts-grid { grid-template-columns: 1fr 1fr; }
}

.offers-wrap { margin-bottom: 130px !important; }
.post-click-box { max-height: 90vh; overflow-y: auto; }

/* Global performance fix */
body { background-attachment: scroll !important; }

/* Remove expensive filters on low end devices */
@media (max-width: 600px) {
    .navbar, .sticky-progress, .post-click-overlay {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* --- URGENCY BOX --- */
.premium-urgency-box {
	background: linear-gradient(145deg, rgba(255,20,20,0.08), rgba(255,71,71,0.02));
	border: 1px solid rgba(255,71,71,0.4);
	border-radius: 12px;
	padding: 14px;
	margin: 12px auto 16px auto;
	width: 95%;
	position: relative;
	overflow: hidden;
	display: none;
}
.premium-urgency-box::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	background: linear-gradient(90deg, #ff4747, #ffb800, #ff4747);
	animation: warningStripes 2s linear infinite;
	background-size: 200% auto;
}
@keyframes warningStripes {
	0% { background-position: 0% center; }
	100% { background-position: 200% center; }
}
.countdown-clock {
	font-size: 34px;
	font-weight: 900;
	color: #ff4747;
	font-family: 'Courier New', monospace;
	text-shadow: 0 0 12px rgba(255,71,71,0.5);
	letter-spacing: 3px;
}
.rewards-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,184,0,0.12);
	color: #ffb800;
	border: 1px dashed rgba(255,184,0,0.6);
	padding: 7px 14px;
	border-radius: 25px;
	font-size: 13px;
	font-weight: 800;
	margin: 0 auto;
	width: fit-content;
}
.task-instruction-box {
	background: linear-gradient(90deg, rgba(0,176,111,0.15), rgba(0,255,135,0.05));
	border-left: 4px solid #00ff87;
	padding: 12px 14px;
	border-radius: 4px 8px 8px 4px;
	color: #fff;
	font-size: 14px;
	line-height: 1.6;
	text-align: left;
	margin-bottom: 16px;
}
.task-instruction-box strong {
	color: #00ff87;
	font-size: 16px;
	display: block;
	margin-bottom: 3px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

@keyframes floatPulse {
	0% { transform: translateY(0px) scale(1); }
	50% { transform: translateY(-8px) scale(1.05); }
	100% { transform: translateY(0px) scale(1); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}