/*
Theme Name: Minh Lap Theme
Theme URI: https://minhlap.top
Author: Pham Van Minh
Author URI: https://minhlap.top
Description: Custom hybrid and block-based WordPress theme built for minhlap.top, following the Brand Bible and Experience Design System guidelines.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: minhlap
Tags: block-styles, custom-colors, full-site-editing, one-column, translation-ready
*/

/* Core CSS Variables - Liquid Glass Experience Design System Tokens */
:root {
	--color-primary: #0A2540;      /* Stripe Navy (Futuristic deep blue) */
	--color-secondary: #0D9488;    /* Brand Teal */
	--color-accent: #06B6D4;       /* Vibrant Cyan */
	--color-bg-dark: #031518;      /* Teal Black */
	--color-bg-light: #F8FAFC;     /* Alabaster */
	--color-surface-dark: #042327;  /* Deep Teal Card Surface */
	--color-border-dark: #07383E;   /* Deep Teal Border */
	--font-primary: 'Inter', sans-serif;
	--font-heading: 'Be Vietnam Pro', sans-serif;
	--max-width: 1440px;            /* Max width set to 1440px per spec */

	/* Liquid Glass Optics & Refraction Tokens */
	--liquid-glass-bg: rgba(255, 255, 255, 0.58);
	--liquid-glass-bg-hover: rgba(255, 255, 255, 0.78);
	--liquid-glass-border: rgba(255, 255, 255, 0.75);
	--liquid-glass-border-hover: rgba(255, 255, 255, 0.95);
	--liquid-glass-blur: blur(32px) saturate(180%);
	--liquid-glass-rim-shadow: inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 1px 0 rgba(255, 255, 255, 0.3);
	--liquid-glass-shadow: 0 20px 50px -12px rgba(10, 37, 64, 0.14), 0 8px 24px -8px rgba(6, 182, 212, 0.12), inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.95);
	--liquid-glass-shadow-hover: 0 30px 70px -15px rgba(13, 148, 136, 0.22), 0 0 30px rgba(6, 182, 212, 0.18), inset 0 2px 1.5px 0 rgba(255, 255, 255, 1);

	/* Aurora Fluid Gradient Colors */
	--aurora-blue: rgba(186, 230, 253, 0.6);     /* Soft Ice Blue */
	--aurora-teal: rgba(153, 246, 228, 0.6);     /* Soft Teal */
	--aurora-cyan: rgba(207, 250, 254, 0.6);     /* Soft Cyan */
	--aurora-mint: rgba(209, 250, 229, 0.55);    /* Soft Mint */
	--aurora-peach: rgba(254, 243, 199, 0.45);    /* Soft Gold/Peach */
	--aurora-violet: rgba(221, 214, 254, 0.5);    /* Soft Amethyst */

	/* Responsive Fluid Typography Tokens */
	--font-size-hero: clamp(2.5rem, 5vw + 1rem, 4rem);
	--font-size-h1: clamp(2rem, 3.5vw + 0.8rem, 3rem);
	--font-size-h2: clamp(1.6rem, 2.5vw + 0.6rem, 2.2rem);
	--font-size-h3: clamp(1.25rem, 1.8vw + 0.5rem, 1.6rem);
	--font-size-h4: clamp(1.1rem, 1.2vw + 0.4rem, 1.25rem);
	--font-size-body: clamp(0.95rem, 0.5vw + 0.85rem, 1.05rem);
	--font-size-caption: clamp(0.75rem, 0.3vw + 0.7rem, 0.85rem);
	--font-size-code: clamp(0.85rem, 0.3vw + 0.8rem, 0.95rem);

	/* Responsive Fluid Spacing Tokens */
	--space-4: clamp(0.2rem, 0.1vw + 0.15rem, 0.25rem);
	--space-8: clamp(0.4rem, 0.2vw + 0.35rem, 0.5rem);
	--space-12: clamp(0.6rem, 0.3vw + 0.5rem, 0.75rem);
	--space-16: clamp(0.8rem, 0.4vw + 0.7rem, 1rem);
	--space-20: clamp(1rem, 0.5vw + 0.85rem, 1.25rem);
	--space-24: clamp(1.2rem, 0.6vw + 1rem, 1.5rem);
	--space-32: clamp(1.5rem, 1vw + 1.2rem, 2rem);
	--space-40: clamp(1.8rem, 1.5vw + 1.5rem, 2.5rem);
	--space-48: clamp(2.2rem, 2vw + 1.8rem, 3rem);
	--space-64: clamp(2.8rem, 3vw + 2.2rem, 4rem);
	--space-80: clamp(3.5rem, 4vw + 2.8rem, 5rem);
	--space-96: clamp(4rem, 5vw + 3.2rem, 6rem);
}

/* Core Reset */
html, body {
	overflow-x: hidden !important;
	width: 100%;
	max-width: 100%;
}

*, *::before, *::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--font-primary);
	background-color: #FAF9F6;
	color: #1E293B;
	line-height: 1.6;
	min-height: 100vh;
	position: relative;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	color: var(--color-primary);
	margin-top: 0;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

a {
	color: var(--color-secondary);
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover {
	color: var(--color-accent);
}

/* Container */
.ml-container {
	width: 100%;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 clamp(1rem, 3vw, 2rem);
	padding-left: calc(clamp(1rem, 3vw, 2rem) + env(safe-area-inset-left));
	padding-right: calc(clamp(1rem, 3vw, 2rem) + env(safe-area-inset-right));
}

/* Aurora Background Animation */
.ml-aurora-bg {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -10;
	overflow: hidden;
	pointer-events: none;
	background: radial-gradient(circle at 50% 50%, #FAF9F6 0%, #F1F5F9 100%);
}

.ml-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(100px);
	mix-blend-mode: multiply;
	opacity: 0.85;
	pointer-events: none;
	will-change: transform;
}

.ml-blob-1 {
	top: -10%;
	left: -10%;
	width: 50vw;
	height: 50vw;
	background: radial-gradient(circle, var(--aurora-blue) 0%, rgba(255,255,255,0) 70%);
	animation: float-aurora-1 25s infinite alternate ease-in-out;
}

.ml-blob-2 {
	bottom: -10%;
	right: -10%;
	width: 60vw;
	height: 60vw;
	background: radial-gradient(circle, var(--aurora-cyan) 0%, rgba(255,255,255,0) 70%);
	animation: float-aurora-2 30s infinite alternate ease-in-out;
}

.ml-blob-3 {
	top: 40%;
	right: 15%;
	width: 40vw;
	height: 40vw;
	background: radial-gradient(circle, var(--aurora-teal) 0%, rgba(255,255,255,0) 70%);
	animation: float-aurora-3 22s infinite alternate ease-in-out;
}

.ml-blob-4 {
	bottom: 20%;
	left: 10%;
	width: 45vw;
	height: 45vw;
	background: radial-gradient(circle, var(--aurora-peach) 0%, rgba(255,255,255,0) 70%);
	animation: float-aurora-4 28s infinite alternate ease-in-out;
}

@keyframes float-aurora-1 {
	0% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(10vw, 5vh) scale(1.1); }
	100% { transform: translate(-5vw, -8vh) scale(0.9); }
}

@keyframes float-aurora-2 {
	0% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(-8vw, -10vh) scale(0.9); }
	100% { transform: translate(6vw, 4vh) scale(1.15); }
}

@keyframes float-aurora-3 {
	0% { transform: translate(0, 0) scale(0.9); }
	50% { transform: translate(5vw, -5vh) scale(1.1); }
	100% { transform: translate(-10vw, 8vh) scale(1); }
}

@keyframes float-aurora-4 {
	0% { transform: translate(0, 0) scale(1.1); }
	50% { transform: translate(-5vw, 6vh) scale(0.95); }
	100% { transform: translate(8vw, -4vh) scale(1.05); }
}

/* Floating Liquid Glass Pill Header */
.ml-header {
	position: sticky;
	top: 1.5rem;
	z-index: 2000;
	max-width: min(var(--max-width), calc(100vw - 3rem));
	margin: 1.5rem auto;
	background-color: var(--liquid-glass-bg);
	backdrop-filter: var(--liquid-glass-blur);
	-webkit-backdrop-filter: var(--liquid-glass-blur);
	border: 1px solid var(--liquid-glass-border);
	border-radius: 99px;
	padding: 0.75rem 2rem;
	box-shadow: 
		0 20px 45px -12px rgba(10, 37, 64, 0.14),
		0 8px 20px -8px rgba(6, 182, 212, 0.1),
		var(--liquid-glass-rim-shadow);
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
	overflow: visible !important; /* Allow dropdown menus to float outside header container */
}

.ml-header::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
	transition: left 0.8s ease;
	pointer-events: none;
	border-radius: 99px;
}

.ml-header:hover::before {
	left: 100%;
}

.ml-header:hover {
	background-color: var(--liquid-glass-bg-hover);
	border-color: var(--liquid-glass-border-hover);
	box-shadow: 
		0 25px 55px -10px rgba(10, 37, 64, 0.18),
		0 0 35px rgba(6, 182, 212, 0.15),
		inset 0 2px 1.5px 0 rgba(255, 255, 255, 1);
}

/* ==========================================
   Header Dropdown Submenu Navigation & Liquid Glass Panels
   ========================================== */
