/*
Theme Name: Cellco IT LLC
Theme URI: https://www.cellco.io
Author: Anik Hassan
Author URI: https://www.dmanikh.asia
Description: A premium, raw PHP WordPress theme inspired by Twilio and Infobip, built specifically for Cellco (Application-to-Person) SMS, Voice, and Chat gateway platforms.
Version: 2.0.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: a2p-communications
Tags: custom-menu, translation-ready, dark-mode, developer-friendly, responsive-layout
*/


@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

/**
 * A2P Communications Theme Core Design System & Styling
 * Inspired by Twilio & Infobip
 */

/* ==========================================================================
   CSS Custom Properties & Reset
   ========================================================================== */
:root {
	/* Light Mode (Default Theme) - Logo Color Based */
	--bg-dark: #f8fafc;       /* Slate 50 */
	--bg-darker: #f1f5f9;     /* Slate 100 */
	--bg-card: #ffffff;       /* Pure White */
	--text-primary: #0f172a;  /* Slate 900 */
	--text-secondary: #475569;/* Slate 600 */
	--text-muted: #94a3b8;    /* Slate 400 */
	
	/* Branding accents (Cellco colors) */
	--primary: #ec307c;       /* Logo Pink (AIR) */
	--primary-hover: #d6256b;
	--secondary: #5433e1;     /* Logo Purple/Blue (SPIDER) */
	--secondary-hover: #4526cc;
	--accent-purple: #8b5cf6;
	--accent-green: #10b981;
	--accent-pink: #ec4899;
	--accent-teal: #14b8a6;
	--gradient-primary: linear-gradient(135deg, #ec307c 0%, #5433e1 100%);
	--gradient-text: linear-gradient(90deg, #ec307c 0%, #5433e1 100%);
	
	/* Borders and Glass */
	--border-color: rgba(15, 23, 42, 0.08);
	--border-glow: rgba(233, 32, 112, 0.06);
	--glass-bg: rgba(255, 255, 255, 0.85);
	--glass-border: rgba(15, 23, 42, 0.06);
	--glass-blur: blur(16px);
	
	/* Typography */
	--font-primary: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-title: 'Outfit', sans-serif;
	
	/* Layout & Shadows */
	--container-width: 1280px;
	--radius-sm: 10px;
	--radius-md: 20px;
	--radius-lg: 32px;
	--shadow-glow: 0 15px 50px rgba(84, 51, 225, 0.05), 0 0 25px rgba(236, 48, 124, 0.02);
	--shadow-card: 0 12px 40px rgba(15, 23, 42, 0.03), 0 1px 3px rgba(15, 23, 42, 0.02);
	--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark-theme {
	/* Dark Mode Overrides */
	--bg-dark: #070913;       /* Deep Navy Black */
	--bg-darker: #030408;     /* Rich Black */
	--bg-card: #0d0f1c;       /* Slate Navy Card */
	--text-primary: #f8fafc;  /* Slate 50 */
	--text-secondary: #94a3b8;/* Slate 300 */
	--text-muted: #64748b;    /* Slate 500 */
	
	/* Borders and Glass */
	--border-color: rgba(255, 255, 255, 0.08);
	--border-glow: rgba(233, 32, 112, 0.12);
	--glass-bg: rgba(13, 15, 28, 0.75);
	--glass-border: rgba(255, 255, 255, 0.06);
	
	/* Shadows */
	--shadow-glow: 0 0 40px rgba(233, 32, 112, 0.12);
	--shadow-card: 0 20px 40px rgba(0, 0, 0, 0.4);
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html, body {
	max-width: 100%;
	overflow-x: hidden;
}

body {
	background-color: var(--bg-dark);
	color: var(--text-primary);
	font-family: var(--font-primary);
	line-height: 1.6;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

/* Global playing waves background */
.site-waves-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: -1;
	pointer-events: none;
	overflow: hidden;
	opacity: 0.95;
}

.site-wave {
	position: absolute;
	border-radius: 40%;
	width: 800px;
	height: 800px;
	filter: blur(100px);
	transform-origin: center center;
}

.site-wave-1 {
	top: 5%;
	left: -200px;
	background: radial-gradient(circle, rgba(236, 48, 124, 0.14) 0%, transparent 70%);
	animation: globalWaveFloat1 24s infinite linear;
}

.site-wave-2 {
	bottom: 5%;
	right: -200px;
	background: radial-gradient(circle, rgba(84, 51, 225, 0.14) 0%, transparent 70%);
	animation: globalWaveFloat2 32s infinite linear;
}

.site-wave-3 {
	top: 35%;
	right: 10%;
	background: radial-gradient(circle, rgba(236, 48, 124, 0.08) 0%, transparent 70%);
	animation: globalWaveFloat1 40s infinite linear reverse;
}

/* Dark Theme Ambient Glow & Wave Adjustments */
.dark-theme .site-wave-1 {
	background: radial-gradient(circle, rgba(236, 48, 124, 0.28) 0%, transparent 70%);
}

.dark-theme .site-wave-2 {
	background: radial-gradient(circle, rgba(84, 51, 225, 0.28) 0%, transparent 70%);
}

.dark-theme .site-wave-3 {
	background: radial-gradient(circle, rgba(236, 48, 124, 0.18) 0%, transparent 70%);
}

.dark-theme .site-svg-waves {
	opacity: 0.75;
}

.dark-theme .ambient-wave {
	stroke-width: 2.2px;
	filter: drop-shadow(0 0 5px rgba(236, 48, 124, 0.45)) drop-shadow(0 0 10px rgba(84, 51, 225, 0.3));
}

/* Animated linear stroke waves that drift across the page */
.site-svg-waves {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.35;
	pointer-events: none;
}

.ambient-wave {
	fill: none;
	stroke-width: 1.5px;
	stroke-linecap: round;
	transform-origin: center;
}

.ambient-wave-1 {
	stroke: url(#wave-grad-primary);
	animation: driftWave1 22s ease-in-out infinite alternate;
}

.ambient-wave-2 {
	stroke: url(#wave-grad-secondary);
	animation: driftWave2 30s ease-in-out infinite alternate;
}

.ambient-wave-3 {
	stroke: url(#wave-grad-primary);
	animation: driftWave3 40s ease-in-out infinite alternate;
}

@keyframes driftWave1 {
	0% { transform: translateY(-40px) scaleY(0.85) rotate(0deg); }
	100% { transform: translateY(40px) scaleY(1.15) rotate(2deg); }
}

@keyframes driftWave2 {
	0% { transform: translateY(30px) scaleY(1.1) rotate(0deg); }
	100% { transform: translateY(-50px) scaleY(0.9) rotate(-2deg); }
}

@keyframes driftWave3 {
	0% { transform: translateY(-20px) scaleY(0.95) rotate(0deg); }
	100% { transform: translateY(60px) scaleY(1.05) rotate(1deg); }
}

@keyframes globalWaveFloat1 {
	0% { transform: rotate(0deg) translate(0, 0) scale(1); }
	50% { transform: rotate(180deg) translate(40px, -60px) scale(1.08); }
	100% { transform: rotate(360deg) translate(0, 0) scale(1); }
}

@keyframes globalWaveFloat2 {
	0% { transform: rotate(0deg) translate(0, 0) scale(1); }
	50% { transform: rotate(-180deg) translate(-50px, 30px) scale(1.04); }
	100% { transform: rotate(-360deg) translate(0, 0) scale(1); }
}

a {
	color: inherit;
	text-decoration: none;
	transition: var(--transition);
}

/* Utilities */
.theme-container {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 24px;
	width: 100%;
}

.gradient-text {
	background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	display: inline-block;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	border-radius: var(--radius-sm);
	padding: 10px 20px;
	font-size: 14px;
	cursor: pointer;
	border: 1px solid transparent;
	transition: var(--transition);
	font-family: var(--font-primary);
}

.btn-primary {
	background: var(--primary) !important;
	color: #ffffff !important;
	box-shadow: 0 4px 15px rgba(236, 48, 124, 0.3) !important;
}

.btn-primary:hover {
	background: var(--primary-hover) !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(236, 48, 124, 0.5) !important;
}

.btn-secondary {
	background-color: rgba(255, 255, 255, 0.06);
	color: var(--text-primary);
	border: 1px solid var(--border-color);
}

.btn-secondary:hover {
	background-color: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.2);
	transform: translateY(-2px);
}

.btn-carrier-pricing {
	background: rgba(255, 255, 255, 0.03);
	color: var(--text-primary);
	border: 1px solid rgba(244, 39, 118, 0.4);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
	position: relative;
	overflow: hidden;
	z-index: 1;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 30px;
	border-radius: 30px; /* Pill shape */
	transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Glass reflection shine effect */
.btn-carrier-pricing::after {
	content: '';
	position: absolute;
	top: 0;
	left: -60%;
	width: 25%;
	height: 100%;
	background: linear-gradient(
		to right,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.3) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	transform: skewX(-25deg);
	transition: 0.75s;
	z-index: 2;
}

.btn-carrier-pricing:hover::after {
	left: 120%;
}

.btn-carrier-pricing i {
	font-size: 14px;
	color: #f42776;
	transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.btn-carrier-pricing:hover {
	background: #ffffff;
	color: #f42776 !important;
	border-color: #f42776;
	transform: translateY(-3px);
	box-shadow: 0 10px 25px rgba(244, 39, 118, 0.25);
}

.btn-carrier-pricing:hover i {
	color: #f42776;
	transform: translateX(4px);
}

.btn-link {
	background: none;
	color: var(--text-secondary);
}

.btn-link:hover {
	color: var(--text-primary);
}

.btn-large {
	padding: 14px 28px;
	font-size: 16px;
	border-radius: var(--radius-md);
}

.btn-full-width {
	width: 100%;
	padding: 14px;
	font-size: 15px;
}

/* ==========================================================================
   Header & Megamenu
   ========================================================================== */
.site-header {
	position: fixed;
	top: 16px;
	left: 50%;
	transform: translateX(-50%);
	width: calc(100% - 32px);
	max-width: var(--container-width);
	z-index: 100;
	background-color: rgba(255, 255, 255, 0.72);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 9999px; /* Floating capsule shape like nxcloud.com */
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.2);
	transition: top 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.dark-theme .site-header {
	background-color: rgba(11, 15, 30, 0.65);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.header-container {
	max-width: 100%;
	margin: 0 auto;
	padding: 8px 24px; /* Slimmer layout to match capsule dimensions */
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.logo-link {
	display: flex;
	align-items: center;
	height: 52px;
}

.site-logo {
	height: 46px;
	width: auto;
	display: block;
	transition: var(--transition);
}

.footer-brand-section .logo-link {
	height: 60px;
	margin-bottom: 16px;
	display: inline-flex;
}

.footer-brand-section .site-logo {
	height: 52px;
}

.logo-link:hover .site-logo {
	transform: scale(1.03);
}

.theme-toggle-btn {
	background-color: rgba(15, 23, 42, 0.05);
	border: 2px solid var(--border-color);
	color: var(--text-primary);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 18px;
	transition: var(--transition);
	margin-right: 8px;
	box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
	position: relative;
	z-index: 10;
}

.theme-toggle-btn:hover {
	color: var(--primary);
	border-color: var(--primary);
	background-color: rgba(236, 48, 124, 0.06);
	transform: scale(1.08) translateY(-1px);
	box-shadow: 0 6px 15px rgba(236, 48, 124, 0.12);
}

.dark-theme .theme-toggle-btn {
	background-color: rgba(255, 255, 255, 0.06);
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.15);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 15px rgba(236, 48, 124, 0.15);
}

.dark-theme .theme-toggle-btn:hover {
	background-color: rgba(236, 48, 124, 0.12);
	border-color: var(--primary);
	color: var(--primary);
	box-shadow: 0 6px 20px rgba(236, 48, 124, 0.3);
}

.main-navigation {
	display: flex;
	align-items: center;
}

.nav-menu {
	display: flex;
	list-style: none;
	align-items: center;
	gap: 32px;
}

.nav-menu > li {
	position: relative;
	padding: 10px 0;
}

.nav-menu > li > a {
	color: var(--text-secondary);
	font-weight: 500;
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 6px;
	transition: color 0.22s ease;
}

.nav-menu > li > a i {
	font-size: 10px;
	transition: var(--transition);
}

.nav-menu > li:hover > a {
	color: #f42776; /* Logo pink color on hover */
}

.nav-menu > li:hover > a i {
	transform: rotate(180deg);
}

/* Mega Menu Setup */
.nav-menu > li:hover .mega-menu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.mega-menu {
	position: absolute;
	top: calc(100% + 12px);
	left: 50%;
	transform: translateX(-50%) translateY(10px);
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	box-shadow: var(--shadow-card);
	border-radius: var(--radius-md);
	width: 800px;
	padding: 24px;
	opacity: 0;
	visibility: hidden;
	transition: var(--transition);
	z-index: 10;
}

.mega-menu-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 0.8fr;
	gap: 24px;
}

.mega-menu-column h4 {
	color: var(--text-muted);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 16px;
	font-weight: 600;
}

.mega-menu-item {
	display: flex;
	gap: 16px;
	padding: 12px;
	border-radius: var(--radius-sm);
	margin-bottom: 8px;
	transition: background-color 0.2s ease;
}

.mega-menu-item:hover {
	background-color: rgba(255, 255, 255, 0.03);
}

.item-icon {
	width: 40px;
	height: 40px;
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
}

.item-icon.orange { background-color: rgba(255, 94, 58, 0.1); color: var(--primary); }
.item-icon.blue { background-color: rgba(0, 139, 248, 0.1); color: var(--secondary); }
.item-icon.green { background-color: rgba(16, 185, 129, 0.1); color: var(--accent-green); }
.item-icon.purple { background-color: rgba(139, 92, 246, 0.1); color: var(--accent-purple); }
.item-icon.pink { background-color: rgba(236, 72, 153, 0.1); color: var(--accent-pink); }

.item-details h5 {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 2px;
	transition: color 0.2s ease;
}

.mega-menu-item:hover h5 {
	color: #f42776; /* Logo pink on hover */
}

.item-details p {
	font-size: 12px;
	color: var(--text-secondary);
	line-height: 1.4;
}

.promo-column {
	border-left: 1px solid var(--border-color);
	padding-left: 24px;
}

.promo-box {
	background: linear-gradient(135deg, rgba(255, 94, 58, 0.08), rgba(139, 92, 246, 0.08));
	border: 1px solid rgba(255, 94, 58, 0.15);
	border-radius: var(--radius-sm);
	padding: 20px;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.promo-box .badge {
	align-self: flex-start;
	background: var(--primary);
	color: #ffffff;
	font-size: 10px;
	text-transform: uppercase;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 20px;
	margin-bottom: 12px;
}

.promo-box h4 {
	font-size: 16px;
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: 8px;
	text-transform: none;
	letter-spacing: 0;
}

.promo-box p {
	font-size: 12px;
	color: var(--text-secondary);
	line-height: 1.5;
	margin-bottom: 16px;
}

.promo-link {
	font-size: 12px;
	color: var(--primary);
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
}

.promo-link:hover {
	color: #ff8838;
}

/* Submenu dropdown (fallback) */
.sub-menu {
	position: absolute;
	top: calc(100% + 12px);
	left: 0;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	list-style: none;
	width: 220px;
	padding: 8px 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: var(--transition);
}

.nav-menu > li:hover .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.sub-menu a {
	display: block;
	padding: 10px 20px;
	color: var(--text-secondary);
	font-size: 14px;
	transition: color 0.2s ease;
}

.sub-menu a:hover {
	color: #f42776; /* Logo pink on hover */
	background-color: rgba(255, 255, 255, 0.03);
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 16px;
}

/* Language Selector */
.lang-selector {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.lang-btn {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: var(--text-primary);
	padding: 5px 12px;
	border-radius: 9999px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 6px;
	transition: background 0.22s ease, border-color 0.22s ease;
}

.dark-theme .lang-btn {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.lang-btn:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.22);
}

.lang-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding: 6px 0;
	min-width: 80px;
	box-shadow: var(--shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
	z-index: 110;
	list-style: none;
}

.lang-selector:hover .lang-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.lang-dropdown li {
	margin: 0;
}

.lang-dropdown a {
	display: block;
	padding: 6px 16px;
	color: var(--text-secondary);
	font-size: 13px;
	text-align: center;
	transition: color 0.22s ease, background 0.22s ease;
}

.lang-dropdown a:hover,
.lang-dropdown a.active {
	color: var(--text-primary);
	background: rgba(255, 255, 255, 0.04);
}

.menu-toggle {
	display: none;
	background: none;
	border: none;
	color: var(--text-primary);
	font-size: 20px;
	cursor: pointer;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero-section {
	position: relative;
	padding: 160px 0 100px 0;
	min-height: 100vh;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.hero-bg-gradients {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

.gradient-sphere {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	opacity: 0.25;
}

.blob-1 {
	top: -10%;
	right: 10%;
	width: 500px;
	height: 500px;
	background: var(--primary);
	animation: pulse 12s infinite alternate;
}

.blob-2 {
	bottom: -10%;
	left: 10%;
	width: 600px;
	height: 600px;
	background: var(--secondary);
	animation: pulse 18s infinite alternate-reverse;
}

.gradient-grid-pattern {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: 
		linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
	background-size: 40px 40px;
	mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}

.dark-theme .gradient-grid-pattern {
	background-image: 
		linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

/* Hero section playing waves */
.hero-waves-container {
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 120px;
	z-index: 2;
	pointer-events: none;
	overflow: hidden;
}

.hero-waves-svg {
	width: 100%;
	height: 100%;
}

.hero-wave {
	animation: heroWavePlay 12s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
	transform-origin: center bottom;
}

.hero-wave-1 {
	fill: var(--primary); /* #ec307c */
	opacity: 0.08;
	animation-duration: 12s;
}

.hero-wave-2 {
	fill: var(--secondary); /* #5433e1 */
	opacity: 0.12;
	animation-duration: 18s;
	animation-delay: -3s;
}

.hero-wave-3 {
	fill: var(--primary); /* #ec307c */
	opacity: 0.06;
	animation-duration: 24s;
	animation-delay: -6s;
}

@keyframes heroWavePlay {
	0% { transform: scaleY(1) scaleX(1) translateY(0); }
	50% { transform: scaleY(1.18) scaleX(1.03) translateY(-12px); }
	100% { transform: scaleY(1) scaleX(1) translateY(0); }
}

.hero-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.12fr 0.88fr;
	gap: 100px;
	align-items: center;
}

.hero-badge {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	color: var(--text-secondary);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 30px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 24px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.hero-badge .status-dot {
	width: 6px;
	height: 6px;
	background-color: #10b981; /* Premium Emerald Green */
	border-radius: 50%;
	display: inline-block;
	position: relative;
	animation: statusPulse 2s infinite ease-in-out;
}

@keyframes statusPulse {
	0%, 100% {
		transform: scale(1);
		opacity: 1;
		box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
	}
	50% {
		transform: scale(1.15);
		opacity: 0.8;
		box-shadow: 0 0 0 4px rgba(16, 185, 129, 0);
	}
}

.hero-title {
	font-family: var(--font-title);
	font-size: 56px;
	line-height: 1.15;
	font-weight: 800;
	margin-bottom: 20px;
	color: var(--text-primary);
	letter-spacing: -1px;
}

.hero-description {
	font-size: 18px;
	color: var(--text-secondary);
	margin-bottom: 40px;
	max-width: 540px;
	line-height: 1.6;
}

.hero-actions {
	display: flex;
	gap: 16px;
	margin-bottom: 60px;
}

.hero-stats {
	display: flex;
	gap: 40px;
	border-top: 1px solid var(--border-color);
	padding-top: 32px;
}

.stat-item {
	display: flex;
	flex-direction: column;
}

.stat-number {
	font-family: var(--font-title);
	font-size: 28px;
	font-weight: 700;
	color: #000000;
}

.stat-label {
	font-size: 12px;
	color: #000000;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	opacity: 0.65; /* Lighter black / soft black look */
}

.dark-theme .stat-number {
	color: #ffffff;
}

.dark-theme .stat-label {
	color: #ffffff;
	opacity: 0.60; /* 60% white colour */
}

/* Phone Simulator */
.hero-visual {
	display: flex;
	justify-content: flex-end; /* Align the card perfectly to the right side */
	position: relative;
}

.hero-usecase-box {
	background-color: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	width: 100% !important;
	max-width: 520px !important; /* Cap width for perfect proportions */
	margin-left: auto !important; /* Force push to the right edge */
	position: relative; /* relative for wave Y positioning */
}

.dark-theme .hero-usecase-box {
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

/* Tabs inside hero box */
.hero-usecase-box .usecase-tabs-container {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}

.hero-usecase-box .usecase-tabs {
	display: flex;
	background-color: #ffffff !important;
	border: 1px solid rgba(15, 23, 42, 0.06) !important;
	padding: 4px;
	border-radius: 30px;
	gap: 4px;
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
}

.dark-theme .hero-usecase-box .usecase-tabs {
	background-color: #1e293b !important;
	border-color: rgba(255, 255, 255, 0.05) !important;
}

.hero-usecase-box .usecase-tab-btn {
	background: none !important;
	border: none !important;
	padding: 8px 18px;
	font-family: 'Outfit', sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: #475569 !important;
	border-radius: 20px;
	cursor: pointer;
	transition: all 0.3s ease;
}

.dark-theme .hero-usecase-box .usecase-tab-btn {
	color: #94a3b8 !important;
}

.hero-usecase-box .usecase-tab-btn:hover {
	color: #0f172a !important;
}

.dark-theme .hero-usecase-box .usecase-tab-btn:hover {
	color: #ffffff !important;
}

.hero-usecase-box .usecase-tab-btn.active {
	background-color: #ec307c !important; /* Logo Pink (AIR) */
	color: #ffffff !important;
	font-weight: 600;
}

/* Grid layout under tabs */
.hero-usecase-grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 16px;
	align-items: start;
}

/* Shrink phone container slightly inside hero grid */
.hero-usecase-grid .usecase-phone-column {
	display: flex;
	justify-content: center;
}

.hero-usecase-grid .phone-simulator-container {
	width: 100%;
	max-width: 250px; /* Reduced max-width for side-by-side fit */
}

/* Custom pills vertical list styling inside hero */
.hero-usecase-box .usecase-pills-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 24px;
}

.hero-usecase-box .usecase-pill {
	background: none !important;
	border: none !important;
	text-align: left;
	padding: 10px 16px;
	font-family: 'Outfit', sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: #475569 !important;
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: none !important;
}

.dark-theme .hero-usecase-box .usecase-pill {
	color: #94a3b8 !important;
}

.hero-usecase-box .usecase-pill:hover {
	color: #0f172a !important;
	background-color: rgba(255, 255, 255, 0.4) !important;
}

.dark-theme .hero-usecase-box .usecase-pill:hover {
	color: #ffffff !important;
	background-color: rgba(255, 255, 255, 0.05) !important;
}

.hero-usecase-box .usecase-pill.active {
	background-color: #ffffff !important;
	color: #0f172a !important;
	box-shadow: 0 4px 15px rgba(15, 23, 42, 0.05) !important;
	border: 1px solid rgba(15, 23, 42, 0.04) !important;
	font-weight: 600;
}

.dark-theme .hero-usecase-box .usecase-pill.active {
	background-color: rgba(255, 255, 255, 0.08) !important;
	color: #ffffff !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

.hero-usecase-box .usecase-pill span {
	color: inherit !important;
}

.hero-usecase-box .usecase-pill i {
	display: none !important;
}

/* Phone Simulator mockup specific light theme styles nested under hero-usecase-box */
.hero-usecase-box .phone-simulator-mockup {
	background-color: #d6e0f5 !important;
	border: 10px solid #ffffff !important; /* White bezel */
	border-radius: 32px !important;
	box-shadow: 0 15px 35px rgba(15, 23, 42, 0.1) !important;
	overflow: hidden;
	position: relative;
	aspect-ratio: 9 / 16.5; /* Slightly taller to ensure bottom input bar is fully visible and not cut off */
	display: flex;
	flex-direction: column;
	width: 100% !important;
	height: auto !important;
}

.hero-usecase-box .phone-camera-notch {
	background-color: #ffffff !important;
	height: 20px;
	width: 100px;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
	z-index: 10;
}

.hero-usecase-box .phone-screen-display {
	background-color: #d6e0f5 !important;
	flex: 1;
	display: flex;
	flex-direction: column;
	position: relative;
	padding-top: 20px;
}

.hero-usecase-box .phone-status-bar {
	display: flex;
	justify-content: space-between;
	padding: 4px 12px;
	font-size: 10px;
	color: #475569 !important;
	font-weight: 500;
	z-index: 5;
}

.hero-usecase-box .phone-status-icons {
	display: flex;
	gap: 4px;
	color: #475569 !important;
}

.hero-usecase-box .phone-chat-header {
	display: flex;
	align-items: center;
	padding: 8px 12px;
	background-color: #d6e0f5 !important;
	border-bottom: 1px solid rgba(15, 23, 42, 0.05) !important;
	color: #0f172a !important;
}

.hero-usecase-box .phone-chat-header .chat-back {
	font-size: 12px;
	margin-right: 8px;
	cursor: pointer;
	color: #475569 !important;
}

.hero-usecase-box .phone-chat-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: #ffefe5 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 8px;
	font-size: 12px;
	color: #ff5e3a !important;
}

.hero-usecase-box .phone-chat-user-info {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.hero-usecase-box .phone-chat-username {
	font-size: 12px;
	font-weight: 700;
	color: #0f172a !important;
}

.hero-usecase-box .phone-verified-badge {
	color: #10b981 !important;
	font-size: 10px;
	display: flex;
	align-items: center;
}

.hero-usecase-box .phone-chat-status {
	font-size: 9px;
	color: #475569 !important;
}

.hero-usecase-box .phone-chat-header .chat-menu {
	font-size: 12px;
	color: #475569 !important;
}

.hero-usecase-box .phone-chat-body {
	flex: 1;
	padding: 10px !important;
	display: flex;
	flex-direction: column;
	gap: 8px !important;
	overflow-y: auto;
	background-color: #d6e0f5 !important;
	min-height: 0 !important; /* Critical fix to allow shrinking and prevent pushing footer out */
}

.hero-usecase-box .phone-chat-time {
	text-align: center;
	font-size: 8px;
	color: #64748b !important;
}

.hero-usecase-box .phone-message-card {
	background-color: #ffffff !important;
	border-radius: 12px !important;
	border-top-left-radius: 4px !important;
	padding: 10px;
	box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04) !important;
	max-width: 92%;
}

.hero-usecase-box .phone-message-card p {
	font-size: 11px;
	line-height: 1.4;
	color: #0f172a !important;
}

.hero-usecase-box .phone-message-card .expire-text {
	color: #2563eb !important;
	font-size: 10px;
	margin-top: 4px;
}

.hero-usecase-box .phone-message-divider {
	height: 1px;
	background-color: #e2e8f0 !important;
	margin: 8px 0 6px 0;
}

.hero-usecase-box .phone-autofill-btn {
	color: #2563eb !important;
	font-size: 11px;
}

.hero-usecase-box .phone-opt-out-text {
	font-size: 8px;
	color: #64748b !important;
}

.hero-usecase-box .phone-response-buttons {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.hero-usecase-box .phone-btn-primary {
	background-color: #ec307c !important; /* Logo Pink (AIR) */
	color: #ffffff !important;
	padding: 8px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 600;
	transition: background-color 0.2s;
}

.hero-usecase-box .phone-btn-primary:hover {
	background-color: #d6256b !important;
}

.hero-usecase-box .phone-btn-secondary {
	background-color: #ffffff !important;
	border: 1px solid #cbd5e1 !important;
	color: #475569 !important;
	padding: 8px;
	border-radius: 20px;
	font-size: 11px;
}

.hero-usecase-box .phone-chat-input-bar {
	padding: 8px 12px;
	background-color: #d6e0f5 !important;
	border-top: 1px solid rgba(15, 23, 42, 0.05) !important;
	gap: 8px !important;
	color: #475569 !important;
	font-size: 12px;
	display: flex;
	align-items: center;
}

.hero-usecase-box .phone-chat-input-bar i {
	flex-shrink: 0 !important;
}

.hero-usecase-box .phone-mock-input {
	background-color: #ffffff !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 16px;
	padding: 5px 10px;
	font-size: 10px;
	flex: 1 !important;
	min-width: 0 !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.phone-mock-input {
	min-width: 0 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

/* ==========================================================================
   Mobile Simulator Responsive Layout Stack & Vertical Wave Keyframes
   ========================================================================== */
@media (max-width: 768px) {
	.hero-usecase-grid {
		grid-template-columns: 1fr !important; /* Stack simulator phone and pills vertically */
		gap: 24px !important;
		justify-items: center;
	}

	.hero-usecase-grid .usecase-phone-column {
		width: 100%;
		display: flex;
		justify-content: center;
		order: 1; /* Place phone simulator above the pills */
	}

	.hero-usecase-grid .phone-simulator-container {
		max-width: 270px !important; /* Enlarge phone simulator for mobile reading */
	}
	
	.hero-usecase-box .phone-simulator-mockup {
		aspect-ratio: 9 / 16 !important; /* Well proportioned bezel ratio */
	}

	.hero-usecase-box .usecase-pills-list {
		order: 2; /* Place pills list below the phone simulator */
		margin-top: 0 !important;
		width: 100%;
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important; /* Compact 2-column pill layout */
		gap: 8px !important;
	}

	.hero-usecase-box .usecase-pill {
		font-size: 11px !important;
		padding: 8px 10px !important;
		justify-content: center !important;
		text-align: center !important;
	}
}

@keyframes waveFlowUp {
	0% {
		height: 0;
		opacity: 0;
		transform: translateY(0);
	}
	20% {
		height: 40px;
		opacity: 1;
	}
	80% {
		height: 40px;
		opacity: 0.9;
	}
	100% {
		height: 0;
		opacity: 0;
		transform: translateY(var(--travel-distance-y));
	}
}


.phone-simulator {
	background-color: #03050e;
	border: 10px solid #1e293b;
	border-radius: 40px;
	width: 100%;
	height: 100%;
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), var(--shadow-glow);
	overflow: hidden;
	position: relative;
	display: flex;
	flex-direction: column;
}

.phone-header {
	height: 30px;
	background-color: #1e293b;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.speaker {
	width: 50px;
	height: 4px;
	background-color: #0f172a;
	border-radius: 2px;
}

.camera {
	width: 8px;
	height: 8px;
	background-color: #0f172a;
	border-radius: 50%;
	position: absolute;
	right: 30%;
}

.phone-screen {
	flex-grow: 1;
	background-color: #0c0f1d;
	display: flex;
	flex-direction: column;
	position: relative;
}

.status-bar {
	height: 24px;
	padding: 0 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 11px;
	color: #64748b !important;
}

.status-icons {
	display: flex;
	gap: 6px;
}

.chat-header {
	padding: 12px 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
	display: flex;
	align-items: center;
	gap: 10px;
}

.chat-back {
	color: var(--primary);
	font-size: 14px;
}

.chat-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 94, 58, 0.1);
	border: 1px solid rgba(255, 94, 58, 0.25);
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}

.chat-user-info {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.chat-username {
	font-size: 13px;
	font-weight: 600;
	color: #ffffff !important;
}

.chat-status {
	font-size: 10px;
	color: #10b981 !important;
}

.chat-call {
	color: #94a3b8 !important;
	font-size: 12px;
}

.chat-body {
	flex-grow: 1;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	overflow-y: auto;
}

.chat-time {
	align-self: center;
	font-size: 10px;
	color: #64748b !important;
	margin-bottom: 8px;
}

.chat-bubble {
	max-width: 85%;
	padding: 12px;
	border-radius: 16px;
	font-size: 12px;
	line-height: 1.4;
	position: relative;
}

.chat-bubble.received {
	background-color: #1e293b !important;
	color: #ffffff !important;
	align-self: flex-start;
	border-bottom-left-radius: 4px;
}

.chat-bubble.received p, 
.chat-bubble.received strong {
	color: #ffffff !important;
}

.bubble-time {
	display: block;
	text-align: right;
	font-size: 9px;
	color: #64748b !important;
	margin-top: 6px;
}

.success-icon {
	color: #10b981 !important;
	margin-right: 4px;
}

.chat-input-bar {
	padding: 12px 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
	display: flex;
	align-items: center;
	gap: 12px;
	color: #64748b !important;
}

.mock-input {
	flex-grow: 1;
	background-color: #1e293b !important;
	border-radius: 20px;
	padding: 8px 16px;
	font-size: 12px;
	color: #94a3b8 !important;
}

.send-btn-icon {
	color: var(--primary);
}

/* Floating Cards */
.floating-badge-card {
	position: absolute;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%);
	border: 1px solid rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	padding: 14px 18px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	gap: 14px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.1);
	width: 240px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 15;
}

.dark-theme .floating-badge-card {
	background: linear-gradient(135deg, rgba(15, 23, 42, 0.6) 0%, rgba(15, 23, 42, 0.3) 100%);
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.floating-badge-card:hover {
	transform: translateY(-5px) scale(1.02);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
	border-color: var(--primary);
}

.card-api {
	top: 18%;
	left: -28%;
}

.card-delivery {
	bottom: 28%;
	right: -28%;
}

.badge-icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: linear-gradient(135deg, rgba(236, 48, 124, 0.2) 0%, rgba(84, 51, 225, 0.2) 100%);
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
	box-shadow: 0 4px 10px rgba(236, 48, 124, 0.15);
}

.badge-icon.green {
	background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.2) 100%);
	color: #10b981;
	box-shadow: 0 4px 10px rgba(16, 185, 129, 0.15);
}

.badge-info h6 {
	font-family: 'Outfit', sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: var(--text-color);
	margin: 0 0 2px 0;
	letter-spacing: 0.3px;
}

.badge-info p {
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	color: var(--text-muted);
	margin: 0;
	font-weight: 500;
}

/* Animations */
@keyframes pulse {
	0% { transform: scale(1) translate(0, 0); opacity: 0.2; }
	50% { transform: scale(1.1) translate(20px, -20px); opacity: 0.3; }
	100% { transform: scale(1) translate(0, 0); opacity: 0.2; }
}

.animate-float-slow {
	animation: float 6s ease-in-out infinite;
}

.animate-float-fast {
	animation: float 4s ease-in-out infinite alternate;
}

@keyframes float {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-10px); }
	100% { transform: translateY(0px); }
}

.animate-bubble-1 {
	opacity: 0;
	transform: translateY(10px);
	animation: showBubble 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards 1s;
}

.animate-bubble-2 {
	opacity: 0;
	transform: translateY(10px);
	animation: showBubble 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards 3.5s;
}

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

/* ==========================================================================
   Trust Section
   ========================================================================== */
.trust-section {
	padding: 40px 0;
	background-color: transparent;
}

.trust-section .theme-container {
	background: linear-gradient(135deg, rgba(236, 48, 124, 0.02) 0%, rgba(84, 51, 225, 0.03) 50%, rgba(236, 48, 124, 0.02) 100%), var(--glass-bg);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: 36px 48px;
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	box-shadow: var(--shadow-card);
}

@media (max-width: 768px) {
	.trust-section .theme-container {
		padding: 24px 20px;
	}
}

.trust-label {
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	color: var(--text-secondary); /* Darker slate/grey, looks like soft black */
	letter-spacing: 1.5px;
	margin-bottom: 24px;
}

.logo-slider-container {
	overflow: hidden;
	width: 100%;
	position: relative;
	padding: 10px 0;
	/* Soft linear gradient fade masks on left and right bounds */
	mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
	/* Force LTR direction always — marquee must scroll left regardless of page RTL mode */
	direction: ltr;
}

.logo-slider-track {
	display: flex;
	width: max-content;
	animation: logoScroll 40s linear infinite; /* Smooth slow-paced infinite loop translation */
}

/* Both side partners logo continuously running, no paused on hover */
.logo-slider-track--reverse {
	display: flex;
	width: max-content;
	animation: logoScrollReverse 40s linear infinite;
}

.logo-slider-set {
	display: flex;
	align-items: center;
	gap: 48px;
	padding-right: 48px;
	flex-shrink: 0;
}

.logo-item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 38px; /* Force identical container heights */
	width: 120px; /* Force identical container widths for balanced visual flow */
	transition: var(--transition);
	flex-shrink: 0; /* Prevent flexbox from shrinking logos */
}

.logo-item img {
	max-height: 100%;
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain; /* Scale down proportionally to fit container bounds exactly */
	filter: brightness(0); /* Clean monochrome black color style */
	opacity: 0.6; /* Muted soft grey-black tone matching the previous text logo styling */
	transition: var(--transition);
}

.logo-item img:hover {
	opacity: 0.95;
	filter: brightness(0) drop-shadow(0 0 3px rgba(0,0,0,0.1));
}

.dark-theme .logo-item img {
	filter: brightness(0) invert(1);
	opacity: 0.55;
}

.dark-theme .logo-item img:hover {
	opacity: 0.95;
	filter: brightness(0) invert(1) drop-shadow(0 0 4px rgba(255, 255, 255, 0.15));
}

@keyframes logoScroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%); /* Loop exactly half track width of duplicated items */
	}
}

@keyframes logoScrollReverse {
	0% {
		transform: translateX(-50%);
	}
	100% {
		transform: translateX(0);
	}
}

/* ==========================================================================
   Features Section
   ========================================================================== */
/* ==========================================================================
   Bento Grid Features Section — Advanced Animated Layout
   ========================================================================== */

.bento-section {
	padding: 120px 0;
	position: relative;
	overflow: hidden;
}

/* ---------- Header ---------- */
.bento-header {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 72px;
}

.bento-eyebrow {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--primary);
	background: rgba(255, 94, 58, 0.1);
	border: 1px solid rgba(255, 94, 58, 0.2);
	border-radius: 100px;
	padding: 4px 16px;
	margin-bottom: 20px;
}

.bento-title {
	font-family: var(--font-title);
	font-size: clamp(28px, 4vw, 46px);
	font-weight: 400;
	color: var(--text-primary);
	line-height: 1.18;
	letter-spacing: -1px;
	margin-bottom: 16px;
}

.bento-title em {
	font-style: italic;
	color: var(--primary);
}

.bento-title strong {
	font-weight: 800;
}

.bento-subtitle {
	font-size: 16px;
	color: var(--text-secondary);
	line-height: 1.6;
	max-width: 540px;
	margin: 0 auto;
}

/* ---------- Grid Layout ---------- */
.bento-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: auto;
	gap: 20px;
}

/* ---------- Base Card ---------- */
.bento-card {
	position: relative;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 20px;
	overflow: hidden;
	text-decoration: none;
	display: block;
	cursor: pointer;
	transition: transform 0.35s cubic-bezier(0.22,1,0.36,1),
	            border-color 0.35s ease,
	            box-shadow 0.35s ease;
}

.bento-card:hover {
	transform: translateY(-6px) scale(1.005);
	box-shadow: 0 24px 64px rgba(0,0,0,0.35);
}

/* Wide cards span 2 columns */
.bento-card--wide {
	grid-column: span 2;
}

/* Tall cards span 2 rows */
.bento-card--tall {
	grid-row: span 2;
}

/* Normal cards span 1 column */
.bento-card--normal {
	grid-column: span 1;
}

/* ---------- Inner Layout ---------- */
.bento-card__inner {
	display: flex;
	height: 100%;
	min-height: 280px;
	padding: 36px;
	gap: 32px;
	position: relative;
	z-index: 2;
}

.bento-card--tall .bento-card__inner {
	flex-direction: column;
	min-height: 560px;
}

.bento-card--normal .bento-card__inner {
	flex-direction: column;
	min-height: 300px;
}

.bento-card__content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bento-card__visual {
	flex-shrink: 0;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bento-card--wide .bento-card__visual {
	width: 45%;
}

.bento-card--tall .bento-card__visual,
.bento-card--normal .bento-card__visual {
	width: 100%;
	flex: 1;
}

/* ---------- Badge ---------- */
.bento-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	padding: 6px 14px 6px 10px;
	border-radius: 100px;
	width: fit-content;
}

.bento-badge i { font-size: 14px; }

/* Brand Colors: #f42776 (pink) and #5635e5 (purple) for A2P,OTP,RCS,Voice */
.bento-badge--orange { background: #f42776; color: #fff; }
.bento-badge--blue   { background: #5635e5; color: #fff; }
.bento-badge--purple { background: #f42776; color: #fff; }
.bento-badge--green  { background: #5635e5; color: #fff; }
.bento-badge--teal   { background: #25D366; color: #fff; }
.bento-badge--indigo { background: #6366F1; color: #fff; }

/* ---------- Card Typography ---------- */
.bento-card__title {
	font-family: var(--font-title);
	font-size: 18px;
	font-weight: 700;
	color: var(--text-primary);
	line-height: 1.35;
	letter-spacing: -0.3px;
}

.bento-card--wide .bento-card__title {
	font-size: 22px;
}

.bento-card__desc {
	font-size: 13.5px;
	color: var(--text-secondary);
	line-height: 1.6;
	flex: 1;
}

/* ---------- Tags ---------- */
.bento-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: auto;
}

.bento-tags span {
	font-size: 11px;
	font-weight: 600;
	color: var(--text-secondary);
	background: rgba(255,255,255,0.05);
	border: 1px solid var(--border-color);
	border-radius: 6px;
	padding: 3px 10px;
	letter-spacing: 0.3px;
}

/* ---------- Arrow ---------- */
.bento-arrow {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255,255,255,0.06);
	border: 1px solid var(--border-color);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	color: var(--text-secondary);
	opacity: 0;
	transform: translate(-4px, 4px);
	transition: opacity 0.3s ease, transform 0.3s ease;
	z-index: 3;
}

.bento-card:hover .bento-arrow {
	opacity: 1;
	transform: translate(0, 0);
}

/* ---------- Glow Effects per Color ---------- */
.bento-glow {
	position: absolute;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	filter: blur(80px);
	opacity: 0;
	transition: opacity 0.5s ease;
	pointer-events: none;
	z-index: 1;
	bottom: -80px;
	right: -80px;
}

.bento-card:hover .bento-glow { opacity: 0.1; }
.bento-glow--orange { background: #f42776; }
.bento-glow--blue   { background: #5635e5; }
.bento-glow--purple { background: #f42776; }
.bento-glow--green  { background: #5635e5; }
.bento-glow--teal   { background: #25D366; }
.bento-glow--indigo { background: #6366F1; }

/* ---------- Per-color Card Borders on Hover ---------- */
.bento-card--orange:hover { border-color: rgba(244, 39, 118, 0.4); }
.bento-card--blue:hover   { border-color: rgba(86, 53, 229, 0.4); }
.bento-card--purple:hover { border-color: rgba(244, 39, 118, 0.4); }
.bento-card--green:hover  { border-color: rgba(86, 53, 229, 0.4); }
.bento-card--teal:hover   { border-color: rgba(37, 211, 102, 0.4); }
.bento-card--indigo:hover { border-color: rgba(99, 102, 241, 0.4); }

/* ---------- Mouse-spotlight gradient (applied via JS) ---------- */
.bento-card::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 20px;
	background: radial-gradient(400px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.04), transparent 70%);
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
	z-index: 1;
}

.bento-card:hover::before { opacity: 1; }

/* ==========================================================================
   Bento Visuals — A2P SMS
   ========================================================================== */
.bento-visual--sms {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 200px;
}

.sms-notif {
	position: absolute;
	background: rgba(255,255,255,0.06);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 14px;
	padding: 12px 16px;
	width: 180px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sms-notif--1 {
	top: 10px; left: 10px;
	animation: smsFloat 3s ease-in-out infinite;
}

.sms-notif--2 {
	top: 80px; left: 60px;
	animation: smsFloat 3s ease-in-out 1s infinite;
}

.sms-notif--3 {
	top: 150px; left: 20px;
	animation: smsFloat 3s ease-in-out 2s infinite;
}

@keyframes smsFloat {
	0%, 100% { transform: translateY(0); }
	50%       { transform: translateY(-6px); }
}

.sms-notif__header {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 10px;
	color: var(--text-secondary);
}

.sms-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}
.sms-dot--orange { background: #FF5E3A; }
.sms-dot--blue   { background: #008BF8; }
.sms-dot--green  { background: #10B981; }

.sms-app { flex: 1; font-weight: 600; font-size: 10px; color: var(--text-primary); }
.sms-time { font-size: 9px; opacity: 0.5; }

.sms-notif__body { display: flex; flex-direction: column; gap: 4px; }

.sms-bar {
	height: 5px;
	background: rgba(255,255,255,0.12);
	border-radius: 4px;
}
.sms-bar--full      { width: 100%; }
.sms-bar--two-thirds{ width: 66%; }
.sms-bar--half      { width: 50%; }
.sms-bar--third     { width: 33%; }

.sms-check {
	font-size: 10px;
	color: #10B981;
	align-self: flex-end;
}

.bento-stat-pill {
	position: absolute;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.12);
	backdrop-filter: blur(8px);
	border-radius: 10px;
	padding: 8px 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.bento-stat-pill--1 { bottom: 20px; right: 10px; }
.bento-stat-pill--2 { bottom: 80px; right: 50px; }

.pill-num {
	font-size: 14px;
	font-weight: 800;
	color: var(--text-primary);
	font-family: var(--font-title);
}

.pill-lbl {
	font-size: 9px;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.grid-dots {
	position: absolute;
	top: 0; right: 0;
	width: 120px; height: 120px;
	background-image: radial-gradient(rgba(255,255,255,0.12) 1px, transparent 1px);
	background-size: 14px 14px;
	border-radius: 12px;
	opacity: 0.5;
}

.grid-dots--alt {
	bottom: 0; left: 0;
	top: auto; right: auto;
}

/* ==========================================================================
   Bento Visuals — OTP SMS
   ========================================================================== */
.bento-visual--otp {
	flex-direction: column;
	gap: 24px;
}

.otp-card {
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(0, 139, 248, 0.25);
	border-radius: 16px;
	padding: 20px;
	width: 100%;
	max-width: 240px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-self: center;
}

.otp-card__label {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--text-secondary);
}

.otp-digits {
	display: flex;
	gap: 6px;
	justify-content: center;
}

.otp-d {
	width: 34px;
	height: 42px;
	background: rgba(0, 139, 248, 0.1);
	border: 1px solid rgba(0, 139, 248, 0.3);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: 800;
	font-family: var(--font-title);
	color: var(--text-primary);
	animation: otpPulse 2s ease-in-out infinite;
	animation-delay: calc(var(--i) * 0.1s);
}

@keyframes otpPulse {
	0%, 100% { border-color: rgba(0,139,248,0.3); box-shadow: none; }
	50%       { border-color: rgba(0,139,248,0.7); box-shadow: 0 0 8px rgba(0,139,248,0.3); }
}

.otp-progress {
	height: 3px;
	background: rgba(255,255,255,0.08);
	border-radius: 4px;
	overflow: hidden;
}

.otp-progress__bar {
	height: 100%;
	width: 70%;
	background: linear-gradient(90deg, #008BF8, #00D2FF);
	border-radius: 4px;
	animation: otpTimer 30s linear infinite;
}

@keyframes otpTimer {
	from { width: 100%; }
	to   { width: 0%; }
}

.otp-expire {
	font-size: 10px;
	color: var(--text-secondary);
	text-align: center;
}

.otp-countdown { font-weight: 700; color: #008BF8; }

.otp-rings {
	position: relative;
	width: 100px;
	height: 100px;
	align-self: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.otp-ring {
	position: absolute;
	border-radius: 50%;
	border: 1px solid rgba(0, 139, 248, 0.2);
	animation: ringPulse 2.5s ease-in-out infinite;
}

.otp-ring--1 { width: 60px; height: 60px; animation-delay: 0s; }
.otp-ring--2 { width: 80px; height: 80px; animation-delay: 0.5s; }
.otp-ring--3 { width: 100px; height: 100px; animation-delay: 1s; }

@keyframes ringPulse {
	0%, 100% { opacity: 0.2; transform: scale(1); }
	50%       { opacity: 0.8; transform: scale(1.05); }
}

.otp-icon-center {
	width: 40px; height: 40px;
	background: rgba(0, 139, 248, 0.15);
	border: 1px solid rgba(0, 139, 248, 0.4);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	color: #008BF8;
	z-index: 2;
}

/* ==========================================================================
   Bento Visuals — RCS Messaging
   ========================================================================== */
.bento-visual--rcs {
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}

.rcs-card {
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(139, 92, 246, 0.25);
	border-radius: 16px;
	overflow: hidden;
	width: 100%;
	max-width: 220px;
	transition: transform 0.3s ease;
}

.bento-card:hover .rcs-card {
	transform: translateY(-4px);
}

.rcs-card__media {
	background: linear-gradient(135deg, rgba(139,92,246,0.3), rgba(99,102,241,0.3));
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	color: #8B5CF6;
}

.rcs-card__body {
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.rcs-line {
	height: 6px;
	background: rgba(255,255,255,0.1);
	border-radius: 4px;
}

.rcs-line--title { width: 70%; background: rgba(255,255,255,0.18); }
.rcs-line--text  { width: 90%; }

.rcs-card__btns {
	display: flex;
	gap: 6px;
	margin-top: 4px;
}

.rcs-btn {
	font-size: 10px;
	padding: 4px 10px;
	border-radius: 6px;
	font-weight: 700;
	border: 1px solid rgba(139,92,246,0.4);
	color: #8B5CF6;
	background: transparent;
}

.rcs-btn--fill {
	background: #8B5CF6;
	color: #fff;
	border-color: #8B5CF6;
}

.rcs-verified {
	font-size: 11px;
	color: #10B981;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 5px;
}

/* ==========================================================================
   Bento Visuals — Voice OTP
   ========================================================================== */
.bento-visual--voice {
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.voice-visualiser {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	height: 80px;
}

.v-bar {
	width: 6px;
	height: var(--h);
	background: linear-gradient(to top, #10B981, rgba(16,185,129,0.3));
	border-radius: 4px;
	animation: vBarAnimate 1.2s ease-in-out infinite;
}

.v-bar:nth-child(1)  { animation-delay: 0.0s; }
.v-bar:nth-child(2)  { animation-delay: 0.1s; }
.v-bar:nth-child(3)  { animation-delay: 0.2s; }
.v-bar:nth-child(4)  { animation-delay: 0.3s; }
.v-bar:nth-child(5)  { animation-delay: 0.15s; }
.v-bar:nth-child(6)  { animation-delay: 0.25s; }
.v-bar:nth-child(7)  { animation-delay: 0.35s; }
.v-bar:nth-child(8)  { animation-delay: 0.05s; }
.v-bar:nth-child(9)  { animation-delay: 0.45s; }
.v-bar:nth-child(10) { animation-delay: 0.55s; }
.v-bar:nth-child(11) { animation-delay: 0.1s; }

@keyframes vBarAnimate {
	0%, 100% { transform: scaleY(0.5); opacity: 0.5; }
	50%       { transform: scaleY(1.3); opacity: 1; }
}

.voice-calling {
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(16,185,129,0.1);
	border: 1px solid rgba(16,185,129,0.3);
	border-radius: 24px;
	padding: 6px 16px;
	font-size: 12px;
	font-weight: 600;
	color: #10B981;
}

.voice-calling i {
	animation: phoneRing 1s ease-in-out infinite;
}

@keyframes phoneRing {
	0%, 100% { transform: rotate(0); }
	25%       { transform: rotate(-15deg); }
	75%       { transform: rotate(15deg); }
}

/* ==========================================================================
   Bento Visuals — WhatsApp API
   ========================================================================== */
/* ==========================================================================
   Bento Visuals — WhatsApp API (Phone Mockup)
   ========================================================================== */
.bento-visual--whatsapp {
	position: relative;
	align-items: center;
	justify-content: center;
}

/* Phone frame */
.wa-phone-mockup {
	width: 195px;
	background: #ECE5DD;
	border-radius: 28px;
	border: 6px solid #1a1a2e;
	box-shadow:
		0 0 0 1px rgba(255,255,255,0.08),
		0 20px 50px rgba(0,0,0,0.4),
		inset 0 1px 0 rgba(255,255,255,0.1);
	overflow: hidden;
	position: relative;
	animation: phoneFloat 4s ease-in-out infinite;
}

@keyframes phoneFloat {
	0%, 100% { transform: translateY(0px); }
	50%       { transform: translateY(-8px); }
}

/* Status bar */
.wa-status-bar {
	background: #075E54;
	padding: 6px 14px 4px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 8px;
	color: rgba(255,255,255,0.9);
	font-weight: 600;
}

.wa-status-time { font-weight: 700; }
.wa-status-icons { display: flex; gap: 4px; align-items: center; }
.wa-status-icons i { font-size: 7px; }

/* Chat header */
.wa-chat-header {
	background: #075E54;
	padding: 6px 10px 8px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.wa-avatar-circle {
	width: 28px;
	height: 28px;
	background: linear-gradient(135deg, #25D366, #128C7E);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	color: #fff;
	flex-shrink: 0;
}

.wa-contact-info { flex: 1; min-width: 0; }

.wa-contact-name {
	font-size: 9px;
	font-weight: 700;
	color: #fff;
	display: flex;
	align-items: center;
	gap: 3px;
}

.wa-contact-name i { color: #25D366; font-size: 8px; }

.wa-contact-status {
	font-size: 7.5px;
	color: rgba(255,255,255,0.7);
	margin-top: 1px;
}

.wa-header-actions {
	display: flex;
	gap: 8px;
	color: rgba(255,255,255,0.8);
	font-size: 10px;
}

/* Chat body / scroll area */
.wa-chat-body {
	background: #ECE5DD;
	background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23b5a9a3' fill-opacity='0.12'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	padding: 8px 8px 6px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-height: 190px;
}

/* Date stamp */
.wa-date-stamp {
	text-align: center;
	font-size: 7px;
	color: #6b7280;
	background: rgba(255,255,255,0.7);
	border-radius: 8px;
	padding: 2px 8px;
	align-self: center;
	margin-bottom: 2px;
}

/* Business rich message card */
.wa-rich-msg {
	background: #fff;
	border-radius: 10px 10px 10px 2px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0,0,0,0.15);
	animation: waMsgIn 0.4s ease 0.2s both;
}

.wa-rich-img {
	background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	color: rgba(255,255,255,0.9);
	position: relative;
}

.wa-rich-img::after {
	content: 'CELLCO BUSINESS';
	position: absolute;
	bottom: 4px;
	left: 8px;
	font-size: 6px;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: rgba(255,255,255,0.8);
}

.wa-rich-body {
	padding: 7px 8px 4px;
}

.wa-rich-title {
	font-size: 9px;
	font-weight: 700;
	color: #111;
	margin-bottom: 3px;
	line-height: 1.3;
}

.wa-rich-text {
	font-size: 7.5px;
	color: #555;
	line-height: 1.4;
	margin-bottom: 5px;
}

.wa-rich-time {
	font-size: 7px;
	color: #aaa;
	text-align: right;
}

/* Divider */
.wa-rich-divider {
	height: 1px;
	background: rgba(0,0,0,0.08);
	margin: 0;
}

/* CTA Buttons */
.wa-cta-btns {
	display: flex;
}

.wa-cta-btn {
	flex: 1;
	padding: 5px 4px;
	font-size: 8px;
	font-weight: 700;
	color: #128C7E;
	text-align: center;
	cursor: default;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	border-top: 1px solid rgba(0,0,0,0.06);
}

.wa-cta-btn + .wa-cta-btn {
	border-left: 1px solid rgba(0,0,0,0.06);
}

/* Reply bubble */
.wa-reply-bubble {
	background: #DCF8C6;
	border-radius: 10px 10px 2px 10px;
	padding: 6px 8px 4px;
	align-self: flex-end;
	max-width: 80%;
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	animation: waMsgIn 0.4s ease 0.8s both;
}

.wa-reply-text {
	font-size: 8px;
	color: #111;
	line-height: 1.4;
	margin-bottom: 3px;
}

.wa-reply-meta {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 3px;
	font-size: 7px;
	color: #8a9ba8;
}

.wa-reply-meta i { color: #34B7F1; }

/* Typing indicator */
.wa-typing {
	background: #fff;
	border-radius: 10px 10px 10px 2px;
	padding: 8px 12px;
	display: flex;
	gap: 3px;
	align-items: center;
	width: fit-content;
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	animation: waMsgIn 0.4s ease 1.4s both;
}

.wa-typing-dot {
	width: 5px;
	height: 5px;
	background: #aaa;
	border-radius: 50%;
	animation: typingBounce 1.2s ease-in-out infinite;
}

.wa-typing-dot:nth-child(1) { animation-delay: 0s; }
.wa-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.wa-typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
	0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
	30%           { transform: translateY(-4px); opacity: 1; }
}

/* Chat input bar */
.wa-input-bar {
	background: #f0f0f0;
	padding: 5px 8px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.wa-input-field {
	flex: 1;
	background: #fff;
	border-radius: 20px;
	padding: 4px 10px;
	font-size: 8px;
	color: #aaa;
	border: none;
}

.wa-input-send {
	width: 22px;
	height: 22px;
	background: #25D366;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	color: #fff;
}

/* Slide-in animation for chat messages */
@keyframes waMsgIn {
	from { opacity: 0; transform: translateY(10px) scale(0.96); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Old flat thread removed */
.wa-thread, .wa-bubble, .wa-bubble--out,
.wa-header, .wa-verified, .wa-line,
.wa-action-btns, .wa-ticks { display: none; }



/* ==========================================================================
   Bento Visuals — Telegram API (Orbit)
   ========================================================================== */
.bento-visual--telegram {
	align-items: center;
	justify-content: center;
}

.tg-orbit-wrap {
	position: relative;
	width: 160px;
	height: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tg-center {
	width: 48px;
	height: 48px;
	background: linear-gradient(135deg, #6366F1, #818CF8);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	color: #fff;
	z-index: 3;
	position: relative;
	box-shadow: 0 0 20px rgba(99,102,241,0.4);
}

.tg-orbit {
	position: absolute;
	border-radius: 50%;
	border: 1px dashed rgba(99,102,241,0.25);
}

.tg-orbit--inner {
	width: 100px; height: 100px;
	animation: orbitSpin 8s linear infinite;
}

.tg-orbit--outer {
	width: 150px; height: 150px;
	animation: orbitSpin 14s linear infinite reverse;
}

.tg-orbit--single {
	width: 130px; height: 130px;
	animation: orbitSpin 12s linear infinite;
}

@keyframes orbitSpin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

.tg-node {
	position: absolute;
	width: 32px; height: 32px;
	background: rgba(99,102,241,0.15);
	border: 1px solid rgba(99,102,241,0.4);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	color: #6366F1;
	/* Position on circle */
	top: 50%; left: 50%;
	margin: -16px;
	transform: rotate(var(--angle)) translateX(40px) rotate(calc(-1 * var(--angle)));
}

.tg-node--sm {
	width: 26px; height: 26px;
	margin: -13px;
	font-size: 10px;
	transform: rotate(var(--angle)) translateX(62px) rotate(calc(-1 * var(--angle)));
}

.tg-orbit--single .tg-node {
	transform: rotate(var(--angle)) translateX(65px) rotate(calc(-1 * var(--angle)));
}

/* Counter-rotate node content to stay upright */
.tg-orbit--inner .tg-node { animation: counterRotate 8s linear infinite; }
.tg-orbit--outer .tg-node { animation: counterRotateRev 14s linear infinite; }

@keyframes counterRotate    { from { --angle: var(--angle); } to { } }

/* Simpler approach — content upright by counter-rotating icon */
.tg-node i {
	animation: keepUpright 8s linear infinite;
}
.tg-node--sm i {
	animation: keepUprightRev 14s linear infinite;
}
.tg-orbit--single .tg-node i {
	animation: keepUpright 12s linear infinite;
}

@keyframes keepUpright    { from { transform: rotate(0); } to { transform: rotate(-360deg); } }
@keyframes keepUprightRev { from { transform: rotate(0); } to { transform: rotate(360deg);  } }

/* ==========================================================================
   Bento Grid — Section-Level Translation Mapping
   ========================================================================== */
/* Keep old .section-header classes working for subpages */
.section-header {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 60px auto;
}

.section-subtitle {
	color: var(--primary);
	font-size: 12px;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 1.5px;
	margin-bottom: 12px;
	display: block;
}

.section-title {
	font-family: var(--font-title);
	font-size: 38px;
	font-weight: 800;
	color: var(--text-primary);
	margin-bottom: 16px;
	letter-spacing: -0.5px;
}

.section-description {
	color: var(--text-secondary);
	font-size: 16px;
}

/* ==========================================================================
   Bento — Responsive
   ========================================================================== */
@media (max-width: 1100px) {
	.bento-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
	.bento-card--wide { grid-column: span 2; }
	.bento-card--tall { grid-row: span 1; }
	.bento-card--tall .bento-card__inner { min-height: 320px; }
	.bento-card--wide .bento-card__inner { min-height: 260px; }
}

@media (max-width: 768px) {
	.bento-section { padding: 80px 0; }
	.bento-header { margin-bottom: 48px; }
	.bento-title { font-size: 28px; letter-spacing: -0.5px; }
	.bento-subtitle { font-size: 14px; }
	.bento-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}
	.bento-card--wide,
	.bento-card--tall,
	.bento-card--normal { grid-column: span 1; grid-row: span 1; }
	.bento-card__inner {
		flex-direction: column !important;
		min-height: auto !important;
		padding: 24px;
		gap: 20px;
	}
	.bento-card--wide .bento-card__visual,
	.bento-card--tall .bento-card__visual,
	.bento-card--normal .bento-card__visual {
		width: 100%;
		min-height: 180px;
		flex: 0 0 180px;
	}
	.bento-card__title { font-size: 17px; }
	.bento-card--wide .bento-card__title { font-size: 19px; }
	.bento-card__desc { font-size: 13px; }
	/* SMS visual on mobile: fix absolute positions */
	.bento-visual--sms { min-height: 220px; }
	.sms-notif { width: 160px; }
	.sms-notif--1 { top: 4px; left: 0; }
	.sms-notif--2 { top: 82px; left: 30px; }
	.sms-notif--3 { top: 160px; left: 8px; }
	.bento-stat-pill--1 { bottom: 4px; right: 4px; }
	.bento-stat-pill--2 { bottom: 60px; right: 4px; }
	/* OTP visual */
	.otp-card { max-width: 200px; }
	.otp-d { width: 28px; height: 36px; font-size: 17px; }
	.otp-rings { width: 80px; height: 80px; }
	.otp-ring--1 { width: 48px; height: 48px; }
	.otp-ring--2 { width: 64px; height: 64px; }
	.otp-ring--3 { width: 80px; height: 80px; }
	/* WhatsApp phone mockup */
	.wa-phone-mockup { transform: scale(0.85); transform-origin: center top; }
	/* Telegram orbit */
	.tg-orbit-wrap { width: 130px; height: 130px; }
	.tg-orbit--inner { width: 80px; height: 80px; }
	.tg-orbit--outer { width: 120px; height: 120px; }
	.tg-node { width: 26px; height: 26px; margin: -13px; font-size: 10px;
		transform: rotate(var(--angle)) translateX(32px) rotate(calc(-1 * var(--angle))); }
	.tg-node--sm { width: 22px; height: 22px; margin: -11px;
		transform: rotate(var(--angle)) translateX(48px) rotate(calc(-1 * var(--angle))); }
	/* Voice bars */
	.voice-visualiser { height: 60px; }
	.v-bar { width: 5px; }
	/* RCS card */
	.rcs-card { max-width: 180px; }
	/* Bento arrow always visible on mobile */
	.bento-arrow { opacity: 1; transform: translate(0,0); }
}

@media (max-width: 480px) {
	.bento-title { font-size: 24px; }
	.bento-card__inner { padding: 20px; }
	.otp-d { width: 24px; height: 32px; font-size: 15px; gap: 4px; }
	.otp-digits { gap: 4px; }
	.sms-notif { width: 140px; }
	.sms-notif--2 { left: 20px; }
	.bento-eyebrow { font-size: 10px; }
}


/* ==========================================================================
   Playground Console Section
   ========================================================================== */
/* ==========================================================================
   RCS Messaging Showcase Section — Premium Structured Design
   ========================================================================== */

.rcs-section {
	position: relative;
	padding: 100px 0 110px;
	background-color: #0b0c10; /* Clean, deep solid developer dark background */
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── Container ── */
.rcs-container {
	position: relative;
	z-index: 2;
}

/* ── Section Header ── */
.rcs-section-header {
	text-align: center;
	margin-bottom: 64px;
}

.rcs-eyebrow-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 6px; /* Professional square-rounded pill */
	padding: 6px 14px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 20px;
}
.rcs-eyebrow-icon {
	display: flex;
	align-items: center;
	color: #f42776; /* Brand accent pink */
}

.rcs-main-title {
	font-size: clamp(30px, 4vw, 46px);
	font-weight: 800;
	line-height: 1.2;
	color: #ffffff;
	margin-bottom: 18px;
	letter-spacing: -0.5px;
}

.rcs-main-desc {
	font-size: 16px;
	color: rgba(255, 255, 255, 0.6);
	max-width: 720px;
	margin: 0 auto 40px;
	line-height: 1.65;
}

/* ── Stats Bar ── */
.rcs-stats-bar {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 0;
	background: #111217;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	padding: 16px;
	max-width: 860px;
	margin: 0 auto;
}
.rcs-stat-item {
	flex: 1;
	min-width: 150px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 8px 12px;
}
.rcs-stat-number {
	font-size: 28px;
	font-weight: 800;
	color: #ffffff;
	line-height: 1;
}
.rcs-stat-label {
	font-size: 11.5px;
	color: rgba(255, 255, 255, 0.45);
	text-align: center;
}
.rcs-stat-divider {
	width: 1px;
	height: 40px;
	background: rgba(255, 255, 255, 0.1);
	flex-shrink: 0;
}

/* ── Main Content Grid: 3 columns ── */
.rcs-content-grid {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 48px;
	align-items: start;
}

/* ── LEFT: Feature Cards ── */
.rcs-features-col {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 10px;
}

.rcs-feature-card {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-left: 3px solid transparent;
	border-radius: 8px;
	padding: 16px 18px;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
	position: relative;
	animation: rcsCardBreathe 4s ease-in-out infinite alternate;
}
.rcs-feature-card:nth-child(even) {
	animation-delay: -2s;
}
@keyframes rcsCardBreathe {
	0% { box-shadow: 0 4px 10px rgba(0,0,0,0.15); transform: translateY(0); }
	100% { box-shadow: 0 8px 16px rgba(0,0,0,0.22); transform: translateY(-2px); }
}
.rcs-feature-card:hover {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.12);
	transform: translateY(-3px) scale(1.01);
}
.rcs-feature-card.rcs-card-active {
	background: linear-gradient(135deg, rgba(244, 39, 118, 0.1) 0%, rgba(86, 53, 229, 0.08) 100%) !important;
	border-color: transparent !important;
	box-shadow: 0 0 20px rgba(244, 39, 118, 0.15), inset 0 0 10px rgba(244, 39, 118, 0.05);
	transform: translateY(-3px) scale(1.02);
}
.rcs-feature-card.rcs-card-active::before {
	content: '';
	position: absolute;
	inset: -1px;
	border-radius: 8px;
	padding: 1.5px;
	background: linear-gradient(90deg, #f42776, #5635e5, #f42776);
	background-size: 200% auto;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: rcsBorderShimmer 3s linear infinite;
	pointer-events: none;
}
@keyframes rcsBorderShimmer {
	0% { background-position: 0% 50%; }
	100% { background-position: 200% 50%; }
}
.rcs-feat-icon-wrap i,
.rcs-feat-icon-wrap svg {
	animation: rcsIconFloat 3s ease-in-out infinite alternate;
}
@keyframes rcsIconFloat {
	0% { transform: translateY(0) rotate(0deg); }
	100% { transform: translateY(-3px) rotate(4deg); }
}

.rcs-feat-icon-wrap {
	width: 38px;
	height: 38px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #fff;
}
.rcs-icon-verified { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.rcs-icon-media    { background: rgba(139, 92, 246, 0.15); color: #a78bfa; }
.rcs-icon-buttons  { background: rgba(244, 39, 118, 0.15); color: #ff6ba8; }
.rcs-icon-tracking { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.rcs-icon-fallback { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }

.rcs-feat-content {
	flex: 1;
}
.rcs-feat-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 6px;
}
.rcs-feat-title {
	font-size: 13.5px;
	font-weight: 700;
	color: #ffffff;
	margin: 0;
}
.rcs-feat-brands {
	display: flex;
	align-items: center;
	gap: 6px;
}
.rcs-brand-mini {
	height: 12px;
	width: auto;
	object-fit: contain;
	filter: brightness(0) invert(1) opacity(0.35);
	transition: filter 0.25s ease, transform 0.25s ease;
}
.rcs-feature-card:hover .rcs-brand-mini,
.rcs-feature-card.rcs-card-active .rcs-brand-mini {
	filter: brightness(0) invert(1) opacity(0.8);
	transform: scale(1.05);
}
.rcs-feat-desc {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5);
	line-height: 1.45;
	margin: 0;
}

/* ── CENTER: Phone Mockup ── */
.rcs-phone-col {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

.rcs-phone-frame {
	width: 270px;
	background: #16161a;
	border-radius: 36px;
	border: 3px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
	overflow: hidden;
	position: relative;
}

.rcs-phone-top {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	padding: 12px 0 8px;
	background: #111;
}
.rcs-phone-speaker {
	width: 50px; height: 5px;
	background: rgba(255,255,255,0.12);
	border-radius: 10px;
}
.rcs-phone-camera {
	width: 8px; height: 8px;
	background: rgba(255,255,255,0.1);
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.2);
}

.rcs-phone-screen {
	background: #0d0d12;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 520px;
}

.rcs-status-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 14px 4px;
	background: #0d0d12;
}
.rcs-time {
	font-size: 11px;
	font-weight: 700;
	color: #fff;
}
.rcs-status-icons {
	display: flex;
	gap: 5px;
	align-items: center;
	color: #fff;
}

.rcs-chat-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: rgba(244, 39, 118, 0.08);
	border-bottom: 1px solid rgba(255,255,255,0.06);
}
.rcs-chat-brand-avatar {
	width: 36px; height: 36px;
	background: linear-gradient(135deg, #f42776, #5635e5);
	border-radius: 10px;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.rcs-chat-brand-name {
	font-size: 12.5px;
	font-weight: 700;
	color: #fff;
}
.rcs-verified-tick {
	display: inline-block;
	background: #10b981;
	color: #fff;
	font-size: 8px;
	border-radius: 50%;
	width: 14px; height: 14px;
	text-align: center;
	line-height: 14px;
	margin-left: 3px;
}
.rcs-chat-brand-sub {
	font-size: 10px;
	color: #10b981;
	letter-spacing: 0.03em;
}

.rcs-chat-body {
	flex: 1;
	overflow-y: auto;
	padding: 14px 10px 8px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	scrollbar-width: none;
}
.rcs-chat-body::-webkit-scrollbar { display: none; }

.rcs-msg { display: flex; flex-direction: column; gap: 4px; }
.rcs-msg-from { align-items: flex-start; }
.rcs-msg-to { align-items: flex-end; }

/* Rich card */
.rcs-rich-card {
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 14px;
	overflow: hidden;
	max-width: 210px;
}
.rcs-rich-card-img {
	height: 80px;
	background: linear-gradient(135deg, #1e0a2e, #0e1640);
	display: flex; align-items: center; justify-content: center;
	position: relative;
}
.rcs-card-img-placeholder {
	display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.rcs-card-img-label {
	font-size: 9px;
	color: rgba(255,255,255,0.4);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.rcs-rich-card-body { padding: 10px 12px 6px; }
.rcs-rich-title {
	font-size: 11.5px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 3px;
}
.rcs-rich-sub {
	font-size: 10px;
	color: rgba(255,255,255,0.5);
	margin: 0;
}
.rcs-rich-actions {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 8px 12px 12px;
	border-top: 1px solid rgba(255,255,255,0.06);
}
.rcs-action-btn {
	font-size: 10.5px;
	font-weight: 700;
	padding: 6px 10px;
	border-radius: 8px;
	border: none;
	cursor: default;
	text-align: center;
}
.rcs-btn-primary {
	background: linear-gradient(135deg, #f42776, #5635e5);
	color: #fff;
}
.rcs-btn-ghost {
	background: rgba(255,255,255,0.06);
	color: rgba(255,255,255,0.7);
	border: 1px solid rgba(255,255,255,0.1);
}

/* Text bubbles */
.rcs-bubble {
	max-width: 200px;
	padding: 8px 12px;
	border-radius: 16px;
	font-size: 11.5px;
	line-height: 1.45;
}
.rcs-bubble-brand {
	background: rgba(86, 53, 229, 0.25);
	border: 1px solid rgba(86, 53, 229, 0.3);
	color: #fff;
	border-bottom-left-radius: 4px;
}
.rcs-bubble-user {
	background: linear-gradient(135deg, rgba(244,39,118,0.3), rgba(86,53,229,0.25));
	border: 1px solid rgba(244, 39, 118, 0.25);
	color: #fff;
	border-bottom-right-radius: 4px;
}
.rcs-msg-time { font-size: 9.5px; color: rgba(255,255,255,0.35); }

/* Quick replies */
.rcs-quick-replies {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 4px;
}
.rcs-quick-reply {
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: 100px;
	color: rgba(255,255,255,0.75);
	font-size: 10.5px;
	font-weight: 600;
	padding: 4px 12px;
	cursor: default;
	transition: all 0.2s;
}
.rcs-quick-reply.rcs-qr-active {
	background: linear-gradient(135deg, #f42776, #5635e5);
	border-color: transparent;
	color: #fff;
}

/* Typing indicator */
.rcs-typing-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px 8px;
	border-top: 1px solid rgba(255,255,255,0.05);
}
.rcs-typing-dots {
	display: flex;
	align-items: center;
	gap: 4px;
}
.rcs-typing-dots span {
	width: 5px; height: 5px;
	background: #f42776;
	border-radius: 50%;
	animation: rcsTypingDot 1.2s ease-in-out infinite;
}
.rcs-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.rcs-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes rcsTypingDot {
	0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
	40% { opacity: 1; transform: scale(1); }
}
.rcs-typing-label { font-size: 10px; color: rgba(255,255,255,0.35); }

/* Phone bottom */
.rcs-phone-bottom {
	background: #16161a;
	padding: 8px 0 16px;
	display: flex; justify-content: center;
}
.rcs-home-indicator {
	width: 70px; height: 4px;
	background: rgba(255, 255, 255, 0.25);
	border-radius: 10px;
}

/* ── Interactive mockup transitions & elements ── */
.rcs-phone-screen-content {
	opacity: 1;
	transition: opacity 0.25s ease-in-out;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.rcs-phone-screen.fade-out .rcs-phone-screen-content {
	opacity: 0;
}

/* Header highlight state */
.rcs-header-highlight {
	background: rgba(16, 185, 129, 0.15) !important;
	border-bottom-color: rgba(16, 185, 129, 0.3) !important;
	box-shadow: 0 0 12px rgba(16, 185, 129, 0.2);
}
.avatar-pulse {
	animation: avatarPulse 2s infinite alternate;
}
@keyframes avatarPulse {
	0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
	100% { transform: scale(1.05); box-shadow: 0 0 8px 2px rgba(16, 185, 129, 0.2); }
}

/* Carousel layout */
.rcs-carousel-container {
	width: 100%;
	overflow-x: auto;
	scrollbar-width: none;
}
.rcs-carousel-container::-webkit-scrollbar {
	display: none;
}
.rcs-carousel-track {
	display: flex;
	gap: 10px;
	width: max-content;
	padding-bottom: 4px;
}
.carousel-card {
	flex: 0 0 160px;
	width: 160px !important;
}

/* Vertical interactive buttons */
.vertical-replies {
	display: flex;
	flex-direction: column !important;
	gap: 6px;
	width: 100%;
	margin-top: 8px;
}
.inline-action-btn {
	width: 100%;
	text-align: left;
	font-size: 11px;
	font-weight: 600;
	padding: 8px 12px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: #fff;
	cursor: pointer;
	transition: all 0.2s ease;
}
.inline-action-btn:hover {
	background: rgba(244, 39, 118, 0.12);
	border-color: rgba(244, 39, 118, 0.25);
}

/* ── RCS Showcase Section ── */

/* Light rising from mobile mockup and spreading outwards */
.rcs-phone-glow-source {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 320px;
	height: 520px;
	background: radial-gradient(circle, rgba(244, 39, 118, 0.3) 0%, rgba(86, 53, 229, 0.25) 45%, transparent 75%);
	pointer-events: none;
	z-index: 1;
	filter: blur(50px);
	mix-blend-mode: screen;
}

.rcs-wave-ring {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.4);
	width: 480px;
	height: 480px;
	border: 1.5px dashed rgba(244, 39, 118, 0.28);
	border-radius: 50%;
	pointer-events: none;
	z-index: 1;
	opacity: 0;
	animation: rcsWaveRipple 6s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
}
.rcs-wave-ring:nth-of-type(2) {
	animation-delay: 2s;
	border-color: rgba(86, 53, 229, 0.22);
	border-style: solid;
	width: 580px;
	height: 580px;
}
.rcs-wave-ring:nth-of-type(3) {
	animation-delay: 4s;
	border-color: rgba(244, 39, 118, 0.15);
	border-style: dashed;
	width: 680px;
	height: 680px;
}
@keyframes rcsWaveRipple {
	0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; filter: blur(0px); }
	15% { opacity: 0.85; }
	100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; filter: blur(15px); }
}

/* Highly animated wavy background blobs */
.rcs-section-bg-glows {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}
.rcs-bg-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	opacity: 0.16;
	mix-blend-mode: screen;
	animation: rcsBlobFloat 14s infinite alternate ease-in-out;
}
.rcs-bg-blob-1 {
	top: 15%;
	left: 5%;
	width: 380px;
	height: 380px;
	background: #f42776;
	animation-duration: 16s;
}
.rcs-bg-blob-2 {
	bottom: 15%;
	right: 5%;
	width: 420px;
	height: 420px;
	background: #5635e5;
	animation-duration: 20s;
	animation-delay: -3s;
}
.rcs-bg-blob-3 {
	top: 55%;
	left: 35%;
	width: 280px;
	height: 280px;
	background: #f42776;
	animation-duration: 12s;
	animation-delay: -6s;
}
@keyframes rcsBlobFloat {
	0% { transform: translate(0, 0) scale(1) rotate(0deg); }
	50% { transform: translate(80px, -50px) scale(1.15) rotate(90deg); }
	100% { transform: translate(-50px, 60px) scale(0.9) rotate(180deg); }
}

/* Ensure content and phone are relative and have higher z-index to sit on top of background glows */
.rcs-container,
.rcs-content-grid {
	position: relative;
	z-index: 2;
}

/* Dynamic svg connector paths */
.rcs-content-grid {
	position: relative; /* Context for absolute svg coordinates */
}
#rcs-connector-svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
	overflow: visible;
}
.rcs-connector-path {
	stroke: url(#rcs-connector-grad);
	stroke-width: 3;
	stroke-linecap: round;
	fill: none;
	filter: drop-shadow(0 0 5px rgba(244, 39, 118, 0.45));
	stroke-dasharray: 8 6;
	animation: rcsWaveFlow 1.2s linear infinite;
	transition: d 0.35s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.25s ease;
}
@keyframes rcsWaveFlow {
	0% { stroke-dashoffset: 50; }
	100% { stroke-dashoffset: 0; }
}

/* ── RIGHT: Use Cases & Comparison ── */
.rcs-usecases-col {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding-top: 10px;
}

.rcs-usecases-title {
	font-size: 14px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
}

.rcs-usecase-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.rcs-usecase-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-left: 3px solid transparent;
	border-radius: 12px;
	padding: 14px;
	transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
	cursor: pointer;
	position: relative;
	animation: rcsCardBreathe 4s ease-in-out infinite alternate;
	animation-delay: -1s;
}
.rcs-usecase-item:hover {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.12);
	transform: translateY(-3px) scale(1.01);
}
.rcs-usecase-item.rcs-card-active {
	background: linear-gradient(135deg, rgba(244, 39, 118, 0.1) 0%, rgba(86, 53, 229, 0.08) 100%) !important;
	border-color: transparent !important;
	box-shadow: 0 0 20px rgba(244, 39, 118, 0.15), inset 0 0 10px rgba(244, 39, 118, 0.05);
	transform: translateY(-3px) scale(1.02);
}
.rcs-usecase-item.rcs-card-active::before {
	content: '';
	position: absolute;
	inset: -1px;
	border-radius: 12px;
	padding: 1.5px;
	background: linear-gradient(90deg, #f42776, #5635e5, #f42776);
	background-size: 200% auto;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: rcsBorderShimmer 3s linear infinite;
	pointer-events: none;
}
.rcs-uc-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.rcs-uc-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.rcs-uc-title {
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	margin: 0;
}
.rcs-uc-desc {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5);
	line-height: 1.45;
}
.rcs-brand-svg {
	height: 15px;
	width: 15px;
	color: rgba(255, 255, 255, 0.45);
	fill: currentColor;
	transition: all 0.25s ease;
	display: inline-block;
	vertical-align: middle;
}
.rcs-feature-card:hover .rcs-brand-svg,
.rcs-feature-card.rcs-card-active .rcs-brand-svg,
.rcs-usecase-item:hover .rcs-brand-svg,
.rcs-usecase-item.rcs-card-active .rcs-brand-svg {
	color: rgba(255, 255, 255, 0.95);
	transform: scale(1.15);
}

/* Comparison mini-table */
.rcs-compare-table {
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 14px;
	overflow: hidden;
	font-size: 12.5px;
}
.rcs-compare-header {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1.2fr;
	padding: 10px 14px;
	background: rgba(255,255,255,0.04);
	border-bottom: 1px solid rgba(255,255,255,0.07);
	font-size: 11px;
	font-weight: 700;
	color: rgba(255,255,255,0.5);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.rcs-compare-row {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1.2fr;
	padding: 9px 14px;
	border-bottom: 1px solid rgba(255,255,255,0.04);
	align-items: center;
	color: rgba(255,255,255,0.7);
	transition: background 0.2s ease;
}
.rcs-compare-row:last-child { border-bottom: none; }
.rcs-compare-row:hover { background: rgba(255,255,255,0.025); }
.rcs-col-highlight { background: rgba(244, 39, 118, 0.06); }
.rcs-yes { color: #10b981; font-weight: 700; }
.rcs-no  { color: rgba(255,255,255,0.25); }

/* CTA buttons */
.rcs-cta-group {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.rcs-cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
	width: 100%;
}
.rcs-ghost-btn {
	display: block;
	text-align: center;
	font-size: 13.5px;
	font-weight: 600;
	color: rgba(255,255,255,0.55);
	text-decoration: none;
	padding: 10px;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.08);
	transition: all 0.25s ease;
}
.rcs-ghost-btn:hover {
	color: #fff;
	border-color: rgba(244, 39, 118, 0.3);
	background: rgba(244, 39, 118, 0.05);
}

/* ── Responsive ── */
@media (max-width: 1100px) {
	.rcs-content-grid {
		grid-template-columns: 1fr auto;
		gap: 30px;
	}
	.rcs-usecases-col {
		display: none; /* hide on tablet, show phone + features */
	}
}

@media (max-width: 860px) {
	.rcs-section { padding: 80px 0 90px; }
	.rcs-content-grid {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 48px;
	}
	.rcs-features-col { max-width: 540px; width: 100%; }
	.rcs-usecases-col { display: flex; max-width: 540px; width: 100%; }
	.rcs-float-badge { display: none; }
}

@media (max-width: 600px) {
	.rcs-section { padding: 64px 0 72px; }
	.rcs-section-header { margin-bottom: 48px; }
	.rcs-stats-bar { gap: 12px; padding: 16px 8px; }
	.rcs-stat-divider { display: none; }
	.rcs-stat-item { min-width: 120px; flex: 0 0 calc(50% - 6px); }
	.rcs-stat-number { font-size: 24px; }
	.rcs-phone-frame { width: 240px; }
	.rcs-phone-screen { height: 460px; }
	.rcs-compare-table { font-size: 11.5px; }
}



.playground-grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 60px;
	align-items: center;
}

.developer-features {
	margin-top: 40px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.dev-feature-item {
	display: flex;
	gap: 16px;
}

.dev-icon {
	width: 40px;
	height: 40px;
	background-color: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--border-color);
	color: var(--primary);
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
}

.dev-feature-item h4 {
	font-size: 15px;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 4px;
}

.dev-feature-item p {
	font-size: 13px;
	color: var(--text-secondary);
}

.playground-console {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.console-card {
	background-color: #03050e;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

.console-header {
	background-color: rgba(255, 255, 255, 0.02);
	border-bottom: 1px solid var(--border-color);
	padding: 10px 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.console-tabs {
	display: flex;
	gap: 8px;
}

.tab-btn {
	background: none;
	border: none;
	color: var(--text-muted);
	font-size: 12px;
	font-weight: 600;
	padding: 6px 12px;
	cursor: pointer;
	border-radius: var(--radius-sm);
	transition: var(--transition);
}

.tab-btn.active, .tab-btn:hover {
	color: #ffffff;
	background-color: rgba(255, 255, 255, 0.05);
}

.file-label {
	font-size: 11px;
	color: var(--text-muted);
	font-family: monospace;
}

.copy-btn {
	background: none;
	border: none;
	color: var(--text-muted);
	cursor: pointer;
	padding: 4px;
	transition: var(--transition);
}

.copy-btn:hover {
	color: #ffffff;
}

.console-body {
	padding: 20px;
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	font-size: 13px;
	line-height: 1.5;
	overflow-x: auto;
}

.code-block {
	display: none;
}

.code-block.active {
	display: block;
}

/* Code Highlighting */
.keyword { color: #f43f5e; }
.string { color: #10b981; }
.method { color: #3b82f6; }
.variable { color: #f59e0b; }
.comment { color: #64748b; }

.response-card {
	border-color: rgba(16, 185, 129, 0.2);
}

.response-header {
	border-bottom-color: rgba(16, 185, 129, 0.15);
	font-size: 12px;
	color: var(--text-secondary);
}

.status-badge {
	font-size: 10px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 20px;
}

.status-badge.green {
	background-color: rgba(16, 185, 129, 0.1);
	color: var(--accent-green);
}

.response-body {
	background-color: #02040b;
}

/* ==========================================================================
   Pricing Estimator Section
   ========================================================================== */
.pricing-section {
	padding: 100px 0;
}

.pricing-card {
	background-color: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	max-width: 1000px;
	margin: 0 auto;
}

.calculator-grid {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
}

.calculator-controls {
	padding: 48px;
}

.control-group {
	margin-bottom: 36px;
}

.control-group:last-child {
	margin-bottom: 0;
}

.control-label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 12px;
}

.channel-selector {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.channel-btn {
	background-color: var(--bg-dark);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding: 16px;
	color: var(--text-secondary);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	transition: var(--transition);
}

.channel-btn i {
	font-size: 18px;
}

.channel-btn span {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.channel-btn.active {
	border-color: var(--primary);
	background-color: rgba(233, 32, 112, 0.08);
	color: var(--text-primary);
}

.select-input {
	width: 100%;
	background-color: var(--bg-dark);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding: 12px 16px;
	color: var(--text-primary);
	font-size: 14px;
	outline: none;
	cursor: pointer;
	transition: var(--transition);
}

.select-input:focus {
	border-color: var(--primary);
}

.control-help-text {
	font-size: 11px;
	color: var(--text-muted);
	margin-top: 8px;
	display: flex;
	align-items: center;
	gap: 6px;
	line-height: 1.4;
}

.control-help-text i {
	color: var(--primary);
	font-size: 12px;
}

.slider-label-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.volume-display {
	font-family: var(--font-title);
	font-size: 18px;
	font-weight: 700;
	color: var(--primary);
}

.range-slider {
	-webkit-appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 3px;
	background: var(--bg-darker);
	outline: none;
}

.range-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--primary);
	cursor: pointer;
	box-shadow: 0 0 10px rgba(255, 94, 58, 0.5);
	transition: var(--transition);
}

.range-slider::-webkit-slider-thumb:hover {
	transform: scale(1.1);
}

.slider-ticks {
	display: flex;
	justify-content: space-between;
	padding: 8px 4px 0 4px;
	font-size: 11px;
	color: var(--text-muted);
}

/* Result Box */
.calculator-result-box {
	background-color: var(--bg-darker);
	border-left: 1px solid var(--border-color);
	padding: 48px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.result-header h4 {
	font-size: 15px;
	font-weight: 600;
	color: var(--text-secondary);
	margin-bottom: 4px;
}

.result-header p {
	font-size: 12px;
	color: var(--text-muted);
}

.result-price {
	margin: 24px 0;
	display: flex;
	align-items: baseline;
}

.result-price .currency {
	font-size: 24px;
	font-weight: 700;
	color: var(--text-primary);
}

.result-price .price-val {
	font-family: var(--font-title);
	font-size: 56px;
	font-weight: 800;
	color: var(--text-primary);
	line-height: 1;
}

.result-price .period {
	font-size: 16px;
	color: var(--text-muted);
	margin-left: 4px;
}

.price-breakdown {
	border-top: 1px solid var(--border-color);
	padding-top: 24px;
	margin-bottom: 32px;
}

.breakdown-row {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	margin-bottom: 12px;
}

.breakdown-row span {
	color: var(--text-secondary);
}

.breakdown-row strong {
	color: var(--text-primary);
}

.volume-discount-notice {
	background-color: rgba(16, 185, 129, 0.1);
	border: 1px solid rgba(16, 185, 129, 0.2);
	color: var(--accent-green);
	font-size: 11px;
	font-weight: 600;
	padding: 8px 12px;
	border-radius: var(--radius-sm);
	margin-top: 16px;
	display: flex;
	align-items: center;
	gap: 8px;
	opacity: 0;
	transform: translateY(5px);
	transition: var(--transition);
}

.volume-discount-notice.active {
	opacity: 1;
	transform: translateY(0);
}

.card-footer-note {
	font-size: 11px;
	color: var(--text-muted);
	text-align: center;
	margin-top: 16px;
	line-height: 1.4;
}

/* ==========================================================================
   Bottom CTA Section
   ========================================================================== */
.bottom-cta-section {
	padding: 80px 0 120px 0;
}

.cta-card {
	background: linear-gradient(to right, 
		rgba(236, 48, 124, 0.15) 0%, 
		rgba(236, 48, 124, 0.02) 8%, 
		#ffffff 12%, 
		#ffffff 88%, 
		rgba(84, 51, 225, 0.02) 92%, 
		rgba(84, 51, 225, 0.15) 100%
	) !important;
	border: 1px solid rgba(15, 23, 42, 0.08);
	border-radius: var(--radius-lg);
	padding: 60px;
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 60px;
	align-items: center;
	position: relative;
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

.cta-content h2 {
	font-family: var(--font-title);
	font-size: 38px;
	font-weight: 800;
	color: #0f172a !important; /* Always dark Slate 900 */
	margin-bottom: 16px;
	position: relative;
	z-index: 3;
}

.cta-content p {
	font-size: 15px;
	color: #334155 !important; /* Always dark Slate 700 */
	margin-bottom: 32px;
	max-width: 500px;
	position: relative;
	z-index: 3;
}

.cta-card .btn-secondary {
	background-color: #f1f5f9 !important; /* Always light Slate 100 */
	color: #0f172a !important; /* Always dark Slate 900 */
	border: 1px solid rgba(15, 23, 42, 0.08) !important;
}

.cta-card .btn-secondary:hover {
	background-color: #e2e8f0 !important; /* Always Slate 200 */
	border-color: rgba(15, 23, 42, 0.15) !important;
	color: #0f172a !important;
}

/* Dark Theme overrides for CTA Card */
.dark-theme .cta-card {
	background: linear-gradient(to right, 
		rgba(236, 48, 124, 0.25) 0%, 
		rgba(236, 48, 124, 0.05) 8%, 
		#0f172a 12%, 
		#0f172a 88%, 
		rgba(84, 51, 225, 0.05) 92%, 
		rgba(84, 51, 225, 0.25) 100%
	) !important;
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
}

.dark-theme .cta-content h2 {
	color: #ffffff !important;
}

.dark-theme .cta-content p {
	color: #94a3b8 !important;
}

.dark-theme .cta-card .btn-secondary {
	background-color: rgba(255, 255, 255, 0.06) !important;
	color: #ffffff !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.dark-theme .cta-card .btn-secondary:hover {
	background-color: rgba(255, 255, 255, 0.12) !important;
	border-color: rgba(255, 255, 255, 0.2) !important;
	color: #ffffff !important;
}


/* Wave Graphics Styling inside CTA Card */
.cta-waves-container {
	position: absolute;
	bottom: -10px;
	height: 110%;
	pointer-events: none;
	overflow: hidden;
	z-index: 1;
}

.cta-waves-left {
	left: -20px;
	width: 280px;
}

.cta-waves-right {
	right: -20px;
	width: 340px;
}

.cta-waves-container svg {
	width: 100%;
	height: 100%;
}

.cta-wave {
	transform-origin: bottom center;
}

.left-wave-1 { fill: #ec307c; opacity: 0.22; animation: wavePlayLeft 7s ease-in-out infinite alternate; }
.left-wave-2 { fill: #5433e1; opacity: 0.16; animation: wavePlayLeft 11s ease-in-out infinite alternate-reverse; }
.left-wave-3 { fill: #ec307c; opacity: 0.12; animation: wavePlayLeft 14s ease-in-out infinite alternate; }
.left-wave-4 { fill: #5433e1; opacity: 0.10; animation: wavePlayLeft 18s ease-in-out infinite alternate-reverse; }

.right-wave-1 { fill: #5433e1; opacity: 0.24; animation: wavePlayRight 9s ease-in-out infinite alternate; }
.right-wave-2 { fill: #ec307c; opacity: 0.18; animation: wavePlayRight 13s ease-in-out infinite alternate-reverse; }
.right-wave-3 { fill: #5433e1; opacity: 0.12; animation: wavePlayRight 16s ease-in-out infinite alternate; }
.right-wave-4 { fill: #ec307c; opacity: 0.08; animation: wavePlayRight 20s ease-in-out infinite alternate-reverse; }

@keyframes wavePlayLeft {
	0% { transform: translate(0, 0) scale(1) rotate(0deg); }
	50% { transform: translate(10px, -6px) scale(1.05) rotate(1.5deg); }
	100% { transform: translate(-5px, 3px) scale(0.98) rotate(-1deg); }
}

@keyframes wavePlayRight {
	0% { transform: translate(0, 0) scale(1) rotate(0deg); }
	50% { transform: translate(-12px, -8px) scale(1.06) rotate(-2deg); }
	100% { transform: translate(6px, 4px) scale(0.97) rotate(1deg); }
}

.cta-actions {
	display: flex;
	gap: 16px;
	position: relative;
	z-index: 3;
}

.cta-graphic {
	position: relative;
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
}

.graphic-element {
	position: absolute;
	border-radius: 50%;
}

.circle-1 {
	width: 250px;
	height: 250px;
	background: radial-gradient(circle, rgba(255, 94, 58, 0.1) 0%, transparent 70%);
}

.circle-2 {
	width: 150px;
	height: 150px;
	background: radial-gradient(circle, rgba(0, 139, 248, 0.1) 0%, transparent 70%);
}

.code-console {
	width: 260px;
	background-color: #03050e;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	position: relative;
	z-index: 4;
}

.dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: inline-block;
}

.dot.red { background-color: #ef4444; }
.dot.yellow { background-color: #f59e0b; }
.dot.green { background-color: #10b981; }

.console-title {
	color: var(--text-muted);
	font-size: 10px;
	margin-left: 8px;
	font-family: monospace;
}

.console-body {
	padding: 16px;
	font-family: monospace;
	font-size: 11px;
	color: var(--text-secondary);
	line-height: 1.6;
}

.prompt { color: var(--primary); }
.success { color: var(--accent-green); }
.info { color: var(--secondary); }

/* ==========================================================================
   Footer Styling
   ========================================================================== */
.site-footer {
	background-color: #242323 !important; /* Custom dark grey background forced */
	border-top: 1px solid rgba(255, 255, 255, 0.05);
	color: #ffffff;
}

/* Force white branding logo inside black footer regardless of body theme */
.site-footer .site-logo.default-logo {
	display: none !important;
}
.site-footer .site-logo.white-logo {
	display: inline-block !important;
}

.footer-column h4 {
	color: #ffffff !important; /* Always white headings in footer */
}

.footer-menu a {
	color: #94a3b8 !important; /* Always light slate grey links in footer */
}

.footer-menu a:hover {
	color: #f42776 !important; /* Hover pink */
}

.brand-tagline {
	color: #94a3b8 !important; /* Muted tagline text */
}

.social-link {
	border-color: rgba(255, 255, 255, 0.08) !important;
	color: #94a3b8 !important;
	background-color: rgba(255, 255, 255, 0.02) !important;
}

.social-link:hover {
	background-color: #f42776 !important;
	border-color: #f42776 !important;
	color: #ffffff !important;
}


.footer-top {
	padding: 80px 0;
}

.footer-top .footer-container {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 60px;
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 24px;
}

.footer-brand-section {
	max-width: 340px;
}

.brand-tagline {
	font-size: 13px;
	color: var(--text-secondary);
	margin-top: 16px;
	margin-bottom: 24px;
}

.social-links {
	display: flex;
	gap: 12px;
}

.social-link {
	width: 36px;
	height: 36px;
	background-color: rgba(255, 255, 255, 0.02);
	border: 1px solid var(--border-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-secondary);
	transition: var(--transition);
}

.social-link:hover {
	background-color: var(--primary);
	border-color: var(--primary);
	color: #ffffff;
	transform: translateY(-2px);
}

/* Footer Trust & Certification Badges */
.footer-cert-badges {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 24px;
	flex-wrap: nowrap; /* Strictly 1 line on desktop */
}

/* Frosted transparent pills that turn into solid white pills on hover for premium interaction */
.cert-badge-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 84px;            /* Substantially increased for readability */
	padding: 0 32px;         /* Generous spacing around logos */
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.04); /* Frosted dark background by default */
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 14px;     /* Clean rounded corners */
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
	flex-shrink: 0;
}

.cert-badge-item:hover {
	background: #ffffff !important; /* Transforms to solid white on hover */
	border-color: #ffffff;
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* Monochrome white logos by default, reveal original colors on hover */
.cert-logo {
	display: block;
	object-fit: contain;
	filter: brightness(0) invert(1) opacity(0.65); /* Silver-white default look */
	max-height: 100%;
	transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

.cert-badge-item:hover .cert-logo {
	filter: none !important; /* Reveals full original colored details on hover */
	opacity: 1 !important;
	transform: scale(1.02);
}

/* D&B: circular badge — fits inside 72px pill, showing registration number clearly */
.cert-logo-dnb {
	height: 60px;            /* Increased from 52px */
	width: auto;
}

/* Dubai Chamber: wide horizontal wordmark — same visual weight */
.cert-logo-dubai {
	height: 56px;            /* Increased from 48px */
	width: auto;
}

/* BASIS: wide horizontal wordmark — fits inside 72px pill cleanly */
.cert-logo-basis {
	height: 46px;            /* Increased from 38px */
	width: auto;
}

/* Thin vertical separator between the two badges - hidden since badges are individual pills */
.cert-badges-divider {
	display: none !important;
}

@media (max-width: 768px) {
	.footer-cert-badges {
		flex-wrap: wrap;    
		gap: 10px;
	}
	.cert-badge-item {
		height: 58px;        /* Increased from 44px on mobile */
		padding: 4px 16px;
	}
	.cert-logo-dnb {
		height: 40px;
	}
	.cert-logo-dubai {
		height: 34px;
	}
	.cert-logo-basis {
		height: 26px;
	}
	.cert-badges-divider {
		display: none !important;
	}
}


.footer-links-grid {
	display: flex;
	gap: 60px;
}

.footer-column h4 {
	color: var(--text-primary);
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 20px;
}

.footer-menu {
	list-style: none;
}

.footer-menu li {
	margin-bottom: 12px;
}

.footer-menu a {
	color: var(--text-secondary);
	font-size: 13px;
	transition: color 0.2s ease;
}

.footer-menu a:hover {
	color: #f42776; /* Logo pink on hover */
}

.footer-bottom {
	border-top: 1px solid var(--border-color);
	padding: 30px 0;
	background-color: #020309;
}

.footer-bottom .footer-container {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 24px;
}

.footer-meta-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
	font-size: 12px;
	color: var(--text-muted);
}

.footer-policy-menu {
	display: flex;
	list-style: none;
	gap: 24px;
}

.footer-policy-menu a {
	transition: color 0.2s ease;
}

.footer-policy-menu a:hover {
	color: #f42776; /* Logo pink on hover */
}

/* ==========================================================================
   Responsive Media Queries
   ========================================================================== */
@media (max-width: 1024px) {
	.hero-title {
		font-size: 44px;
	}
	
	.hero-grid {
		grid-template-columns: 1fr;
		gap: 60px;
		text-align: center;
	}
	
	.hero-description {
		margin-left: auto;
		margin-right: auto;
	}
	
	.hero-actions {
		justify-content: center;
	}
	
	.hero-stats {
		justify-content: center;
	}
	
	.hero-visual {
		display: flex;
		justify-content: center;
	}
	
	.card-api {
		left: -20px;
	}
	
	.card-delivery {
		right: -20px;
	}
	
	.mega-menu {
		width: 100%;
		position: static;
		transform: none;
		opacity: 1;
		visibility: visible;
		display: none;
		box-shadow: none;
		border: none;
		padding: 10px 0;
	}
	
	.mega-menu-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	
	.promo-column {
		border-left: none;
		padding-left: 0;
	}
	
	.calculator-grid {
		grid-template-columns: 1fr;
	}
	
	.calculator-result-box {
		border-left: none;
		border-top: 1px solid var(--border-color);
		padding: 48px;
	}
	
	.cta-card {
		grid-template-columns: 1fr;
		gap: 40px;
		text-align: center;
	}
	
	.cta-content p {
		margin-left: auto;
		margin-right: auto;
	}
	
	.cta-actions {
		justify-content: center;
	}
}

@media (max-width: 768px) {
	.site-header {
		top: 12px;
		width: calc(100% - 24px);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
	}
	
	.header-container {
		padding: 6px 16px;
	}

	.menu-toggle {
		display: block;
	}
	
	.main-navigation {
		position: fixed;
		top: 76px;
		left: -100%;
		width: 300px;
		height: calc(100vh - 76px);
		background-color: var(--bg-darker);
		border-right: 1px solid var(--border-color);
		z-index: 99;
		transition: var(--transition);
		display: block;
		padding: 24px;
		overflow-y: auto;
	}
	
	.main-navigation.active {
		left: 0;
	}
	
	.menu-backdrop {
		display: none;
		position: fixed;
		top: 76px;
		left: 0;
		width: 100%;
		height: calc(100vh - 76px);
		background-color: rgba(0, 0, 0, 0.6);
		backdrop-filter: blur(4px);
		z-index: 98;
	}
	
	.menu-backdrop.active {
		display: block;
	}
	
	.nav-menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	
	.nav-menu > li {
		width: 100%;
	}
	
	.header-actions .btn-primary {
		display: none; /* Hide Start Free button on small screens or display smaller */
	}
	
	.features-grid {
		grid-template-columns: 1fr;
	}
	
	.playground-grid {
		grid-template-columns: 1fr;
	}
	
	.footer-links-grid {
		flex-wrap: wrap;
		gap: 40px;
	}
	
	.hero-title {
		font-size: 34px !important;
	}
	
	.section-title, .cta-content h2 {
		font-size: 26px !important;
	}
	
	.hero-actions {
		flex-direction: column;
		gap: 12px;
	}
	
	.hero-stats {
		flex-direction: column;
		gap: 24px;
		text-align: center;
	}
	
	.cta-actions {
		flex-direction: column;
		gap: 12px;
	}
	
	.calculator-controls {
		padding: 24px !important;
	}
	
	.calculator-result-box {
		padding: 32px 24px !important;
	}
}

/* ==========================================================================
   Subpage Base & Visuals
   ========================================================================== */
.subpage-hero {
	padding: 180px 0 80px 0;
	background: linear-gradient(135deg, rgba(236, 48, 124, 0.04) 0%, rgba(84, 51, 225, 0.04) 100%);
	position: relative;
	overflow: hidden;
	text-align: center;
	border-bottom: 1px solid var(--border-color);
}

.subpage-hero h1 {
	font-family: var(--font-title);
	font-size: 48px;
	font-weight: 800;
	margin-bottom: 16px;
	color: var(--text-primary);
}

.subpage-hero p {
	font-size: 18px;
	color: var(--text-secondary);
	max-width: 600px;
	margin: 0 auto 30px auto;
}

.product-features-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
	padding: 80px 0;
}

.product-features-grid.reversed {
	direction: rtl;
}

.product-features-grid.reversed .feature-text {
	direction: ltr;
}

.feature-text h2 {
	font-family: var(--font-title);
	font-size: 32px;
	font-weight: 700;
	margin-bottom: 20px;
	color: var(--text-primary);
}

.feature-text p {
	color: var(--text-secondary);
	font-size: 15px;
	margin-bottom: 24px;
	line-height: 1.7;
}

.product-stats-bar {
	display: flex;
	justify-content: space-around;
	background-color: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: 40px;
	margin: 40px 0;
	box-shadow: var(--shadow-card);
}

.product-stat-box {
	text-align: center;
}

.product-stat-box h3 {
	font-family: var(--font-title);
	font-size: 36px;
	font-weight: 800;
	color: var(--primary);
	margin-bottom: 8px;
}

.product-stat-box p {
	font-size: 11px;
	color: var(--text-secondary);
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 0.5px;
}

.mock-dashboard-wrapper {
	background-color: #03050e;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card), var(--shadow-glow);
	overflow: hidden;
	width: 100%;
}

.dashboard-header {
	background-color: #0d0f1c;
	padding: 12px 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.dashboard-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: inline-block;
	margin-right: 6px;
}

.dashboard-dot.red { background-color: #ef4444; }
.dashboard-dot.yellow { background-color: #f59e0b; }
.dashboard-dot.green { background-color: #10b981; }

.dashboard-tabs {
	display: flex;
	gap: 12px;
	font-size: 11px;
	color: #64748b;
}

.dashboard-body {
	padding: 30px;
	color: #f8fafc;
	min-height: 200px;
}

.chart-bar-container {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	height: 180px;
	padding-top: 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	margin-bottom: 16px;
	gap: 12px;
}

.chart-bar {
	flex-grow: 1;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	background: linear-gradient(to top, var(--secondary), var(--primary));
	animation: barGrow 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	transform-origin: bottom;
	position: relative;
}

.chart-bar-label {
	font-size: 10px;
	color: #64748b;
	text-align: center;
	margin-top: 8px;
}

.chart-bar::after {
	content: attr(data-val);
	position: absolute;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 9px;
	color: #ffffff;
	font-weight: 600;
}

@keyframes barGrow {
	from { transform: scaleY(0); }
	to { transform: scaleY(1); }
}

@media (max-width: 768px) {
	.product-features-grid {
		grid-template-columns: 1fr;
		gap: 32px;
		text-align: center;
	}
	.product-features-grid.reversed {
		direction: ltr;
	}
	.product-stats-bar {
		flex-direction: column;
		gap: 32px;
		padding: 20px;
	}
}

/* ==========================================================================
   Split-Screen Authentication System Styles (Login, Signup, OTP)
   ========================================================================== */
/* Hide standard header/footer on authentication pages */
.page-template-page-login .site-header,
.page-template-page-login .site-footer,
.page-template-page-signup .site-header,
.page-template-page-signup .site-footer,
.page-template-page-verify-otp .site-header,
.page-template-page-verify-otp .site-footer,
body[class*="login"] .site-header,
body[class*="login"] .site-footer,
body[class*="signup"] .site-header,
body[class*="signup"] .site-footer {
	display: none !important;
}
.auth-split-layout {
	display: flex;
	min-height: 100vh;
	width: 100%;
	background-color: var(--bg-color);
	color: var(--text-color);
	transition: background-color var(--transition-speed), color var(--transition-speed);
	overflow-x: hidden;
}

/* Left Panel: Branding & Value Proposition */
.auth-left-panel {
	flex: 0 0 42%;
	background-color: #0c0f1d;
	color: #ffffff;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 60px;
	overflow: hidden;
	z-index: 2;
}

.auth-left-panel .site-waves-bg {
	opacity: 0.45;
}

.auth-left-header .logo-link img {
	height: 40px;
	width: auto;
}

.auth-left-content {
	margin-top: auto;
	margin-bottom: auto;
	position: relative;
	z-index: 3;
}

.auth-left-content h1 {
	font-family: var(--font-title);
	font-size: 40px;
	font-weight: 800;
	line-height: 1.2;
	margin-bottom: 24px;
	background: linear-gradient(135deg, #ffffff 30%, #ec307c 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.auth-left-content p {
	font-size: 16px;
	color: #94a3b8;
	line-height: 1.6;
	margin-bottom: 40px;
	max-width: 440px;
}

/* Value Props Checklist */
.auth-val-checklist {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.auth-val-item {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	font-weight: 500;
	color: #e2e8f0;
}

.auth-val-item i {
	color: #10b981;
	font-size: 16px;
}

.auth-left-footer {
	font-size: 12px;
	color: #64748b;
	position: relative;
	z-index: 3;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* Right Panel: Clean form layout cards */
.auth-right-panel {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 40px;
	position: relative;
	background-color: var(--bg-color);
	transition: background-color var(--transition-speed);
}

.auth-right-panel .theme-toggle-btn {
	position: absolute;
	top: 30px;
	right: 40px;
}

.auth-form-card {
	width: 100%;
	max-width: 460px;
	background-color: #ffffff;
	border: 1px solid rgba(15, 23, 42, 0.08);
	border-radius: var(--radius-lg);
	padding: 40px;
	box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.04);
	transition: background-color var(--transition-speed), border-color var(--transition-speed), box-shadow var(--transition-speed);
}

.dark-theme .auth-form-card {
	background-color: #0f172a;
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.4);
}

.auth-form-header {
	margin-bottom: 32px;
}

.auth-form-header h2 {
	font-family: var(--font-title);
	font-size: 28px;
	font-weight: 800;
	color: var(--heading-color);
	margin-bottom: 8px;
}

.auth-form-header p {
	font-size: 14px;
	color: var(--text-muted);
}

.auth-form-header p a {
	color: var(--primary);
	text-decoration: none;
	font-weight: 600;
}

.auth-form-header p a:hover {
	text-decoration: underline;
}

/* Form Styles */
.auth-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.form-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--heading-color);
}

.input-icon-wrapper {
	position: relative;
	width: 100%;
}

.input-icon-wrapper i.field-icon {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-muted);
	font-size: 15px;
	pointer-events: none;
	transition: color 0.2s;
}

.form-input {
	width: 100%;
	height: 48px;
	background-color: #f8fafc;
	border: 1px solid rgba(15, 23, 42, 0.12);
	border-radius: var(--radius-md);
	padding: 0 16px 0 46px;
	font-size: 14px;
	color: var(--text-color);
	outline: none;
	transition: all 0.2s;
}

.dark-theme .form-input {
	background-color: #1e293b;
	border-color: rgba(255, 255, 255, 0.1);
}

.form-input:focus {
	border-color: var(--primary);
	background-color: #ffffff;
	box-shadow: 0 0 0 4px rgba(236, 48, 124, 0.12);
}

.dark-theme .form-input:focus {
	background-color: #0f172a;
	box-shadow: 0 0 0 4px rgba(236, 48, 124, 0.2);
}

/* Password Eye Button */
.password-toggle-btn {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: var(--text-muted);
	cursor: pointer;
	padding: 0;
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.password-toggle-btn:hover {
	color: var(--text-color);
}

/* Forgot Password Link */
.forgot-password-link {
	align-self: flex-end;
	font-size: 12px;
	color: var(--primary);
	text-decoration: none;
	font-weight: 600;
}

.forgot-password-link:hover {
	text-decoration: underline;
}

/* OAuth Divider */
.oauth-divider {
	display: flex;
	align-items: center;
	text-align: center;
	margin: 24px 0;
	font-size: 12px;
	color: var(--text-muted);
}

.oauth-divider::before,
.oauth-divider::after {
	content: '';
	flex: 1;
	border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.dark-theme .oauth-divider::before,
.dark-theme .oauth-divider::after {
	border-color: rgba(255, 255, 255, 0.08);
}

.oauth-divider::before {
	margin-right: 12px;
}

.oauth-divider::after {
	margin-left: 12px;
}

/* Social buttons */
.social-buttons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.social-btn {
	height: 44px;
	border: 1px solid rgba(15, 23, 42, 0.1);
	background-color: #ffffff;
	border-radius: var(--radius-md);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-color);
	cursor: pointer;
	transition: all 0.2s;
}

.dark-theme .social-btn {
	background-color: #1e293b;
	border-color: rgba(255, 255, 255, 0.08);
}

.social-btn:hover {
	background-color: #f8fafc;
	border-color: rgba(15, 23, 42, 0.18);
}

.dark-theme .social-btn:hover {
	background-color: #334155;
	border-color: rgba(255, 255, 255, 0.15);
}

.social-btn i {
	font-size: 16px;
}

.social-btn.google i { color: #ea4335; }
.social-btn.github i { color: var(--text-color); }

/* OTP Digits Form Grid */
.otp-input-container {
	display: flex;
	gap: 12px;
	justify-content: space-between;
	margin: 12px 0 24px 0;
}

.otp-digit-input {
	width: 52px;
	height: 60px;
	border: 1px solid rgba(15, 23, 42, 0.12);
	background-color: #f8fafc;
	border-radius: var(--radius-md);
	text-align: center;
	font-size: 24px;
	font-weight: 700;
	color: var(--text-color);
	outline: none;
	transition: all 0.2s;
}

.dark-theme .otp-digit-input {
	background-color: #1e293b;
	border-color: rgba(255, 255, 255, 0.1);
}

.otp-digit-input:focus {
	border-color: var(--primary);
	background-color: #ffffff;
	box-shadow: 0 0 0 4px rgba(236, 48, 124, 0.12);
}

.dark-theme .otp-digit-input:focus {
	background-color: #0f172a;
	box-shadow: 0 0 0 4px rgba(236, 48, 124, 0.2);
}

.alert-message {
	padding: 12px 16px;
	border-radius: var(--radius-md);
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.alert-message.error {
	background-color: rgba(239, 68, 68, 0.1);
	border: 1px solid rgba(239, 68, 68, 0.2);
	color: #ef4444;
}

.alert-message.success {
	background-color: rgba(16, 185, 129, 0.1);
	border: 1px solid rgba(16, 185, 129, 0.2);
	color: #10b981;
}

/* Responsive auth layouts */
@media (max-width: 1024px) {
	.auth-split-layout {
		flex-direction: column;
	}
	.auth-left-panel {
		flex: none;
		padding: 40px;
	}
	.auth-left-panel p {
		margin-bottom: 24px;
	}
	.auth-right-panel {
		padding: 40px 20px;
	}
}

/* Curve dividers between sections */
.section-divider-curve {
	position: relative;
	width: 100%;
	height: 80px;
	overflow: hidden;
	line-height: 0;
	z-index: 5;
	pointer-events: none;
}

.section-divider-curve svg {
	display: block;
	width: 100%;
	height: 80px;
}

.section-divider-curve.curve-inverted {
	transform: rotate(180deg);
}

.section-divider-curve path {
	transition: fill 0.3s ease;
}

.dark-theme .section-divider-curve [fill="var(--bg-card)"] {
	fill: var(--bg-card);
}

.dark-theme .section-divider-curve [fill="var(--bg-darker)"] {
	fill: var(--bg-darker);
}

.dark-theme .section-divider-curve [fill="var(--bg-dark)"] {
	fill: var(--bg-dark);
}

/* ==========================================================================
   Omnichannel Usecase Section & Interactive Simulator
   ========================================================================== */
.usecase-section {
	padding: 100px 0;
	background-color: #dbe4f4 !important; /* Force light blue-gray background */
	position: relative;
	overflow: hidden;
	color: #0f172a !important; /* Force dark text color */
}

/* Ensure the section header text is always dark */
.usecase-section .section-subtitle {
	color: #5433e1 !important; /* Premium brand purple */
}

.usecase-section .section-title {
	color: #0f172a !important;
}

.usecase-section .section-description {
	color: #475569 !important;
}

/* Tabs container: Clean flat white bar */
.usecase-tabs-container {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 50px;
}

.usecase-tabs {
	display: flex;
	background-color: #ffffff !important;
	border: 1px solid rgba(15, 23, 42, 0.06) !important;
	padding: 6px;
	border-radius: 30px;
	gap: 4px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.usecase-tab-btn {
	background: none !important;
	border: none !important;
	padding: 10px 24px;
	font-family: 'Outfit', sans-serif;
	font-size: 15px;
	font-weight: 500;
	color: #475569 !important;
	border-radius: 20px;
	cursor: pointer;
	transition: all 0.3s ease;
}

.usecase-tab-btn:hover {
	color: #0f172a !important;
}

.usecase-tab-btn.active {
	background-color: #d1e1f8 !important; /* Light blue-gray active state tab */
	color: #0f172a !important;
	font-weight: 600;
}

.usecase-widget-grid {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 50px;
	align-items: center;
}

@media (max-width: 991px) {
	.usecase-widget-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

.usecase-nav-column {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.usecase-pills-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

@media (max-width: 576px) {
	.usecase-pills-list {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}
}

.usecase-pill {
	background: none !important;
	border: none !important;
	text-align: left;
	padding: 14px 24px;
	font-family: 'Outfit', sans-serif;
	font-size: 16px;
	font-weight: 500;
	color: #475569 !important;
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: none !important;
}

.usecase-pill:hover {
	color: #0f172a !important;
	background-color: rgba(255, 255, 255, 0.4) !important;
}

.usecase-pill.active {
	background-color: #ffffff !important;
	color: #0f172a !important;
	box-shadow: 0 4px 15px rgba(15, 23, 42, 0.06) !important;
	border: 1px solid rgba(15, 23, 42, 0.04) !important;
	font-weight: 600;
}

.usecase-pill span {
	color: inherit !important;
}

/* Hide chevron icons in vertical list to match mockup */
.usecase-pill i {
	display: none !important;
}

.usecase-details-card {
	background-color: rgba(255, 255, 255, 0.5) !important;
	border: 1px solid rgba(15, 23, 42, 0.05) !important;
	padding: 30px;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.02) !important;
}

.usecase-details-card h4 {
	font-family: 'Outfit', sans-serif;
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 12px;
	color: #0f172a !important;
}

.usecase-details-card p {
	font-size: 15px;
	line-height: 1.6;
	color: #475569 !important;
	margin-bottom: 24px;
}

.usecase-details-card .btn-primary {
	background: linear-gradient(135deg, #5433e1, #ec307c) !important;
	color: #ffffff !important;
	box-shadow: 0 4px 15px rgba(84, 51, 225, 0.2) !important;
}

/* Phone Simulator styling for Usecases */
.usecase-phone-column {
	display: flex;
	justify-content: center;
	align-items: center;
}

.phone-simulator-container {
	position: relative;
	width: 100%;
	max-width: 320px;
}

.usecase-section .phone-simulator-mockup {
	background-color: #d6e0f5 !important;
	border: 12px solid #ffffff !important; /* White bezel */
	border-radius: 36px !important;
	box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.15) !important;
	overflow: hidden;
	position: relative;
	aspect-ratio: 9 / 19.5;
	display: flex;
	flex-direction: column;
}

.usecase-section .phone-camera-notch {
	background-color: #ffffff !important; /* White camera notch */
	height: 24px;
	width: 130px;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	border-bottom-left-radius: 14px;
	border-bottom-right-radius: 14px;
	z-index: 10;
}

.usecase-section .phone-screen-display {
	background-color: #d6e0f5 !important;
	flex: 1;
	display: flex;
	flex-direction: column;
	position: relative;
	padding-top: 24px;
}

/* Status Bar */
.usecase-section .phone-status-bar {
	display: flex;
	justify-content: space-between;
	padding: 6px 16px;
	font-size: 11px;
	color: #475569 !important;
	font-weight: 500;
	z-index: 5;
}

.usecase-section .phone-status-icons {
	display: flex;
	gap: 5px;
	color: #475569 !important;
}

/* Chat Header */
.usecase-section .phone-chat-header {
	display: flex;
	align-items: center;
	padding: 10px 16px;
	background-color: #d6e0f5 !important;
	border-bottom: 1px solid rgba(15, 23, 42, 0.05) !important;
	color: #0f172a !important;
}

.usecase-section .phone-chat-header .chat-back {
	font-size: 14px;
	margin-right: 12px;
	cursor: pointer;
	color: #475569 !important;
}

.usecase-section .phone-chat-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: #ffefe5 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 10px;
	font-size: 14px;
	color: #ff5e3a !important;
}

.usecase-section .phone-chat-user-info {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.usecase-section .phone-chat-username-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.usecase-section .phone-chat-username {
	font-size: 13px;
	font-weight: 700;
	font-family: 'Outfit', sans-serif;
	color: #0f172a !important;
}

.usecase-section .phone-verified-badge {
	color: #10b981 !important;
	font-size: 11px;
	display: flex;
	align-items: center;
}

.usecase-section .phone-chat-status {
	font-size: 10px;
	color: #475569 !important;
}

.usecase-section .phone-chat-header .chat-menu {
	font-size: 14px;
	color: #475569 !important;
	cursor: pointer;
}

/* Chat Body */
.usecase-section .phone-chat-body {
	flex: 1;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	overflow-y: auto;
	background-color: #d6e0f5 !important;
}

.usecase-section .phone-chat-time {
	text-align: center;
	font-size: 9px;
	color: #64748b !important;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 6px;
}

/* Message Card (RCS Style) */
.usecase-section .phone-message-card {
	background-color: #ffffff !important;
	border-radius: 16px !important;
	border-top-left-radius: 4px !important;
	padding: 14px;
	box-shadow: 0 4px 15px rgba(15, 23, 42, 0.05) !important;
	max-width: 90%;
	align-self: flex-start;
}

.usecase-section .phone-message-card p {
	font-size: 12px;
	line-height: 1.5;
	color: #0f172a !important;
	margin: 0;
	font-weight: 500;
}

.usecase-section .phone-message-card strong {
	color: #0f172a !important;
	font-weight: 700;
}

/* Expiration notification text in blue */
.usecase-section .phone-message-card .expire-text {
	color: #2563eb !important;
	font-size: 11px;
	margin-top: 6px;
	font-weight: 500;
}

.usecase-section .phone-message-divider {
	height: 1px;
	background-color: #e2e8f0 !important;
	margin: 12px 0 10px 0;
}

.usecase-section .phone-message-action {
	text-align: center;
}

.usecase-section .phone-autofill-btn {
	color: #2563eb !important;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	display: inline-block;
	transition: color 0.2s;
}

.usecase-section .phone-autofill-btn:hover {
	color: #1d4ed8 !important;
}

.usecase-section .phone-opt-out-text {
	text-align: center;
	font-size: 9px;
	color: #64748b !important;
	margin: 8px 0;
}

/* Response Buttons */
.usecase-section .phone-response-buttons {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: auto;
}

.usecase-section .phone-btn-primary {
	background-color: #c6eb89 !important; /* Soft lime green */
	border: none !important;
	color: #0f172a !important;
	padding: 10px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	width: 100%;
	transition: background-color 0.2s;
	text-align: center;
}

.usecase-section .phone-btn-primary:hover {
	background-color: #b8e274 !important;
}

.usecase-section .phone-btn-secondary {
	background-color: #ffffff !important;
	border: 1px solid #cbd5e1 !important;
	color: #475569 !important;
	padding: 10px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	width: 100%;
	transition: all 0.2s;
	text-align: center;
}

.usecase-section .phone-btn-secondary:hover {
	background-color: #f8fafc !important;
	border-color: #94a3b8 !important;
	color: #0f172a !important;
}

/* Chat Footer Input */
.usecase-section .phone-chat-input-bar {
	display: flex;
	align-items: center;
	padding: 10px 14px;
	background-color: #d6e0f5 !important;
	border-top: 1px solid rgba(15, 23, 42, 0.05) !important;
	gap: 12px;
	color: #475569 !important;
	font-size: 14px;
}

.usecase-section .phone-chat-input-bar i {
	cursor: pointer;
	transition: color 0.2s;
	color: #475569 !important;
}

.usecase-section .phone-chat-input-bar i:hover {
	color: #0f172a !important;
}

.usecase-section .phone-mock-input {
	background-color: #ffffff !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 18px;
	padding: 6px 14px;
	font-size: 11px;
	color: #64748b !important;
	flex: 1;
}.hero-phone-simulator {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
}

/* Global Phone Simulator Mockup Styles (for Hero and generic mockups) */
.phone-simulator-mockup {
	background-color: #0c0f1d;
	border: 12px solid #1e293b;
	border-radius: 36px;
	box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.5);
	overflow: hidden;
	position: relative;
	aspect-ratio: 9 / 19.5;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

.dark-theme .phone-simulator-mockup {
	border-color: #334155;
	background-color: #0f172a;
}

.phone-camera-notch {
	background-color: #1e293b;
	height: 24px;
	width: 130px;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	border-bottom-left-radius: 14px;
	border-bottom-right-radius: 14px;
	z-index: 10;
}

.dark-theme .phone-camera-notch {
	background-color: #334155;
}

.phone-screen-display {
	background-color: #0c0f1d;
	flex: 1;
	display: flex;
	flex-direction: column;
	position: relative;
	padding-top: 24px;
}

.phone-status-bar {
	display: flex;
	justify-content: space-between;
	padding: 6px 16px;
	font-size: 11px;
	color: #94a3b8;
	font-weight: 500;
	z-index: 5;
}

.phone-status-icons {
	display: flex;
	gap: 5px;
}

.phone-chat-header {
	display: flex;
	align-items: center;
	padding: 10px 16px;
	background-color: #1e293b;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	color: #ffffff;
}

.phone-chat-header .chat-back {
	font-size: 14px;
	margin-right: 12px;
	cursor: pointer;
	color: #94a3b8;
}

.phone-chat-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 10px;
	font-size: 14px;
	color: #ffffff;
}

.phone-chat-user-info {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.phone-chat-username-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.phone-chat-username {
	font-size: 13px;
	font-weight: 600;
	font-family: 'Outfit', sans-serif;
}

.phone-verified-badge {
	color: #10b981;
	font-size: 11px;
	display: flex;
	align-items: center;
}

.phone-chat-status {
	font-size: 10px;
	color: #94a3b8;
}

.phone-chat-header .chat-menu {
	font-size: 14px;
	color: #94a3b8;
	cursor: pointer;
}

.phone-chat-body {
	flex: 1;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	overflow-y: auto;
}

.phone-chat-time {
	text-align: center;
	font-size: 9px;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 6px;
}

.phone-message-card {
	background-color: #ffffff;
	border-radius: 16px;
	border-top-left-radius: 4px;
	padding: 14px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	max-width: 90%;
	align-self: flex-start;
}

.phone-message-card p {
	font-size: 12px;
	line-height: 1.5;
	color: #0f172a !important;
	margin: 0;
}

.phone-message-divider {
	height: 1px;
	background-color: #e2e8f0;
	margin: 12px 0 10px 0;
}

.phone-message-action {
	text-align: center;
}

.phone-autofill-btn {
	color: #2563eb;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	display: inline-block;
	transition: color 0.2s;
}

.phone-autofill-btn:hover {
	color: #1d4ed8;
}

.phone-opt-out-text {
	text-align: center;
	font-size: 9px;
	color: #64748b;
	margin: 8px 0;
}

.phone-response-buttons {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: auto;
}

.phone-btn-primary {
	background-color: #bde285;
	border: none;
	color: #0f172a;
	padding: 10px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	width: 100%;
	transition: background-color 0.2s;
}

.phone-btn-primary:hover {
	background-color: #a8d56a;
}

.phone-btn-secondary {
	background: none;
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #ffffff;
	padding: 10px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	width: 100%;
	transition: all 0.2s;
}

.phone-btn-secondary:hover {
	background-color: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.3);
}

.phone-chat-input-bar {
	display: flex;
	align-items: center;
	padding: 10px 14px;
	background-color: #1e293b;
	border-top: 1px solid rgba(255, 255, 255, 0.05);
	gap: 12px;
	color: #94a3b8;
	font-size: 14px;
}

.phone-chat-input-bar i {
	cursor: pointer;
	transition: color 0.2s;
}

.phone-chat-input-bar i:hover {
	color: #ffffff;
}

.phone-mock-input {
	background-color: #0f172a;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 18px;
	padding: 6px 14px;
	font-size: 11px;
	color: #64748b;
	flex: 1;
}

/* ==========================================================================
   Wave Signal flow animations
   ========================================================================== */
.wave-signal-pulse {
	position: absolute;
	height: 3px;
	background: linear-gradient(270deg, #ec307c, #5433e1, transparent);
	border-radius: 2px;
	z-index: 15;
	pointer-events: none;
	box-shadow: 0 0 12px #ec307c, 0 0 4px #5433e1;
	animation: waveFlowLeft 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes waveFlowLeft {
	0% {
		width: 0;
		opacity: 0;
		transform: translateX(0);
	}
	20% {
		width: 80px;
		opacity: 1;
	}
	80% {
		width: 80px;
		opacity: 0.9;
	}
	100% {
		width: 0;
		opacity: 0;
		transform: translateX(var(--travel-distance));
	}
}

.hero-usecase-box .phone-screen-display {
	position: relative;
	transition: box-shadow 0.3s ease;
}

.hero-usecase-box .phone-screen-display.phone-received-flash::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(236, 48, 124, 0.15); /* Soft pink receiver glow */
	pointer-events: none;
	z-index: 20;
	animation: phoneScreenGlow 0.4s ease-out forwards;
}

@keyframes phoneScreenGlow {
	0% { opacity: 0; }
	30% { opacity: 1; }
	100% { opacity: 0; }
}

.hero-usecase-box .phone-screen-display.phone-received-flash .phone-message-card {
	animation: messagePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes messagePop {
	0% { transform: scale(1); }
	50% { transform: scale(1.04); box-shadow: 0 10px 25px rgba(236, 48, 124, 0.15); }
	100% { transform: scale(1); }
}

/* ==========================================================================
   Hero Background Logo Watermark Style
   ========================================================================== */
.hero-bg-logo-watermark {
	position: absolute;
	top: 50%;
	right: 0px; /* Aligned exactly on the right edge (not cut off) */
	transform: translateY(-50%);
	width: 360px; /* Resized to 360px */
	height: 360px; /* Resized to 360px */
	opacity: 0.15; /* Subtle watermark opacity */
	pointer-events: none;
	z-index: 0;
	transition: opacity 0.3s ease;
}

.dark-theme .hero-bg-logo-watermark {
	opacity: 0.06; /* Softer in dark theme */
}

.hero-bg-logo-watermark img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (max-width: 1024px) {
	.hero-bg-logo-watermark {
		width: 320px; /* Scaled down for tablets */
		height: 320px;
		right: 0px;
		opacity: 0.12;
	}
}

@media (max-width: 768px) {
	.hero-bg-logo-watermark {
		width: 260px; /* Scaled down for mobile */
		height: 260px;
		right: 0px;
		top: 45%;
		opacity: 0.08;
	}
}

@media (max-width: 480px) {
	.hero-bg-logo-watermark {
		width: 200px; /* Scaled down for small screens */
		height: 200px;
		right: 0px;
		top: 40%;
		opacity: 0.06;
	}
}

/* Global phone simulator input layout safety protection */
.phone-chat-input-bar i {
	flex-shrink: 0 !important;
}

.phone-mock-input {
	min-width: 0 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

/* Pricing Currency Switch Toggle Styling */
.currency-toggle-container {
	margin-top: 15px;
	margin-bottom: 20px;
	display: flex;
	justify-content: center;
}

.currency-toggle {
	display: inline-flex;
	background-color: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding: 3px;
	gap: 2px;
}

body.light-theme .currency-toggle {
	background-color: rgba(0, 0, 0, 0.03);
}

.currency-toggle-btn {
	background: none;
	border: none;
	border-radius: 4px;
	padding: 6px 16px;
	font-size: 11px;
	font-weight: 700;
	color: var(--text-secondary);
	cursor: pointer;
	transition: var(--transition);
	outline: none;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.currency-toggle-btn:hover {
	color: var(--text-primary);
}

.currency-toggle-btn.active {
	background-color: var(--primary);
	color: #ffffff !important;
}

/* Interactive Usecase Simulator Component Floating Animations */
@keyframes floatPhoneMockup {
	0% {
		transform: translateY(0) rotate(0deg);
	}
	50% {
		transform: translateY(-14px) rotate(1deg);
	}
	100% {
		transform: translateY(0) rotate(0deg);
	}
}

@keyframes floatPillsList {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(10px);
	}
	100% {
		transform: translateY(0);
	}
}

@keyframes floatTabsContainer {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-6px);
	}
	100% {
		transform: translateY(0);
	}
}

/* Applying floats to the interactive simulator elements */
.hero-usecase-grid .phone-simulator-mockup {
	animation: floatPhoneMockup 4.5s ease-in-out infinite;
	will-change: transform;
	transition: box-shadow 0.3s ease;
}

/* Pause float on hover for precise user clicks */
.hero-usecase-grid .phone-simulator-mockup:hover {
	animation-play-state: paused;
}

.hero-usecase-box .usecase-pills-list {
	animation: floatPillsList 5.5s ease-in-out infinite;
	will-change: transform;
}

.hero-usecase-box .usecase-pills-list:hover {
	animation-play-state: paused;
}

.hero-usecase-box .usecase-tabs-container {
	animation: floatTabsContainer 5s ease-in-out infinite;
	will-change: transform;
}

.hero-usecase-box .usecase-tabs-container:hover {
	animation-play-state: paused;
}

/* Site Logo visibility toggle logic for light/dark theme modes */
.site-logo.white-logo {
	display: none !important;
}

.dark-theme .site-logo.default-logo {
	display: none !important;
}

.dark-theme .site-logo.white-logo {
	display: inline-block !important;
}

/* Typewriter typing animation cursor and entrance slide-up styling */
.hero-content h1.hero-title {
	animation: heroTitleSlideUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	opacity: 0; /* Starts hidden and slides up */
}

@keyframes heroTitleSlideUp {
	0% {
		opacity: 0;
		transform: translateY(22px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.typewriter-cursor {
	display: inline-block;
	color: var(--primary);
	font-weight: 500;
	margin-left: 3px;
	animation: cursorBlink 0.8s infinite;
}

.typewriter-cursor.blink {
	animation: cursorBlink 0.8s infinite;
}

.typewriter-cursor.fade-out {
	opacity: 0;
	transition: opacity 1s ease;
}

@keyframes cursorBlink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}

/* ==========================================================================
   eSIM Custom Subpage Content Layouts
   ========================================================================== */

/* Section Layouts */
.esim-section {
	padding: 80px 0;
	position: relative;
	overflow: hidden;
}

.esim-section-title-wrapper {
	text-align: center;
	margin-bottom: 50px;
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

.esim-section-title-wrapper span {
	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: 700;
	color: var(--primary);
	text-transform: uppercase;
	letter-spacing: 1.5px;
	display: block;
	margin-bottom: 12px;
}

.esim-section-title-wrapper h2 {
	font-family: var(--font-title);
	font-size: 38px;
	font-weight: 800;
	color: var(--text-primary);
	line-height: 1.25;
}

/* 1. Saily Benefits Grid: 6 Items */
.esim-benefits-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	margin-top: 30px;
}

.esim-benefit-item {
	display: flex;
	flex-direction: column;
	gap: 16px;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding: 28px;
	transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.esim-benefit-item:hover {
	transform: translateY(-4px);
	border-color: rgba(236, 48, 124, 0.25);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04);
}

.esim-benefit-icon {
	width: 50px;
	height: 50px;
	background: rgba(236, 48, 124, 0.06);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--primary);
	font-size: 22px;
}

.esim-benefit-item h3 {
	font-family: var(--font-title);
	font-size: 20px;
	font-weight: 700;
	color: var(--text-primary);
	margin: 0;
}

.esim-benefit-item p {
	font-family: var(--font-primary);
	font-size: 14px;
	color: var(--text-secondary);
	line-height: 1.6;
	margin: 0;
}

/* 2. Kolet Benefits Cards: 3 Large Column Visual Cards */
.esim-cards-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin-top: 20px;
}

.esim-visual-card {
	border-radius: 24px;
	padding: 40px 32px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 480px;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.esim-visual-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--shadow-glow);
}

.esim-visual-card.card-cream {
	background: #fbf9f4;
	border: 1px solid rgba(0,0,0,0.03);
}

.esim-visual-card.card-blue {
	background: linear-gradient(135deg, #0ea5e9, #0284c7);
	color: #ffffff;
}

.esim-visual-card.card-soft {
	background: #f4f6fa;
	border: 1px solid rgba(0,0,0,0.03);
}

.esim-visual-card .card-text h3 {
	font-family: var(--font-title);
	font-size: 24px;
	font-weight: 800;
	margin-bottom: 12px;
	line-height: 1.3;
}

.esim-visual-card.card-blue .card-text h3 {
	color: #ffffff;
}

.esim-visual-card .card-text h3 span {
	color: var(--primary);
}

.esim-visual-card.card-blue .card-text h3 span {
	color: #fef08a; /* Soft yellow highlight in blue card */
}

.esim-visual-card .card-text p {
	font-family: var(--font-primary);
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
}

.esim-visual-card.card-cream .card-text p,
.esim-visual-card.card-soft .card-text p {
	color: #64748b;
}

.esim-visual-card.card-blue .card-text p {
	color: rgba(255,255,255,0.9);
}

/* Card Visual Mockups */
.esim-card-visual {
	margin-top: auto;
	height: 220px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	position: relative;
}

.esim-card-visual .visual-mock-phone {
	background: #0f172a;
	border: 6px solid #334155;
	border-radius: 24px 24px 0 0;
	width: 140px;
	height: 210px;
	padding: 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	box-shadow: 0 10px 25px rgba(0,0,0,0.15);
	position: relative;
	z-index: 2;
}

.esim-card-visual .visual-mock-phone .phone-inner-screen {
	background: #1e293b;
	width: 100%;
	height: 100%;
	border-radius: 16px 16px 0 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 42px;
}

.esim-card-visual .visual-mock-phone .phone-inner-screen span {
	font-size: 10px;
	color: #94a3b8;
	margin-top: 8px;
}

.esim-card-visual .visual-mock-badge {
	position: absolute;
	bottom: 30px;
	right: 30px;
	background: #10b981;
	color: white;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 3px solid #fbf9f4;
	font-size: 12px;
	z-index: 3;
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Card 2 Overlapping Mockups */
.esim-card-visual .visual-overlap-container {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 100%;
	height: 100%;
}

.esim-card-visual .visual-overlap-card {
	background: rgba(255,255,255,0.15);
	border: 1px solid rgba(255,255,255,0.25);
	border-radius: 16px;
	padding: 16px;
	width: 110px;
	height: 140px;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-shadow: 0 8px 20px rgba(0,0,0,0.1);
	position: absolute;
	transition: transform 0.3s ease;
}

.esim-card-visual .visual-overlap-card.left-overlap {
	background: #ffffff;
	color: #0f172a;
	transform: translateX(-40px) rotate(-8deg);
	z-index: 1;
}

.esim-card-visual .visual-overlap-card.right-overlap {
	background: #38bdf8;
	color: #ffffff;
	transform: translateX(30px) rotate(8deg);
	z-index: 2;
}

.esim-card-visual .visual-overlap-card .overlap-header {
	font-size: 18px;
	font-weight: 700;
}

.esim-card-visual .visual-overlap-card .overlap-footer {
	font-size: 9px;
	opacity: 0.8;
}

.esim-card-visual .visual-overlap-arrow {
	position: absolute;
	z-index: 3;
	background: #f43f5e;
	color: white;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.15);
	border: 2px solid white;
}

/* Card 3 Tokens Mockups */
.esim-card-visual .visual-tokens-container {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 100%;
	height: 100%;
}

.esim-card-visual .visual-token-coin {
	background: #ffffff;
	border: 1px solid rgba(0,0,0,0.05);
	border-radius: 50%;
	width: 110px;
	height: 110px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 25px rgba(0,0,0,0.06);
	position: absolute;
}

.esim-card-visual .visual-token-coin.coin-back {
	width: 80px;
	height: 80px;
	transform: translate(-45px, -30px);
	background: linear-gradient(135deg, #5635e5 0%, #3a1ebd 100%);
	border: 3px solid #8c76f7;
	z-index: 1;
	box-shadow: 0 8px 20px rgba(86, 53, 229, 0.4);
}

.esim-card-visual .visual-token-coin.coin-front {
	transform: translate(20px, 10px);
	z-index: 2;
	background: linear-gradient(135deg, #f42776 0%, #d61b62 100%);
	border: 3px solid #ff7dae;
	box-shadow: 0 12px 30px rgba(244, 39, 118, 0.4);
}

.esim-card-visual .visual-token-coin .coin-inner-letter {
	font-family: var(--font-title);
	font-size: 40px;
	font-weight: 900;
	color: #ffffff !important;
	text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.esim-card-visual .visual-token-coin.coin-back .coin-inner-letter {
	font-size: 32px;
	color: #ffffff !important;
	text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* 3. Saily Side-by-Side: 2 Large Cards */
.esim-saily-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
	margin-top: 30px;
}

.esim-saily-card {
	background: #f8fafc;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: 40px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.esim-saily-card:hover {
	border-color: rgba(84, 51, 225, 0.2);
	box-shadow: var(--shadow-card);
}

.esim-saily-card-text h3 {
	font-family: var(--font-title);
	font-size: 26px;
	font-weight: 800;
	color: var(--text-primary);
	margin-bottom: 12px;
}

.esim-saily-card-text p {
	font-family: var(--font-primary);
	font-size: 15px;
	color: var(--text-secondary);
	line-height: 1.6;
	margin: 0;
}

.esim-saily-visual {
	height: 250px;
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
	border: 1px solid rgba(0,0,0,0.03);
	box-shadow: inset 0 2px 8px rgba(0,0,0,0.02);
	position: relative;
}

/* Flag Cards Animation Visual */
.esim-saily-visual .visual-flag-container {
	display: flex;
	gap: 16px;
	position: relative;
	width: 90%;
	justify-content: center;
}

.esim-saily-visual .visual-flag-card {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 16px;
	width: 110px;
	height: 140px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.05);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	transition: transform 0.3s ease;
}

.esim-saily-visual .visual-flag-card:hover {
	transform: translateY(-8px);
}

.esim-saily-visual .visual-flag-card .flag-circle {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.esim-saily-visual .visual-flag-card .flag-label {
	font-size: 11px;
	font-weight: 700;
	color: #0f172a;
}

.esim-saily-visual .visual-flag-card .flag-status {
	font-size: 9px;
	color: #10b981;
	background: rgba(16,185,129,0.08);
	padding: 2px 8px;
	border-radius: 10px;
}

/* Saily Card 2 Data Mockup */
.esim-saily-visual .visual-mock-data-list {
	width: 80%;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.esim-saily-visual .visual-mock-data-row {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 12px 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: border-color 0.2s ease;
}

.esim-saily-visual .visual-mock-data-row.active {
	border-color: var(--primary);
	background: rgba(236, 48, 124, 0.02);
}

.esim-saily-visual .visual-mock-data-row .data-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.esim-saily-visual .visual-mock-data-row .data-info span.amount {
	font-size: 14px;
	font-weight: 700;
	color: #0f172a;
}

.esim-saily-visual .visual-mock-data-row .data-info span.duration {
	font-size: 10px;
	color: #64748b;
}

.esim-saily-visual .visual-mock-data-row .data-select {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid #cbd5e1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.esim-saily-visual .visual-mock-data-row.active .data-select {
	border-color: var(--primary);
	background: var(--primary);
}

.esim-saily-visual .visual-mock-data-row.active .data-select::after {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: white;
}

/* 4. World Cup Banner Callout */
.esim-banner-callout {
	background: linear-gradient(135deg, #0f172a, #1e293b);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: 50px 60px;
	position: relative;
	overflow: hidden;
	color: #ffffff;
	margin-top: 50px;
	margin-bottom: 30px;
}

.esim-banner-callout::after {
	content: "";
	position: absolute;
	right: -100px;
	top: -100px;
	width: 300px;
	height: 300px;
	background: radial-gradient(circle, rgba(236, 48, 124, 0.1) 0%, transparent 70%);
	z-index: 1;
}

.esim-banner-content {
	position: relative;
	z-index: 2;
	max-width: 600px;
}

.esim-banner-content .banner-badge {
	display: inline-block;
	background: linear-gradient(90deg, #10b981, #059669);
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 20px;
	text-transform: uppercase;
	margin-bottom: 20px;
	border: 1px solid rgba(255,255,255,0.1);
}

.esim-banner-content h3 {
	font-family: var(--font-title);
	font-size: 30px;
	font-weight: 800;
	color: #ffffff;
	line-height: 1.3;
	margin-bottom: 12px;
}

.esim-banner-content p {
	font-family: var(--font-primary);
	font-size: 15px;
	color: #94a3b8;
	line-height: 1.6;
	margin-bottom: 24px;
}

.esim-banner-form {
	display: flex;
	gap: 12px;
	max-width: 480px;
}

.esim-banner-form .email-input {
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 10px;
	padding: 12px 18px;
	color: #ffffff;
	font-size: 14px;
	flex-grow: 1;
	transition: border-color 0.2s ease;
}

.esim-banner-form .email-input:focus {
	border-color: var(--primary);
	outline: none;
}

.esim-banner-form .submit-btn {
	background: var(--primary);
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	padding: 0 24px;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.esim-banner-form .submit-btn:hover {
	background-color: var(--primary-hover);
}

/* Dark Theme Adjustments */
.dark-theme .esim-visual-card.card-cream {
	background: #111422;
	border-color: rgba(255,255,255,0.04);
}

.dark-theme .esim-visual-card.card-soft {
	background: #0f1220;
	border-color: rgba(255,255,255,0.04);
}

.dark-theme .esim-visual-card.card-cream .card-text p,
.dark-theme .esim-visual-card.card-soft .card-text p {
	color: #94a3b8;
}

.dark-theme .esim-visual-card.card-cream .visual-mock-badge,
.dark-theme .esim-visual-card.card-soft .visual-mock-badge {
	border-color: #111422;
}

.dark-theme .esim-saily-card {
	background: #0d0f1c;
	border-color: var(--border-color);
}

.dark-theme .esim-saily-visual {
	background: #090b14;
	border-color: rgba(255,255,255,0.04);
}

.dark-theme .esim-saily-visual .visual-flag-card {
	background: #0d0f1c;
	border-color: rgba(255,255,255,0.08);
}

.dark-theme .esim-saily-visual .visual-flag-card .flag-label {
	color: #ffffff;
}

.dark-theme .esim-saily-visual .visual-mock-data-row {
	background: #0d0f1c;
	border-color: rgba(255,255,255,0.08);
}

.dark-theme .esim-saily-visual .visual-mock-data-row .data-info span.amount {
	color: #ffffff;
}

.dark-theme .esim-saily-visual .visual-mock-data-row.active {
	background: rgba(236, 48, 124, 0.05);
	border-color: var(--primary);
}

/* Responsive Overrides */
@media (max-width: 1024px) {
	.esim-benefits-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.esim-cards-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.esim-visual-card {
		height: 440px;
	}
}

@media (max-width: 768px) {
	.esim-section {
		padding: 50px 0;
	}
	.esim-section-title-wrapper h2 {
		font-size: 28px;
	}
	.esim-benefits-grid,
	.esim-cards-grid,
	.esim-saily-cards {
		grid-template-columns: 1fr;
	}
	.esim-visual-card {
		height: 420px;
	}
	.esim-saily-card {
		padding: 24px;
	}
	.esim-banner-callout {
		padding: 30px;
	}
	.esim-banner-content h3 {
		font-size: 24px;
	}
	.esim-banner-form {
		flex-direction: column;
	}
	.esim-banner-form .submit-btn {
		padding: 14px;
	}
}

/* Screen Reader Text & Accessibility styling */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Contact Page Design System */
.contact-section {
	padding: 80px 0;
	position: relative;
	overflow: hidden;
}

/* Premium Top Cards Layout */
.contact-cards-top {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	max-width: var(--container-width);
	margin: 0 auto 60px auto;
	padding: 0 24px;
	position: relative;
	z-index: 2;
}

.contact-card-premium {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: 36px;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition: var(--transition);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.contact-card-premium:hover {
	transform: translateY(-5px);
	border-color: rgba(244, 39, 118, 0.4);
	box-shadow: 0 20px 40px rgba(244, 39, 118, 0.1);
}

.contact-card-premium h3 {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 0;
	background: var(--gradient-text);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	display: flex;
	align-items: center;
	gap: 12px;
}

.contact-card-premium h3 i {
	color: #f42776;
	font-size: 18px;
}

.contact-card-sublist {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.sublist-item {
	display: flex;
	gap: 16px;
	align-items: center;
}

.sublist-item-icon-wrap {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(244, 39, 118, 0.08) 0%, rgba(88, 43, 242, 0.08) 100%);
	border: 1px solid rgba(244, 39, 118, 0.15);
	color: #f42776;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
	transition: all 0.3s ease;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}

.contact-card-premium:hover .sublist-item-icon-wrap {
	background: linear-gradient(135deg, rgba(244, 39, 118, 0.18) 0%, rgba(88, 43, 242, 0.18) 100%);
	border-color: rgba(244, 39, 118, 0.3);
	color: #ec307c;
	transform: scale(1.05);
}

.sublist-item i {
	font-size: 16px;
	flex-shrink: 0;
}

.sublist-item h4 {
	font-size: 11px;
	color: var(--text-secondary);
	margin-bottom: 3px;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	font-weight: 700;
	opacity: 0.85;
}

.sublist-item p {
	font-size: 14.5px;
	color: var(--text-primary);
	margin-bottom: 0;
	line-height: 1.45;
	font-weight: 500;
}

/* Bottom Grid Layout: Form & Map */
.contact-bottom-row {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 30px;
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 24px 80px 24px;
	align-items: stretch;
	position: relative;
	z-index: 2;
}

/* Glassmorphism Form Container */
.contact-form-panel {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-md);
	padding: 40px;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
	display: flex;
	flex-direction: column;
}

.contact-form-panel h3 {
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 6px;
	color: var(--text-primary);
}

.contact-form-panel p {
	font-size: 14px;
	color: var(--text-secondary);
	margin-bottom: 30px;
}

.form-group {
	margin-bottom: 20px;
	display: flex;
	flex-direction: column;
}

.form-group label {
	font-size: 13px;
	font-weight: 500;
	color: var(--text-primary);
	margin-bottom: 8px;
}

.form-control {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding: 12px 16px;
	color: var(--text-primary);
	font-size: 14px;
	transition: var(--transition);
}

.form-control:focus {
	border-color: #f42776;
	background: rgba(255, 255, 255, 0.06);
	outline: none;
	box-shadow: 0 0 0 3px rgba(244, 39, 118, 0.15);
}

textarea.form-control {
	resize: vertical;
	min-height: 120px;
}

.submit-btn {
	background: linear-gradient(135deg, #ec307c 0%, #5433e1 50%, #ec307c 100%);
	background-size: 200% auto;
	border: none;
	color: #ffffff;
	padding: 14px 28px;
	border-radius: var(--radius-sm);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	margin-top: 10px;
	width: 100%;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	box-shadow: 0 4px 15px rgba(236, 48, 124, 0.25);
}

.submit-btn i {
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.submit-btn:hover {
	transform: translateY(-3px);
	background-position: right center;
	box-shadow: 0 8px 25px rgba(236, 48, 124, 0.45);
}

.submit-btn:hover i {
	transform: translate(3px, -3px);
}

.submit-btn:active {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(236, 48, 124, 0.3);
}

/* Map Card */
.contact-map-card {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 450px;
}

.contact-map-card iframe {
	flex-grow: 1;
	border: 0;
	width: 100%;
	height: 100%;
}

/* Success & Error Messages */
.form-status-alert {
	padding: 16px 20px;
	border-radius: var(--radius-sm);
	margin-bottom: 24px;
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.form-status-alert.success {
	background: rgba(16, 185, 129, 0.1);
	border: 1px solid rgba(16, 185, 129, 0.2);
	color: var(--accent-green);
}

.form-status-alert.error {
	background: rgba(239, 68, 68, 0.1);
	border: 1px solid rgba(239, 68, 68, 0.2);
	color: #ef4444;
}

@media (max-width: 1024px) {
	.contact-cards-top {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	
	.contact-bottom-row {
		grid-template-columns: 1fr;
		gap: 30px;
	}
	
	.contact-map-card {
		min-height: 350px;
	}
}

/* RTL Layout support for Arabic language switcher */
html[dir="rtl"] .site-header {
	direction: rtl;
}
html[dir="rtl"] .header-container {
	flex-direction: row-reverse;
}
html[dir="rtl"] .nav-menu {
	flex-direction: row-reverse;
	padding-right: 0;
}
html[dir="rtl"] .header-actions {
	flex-direction: row-reverse;
}
html[dir="rtl"] .lang-dropdown {
	right: auto;
	left: 0;
}
html[dir="rtl"] .hero-badge .status-dot {
	margin-right: 0;
	margin-left: 8px;
}
html[dir="rtl"] .hero-content {
	text-align: right;
}
html[dir="rtl"] .hero-grid {
	direction: rtl;
}
html[dir="rtl"] .hero-actions {
	justify-content: flex-start;
	flex-direction: row-reverse;
}
html[dir="rtl"] .hero-actions .btn {
	margin-right: 0;
	margin-left: 16px;
}
html[dir="rtl"] .hero-stats {
	justify-content: flex-start;
	direction: ltr; /* keep numeric layout inline */
}
html[dir="rtl"] .mega-menu {
	text-align: right;
}
html[dir="rtl"] .mega-menu-item {
	flex-direction: row-reverse;
	text-align: right;
}
html[dir="rtl"] .mega-menu-column h4 {
	text-align: right;
}
html[dir="rtl"] .sub-menu {
	left: auto;
	right: 0;
	text-align: right;
}
html[dir="rtl"] .sub-menu li {
	text-align: right;
}

/* ==========================================================================
   Premium Cookie Consent Popup (Light / White Theme, Compact Center Aligned)
   ========================================================================== */
.cookie-consent-popup {
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: calc(100% - 48px);
	max-width: 360px;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 14px;
	padding: 20px;
	box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
	z-index: 9999;
	opacity: 0;
	transform: translateY(150px) scale(0.95);
	pointer-events: none;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
}

.cookie-consent-popup.show {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

.cookie-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.cookie-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(244, 39, 118, 0.08), rgba(86, 53, 229, 0.08));
	border: 1px solid rgba(244, 39, 118, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.cookie-icon i {
	font-size: 18px;
	background: linear-gradient(135deg, #f42776, #5635e5);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.cookie-text h4 {
	font-family: var(--font-title);
	font-size: 15px;
	font-weight: 750;
	color: #111827;
	margin-bottom: 4px;
}

.cookie-text p {
	font-size: 12px;
	color: #4b5563;
	line-height: 1.45;
}

.cookie-text a {
	color: #f42776;
	text-decoration: none;
	font-weight: 600;
	transition: color 0.2s ease;
}

.cookie-text a:hover {
	color: #5635e5;
	text-decoration: underline;
}

.cookie-actions {
	display: flex;
	gap: 10px;
	width: 100%;
	justify-content: center;
}

.cookie-btn {
	flex: 1;
	padding: 9px 16px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease;
	border: none;
	text-align: center;
}

.cookie-btn:active {
	transform: scale(0.97);
}

.cookie-btn--decline {
	background: #f3f4f6;
	border: 1px solid #e5e7eb;
	color: #374151;
}

.cookie-btn--decline:hover {
	background: #e5e7eb;
	border-color: #d1d5db;
}

.cookie-btn--accept {
	background: linear-gradient(135deg, #f42776, #5635e5);
	color: #fff;
	box-shadow: 0 3px 10px rgba(244, 39, 118, 0.2);
}

.cookie-btn--accept:hover {
	opacity: 0.95;
	box-shadow: 0 5px 15px rgba(244, 39, 118, 0.3);
}

/* RTL Adjustments */
html[dir="rtl"] .cookie-consent-popup {
	right: auto;
	left: 24px;
}

/* Responsive */
@media (max-width: 480px) {
	.cookie-consent-popup {
		bottom: 16px;
		left: 16px;
		right: 16px;
		width: calc(100% - 32px);
		padding: 16px;
	}
}

/* ==========================================================================
   Musemind-inspired Partner Offices Section
   ========================================================================== */
.footer-offices-wrapper {
	position: relative;
	width: 100%;
	max-width: var(--container-width);
	margin: 40px auto 30px auto;
}

/* Rounded card box for offices list */
.partner-section-card {
	position: relative;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	margin-top: 0 !important;
}

.footer-location-area {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
	gap: 20px !important;
	max-width: var(--container-width) !important;
	margin: 0 auto !important;
	position: relative !important;
	z-index: 2 !important;
}

.footer-single-location {
	position: relative !important;
	background: linear-gradient(155deg, rgba(20, 18, 38, 0.95) 0%, rgba(10, 8, 22, 0.98) 100%) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 24px !important;
	padding: 35px 28px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 14px !important;
	height: 100% !important;
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
	overflow: hidden !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}

/* Gradient top accent line */
.footer-single-location::before {
	content: '' !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	height: 3px !important;
	background: linear-gradient(90deg, #ec307c 0%, #5433e1 50%, #ec307c 100%) !important;
	background-size: 200% auto !important;
	opacity: 0.8 !important;
	transition: all 0.4s ease !important;
	animation: office-border-flow 4s linear infinite !important;
}

@keyframes office-border-flow {
	0% { background-position: 0% center; }
	100% { background-position: 200% center; }
}

/* Ambient glow blob inside the card */
.footer-single-location::after {
	content: '' !important;
	position: absolute !important;
	top: -90px !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	width: 200px !important;
	height: 200px !important;
	background: radial-gradient(circle, rgba(236, 48, 124, 0.12) 0%, transparent 70%) !important;
	pointer-events: none !important;
	transition: all 0.4s ease !important;
	border-radius: 50% !important;
}

.footer-single-location:hover {
	transform: translateY(-8px) !important;
	border-color: rgba(236, 48, 124, 0.35) !important;
	box-shadow: 
		0 20px 45px rgba(0, 0, 0, 0.55),
		0 0 0 1px rgba(236, 48, 124, 0.15),
		0 0 35px rgba(84, 51, 225, 0.1) !important;
}

.footer-single-location:hover::before {
	opacity: 1 !important;
	height: 4px !important;
}

.footer-single-location:hover::after {
	background: radial-gradient(circle, rgba(84, 51, 225, 0.22) 0%, transparent 70%) !important;
	top: -70px !important;
}

.footer-location-icon {
	font-size: 20px !important;
	background: linear-gradient(135deg, #f42776, #5635e5) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
	filter: drop-shadow(0 2px 4px rgba(244, 39, 118, 0.2)) !important;
	transition: all 0.3s ease !important;
	display: inline-block !important;
}

.footer-single-location:hover .footer-location-icon {
	transform: scale(1.1) !important;
}

/* High-resolution country-based location favicon images */
.footer-location-favicon {
	width: 44px !important;
	height: 44px !important;
	object-fit: contain !important;
	object-position: center !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	border: none !important;
	display: block !important;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
	filter: drop-shadow(0 4px 8px rgba(236, 48, 124, 0.4)) !important;
}

.footer-single-location:hover .footer-location-favicon {
	transform: scale(1.15) translateY(-2px) !important;
	filter: drop-shadow(0 8px 16px rgba(84, 51, 225, 0.65)) !important;
}

.country-location {
	font-family: var(--font-title) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	margin: 0 !important;
	letter-spacing: -0.2px !important;
	transition: all 0.3s ease !important;
}

.footer-single-location:hover .country-location {
	background: linear-gradient(90deg, #ec307c, #a855f7) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
}

.country-flag-svg {
	-webkit-text-fill-color: initial !important;
	background-clip: initial !important;
}

.location-details-text {
	font-size: 13px !important;
	color: rgba(255, 255, 255, 0.45) !important;
	line-height: 1.6 !important;
	margin: 0 !important;
	transition: color 0.3s ease !important;
}

.footer-single-location:hover .location-details-text {
	color: rgba(255, 255, 255, 0.8) !important;
}

.footer-phone-number-wrap {
	text-decoration: none !important;
	margin-top: auto !important;
	display: inline-block !important;
}

.location-phone-number {
	font-size: 13px !important;
	color: #ffffff !important;
	font-weight: 600 !important;
	transition: all 0.3s ease !important;
}

.footer-single-location:hover .location-phone-number {
	color: #ec307c !important;
}

/* Custom styles for team filter grid colors */
.team-card[data-category="leadership"] .team-designation {
	color: #f42776 !important;
	background: rgba(244, 39, 118, 0.08) !important;
}
.team-card:not([data-category="leadership"]) .team-designation {
	color: #5232da !important;
	background: rgba(82, 50, 218, 0.1) !important;
}
.team-card[data-category="leadership"] .team-avatar-overlay {
	background: rgba(244, 39, 118, 0.85) !important;
}
.team-card:not([data-category="leadership"]) .team-avatar-overlay {
	background: rgba(82, 50, 218, 0.85) !important;
}
.team-card[data-category="leadership"] .team-avatar-glow {
	background: conic-gradient(from 0deg, #f42776, #ff7ba9, #f42776) !important;
}
.team-card:not([data-category="leadership"]) .team-avatar-glow {
	background: conic-gradient(from 0deg, #5232da, #bfa080, #5232da) !important;
}
.team-card[data-category="leadership"] .team-avatar {
	border-color: rgba(244, 39, 118, 0.25) !important;
}
.team-card:not([data-category="leadership"]) .team-avatar {
	border-color: rgba(139, 101, 64, 0.25) !important;
}

/* Responsive grid */
@media (max-width: 991px) {
	.footer-location-area {
		gap: 30px;
	}
}

@media (max-width: 768px) {
	.footer-offices-wrapper {
		margin-top: 30px;
	}
	.partner-section-card {
		padding: 30px 24px;
		margin-top: 0; /* Reset margin since logo is removed */
	}
	.footer-location-area {
		gap: 30px;
		justify-content: center;
	}
	.footer-single-location {
		padding: 0;
		max-width: 320px;
		margin: 0 auto;
		align-items: center;
		text-align: center;
	}
	.footer-location-favicon {
		margin: 0 auto;
	}
}

/* Pure CSS text wordmark styling applied */

/* ==========================================================================
   Musemind-inspired Footer Bottom Layout
   ========================================================================== */
.footer-bottom-musemind {
	border-top: 1px solid rgba(255, 255, 255, 0.05);
	padding: 30px 0;
	margin-top: 40px;
}

.footer-container-musemind {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}

/* Left: Company Deck download button */
.footer-deck-download {
	flex: 1;
	display: flex;
	justify-content: flex-start;
}

.deck-download-btn {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.deck-download-btn:hover {
	opacity: 0.85;
}

.deck-icon-circle {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #FFE500;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #000000;
	font-size: 13px;
	box-shadow: 0 4px 12px rgba(255, 229, 0, 0.25);
}

.deck-text-meta {
	display: flex;
	flex-direction: column;
}

.deck-title {
	font-size: 13px;
	font-weight: 700;
	color: #ffffff;
}

.deck-meta-info {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.5) !important; /* Muted white for dark background */
}

/* Center: Copyright */
.footer-copyright-centered {
	flex: 1;
	text-align: center;
}

.footer-copyright-centered p {
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.6) !important; /* Clean light white copyright text */
	margin: 0;
}

/* Right: Policy Links */
.footer-policy-menu {
	flex: 1;
	display: flex;
	justify-content: flex-end;
	gap: 16px;
	flex-wrap: wrap;
}

.footer-policy-menu a {
	color: rgba(255, 255, 255, 0.6) !important;
	font-size: 12.5px;
	text-decoration: none;
	transition: color 0.22s ease;
	font-weight: 500;
}

.footer-policy-menu a:hover {
	color: #f42776 !important; /* Hover brand pink */
}

/* Responsive bottom footer */
@media (max-width: 991px) {
	.footer-container-musemind {
		flex-direction: column;
		text-align: center;
		gap: 24px;
	}
	.footer-deck-download,
	.footer-copyright-centered,
	.footer-policy-menu {
		flex: none;
		justify-content: center;
		text-align: center;
	}
}

/* Arabic Text Styling & RTL (Right-to-Left) Localization Support */
.arabic-text {
	display: none !important; /* Hidden by default in English mode */
}
.eng-text {
	display: inline !important;
}
div.eng-text, p.eng-text, h3.eng-text {
	display: block !important;
}

html[dir="rtl"] .arabic-text,
html.rtl-active .arabic-text,
body.rtl .arabic-text {
	display: block !important;
	font-family: 'Tajawal', 'Amiri', 'Segoe UI', Tahoma, sans-serif;
	font-size: 13px;
	margin-top: 6px;
	color: rgba(255, 255, 255, 0.6) !important;
	text-align: inherit;
}

html[dir="rtl"] .eng-text,
html.rtl-active .eng-text,
body.rtl .eng-text {
	display: none !important;
}

html[dir="rtl"] .footer-brand-section,
html.rtl-active .footer-brand-section,
body.rtl .footer-brand-section,
html[dir="rtl"] .footer-single-location,
html.rtl-active .footer-single-location,
body.rtl .footer-single-location,
html[dir="rtl"] .footer-column,
html.rtl-active .footer-column,
body.rtl .footer-column,
html[dir="rtl"] .footer-copyright-centered,
html.rtl-active .footer-copyright-centered,
body.rtl .footer-copyright-centered {
	text-align: right !important;
}

html[dir="rtl"] .footer-policy-menu,
html.rtl-active .footer-policy-menu,
body.rtl .footer-policy-menu,
html[dir="rtl"] .footer-deck-download,
html.rtl-active .footer-deck-download,
body.rtl .footer-deck-download {
	justify-content: flex-start !important;
}

html[dir="rtl"] .footer-container-musemind,
html.rtl-active .footer-container-musemind,
body.rtl .footer-container-musemind {
	flex-direction: row-reverse;
}

@media (max-width: 991px) {
	html[dir="rtl"] .footer-container-musemind,
	html.rtl-active .footer-container-musemind,
	body.rtl .footer-container-musemind {
		flex-direction: column;
	}
}

/* Mobile Header & Language Dropdown Polish */
@media (max-width: 768px) {
	.site-logo {
		height: 32px !important;
	}
	.logo-link {
		height: 38px !important;
	}
	.header-actions {
		gap: 8px !important;
	}
	.lang-btn {
		padding: 4px 8px !important;
		font-size: 11px !important;
	}
	.header-actions .btn-link {
		font-size: 13px !important;
	}
}

/* Click Toggle support for Language Selector on touch devices */
.lang-selector.active .lang-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* ==========================================================================
   DNB Badge Prominent Legibility Override
   ========================================================================== */
.cert-badge-dnb {
	height: 84px !important;
	padding: 0 16px !important;
}
.cert-logo-dnb {
	height: 72px !important;
	width: auto !important;
}

/* ==========================================================================
   Homepage eSIM Section
   ========================================================================== */
.homepage-esim-section {
	padding: 100px 0;
	position: relative;
	border-top: 1px solid var(--border-color);
	overflow: hidden;
}

/* Ambient Glow Blobs */
.esim-bg-glows {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}
.esim-glow-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	opacity: 0.08;
	animation: esim-float 12s ease-in-out infinite alternate;
}
.esim-glow-1 {
	width: 500px;
	height: 500px;
	background: #f42776;
	top: -100px;
	left: -100px;
}
.esim-glow-2 {
	width: 450px;
	height: 450px;
	background: #5232da;
	bottom: -80px;
	right: -80px;
	animation-delay: -6s;
}
@keyframes esim-float {
	from { transform: translate(0, 0) scale(1); }
	to   { transform: translate(30px, -20px) scale(1.08); }
}

.esim-section-header {
	text-align: center;
	margin-bottom: 60px;
	position: relative;
	z-index: 1;
}

/* Coming Soon pill */
.esim-coming-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 18px;
	border-radius: 100px;
	background: linear-gradient(135deg, rgba(244,39,118,0.12) 0%, rgba(88,43,242,0.12) 100%);
	border: 1px solid rgba(244,39,118,0.3);
	color: #f42776;
	font-family: var(--font-title);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.5px;
	margin-bottom: 18px;
}
.dark-theme .esim-coming-pill {
	border-color: rgba(244,39,118,0.4);
}

.esim-title {
	font-family: var(--font-title);
	font-size: 46px;
	font-weight: 900;
	color: var(--text-primary);
	line-height: 1.15;
}
.esim-title em {
	font-style: italic;
	background: linear-gradient(135deg, #f42776 0%, #5232da 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.esim-subtitle {
	font-size: 18px;
	color: var(--text-secondary);
	max-width: 660px;
	margin: 16px auto 0 auto;
	line-height: 1.65;
}

/* 3-Column Grid */
.esim-homepage-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 28px;
	position: relative;
	z-index: 1;
}

/* Card Styling */
.esim-home-card {
	border-radius: 24px;
	padding: 40px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	overflow: hidden;
	min-height: 520px;
	box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.04);
	border: 1px solid rgba(0, 0, 0, 0.03);
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
}
.esim-card-top {
	flex: 1;
}

/* Blue Card (Card 1) - Restored and modernized with soft linear gradients */
.esim-home-card--blue {
	background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
	border-color: rgba(56, 189, 248, 0.25);
	padding-bottom: 0 !important;
}
.esim-home-card--blue:hover {
	transform: translateY(-6px);
	box-shadow: 0 25px 50px -12px rgba(56, 189, 248, 0.25);
	border-color: rgba(56, 189, 248, 0.45);
}
.dark-theme .esim-home-card--blue {
	background: linear-gradient(135deg, #070e1b 0%, #0c1830 100%) !important;
	border-color: rgba(56, 189, 248, 0.15) !important;
}
.dark-theme .esim-home-card--blue:hover {
	border-color: rgba(56, 189, 248, 0.35) !important;
	box-shadow: 0 25px 50px -12px rgba(56, 189, 248, 0.4) !important;
}

/* Pink Card (Card 2) - Modernized with soft linear gradients */
.esim-home-card--pink {
	background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
	border-color: rgba(244, 39, 118, 0.2);
	padding-bottom: 0 !important;
}
.esim-home-card--pink:hover {
	transform: translateY(-6px);
	box-shadow: 0 25px 50px -12px rgba(244, 39, 118, 0.25);
	border-color: rgba(244, 39, 118, 0.4);
}
.dark-theme .esim-home-card--pink {
	background: linear-gradient(135deg, #150711 0%, #260c20 100%) !important;
	border-color: rgba(244, 39, 118, 0.15) !important;
}
.dark-theme .esim-home-card--pink:hover {
	border-color: rgba(244, 39, 118, 0.35) !important;
	box-shadow: 0 25px 50px -12px rgba(244, 39, 118, 0.4) !important;
}

/* Green Card (Card 3) - Modernized to match Card 1's blue theme */
.esim-home-card--green {
	background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
	border-color: rgba(56, 189, 248, 0.25);
}
.esim-home-card--green:hover {
	transform: translateY(-6px);
	box-shadow: 0 25px 50px -12px rgba(56, 189, 248, 0.25);
	border-color: rgba(56, 189, 248, 0.45);
}
.dark-theme .esim-home-card--green {
	background: linear-gradient(135deg, #070e1b 0%, #0c1830 100%) !important;
	border-color: rgba(56, 189, 248, 0.15) !important;
}
.dark-theme .esim-home-card--green:hover {
	border-color: rgba(56, 189, 248, 0.35) !important;
	box-shadow: 0 25px 50px -12px rgba(56, 189, 248, 0.4) !important;
}

/* Content Typography */
.esim-card-title {
	font-family: var(--font-title);
	font-size: 26px;
	font-weight: 800;
	color: var(--text-primary);
	line-height: 1.25;
	margin-bottom: 14px;
}
.esim-card-desc {
	font-size: 14.5px;
	color: var(--text-secondary);
	line-height: 1.65;
	margin-bottom: 24px;
}

/* eSIM Waitlist Note */
.esim-waitlist-note {
	font-size: 12px;
	color: var(--text-secondary);
	margin: 0;
	margin-top: -8px;
	display: flex;
	align-items: center;
	gap: 4px;
}

/* Phone Visual inside Card 1 (Upgraded to look like a premium glass screen phone) */
.esim-phone-mockup {
	width: 100%;
	max-width: 240px;
	margin: 20px auto 0 auto;
	background: #090d16;
	border: 8px solid #1e293b;
	border-bottom: none;
	border-radius: 20px 20px 0 0;
	height: 220px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 -15px 35px -5px rgba(0, 0, 0, 0.15), inset 0 0 10px rgba(255, 255, 255, 0.05);
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
	margin-top: auto;
	margin-bottom: 0;
}
.esim-home-card--blue:hover .esim-phone-mockup {
	transform: translateY(-4px) scale(1.015);
	border-color: #0f172a;
}
.esim-phone-notch {
	width: 38%;
	height: 16px;
	background: #1e293b;
	border-radius: 0 0 12px 12px;
	margin: 0 auto;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	z-index: 15;
}
.esim-phone-screen {
	background: #ffffff;
	height: 100%;
	padding: 24px 16px 0 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	position: relative;
}
.esim-phone-screen::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 55%);
	pointer-events: none;
	z-index: 10;
}
.dark-theme .esim-phone-screen {
	background: #0b0f19;
}
.esim-phone-status {
	display: flex;
	justify-content: space-between;
	font-size: 8.5px;
	font-weight: 700;
	color: #64748b;
	position: relative;
	z-index: 5;
}
.esim-phone-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 4px;
	position: relative;
	z-index: 5;
}
.esim-phone-user {
	font-size: 11px;
	font-weight: 800;
	color: #0f172a;
}
.dark-theme .esim-phone-user {
	color: #ffffff;
}
.esim-phone-currency {
	font-size: 8.5px;
	color: #94a3b8;
	border-bottom: 1px dashed #cbd5e1;
	padding-bottom: 1px;
}
.esim-phone-active-card {
	background: #ffffff;
	border: 1px solid rgba(0,0,0,0.05);
	border-radius: 12px;
	padding: 12px;
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 4px 10px -3px rgba(0, 0, 0, 0.02);
	position: relative;
	z-index: 5;
	transition: all 0.3s ease;
}
.dark-theme .esim-phone-active-card {
	background: #151e2e;
	border-color: rgba(255,255,255,0.05);
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
}
.esim-active-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 4px;
}
.esim-active-label {
	font-size: 9px;
	font-weight: 800;
	color: #0f172a;
}
.dark-theme .esim-active-label {
	color: #ffffff;
}
.esim-active-badge {
	background: rgba(16, 185, 129, 0.1);
	color: #10b981;
	font-size: 7.5px;
	font-weight: 800;
	padding: 3px 8px;
	border-radius: 100px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.esim-active-badge i {
	animation: esim-pulse-dot 2s infinite;
}
@keyframes esim-pulse-dot {
	0% { opacity: 0.6; transform: scale(0.95); }
	50% { opacity: 1; transform: scale(1.1); }
	100% { opacity: 0.6; transform: scale(0.95); }
}
.esim-active-detail {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 8.5px;
	color: #64748b;
	margin-top: 6px;
}

/* Image inside Card 2 */
.esim-travel-img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	border-radius: 16px 16px 0 0;
	display: block;
	margin-top: auto;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.esim-home-card:hover .esim-travel-img {
	transform: scale(1.03) translateY(-4px);
}

/* Bullet list inside Card 3 */
.esim-bullets-list {
	display: flex;
	flex-direction: column;
	gap: 22px;
	height: 100%;
	justify-content: center;
}
.esim-bullet-item {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}
.esim-bullet-icon {
	width: 44px;
	height: 44px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 15px;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.esim-icon--pink {
	color: #f42776;
	background: linear-gradient(135deg, rgba(244, 39, 118, 0.08) 0%, rgba(244, 39, 118, 0.02) 100%) !important;
	border: 1px solid rgba(244, 39, 118, 0.2) !important;
	box-shadow: 0 4px 10px rgba(244, 39, 118, 0.02);
}
.esim-icon--purple {
	color: #5232da;
	background: linear-gradient(135deg, rgba(88, 43, 242, 0.08) 0%, rgba(88, 43, 242, 0.02) 100%) !important;
	border: 1px solid rgba(88, 43, 242, 0.2) !important;
	box-shadow: 0 4px 10px rgba(88, 43, 242, 0.02);
}
.esim-home-card:hover .esim-icon--pink {
	background: linear-gradient(135deg, rgba(244, 39, 118, 0.14) 0%, rgba(244, 39, 118, 0.04) 100%) !important;
	border-color: rgba(244, 39, 118, 0.35) !important;
	transform: scale(1.05) translateY(-2px);
}
.esim-home-card:hover .esim-icon--purple {
	background: linear-gradient(135deg, rgba(88, 43, 242, 0.14) 0%, rgba(88, 43, 242, 0.04) 100%) !important;
	border-color: rgba(88, 43, 242, 0.35) !important;
	transform: scale(1.05) translateY(-2px);
}
.esim-bullet-content {
	flex: 1;
}
.esim-bullet-title {
	font-family: var(--font-title);
	font-size: 15px;
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: 4px;
}
.esim-bullet-desc {
	font-size: 13.5px;
	color: var(--text-secondary);
	line-height: 1.5;
}

/* Responsive Grid styling */
@media (max-width: 1024px) {
	.esim-homepage-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.esim-home-card {
		min-height: auto;
	}
}
@media (max-width: 768px) {
	.homepage-esim-section {
		padding: 60px 0;
	}
	.esim-title {
		font-size: 32px;
	}
	.cert-badge-dnb {
		height: 60px !important;
		width: 60px !important;
		padding: 0 !important;
	}
	.cert-logo-dnb {
		height: 46px !important;
	}
}

/* ==========================================================================
   Solutions Roundup Section (New Circular Hub)
   ========================================================================== */
.solutions-roundup-section {
	padding: 120px 0;
	position: relative;
	overflow: hidden;
	background: #ffffff;
	border-top: 1px solid rgba(0, 0, 0, 0.04);
	border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.dark-theme .solutions-roundup-section {
	background: #0a0f1e;
	border-color: rgba(255,255,255,0.04);
}

.roundup-grid-wrap--hub-only {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 50px;
}

.roundup-section-header {
	text-align: center;
	margin-bottom: 60px;
	position: relative;
	z-index: 5;
}

.roundup-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 100px;
	background: linear-gradient(135deg, rgba(88, 43, 242, 0.08) 0%, rgba(244, 39, 118, 0.08) 100%);
	border: 1px solid rgba(88, 43, 242, 0.15);
	color: #5232da;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 20px;
}

.roundup-title {
	font-family: var(--font-title);
	font-size: 46px;
	font-weight: 800;
	color: var(--text-primary);
	line-height: 1.25;
	letter-spacing: -1px;
}

.roundup-title em {
	font-style: italic;
	font-weight: 400;
	background: linear-gradient(135deg, #f42776 0%, #5232da 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.roundup-title strong {
	font-weight: 800;
}

.roundup-desc {
	font-size: 18px;
	color: var(--text-secondary);
	max-width: 660px;
	margin: 20px auto 0 auto;
	line-height: 1.6;
}

.roundup-center-visual-centered {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 110px auto 40px auto; /* Down something so it doesn't touch text */
	width: 100%;
	max-width: 600px;
	height: 480px;
	position: relative;
}

.orbital-hub-wrap {
	width: 500px;
	height: 500px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Central Core */
.hub-center {
	position: relative;
	z-index: 10;
}

.hub-center::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 120px;
	height: 120px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: conic-gradient(from 0deg, #f42776, #5232da, #0ea5e9, #22c55e, #f42776);
	filter: blur(14px);
	opacity: 0.55;
	animation: rotate-glow 8s linear infinite;
	z-index: -2;
}

@keyframes rotate-glow {
	0% { transform: translate(-50%, -50%) rotate(0deg); }
	100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.hub-center__core {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	background: linear-gradient(135deg, #f42776 0%, #5232da 100%);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 34px;
	box-shadow: 0 15px 40px rgba(244, 39, 118, 0.4);
	animation: hub-pulse 3s infinite ease-in-out;
}

@keyframes hub-pulse {
	0%, 100% { transform: scale(1); box-shadow: 0 15px 40px rgba(244, 39, 118, 0.4); }
	50% { transform: scale(1.05); box-shadow: 0 15px 50px rgba(244, 39, 118, 0.6); }
}

.hub-center__glow {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(244, 39, 118, 0.2) 0%, rgba(88, 43, 242, 0.06) 50%, transparent 70%);
	filter: blur(12px);
	z-index: -1;
}

/* Orbit rings */
.hub-orbit {
	position: absolute;
	border: 1px dashed rgba(255, 255, 255, 0.08);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.hub-orbit--single {
	width: 440px;
	height: 440px;
	z-index: 5;
	animation: orbit-spin-cw 50s linear infinite;
}

@keyframes orbit-spin-cw {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

@keyframes orbit-spin-ccw {
	from { transform: rotate(360deg); }
	to { transform: rotate(0deg); }
}

/* Pause orbits and upright animations on hover */
.orbital-hub-wrap:hover .hub-orbit,
.orbital-hub-wrap:hover .tg-node i,
.orbital-hub-wrap:hover .orbit-particle {
	animation-play-state: paused !important;
}

/* Orbit Nodes — Base Styles */
.orbital-hub-wrap .tg-node {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	margin: -36px;
	box-shadow: 
		0 12px 30px -6px rgba(0, 0, 0, 0.3), 
		0 6px 12px -4px rgba(0, 0, 0, 0.2), 
		inset 0 1.5px 2px rgba(255, 255, 255, 0.25);
	transition: 
		transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 0.4s ease,
		border-color 0.4s ease,
		background-color 0.4s ease,
		color 0.3s ease;
	z-index: 10;
	cursor: pointer;
	border: 2px solid transparent;
}

.tg-node:hover {
	transform: translate(-50%, -50%) rotate(var(--angle)) translate(var(--orbit-radius)) rotate(calc(-1 * var(--angle))) scale(1.15) !important;
}

.hub-orbit--single .tg-node {
	--orbit-radius: 220px;
	transform: translate(-50%, -50%) rotate(var(--angle)) translate(var(--orbit-radius)) rotate(calc(-1 * var(--angle)));
}

/* Keep icons upright during orbit rotation */
.hub-orbit--single .tg-node i {
	animation: orbit-spin-ccw 50s linear infinite;
	display: inline-block;
}

/* Service node colors - branded solid bubbles with white icons */
.tg-node--whatsapp {
	background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
	color: #ffffff !important;
	border-color: #25D366 !important;
}
.tg-node--whatsapp:hover {
	box-shadow: 0 0 25px rgba(37, 211, 102, 0.65), 0 0 45px rgba(37, 211, 102, 0.35) !important;
}

.tg-node--a2p {
	background: linear-gradient(135deg, #f42776 0%, #c0145c 100%) !important;
	color: #ffffff !important;
	border-color: #f42776 !important;
}
.tg-node--a2p:hover {
	box-shadow: 0 0 25px rgba(244, 39, 118, 0.65), 0 0 45px rgba(244, 39, 118, 0.35) !important;
}

.tg-node--telegram {
	background: linear-gradient(135deg, #0088cc 0%, #0077b5 100%) !important;
	color: #ffffff !important;
	border-color: #0088cc !important;
}
.tg-node--telegram:hover {
	box-shadow: 0 0 25px rgba(0, 136, 204, 0.65), 0 0 45px rgba(0, 136, 204, 0.35) !important;
}

.tg-node--otp {
	background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
	color: #ffffff !important;
	border-color: #3b82f6 !important;
}
.tg-node--otp:hover {
	box-shadow: 0 0 25px rgba(59, 130, 246, 0.65), 0 0 45px rgba(59, 130, 246, 0.35) !important;
}

.tg-node--rich {
	background: linear-gradient(135deg, #ff6d00 0%, #e65100 100%) !important;
	color: #ffffff !important;
	border-color: #ff6d00 !important;
}
.tg-node--rich:hover {
	box-shadow: 0 0 25px rgba(255, 109, 0, 0.65), 0 0 45px rgba(255, 109, 0, 0.35) !important;
}

.tg-node--rcs {
	background: linear-gradient(135deg, #fbad50 0%, #cd486b 50%, #8a3ab9 100%) !important;
	color: #ffffff !important;
	border-color: #cd486b !important;
}
.tg-node--rcs:hover {
	box-shadow: 0 0 25px rgba(205, 72, 107, 0.65), 0 0 45px rgba(205, 72, 107, 0.35) !important;
}

.tg-node--esim {
	background: linear-gradient(135deg, #ec4899 0%, #db2777 100%) !important;
	color: #ffffff !important;
	border-color: #ec4899 !important;
}
.tg-node--esim:hover {
	box-shadow: 0 0 25px rgba(236, 72, 153, 0.65), 0 0 45px rgba(236, 72, 153, 0.35) !important;
}

.tg-node--custom {
	background: linear-gradient(135deg, #5232da 0%, #431fc2 100%) !important;
	color: #ffffff !important;
	border-color: #5232da !important;
}
.tg-node--custom:hover {
	box-shadow: 0 0 25px rgba(88, 43, 242, 0.65), 0 0 45px rgba(88, 43, 242, 0.35) !important;
}

/* Floating Data Particles styled like glowing energy sparks */
.orbit-particle {
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #f42776;
	box-shadow: 0 0 10px #f42776, 0 0 20px #f42776;
	pointer-events: none;
	opacity: 0.8;
	z-index: 2;
}
.orbit-particle--1 { animation: orbit-flow-1 12s linear infinite; }
.orbit-particle--2 { animation: orbit-flow-2 18s linear infinite; background: #5232da; box-shadow: 0 0 10px #5232da; }
.orbit-particle--3 { animation: orbit-flow-3 15s linear infinite; background: #22c55e; box-shadow: 0 0 10px #22c55e; }
.orbit-particle--4 { animation: orbit-flow-4 22s linear infinite; background: #ff6d00; box-shadow: 0 0 10px #ff6d00; }
.orbit-particle--5 { animation: orbit-flow-5 25s linear infinite; background: #0ea5e9; box-shadow: 0 0 10px #0ea5e9; }
.orbit-particle--6 { animation: orbit-flow-6 16s linear infinite; background: #ec4899; box-shadow: 0 0 10px #ec4899; }

@keyframes orbit-flow-1 {
	0% { transform: rotate(0deg) translate(220px) rotate(0deg); }
	100% { transform: rotate(360deg) translate(220px) rotate(-360deg); }
}
@keyframes orbit-flow-2 {
	0% { transform: rotate(120deg) translate(220px) rotate(-120deg); }
	100% { transform: rotate(480deg) translate(220px) rotate(-480deg); }
}
@keyframes orbit-flow-3 {
	0% { transform: rotate(240deg) translate(220px) rotate(-240deg); }
	100% { transform: rotate(600deg) translate(220px) rotate(-600deg); }
}
@keyframes orbit-flow-4 {
	0% { transform: rotate(360deg) translate(220px) rotate(-360deg); }
	100% { transform: rotate(0deg) translate(220px) rotate(0deg); }
}
@keyframes orbit-flow-5 {
	0% { transform: rotate(180deg) translate(220px) rotate(-180deg); }
	100% { transform: rotate(-180deg) translate(220px) rotate(180deg); }
}
@keyframes orbit-flow-6 {
	0% { transform: rotate(90deg) translate(220px) rotate(-90deg); }
	100% { transform: rotate(-270deg) translate(220px) rotate(270deg); }
}

/* Products Grid styles */
.roundup-products-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-top: 60px;
	position: relative;
	z-index: 5;
}

@media (max-width: 1200px) {
	.roundup-products-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.roundup-products-grid {
		grid-template-columns: 1fr;
	}
}

.roundup-prod-card {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 20px;
	padding: 30px;
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
	overflow: hidden;
}

.roundup-prod-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
	pointer-events: none;
}

.roundup-prod-card:hover {
	transform: translateY(-6px);
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.12);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

.roundup-prod-card h3 {
	font-size: 19px;
	font-weight: 700;
	color: #ffffff;
	margin-bottom: 12px;
	letter-spacing: -0.3px;
}

.roundup-prod-card p {
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.6);
	margin: 0;
}

.prod-card-icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	margin-bottom: 20px;
	background: rgba(255, 255, 255, 0.05);
	color: #ffffff;
	transition: all 0.3s ease;
}

.prod-card--whatsapp .prod-card-icon { background: rgba(37, 211, 102, 0.15); color: #25d366; }
.prod-card--a2p .prod-card-icon { background: rgba(244, 39, 118, 0.15); color: #f42776; }
.prod-card--telegram .prod-card-icon { background: rgba(0, 136, 204, 0.15); color: #0088cc; }
.prod-card--otp .prod-card-icon { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.prod-card--rich .prod-card-icon { background: rgba(255, 109, 0, 0.15); color: #ff6d00; }
.prod-card--rcs .prod-card-icon { background: rgba(225, 48, 108, 0.15); color: #e1306c; }
.prod-card--esim .prod-card-icon { background: rgba(236, 72, 153, 0.15); color: #ec4899; }
.prod-card--custom .prod-card-icon { background: rgba(88, 43, 242, 0.15); color: #5232da; }

.roundup-prod-card:hover .prod-card-icon {
	transform: scale(1.1);
}
/* ---------- eSIM Responsive Overrides ---------- */
@media (max-width: 1024px) {
	.esim-homepage-grid {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}
	.esim-home-card {
		min-height: 480px !important;
		padding: 30px !important;
	}
}
@media (max-width: 768px) {
	.homepage-esim-section {
		padding: 60px 0 !important;
	}
	.esim-title {
		font-size: 32px !important;
	}
	.esim-home-card {
		min-height: 440px !important;
		padding: 24px !important;
	}
	.esim-phone-mockup {
		height: 200px !important;
	}
}

/* ---------- Flux Inspired Blog Design System ---------- */
.blog-page-wrap {
	background-color: #ffffff;
	color: #0f172a;
	font-family: 'Inter', sans-serif;
	padding: 60px 0 100px;
}
.dark-theme .blog-page-wrap {
	background-color: #0b0f19;
	color: #f8fafc;
}
.blog-layout-grid {
	display: grid;
	grid-template-columns: 2.2fr 1fr;
	gap: 48px;
	align-items: start;
}
@media (max-width: 991px) {
	.blog-layout-grid {
		grid-template-columns: 1fr;
		gap: 60px;
	}
}

/* Post Card Grid */
.flux-posts-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px 24px;
}
@media (max-width: 600px) {
	.flux-posts-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

.flux-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	height: 100%;
}
.flux-card__thumb-link {
	display: block;
	width: 100%;
	position: relative;
	aspect-ratio: 1.5; /* Modern wide thumbnail ratio */
	overflow: hidden;
	border-radius: 2px;
	background: #1e293b;
}
.flux-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.flux-card:hover .flux-card__img {
	transform: scale(1.04);
}
.flux-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	background: #000000;
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	padding: 4px 8px;
	text-transform: uppercase;
	border-radius: 2px;
	letter-spacing: 0.5px;
	z-index: 5;
}
.flux-card__title {
	font-family: 'Lora', Georgia, serif;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
	color: #0f172a;
	transition: color 0.2s ease;
}
.dark-theme .flux-card__title {
	color: #f8fafc;
}
.flux-card__title a {
	color: inherit;
	text-decoration: none;
}
.flux-card__title a:hover {
	color: var(--primary);
}
.flux-card__meta {
	font-size: 11.5px;
	color: #64748b;
	font-weight: 500;
	display: flex;
	gap: 8px;
	align-items: center;
}
.dark-theme .flux-card__meta {
	color: #94a3b8;
}
.flux-card__meta a {
	color: inherit;
	text-decoration: none;
	font-weight: 600;
}
.flux-card__meta a:hover {
	color: var(--primary);
}

/* Sidebar Widgets */
.flux-sidebar {
	display: flex;
	flex-direction: column;
	gap: 48px;
	position: sticky;
	top: 120px;
}
.flux-sidebar-widget {
	border-bottom: 1px solid rgba(15, 23, 42, 0.08);
	padding-bottom: 40px;
}
.dark-theme .flux-sidebar-widget {
	border-color: rgba(255, 255, 255, 0.08);
}
.flux-sidebar-widget:last-child {
	border-bottom: none;
	padding-bottom: 0;
}
.flux-widget-title {
	font-size: 10px;
	font-weight: 700;
	color: #94a3b8;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-bottom: 20px;
	display: block;
}
.dark-theme .flux-widget-title {
	color: #64748b;
}

/* About Me Widget */
.flux-about-widget {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.flux-about-avatar {
	width: 90px;
	height: 90px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 4px;
}
.flux-about-name {
	font-size: 18px;
	font-weight: 800;
	color: #0f172a;
	margin: 0;
}
.dark-theme .flux-about-name {
	color: #f8fafc;
}
.flux-about-bio {
	font-size: 13px;
	color: #64748b;
	line-height: 1.6;
	margin: 0;
}
.dark-theme .flux-about-bio {
	color: #94a3b8;
}

/* Popular Slideshow Widget */
.flux-popular-card {
	position: relative;
	aspect-ratio: 1.4;
	overflow: hidden;
	border-radius: 2px;
	background: #1e293b;
	display: block;
}
.flux-popular-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.85;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.flux-popular-card:hover .flux-popular-img {
	transform: scale(1.03);
}
.flux-popular-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0.3) 100%);
	padding: 24px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 8px;
	color: #ffffff;
}
.flux-popular-badge {
	font-size: 8.5px;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #ffffff;
	border-bottom: 2px solid var(--primary);
	align-self: flex-start;
	padding-bottom: 2px;
}
.flux-popular-title {
	font-family: 'Lora', Georgia, serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
}
.flux-popular-meta {
	font-size: 10.5px;
	opacity: 0.7;
	display: flex;
	gap: 8px;
}

/* Slider Indicators */
.flux-popular-indicators {
	display: flex;
	gap: 6px;
	justify-content: center;
	margin-top: 16px;
}
.flux-dot {
	width: 16px;
	height: 3px;
	background: rgba(15, 23, 42, 0.1);
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.3s;
}
.dark-theme .flux-dot {
	background: rgba(255, 255, 255, 0.1);
}
.flux-dot.active {
	background: #000000;
}
.dark-theme .flux-dot.active {
	background: #ffffff;
}

/* Trending List Widget */
.flux-trending-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.flux-trending-item {
	display: flex;
	gap: 16px;
	align-items: center;
}
.flux-trending-num {
	width: 32px;
	height: 32px;
	background: #000000;
	color: #ffffff;
	font-size: 13px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 2px;
	flex-shrink: 0;
}
.dark-theme .flux-trending-num {
	background: #ffffff;
	color: #0b0f19;
}
.flux-trending-content {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.flux-trending-title {
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.4;
	margin: 0;
	color: #0f172a;
}
.dark-theme .flux-trending-title {
	color: #f8fafc;
}
.flux-trending-title a {
	color: inherit;
	text-decoration: none;
}
.flux-trending-title a:hover {
	color: var(--primary);
}

/* Follow Widget */
.flux-follow-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.flux-follow-item {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
}
.flux-follow-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
}
.flux-follow-handle {
	font-size: 12.5px;
	font-weight: 700;
	padding: 7px 14px;
	border-radius: 4px;
	flex-grow: 1;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.flux-follow-handle--insta {
	background: #e8f5e9;
	color: #2e7d32;
}
.flux-follow-handle--youtube {
	background: #ffebee;
	color: #c62828;
}
.flux-follow-count {
	font-size: 11px;
	opacity: 0.65;
	font-weight: 600;
}

/* ---------- Flux Single Post Styling ---------- */
.flux-single-wrap {
	background-color: #ffffff;
	color: #0f172a;
	padding: 60px 0 100px;
}
.dark-theme .flux-single-wrap {
	background-color: #0b0f19;
	color: #f8fafc;
}
.flux-single-container {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 24px;
}
.flux-single-header {
	text-align: center;
	margin-bottom: 48px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}
.flux-single-cat {
	font-size: 11px;
	font-weight: 700;
	color: var(--primary);
	text-transform: uppercase;
	letter-spacing: 2px;
	display: inline-block;
}
.flux-single-title {
	font-family: 'Outfit', sans-serif;
	font-size: 42px;
	font-weight: 800;
	line-height: 1.35;
	color: #0f172a;
	margin: 0;
}
.dark-theme .flux-single-title {
	color: #f8fafc;
}
.flux-single-meta {
	font-size: 12px;
	color: #64748b;
	font-weight: 500;
	display: flex;
	gap: 16px;
	align-items: center;
}
.dark-theme .flux-single-meta {
	color: #94a3b8;
}
.flux-single-meta-author {
	color: #0f172a;
	font-weight: 700;
	text-decoration: none;
}
.dark-theme .flux-single-meta-author {
	color: #f8fafc;
}
.flux-single-meta-author:hover {
	color: var(--primary);
}

.flux-single-featured {
	width: 100%;
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 48px;
	box-shadow: 0 20px 40px rgba(15, 23, 42, 0.04);
}
.flux-single-featured img {
	width: 100%;
	height: auto;
	display: block;
	max-height: 480px;
	object-fit: cover;
}

.flux-content-body {
	font-family: 'Lora', Georgia, serif;
	font-size: 18px;
	line-height: 1.85;
	color: #1e293b;
}
.dark-theme .flux-content-body {
	color: #cbd5e1;
}
.flux-content-body p {
	margin-bottom: 28px;
}

/* Drop Cap styling */
.flux-content-body p:first-of-type::first-letter {
	float: left;
	font-family: 'Outfit', sans-serif;
	font-size: 76px;
	line-height: 56px;
	padding-top: 4px;
	padding-right: 12px;
	font-weight: 800;
	color: var(--primary);
}

.flux-content-body h2, .flux-content-body h3 {
	font-family: 'Outfit', sans-serif;
	color: #0f172a;
	font-weight: 800;
	margin: 48px 0 20px;
	line-height: 1.25;
}
.dark-theme .flux-content-body h2, .dark-theme .flux-content-body h3 {
	color: #f8fafc;
}
.flux-content-body h2 {
	font-size: 28px;
}
.flux-content-body h3 {
	font-size: 22px;
}

/* Pull Quotes */
.flux-blockquote {
	font-family: 'Lora', Georgia, serif;
	font-size: 21px;
	font-style: italic;
	color: var(--secondary);
	border-left: 3px solid var(--primary);
	padding-left: 28px;
	margin: 44px 0;
	line-height: 1.6;
}
.dark-theme .flux-blockquote {
	color: #a78bfa;
}

/* Bio Card */
.flux-author-bio-card {
	display: flex;
	gap: 24px;
	background: #f8fafc;
	border: 1px solid rgba(15, 23, 42, 0.05);
	padding: 28px;
	border-radius: 4px;
	margin-top: 56px;
	align-items: center;
}
.dark-theme .flux-author-bio-card {
	background: #111827;
	border-color: rgba(255, 255, 255, 0.05);
}
@media (max-width: 576px) {
	.flux-author-bio-card {
		flex-direction: column;
		text-align: center;
	}
}
.flux-bio-avatar {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}
.flux-bio-content {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.flux-bio-title {
	font-size: 15px;
	font-weight: 700;
	color: #94a3b8;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.flux-bio-name {
	font-size: 18px;
	font-weight: 800;
	color: #0f172a;
	margin: 0;
}
.dark-theme .flux-bio-name {
	color: #f8fafc;
}
.flux-bio-text {
	font-size: 13.5px;
	color: #64748b;
	line-height: 1.6;
	margin: 0;
}
.dark-theme .flux-bio-text {
	color: #94a3b8;
}

/* ---------- Premium 404 Page Styling ---------- */
.flux-404-wrap {
	min-height: 70vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 80px 24px;
	position: relative;
	overflow: hidden;
	background: var(--bg-dark);
}
.flux-404-container {
	max-width: 600px;
	margin: 0 auto;
	position: relative;
	z-index: 5;
}
.flux-404-code {
	font-family: 'Outfit', sans-serif;
	font-size: 130px;
	font-weight: 900;
	line-height: 1;
	margin: 0;
	background: linear-gradient(135deg, #f42776 0%, #5232da 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	letter-spacing: -2px;
}
.flux-404-title {
	font-family: 'Outfit', sans-serif;
	font-size: 32px;
	font-weight: 800;
	color: var(--text-primary);
	margin: 24px 0 12px;
}
.flux-404-desc {
	font-size: 16px;
	color: var(--text-secondary);
	line-height: 1.6;
	margin-bottom: 36px;
}
.flux-404-actions {
	display: flex;
	gap: 16px;
	justify-content: center;
	align-items: center;
}
@media (max-width: 480px) {
	.flux-404-actions {
		flex-direction: column;
		width: 100%;
	}
	.flux-404-actions .btn {
		width: 100%;
	}
}

/* Hanging Spider Visual */
.hanging-spider-wrap {
	width: 120px;
	height: 220px;
	margin: 0 auto 20px auto;
	position: relative;
	transform-origin: top center;
	animation: spiderSwing 4.5s ease-in-out infinite;
}
.spider-svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}
.spider-line {
	stroke: var(--border-color);
	stroke-width: 1.5;
	stroke-dasharray: 4 3;
}
.spider-body {
	fill: #5232da;
	transition: fill 0.3s ease;
}
.dark-theme .spider-body {
	fill: #f42776;
}
.spider-glow {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	width: 80px;
	height: 80px;
	background: radial-gradient(circle, rgba(88, 43, 242, 0.15) 0%, transparent 70%);
	z-index: -1;
	animation: spiderGlow 2.5s infinite ease-in-out;
}
.dark-theme .spider-glow {
	background: radial-gradient(circle, rgba(244, 39, 118, 0.2) 0%, transparent 70%);
}

@keyframes spiderSwing {
	0%, 100% {
		transform: rotate(-10deg);
	}
	50% {
		transform: rotate(10deg);
	}
}

@keyframes spiderGlow {
	0%, 100% {
		transform: translateX(-50%) scale(0.95);
		opacity: 0.8;
	}
	50% {
		transform: translateX(-50%) scale(1.15);
		opacity: 1;
	}
}

/* ---------- eSIM Responsive Overrides ---------- */
@media (max-width: 1024px) {
	.esim-homepage-grid {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}
	.esim-home-card {
		min-height: 480px !important;
		padding: 30px !important;
	}
}
@media (max-width: 768px) {
	.homepage-esim-section {
		padding: 60px 0 !important;
	}
	.esim-title {
		font-size: 32px !important;
	}
	.esim-home-card {
		min-height: 440px !important;
		padding: 24px !important;
	}
	.esim-phone-mockup {
		height: 200px !important;
	}
}

/* ---------- Flux Inspired Blog Design System ---------- */
.blog-page-wrap {
	background-color: #ffffff;
	color: #0f172a;
	font-family: 'Inter', sans-serif;
	padding: 60px 0 100px;
}
.dark-theme .blog-page-wrap {
	background-color: #0b0f19;
	color: #f8fafc;
}
.blog-layout-grid {
	display: grid;
	grid-template-columns: 2.2fr 1fr;
	gap: 48px;
	align-items: start;
}
@media (max-width: 991px) {
	.blog-layout-grid {
		grid-template-columns: 1fr;
		gap: 60px;
	}
}

/* Post Card Grid */
.flux-posts-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px 24px;
}
@media (max-width: 600px) {
	.flux-posts-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

.flux-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	height: 100%;
}
.flux-card__thumb-link {
	display: block;
	width: 100%;
	position: relative;
	aspect-ratio: 1.5; /* Modern wide thumbnail ratio */
	overflow: hidden;
	border-radius: 2px;
	background: #1e293b;
}
.flux-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.flux-card:hover .flux-card__img {
	transform: scale(1.04);
}
.flux-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	background: #000000;
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	padding: 4px 8px;
	text-transform: uppercase;
	border-radius: 2px;
	letter-spacing: 0.5px;
	z-index: 5;
}
.flux-card__title {
	font-family: 'Lora', Georgia, serif;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
	color: #0f172a;
	transition: color 0.2s ease;
}
.dark-theme .flux-card__title {
	color: #f8fafc;
}
.flux-card__title a {
	color: inherit;
	text-decoration: none;
}
.flux-card__title a:hover {
	color: var(--primary);
}
.flux-card__meta {
	font-size: 11.5px;
	color: #64748b;
	font-weight: 500;
	display: flex;
	gap: 8px;
	align-items: center;
}
.dark-theme .flux-card__meta {
	color: #94a3b8;
}
.flux-card__meta a {
	color: inherit;
	text-decoration: none;
	font-weight: 600;
}
.flux-card__meta a:hover {
	color: var(--primary);
}

/* Sidebar Widgets */
.flux-sidebar {
	display: flex;
	flex-direction: column;
	gap: 48px;
	position: sticky;
	top: 120px;
}
.flux-sidebar-widget {
	border-bottom: 1px solid rgba(15, 23, 42, 0.08);
	padding-bottom: 40px;
}
.dark-theme .flux-sidebar-widget {
	border-color: rgba(255, 255, 255, 0.08);
}
.flux-sidebar-widget:last-child {
	border-bottom: none;
	padding-bottom: 0;
}
.flux-widget-title {
	font-size: 10px;
	font-weight: 700;
	color: #94a3b8;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-bottom: 20px;
	display: block;
}
.dark-theme .flux-widget-title {
	color: #64748b;
}

/* About Me Widget */
.flux-about-widget {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.flux-about-avatar {
	width: 90px;
	height: 90px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 4px;
}
.flux-about-name {
	font-size: 18px;
	font-weight: 800;
	color: #0f172a;
	margin: 0;
}
.dark-theme .flux-about-name {
	color: #f8fafc;
}
.flux-about-bio {
	font-size: 13px;
	color: #64748b;
	line-height: 1.6;
	margin: 0;
}
.dark-theme .flux-about-bio {
	color: #94a3b8;
}

/* Popular Slideshow Widget */
.flux-popular-card {
	position: relative;
	aspect-ratio: 1.4;
	overflow: hidden;
	border-radius: 2px;
	background: #1e293b;
	display: block;
}
.flux-popular-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.85;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.flux-popular-card:hover .flux-popular-img {
	transform: scale(1.03);
}
.flux-popular-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0.3) 100%);
	padding: 24px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 8px;
	color: #ffffff;
}
.flux-popular-badge {
	font-size: 8.5px;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #ffffff;
	border-bottom: 2px solid var(--primary);
	align-self: flex-start;
	padding-bottom: 2px;
}
.flux-popular-title {
	font-family: 'Lora', Georgia, serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
}
.flux-popular-meta {
	font-size: 10.5px;
	opacity: 0.7;
	display: flex;
	gap: 8px;
}

/* Slider Indicators */
.flux-popular-indicators {
	display: flex;
	gap: 6px;
	justify-content: center;
	margin-top: 16px;
}
.flux-dot {
	width: 16px;
	height: 3px;
	background: rgba(15, 23, 42, 0.1);
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.3s;
}
.dark-theme .flux-dot {
	background: rgba(255, 255, 255, 0.1);
}
.flux-dot.active {
	background: #000000;
}
.dark-theme .flux-dot.active {
	background: #ffffff;
}

/* Trending List Widget */
.flux-trending-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.flux-trending-item {
	display: flex;
	gap: 16px;
	align-items: center;
}
.flux-trending-num {
	width: 32px;
	height: 32px;
	background: #000000;
	color: #ffffff;
	font-size: 13px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 2px;
	flex-shrink: 0;
}
.dark-theme .flux-trending-num {
	background: #ffffff;
	color: #0b0f19;
}
.flux-trending-content {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.flux-trending-title {
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.4;
	margin: 0;
	color: #0f172a;
}
.dark-theme .flux-trending-title {
	color: #f8fafc;
}
.flux-trending-title a {
	color: inherit;
	text-decoration: none;
}
.flux-trending-title a:hover {
	color: var(--primary);
}

/* Follow Widget */
.flux-follow-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.flux-follow-item {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
}
.flux-follow-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
}
.flux-follow-handle {
	font-size: 12.5px;
	font-weight: 700;
	padding: 7px 14px;
	border-radius: 4px;
	flex-grow: 1;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.flux-follow-handle--insta {
	background: #e8f5e9;
	color: #2e7d32;
}
.flux-follow-handle--youtube {
	background: #ffebee;
	color: #c62828;
}
.flux-follow-count {
	font-size: 11px;
	opacity: 0.65;
	font-weight: 600;
}

/* ---------- Flux Single Post Styling ---------- */
.flux-single-wrap {
	background-color: #ffffff;
	color: #0f172a;
	padding: 60px 0 100px;
}
.dark-theme .flux-single-wrap {
	background-color: #0b0f19;
	color: #f8fafc;
}
.flux-single-container {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 24px;
}
.flux-single-header {
	text-align: center;
	margin-bottom: 48px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}
.flux-single-cat {
	font-size: 11px;
	font-weight: 700;
	color: var(--primary);
	text-transform: uppercase;
	letter-spacing: 2px;
	display: inline-block;
}
.flux-single-title {
	font-family: 'Outfit', sans-serif;
	font-size: 42px;
	font-weight: 800;
	line-height: 1.35;
	color: #0f172a;
	margin: 0;
}
.dark-theme .flux-single-title {
	color: #f8fafc;
}
.flux-single-meta {
	font-size: 12px;
	color: #64748b;
	font-weight: 500;
	display: flex;
	gap: 16px;
	align-items: center;
}
.dark-theme .flux-single-meta {
	color: #94a3b8;
}
.flux-single-meta-author {
	color: #0f172a;
	font-weight: 700;
	text-decoration: none;
}
.dark-theme .flux-single-meta-author {
	color: #f8fafc;
}
.flux-single-meta-author:hover {
	color: var(--primary);
}

.flux-single-featured {
	width: 100%;
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 48px;
	box-shadow: 0 20px 40px rgba(15, 23, 42, 0.04);
}
.flux-single-featured img {
	width: 100%;
	height: auto;
	display: block;
	max-height: 480px;
	object-fit: cover;
}

.flux-content-body {
	font-family: 'Lora', Georgia, serif;
	font-size: 18px;
	line-height: 1.85;
	color: #1e293b;
}
.dark-theme .flux-content-body {
	color: #cbd5e1;
}
.flux-content-body p {
	margin-bottom: 28px;
}

/* Drop Cap styling */
.flux-content-body p:first-of-type::first-letter {
	float: left;
	font-family: 'Outfit', sans-serif;
	font-size: 76px;
	line-height: 56px;
	padding-top: 4px;
	padding-right: 12px;
	font-weight: 800;
	color: var(--primary);
}

.flux-content-body h2, .flux-content-body h3 {
	font-family: 'Outfit', sans-serif;
	color: #0f172a;
	font-weight: 800;
	margin: 48px 0 20px;
	line-height: 1.25;
}
.dark-theme .flux-content-body h2, .dark-theme .flux-content-body h3 {
	color: #f8fafc;
}
.flux-content-body h2 {
	font-size: 28px;
}
.flux-content-body h3 {
	font-size: 22px;
}

/* WordPress Gallery & Images in Post Content */
.flux-content-body figure.gallery-item,
.flux-content-body .wp-block-gallery,
.flux-content-body figure {
	margin: 16px 8px;
	display: inline-block;
}
.flux-content-body figure.gallery-item img,
.flux-content-body img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.06);
	transition: transform 0.25s ease;
}
.flux-content-body figure.gallery-item img:hover,
.flux-content-body img:hover {
	transform: scale(1.02);
}
.flux-content-body ul,
.flux-content-body ol {
	margin: 20px 0 28px 24px;
	padding-left: 12px;
}
.flux-content-body li {
	margin-bottom: 8px;
	line-height: 1.7;
}
.flux-content-body hr {
	border: none;
	border-top: 1px solid rgba(0,0,0,0.08);
	margin: 36px 0;
}

/* Pull Quotes */
.flux-blockquote {
	font-family: 'Lora', Georgia, serif;
	font-size: 21px;
	font-style: italic;
	color: var(--secondary);
	border-left: 3px solid var(--primary);
	padding-left: 28px;
	margin: 44px 0;
	line-height: 1.6;
}
.dark-theme .flux-blockquote {
	color: #a78bfa;
}

/* Bio Card */
.flux-author-bio-card {
	display: flex;
	gap: 24px;
	background: #f8fafc;
	border: 1px solid rgba(15, 23, 42, 0.05);
	padding: 28px;
	border-radius: 4px;
	margin-top: 56px;
	align-items: center;
}
.dark-theme .flux-author-bio-card {
	background: #111827;
	border-color: rgba(255, 255, 255, 0.05);
}
@media (max-width: 576px) {
	.flux-author-bio-card {
		flex-direction: column;
		text-align: center;
	}
}
.flux-bio-avatar {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}
.flux-bio-content {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.flux-bio-title {
	font-size: 15px;
	font-weight: 700;
	color: #94a3b8;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.flux-bio-name {
	font-size: 18px;
	font-weight: 800;
	color: #0f172a;
	margin: 0;
}
.dark-theme .flux-bio-name {
	color: #f8fafc;
}
.flux-bio-text {
	font-size: 13.5px;
	color: #64748b;
	line-height: 1.6;
	margin: 0;
}
.dark-theme .flux-bio-text {
	color: #94a3b8;
}

/* ---------- Premium 404 Page Styling ---------- */
.flux-404-wrap {
	min-height: 70vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 80px 24px;
	position: relative;
	overflow: hidden;
	background: var(--bg-dark);
}
.flux-404-container {
	max-width: 600px;
	margin: 0 auto;
	position: relative;
	z-index: 5;
}
.flux-404-code {
	font-family: 'Outfit', sans-serif;
	font-size: 130px;
	font-weight: 900;
	line-height: 1;
	margin: 0;
	background: linear-gradient(135deg, #f42776 0%, #5232da 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	letter-spacing: -2px;
}
.flux-404-title {
	font-family: 'Outfit', sans-serif;
	font-size: 32px;
	font-weight: 800;
	color: var(--text-primary);
	margin: 24px 0 12px;
}
.flux-404-desc {
	font-size: 16px;
	color: var(--text-secondary);
	line-height: 1.6;
	margin-bottom: 36px;
}
.flux-404-actions {
	display: flex;
	gap: 16px;
	justify-content: center;
	align-items: center;
}
@media (max-width: 480px) {
	.flux-404-actions {
		flex-direction: column;
		width: 100%;
	}
	.flux-404-actions .btn {
		width: 100%;
	}
}

/* Hanging Spider Visual */
.hanging-spider-wrap {
	width: 120px;
	height: 220px;
	margin: 0 auto 20px auto;
	position: relative;
	transform-origin: top center;
	animation: spiderSwing 4.5s ease-in-out infinite;
}
.spider-svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}
.spider-line {
	stroke: var(--border-color);
	stroke-width: 1.5;
	stroke-dasharray: 4 3;
}
.spider-body {
	fill: #5232da;
	transition: fill 0.3s ease;
}
.dark-theme .spider-body {
	fill: #f42776;
}
.spider-glow {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	width: 80px;
	height: 80px;
	background: radial-gradient(circle, rgba(88, 43, 242, 0.15) 0%, transparent 70%);
	z-index: -1;
	animation: spiderGlow 2.5s infinite ease-in-out;
}
.dark-theme .spider-glow {
	background: radial-gradient(circle, rgba(244, 39, 118, 0.2) 0%, transparent 70%);
}

@keyframes spiderSwing {
	0%, 100% {
		transform: rotate(-10deg);
	}
	50% {
		transform: rotate(10deg);
	}
}

@keyframes spiderGlow {
	0%, 100% {
		transform: translateX(-50%) scale(0.95);
		opacity: 0.8;
	}
	50% {
		transform: translateX(-50%) scale(1.15);
		opacity: 1;
	}
}

/* ==========================================================================
   About Us Page Styles - Company Section, Stats, Team Grid
   ========================================================================== */

.about-company-section {
	padding: 100px 0;
	background: #ffffff;
	position: relative;
}
.dark-theme .about-company-section {
	background: var(--surface);
}
.about-company-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}
@media (max-width: 1024px) {
	.about-company-grid { grid-template-columns: 1fr; gap: 40px; }
}
.about-company-title {
	font-family: var(--font-title);
	font-size: clamp(28px, 3.5vw, 42px);
	font-weight: 800;
	color: var(--text-primary);
	line-height: 1.2;
	letter-spacing: -0.5px;
}
.about-company-content p {
	font-size: 16px;
	line-height: 1.75;
	color: var(--text-secondary);
	margin-bottom: 18px;
}
.about-stats-bento {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.bento-stat-card {
	background: linear-gradient(135deg, rgba(88,43,242,0.04) 0%, rgba(244,39,118,0.04) 100%);
	border: 1px solid rgba(88,43,242,0.1);
	border-radius: 20px;
	padding: 32px 24px;
	text-align: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.bento-stat-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 30px rgba(88,43,242,0.1);
}
.bento-stat-card h3 {
	font-family: var(--font-title);
	font-size: 38px;
	font-weight: 800;
	background: linear-gradient(135deg, #f42776 0%, #5232da 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin: 0 0 8px 0;
}
.bento-stat-card p {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0;
}
.dark-theme .bento-stat-card {
	background: rgba(255,255,255,0.03);
	border-color: rgba(255,255,255,0.08);
}

/* About Us - Team Section */
.about-team-section {
	padding: 100px 0;
	background: #f8fafc;
	position: relative;
}
.dark-theme .about-team-section {
	background: #070e1b;
}
.team-section-header {
	text-align: center;
	max-width: 600px;
	margin: 0 auto 60px;
}
.team-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 16px;
	border-radius: 100px;
	background: linear-gradient(135deg, rgba(244,39,118,0.08), rgba(88,43,242,0.08));
	border: 1px solid rgba(244,39,118,0.15);
	color: #f42776;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 20px;
}
.team-section-title {
	font-family: var(--font-title);
	font-size: clamp(28px, 3.5vw, 40px);
	font-weight: 800;
	color: var(--text-primary);
	margin-bottom: 16px;
}
.team-section-desc {
	font-size: 16px;
	color: var(--text-secondary);
	line-height: 1.6;
}
.team-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
}
@media (max-width: 1200px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .team-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 480px)  { .team-grid { grid-template-columns: 1fr; } }

.team-card {
	background: #ffffff;
	border: 1px solid rgba(0,0,0,0.05);
	border-radius: 20px;
	padding: 28px 20px 24px;
	text-align: center;
	transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease;
	position: relative;
	overflow: hidden;
}
.team-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 40px rgba(88,43,242,0.10);
	border-color: rgba(88,43,242,0.15);
}
.dark-theme .team-card {
	background: rgba(255,255,255,0.03);
	border-color: rgba(255,255,255,0.06);
}
.dark-theme .team-card:hover {
	border-color: rgba(244,39,118,0.3);
	box-shadow: 0 20px 40px rgba(244,39,118,0.10);
}
.team-card-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.team-avatar-wrap {
	position: relative;
	margin-bottom: 16px;
	width: 100px;
	height: 100px;
	flex-shrink: 0;
}
.team-avatar-link {
	display: block;
	border-radius: 50%;
	overflow: hidden;
	position: relative;
}
.team-avatar {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	object-fit: cover;
	object-position: top center;
	border: 3px solid #f0f4ff;
	display: block;
	transition: transform 0.3s ease;
}
.team-card:hover .team-avatar { transform: scale(1.04); }
.dark-theme .team-avatar { border-color: rgba(88,43,242,0.25); }
.team-avatar-overlay {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: rgba(88,43,242,0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 20px;
	opacity: 0;
	transition: opacity 0.3s ease;
}
.team-avatar-link:hover .team-avatar-overlay { opacity: 1; }
.team-avatar-glow {
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	background: conic-gradient(from 0deg, #f42776, #5232da, #f42776);
	z-index: -1;
	opacity: 0;
	transition: opacity 0.35s ease;
	filter: blur(3px);
}
.team-card:hover .team-avatar-glow { opacity: 0.45; }
.team-name {
	font-family: var(--font-title);
	font-size: 17px;
	font-weight: 700;
	color: var(--text-primary);
	margin: 0 0 6px;
	line-height: 1.3;
}
.team-designation {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	border-radius: 100px;
	padding: 3px 10px;
	display: inline-block;
}
.designation-leadership {
	color: #f42776;
	background: rgba(244,39,118,0.08);
}
.designation-accounts,
.designation-ops {
	color: #5232da;
	background: rgba(88,43,242,0.08);
}

/* ==========================================================================
   Homepage Blog Preview Section
   ========================================================================== */
.homepage-blog-section {
	padding: 100px 0;
	background: #f8fafc;
	position: relative;
}
.dark-theme .homepage-blog-section {
	background: #070e1b;
}
.homepage-blog-header {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 60px;
}
.homepage-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
@media (max-width: 1024px) { .homepage-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .homepage-blog-grid { grid-template-columns: 1fr; } }

.hp-blog-card {
	background: #ffffff;
	border: 1px solid rgba(0,0,0,0.05);
	border-radius: 20px;
	overflow: hidden;
	transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease;
}
.hp-blog-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 40px rgba(88,43,242,0.10);
}
.dark-theme .hp-blog-card {
	background: rgba(255,255,255,0.03);
	border-color: rgba(255,255,255,0.06);
}
.hp-blog-card__thumb-link {
	display: block;
	position: relative;
	overflow: hidden;
	height: 200px;
}
.hp-blog-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.hp-blog-card:hover .hp-blog-card__img { transform: scale(1.05); }
.hp-blog-card__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	background: linear-gradient(135deg, #f42776, #5232da);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 4px 10px;
	border-radius: 100px;
	z-index: 2;
}
.hp-blog-card__body {
	padding: 20px 22px 24px;
}
.hp-blog-card__meta {
	font-size: 13px;
	color: var(--text-secondary);
	margin-bottom: 10px;
}
.hp-blog-card__meta a {
	color: #5232da;
	text-decoration: none;
	font-weight: 600;
}
.hp-blog-card__title {
	font-family: var(--font-title);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0 0 14px;
}
.hp-blog-card__title a {
	color: var(--text-primary);
	text-decoration: none;
	transition: color 0.2s ease;
}
.hp-blog-card__title a:hover { color: #f42776; }
.hp-blog-card__read-more {
	font-size: 13px;
	font-weight: 600;
	color: #5232da;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: gap 0.2s ease;
}
.hp-blog-card__read-more:hover { gap: 10px; }


/* ==========================================================================
   FIXES: Global Network Orbital Hub, Team Filter Buttons, Designation Tags & Blog Grid
   ========================================================================== */

/* Global Network Center Hub Visual */
.roundup-center-visual,
.roundup-center-visual-centered {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 50px auto 30px auto;
	width: 100%;
	max-width: 600px;
	height: 480px;
	position: relative;
}

.orbital-hub-wrap {
	width: 500px;
	height: 500px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hub-orbit--single {
	position: absolute;
	width: 440px;
	height: 440px;
	border: 1px dashed rgba(88, 43, 242, 0.15);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	animation: orbit-spin-cw 50s linear infinite;
	z-index: 5;
}

.orbital-hub-wrap .tg-node,
.orbital-hub-wrap .service-node {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	margin: -36px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
	z-index: 10;
	cursor: pointer;
	border: 2px solid transparent;
}

.hub-orbit--single .tg-node,
.hub-orbit--single .service-node {
	--orbit-radius: 220px;
	transform: translate(-50%, -50%) rotate(var(--angle)) translate(var(--orbit-radius)) rotate(calc(-1 * var(--angle))) !important;
}

.hub-orbit--single .tg-node i,
.hub-orbit--single .service-node i {
	animation: orbit-spin-ccw 50s linear infinite;
	display: inline-block;
}

/* About Us Team Filter Buttons Styling */
.team-filter-container {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 36px 0 48px;
}

.team-filter-btn {
	background: #ffffff !important;
	border: 1px solid rgba(244, 39, 118, 0.3) !important;
	color: #f42776 !important;
	padding: 10px 24px !important;
	border-radius: 30px !important;
	font-family: 'Outfit', sans-serif !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	cursor: pointer !important;
	transition: all 0.3s ease !important;
	box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
}

.team-filter-btn:hover {
	background: rgba(244, 39, 118, 0.08) !important;
	color: #f42776 !important;
	border-color: #f42776 !important;
}

.team-filter-btn.active {
	background: #f42776 !important;
	color: #ffffff !important;
	border-color: #f42776 !important;
	box-shadow: 0 6px 20px rgba(244, 39, 118, 0.35) !important;
}

/* Team Card Designations Colors */
.team-designation {
	display: inline-block;
	padding: 4px 16px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-top: 6px;
}

.designation-leadership {
	background: rgba(244, 39, 118, 0.1) !important;
	color: #f42776 !important;
	border: 1px solid rgba(244, 39, 118, 0.2) !important;
}

.designation-accounts,
.designation-ops,
.team-designation:not(.designation-leadership) {
	background: rgba(82, 50, 218, 0.1) !important;
	color: #5232da !important;
	border: 1px solid rgba(82, 50, 218, 0.2) !important;
}

/* Homepage Blog Grid Styling */
.homepage-blog-section {
	padding: 90px 0;
	background: #ffffff;
	position: relative;
}

.blog-section-header {
	text-align: center;
	max-width: 680px;
	margin: 0 auto 50px;
}

.blog-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(88, 43, 242, 0.08);
	color: #5232da;
	padding: 6px 18px;
	border-radius: 30px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 16px;
}

.blog-section-title {
	font-family: 'Outfit', sans-serif;
	font-size: 38px;
	font-weight: 800;
	color: #0f172a;
	margin-bottom: 14px;
}

.blog-section-desc {
	font-size: 16px;
	color: #64748b;
	line-height: 1.6;
}

.homepage-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

@media (max-width: 992px) {
	.homepage-blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.homepage-blog-grid {
		grid-template-columns: 1fr;
	}
}

.hp-blog-card {
	background: #ffffff;
	border-radius: 16px;
	border: 1px solid rgba(15, 23, 42, 0.08);
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	flex-direction: column;
}

.hp-blog-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 40px rgba(88, 43, 242, 0.12);
}

.hp-blog-thumb {
	position: relative;
	width: 100%;
	height: 220px !important;
	max-height: 220px !important;
	overflow: hidden;
	background: #f1f5f9;
}

.hp-blog-thumb img {
	width: 100%;
	height: 100% !important;
	max-height: 220px !important;
	object-fit: cover !important;
	transition: transform 0.4s ease;
}

.hp-blog-card:hover .hp-blog-thumb img {
	transform: scale(1.06);
}

.hp-blog-cat {
	position: absolute;
	top: 14px;
	left: 14px;
	background: linear-gradient(135deg, #f42776 0%, #5232da 100%);
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: 20px;
	letter-spacing: 0.5px;
}

.hp-blog-content {
	padding: 24px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.hp-blog-meta {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 13px;
	color: #94a3b8;
	margin-bottom: 12px;
}

.hp-blog-title {
	font-family: 'Outfit', sans-serif;
	font-size: 20px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.4;
	margin-bottom: 12px;
}

.hp-blog-title a {
	color: #0f172a;
	text-decoration: none;
	transition: color 0.2s ease;
}

.hp-blog-title a:hover {
	color: #f42776;
}

.hp-blog-excerpt {
	font-size: 14px;
	color: #64748b;
	line-height: 1.6;
	margin-bottom: 20px;
	flex-grow: 1;
}

.hp-blog-link {
	font-size: 14px;
	font-weight: 700;
	color: #5232da;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: color 0.2s ease;
}

.hp-blog-link:hover {
	color: #f42776;
}




/* ==========================================================================
   FINAL USER REFINEMENT FIXES
   ========================================================================== */

/* 1. D&B Logo Enlarged in Footer */
.cert-logo-dnb {
	height: 88px !important;
	max-height: 88px !important;
	width: auto !important;
	object-fit: contain !important;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15)) !important;
}

.cert-badge-dnb {
	padding: 4px 14px !important;
	display: inline-flex !important;
	align-items: center !important;
}

/* 2. All About Us Team Designations use #5232da */
.team-designation,
.designation-leadership,
.designation-accounts,
.designation-ops {
	background: rgba(82, 50, 218, 0.1) !important;
	color: #5232da !important;
	border: 1px solid rgba(82, 50, 218, 0.2) !important;
}

/* 3. eSIM Headline 'Ever' Pink Color #f42776 */
.esim-title em {
	font-style: normal !important;
	color: #f42776 !important;
	background: none !important;
	-webkit-text-fill-color: #f42776 !important;
}

/* 4. Single Post Featured Image Styling */
.flux-single-featured {
	width: 100%;
	max-height: 480px;
	overflow: hidden;
	border-radius: 16px;
	margin: 32px 0 40px;
	box-shadow: 0 12px 36px rgba(0,0,0,0.08);
}

.flux-single-featured img {
	width: 100%;
	height: 100%;
	max-height: 480px;
	object-fit: cover !important;
	object-position: center !important;
	display: block;
}

/* 5. Homepage Blog Section Style (Matching Screenshot 1) */
.homepage-blog-section {
	padding: 90px 0;
	background: #fdfdfd;
	position: relative;
}

.blog-section-header {
	text-align: center;
	max-width: 680px;
	margin: 0 auto 50px;
}

.blog-pill-eyebrow {
	display: inline-block;
	background: rgba(244, 39, 118, 0.1);
	color: #f42776;
	padding: 6px 18px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 16px;
}

.blog-section-title-pink {
	font-family: 'Outfit', sans-serif;
	font-size: 42px;
	font-weight: 800;
	color: #0f172a;
	margin-bottom: 14px;
	line-height: 1.25;
}

.blog-section-title-pink span.pink-a2p {
	color: #f42776;
	font-style: italic;
}

.blog-section-desc {
	font-size: 16px;
	color: #64748b;
	line-height: 1.6;
}

.hp-blog-card {
	background: #ffffff;
	border-radius: 16px;
	border: 1px solid rgba(15, 23, 42, 0.08);
	overflow: hidden;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	flex-direction: column;
}

.hp-blog-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 36px rgba(82, 50, 218, 0.12);
}

.hp-blog-thumb {
	position: relative;
	width: 100%;
	height: 220px !important;
	max-height: 220px !important;
	overflow: hidden;
	background: #f1f5f9;
}

.hp-blog-thumb img {
	width: 100%;
	height: 100% !important;
	max-height: 220px !important;
	object-fit: cover !important;
	transition: transform 0.4s ease;
}

.hp-blog-cat-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	background: #5232da;
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: 20px;
	letter-spacing: 0.5px;
}

.hp-blog-meta-clean {
	font-size: 13px;
	color: #64748b;
	margin-bottom: 10px;
}

.hp-blog-meta-clean span.author-name {
	color: #5232da;
	font-weight: 600;
}

.hp-blog-title-bold {
	font-family: 'Outfit', sans-serif;
	font-size: 18px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.4;
	margin-bottom: 16px;
}

.hp-blog-title-bold a {
	color: #0f172a;
	text-decoration: none;
}

.hp-blog-title-bold a:hover {
	color: #f42776;
}

.hp-blog-readmore {
	font-size: 14px;
	font-weight: 600;
	color: #5232da;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.hp-blog-readmore:hover {
	color: #f42776;
}

.blog-view-all-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #f8fafc;
	border: 1px solid rgba(15, 23, 42, 0.12);
	color: #0f172a;
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: 14px;
	padding: 12px 30px;
	border-radius: 30px;
	text-decoration: none;
	transition: all 0.3s ease;
}

.blog-view-all-btn:hover {
	background: #ffffff;
	border-color: #5232da;
	color: #5232da;
	box-shadow: 0 4px 16px rgba(82, 50, 218, 0.15);
}



/* Crisp White Background for D&B Badge to make DUNS 2591760 crystal clear */
.footer-cert-badges .cert-badge-dnb,
.cert-badge-dnb {
	background: #ffffff !important;
	border: 1px solid rgba(255, 255, 255, 0.4) !important;
	padding: 6px 14px !important;
	border-radius: 10px !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.footer-cert-badges .cert-badge-dnb:hover,
.cert-badge-dnb:hover {
	transform: translateY(-2px) scale(1.04) !important;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
}

.footer-cert-badges .cert-logo-dnb,
.cert-logo-dnb {
	height: 64px !important;
	max-height: 64px !important;
	width: auto !important;
	object-fit: contain !important;
	filter: none !important;
	opacity: 1 !important;
	display: block !important;
}



/* HIGH SPECIFICITY TEAM DESIGNATION COLOR OVERRIDES */
.team-grid .team-card .team-designation,
.team-grid .team-card .designation-accounts,
.team-grid .team-card .designation-ops,
.team-card:not([data-category="leadership"]) .team-designation,
.team-card[data-category="accounts"] .team-designation,
.team-card[data-category="operations"] .team-designation,
span.team-designation:not(.designation-leadership) {
	color: #5232da !important;
	background: rgba(82, 50, 218, 0.1) !important;
	border: 1px solid rgba(82, 50, 218, 0.25) !important;
}

.team-grid .team-card[data-category="leadership"] .team-designation,
.team-card[data-category="leadership"] .team-designation,
span.designation-leadership {
	color: #f42776 !important;
	background: rgba(244, 39, 118, 0.1) !important;
	border: 1px solid rgba(244, 39, 118, 0.25) !important;
}


/* D&B Badge Styled 100% Identical to Dubai Chamber and BASIS Cards */
.footer-cert-badges .cert-badge-item,
.footer-cert-badges .cert-badge-dnb,
.cert-badge-dnb {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 10px 20px !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	border-radius: 12px !important;
	background: rgba(255, 255, 255, 0.04);
	backdrop-filter: blur(8px) !important;
	transition: all 0.3s ease !important;
}

.footer-cert-badges .cert-badge-item:hover,
.footer-cert-badges .cert-badge-dnb:hover,
.cert-badge-dnb:hover {
	background: rgba(255, 255, 255, 0.08) !important;
	border-color: rgba(255, 255, 255, 0.3) !important;
	transform: translateY(-2px) !important;
}

.footer-cert-badges .cert-logo-dnb,
.cert-logo-dnb {
	height: 46px !important;
	max-height: 46px !important;
	width: auto !important;
	object-fit: contain !important;
	filter: brightness(0) invert(1) !important;
	opacity: 0.95 !important;
	display: block !important;
}



/* ==========================================================================
   RESTORED EXACT REFERENCE CERTIFICATION BADGES (WITH ENLARGED D&B LOGO)
   ========================================================================== */

.footer-cert-badges {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	margin-top: 24px !important;
	flex-wrap: nowrap !important;
}

.cert-badge-item {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 84px !important;
	padding: 0 28px !important;
	box-sizing: border-box !important;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 14px !important;
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
	flex-shrink: 0 !important;
	text-decoration: none !important;
}

.cert-badge-item:hover {
	background: #ffffff !important;
	border-color: #ffffff !important;
	transform: translateY(-3px) !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

.cert-logo {
	display: block !important;
	object-fit: contain !important;
	filter: brightness(0) invert(1) opacity(0.75) !important;
	max-height: 100% !important;
	transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease !important;
}

.cert-badge-item:hover .cert-logo {
	filter: none !important;
	opacity: 1 !important;
	transform: scale(1.03) !important;
}

/* D&B: circular badge — BIGGER VIEW (72px) for clear license number reading */
.cert-logo-dnb {
	height: 72px !important;
	max-height: 72px !important;
	width: auto !important;
}

/* Dubai Chamber: wide horizontal wordmark */
.cert-logo-dubai {
	height: 56px !important;
	max-height: 56px !important;
	width: auto !important;
}

/* BASIS: wide horizontal wordmark */
.cert-logo-basis {
	height: 46px !important;
	max-height: 46px !important;
	width: auto !important;
}

/* Hide divider */
.cert-badges-divider {
	display: none !important;
}

@media (max-width: 768px) {
	.footer-cert-badges {
		flex-wrap: wrap !important;
		gap: 10px !important;
	}
	.cert-badge-item {
		height: 64px !important;
		padding: 4px 16px !important;
	}
	.cert-logo-dnb {
		height: 52px !important;
	}
	.cert-logo-dubai {
		height: 38px !important;
	}
	.cert-logo-basis {
		height: 30px !important;
	}
}



/* ==========================================================================
   RESTORED CERTIFICATION BADGES (FROSTED DARK DEFAULT, SOLID WHITE ON HOVER)
   ========================================================================== */

.footer-cert-badges {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	margin-top: 24px !important;
	flex-wrap: nowrap !important;
}

.cert-badge-item {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 84px !important;
	padding: 0 28px !important;
	box-sizing: border-box !important;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 14px !important;
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
	flex-shrink: 0 !important;
	text-decoration: none !important;
}

/* Hover / Mouse-over / Active turns background into SOLID WHITE & reveals original colors */
.cert-badge-item:hover,
.cert-badge-item:active,
.cert-badge-item:focus {
	background: #ffffff !important;
	border-color: #ffffff !important;
	transform: translateY(-3px) !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

.cert-logo {
	display: block !important;
	object-fit: contain !important;
	filter: brightness(0) invert(1) opacity(0.75) !important;
	max-height: 100% !important;
	transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease !important;
}

.cert-badge-item:hover .cert-logo,
.cert-badge-item:active .cert-logo,
.cert-badge-item:focus .cert-logo {
	filter: none !important;
	opacity: 1 !important;
	transform: scale(1.03) !important;
}

/* D&B: circular badge — BIGGER VIEW (72px) for clear license number reading */
.cert-logo-dnb {
	height: 72px !important;
	max-height: 72px !important;
	width: auto !important;
}

/* Dubai Chamber: wide horizontal wordmark */
.cert-logo-dubai {
	height: 56px !important;
	max-height: 56px !important;
	width: auto !important;
}

/* BASIS: wide horizontal wordmark */
.cert-logo-basis {
	height: 46px !important;
	max-height: 46px !important;
	width: auto !important;
}

/* Hide divider */
.cert-badges-divider {
	display: none !important;
}

@media (max-width: 768px) {
	.footer-cert-badges {
		flex-wrap: wrap !important;
		gap: 10px !important;
	}
	.cert-badge-item {
		height: 64px !important;
		padding: 4px 16px !important;
	}
	.cert-logo-dnb {
		height: 52px !important;
	}
	.cert-logo-dubai {
		height: 38px !important;
	}
	.cert-logo-basis {
		height: 30px !important;
	}
}



/* ==========================================================================
   EXACT FOOTER CERTIFICATION BADGES (MATCHING USER'S BOTTOM CHECKMARKED SCREENSHOT)
   ========================================================================== */

.footer-cert-badges {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	margin-top: 24px !important;
	flex-wrap: nowrap !important;
}

/* Default state: Dark frosted card with Silver-White monochrome logo */
.cert-badge-item {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 84px !important;
	padding: 0 28px !important;
	box-sizing: border-box !important;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 14px !important;
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
	flex-shrink: 0 !important;
	text-decoration: none !important;
}

.cert-logo {
	display: block !important;
	object-fit: contain !important;
	filter: brightness(0) invert(1) opacity(0.85) !important;
	max-height: 100% !important;
	transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease !important;
}

/* Hover state (MATCHES RED CHECKMARKED SCREENSHOT): Card turns SOLID WHITE & Logo shows FULL ORIGINAL COLORS */
.cert-badge-item:hover,
.cert-badge-item:active,
.cert-badge-item:focus {
	background: #ffffff !important;
	border-color: #ffffff !important;
	transform: translateY(-3px) !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

.cert-badge-item:hover .cert-logo,
.cert-badge-item:active .cert-logo,
.cert-badge-item:focus .cert-logo {
	filter: none !important;
	opacity: 1 !important;
	transform: scale(1.04) !important;
}

/* D&B: circular badge — BIGGER VIEW (72px) for clear license number reading */
.cert-logo-dnb {
	height: 72px !important;
	max-height: 72px !important;
	width: auto !important;
}

/* Dubai Chamber: wide horizontal wordmark */
.cert-logo-dubai {
	height: 56px !important;
	max-height: 56px !important;
	width: auto !important;
}

/* BASIS: wide horizontal wordmark */
.cert-logo-basis {
	height: 46px !important;
	max-height: 46px !important;
	width: auto !important;
}

/* Hide divider */
.cert-badges-divider {
	display: none !important;
}

@media (max-width: 768px) {
	.footer-cert-badges {
		flex-wrap: wrap !important;
		gap: 10px !important;
	}
	.cert-badge-item {
		height: 64px !important;
		padding: 4px 16px !important;
	}
	.cert-logo-dnb {
		height: 52px !important;
	}
	.cert-logo-dubai {
		height: 38px !important;
	}
	.cert-logo-basis {
		height: 30px !important;
	}
}



/* ==========================================================================
   FIXED HOVER CARD BUG: SOLID WHITE BACKGROUND ON HOVER FOR ALL CERT BADGES
   ========================================================================== */

.footer-cert-badges a.cert-badge-item,
.footer-cert-badges .cert-badge-item,
.cert-badge-item {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 84px;
	padding: 0 28px;
	box-sizing: border-box;
	transition: all 0.25s ease-in-out;
}

.footer-cert-badges a.cert-badge-item:hover,
.footer-cert-badges .cert-badge-item:hover,
.cert-badge-item:hover,
.cert-badge-item:active,
.cert-badge-item:focus {
	background: #ffffff !important;
	background-color: #ffffff !important;
	border-color: #ffffff !important;
	transform: translateY(-4px) !important;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
}

.footer-cert-badges a.cert-badge-item .cert-logo,
.footer-cert-badges .cert-badge-item .cert-logo,
.cert-logo {
	filter: brightness(0) invert(1) opacity(0.8);
	transition: filter 0.25s ease-in-out, opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
}

.footer-cert-badges a.cert-badge-item:hover .cert-logo,
.footer-cert-badges .cert-badge-item:hover .cert-logo,
.cert-badge-item:hover .cert-logo,
.cert-badge-item:active .cert-logo,
.cert-badge-item:focus .cert-logo {
	filter: none !important;
	opacity: 1 !important;
	transform: scale(1.04) !important;
}

/* D&B Logo Size (72px) for crystal clear license number */
.cert-logo-dnb {
	height: 72px !important;
	max-height: 72px !important;
	width: auto !important;
}

.cert-logo-dubai {
	height: 56px !important;
	max-height: 56px !important;
	width: auto !important;
}

.cert-logo-basis {
	height: 46px !important;
	max-height: 46px !important;
	width: auto !important;
}



/* ==========================================================================
   100% UNIFIED CERTIFICATION BADGES (D&B, DUBAI CHAMBER, BASIS ALL SAME)
   ========================================================================== */

.footer-cert-badges {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	margin-top: 24px !important;
	flex-wrap: nowrap !important;
}

/* ALL THREE BADGE CARDS USE EXACT SAME CONTAINER STYLING */
.footer-cert-badges .cert-badge-item,
.cert-badge-item {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 84px !important;
	padding: 0 28px !important;
	box-sizing: border-box !important;
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 14px !important;
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
	flex-shrink: 0 !important;
	text-decoration: none !important;
}

/* ALL THREE BADGES TURN SOLID WHITE WITH ORIGINAL COLOR LOGO ON HOVER */
.footer-cert-badges .cert-badge-item:hover,
.cert-badge-item:hover,
.cert-badge-item:active,
.cert-badge-item:focus {
	background: #ffffff !important;
	background-color: #ffffff !important;
	border-color: #ffffff !important;
	transform: translateY(-3px) !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

/* ALL THREE LOGOS USE EXACT SAME MONOCHROME SILVER-WHITE FILTER BY DEFAULT */
.footer-cert-badges .cert-logo,
.cert-logo {
	display: block !important;
	object-fit: contain !important;
	max-height: 54px !important;
	height: 54px !important;
	width: auto !important;
	filter: brightness(0) invert(1) opacity(0.85) !important;
	transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease !important;
}

/* ALL THREE LOGOS REVEAL FULL ORIGINAL VIVID COLORS ON HOVER */
.footer-cert-badges .cert-badge-item:hover .cert-logo,
.cert-badge-item:hover .cert-logo,
.cert-badge-item:active .cert-logo,
.cert-badge-item:focus .cert-logo {
	filter: none !important;
	opacity: 1 !important;
	transform: scale(1.04) !important;
}

.cert-badges-divider {
	display: none !important;
}

@media (max-width: 768px) {
	.footer-cert-badges {
		flex-wrap: wrap !important;
		gap: 10px !important;
	}
	.footer-cert-badges .cert-badge-item,
	.cert-badge-item {
		height: 64px !important;
		padding: 0 16px !important;
	}
	.footer-cert-badges .cert-logo,
	.cert-logo {
		height: 38px !important;
		max-height: 38px !important;
	}
}



/* ==========================================================================
   ABOUT US TEAM GRID CENTERED ALIGNMENT (VERSION 2.0.1)
   ========================================================================== */

.team-grid {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: stretch !important;
	gap: 28px !important;
	margin-top: 40px !important;
}

.team-card {
	flex: 0 0 calc(25% - 21px) !important;
	max-width: calc(25% - 21px) !important;
	min-width: 260px !important;
	box-sizing: border-box !important;
}

@media (max-width: 1200px) {
	.team-card {
		flex: 0 0 calc(33.333% - 20px) !important;
		max-width: calc(33.333% - 20px) !important;
	}
}

@media (max-width: 768px) {
	.team-grid {
		gap: 20px !important;
	}
	.team-card {
		flex: 0 0 calc(50% - 14px) !important;
		max-width: calc(50% - 14px) !important;
		min-width: unset !important;
	}
}

@media (max-width: 520px) {
	.team-card {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}
}



/* ==========================================================================
   PERFECT GLOBAL NETWORK SECTION (LEFT HUB + CONNECTING BEAM + RIGHT CARD)
   ========================================================================== */

.solutions-roundup-section {
	padding: 90px 0;
	background: #ffffff !important;
	color: #0f172a !important;
	position: relative;
	overflow: hidden;
}

/* Background Running Waves */
.running-waves-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
	opacity: 0.5;
}

.running-wave-path {
	fill: none;
	stroke: url(#waveGradient);
	stroke-width: 2;
	stroke-dasharray: 12 12;
	animation: waveDashRun 30s linear infinite;
}

.running-wave-path-2 {
	fill: none;
	stroke: url(#waveGradient2);
	stroke-width: 1.5;
	stroke-dasharray: 8 8;
	animation: waveDashRunReverse 25s linear infinite;
}

@keyframes waveDashRun {
	from { stroke-dashoffset: 0; }
	to { stroke-dashoffset: 1000; }
}

@keyframes waveDashRunReverse {
	from { stroke-dashoffset: 0; }
	to { stroke-dashoffset: -1000; }
}

.solutions-roundup-section .roundup-pill {
	background: rgba(244, 39, 118, 0.08) !important;
	color: #f42776 !important;
	border: 1px solid rgba(244, 39, 118, 0.2) !important;
	padding: 6px 18px !important;
	border-radius: 20px !important;
	font-weight: 700 !important;
	font-size: 12px !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
}

.solutions-roundup-section .roundup-title {
	font-family: 'Outfit', sans-serif !important;
	font-size: 42px !important;
	font-weight: 800 !important;
	color: #0f172a !important;
	line-height: 1.25 !important;
	margin-top: 14px !important;
}

.solutions-roundup-section .roundup-desc {
	color: #64748b !important;
	font-size: 16px !important;
	max-width: 620px;
}

/* 2-Column Grid Layout */
.roundup-2026-grid {
	display: grid;
	grid-template-columns: 460px 1fr;
	gap: 48px;
	align-items: center;
	margin-top: 48px;
	position: relative;
	z-index: 2;
}

@media (max-width: 1024px) {
	.roundup-2026-grid {
		grid-template-columns: 1fr;
		gap: 40px;
		justify-items: center;
	}
}

/* SVG Connecting Beams Container */
.hub-connector-svg-layer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 8;
}

.connecting-beam-path {
	fill: none;
	stroke: url(#beamGradient);
	stroke-width: 2.5;
	stroke-dasharray: 8 6;
	animation: beamFlow 1.5s linear infinite;
	filter: drop-shadow(0 0 6px rgba(244, 39, 118, 0.5));
}

@keyframes beamFlow {
	from { stroke-dashoffset: 28; }
	to { stroke-dashoffset: 0; }
}

/* Left Column: Hub Container */
.roundup-left-hub-col {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 460px;
	height: 460px;
	position: relative;
}

@media (max-width: 520px) {
	.roundup-left-hub-col {
		width: 320px;
		height: 320px;
	}
}

.orbital-hub-wrap {
	width: 420px;
	height: 420px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 520px) {
	.orbital-hub-wrap {
		width: 300px;
		height: 300px;
	}
}

/* Center Core with Transparent Spider Logo */
.hub-center {
	position: absolute;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 15;
}

.hub-center__glow {
	position: absolute;
	inset: -10px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(244, 39, 118, 0.25) 0%, rgba(82, 50, 218, 0.15) 70%, transparent 100%);
	animation: spiderPulse 3s ease-in-out infinite alternate;
}

@keyframes spiderPulse {
	0% { transform: scale(0.95); opacity: 0.6; }
	100% { transform: scale(1.15); opacity: 1; }
}

.hub-center__core {
	width: 80px;
	height: 80px;
	background: #ffffff;
	border: 2px solid rgba(82, 50, 218, 0.2);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 30px rgba(82, 50, 218, 0.15);
	transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hub-center__core img {
	width: 50px;
	height: 50px;
	object-fit: contain;
	display: block;
}

/* Single Orbit Ring */
.hub-orbit--single {
	position: absolute;
	width: 380px;
	height: 380px;
	border: 1.5px dashed rgba(82, 50, 218, 0.22);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: orbit-spin-cw 55s linear infinite;
	z-index: 5;
}

@media (max-width: 520px) {
	.hub-orbit--single {
		width: 270px;
		height: 270px;
	}
}

.hub-orbit--single .service-node {
	--orbit-radius: 190px;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #ffffff;
	border: 1.5px solid rgba(15, 23, 42, 0.08);
	color: #5232da;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	margin: -30px;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
	transform: translate(-50%, -50%) rotate(var(--angle)) translate(var(--orbit-radius)) rotate(calc(-1 * var(--angle))) !important;
	z-index: 10;
}

@media (max-width: 520px) {
	.hub-orbit--single .service-node {
		--orbit-radius: 135px;
		width: 44px;
		height: 44px;
		margin: -22px;
		font-size: 15px;
	}
}

.hub-orbit--single .service-node:hover,
.hub-orbit--single .service-node.active-node {
	background: linear-gradient(135deg, #f42776 0%, #5232da 100%) !important;
	border-color: #ffffff !important;
	color: #ffffff !important;
	box-shadow: 0 10px 28px rgba(244, 39, 118, 0.4) !important;
	transform: translate(-50%, -50%) rotate(var(--angle)) translate(var(--orbit-radius)) rotate(calc(-1 * var(--angle))) scale(1.2) !important;
}

.hub-orbit--single .service-node i {
	animation: orbit-spin-ccw 55s linear infinite;
	display: inline-block;
}

/* Click Wave Ripple SVG inside Left Hub */
.hub-wave-ripple-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 12;
}

.ripple-circle {
	fill: none;
	stroke: #f42776;
	stroke-width: 2;
	opacity: 0;
	transform-origin: center;
}

.ripple-animate {
	animation: rippleExpand 0.75s ease-out forwards;
}

@keyframes rippleExpand {
	0% { r: 35px; opacity: 0.8; stroke-width: 4; }
	100% { r: 210px; opacity: 0; stroke-width: 1; }
}

/* Right Column: In-Depth Details Card */
.flash-canvas-card {
	background: #ffffff;
	border: 1px solid rgba(15, 23, 42, 0.08);
	border-radius: 24px;
	padding: 36px 40px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.04);
	position: relative;
	overflow: hidden;
	transition: all 0.35s ease;
}

.flash-canvas-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #f42776 0%, #5232da 100%);
}

.flash-canvas-card.flash-active {
	animation: cardSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cardSlideIn {
	0% { opacity: 0.6; transform: translateY(8px); }
	100% { opacity: 1; transform: translateY(0); }
}

.flash-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
	flex-wrap: wrap;
	gap: 16px;
}

.flash-service-meta {
	display: flex;
	align-items: center;
	gap: 16px;
}

.flash-icon-box {
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: rgba(244, 39, 118, 0.08);
	border: 1px solid rgba(244, 39, 118, 0.2);
	color: #f42776;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
}

.flash-title-wrap h3 {
	font-family: 'Outfit', sans-serif;
	font-size: 26px;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 4px;
}

.flash-title-wrap p {
	font-size: 14px;
	color: #64748b;
	margin: 0;
}

.flash-status-badge {
	background: rgba(34, 197, 94, 0.1);
	color: #16a34a;
	border: 1px solid rgba(34, 197, 94, 0.25);
	padding: 6px 16px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.flash-bento-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 24px;
}

@media (max-width: 640px) {
	.flash-bento-stats {
		grid-template-columns: 1fr;
	}
}

.flash-stat-card {
	background: #f8fafc;
	border: 1px solid rgba(15, 23, 42, 0.06);
	padding: 16px;
	border-radius: 14px;
	text-align: center;
}

.flash-stat-card h4 {
	font-family: 'Outfit', sans-serif;
	font-size: 22px;
	font-weight: 800;
	color: #5232da;
	margin: 0 0 4px;
}

.flash-stat-card p {
	font-size: 12px;
	color: #64748b;
	margin: 0;
	font-weight: 600;
}

.flash-features-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 24px;
}

.flash-feature-item {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: #334155;
}

.flash-feature-item i {
	color: #f42776;
	font-size: 15px;
}

.flash-route-telemetry-box {
	background: #f8fafc;
	border: 1px solid rgba(15, 23, 42, 0.08);
	border-radius: 16px;
	padding: 18px 22px;
	margin-bottom: 24px;
}

.flash-route-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.flash-route-title {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 13px;
	color: #0f172a;
}

.flash-route-badge {
	font-size: 12px;
	color: #5232da;
	font-weight: 600;
}

.flash-route-bar-wrap {
	height: 7px;
	background: #e2e8f0;
	border-radius: 100px;
	overflow: hidden;
	margin-bottom: 8px;
}

.flash-route-bar-fill {
	height: 100%;
	background: linear-gradient(90deg, #f42776, #5232da);
	border-radius: 100px;
	width: 98%;
	transition: width 0.5s ease;
}

.flash-route-meta {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: #64748b;
}

.flash-action-bar {
	display: flex;
	justify-content: flex-end;
}

.flash-explore-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: linear-gradient(135deg, #f42776 0%, #5232da 100%);
	color: #ffffff !important;
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 14px;
	padding: 12px 28px;
	border-radius: 30px;
	text-decoration: none;
	transition: all 0.3s ease;
	box-shadow: 0 6px 20px rgba(244, 39, 118, 0.35);
}

.flash-explore-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(244, 39, 118, 0.5);
	color: #ffffff !important;
}



/* Enhanced Attractive Orbital Service Nodes */
.hub-orbit--single .service-node {
	--orbit-radius: 190px;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: #ffffff !important;
	border: 2px solid rgba(82, 50, 218, 0.18) !important;
	color: #5232da !important;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	margin: -32px;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	box-shadow: 0 8px 24px rgba(82, 50, 218, 0.12) !important;
	transform: translate(-50%, -50%) rotate(var(--angle)) translate(var(--orbit-radius)) rotate(calc(-1 * var(--angle))) !important;
	z-index: 10;
}

@media (max-width: 520px) {
	.hub-orbit--single .service-node {
		--orbit-radius: 135px;
		width: 46px;
		height: 46px;
		margin: -23px;
		font-size: 16px;
	}
}

.hub-orbit--single .service-node:hover {
	border-color: #f42776 !important;
	color: #f42776 !important;
	box-shadow: 0 10px 28px rgba(244, 39, 118, 0.35) !important;
	transform: translate(-50%, -50%) rotate(var(--angle)) translate(var(--orbit-radius)) rotate(calc(-1 * var(--angle))) scale(1.18) !important;
}

.hub-orbit--single .service-node.active-node {
	background: linear-gradient(135deg, #f42776 0%, #5232da 100%) !important;
	border-color: #ffffff !important;
	color: #ffffff !important;
	box-shadow: 0 12px 32px rgba(244, 39, 118, 0.5) !important;
	transform: translate(-50%, -50%) rotate(var(--angle)) translate(var(--orbit-radius)) rotate(calc(-1 * var(--angle))) scale(1.22) !important;
}

.connecting-beam-path {
	fill: none;
	stroke: url(#beamGradient);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-dasharray: 8 6;
	animation: beamFlow 1.2s linear infinite;
	filter: drop-shadow(0 0 8px rgba(244, 39, 118, 0.6));
}



/* ==========================================================================
   SPACIOUS GAP & 100% MOBILE OPTIMIZATION FOR GLOBAL NETWORK SECTION
   ========================================================================== */

.solutions-roundup-section {
	padding: 105px 0 !important;
}

.solutions-roundup-section .roundup-section-header {
	margin-bottom: 75px !important;
	text-align: center;
}

.roundup-2026-grid {
	margin-top: 75px !important;
	gap: 60px !important;
}

/* Hide all SVG waves on Mobile View (< 991px) */
@media (max-width: 991px) {
	.running-waves-bg,
	.hub-connector-svg-layer {
		display: none !important;
	}

	.solutions-roundup-section {
		padding: 60px 0 !important;
	}

	.solutions-roundup-section .roundup-section-header {
		margin-bottom: 40px !important;
	}

	.solutions-roundup-section .roundup-title {
		font-size: 30px !important;
	}

	.roundup-2026-grid {
		margin-top: 30px !important;
		grid-template-columns: 1fr !important;
		gap: 36px !important;
		justify-items: center;
	}

	.roundup-left-hub-col {
		width: 100% !important;
		max-width: 360px !important;
		height: 360px !important;
	}

	.orbital-hub-wrap {
		width: 340px !important;
		height: 340px !important;
	}

	.hub-orbit--single {
		width: 300px !important;
		height: 300px !important;
	}

	.hub-orbit--single .service-node {
		--orbit-radius: 150px !important;
		width: 48px !important;
		height: 48px !important;
		margin: -24px !important;
		font-size: 16px !important;
	}

	.flash-canvas-card {
		padding: 24px 20px !important;
		border-radius: 20px !important;
	}

	.flash-title-wrap h3 {
		font-size: 22px !important;
	}

	.flash-bento-stats {
		grid-template-columns: 1fr !important;
		gap: 12px !important;
	}

	.flash-stat-card {
		padding: 12px !important;
	}
}

@media (max-width: 480px) {
	.solutions-roundup-section .roundup-title {
		font-size: 25px !important;
	}

	.roundup-left-hub-col {
		max-width: 300px !important;
		height: 300px !important;
	}

	.orbital-hub-wrap {
		width: 290px !important;
		height: 290px !important;
	}

	.hub-orbit--single {
		width: 260px !important;
		height: 260px !important;
	}

	.hub-orbit--single .service-node {
		--orbit-radius: 130px !important;
		width: 42px !important;
		height: 42px !important;
		margin: -21px !important;
		font-size: 14px !important;
	}
}



/* Guaranteed Visible Hero Vertical Pills Styling */
.usecase-pills-list {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
	min-width: 220px !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.usecase-pill {
	background: #ffffff !important;
	border: 1px solid rgba(15, 23, 42, 0.08) !important;
	text-align: left !important;
	padding: 14px 22px !important;
	font-family: 'Outfit', sans-serif !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	color: #334155 !important;
	border-radius: 12px !important;
	cursor: pointer !important;
	transition: all 0.3s ease !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04) !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.usecase-pill:hover,
.usecase-pill.active {
	background: #ffffff !important;
	color: #f42776 !important;
	border-color: rgba(244, 39, 118, 0.4) !important;
	box-shadow: 0 8px 24px rgba(244, 39, 118, 0.15) !important;
	transform: translateX(4px) !important;
}



/* ==========================================================================
   15:24 GLOBAL NETWORK HUB & SPACIOUS GAP STYLES
   ========================================================================== */

.solutions-roundup-section {
	padding: 105px 0 !important;
	position: relative;
	overflow: hidden;
}

.solutions-roundup-section .roundup-section-header {
	margin-bottom: 75px !important;
	text-align: center;
}

.roundup-2026-grid {
	margin-top: 75px !important;
	display: grid !important;
	grid-template-columns: 440px 1fr !important;
	gap: 60px !important;
	align-items: center !important;
}

.roundup-left-hub-col {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.orbital-hub-wrap {
	width: 440px;
	height: 440px;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.hub-center-core {
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 12px 35px rgba(84, 51, 225, 0.25), 0 0 40px rgba(244, 39, 118, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
	position: relative;
}

.spider-mark-img {
	width: 50px;
	height: 50px;
	object-fit: contain;
}

.hub-orbit--single {
	position: absolute;
	width: 380px;
	height: 380px;
	border-radius: 50%;
	border: 1.5px dashed rgba(84, 51, 225, 0.25);
	animation: orbitRotateClockwise 45s linear infinite;
}

.hub-orbit--single:hover {
	animation-play-state: paused;
}

@keyframes orbitRotateClockwise {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.hub-orbit--single .service-node {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 56px;
	height: 56px;
	margin: -28px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
	border: 2px solid rgba(84, 51, 225, 0.15);
	color: #5232da;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
	--orbit-radius: 190px;
	transform: rotate(var(--angle)) translate(var(--orbit-radius)) rotate(calc(-1 * var(--angle)));
}

.hub-orbit--single .service-node:hover,
.hub-orbit--single .service-node.active-node {
	background: linear-gradient(135deg, #f42776 0%, #5232da 100%) !important;
	color: #ffffff !important;
	border-color: #ffffff !important;
	box-shadow: 0 10px 30px rgba(244, 39, 118, 0.45) !important;
	transform: rotate(var(--angle)) translate(var(--orbit-radius)) rotate(calc(-1 * var(--angle))) scale(1.25) !important;
	z-index: 10;
}

.flash-canvas-card {
	background: #ffffff;
	border-radius: 24px;
	padding: 36px;
	box-shadow: 0 20px 50px rgba(15, 23, 42, 0.06);
	border: 1px solid rgba(15, 23, 42, 0.06);
	transition: all 0.4s ease;
}

@media (max-width: 991px) {
	.running-waves-bg {
		display: none !important;
	}

	.solutions-roundup-section {
		padding: 60px 0 !important;
	}

	.solutions-roundup-section .roundup-section-header {
		margin-bottom: 40px !important;
	}

	.roundup-2026-grid {
		grid-template-columns: 1fr !important;
		gap: 40px !important;
		margin-top: 40px !important;
	}

	.orbital-hub-wrap {
		width: 340px !important;
		height: 340px !important;
	}

	.hub-orbit--single {
		width: 300px !important;
		height: 300px !important;
	}

	.hub-orbit--single .service-node {
		--orbit-radius: 150px !important;
		width: 48px !important;
		height: 48px !important;
		margin: -24px !important;
		font-size: 16px !important;
	}
}



/* ==========================================================================
   PERFECT GLOBAL NETWORK DETAILS CARD & TELEMETRY WIDGET STYLES
   ========================================================================== */

.solutions-roundup-section {
	padding: 105px 0 !important;
	position: relative;
	overflow: hidden;
	background: #ffffff;
}

.solutions-roundup-section .roundup-section-header {
	margin-bottom: 75px !important;
	text-align: center;
}

.solutions-roundup-section .roundup-badge-container {
	display: flex;
	justify-content: center;
	margin-bottom: 16px;
}

.solutions-roundup-section .roundup-badge {
	background: rgba(84, 51, 225, 0.08);
	color: #5232da;
	padding: 6px 18px;
	border-radius: 30px;
	font-family: 'Outfit', sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.solutions-roundup-section .roundup-title {
	font-family: 'Outfit', sans-serif;
	font-size: 38px;
	font-weight: 800;
	color: #0f172a;
	margin-bottom: 16px;
	line-height: 1.25;
}

.solutions-roundup-section .roundup-subtitle {
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	color: #64748b;
	max-width: 680px;
	margin: 0 auto;
	line-height: 1.6;
}

.roundup-2026-grid {
	margin-top: 75px !important;
	display: grid !important;
	grid-template-columns: 440px 1fr !important;
	gap: 60px !important;
	align-items: center !important;
}

/* Details Card Base */
.flash-canvas-card {
	background: #ffffff !important;
	border-radius: 28px !important;
	padding: 40px !important;
	box-shadow: 0 25px 60px rgba(15, 23, 42, 0.08) !important;
	border: 1px solid rgba(15, 23, 42, 0.08) !important;
	transition: all 0.4s ease !important;
}

.flash-card-header {
	display: flex !important;
	align-items: center !important;
	gap: 20px !important;
	margin-bottom: 20px !important;
}

.flash-icon-box {
	width: 64px !important;
	height: 64px !important;
	border-radius: 18px !important;
	background: linear-gradient(135deg, rgba(244, 39, 118, 0.1) 0%, rgba(82, 50, 218, 0.1) 100%) !important;
	color: #f42776 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 26px !important;
	flex-shrink: 0 !important;
}

.flash-title-wrap h3 {
	font-family: 'Outfit', sans-serif !important;
	font-size: 26px !important;
	font-weight: 800 !important;
	color: #0f172a !important;
	margin: 0 0 6px 0 !important;
}

.flash-title-wrap p {
	font-family: 'Inter', sans-serif !important;
	font-size: 14px !important;
	color: #64748b !important;
	margin: 0 !important;
}

.flash-sla-badge {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	background: rgba(34, 197, 94, 0.1) !important;
	color: #16a34a !important;
	padding: 6px 16px !important;
	border-radius: 20px !important;
	font-family: 'Outfit', sans-serif !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	margin-bottom: 24px !important;
}

.flash-bento-stats {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 16px !important;
	margin-bottom: 24px !important;
}

.flash-stat-card {
	background: #f8fafc !important;
	border: 1px solid rgba(15, 23, 42, 0.05) !important;
	border-radius: 16px !important;
	padding: 18px 14px !important;
	text-align: center !important;
}

.flash-stat-card h4 {
	font-family: 'Outfit', sans-serif !important;
	font-size: 22px !important;
	font-weight: 800 !important;
	color: #5232da !important;
	margin: 0 0 4px 0 !important;
}

.flash-stat-card p {
	font-family: 'Inter', sans-serif !important;
	font-size: 12px !important;
	color: #64748b !important;
	margin: 0 !important;
	font-weight: 500 !important;
}

.flash-features-list {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
	margin-bottom: 28px !important;
}

.flash-feature-item {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 14px !important;
	color: #334155 !important;
}

.flash-feature-item i {
	color: #f42776 !important;
	font-size: 16px !important;
	flex-shrink: 0 !important;
}

/* Telemetry Box Styling */
.flash-telemetry-box {
	background: #0f172a !important;
	border-radius: 18px !important;
	padding: 20px 24px !important;
	color: #f8fafc !important;
	margin-bottom: 28px !important;
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15) !important;
}

.telemetry-header {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	margin-bottom: 12px !important;
	font-family: 'Outfit', sans-serif !important;
	font-size: 13px !important;
}

.tele-title {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	color: #94a3b8 !important;
	font-weight: 600 !important;
}

.tele-badge {
	background: rgba(56, 189, 248, 0.15) !important;
	color: #38bdf8 !important;
	padding: 3px 10px !important;
	border-radius: 12px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
}

.telemetry-progress-bg {
	width: 100% !important;
	height: 8px !important;
	background: rgba(255, 255, 255, 0.1) !important;
	border-radius: 10px !important;
	overflow: hidden !important;
	margin-bottom: 12px !important;
}

.telemetry-progress-fill {
	height: 100% !important;
	background: linear-gradient(90deg, #f42776 0%, #38bdf8 100%) !important;
	border-radius: 10px !important;
	transition: width 0.6s ease !important;
}

.telemetry-footer {
	display: flex !important;
	justify-content: space-between !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 12px !important;
	color: #94a3b8 !important;
}

.telemetry-footer strong {
	color: #ffffff !important;
}

/* Explore Button Styling */
.btn-roundup-explore {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	background: linear-gradient(135deg, #f42776 0%, #5232da 100%) !important;
	color: #ffffff !important;
	padding: 14px 36px !important;
	border-radius: 30px !important;
	font-family: 'Outfit', sans-serif !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	box-shadow: 0 8px 24px rgba(244, 39, 118, 0.35) !important;
	transition: all 0.3s ease !important;
}

.btn-roundup-explore:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 12px 32px rgba(244, 39, 118, 0.5) !important;
	color: #ffffff !important;
}

/* Mobile Responsiveness */
@media (max-width: 991px) {
	.solutions-roundup-section {
		padding: 60px 0 !important;
	}

	.roundup-2026-grid {
		grid-template-columns: 1fr !important;
		gap: 36px !important;
		margin-top: 36px !important;
	}

	.flash-canvas-card {
		padding: 26px 20px !important;
	}

	.flash-bento-stats {
		grid-template-columns: 1fr !important;
		gap: 12px !important;
	}
}



/* Wider Horizontal Separation Between Orbit Hub and Details Card */
.roundup-2026-grid {
	margin-top: 75px !important;
	display: grid !important;
	grid-template-columns: 420px minmax(0, 1fr) !important;
	gap: 90px !important;
	align-items: center !important;
}

.roundup-left-hub-col {
	display: flex !important;
	justify-content: flex-start !important;
	align-items: center !important;
}

.orbital-hub-wrap {
	width: 420px !important;
	height: 420px !important;
}

.roundup-right-card-col {
	width: 100% !important;
	display: flex !important;
	justify-content: flex-end !important;
}

.flash-canvas-card {
	width: 100% !important;
	max-width: 660px !important;
}



/* ==========================================================================
   RAW BRAND COLORS & COMPACT PIXEL-PERFECT DETAILS CARD
   ========================================================================== */

/* Compact Card Height & Padding */
.flash-canvas-card {
	background: #ffffff !important;
	border-radius: 24px !important;
	padding: 28px 32px !important;
	box-shadow: 0 20px 50px rgba(15, 23, 42, 0.07) !important;
	border: 1px solid rgba(15, 23, 42, 0.08) !important;
	transition: all 0.4s ease !important;
}

.flash-telemetry-box {
	margin-bottom: 0 !important;
}

/* Raw Brand Colors for Active & Hovered Orbital Nodes */
.service-node[data-service="whatsapp-api"].active-node,
.service-node[data-service="whatsapp-api"]:hover {
	background: #25D366 !important;
	color: #ffffff !important;
	border-color: #ffffff !important;
	box-shadow: 0 10px 25px rgba(37, 211, 102, 0.45) !important;
}

.service-node[data-service="telegram-api"].active-node,
.service-node[data-service="telegram-api"]:hover {
	background: #229ED9 !important;
	color: #ffffff !important;
	border-color: #ffffff !important;
	box-shadow: 0 10px 25px rgba(34, 158, 217, 0.45) !important;
}

.service-node[data-service="video-channels"].active-node,
.service-node[data-service="video-channels"]:hover {
	background: #e11d48 !important;
	color: #ffffff !important;
	border-color: #ffffff !important;
	box-shadow: 0 10px 25px rgba(225, 29, 72, 0.45) !important;
}

.service-node[data-service="web-chat"].active-node,
.service-node[data-service="web-chat"]:hover {
	background: #3b82f6 !important;
	color: #ffffff !important;
	border-color: #ffffff !important;
	box-shadow: 0 10px 25px rgba(59, 130, 246, 0.45) !important;
}

.service-node[data-service="email-passcode"].active-node,
.service-node[data-service="email-passcode"]:hover {
	background: #ea4335 !important;
	color: #ffffff !important;
	border-color: #ffffff !important;
	box-shadow: 0 10px 25px rgba(234, 67, 53, 0.45) !important;
}

.service-node[data-service="a2p-sms"].active-node,
.service-node[data-service="a2p-sms"]:hover {
	background: #f59e0b !important;
	color: #ffffff !important;
	border-color: #ffffff !important;
	box-shadow: 0 10px 25px rgba(245, 158, 11, 0.45) !important;
}

.service-node[data-service="instagram-api"].active-node,
.service-node[data-service="instagram-api"]:hover {
	background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
	color: #ffffff !important;
	border-color: #ffffff !important;
	box-shadow: 0 10px 25px rgba(220, 39, 67, 0.45) !important;
}

.service-node[data-service="messenger-api"].active-node,
.service-node[data-service="messenger-api"]:hover {
	background: #0084ff !important;
	color: #ffffff !important;
	border-color: #ffffff !important;
	box-shadow: 0 10px 25px rgba(0, 132, 255, 0.45) !important;
}



/* ==========================================================================
   REALISTIC IPHONE MOCKUP STYLES FOR ESIM SECTION
   ========================================================================== */

.esim-iphone-container {
	position: relative;
	width: 100%;
	max-width: 280px;
	margin: 20px auto 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.esim-iphone-frame-img {
	width: 100%;
	height: auto;
	object-fit: contain;
	filter: drop-shadow(0 20px 40px rgba(15, 23, 42, 0.2));
	transition: transform 0.4s ease;
}

.esim-home-card:hover .esim-iphone-frame-img {
	transform: translateY(-6px) scale(1.02);
}

.esim-iphone-screen-overlay {
	position: absolute;
	top: 52%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 82%;
	z-index: 5;
	pointer-events: none;
}

.esim-iphone-screen-overlay .esim-phone-active-card {
	background: rgba(255, 255, 255, 0.92) !important;
	backdrop-filter: blur(12px) !important;
	border: 1px solid rgba(255, 255, 255, 0.8) !important;
	border-radius: 16px !important;
	padding: 16px 18px !important;
	box-shadow: 0 15px 35px rgba(15, 23, 42, 0.18) !important;
}

.esim-iphone-screen-overlay .esim-active-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.esim-iphone-screen-overlay .esim-active-label {
	font-family: 'Outfit', sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: #0f172a;
	display: flex;
	align-items: center;
	gap: 6px;
}

.esim-iphone-screen-overlay .esim-active-badge {
	background: rgba(34, 197, 94, 0.15);
	color: #16a34a;
	padding: 3px 10px;
	border-radius: 12px;
	font-family: 'Outfit', sans-serif;
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 5px;
}

.esim-iphone-screen-overlay .esim-active-detail {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	color: #475569;
	font-weight: 600;
}

@media (max-width: 768px) {
	.esim-iphone-container {
		max-width: 240px;
	}
	.esim-iphone-screen-overlay .esim-phone-active-card {
		padding: 12px 14px !important;
	}
}



/* 50% Peeking Realistic iPhone Layout */
.esim-home-card--blue {
	position: relative !important;
	overflow: hidden !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: space-between !important;
	min-height: 380px !important;
}

.esim-iphone-container {
	position: relative !important;
	width: 100% !important;
	max-width: 270px !important;
	margin: 20px auto -140px auto !important; /* Peeking 50% at bottom */
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
}

.esim-iphone-frame-img {
	width: 100% !important;
	height: auto !important;
	object-fit: contain !important;
	filter: drop-shadow(0 15px 35px rgba(15, 23, 42, 0.25)) !important;
}

.esim-iphone-screen-overlay {
	position: absolute !important;
	top: 32% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	width: 78% !important;
	z-index: 5 !important;
}

.esim-iphone-screen-overlay .esim-phone-header {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	margin-bottom: 10px !important;
	font-family: 'Outfit', sans-serif !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	color: #0f172a !important;
}

.esim-iphone-screen-overlay .esim-phone-user {
	color: #0f172a !important;
}

.esim-iphone-screen-overlay .esim-phone-currency {
	background: rgba(15, 23, 42, 0.06) !important;
	padding: 2px 6px !important;
	border-radius: 6px !important;
	font-size: 9px !important;
	color: #475569 !important;
}

.esim-iphone-screen-overlay .esim-phone-active-card {
	background: rgba(255, 255, 255, 0.95) !important;
	backdrop-filter: blur(10px) !important;
	border: 1px solid rgba(255, 255, 255, 0.9) !important;
	border-radius: 14px !important;
	padding: 12px 14px !important;
	box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15) !important;
}



/* ==========================================================================
   PROMINENT ZOOMED-IN IPHONE MOCKUP FOR ESIM CARD 1
   ========================================================================== */

.esim-home-card--blue {
	position: relative !important;
	overflow: hidden !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: space-between !important;
	min-height: 420px !important;
}

.esim-iphone-container {
	position: relative !important;
	width: 100% !important;
	max-width: 440px !important;
	margin: 25px auto -220px auto !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
}

.esim-iphone-frame-img {
	width: 100% !important;
	height: auto !important;
	object-fit: contain !important;
	filter: drop-shadow(0 20px 45px rgba(15, 23, 42, 0.22)) !important;
}

.esim-iphone-screen-overlay {
	position: absolute !important;
	top: 26% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	width: 82% !important;
	z-index: 5 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
}

.esim-iphone-screen-overlay .esim-phone-header {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	padding: 0 4px !important;
}

.esim-iphone-screen-overlay .esim-phone-user {
	font-family: 'Outfit', sans-serif !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	color: #0f172a !important;
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
}

.esim-iphone-screen-overlay .esim-phone-currency {
	background: rgba(15, 23, 42, 0.8) !important;
	color: #ffffff !important;
	padding: 4px 10px !important;
	border-radius: 20px !important;
	font-family: 'Outfit', sans-serif !important;
	font-size: 11px !important;
	font-weight: 700 !important;
}

.esim-iphone-screen-overlay .esim-phone-active-card {
	background: rgba(255, 255, 255, 0.95) !important;
	backdrop-filter: blur(12px) !important;
	border: 1px solid rgba(255, 255, 255, 0.9) !important;
	border-radius: 18px !important;
	padding: 16px 20px !important;
	box-shadow: 0 15px 35px rgba(15, 23, 42, 0.18) !important;
}

.esim-iphone-screen-overlay .esim-active-header {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	margin-bottom: 6px !important;
}

.esim-iphone-screen-overlay .esim-active-label {
	font-family: 'Outfit', sans-serif !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	color: #0f172a !important;
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
}

.esim-iphone-screen-overlay .esim-active-badge {
	background: rgba(34, 197, 94, 0.15) !important;
	color: #16a34a !important;
	padding: 4px 12px !important;
	border-radius: 20px !important;
	font-family: 'Outfit', sans-serif !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	display: flex !important;
	align-items: center !important;
	gap: 5px !important;
}

.esim-iphone-screen-overlay .esim-active-detail {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 13px !important;
	color: #475569 !important;
	font-weight: 600 !important;
}

@media (max-width: 991px) {
	.esim-iphone-container {
		max-width: 340px !important;
		margin: 20px auto -170px auto !important;
	}
	.esim-iphone-screen-overlay .esim-phone-user {
		font-size: 14px !important;
	}
}



/* ==========================================================================
   PERFECT VISIBLE ESIM IPHONE MOCKUP & SCREEN OVERLAY
   ========================================================================== */

.esim-home-card--blue {
	position: relative !important;
	overflow: hidden !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: space-between !important;
	padding: 36px 36px 0 36px !important;
	min-height: 420px !important;
}

.esim-iphone-container {
	position: relative !important;
	width: 100% !important;
	max-width: 310px !important;
	margin: 24px auto -80px auto !important;
	display: flex !important;
	justify-content: center !important;
	align-items: flex-start !important;
}

.esim-iphone-frame-img {
	width: 100% !important;
	height: auto !important;
	display: block !important;
	object-fit: contain !important;
	filter: drop-shadow(0 15px 35px rgba(15, 23, 42, 0.18)) !important;
}

.esim-iphone-screen-overlay {
	position: absolute !important;
	top: 36% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	width: 78% !important;
	z-index: 5 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
}

.esim-iphone-screen-overlay .esim-phone-header {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	padding: 0 2px !important;
}

.esim-iphone-screen-overlay .esim-phone-user {
	font-family: 'Outfit', sans-serif !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	color: #0f172a !important;
}

.esim-iphone-screen-overlay .esim-phone-currency {
	background: rgba(15, 23, 42, 0.08) !important;
	color: #334155 !important;
	padding: 3px 8px !important;
	border-radius: 12px !important;
	font-family: 'Outfit', sans-serif !important;
	font-size: 10px !important;
	font-weight: 700 !important;
}

.esim-iphone-screen-overlay .esim-phone-active-card {
	background: rgba(255, 255, 255, 0.95) !important;
	backdrop-filter: blur(10px) !important;
	border: 1px solid rgba(255, 255, 255, 0.9) !important;
	border-radius: 14px !important;
	padding: 12px 14px !important;
	box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12) !important;
}

.esim-iphone-screen-overlay .esim-active-header {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	margin-bottom: 4px !important;
}

.esim-iphone-screen-overlay .esim-active-label {
	font-family: 'Outfit', sans-serif !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	color: #0f172a !important;
	display: flex !important;
	align-items: center !important;
	gap: 5px !important;
}

.esim-iphone-screen-overlay .esim-active-badge {
	background: rgba(34, 197, 94, 0.15) !important;
	color: #16a34a !important;
	padding: 3px 8px !important;
	border-radius: 12px !important;
	font-family: 'Outfit', sans-serif !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	display: flex !important;
	align-items: center !important;
	gap: 4px !important;
}

.esim-iphone-screen-overlay .esim-active-detail {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 11px !important;
	color: #475569 !important;
	font-weight: 600 !important;
}



/* ==========================================================================
   2026 ULTRA-PREMIUM MOBILE & TABLET RESPONSIVE OVERLAY (IOS & ANDROID)
   ========================================================================== */

/* Prevent Horizontal Page Overflow on Mobile */
html, body {
	overflow-x: hidden !important;
	max-width: 100vw !important;
	-webkit-text-size-adjust: 100%;
}

@media (max-width: 991px) {
	/* Global Section Padding Adjustments */
	.theme-container {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	/* Hero Section Responsiveness */
	.hero-section {
		padding: 100px 0 60px 0 !important;
	}

	.hero-grid {
		grid-template-columns: 1fr !important;
		gap: 40px !important;
	}

	.hero-title {
		font-size: 32px !important;
		line-height: 1.25 !important;
	}

	.hero-description {
		font-size: 15px !important;
		line-height: 1.6 !important;
	}

	.hero-actions {
		flex-direction: column !important;
		width: 100% !important;
		gap: 12px !important;
	}

	.hero-actions .btn {
		width: 100% !important;
		text-align: center !important;
		justify-content: center !important;
	}

	.hero-stats {
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 12px !important;
		margin-top: 30px !important;
	}

	.hero-stats .stat-item {
		padding: 12px 8px !important;
	}

	.hero-stats .stat-number {
		font-size: 20px !important;
	}

	.hero-stats .stat-label {
		font-size: 11px !important;
	}

	/* Hero Simulator Grid */
	.hero-usecase-box {
		padding: 20px 16px !important;
	}

	.usecase-tabs-container {
		overflow-x: auto !important;
		white-space: nowrap !important;
		-webkit-overflow-scrolling: touch !important;
		padding-bottom: 8px !important;
		margin-bottom: 20px !important;
	}

	.usecase-tabs {
		display: inline-flex !important;
		gap: 8px !important;
	}

	.usecase-tab-btn {
		padding: 8px 16px !important;
		font-size: 13px !important;
	}

	.hero-usecase-grid {
		grid-template-columns: 1fr !important;
		gap: 28px !important;
	}

	/* Trust Section Slider */
	.trust-section {
		padding: 40px 0 !important;
	}

	.trust-label {
		font-size: 11px !important;
		letter-spacing: 1px !important;
		margin-bottom: 20px !important;
	}

	.logo-item img {
		max-height: 28px !important;
		width: auto !important;
	}

	/* Omnichannel Infrastructure Section */
	.solutions-roundup-section {
		padding: 60px 0 !important;
	}

	.solutions-roundup-section .roundup-section-header {
		margin-bottom: 40px !important;
	}

	.solutions-roundup-section .roundup-title {
		font-size: 26px !important;
	}

	.solutions-roundup-section .roundup-subtitle {
		font-size: 14px !important;
	}

	.roundup-2026-grid {
		grid-template-columns: 1fr !important;
		gap: 40px !important;
		margin-top: 36px !important;
	}

	.roundup-left-hub-col {
		justify-content: center !important;
	}

	.orbital-hub-wrap {
		width: 320px !important;
		height: 320px !important;
		margin: 0 auto !important;
	}

	.hub-center-core {
		width: 70px !important;
		height: 70px !important;
	}

	.spider-mark-img {
		width: 38px !important;
		height: 38px !important;
	}

	.hub-orbit--single {
		width: 280px !important;
		height: 280px !important;
	}

	.hub-orbit--single .service-node {
		--orbit-radius: 140px !important;
		width: 44px !important;
		height: 44px !important;
		margin: -22px !important;
		font-size: 16px !important;
	}

	.flash-canvas-card {
		padding: 24px 18px !important;
	}

	.flash-icon-box {
		width: 50px !important;
		height: 50px !important;
		font-size: 20px !important;
	}

	.flash-title-wrap h3 {
		font-size: 20px !important;
	}

	.flash-title-wrap p {
		font-size: 13px !important;
	}

	.flash-bento-stats {
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 8px !important;
	}

	.flash-stat-card {
		padding: 12px 6px !important;
	}

	.flash-stat-card h4 {
		font-size: 16px !important;
	}

	.flash-stat-card p {
		font-size: 10px !important;
	}

	.flash-feature-item {
		font-size: 13px !important;
	}

	.flash-telemetry-box {
		padding: 16px 14px !important;
	}

	/* eSIM Section */
	.esim-section {
		padding: 60px 0 !important;
	}

	.esim-title {
		font-size: 28px !important;
	}

	.esim-homepage-grid {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}

	.esim-home-card {
		padding: 24px 20px !important;
	}

	.esim-card-title {
		font-size: 22px !important;
	}

	/* Footer */
	.site-footer {
		padding: 60px 0 30px 0 !important;
	}

	.footer-grid {
		grid-template-columns: 1fr !important;
		gap: 36px !important;
	}

	.footer-bottom {
		flex-direction: column !important;
		gap: 16px !important;
		text-align: center !important;
	}
}

@media (max-width: 480px) {
	.hero-title {
		font-size: 26px !important;
	}

	.hero-stats {
		grid-template-columns: 1fr !important;
		gap: 10px !important;
	}

	.flash-bento-stats {
		grid-template-columns: 1fr !important;
		gap: 8px !important;
	}

	.orbital-hub-wrap {
		width: 290px !important;
		height: 290px !important;
	}

	.hub-orbit--single {
		width: 250px !important;
		height: 250px !important;
	}

	.hub-orbit--single .service-node {
		--orbit-radius: 125px !important;
		width: 40px !important;
		height: 40px !important;
		margin: -20px !important;
		font-size: 14px !important;
	}
}



/* Direct Carrier Connections Badge Mobile Styling */
@media (max-width: 991px) {
	.hero-content .badge-container {
		display: flex !important;
		justify-content: center !important;
		width: 100% !important;
		margin-bottom: 18px !important;
	}

	.hero-badge {
		font-size: 11px !important;
		padding: 6px 16px !important;
		margin-bottom: 0 !important;
		white-space: nowrap !important;
		max-width: 100% !important;
		background: #ffffff !important;
		box-shadow: 0 4px 15px rgba(15, 23, 42, 0.08) !important;
		border: 1px solid rgba(84, 51, 225, 0.15) !important;
	}
}

@media (max-width: 480px) {
	.hero-badge {
		font-size: 10px !important;
		padding: 5px 12px !important;
		letter-spacing: 0.5px !important;
	}
}



/* ==========================================================================
   PERFECT MOBILE RESPONSIVE FIXES FOR HERO, HEADER & SIMULATOR
   ========================================================================== */

/* Fix Sticky Header Overlap on Mobile */
@media (max-width: 991px) {
	.site-header {
		position: absolute !important; /* Prevents sticky floating overlap on hero content */
	}

	.hero-section {
		padding-top: 130px !important; /* Generous top clearance below header */
		padding-bottom: 60px !important;
	}

	.hero-content {
		text-align: center !important;
	}

	.hero-content .badge-container {
		display: flex !important;
		justify-content: center !important;
		margin-bottom: 16px !important;
	}

	.hero-title {
		font-size: 26px !important;
		line-height: 1.3 !important;
		word-break: break-word !important;
		overflow-wrap: break-word !important;
		max-width: 100% !important;
	}

	.typewriter-line-1, 
	.typewriter-line-2 {
		font-size: 26px !important;
		display: inline-block !important;
		word-break: break-word !important;
		overflow-wrap: break-word !important;
	}

	.hero-description {
		font-size: 14px !important;
		line-height: 1.6 !important;
		text-align: center !important;
		margin: 16px auto 24px auto !important;
		max-width: 100% !important;
		padding: 0 10px !important;
	}

	.hero-stats {
		display: grid !important;
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 8px !important;
		margin-top: 24px !important;
		margin-bottom: 32px !important;
	}

	.hero-stats .stat-item {
		padding: 10px 4px !important;
		background: #ffffff !important;
		border-radius: 12px !important;
		box-shadow: 0 4px 15px rgba(15, 23, 42, 0.05) !important;
	}

	.hero-stats .stat-number {
		font-size: 16px !important;
		font-weight: 800 !important;
	}

	.hero-stats .stat-label {
		font-size: 10px !important;
		white-space: nowrap !important;
	}

	.hero-usecase-box {
		padding: 20px 12px !important;
		border-radius: 20px !important;
	}

	.usecase-tabs-container {
		width: 100% !important;
		overflow-x: auto !important;
		white-space: nowrap !important;
		-webkit-overflow-scrolling: touch !important;
		scrollbar-width: none !important;
		margin-bottom: 24px !important;
	}

	.usecase-tabs-container::-webkit-scrollbar {
		display: none !important;
	}

	.usecase-tabs {
		display: inline-flex !important;
		gap: 8px !important;
		padding: 4px !important;
	}

	.phone-simulator-container {
		max-width: 300px !important;
		margin: 0 auto !important;
	}

	.phone-simulator-mockup {
		border-radius: 36px !important;
		padding: 8px !important;
	}

	.phone-chat-body {
		padding: 12px !important;
	}
}

@media (max-width: 480px) {
	.hero-title,
	.typewriter-line-1,
	.typewriter-line-2 {
		font-size: 22px !important;
	}

	.hero-stats .stat-number {
		font-size: 14px !important;
	}

	.hero-stats .stat-label {
		font-size: 9px !important;
	}

	.phone-simulator-container {
		max-width: 270px !important;
	}
}



/* ==========================================================================
   CLEAN RESPONSIVE FIXES (STRUCTURE PRESERVED, NO OVERLAP)
   ========================================================================== */

@media (max-width: 991px) {
	/* Preserve Header Flow */
	.site-header {
		position: relative !important;
	}

	.hero-section {
		padding: 30px 0 50px 0 !important;
	}

	.hero-content {
		text-align: center !important;
	}

	.hero-content .badge-container {
		display: flex !important;
		justify-content: center !important;
		width: 100% !important;
		margin-bottom: 16px !important;
	}

	.hero-badge {
		font-size: 11px !important;
		padding: 6px 14px !important;
		display: inline-flex !important;
		margin: 0 auto !important;
	}

	/* Force Title Visibility and Full Text Display */
	#typewriter-hero-title,
	.hero-title,
	.typewriter-line-1,
	.typewriter-line-2 {
		display: block !important;
		opacity: 1 !important;
		visibility: visible !important;
		height: auto !important;
		max-height: none !important;
		font-size: 26px !important;
		line-height: 1.35 !important;
		text-align: center !important;
		margin-bottom: 16px !important;
	}

	.hero-description {
		font-size: 14px !important;
		line-height: 1.6 !important;
		text-align: center !important;
		margin: 0 auto 24px auto !important;
		padding: 0 8px !important;
	}

	.hero-actions {
		display: flex !important;
		flex-direction: column !important;
		gap: 12px !important;
		width: 100% !important;
	}

	.hero-actions .btn {
		width: 100% !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		padding: 14px 20px !important;
		box-sizing: border-box !important;
	}

	/* Hero Stats 3 Equal Columns without Overflow */
	.hero-stats {
		display: flex !important;
		flex-direction: row !important;
		justify-content: space-between !important;
		gap: 6px !important;
		width: 100% !important;
		margin-top: 28px !important;
		box-sizing: border-box !important;
	}

	.hero-stats .stat-item {
		flex: 1 1 0px !important;
		min-width: 0 !important;
		padding: 10px 4px !important;
		background: #ffffff !important;
		border-radius: 12px !important;
		box-shadow: 0 4px 15px rgba(15, 23, 42, 0.05) !important;
		border: 1px solid rgba(15, 23, 42, 0.06) !important;
		text-align: center !important;
		box-sizing: border-box !important;
	}

	.hero-stats .stat-number {
		font-size: 15px !important;
		font-weight: 800 !important;
		display: block !important;
	}

	.hero-stats .stat-label {
		font-size: 9px !important;
		display: block !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		white-space: nowrap !important;
	}
}

@media (max-width: 480px) {
	#typewriter-hero-title,
	.hero-title,
	.typewriter-line-1,
	.typewriter-line-2 {
		font-size: 22px !important;
	}

	.hero-stats .stat-number {
		font-size: 13px !important;
	}

	.hero-stats .stat-label {
		font-size: 8px !important;
	}
}



/* ==========================================================================
   100% PIXEL-PERFECT HERO-GRID RESPONSIVENESS (DESKTOP UNTOUCHED)
   ========================================================================== */

@media (max-width: 991px) {
	.hero-grid {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 44px !important;
		width: 100% !important;
	}

	.hero-content {
		width: 100% !important;
		text-align: center !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
	}

	.badge-container {
		display: flex !important;
		justify-content: center !important;
		width: 100% !important;
		margin-bottom: 16px !important;
	}

	.hero-badge {
		font-size: 11px !important;
		padding: 6px 14px !important;
		margin: 0 auto !important;
		display: inline-flex !important;
		white-space: nowrap !important;
	}

	#typewriter-hero-title,
	.hero-title,
	.typewriter-line-1,
	.typewriter-line-2 {
		display: block !important;
		opacity: 1 !important;
		visibility: visible !important;
		height: auto !important;
		max-height: none !important;
		font-size: 28px !important;
		line-height: 1.3 !important;
		text-align: center !important;
		margin-bottom: 16px !important;
		width: 100% !important;
	}

	.hero-description {
		font-size: 14px !important;
		line-height: 1.6 !important;
		text-align: center !important;
		margin: 0 auto 24px auto !important;
		max-width: 100% !important;
		padding: 0 4px !important;
	}

	.hero-actions {
		display: flex !important;
		flex-direction: column !important;
		gap: 12px !important;
		width: 100% !important;
		max-width: 400px !important;
		margin: 0 auto !important;
	}

	.hero-actions .btn {
		width: 100% !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		padding: 14px 20px !important;
		box-sizing: border-box !important;
	}

	.hero-stats {
		display: grid !important;
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 8px !important;
		width: 100% !important;
		margin-top: 28px !important;
		box-sizing: border-box !important;
	}

	.hero-stats .stat-item {
		padding: 10px 4px !important;
		background: #ffffff !important;
		border-radius: 12px !important;
		box-shadow: 0 4px 15px rgba(15, 23, 42, 0.05) !important;
		border: 1px solid rgba(15, 23, 42, 0.06) !important;
		text-align: center !important;
		box-sizing: border-box !important;
	}

	.hero-stats .stat-number {
		font-size: 16px !important;
		font-weight: 800 !important;
	}

	.hero-stats .stat-label {
		font-size: 10px !important;
		white-space: nowrap !important;
	}

	/* Visual & Simulator Box */
	.hero-visual {
		width: 100% !important;
	}

	.hero-usecase-box {
		padding: 24px 16px !important;
		border-radius: 24px !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	.usecase-tabs-container {
		width: 100% !important;
		overflow-x: auto !important;
		white-space: nowrap !important;
		-webkit-overflow-scrolling: touch !important;
		scrollbar-width: none !important;
		margin-bottom: 24px !important;
	}

	.usecase-tabs-container::-webkit-scrollbar {
		display: none !important;
	}

	.hero-usecase-grid {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 28px !important;
		width: 100% !important;
	}

	.phone-simulator-container {
		max-width: 310px !important;
		margin: 0 auto !important;
	}

	.usecase-pills-list {
		display: flex !important;
		flex-direction: column !important;
		gap: 10px !important;
		width: 100% !important;
	}

	.usecase-pill-btn {
		width: 100% !important;
		padding: 12px 16px !important;
		box-sizing: border-box !important;
	}
}

@media (max-width: 480px) {
	#typewriter-hero-title,
	.hero-title,
	.typewriter-line-1,
	.typewriter-line-2 {
		font-size: 23px !important;
	}

	.hero-stats {
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 6px !important;
	}

	.hero-stats .stat-number {
		font-size: 14px !important;
	}

	.hero-stats .stat-label {
		font-size: 9px !important;
	}

	.phone-simulator-container {
		max-width: 280px !important;
	}
}



/* ==========================================================================
   MOBILE MENU TOGGLE (fas fa-bars) & SIDE DRAWER STYLES
   ========================================================================== */

.menu-toggle {
	display: none;
}

@media (max-width: 991px) {
	.menu-toggle {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 42px !important;
		height: 42px !important;
		background: #ffffff !important;
		border: 1.5px solid rgba(84, 51, 225, 0.2) !important;
		border-radius: 12px !important;
		color: #5232da !important;
		font-size: 18px !important;
		cursor: pointer !important;
		z-index: 10001 !important;
		box-shadow: 0 4px 15px rgba(15, 23, 42, 0.08) !important;
		transition: all 0.25s ease !important;
	}

	.menu-toggle:hover {
		background: #5232da !important;
		color: #ffffff !important;
		border-color: #5232da !important;
	}

	.main-navigation {
		position: fixed !important;
		top: 0 !important;
		right: -100% !important;
		left: auto !important;
		width: 320px !important;
		max-width: 85vw !important;
		height: 100vh !important;
		background: #ffffff !important;
		box-shadow: -10px 0 40px rgba(15, 23, 42, 0.18) !important;
		z-index: 10000 !important;
		transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
		display: block !important;
		padding: 85px 24px 30px 24px !important;
		overflow-y: auto !important;
		box-sizing: border-box !important;
	}

	.main-navigation.active {
		right: 0 !important;
	}

	.menu-backdrop {
		display: none;
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		width: 100vw !important;
		height: 100vh !important;
		background: rgba(15, 23, 42, 0.5) !important;
		backdrop-filter: blur(4px) !important;
		z-index: 9999 !important;
	}

	.menu-backdrop.active {
		display: block !important;
	}

	body.menu-open {
		overflow: hidden !important;
	}

	.nav-menu {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 12px !important;
		width: 100% !important;
		padding: 0 !important;
		margin: 0 !important;
		list-style: none !important;
	}

	.nav-menu > li > a {
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
		padding: 12px 16px !important;
		color: #0f172a !important;
		font-family: 'Outfit', sans-serif !important;
		font-size: 15px !important;
		font-weight: 700 !important;
		border-radius: 12px !important;
		background: #f8fafc !important;
		border: 1px solid rgba(15, 23, 42, 0.05) !important;
		text-decoration: none !important;
	}

	.nav-menu > li > a:hover {
		background: rgba(84, 51, 225, 0.08) !important;
		color: #5232da !important;
	}

	.sub-menu, .mega-menu {
		position: static !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		box-shadow: none !important;
		border: none !important;
		background: transparent !important;
		padding: 8px 0 8px 12px !important;
		width: 100% !important;
		display: none;
	}

	.mega-menu-grid {
		display: flex !important;
		flex-direction: column !important;
		gap: 12px !important;
	}

	.mega-menu-column h4 {
		font-size: 12px !important;
		color: #64748b !important;
		margin-bottom: 8px !important;
		text-transform: uppercase !important;
		letter-spacing: 0.5px !important;
	}

	.mega-menu-item {
		display: flex !important;
		align-items: center !important;
		gap: 12px !important;
		padding: 8px 12px !important;
		border-radius: 10px !important;
		background: #ffffff !important;
		margin-bottom: 6px !important;
		text-decoration: none !important;
	}

	.mega-menu-item h5 {
		font-size: 13px !important;
		margin: 0 !important;
		color: #0f172a !important;
		font-weight: 700 !important;
	}

	.mega-menu-item p {
		font-size: 11px !important;
		margin: 2px 0 0 0 !important;
		color: #64748b !important;
	}
}



/* ==========================================================================
   WordPress Comments & Leave a Reply Section Styling (Modern Premium UI)
   ========================================================================== */
.comments-area {
	margin: 56px auto 0;
	max-width: 800px;
}
.comments-title {
	font-family: 'Outfit', sans-serif;
	font-size: 26px;
	font-weight: 700;
	color: #0f172a;
	margin-bottom: 28px;
}
.dark-theme .comments-title {
	color: #f8fafc;
}
.comment-list {
	list-style: none;
	padding: 0;
	margin: 0 0 40px;
}
.comment-item-wrap {
	margin-bottom: 24px;
}
.comment-item-wrap .children {
	list-style: none;
	margin-left: 48px;
	margin-top: 16px;
	padding: 0;
	border-left: 2px solid rgba(84, 51, 225, 0.08);
	padding-left: 20px;
}
.comment-body-card {
	display: flex;
	gap: 18px;
	padding: 24px;
	background: #ffffff;
	border: 1px solid rgba(15, 23, 42, 0.06);
	border-radius: 16px;
	box-shadow: 0 4px 15px rgba(15, 23, 42, 0.015);
	transition: all 0.25s ease;
}
.dark-theme .comment-body-card {
	background: #1e1b4b;
	border-color: rgba(255, 255, 255, 0.06);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}
.comment-body-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 25px rgba(84, 51, 225, 0.04);
	border-color: rgba(84, 51, 225, 0.15);
}
.comment-meta-avatar {
	flex: 0 0 54px;
}
.comment-avatar-img {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #ffffff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.dark-theme .comment-avatar-img {
	border-color: #1e1b4b;
}
.comment-content-wrap {
	flex: 1;
}
.comment-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 6px;
	flex-wrap: wrap;
	gap: 8px;
}
.comment-author-name {
	font-family: 'Outfit', sans-serif;
	font-size: 15.5px;
	font-weight: 700;
	color: #0f172a;
	margin: 0;
}
.dark-theme .comment-author-name {
	color: #f8fafc;
}
.comment-author-name a {
	color: inherit;
	text-decoration: none;
}
.comment-author-name a:hover {
	color: #5433e1;
	text-decoration: underline;
}
.comment-timestamp {
	font-size: 11.5px;
	font-weight: 500;
	color: #64748b;
}
.dark-theme .comment-timestamp {
	color: #94a3b8;
}
.comment-text-content {
	font-size: 14.5px;
	line-height: 1.6;
	color: #334155;
	margin-bottom: 12px;
}
.dark-theme .comment-text-content {
	color: #cbd5e1;
}
.comment-text-content p {
	margin: 0 0 8px;
}
.comment-text-content p:last-child {
	margin-bottom: 0;
}
.comment-awaiting-moderation {
	font-size: 12px;
	font-style: italic;
	color: #eab308;
	margin-bottom: 8px;
}
.comment-actions-reply a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: #5433e1;
	background: rgba(84, 51, 225, 0.06);
	padding: 5px 12px;
	border-radius: 6px;
	text-decoration: none;
	transition: all 0.22s ease;
}
.comment-actions-reply a:hover {
	color: #ffffff;
	background: #5433e1;
}

/* Comment Response Form - Leave a Reply */
.comment-respond {
	margin-top: 40px;
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(15, 23, 42, 0.06);
	border-radius: 24px;
	padding: 34px;
	box-shadow: 0 12px 35px rgba(15, 23, 42, 0.02);
}
.dark-theme .comment-respond {
	background: rgba(30, 27, 75, 0.45);
	border-color: rgba(255, 255, 255, 0.06);
	box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
}
.comment-reply-title {
	font-family: 'Outfit', sans-serif;
	font-size: 22px;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 4px;
}
.dark-theme .comment-reply-title {
	color: #f8fafc;
}
.comment-reply-title small {
	font-size: 13px;
	font-weight: 500;
	margin-left: 12px;
}
.comment-reply-title small a {
	color: #ef4444;
	text-decoration: none;
}
.comment-reply-title small a:hover {
	text-decoration: underline;
}
.comment-notes {
	font-size: 13.5px;
	color: #64748b;
	margin: 0 0 24px;
}
.dark-theme .comment-notes {
	color: #94a3b8;
}
.comment-form {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
.comment-form-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.comment-form-field label {
	font-size: 13px;
	font-weight: 600;
	color: #334155;
	margin: 0;
}
.dark-theme .comment-form-field label {
	color: #cbd5e1;
}
.comment-form-field label .required {
	color: #ec307c;
}
.comment-input {
	width: 100%;
	padding: 13px 16px;
	font-family: 'Inter', sans-serif;
	font-size: 14.5px;
	color: #0f172a;
	background: #f8fafc;
	border: 1.5px solid transparent;
	border-radius: 12px;
	transition: all 0.22s ease;
	outline: none;
}
.dark-theme .comment-input {
	color: #f8fafc;
	background: #110e3d;
}
.comment-input::placeholder {
	color: #94a3b8;
}
.comment-input:focus {
	background: #ffffff;
	border-color: #5433e1;
	box-shadow: 0 0 0 4px rgba(84, 51, 225, 0.1);
}
.dark-theme .comment-input:focus {
	background: #1e1b4b;
}
textarea.comment-input {
	resize: vertical;
	min-height: 120px;
}
.comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 4px 0 12px;
}
.comment-form-cookies-consent input {
	margin-top: 3px;
	width: 16px;
	height: 16px;
	accent-color: #5433e1;
	cursor: pointer;
}
.comment-form-cookies-consent label {
	font-size: 13px;
	color: #64748b;
	line-height: 1.45;
	cursor: pointer;
	margin: 0;
}
.dark-theme .comment-form-cookies-consent label {
	color: #94a3b8;
}
.comment-submit-btn {
	justify-self: start;
	padding: 14px 28px;
	border: none;
	cursor: pointer;
	font-family: 'Outfit', sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #ffffff;
	background: linear-gradient(135deg, #ec307c, #5433e1);
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(84, 51, 225, 0.2);
	transition: all 0.22s ease;
}
.comment-submit-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 30px rgba(236, 48, 124, 0.25);
}

/* Arrange fields below comment box in 3 columns for desktop */
@media (min-width: 768px) {
	.comment-form {
		grid-template-columns: 1fr 1fr 1fr;
	}
	.comment-form-comment {
		grid-column: span 3;
	}
	.comment-form-cookies-consent {
		grid-column: span 3;
	}
	.form-submit {
		grid-column: span 3;
	}
}

/* ==========================================================================
   RCS Business Messaging Brand Icons Styling (Premium Active Colors)
   ========================================================================== */
.rcs-brand-icon {
	font-size: 13px !important;
	color: rgba(255, 255, 255, 0.35) !important;
	transition: all 0.25s ease !important;
	margin-left: 2px !important;
}
.rcs-feature-card:hover .rcs-brand-icon,
.rcs-feature-card.rcs-card-active .rcs-brand-icon,
.rcs-usecase-item:hover .rcs-brand-icon,
.rcs-usecase-item.rcs-uc-active .rcs-brand-icon {
	color: rgba(255, 255, 255, 0.85) !important;
	transform: scale(1.15) !important;
}

/* Hover/Active Specific Brand Colors */
.rcs-feature-card:hover .fa-google, .rcs-feature-card.rcs-card-active .fa-google,
.rcs-usecase-item:hover .fa-google, .rcs-usecase-item.rcs-uc-active .fa-google { color: #4285f4 !important; }

.rcs-feature-card:hover .fa-amazon, .rcs-feature-card.rcs-card-active .fa-amazon,
.rcs-usecase-item:hover .fa-amazon, .rcs-usecase-item.rcs-uc-active .fa-amazon { color: #ff9900 !important; }

.rcs-feature-card:hover .fa-facebook-f, .rcs-feature-card.rcs-card-active .fa-facebook-f,
.rcs-usecase-item:hover .fa-facebook-f, .rcs-usecase-item.rcs-uc-active .fa-facebook-f { color: #1877f2 !important; }

.rcs-feature-card:hover .fa-shopify, .rcs-feature-card.rcs-card-active .fa-shopify,
.rcs-usecase-item:hover .fa-shopify, .rcs-usecase-item.rcs-uc-active .fa-shopify { color: #96bf48 !important; }

.rcs-feature-card:hover .fa-ebay, .rcs-feature-card.rcs-card-active .fa-ebay,
.rcs-usecase-item:hover .fa-ebay, .rcs-usecase-item.rcs-uc-active .fa-ebay { color: #ffc439 !important; }

.rcs-feature-card:hover .fa-apple, .rcs-feature-card.rcs-card-active .fa-apple,
.rcs-usecase-item:hover .fa-apple, .rcs-usecase-item.rcs-uc-active .fa-apple { color: #ffffff !important; }

.rcs-feature-card:hover .fa-uber, .rcs-feature-card.rcs-card-active .fa-uber,
.rcs-usecase-item:hover .fa-uber, .rcs-usecase-item.rcs-uc-active .fa-uber { color: #ffffff !important; }

.rcs-feature-card:hover .fa-map-marker-alt, .rcs-feature-card.rcs-card-active .fa-map-marker-alt,
.rcs-usecase-item:hover .fa-map-marker-alt, .rcs-usecase-item.rcs-uc-active .fa-map-marker-alt { color: #ea4335 !important; }

.rcs-feature-card:hover .fa-paypal, .rcs-feature-card.rcs-card-active .fa-paypal,
.rcs-usecase-item:hover .fa-paypal, .rcs-usecase-item.rcs-uc-active .fa-paypal { color: #00a0e9 !important; }

.rcs-feature-card:hover .fa-whatsapp, .rcs-feature-card.rcs-card-active .fa-whatsapp,
.rcs-usecase-item:hover .fa-whatsapp, .rcs-usecase-item.rcs-uc-active .fa-whatsapp { color: #25d366 !important; }

.rcs-feature-card:hover .fa-slack, .rcs-feature-card.rcs-card-active .fa-slack,
.rcs-usecase-item:hover .fa-slack, .rcs-usecase-item.rcs-uc-active .fa-slack { color: #e01e5a !important; }

.rcs-feature-card:hover .fa-fedex, .rcs-feature-card.rcs-card-active .fa-fedex,
.rcs-usecase-item:hover .fa-fedex, .rcs-usecase-item.rcs-uc-active .fa-fedex { color: #ff6600 !important; }

.rcs-feature-card:hover .fa-cc-visa, .rcs-feature-card.rcs-card-active .fa-cc-visa,
.rcs-usecase-item:hover .fa-cc-visa, .rcs-usecase-item.rcs-uc-active .fa-cc-visa { color: #00a0e9 !important; }

.rcs-feature-card:hover .fa-cc-mastercard, .rcs-feature-card.rcs-card-active .fa-cc-mastercard,
.rcs-usecase-item:hover .fa-cc-mastercard, .rcs-usecase-item.rcs-uc-active .fa-cc-mastercard { color: #ff5f00 !important; }

.rcs-feature-card:hover .fa-android, .rcs-feature-card.rcs-card-active .fa-android,
.rcs-usecase-item:hover .fa-android, .rcs-usecase-item.rcs-uc-active .fa-android { color: #3ddc84 !important; }

.rcs-feature-card:hover .fa-windows, .rcs-feature-card.rcs-card-active .fa-windows,
.rcs-usecase-item:hover .fa-windows, .rcs-usecase-item.rcs-uc-active .fa-windows { color: #00adef !important; }

/* Inline Brand SVGs (preview.html and preview2.html) */
.rcs-brand-svg {
	width: 14px !important;
	height: 14px !important;
	fill: rgba(255, 255, 255, 0.35) !important;
	transition: all 0.25s ease !important;
	margin-left: 2.5px !important;
	display: inline-block !important;
	vertical-align: middle !important;
}
.rcs-feature-card:hover .rcs-brand-svg,
.rcs-feature-card.rcs-card-active .rcs-brand-svg,
.rcs-usecase-item:hover .rcs-brand-svg,
.rcs-usecase-item.rcs-uc-active .rcs-brand-svg {
	fill: rgba(255, 255, 255, 0.85) !important;
	transform: scale(1.15) !important;
}
.rcs-feature-card:hover .rcs-brand-svg[title="Google"], .rcs-feature-card.rcs-card-active .rcs-brand-svg[title="Google"],
.rcs-usecase-item:hover .rcs-brand-svg[title="Google"], .rcs-usecase-item.rcs-uc-active .rcs-brand-svg[title="Google"] { fill: #4285f4 !important; }
.rcs-feature-card:hover .rcs-brand-svg[title="Amazon"], .rcs-feature-card.rcs-card-active .rcs-brand-svg[title="Amazon"],
.rcs-usecase-item:hover .rcs-brand-svg[title="Amazon"], .rcs-usecase-item.rcs-uc-active .rcs-brand-svg[title="Amazon"] { fill: #ff9900 !important; }
.rcs-feature-card:hover .rcs-brand-svg[title="Meta"], .rcs-feature-card.rcs-card-active .rcs-brand-svg[title="Meta"],
.rcs-usecase-item:hover .rcs-brand-svg[title="Meta"], .rcs-usecase-item.rcs-uc-active .rcs-brand-svg[title="Meta"] { fill: #1877f2 !important; }
.rcs-feature-card:hover .rcs-brand-svg[title="Shopify"], .rcs-feature-card.rcs-card-active .rcs-brand-svg[title="Shopify"],
.rcs-usecase-item:hover .rcs-brand-svg[title="Shopify"], .rcs-usecase-item.rcs-uc-active .rcs-brand-svg[title="Shopify"] { fill: #96bf48 !important; }
.rcs-feature-card:hover .rcs-brand-svg[title="eBay"], .rcs-feature-card.rcs-card-active .rcs-brand-svg[title="eBay"],
.rcs-usecase-item:hover .rcs-brand-svg[title="eBay"], .rcs-usecase-item.rcs-uc-active .rcs-brand-svg[title="eBay"] { fill: #ffc439 !important; }
.rcs-feature-card:hover .rcs-brand-svg[title="Apple"], .rcs-feature-card.rcs-card-active .rcs-brand-svg[title="Apple"],
.rcs-usecase-item:hover .rcs-brand-svg[title="Apple"], .rcs-usecase-item.rcs-uc-active .rcs-brand-svg[title="Apple"] { fill: #ffffff !important; }
.rcs-feature-card:hover .rcs-brand-svg[title="Uber"], .rcs-feature-card.rcs-card-active .rcs-brand-svg[title="Uber"],
.rcs-usecase-item:hover .rcs-brand-svg[title="Uber"], .rcs-usecase-item.rcs-uc-active .rcs-brand-svg[title="Uber"] { fill: #ffffff !important; }
.rcs-feature-card:hover .rcs-brand-svg[title="Google Maps"], .rcs-feature-card.rcs-card-active .rcs-brand-svg[title="Google Maps"],
.rcs-usecase-item:hover .rcs-brand-svg[title="Google Maps"], .rcs-usecase-item.rcs-uc-active .rcs-brand-svg[title="Google Maps"] { fill: #ea4335 !important; }
.rcs-feature-card:hover .rcs-brand-svg[title="PayPal"], .rcs-feature-card.rcs-card-active .rcs-brand-svg[title="PayPal"],
.rcs-usecase-item:hover .rcs-brand-svg[title="PayPal"], .rcs-usecase-item.rcs-uc-active .rcs-brand-svg[title="PayPal"] { fill: #00a0e9 !important; }
.rcs-feature-card:hover .rcs-brand-svg[title="WhatsApp"], .rcs-feature-card.rcs-card-active .rcs-brand-svg[title="WhatsApp"],
.rcs-usecase-item:hover .rcs-brand-svg[title="WhatsApp"], .rcs-usecase-item.rcs-uc-active .rcs-brand-svg[title="WhatsApp"] { fill: #25d366 !important; }
.rcs-feature-card:hover .rcs-brand-svg[title="Slack"], .rcs-feature-card.rcs-card-active .rcs-brand-svg[title="Slack"],
.rcs-usecase-item:hover .rcs-brand-svg[title="Slack"], .rcs-usecase-item.rcs-uc-active .rcs-brand-svg[title="Slack"] { fill: #e01e5a !important; }
.rcs-feature-card:hover .rcs-brand-svg[title="FedEx"], .rcs-feature-card.rcs-card-active .rcs-brand-svg[title="FedEx"],
.rcs-usecase-item:hover .rcs-brand-svg[title="FedEx"], .rcs-usecase-item.rcs-uc-active .rcs-brand-svg[title="FedEx"] { fill: #ff6600 !important; }
.rcs-feature-card:hover .rcs-brand-svg[title="Visa"], .rcs-feature-card.rcs-card-active .rcs-brand-svg[title="Visa"],
.rcs-usecase-item:hover .rcs-brand-svg[title="Visa"], .rcs-usecase-item.rcs-uc-active .rcs-brand-svg[title="Visa"] { fill: #00a0e9 !important; }
.rcs-feature-card:hover .rcs-brand-svg[title="Mastercard"], .rcs-feature-card.rcs-card-active .rcs-brand-svg[title="Mastercard"],
.rcs-usecase-item:hover .rcs-brand-svg[title="Mastercard"], .rcs-usecase-item.rcs-uc-active .rcs-brand-svg[title="Mastercard"] { fill: #ff5f00 !important; }
.rcs-feature-card:hover .rcs-brand-svg[title="Android"], .rcs-feature-card.rcs-card-active .rcs-brand-svg[title="Android"],
.rcs-usecase-item:hover .rcs-brand-svg[title="Android"], .rcs-usecase-item.rcs-uc-active .rcs-brand-svg[title="Android"] { fill: #3ddc84 !important; }
.rcs-feature-card:hover .rcs-brand-svg[title="Windows"], .rcs-feature-card.rcs-card-active .rcs-brand-svg[title="Windows"],
.rcs-usecase-item:hover .rcs-brand-svg[title="Windows"], .rcs-usecase-item.rcs-uc-active .rcs-brand-svg[title="Windows"] { fill: #00adef !important; }

/* Flying paper plane + envelope animations */
.wave-signal-pulse {
	position: absolute !important;
	width: 24px !important;
	height: 24px !important;
	background: transparent !important;
	box-shadow: none !important;
	z-index: 100 !important;
	pointer-events: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.flying-plane {
	color: #5433e1 !important;
	font-size: 16px !important;
	filter: drop-shadow(0 2px 4px rgba(84, 51, 225, 0.4)) !important;
}
.flying-envelope {
	color: #ec307c !important;
	font-size: 11px !important;
	position: absolute !important;
	bottom: 0px !important;
	right: 0px !important;
	filter: drop-shadow(0 2px 3px rgba(236, 48, 124, 0.4)) !important;
}

@keyframes waveFlowLeft {
	0% {
		opacity: 0;
		transform: translate(0, 0) scale(0.6) rotate(15deg);
	}
	15% {
		opacity: 1;
		transform: translate(calc(var(--travel-distance-x) * 0.15), calc(var(--travel-distance-y) * 0.15 - 15px)) scale(1) rotate(5deg);
	}
	50% {
		opacity: 1;
		transform: translate(calc(var(--travel-distance-x) * 0.5), calc(var(--travel-distance-y) * 0.5 + 25px)) scale(1.1) rotate(20deg);
	}
	80% {
		opacity: 1;
		transform: translate(calc(var(--travel-distance-x) * 0.8), calc(var(--travel-distance-y) * 0.8 - 10px)) scale(0.9) rotate(0deg);
	}
	100% {
		opacity: 0;
		transform: translate(var(--travel-distance-x), var(--travel-distance-y)) scale(0.5) rotate(-10deg);
	}
}

@keyframes waveFlowUp {
	0% {
		opacity: 0;
		transform: translate(0, 0) scale(0.6) rotate(-45deg);
	}
	15% {
		opacity: 1;
		transform: translate(calc(var(--travel-distance-x) * 0.15 - 15px), calc(var(--travel-distance-y) * 0.15)) scale(1) rotate(-50deg);
	}
	50% {
		opacity: 1;
		transform: translate(calc(var(--travel-distance-x) * 0.5 + 20px), calc(var(--travel-distance-y) * 0.5)) scale(1.1) rotate(-40deg);
	}
	80% {
		opacity: 1;
		transform: translate(calc(var(--travel-distance-x) * 0.8 - 10px), calc(var(--travel-distance-y) * 0.8)) scale(0.9) rotate(-45deg);
	}
	100% {
		opacity: 0;
		transform: translate(var(--travel-distance-x), var(--travel-distance-y)) scale(0.5) rotate(-35deg);
	}
}


/* Chat Reply Bubble Animation */
@keyframes bubblePop {
	0% {
		opacity: 0;
		transform: scale(0.8) translateY(10px);
	}
	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.phone-chat-user-reply-bubble {
	align-self: flex-end !important;
	background: #ec307c !important;
	color: white !important;
	padding: 8px 12px !important;
	border-radius: 12px 12px 0 12px !important;
	margin: 6px 0 !important;
	font-size: 11px !important;
	max-width: 80% !important;
	box-shadow: 0 2px 5px rgba(236, 48, 124, 0.2) !important;
	animation: bubblePop 0.3s ease forwards !important;
}






/* SVG Flight Motion Path and Trail animations */
.flight-svg-overlay {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	pointer-events: none !important;
	z-index: 100 !important;
	overflow: visible !important;
}

.trail-path-line {
	fill: none !important;
	stroke: rgba(84, 51, 225, 0.4) !important;
	stroke-width: 2 !important;
	stroke-dasharray: 4 4 !important;
	stroke-linecap: round !important;
	opacity: 0;
}

.flying-plane-g {
	offset-rotate: auto 90deg !important; /* Auto-rotates to face forward along Bezier curve path */
	transform-origin: center !important;
}

@keyframes fadeTrail {
	0% {
		opacity: 0;
	}
	15% {
		opacity: 1;
	}
	80% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes moveAlongPath {
	0% {
		offset-distance: 0%;
		opacity: 0;
		transform: scale(0.6);
	}
	15% {
		opacity: 1;
		transform: scale(1.1);
	}
	80% {
		opacity: 1;
		transform: scale(1);
	}
	100% {
		offset-distance: 100%;
		opacity: 0;
		transform: scale(0.5);
	}
}



/* Ambient Floating Background Dots */
.site-floating-dot {
	position: absolute !important;
	border-radius: 50% !important;
	pointer-events: none !important;
	z-index: 1 !important;
	opacity: 0.8 !important;
}

@keyframes siteDotFloat {
	0% {
		transform: translate(0, 0) scale(1);
	}
	25% {
		transform: translate(60px, -60px) scale(1.2);
	}
	50% {
		transform: translate(120px, 10px) scale(0.9);
	}
	75% {
		transform: translate(50px, 80px) scale(1.1);
	}
	100% {
		transform: translate(0, 0) scale(1);
	}
}