/* ── FULL DESIGN TOKEN SYSTEM ── */
		:root {
			--font-body: 'Geist', sans-serif;
			--font-heading: 'Geist', sans-serif;
			--font: 'Geist', sans-serif;
			--font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

			--neutral-25: #FFFFFF;
			--neutral-50: #F5F5F5;
			--neutral-75: #EDEDED;
			--neutral-100: #E1E1E1;
			--neutral-200: #DADADA;
			--neutral-250: #B1B1B1;
			--neutral-300: #999999;
			--neutral-350: #858585;
			--neutral-400: #5E5E5E;
			--neutral-450: #515151;
			--neutral-500: #4A4A4A;
			--neutral-600: #393939;
			--neutral-700: #333333;
			--neutral-800: #242424;
			--neutral-900: #1A1A1A;
			--neutral-1000: #0a0a0a;

			--color-dark-25: var(--neutral-25);
			--color-dark-50: var(--neutral-50);
			--color-dark-75: var(--neutral-75);
			--color-dark-100: var(--neutral-100);
			--color-dark-200: var(--neutral-200);
			--color-dark-250: var(--neutral-250);
			--color-dark-300: var(--neutral-300);
			--color-dark-350: var(--neutral-350);
			--color-dark-400: var(--neutral-400);
			--color-dark-450: var(--neutral-450);
			--color-dark-500: var(--neutral-500);
			--color-dark-600: var(--neutral-600);
			--color-dark-700: var(--neutral-700);
			--color-dark-800: var(--neutral-800);
			--color-dark-900: var(--neutral-900);
			--color-dark-1000: var(--neutral-1000);



			--color-brand-light: #9B51E0;
			--color-brand: #8B2FC9;
			--color-brand-dark: #6f24a0;
			--color-brand-light: #f3eefa;
			--color-neutral-subtle: #3b3b3b;


			--primary-10: rgba(123, 47, 190, 0.1);
			--text: #111827;
			--muted: #6B7280;
			--border: #E5E7EB;


			--color-text: #111111;
			--color-text-sublte: #5E5E5E;
			--color-text-secondary: #444444;
			--color-text-muted: #888888;
			--color-border: #e8e8e8;
			--color-border-defult: #cccccc;
			--color-bg: #ffffff;
			--color-bg-subtle: #f5f5f5;
			--color-bg-muted: #f7f7f7;
			--color-bg-brand: #faf7ff;
			--color-border-default: #cccccc;

			--radius-none: 0px;
			--radius-sm: 4px;
			--radius-md: 8px;
			--radius-lg: 12px;
			--radius-xl: 16px;
			--radius-2xl: 20px;
			--radius-full: 9999px;

			--text-xxs: 0.65rem;
			--text-xs: 0.75rem;
			--text-sm: 0.813rem;
			--text-base: 0.875rem;
			--text-md: 1rem;
			--text-lg: 1.125rem;
			--text-xl: 1.25rem;
			--text-2xl: 1.5rem;
			--text-3xl: 1.875rem;
			--text-4xl: 2.25rem;
			--text-5xl: 3rem;
		}

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

		html,
		body {
			font-family: var(--font-sans);
			background: var(--color-bg);
			color: var(--color-text);
			-webkit-font-smoothing: antialiased;
			width: 100%;
		}


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

		/* 
			 NAVBAR
		 */
		.site-navbar {
			background: var(--color-bg);
			position: sticky;
			top: 0;
			z-index: 1000;
			border-bottom: 1px solid var(--color-border-light);
		}

		/* ── ROW 1: Logo | Search | Icons | CTA ── */
		.nav-top {
			display: flex;
			align-items: center;
			gap: 24px;
			padding: 12px 0px 12px 0px;
			border-bottom: 1px solid #ececec;
			flex-wrap: wrap;
		}

		/* Brand */
		.nav-brand {
			display: flex;
			align-items: center;
			gap: 8px;
			text-decoration: none;
			flex-shrink: 0;
		}

		.nav-brand-flower svg {
			width: 38px;
			height: 38px;
		}

		.nav-brand-text {
			line-height: 1;
		}

		.nav-brand-name {
			font-size: 1.25rem;
			font-weight: 900;
			color: var(--color-text);
			letter-spacing: -0.8px;
			display: block;
		}

		.nav-brand-sub {
			font-size: 0.46rem;
			color: var(--neutral-300);
			letter-spacing: 3px;
			font-weight: 400;
			text-transform: uppercase;
			display: block;
			margin-top: 1px;
		}

		/* Search */
		.nav-search-wrap {
			flex: 1;
			max-width: 460px;
			display: flex;
			align-items: center;
			border: 1.5px solid #ccc;
			border-radius: var(--radius-full);
			overflow: hidden;
			background: var(--color-bg);
			transition: border-color .2s;
		}

		.nav-search-wrap:focus-within {
			border-color: var(--color-brand);
		}

		.nav-search-dropdown {
			border: none;
			border-right: 1.5px solid var(--color-border);
			background: none;
			padding: 0 10px 0 16px;
			font-family: var(--font-sans);
			font-size: var(--text-base);
			font-weight: 600;
			color: var(--color-text);
			cursor: pointer;
			height: 42px;
			outline: none;
			appearance: none;
			-webkit-appearance: none;
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9L12 15 18 9'/%3E%3C/svg%3E");
			background-repeat: no-repeat;
			background-position: right 8px center;
			padding-right: 28px;
		}

		.nav-search-input {
			flex: 1;
			border: none;
			outline: none;
			padding: 0 14px;
			font-family: var(--font-sans);
			font-size: var(--text-base);
			color: #333;
			height: 42px;
			background: transparent;
		}

		.nav-search-input::placeholder {
			color: #bbb;
		}

		.nav-search-btn {
			background: none;
			border: none;
			padding: 0 16px;
			color: var(--color-text);
			font-size: 1.05rem;
			cursor: pointer;
			display: flex;
			align-items: center;
			height: 42px;
			flex-shrink: 0;
			transition: color .2s;
		}

		.nav-search-btn:hover {
			color: var(--color-brand);
		}

		/* Right icons */
		.nav-right {
			display: flex;
			align-items: center;
			gap: 18px;
			margin-left: auto;
			flex-shrink: 0;
		}

		.nav-icon-btn {
			position: relative;
			color: #333;
			text-decoration: none;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: color .2s;
		}

		.nav-icon-btn:hover {
			color: var(--color-brand);
		}

		.nav-icon-btn svg {
			width: 24px;
			height: 24px;
		}

		.nav-icon-badge {
			position: absolute;
			top: -8px;
			right: -9px;
			background: var(--color-text);
			color: #fff;
			font-size: 10px;
			width: 17px;
			height: 17px;
			border-radius: var(--radius-full);
			display: flex;
			align-items: center;
			justify-content: center;
		}


		/* Start Selling CTA */

		.btn-header-login {
			background: #f4f4f4 !Important;
			color: #333 !Important;
			border: 1px solid #ccc;
			border-radius: var(--radius-md);
			padding: 9px 12px;
			font-size: var(--text-sm);
			font-weight: 600;
			white-space: nowrap;
			text-decoration: none;
			display: inline-flex;
			align-items: center;
			gap: 8px;
			transition: background .2s;
			margin-left: 0px;
		}

		.btn-header-login:hover {
			background: #e0e0e0 !Important;

		}





		.btn-start-selling {
			background: var(--color-brand);
			color: #fff !Important;
			border: none;
			border-radius: var(--radius-md);
			padding: 10px 12px;
			font-size: var(--text-sm);
			font-weight: 600;
			white-space: nowrap;
			text-decoration: none;
			display: inline-flex;
			align-items: center;
			gap: 8px;
			transition: background .2s;
			margin-left: 0px;
		}

		.btn-start-selling:hover {
			background: var(--color-brand-dark);
			color: #fff;
		}

		.btn-start-selling svg {
			flex-shrink: 0;
		}

		/* ── ROW 2: Category toggle + Nav links ── */
		.nav-bottom {
			display: flex;
			align-items: center;
			gap: 0;
			padding: 0;
		}

		.nav-cat-toggle {
			display: flex;
			align-items: center;
			gap: 7px;
			background: none;
			border: none;
			padding: 12px 20px 12px 0;
			font-family: var(--font-sans);
			font-size: var(--text-base);
			font-weight: 600;
			color: var(--color-text);
			cursor: pointer;
			margin-right: 12px;
			white-space: nowrap;
			transition: color .2s;
		}

		.nav-cat-toggle:hover {
			color: var(--color-brand);
		}

		.nav-main-links {
			display: flex;
			align-items: center;
			flex: 1;
		}

		.nav-main-link {
			font-family: var(--font-sans);
			font-size: var(--text-base);
			font-weight: 500;
			color: #333;
			text-decoration: none;
			padding: 12px 14px;
			display: inline-flex;
			align-items: center;
			gap: 3px;
			transition: color .2s;
			white-space: nowrap;
			line-height: 1;
		}

		.nav-main-link:hover {
			color: var(--color-brand);
		}

		.nav-main-link.active {
			color: var(--color-brand);
			font-weight: 600;
		}

		.nav-main-link svg {
			opacity: .7;
		}

		.nav-main-link.active svg {
			opacity: 1;
		}

		/* ── Mobile menu panel ── */
		.nav-mobile-menu {
			background: var(--color-bg);
			border-top: 1px solid var(--color-border-light);
			padding: 16px 0 20px;
		}

		.nav-mobile-search {
			display: flex;
			align-items: center;
			border: 1.5px solid #ccc;
			border-radius: var(--radius-full);
			overflow: hidden;
			margin-bottom: 16px;
		}

		.nav-mobile-search input {
			flex: 1;
			border: none;
			outline: none;
			padding: 10px 16px;
			font-family: var(--font-sans);
			font-size: var(--text-base);
			color: #333;
		}

		.nav-mobile-search button {
			background: none;
			border: none;
			padding: 0 16px;
			color: #555;
			font-size: 1.05rem;
			cursor: pointer;
			display: flex;
			align-items: center;
			height: 42px;
		}

		.nav-mobile-links {
			display: flex;
			flex-direction: column;
			gap: 2px;
		}

		.nav-mobile-link {
			font-family: var(--font-sans);
			font-size: var(--text-md);
			font-weight: 500;
			color: #333;
			text-decoration: none;
			padding: 10px 0;
			border-bottom: 1px solid var(--color-border-light);
			display: flex;
			align-items: center;
			justify-content: space-between;
			transition: color .2s;
		}

		.nav-mobile-link:last-child {
			border-bottom: none;
		}

		.nav-mobile-link:hover,
		.nav-mobile-link.active {
			color: var(--color-brand);
		}

		.nav-mobile-link.active {
			font-weight: 600;
		}

		.nav-mobile-icons {
			display: flex;
			align-items: center;
			gap: 20px;
			padding: 12px 0 4px;
		}

		.nav-mobile-icons .nav-icon-btn {
			font-size: 1.3rem;
		}



		/* 
			 HERO
		 */
		.hero {
			position: relative;
			width: 100%;
			overflow: hidden;
			min-height: 540px;
		}

		.hero-photo-wrap {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 28%;
			z-index: 0;
		}

		.hero-photo {
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center 20%;
			display: block;
		}



		.hero-left-fill {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			width: 32%;
			background: var(--color-bg);
			z-index: 1;
		}

		.hero-left-fill::after {
			content: '';
			position: absolute;
			top: 0;
			right: -80px;
			bottom: 0;
			width: 80px;
			background: linear-gradient(to right, var(--color-bg), transparent);
			pointer-events: none;
		}

		.hero-content {
			position: relative;
			z-index: 10;
			padding: 52px 0 60px;
			min-height: 540px;
			display: flex;
			align-items: center;
		}

		/* ── Hero text ── */
		.hero-text {
			max-width: 520px;
		}

		.hero-title {
			font-family: var(--font-heading);
			font-size: clamp(2.1rem, 3.8vw, 3rem);
			font-weight: 900;
			color: var(--color-text);
			line-height: 1.08;
			letter-spacing: -.5px;
			margin-bottom: 18px;
		}

		.hero-title .hl {
			color: var(--color-brand);
		}

		.hero-desc {
			font-family: var(--font-body);
			font-size: var(--text-md);
			color: var(--color-text-secondary);
			line-height: 1.65;
			margin-bottom: 32px;
			max-width: 380px;
		}

		.hero-ctas {
			display: flex;
			align-items: center;
			gap: 14px;
			flex-wrap: wrap;
		}

		.btn-create {
			background: var(--color-brand);
			color: var(--neutral-25);
			border: none;
			border-radius: var(--radius-md);
			padding: 13px 22px;
			font-family: var(--font-sans);
			font-size: var(--text-base);
			font-weight: 700;
			text-decoration: none;
			display: inline-flex;
			align-items: center;
			gap: 9px;
			transition: background .2s, transform .15s;
		}

		.btn-create:hover {
			background: var(--color-brand-dark);
			color: var(--neutral-25);
			transform: translateY(-1px);
		}

		.btn-shop {
			background: var(--color-bg);
			color: var(--color-text);
			border: 2px solid var(--color-brand);
			border-radius: var(--radius-md);
			padding: 12px 20px;
			font-family: var(--font-sans);
			font-size: var(--text-base);
			font-weight: 700;
			text-decoration: none;
			display: inline-flex;
			align-items: center;
			gap: 9px;
			transition: background .2s, color .2s, transform .15s;
		}

		.btn-shop:hover {
			background: var(--color-brand);
			color: var(--neutral-25);
			transform: translateY(-1px);
		}

		/* ── Stat badges ── */
		.hero-stats {
			position: absolute;
			left: 34%;
			top: 50%;
			transform: translateY(-50%);
			z-index: 12;
			display: flex;
			flex-direction: column;
			gap: 10px;
		}

		.stat-badge {
			background: rgba(255, 255, 255, .94);
			border: 1px solid var(--color-border);
			border-radius: var(--radius-lg);
			padding: 8px 14px 8px 10px;
			display: flex;
			align-items: center;
			gap: 10px;
			box-shadow: 0 4px 18px rgba(0, 0, 0, .10);
			min-width: 148px;
		}

		.stat-icon {
			width: 34px;
			height: 34px;
			background: var(--color-brand);
			border-radius: var(--radius-sm);
			display: flex;
			align-items: center;
			justify-content: center;
			color: var(--neutral-25);
			font-size: var(--text-md);
			flex-shrink: 0;
		}

		.stat-num {
			font-family: var(--font-sans);
			font-size: var(--text-base);
			font-weight: 900;
			color: var(--color-text);
			display: block;
		}

		.stat-lbl {
			font-family: var(--font-sans);
			font-size: var(--text-xs);
			color: var(--color-text-muted);
			display: block;
		}

		/* ── Signup card ── */
		.hero-signup {
			position: absolute;
			right: 10%;
			top: 50%;
			transform: translateY(-50%);
			z-index: 20;
			width: 350px;
			background: var(--color-bg);
			border-radius: var(--radius-xl);
			box-shadow: 0 10px 48px rgba(0, 0, 0, .16);
			padding: 28px 26px 22px;
		}

		.su-title {
			font-family: var(--font-heading);
			font-size: var(--text-lg);
			font-weight: 800;
			color: var(--color-text);
			margin-bottom: 4px;
			line-height: 1.25;
		}

		.su-sub {
			font-family: var(--font-body);
			font-size: var(--text-xs);
			color: var(--color-text-muted);
			margin-bottom: 20px;
		}

		.su-sub a {
			color: var(--color-brand);
			font-weight: 600;
			text-decoration: none;
		}

		.su-sub a:hover {
			text-decoration: underline;
		}

		.su-label {
			font-family: var(--font-sans);
			font-size: var(--text-sm);
			font-weight: 600;
			color: var(--color-text-secondary);
			display: block;
			margin-bottom: 6px;
		}

		.su-input {
			width: 100%;
			border: 1.5px solid var(--color-border);
			border-radius: var(--radius-md);
			padding: 10px 14px;
			font-family: var(--font-sans);
			font-size: var(--text-base);
			color: var(--color-text);
			outline: none;
			margin-bottom: 14px;
			transition: border-color .2s;
		}

		.su-input::placeholder {
			color: var(--neutral-250);
		}

		.su-input:focus {
			border-color: var(--color-brand);
		}

		.su-input.error {
			border-color: #ef4444;
			/* error red — intentional, no token */
		}

		.btn-sms {
			width: 100%;
			background: var(--color-brand);
			color: var(--neutral-25);
			border: none;
			border-radius: var(--radius-md);
			padding: 12px;
			font-family: var(--font-sans);
			font-size: var(--text-base);
			font-weight: 700;
			cursor: pointer;
			margin-bottom: 14px;
			transition: background .2s;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
		}

		.btn-sms:hover {
			background: var(--color-brand-dark);
		}

		.btn-sms:disabled {
			opacity: .7;
			cursor: default;
		}

		.su-success {
			display: none;
			background: var(--color-brand-light);
			border: 1.5px solid var(--color-brand);
			border-radius: var(--radius-md);
			padding: 9px 12px;
			font-family: var(--font-sans);
			font-size: var(--text-sm);
			color: var(--color-brand-dark);
			text-align: center;
			margin-bottom: 14px;
		}

		.su-success.show {
			display: block;
		}

		.su-footer {
			font-family: var(--font-body);
			text-align: center;
			font-size: var(--text-xs);
			color: var(--color-text-muted);
		}

		.su-footer a {
			color: var(--color-brand);
			font-weight: 700;
			text-decoration: none;
		}

		.su-footer a:hover {
			text-decoration: underline;
		}

		/* 
			 SMART TOOLS SECTION
		 */
		.tools-section {
			padding: 72px 0 80px;
			background: var(--color-bg-subtle);
		}

		/* ── Section heading ── */
		.tools-heading {
			font-family: var(--font-heading);
			font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl));
			font-weight: 600;
			color: var(--color-text);
			line-height: 1.2;
			margin-bottom: 14px;
			text-align: center;
		}

		.tools-heading .hl {
			color: var(--color-brand);
			font-weight: 800;
		}

		.tools-sub {
			font-family: var(--font-body);
			font-size: var(--text-base);
			color: var(--color-text-muted);
			line-height: 1.65;
			text-align: center;
			max-width: 480px;
			margin: 0 auto 56px;
		}

		/* ── Feature card ── */
		.feat-card {
			background: var(--color-bg);
			border-radius: var(--radius-lg);
			padding: 36px 28px 30px;
			text-align: center;
			height: 100%;
			border: none;
			transition: box-shadow .22s ease, transform .22s ease;

		}

		.feat-card:hover {
			box-shadow: 1px 2px 7px 3px rgba(6, 6, 7, 0.089);
			background: #fffaff;
			border: 1px solid var(--color-brand);
			transform: translateY(-3px);
		}

		/* Icon container */
		.feat-icon {
			width: 55px;
			height: 55px;
			margin: 0 auto 18px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.feat-icon svg {
			width: 58px;
			height: 58px;
			stroke: var(--color-brand);
			fill: none;
			stroke-width: 1.5;
			stroke-linecap: round;
			stroke-linejoin: round;
		}

		/* Card title */
		.feat-title {
			font-family: var(--font-heading);
			font-size: var(--text-md);
			font-weight: 700;
			color: var(--neutral-700);
			margin-bottom: 10px;
			line-height: 1.3;
		}

		/* Card description */
		.feat-desc {
			font-family: var(--font-body);
			font-size: var(--text-sm);
			color: var(--neutral-450);
			line-height: 1.65;
			margin: 0;
		}

		/* ── CTA button ── */
		.btn-tools-cta {
			display: inline-flex;
			align-items: center;
			gap: 10px;
			background: var(--color-brand);
			color: var(--neutral-25);
			border: none;
			border-radius: var(--radius-md);
			padding: 13px 28px;
			font-family: var(--font-sans);
			font-size: var(--text-base);
			font-weight: 700;
			text-decoration: none;
			margin-top: 52px;
			transition: background .2s, transform .15s;
		}

		.btn-tools-cta:hover {
			background: var(--color-brand-dark);
			color: var(--neutral-25);
			transform: translateY(-1px);
		}

		/* ── Row gap ── */
		.tools-row {
			--bs-gutter-x: 20px;
			--bs-gutter-y: 20px;
		}



		/* how it works section */


		/* ── Section ── */
		.features-section {
			padding: 5rem 1rem;
			background: #fff;
		}

		/* ── Header ── */
		.features-badge {
			display: inline-block;
			font-size: 0.72rem;
			font-weight: 700;
			letter-spacing: 0.12em;
			text-transform: uppercase;
			color: var(--color-brand);
			margin-bottom: 0.75rem;
		}

		.features-heading {
			font-size: var(--text-4xl);
			font-weight: 700;
			color: var(--text);
			letter-spacing: -0.02em;
			line-height: 1.2;
		}

		.features-heading span {
			font-size: clamp(2rem, 4vw, 2rem);
			font-weight: 700;
			color: var(--color-brand);
			letter-spacing: -0.02em;
			line-height: 1.2;
		}

		.features-sub {
			color: var(--muted);
			font-size: 1rem;
			max-width: 680px;
			margin: 0.75rem auto 0;
			line-height: 1.7;
		}

		/* ── Feature item ── */
		.feature-item {
			cursor: pointer;
			border-radius: 12px;
			padding: 1.8rem 1.2rem;
			transition: background 0.3s ease, box-shadow 0.3s ease;
			margin-bottom: 0.5rem;
			border: 1px solid transparent;
			border: 1px solid #f2f2f2;
		}

		.feature-item.active {
			background: #fff;
			border-color: var(--border);
			box-shadow: 1px 2px 7px 3px rgba(6, 6, 7, 0.062);
			;
		}

		/* Icon */
		.feature-icon {
			width: 46px;
			height: 46px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			transition: background 0.3s ease;
			background: var(--primary-10);
			color: var(--primary);
		}

		.feature-item.active .feature-icon {
			background: var(--color-brand);
			color: #fff;
		}

		.feature-icon svg {
			width: 25px;
			height: 25px;
		}

		/* Text */
		.feature-steps {
			font-size: .80rem;
			font-weight: 500;
			color: var(--color-brand);
			margin-bottom: 0.25rem;
			transition: color 0.3s;
		}

		.feature-title {
			font-size: 1.05rem;
			font-weight: 700;
			color: var(--text);
			margin-bottom: 0.25rem;
			transition: color 0.3s;
		}

		.feature-item:not(.active) .feature-title {
			color: #374151;
		}

		.feature-desc {
			font-size: 0.88rem;
			color: var(--muted);
			line-height: 1.6;
			margin: 0;
			transition: color 0.3s;
		}

		.feature-item:not(.active) .feature-desc {
			color: #9CA3AF;
		}

		/* Progress bar */
		.feature-progress-track {
			height: 3px;
			background: #fbfbfb;
			border-radius: 99px;
			margin-top: 0.85rem;
			overflow: hidden;
		}

		.feature-progress-bar {
			height: 100%;
			width: 0%;
			background: linear-gradient(90deg, var(--color-brand), var(--color-brand));
			border-radius: 99px;
			transition: width 0.1s linear;
		}

		/* ── Image panel ── */
		.feature-image-wrap {
			position: relative;
			border-radius: 12px;
			overflow: hidden;
			aspect-ratio: 4/5;
			box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);

		}

		.feature-image-wrap img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0;
			transform: translateY(24px);
			transition: opacity 0.5s ease, transform 0.5s ease;
			border-radius: 8px;
		}

		.feature-image-wrap img.active {
			opacity: 1;
			transform: translateY(0);
		}


		/* 
			 PEOPLE CHOOSE
		 */
		.people-section {
			padding: 70px 0 72px;
			background: #ffffff;
			text-align: center;
		}

		.people-heading {
			font-size: clamp(1.5rem, 3vw, 2rem);
			color: var(--color-text);
			margin-bottom: 10px;
		}

		.people-heading .hl {
			color: var(--color-brand);
			font-weight: 700;
		}

		.people-sub-text {
			font-size: .9rem;
			color: var(--color-text-secondary);
			margin: 0 auto 50px;
			line-height: 1.65;
			max-width: 450px;
		}

		.marquee-outer {
			position: relative;
			overflow: hidden;
			-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
			mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
		}

		.marquee-row {
			display: flex;
			gap: 12px;
			margin-bottom: 12px;
			width: max-content;
		}

		.marquee-row.row1 {
			animation: scrollLeft 40s linear infinite;
		}

		.marquee-row.row2 {
			animation: scrollRight 45s linear infinite;
		}

		@keyframes scrollLeft {
			from {
				transform: translateX(0);
			}

			to {
				transform: translateX(-50%);
			}
		}

		@keyframes scrollRight {
			from {
				transform: translateX(-50%);
			}

			to {
				transform: translateX(0);
			}
		}

		.marquee-outer:hover .marquee-row {
			animation-play-state: paused;
		}

		.logo-chip {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 75px;
			min-width: 185px;
			padding: 0 22px;
			border: 1.5px solid var(--color-border);
			border-radius: var(--radius-md);
			background: #fff;
			flex-shrink: 0;
			transition: border-color .2s, box-shadow .2s;

		}

		.logo-chip:hover {
			border-color: var(--color-brand);
		}

		.logo-chip img {
			width: 150px;
			object-fit: contain;
		}

		.lilabali-fixed {
			position: absolute;
			top: 48%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 20;
			background: #111;
			border-radius: var(--radius-lg);
			width: 137px;
			height: 137px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 10px;
			box-shadow: 0px 0px 40px 20px rgb(255 255 255), 0 2px 16px 20px rgb(255 255 255);
			pointer-events: none;
		}

		.lilabali-fixed svg {
			width: 100px;
			height: 100px;
		}

		.lilabali-fixed-label {
			font-size: .72rem;
			font-weight: 900;
			color: #fff;
			letter-spacing: 2.5px;
			text-transform: uppercase;
		}

		.brand-heavy-metal {
			font-size: .65rem;
			font-weight: 900;
			color: #111;
			text-align: left;
			line-height: 1.2;
			text-transform: uppercase;
			letter-spacing: .5px;
		}

		.brand-heavy-metal span {
			display: block;
			font-size: .58rem;
			font-weight: 700;
			color: #555;
		}

		.brand-jubbathobe {
			display: flex;
			align-items: center;
			gap: 5px;
			font-size: .72rem;
			font-weight: 600;
			color: #333;
		}

		.brand-jubbathobe .jt-icon {
			width: 22px;
			height: 22px;
			border-radius: var(--radius-full);
			border: 1.5px solid #333;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: .65rem;
		}

		.brand-muslim-names {
			display: flex;
			align-items: center;
			gap: 5px;
		}

		.brand-muslim-names .mn-icon {
			width: 26px;
			height: 26px;
			background: var(--color-brand);
			border-radius: var(--radius-full);
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: .75rem;
		}

		.brand-muslim-names .mn-text {
			text-align: left;
			line-height: 1.15;
		}

		.brand-muslim-names .mn-text .top {
			font-size: .72rem;
			font-weight: 800;
			color: var(--color-brand);
		}

		.brand-muslim-names .mn-text .bot {
			font-size: .55rem;
			font-weight: 600;
			color: #555;
			letter-spacing: .3px;
		}

		.brand-mu-na {
			display: flex;
			align-items: center;
			gap: 5px;
		}

		.brand-mu-na .mn-icon {
			width: 26px;
			height: 26px;
			background: var(--color-brand);
			border-radius: var(--radius-full);
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: .75rem;
		}

		.brand-mu-na .mn-text .top {
			font-size: .72rem;
			font-weight: 800;
			color: #111;
		}

		.btn-people-cta {
			display: inline-flex;
			align-items: center;
			gap: 10px;
			background: transparent;
			color: var(--color-brand);
			border: 1px solid var(--color-brand);
			border-radius: var(--radius-md);
			padding: 12px 28px;
			font-size: .9rem;
			font-weight: 700;
			text-decoration: none;
			margin-top: 50px;
			transition: background .2s, color .2s;
		}

		.btn-people-cta:hover {
			background: var(--color-brand);
			color: #fff;
		}

		/* 
			 INDUSTRIES
		 */

		.ind-section {
			background: #f5f5f5;
			overflow: hidden;
			padding: 0;
		}

		/* LEFT aligned with container, RIGHT bleed */
		.ind-inner {
			margin-left: max(1.5rem, calc((100vw - 1320px) / 2 + 1.5rem));
			margin-right: 0;

			display: flex;
			align-items: stretch;
			gap: 0;
		}

		/* LEFT CONTENT */
		.ind-left {
			flex: 0 0 320px;
			width: 320px;

			padding: 4rem 2.5rem 4rem 0;

			display: flex;
			flex-direction: column;
			justify-content: center;

			min-height: 500px;
		}

		.ind-left h2 {
			font-size: clamp(1.8rem, 2.5vw, 2rem);
			line-height: 1.12;
			font-weight: 700;
			margin-bottom: 1rem;
		}

		.ind-left p {
			font-size: var(--text-base);
			color: var(--color-text-muted);
			line-height: 1.7;

			max-width: 260px;
			margin-bottom: 2rem;
		}

		/* ARROWS */
		.ind-arrows {
			display: flex;
			gap: .65rem;
		}

		.ind-arrow {
			width: 42px;
			height: 42px;

			border-radius: 50%;
			border: 1.5px solid #cfcfcf;

			background: #fff;
			color: #111;

			display: flex;
			align-items: center;
			justify-content: center;

			cursor: pointer;

			transition: .25s ease;
		}

		.ind-arrow:hover {
			background: #111827;
			border-color: #111827;
			color: #fff;
		}

		/* RIGHT SLIDER */
		.ind-right {
			flex: 1;

			padding: 7rem 0 7rem 2rem;

			overflow: hidden;

			display: flex;
			align-items: center;
		}

		.ind-track {
			display: flex;
			gap: 1.2rem;

			transition: transform .45s cubic-bezier(.4, 0, .2, 1);
			will-change: transform;
		}

		/* CARD */
		.ind-card {
			flex: 0 0 500px;
			width: 300px;
			background: #fff;
			border-radius: 12px;
			overflow: hidden;
			box-shadow: 0 4px 18px rgba(0, 0, 0, .06);
			display: flex;
			flex-direction: column;
			transition: .25s ease;
		}

		.ind-card:hover {
			transform: translateY(-6px);
			box-shadow: 0 12px 34px rgba(0, 0, 0, .12);
		}

		/* IMAGE */
		.ind-card-img {
			width: 100%;
			height: 200px;
			overflow: hidden;
			flex-shrink: 0;
		}

		.ind-card-img img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;

			transition: transform .4s ease;
		}

		.ind-card:hover .ind-card-img img {
			transform: scale(1.06);
		}

		/* BODY */
		.ind-card-body {
			padding: 1.3rem 1.35rem 1.5rem;

			display: flex;
			flex-direction: column;
			flex: 1;
		}

		.ind-card-title {
			font-size: var(--text-base);
			font-weight: 700;
			margin-bottom: .55rem;
		}

		.ind-card-desc {
			font-size: .92rem;
			color: var(--color-text-muted);
			line-height: 1.7;
			margin-bottom: 1rem;

			flex: 1;
		}

		.ind-learn-more {
			display: inline-flex;
			align-items: center;
			gap: .35rem;
			text-decoration: none;
			color: #111827;
			font-size: .95rem;
			font-weight: 600;

			transition: .2s ease;
		}

		.ind-learn-more:hover {
			gap: .6rem;
		}



		/* 
			 CTA BANNER
		 */
		.cta-section {
			padding: 40px 40px 0;
			background: #f4f4f4;
		}

		.cta-inner {
			background: var(--color-brand);
			border-radius: 15px 15px 0 0;
			padding: 60px 40px;
			text-align: center;
			position: relative;
			overflow: hidden;
		}

		.cta-inner::before {
			content: '';
			position: absolute;
			inset: 0;
			background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0px, rgba(255, 255, 255, .07) 1px, transparent 1px, transparent 80px);
			pointer-events: none;
		}

		.cta-inner h2 {
			font-size: clamp(1.8rem, 4vw, 2.5rem);
			font-weight: 700;
			color: #fff;
			margin-bottom: 28px;
			line-height: 1.15;
			position: relative;
		}

		.btn-cta-white {
			display: inline-flex;
			align-items: center;
			gap: 10px;
			background: #fff;
			color: var(--color-brand);
			border: 2px solid #fff;
			border-radius: var(--radius-md);
			padding: 13px 32px;
			font-size: .92rem;
			font-weight: 700;
			text-decoration: none;
			position: relative;
			transition: background .2s, color .2s;
		}

		.btn-cta-white:hover {
			background: transparent;
			color: #fff;
		}

		/* 
			 FOOTER TOP
		 */
		.footer-top {
			background: #fff;
			padding: 48px 0 32px;
			text-align: center;
		}

		.footer-logo-wrap {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 12px;
			margin-bottom: 16px;
		}

		.footer-logo-wrap svg {
			width: 300px;
		}



		.footer-logo-sub {
			font-size: .55rem;
			letter-spacing: 4px;
			color: var(--color-text-muted);
			font-weight: 400;
			text-transform: uppercase;
			display: block;
			margin-top: 2px;
		}

		.footer-top-info {
			font-size: .82rem;
			color: var(--color-text-muted);
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 14px;
			flex-wrap: wrap;
			margin-bottom: 20px;
		}

		.footer-top-info span {
			color: var(--color-text-muted);
		}

		.footer-top-social {
			display: flex;
			justify-content: center;
			gap: 14px;
			margin-bottom: 20px;
		}

		.footer-top-social a {
			color: #888;
			font-size: 1.15rem;
			text-decoration: none;
			transition: color .2s;
		}

		.footer-top-social a:hover {
			color: #fff;
		}

		.footer-top-copy {
			font-size: .75rem;
			color: var(--color-text-muted);
		}

		/* 
			 FOOTER BOTTOM
		 */
		.footer-bottom-area {
			background: #1a1a1a;
			padding: 40px 0 32px;
			border-top: 1px solid #2a2a2a;
		}

		.footer-col-title {
			font-size: .85rem;
			font-weight: 700;
			color: var(--color-text-muted);
			margin-bottom: 16px;
		}

		.footer-links {
			list-style: none;
			padding: 0;
		}

		.footer-links li {
			margin-bottom: 10px;
		}

		.footer-links li a {
			font-size: .8rem;
			color: #777;
			text-decoration: none;
			transition: color .2s;
		}

		.footer-links li a:hover {
			color: #fff;
		}

		.footer-newsletter-desc {
			font-size: .8rem;
			color: #777;
			line-height: 1.6;
			margin-bottom: 14px;
		}

		.footer-email-row {
			display: flex;
			align-items: center;
			border: 1px solid #333;
			border-radius: var(--radius-sm);
			background: #222;
			overflow: hidden;
		}

		.footer-email-row input {
			flex: 1;
			background: none;
			border: none;
			padding: 10px 14px;
			font-size: .8rem;
			color: #ccc;
			outline: none;
		}

		.footer-email-row input::placeholder {
			color: #555;
		}

		.footer-email-send {
			background: none;
			border: none;
			padding: 10px 14px;
			color: #777;
			cursor: pointer;
			font-size: 1rem;
			transition: color .2s;
		}

		.footer-email-send:hover {
			color: var(--color-brand);
		}




		.testimonial-section {
			padding: 50px 20px 45px;
			background: #ffffff;
			overflow: hidden;
			font-family: Arial, sans-serif;
		}

		.testimonial-header {
			max-width: 620px;
			margin: 0 auto;
			text-align: center;
		}

		.tag {
			display: inline-block;
			padding: 6px 16px;
			border: 1px solid #ddd;
			border-radius: 999px;
			font-size: 14px;
			margin-bottom: 18px;
		}

		.testimonial-header h2 {
			font-size: 32px;
			font-family: var(--font-heading);
			line-height: 1.1;
			margin: 0;
			font-weight: 700;
			color: #111;
		}

		.testimonial-header h2 span {

			color: var(--color-brand);
		}

		.testimonial-header p {
			margin-top: 18px;
			color: #666;
			font-size: 16px;
		}

		.testimonial-wrapper {
			max-width: 1140px;
			margin: 60px auto 0;
			display: flex;
			justify-content: center;
			gap: 24px;
			max-height: 500px;
			overflow: hidden;
			mask-image: linear-gradient(to bottom,
					transparent,
					black 20%,
					black 80%,
					transparent);
			-webkit-mask-image: linear-gradient(to bottom,
					transparent,
					black 20%,
					black 80%,
					transparent);
		}

		.testimonial-column {
			width: 320px;
			overflow: hidden;
		}

		.testimonial-track {
			display: flex;
			flex-direction: column;
			gap: 24px;
			animation: scrollUp 16s linear infinite;
		}

		.speed-1 .testimonial-track {
			animation-duration: 15s;
		}

		.speed-2 .testimonial-track {
			animation-duration: 19s;
		}

		.speed-3 .testimonial-track {
			animation-duration: 17s;
		}

		.card {
			padding: 28px;
			border: 1px solid #e5e5e5;
			border-radius: 28px;
			background: #fff;
			box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
		}

		.card p {
			margin: 0;
			color: #333;
			line-height: 1.6;
			font-size: 15px;
		}

		.user {
			display: flex;
			align-items: center;
			gap: 12px;
			margin-top: 22px;
		}

		.user img {
			width: 42px;
			height: 42px;
			border-radius: 50%;
			object-fit: cover;
		}

		.user h4 {
			margin: 0;
			font-size: 15px;
			color: #111;
		}

		.user span {
			font-size: 13px;
			color: #777;
		}

		@keyframes scrollUp {
			from {
				transform: translateY(0);
			}

			to {
				transform: translateY(-50%);
			}
		}



		@media (max-width: 576px) {

			.hide-mobile {
				display: none;
			}

			.testimonial-column {
				width: 100%;
			}

			.testimonial-header h2 {
				font-size: 30px;
			}


			.cta-section {
				padding: 40px 0 0;
			}

			.nav-links {
				display: none;
			}

			.hero {

				min-height: 728px;
			}

			.hero-title {
				font-size: var(--text-3xl);
			}

			.hero-ctas {
				flex-direction: column;
				align-items: flex-start;
			}

			.btn-create,
			.btn-shop {
				width: 100%;
				justify-content: center;
			}

			.overlay {
				position: absolute;
				inset: 0;
				background: linear-gradient(to bottom, rgb(255 255 255), rgb(255 255 255 / 5%));
			}
		}



		/* Tablets */
		@media (max-width: 768px) {
			.hero-content {
				padding: 48px 0 40px;
			}

			.hero-stats {
				display: none;
			}

			.hero-signup {
				max-width: 100%;
			}

			.hero-title {
				font-size: var(--text-4xl);
			}

			.nav-search-wrap {
				display: none;
			}

			.nav-right .nav-icon-btn {
				display: none;
			}

			.nav-right .btn-start-selling {
				display: none;
			}

		}

		/* Small laptops */
		@media (max-width: 992px) {
			.hide-tablet {
				display: none;
			}

			.testimonial-header h2 {
				font-size: 36px;
			}

			.ind-inner {
				margin-left: 1.2rem;
				flex-direction: column;
			}

			.ind-left {
				width: 100%;
				flex: none;

				min-height: auto;

				padding: 2.5rem 1.2rem 1.5rem 0;
			}

			.ind-left p {
				max-width: 100%;
			}

			.ind-right {
				padding: 0 0 2rem 0;
			}

			.ind-card {
				flex: 0 0 280px;
				width: 280px;
			}

			.features-list {
				display: flex;
				flex-direction: row;
				overflow-x: auto;
				gap: 0.75rem;
				padding-bottom: 0.75rem;
				scrollbar-width: none;
			}

			.features-list::-webkit-scrollbar {
				display: none;
			}

			.feature-item {
				flex-shrink: 0;
				width: 240px;
				margin-bottom: 0;
			}

			.feature-icon {
				display: none;
			}

			.hero-photo-wrap {
				left: 0;
			}

			.hero-left-fill {
				display: none;
			}

			.hero-content {
				padding: 52px 0 48px;
			}

			.hero-photo-wrap::after {
				content: '';
				position: absolute;
				inset: 0;
				background: linear-gradient(to right, rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, .55) 55%, rgba(255, 255, 255, .1) 100%);
			}

			.hero-stats {
				left: 50%;
				transform: translate(-50%, 0);
				top: auto;
				bottom: -180px;
				flex-direction: row;
			}

			.hero-signup {
				position: static;
				transform: none;
				width: 100%;
				margin-top: 32px;
				max-width: 400px;
			}

		}

		@media (max-width: 1199px) {
			.hero-signup {
				width: 390px;
				right: 2%;
			}

			.hero-stats {
				left: 32%;
			}

			.nav-search-wrap {
				max-width: 380px;
			}

			.nav-main-link {
				padding: 12px 10px;
			}
		}

		/* Demo Content */
		.demo-section {
			height: 120vh;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 40px;
			font-weight: 700;
		}

		/* Sidebar */
		.floating-sidebar {
			position: fixed;
			left: 0;
			top: 50%;
			transform: translateY(-50%) translateX(-100%);
			z-index: 9999;

			opacity: 0;
			visibility: hidden;

			transition:
				transform .35s ease,
				opacity .3s ease;
		}


		/* Sidebar */
		.floating-sidebar {
			position: fixed;
			left: 0;
			top: 50%;
			transform: translateY(-50%) translateX(-100%);
			z-index: 9999;

			opacity: 0;
			visibility: hidden;

			transition:
				transform .35s ease,
				opacity .3s ease;
		}

		/* Show After Scroll */
		.floating-sidebar.show {
			transform: translateY(-50%) translateX(0);
			opacity: 1;
			visibility: visible;
		}

		/* Buttons */
		.side-btn {
			width: 58px;
			height: 58px;

			background: #fff;
			border: 1px solid #ececec;

			display: flex;
			align-items: center;

			text-decoration: none;
			color: #9a9a9a;

			position: relative;
			overflow: hidden;

			transition: all .3s ease;
		}

		/* SVG */
		.side-btn svg {
			min-width: 22px;
			width: 22px;
			height: 22px;
			margin-left: 18px;
			stroke: var(--color-brand);
			fill: none;
			stroke-linecap: round;
			stroke-linejoin: round;
			transition: .3s ease;
		}

		/* Text */
		.side-btn span {
			white-space: nowrap;

			opacity: 0;
			visibility: hidden;

			margin-left: 16px;

			font-size: 14px;
			font-weight: 500;

			transition: .25s ease;
		}

		/* Sidebar */
		.floating-sidebar {
			position: fixed;
			left: 0;
			top: 50%;
			transform: translateY(-50%) translateX(-100%);
			z-index: 9999;

			opacity: 0;
			visibility: hidden;

			transition:
				transform .35s ease,
				opacity .3s ease;
		}

		/* Show Sidebar */
		.floating-sidebar.show {
			transform: translateY(65%) translateX(0);
			opacity: 1;
			visibility: visible;
		}

		/* Button */
		.side-btn {
			width: 58px;
			height: 58px;
			background: #fff;
			border: 1px solid #ececec46;
			display: flex;
			align-items: center;
			text-decoration: none;
			color: #9a9a9a;
			overflow: hidden;
			position: relative;
			transition: all .3s ease;
		}

		/* Icon */
		.side-btn svg {
			min-width: 22px;
			width: 22px;
			height: 22px;
			margin-left: 18px;
			stroke: var(--color-brand);
			fill: none;
			stroke-linecap: round;
			stroke-linejoin: round;
		}

		/* Text */
		.side-btn span {
			white-space: nowrap;
			opacity: 0;
			visibility: hidden;
			margin-left: 16px;
			font-size: 14px;
			font-weight: 500;
			transition: .25s ease;
		}

		/* Hover Expand */
		.side-btn:hover {
			width: 170px;
			color: #fff;
			border-radius: 6px;
			background: var(--color-brand);

		}

		.side-btn:hover svg,
		.side-btn.active svg {

			stroke: #fff;
			fill: none;
			stroke-width: 2;

		}


		/* Show Text */
		.side-btn:hover span {
			opacity: 1;
			visibility: visible;
		}

		/* Active */
		.side-btn.active {
			color: #fff;
			background: var(--color-brand);
		}

		/* Top Button No Expand */
		.side-btn.top-btn:hover {
			width: 58px;
		}

		.side-btn.top-btn span {
			display: none;
		}

		/* Mobile */
		@media(max-width:767px) {

			.floating-sidebar {
				top: auto;
				bottom: 20px;
				transform: translateX(-120%);
			}

			.floating-sidebar.show {
				transform: translateX(0);
			}

			.side-btn {
				width: 50px;
				height: 50px;
			}

			.side-btn:hover {
				width: 180px;
			}

			.side-btn.top-btn:hover {
				width: 50px;
			}

		}



		/* 
			 FEATURES CARDS SECTION
		 */
		.features-section {
			padding: 5rem 0 4rem;
			background: var(--color-bg);
		}

		.features-section__heading {
			font-family: var(--font-heading);
			font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl));
			font-weight: 800;
			color: var(--color-text);
			letter-spacing: -0.03em;
			line-height: 1.2;
			margin-bottom: 0.75rem;
		}

		.features-section__heading .text-brand {
			color: var(--color-brand);
		}

		.features-section__subtitle {
			font-size: var(--text-md);
			color: var(--neutral-700);
			line-height: 1.7;
			max-width: 480px;
			margin: 0 auto;
		}

		.feature-card {
			background: var(--color-bg);
			border: 1px solid #ede9fe;
			border-radius: var(--radius-lg);
			padding: 1.6rem 1.4rem;
			height: 100%;
			display: flex;
			align-items: flex-start;
			gap: 1.1rem;
			box-shadow: 0 4px 20px rgba(139, 47, 201, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
			transition: box-shadow 0.22s, transform 0.22s;
		}

		.feature-card:hover {
			box-shadow: 0 12px 36px rgba(139, 47, 201, 0.15), 0 2px 8px rgba(0, 0, 0, 0.06);
			transform: translateY(-4px);
		}

		.feature-card__icon-wrap {
			width: 52px;
			height: 52px;
			min-width: 52px;
			border-radius: var(--radius-lg);
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: var(--text-2xl);
		}

		.icon--purple {
			background: #ede9fe;
			color: var(--color-brand);
		}

		.icon--blue {
			background: #dbeafe;
			color: #2563eb;
		}

		.icon--green {
			background: #d1fae5;
			color: #059669;
		}

		.icon--orange {
			background: #fff3e0;
			color: #ea580c;
		}

		.icon--teal {
			background: #ccfbf1;
			color: #0d9488;
		}

		.icon--pink {
			background: #fce7f3;
			color: #db2777;
		}

		.feature-card__title {
			font-family: var(--font-heading);
			font-size: var(--text-md);
			font-weight: 700;
			color: var(--color-text);
			margin-bottom: 0.35rem;
		}

		.feature-card__desc {
			font-size: var(--text-sm);
			color: var(--color-text-muted);
			line-height: 1.65;
			margin: 0;
		}

		.btn-features-cta {
			background: var(--color-brand);
			color: var(--neutral-25);
			border: none;
			border-radius: var(--radius-md);
			padding: 0.8rem 2rem;
			font-family: var(--font-sans);
			font-size: var(--text-sm);
			font-weight: 700;
			text-decoration: none;
			display: inline-flex;
			align-items: center;
			gap: 0.5rem;
			transition: background 0.18s, transform 0.12s;
		}

		.btn-features-cta:hover {
			background: var(--color-brand-dark);
			color: var(--neutral-25);
			transform: translateY(-1px);
		}


		/* 
			 RESPONSIVE
		 */
		@media (max-width: 991.98px) {
			.hero-section__overlay {
				padding: 3rem 0;
			}

			.hero-signup-card {
				max-width: 100%;
				margin: 2rem auto 0;
			}

			.hero-section__subtitle {
				max-width: 100%;
			}

			.feat-section {
				padding: 3.5rem 0;
			}

			.feat__desc {
				max-width: 100%;
			}

			.features-section {
				padding: 3.5rem 0 3rem;
			}

		}

		@media (max-width: 575.98px) {
			.hero-section__title {
				font-size: var(--text-3xl);
			}

			.domain-toggle {
				grid-template-columns: 1fr;
			}

			.feat-section {
				padding: 2.5rem 0;
			}

			.feat__title {
				font-size: var(--text-2xl);
			}


			.btn-hero-primary,
			.btn-hero-secondary {
				padding: 10px 12px;
				font-size: 12px;
			}
		}


		/* 
			 FAQ SECTION
		 */
		.faq-section {
			padding: 5rem 0 5.5rem;
			background: var(--color-bg-brand);
		}

		.faq-section__heading {
			font-size: var(--text-4xl);
			font-weight: 700;
			color: var(--color-text);
			letter-spacing: -0.03em;
		}

		.faq-section__subtitle {
			font-size: var(--text-md);
			color: var(--neutral-700);
			line-height: 1.7;
			max-width: 540px;
			margin: 0 auto;
		}

		.faq-item {
			border-bottom: 1px solid var(--color-border);
		}

		.faq-item:first-of-type {
			border-top: 1px solid var(--color-border);
		}

		.faq-btn {
			width: 100%;
			background: var(--color-bg-brand);
			border: none;
			padding: 1.25rem 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 1rem;
			text-align: left;
			font-family: var(--font-sans);
			font-size: var(--text-md);
			font-weight: 600;
			color: var(--color-text);
			cursor: pointer;
			transition: color 0.18s;
		}

		.faq-btn:hover {
			color: var(--color-brand);
		}

		.faq-btn.open {
			color: var(--color-text);
			font-size: var(--text-md);
		}

		.faq-btn__icon {
			flex-shrink: 0;
			font-size: var(--text-md);
			color: var(--color-text-muted);
			transition: transform 0.22s;
		}

		.faq-btn.open .faq-btn__icon {
			transform: rotate(180deg);
		}

		.faq-answer {
			max-height: 0;
			overflow: hidden;
			transition: max-height 0.3s ease, padding 0.3s ease;
		}

		.faq-answer.open {
			max-height: 300px;
			padding-bottom: 1.25rem;
		}

		.faq-answer p {
			font-size: var(--text-md);
			color: var(--neutral-500);
			line-height: 1.75;
			margin: 0;
		}

		/* 
			 RESPONSIVE
		 */
		@media (max-width: 991.98px) {
			.pricing-section {
				padding: 3.5rem 0;
			}

			.why-section {
				padding: 3.5rem 0 3rem;
			}

			.faq-section {
				padding: 3.5rem 0;
			}

			.pricing-card--featured {
				transform: none;
			}
		}

		@media (max-width: 575.98px) {
			.pricing-section {
				padding: 2.5rem 0;
			}

			.why-section {
				padding: 2.5rem 0 2rem;
			}

			.faq-section {
				padding: 2.5rem 0;
			}
		}



		/* 
			 HERO
		 */
		.hero-section {
			position: relative;
			overflow: hidden;
			min-height: 540px;
		}

		.hero-section__overlay {
			position: relative;
			z-index: 1;
			padding: 6rem 0 6rem;
		}

		.hero-section__badge {
			display: inline-flex;
			align-items: center;
			gap: 0.4rem;
			background: rgba(255, 255, 255, 0.92);
			border: 1px solid var(--color-border);
			border-radius: var(--radius-full);
			padding: 0.35rem 0.9rem;
			font-family: var(--font-sans);
			font-size: var(--text-xs);
			font-weight: 600;
			color: var(--color-text);
			margin-bottom: 1.4rem;
		}

		.hero-section__title {
			font-family: var(--font-heading);
			font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
			font-weight: 800;
			line-height: 1.1;
			color: var(--neutral-600);
			letter-spacing: -0.03em;
			margin-bottom: 1rem;
		}

		.hero-section__title .text-brand {
			color: var(--color-brand);
		}

		.hero-section__subtitle {
			font-size: var(--text-md);
			color: var(--neutral-700);
			line-height: 1.6;
			margin-bottom: 2rem;
			max-width: 420px;
		}

		.hero-section__actions {
			display: flex;
			flex-wrap: wrap;
			gap: 0.75rem;
		}

		.btn-hero-primary {
			background: var(--color-brand);
			color: var(--neutral-25);
			border: none;
			border-radius: var(--radius-md);
			padding: 0.75rem 1.5rem;
			font-family: var(--font-sans);
			font-weight: 700;
			font-size: var(--text-sm);
			text-decoration: none;
			display: inline-flex;
			align-items: center;
			gap: 0.4rem;
			transition: background 0.18s, transform 0.12s;
		}

		.btn-hero-primary:hover {
			background: var(--color-brand-dark);
			color: var(--neutral-25);
			transform: translateY(-1px);
		}

		.btn-hero-secondary {
			background: #ffffff;
			color: var(--color-text);
			border: 2px solid var(--color-brand);
			border-radius: var(--radius-md);
			padding: 12px 20px;
			font-family: var(--font-sans);
			font-size: var(--text-base);
			font-weight: 700;
			text-decoration: none;
			display: inline-flex;
			align-items: center;
			gap: 9px;
			transition: background .2s, color .2s, transform .15s;
		}

		.btn-hero-secondary:hover {
			background: var(--color-brand);
			border-color: var(--color-brand);
			color: var(--neutral-25);
		}


		/* 
			 FEATURES CARDS SECTION
		 */
		.features-section {
			padding: 5rem 0 4rem;
			background: var(--color-bg-brand);
		}

		.features-section__heading {
			font-family: var(--font-heading);
			font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl));
			font-weight: 800;
			color: var(--color-text);
			letter-spacing: -0.03em;
			line-height: 1.2;
			margin-bottom: 0.75rem;
		}

		.features-section__heading .text-brand {
			color: var(--color-brand);
		}

		.features-section__subtitle {
			font-size: var(--text-md);
			color: var(--neutral-700);
			line-height: 1.7;
			max-width: 480px;
			margin: 0 auto;
		}

		.feature-card {
			background: var(--color-bg);
			border: 1px solid #ede9fe;
			border-radius: var(--radius-lg);
			padding: 1.6rem 1.4rem;
			height: 100%;
			display: flex;
			align-items: flex-start;
			gap: 1.1rem;
			box-shadow: 0 4px 20px rgba(139, 47, 201, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
			transition: box-shadow 0.22s, transform 0.22s;
		}

		.feature-card:hover {
			box-shadow: 0 12px 36px rgba(139, 47, 201, 0.15), 0 2px 8px rgba(0, 0, 0, 0.06);
			transform: translateY(-4px);
		}

		.feature-card__icon-wrap {
			width: 52px;
			height: 52px;
			min-width: 52px;
			border-radius: var(--radius-lg);
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: var(--text-2xl);
		}

		.icon--purple {
			background: #ede9fe;
			color: var(--color-brand);
		}

		.icon--blue {
			background: #dbeafe;
			color: #2563eb;
		}

		.icon--green {
			background: #d1fae5;
			color: #059669;
		}

		.icon--orange {
			background: #fff3e0;
			color: #ea580c;
		}

		.icon--teal {
			background: #ccfbf1;
			color: #0d9488;
		}

		.icon--pink {
			background: #fce7f3;
			color: #db2777;
		}

		.feature-card__title {
			font-family: var(--font-heading);
			font-size: var(--text-md);
			font-weight: 700;
			color: var(--color-text);
			margin-bottom: 0.35rem;
		}

		.feature-card__desc {
			font-size: var(--text-sm);
			color: var(--color-text-muted);
			line-height: 1.65;
			margin: 0;
		}

		.btn-features-cta {
			background: var(--color-brand);
			color: var(--neutral-25);
			border: none;
			border-radius: var(--radius-md);
			padding: 0.8rem 2rem;
			font-family: var(--font-sans);
			font-size: var(--text-sm);
			font-weight: 700;
			text-decoration: none;
			display: inline-flex;
			align-items: center;
			gap: 0.5rem;
			transition: background 0.18s, transform 0.12s;
		}

		.btn-features-cta:hover {
			background: var(--color-brand-dark);
			color: var(--neutral-25);
			transform: translateY(-1px);
		}

		/* 
			 BEST-IN-CLASS / FEATURE ROWS (shared)
		 */
		.feat-section {
			padding: 5rem 0;
			background: var(--color-bg);
		}

		.feat-section+.feat-section {
			border-top: 1px solid var(--color-border);
		}

		.feat__badge {
			display: inline-flex;
			align-items: center;
			gap: 0.35rem;
			background: var(--color-brand-light);
			border: 1px solid var(--color-border);
			border-radius: var(--radius-full);
			padding: 0.35rem 1rem;
			font-family: var(--font-sans);
			font-size: var(--text-xs);
			font-weight: 600;
			color: var(--color-brand);
			margin-bottom: 1.25rem;
		}

		.feat__title {
			font-family: var(--font-heading);
			font-size: var(--text-4xl);
			font-weight: 700;
			color: var(--color-text);
			letter-spacing: -0.03em;
			line-height: 1.15;
			margin-bottom: 1rem;
		}

		.feat__desc {
			font-size: var(--text-md);
			color: var(--neutral-700);
			line-height: 1.8;
			margin-bottom: 1.1rem;
			max-width: 460px;
		}

		.feat__tagline {
			font-family: var(--font-sans);
			font-size: var(--text-sm);
			font-weight: 700;
			color: var(--color-text);
			line-height: 1.6;
			margin-bottom: 2rem;
		}

		.btn-feat-cta {
			background: var(--color-brand);
			color: var(--neutral-25);
			border: none;
			border-radius: var(--radius-md);
			padding: 0.8rem 1.75rem;
			font-family: var(--font-sans);
			font-size: var(--text-sm);
			font-weight: 700;
			text-decoration: none;
			display: inline-flex;
			align-items: center;
			gap: 0.5rem;
			transition: background 0.18s, transform 0.12s;
			cursor: pointer;
		}

		.btn-feat-cta:hover {
			background: var(--color-brand-dark);
			color: var(--neutral-25);
			transform: translateY(-1px);
		}

		.feat__mockup {
			width: 100%;
			display: block;
			border-radius: var(--radius-xl);
			box-shadow: 0 10px 40px rgba(139, 47, 201, 0.12), 0 2px 10px rgba(0, 0, 0, 0.07);
		}

		.mockup-img {
			border-radius: var(--radius-xl);
			box-shadow: 0 12px 48px rgba(139, 47, 201, 0.13), 0 2px 12px rgba(0, 0, 0, 0.07);
			width: 100%;
			display: block;
		}

		/* ── PRICING SECTION ── */
		.section-heading {
			font-size: var(--text-4xl);
			font-weight: 800;
			color: var(--color-text);
			letter-spacing: -0.03em;
			line-height: 1.15;
		}

		.section-heading .text-brand {
			color: var(--color-brand);
		}

		.section-subtitle {
			font-size: var(--text-md);
			color: var(--neutral-700);
			line-height: 1.7;
			max-width: 460px;
			margin: 0 auto;
		}

		.pricing-section {
			padding: 3.5rem 0 4rem;
			background: var(--color-bg-brand);
		}

		/* ── PRICING CARDS ── */
		.pricing-card {
			background: var(--color-bg);
			border: 1.5px solid var(--color-border);
			border-radius: var(--radius-2xl);
			padding: 2rem 1.75rem 1.75rem;
			height: 100%;
			display: flex;
			flex-direction: column;
			position: relative;
			transition: box-shadow 0.22s, transform 0.22s;
		}

		.pricing-card:hover {
			box-shadow: 0 10px 36px rgba(139, 47, 201, 0.11);
			transform: translateY(-3px) !important;
		}

		.pricing-card--featured {
			border-color: var(--color-brand);
			border-width: 2px;
			box-shadow: 0 8px 40px rgba(139, 47, 201, 0.15);
		}

		.pricing-card--featured:hover {
			box-shadow: 0 14px 48px rgba(139, 47, 201, 0.22);
		}

		.pricing-card__badge {
			position: absolute;
			top: 1.6rem;
			right: 1.6rem;
			background: var(--color-brand);
			color: #fff;
			font-size: var(--text-xxs);
			font-weight: 700;
			border-radius: var(--radius-full);
			padding: 0.25rem 0.75rem;
			letter-spacing: 0.02em;
		}

		.pricing-card__tier {
			font-size: var(--text-sm);
			font-weight: 700;
			margin-bottom: 0.15rem;
		}

		.pricing-card__tier--brand {
			color: var(--color-brand);
		}

		.pricing-card__tier--default {
			color: var(--color-text);
		}

		.pricing-card__label {
			font-size: var(--text-xs);
			color: var(--color-text-muted);
			font-weight: 500;
			margin-bottom: 0.6rem;
		}

		.pricing-card__price {
			font-family: var(--font-heading);
			font-size: var(--text-2xl);
			font-weight: 700;
			color: var(--color-text);
			letter-spacing: -0.04em;
			line-height: 1;
			margin-bottom: 0.2rem;
		}

		.pricing-card__price .currency {
			font-size: var(--text-xl);
			font-weight: 600;
			vertical-align: baseline;
		}

		.pricing-card__price .period {
			font-size: var(--text-base);
			font-weight: 500;
			color: var(--color-text-muted);
			letter-spacing: 0;
		}

		/* ── FEATURE LIST ── */
		.pricing-card__features {
			list-style: none;
			padding: 0;
			margin: 1.25rem 0 0;
			flex: 1;
		}

		.pricing-card__features li {
			display: flex;
			align-items: center;
			gap: 0.6rem;
			font-size: var(--text-sm);
			color: var(--color-text);
			padding: 0.34rem 0;
		}

		.pricing-card__features li i {
			color: var(--color-brand);
			font-size: var(--text-md);
			flex-shrink: 0;
		}

		.pricing-card__features li.feat--dim {
			color: #c4c4c4;
		}

		.pricing-card__features li.feat--dim i {
			color: #d8d8d8;
		}

		/* ── HIDDEN FEATURES (mobile only) ── */
		/* Items beyond the first 4 are hidden on mobile by default */
		.pricing-card__features li.feat--hidden {
			display: none;
		}

		/* Toggle button */
		.feat-toggle {
			display: none;
			/* hidden on desktop */
			align-items: center;
			gap: 0.35rem;
			background: none;
			border: none;
			padding: 0.5rem 0 0;
			font-family: var(--font-sans);
			font-size: var(--text-xs);
			font-weight: 600;
			color: var(--color-brand);
			cursor: pointer;
			width: 100%;
			text-align: left;
		}

		.feat-toggle i {
			font-size: 0.75rem;
			transition: transform 0.2s;
		}

		.feat-toggle.is-open i {
			transform: rotate(180deg);
		}

		/* ── CTA BUTTON ── */
		.pricing-card__cta {
			margin-top: 1.25rem;
			width: 100%;
			border-radius: var(--radius-lg);
			padding: 0.8rem 1rem;
			font-family: var(--font-sans);
			font-size: var(--text-sm);
			font-weight: 700;
			text-decoration: none;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 0.5rem;
			transition: all 0.18s;
			cursor: pointer;
			border: 1.5px solid var(--color-border);
		}

		.pricing-card__cta--outline {
			background: transparent;
			color: var(--color-text);
		}

		.pricing-card__cta--outline:hover {
			border-color: var(--color-brand);
			color: var(--color-brand);
		}

		.pricing-card__cta--filled {
			background: var(--color-brand);
			color: #fff;
			border-color: var(--color-brand);
		}

		.pricing-card__cta--filled:hover {
			background: var(--color-brand-dark);
			border-color: var(--color-brand-dark);
			color: #fff;
		}

		/* ── CAROUSEL (mobile) ── */
		.pricing-carousel-wrap {
			margin-left: calc(-50vw + 50%);
			margin-right: calc(-50vw + 50%);
			overflow: hidden;
			position: relative;
		}

		.pricing-carousel-track {
			display: flex;
			overflow-x: auto;
			scroll-snap-type: x mandatory;
			-webkit-overflow-scrolling: touch;
			scrollbar-width: none;
			padding-left: 15vw;
			padding-right: 15vw;
			box-sizing: content-box;
		}

		.pricing-carousel-track::-webkit-scrollbar {
			display: none;
		}

		.pricing-carousel-slide {
			flex: 0 0 70vw;
			width: 70vw;
			scroll-snap-align: center;
			padding: 0.5rem 0.4rem 1rem;
		}

		.pricing-carousel-slide .pricing-card {
			opacity: 0.55;
			transform: scale(0.96);
			transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
			height: 100%;
		}

		.pricing-carousel-slide.is-active .pricing-card {
			opacity: 1;
			transform: scale(1);
			box-shadow: 0 0px 9px rgb(125 5 206 / 42%);
		}

		.pricing-carousel-slide.is-active .pricing-card--featured {
			box-shadow: 0 0px 9px rgb(125 5 206 / 42%);
		}

		/* Arrow buttons */
		.pricing-carousel-arrow {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			z-index: 10;
			width: 36px;
			height: 36px;
			border-radius: var(--radius-full);
			border: 1.5px solid var(--color-border);
			background: var(--color-bg);
			color: var(--color-text);
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
			transition: border-color 0.18s, color 0.18s, opacity 0.18s, box-shadow 0.18s;
			padding: 0;
			font-size: 1rem;
		}

		#pricingPrev {
			left: calc(15vw - 18px);
		}

		#pricingNext {
			left: calc(85vw - 18px);
		}

		.pricing-carousel-arrow:hover {
			border-color: var(--color-brand);
			color: var(--color-brand);
			box-shadow: 0 4px 16px rgba(139, 47, 201, 0.18);
		}

		.pricing-carousel-arrow:disabled {
			opacity: 0.3;
			cursor: default;
			pointer-events: none;
		}

		/* Dots */
		.pricing-carousel-nav {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 1.25rem;
		}

		.pricing-carousel-dots {
			display: flex;
			align-items: center;
			gap: 0.5rem;
		}

		.pricing-carousel-dots__dot {
			width: 8px;
			height: 8px;
			border-radius: var(--radius-full);
			background: var(--color-border);
			border: none;
			padding: 0;
			cursor: pointer;
			transition: background 0.2s, width 0.2s;
			appearance: none;
			-webkit-appearance: none;
		}

		.pricing-carousel-dots__dot.is-active {
			background: var(--color-brand);
			width: 22px;
		}

		/* On mobile: show toggle button, hide items beyond 4 */
		@media (max-width: 991.98px) {
			.feat-toggle {
				display: flex;
			}
		}

		/* ── lg+: grid layout ── */
		@media (min-width: 992px) {
			.pricing-carousel-wrap {
				margin-left: 0;
				margin-right: 0;
				overflow: visible;
				position: static;
			}

			.pricing-carousel-track {
				overflow: visible;
				scroll-snap-type: none;
				padding: 0;
				gap: 1.5rem;
				box-sizing: border-box;
			}

			.pricing-carousel-slide {
				flex: 1;
				width: auto;
				scroll-snap-align: none;
				padding: 0;
			}

			.pricing-carousel-slide .pricing-card {
				opacity: 1;
				transform: none;
				height: 100%;
			}

			.pricing-carousel-arrow {
				display: none;
			}

			.pricing-carousel-nav {
				display: none;
			}

			/* Show all features on desktop, no toggle */
			.pricing-card__features li.feat--hidden {
				display: flex;
			}

			.feat-toggle {
				display: none;
			}
		}

		/* 
			 RESPONSIVE
		 */
		@media (max-width: 991.98px) {
			.hero-section__overlay {
				padding: 3rem 0;
			}

			.hero-signup-card {
				max-width: 100%;
				margin: 2rem auto 0;
			}

			.hero-section__subtitle {
				max-width: 100%;
			}

			.feat-section {
				padding: 3.5rem 0;
			}

			.feat__desc {
				max-width: 100%;
			}

			.features-section {
				padding: 3.5rem 0 3rem;
			}

		}

		@media (max-width: 575.98px) {

			.features-section {
			padding: 2rem 0 3rem;
		}

			.hero-section__title {
				font-size: var(--text-2xl);
			}

			.domain-toggle {
				grid-template-columns: 1fr;
			}

			.feat-section {
				padding: 2.5rem 0;
			}

			.feat__title {
				font-size: var(--text-2xl);
			}

			.btn-hero-primary,
			.btn-hero-secondary {
				padding: 10px 12px;
				font-size: 12px;
			}

			.hero-section__subtitle {
				width: 60% !important;
				margin-bottom: 20px;
			}

			.hero-title {
				font-size: var(--text-2xl);
			}

			.hero-section__overlay {

				background: linear-gradient(90deg, rgb(255 255 255 / 38%) 0%, rgb(255 255 255 / 0%) 100%);
			}

			.section-heading {
				font-size: var(--text-2xl);
				font-weight: 700;
			}

			.pricing-section {
				padding: 2.5rem 0 2rem;
				background: var(--color-bg-brand);
			}

			.pricing-carousel-slide {
				flex: 0 0 70vw;
				width: 70vw;
				scroll-snap-align: center;
				padding: 0px 4px;
				margin: 16px 0;
			}
			.pricing-carousel-slide .pricing-card {
			opacity: 0.65;
			border: 1px solid #8b2fc9;}

			.tools-sub {
				margin: 0 auto 25px;
			}
		}