.ml-nav-menu {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.ml-nav-item {
	position: relative;
}

.ml-nav-link {
	color: var(--color-primary);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
	padding: 0.5rem 0.75rem;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	transition: all 0.25s ease;
	cursor: pointer;
}

.ml-nav-link:hover,
.ml-has-dropdown:hover .ml-nav-link {
	color: var(--color-secondary);
	background: rgba(13, 148, 136, 0.08);
}

.ml-nav-link .ml-arrow {
	font-size: 0.65rem;
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
	opacity: 0.7;
}

.ml-has-dropdown:hover .ml-arrow {
	transform: rotate(180deg);
	opacity: 1;
	color: var(--color-secondary);
}

/* Dropdown Panel Base */
.ml-dropdown-panel {
	position: absolute;
	top: calc(100% + 14px);
	left: 50%;
	transform: translateX(-50%) translateY(10px) scale(0.96);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	background: rgba(255, 255, 255, 0.96) !important;
	border: 1px solid rgba(255, 255, 255, 0.9) !important;
	box-shadow: 0 25px 60px -12px rgba(10, 37, 64, 0.22), 0 0 35px rgba(13, 148, 136, 0.12), inset 0 1.5px 1px 0 rgba(255, 255, 255, 1) !important;
	backdrop-filter: blur(40px) saturate(200%) !important;
	-webkit-backdrop-filter: blur(40px) saturate(200%) !important;
	border-radius: 20px;
	padding: 1.35rem;
	z-index: 9999 !important;
	transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
	min-width: 280px;
	max-width: calc(100vw - 2rem);
	box-sizing: border-box;
}

/* Invisible Hover Bridge to prevent dropdown closing when moving cursor */
.ml-has-dropdown::after {
	content: "";
	position: absolute;
	top: 100%;
	left: -10px;
	right: -10px;
	height: 24px;
}

.ml-has-dropdown:hover .ml-dropdown-panel {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	transform: translateX(-50%) translateY(0) scale(1) !important;
}

/* Dropdown Grid (Multi-column) */
.ml-dropdown-grid {
	display: grid;
	grid-template-columns: repeat(2, 230px);
	gap: 1.25rem;
}

.ml-dropdown-col {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.ml-dropdown-col h4 {
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #64748B;
	margin: 0 0 0.5rem 0;
	padding-bottom: 0.35rem;
	border-bottom: 1px solid rgba(13, 148, 136, 0.12);
}

.ml-dropdown-panel a {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 0.6rem 0.8rem;
	border-radius: 12px;
	text-decoration: none !important;
	transition: all 0.25s ease;
	background: transparent;
}

.ml-dropdown-panel a:hover {
	background: rgba(13, 148, 136, 0.1);
	transform: translateX(4px);
}

.ml-dropdown-panel a strong {
	font-size: 0.9rem;
	color: var(--color-primary);
	font-weight: 700;
	transition: color 0.2s ease;
}

.ml-dropdown-panel a:hover strong {
	color: var(--color-secondary);
}

.ml-dropdown-panel a span {
	font-size: 0.8rem;
	color: #64748B;
	line-height: 1.4;
}

/* Single Column Dropdown */
.ml-dropdown-single-col {
	min-width: 260px;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.ml-header a {
	color: #334155;
	transition: all 0.2s ease;
}

.ml-header a:hover {
	color: var(--color-secondary);
}

/* Logo enhancement */
.ml-logo img {
	filter: drop-shadow(0 2px 6px rgba(13, 148, 136, 0.15));
}

/* Language Switcher Styling */
.ml-lang-switcher {
	border-left: 1px solid rgba(226, 232, 240, 0.8);
}

.ml-lang-switcher span {
	color: #CBD5E1;
}

.ml-lang-switcher a {
	color: #94A3B8 !important;
}

.ml-lang-switcher a.active {
	color: var(--color-secondary) !important;
}

.ml-lang-switcher a:hover {
	color: var(--color-secondary) !important;
}

/* Large Crystal Liquid Glass Cards */
.ml-glass-card {
	background: var(--liquid-glass-bg);
	backdrop-filter: var(--liquid-glass-blur);
	-webkit-backdrop-filter: var(--liquid-glass-blur);
	border: 1px solid var(--liquid-glass-border);
	border-radius: 24px;
	padding: 3rem;
	box-shadow: 
		0 35px 75px -15px rgba(10, 37, 64, 0.16),
		0 12px 30px -10px rgba(6, 182, 212, 0.12),
		var(--liquid-glass-rim-shadow);
	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;
	position: relative;
	overflow: hidden;
}

.ml-glass-card::before {
	content: "";
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.4) 0%, transparent 60%);
	pointer-events: none;
	opacity: 0.6;
}

.ml-glass-card:hover {
	background: var(--liquid-glass-bg-hover);
	border-color: var(--liquid-glass-border-hover);
	box-shadow: 
		0 45px 90px -20px rgba(10, 37, 64, 0.2),
		0 0 40px rgba(6, 182, 212, 0.18),
		inset 0 2px 1.5px 0 rgba(255, 255, 255, 1);
}

/* Grid Liquid Glass Cards */
.ml-card-item {
	background: var(--liquid-glass-bg);
	backdrop-filter: var(--liquid-glass-blur);
	-webkit-backdrop-filter: var(--liquid-glass-blur);
	border: 1px solid var(--liquid-glass-border);
	border-radius: 22px;
	padding: 2rem;
	box-shadow: var(--liquid-glass-shadow);
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	overflow: hidden;
}

.ml-card-item::before {
	content: "";
	position: absolute;
	top: 0;
	left: -150%;
	width: 100%;
	height: 100%;
	background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70%);
	transition: left 0.75s ease-in-out;
	pointer-events: none;
}

.ml-card-item:hover::before {
	left: 150%;
}

.ml-card-item:hover {
	transform: translateY(-8px) scale(1.015);
	background: var(--liquid-glass-bg-hover);
	border-color: rgba(255, 255, 255, 0.95);
	box-shadow: var(--liquid-glass-shadow-hover);
}

/* Translucent Liquid Pill Buttons */
.ml-btn-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.75rem;
	min-height: 44px;
	min-width: 44px;
	border-radius: 99px;
	font-weight: 600;
	font-size: 0.9rem;
	background: rgba(255, 255, 255, 0.75);
	border: 1px solid rgba(255, 255, 255, 0.85);
	color: var(--color-primary);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	box-shadow: 
		0 6px 18px rgba(10, 37, 64, 0.08),
		inset 0 1.5px 0 rgba(255, 255, 255, 0.95);
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.ml-btn-pill:hover,
.ml-btn-pill:hover *,
.ml-btn-pill:hover span,
.ml-btn-pill:hover i,
.ml-btn-pill:hover svg,
.ml-btn-pill:hover a {
	background: var(--color-secondary) !important;
	border-color: var(--color-secondary) !important;
	color: #ffffff !important;
	stroke: #ffffff !important;
	transform: translateY(-3px) scale(1.02);
	box-shadow: 
		0 12px 25px rgba(13, 148, 136, 0.35),
		0 0 15px rgba(6, 182, 212, 0.25);
}

/* Green & Indigo custom background pill button hover overrides */
.ml-btn-pill[style*="#10B981"]:hover,
.ml-btn-pill[style*="#10b981"]:hover {
	background: #059669 !important;
	border-color: #059669 !important;
	color: #ffffff !important;
}

.ml-btn-pill[style*="#6366F1"]:hover,
.ml-btn-pill[style*="#6366f1"]:hover {
	background: #4F46E5 !important;
	border-color: #4F46E5 !important;
	color: #ffffff !important;
}

/* Glassmorphic Pagination */
.ml-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.75rem;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(13, 148, 136, 0.2);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
	color: #334155;
	font-weight: 600;
	font-size: 0.9rem;
	margin: 0 0.25rem;
	transition: all 0.3s ease;
	text-decoration: none;
	white-space: nowrap !important;
}

.ml-pagination .page-numbers.prev,
.ml-pagination .page-numbers.next,
.ml-pagination a.prev,
.ml-pagination a.next,
.nav-links .prev,
.nav-links .next,
.navigation .prev,
.navigation .next {
	width: auto !important;
	min-width: 5.5rem !important;
	padding: 0 1.25rem !important;
	border-radius: 99px !important;
	white-space: nowrap !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.ml-pagination .page-numbers.current,
.ml-pagination .page-numbers:hover {
	background: var(--color-secondary);
	color: #FFFFFF !important;
	border-color: var(--color-secondary);
	box-shadow: 0 8px 20px rgba(13, 148, 136, 0.3);
	transform: translateY(-2px);
}

/* Liquid Glass Footer */
.ml-footer {
	background-color: var(--liquid-glass-bg);
	backdrop-filter: var(--liquid-glass-blur);
	-webkit-backdrop-filter: var(--liquid-glass-blur);
	color: #64748B;
	padding: 2.5rem 0;
	margin-top: 5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.4);
	box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.02);
}

.ml-footer a {
	color: #475569;
	transition: color 0.2s ease;
}

.ml-footer a:hover {
	color: var(--color-secondary);
}

/* Mega Menu Navigation styles */
.ml-nav-menu {
	display: flex;
	gap: 1.8rem;
	font-weight: 600;
	align-items: center;
}
.ml-nav-item {
	position: relative;
}

.ml-nav-link {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.5rem 0;
	cursor: pointer;
}

/* Mobile Hamburger Button & Drawer */
.ml-mobile-menu-trigger {
	display: none;
	background: rgba(13, 148, 136, 0.08);
	border: 1px solid rgba(13, 148, 136, 0.15);
	font-size: 1.3rem;
	color: var(--color-primary);
	cursor: pointer;
	padding: 0.5rem 0.75rem;
	border-radius: 10px;
	transition: all 0.2s ease;
	line-height: 1;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
}
.ml-mobile-menu-trigger:hover {
	background: rgba(13, 148, 136, 0.15);
	color: var(--color-secondary);
}

/* Mobile Drawer Styles */
.ml-mobile-drawer {
	position: fixed;
	top: 0;
	right: -320px;
	width: 320px;
	max-width: 85vw;
	height: 100vh;
	background: #ffffff;
	box-shadow: -15px 0 40px rgba(0, 0, 0, 0.12);
	z-index: 10000;
	transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.ml-mobile-drawer.active {
	right: 0;
}
.ml-mobile-drawer-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.5rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.ml-mobile-drawer-close {
	background: transparent;
	border: none;
	font-size: 2rem;
	color: #64748B;
	cursor: pointer;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	line-height: 1;
}
.ml-mobile-drawer-body {
	flex: 1;
	overflow-y: auto;
	padding: 2rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.ml-mobile-link, .ml-mobile-submenu-trigger {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--color-primary);
	text-decoration: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem 0;
	cursor: pointer;
	border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}
.ml-mobile-submenu {
	display: none;
	flex-direction: column;
	gap: 0.8rem;
	padding: 0.5rem 0 0.5rem 1rem;
	margin-top: 0.25rem;
}
.ml-mobile-submenu.active {
	display: flex;
}
.ml-mobile-submenu a {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--color-secondary);
	text-decoration: none;
	padding: 0.4rem 0;
	display: block;
}
/* Mobile Submenu Smooth Transition */
.ml-mobile-submenu {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	padding-left: 1rem;
	transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, margin-top 0.3s ease;
}
.ml-mobile-submenu.active {
	max-height: 380px;
	opacity: 1;
	margin-top: 0.5rem;
}

/* Modal Spring Scale Reveal Animations */
.ml-search-modal {
	transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s !important;
	visibility: hidden;
}
.ml-search-modal.active {
	opacity: 1 !important;
	visibility: visible !important;
}
.ml-search-modal-content {
	transform: scale(0.92) translateY(24px);
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
	opacity: 0;
}
.ml-search-modal.active .ml-search-modal-content {
	transform: scale(1) translateY(0);
	opacity: 1;
}

/* AI Copilot Chatbot Window Smooth Scale Reveal */
.ml-ai-chat-window {
	opacity: 0;
	visibility: hidden;
	transform: scale(0.88) translateY(25px);
	transform-origin: bottom right;
	transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s;
}
.ml-ai-chat-window.active {
	opacity: 1 !important;
	visibility: visible !important;
	transform: scale(1) translateY(0);
}

/* Mobile Drawer Overlay */
.ml-mobile-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(10, 37, 64, 0.4);
	backdrop-filter: blur(4px);
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
}
.ml-mobile-overlay.active {
	opacity: 1;
	visibility: visible;
}
body.ml-menu-open {
	overflow: hidden;
}

/* Responsive Visibility Toggles */
@media (max-width: 1023px) {
	.ml-nav-menu {
		display: none;
	}
	.ml-mobile-menu-trigger {
		display: inline-flex;
	}
}

.ml-arrow {
	font-size: 0.65rem;
	transition: transform 0.3s ease;
	opacity: 0.7;
}

.ml-nav-item:hover .ml-arrow {
	transform: rotate(180deg);
	color: var(--color-secondary);
}

/* Liquid Glass Dropdown Panel with Smooth Spring Reveal */
.ml-dropdown-panel {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(14px) scale(0.96);
	background: var(--liquid-glass-bg);
	backdrop-filter: var(--liquid-glass-blur);
	-webkit-backdrop-filter: var(--liquid-glass-blur);
	border: 1px solid var(--liquid-glass-border);
	border-radius: 20px;
	padding: 1.5rem;
	box-shadow: 
		0 35px 70px -15px rgba(10, 37, 64, 0.2),
		0 15px 30px -10px rgba(6, 182, 212, 0.12),
		var(--liquid-glass-rim-shadow);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s;
	z-index: 2000;
	min-width: 450px;
	max-width: calc(100vw - 2rem);
	box-sizing: border-box;
	transform-origin: top center;
}

.ml-nav-item:hover .ml-dropdown-panel {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0) scale(1);
}

/* Single column dropdown modifier */
.ml-dropdown-single-col {
	min-width: 280px;
}

.ml-dropdown-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
}

