﻿/* Unified stylesheet generated from index.php and admin.php */
/* Source: index.php */
:root {
			--font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
			--bg: #ffffff;
			--bg-alt: #f8fafc;
			--surface: #ffffff;
			--ink: #0f172a;
			--ink-secondary: #475569;
			--ink-muted: #94a3b8;
			--border: #e2e8f0;
			--border-light: #f1f5f9;
			--blue: #2563eb;
			--blue-light: #dbeafe;
			--blue-dark: #1d4ed8;
			--consent-link: #fef08a;
			--consent-link-hover: #ffffff;
			--green: #059669;
			--green-light: #d1fae5;
			--amber: #d97706;
			--amber-light: #fef3c7;
			--purple: #7c3aed;
			--purple-light: #ede9fe;
			--red-light: #fee2e2;
			--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
			--shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
			--shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);
			--shadow-xl: 0 25px 50px -12px rgba(0,0,0,0.15);
			--radius: 12px;
			--radius-lg: 20px;
			--radius-xl: 28px;
			--accent: #2563eb;
			--ink-strong: #0f172a;
		}

		html[data-theme="dark"] {
			--bg: #0c0f1a;
			--bg-alt: #111827;
			--surface: #1e293b;
			--ink: #f1f5f9;
			--ink-secondary: #94a3b8;
			--ink-muted: #64748b;
			--border: #334155;
			--border-light: #1e293b;
			--blue: #3b82f6;
			--blue-light: rgba(59,130,246,0.15);
			--blue-dark: #60a5fa;
			--consent-link: #facc15;
			--consent-link-hover: #ffffff;
			--green: #34d399;
			--green-light: rgba(52,211,153,0.15);
			--amber: #fbbf24;
			--amber-light: rgba(251,191,36,0.15);
			--purple: #a78bfa;
			--purple-light: rgba(167,139,250,0.15);
			--red-light: rgba(248,113,113,0.15);
			--shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
			--shadow: 0 4px 6px -1px rgba(0,0,0,0.4);
			--shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.5);
			--shadow-xl: 0 25px 50px -12px rgba(0,0,0,0.6);
			--accent: #3b82f6;
			--ink-strong: #f1f5f9;
		}

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

		body {
			font-family: var(--font);
			font-size: 19px;
			background: var(--bg);
			color: var(--ink);
			line-height: 1.6;
			-webkit-font-smoothing: antialiased;
		}

		a { color: inherit; text-decoration: none; }

		.wrap {
			max-width: 1200px;
			margin: 0 auto;
			padding: 0 24px;
		}

		/* â”€â”€â”€ HEADER â”€â”€â”€ */
		.header {
			position: sticky;
			top: 0;
			z-index: 100;
			background: color-mix(in srgb, var(--bg) 85%, transparent);
			backdrop-filter: blur(20px) saturate(1.4);
			border-bottom: 1px solid var(--border);
		}

		.header-inner {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 64px;
		}

		.logo {
			font-size: 20px;
			font-weight: 800;
			letter-spacing: -0.5px;
			display: flex;
			align-items: center;
			gap: 2px;
		}

		.logo-cloud {
			color: var(--blue);
			font-weight: 600;
		}

		.header-nav {
			display: flex;
			align-items: center;
			gap: 32px;
		}

		.header-nav a {
			font-size: 15px;
			font-weight: 500;
			color: var(--ink-secondary);
			transition: color 0.15s;
		}

		.header-nav a:hover { color: var(--ink); }

		.header-controls {
			display: flex;
			align-items: center;
			gap: 12px;
		}

		.lang-switch {
			position: relative;
		}

		.lang-dropdown {
			position: relative;
		}

		.lang-dropdown-summary {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			padding: 6px 8px;
			border: 1px solid var(--border);
			border-radius: 8px;
			background: var(--bg-alt);
			font-size: 12px;
			font-weight: 700;
			color: var(--ink-secondary);
			cursor: pointer;
			list-style: none;
			user-select: none;
		}

		.lang-dropdown-summary::-webkit-details-marker {
			display: none;
		}

		.lang-dropdown-summary::after {
			content: "\25BE";
			font-size: 10px;
			color: var(--ink-muted);
		}

		.lang-dropdown-menu {
			display: none;
			position: absolute;
			right: 0;
			top: calc(100% + 6px);
			min-width: 148px;
			padding: 6px;
			border: 1px solid var(--border);
			border-radius: 10px;
			background: var(--surface);
			box-shadow: var(--shadow);
			z-index: 130;
			flex-direction: column;
			gap: 4px;
		}

		.lang-dropdown[open] .lang-dropdown-menu {
			display: flex;
		}

		.lang-link {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			padding: 6px 8px;
			border: 1px solid var(--border);
			border-radius: 8px;
			background: var(--bg-alt);
			font-size: 12px;
			font-weight: 700;
			color: var(--ink-secondary);
			width: 100%;
			justify-content: flex-start;
		}

		.lang-link.active {
			border-color: var(--blue);
			color: var(--blue);
			background: var(--blue-light);
		}

		.flag-icon {
			width: 16px;
			height: 12px;
			border-radius: 2px;
			box-shadow: 0 0 0 1px rgba(15,23,42,0.12);
			vertical-align: middle;
		}

		.flag-token {
			display: inline-flex;
			align-items: center;
			gap: 4px;
		}

		.flag-word {
			font-size: 0.9em;
			font-weight: 600;
			white-space: nowrap;
		}

		.header-auth {
			display: inline-flex;
			align-items: center;
			gap: 8px;
		}

		.header-auth-btn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			padding: 8px 12px;
			border-radius: 8px;
			border: 1px solid var(--border);
			font-size: 12px;
			font-weight: 700;
			line-height: 1;
		}

		.header-auth-btn.register {
			background: var(--blue);
			color: #fff;
			border-color: var(--blue);
		}

		.header-auth-btn.login {
			background: var(--surface);
			color: var(--ink-secondary);
		}

		.lang-select {
			appearance: none;
			background: var(--bg-alt);
			border: 1px solid var(--border);
			color: var(--ink);
			padding: 6px 12px;
			border-radius: 8px;
			font-size: 13px;
			font-weight: 600;
			font-family: var(--font);
			cursor: pointer;
		}

		.theme-btn {
			width: 36px;
			height: 36px;
			border-radius: 10px;
			border: 1px solid var(--border);
			background: var(--bg-alt);
			color: #facc15;
			font-size: 16px;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: background 0.15s, color 0.15s;
		}

		.theme-btn:hover { background: var(--border); color: #f59e0b; }

		/* â”€â”€â”€ HERO â”€â”€â”€ */
		.hero {
			padding: 80px 0 60px;
			text-align: center;
			position: relative;
			overflow: hidden;
			isolation: isolate;
		}

		.hero-video {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			opacity: 0.82;
			z-index: 0;
		}

		.hero-overlay {
			position: absolute;
			inset: 0;
			background: linear-gradient(180deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.5) 100%);
			z-index: 1;
		}

		html[data-theme="dark"] .hero-overlay {
			background: linear-gradient(180deg, rgba(12,15,26,0.35) 0%, rgba(12,15,26,0.55) 100%);
		}

		.hero::before {
			content: "";
			position: absolute;
			top: -120px;
			left: 50%;
			transform: translateX(-50%);
			width: 800px;
			height: 600px;
			background: radial-gradient(ellipse, rgba(37,99,235,0.12) 0%, transparent 70%);
			pointer-events: none;
			z-index: 2;
		}

		.hero > .wrap {
			position: relative;
			z-index: 3;
		}

		html[data-theme="dark"] .hero::before {
			background: radial-gradient(ellipse, rgba(59,130,246,0.08) 0%, transparent 70%);
		}

		.hero h1 {
			font-size: clamp(40px, 6vw, 72px);
			font-weight: 900;
			letter-spacing: -2px;
			line-height: 1.05;
			margin-bottom: 20px;
			background: linear-gradient(135deg, var(--ink) 0%, var(--blue) 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
		}

		html[data-theme="dark"] .hero h1 {
			background: linear-gradient(135deg, #f1f5f9 0%, #60a5fa 100%);
			-webkit-background-clip: text;
			background-clip: text;
		}

		html[data-theme="dark"] .hero-subtitle {
			color: #f1f5f9;
		}

		.hero-subtitle {
			font-size: clamp(16px, 2vw, 20px);
			color: #000;
			max-width: 640px;
			margin: 0 auto 32px;
			line-height: 1.7;
		}

		.hero-actions {
			display: flex;
			gap: 12px;
			justify-content: center;
			flex-wrap: wrap;
			margin-bottom: 16px;
		}

		.btn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			padding: 12px 24px;
			border-radius: 10px;
			font-size: 15px;
			font-weight: 600;
			font-family: var(--font);
			cursor: pointer;
			border: none;
			transition: transform 0.15s, box-shadow 0.15s;
		}

		.btn:hover { transform: translateY(-1px); }

		.btn-primary {
			background: var(--blue);
			color: #fff;
			box-shadow: 0 4px 14px rgba(37,99,235,0.35);
		}

		.btn-primary:hover {
			box-shadow: 0 6px 20px rgba(37,99,235,0.45);
		}

		.btn-outline {
			background: var(--surface);
			color: var(--ink);
			border: 1px solid var(--border);
			box-shadow: var(--shadow-sm);
		}

		.hero-note {
			font-size: 14px;
			color: var(--ink-muted);
		}

		html[data-theme="dark"] .hero-warning {
			color: #fff;
		}

		.hero-warning {
			display: inline-block;
			margin-top: 12px;
			padding: 8px 14px;
			border-radius: 999px;
			font-size: 12px;
			font-weight: 700;
			letter-spacing: 0.2px;
			background: color-mix(in srgb, var(--blue) 20%, transparent);
			color: #000;
			border: 1px solid color-mix(in srgb, var(--blue) 35%, transparent);
		}

		/* â”€â”€â”€ STATS â”€â”€â”€ */
		.stats {
			padding: 40px 0;
		}

		.stats-grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 16px;
		}

		.stat-card {
			text-align: center;
			padding: 28px 16px;
			background:
				linear-gradient(155deg, rgba(191,219,254,0.38) 0%, rgba(239,246,255,0.92) 58%, rgba(255,255,255,0.98) 100%);
			border: 1px solid var(--border);
			border-radius: var(--radius-lg);
		}

		html[data-theme="dark"] .stat-card {
			background:
				linear-gradient(155deg, rgba(37,99,235,0.22) 0%, rgba(30,41,59,0.92) 62%, rgba(15,23,42,0.96) 100%);
		}

		.stat-value {
			font-size: 28px;
			font-weight: 800;
			letter-spacing: -0.5px;
			color: var(--blue);
		}

		.stat-label {
			font-size: 13px;
			color: var(--ink-secondary);
			margin-top: 4px;
			font-weight: 500;
		}

		/* â”€â”€â”€ SECTIONS â”€â”€â”€ */
		.section {
			padding: 80px 0;
		}

		#admin-services {
			padding-top: 32px;
		}

		.scroll-reveal {
			opacity: 0;
			transform: translate3d(0, 30px, 0);
			filter: blur(2px);
			transition:
				opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
				transform 0.72s cubic-bezier(0.22, 1, 0.36, 1),
				filter 0.72s cubic-bezier(0.22, 1, 0.36, 1);
			transition-delay: var(--reveal-delay, 0ms);
			will-change: opacity, transform, filter;
		}

		.scroll-reveal.is-visible {
			opacity: 1;
			transform: translate3d(0, 0, 0);
			filter: blur(0);
		}

		.reveal-item {
			opacity: 0;
			transform: translate3d(0, 34px, 0);
			filter: blur(2px);
			transition:
				opacity 0.78s cubic-bezier(0.22, 1, 0.36, 1),
				transform 0.78s cubic-bezier(0.22, 1, 0.36, 1),
				filter 0.78s cubic-bezier(0.22, 1, 0.36, 1);
			transition-delay: var(--item-delay, 0ms);
			will-change: opacity, transform, filter;
		}

		.reveal-item.from-left {
			transform: translate3d(-56px, 18px, 0);
		}

		.reveal-item.from-right {
			transform: translate3d(56px, 18px, 0);
		}

		.reveal-item.is-visible {
			opacity: 1;
			transform: translate3d(0, 0, 0);
			filter: blur(0);
		}

		.section-header {
			text-align: center;
			margin-bottom: 48px;
		}

		.section-header h2 {
			font-size: clamp(28px, 4vw, 42px);
			font-weight: 800;
			letter-spacing: -1px;
			margin-bottom: 12px;
		}

		.section-header p {
			font-size: 17px;
			color: var(--ink-secondary);
			max-width: 560px;
			margin: 0 auto;
		}

		.legal-content {
			display: grid;
			gap: 18px;
			width: min(80%, 1180px);
			max-width: none;
			margin: 0 auto;
			text-align: left;
			line-height: 1.75;
		}

		.legal-content p,
		.legal-content ul,
		.legal-content ol {
			margin: 0;
		}

		.section-header .legal-content p,
		.section-header .legal-content li {
			max-width: none;
			margin-left: 0;
			margin-right: 0;
		}

		.legal-content ul,
		.legal-content ol {
			padding-left: 22px;
		}

		.plans-vat-note {
			margin: 0;
			font-size: 13px;
			font-weight: 600;
			color: var(--ink-muted);
		}

		.plans-discount-note {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			margin: 0;
			padding: 7px 12px;
			border-radius: 999px;
			font-size: 13px;
			font-weight: 700;
			color: var(--blue);
			background: var(--blue-light);
		}

		.plans-header {
			max-width: 680px;
			margin-left: auto;
			margin-right: auto;
		}

		.plans-intro {
			margin-bottom: 16px;
		}

		.plans-controls {
			display: inline-flex;
			align-items: center;
			gap: 12px;
			padding: 8px;
			border: 1px solid var(--border);
			border-radius: 16px;
			background: var(--surface);
			box-shadow: var(--shadow);
		}

		.plans-notes {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 12px;
			margin-top: 12px;
			flex-wrap: wrap;
		}

		.banner-gallery-page .section-header p {
			max-width: 760px;
		}

		.banner-gallery-kicker {
			display: inline-flex;
			padding: 6px 12px;
			border-radius: 999px;
			font-size: 12px;
			font-weight: 700;
			letter-spacing: 0.08em;
			text-transform: uppercase;
			background: color-mix(in srgb, var(--accent) 14%, transparent);
			color: var(--ink-strong);
			margin-bottom: 14px;
		}

		.banner-gallery-grid {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 24px;
		}

		.banner-item {
			padding: 22px;
			border: 1px solid var(--border);
			border-radius: 18px;
			background: linear-gradient(170deg, color-mix(in srgb, var(--surface) 92%, #ffffff), var(--surface));
			box-shadow: var(--shadow-sm);
			display: flex;
			flex-direction: column;
			gap: 14px;
		}

		.banner-item-head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 12px;
		}

		.banner-item-head h3 {
			margin: 0;
			font-size: 18px;
			font-weight: 700;
			color: var(--ink-strong);
		}

		.banner-size {
			font-size: 12px;
			font-weight: 700;
			padding: 4px 10px;
			border: 1px solid var(--border);
			border-radius: 999px;
			color: var(--ink-secondary);
			background: var(--bg-alt);
		}

		.banner-preview-wrap {
			padding: 14px;
			border: 1px dashed var(--border);
			border-radius: 14px;
			display: flex;
			align-items: center;
			justify-content: center;
			background:
				radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink-secondary) 18%, transparent) 1px, transparent 0) 0 0/14px 14px,
				var(--bg-alt);
		}

		.banner-preview {
			display: block;
			max-width: 100%;
			height: auto;
			margin: 0 auto;
			border-radius: 10px;
			border: 1px solid var(--border);
		}

		.banner-code {
			display: block;
			width: 100%;
			min-height: 98px;
			padding: 12px;
			border: 1px solid var(--border);
			border-radius: 10px;
			background: var(--bg-alt);
			color: var(--ink-secondary);
			font-size: 13px;
			line-height: 1.4;
			resize: vertical;
		}

		.banner-actions {
			display: flex;
			justify-content: flex-end;
		}

		.banner-copy-btn {
			border: 1px solid var(--border);
			background: color-mix(in srgb, var(--accent) 16%, transparent);
			color: var(--ink-strong);
			font-weight: 700;
			font-size: 13px;
			padding: 9px 12px;
			border-radius: 10px;
			cursor: pointer;
			transition: transform .16s ease, filter .2s ease;
		}

		.banner-copy-btn:hover {
			transform: translateY(-1px);
			filter: brightness(1.04);
		}

		.banner-copy-btn:active {
			transform: translateY(0);
		}

		/* â”€â”€â”€ FEATURES â”€â”€â”€ */
		.features-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 20px;
		}

		.feature-card {
			padding: 28px;
			background:
				linear-gradient(140deg, rgba(248,252,255,0.97) 0%, rgba(239,246,255,0.95) 48%, rgba(219,234,254,0.90) 100%);
			border: 1px solid var(--border);
			border-radius: var(--radius-lg);
			transition: box-shadow 0.2s, transform 0.2s;
		}

		html[data-theme="dark"] .feature-card {
			background:
				linear-gradient(140deg, rgba(30,41,59,0.78) 0%, rgba(30,64,175,0.24) 58%, rgba(37,99,235,0.16) 100%);
		}

		.feature-card:hover {
			box-shadow: var(--shadow-lg);
			transform: translateY(-2px);
		}

		.feature-icon {
			font-size: 32px;
			margin-bottom: 16px;
		}

		.feature-card h3 {
			font-size: 18px;
			font-weight: 700;
			margin-bottom: 8px;
		}

		.feature-card p {
			font-size: 14px;
			color: var(--ink-secondary);
			line-height: 1.6;
		}

		/* â”€â”€â”€ GAMIFICATION â”€â”€â”€ */
		.gamification {
			background: var(--bg-alt);
			border-radius: var(--radius-xl);
			border: 1px solid var(--border);
			padding: 48px;
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 40px;
			align-items: center;
		}

		.gami-left h3 {
			font-size: 28px;
			font-weight: 800;
			letter-spacing: -0.5px;
			margin-bottom: 12px;
		}

		.bonus-label {
			display: inline-block;
			padding: 6px 12px;
			margin-bottom: 12px;
			font-size: 12px;
			font-weight: 800;
			letter-spacing: 1.4px;
			border-radius: 999px;
			background: var(--amber-light);
			color: var(--amber);
		}

		.gami-left p {
			font-size: 15px;
			color: var(--ink-secondary);
			line-height: 1.7;
		}

		.gami-steps {
			list-style: none;
			display: flex;
			flex-direction: column;
			gap: 12px;
		}

		.gami-steps li {
			display: flex;
			align-items: center;
			gap: 12px;
			padding: 14px 18px;
			background: var(--surface);
			border: 1px solid var(--border);
			border-radius: var(--radius);
			font-size: 14px;
			font-weight: 600;
			transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease, background 0.24s ease;
			will-change: transform;
		}

		@media (hover: hover) {
			.gami-steps li:hover,
			.gami-steps li:focus-within {
				background: linear-gradient(135deg, rgba(219,234,254,0.95) 0%, rgba(191,219,254,0.88) 100%);
				transform: translateY(-4px) translateX(4px);
				box-shadow: 0 14px 28px rgba(37,99,235,0.20);
				border-color: color-mix(in srgb, var(--blue) 35%, var(--border));
			}

			.gami-steps li:hover::before,
			.gami-steps li:focus-within::before {
				transform: scale(1.25) rotate(180deg);
			}
		}

		.gami-steps li::before {
			content: "\2022";
			color: var(--blue);
			font-size: 16px;
			flex-shrink: 0;
			transition: transform 0.24s ease;
		}

		.gami-steps li.gami-step-muted {
			color: var(--ink-muted);
			background: var(--bg-alt);
			border-style: dashed;
		}

		.gami-steps li.gami-step-muted::before {
			color: var(--ink-muted);
		}

		.gami-steps li.gami-step-muted:hover,
		.gami-steps li.gami-step-muted:focus-within {
			background: var(--bg-alt);
			transform: none;
			box-shadow: none;
			border-color: var(--border);
		}

		.gami-steps li.gami-step-muted:hover::before,
		.gami-steps li.gami-step-muted:focus-within::before {
			transform: none;
		}

		.sync-visual {
			padding-top: 0;
		}

		.sync-visual-card {
			background: var(--surface);
			border: 1px solid var(--border);
			border-radius: var(--radius-xl);
			overflow: hidden;
			box-shadow: var(--shadow);
		}

		.sync-visual-illustration {
			position: relative;
			display: grid;
			place-items: center;
			padding: 28px;
			background:
				radial-gradient(circle at 20% 20%, rgba(16,185,129,0.18), transparent 45%),
				radial-gradient(circle at 80% 80%, rgba(37,99,235,0.2), transparent 46%),
				linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
		}

		html[data-theme="dark"] .sync-visual-illustration {
			background:
				radial-gradient(circle at 20% 20%, rgba(16,185,129,0.2), transparent 45%),
				radial-gradient(circle at 80% 80%, rgba(37,99,235,0.24), transparent 46%),
				linear-gradient(180deg, #0f172a 0%, #111827 100%);
		}

		.sync-visual-illustration svg {
			display: block;
			width: min(100%, 780px);
			height: auto;
		}

		.sync-image {
			display: block;
			max-width: 100%;
			height: auto;
			border-radius: 14px;
		}

		.sync-image.is-hidden {
			display: none;
		}

		.sync-image-fallback {
			display: none;
			width: min(100%, 780px);
		}

		.sync-image-fallback.is-visible {
			display: block;
		}

		.sync-image-fallback svg {
			display: block;
			width: 100%;
			height: auto;
		}

		.sync-visual-copy {
			padding: 18px 22px 22px;
		}

		.sync-visual-copy h3 {
			font-size: 20px;
			font-weight: 800;
			margin-bottom: 6px;
		}

		.sync-visual-copy p {
			font-size: 14px;
			color: var(--ink-secondary);
		}

		/* â”€â”€â”€ USE CASES â”€â”€â”€ */
		.use-cases-grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 20px;
		}

		.use-case-card {
			padding: 28px;
			background:
				linear-gradient(140deg, rgba(248,252,255,0.97) 0%, rgba(239,246,255,0.95) 48%, rgba(219,234,254,0.90) 100%);
			border: 1px solid var(--border);
			border-radius: var(--radius-lg);
			transition: box-shadow 0.2s, transform 0.2s;
		}

		html[data-theme="dark"] .use-case-card {
			background:
				linear-gradient(140deg, rgba(30,41,59,0.78) 0%, rgba(30,64,175,0.24) 58%, rgba(37,99,235,0.16) 100%);
		}

		.use-case-card:hover {
			box-shadow: var(--shadow-lg);
			transform: translateY(-2px);
		}

		.use-case-icon {
			font-size: 36px;
			margin-bottom: 16px;
		}

		.use-case-card h3 {
			font-size: 16px;
			font-weight: 700;
			margin-bottom: 8px;
		}

		.use-case-card p {
			font-size: 13px;
			color: var(--ink-secondary);
			line-height: 1.6;
		}

		/* â”€â”€â”€ PLANS â”€â”€â”€ */
		/* --- TESTIMONIALS --- */
		.testimonials-section { background: var(--bg-alt); }
		.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
		.testimonial-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px 28px; display: flex; flex-direction: column; gap: 18px; transition: box-shadow 0.2s, transform 0.2s; }
		html[data-theme="dark"] .testimonial-card { background: linear-gradient(140deg, rgba(30,41,59,0.78) 0%, rgba(30,64,175,0.18) 100%); }
		.testimonial-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
		.testimonial-top { display: flex; align-items: center; justify-content: space-between; }
		.testimonial-avatar { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; color: #fff; letter-spacing: -0.5px; flex-shrink: 0; }
		.testimonial-avatar-1 { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); }
		.testimonial-avatar-2 { background: linear-gradient(135deg, #059669 0%, #047857 100%); }
		.testimonial-avatar-3 { background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%); }
		.testimonial-stars { color: #f59e0b; font-size: 16px; letter-spacing: 2px; line-height: 1; }
		.testimonial-quote { font-size: 14px; line-height: 1.75; color: var(--ink-secondary); font-style: italic; flex: 1; }
		.testimonial-quote-mark { display: block; font-size: 52px; line-height: 0.55; color: var(--blue); opacity: 0.2; font-style: normal; margin-bottom: 6px; font-family: Georgia, serif; }
		.testimonial-sig { display: flex; flex-direction: column; gap: 2px; padding-top: 14px; border-top: 1px solid var(--border-light); }
		.testimonial-name { font-size: 14px; font-weight: 700; color: var(--ink); }
		.testimonial-role { font-size: 12px; color: var(--ink-muted); }

		.plans-grid {
			display: grid;
			grid-template-columns: repeat(var(--plans-visible-count, 4), minmax(0, 1fr));
			gap: 20px;
			align-items: start;
		}

		.plan-card {
			padding: 32px;
			background: var(--surface);
			border: 1px solid var(--border);
			border-radius: var(--radius-xl);
			text-align: center;
			position: relative;
			display: flex;
			flex-direction: column;
			height: 100%;
			transition: box-shadow 0.2s, transform 0.2s;
		}

		.plan-card:hover {
			box-shadow: var(--shadow-lg);
			transform: translateY(-2px);
		}

		.plan-card.highlighted {
			border: 2px solid var(--blue);
			box-shadow: var(--shadow-lg), 0 0 0 4px var(--blue-light);
		}

		.plan-badge {
			position: absolute;
			top: -13px;
			left: 50%;
			transform: translateX(-50%);
			padding: 4px 16px;
			background: var(--blue);
			color: #fff;
			font-size: 12px;
			font-weight: 700;
			border-radius: 999px;
			white-space: nowrap;
		}

		.plan-name {
			font-size: 14px;
			font-weight: 700;
			text-transform: uppercase;
			letter-spacing: 1px;
			margin-bottom: 8px;
		}

		.plan-storage {
			font-size: 13px;
			font-weight: 700;
			color: var(--ink-secondary);
			margin-bottom: 12px;
			min-height: 2.8em;
		}

		.plan-name.free { color: var(--green); }
		.plan-name.plus { color: #d97706; }
		.plan-name.pro { color: var(--blue); }
		.plan-name.business { color: var(--purple); }

		.plan-price {
			font-size: 36px;
			font-weight: 900;
			letter-spacing: -1px;
			line-height: 1.1;
			min-height: 1.95em;
			display: flex;
			flex-direction: column;
			justify-content: center;
			gap: 4px;
		}

		.plan-period {
			font-size: 13px;
			color: var(--ink-muted);
			margin-bottom: 8px;
			min-height: 2.7em;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.billing-switch {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			padding: 6px;
			margin-top: 0;
			border: 1px solid var(--border);
			border-radius: 999px;
			background: var(--surface);
		}

		.billing-label {
			font-size: 13px;
			font-weight: 700;
			color: var(--ink-secondary);
			margin: 0 0 0 4px;
			white-space: nowrap;
		}

		.billing-btn {
			border: 0;
			border-radius: 999px;
			padding: 8px 14px;
			font-size: 13px;
			font-weight: 700;
			font-family: var(--font);
			background: transparent;
			color: var(--ink-secondary);
			cursor: pointer;
		}

		.billing-annual-note {
			font-weight: 500;
			opacity: 0.9;
			white-space: nowrap;
		}

		.billing-btn.active {
			background: var(--blue);
			color: #fff;
		}

		.plan-desc {
			font-size: 14px;
			color: var(--ink-secondary);
			margin-bottom: 8px;
			padding-bottom: 12px;
			min-height: 3.2em;
			border-bottom: 1px solid var(--border);
		}

		.plan-bonus-note {
			font-size: 12px;
			color: var(--ink-muted);
			margin: auto 0 16px;
			line-height: 1.45;
		}

		.plan-bonus-note a {
			color: var(--blue);
			font-weight: 700;
			text-decoration: underline;
			text-underline-offset: 2px;
		}

		.plan-cta {
			display: block;
			width: 100%;
			padding: 12px;
			border-radius: 10px;
			font-size: 15px;
			font-weight: 700;
			font-family: var(--font);
			cursor: pointer;
			border: none;
			transition: transform 0.15s, box-shadow 0.15s;
		}

		.plan-cta:hover { transform: translateY(-1px); }

		.plan-cta.free-cta {
			background: var(--green-light);
			color: var(--green);
		}

		.plan-cta.plus-cta {
			background: #fef3c7;
			color: #b45309;
		}

		.plan-cta.pro-cta {
			background: var(--blue);
			color: #fff;
			box-shadow: 0 4px 14px rgba(37,99,235,0.3);
		}

		.plan-cta.business-cta {
			background: var(--purple-light);
			color: var(--purple);
		}

		/* â”€â”€â”€ COMPARISON TABLE â”€â”€â”€ */
		.compare-section {
			padding: 80px 0;
			background: var(--bg-alt);
		}

		.compare-table {
			width: 100%;
			border-collapse: separate;
			border-spacing: 0;
			background: var(--surface);
			border: 1px solid var(--border);
			border-radius: var(--radius-lg);
			overflow: hidden;
			font-size: 14px;
		}

		.compare-table thead th {
			padding: 20px 16px;
			font-weight: 700;
			text-align: center;
			border-bottom: 2px solid var(--border);
			background: var(--bg-alt);
		}

		.compare-table thead th:first-child {
			text-align: left;
			font-size: 15px;
		}

		.compare-table thead th.plan-col-free {
			color: var(--green);
			background: var(--green-light);
		}
		.compare-table thead th.plan-col-plus {
			color: #b45309;
			background: #fef3c7;
		}
		.compare-table thead th.plan-col-pro { color: var(--blue); background: var(--blue-light); }
		.compare-table thead th.plan-col-business { color: var(--purple); background: var(--purple-light); }

		.compare-table tbody td {
			padding: 14px 16px;
			border-bottom: 1px solid var(--border-light);
			text-align: center;
			font-weight: 500;
		}

		.compare-table tbody td:first-child {
			text-align: left;
			color: var(--ink-secondary);
		}

		.compare-table tbody tr:last-child td { border-bottom: none; }

		.compare-table tbody td.pro-col {
			background: var(--blue-light);
		}

		.capacity-cell {
			min-width: 180px;
		}

		.capacity-progress {
			display: flex;
			align-items: center;
			gap: 10px;
		}

		.capacity-gb-cell {
			white-space: nowrap;
			font-variant-numeric: tabular-nums;
		}

		.capacity-bonus-label {
			font-size: 11px;
			font-weight: 700;
			color: #166534;
			background: #dcfce7;
			border-radius: 4px;
			padding: 1px 5px;
			vertical-align: middle;
		}

		.capacity-warning {
			font-size: 11px;
			font-weight: 600;
			border-radius: 4px;
			padding: 2px 6px;
			margin-top: 4px;
			display: inline-block;
		}

		.capacity-warning.over-quota {
			color: #991b1b;
			background: #fee2e2;
		}

		.capacity-warning.near-quota {
			color: #92400e;
			background: #fef3c7;
		}

		.capacity-progress-track {
			position: relative;
			flex: 1 1 auto;
			height: 10px;
			border-radius: 999px;
			background: var(--border-light);
			overflow: hidden;
			border: 1px solid var(--border);
		}

		.capacity-progress-fill {
			height: 100%;
			border-radius: inherit;
			transition: width 0.25s ease;
		}

		.capacity-progress-fill.low {
			background: #16a34a;
		}

		.capacity-progress-fill.mid {
			background: #f59e0b;
		}

		.capacity-progress-fill.high {
			background: #dc2626;
		}

		.capacity-progress-value {
			font-weight: 700;
			color: var(--ink-secondary);
			white-space: nowrap;
			min-width: 56px;
			text-align: right;
		}

		.bonus-rewards-overview {
			margin: 18px 0 36px;
		}

		.bonus-rewards-overview h3 {
			margin: 0 0 10px;
			font-size: 22px;
			color: var(--ink);
		}

		.bonus-rewards-overview > .reg-hint {
			max-width: 760px;
			margin: 0 0 16px;
			color: var(--ink-secondary);
		}

		.bonus-rewards-table {
			table-layout: fixed;
		}

		.bonus-rewards-table th,
		.bonus-rewards-table td {
			vertical-align: top;
		}

		.bonus-rewards-table thead th:first-child,
		.bonus-rewards-table tbody td:first-child {
			width: 30%;
			text-align: left;
		}

		.bonus-rewards-table thead th:nth-child(2),
		.bonus-rewards-table tbody td:nth-child(2) {
			width: 10%;
			color: var(--blue);
			font-weight: 700;
			white-space: nowrap;
		}

		.bonus-rewards-table thead th:nth-child(3),
		.bonus-rewards-table tbody td:nth-child(3) {
			width: 36%;
			white-space: normal;
		}

		.bonus-rewards-table tbody td {
			line-height: 1.5;
		}

		.bonus-rewards-table tbody td:first-child {
			font-weight: 700;
			color: var(--ink);
		}

		.bonus-rewards-table tbody td:nth-child(3) {
			text-align: left;
			color: var(--ink-secondary);
		}

		.bonus-rewards-table thead th:nth-child(4),
		.bonus-rewards-table thead th:nth-child(5) {
			width: 12%;
			white-space: normal;
		}

		.bonus-rewards-table tbody td:nth-child(4),
		.bonus-rewards-table tbody td:nth-child(5) {
			white-space: nowrap;
			text-align: center;
		}

		.bonus-row-paid-only { opacity: 1; }
		.bonus-row-paid-only td { text-decoration: line-through; color: var(--ink-secondary); }
		.bonus-row-paid-only td:first-child { text-decoration: none; }
		.bonus-row-review-locked { opacity: 1; }
		.bonus-row-review-locked td { text-decoration: line-through; color: var(--ink-secondary); }
		.bonus-row-review-locked td:first-child { text-decoration: none; }
		.bonus-rewards-table .bonus-row-coming-soon { opacity: 0.7; }
		.bonus-rewards-table .bonus-row-coming-soon td,
		.bonus-rewards-table .bonus-row-coming-soon td:first-child,
		.bonus-rewards-table .bonus-row-coming-soon td:nth-child(2),
		.bonus-rewards-table .bonus-row-coming-soon td:nth-child(3) {
			color: var(--ink-muted);
		}
		.bonus-paid-only-note { display: inline-block; margin-left: 6px; font-size: 11px; color: var(--ink-muted); background: var(--bg-alt); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; vertical-align: middle; white-space: nowrap; text-decoration: none; }

		html[data-theme="dark"] .banner-preview-wrap {
			background:
				radial-gradient(circle at 1px 1px, rgba(0,0,0,.07) 1px, transparent 0) 0 0/14px 14px,
				#ffffff;
			border-color: #d1d5db;
		}

		html[data-theme="dark"] .banner-preview {
			border-color: #d1d5db;
		}

		.bonus-actions-grid {
			display: grid;
			grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
			gap: 18px;
			margin-top: 18px;
		}

		.bonus-card {
			padding: 18px 20px;
			border: 1px solid var(--border);
			border-radius: 16px;
			background: var(--surface);
			box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
		}

		.bonus-card h4 {
			margin: 0 0 8px;
			font-size: 18px;
			color: var(--ink);
		}

		.bonus-card .reg-hint {
			margin: 0 0 12px;
			color: var(--ink-secondary);
		}

		.bonus-card .reg-link-inline {
			color: var(--blue);
			text-decoration: none;
		}

		.bonus-card .reg-link-inline:hover {
			text-decoration: underline;
		}

		.bonus-affiliate-card .affiliate-url-box {
			--affiliate-control-height: 48px;
			display: flex;
			align-items: stretch;
			gap: 8px;
			flex-wrap: wrap;
			margin: 14px 0 10px;
			padding: 10px 0;
			position: relative;
		}

		.affiliate-url-link {
			flex: 1 1 320px;
			display: flex;
			align-items: center;
			height: var(--affiliate-control-height);
			padding: 35px 12px;
			border: 1px solid var(--border);
			border-radius: 10px;
			background: var(--surface);
			color: var(--blue);
			font-weight: 600;
			text-decoration: none;
			word-break: break-all;
		}

		.affiliate-copy-btn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 42px;
			height: var(--affiliate-control-height);
			border: 1px solid var(--border);
			border-radius: 10px;
			background: var(--surface);
			color: var(--ink);
			cursor: pointer;
			font-size: 16px;
			font-weight: 700;
		}

		.affiliate-copy-btn:hover {
			background: var(--blue-light);
			border-color: var(--blue);
		}

		.affiliate-copy-tooltip {
			position: absolute;
			bottom: calc(100% + 6px);
			left: 50%;
			transform: translateX(-50%);
			background: #166534;
			color: #fff;
			font-size: 12px;
			font-weight: 700;
			padding: 4px 10px;
			border-radius: 6px;
			white-space: nowrap;
			pointer-events: none;
			z-index: 10;
		}

		.affiliate-copy-tooltip::after {
			content: '';
			position: absolute;
			top: 100%;
			left: 50%;
			transform: translateX(-50%);
			border: 5px solid transparent;
			border-top-color: #166534;
		}

		.affiliate-banner-link {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			padding: 7px 11px;
			margin-bottom: 12px;
			border-radius: 999px;
			background: var(--blue-light);
			font-weight: 700;
		}

		.affiliate-rules p {
			margin: 0 0 8px;
		}

		.affiliate-rules ul {
			margin: 0;
			padding-left: 18px;
			text-align: left;
		}

		.affiliate-rules li + li {
			margin-top: 6px;
		}

		.affiliate-claim-note {
			margin-top: 10px !important;
			font-weight: 600;
		}

		.bonus-consent-form {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin: 0;
		}

		.bonus-consent-toggle {
			display: flex;
			align-items: flex-start;
			gap: 10px;
			margin: 0 0 8px;
		}

		.bonus-consent-toggle input[type="checkbox"] {
			width: 18px;
			height: 18px;
			margin-top: 2px;
			accent-color: var(--blue);
		}

		.bonus-consent-toggle span {
			font-weight: 700;
			color: var(--ink);
		}

		.bonus-consent-submit {
			width: auto;
			max-width: 240px;
			margin-top: 10px;
			padding-inline: 18px;
			background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
			color: #ffffff;
			border: 1px solid rgba(37,99,235,0.45);
			box-shadow: 0 10px 24px rgba(37,99,235,0.22);
		}

		.bonus-review-sites {
			margin-top: 18px;
		}

		.bonus-review-table {
			margin: 0 0 12px;
		}

		.bonus-review-table tbody td {
			text-align: left;
			line-height: 1.45;
			color: var(--ink);
			font-weight: 500;
		}

		@media (max-width: 900px) {
			.bonus-actions-grid {
				grid-template-columns: 1fr;
			}

			.banner-gallery-grid {
				grid-template-columns: 1fr;
				gap: 16px;
			}

			.banner-item {
				padding: 16px;
			}

			.banner-item-head {
				flex-direction: column;
				align-items: flex-start;
				gap: 8px;
			}

			.banner-actions {
				justify-content: stretch;
			}

			.banner-copy-btn {
				width: 100%;
			}

			.bonus-rewards-table {
				table-layout: auto;
			}

			.bonus-rewards-table tbody td:nth-child(2),
			.bonus-rewards-table tbody td:nth-child(3) {
				white-space: normal;
			}

		}

		.compare-controls {
			display: flex;
			justify-content: flex-end;
			margin: 0 0 12px;
		}

		.compare-filter {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			font-size: 13px;
			font-weight: 600;
			color: var(--ink-secondary);
			user-select: none;
		}

		.compare-filter input {
			width: 16px;
			height: 16px;
		}

		.compare-table .in-table-cta {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			padding: 10px 8px;
			border-radius: 8px;
			font-size: 12px;
			font-weight: 700;
		}

		.check { color: var(--green); font-size: 18px; }
		.cross { color: var(--ink-muted); font-size: 14px; }

		/* â”€â”€â”€ CTA â”€â”€â”€ */
		.cta-section {
			padding: 80px 0;
		}

		.cta-box {
			text-align: center;
			padding: 60px 40px;
			background: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
			border-radius: var(--radius-xl);
			color: #fff;
		}

		.cta-box h2 {
			font-size: 32px;
			font-weight: 800;
			letter-spacing: -0.5px;
			margin-bottom: 12px;
		}

		.cta-box p {
			font-size: 16px;
			opacity: 0.9;
			margin-bottom: 28px;
		}

		.cta-box .btn {
			background: #fff;
			color: var(--blue);
			font-weight: 700;
			box-shadow: 0 4px 14px rgba(0,0,0,0.15);
		}

		/* CONTACT LINKS */
		.contact-links-row {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			flex-wrap: wrap;
			margin-bottom: 28px;
		}

		.contact-link {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			color: #fff;
			text-decoration: none;
			font-size: 14px;
			font-weight: 500;
			padding: 6px 10px;
			border-radius: 4px;
			transition: all 0.2s ease;
			background: rgba(255,255,255,0.1);
		}

		.contact-link:hover {
			background: rgba(255,255,255,0.2);
			text-decoration: underline;
		}

		.contact-icon {
			font-size: 16px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
		}

		.contact-separator {
			color: rgba(255,255,255,0.5);
			font-size: 12px;
		}

		/* FAQ */
		.faq-section {
			padding-top: 24px;
			padding-bottom: 80px;
		}

		.compat-strip {
			display: flex;
			align-items: center;
			gap: 16px;
			justify-content: center;
			margin-bottom: 40px;
			flex-wrap: wrap;
		}

		.compat-label {
			font-size: 13px;
			font-weight: 600;
			color: var(--ink-secondary);
			text-transform: uppercase;
			letter-spacing: .05em;
			white-space: nowrap;
		}

		.compat-icons {
			display: flex;
			align-items: center;
			gap: 28px;
			flex-wrap: wrap;
			justify-content: center;
		}

		.compat-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 10px;
			transition: transform 0.2s ease;
		}

		.compat-item:hover {
			transform: translateY(-4px);
		}

		.compat-name {
			font-size: 13px;
			font-weight: 700;
			line-height: 1.3;
			text-align: center;
			color: var(--ink-secondary);
			max-width: 85px;
			letter-spacing: -0.3px;
		}

		.compat-icon {
			width: 60px;
			height: 60px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			border-radius: 16px;
			background: color-mix(in srgb, var(--accent) 12%, var(--surface));
			border: 1.5px solid color-mix(in srgb, var(--accent) 20%, var(--border));
			box-shadow: 0 2px 8px rgba(0,0,0,0.08);
			color: color-mix(in srgb, var(--ink) 82%, transparent);
			transition: all 0.3s ease;
		}

		.compat-item:hover .compat-icon {
			background: color-mix(in srgb, var(--accent) 18%, var(--surface));
			border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
			box-shadow: 0 6px 16px rgba(0,0,0,0.12);
		}

		html[data-theme="dark"] .compat-icon {
			background: color-mix(in srgb, var(--accent) 16%, var(--surface));
			border-color: color-mix(in srgb, var(--accent) 26%, var(--border));
			color: #f8fafc;
		}

		html[data-theme="dark"] .compat-name {
			color: color-mix(in srgb, #fff 85%, var(--ink-secondary));
		}

		.compat-icon img,
		.compat-icon svg {
			display: block;
			width: 36px;
			height: 36px;
			transition: filter .2s, transform .2s, opacity .2s;
		}

		html[data-theme="light"] .compat-icon img {
			filter: brightness(0) opacity(.82);
		}

		html[data-theme="dark"] .compat-icon img {
			filter: brightness(0) invert(1) opacity(.92);
		}
 
		.compat-icon:hover img,
		.compat-icon:hover svg {
			transform: scale(1.12);
		}

		html[data-theme="light"] .compat-icon:hover img {
			filter: brightness(0) opacity(1);
		}

		html[data-theme="dark"] .compat-icon:hover img {
			filter: brightness(0) invert(1) opacity(1);
		}

		.faq-list {
			max-width: 920px;
			margin: 0 auto;
			display: grid;
			gap: 12px;
		}

		.faq-item {
			background: linear-gradient(to bottom right, color-mix(in srgb, var(--accent) 12%, var(--surface)) 0%, var(--surface) 60%);
			border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
			border-radius: 14px;
			padding: 0;
			overflow: hidden;
		}

		.faq-item summary {
			cursor: pointer;
			list-style: none;
			padding: 16px 18px;
			font-size: 18px;
			font-weight: 700;
			color: var(--ink);
			display: flex;
			justify-content: space-between;
			align-items: center;
			transition: background-color 0.2s ease;
			border-radius: 12px;
			margin: 2px;
		}

		.faq-item summary::after {
			content: '▼';
			display: inline-block;
			font-size: 12px;
			transition: transform 0.3s ease;
			margin-left: 12px;
			color: var(--accent);
			flex-shrink: 0;
		}

		.faq-item summary:hover {
			background-color: color-mix(in srgb, var(--accent) 8%, transparent);
		}

		.faq-item[open] > summary {
			background-color: color-mix(in srgb, var(--accent) 12%, transparent);
			border-radius: 12px 12px 0 0;
		}

		.faq-item[open] > summary::after {
			transform: rotate(-180deg);
		}

		.faq-item summary::-webkit-details-marker {
			display: none;
		}

		.faq-item p {
			margin: 0;
			padding: 0 18px 16px;
			font-size: 16px;
			line-height: 1.6;
			color: var(--ink-secondary);
			animation: fadeIn 0.3s ease;
		}

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

		/* â”€â”€â”€ REGISTRATION FORM â”€â”€â”€ */
		.reg-form-wrap {
			margin-top: 32px;
			background: rgba(255,255,255,0.12);
			backdrop-filter: blur(10px);
			border-radius: var(--radius-lg);
			padding: 32px;
			max-width: 420px;
			margin-left: auto;
			margin-right: auto;
		}

		.reg-form-wrap h3 {
			font-size: 20px;
			font-weight: 700;
			margin-bottom: 20px;
			color: #fff;
		}

		.reg-field {
			display: flex;
			flex-direction: column;
			gap: 6px;
			margin-bottom: 16px;
		}

		.reg-field label {
			font-size: 13px;
			font-weight: 600;
			color: rgba(255,255,255,0.8);
			text-align: left;
		}

		.required-mark {
			color: #fecaca;
			font-weight: 700;
		}

		.reg-field input {
			display: block;
			width: 100%;
			box-sizing: border-box;
			min-height: 48px;
			padding: 12px 14px;
			border-radius: 10px;
			border: 1px solid rgba(255,255,255,0.25);
			background: rgba(255,255,255,0.15);
			color: #fff;
			font-size: 15px;
			line-height: 1.2;
			font-family: var(--font);
			outline: none;
			transition: border-color 0.15s, background 0.15s;
		}

		.reg-field input::placeholder {
			color: rgba(255,255,255,0.45);
		}

		.reg-field input:focus {
			border-color: rgba(255,255,255,0.6);
			background: rgba(255,255,255,0.22);
		}

		.reg-field .reg-consent-label {
			display: flex;
			align-items: flex-start;
			gap: 12px;
			line-height: 1.45;
			cursor: pointer;
			color: rgba(255,255,255,0.9);
		}

		.reg-field .reg-consent-label span {
			padding-top: 1px;
		}

		.reg-field input.reg-consent-checkbox {
			appearance: none;
			-webkit-appearance: none;
			-moz-appearance: none;
			flex: 0 0 24px;
			width: 24px;
			height: 24px;
			min-height: 24px;
			margin: 0;
			padding: 0;
			border-radius: 7px;
			border: 1px solid rgba(255,255,255,0.42);
			background: rgba(255,255,255,0.14);
			position: relative;
			display: inline-block;
			vertical-align: top;
			transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
		}

		.reg-field input.reg-consent-checkbox:checked {
			background: #1d4ed8;
			border-color: #93c5fd;
		}

		.reg-field input.reg-consent-checkbox:checked::after {
			content: '';
			position: absolute;
			left: 8px;
			top: 4px;
			width: 6px;
			height: 11px;
			border: solid #fff;
			border-width: 0 2px 2px 0;
			transform: rotate(45deg);
		}

		.reg-field input.reg-consent-checkbox:focus-visible {
			outline: none;
			box-shadow: 0 0 0 3px rgba(147,197,253,0.35);
			border-color: #bfdbfe;
		}

		.reg-field .reg-consent-label a {
			color: var(--consent-link);
			font-weight: 700;
			text-decoration: underline;
			text-underline-offset: 2px;
		}

		.reg-field .reg-consent-label a:hover {
			color: var(--consent-link-hover);
		}

		.reg-field select {
			display: block;
			width: 100%;
			box-sizing: border-box;
			min-height: 48px;
			padding: 12px 14px;
			border-radius: 10px;
			border: 1px solid rgba(255,255,255,0.25);
			background: rgba(255,255,255,0.15);
			color: #fff;
			font-size: 15px;
			line-height: 1.2;
			font-family: var(--font);
			outline: none;
			transition: border-color 0.15s, background 0.15s;
		}

		.reg-field select:focus {
			border-color: rgba(255,255,255,0.6);
			background: rgba(255,255,255,0.22);
		}

		.reg-field select option {
			color: #0f172a;
		}

		.reg-field textarea {
			display: block;
			width: 100%;
			box-sizing: border-box;
			padding: 12px 14px;
			border-radius: 10px;
			border: 1px solid rgba(255,255,255,0.25);
			background: rgba(255,255,255,0.15);
			color: #fff;
			font-size: 15px;
			font-family: var(--font);
			line-height: 1.5;
			min-height: 120px;
			resize: vertical;
			outline: none;
			transition: border-color 0.15s, background 0.15s;
		}

		.reg-field textarea::placeholder {
			color: rgba(255,255,255,0.45);
		}

		.reg-field textarea:focus {
			border-color: rgba(255,255,255,0.6);
			background: rgba(255,255,255,0.22);
		}

		.password-field-wrap {
			position: relative;
			display: block;
			width: 100%;
		}

		.reg-password-input {
			width: 100%;
			box-sizing: border-box;
			padding-right: 48px;
		}

		.password-toggle {
			position: absolute;
			right: 8px;
			top: 50%;
			transform: translateY(-50%);
			width: 34px;
			height: 34px;
			border: 1px solid rgba(255,255,255,0.35);
			border-radius: 8px;
			background: rgba(15,23,42,0.28);
			color: #fff;
			font-size: 16px;
			line-height: 1;
			cursor: pointer;
			display: inline-flex;
			align-items: center;
			justify-content: center;
		}

		.password-toggle[aria-pressed="true"] {
			background: rgba(15,23,42,0.46);
		}

		.reg-submit {
			width: 100%;
			padding: 13px;
			border-radius: 10px;
			border: none;
			background: #fff;
			color: var(--blue);
			font-size: 15px;
			font-weight: 700;
			font-family: var(--font);
			cursor: pointer;
			transition: transform 0.15s, box-shadow 0.15s;
			box-shadow: 0 4px 14px rgba(0,0,0,0.15);
		}

		.reg-submit:hover {
			transform: translateY(-1px);
			box-shadow: 0 6px 20px rgba(0,0,0,0.2);
		}

		.reg-note {
			font-size: 12px;
			color: rgba(255,255,255,0.55);
			margin-top: 10px;
		}

		.required-note {
			text-align: left;
		}

		.reg-hint {
			display: block;
			font-size: 12px;
			line-height: 1.35;
			color: rgba(255,255,255,0.62);
			margin-top: 4px;
		}

		.reg-link-inline {
			color: #ffffff;
			font-weight: 600;
			text-decoration: underline;
			text-underline-offset: 3px;
		}

		.status-badge {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			padding: 6px 10px;
			border-radius: 999px;
			font-size: 13px;
			font-weight: 700;
			line-height: 1;
			white-space: nowrap;
		}

		.status-badge::before {
			content: '';
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background: currentColor;
			flex: 0 0 8px;
		}

		.status-badge.ok {
			color: #166534;
			background: #dcfce7;
		}

		.status-badge.warn {
			color: #b45309;
			background: #fef3c7;
		}

		.status-badge.off {
			color: #b91c1c;
			background: #fee2e2;
		}

		.status-badge.locked {
			color: #475569;
			background: #e2e8f0;
		}

		html[data-theme="dark"] .status-badge.locked {
			color: #94a3b8;
			background: #1e293b;
		}

		.admin-public-pricing-link {
			display: inline-block;
			margin-top: 6px;
			margin-bottom: 8px;
		}

		.profile-company-toggle {
			display: flex;
			flex-direction: row;
			align-items: flex-start;
			gap: 10px;
			flex-wrap: wrap;
		}

		.profile-company-toggle input[type="checkbox"] {
			width: 18px;
			height: 18px;
			margin: 0;
			accent-color: #ffffff;
		}

		.profile-company-toggle label {
			margin: 0;
			line-height: 1.2;
		}

		.profile-company-toggle .reg-hint {
			flex: 0 0 100%;
			margin-top: 2px;
			padding-left: 28px;
		}

		.profile-company-fields[hidden] {
			display: none;
		}

		.profile-grid {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 16px;
		}

		.profile-grid .reg-field {
			margin-bottom: 0;
		}

		.profile-grid .profile-company-toggle {
			grid-column: 1 / -1;
			margin-bottom: 12px;
		}

		.profile-grid-full {
			grid-column: 1 / -1;
		}

		.profile-grid-span-2 {
			grid-column: 1 / -1;
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 16px;
			margin-bottom: 12px;
		}

		#admin-create-service .reg-form-wrap {
			max-width: 760px;
			text-align: left;
		}

		#admin-create-service {
			margin: 0 0 18px;
		}

		#admin-create-service .create-service-toggle-button {
			display: inline-flex;
			width: auto;
			min-width: 240px;
			align-items: center;
			justify-content: center;
			padding-inline: 22px;
			margin-bottom: 0;
			background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
			color: #ffffff;
			border: 1px solid rgba(37,99,235,0.5);
			box-shadow: 0 10px 24px rgba(37,99,235,0.24);
		}

		#admin-create-service .create-service-toggle-button:hover {
			box-shadow: 0 14px 30px rgba(37,99,235,0.3);
		}

		#admin-create-service .create-service-form-panel {
			margin-top: 14px;
		}

		html:not([data-theme="dark"]) #admin-create-service #profile_company_restriction_hint,
		html:not([data-theme="dark"]) #admin-create-service #profile_company_id_hint {
			color: var(--ink-secondary);
		}

		#admin-create-service .create-service-form-panel[hidden] {
			display: none;
		}

		#admin-create-service .create-service-annual-toggle,
		#admin-create-service .reg-hint,
		#admin-create-service .create-price-summary {
			text-align: left;
		}

		#admin-create-service .create-service-annual-toggle {
			display: flex;
			width: 100%;
			justify-content: flex-start;
			margin-top: 14px;
		}

		#admin-create-service .create-service-option-hint {
			margin: 6px 0 0 44px;
			max-width: calc(100% - 44px);
			margin-bottom: 0;
		}

		#admin-create-service .create-service-custom-domain-field {
			margin: 8px 0 0 44px;
			max-width: calc(100% - 44px);
		}

		#admin-create-service .create-recurring-meta {
			margin: 14px 0 0 44px;
			max-width: calc(100% - 44px);
			padding: 14px 16px;
			border-radius: 12px;
			background: rgba(2,132,199,0.12);
			border: 1px solid rgba(125,211,252,0.35);
		}

		#admin-create-service .create-recurring-meta h3 {
			margin: 0 0 8px;
			font-size: 16px;
			font-weight: 700;
			color: #ffffff;
		}

		#admin-create-service .create-recurring-meta-intro {
			margin: 0;
			font-size: 13px;
			line-height: 1.45;
			color: rgba(255,255,255,0.9);
		}

		#admin-create-service .create-recurring-meta-list {
			margin: 10px 0 0;
			padding-left: 18px;
			display: grid;
			gap: 6px;
		}

		#admin-create-service .create-recurring-meta-list li {
			font-size: 13px;
			line-height: 1.45;
			color: rgba(255,255,255,0.94);
		}

		#admin-create-service .create-recurring-meta-contact {
			margin: 12px 0 0;
			font-size: 13px;
			line-height: 1.5;
			color: rgba(255,255,255,0.94);
		}

		#admin-create-service .create-recurring-meta-sep {
			display: inline-block;
			margin: 0 8px;
			opacity: 0.75;
		}

		#admin-create-service .recurring-whatsapp-link {
			display: inline-flex;
			align-items: center;
			gap: 6px;
		}

		#admin-create-service .whatsapp-icon {
			display: inline-flex;
			width: 18px;
			height: 18px;
			color: #22c55e;
			vertical-align: text-bottom;
		}

		#admin-create-service .whatsapp-icon svg {
			width: 100%;
			height: 100%;
			display: block;
		}

		#admin-create-service .create-service-custom-domain-field {
			margin-bottom: 0;
		}

		#admin-create-service .reg-form-wrap p {
			margin-bottom: 0;
		}

		.create-service-annual-toggle {
			display: inline-flex;
			align-items: center;
			gap: 14px;
			margin: 8px 0 0;
			font-size: 18px;
			font-weight: 700;
			line-height: 1.2;
			color: #fff;
			cursor: pointer;
		}

		.create-service-annual-toggle input[type="checkbox"] {
			width: 30px;
			height: 30px;
			margin: 0;
			accent-color: #ffffff;
			cursor: pointer;
		}

		#create_service_legal_terms_consent,
		#create_service_recurring_terms_consent {
			width: 30px !important;
			height: 30px !important;
			min-width: 30px;
			min-height: 30px;
			flex: 0 0 30px;
			appearance: auto;
			transform: none;
		}

		.create-price-summary {
			margin-top: 14px;
			padding: 12px 14px;
			border-radius: 10px;
			background: rgba(255,255,255,0.1);
			border: 1px solid rgba(255,255,255,0.18);
		}

		.create-price-summary p {
			margin: 0;
			color: rgba(255,255,255,0.95);
			font-size: 16px;
			line-height: 1.45;
		}

		.create-price-summary-emphasis {
			font-weight: 700;
			color: #ffffff;
		}

		.create-price-summary-strike.is-active {
			text-decoration: line-through;
			text-decoration-thickness: 2px;
			opacity: 0.8;
		}

		.create-price-summary-note {
			margin-top: 8px;
		}

		.create-price-summary p + p {
			margin-top: 4px;
		}

		.create-price-old {
			text-decoration: line-through;
			opacity: 0.75;
			margin-right: 8px;
		}

		.create-price-current {
			font-weight: 700;
		}

		#admin-create-service .create-price-summary + .reg-submit {
			margin-top: 12px;
		}

		.create-service-billing {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 12px;
			margin-bottom: 10px;
		}

		.create-service-billing .billing-label {
			color: rgba(255,255,255,0.9);
			margin-left: 0;
		}

		.create-service-billing .billing-switch {
			background: rgba(255,255,255,0.14);
			border-color: rgba(255,255,255,0.24);
		}

		.create-service-billing .billing-btn {
			color: rgba(255,255,255,0.9);
		}

		#contact-form .reg-form-wrap,
		#admin-contact .reg-form-wrap {
			max-width: 760px;
		}

		.contact-form-grid {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 16px;
		}

		.contact-form-grid .reg-field {
			margin-bottom: 0;
		}

		.contact-form-grid .reg-field:last-of-type,
		.contact-form-grid .reg-submit {
			grid-column: 1 / -1;
		}

		.reg-login-link {
			display: inline-block;
			margin-top: 10px;
			font-size: 14px;
			font-weight: 600;
			color: #fff;
			text-decoration: underline;
			text-underline-offset: 3px;
		}

		.reg-forgot-link {
			display: inline-block;
			margin-top: 8px;
			font-size: 13px;
			font-weight: 600;
			color: rgba(255,255,255,0.92);
			text-decoration: underline;
			text-underline-offset: 3px;
		}

		.reg-subtitle {
			font-size: 14px;
			font-weight: 700;
			margin: 18px 0 10px;
			color: #fff;
		}

		.reg-divider {
			height: 1px;
			background: rgba(255,255,255,0.2);
			margin: 18px 0;
		}

		.reg-submit.secondary:not(.bonus-consent-submit) {
			background: rgba(255,255,255,0.18);
			color: #fff;
			border: 1px solid rgba(255,255,255,0.35);
			box-shadow: none;
		}

		.reg-submit.secondary:not(.bonus-consent-submit):hover {
			box-shadow: none;
		}

		.reg-msg {
			padding: 10px 14px;
			border-radius: 8px;
			font-size: 14px;
			font-weight: 600;
			margin-bottom: 16px;
		}

		.reg-msg.success {
			background: rgba(5,150,105,0.25);
			color: #d1fae5;
		}

		.reg-msg.error {
			background: rgba(239,68,68,0.25);
			color: #fee2e2;
		}

		/* â”€â”€â”€ FOOTER â”€â”€â”€ */
		.footer {
			padding: 24px 0;
			border-top: 1px solid var(--border);
			font-size: 13px;
			color: var(--ink-muted);
			text-align: center;
		}

		.footer .wrap {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 8px;
		}

		.footer-legal {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-wrap: wrap;
			gap: 8px;
			font-size: 14px;
		}

		.footer-legal a {
			color: var(--ink-secondary);
			text-decoration: underline;
			text-underline-offset: 3px;
		}

		.footer-legal-sep {
			color: var(--ink-muted);
		}

		/* â”€â”€â”€ TYPOGRAPHY SCALE UP â”€â”€â”€ */
		.logo { font-size: 24px; }

		.header-nav a,
		.lang-dropdown-summary,
		.lang-link,
		.header-auth-btn,
		.hero-note,
		.hero-warning,
		.stat-label,
		.feature-card p,
		.use-case-card p,
		.sync-visual-copy p,
		.gami-left p,
		.gami-steps li,
		.compare-filter,
		.compare-table .in-table-cta,
		.reg-field label,
		.reg-note,
		.reg-msg,
		.footer {
			font-size: 16px;
		}

		.btn,
		.billing-label,
		.billing-btn,
		.plan-period,
		.plan-storage,
		.plan-name,
		.plan-desc,
		.reg-field input,
		.reg-field select,
		.reg-field textarea,
		.reg-submit,
		.cta-box p {
			font-size: 18px;
		}

		.feature-card h3,
		.use-case-card h3,
		.sync-visual-copy h3,
		.reg-form-wrap h3 {
			font-size: 22px;
		}

		.section-header h2,
		.cta-box h2 {
			font-size: clamp(34px, 4.8vw, 50px);
		}

		.section-header p,
		.hero-subtitle {
			font-size: 20px;
		}

		/* â”€â”€â”€ MOBILE NAV â”€â”€â”€ */
		.mobile-toggle {
			display: none;
			width: 36px;
			height: 36px;
			border: 1px solid var(--border);
			background: var(--bg-alt);
			color: var(--ink);
			border-radius: 8px;
			font-size: 18px;
			cursor: pointer;
			align-items: center;
			justify-content: center;
		}

		/* â”€â”€â”€ RESPONSIVE â”€â”€â”€ */
		@media (max-width: 1024px) {
			.features-grid { grid-template-columns: repeat(2, 1fr); }
			.use-cases-grid { grid-template-columns: repeat(2, 1fr); }
			.testimonials-grid { grid-template-columns: 1fr; }
			.stats-grid { grid-template-columns: repeat(2, 1fr); }
			.plans-grid { grid-template-columns: repeat(2, 1fr); }
		}

		@media (max-width: 1024px) {
			.header-nav { display: none; }
			.mobile-toggle { display: flex; }

			.header-inner {
				height: auto;
				padding: 10px 0;
				flex-wrap: wrap;
				row-gap: 10px;
			}

			.logo {
				width: 100%;
				justify-content: center;
			}

			.header-controls {
				width: 100%;
				justify-content: space-between;
			}

			.header-auth {
				flex-wrap: wrap;
			}

			.header-nav.open {
				display: flex;
				flex-direction: column;
				position: absolute;
				top: 100%;
				left: 0;
				right: 0;
				background: var(--bg);
				border-bottom: 1px solid var(--border);
				padding: 16px 24px;
				gap: 12px;
				z-index: 99;
			}

			.hero { padding: 48px 0 40px; }
			.hero h1 { font-size: 36px; letter-spacing: -1px; }
			.section { padding: 48px 0; }

			.features-grid,
			.plans-grid,
			.stats-grid { grid-template-columns: 1fr; }

			.use-cases-grid { grid-template-columns: 1fr 1fr; }
			.compare-table { font-size: 11px; }

			.gamification {
				grid-template-columns: 1fr;
				padding: 28px;
			}

			.compare-table { font-size: 12px; }
			.compare-table thead th,
			.compare-table tbody td { padding: 10px 8px; }

			.cta-box { padding: 40px 24px; }

			.plans-controls {
				display: flex;
				flex-direction: column;
				align-items: stretch;
				gap: 8px;
			}

			.billing-label {
				margin-left: 0;
				text-align: center;
			}
		}

		@media (max-width: 480px) {
			.use-cases-grid { grid-template-columns: 1fr; }
			.testimonials-grid { grid-template-columns: 1fr; }
		}

		@media (prefers-reduced-motion: reduce) {
			.scroll-reveal,
			.reveal-item,
			.reveal-item.from-left,
			.reveal-item.from-right {
				opacity: 1 !important;
				transform: none !important;
				filter: none !important;
				transition: none !important;
			}
		}

		.plan-price-old {
			display: block;
			margin-right: 0;
			font-size: 0.62em;
			font-weight: 700;
			color: var(--ink-muted);
			text-decoration: line-through;
			text-decoration-thickness: 2px;
		}

		.plan-price-current {
			display: block;
		}

		/* Index inline styles migrated to shared stylesheet */
		.plans-grid {
			align-items: stretch;
		}

		.plans-grid .plan-bonus-note {
			margin-top: auto;
			min-height: 2.9em;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
		}

		.plans-grid .plan-cta {
			display: flex;
			align-items: center;
			justify-content: center;
			min-height: 48px;
			white-space: nowrap;
		}

		.compare-table {
			max-width: 100%;
			table-layout: fixed;
		}

		.compare-table th,
		.compare-table td {
			overflow-wrap: anywhere;
			word-break: break-word;
			min-width: 0;
		}

		.compare-table .in-table-cta {
			display: block;
			max-width: 100%;
			white-space: normal;
		}

		.gami-steps {
			list-style: none;
			display: flex;
			flex-direction: column;
			gap: 12px;
			margin: 0;
			padding: 0;
		}

		.gami-steps li {
			display: flex;
			align-items: center;
			gap: 12px;
			padding: 14px 18px;
			background: var(--surface);
			border: 1px solid var(--border);
			border-radius: var(--radius);
			font-size: 14px;
			font-weight: 600;
			line-height: 1.5;
			transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease, background 0.24s ease;
			will-change: transform;
		}

		.gami-steps li:hover,
		.gami-steps li:focus-within {
			background: linear-gradient(135deg, rgba(219,234,254,0.95) 0%, rgba(191,219,254,0.88) 100%);
			transform: translateY(-4px) translateX(4px);
			box-shadow: 0 14px 28px rgba(37,99,235,0.20);
			border-color: color-mix(in srgb, var(--blue) 35%, var(--border));
		}

		html[data-theme="dark"] .gami-steps li:hover,
		html[data-theme="dark"] .gami-steps li:focus-within {
			color: #0f172a;
		}

		html[data-theme="dark"] .gami-steps li:hover::before,
		html[data-theme="dark"] .gami-steps li:focus-within::before {
			color: #1d4ed8;
		}

		.gami-steps li:hover::before,
		.gami-steps li:focus-within::before {
			transform: scale(1.25) rotate(180deg);
		}

		.gami-steps li::before {
			content: "\2022";
			color: var(--blue);
			font-size: 16px;
			flex-shrink: 0;
			transition: transform 0.24s ease;
		}

		.gami-steps li.gami-step-muted {
			color: var(--ink-muted);
			background: var(--bg-alt);
			border-style: dashed;
		}

		.gami-steps li.gami-step-muted::before {
			color: var(--ink-muted);
		}

		.gami-steps li.gami-step-muted:hover,
		.gami-steps li.gami-step-muted:focus-within {
			background: var(--bg-alt);
			transform: none;
			box-shadow: none;
			border-color: var(--border);
		}

		.gami-steps li.gami-step-muted:hover::before,
		.gami-steps li.gami-step-muted:focus-within::before {
			transform: none;
		}

		@media (max-width: 640px) {
			.plans-grid .plan-bonus-note {
				min-height: auto;
			}

			.plans-grid .plan-cta {
				white-space: normal;
			}
		}

		@media (max-width: 560px) {
			.profile-grid,
			.profile-grid-span-2,
			.contact-form-grid {
				grid-template-columns: 1fr;
			}

			.create-service-billing {
				flex-direction: column;
				align-items: stretch;
			}

			.compare-table {
				font-size: 11px;
			}

			.compare-table th,
			.compare-table td {
				padding: 8px 6px;
			}
		}

		@media (max-width: 1024px) {
			.header-nav {
				display: none;
			}

			.header-controls {
				padding-left: 8px !important;
				padding-right: 8px !important;
				box-sizing: border-box;
			}

			.mobile-toggle {
				display: flex;
			}

			.header-inner {
				position: relative;
				padding-left: 12px !important;
				padding-right: 12px !important;
			}

			.header-nav.open {
				display: flex;
				flex-direction: column;
				position: absolute;
				top: 100%;
				left: 0;
				right: 0;
				background: var(--bg);
				border-bottom: 1px solid var(--border);
				padding: 16px 24px;
				gap: 12px;
				z-index: 99;
			}
		}