.ml-dropdown-col h4 {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #475569;
	margin: 0 0 0.75rem 0;
	border-bottom: 1px solid rgba(13, 148, 136, 0.15);
	padding-bottom: 0.25rem;
}

.ml-dropdown-panel a {
	display: block;
	padding: 0.75rem 1rem;
	border-radius: 12px;
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	text-decoration: none !important;
	color: var(--color-primary) !important;
	transform: translateX(0);
}

.ml-dropdown-panel a:hover {
	background: rgba(13, 148, 136, 0.08) !important;
	transform: translateX(5px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.ml-dropdown-panel a strong {
	display: block;
	font-size: 0.95rem;
	color: var(--color-primary);
	margin-bottom: 0.2rem;
}

.ml-dropdown-panel a span {
	display: block;
	font-size: 0.75rem;
	color: #475569;
	font-weight: 400;
}

/* Trending & Search suggestion styles */
.ml-trending-chip {
	font-size: 0.85rem;
	background: rgba(255, 255, 255, 0.6);
	border: 1px solid rgba(13, 148, 136, 0.15);
	color: #475569;
	padding: 0.3rem 0.9rem;
	border-radius: 99px;
	text-decoration: none;
	transition: all 0.2s ease;
	font-weight: 500;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.01);
}

.ml-trending-chip:hover {
	background: var(--color-secondary);
	border-color: var(--color-secondary);
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(13, 148, 136, 0.15);
}

/* Autocomplete Box */
.ml-search-suggestions-box {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 0.5rem;
	background: rgba(255, 255, 255, 0.98);
	backdrop-filter: blur(35px) saturate(130%);
	-webkit-backdrop-filter: blur(35px) saturate(130%);
	border: 1px solid rgba(255, 255, 255, 0.75);
	border-radius: 18px;
	box-shadow: 0 20px 40px rgba(10, 37, 64, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8);
	opacity: 0;
	visibility: hidden;
	transition: all 0.2s ease;
	z-index: 999;
	overflow: hidden;
	max-height: 400px;
	overflow-y: auto;
}

.ml-search-suggestions-box.active {
	opacity: 1;
	visibility: visible;
}

.ml-suggestion-item {
	display: block;
	padding: 0.85rem 1.25rem;
	border-bottom: 1px solid rgba(13, 148, 136, 0.05);
	text-decoration: none;
	text-align: left;
	transition: background 0.2s ease;
}

.ml-suggestion-item:last-child {
	border-bottom: none;
}

.ml-suggestion-item:hover {
	background: rgba(13, 148, 136, 0.06);
}

.ml-suggestion-title {
	font-weight: 600;
	color: var(--color-primary);
	font-size: 0.95rem;
}

.ml-suggestion-badge {
	font-size: 0.7rem;
	font-weight: 700;
	padding: 0.2rem 0.5rem;
	border-radius: 6px;
	text-transform: uppercase;
}

/* Badges for different post types */
.ml-suggestion-badge.post { background: rgba(13, 148, 136, 0.1); color: var(--color-secondary); }
.ml-suggestion-badge.prompt { background: rgba(6, 182, 212, 0.1); color: var(--color-accent); }
.ml-suggestion-badge.workflow { background: rgba(168, 85, 247, 0.1); color: #A855F7; }
.ml-suggestion-badge.tool { background: rgba(245, 158, 11, 0.1); color: #F59E0B; }
.ml-suggestion-badge.resource { background: rgba(59, 130, 246, 0.1); color: #3B82F6; }
.ml-suggestion-badge.case_study { background: rgba(236, 72, 153, 0.1); color: #EC4899; }

.ml-suggestion-excerpt {
	font-size: 0.8rem;
	color: #64748B;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Difficulty badges */
.ml-diff-badge {
	font-size: 0.75rem;
	font-weight: 700;
	padding: 0.2rem 0.65rem;
	border-radius: 99px;
	text-transform: uppercase;
}

.ml-diff-badge.beginner {
	background: rgba(16, 185, 129, 0.08);
	color: #10B981;
	border: 1px solid rgba(16, 185, 129, 0.15);
}

.ml-diff-badge.intermediate {
	background: rgba(245, 158, 11, 0.08);
	color: #D97706;
	border: 1px solid rgba(245, 158, 11, 0.15);
}

.ml-diff-badge.advanced {
	background: rgba(239, 68, 68, 0.08);
	color: #EF4444;
	border: 1px solid rgba(239, 68, 68, 0.15);
}

/* Liquid Glass CPT Cards */
.ml-prompt-card, .ml-workflow-card, .ml-tool-card, .ml-article-card {
	background: var(--liquid-glass-bg) !important;
	backdrop-filter: var(--liquid-glass-blur) !important;
	-webkit-backdrop-filter: var(--liquid-glass-blur) !important;
	border: 1px solid var(--liquid-glass-border) !important;
	border-radius: 22px !important;
	box-shadow: var(--liquid-glass-shadow) !important;
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
	position: relative;
	overflow: hidden;
}

.ml-prompt-card::before, .ml-workflow-card::before, .ml-tool-card::before, .ml-article-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: -150%;
	width: 100%;
	height: 100%;
	background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70%);
	transition: left 0.75s ease-in-out;
	pointer-events: none;
}

.ml-prompt-card:hover::before, .ml-workflow-card:hover::before, .ml-tool-card:hover::before, .ml-article-card:hover::before {
	left: 150%;
}

.ml-prompt-card:hover, .ml-workflow-card:hover, .ml-tool-card:hover, .ml-article-card:hover {
	transform: translateY(-8px) scale(1.015) !important;
	background: var(--liquid-glass-bg-hover) !important;
	border-color: rgba(255, 255, 255, 0.95) !important;
	box-shadow: var(--liquid-glass-shadow-hover) !important;
}

/* Explore Layout Responsive Styles */
@media (max-width: 900px) {
	.ml-explore-layout {
		grid-template-columns: 1fr !important;
	}
	.ml-explore-sidebar {
		position: static !important;
		max-height: none !important;
		margin-bottom: 2rem;
	}
	.ml-single-layout {
		grid-template-columns: 1fr !important;
		gap: 2rem !important;
	}
}

/* Roadmap Timeline & Path Node Hover States */
.ml-path-node {
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
	cursor: pointer;
}
.ml-path-node:hover {
	transform: translateY(-6px) scale(1.03) !important;
	background: #ffffff !important;
	border-color: var(--color-secondary) !important;
	box-shadow: 0 15px 35px rgba(13, 148, 136, 0.15) !important;
}
.ml-path-node:hover .ml-icon-box-duotone {
	transform: scale(1.1) rotate(5deg);
}

.ml-hero-usps {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 0.6rem !important;
	margin-bottom: 2rem !important;
	overflow-x: auto !important;
	max-width: 100% !important;
	padding: 0.75rem 0.5rem !important; /* Generous top & bottom padding prevents border clipping on hover */
	scroll-behavior: smooth !important;
	-webkit-overflow-scrolling: touch !important;
}

.ml-usp-tag {
	transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
	cursor: pointer !important;
	position: relative !important;
	z-index: 1 !important;
	box-sizing: border-box !important;
}

.ml-usp-tag:hover {
	transform: translateY(-4px) scale(1.05) !important;
	z-index: 10 !important;
	box-shadow: 
		0 12px 24px -4px rgba(13, 148, 136, 0.25),
		0 0 15px rgba(6, 182, 212, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

.ml-roadmap-node-card:hover {
	transform: translateX(5px);
	border-color: rgba(13, 148, 136, 0.25) !important;
	box-shadow: 0 15px 30px rgba(13, 148, 136, 0.05) !important;
}
.ml-roadmap-link {
	transition: all 0.2s ease;
}
.ml-roadmap-link:hover {
	background: rgba(13, 148, 136, 0.05) !important;
	border-color: rgba(13, 148, 136, 0.2) !important;
	color: var(--color-secondary) !important;
	padding-left: 1.25rem !important;
}

/* Floating AI Assistant Widgets */
.ml-ai-floating-bubble {
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--color-secondary), #10B981);
	box-shadow: 0 10px 25px rgba(13, 148, 136, 0.3);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	cursor: pointer;
	z-index: 9999;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	border: none;
}
.ml-ai-floating-bubble:hover {
	transform: scale(1.1) rotate(15deg);
	box-shadow: 0 12px 30px rgba(13, 148, 136, 0.4);
}
.ml-ai-chat-window {
	position: fixed;
	bottom: 96px;
	right: 24px;
	width: 360px;
	height: 480px;
	border-radius: 20px;
	display: none;
	flex-direction: column;
	z-index: 9999;
	overflow: hidden;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.5);
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(20px) saturate(120%);
	-webkit-backdrop-filter: blur(20px) saturate(120%);
}
.ml-ai-chat-header {
	background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
	color: #fff;
	padding: 1rem 1.25rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.ml-ai-chat-body {
	flex: 1;
	padding: 1.25rem;
	overflow-y: auto;
	background: rgba(248, 250, 252, 0.9);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.ml-ai-message {
	max-width: 80%;
	padding: 0.6rem 0.9rem;
	border-radius: 12px;
	font-size: 0.88rem;
	line-height: 1.4;
}
.ml-ai-message.bot {
	background: #fff;
	color: #1e293b;
	align-self: flex-start;
	box-shadow: 0 2px 5px rgba(0,0,0,0.03);
	border: 1px solid rgba(0,0,0,0.05);
}
.ml-ai-message.user {
	background: var(--color-secondary);
	color: #fff;
	align-self: flex-end;
}
.ml-ai-chat-input-area {
	display: flex;
	padding: 0.75rem;
	background: #fff;
	border-top: 1px solid rgba(0,0,0,0.05);
	gap: 0.5rem;
}
.ml-ai-chat-input-area input {
	flex: 1;
	border: 1px solid #e2e8f0;
	border-radius: 99px;
	padding: 0.5rem 1rem;
	font-size: 0.88rem;
	outline: none;
}
.ml-ai-chat-input-area button {
	background: var(--color-secondary);
	color: #fff;
	border: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Recommendations Equal Height Cards & Alignments */
.ml-rec-column {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.ml-rec-column .ml-card-item {
	flex: 1;
}

/* Responsive Media, YouTube, Video Embeds */
.ml-responsive-media {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
	height: 0;
	overflow: hidden;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.4);
}
.ml-responsive-media iframe,
.ml-responsive-media video,
.ml-responsive-media embed,
.ml-responsive-media object {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Responsive Table Wrapper */
.ml-table-wrapper {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: var(--space-24);
	border-radius: 12px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}
.ml-table-wrapper table {
	min-width: 600px; /* Force scroll on narrow viewports if table is wide */
	width: 100%;
	border-collapse: collapse;
}

/* Fluid Responsive Grid Helper */
.ml-responsive-grid {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: var(--space-24);
}
@media (min-width: 768px) {
	.ml-responsive-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1024px) {
	.ml-responsive-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (min-width: 1536px) {
	.ml-responsive-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Prompt Card Single Full-Width CTA Button */
.ml-btn-view-prompt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100% !important;
	padding: 0.65rem 1.25rem;
	background: linear-gradient(135deg, rgba(13, 148, 136, 0.1) 0%, rgba(6, 182, 212, 0.1) 100%);
	border: 1px solid rgba(13, 148, 136, 0.25);
	color: #0F766E !important;
	font-weight: 700;
	font-size: 0.9rem;
	border-radius: 12px;
	text-decoration: none !important;
	transition: all 0.3s ease;
	box-shadow: 0 4px 12px rgba(13, 148, 136, 0.06);
}

.ml-btn-view-prompt:hover {
	background: linear-gradient(135deg, #0D9488 0%, #06B6D4 100%) !important;
	color: #FFFFFF !important;
	border-color: transparent !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px -4px rgba(13, 148, 136, 0.35) !important;
}

.ml-btn-view-prompt:hover i {
	transform: scale(1.15) rotate(10deg);
	transition: transform 0.3s ease;
}

/* Code block scrolling & wrapping */
pre, code {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
pre {
	padding: var(--space-16);
	background: #1e293b;
	color: #f8fafc;
	border-radius: 12px;
	margin-bottom: var(--space-20);
}

/* Responsive Founder Grid */
.ml-founder-grid {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 2.5rem !important;
	align-items: center;
}
@media (min-width: 1024px) {
	.ml-founder-grid {
		grid-template-columns: 1.2fr 0.8fr !important;
		gap: 4rem !important;
	}
}

/* Contact Form Responsive Grid */
#ml-ajax-contact-form {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 1.5rem !important;
}
@media (min-width: 768px) {
	#ml-ajax-contact-form {
		grid-template-columns: 1fr 1fr !important;
	}
}
@media (max-width: 767px) {
	#ml-ajax-contact-form > div {
		grid-column: span 1 !important;
	}
}

/* Card Elements Horizontal Alignment Rules */
.ml-card-item {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	justify-content: space-between !important;
}

.ml-card-item > div {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
}

/* Badge Row Alignment */
.ml-card-badges {
	height: 2.2rem !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	margin-bottom: 1rem !important;
}

/* Thumbnail Height Alignment */
.ml-card-thumb,
.ml-card-thumbnail {
	height: 160px !important;
	margin-bottom: 1rem !important;
	flex-shrink: 0 !important;
}

/* Title Height Alignment */
.ml-card-item h3 {
	font-size: 1.3rem !important;
	line-height: 1.4 !important;
	margin-bottom: 0.75rem !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 3 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	height: 5.46rem !important; /* 3 lines * 1.3rem * 1.4 */
	flex-shrink: 0 !important;
}

/* Excerpt Height Alignment */
.ml-card-item p {
	font-size: 0.95rem !important;
	line-height: 1.6 !important;
	margin-bottom: 1.25rem !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 3 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	height: 4.56rem !important; /* 3 lines * 0.95rem * 1.6 */
	flex-shrink: 0 !important;
}

/* Specs/Meta Row Alignment */
.ml-article-specs,
.ml-workflow-specs,
.ml-prompt-specs,
.ml-tool-specs {
	height: 2.2rem !important;
	display: flex !important;
	align-items: center !important;
	margin-bottom: 1.5rem !important;
	margin-top: auto !important; /* Push specs and footer to bottom */
	flex-shrink: 0 !important;
}

/* Hide Workflow Nodes display in recommendations grid to keep height identical */
.ml-recommendations-grid .ml-workflow-nodes {
	display: none !important;
}

/* Footer CTAs Alignment & Prompt Action Buttons */
.ml-card-item .ml-card-meta {
	margin-top: auto !important;
	min-height: 52px !important;
	height: auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 0.6rem !important;
	flex-shrink: 0 !important;
	border-top: 1px solid rgba(13, 148, 136, 0.12) !important;
	padding-top: 0.85rem !important;
	padding-bottom: 0.25rem !important;
}

.ml-btn-view-prompt,
.ml-btn-copy-prompt {
	flex: 1 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.45rem !important;
	height: 40px !important;
	padding: 0 0.85rem !important;
	font-size: 0.82rem !important;
	font-weight: 700 !important;
	border-radius: 99px !important;
	cursor: pointer !important;
	transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
	text-decoration: none !important;
	box-sizing: border-box !important;
	white-space: nowrap !important;
}

.ml-btn-view-prompt {
	background: rgba(13, 148, 136, 0.08) !important;
	border: 1px solid rgba(13, 148, 136, 0.2) !important;
	color: var(--color-secondary) !important;
}

.ml-btn-view-prompt:hover {
	background: rgba(13, 148, 136, 0.16) !important;
	border-color: var(--color-secondary) !important;
	color: #0F766E !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 4px 12px rgba(13, 148, 136, 0.15) !important;
}

.ml-btn-view-prompt svg,
.ml-btn-view-prompt i {
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease !important;
}

.ml-btn-view-prompt:hover svg,
.ml-btn-view-prompt:hover i {
	transform: scale(1.25) rotate(-15deg) !important;
	color: var(--color-accent) !important;
}

.ml-btn-copy-prompt {
	background: linear-gradient(135deg, #0D9488 0%, #06B6D4 100%) !important;
	border: none !important;
	color: #ffffff !important;
	box-shadow: 0 4px 12px rgba(13, 148, 136, 0.25) !important;
}

.ml-btn-copy-prompt:hover {
	transform: translateY(-2px) scale(1.02) !important;
	box-shadow: 0 6px 18px rgba(13, 148, 136, 0.35) !important;
}

.ml-btn-copy-prompt svg,
.ml-btn-copy-prompt i {
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.ml-btn-copy-prompt.copied {
	background: linear-gradient(135deg, #059669 0%, #10B981 100%) !important;
	transform: scale(1.04) !important;
	box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4) !important;
}

/* ==========================================
   AI Search Command Center & Modal Liquid Glass Styles
   ========================================== */
:root {
	--search-modal-bg: rgba(255, 255, 255, 0.68);
	--search-modal-border: rgba(255, 255, 255, 0.85);
	--search-modal-text: #1E293B;
	--search-modal-text-secondary: #64748B;
	--search-modal-input-bg: rgba(255, 255, 255, 0.75);
	--search-modal-input-border: rgba(255, 255, 255, 0.9);
	--search-modal-shadow: 0 35px 90px -15px rgba(10, 37, 64, 0.22), 0 0 30px rgba(6, 182, 212, 0.12), inset 0 2px 1.5px 0 rgba(255, 255, 255, 1);
	--search-modal-glass-blur: 35px;
	--search-modal-divider: rgba(13, 148, 136, 0.12);
	--search-modal-chip-bg: rgba(13, 148, 136, 0.08);
	--search-modal-chip-text: var(--color-secondary);
}

/* System Dark Mode Auto-detection */
@media (prefers-color-scheme: dark) {
	:root {
		--search-modal-bg: rgba(15, 23, 42, 0.88);
		--search-modal-border: rgba(255, 255, 255, 0.1);
		--search-modal-text: #F8FAFC;
		--search-modal-text-secondary: #94A3B8;
		--search-modal-input-bg: #0F172A;
		--search-modal-input-border: rgba(255, 255, 255, 0.15);
		--search-modal-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
		--search-modal-chip-bg: rgba(255, 255, 255, 0.08);
		--search-modal-chip-text: #38BDF8;
	}
}

/* Manual Dark overrides */
.ml-search-modal-dark {
	--search-modal-bg: rgba(15, 23, 42, 0.88) !important;
	--search-modal-border: rgba(255, 255, 255, 0.1) !important;
	--search-modal-text: #F8FAFC !important;
	--search-modal-text-secondary: #94A3B8 !important;
	--search-modal-input-bg: #0F172A !important;
	--search-modal-input-border: rgba(255, 255, 255, 0.15) !important;
	--search-modal-shadow: 0 24px 80px rgba(0, 0, 0, 0.5) !important;
	--search-modal-chip-bg: rgba(255, 255, 255, 0.08) !important;
	--search-modal-chip-text: #38BDF8 !important;
}

/* Manual Light overrides */
.ml-search-modal-light {
	--search-modal-bg: rgba(255, 255, 255, 0.88) !important;
	--search-modal-border: rgba(255, 255, 255, 0.35) !important;
	--search-modal-text: #1E293B !important;
	--search-modal-text-secondary: #64748B !important;
	--search-modal-input-bg: #FFFFFF !important;
	--search-modal-input-border: rgba(0, 0, 0, 0.1) !important;
	--search-modal-shadow: 0 24px 80px rgba(0, 0, 0, 0.18) !important;
	--search-modal-chip-bg: rgba(13, 148, 136, 0.06) !important;
	--search-modal-chip-text: var(--color-secondary) !important;
}

/* Close Button */
.ml-search-close-btn {
	position: absolute !important;
	top: 1.5rem !important;
	right: 1.5rem !important;
	width: 44px !important;
	height: 44px !important;
	border-radius: 50% !important;
	background: transparent !important;
	border: 1px solid var(--search-modal-border) !important;
	font-size: 1.8rem !important;
	cursor: pointer !important;
	color: var(--search-modal-text-secondary) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	padding: 0 !important;
}
.ml-search-close-btn:hover {
	background: rgba(100, 116, 139, 0.1) !important;
	transform: rotate(90deg) !important;
	color: var(--search-modal-text) !important;
}

/* Input Fields */
.ml-search-input {
	width: 100% !important;
	height: 56px !important;
	padding: 0 1.5rem 0 3.25rem !important;
	border-radius: 18px !important;
	border: 1px solid var(--search-modal-input-border) !important;
	background: var(--search-modal-input-bg) !important;
	color: var(--search-modal-text) !important;
	outline: none !important;
	font-size: 1rem !important;
	transition: all 0.3s ease !important;
}
.ml-search-input:focus {
	border-color: var(--color-secondary) !important;
	box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15) !important;
}

/* Submit Button */
.ml-search-submit-btn {
	height: 56px !important;
	border-radius: 18px !important;
	background: var(--color-secondary) !important;
	color: #ffffff !important;
	border: none !important;
	padding: 0 32px !important;
	cursor: pointer !important;
	font-weight: 600 !important;
	font-size: 1rem !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
	box-shadow: 0 4px 12px rgba(13, 148, 136, 0.25) !important;
}
.ml-search-submit-btn:hover {
	transform: scale(1.03) !important;
	box-shadow: 0 6px 20px rgba(13, 148, 136, 0.4), 0 0 12px rgba(13, 148, 136, 0.2) !important;
}
.ml-search-submit-btn:active {
	transform: scale(0.98) !important;
}

/* Quick Categories Button */
.ml-quick-cat-btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0.65rem 1rem !important;
	border-radius: 12px !important;
	background: var(--search-modal-chip-bg) !important;
	color: var(--search-modal-text) !important;
	font-weight: 500 !important;
	font-size: 0.95rem !important;
	border: 1px solid var(--search-modal-border) !important;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.ml-quick-cat-btn:hover {
	transform: translateY(-2px) !important;
	background: var(--color-secondary) !important;
	color: #ffffff !important;
	border-color: var(--color-secondary) !important;
	box-shadow: 0 4px 12px rgba(13, 148, 136, 0.2) !important;
}

/* Recent Search Item */
.ml-recent-search-item {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	padding: 0.5rem 0.85rem !important;
	border-radius: 8px !important;
	color: var(--search-modal-text-secondary) !important;
	font-size: 0.9rem !important;
	transition: all 0.2s ease !important;
	background: transparent !important;
	border: none !important;
	text-align: left !important;
	width: 100% !important;
	cursor: pointer !important;
}
.ml-recent-search-item:hover {
	background: rgba(13, 148, 136, 0.05) !important;
	color: var(--color-secondary) !important;
}

/* Trending Topic Item */
.ml-trending-item {
	display: flex !important;
	align-items: center !important;
	gap: 0.75rem !important;
	padding: 0.5rem 0.85rem !important;
	border-radius: 10px !important;
	color: var(--search-modal-text) !important;
	font-size: 0.95rem !important;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
	border: 1px solid transparent !important;
}
.ml-trending-item:hover {
	transform: translateX(4px) !important;
	background: rgba(13, 148, 136, 0.06) !important;
	color: var(--color-secondary) !important;
}
.ml-trend-rank {
	font-size: 0.8rem !important;
	font-weight: 700 !important;
	color: var(--search-modal-text-secondary) !important;
	width: 20px !important;
	opacity: 0.5 !important;
}
.ml-trend-badge {
	font-size: 0.7rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	background: #EF4444 !important;
	color: #ffffff !important;
	padding: 0.15rem 0.4rem !important;
	border-radius: 4px !important;
	margin-left: auto !important;
}

/* Search Preview Type Tab */
.ml-search-type-tab {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	padding: 0.75rem 1rem !important;
	border-radius: 12px !important;
	color: var(--search-modal-text) !important;
	font-weight: 500 !important;
	font-size: 0.95rem !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
}
.ml-search-type-tab:hover {
	background: rgba(13, 148, 136, 0.05) !important;
}
.ml-search-type-tab.active {
	background: var(--color-secondary) !important;
	color: #ffffff !important;
}
.ml-search-type-tab .ml-tab-count {
	font-size: 0.8rem !important;
	font-weight: 600 !important;
	background: rgba(100, 116, 139, 0.15) !important;
	padding: 0.15rem 0.5rem !important;
	border-radius: 99px !important;
	color: var(--search-modal-text-secondary) !important;
}
.ml-search-type-tab.active .ml-tab-count {
	background: rgba(255, 255, 255, 0.25) !important;
	color: #ffffff !important;
}

/* Search Preview Result Item */
.ml-preview-result-item {
	display: block !important;
	padding: 1rem !important;
	border-radius: 14px !important;
	border: 1px solid var(--search-modal-border) !important;
	background: var(--search-modal-input-bg) !important;
	text-decoration: none !important;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.ml-preview-result-item:hover {
	transform: translateY(-2px) !important;
	border-color: var(--color-secondary) !important;
	box-shadow: 0 4px 12px rgba(13, 148, 136, 0.1) !important;
}
.ml-preview-result-title {
	font-weight: 600 !important;
	font-size: 1rem !important;
	color: var(--search-modal-text) !important;
	margin-bottom: 0.25rem !important;
}
.ml-preview-result-excerpt {
	font-size: 0.85rem !important;
	color: var(--search-modal-text-secondary) !important;
	margin: 0 !important;
	line-height: 1.4 !important;
}

/* Theme Selector Buttons */
.ml-theme-btn {
	background: transparent !important;
	border: none !important;
	width: 28px !important;
	height: 28px !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	font-size: 0.85rem !important;
	color: var(--search-modal-text-secondary) !important;
	transition: all 0.2s ease !important;
	padding: 0 !important;
}
.ml-theme-btn:hover {
	color: var(--search-modal-text) !important;
}
.ml-theme-btn.active {
	background: #ffffff !important;
	color: var(--color-primary) !important;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08) !important;
}
.ml-search-modal-dark .ml-theme-btn.active {
	background: #1E293B !important;
	color: #ffffff !important;
}

/* Overlay & Animation Transitions */
.ml-search-modal {
	transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.ml-search-modal-content {
	background: var(--search-modal-bg) !important;
	border: 1px solid var(--search-modal-border) !important;
	backdrop-filter: blur(var(--search-modal-glass-blur)) !important;
	-webkit-backdrop-filter: blur(var(--search-modal-glass-blur)) !important;
	box-shadow: var(--search-modal-shadow) !important;
	padding: 48px !important;
	border-radius: 24px !important;
	transform: scale(0.96) translateY(-10px);
	transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}
.ml-search-modal.active .ml-search-modal-content {
	transform: scale(1) translateY(0);
}

/* Responsive Overrides */
@media (max-width: 768px) {
	.ml-search-modal-content {
		padding: 2rem !important;
		border-radius: 20px !important;
	}
	#ml-search-default-view {
		flex-direction: column !important;
		gap: 1.5rem !important;
	}
	#ml-search-suggestions-view {
		flex-direction: column !important;
		height: 400px !important;
	}
	#ml-search-preview-types {
		border-right: none !important;
		border-bottom: 1px solid var(--search-modal-divider) !important;
		padding-right: 0 !important;
		padding-bottom: 1rem !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		height: auto !important;
		overflow-y: visible !important;
	}
	.ml-search-type-tab {
		padding: 0.5rem 0.75rem !important;
	}
}

/* ==========================================
   Minh Lap Platform v2.0 - Premium Visual System
   ========================================== */

/* 1. Global Page Background Mesh & Noise */
body.home {
	background: 
		radial-gradient(circle at 0% 0%, rgba(13, 148, 136, 0.03) 0%, transparent 50%),
		radial-gradient(circle at 100% 100%, rgba(6, 182, 212, 0.03) 0%, transparent 50%),
		#FCFDFD;
	position: relative;
}
body.home::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(rgba(13, 148, 136, 0.025) 1px, transparent 1px);
	background-size: 32px 32px;
	pointer-events: none;
}

/* Lightweight Native Cursor Click Ripple Effect */
.ml-click-ripple {
	position: fixed;
	width: 24px;
	height: 24px;
	border: 2px solid #0D9488;
	border-radius: 50%;
	pointer-events: none;
	z-index: 99999;
	transform: translate(-50%, -50%) scale(0.4);
	opacity: 1;
	animation: mlClickRipple 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	box-shadow: 0 0 10px rgba(13, 148, 136, 0.4);
}

@keyframes mlClickRipple {
	0% {
		transform: translate(-50%, -50%) scale(0.4);
		opacity: 0.9;
		border-color: #0D9488;
	}
	100% {
		transform: translate(-50%, -50%) scale(2.6);
		opacity: 0;
		border-color: #06B6D4;
	}
}

/* Scroll Reveal Observer Animations & Logical Staggering */
.ml-reveal {
	opacity: 0;
	transform: translateY(35px);
	transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}
.ml-reveal.ml-reveal-scale {
	transform: scale(0.94) translateY(25px);
}
.ml-reveal.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}
.ml-reveal-delay-1 { transition-delay: 0.1s; }
.ml-reveal-delay-2 { transition-delay: 0.2s; }
.ml-reveal-delay-3 { transition-delay: 0.3s; }
.ml-reveal-delay-4 { transition-delay: 0.4s; }

/* Section Hierarchy & Generous Spacing */
.ml-front-page section {
	margin-bottom: 6.5rem !important;
	position: relative;
}

/* 2. Premium Hero Section Layout - Full Viewport WOW High Impact */
.ml-hero-section {
	position: relative;
	min-height: calc(100vh - 84px);
	padding: 5rem 2.5rem 6rem !important;
	background: linear-gradient(165deg, #E0F2FE 0%, #E6F4F1 35%, #F0FDF4 70%, #F8FAFC 100%) !important;
	border-radius: 32px !important;
	margin-top: 1rem !important;
	border: 1.5px solid rgba(13, 148, 136, 0.2) !important;
	box-shadow: 0 25px 60px -15px rgba(13, 148, 136, 0.12), inset 0 2px 1.5px 0 rgba(255, 255, 255, 1) !important;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 4rem;
	align-items: center;
}

/* Scroll Down Hint Pill */
.ml-scroll-down-hint {
	position: absolute;
	bottom: 1.5rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 0.4rem;
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid rgba(13, 148, 136, 0.2);
	padding: 0.4rem 1rem;
	border-radius: 99px;
	font-size: 0.78rem;
	font-weight: 700;
	color: #0F766E;
	cursor: pointer;
	box-shadow: 0 4px 15px rgba(13, 148, 136, 0.1);
	backdrop-filter: blur(8px);
	z-index: 10;
	transition: all 0.25s ease;
	animation: bounceHint 2.4s infinite ease-in-out;
}
.ml-scroll-down-hint:hover {
	border-color: #0D9488;
	color: #0D9488;
	background: #FFFFFF;
	box-shadow: 0 8px 25px rgba(13, 148, 136, 0.2);
}
@keyframes bounceHint {
	0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
	40% { transform: translateX(-50%) translateY(-6px); }
	60% { transform: translateX(-50%) translateY(-3px); }
}

/* Ambient Glowing Background Light Orbs */
.ml-hero-glow-1 {
	position: absolute;
	top: -10%;
	left: -5%;
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, rgba(13, 148, 136, 0.22) 0%, rgba(6, 182, 212, 0.12) 50%, transparent 70%);
	filter: blur(70px);
	pointer-events: none;
	z-index: 1;
	animation: floatGlow 12s ease-in-out infinite alternate;
}
.ml-hero-glow-2 {
	position: absolute;
	bottom: -15%;
	right: 5%;
	width: 550px;
	height: 550px;
	background: radial-gradient(circle, rgba(6, 182, 212, 0.2) 0%, rgba(138, 92, 246, 0.15) 50%, transparent 70%);
	filter: blur(80px);
	pointer-events: none;
	z-index: 1;
	animation: floatGlow 10s ease-in-out infinite alternate-reverse;
}
@keyframes floatGlow {
	0% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(30px, 25px) scale(1.08); }
	100% { transform: translate(-20px, 40px) scale(0.95); }
}

.ml-hero-grid-overlay {
	position: absolute;
	inset: 0;
	background-image: 
		linear-gradient(rgba(13, 148, 136, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(13, 148, 136, 0.06) 1px, transparent 1px);
	background-size: 44px 44px;
	background-position: center top;
	mask-image: radial-gradient(ellipse at 50% 50%, black 60%, transparent 98%);
	-webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 60%, transparent 98%);
	pointer-events: none;
	z-index: 1;
}

/* Eyebrow Liquid Glass Badge */
.ml-hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	background: var(--liquid-glass-bg);
	border: 1px solid var(--liquid-glass-border);
	padding: 0.45rem 1.1rem;
	border-radius: 99px;
	font-size: 0.82rem;
	font-weight: 700;
	color: #0F766E;
	margin-bottom: 1.5rem;
	box-shadow: var(--liquid-glass-rim-shadow), 0 4px 15px rgba(13, 148, 136, 0.08);
	backdrop-filter: var(--liquid-glass-blur);
	-webkit-backdrop-filter: var(--liquid-glass-blur);
	letter-spacing: 0.02em;
}
.ml-hero-eyebrow-pulse {
	width: 8px;
	height: 8px;
	background: #10B981;
	border-radius: 50%;
	box-shadow: 0 0 10px #10B981;
	animation: pulseGreen 2s infinite;
}
@keyframes pulseGreen {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.4); opacity: 0.6; }
}

/* Hero Typography Hierarchy - Stable Baseline & Refined Motion */
.ml-hero-title {
	font-size: clamp(2.2rem, 3.8vw, 3.6rem) !important;
	line-height: 1.35 !important;
	letter-spacing: -0.025em !important;
	font-weight: 800 !important;
	margin-bottom: 1.5rem !important;
	color: #0F172A !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0.6rem !important;
	align-items: flex-start !important;
}

.ml-hero-title-row {
	display: inline-flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 0.65rem !important;
}

.ml-hero-title-text {
	color: #0F172A !important;
}

/* 1. Refined Badge for "Tự động hóa" */
.ml-hero-auto-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.15rem 0.85rem;
	border-radius: 20px;
	background: linear-gradient(135deg, rgba(13, 148, 136, 0.14) 0%, rgba(6, 182, 212, 0.14) 100%);
	border: 1.5px solid rgba(13, 148, 136, 0.35);
	box-shadow: 0 6px 20px -4px rgba(13, 148, 136, 0.18), inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	transition: all 0.3s ease;
	animation: badgeGlowTeal 4s infinite ease-in-out alternate;
}

.ml-hero-auto-badge span {
	color: #005F53 !important;
	-webkit-text-fill-color: #005F53 !important;
	font-weight: 800 !important;
}

@keyframes badgeGlowTeal {
	0% {
		border-color: rgba(13, 148, 136, 0.35);
		box-shadow: 0 6px 20px -4px rgba(13, 148, 136, 0.18), inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.95);
	}
	100% {
		border-color: rgba(6, 182, 212, 0.6);
		box-shadow: 0 10px 25px -2px rgba(6, 182, 212, 0.3), 0 0 15px rgba(13, 148, 136, 0.2), inset 0 1.5px 1px 0 rgba(255, 255, 255, 1);
	}
}

.ml-gear-spin-icon {
	color: #005F53 !important;
	-webkit-text-fill-color: initial !important;
	filter: drop-shadow(0 0 6px rgba(0, 95, 83, 0.4));
	animation: spinGear 12s infinite linear;
}

@keyframes spinGear {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* 2. Refined Badge for "Sức mạnh AI" & "Số 0 đến Master" (Solid High-Contrast Cyan/Teal Brand Colors) */
.ml-hero-ai-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.15rem 0.85rem;
	border-radius: 20px;
	background: linear-gradient(135deg, rgba(6, 182, 212, 0.12) 0%, rgba(13, 148, 136, 0.12) 100%);
	border: 1.5px solid rgba(6, 182, 212, 0.4);
	box-shadow: 0 6px 20px -4px rgba(6, 182, 212, 0.18), inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	transition: all 0.3s ease;
	animation: badgeGlowCyan 4s infinite ease-in-out alternate-reverse;
}