/* Header control size unification (index + admin) */
:root {
	--header-control-height: 38px;
}

.header-auth-btn,
.lang-dropdown-summary,
.theme-btn,
.mobile-toggle {
	height: var(--header-control-height);
	min-height: var(--header-control-height);
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.header-auth-btn {
	padding-top: 0;
	padding-bottom: 0;
}

.lang-dropdown-summary {
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 12px;
	padding-right: 12px;
}

.theme-btn,
.mobile-toggle {
	width: var(--header-control-height);
	padding: 0;
}

@media (max-width: 1200px) {
	.header-inner {
		height: auto;
		flex-wrap: wrap;
		row-gap: 8px;
		padding-top: 8px;
		padding-bottom: 8px;
	}

	.header .logo {
		flex: 1 1 100%;
		width: 100%;
		justify-content: center;
		text-align: center;
	}

	.header-nav {
		order: 2;
		flex: 1 1 auto;
		gap: 12px;
	}

	.header-controls {
		order: 3;
		margin-left: auto;
	}
}

/* GDPR consent checkbox (global, desktop + mobile) */
.reg-field .reg-consent-label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	line-height: 1.45;
	cursor: pointer;
	color: rgba(255,255,255,0.9);
}

.reg-field .reg-consent-label span {
	padding-top: 1px;
}

.reg-field input.reg-consent-checkbox {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	min-height: 24px;
	margin: 0;
	padding: 0;
	border-radius: 7px;
	border: 1px solid rgba(255,255,255,0.42);
	background: rgba(255,255,255,0.14);
	position: relative;
	display: inline-block;
	vertical-align: top;
	transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
}

.reg-field input.reg-consent-checkbox:checked {
	background: #1d4ed8;
	border-color: #93c5fd;
}

.reg-field input.reg-consent-checkbox:checked::after {
	content: '';
	position: absolute;
	left: 8px;
	top: 4px;
	width: 6px;
	height: 11px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.reg-field input.reg-consent-checkbox:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(147,197,253,0.35);
	border-color: #bfdbfe;
}

.reg-field .reg-consent-label a {
	color: var(--consent-link);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.reg-field .reg-consent-label a:hover {
	color: var(--consent-link-hover);
}