.ml-hero-ai-text {
	color: #0891B2 !important;
	-webkit-text-fill-color: #0891B2 !important;
	font-weight: 800 !important;
}

.ml-gradient-text {
	color: #0F766E !important;
	-webkit-text-fill-color: #0F766E !important;
	font-weight: 800 !important;
}

@keyframes badgeGlowCyan {
	0% {
		border-color: rgba(6, 182, 212, 0.4);
		box-shadow: 0 6px 20px -4px rgba(6, 182, 212, 0.18), inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.95);
	}
	100% {
		border-color: rgba(13, 148, 136, 0.6);
		box-shadow: 0 10px 25px -2px rgba(13, 148, 136, 0.3), 0 0 18px rgba(6, 182, 212, 0.25), inset 0 1.5px 1px 0 rgba(255, 255, 255, 1);
	}
}

.ml-hero-cpu-icon,
.ml-hero-sparkle-icon {
	color: #0891B2 !important;
	-webkit-text-fill-color: initial !important;
	filter: drop-shadow(0 0 6px rgba(8, 145, 178, 0.4));
}

.ml-hero-sparkle-icon {
	color: #D97706 !important;
	filter: drop-shadow(0 0 6px rgba(217, 119, 6, 0.4));
	animation: pulseSparkle 3s infinite ease-in-out;
}

@keyframes pulseSparkle {
	0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
	50% { transform: scale(1.18) rotate(12deg); opacity: 0.9; }
}
.ml-hero-content p {
	font-size: 1.25rem !important;
	line-height: 1.65 !important;
	color: #334155 !important;
	margin-bottom: 2rem !important;
	font-weight: 500 !important;
	max-width: 580px;
}

/* Liquid Glass Hero Search Trigger Box */
.ml-hero-search-wrapper {
	position: relative;
	max-width: 540px;
	margin-bottom: 2.25rem;
	z-index: 10;
}
.ml-hero-search-box {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	height: 58px;
	border: 1px solid var(--liquid-glass-border);
	background: var(--liquid-glass-bg);
	border-radius: 18px;
	padding: 0 1.5rem;
	cursor: pointer;
	box-shadow: var(--liquid-glass-shadow);
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	backdrop-filter: var(--liquid-glass-blur);
	-webkit-backdrop-filter: var(--liquid-glass-blur);
	position: relative;
	overflow: hidden;
}
.ml-hero-search-box::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	transition: left 0.75s ease;
	pointer-events: none;
}
.ml-hero-search-box:hover::before {
	left: 100%;
}
.ml-hero-search-box:hover {
	background: var(--liquid-glass-bg-hover);
	border-color: var(--liquid-glass-border-hover);
	box-shadow: var(--liquid-glass-shadow-hover);
	transform: translateY(-3px);
}
.ml-hero-search-box span.shortcut {
	background: rgba(13, 148, 136, 0.1);
	color: #0F766E;
	font-family: inherit;
	font-size: 0.75rem;
	font-weight: 700;
	padding: 0.3rem 0.6rem;
	border-radius: 8px;
	border: 1px solid rgba(13, 148, 136, 0.2);
	letter-spacing: 0.05em;
}

/* Liquid Glass Studio Showcase Frame for Right Visual */
.ml-hero-studio-card {
	background: var(--liquid-glass-bg);
	border: 1px solid var(--liquid-glass-border);
	border-radius: 24px;
	box-shadow: var(--liquid-glass-shadow);
	backdrop-filter: var(--liquid-glass-blur);
	-webkit-backdrop-filter: var(--liquid-glass-blur);
	padding: 1.25rem;
	position: relative;
	z-index: 5;
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	overflow: hidden;
}
.ml-hero-studio-card:hover {
	border-color: var(--liquid-glass-border-hover);
	box-shadow: var(--liquid-glass-shadow-hover);
	transform: translateY(-6px) scale(1.01);
}
.ml-studio-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.25rem 0.5rem 1rem;
	border-bottom: 1px solid rgba(13, 148, 136, 0.1);
	margin-bottom: 0.75rem;
}
.ml-studio-dots {
	display: flex;
	gap: 6px;
}
.ml-studio-dots span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
}
.ml-studio-dots span:nth-child(1) { background: #EF4444; }
.ml-studio-dots span:nth-child(2) { background: #F59E0B; }
.ml-studio-dots span:nth-child(3) { background: #10B981; }

.ml-studio-status {
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	color: #0D9488 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.4rem !important;
	background: rgba(13, 148, 136, 0.08) !important;
	border: 1px solid rgba(13, 148, 136, 0.18) !important;
	padding: 0.25rem 0.65rem !important;
	border-radius: 99px !important;
	white-space: nowrap !important;
	max-width: 220px !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	flex-shrink: 0 !important;
}

/* High Contrast CTA Buttons */
.ml-btn-hero-primary {
	background: linear-gradient(135deg, #0D9488 0%, #06B6D4 100%) !important;
	color: #ffffff !important;
	border: none !important;
	padding: 0.9rem 2.2rem !important;
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	border-radius: 99px !important;
	box-shadow: 0 10px 25px rgba(13, 148, 136, 0.35) !important;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
	text-decoration: none !important;
}
.ml-btn-hero-primary:hover {
	box-shadow: 0 14px 35px rgba(13, 148, 136, 0.45) !important;
	transform: translateY(-2px) scale(1.02) !important;
}

.ml-btn-hero-secondary {
	background: #ffffff !important;
	color: #0F172A !important;
	border: 1.5px solid rgba(13, 148, 136, 0.25) !important;
	padding: 0.9rem 2.2rem !important;
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	border-radius: 99px !important;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
	text-decoration: none !important;
}
.ml-btn-hero-secondary:hover {
	border-color: #0D9488 !important;
	color: #0D9488 !important;
	box-shadow: 0 8px 25px rgba(13, 148, 136, 0.15) !important;
	transform: translateY(-2px) !important;
}
.ml-hero-search-box span.shortcut {
	background: rgba(100, 116, 139, 0.08);
	color: #64748B;
	font-family: inherit;
	font-size: 0.75rem;
	font-weight: 700;
	padding: 0.25rem 0.5rem;
	border-radius: 6px;
	border: 1px solid rgba(100, 116, 139, 0.1);
	letter-spacing: 0.05em;
}

/* 3. Hero Interactive SVG Connections Animation */
@keyframes dash-flow {
	to {
		stroke-dashoffset: -40;
	}
}
.ml-laser-line {
	stroke-dasharray: 8 4;
	animation: dash-flow 1.5s linear infinite;
}
.ml-node-group {
	cursor: pointer;
}
.ml-node-group rect {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ml-node-group:hover rect {
	stroke: var(--color-secondary) !important;
	stroke-width: 2.5px !important;
	filter: drop-shadow(0 8px 24px rgba(13, 148, 136, 0.35));
}
.ml-node-glow {
	filter: drop-shadow(0 4px 12px rgba(13, 148, 136, 0.25));
}

/* 4. Premium Card Design System */
.ml-card-item {
	background: rgba(255, 255, 255, 0.65) !important;
	border: 1px solid rgba(255, 255, 255, 0.75) !important;
	border-radius: 20px !important;
	box-shadow: 0 10px 30px -10px rgba(10, 37, 64, 0.08), 0 0 0 1px rgba(10, 37, 64, 0.02) !important;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
	overflow: hidden;
}
.ml-card-item:hover {
	transform: translateY(-6px) !important;
	background: #FFFFFF !important;
	border-color: var(--color-secondary) !important;
	box-shadow: 0 20px 40px -12px rgba(13, 148, 136, 0.16), 0 0 0 1.5px var(--color-secondary) !important;
}

/* Thumbnail Overlay Glow */
.ml-card-thumbnail, .ml-card-thumb {
	position: relative;
	overflow: hidden;
	border-radius: 12px !important;
	transition: transform 0.3s ease;
}
.ml-card-thumbnail img, .ml-card-thumb img {
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.ml-card-item:hover .ml-card-thumbnail img,
.ml-card-item:hover .ml-card-thumb img {
	transform: scale(1.06);
}

/* Difficulty Badge Styling */
.ml-diff-badge {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	padding: 0.2rem 0.65rem;
	border-radius: 6px;
	letter-spacing: 0.02em;
}
.ml-diff-badge.beginner {
	background: rgba(34, 197, 94, 0.08);
	color: #16A34A;
}
.ml-diff-badge.intermediate {
	background: rgba(245, 158, 11, 0.08);
	color: #D97706;
}
.ml-diff-badge.advanced {
	background: rgba(168, 85, 247, 0.08);
	color: #9333EA;
}

/* Brand Badge styling */
.ml-card-badge.prompt {
	background: rgba(13, 148, 136, 0.06) !important;
	color: var(--color-secondary) !important;
	border: 1px solid rgba(13, 148, 136, 0.1);
}

/* 5. Custom Workflow Card Diagram Design */
.ml-wf-card-diagram {
	background: rgba(15, 23, 42, 0.03);
	border: 1px dashed rgba(13, 148, 136, 0.25);
	border-radius: 12px;
	padding: 0.85rem;
	margin-bottom: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}
.ml-wf-diag-node {
	background: #FFFFFF;
	border: 1px solid rgba(13, 148, 136, 0.15);
	border-radius: 8px;
	padding: 0.35rem 0.65rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--color-primary);
	box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.ml-wf-diag-arrow {
	color: var(--color-secondary);
	font-size: 0.8rem;
	opacity: 0.7;
}

/* 6. Dynamic Roadmap Node Overrides */
.ml-path-node {
	border-radius: 20px !important;
	padding: 1.75rem 1.25rem !important;
	background: rgba(255, 255, 255, 0.7) !important;
	border: 1px solid rgba(255, 255, 255, 0.9) !important;
	box-shadow: 0 8px 24px rgba(10, 37, 64, 0.03) !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.ml-path-node:hover {
	transform: translateY(-5px);
	background: #FFFFFF !important;
	border-color: var(--color-secondary) !important;
	box-shadow: 0 16px 36px rgba(13, 148, 136, 0.12) !important;
}
.ml-path-node div.step-num {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(13, 148, 136, 0.08);
	color: var(--color-secondary);
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1.25rem;
	transition: all 0.3s ease;
}
.ml-path-node:hover div.step-num {
	background: var(--color-secondary);
	color: #FFFFFF;
	transform: scale(1.08);
}

/* 7. Asymmetrical Founder & newsletter Section */
.ml-founder-grid {
	display: grid !important;
	grid-template-columns: 1.25fr 0.75fr !important;
	gap: 3.5rem !important;
	align-items: start !important;
	background: rgba(255, 255, 255, 0.6) !important;
	border: 1px solid rgba(255, 255, 255, 0.7) !important;
	border-radius: 28px !important;
}
.ml-experience-timeline {
	margin-top: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	border-left: 2px solid rgba(13, 148, 136, 0.15);
	padding-left: 1.5rem;
	text-align: left;
}
.ml-timeline-item {
	position: relative;
}
.ml-timeline-item::before {
	content: "";
	position: absolute;
	left: -29px;
	top: 4px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--color-secondary);
	border: 2px solid #FFFFFF;
	box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.2);
}
.ml-timeline-year {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--color-secondary);
	margin-bottom: 0.15rem;
}
.ml-timeline-desc {
	font-size: 0.95rem;
	color: #475569;
	font-weight: 500;
}

/* Rich Quote block */
.ml-founder-quote {
	margin: 2rem 0;
	padding: 1.5rem;
	background: rgba(13, 148, 136, 0.04);
	border-left: 4px solid var(--color-secondary);
	border-radius: 0 16px 16px 0;
	text-align: left;
	font-style: italic;
	color: #334155;
	font-size: 1.05rem;
	line-height: 1.6;
}

/* Glowing newsletter Card */
.ml-newsletter-card {
	background: 
		radial-gradient(circle at 90% 10%, rgba(6, 182, 212, 0.08) 0%, transparent 40%),
		linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%) !important;
	border: 1px solid rgba(13, 148, 136, 0.2) !important;
	box-shadow: 0 20px 45px -15px rgba(13, 148, 136, 0.12) !important;
	border-radius: 24px !important;
}

/* 8. Adaptive Mobile Overrides */
@media (max-width: 991px) {
	.ml-hero-section {
		grid-template-columns: 1fr !important;
		padding: 6rem 1.5rem 4rem !important;
		gap: 2.5rem !important;
		text-align: center;
	}
	.ml-hero-content h1 {
		font-size: 3rem !important;
	}
	.ml-hero-search-wrapper {
		margin-left: auto;
		margin-right: auto;
	}
	.ml-hero-ctas {
		justify-content: center;
	}
	.ml-hero-social-proof {
		justify-content: center;
	}
	.ml-hero-usps {
		justify-content: center;
	}
	.ml-founder-grid {
		grid-template-columns: 1fr !important;
		gap: 2.5rem !important;
	}
}

@media (max-width: 768px) {
	.ml-hero-content h1 {
		font-size: 2.5rem !important;
	}
	.ml-hero-content p {
		font-size: 1.1rem !important;
	}
	.ml-path-arrow {
		display: none !important;
	}
	.ml-path-flow {
		flex-direction: column !important;
		gap: 1.5rem !important;
	}
	.ml-path-node {
		width: 100% !important;
		box-sizing: border-box !important;
	}
}

/* 9. Lucide Icons Color & Styling Utilities */
svg.lucide {
	vertical-align: middle;
	display: inline-block;
	stroke-width: 2px;
	transition: color 0.2s ease, stroke 0.2s ease, transform 0.2s ease;
}

.ml-icon-box-duotone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: rgba(13, 148, 136, 0.12);
	color: var(--color-secondary);
	transition: all 0.3s ease;
}

.ml-icon-box-duotone:hover {
	background: var(--color-secondary);
	color: #ffffff;
	transform: translateY(-2px);
}

.ml-icon-glow {
	filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.5));
}

/* ==========================================
   Interactive Neon Liquid Glass Roadmap Styles
   ========================================== */
.ml-roadmap-container {
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.85) 0%, rgba(240, 253, 250, 0.85) 100%) !important;
	border: 1px solid rgba(13, 148, 136, 0.2) !important;
	box-shadow: 0 20px 50px -10px rgba(13, 148, 136, 0.15), var(--liquid-glass-shadow) !important;
}

.ml-roadmap-glow-bg {
	position: absolute;
	top: -20%;
	left: 50%;
	transform: translateX(-50%);
	width: 600px;
	height: 300px;
	background: radial-gradient(ellipse at center, rgba(6, 182, 212, 0.15) 0%, rgba(13, 148, 136, 0.08) 50%, transparent 70%);
	pointer-events: none;
	filter: blur(50px);
}

.ml-roadmap-pill-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: rgba(13, 148, 136, 0.1);
	border: 1px solid rgba(13, 148, 136, 0.25);
	color: #0F766E;
	padding: 0.4rem 1.1rem;
	border-radius: 99px;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin-bottom: 1.25rem;
	box-shadow: 0 4px 15px rgba(13, 148, 136, 0.1);
}

.ml-spin-compass {
	width: 16px;
	height: 16px;
	color: #0D9488;
	animation: compassSpin 10s ease-in-out infinite alternate;
}

@keyframes compassSpin {
	0% { transform: rotate(0deg); }
	50% { transform: rotate(180deg); }
	100% { transform: rotate(360deg); }
}

.ml-roadmap-main-heading {
	font-size: clamp(1.8rem, 3vw, 2.5rem);
	font-family: var(--font-heading);
	color: var(--color-primary);
	font-weight: 800;
	margin-bottom: 1rem;
}

/* Stepper Circuit Master Bar (Option 1) */
.ml-stepper-bar-wrapper {
	position: relative;
	margin: 2.5rem 0 1.5rem;
	padding: 0 1.5rem;
}

.ml-stepper-track-line {
	position: absolute;
	top: 22px;
	left: 6%;
	right: 6%;
	height: 4px;
	background: rgba(13, 148, 136, 0.15);
	border-radius: 99px;
	z-index: 1;
}

.ml-stepper-laser-glow {
	position: absolute;
	top: 0;
	left: 0;
	width: 0%;
	height: 100%;
	background: linear-gradient(90deg, #10B981 0%, #06B6D4 50%, #8B5CF6 100%);
	border-radius: 99px;
	box-shadow: 0 0 14px #06B6D4;
	transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ml-stepper-nodes-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	z-index: 5;
}

.ml-stepper-node-btn {
	background: #ffffff;
	border: 2px solid rgba(13, 148, 136, 0.25);
	border-radius: 99px;
	padding: 0.55rem 1.35rem;
	display: flex;
	align-items: center;
	gap: 0.65rem;
	cursor: pointer;
	transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
	box-shadow: 0 6px 20px rgba(0,0,0,0.04);
	outline: none;
}

.ml-stepper-node-btn .node-num {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(13, 148, 136, 0.1);
	color: #0D9488;
	font-weight: 900;
	font-size: 0.82rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.ml-stepper-node-btn .node-label {
	font-size: 0.95rem;
	font-weight: 700;
	color: #334155;
	transition: color 0.3s ease;
}

.ml-stepper-node-btn:hover,
.ml-stepper-node-btn.active {
	border-color: #0D9488;
	background: #ffffff;
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(13, 148, 136, 0.22);
}

.ml-stepper-node-btn.active .node-num {
	background: linear-gradient(135deg, #0D9488 0%, #06B6D4 100%);
	color: #ffffff;
	box-shadow: 0 0 10px rgba(13, 148, 136, 0.4);
}

.ml-stepper-node-btn.active .node-label {
	color: var(--color-primary);
	font-weight: 800;
}

.ml-step-detail-item {
	opacity: 0;
	transform: translateY(15px);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.ml-step-detail-item.active {
	opacity: 1;
	transform: translateY(0);
}

@media (max-width: 992px) {
	.ml-stepper-nodes-container {
		flex-wrap: wrap;
		gap: 0.75rem;
		justify-content: center;
	}
	.ml-stepper-track-line {
		display: none;
	}
	.ml-stepper-active-panel > div {
		grid-template-columns: 1fr !important;
	}
}

/* Node Cards */
.ml-roadmap-node-card {
	background: rgba(255, 255, 255, 0.95);
	border: 1.5px solid rgba(13, 148, 136, 0.18);
	border-radius: 18px;
	padding: 1.8rem 0.9rem 1.25rem;
	text-align: left;
	position: relative;
	transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(12px);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.ml-roadmap-node-card:hover {
	transform: translateY(-8px) scale(1.03);
	background: rgba(255, 255, 255, 0.98);
	border-color: #06B6D4;
	box-shadow: 0 20px 40px -10px rgba(6, 182, 212, 0.3), 0 0 25px rgba(6, 182, 212, 0.2), inset 0 1.5px 1px rgba(255, 255, 255, 1);
	z-index: 10;
}

.ml-node-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.25rem;
}

.ml-node-step-badge {
	font-size: 0.75rem;
	font-weight: 800;
	padding: 0.2rem 0.65rem;
	border-radius: 99px;
	letter-spacing: 0.05em;
}

.ml-node-step-badge.step-1 { background: rgba(16, 185, 129, 0.12); color: #10B981; border: 1px solid rgba(16, 185, 129, 0.3); }
.ml-node-step-badge.step-2 { background: rgba(239, 68, 68, 0.12); color: #EF4444; border: 1px solid rgba(239, 68, 68, 0.3); }
.ml-node-step-badge.step-3 { background: rgba(245, 158, 11, 0.12); color: #D97706; border: 1px solid rgba(245, 158, 11, 0.3); }
.ml-node-step-badge.step-4 { background: rgba(6, 182, 212, 0.12); color: #0891B2; border: 1px solid rgba(6, 182, 212, 0.3); }
.ml-node-step-badge.step-5 { background: rgba(138, 92, 246, 0.12); color: #8B5CF6; border: 1px solid rgba(138, 92, 246, 0.3); }

.ml-node-icon {
	width: 46px;
	height: 46px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease;
}

.ml-roadmap-node-card:hover .ml-node-icon {
	transform: scale(1.15) rotate(-8deg);
}

.ml-node-icon.step-1 { background: rgba(16, 185, 129, 0.1); color: #10B981; }
.ml-node-icon.step-2 { background: rgba(239, 68, 68, 0.1); color: #EF4444; }
.ml-node-icon.step-3 { background: rgba(245, 158, 11, 0.1); color: #D97706; }
.ml-node-icon.step-4 { background: rgba(6, 182, 212, 0.1); color: #06B6D4; }
.ml-node-icon.step-5 { background: rgba(138, 92, 246, 0.1); color: #8B5CF6; }

.ml-node-icon svg {
	width: 24px;
	height: 24px;
}

.ml-node-title {
	font-size: 1.15rem;
	font-weight: 700;
	color: #0F172A;
	margin-bottom: 0.6rem;
	line-height: 1.3;
}

.ml-node-desc {
	font-size: 0.88rem;
	color: #64748B;
	line-height: 1.55;
	margin-bottom: 1.25rem;
}

.ml-node-footer {
	border-top: 1px solid rgba(13, 148, 136, 0.08);
	padding-top: 0.75rem;
}

.ml-node-tag {
	font-size: 0.75rem;
	font-weight: 600;
	color: #0D9488;
	background: rgba(13, 148, 136, 0.06);
	padding: 0.2rem 0.55rem;
	border-radius: 6px;
}

/* CTA Hero Button for Roadmap */
.ml-btn-roadmap-hero {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 2.25rem;
	border-radius: 99px;
	background: linear-gradient(135deg, #0D9488 0%, #06B6D4 50%, #8B5CF6 100%);
	color: #ffffff !important;
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none !important;
	box-shadow: 0 10px 30px -5px rgba(13, 148, 136, 0.35);
	transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ml-btn-roadmap-hero:hover {
	transform: translateY(-3px) scale(1.03);
	box-shadow: 0 15px 40px -5px rgba(6, 182, 212, 0.45);
}

.ml-arrow-bounce {
	transition: transform 0.3s ease;
}

.ml-btn-roadmap-hero:hover .ml-arrow-bounce {
	transform: translateX(6px);
}

/* Single CTA View Prompt Button */
.ml-btn-view-prompt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.65rem 1.25rem;
	border-radius: 99px;
	background: rgba(13, 148, 136, 0.08);
	border: 1px solid rgba(13, 148, 136, 0.2);
	color: #0F766E !important;
	font-weight: 700;
	font-size: 0.88rem;
	text-decoration: none !important;
	transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
	box-shadow: 0 4px 12px rgba(13, 148, 136, 0.06);
}

.ml-btn-view-prompt:hover,
.ml-btn-view-prompt:hover *,
.ml-btn-view-prompt:hover span,
.ml-btn-view-prompt:hover i,
.ml-btn-view-prompt:hover svg {
	background: linear-gradient(135deg, #0D9488 0%, #06B6D4 100%) !important;
	border-color: #06B6D4 !important;
	color: #ffffff !important;
	stroke: #ffffff !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(13, 148, 136, 0.3);
}

/* ==========================================
   Ultra High-Tech Interactive Back to Top Widget
   ========================================== */
.ml-back-to-top-btn {
	position: fixed;
	bottom: 5.5rem;
	right: 1.75rem;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	border: 1.5px solid rgba(255, 255, 255, 0.95);
	box-shadow: 0 12px 35px -5px rgba(10, 37, 64, 0.2), 0 0 25px rgba(6, 182, 212, 0.2), inset 0 1.5px 1px 0 rgba(255, 255, 255, 1);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 9990;
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px) scale(0.85);
	transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ml-back-to-top-btn.visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

.ml-back-to-top-btn:hover {
	transform: translateY(-5px) scale(1.1);
	box-shadow: 0 18px 45px -5px rgba(13, 148, 136, 0.35), 0 0 30px rgba(6, 182, 212, 0.3);
}

.ml-progress-ring {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.ml-progress-indicator {
	transition: stroke-dashoffset 0.1s linear, stroke 0.3s ease;
}

/* Inner Core Container */
.ml-back-to-top-inner {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 50%;
}

/* Live % Number Text */
.ml-scroll-percent-text {
	font-size: 0.76rem;
	font-weight: 800;
	font-family: var(--font-heading);
	color: #06B6D4;
	transition: transform 0.3s ease, opacity 0.3s ease;
	user-select: none;
}

/* Morphing Upward Arrow Icon */
.ml-scroll-arrow-icon {
	position: absolute;
	opacity: 0;
	transform: translateY(14px) scale(0.7);
	color: #0D9488;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hover Swap Animation: % fades down, Arrow slides up */
.ml-back-to-top-btn:hover .ml-scroll-percent-text {
	opacity: 0;
	transform: translateY(-14px) scale(0.7);
}

.ml-back-to-top-btn:hover .ml-scroll-arrow-icon {
	opacity: 1;
	transform: translateY(0) scale(1.1);
}

/* Floating Glass Tooltip Badge */
.ml-back-to-top-tooltip {
	position: absolute;
	right: calc(100% + 12px);
	top: 50%;
	transform: translateY(-50%) translateX(10px);
	background: rgba(15, 23, 42, 0.9);
	color: #FFFFFF;
	padding: 0.4rem 0.85rem;
	border-radius: 99px;
	font-size: 0.78rem;
	font-weight: 700;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.15);
}

.ml-back-to-top-btn:hover .ml-back-to-top-tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%) translateX(0);
}

/* Rocket Launch Shockwave Animation on Click */
.ml-back-to-top-btn.ml-launching {
	animation: rocketLaunch 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes rocketLaunch {
	0% { transform: scale(1); }
	30% { transform: scale(0.8) translateY(6px); }
	60% { transform: scale(1.25) translateY(-25px); opacity: 0.9; }
	100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* ==========================================
   Dark Executive Midnight Slate Footer
   ========================================== */
.ml-footer {
	position: relative;
	padding: 4.5rem 0 2.5rem !important;
	margin-top: 6rem !important;
	background: linear-gradient(180deg, #052428 0%, #031518 100%) !important;
	border-top: 1px solid rgba(13, 148, 136, 0.3) !important;
	color: #CBD5E1 !important;
}

.ml-footer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 3rem;
	margin-bottom: 3rem;
}

.ml-footer-title {
	font-size: 0.95rem;
	font-weight: 800;
	color: #FFFFFF !important;
	margin-top: 0;
	margin-bottom: 1.25rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-bottom: 2px solid #0D9488;
	padding-bottom: 0.4rem;
	display: inline-block;
}

.ml-footer-links {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	font-size: 0.92rem;
	font-weight: 500;
}

.ml-footer-links a {
	color: #94A3B8 !important;
	text-decoration: none !important;
	transition: color 0.25s ease;
}

.ml-footer-links a:hover {
	color: #06B6D4 !important;
}

.ml-footer-status {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: rgba(16, 185, 129, 0.12);
	border: 1px solid rgba(16, 185, 129, 0.3);
	padding: 0.35rem 0.85rem;
	border-radius: 99px;
	font-size: 0.82rem;
	font-weight: 700;
	color: #34D399 !important;
}

.ml-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding-top: 1.5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	font-size: 0.88rem;
	color: #64748B;
}

/* =========================================================================
   GRID LAYOUTS & COMPONENT SYSTEM
   ========================================================================= */

.ml-featured-grid,
.ml-tools-grid,
.ml-prompt-grid,
.ml-workflow-grid,
.ml-case-studies-grid,
.ml-roadmap-grid,
.ml-resources-grid,
.ml-category-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
}

.ml-tools-grid,
.ml-prompt-grid {
	grid-template-columns: repeat(4, 1fr);
}

.ml-btn-hero-primary,
.ml-btn-hero-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	height: 48px;
	padding: 0 1.75rem;
	border-radius: 99px;
	font-weight: 700;
	font-size: 0.98rem;
	text-decoration: none;
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.ml-btn-hero-primary {
	background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
	color: #FFFFFF !important;
	box-shadow: 0 8px 24px rgba(13, 148, 136, 0.25);
}

.ml-btn-hero-secondary {
	background: rgba(255, 255, 255, 0.9);
	border: 1.5px solid rgba(13, 148, 136, 0.3);
	color: var(--color-primary) !important;
}

/* =========================================================================
   HERO SECTION & CORE LAYOUT STYLES
   ========================================================================= */

.ml-hero-section {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 3.5rem;
	align-items: center;
	padding-top: 4rem;
	padding-bottom: 4rem;
	position: relative;
}

.ml-hero-usps {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 1.5rem;
	margin-bottom: 2rem;
	flex-wrap: wrap;
}

.ml-hero-ctas {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.ml-hero-title {
	font-size: 2.75rem;
	font-weight: 900;
	font-family: var(--font-heading);
	color: var(--color-primary);
	line-height: 1.25;
	margin-bottom: 1.25rem;
}

.ml-hero-title-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.ml-hero-auto-badge,
.ml-hero-ai-badge {
	will-change: transform, opacity;
}

.ml-laser-line {
	will-change: stroke-dashoffset;
}

/* =========================================================================
   COMPREHENSIVE MOBILE RESPONSIVE ENGINE (FOR ALL MOBILE DEVICES)
   ========================================================================= */

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

@media (max-width: 1024px) {
	.ml-container {
		padding-left: 1.25rem !important;
		padding-right: 1.25rem !important;
	}
	.ml-hero-section {
		grid-template-columns: 1fr !important;
		gap: 2.5rem !important;
		text-align: center;
	}
	.ml-hero-content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.ml-hero-title-row {
		justify-content: center !important;
	}
	.ml-hero-search-wrapper {
		width: 100% !important;
		max-width: 100% !important;
	}
	.ml-featured-grid,
	.ml-tools-grid,
	.ml-prompt-grid,
	.ml-workflow-grid,
	.ml-case-studies-grid,
	.ml-roadmap-grid,
	.ml-resources-grid,
	.ml-category-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 1.25rem !important;
	}
	.ml-footer-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 2rem !important;
	}
}

@media (max-width: 768px) {
	/* 1. HERO SECTION MOBILE REFLOW */
	.ml-hero-section {
		padding-top: 2rem !important;
		padding-bottom: 2rem !important;
	}
	.ml-hero-title {
		font-size: 1.75rem !important;
		line-height: 1.35 !important;
	}
	.ml-hero-title-row {
		flex-wrap: wrap !important;
		justify-content: center !important;
		gap: 0.35rem !important;
	}
	.ml-hero-auto-badge, .ml-hero-ai-badge {
		font-size: 1rem !important;
		padding: 0.2rem 0.5rem !important;
	}
	.ml-hero-search-box {
		width: 100% !important;
		height: 46px !important;
		padding: 0 0.85rem !important;
	}
	.ml-hero-search-box .shortcut {
		display: none !important;
	}
	.ml-hero-usps {
		justify-content: center !important;
		flex-wrap: wrap !important;
		gap: 0.5rem !important;
	}
	.ml-usp-tag {
		font-size: 0.75rem !important;
		padding: 0.35rem 0.65rem !important;
	}
	.ml-hero-ctas {
		flex-direction: column !important;
		width: 100% !important;
		gap: 0.75rem !important;
	}
	.ml-btn-hero-primary, .ml-btn-hero-secondary {
		width: 100% !important;
		justify-content: center !important;
	}
	.ml-hero-studio-card {
		max-width: 100% !important;
	}

	/* 2. CARD GRIDS REFLOW (MULTIPLE COLUMNS -> 1 COLUMN ON MOBILE) */
	.ml-featured-grid,
	.ml-tools-grid,
	.ml-prompt-grid,
	.ml-workflow-grid,
	.ml-case-studies-grid,
	.ml-roadmap-grid,
	.ml-resources-grid,
	.ml-category-grid,
	div[style*="grid-template-columns"], 
	section[style*="grid-template-columns"] {
		grid-template-columns: 1fr !important;
		gap: 1.25rem !important;
	}

	.ml-glass-card {
		padding: 1.25rem !important;
		border-radius: 16px !important;
	}

	/* 3. SECTION HEADINGS & SPACING */
	h1 { font-size: 1.75rem !important; }
	h2 { font-size: 1.4rem !important; }
	h3 { font-size: 1.15rem !important; }

	/* 4. FOOTER MOBILE LAYOUT */
	.ml-footer-grid {
		grid-template-columns: 1fr !important;
		gap: 2rem !important;
	}
	.ml-footer-bottom {
		flex-direction: column !important;
		text-align: center !important;
		gap: 0.75rem !important;
	}

	/* 5. TOOL INTERACTIVE WORKSPACE RESPONSIVENESS */
	#ml-tool-workspace div[style*="grid-template-columns"],
	#ml-tool-generic div[style*="grid-template-columns"],
	#ml-tool-email-assistant div[style*="grid-template-columns"] {
		grid-template-columns: 1fr !important;
	}
	textarea, input[type="text"], select {
		font-size: 16px !important;
	}
}

@media (max-width: 480px) {
	.ml-container {
		padding-left: 0.85rem !important;
		padding-right: 0.85rem !important;
	}
	.ml-hero-title {
		font-size: 1.5rem !important;
	}
}